Input Component

A reusable, accessible Input component built with React and Tailwind CSS. Supports error states, all native HTML input attributes, and custom styling via className.

Installation

Ensure the following are set up in your project:

• Tailwind CSS
• cn utility (e.g. from clsx + tailwind-merge)

Then copy the component into your project:

components/
└── ui/
    └── Input.tsx

Usage

Basic

<Input placeholder="Enter your name" />

With Error Message

<Input
  type="email"
  placeholder="Enter your email"
  error="Please enter a valid email address."
/>

Disabled

<Input placeholder="Cannot edit this" disabled />

With onChange Handler

const [value, setValue] = useState('');

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Type something..."
/>

File Input

<Input type="file" />

Props

| Prop | Type | Default | Description | |---------------|------------------------------------------------|------------------|----------------------------------------------------------------------| | error | string | undefined | Displays a red error message below the input and applies a red border | | type | string | "text" | Native HTML input type (text, email, password, file, etc.) | | placeholder | string | "Enter text.." | Placeholder text shown when the input is empty | | className | string | undefined | Additional Tailwind or CSS classes applied to the input | | disabled | boolean | false | Disables the input and shows a not-allowed cursor | | ref | React.Ref<HTMLInputElement> | — | Forwarded ref for direct DOM access | | ...props | React.InputHTMLAttributes<HTMLInputElement> | — | All standard HTML input attributes are supported |

Error State

When the error prop is provided:

