sangam-ui 0.1.11 → 1.0.0

package/dist/index.d.ts

@@ -9,6 +9,9 @@ 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';
+import * as _radix_ui_react_context from '@radix-ui/react-context';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 /**
  * Sangam Button Component
@@ -473,6 +476,10 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
      * @default 100%
      */
     width?: number;
+    /**
+     * Minimum trigger width in pixels (e.g. compact toolbars). Defaults to the standard dropdown trigger width.
+     */
+    triggerMinWidth?: number;
     /**
      * Error state (red border, red-800)
      */
@@ -968,6 +975,176 @@ interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "child
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Sangam Menu (Menubar) Primitive
+ *
+ * Token-based styling (no hardcoded hex colors).
+ * Compose this primitive to build menus with optional nested submenus.
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuMenu: {
+    (props: MenubarPrimitive.MenubarMenuProps & {
+        __scopeMenubar?: _radix_ui_react_context.Scope;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const MenuTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const MenuContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSub: React.FC<MenubarPrimitive.MenubarSubProps>;
+declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type DrawerDirection = "right";
+interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /**
+     * Drawer direction. Current Sangam spec: right-aligned drawers.
+     * @default "right"
+     */
+    direction?: DrawerDirection;
+}
+declare function Drawer({ direction, children, ...props }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {
+    /**
+     * When true, focuses the close icon when opened.
+     * @default true (matches keyboard interaction guidance)
+     */
+    autoFocusClose?: boolean;
+}
+declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare function DrawerSurface({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/** Header region: column with `gap-2xs` between the title row and optional description. */
+declare const DrawerHeader: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+/** One row for title + close (`items-center` so the icon lines up with the title). */
+declare const DrawerHeaderTop: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const DrawerTitle: ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
+declare const DrawerDescription: ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => react_jsx_runtime.JSX.Element;
+declare const DrawerFooter: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Controls whether the dimmed backdrop is rendered.
+     * @default true
+     */
+    showOverlay?: boolean;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sangam Table Primitive
+ *
+ * Built on top of shadcn table markup and tokenized Sangam classes.
+ * Use this primitive for tabular layouts; compose rich cell content
+ * (links, badges, avatars, actions) in consuming components/stories.
+ */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+interface PopupContentProps {
+    title: string;
+    subtext?: string;
+    children: React.ReactNode;
+    /**
+     * When true, renders the body inside the subtle blue "content box".
+     * Use this for Design guidelines screenshots.
+     * @default false
+     */
+    showBodyBox?: boolean;
+    cancelText?: string;
+    ctaText?: string;
+    onCancelClick?: () => void;
+    onCtaClick?: () => void;
+    showClose?: boolean;
+    onClose?: () => void;
+    autoFocusClose?: boolean;
+    /**
+     * Used to wire up `aria-labelledby` from the Dialog wrapper.
+     * When used outside of Radix, you can omit these.
+     */
+    titleId?: string;
+    descriptionId?: string;
+    className?: string;
+}
+/**
+ * Inline "surface" for the popup.
+ * - Does NOT include overlay/backdrop or fixed centering.
+ * - Useful for Storybook design guideline cards where we don't want a full-screen overlay.
+ */
+declare function PopupContent({ title, subtext, children, showBodyBox, cancelText, ctaText, onCancelClick, onCtaClick, showClose, onClose, autoFocusClose, titleId, descriptionId, className, }: PopupContentProps): react_jsx_runtime.JSX.Element;
+interface PopupProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    subtext?: string;
+    children: React.ReactNode;
+    /**
+     * When true, renders the body inside the subtle blue "content box".
+     * @default false
+     */
+    showBodyBox?: boolean;
+    cancelText?: string;
+    ctaText?: string;
+    onCancelClick?: () => void;
+    onCtaClick?: () => void;
+    showClose?: boolean;
+    showOverlay?: boolean;
+    /**
+     * If true, focuses the close icon when opened (helps with keyboard guidance).
+     * @default true
+     */
+    autoFocusClose?: boolean;
+    /**
+     * Styling overrides for the fixed dialog content wrapper.
+     * Note: the popup surface styling is applied inside `PopupContent`.
+     */
+    contentClassName?: string;
+    surfaceClassName?: string;
+}
+/**
+ * Popup dialog:
+ * - Centers in the viewport
+ * - Uses Radix Dialog for focus trap + ESC/overlay dismiss
+ * - Matches Sangam modal geometry (min-width 520px, 16px padding, 16px gaps, 12px between actions)
+ */
+declare function Popup({ open, onOpenChange, title, subtext, children, showBodyBox, cancelText, ctaText, onCancelClick, onCtaClick, showClose, showOverlay, autoFocusClose, contentClassName, surfaceClassName, }: PopupProps): react_jsx_runtime.JSX.Element;
+interface PopupTriggerProps {
+    title: string;
+    subtext?: string;
+    cancelText?: string;
+    ctaText?: string;
+    showClose?: boolean;
+    showOverlay?: boolean;
+    autoFocusClose?: boolean;
+    showBodyBox?: boolean;
+    /**
+     * Label for the trigger button. Default matches your spec: "Click me".
+     */
+    triggerLabel?: string;
+    /**
+     * Trigger action callbacks. Both close the popup by default.
+     */
+    onCancelClick?: () => void;
+    onCtaClick?: () => void;
+    /**
+     * Popup body content.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Convenience wrapper that provides:
+ * - A trigger button (defaults to "Click me")
+ * - A centered Popup that opens on click
+ * - Developer-friendly API for Storybook docs
+ */
+declare function PopupTrigger({ title, subtext, cancelText, ctaText, showClose, showOverlay, autoFocusClose, triggerLabel, showBodyBox, onCancelClick, onCtaClick, children, }: PopupTriggerProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Sangam Badge Component
  *
@@ -1034,6 +1211,45 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
  */
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Sangam Card Component
+ *
+ * A clickable information card used in lists and selection flows.
+ * - Width/height are dynamic (content-driven)
+ * - Default: 1px border (neutral-200), no shadow
+ * - Hover/Selected: border removed, subtle elevation shadow
+ *
+ * Figma typography:
+ * - Title: 14px / 500 / 24px, black via palette `neutral.1100`
+ * - Subtext: 14px / 400 / 24px, Text–Neutral–Tertiary (#7C7C7C)
+ * - Spacing: `mb-md` (12px) badge → title block; `mt-lg` (16px) title block → body
+ * - Right icon slot: `iconSize.xs` (16px)
+ */
+declare const cardVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof cardVariants> {
+    /**
+     * Renders the card as a child component (Radix Slot pattern).
+     * Use when you want the Card to render as a link, button, etc.
+     */
+    asChild?: boolean;
+    /** Title text (ORD - 1234). */
+    title: React.ReactNode;
+    /** Optional secondary text (Subtext). */
+    subtext?: React.ReactNode;
+    /** Optional status element (typically `Badge`). */
+    status?: React.ReactNode;
+    /** Optional right-side icon slot (16×16; use `iconSize.xs` in layout). */
+    icon?: React.ReactNode;
+    /** Optional body content under title/subtext area. */
+    children?: React.ReactNode;
+    /** Class for the content/body region. */
+    contentClassName?: string;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Sangam Chip Component
  *
@@ -1097,6 +1313,49 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
  */
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 
+interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    /** Current active page (1-indexed) */
+    page: number;
+    /** Total pages count */
+    totalPages: number;
+    /** Called when page changes */
+    onPageChange?: (page: number) => void;
+    /** Total records (optional; not shown in the bar — use in parent for range copy if needed) */
+    totalRecords?: number;
+    /** Current page-size value for the entries selector */
+    pageSize?: number;
+    /** Selectable page-size options */
+    pageSizeOptions?: number[];
+    /** Called when page-size changes */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Pages shown on each side of the current page (excluding first/last), like MUI `siblingCount`.
+     * @default 1
+     */
+    siblingCount?: number;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * Vertical step list for multi-step flows.
+ * - Completed steps use `Tickmark` (non-filled) at `iconSize` default (16px).
+ * - Per step (when a connector runs to the next step): circle + connector column totals `h-7xl` (64px).
+ * - Connector stroke width: 2px (matches prior spec).
+ */
+type StepperStepVariant = "default" | "inProgress" | "complete";
+interface StepperStep {
+    /** Step title */
+    title: React.ReactNode;
+    /** Optional step subtext */
+    subtext?: React.ReactNode;
+    /** Visual state for this step */
+    variant: StepperStepVariant;
+}
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    steps: StepperStep[];
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+
 /** Toast entry for the provider (id, content, optional duration in ms; default 4000) */
 interface ToastEntryOptions {
     title: string;
@@ -1321,7 +1580,7 @@ declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & Reac
  * to show labels (hover state). Selected items show a box highlight.
  *
  * - Default: collapsed 48×1024px, sticky left; hover expands to the right only.
- * - Hover/Selected: expanded 132×1024px, white bg, shadow-elevation-right-sm. Logo and items left-aligned.
+ * - Hover/Selected: expanded 196×1024px, white bg, shadow-elevation-right-sm. Logo and items left-aligned.
  * - Selected item: 36×36 (collapsed) or 120×36 (expanded) box, radius 8px (rounded-sm), shadow-elevation-bottom-sm.
  *
  * Logo 36×28. Text: 12px, weight 500, line-height 16px.
@@ -1349,9 +1608,20 @@ interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "childre
     expanded?: boolean;
     /** Callback when an item is clicked */
     onItemClick?: (id: string) => void;
+    /**
+     * Project switcher shown below the logo.
+     * Collapsed: shows a `P` badge. Expanded: shows a dropdown with project options.
+     */
+    projects?: DropdownOption[];
+    /** Controlled selected project value. */
+    project?: string;
+    /** Initial selected project when uncontrolled. */
+    defaultProject?: string;
+    /** Callback when project changes. */
+    onProjectChange?: (value: string) => void;
 }
 declare const sideMenuVariants: (props?: ({
-    variant?: "default" | "selected" | "hover" | null | undefined;
+    variant?: "default" | "sticky" | "selected" | "hover" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>>;
 
@@ -1382,7 +1652,7 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
 }
 declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
 declare const uploadFileItemBoxVariants: (props?: ({
-    status?: "uploading" | "complete" | "failed" | null | undefined;
+    status?: "complete" | "uploading" | "failed" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type UploadFileItemStatus = "uploading" | "complete" | "failed";
 interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof uploadFileItemBoxVariants> {
@@ -1427,4 +1697,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 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 };
+export { Avatar, Badge, type BaseComponentProps, Button, Card, Checkbox, Chip, type ColorScheme, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerHeaderTop, DrawerSurface, DrawerTitle, DrawerTrigger, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, Menu, MenuContent, MenuItem, MenuMenu, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, PageFooter, type PageFooterAction, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, Pagination, Popup, PopupContent, PopupTrigger, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, type SideMenuItem, type SideMenuProps, type Size, Skeleton, Stepper, type StepperProps, type StepperStep, type StepperStepVariant, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, 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, cardVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants, useToast };