@hari_digitus/sms-ui-library 4.0.12 → 4.0.14

package/dist/types/components/Loader/Loader.d.ts

@@ -0,0 +1 @@
+export declare function Loader(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+    footer?: any;
+    width?: string;
+    showCloseIcon: any;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/types/components/Modal/Modal.types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    width?: string;
+};

package/dist/types/components/Popover/Popover.d.ts

@@ -0,0 +1,15 @@
+import { type FC, type CSSProperties } from "react";
+type Position = "top" | "bottom" | "left" | "right";
+export interface TextPopoverProps {
+    text: string;
+    maxLength?: number;
+    maxWidth?: number;
+    position?: Position;
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TextPopover: FC<TextPopoverProps>;
+export default TextPopover;

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface ProgressBarProps {
+    value: number;
+    showLabel?: boolean;
+    label?: string;
+    showPercentage?: boolean;
+    height?: string;
+    containerClassName?: string;
+    progressClassName?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    percentageClassName?: string;
+    backgroundColor?: string;
+    progressColor?: string;
+    animated?: boolean;
+    striped?: boolean;
+    orientation?: "horizontal" | "vertical";
+    dataTestId?: string;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/types/components/Toast/Toast.d.ts

@@ -0,0 +1,3 @@
+import { ToastProps } from "./Toast.types";
+declare function Toast({ message, type, isVisible, onClose }: ToastProps): import("react/jsx-runtime").JSX.Element | null;
+export default Toast;

package/dist/types/components/Toast/Toast.types.d.ts

@@ -0,0 +1,7 @@
+export type ToastType = "success" | "error" | "warning" | "info";
+export interface ToastProps {
+    message: string;
+    type: ToastType;
+    isVisible: boolean;
+    onClose: () => void;
+}

package/dist/types/icons/icon.d.ts

@@ -1,4 +1,4 @@
-import CalenderIcon from './calendar.svg?react';
-import ArrowDownIcon from './arrow-down.svg?react';
-import SearchIcon from './search-icon.svg?react';
-export { CalenderIcon, ArrowDownIcon, SearchIcon };
+import SaveIcon from './save-icon.svg?react';
+import CloseIcon from './close.svg?react';
+import ErrorIcon from './error-icon.svg?react';
+export { SaveIcon, CloseIcon, ErrorIcon };

package/dist/types/index.d.ts

@@ -1,13 +1,9 @@
-import "./index.css";
-export { default as Radio } from "./components/RadioButton/RadioButton";
-export { default as ToggleSwitch } from "./components/ToggleButton/ToggleSwitch";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";
-export { Textarea } from "./components/TextArea/textarea";
-export { MultiSelect } from "./components/MultiSelect/MultiSelect";
-export { default as DragDropUpload } from "./components/DragDropUpload/DragDropUpload";
-export { Select } from "./components/Select/Select";
-export type { SelectFieldProps, SelectOption } from "./components/Select/Select";
-export { Input } from "./components/InputFields/Input";
-export { default as CustomDatePicker } from "./components/DatePicker/DatePicker";
-export { default as SingleSelect } from "./components/SingleSelect/SingleSelect";
-export { default as Tooltip } from "./components/Tooltip/Tooltip";
+export { cn } from "./lib/utils";
+export { Loader } from "./components/Loader/Loader";
+export { ProgressBar } from "./components/ProgressBar/ProgressBar";
+export { TextPopover } from "./components/Popover/Popover";
+export type { TextPopoverProps } from "./components/Popover/Popover";
+export { default as Toast } from "./components/Toast/Toast";
+export type { ToastProps } from "./components/Toast/Toast.types";
+export { default as Modal } from "./components/Modal/Modal";
+export type { ModalProps } from "./components/Modal/Modal.types";

package/package.json

@@ -1,51 +1,47 @@
 {
-  "name": "@hari_digitus/sms-ui-library",
-  "version": "4.0.12",
-  "main": "dist/form-controls.cjs.js",
-  "module": "dist/form-controls.es.js",
+    "name": "@hari_digitus/sms-ui-library",
+  "version": "4.0.14",
+  "main": "dist/notifications.cjs.js",
+  "module": "dist/notifications.es.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/form-controls.es.js",
-      "require": "./dist/form-controls.cjs.js"
-    },
-    "./dist/form-controls.css": "./dist/form-controls.css",
-    "./style.css": "./dist/form-controls.css"
+      "import": "./dist/notifications.es.js",
+      "require": "./dist/notifications.cjs.js"
+    }
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "vite build && npx tsc --emitDeclarationOnly",
-    "dev": "vite build --watch",
-    "test": "vite"
+    "dev": "vite build --watch"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/digitus-git/AFCI_OffAuto/tree/develop_rel_phase1/packages"
   },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
   "devDependencies": {
-    "@types/react": "^18.3.1",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "typescript": "^4.9.5",
     "vite": "^6.0.0",
     "vite-plugin-svgr": "^5.2.0"
   },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "dependencies": {
     "@radix-ui/react-select": "^2.2.6",
-    "@tailwindcss/postcss": "^4.3.0",
-    "autoprefixer": "^10.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
     "lucide-react": "^1.16.0",
-    "postcss": "^8.5.15",
-    "react-datepicker": "^8.7.0",
-    "tailwind-merge": "3.2.0",
-    "tailwindcss": "^4.3.0"
+    "tailwind-merge": "3.2.0"
   }
 }

