@vectramindnpm/unified-design-system 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,775 @@
+import { ClassValue } from 'clsx';
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Props } from 'react-infinite-scroll-component';
+
+declare const designTokens: Readonly<{
+    color: {
+        brand: {
+            purple: string;
+            purple700: string;
+            purple600: string;
+            red: string;
+            blue: string;
+        };
+        neutral: {
+            white: string;
+            100: string;
+            200: string;
+            300: string;
+            muted: string;
+            350: string;
+            400: string;
+            450: string;
+            500: string;
+            600: string;
+            gray: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        status: {
+            success: string;
+            danger: string;
+            warning: string;
+        };
+        gradient: {
+            brand: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    font: {
+        family: {
+            base: string;
+        };
+        size: {
+            "2xs": string;
+            xs: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+            "4xl": string;
+            hero: string;
+        };
+        lineHeight: {
+            tight: string;
+            snug: string;
+            normal: string;
+        };
+        weight: {
+            regular: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+    };
+    text: {
+        "2xs": string;
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        hero: string;
+    };
+    ctrl: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+    radius: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        pill: string;
+    };
+    shadow: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    opacity: {
+        low: string;
+        mid: string;
+    };
+    zIndex: {
+        overlay: number;
+        modal: number;
+        dropdown: number;
+    };
+    motion: {
+        duration: {
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        easing: {
+            standard: string;
+            accel: string;
+        };
+    };
+}>;
+
+declare const semanticTokens: Readonly<{
+    color: {
+        text: {
+            primary: string;
+            muted: string;
+            refreshIcon: string;
+            cancel: string;
+            gray: string;
+            blue: string;
+            secondary: string;
+            white: string;
+        };
+        background: {
+            surface: string;
+            card: string;
+        };
+        border: {
+            default: string;
+            card: string;
+            primary: string;
+        };
+        interactive: {
+            brand: string;
+            brandHover: string;
+            brandActive: string;
+        };
+        status: {
+            success: string;
+            danger: string;
+            warning: string;
+        };
+        gradient: {
+            brand: string;
+        };
+    };
+    spacing: {
+        componentGap: string;
+        formControl: string;
+        buttonX: string;
+        cardPadding: string;
+    };
+    font: {
+        bodySize: string;
+        labelSize: string;
+        headingSize: string;
+    };
+    radius: {
+        card: string;
+        control: string;
+        modal: string;
+    };
+    shadow: {
+        elevation1: string;
+        elevation2: string;
+    };
+    zIndex: {
+        modal: number;
+        overlay: number;
+    };
+    motion: {
+        duration: {
+            short: string;
+            default: string;
+        };
+    };
+    disabled: {
+        opacity: string;
+    };
+    focus: {
+        ring: string;
+    };
+}>;
+
+declare const componentTokens: Readonly<{
+    component: {
+        button: {
+            paddingX: string;
+            paddingY: string;
+            background: string;
+            backgroundHover: string;
+            textColor: string;
+            radius: string;
+            shadow: string;
+        };
+        card: {
+            padding: string;
+            background: string;
+            borderColor: string;
+            radius: string;
+            shadow: string;
+        };
+        modal: {
+            overlayZ: number;
+            z: number;
+            contentRadius: string;
+        };
+        panel: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            dash: string;
+        };
+        sticky: {
+            table: {
+                top: string;
+            };
+        };
+        sp: {
+            0: string;
+            "0-5": string;
+            1: string;
+            "1-5": string;
+            2: string;
+            "2-5": string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            12: string;
+            16: string;
+            20: string;
+            px: string;
+        };
+        radius: {
+            full: string;
+        };
+        z: {
+            base: string;
+            dropdown: string;
+            sticky: string;
+            overlay: string;
+            drawer: string;
+            modal: string;
+            toast: string;
+        };
+        animation: {
+            delay: string;
+        };
+        duration: string;
+        animate: {
+            spin: string;
+        };
+        shimmer: {
+            width: string;
+        };
+        space: {
+            page: {
+                x: string;
+                y: string;
+            };
+            card: string;
+        };
+        content: {
+            max: {
+                width: string;
+            };
+        };
+    };
+}>;
+
+declare enum EViewMode {
+    GRID = "grid",
+    LIST = "list"
+}
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const Avatar: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<React$1.ImgHTMLAttributes<HTMLImageElement> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "hold" | "transfer" | "noShow" | "success" | "normal" | "pending" | "tag" | "active" | "inactive" | "count" | "code" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    dot?: boolean;
+}
+declare function Badge({ className, variant, style, dot, children, ...props }: BadgeProps): React$1.JSX.Element;
+
+/**
+ * Button's variant surface is intentionally small — six semantic colors × five sizes ×
+ * two shapes, all independently composable, instead of one flat enum. It used to carry
+ * 19 `variant` values that actually conflated four unrelated things: color/emphasis
+ * (primary/secondary/destructive/...), shape (pill vs. rounded), fixed footer sizing
+ * (cancel/save/close, formButtonSubmit/Cancel/Back), and one-off page-specific skins
+ * (lang, submenu, deptedit) — see the README for the full before/after mapping and how
+ * to reproduce any of those removed one-offs with `className`.
+ *
+ * `refreshIcon`/`selectedIcon` were dropped entirely rather than folded in: an icon-only
+ * refresh/selected button already has a proper home in `ButtonIcon` (`variant="refresh"`),
+ * so Button doesn't need to duplicate that.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | "iconLg" | null | undefined;
+    shape?: "pill" | "default" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    selected?: boolean;
+    /** Wraps the button in a Tooltip showing this text, instead of requiring a separate Tooltip wrapper at every call site. */
+    tooltipText?: string;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const iconVariants: (props?: ({
+    variant?: "circle" | "filled" | "ghost" | "plain" | "outlined" | "modalClose" | "refresh" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type IconColor = "primary" | "secondary" | "danger" | "success" | "warning" | "muted" | "white";
+interface IconBgColor {
+    base: string;
+    hover?: string;
+}
+type ActionColor = "call" | "end" | "hold" | "transfer" | "noShow" | "activate" | "success";
+declare const actionColorTokens: Record<ActionColor, IconBgColor>;
+declare function getIconColorProps(colorName: IconColor, hoverColorName?: IconColor, bgColor?: IconBgColor): {
+    className: string;
+    style: Record<string, string>;
+};
+
+interface IconProps$1 extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "color">, VariantProps<typeof iconVariants> {
+    name: string;
+    color?: IconColor;
+    hoverColor?: IconColor;
+    bgColor?: string;
+    bgHoverColor?: string;
+    actionColor?: ActionColor;
+    tooltipText?: string;
+    showTooltip?: boolean;
+}
+declare const ButtonIcon: React$1.ForwardRefExoticComponent<IconProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Base Card — intentionally unstyled so it works as a generic layout div.
+ * Pass className to apply any styles (e.g. "app-card", "user-card", etc.).
+ * Pass `editing` to append the shared `.app-card--editing` modifier.
+ */
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Appends `.app-card--editing` when true */
+    editing?: boolean;
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+type CheckboxColorVariant = "green" | "blue" | "purple";
+type CheckboxSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type CheckBoxRoundedVariant = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+interface CheckboxIndicatorProps {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    colorVariant?: CheckboxColorVariant;
+    size?: CheckboxSize;
+    className?: string;
+    roundedVariant?: CheckBoxRoundedVariant;
+}
+declare const CheckboxIndicator: React$1.ForwardRefExoticComponent<CheckboxIndicatorProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    colorVariant?: CheckboxColorVariant;
+    size?: CheckboxSize;
+    indeterminate?: boolean;
+    label?: React$1.ReactNode;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    roundedVariant?: CheckBoxRoundedVariant;
+}
+declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface DeleteActionProps {
+    onClick: () => void;
+    tooltipText?: string;
+    showTooltip?: boolean;
+    className?: string;
+}
+declare const DeleteAction: React__default.FC<DeleteActionProps>;
+
+interface DialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React$1.ReactNode;
+}
+declare const Dialog: ({ open: controlledOpen, onOpenChange, children }: DialogProps) => React$1.JSX.Element;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: ({ children }: {
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element | null;
+declare const DialogClose: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
+interface DialogOverlayProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Set false to prevent clicking the overlay from closing the dialog
+     *  (e.g. confirmation/form dialogs that must not lose input to a stray click). */
+    closeOnClick?: boolean;
+}
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Set false when the modal renders its own close control in a custom header. */
+    showCloseButton?: boolean;
+    /** Set false to prevent the Escape key from closing the dialog. Default true. */
+    closeOnEscape?: boolean;
+    /** Set false to prevent clicking the overlay from closing the dialog. Default true. */
+    closeOnOverlayClick?: boolean;
+}
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+interface DropdownMenuProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React$1.ReactNode;
+}
+declare const DropdownMenu: ({ open: controlledOpen, onOpenChange, children }: DropdownMenuProps) => React$1.JSX.Element;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: ({ children }: {
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element;
+declare const DropdownMenuPortal: ({ children }: {
+    children: React$1.ReactNode;
+}) => React$1.ReactPortal;
+declare const DropdownMenuSub: ({ children }: {
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element;
+declare const DropdownMenuRadioGroup: ({ children }: {
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    checked?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface ExpandableSearchProps {
+    onSearch: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+declare const ExpandableSearch: ({ onSearch, placeholder, className }: ExpandableSearchProps) => React__default.JSX.Element;
+
+interface FileInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    children?: React$1.ReactNode;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    labelStyle?: React$1.CSSProperties;
+    labelProps?: Omit<React$1.LabelHTMLAttributes<HTMLLabelElement>, "htmlFor" | "className" | "style">;
+}
+declare const FileInput: React$1.ForwardRefExoticComponent<FileInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface FormFieldProps {
+    label?: string;
+    required?: boolean;
+    /** Formik field name — renders <ErrorMessage> automatically */
+    errorName?: string;
+    /** Manual error node/string for non-Formik usage */
+    error?: React__default.ReactNode;
+    hint?: string;
+    children: React__default.ReactNode;
+    className?: string;
+}
+/**
+ * Reusable form field wrapper — consistent label, field, and error layout.
+ *
+ * With Formik (recommended):
+ *   <FormField label="Name" required errorName="name" className="form__field">
+ *     <Field name="name" className="formfield__input" />
+ *   </FormField>
+ *
+ * With React Select:
+ *   <FormField label="Flow" required errorName="flowId" className="form__field">
+ *     <MySelect className="formfield__select" classNamePrefix="rs" ... />
+ *   </FormField>
+ *
+ * Manual error (non-Formik):
+ *   <FormField label="Name" error={touched.x && errors.x}>
+ *     <input className="formfield__input" />
+ *   </FormField>
+ */
+declare const FormField: React__default.FC<FormFieldProps>;
+
+interface IconProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof iconVariants> {
+    name: string;
+    color?: IconColor;
+    hoverColor?: IconColor;
+    tooltipText?: string;
+    showTooltip?: boolean;
+    disabled?: boolean;
+}
+declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<HTMLElement>>;
+
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+    as?: "input" | "field";
+    innerRef?: React$1.Ref<HTMLInputElement>;
+}
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+/**
+ * AppList — wraps the list/table view container (.app-list-wrapper).
+ * Compose with AppListHeader and AppListBody.
+ */
+declare const AppList: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AppListHeader — sticky header row (.app-list-header).
+ * style grid-template-columns on the element or a wrapper inside.
+ */
+declare const AppListHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AppListBody — contains the rows.
+ */
+declare const AppListBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AppListItem — a single data row (.app-list-row).
+ * Pass `editing` to apply the editing highlight modifier.
+ */
+interface AppListItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    editing?: boolean;
+}
+declare const AppListItem: React$1.ForwardRefExoticComponent<AppListItemProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AppListCell — a cell inside a list row (.app-list-cell).
+ * Pass `muted` for de-emphasised text, `actions` for right-aligned action buttons.
+ */
+interface AppListCellProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    muted?: boolean;
+    actions?: boolean;
+}
+declare const AppListCell: React$1.ForwardRefExoticComponent<AppListCellProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface LoaderProps {
+    isLoading: boolean;
+}
+declare const Loader: React__default.FC<LoaderProps>;
+
+interface PopoverProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React$1.ReactNode;
+}
+declare function Popover({ open: controlledOpen, onOpenChange, children }: PopoverProps): React$1.JSX.Element;
+interface PopoverTriggerProps {
+    asChild?: boolean;
+    children: React$1.ReactElement;
+}
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverTriggerProps & React$1.RefAttributes<HTMLElement>>;
+interface PopoverContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+declare const PopoverContent: React$1.ForwardRefExoticComponent<PopoverContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type RadioColorVariant = "brand" | "blue";
+type RadioSize = "sm" | "md" | "lg";
+interface RadioButtonProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    colorVariant?: RadioColorVariant;
+    size?: RadioSize;
+    label?: React$1.ReactNode;
+    wrapperClassName?: string;
+    labelClassName?: string;
+}
+declare const RadioButton: React$1.ForwardRefExoticComponent<RadioButtonProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const ScrollArea: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "vertical" | "horizontal";
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+/** Auto-scrolls & focuses the first Formik error field only within the action panel on form submit */
+declare const ScrollToFieldError: React.FC;
+
+interface SwitchProps extends Omit<React$1.HTMLAttributes<HTMLLabelElement>, 'onChange'> {
+    checked?: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+declare const tabVariants: (props?: ({
+    variant?: "default" | "secondary" | "active" | "primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TabProps extends VariantProps<typeof tabVariants> {
+    active?: boolean;
+    icon?: React$1.ReactNode;
+    children: React$1.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+declare const Tab: React$1.ForwardRefExoticComponent<TabProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const tableVariants: (props?: ({
+    variant?: "default" | "flows" | "users" | "departments" | "queues" | "devices" | "reports" | "appointments" | "doctors" | "roles" | "feedbackForms" | "feedbackConfig" | "alertConfig" | "escalationConfig" | "kiosks" | "displayBoards" | "reportDownloadLinks" | "activeUsers" | "servingTokens" | "tokenServing" | "floatingTokens" | "ordersPending" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TableHeaderItem {
+    key: string;
+    title: React$1.ReactNode;
+    className?: string;
+    sticky?: "left" | "right";
+    style?: React$1.CSSProperties;
+}
+interface TableProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tableVariants> {
+    headers: TableHeaderItem[];
+    children: React$1.ReactNode;
+    infiniteScrollProps: Omit<Props, "children">;
+    wrapperClassName?: string;
+    wrapperId?: string;
+    bodyClassName?: string;
+    enableHorizontalScroll?: boolean;
+    contentClassName?: string;
+    headerClassName?: string;
+    stickyHeader?: boolean;
+    /**
+     * Default = false
+     *
+     * false -> Header is rendered outside InfiniteScroll
+     *          (existing behaviour used by FlowsViewManager)
+     *
+     * true  -> Header is rendered inside InfiniteScroll
+     *          (required by ServingTab to have a single scroll container)
+     */
+    headerInsideScroll?: boolean;
+}
+declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Opt-in error/invalid styling (red border). */
+    error?: boolean;
+    /** Render as native textarea or Formik Field */
+    as?: "textarea" | "field";
+}
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+interface TimePickerProps {
+    value: Date | null;
+    onChange: (d: Date | null) => void;
+    placeholder?: string;
+    minTime?: Date | null;
+    maxTime?: Date | null;
+    disabled?: boolean;
+    isClearable?: boolean;
+    /** Minute-column step, e.g. 5 renders :00,:05,...,:55. Defaults to 1 (every minute). */
+    minuteInterval?: number;
+}
+declare const _default: React__default.NamedExoticComponent<TimePickerProps>;
+
+interface ToastProps {
+    title?: string;
+    description?: React$1.ReactNode;
+    type?: "success" | "error" | "info" | "warning";
+    duration?: number;
+    isRTL?: boolean;
+    onClose: () => void;
+}
+declare function Toast({ description, type, duration, isRTL, onClose, }: ToastProps): React$1.JSX.Element;
+
+declare const TooltipProvider: ({ children }: {
+    children: React$1.ReactNode;
+    delayDuration?: number;
+}) => React$1.JSX.Element;
+interface TooltipProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React$1.ReactNode;
+    delayDuration?: number;
+}
+declare const Tooltip: ({ open: controlledOpen, onOpenChange, children, delayDuration }: TooltipProps) => React$1.JSX.Element;
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    sideOffset?: number;
+    side?: "top" | "right" | "bottom" | "left";
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const CARD_TEXT_LIMIT = 20;
+interface TruncatedTextProps {
+    /** The full text to display. */
+    text: any;
+    maxLength?: number;
+    className?: string;
+    /** Current grid/list view mode — pass this from whatever state manages it in your app. */
+    viewMode?: EViewMode;
+}
+declare const TruncatedText: React$1.FC<TruncatedTextProps>;
+
+type ViewMode = EViewMode;
+declare const useViewMode: () => [EViewMode, (mode: EViewMode) => void];
+interface ViewToggleProps {
+    /** Current view mode. Defaults to GRID if not provided (uncontrolled callers can pair this with `useViewMode`). */
+    viewMode?: EViewMode;
+    onViewModeChange: (mode: EViewMode) => void;
+}
+/**
+ * Reusable grid / list view-mode toggle used across all manager pages.
+ */
+declare const ViewToggle: React$1.FC<ViewToggleProps>;
+
+export { type ActionColor, AppList, AppListBody, AppListCell, AppListHeader, AppListItem, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, ButtonIcon, type IconProps$1 as ButtonIconProps, type ButtonProps, CARD_TEXT_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CheckBoxRoundedVariant, Checkbox, type CheckboxColorVariant, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps, type CheckboxSize, DeleteAction, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EViewMode, ExpandableSearch, FileInput, type FileInputProps, FormField, Icon, type IconBgColor, type IconColor, type IconProps, Input, type InputProps, Loader, Popover, PopoverContent, PopoverTrigger, RadioButton, type RadioButtonProps, type RadioColorVariant, type RadioSize, ScrollArea, ScrollBar, ScrollToFieldError, Switch, Tab, type TabProps, Table, type TableHeaderItem, type TableProps, Textarea, type TextareaProps, _default as TimePicker, type TimePickerProps, Toast, type ToastProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruncatedText, type ViewMode, ViewToggle, actionColorTokens, badgeVariants, buttonVariants, cn, componentTokens, designTokens, getIconColorProps, iconVariants, semanticTokens, tabVariants, tableVariants, useViewMode };