banhatten-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,806 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+declare const ColorPalette: React.FC;
+
+declare const accordionTriggerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AccordionType = "single" | "multiple";
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "single" = one item open at a time; "multiple" = many. Default: "single". */
+    type?: AccordionType;
+    /** Controlled open value(s). "single" uses string; "multiple" uses string[]. */
+    value?: string | string[];
+    /** Default open value(s) when uncontrolled. */
+    defaultValue?: string | string[];
+    /** Called when open state changes. */
+    onValueChange?: (value: string | string[]) => void;
+    children: React.ReactNode;
+}
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Unique value for this item (used for open state and accessibility). */
+    value: string;
+    /** When true, trigger and content use disabled styling and are not expandable. */
+    disabled?: boolean;
+    /** When true, a Divider is shown between the trigger and content when expanded. */
+    showDivider?: boolean;
+    children: React.ReactNode;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, Omit<VariantProps<typeof accordionTriggerVariants>, "disabled"> {
+    /** Optional icon or element shown to the left of the heading (e.g. info icon). */
+    iconLeft?: React.ReactNode;
+    /** Heading content (e.g. question text). */
+    children: React.ReactNode;
+}
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const iconVariants: (props?: ({
+    variant?: "outlined" | "rounded" | "sharp" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sizeMap: {
+    readonly xs: 12;
+    readonly sm: 16;
+    readonly md: 20;
+    readonly lg: 24;
+    readonly xl: 32;
+};
+type IconSize = keyof typeof sizeMap;
+interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof iconVariants> {
+    /** Material Symbol name in snake_case (e.g. "home", "arrow_forward", "settings") */
+    name: string;
+    /** Size preset: xs (12px), sm (16px), md (20px), lg (24px), xl (32px). Default: md */
+    size?: IconSize;
+    /** Render the filled variant of the icon */
+    filled?: boolean;
+    /** Font weight: 100-700. Default: 400 */
+    weight?: number;
+    /** Grade: -25 to 200. Default: 0 */
+    grade?: number;
+    /** Accessible label. If omitted, the icon is treated as decorative (aria-hidden). */
+    label?: string;
+}
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const alertVariants: (props?: ({
+    type?: "danger" | "info" | "success" | "warning" | "neutral" | null | undefined;
+    emphasis?: "medium" | "low" | "moderate" | "high" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertAction {
+    /** Button label text */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+}
+interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    /** Main title text displayed in the alert */
+    title: string;
+    /** Optional subtitle/description text (shown when expand=true) */
+    description?: string;
+    /** Action buttons (shown when expand=true). Rendered as link-style buttons. */
+    actions?: AlertAction[];
+    /** Callback fired when the close button is clicked */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of the status icon */
+    iconFilled?: boolean;
+    /** Expand to show description and action buttons */
+    expand?: boolean;
+    /** ARIA role. Default: "alert" for danger/warning, "status" for others */
+    role?: "alert" | "status";
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const avatarVariants: (props?: ({
+    shape?: "rounded" | "circle" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarVariants> & {
+    /** Initials to show (e.g. "AG", "A"). When provided, renders initials instead of the fallback icon. */
+    initials?: string;
+    /** Accessible name for the avatar (e.g. user name). Used for role="img" and aria-label. Required when the avatar conveys meaning. */
+    "aria-label"?: string;
+    /** Optional username shown beside the avatar (e.g. "Ahmed Galal"). Renders as primary text when provided. */
+    username?: string;
+    /** Optional supporting line below username (e.g. "View profile"). Renders as secondary text. */
+    supportingText?: string;
+};
+declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    shape?: "rounded" | "circle" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** Initials to show (e.g. "AG", "A"). When provided, renders initials instead of the fallback icon. */
+    initials?: string;
+    /** Accessible name for the avatar (e.g. user name). Used for role="img" and aria-label. Required when the avatar conveys meaning. */
+    "aria-label"?: string;
+    /** Optional username shown beside the avatar (e.g. "Ahmed Galal"). Renders as primary text when provided. */
+    username?: string;
+    /** Optional supporting line below username (e.g. "View profile"). Renders as secondary text. */
+    supportingText?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+
+/** Group size options: pixel values matching Figma. */
+type AvatarGroupSize = "24" | "32" | "40";
+type AvatarGroupItem = {
+    /** Initials for the avatar (e.g. "AG"). */
+    initials?: string;
+    /** Accessible name for the avatar. */
+    "aria-label"?: string;
+};
+type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Group avatar size: 24, 32, or 40 px. Default 32. */
+    size?: AvatarGroupSize;
+    /** When true, the first (leftmost) avatar is drawn on top. Default true. */
+    lastOnTop?: boolean;
+    /** When true, show a "+N" overflow indicator after visible avatars. Default false. */
+    moreAvatars?: boolean;
+    /** When true, show an Add More button after avatars (and overflow). Default false. */
+    addMore?: boolean;
+    /** List of avatars to show (initials and optional aria-label). No image support. */
+    avatars: AvatarGroupItem[];
+    /** Max number of avatars to show before "+N". Used when moreAvatars is true. Default 4. */
+    maxVisible?: number;
+    /** Called when the Add More button is clicked. Only relevant when addMore is true. */
+    onAddMore?: () => void;
+};
+declare const AvatarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Group avatar size: 24, 32, or 40 px. Default 32. */
+    size?: AvatarGroupSize;
+    /** When true, the first (leftmost) avatar is drawn on top. Default true. */
+    lastOnTop?: boolean;
+    /** When true, show a "+N" overflow indicator after visible avatars. Default false. */
+    moreAvatars?: boolean;
+    /** When true, show an Add More button after avatars (and overflow). Default false. */
+    addMore?: boolean;
+    /** List of avatars to show (initials and optional aria-label). No image support. */
+    avatars: AvatarGroupItem[];
+    /** Max number of avatars to show before "+N". Used when moreAvatars is true. Default 4. */
+    maxVisible?: number;
+    /** Called when the Add More button is clicked. Only relevant when addMore is true. */
+    onAddMore?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const avatarProfileVariants: (props?: ({
+    shape?: "rounded" | "circle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarProfileProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarProfileVariants> & {
+    /** Avatar size. Passed through to the inner Avatar. */
+    size?: AvatarProps["size"];
+    /** Initials to display in the inner Avatar. */
+    initials?: AvatarProps["initials"];
+    /** Optional content for the top-right badge (e.g. edit icon). Use Icon from @banhatten/ui (Material Symbols); icons are forced to filled. */
+    topRight?: React.ReactNode;
+    /** Optional content for the bottom-right badge (e.g. status or verified icon). Use Icon from @banhatten/ui (Material Symbols); icons are forced to filled. */
+    bottomRight?: React.ReactNode;
+};
+declare const AvatarProfile: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    shape?: "rounded" | "circle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** Avatar size. Passed through to the inner Avatar. */
+    size?: AvatarProps["size"];
+    /** Initials to display in the inner Avatar. */
+    initials?: AvatarProps["initials"];
+    /** Optional content for the top-right badge (e.g. edit icon). Use Icon from @banhatten/ui (Material Symbols); icons are forced to filled. */
+    topRight?: React.ReactNode;
+    /** Optional content for the bottom-right badge (e.g. status or verified icon). Use Icon from @banhatten/ui (Material Symbols); icons are forced to filled. */
+    bottomRight?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "outlined" | "filled" | "light" | null | undefined;
+    color?: "danger" | "info" | "success" | "warning" | "neutral" | "brand" | null | undefined;
+    size?: "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeVariants> {
+    /** Render a small status dot before the badge content */
+    withDot?: boolean;
+    /** Material Symbol name for left icon (e.g. "info", "check") */
+    leftIcon?: string;
+    /** Material Symbol name for right icon (e.g. "close", "chevron_right") */
+    rightIcon?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icons */
+    iconFilled?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const breadcrumbListVariants: (props?: ({
+    containerStyle?: "default" | "withBackground" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const breadcrumbSeparatorVariants: (props?: ({
+    separator?: "slash" | "chevron" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+interface BreadcrumbListProps extends React.OlHTMLAttributes<HTMLOListElement>, VariantProps<typeof breadcrumbListVariants> {
+}
+declare const BreadcrumbList: React.ForwardRefExoticComponent<BreadcrumbListProps & React.RefAttributes<HTMLOListElement>>;
+interface BreadcrumbListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+}
+declare const BreadcrumbListItem: React.ForwardRefExoticComponent<BreadcrumbListItemProps & React.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof breadcrumbSeparatorVariants> {
+}
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const breadcrumbItemVariants: (props?: ({
+    variant?: "iconOnly" | "iconText" | "overflow" | null | undefined;
+    state?: "default" | "active" | "disabled" | null | undefined;
+    overflowHover?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BreadcrumbItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof breadcrumbItemVariants> {
+    /** Visual style: icon with label, icon only, or overflow (ellipsis). */
+    variant?: "iconText" | "iconOnly" | "overflow";
+    /** Current page / active state. Renders as span with aria-current="page". */
+    active?: boolean;
+    /** Disabled state. Renders as span with aria-disabled="true". */
+    disabled?: boolean;
+    /** Material Symbol name (e.g. "home", "folder"). Ignored when variant="overflow"; overflow uses "more_horiz". */
+    icon?: string;
+    /** Label text. Shown when variant is "iconText". */
+    children?: React.ReactNode;
+    /** When provided, item renders as <a href="...">. Omit for current page or overflow trigger. */
+    href?: string;
+}
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "danger" | "link-brand" | null | undefined;
+    size?: "xs" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render as child element instead of a `<button>`. Useful for Next.js `<Link>` or `<a>` tags. */
+    asChild?: boolean;
+    /** Material Symbol name for icon-only button (e.g. "close", "more_vert"). When provided, renders a square icon-only button. Requires `aria-label` for accessibility. */
+    icon?: string;
+    /** Material Symbol name for left icon (e.g. "arrow_back", "add") */
+    leftIcon?: string;
+    /** Material Symbol name for right icon (e.g. "arrow_forward", "chevron_right") */
+    rightIcon?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icons */
+    iconFilled?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const buttonGroupItemVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    type?: "iconOnly" | "textAndIcon" | "textOnly" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, VariantProps<typeof buttonGroupItemVariants> {
+    /** Material Symbol name for left icon (e.g. "add"). Used when type is "textAndIcon". */
+    leftIcon?: string;
+    /** Material Symbol name for right icon (e.g. "chevron_right"). Used when type is "textAndIcon". */
+    rightIcon?: string;
+    /** Material Symbol name for icon-only item. Used when type is "iconOnly". Requires aria-label for accessibility. */
+    icon?: string;
+    /** When true, shows selected state (bg-brand-tertiary, text-brand, border). Sets aria-current="true". */
+    selected?: boolean;
+    /** Position inside a ButtonGroup. Middle items get no border rounding when selected. Set by ButtonGroup automatically. */
+    position?: "first" | "middle" | "last" | "only";
+}
+declare const ButtonGroupItem: React.ForwardRefExoticComponent<ButtonGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const buttonGroupVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ButtonGroupSize = "small" | "medium";
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof buttonGroupVariants> {
+    /** ButtonGroupItem components. */
+    children: React.ReactNode;
+    /** Size of the group. Passed to each ButtonGroupItem so all items share the same size. Default: "medium". */
+    size?: ButtonGroupSize;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const closeButtonVariants: (props?: ({
+    variant?: "outlined" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CloseButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & VariantProps<typeof closeButtonVariants> & {
+    /** Accessible name for the close action. Default: "Close" */
+    "aria-label"?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of the icon */
+    iconFilled?: boolean;
+};
+declare const CloseButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & VariantProps<(props?: ({
+    variant?: "outlined" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** Accessible name for the close action. Default: "Close" */
+    "aria-label"?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of the icon */
+    iconFilled?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "dashed" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends React.HTMLAttributes<HTMLHRElement>, VariantProps<typeof dividerVariants> {
+}
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
+
+declare const featuredIconVariants: (props?: ({
+    variant?: "circle-light" | "square-light" | "circle-pulse" | "solid-circle" | "solid-square" | null | undefined;
+    type?: "danger" | "success" | "warning" | "neutral" | "brand" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FeaturedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof featuredIconVariants> {
+    /** Material Symbol name in snake_case (e.g. "info", "check_circle", "warning") */
+    name: string;
+    /** Accessible label when the icon conveys meaning. If omitted, treated as decorative (aria-hidden). */
+    label?: string;
+}
+declare const FeaturedIcon: React.ForwardRefExoticComponent<FeaturedIconProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const progressBarTrackVariants: (props?: ({
+    size?: "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const progressBarFillVariants: (props?: ({
+    color?: "danger" | "info" | "success" | "neutral" | "brand" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "color">, VariantProps<typeof progressBarTrackVariants>, VariantProps<typeof progressBarFillVariants> {
+    /** Progress value 0–100. Omit for indeterminate (animated) state. */
+    value?: number;
+    /** Optional label above the bar (e.g. "Label (Optional)"). */
+    label?: React.ReactNode;
+    /** Optional info icon shown next to the label. */
+    showLabelInfoIcon?: boolean;
+    /** Optional helper text below the bar. */
+    helperText?: React.ReactNode;
+    /** Whether to show the numeric value (e.g. "40%") beside the bar. */
+    showValue?: boolean;
+    /** Callback for the optional refresh icon button. When set, a refresh icon is shown next to the value. */
+    onRefresh?: () => void;
+    /** Accessible name for the progress bar when no visible label is provided. */
+    "aria-label"?: string;
+}
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const menuItemVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MenuItemType = "default" | "multiline" | "callToAction" | "progress";
+interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">, Omit<VariantProps<typeof menuItemVariants>, "disabled"> {
+    /** Menu item type. Default: "default". */
+    type?: MenuItemType;
+    /** When true, shows selected/current state (bg-brand-tertiary, text-brand). Sets aria-current="page". Default: false. */
+    active?: boolean;
+    /** Primary content (e.g. "Text item"). */
+    children?: React.ReactNode;
+    /** Supporting text below primary (multiline / callToAction). */
+    supportingText?: React.ReactNode;
+    /** Material Symbol name for left icon (e.g. "add"). */
+    leftIcon?: string;
+    /** Material Symbol name for right icon (e.g. "chevron_right"). */
+    rightIcon?: string;
+    /** Avatar slot (use Avatar component). */
+    avatar?: React.ReactNode;
+    /** Badge slot (use Badge component). */
+    badge?: React.ReactNode;
+    /** Show switch; use with switchChecked and onSwitchChange. */
+    showSwitch?: boolean;
+    /** Controlled switch state. */
+    switchChecked?: boolean;
+    /** Switch change handler. */
+    onSwitchChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Supporting text on the right (default / multiline). */
+    textRight?: React.ReactNode;
+    /** CTA button slot (use Button; for type="callToAction"). */
+    cta?: React.ReactNode;
+    /** Progress type: label above the bar. */
+    progressLabel?: React.ReactNode;
+    /** Progress type: value 0–100. */
+    progressValue?: number;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const menuHeadingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface MenuHeadingProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof menuHeadingVariants> {
+    /** Heading content (e.g. "Section header"). */
+    children?: React.ReactNode;
+}
+declare const MenuHeading: React.ForwardRefExoticComponent<MenuHeadingProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const menuGroupVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof menuGroupVariants> {
+    /** Optional section label (e.g. <MenuHeading>Section header</MenuHeading>). At most one. */
+    heading?: React.ReactNode;
+    /** One or more menu items (e.g. MenuItem). */
+    children: React.ReactNode;
+    /** When provided with heading, set on the heading wrapper for role="group" aria-labelledby. */
+    headingId?: string;
+}
+declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const menuVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface MenuProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof menuVariants> {
+    /** One or more MenuGroup components. Dividers are inserted between each child. */
+    children: React.ReactNode;
+}
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const sidebarMenuItemVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SidebarMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">, Omit<VariantProps<typeof sidebarMenuItemVariants>, "disabled"> {
+    /** When true, shows selected/current state. Sets aria-current="page". Default: false. */
+    active?: boolean;
+    /** When true, shows icon only (for collapsed sidebar). Default: false. */
+    collapsed?: boolean;
+    /** Label (e.g. "Dashboard"). Omitted visually when collapsed; use aria-label when collapsed for accessibility. */
+    children?: React.ReactNode;
+    /** Material Symbol name for left icon (e.g. "dashboard"). When omitted, no icon is shown. */
+    leftIcon?: string;
+    /** SidebarSubmenuItem children. When present, a chevron is shown and the item expands/collapses vertically. */
+    submenu?: React.ReactNode;
+    /** Controlled expanded state for submenu. */
+    expanded?: boolean;
+    /** Called when submenu expand/collapse is toggled (only when submenu is provided). */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Default expanded state for submenu when uncontrolled. Default: false. */
+    defaultExpanded?: boolean;
+}
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<SidebarMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const sidebarSubmenuItemVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SidebarSubmenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">, Omit<VariantProps<typeof sidebarSubmenuItemVariants>, "disabled"> {
+    /** When true, shows selected/current state. Sets aria-current="page". Default: false. */
+    active?: boolean;
+    /** Label (e.g. "Submenu Item"). */
+    children?: React.ReactNode;
+}
+declare const SidebarSubmenuItem: React.ForwardRefExoticComponent<SidebarSubmenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const sidebarAccountCardVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SidebarAccountCardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof sidebarAccountCardVariants>, "collapsed"> {
+    /** User display name (e.g. "Ahmed Galal"). Passed to Avatar as username. */
+    username: string;
+    /** Supporting line below name (e.g. "Free plan"). Passed to Avatar as supportingText. */
+    supportingText?: string;
+    /** Initials for Avatar when no image (e.g. "AG"). Optional. */
+    initials?: string;
+    /** Accessible name for the avatar (e.g. user name). Passed to Avatar aria-label. */
+    "aria-label"?: string;
+    /** Material Symbol name for right icon (e.g. "unfold_more", "more_vert"). */
+    rightIcon?: string;
+    /** When true, shows selected/active state (light background). Default: false. */
+    selected?: boolean;
+    /** When true, shows avatar only (e.g. collapsed sidebar). Default from SidebarContext when inside Sidebar. */
+    collapsed?: boolean;
+}
+declare const SidebarAccountCard: React.ForwardRefExoticComponent<SidebarAccountCardProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const sidebarVariants: (props?: ({
+    collapsed?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SidebarContextValue {
+    collapsed: boolean;
+}
+declare const SidebarContext: React.Context<SidebarContextValue | null>;
+declare function useSidebarContext(): SidebarContextValue | null;
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sidebarVariants> {
+    /** Header content (e.g. logo). Rendered at top; collapse toggle shown only when collapsible. */
+    header?: React.ReactNode;
+    /** Main content (SidebarMenuItem, SidebarSubmenuItem). Scrollable. */
+    children?: React.ReactNode;
+    /** Footer content (e.g. Settings, Help, SidebarAccountCard). Rendered at bottom. */
+    footer?: React.ReactNode;
+    /** When true, sidebar can be collapsed via header toggle. Default: false (expanded only, no button). */
+    collapsible?: boolean;
+    /** When true, sidebar is collapsed (icon-only). Only used when collapsible. Default: false. */
+    collapsed?: boolean;
+    /** Called when collapse toggle in header is clicked. Only used when collapsible. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Default collapsed state when uncontrolled. Only used when collapsible. Default: false. */
+    defaultCollapsed?: boolean;
+}
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const inputWrapperVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    focused?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputPreset = "user" | "email" | "password" | "date" | "amount" | "description" | "search";
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, Omit<VariantProps<typeof inputWrapperVariants>, "disabled" | "focused"> {
+    /** Label text displayed above the input */
+    label?: string;
+    /** Whether the field is optional (displays "(Optional)" next to label) */
+    optional?: boolean;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Material Symbol name for helper text icon (e.g., "error", "info") */
+    helperTextIcon?: string;
+    /** Error message displayed below the input (overrides helperText when present) */
+    errorMessage?: string;
+    /** Maximum character count (displays counter outside input, aligned with top) */
+    maxLength?: number;
+    /** Current character count (if not provided, calculated from value length) */
+    characterCount?: number;
+    /** Material Symbol name for left icon (e.g., "search", "email") */
+    leftIcon?: string;
+    /** Material Symbol name for right icon (e.g., "visibility", "close") */
+    rightIcon?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icons */
+    iconFilled?: boolean;
+    /** Preset configuration that sets icons, type, and behaviors automatically */
+    preset?: InputPreset;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const textareaWrapperVariants: (props?: ({
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    focused?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, Omit<VariantProps<typeof textareaWrapperVariants>, "disabled" | "focused"> {
+    /** Label text displayed above the textarea */
+    label?: string;
+    /** Whether the field is optional (displays "(Optional)" next to label) */
+    optional?: boolean;
+    /** Helper text displayed below the textarea */
+    helperText?: string;
+    /** Material Symbol name for helper text icon (e.g., "error", "info") */
+    helperTextIcon?: string;
+    /** Error message displayed below the textarea (overrides helperText when present) */
+    errorMessage?: string;
+    /** Maximum character count (displays counter outside textarea, aligned with top) */
+    maxLength?: number;
+    /** Current character count (if not provided, calculated from value length) */
+    characterCount?: number;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icons */
+    iconFilled?: boolean;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** Label text displayed next to the checkbox */
+    label?: string;
+    /** Support text displayed below the label */
+    supportText?: string;
+    /** Position of the checkbox relative to the label. Default: "leading" */
+    checkboxPosition?: "leading" | "trailing";
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxCardProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** Label text displayed in the card */
+    label: string;
+    /** Description text displayed below the label */
+    description?: string;
+    /** Material Symbol name for the card icon (e.g. "person", "settings") */
+    icon?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icon */
+    iconFilled?: boolean;
+    /** Position of the checkbox relative to the content. Default: "trailing" */
+    checkboxPosition?: "leading" | "trailing";
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+}
+declare const CheckboxCard: React.ForwardRefExoticComponent<CheckboxCardProps & React.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** Label text displayed next to the radio */
+    label?: string;
+    /** Support text displayed below the label */
+    supportText?: string;
+    /** Position of the radio relative to the label. Default: "leading" */
+    radioPosition?: "leading" | "trailing";
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+interface RadioCardProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** Label text displayed in the card */
+    label: string;
+    /** Description text displayed below the label */
+    description?: string;
+    /** Material Symbol name for the card icon (e.g. "person", "settings") */
+    icon?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icon */
+    iconFilled?: boolean;
+    /** Position of the radio relative to the content. Default: "trailing" */
+    radioPosition?: "leading" | "trailing";
+}
+declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const tagVariants: (props?: ({
+    type?: "simple" | "with-dot" | "with-icon" | null | undefined;
+    state?: "default" | "active" | "disabled" | "focus" | null | undefined;
+    size?: "small" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof tagVariants> {
+    /** Material Symbol name for left icon when type is "with-icon" (e.g. "calendar_month", "info"). Default: "calendar_month" */
+    leftIcon?: string;
+    /** Icon variant style. Default: "outlined" */
+    iconVariant?: IconProps["variant"];
+    /** Render filled variant of icons */
+    iconFilled?: boolean;
+    /** Whether to show a close button on the right */
+    close?: boolean;
+    /** Callback fired when the close button is clicked */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const toggleVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    active?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const thumbVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "children"> {
+    /** Label text displayed next to the toggle */
+    label?: string;
+    /** Support text displayed below the label */
+    supportText?: string;
+    /** Position of the toggle relative to the label. Default: "trailing" */
+    togglePosition?: "leading" | "trailing";
+    /** Size of the toggle. Default: "md" */
+    size?: "sm" | "md";
+    /** When true, shows a check icon when on and a close icon when off */
+    withIcon?: boolean;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+
+/** Fixed 24×24px per Figma; no size variant. */
+declare const sliderHandleCircleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface SliderHandleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Value to show as tooltip or label (e.g. "0%"). When set with labelVariant, shows above or below the handle. */
+    valueLabel?: React.ReactNode;
+    /** How to show the value: "tooltip" (hover) or "label" (always visible). Omitted when valueLabel is not set. */
+    labelVariant?: "tooltip" | "label";
+    /** Position of tooltip or label relative to the circle. Default: "below" */
+    labelPosition?: "above" | "below";
+    /** Force visual state for display (e.g. docs). Omit for interactive :hover/:active. */
+    state?: "default" | "hover" | "active";
+}
+declare const SliderHandle: React.ForwardRefExoticComponent<SliderHandleProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Slider — Figma node 4306:225189
+ * Single-node: one handle, fill from 0 to value.
+ * Double-node: two handles, fill between start and end.
+ * Progress bar (large size) as track. Tokens only.
+ */
+type SliderVariant = "single" | "double";
+interface SliderPropsBase extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue" | "value"> {
+    variant?: SliderVariant;
+    label?: React.ReactNode;
+    showLabelInfoIcon?: boolean;
+    helperText?: React.ReactNode;
+    valueLabelVariant?: "tooltip" | "label";
+    valueLabelPosition?: "above" | "below";
+    formatValue?: (value: number) => string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    "aria-label"?: string;
+}
+interface SliderSingleProps extends SliderPropsBase {
+    variant?: "single";
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+}
+interface SliderDoubleProps extends SliderPropsBase {
+    variant: "double";
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+}
+type SliderProps = SliderSingleProps | SliderDoubleProps;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Visual specifications (tokens from packages/tokens/src/tokens.json)
+ *
+ * ── Shared (all variants) ──
+ * Rounding:  rounded-sm  → radius.sm  → 8px
+ * Typography: text-xs, leading-5 (body copy)
+ *
+ * ── Variant: dark ──
+ * Background:  bg-always-dark
+ * Text:        text-on-color
+ * Subtitle:    text-on-color        → alias → brand.neutral-25   → #ffffff
+ * Arrow fill:  fill-primary-inverse
+ *
+ * ── Variant: light ──
+ * Background:  bg-primary   → alias → brand.neutral-25  → #ffffff
+ * Text:        text-primary → alias → brand.neutral-800 → #1f242e
+ * Subtitle:    text-on-color-inverse → alias → brand.neutral-700 → #3a424d
+ * Shadow:      shadow-sm    → shadow.sm
+ * Arrow fill:  fill-white   → #ffffff
+ *
+ * ── Size: small ──
+ * Padding: px-md py-sm  → spacing.md (0.75rem / 12px) horizontal, spacing.sm (0.5rem / 8px) vertical
+ *
+ * ── Size: large ──
+ * Padding: px-md py-md  → spacing.md (0.75rem / 12px) horizontal, spacing.md (0.75rem / 12px) vertical
+ * Gap (title ↔ subtitle): gap-xs → spacing.xs → 0.25rem / 4px
+ */
+declare const tooltipContentVariants: (props?: ({
+    size?: "small" | "large" | null | undefined;
+    variant?: "dark" | "light" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
+    /** Single-line content (size="small") */
+    children?: React.ReactNode;
+    /** Title text (size="large") */
+    title?: string;
+    /** Subtitle text (size="large") */
+    subtitle?: string;
+    /** When false, the arrow/pointer is not rendered. Default: true */
+    showArrow?: boolean;
+}
+declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+interface TooltipProps extends Omit<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>, "content"> {
+    /** Trigger element (must accept a ref) */
+    children: React.ReactNode;
+    /** Single-line content (size="small") */
+    content?: React.ReactNode;
+    /** Title text (size="large") */
+    title?: string;
+    /** Subtitle text (size="large") */
+    subtitle?: string;
+    /** Small: single text line. Large: title + subtitle. Auto-inferred from title/subtitle when omitted. */
+    size?: "small" | "large";
+    /** Dark: inverse bg/text. Light: primary bg/text + shadow. */
+    variant?: "dark" | "light";
+    /** Which side of the trigger the tooltip appears on. Arrow adjusts automatically. Default: "bottom". */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Distance in px between the tooltip and the trigger. Default: 8. */
+    sideOffset?: number;
+    /** Delay in ms before showing. Default from provider. */
+    delayDuration?: number;
+    /** When false, the arrow/pointer is not rendered. Default: true */
+    showArrow?: boolean;
+    /** Additional class name applied to the tooltip content. */
+    contentClassName?: string;
+}
+declare function Tooltip({ children, content, title, subtitle, size, variant, side, sideOffset, delayDuration, showArrow, contentClassName, ...rootProps }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertAction, type AlertProps, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarProfile, type AvatarProfileProps, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbList, BreadcrumbListItem, type BreadcrumbListItemProps, type BreadcrumbListProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonGroupSize, type ButtonProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, CloseButton, type CloseButtonProps, ColorPalette, Divider, type DividerProps, FeaturedIcon, type FeaturedIconProps, Icon, type IconProps, type IconSize, Input, type InputPreset, type InputProps, Menu, MenuGroup, type MenuGroupProps, MenuHeading, type MenuHeadingProps, MenuItem, type MenuItemProps, type MenuItemType, type MenuProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, type RadioCardProps, type RadioProps, Sidebar, SidebarAccountCard, type SidebarAccountCardProps, SidebarContext, type SidebarContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarProps, SidebarSubmenuItem, type SidebarSubmenuItemProps, Slider, type SliderDoubleProps, SliderHandle, type SliderHandleProps, type SliderProps, type SliderSingleProps, type SliderVariant, Tag, type TagProps, TextArea, type TextAreaProps, Toggle, type ToggleProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipTrigger, accordionTriggerVariants, alertVariants, avatarProfileVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbListVariants, breadcrumbSeparatorVariants, buttonGroupItemVariants, buttonGroupVariants, buttonVariants, closeButtonVariants, dividerVariants, featuredIconVariants, iconVariants, inputWrapperVariants as inputVariants, menuGroupVariants, menuHeadingVariants, menuItemVariants, menuVariants, progressBarFillVariants, progressBarTrackVariants, sidebarAccountCardVariants, sidebarMenuItemVariants, sidebarSubmenuItemVariants, sidebarVariants, sliderHandleCircleVariants, tagVariants, textareaWrapperVariants as textareaVariants, thumbVariants, toggleVariants, tooltipContentVariants, useSidebarContext };