sangam-ui 0.1.9 → 0.1.11

package/README.md

@@ -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
@@ -22,7 +23,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
  * CVA (Class Variance Authority) manages all variants
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "danger" | null | undefined;
+    variant?: "primary" | "link" | "secondary" | "danger" | null | undefined;
     size?: "big" | "small" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
@@ -72,7 +73,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  * Sangam Toggle (Switch) Component
  *
  * Production-grade toggle following Figma design specs:
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Sizes: Big (56×28px), Small (44×24px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
@@ -144,7 +145,7 @@ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAtt
  * Sangam Checkbox Component
  *
  * Production-grade checkbox following Figma design specs:
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (border, background, text) where available
  * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
@@ -218,7 +219,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
  * Sangam Radio Component
  *
  * Production-grade radio button following Figma design specs:
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
@@ -322,7 +323,7 @@ declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttri
  * Sangam Input Component
  *
  * Production-grade text input following Figma design specs:
- * - Colors: Neutral, Red, Green from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
  * - Consistent padding: 4px 12px
  * - Smooth transitions: 200ms ease-out
@@ -536,7 +537,7 @@ declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps
  *
  * Production-grade search input following Figma design specs:
  * - Width: Fixed 400px
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Multiple states: Default, Hover, Active, Typing, Filled, Disabled
  * - Border radius: 8px
  * - Padding: 4px 12px
@@ -571,9 +572,9 @@ 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
+ * - Colors: semantic-colors (background, border, text) where available
  * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
  * - Padding: 4px 12px
  * - Border radius: 8px (sm)
@@ -705,7 +706,7 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
  * Sangam Tooltip Component
  *
  * Production-grade tooltip following Figma design specs:
- * - Colors: Background #111111, Text #FFFFFF
+ * - Colors: semantic-colors (background neutralInverse primary, text neutralInverse primary)
  * - Fixed width: 7.5rem (120px at default)
  * - Fixed height: 2rem (32px at default), 3.25rem (52px with description)
  * - Border radius: 4px
@@ -791,10 +792,10 @@ interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
      */
     max?: number;
     /**
-     * Show percentage label: "left" | "right" | "both" | "none".
-     * @default "both"
+     * When true, shows the percentage label on the right of the bar. When false, bar only (no label).
+     * @default true
      */
-    showLabel?: "left" | "right" | "both" | "none";
+    showLabel?: boolean;
     /**
      * Track width in pixels. Ignored when fluid is true.
      * @default 476
@@ -818,11 +819,11 @@ interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
 /**
  * ProgressBar for completion or loading states.
  *
- * @example With labels
- * <ProgressBar value={50} showLabel="both" />
+ * @example With label on the right (default)
+ * <ProgressBar value={50} />
  *
- * @example Bar only
- * <ProgressBar value={75} showLabel="none" />
+ * @example Bar only (no label)
+ * <ProgressBar value={75} showLabel={false} />
  */
 declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -837,7 +838,7 @@ interface LoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     "aria-label"?: string;
     /**
      * Gradient color (e.g. #FFFFFF for white on dark backgrounds).
-     * @default blue-600 from tokens
+     * @default semantic background.neutralInverse.primary (neutral.1100)
      */
     color?: string;
     /**
@@ -859,9 +860,9 @@ declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAtt
  *
  * Lightweight, token-friendly loading placeholder.
  * Uses tokens from @esds-sangam/tokens:
- * - Base bg: neutral-200 (colors.json)
+ * - Base bg: semantic background.neutral.tertiary (neutral.200)
  * - Border radius: rounded-sm = tokens radius.sm (0.5rem / 8px)
- * - Shimmer: gradient neutral-200 → neutral-100 → neutral-50 → neutral-200
+ * - Shimmer: animate-pulse (Tailwind built-in)
  * - Animation: ease-out, 1s duration, 800ms delay, loops infinitely.
  *
  * By default the component is layout-flexible — width/height
@@ -885,8 +886,9 @@ declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.Re
  *
  * Types: Container, Underline, Icon only.
  * States: Default, Hover, Selected, Disabled.
+ * Colors: semantic-colors (background, border, text) where available.
  * Typography: 14px, weight 500, line-height 24px.
- * Spec: Container selected box 178×32, shadow 0 2px 6px; Underline selected 2px blue-600; Icon only 24×24 box, radius 4, padding 4, gap 8.
+ * Spec: Container selected box 178×32, shadow 0 2px 6px; Underline selected 2px info; Icon only 24×24 box, radius 4, padding 4, gap 8.
  */
 declare const tabsListVariants: (props?: ({
     type?: "underline" | "iconOnly" | "container" | null | undefined;
@@ -938,7 +940,7 @@ declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttribu
  *
  * Two variants: Image (photo or placeholder silhouette) and Letter (initials).
  * Sizes: large (32×32), medium (24×24), small (20×20).
- * Letter: bg neutral-200, text neutral-600 (tokens); weight 500.
+ * Letter: bg/text from semantic-colors (neutral tertiary); weight 500.
  * Letter typography: large tokens base (16px)/leading-6; medium/small tokens 3xs (10px).
  * Token-based, circular (rounded-full).
  */
@@ -948,7 +950,7 @@ declare const avatarVariants: (props?: ({
 interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof avatarVariants> {
     /**
      * Variant: "image" (photo or placeholder silhouette) or "letter" (initials).
-     * Letter uses bg neutral-200, text neutral-600 (tokens); typography per size (Big: tokens base, Medium/Small: tokens 3xs = 10px).
+     * Letter uses semantic-colors: bg neutral tertiary, text neutral tertiary; typography per size (Big: tokens base, Medium/Small: tokens 3xs = 10px).
      */
     variant?: "image" | "letter";
     /**
@@ -1040,12 +1042,12 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
  * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
  * Radius 999 (pill). Colors from @esds-sangam/tokens.
  *
- * States:
- * - Default: bg white, text neutral-1100, border neutral-400
- * - Hover: bg neutral-200, text neutral-1100
- * - Selected: bg neutral-1100, text white
- * - Disabled: bg neutral-200, text neutral-500
- * - Focused: bg white, text neutral-1100, border 2px neutral-700
+ * States (semantic-colors):
+ * - Default: bg neutral primary, text neutral primary, border neutral primary
+ * - Hover: bg neutral tertiary, border transparent
+ * - Selected: bg neutralInverse primary, text neutralInverse primary
+ * - Disabled: bg neutral disabled, text neutral disabled
+ * - Focused: bg neutral primary, text neutral primary, border 2px neutralInverse primary
  */
 declare const chipVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
@@ -1095,87 +1097,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>>;
 
 /**
@@ -1191,7 +1156,7 @@ declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttri
  * - Optional subtext line below the title
  * - Optional up to three CTA buttons on the right
  * - Optional close icon button on the right
- * - Tabs: underline style, 14px/500/24px, active blue-600, border neutral-200
+ * - Tabs: underline style, 14px/500/24px, active blue-600, border semantic neutral tertiary
  */
 interface PageHeaderTab {
     value: string;
@@ -1301,9 +1266,40 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
 
+type PageFooterAction = {
+    /**
+     * Visible label for the button.
+     */
+    label: string;
+    /**
+     * Click handler for the button.
+     */
+    onClick?: () => void;
+    /**
+     * Visual style of the button. Defaults to primary.
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Optional icon to render alongside the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Position of the icon relative to the label. Defaults to leading.
+     */
+    iconPosition?: "leading" | "trailing";
+};
 interface PageFooterProps extends React.HTMLAttributes<HTMLElement> {
     /**
-     * Action buttons or content. Defaults to primary small "Convert" button when omitted.
+     * Primary CTA button (rightmost). When set with secondaryAction, renders as props-based actions.
+     */
+    primaryAction?: PageFooterAction;
+    /**
+     * Secondary CTA button (left of primary). Renders before primaryAction when both are set.
+     */
+    secondaryAction?: PageFooterAction;
+    /**
+     * Action buttons or content. When provided, overrides primaryAction/secondaryAction.
+     * Defaults to primary small "Convert" button when neither children nor actions are set.
      */
     children?: React.ReactNode;
     /**
@@ -1431,4 +1427,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 PageFooterAction, 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 };