sangam-ui 0.1.8 → 0.1.10

package/README.md

@@ -107,7 +107,7 @@ module.exports = {
 ### 5.2 Configure Tailwind — use the Sangam preset
 
 > [!IMPORTANT]
-> At your **project root**, Always spread `...sangamTailwind` and extend its `content` array — **never replace it**. Replacing it strips the Sangam theme (colors, spacing, radii, shadows, darkMode) and component class paths, causing broken styles.
+> At your **project root**, create a `tailwind.config.cjs` file. Always spread `...sangamTailwind` and extend its `content` array — **never replace it**. Replacing it strips the Sangam theme (colors, spacing, radii, shadows, darkMode) and component class paths, causing broken styles.
 
 ```js
 // tailwind.config.cjs
@@ -127,6 +127,41 @@ module.exports = {
 
 Spreading `...sangamTailwind` gives you the Sangam theme (colors, spacing, radii, shadows), `darkMode` setting, and any plugins — without having to duplicate them.
 
+#### Base44: using `.js` config files
+
+If your project (e.g. **Base44**) expects `postcss.config.js` and `tailwind.config.js` instead of `.cjs`, use the same content with the `.js` extension:
+
+**postcss.config.js**
+
+```js
+// postcss.config.js
+export default {
+  plugins: {
+    "postcss-import": {}, // MUST be first: inlines @import before Tailwind sees the file
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+**tailwind.config.js**
+
+```js
+// tailwind.config.js
+import sangamTailwind from "@esds-sangam/tailwind-config";
+ 
+/** @type {import('tailwindcss').Config} */
+export default {
+  ...sangamTailwind,
+  content: [
+    ...sangamTailwind.content,
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/sangam-ui/dist/**/*.{js,mjs}",
+  ],
+};
+```
+
 ### 5.3 Wire styles — single CSS entry file
 
 > [!IMPORTANT]

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Sangam Button Component
@@ -571,7 +572,7 @@ declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & Re
  * Sangam Textarea Component
  *
  * Production-grade textarea following Figma design specs:
- * - Width: Fixed 450px
+ * - Width: 100% with min-width 450px (responsive, matches Input pattern)
  * - Height: Fixed 96px
  * - Colors: Neutral, Red, Green from colors.json
  * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
@@ -1095,87 +1096,50 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
  */
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 
+/** Toast entry for the provider (id, content, optional duration in ms; default 4000) */
+interface ToastEntryOptions {
+    title: string;
+    variant?: "info" | "success" | "warning" | "error";
+    description?: string;
+    ctaText?: string;
+    onCtaClick?: () => void;
+    showClose?: boolean;
+    /** Duration in ms before auto-dismiss. @default 4000 */
+    duration?: number;
+}
+interface ToastEntry extends ToastEntryOptions {
+    id: string;
+}
+type ToastContextValue = {
+    toasts: ToastEntry[];
+    addToast: (options: ToastEntryOptions) => void;
+    removeToast: (id: string) => void;
+};
 /**
- * Sangam Toast Component
- *
- * Production-grade toast notification following Figma design specs:
- * - Fixed width: 384px
- * - Height: 56px (default), 84px (with description or CTA)
- * - Border radius: 8px
- * - Left border width: 3px
- * - Padding: 16px
- * - Background: white (neutral-50)
- * - Title: 16px, 500 weight, 24px line-height, neutral-1100 color
- * - Description: 14px, 400 weight, 24px line-height, neutral-600 color
- * - Shadow: 0px 4px 10px 0px
- * - Close icon: 16x16
- * - Status icon: 20x20
- * - CTA Button: radius 8px, padding 4px 16px
- *
- * Four color variants (token-based):
- * 1. Info - blue-600 border/icon
- * 2. Success - green-800 border/icon
- * 3. Warning - orange-700 border/icon
- * 4. Error - red-800 border/icon
- *
- * Three layout variants:
- * 1. Default - Title only (56px height)
- * 2. With Description - Title + description + close (84px height)
- * 3. With CTA - Title + button (84px height, no description)
- *
- * @example Basic usage
- * <Toast variant="info" title="Info message" />
- *
- * @example With description
- * <Toast variant="success" title="Success!" description="Your changes have been saved" />
- *
- * @example With CTA button
- * <Toast variant="info" title="New update" ctaText="Update" onCtaClick={() => {}} />
+ * Hook to show toasts. Must be used inside ToastProvider.
+ * Each call to addToast() shows a new toast; toasts stack from the top (60px from top) and auto-dismiss after 4 seconds.
+ */
+declare function useToast(): ToastContextValue;
+/**
+ * Provider for toast notifications. Renders toasts in a fixed container 60px from the top, stacked vertically.
+ * Toasts auto-dismiss after 4 seconds (configurable per toast via duration).
  */
+declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
 declare const toastVariants: (props?: ({
     variant?: "error" | "success" | "info" | "warning" | null | undefined;
     layout?: "default" | "withDescription" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastVariants> {
-    /**
-     * Toast variant type
-     * @default "info"
-     */
     variant?: "info" | "success" | "warning" | "error";
-    /**
-     * Title text (required)
-     */
     title: string;
-    /**
-     * Description text (optional)
-     * When provided, toast height becomes 84px
-     */
     description?: string;
-    /**
-     * Whether to show close button
-     * @default true (false when CTA is provided)
-     */
     showClose?: boolean;
-    /**
-     * Callback when close button is clicked
-     */
     onClose?: () => void;
-    /**
-     * CTA button text (optional)
-     * When provided, replaces close button and height becomes 84px
-     */
     ctaText?: string;
-    /**
-     * Callback when CTA button is clicked
-     */
     onCtaClick?: () => void;
 }
-/**
- * Toast component with icon, title, optional description, and close/CTA
- *
- * Displays status-based notification with appropriate icon and border color
- * Supports three layouts: default (56px), with description (84px), with CTA (84px)
- */
 declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -1431,4 +1395,4 @@ type Size = "sm" | "md" | "lg";
 type Variant = "primary" | "secondary" | "outline" | "ghost";
 type ColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info";
 
-export { Avatar, Badge, type BaseComponentProps, Button, Checkbox, Chip, type ColorScheme, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, PageFooter, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, type SideMenuItem, type SideMenuProps, type Size, Skeleton, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, type TabsTriggerOption, type TabsTriggerProps, Textarea, Toast, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Upload, UploadFileItem, type UploadFileItemProps, type UploadFileItemStatus, type UploadProps, type Variant, avatarVariants, badgeVariants, buttonVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants };
+export { Avatar, Badge, type BaseComponentProps, Button, Checkbox, Chip, type ColorScheme, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, PageFooter, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, type SideMenuItem, type SideMenuProps, type Size, Skeleton, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, type TabsTriggerOption, type TabsTriggerProps, Textarea, Toast, type ToastEntryOptions, ToastProvider, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Upload, UploadFileItem, type UploadFileItemProps, type UploadFileItemStatus, type UploadProps, type Variant, avatarVariants, badgeVariants, buttonVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants, useToast };

package/dist/index.js

@@ -1248,8 +1248,8 @@ import { Info as Info3, TickmarkFilled as TickmarkFilled2, InfoFilled as InfoFil
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var textareaVariants = cva9(
   [
-    // Base styles
-    "w-[450px] h-24 rounded-sm border transition-all duration-200 ease-out",
+    // Base styles: w-full like Input, min-w-[450px] per design spec
+    "w-full min-w-[450px] h-24 rounded-sm border transition-all duration-200 ease-out",
     "font-sans text-sm leading-6 font-normal",
     // 14px font, 24px line-height, 400 weight
     "px-3 py-1",
@@ -1308,11 +1308,25 @@ var Textarea = React9.forwardRef(
     showCounter = true,
     showLabelIcon = false,
     showHelperIcon = false,
+    onChange,
     ...props
   }, ref) => {
     const variant = error ? "error" : success ? "success" : "default";
-    const isFilled = !!value && value.toString().length > 0;
-    const currentLength = value ? value.toString().length : 0;
+    const [internalLength, setInternalLength] = React9.useState(
+      () => value != null ? value.toString().length : props.defaultValue != null ? String(props.defaultValue).length : 0
+    );
+    const currentLength = internalLength;
+    const isFilled = currentLength > 0;
+    React9.useEffect(() => {
+      if (value !== void 0) setInternalLength(value != null ? value.toString().length : 0);
+    }, [value]);
+    const handleChange = React9.useCallback(
+      (e) => {
+        setInternalLength(e.target.value.length);
+        onChange?.(e);
+      },
+      [onChange]
+    );
     const textareaId = props.id || `textarea-${React9.useId()}`;
     const helperTextId = helperText ? `${textareaId}-helper` : void 0;
     const helperTextColor = error ? "text-red-800" : success ? "text-green-800" : "text-neutral-600";
@@ -1339,6 +1353,7 @@ var Textarea = React9.forwardRef(
           "aria-describedby": helperTextId,
           "aria-invalid": error ? "true" : void 0,
           className: cn9(textareaVariants({ variant, filled: isFilled }), className),
+          onChange: handleChange,
           ...props
         }
       ),
@@ -1515,7 +1530,7 @@ var TooltipContent = React10.forwardRef(
             )
           ] }),
           !title && children,
-          showArrow && /* @__PURE__ */ jsx10("div", { className: cn10(getCaretPosition(), "pointer-events-none"), children: /* @__PURE__ */ jsx10(CaretComponent, { className: "text-neutral-1100" }) })
+          showArrow && /* @__PURE__ */ jsx10("div", { className: cn10(getCaretPosition(), "pointer-events-none text-neutral-1100"), children: /* @__PURE__ */ jsx10(CaretComponent, { className: "text-neutral-1100", "aria-hidden": true }) })
         ]
       }
     ) });
