@deriv-ds/design-intelligence-layer 0.2.0 → 0.4.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Dialog as Dialog$1, ContextMenu as ContextMenu$1, Direction, DropdownMenu as DropdownMenu$1, Label as Label$1, Slot, HoverCard as HoverCard$1, Separator as Separator$1, Menubar as Menubar$1, NavigationMenu as NavigationMenu$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Tooltip as Tooltip$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { Accordion as Accordion$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Separator as Separator$1, Collapsible as Collapsible$1, Dialog as Dialog$1, ContextMenu as ContextMenu$1, Direction, DropdownMenu as DropdownMenu$1, Label as Label$1, Slot, HoverCard as HoverCard$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Tooltip as Tooltip$1, Slider as Slider$1, Switch as Switch$1, Tabs, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { DayPicker, DayButton } from 'react-day-picker';
@@ -16,41 +16,152 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 import { ToasterProps } from 'sonner';
 import { ClassValue } from 'clsx';
 
-declare function Accordion({ ...props }: React$1.ComponentProps<typeof Accordion$1.Root>): react_jsx_runtime.JSX.Element;
+type AccordionVariant = "fill" | "elevate" | "outline" | "flush";
+type AccordionSize = "xs" | "sm" | "md" | "lg";
+/**
+ * Root accordion container. Sets variant and size for all child items.
+ *
+ * @example
+ * // Fill accordion (default), medium size
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger title="Title" subtitle="Subtitle" />
+ *     <AccordionContent>Content here</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * // Elevate accordion (fill + shadow), medium size
+ * <Accordion type="single" collapsible variant="elevate">…</Accordion>
+ *
+ * @example
+ * // Outline accordion, small size
+ * <Accordion type="multiple" variant="outline" size="sm">…</Accordion>
+ *
+ * @example
+ * // Flush accordion with custom trigger content
+ * <Accordion type="single" collapsible variant="flush">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger><MyCustomHeader /></AccordionTrigger>
+ *     <AccordionContent>Content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare function Accordion({ variant, size, className, ...props }: React$1.ComponentProps<typeof Accordion$1.Root> & {
+    /** Visual style of each accordion card. @default "fill" */
+    variant?: AccordionVariant;
+    /** Controls padding, font size, and trigger height. @default "md" */
+    size?: AccordionSize;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Individual accordion item. Styling is derived from the parent `Accordion`
+ * variant — no extra props required.
+ */
 declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime.JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof Accordion$1.Trigger>): react_jsx_runtime.JSX.Element;