• The input border turns red (#FF0000) with a 2px width
• An error message is rendered below the input in red

<Input
  type="password"
  placeholder="Enter password"
  error="Password must be at least 8 characters."
/>

Styling

The component uses Tailwind CSS for base styles and accepts a className prop for overrides. Border color and width are controlled via inline styles to reliably override Tailwind defaults:

| State | Border Color | Border Width | |----------|--------------|--------------| | Default | #929292 | 1px | | Error | #FF0000 | 2px | | Disabled | #929292 | 1px + 50% opacity |

To customize the appearance, pass a className:

<Input className="rounded-lg h-12 text-base" />

Accessibility

• Uses a native <input> element for full browser and screen reader support
• Error messages are rendered as a <p> tag directly below the input
• disabled state applies disabled:cursor-not-allowed and disabled:opacity-50
• Supports ref forwarding for use with form libraries like react-hook-form

Integration with React Hook Form

import { useForm } from 'react-hook-form';
import { Input } from '@/components/ui/Input';

const { register, formState: { errors } } = useForm();

<Input
  {...register('email', { required: 'Email is required' })}
  type="email"
  placeholder="Enter your email"
  error={errors.email?.message}
/>

License

MIT

Loader Component

A fullscreen animated bar-wave loader with a semi-transparent overlay. Uses alternating brand colors and a staggered CSS animation for a smooth, rhythmic loading indicator.

Usage

import { Loader } from '@/components/ui/Loader';

export default function App() {
  const [loading, setLoading] = useState(true);

  return (
    <>
      {loading && <Loader />}
      <main>Your page content</main>
    </>
  );
}

Behavior

• Renders a fixed fullscreen overlay (z-[9999]) with a dark semi-transparent background (bg-black/40)
• Displays 6 animated bars in the center, alternating between two brand colors
• Each bar animates with a staggered wave effect (scaleY) creating a ripple motion
• The overlay sits on top of all page content and blocks interaction while active

Animation

| Property | Value | |-------------------|------------------------------| | Animation | bar-wave (scaleY wave) | | Duration | 1s | | Timing function | ease-in-out | | Iteration | infinite | | Stagger per bar | 0.1s |

Keyframes:

0%, 100%  → scaleY(0.2)   (compressed)
50%       → scaleY(1)     (full height)

Bar Colors

Bars alternate between two brand colors:

| Bar | Delay | Color | Hex | |-----|--------|-----------|-----------| | 1 | 0.0s | Yellow | #FFCA29 | | 2 | 0.1s | Navy Blue | #003B71 | | 3 | 0.2s | Yellow | #FFCA29 | | 4 | 0.3s | Navy Blue | #003B71 | | 5 | 0.4s | Yellow | #FFCA29 | | 6 | 0.5s | Navy Blue | #003B71 |

Customization

Change Colors

Edit the color property on each nth-child span inside the <style> block:

.loader span:nth-child(1) { color: #YOUR_COLOR; }
.loader span:nth-child(2) { color: #YOUR_COLOR; }

Change Bar Size

.loader span {
  width: 10px;   /* bar width */
  height: 50px;  /* bar height */
}

Change Speed

.loader span {
  animation: bar-wave 0.7s ease-in-out infinite; /* faster */
}

Change Overlay Opacity

Update the Tailwind class on the wrapper div:

{/* lighter */}
<div className="fixed inset-0 z-[9999] bg-black/20 ...">

{/* darker */}
<div className="fixed inset-0 z-[9999] bg-black/60 ...">

Conditional Rendering

Control visibility by conditionally rendering the component:

{isLoading && <Loader />}

Or toggle with a state variable after an async operation:

const [loading, setLoading] = useState(false);

const handleSubmit = async () => {
  setLoading(true);
  await saveData();
  setLoading(false);
};

return (
  <>
    {loading && <Loader />}
    <button onClick={handleSubmit}>Save</button>
  </>
);

Props

This component accepts no props. It is a self-contained, zero-configuration loader.

MIT

"# Multi-select component is developed" "# Text Area component is developed"

ProgressBar

Basic Usage

import { ProgressBar } from "@digitus-fci-oa/notifications";

<ProgressBar value={60} />

With Label

<ProgressBar
  value={75}
  showLabel
  label="Uploading..."
/>

Without Percentage

<ProgressBar
  value={40}
  showPercentage={false}
/>

Custom Height

<ProgressBar
  value={50}
  height="h-4"
/>

Custom Colors

<ProgressBar
  value={80}
  backgroundColor="bg-gray-100"
  progressColor="bg-green-500"
/>

Animated

<ProgressBar
  value={65}
  animated
/>

Striped

<ProgressBar
  value={55}
  striped
/>

Striped + Animated

<ProgressBar
  value={70}
  striped
  animated
/>

Vertical Orientation

<ProgressBar
  value={60}
  orientation="vertical"
/>

With Test Id

<ProgressBar
  value={50}
  dataTestId="upload-progress"
/>

Props

| Prop | Type | Default | Description | | --------------------- | ---------------------------- | ---------------- | ----------------------------------------------- | | value | number | — | Progress value between 0 and 100 (required) | | showLabel | boolean | false | Shows the label text | | label | string | undefined | Label text displayed alongside the bar | | showPercentage | boolean | true | Shows percentage value next to the bar | | height | string | "h-2" | Tailwind height class for horizontal bar | | containerClassName | string | undefined | Custom class for the bar track container | | progressClassName | string | undefined | Custom class for the filled progress bar | | wrapperClassName | string | undefined | Custom class for the outermost wrapper | | labelClassName | string | undefined | Custom class for the label text | | percentageClassName | string | undefined | Custom class for the percentage text | | backgroundColor | string | "bg-gray-200" | Tailwind class for the track background color | | progressColor | string | "bg-[#02245A]" | Tailwind class for the filled bar color | | animated | boolean | true | Enables smooth transition animation | | striped | boolean | false | Adds diagonal stripe pattern to the bar | | orientation | "horizontal" \| "vertical" | "horizontal" | Controls the direction of the progress bar | | dataTestId | string | undefined | Test id for automation/testing |

Toast Component

A simple reusable toast/modal component for displaying status messages.

To Import

import Toast from './components/Toast/Toast';

Usage

<Toast
  width="300px"
  isOpen={true}
  onClose={() => {}}
  message="Operation completed successfully!"
  icon={<ErrorIcon />}
/>