@geomak/ui 5.9.0 → 6.0.0

package/dist/index.d.cts

@@ -707,6 +707,8 @@ interface TooltipProps {
     delayDuration?: number;
     /** Offset from trigger in px (default 8) */
     sideOffset?: number;
+    /** Extra classes merged onto the tooltip content bubble. */
+    className?: string;
 }
 /**
  * Tooltip powered by Radix Tooltip.
@@ -723,42 +725,105 @@ interface TooltipProps {
  *   </Tooltip>
  * </TooltipProvider>
  */
-declare function Tooltip({ children, title, placement, delayDuration, sideOffset, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, title, placement, delayDuration, sideOffset, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React__default.FC<TooltipPrimitive.TooltipProviderProps>;
 
-interface TabItem {
-    key: string;
-    title: React__default.ReactNode;
-    content: React__default.ReactNode;
-}
+type TabsVariant = 'underline' | 'segmented' | 'enclosed';
+type TabsSize = 'sm' | 'md' | 'lg';
+type TabsOrientation = 'horizontal' | 'vertical';
 interface TabsProps {
-    tabs?: TabItem[];
-    onTabChange?: (prev: TabItem | undefined, next: TabItem | undefined) => void;
-    onTabClose?: (key: string) => void;
-    /** Only mount the active tab's content */
-    isLazy?: boolean;
-    tabsClosable?: boolean;
-    defaultActiveTab?: string;
+    /** Controlled active tab value. */
+    value?: string;
+    /** Uncontrolled initial active tab value. */
+    defaultValue?: string;
+    /** Fires with the next active value. */
+    onValueChange?: (value: string) => void;
+    /** Visual style. `'underline'` (default) | `'segmented'` | `'enclosed'`. */
+    variant?: TabsVariant;
+    /** Size preset. Default `'md'`. */
+    size?: TabsSize;
+    /** `'horizontal'` (default) strip + panel below, or `'vertical'` rail + panel beside. */
+    orientation?: TabsOrientation;
+    /** Extra classes merged onto the root. */
+    className?: string;
+    /** Inline style on the root. */
+    style?: React__default.CSSProperties;
+    children: React__default.ReactNode;
 }
 /**
- * Scrollable pill-style tabs powered by Radix Tabs.
+ * Compositional, motion-forward tab system on Radix Tabs.
  *
- * Radix handles roving-tabindex keyboard navigation and ARIA roles.
- * Rounded pill style, fully themed via semantic design tokens.
- * Supports dynamic tab add/remove with automatic activation.
+ * The active tab is marked by a thin cobalt indicator that *slides* between
+ * tabs (the design system's "one rare accent" rule, not a full-fill pill).
+ * Three variants — `underline` (signature), `segmented` (lifted-pill track),
+ * `enclosed` (folder tabs) — plus horizontal/vertical orientation, icons,
+ * count badges, closeable + add-tab, and overflow scrolling with chevrons that
+ * appear only when the strip actually overflows.
  *
  * @example
- * <Tabs
- *   tabs={[
- *     { key: 'v1', title: 'Vessel 1', content: <Panel1 /> },
- *     { key: 'v2', title: 'Vessel 2', content: <Panel2 /> },
- *   ]}
- *   tabsClosable
- *   onTabClose={(key) => removetab(key)}
- * />
+ * ```tsx
+ * <Tabs defaultValue="overview" variant="underline">
+ *   <Tabs.List aria-label="Sections">
+ *     <Tabs.Trigger value="overview" icon={<HomeIcon />}>Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity" badge={12}>Activity</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">…</Tabs.Panel>
+ *   <Tabs.Panel value="activity">…</Tabs.Panel>
+ * </Tabs>
+ * ```
  */
-declare function Tabs({ tabs, onTabChange, onTabClose, isLazy, tabsClosable, defaultActiveTab, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs({ value, defaultValue, onValueChange, variant, size, orientation, className, style, children, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare namespace Tabs {
+    var List: typeof TabsList;
+    var Trigger: typeof TabsTrigger;
+    var Panel: typeof TabsPanel;
+    var Add: typeof TabsAdd;
+}
+interface TabsListProps {
+    children: React__default.ReactNode;
+    /** Accessible name for the tab list. */
+    'aria-label'?: string;
+    /** Extra classes merged onto the tab strip. */
+    className?: string;
+}
+declare function TabsList({ children, 'aria-label': ariaLabel, className }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    /** Value that activates this tab and its matching `<Tabs.Panel>`. */
+    value: string;
+    /** Optional leading icon. */
+    icon?: React__default.ReactNode;
+    /** Optional trailing count badge (number or node). */
+    badge?: React__default.ReactNode;
+    /** Render a × close button and call `onClose`. */
+    closeable?: boolean;
+    onClose?: () => void;
+    disabled?: boolean;
+    /** Extra classes merged onto the trigger. */
+    className?: string;
+    children: React__default.ReactNode;
+}
+declare function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className, children }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsAddProps {
+    onClick?: () => void;
+    'aria-label'?: string;
+    className?: string;
+}
+declare function TabsAdd({ onClick, 'aria-label': ariaLabel, className }: TabsAddProps): react_jsx_runtime.JSX.Element;
+interface TabsPanelProps {
+    /** Value of the tab this panel belongs to. */
+    value: string;
+    /**
+     * Keep the panel mounted when inactive (preserves scroll / form state).
+     * Default `false` — panels mount lazily on first activation.
+     */
+    keepMounted?: boolean;
+    /** Extra classes merged onto the panel. */
+    className?: string;
+    style?: React__default.CSSProperties;
+    children: React__default.ReactNode;
+}
+declare function TabsPanel({ value, keepMounted, className, style, children }: TabsPanelProps): react_jsx_runtime.JSX.Element;
 
 interface TreeNode {
     key: string;
@@ -779,6 +844,10 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Extra classes merged onto the tree root. */
+    className?: string;
+    /** Inline style on the tree root. */
+    style?: React__default.CSSProperties;
 }
 /** ─────────────────── public component ─────────────────── */
 /**
@@ -795,7 +864,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
@@ -873,6 +942,8 @@ interface LoadingSpinnerProps {
      * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
+    /** Extra classes merged onto the spinner root. */
+    className?: string;
 }
 /**
  * Enterprise-grade loading indicator.
@@ -917,7 +988,7 @@ interface LoadingSpinnerProps {
  * />
  * ```
  */
-declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -1039,6 +1110,8 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Extra classes merged onto the container root. */
+    className?: string;
 }
 /**
  * Container that smoothly expands to fill its parent on click and
@@ -1065,7 +1138,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -1106,6 +1179,8 @@ interface OpaqueGridCardProps {
     isRight?: boolean;
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the card root. */
+    className?: string;
 }
 /**
  * Opaque carousel variant of GridCard (left or right edge of the carousel).
@@ -1116,29 +1191,33 @@ interface OpaqueGridCardProps {
  * @example
  * <OpaqueGridCard item={sideItem} isRight onOpen={({ to }) => navigate(to!)} />
  */
-declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
+declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, className, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogGridProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the grid root. */
+    className?: string;
 }
 /**
  * Wrapping flex grid of `GridCard` tiles.
  */
-declare function CatalogGrid({ items, buttonText, onOpen }: CatalogGridProps): react_jsx_runtime.JSX.Element;
+declare function CatalogGrid({ items, buttonText, onOpen, className }: CatalogGridProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogCarouselProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the carousel root. */
+    className?: string;
 }
 /**
  * Three-card carousel (previous → active (scaled) → next).
  *
  * Decoupled from ThemeContext — uses CSS `dark:` classes.
  */
-declare function CatalogCarousel({ items, buttonText, onOpen }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CatalogCarousel({ items, buttonText, onOpen, className }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogProps {
     /** 'grid' | 'carousel' */
@@ -1146,6 +1225,8 @@ interface CatalogProps {
     items?: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the catalog root. */
+    className?: string;
 }
 /**
  * Switches between grid and carousel layouts for a list of application tiles.
@@ -1153,7 +1234,7 @@ interface CatalogProps {
  * @example
  * <Catalog display="carousel" items={apps} onOpen={({ to }) => navigate(to!)} />
  */
-declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
+declare function Catalog({ display, items, buttonText, onOpen, className }: CatalogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A single action in the context menu.
@@ -1184,6 +1265,8 @@ interface ContextMenuProps {
      * component / div / image — anything you can right-click on.
      */
     children: React__default.ReactNode;
+    /** Extra classes merged onto the menu content panel. */
+    className?: string;
 }
 /**
  * Right-click context menu, built on `@radix-ui/react-context-menu`.
@@ -1222,7 +1305,7 @@ interface ContextMenuProps {
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 /** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
 interface ContextMenuPosition {
     x: number;
@@ -1449,6 +1532,8 @@ interface ThemeSwitchProps {
     }) => void;
     /** Optional accessible label (defaults to "Toggle dark mode") */
     label?: string;
+    /** Extra classes merged onto the root label. */
+    className?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
@@ -1460,7 +1545,7 @@ interface ThemeSwitchProps {
  * @example
  * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label, className }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
 
 interface TopBarProps {
     /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
@@ -2772,6 +2857,8 @@ interface DatePickerProps {
     clearable?: boolean;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 type TemporalPickerProps = DatePickerProps;
 /**
@@ -2809,7 +2896,7 @@ type TemporalPickerProps = DatePickerProps;
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     /** Controlled value. */
@@ -3744,4 +3831,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.d.ts

@@ -707,6 +707,8 @@ interface TooltipProps {
     delayDuration?: number;
     /** Offset from trigger in px (default 8) */
     sideOffset?: number;
+    /** Extra classes merged onto the tooltip content bubble. */
+    className?: string;
 }
 /**
  * Tooltip powered by Radix Tooltip.
@@ -723,42 +725,105 @@ interface TooltipProps {
  *   </Tooltip>
  * </TooltipProvider>
  */
-declare function Tooltip({ children, title, placement, delayDuration, sideOffset, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, title, placement, delayDuration, sideOffset, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React__default.FC<TooltipPrimitive.TooltipProviderProps>;
 
-interface TabItem {
-    key: string;
-    title: React__default.ReactNode;
-    content: React__default.ReactNode;
-}
+type TabsVariant = 'underline' | 'segmented' | 'enclosed';
+type TabsSize = 'sm' | 'md' | 'lg';
+type TabsOrientation = 'horizontal' | 'vertical';
 interface TabsProps {
-    tabs?: TabItem[];
-    onTabChange?: (prev: TabItem | undefined, next: TabItem | undefined) => void;
-    onTabClose?: (key: string) => void;
-    /** Only mount the active tab's content */
-    isLazy?: boolean;
-    tabsClosable?: boolean;
-    defaultActiveTab?: string;
+    /** Controlled active tab value. */
+    value?: string;
+    /** Uncontrolled initial active tab value. */
+    defaultValue?: string;
+    /** Fires with the next active value. */
+    onValueChange?: (value: string) => void;
+    /** Visual style. `'underline'` (default) | `'segmented'` | `'enclosed'`. */
+    variant?: TabsVariant;
+    /** Size preset. Default `'md'`. */
+    size?: TabsSize;
+    /** `'horizontal'` (default) strip + panel below, or `'vertical'` rail + panel beside. */
+    orientation?: TabsOrientation;
+    /** Extra classes merged onto the root. */
+    className?: string;
+    /** Inline style on the root. */
+    style?: React__default.CSSProperties;
+    children: React__default.ReactNode;
 }
 /**
- * Scrollable pill-style tabs powered by Radix Tabs.
+ * Compositional, motion-forward tab system on Radix Tabs.
  *
- * Radix handles roving-tabindex keyboard navigation and ARIA roles.
- * Rounded pill style, fully themed via semantic design tokens.
- * Supports dynamic tab add/remove with automatic activation.
+ * The active tab is marked by a thin cobalt indicator that *slides* between
+ * tabs (the design system's "one rare accent" rule, not a full-fill pill).
+ * Three variants — `underline` (signature), `segmented` (lifted-pill track),
+ * `enclosed` (folder tabs) — plus horizontal/vertical orientation, icons,
+ * count badges, closeable + add-tab, and overflow scrolling with chevrons that
+ * appear only when the strip actually overflows.
  *
  * @example
- * <Tabs
- *   tabs={[
- *     { key: 'v1', title: 'Vessel 1', content: <Panel1 /> },
- *     { key: 'v2', title: 'Vessel 2', content: <Panel2 /> },
- *   ]}
- *   tabsClosable
- *   onTabClose={(key) => removetab(key)}
- * />
+ * ```tsx
+ * <Tabs defaultValue="overview" variant="underline">
+ *   <Tabs.List aria-label="Sections">
+ *     <Tabs.Trigger value="overview" icon={<HomeIcon />}>Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity" badge={12}>Activity</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">…</Tabs.Panel>
+ *   <Tabs.Panel value="activity">…</Tabs.Panel>
+ * </Tabs>
+ * ```
  */
-declare function Tabs({ tabs, onTabChange, onTabClose, isLazy, tabsClosable, defaultActiveTab, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs({ value, defaultValue, onValueChange, variant, size, orientation, className, style, children, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare namespace Tabs {
+    var List: typeof TabsList;
+    var Trigger: typeof TabsTrigger;
+    var Panel: typeof TabsPanel;
+    var Add: typeof TabsAdd;
+}
+interface TabsListProps {
+    children: React__default.ReactNode;
+    /** Accessible name for the tab list. */
+    'aria-label'?: string;
+    /** Extra classes merged onto the tab strip. */
+    className?: string;
+}
+declare function TabsList({ children, 'aria-label': ariaLabel, className }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    /** Value that activates this tab and its matching `<Tabs.Panel>`. */
+    value: string;
+    /** Optional leading icon. */
+    icon?: React__default.ReactNode;
+    /** Optional trailing count badge (number or node). */
+    badge?: React__default.ReactNode;
+    /** Render a × close button and call `onClose`. */
+    closeable?: boolean;
+    onClose?: () => void;
+    disabled?: boolean;
+    /** Extra classes merged onto the trigger. */
+    className?: string;
+    children: React__default.ReactNode;
+}
+declare function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className, children }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsAddProps {
+    onClick?: () => void;
+    'aria-label'?: string;
+    className?: string;
+}
+declare function TabsAdd({ onClick, 'aria-label': ariaLabel, className }: TabsAddProps): react_jsx_runtime.JSX.Element;
+interface TabsPanelProps {
+    /** Value of the tab this panel belongs to. */
+    value: string;
+    /**
+     * Keep the panel mounted when inactive (preserves scroll / form state).
+     * Default `false` — panels mount lazily on first activation.
+     */
+    keepMounted?: boolean;
+    /** Extra classes merged onto the panel. */
+    className?: string;
+    style?: React__default.CSSProperties;
+    children: React__default.ReactNode;
+}
+declare function TabsPanel({ value, keepMounted, className, style, children }: TabsPanelProps): react_jsx_runtime.JSX.Element;
 
 interface TreeNode {
     key: string;
@@ -779,6 +844,10 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Extra classes merged onto the tree root. */
+    className?: string;
+    /** Inline style on the tree root. */
+    style?: React__default.CSSProperties;
 }
 /** ─────────────────── public component ─────────────────── */
 /**
@@ -795,7 +864,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
@@ -873,6 +942,8 @@ interface LoadingSpinnerProps {
      * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
+    /** Extra classes merged onto the spinner root. */
+    className?: string;
 }
 /**
  * Enterprise-grade loading indicator.
@@ -917,7 +988,7 @@ interface LoadingSpinnerProps {
  * />
  * ```
  */
-declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -1039,6 +1110,8 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Extra classes merged onto the container root. */
+    className?: string;
 }
 /**
  * Container that smoothly expands to fill its parent on click and
@@ -1065,7 +1138,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -1106,6 +1179,8 @@ interface OpaqueGridCardProps {
     isRight?: boolean;
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the card root. */
+    className?: string;
 }
 /**
  * Opaque carousel variant of GridCard (left or right edge of the carousel).
@@ -1116,29 +1191,33 @@ interface OpaqueGridCardProps {
  * @example
  * <OpaqueGridCard item={sideItem} isRight onOpen={({ to }) => navigate(to!)} />
  */
-declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
+declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, className, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogGridProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the grid root. */
+    className?: string;
 }
 /**
  * Wrapping flex grid of `GridCard` tiles.
  */
-declare function CatalogGrid({ items, buttonText, onOpen }: CatalogGridProps): react_jsx_runtime.JSX.Element;
+declare function CatalogGrid({ items, buttonText, onOpen, className }: CatalogGridProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogCarouselProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the carousel root. */
+    className?: string;
 }
 /**
  * Three-card carousel (previous → active (scaled) → next).
  *
  * Decoupled from ThemeContext — uses CSS `dark:` classes.
  */
-declare function CatalogCarousel({ items, buttonText, onOpen }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CatalogCarousel({ items, buttonText, onOpen, className }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogProps {
     /** 'grid' | 'carousel' */
@@ -1146,6 +1225,8 @@ interface CatalogProps {
     items?: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the catalog root. */
+    className?: string;
 }
 /**
  * Switches between grid and carousel layouts for a list of application tiles.
@@ -1153,7 +1234,7 @@ interface CatalogProps {
  * @example
  * <Catalog display="carousel" items={apps} onOpen={({ to }) => navigate(to!)} />
  */
-declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
+declare function Catalog({ display, items, buttonText, onOpen, className }: CatalogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A single action in the context menu.
@@ -1184,6 +1265,8 @@ interface ContextMenuProps {
      * component / div / image — anything you can right-click on.
      */
     children: React__default.ReactNode;
+    /** Extra classes merged onto the menu content panel. */
+    className?: string;
 }
 /**
  * Right-click context menu, built on `@radix-ui/react-context-menu`.
@@ -1222,7 +1305,7 @@ interface ContextMenuProps {
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 /** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
 interface ContextMenuPosition {
     x: number;
@@ -1449,6 +1532,8 @@ interface ThemeSwitchProps {
     }) => void;
     /** Optional accessible label (defaults to "Toggle dark mode") */
     label?: string;
+    /** Extra classes merged onto the root label. */
+    className?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
@@ -1460,7 +1545,7 @@ interface ThemeSwitchProps {
  * @example
  * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label, className }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
 
 interface TopBarProps {
     /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
@@ -2772,6 +2857,8 @@ interface DatePickerProps {
     clearable?: boolean;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 type TemporalPickerProps = DatePickerProps;
 /**
@@ -2809,7 +2896,7 @@ type TemporalPickerProps = DatePickerProps;
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     /** Controlled value. */
@@ -3744,4 +3831,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };