sangam-ui 0.1.10 → 0.1.11

package/dist/index.d.ts

@@ -23,7 +23,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * 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;
@@ -73,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
@@ -145,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
@@ -219,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
@@ -323,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
@@ -537,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
@@ -574,7 +574,7 @@ declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & Re
  * Production-grade textarea following Figma design specs:
  * - 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)
@@ -706,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
@@ -792,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
@@ -819,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>>;
 
@@ -838,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;
     /**
@@ -860,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
@@ -886,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;
@@ -939,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).
  */
@@ -949,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";
     /**
@@ -1041,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;
@@ -1155,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;
@@ -1265,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;
     /**
@@ -1395,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, 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 };
+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 };