+/**
+ * Clickable trigger row that expands/collapses the accordion item.
+ *
+ * **Default layout** (when `title` prop is supplied):
+ * Three-column structure — `[icon] [title + subtitle] [chevron]`
+ *
+ * **Custom layout** (when `title` is omitted):
+ * Pass arbitrary `children`; the chevron is always appended automatically.
+ *
+ * @example
+ * // Default — structured header
+ * <AccordionTrigger
+ *   icon={<UserIcon />}
+ *   title="Account settings"
+ *   subtitle="Manage your profile"
+ * />
+ *
+ * @example
+ * // Default — no icon, no subtitle
+ * <AccordionTrigger title="Frequently asked questions" />
+ *
+ * @example
+ * // Custom — free-form header slot
+ * <AccordionTrigger><MyBadge /><MyTag /></AccordionTrigger>
+ */
+declare function AccordionTrigger({ className, children, icon, title, subtitle, titleBold, ...props }: React$1.ComponentProps<typeof Accordion$1.Trigger> & {
+    /**
+     * Optional leading icon (default layout only).
+     * Pass any React node — typically a 24 × 24 icon from lucide-react.
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Title text. When provided the trigger uses the **default three-column layout**.
+     * Omit to render `children` in a custom layout.
+     */
+    title?: string;
+    /** Secondary line below the title (default layout only). */
+    subtitle?: string;
+    /** Render title in semibold weight. @default false */
+    titleBold?: boolean;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Collapsible content area. Accepts any React children as the body slot.
+ * Padding automatically matches the parent accordion's size.
+ */
 declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof Accordion$1.Content>): react_jsx_runtime.JSX.Element;
 
-declare const alertVariants: (props?: ({
-    variant?: "info" | "error" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
-declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-
-declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | null | undefined;
-    size?: "lg" | "md" | "sm" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, loading, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    loading?: boolean;
+declare function Badge({ count, className, ...props }: React$1.ComponentProps<"span"> & {
+    count: number;
 }): react_jsx_runtime.JSX.Element;
-
-declare function AlertDialog({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogTrigger({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogPortal({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogOverlay({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogContent({ className, size, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Content> & {
-    size?: "default" | "sm";
+declare const dotColorMap: {
+    readonly red: "bg-badge-status-red";
+    readonly yellow: "bg-badge-status-yellow";
+    readonly green: "bg-badge-status-green";
+    readonly blue: "bg-badge-status-blue";
+};
+declare function BadgeDot({ size, color, className, ...props }: React$1.ComponentProps<"span"> & {
+    size?: "sm" | "md";
+    color?: keyof typeof dotColorMap;
+}): react_jsx_runtime.JSX.Element;
+
+type NotificationVariant = "information" | "success" | "warning" | "danger";
+interface NotificationBannerProps {
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    /** Optional content before the default Info icon (e.g. anatomy markers). */
+    slotBeforeIcon?: React$1.ReactNode;
+    /** Optional content before the close button when onClose is set (e.g. anatomy markers). */
+    slotBeforeClose?: React$1.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+declare function NotificationBanner({ title, description, slotBeforeIcon, slotBeforeClose, onClose, className, }: NotificationBannerProps): react_jsx_runtime.JSX.Element;
+interface NotificationItemProps {
+    variant?: NotificationVariant;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    dateTime?: React$1.ReactNode;
+    /** Optional content before the variant icon column (e.g. anatomy markers). */
+    slotBeforeIcon?: React$1.ReactNode;
+    /** Optional content after the icon + badge cell (e.g. anatomy markers for the unread dot). */
+    slotAfterIcon?: React$1.ReactNode;
+    /** Optional content before the desktop action buttons (e.g. anatomy markers). */
+    slotBeforeActions?: React$1.ReactNode;
+    isRead: boolean;
+    /** desktop=true → hover reveals icon-only actions (no swipe). default false = mobile swipe mode. */
+    desktop?: boolean;
+    onRead?: () => void;
+    onUnread?: () => void;
+    onDelete?: () => void;
+    className?: string;
+}
+declare function NotificationItem({ desktop, ...props }: NotificationItemProps): react_jsx_runtime.JSX.Element;
+declare function NotificationDivider({ className }: {
+    className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function AlertDialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function AlertDialogFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function AlertDialogTitle({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogMedia({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function AlertDialogAction({ className, variant, size, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Action> & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): react_jsx_runtime.JSX.Element;
-declare function AlertDialogCancel({ className, variant, size, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Cancel> & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): react_jsx_runtime.JSX.Element;
+
+declare const sectionMessageVariants: (props?: ({
+    variant?: "information" | "success" | "warning" | "danger" | "default" | "error" | "info" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function SectionMessage({ className, variant, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof sectionMessageVariants>): react_jsx_runtime.JSX.Element;
+declare function SectionMessageTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SectionMessageDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatio$1.Root>): react_jsx_runtime.JSX.Element;
 
@@ -63,30 +174,76 @@ declare function AvatarBadge({ className, ...props }: React$1.ComponentProps<"sp
 declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-declare const badgeVariants: (props?: ({
-    variant?: "fill" | "default" | "default-success" | "default-fail" | "default-warning" | "fill-success" | "fill-fail" | "fill-warning" | "ghost" | "ghost-success" | "ghost-fail" | "ghost-warning" | null | undefined;
-    size?: "lg" | "md" | "sm" | null | undefined;
+declare const tagVariants: (props?: ({
+    variant?: "fill-neutral" | "fill-red" | "fill-yellow" | "fill-green" | "fill-blue" | "outline-neutral" | "outline-red" | "outline-yellow" | "outline-green" | "outline-blue" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+declare function Tag({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof tagVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+type BreadcrumbSize = "sm" | "md";
+/**
+ * Breadcrumb navigation container.
+ *
+ * @param size - "sm" (14px) | "md" (16px). Default: "md"
+ *
+ * @example
+ * <Breadcrumb size="sm">
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+declare function Breadcrumb({ size, ...props }: React$1.ComponentProps<"nav"> & {
+    size?: BreadcrumbSize;
+}): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+/**
+ * Navigable breadcrumb link — "default" state in Figma.
+ * Uses `text-breadcrumb-default` (72% opacity) with hover lift to `text-prominent`.
+ */
 declare function BreadcrumbLink({ asChild, className, ...props }: React$1.ComponentProps<"a"> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * Current / active page — "selected" state in Figma.
+ * Renders muted (48% opacity), non-interactive, aria-current="page".
+ */
 declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, loading, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    loading?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare const chipVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Chip({ className, size, selected, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof chipVariants> & {
+    selected?: boolean;
 }): react_jsx_runtime.JSX.Element;
+
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker>): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 
-declare function Card({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const cardVariants: (props?: ({
+    variant?: "elevate" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Card({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof cardVariants>): react_jsx_runtime.JSX.Element;
 declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
@@ -148,10 +305,53 @@ declare function ChartLegendContent({ className, hideIcon, payload, verticalAlig
 }): react_jsx_runtime.JSX.Element | null;
 
 declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof Checkbox$1.Root>): react_jsx_runtime.JSX.Element;
+type CheckboxFieldProps = Omit<React$1.ComponentProps<typeof Checkbox$1.Root>, "children"> & {
+    /**
+     * Visual size variant.
+     * - `sm` → 14 px label, 14 px info icon
+     * - `md` → 16 px label, 16 px info icon (default)
+     */
+    size?: "sm" | "md";
+    /** Label text rendered next to the checkbox. */
+    label?: React$1.ReactNode;
+    /** When `true`, renders a Lucide `InfoIcon` after the label text. */
+    info?: boolean;
+};
+declare function CheckboxField({ id, label, info, size, disabled, className, ...props }: CheckboxFieldProps): react_jsx_runtime.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
 
-declare function Collapsible({ ...props }: React.ComponentProps<typeof Collapsible$1.Root>): react_jsx_runtime.JSX.Element;
-declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
-declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+declare function ListItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ListItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare const listItemVariants: (props?: ({
+    type?: "primary" | "secondary" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ListItem({ className, type, size, selected, disabled, asChild, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof listItemVariants> & {
+    asChild?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ListItemIcon({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function ListItemFlag({ src, alt, className, ...props }: Omit<React$1.ComponentProps<"div">, "children"> & {
+    src?: string;
+    alt?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const listItemMediaVariants: (props?: ({
+    variant?: "image" | "icon" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ListItemMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof listItemMediaVariants>): react_jsx_runtime.JSX.Element;
+declare function ListItemContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ListItemTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ListItemDescription({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function ListItemActions({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ListItemHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ListItemFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Collapsible({ ...props }: React$1.ComponentProps<typeof Collapsible$1.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React$1.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ className, ...props }: React$1.ComponentProps<typeof Collapsible$1.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleItem({ className, ...props }: Omit<React$1.ComponentProps<typeof ListItem>, "type" | "size">): react_jsx_runtime.JSX.Element;
 
 declare const Combobox: typeof Combobox$1.Root;
 declare function ComboboxValue({ ...props }: Combobox$1.Value.Props): react_jsx_runtime.JSX.Element;
@@ -172,7 +372,7 @@ declare function ComboboxChips({ className, ...props }: React$1.ComponentPropsWi
 declare function ComboboxChip({ className, children, showRemove, ...props }: Combobox$1.Chip.Props & {
     showRemove?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function ComboboxChipsInput({ className, children, ...props }: Combobox$1.Input.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxChipsInput({ className, children: _children, ...props }: Combobox$1.Input.Props): react_jsx_runtime.JSX.Element;
 declare function useComboboxAnchor(): React$1.RefObject<HTMLDivElement | null>;
 
 declare function Dialog({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
@@ -180,8 +380,10 @@ declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialo
 declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DialogClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+declare function DialogContent({ className, children, showCloseButton, type, icon, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
     showCloseButton?: boolean;
+    type?: "text" | "icon-and-text";
+    icon?: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
@@ -325,114 +527,125 @@ declare function HoverCard({ ...props }: React$1.ComponentProps<typeof HoverCard
 declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof HoverCard$1.Trigger>): react_jsx_runtime.JSX.Element;
 declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime.JSX.Element;
 
-declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+declare const inputWrapperVariants: (props?: ({
+    variant?: "fill" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    status?: "success" | "default" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React$1.ComponentProps<"input">, "size">, VariantProps<typeof inputWrapperVariants> {
+    label?: string;
+    helperText?: string;
+    iconLeft?: React$1.ReactNode;
+    iconRight?: React$1.ReactNode;
+    /** When false, renders the labelless variant: label and input cross-fade at the same size. */
+    labeled?: boolean;
+    /** Horizontal text alignment for both label and input. Default is "left". */
+    align?: "left" | "center";
+}
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const inputGroupVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    variant?: "fill" | "outline" | null | undefined;
+    status?: "success" | "default" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroup({ className, size, variant, status, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>): react_jsx_runtime.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): react_jsx_runtime.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-sm" | "icon-xs" | null | undefined;
+    size?: "xs" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
 declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 
+declare const searchFieldVariants: (props?: ({
+    variant?: "fill" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SearchFieldProps = Omit<React$1.ComponentProps<"div">, "children"> & VariantProps<typeof searchFieldVariants> & {
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+};
+declare function SearchField({ variant, size, className, placeholder, disabled, value, defaultValue, onChange, ...props }: SearchFieldProps): react_jsx_runtime.JSX.Element;
+
 declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function InputOTPSlot({ index, className, ...props }: React$1.ComponentProps<"div"> & {
+declare const inputOTPSlotVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    status?: "success" | "default" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputOTPSlot({ index, className, size, status, ...props }: React$1.ComponentProps<"div"> & {
     index: number;
-}): react_jsx_runtime.JSX.Element;
+} & VariantProps<typeof inputOTPSlotVariants>): react_jsx_runtime.JSX.Element;
 declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
-
-declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
-declare const itemVariants: (props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "sm" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Item({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
-    asChild?: boolean;
+declare function CodeInput({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
-declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "icon" | "default" | null | undefined;
+declare function CodeInputGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const codeInputSlotVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    status?: "success" | "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function ItemMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime.JSX.Element;
-declare function ItemContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function ItemTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function ItemDescription({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
-declare function ItemActions({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function ItemHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function ItemFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CodeInputSlot({ index, className, size, status, ...props }: React$1.ComponentProps<"div"> & {
+    index: number;
+} & VariantProps<typeof codeInputSlotVariants>): react_jsx_runtime.JSX.Element;
+declare function CodeInputSeparator({ ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): react_jsx_runtime.JSX.Element;
 declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const linkVariants: (props?: ({
-    size?: "lg" | "md" | "sm" | null | undefined;
+    variant?: "primary" | "secondary-normal" | "secondary-inverse" | "secondary-static-light" | "secondary-static-dark" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Link({ className, size, asChild, ...props }: React$1.ComponentProps<"a"> & VariantProps<typeof linkVariants> & {
+declare function Link({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"a"> & VariantProps<typeof linkVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Menubar({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.Root>): react_jsx_runtime.JSX.Element;
-declare function MenubarMenu({ ...props }: React$1.ComponentProps<typeof Menubar$1.Menu>): react_jsx_runtime.JSX.Element;
-declare function MenubarGroup({ ...props }: React$1.ComponentProps<typeof Menubar$1.Group>): react_jsx_runtime.JSX.Element;
-declare function MenubarPortal({ ...props }: React$1.ComponentProps<typeof Menubar$1.Portal>): react_jsx_runtime.JSX.Element;
-declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof Menubar$1.RadioGroup>): react_jsx_runtime.JSX.Element;
-declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React$1.ComponentProps<typeof Menubar$1.Content>): react_jsx_runtime.JSX.Element;
-declare function MenubarItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof Menubar$1.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
-}): react_jsx_runtime.JSX.Element;
-declare function MenubarCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof Menubar$1.CheckboxItem>): react_jsx_runtime.JSX.Element;
-declare function MenubarRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof Menubar$1.RadioItem>): react_jsx_runtime.JSX.Element;
-declare function MenubarLabel({ className, inset, ...props }: React$1.ComponentProps<typeof Menubar$1.Label> & {
-    inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function MenubarSeparator({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.Separator>): react_jsx_runtime.JSX.Element;
-declare function MenubarShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-declare function MenubarSub({ ...props }: React$1.ComponentProps<typeof Menubar$1.Sub>): react_jsx_runtime.JSX.Element;
-declare function MenubarSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof Menubar$1.SubTrigger> & {
-    inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function MenubarSubContent({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.SubContent>): react_jsx_runtime.JSX.Element;
-
 declare function NativeSelect({ className, size, ...props }: Omit<React$1.ComponentProps<"select">, "size"> & {
     size?: "sm" | "default";
 }): react_jsx_runtime.JSX.Element;
 declare function NativeSelectOption({ ...props }: React$1.ComponentProps<"option">): react_jsx_runtime.JSX.Element;
 declare function NativeSelectOptGroup({ className, ...props }: React$1.ComponentProps<"optgroup">): react_jsx_runtime.JSX.Element;
 
-declare function NavigationMenu({ className, children, viewport, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Root> & {
-    viewport?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.List>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Item>): react_jsx_runtime.JSX.Element;
-declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Content>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Viewport>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuLink({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Link>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Indicator>): react_jsx_runtime.JSX.Element;
-
 declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
 declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
 declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
 } & Pick<React$1.ComponentProps<typeof Button>, "size"> & React$1.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationLink({ className, isActive, size: _size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
 declare function PaginationPrevious({ className, ...props }: React$1.ComponentProps<"a">): react_jsx_runtime.JSX.Element;
 declare function PaginationNext({ className, ...props }: React$1.ComponentProps<"a">): react_jsx_runtime.JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+type PaginationEllipsisProps = {
+    /** Hidden page numbers this ellipsis represents. Makes the ellipsis interactive. */
+    pages?: number[];
+    /** Called with the selected page number when the user picks one from the dropdown. */
+    onPageSelect?: (page: number) => void;
+} & Omit<React$1.ComponentProps<"span">, "onClick">;
+declare function PaginationEllipsis({ className, pages, onPageSelect, ...props }: PaginationEllipsisProps): react_jsx_runtime.JSX.Element;
+type PaginationBulletsProps = {
+    /** Total number of pages (= number of dots). */
+    count: number;
+    /** Currently active page (1-based). */
+    page: number;
+    /** Called with the new page number when a dot or nav button is clicked. */
+    onPageChange?: (page: number) => void;
+    /** Show prev/next chevron buttons. Default: true. */
+    showNavigation?: boolean;
+    className?: string;
+};
+declare function PaginationBullets({ count, page, onPageChange, showNavigation, className, }: PaginationBulletsProps): react_jsx_runtime.JSX.Element;
 
 declare function Popover({ ...props }: React$1.ComponentProps<typeof Popover$1.Root>): react_jsx_runtime.JSX.Element;
 declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof Popover$1.Trigger>): react_jsx_runtime.JSX.Element;
@@ -442,10 +655,28 @@ declare function PopoverHeader({ className, ...props }: React$1.ComponentProps<"
 declare function PopoverTitle({ className, ...props }: React$1.ComponentProps<"h2">): react_jsx_runtime.JSX.Element;
 declare function PopoverDescription({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
 
-declare function Progress({ className, value, ...props }: React$1.ComponentProps<typeof Progress$1.Root>): react_jsx_runtime.JSX.Element;
+declare const progressVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    variant?: "normal" | "inverse" | null | undefined;
+    color?: "red" | "yellow" | "green" | "blue" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Progress({ className, value, size, variant, color, ...props }: React$1.ComponentProps<typeof Progress$1.Root> & VariantProps<typeof progressVariants>): react_jsx_runtime.JSX.Element;
 
 declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Root>): react_jsx_runtime.JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Item>): react_jsx_runtime.JSX.Element;
+type RadioGroupFieldProps = React$1.ComponentProps<typeof RadioGroup$1.Item> & {
+    /**
+     * Visual size variant.
+     * - `sm` → 14 px label, 14 px info icon
+     * - `md` → 16 px label, 16 px info icon (default)
+     */
+    size?: "sm" | "md";
+    /** Label text rendered next to the radio button. */
+    label?: React$1.ReactNode;
+    /** When `true`, renders a Lucide `InfoIcon` after the label text. */
+    info?: boolean;
+};
+declare function RadioGroupField({ id, label, info, size, disabled, className, ...props }: RadioGroupFieldProps): react_jsx_runtime.JSX.Element;
 
 declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): react_jsx_runtime.JSX.Element;
 declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): react_jsx_runtime.JSX.Element;
@@ -459,22 +690,34 @@ declare function ScrollBar({ className, orientation, ...props }: React$1.Compone
 declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): react_jsx_runtime.JSX.Element;
 declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof Select$1.Group>): react_jsx_runtime.JSX.Element;
 declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): react_jsx_runtime.JSX.Element;
-declare function SelectTrigger({ className, size, readOnly, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
-    size?: "sm" | "default";
+declare function SelectTrigger({ className, size, readOnly, children, label, labeled, align, required, status, variant, iconLeft, helperText, disabled, onFocus: onFocusProp, onBlur: onBlurProp, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
+    size?: "sm" | "md" | "lg" | "default";
     readOnly?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
+    label?: string;
+    /** When false, label and value cross-fade at the same position instead of floating. Default true. */
+    labeled?: boolean;
+    align?: "left" | "center";
+    status?: "default" | "success" | "error";
+    variant?: "outline" | "fill";
+    iconLeft?: React$1.ReactNode;
+    helperText?: string;
+    required?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, align, sideOffset, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
 declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
 declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
 declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollUpButton>): react_jsx_runtime.JSX.Element;
 declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollDownButton>): react_jsx_runtime.JSX.Element;
 
-declare function Sheet({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
+type SheetSide = "top" | "right" | "bottom" | "left";
+declare function Sheet({ side, ...props }: React$1.ComponentProps<typeof Dialog$1.Root> & {
+    side?: SheetSide;
+}): react_jsx_runtime.JSX.Element;
 declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
 declare function SheetClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
-declare function SheetContent({ className, children, side, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
-    side?: "top" | "right" | "bottom" | "left";
+declare function SheetContent({ className, children, side: sideProp, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+    side?: SheetSide;
     showCloseButton?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function SheetHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
@@ -485,7 +728,9 @@ declare function SheetDescription({ className, ...props }: React$1.ComponentProp
 declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, variant, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content> & {
+    variant?: "default" | "error";
+}): react_jsx_runtime.JSX.Element;
 
 type SidebarContextProps = {
     state: "expanded" | "collapsed";
@@ -526,8 +771,8 @@ declare function SidebarGroupContent({ className, ...props }: React$1.ComponentP
 declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
 declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "lg" | "sm" | "default" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<"button"> & {
     asChild?: boolean;
@@ -552,10 +797,13 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
 
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React$1.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime.JSX.Element;
+declare function Slider({ className, defaultValue, value, min, max, size, ...props }: React$1.ComponentProps<typeof Slider$1.Root> & {
+    size?: "sm" | "default";
+}): react_jsx_runtime.JSX.Element;
 
-declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+declare const Snackbar: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
 
+type InputGroupVariantProps = VariantProps<typeof inputGroupVariants>;
 interface StepperProps {
     value?: number;
     defaultValue?: number;
@@ -569,11 +817,34 @@ interface StepperProps {
     id?: string;
     name?: string;
     "aria-label"?: string;
+    /** "split" — [−] on far left, editable input centered, [+] on far right.
+     *  "right-aligned" — editable input left-aligned (flex-1), both [−][+] grouped on the right. */
+    layout?: "split" | "right-aligned";
+    /** When provided, renders the labelled variant: uses Input as the base with a
+     *  floating label and stepper buttons in the iconRight slot. */
+    label?: string;
+    /** Short unit/currency label inside the field, right of the decrement button (split only). */
+    labelLeft?: string;
+    /** Short unit/currency label inside the field, left of the increment button (split only). */
+    labelRight?: string;
+    /** Helper message shown in the footer row below the field. */
+    helperText?: string;
+    /** When true, renders a currentValue/max counter on the right of the footer row. Requires a finite `max`. */
+    showCounter?: boolean;
+    /** Visual style of the field. Defaults to "outline". */
+    variant?: InputGroupVariantProps["variant"];
+    /** Validation state. Affects border colour and footer text colour. */
+    status?: InputGroupVariantProps["status"];
+    /** Field height and font size. "md" (default, 56px / 16px) and "sm" (32px / 14px).
+     *  Applies to the labelless variant only — ignored when `label` is set. */
+    size?: "md" | "sm";
 }
-declare function Stepper({ value: controlledValue, defaultValue, onValueChange, min, max, step, disabled, placeholder, className, id, name, "aria-label": ariaLabel, }: StepperProps): react_jsx_runtime.JSX.Element;
+declare function Stepper({ value: controlledValue, defaultValue, onValueChange, min, max, step, disabled, placeholder, className, id, name, "aria-label": ariaLabel, layout, label, labelLeft, labelRight, helperText, showCounter, variant, status, size, }: StepperProps): react_jsx_runtime.JSX.Element;
 
 declare function Spinner({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
+declare function LoadingSpinner({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
 declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
     size?: "sm" | "default";
 }): react_jsx_runtime.JSX.Element;
@@ -587,44 +858,56 @@ declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">
 declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): react_jsx_runtime.JSX.Element;
 declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): react_jsx_runtime.JSX.Element;
 
-declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
-declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | null | undefined;
-    size?: "lg" | "md" | "sm" | null | undefined;
+declare const segmentedControlListVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, size, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
-declare function TabsTrigger({ className, iconPosition, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger> & {
-    iconPosition?: "inline" | "top";
-}): react_jsx_runtime.JSX.Element;
-declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime.JSX.Element;
-
-declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+declare function SegmentedControl({ className, ...props }: React$1.ComponentProps<typeof Tabs.Root>): react_jsx_runtime.JSX.Element;
+declare function SegmentedControlList({ className, size, ...props }: React$1.ComponentProps<typeof Tabs.List> & VariantProps<typeof segmentedControlListVariants>): react_jsx_runtime.JSX.Element;
+declare function SegmentedControlTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SegmentedControlContent({ className, ...props }: React$1.ComponentProps<typeof Tabs.Content>): react_jsx_runtime.JSX.Element;
 
-interface TicketCardProps {
-    icon?: React$1.ReactNode;
+declare const tabListVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Tab({ className, ...props }: React$1.ComponentProps<typeof Tabs.Root>): react_jsx_runtime.JSX.Element;
+declare function TabList({ className, size, ...props }: React$1.ComponentProps<typeof Tabs.List> & VariantProps<typeof tabListVariants>): react_jsx_runtime.JSX.Element;
+declare function TabTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabContent({ className, ...props }: React$1.ComponentProps<typeof Tabs.Content>): react_jsx_runtime.JSX.Element;
+
+declare const textareaWrapperVariants: (props?: ({
+    variant?: "fill" | "outline" | null | undefined;
+    status?: "success" | "default" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextareaProps extends Omit<React$1.ComponentProps<"textarea">, "size">, VariantProps<typeof textareaWrapperVariants> {
     label?: string;
-    value?: string;
-    stubIcon?: React$1.ReactNode;
-    stubLabel?: string;
-    onStubClick?: () => void;
-    stubDisabled?: boolean;
-    className?: string;
+    helperText?: string;
+    iconLeft?: React$1.ReactNode;
+    iconRight?: React$1.ReactNode;
+    /**
+     * When `true` (default), renders a floating label above the text area.
+     * When `false`, renders the labelless variant where the label acts as a
+     * placeholder that cross-fades with the typed text.
+     */
+    labeled?: boolean;
+    /**
+     * Controls the minimum height for the **labelless** variant only.
+     * - `"md"` (default) → 128 px
+     * - `"sm"` → 104 px
+     *
+     * Ignored when `labeled={true}`, which always uses the 128 px height.
+     */
+    size?: "sm" | "md";
 }
-declare function TicketCard({ icon, label, value, stubIcon, stubLabel, onStubClick, stubDisabled, className, }: TicketCardProps): react_jsx_runtime.JSX.Element;
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
-declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "lg" | "sm" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+declare const toggleVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Toggle({ className, ...props }: React$1.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 
-declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-}): react_jsx_runtime.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+declare function ToggleGroup({ className, children, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Root>): react_jsx_runtime.JSX.Element;
+declare function ToggleGroupItem({ className, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Link, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Stepper, type StepperProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TicketCard, type TicketCardProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, linkVariants, navigationMenuTriggerStyle, tabsListVariants, toggleVariants, useComboboxAnchor, useDirection, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, type AccordionSize, AccordionTrigger, type AccordionVariant, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeDot, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxField, Chip, CodeInput, CodeInputGroup, CodeInputSeparator, CodeInputSlot, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, Link, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemFlag, ListItemFooter, ListItemGroup, ListItemHeader, ListItemIcon, ListItemMedia, ListItemSeparator, ListItemTitle, LoadingSpinner, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NotificationBanner, type NotificationBannerProps, NotificationDivider, NotificationItem, type NotificationItemProps, type NotificationVariant, Pagination, PaginationBullets, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupField, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchField, SectionMessage, SectionMessageDescription, SectionMessageTitle, SegmentedControl, SegmentedControlContent, SegmentedControlList, SegmentedControlTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Snackbar, Spinner, Stepper, type StepperProps, Switch, Tab, TabContent, TabList, TabTrigger, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tag, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cardVariants, chipVariants, cn, codeInputSlotVariants, inputGroupVariants, inputOTPSlotVariants, inputWrapperVariants as inputVariants, linkVariants, progressVariants, searchFieldVariants, segmentedControlListVariants, tabListVariants, tagVariants, textareaWrapperVariants as textareaVariants, toggleVariants, useComboboxAnchor, useDirection, useFormField, useIsMobile, useSidebar };