package/README.md

@@ -1,510 +0,0 @@
-To import CSS, use:
-
-```js/ts
-import "@digitus-fci-oa/form-controls/style.css";
-```
-
-# CustomDatePicker
-
-## Single Date
-
-```tsx
-<CustomDatePicker
-  mode="date"
-  value={date}
-  onChangeSingle={setDate}
-/>
-```
-
----
-
-## Date & Time
-
-```tsx
-<CustomDatePicker
-  mode="dateTime"
-  value={dateTime}
-  onChangeSingle={setDateTime}
-/>
-```
-
----
-
-## Date Range
-
-```tsx
-<CustomDatePicker
-  mode="range"
-  fromDate={startDate}
-  endDate={endDate}
-  onRangeChange={(start, end) => {
-    setStartDate(start)
-    setEndDate(end)
-  }}
-/>
-```
----
-
-# Checkbox
-
-## Basic Checkbox
-
-```tsx
-import { Checkbox } from "@digitus-fci-oa/form-controls";
-import { useState } from "react";
-
-export default function TestCheckbox() {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <Checkbox
-      label="Mandatory Field"
-      checked={checked}
-      onChange={setChecked}
-    />
-  );
-}
-```
-
----
-
-## Checkbox With Required
-
-```tsx
-<Checkbox
-  label="Accept Terms & Conditions"
-  checked={checked}
-  onChange={setChecked}
-  required
-/>
-```
-
----
-
-## Disabled Checkbox
-
-```tsx
-<Checkbox
-  label="Disabled Checkbox"
-  checked={true}
-  onChange={setChecked}
-  disabled
-/>
-```
-
----
-
-## Checkbox With Test Id
-
-```tsx
-<Checkbox
-  label="Mandatory Field"
-  checked={checked}
-  onChange={setChecked}
-  dataTestId="mandatory-checkbox"
-/>
-```
-npm install @digitus-fci-oa/form-controls
-
-```
-import { DragDropUpload } from "@digitus-fci-oa/form-controls";
-import { Upload } from "lucide-react";
-
-function App() {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const [isDragging, setIsDragging] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-
-  return (
-    <DragDropUpload
-      inputRef={inputRef}
-      isDragging={isDragging}
-      isUploading={isUploading}
-      disabled={false}
-      multiple={true}
-      accept=".pdf,.doc,.docx,.png,.jpg"
-      onFilesChange={(files) => {
-        console.log(files);
-      }}
-      onDrop={(e) => {
-        e.preventDefault();
-        setIsDragging(false);
-      }}
-      onDragOver={(e) => {
-        e.preventDefault();
-        setIsDragging(true);
-      }}
-      onDragLeave={() => {
-        setIsDragging(false);
-      }}
-      onClick={() => inputRef.current?.click()}
-      title="Drag & Drop Files Here"
-      subtitle="or"
-      buttonText="Browse"
-      uploadingText="Uploading files..."
-      footerText="(File Size Max 10MB)"
-      icon={<Upload className="w-12 h-12" />}
-      buttonClassName="
-        !px-[25px]
-        !py-[6px]
-        !bg-[#1570EF]
-        text-white
-        hover:bg-[#0047a3]
-      "
-    />
-  );
-}
-
-```
----
-
-## Props
-
-| Prop             | Type                          | Default     | Description                          |
-| ---------------- | ----------------------------- | ------------ | ------------------------------------ |
-| `label`          | `string`                      | `undefined` | Checkbox label text                 |
-| `checked`        | `boolean`                     | `false`     | Controls checked state              |
-| `onChange`       | `(checked: boolean) => void` | �            | Triggered when checkbox changes     |
-| `disabled`       | `boolean`                     | `false`     | Disables checkbox                   |
-| `id`             | `string`                      | `undefined` | HTML id for checkbox                |
-| `className`      | `string`                      | `""`         | Custom wrapper class                |
-| `labelClassName` | `string`                      | `""`         | Custom label class                  |
-| `required`       | `boolean`                     | `false`     | Shows required asterisk             |
-| `dataTestId`     | `string`                      | `undefined` | Test id for automation/testing      |
-| `onFilesChange`  | `(files: FileList \| null) => void` | `undefined` | Callback triggered when files are 
-| `accept`         | `string`                       | `"*"`        |          Allowed file types |
-| `multiple`       | `boolean`                      | `true`       |     Allows multiple file selection |
-| `disabled`       | `boolean`                      | `false`      | Disables uploader interactions |
-| `isUploading`     |    `boolean`                  | `false`      | Shows uploading state |
-| `title`         | `string`                        | `"Drag & Drop Files Here"` | Main upload area itle |
-| `subtitle`       | `string`                       | `"or"`            | Subtitle text below title |
-| `buttonText`     |`string`                        | `"Browse"`                    | Browse button text |
-| `uploadingText` | `string`                        | `"Uploading files..."`    | Uploading message text |
-| `footerText`     | `string`                        | `"(File Size Max 10MB)"`    | Footer/helper text |
-| `icon`            | `React.ReactNode`              | `undefined`             | Custom upload icon |
-| `containerClassName`   | `string`                   | `""`        | Custom wrapper/container class |
-| `dropZoneClassName`    | `string`                   | `""`        | Custom dropzone class |
-| `buttonClassName`      | `string`                 | `""`           | Custom browse button class |
-| `inputId`            | `string`                     | `"file-upload"`   | Custom input element id |
-
-
-
-# MultiSelect Component
-
-A lightweight, accessible multi-select dropdown built with React and Tailwind CSS.
-
----
-
-## Usage
-
-```tsx
-import { MultiSelect } from "./components/MultiSelect";
-
-const options = [
-  { label: "Apple", value: "apple" },
-  { label: "Banana", value: "banana" },
-  { label: "Cherry", value: "cherry" },
-];
-
-function App() {
-  const [selected, setSelected] = React.useState<string[]>([]);
-
-  return (
-    <MultiSelect
-      options={options}
-      value={selected}
-      onChange={setSelected}
-      placeholder="Select fruits..."
-    />
-  );
-}
-```
-
-```
-interface TooltipProps {
-
-    value: string;
-    icon?: React.ReactNode;
-}
-import Tooltip from "@digitus-fci-oa/form-controls";
-
-<Tooltip
-  value="View Questionnaire"
-  icon={
-    <Eye
-      size={16}
-      className="cursor-pointer text-blue-600"
-    />
-  }
-/>
-
-
-```
-
----
-
-## Props
-
-| Prop          | Type                          | Required | Default        | Description                              |
-|---------------|-------------------------------|----------|----------------|------------------------------------------|
-| `options`     | `Option[]`                    | ✅        | —              | List of options to display               |
-| `value`       | `string[]`                    | ✅        | —              | Currently selected values                |
-| `onChange`    | `(value: string[]) => void`   | ✅        | —              | Callback when selection changes          |
-| `placeholder` | `string`                      | ❌        | `"Select..."` | Text shown when nothing is selected      |
-| `error`       | `string`                      | ❌        | —              | Error message shown below the dropdown   |
-  value="View Questionnaire"| `string`    |                              |  text                 
-
-### Option Type
-
-```ts
-interface Option {
-  label: string;  // Display text
-  value: string;  // Underlying value
-}
-```
-
----
-
-## Features
-
-- Multi-selection with toggle behavior (click to select/deselect)
-- Selected labels shown as comma-separated text in the trigger button
-- Dropdown opens/closes on button click
-- Red border and error message on validation failure via `error` prop
-- Scrollable list capped at `max-h-60`
-- Checkmark indicator on selected items
-
----
-
-## Error State
-
-Pass an `error` string to show validation feedback:
-
-```tsx
-<MultiSelect
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  error="Please select at least one option."
-/>
-```
-
----
-
-## Close on Outside Click
-
-The dropdown does not close automatically on outside click. Add this to your component if needed:
-
-
-```
-
----
-
-## Dependencies
-
-| Package         | Purpose                        |
-|-----------------|--------------------------------|
-| `lucide-react`  | Icons (`ChevronDown`, `Check`) |
-| `tailwindcss`   | Utility-based styling          |
-| `clsx` / `tailwind-merge` | `cn()` utility for class merging |
-
----
-
-## File Structure
-
-```
-src/
-├── components/
-│   └── MultiSelect.tsx   ← Component file
-└── lib/
-    └── utils.ts          ← cn() utility
-```
-
-
-
-
-
-# Textarea Component
-
-A resizable textarea input built with React and Tailwind CSS, with built-in error state support.
-
----
-
-## Usage
-
-```tsx
-import { Textarea } from "./components/Textarea";
-
-function App() {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <Textarea
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      placeholder="Enter your text here..."
-    />
-  );
-}
-```
-
----
-
-## Props
-
-| Prop        | Type      | Required | Default                      | Description                                              |
-|-------------|-----------|----------|------------------------------|----------------------------------------------------------|
-| `error`     | `string`  | ❌        | —                            | Error message displayed below the textarea               |
-| `className` | `string`  | ❌        | —                            | Additional Tailwind classes to merge                     |
-| `ref`       | `Ref`     | ❌        | —                            | Forwarded ref to the underlying `<textarea>` element    |
-| ...rest     | `React.TextareaHTMLAttributes` | ❌ | —               | All standard HTML textarea attributes (`onChange`, `disabled`, `rows`, etc.) |
-
-> Extends all native `React.TextareaHTMLAttributes<HTMLTextAreaElement>` props.
-
----
-
-## Features
-
-- Forwarded ref support via `React.forwardRef`
-- Built-in error state with red border and error message
-- Fixed height of `4.5rem` with `resize-none` by default
-- Custom `className` support with `cn()` merge utility
-- Default placeholder text
-
----
-
-## Error State
-
-Pass an `error` string to highlight the field and show a message:
-
-```tsx
-<Textarea
-  value={value}
-  onChange={(e) => setValue(e.target.value)}
-  error="This field is required."
-/>
-```
-
----
-
-## With React Hook Form
-
-```tsx
-import { useForm } from "react-hook-form";
-import { Textarea } from "./components/Textarea";
-
-function Form() {
-  const { register, formState: { errors } } = useForm();
-
-  return (
-    <Textarea
-      {...register("description", { required: "Description is required" })}
-      error={errors.description?.message}
-    />
-  );
-}
-```
-
----
-
-## Customizing Height
-
-Override the default height using `className`:
-
-```tsx
-<Textarea className="h-32" />   {/* taller */}
-<Textarea className="h-20" />   {/* shorter */}
-```
-
----
-
-## Dependencies
-
-| Package                   | Purpose                          |
-|---------------------------|----------------------------------|
-| `react`                   | `forwardRef`, `TextareaHTMLAttributes` |
-| `tailwindcss`             | Utility-based styling            |
-| `clsx` / `tailwind-merge` | `cn()` utility for class merging  |
-
----
-
-## File Structure
-
-```
-src/
-├── components/
-│   └── Textarea.tsx   ← Component file
-└── lib/
-    └── utils.ts       ← cn() utility
-```
-## Toggle Switch 
-
-## Usage
-import { ToggleSwitch } from "@digitus-fci-oa/form-controls";
-import { useState } from "react";
-
-export default function TestToggleSwitch() {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <ToggleSwitch
-      checked={enabled}
-      onChange={setEnabled}
-      label={enabled ? "Yes" : "No"}
-    />
-  );
-}
-
-## Props
-
-| Prop       | Type                         | Default     | Description                         |
-| ---------- | ---------------------------- | ----------- | ----------------------------------- |
-| `checked`  | `boolean`                    | `false`     | Controls toggle state               |
-| `onChange` | `(checked: boolean) => void` | —           | Triggered when toggle state changes |
-| `disabled` | `boolean`                    | `false`     | Disables toggle interaction         |
-| `label`    | `string`                     | `undefined` | Optional label beside toggle        |
-
-
-# RadioButton
-
-import { Radio } from "@digitus-fci-oa/form-controls";
-import { useState } from "react";
-
-export default function TestRadio() {
-  const [selected, setSelected] = useState("yes");
-
-  return (
-    <div className="flex gap-4">
-
-      <Radio
-        label="Yes"
-        name="approval"
-        value="yes"
-        checked={selected === "yes"}
-        onChange={setSelected}
-      />
-
-      <Radio
-        label="No"
-        name="approval"
-        value="no"
-        checked={selected === "no"}
-        onChange={setSelected}
-      />
-
-    </div>
-  );
-}
-
-## Props
-
-| Prop       | Type                      | Default     | Description                           |
-| ---------- | ------------------------- | ----------- | ------------------------------------- |
-| `label`    | `string`                  | `undefined` | Radio label text                      |
-| `name`     | `string`                  | —           | Shared group name for radio selection |
-| `value`    | `string`                  | —           | Value of radio option                 |
-| `checked`  | `boolean`                 | `false`     | Controls selected state               |
-| `onChange` | `(value: string) => void` | —           | Triggered when option changes         |
-| `disabled` | `boolean`                 | `false`     | Disables radio interaction            |
-