@@ -1956,6 +1971,15 @@ var leadingIconMap = {
   process: InfoFilled4,
   action: InfoFilled4
 };
+var leadingIconOutlinedColorClass = {
+  info: "!text-blue-600",
+  success: "!text-green-800",
+  warning: "!text-orange-700",
+  error: "!text-red-800",
+  neutral: "!text-neutral-1100",
+  process: "!text-purple-700",
+  action: "!text-neutral-400"
+};
 var Badge = React15.forwardRef(
   ({
     className,
@@ -1998,7 +2022,7 @@ var Badge = React15.forwardRef(
               size: leadingIconSize,
               className: cn15(
                 "shrink-0",
-                resolvedAppearance === "solid" ? "text-neutral-50" : "text-neutral-1100"
+                resolvedAppearance === "solid" ? "text-neutral-50" : leadingIconOutlinedColorClass[resolvedState]
               ),
               "aria-hidden": "true"
             }
@@ -2010,7 +2034,7 @@ var Badge = React15.forwardRef(
               size: dropdownChevronSize,
               className: cn15(
                 "shrink-0",
-                resolvedAppearance === "solid" ? "text-neutral-50" : "text-neutral-1100"
+                resolvedAppearance === "solid" ? "text-neutral-50" : leadingIconOutlinedColorClass[resolvedState]
               ),
               "aria-hidden": "true"
             }
@@ -2022,7 +2046,7 @@ var Badge = React15.forwardRef(
               onClick: onCloseClick,
               className: cn15(
                 "shrink-0 p-0 border-0 bg-transparent cursor-pointer rounded inline-flex items-center justify-center",
-                resolvedAppearance === "solid" ? "text-neutral-50" : "text-neutral-1100"
+                resolvedAppearance === "solid" ? "text-neutral-50" : leadingIconOutlinedColorClass[resolvedState]
               ),
               "aria-label": "Dismiss",
               children: /* @__PURE__ */ jsx15(Close4, { size: closeIconSize, "aria-hidden": true })
@@ -2138,25 +2162,101 @@ Chip.displayName = "Chip";
 
 // src/components/toast.tsx
 import * as React17 from "react";
+import { createPortal } from "react-dom";
 import { cva as cva16 } from "class-variance-authority";
 import { cn as cn17 } from "@esds-sangam/utils";
 import { Close as Close6, InfoFilled as InfoFilled5, TickmarkFilled as TickmarkFilled5, WarningFilled as WarningFilled4 } from "@esds-sangam/icons";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var ToastContext = React17.createContext(null);
+var TOAST_DEFAULT_DURATION = 4e3;
+var TOAST_TOP_OFFSET_PX = 0;
+var TOAST_ANIMATION_DURATION_MS = 300;
+function ToastItemWrapper({
+  children,
+  onAnimationEnd
+}) {
+  const [mounted, setMounted] = React17.useState(false);
+  React17.useEffect(() => {
+    const t = requestAnimationFrame(() => {
+      setMounted(true);
+    });
+    return () => cancelAnimationFrame(t);
+  }, []);
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: cn17(
+        "transition-all duration-300 ease-out",
+        mounted ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"
+      ),
+      style: { transitionDuration: `${TOAST_ANIMATION_DURATION_MS}ms` },
+      onTransitionEnd: onAnimationEnd,
+      children
+    }
+  );
+}
+function useToast() {
+  const ctx = React17.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React17.useState([]);
+  const removeToast = React17.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const addToast = React17.useCallback((options) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    const duration = options.duration ?? TOAST_DEFAULT_DURATION;
+    const entry = { ...options, id };
+    setToasts((prev) => [...prev, entry]);
+    const t = setTimeout(() => {
+      removeToast(id);
+    }, duration);
+    return () => clearTimeout(t);
+  }, [removeToast]);
+  const value = React17.useMemo(
+    () => ({ toasts, addToast, removeToast }),
+    [toasts, addToast, removeToast]
+  );
+  return /* @__PURE__ */ jsxs13(ToastContext.Provider, { value, children: [
+    children,
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: "fixed left-0 right-0 z-[100] flex flex-col items-center gap-2 pt-0",
+          style: { top: TOAST_TOP_OFFSET_PX },
+          "aria-live": "polite",
+          role: "region",
+          "aria-label": "Notifications",
+          children: toasts.map((t) => /* @__PURE__ */ jsx17(ToastItemWrapper, { children: /* @__PURE__ */ jsx17(
+            Toast,
+            {
+              variant: t.variant ?? "info",
+              title: t.title,
+              description: t.description,
+              showClose: t.showClose ?? true,
+              onClose: () => removeToast(t.id),
+              ctaText: t.ctaText,
+              onCtaClick: t.onCtaClick
+            }
+          ) }, t.id))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 var toastVariants = cva16(
   [
-    // Base styles
     "flex gap-2",
     "w-[420px]",
-    // 384px fixed width
     "rounded-sm",
-    // 8px = tokens radius.lg
     "bg-white",
     "p-4",
-    // 16px padding
     "border-l-[3px]",
-    // 3px left border
     "shadow-md"
-    // tokens.shadows.md = 0 4px 10px 0 rgba(0,0,0,0.1)
   ],
   {
     variants: {
@@ -2168,9 +2268,7 @@ var toastVariants = cva16(
       },
       layout: {
         default: "h-14 items-center",
-        // 56px, centered vertically
         withDescription: "h-21 items-start"
-        // 84px, top aligned
       }
     },
     defaultVariants: {
@@ -2228,7 +2326,7 @@ var Toast = React17.forwardRef(
                 onClick: onCtaClick,
                 size: "small",
                 variant: "primary",
-                className: "w-auto self-start mt-",
+                className: "w-auto self-start",
                 children: ctaText
               }
             )
@@ -2613,8 +2711,15 @@ var uploadBoxVariants = cva19([
   "rounded-sm border border-dashed border-neutral-400 hover:border-neutral-700",
   "bg-white",
   "transition-colors duration-200 ease-out",
-  "cursor-pointer"
+  "cursor-pointer",
+  "min-h-[120px]"
+  // ensure dropzone has clickable height
 ]);
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 var Upload = React21.forwardRef(
   ({
     className,
@@ -2627,14 +2732,63 @@ var Upload = React21.forwardRef(
     ...props
   }, ref) => {
     const inputRef = React21.useRef(null);
+    const [fileEntries, setFileEntries] = React21.useState([]);
+    const progressIntervalRef = React21.useRef(null);
     const handleClick = () => {
       inputRef.current?.click();
     };
     const handleFiles = (fileList) => {
-      if (!fileList || !onFilesSelected) return;
+      if (!fileList) return;
       const files = Array.from(fileList);
-      if (files.length) onFilesSelected(files);
+      if (files.length) {
+        const newEntries = files.map((file, i) => ({
+          id: `${file.name}-${file.size}-${Date.now()}-${i}`,
+          file,
+          status: "uploading",
+          progress: 0
+        }));
+        setFileEntries((prev) => multiple ? [...prev, ...newEntries] : newEntries);
+        onFilesSelected?.(files);
+      }
     };
+    const removeEntry = (id) => {
+      setFileEntries((prev) => prev.filter((e) => e.id !== id));
+    };
+    const setEntryStatus = (id, status, progress) => {
+      setFileEntries(
+        (prev) => prev.map(
+          (e) => e.id === id ? { ...e, status, ...progress !== void 0 ? { progress } : {} } : e
+        )
+      );
+    };
+    React21.useEffect(() => {
+      const uploading = fileEntries.filter((e) => e.status === "uploading");
+      if (uploading.length === 0) return;
+      const steps = [10, 50, 100];
+      let stepIndex = 0;
+      progressIntervalRef.current = setInterval(() => {
+        stepIndex++;
+        if (stepIndex > steps.length) {
+          if (progressIntervalRef.current) {
+            clearInterval(progressIntervalRef.current);
+            progressIntervalRef.current = null;
+          }
+          setFileEntries(
+            (prev) => prev.map(
+              (e) => e.status === "uploading" ? { ...e, progress: 100, status: "complete" } : e
+            )
+          );
+          return;
+        }
+        const value = steps[stepIndex - 1];
+        setFileEntries(
+          (prev) => prev.map((e) => e.status === "uploading" ? { ...e, progress: value } : e)
+        );
+      }, 400);
+      return () => {
+        if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+      };
+    }, [fileEntries.filter((e) => e.status === "uploading").length]);
     const handleInputChange = (event) => {
       handleFiles(event.target.files);
       event.target.value = "";
@@ -2657,24 +2811,12 @@ var Upload = React21.forwardRef(
             label,
             required && /* @__PURE__ */ jsx21("span", { className: "text-red-800 ml-0.5", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx21(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              accept,
-              multiple,
-              className: "hidden",
-              onChange: handleInputChange
-            }
-          ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs16(
             "div",
             {
               role: "button",
               tabIndex: 0,
               "aria-label": label,
-              onClick: handleClick,
               onKeyDown: (e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
@@ -2688,29 +2830,59 @@ var Upload = React21.forwardRef(
                 // Padding: top/bottom 20px (py-5), left/right 12px (px-3)
                 "py-5 px-3"
               ),
-              children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-                /* @__PURE__ */ jsx21("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-200 text-blue-600", children: /* @__PURE__ */ jsx21(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
-                /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsxs16("p", { className: "text-sm leading-6 text-neutral-1100", children: [
-                    /* @__PURE__ */ jsx21("span", { className: "font-normal", children: "Drop your files here or " }),
-                    /* @__PURE__ */ jsx21(
-                      "button",
-                      {
-                        type: "button",
-                        className: "font-medium text-blue-600 underline-offset-4 hover:underline",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleClick();
-                        },
-                        children: "Click to upload"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx21("p", { className: "text-xs font-normal leading-4 text-neutral-600", children: helperText })
+              children: [
+                /* @__PURE__ */ jsx21(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "file",
+                    accept,
+                    multiple,
+                    className: "absolute inset-0 z-10 w-full cursor-pointer opacity-0",
+                    onChange: handleInputChange,
+                    tabIndex: -1,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsxs16("div", { className: "relative z-0 flex flex-col items-center gap-2 text-center pointer-events-none", children: [
+                  /* @__PURE__ */ jsx21("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-200 text-blue-600", children: /* @__PURE__ */ jsx21(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
+                  /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsxs16("p", { className: "text-sm leading-6 text-neutral-1100", children: [
+                      /* @__PURE__ */ jsx21("span", { className: "font-normal", children: "Drop your files here or " }),
+                      /* @__PURE__ */ jsx21(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "link",
+                          size: "small",
+                          className: "pointer-events-auto font-medium p-0 h-auto inline",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleClick();
+                          },
+                          children: "Click to upload"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx21("p", { className: "text-xs font-normal leading-4 text-neutral-600", children: helperText })
+                  ] })
                 ] })
-              ] })
+              ]
             }
-          )
+          ),
+          fileEntries.length > 0 && /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-3", children: fileEntries.map((entry) => /* @__PURE__ */ jsx21(
+            UploadFileItem,
+            {
+              status: entry.status,
+              fileName: entry.file.name,
+              fileSize: formatFileSize(entry.file.size),
+              progress: entry.progress,
+              onCancel: () => removeEntry(entry.id),
+              onRetry: () => setEntryStatus(entry.id, "uploading", 0),
+              onDelete: () => removeEntry(entry.id)
+            },
+            entry.id
+          )) })
         ]
       }
     );
@@ -2857,6 +3029,7 @@ export {
   TabsTrigger,
   Textarea,
   Toast,
+  ToastProvider,
   Toggle,
   Tooltip,
   TooltipContent,
@@ -2886,5 +3059,6 @@ export {
   toggleVariants,
   tooltipContentVariants,
   uploadBoxVariants,
-  uploadFileItemBoxVariants
+  uploadFileItemBoxVariants,
+  useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sangam-ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,8 +14,8 @@
     "esds"
   ],
   "author": {
-    "name": "Rahul Kuvlekar",
-    "email": "rahul.kuvlekar@esds.com",
+    "name": "ESDS",
+    "email": "ESDS-Design-All@esds.co.in",
     "url": "https://esds.com"
   },
   "exports": {