@geomak/ui 5.0.2 → 5.1.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode } from 'react';
+import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -339,6 +339,268 @@ interface PortalProps {
  */
 declare function Portal({ children, target }: PortalProps): React$1.ReactPortal;
 
+type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type BoxBackground = 'none' | 'background' | 'surface' | 'surface-raised' | 'accent';
+type BoxBorder = 'none' | 'border' | 'border-strong' | 'accent' | 'status-error';
+type BoxRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+type BoxShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface BoxProps {
+    as?: keyof React$1.JSX.IntrinsicElements;
+    /** Padding shorthand — applies to all sides. */
+    p?: Spacing;
+    /** Horizontal padding (left + right). */
+    px?: Spacing;
+    /** Vertical padding (top + bottom). */
+    py?: Spacing;
+    pt?: Spacing;
+    pr?: Spacing;
+    pb?: Spacing;
+    pl?: Spacing;
+    /** Margin shorthand. */
+    m?: Spacing;
+    mx?: Spacing;
+    my?: Spacing;
+    mt?: Spacing;
+    mr?: Spacing;
+    mb?: Spacing;
+    ml?: Spacing;
+    background?: BoxBackground;
+    border?: BoxBorder;
+    radius?: BoxRadius;
+    shadow?: BoxShadow;
+    /** Width via Tailwind class or CSS value. */
+    width?: string | number;
+    /** Height via Tailwind class or CSS value. */
+    height?: string | number;
+    /** Click handler — accepts any element-typed handler. */
+    onClick?: React$1.MouseEventHandler<HTMLElement>;
+    className?: string;
+    style?: React$1.CSSProperties;
+    children?: React$1.ReactNode;
+}
+/**
+ * A polymorphic layout primitive — a `<div>` (by default) styled via prop
+ * shortcuts to the design system's tokenised spacing, surface, border,
+ * radius, and shadow scales. Use it when you'd otherwise reach for a
+ * className-only `<div>` with `p-4 bg-surface border border-border rounded-lg`.
+ *
+ * The token shortcuts map straight to Tailwind classes under the hood, so
+ * Tailwind's content scanner sees the classes and JIT-emits the CSS. There
+ * is no runtime style cost beyond the className concatenation.
+ *
+ * Use `as` when the semantic element should differ (`<section>`, `<article>`).
+ *
+ * @example Padded card surface
+ * ```tsx
+ * <Box p="lg" background="surface" border="border" radius="lg" shadow="sm">
+ *   <Typography variant="h3">Card title</Typography>
+ * </Box>
+ * ```
+ *
+ * @example Semantic section
+ * ```tsx
+ * <Box as="section" px="md" py="lg" background="background">
+ *   <PageContent />
+ * </Box>
+ * ```
+ */
+declare function Box({ as, p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, background, border, radius, shadow, width, height, onClick, className, style, children, }: BoxProps): react_jsx_runtime.JSX.Element;
+
+type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
+type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+interface FlexProps extends BoxProps {
+    direction?: FlexDirection;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: FlexWrap;
+    /** Gap between children — uses the same spacing token scale as Box. */
+    gap?: Spacing;
+    inline?: boolean;
+}
+/**
+ * `Box` with `display: flex` baked in. All Box props are accepted (padding,
+ * margin, background, border, etc.) plus flex-specific controls.
+ *
+ * @example Horizontal row, centred, with gap
+ * ```tsx
+ * <Flex direction="row" align="center" gap="md">
+ *   <Avatar src={user.photo} alt={user.name} />
+ *   <Typography variant="body">{user.name}</Typography>
+ * </Flex>
+ * ```
+ *
+ * @example Vertical stack
+ * ```tsx
+ * <Flex direction="col" gap="sm">
+ *   <Typography variant="h3">Title</Typography>
+ *   <Typography variant="body">Body text</Typography>
+ * </Flex>
+ * ```
+ */
+declare function Flex({ direction, align, justify, wrap, gap, inline, className, ...boxProps }: FlexProps): react_jsx_runtime.JSX.Element;
+
+interface GridProps extends BoxProps {
+    /**
+     * Number of columns (1–12) for the most common case, OR an explicit
+     * CSS grid-template-columns string for arbitrary layouts
+     * (e.g. `"200px 1fr"` or `"repeat(auto-fit, minmax(180px, 1fr))"`).
+     */
+    cols?: number | string;
+    /** Same as `cols` but for rows. */
+    rows?: number | string;
+    /** Uniform gap. Token scale, like Box's padding. */
+    gap?: Spacing;
+    /** Horizontal-only gap (overrides `gap`). */
+    gapX?: Spacing;
+    /** Vertical-only gap (overrides `gap`). */
+    gapY?: Spacing;
+    /** Cross-axis alignment of items within their cell. */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Main-axis alignment of items within their cell. */
+    justify?: 'start' | 'center' | 'end' | 'stretch';
+}
+/**
+ * `Box` with `display: grid` baked in. Use `cols` / `rows` as numbers for
+ * the common "N equal tracks" case, or pass any CSS grid-template-* string
+ * for arbitrary layouts (auto-fit grids, fixed-width sidebars, etc.).
+ *
+ * @example 3-column grid with medium gap
+ * ```tsx
+ * <Grid cols={3} gap="md">
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ * ```
+ *
+ * @example Auto-fit responsive grid
+ * ```tsx
+ * <Grid cols="repeat(auto-fit, minmax(220px, 1fr))" gap="lg">
+ *   {items.map((it) => <Card key={it.id} {...it} />)}
+ * </Grid>
+ * ```
+ */
+declare function Grid({ cols, rows, gap, gapX, gapY, align, justify, className, style, ...boxProps }: GridProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+interface AvatarProps {
+    /** Image URL. If missing or fails to load, `fallback` renders instead. */
+    src?: string;
+    /** Alt text — required when `src` is provided for screen readers. */
+    alt?: string;
+    /**
+     * Fallback rendered when the image is unavailable. Pass either:
+     * - a string (e.g. user initials like "JD") — rendered with semi-bold weight
+     * - any ReactNode (icon, emoji)
+     * - omit entirely — a generic "person" silhouette is used
+     */
+    fallback?: React$1.ReactNode;
+    /** Size preset. Default `'md'`. */
+    size?: AvatarSize;
+    /** Circle (default) or rounded square. */
+    shape?: AvatarShape;
+    /**
+     * Optional presence indicator dot in the bottom-right corner.
+     * `'online' | 'offline' | 'away' | 'busy'`.
+     */
+    status?: AvatarStatus;
+    className?: string;
+}
+/**
+ * Circular (or rounded-square) user avatar built on `@radix-ui/react-avatar`.
+ * Radix handles the image-load lifecycle: it tries to load `src`, falls back
+ * to the `fallback` slot after a short delay if the image is missing or fails
+ * to decode, and re-attempts on `src` change.
+ *
+ * **Fallback strategy** (in order):
+ * 1. `fallback` prop if provided (string or ReactNode)
+ * 2. Two-character initials extracted from `alt` if `alt` is provided
+ * 3. A generic "person" silhouette SVG
+ *
+ * **Status dot** is an optional presence indicator in the bottom-right —
+ * online (green), away (amber), busy (red), offline (grey).
+ *
+ * @example Basic with image
+ * ```tsx
+ * <Avatar src="/users/jd.jpg" alt="Jane Doe" />
+ * ```
+ *
+ * @example Fallback to initials
+ * ```tsx
+ * <Avatar alt="Jane Doe" size="lg" />
+ * ```
+ *
+ * @example Online presence + square shape
+ * ```tsx
+ * <Avatar src={user.photo} alt={user.name} status="online" shape="square" />
+ * ```
+ */
+declare function Avatar({ src, alt, fallback, size, shape, status, className, }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type TypographyVariant = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'subtitle' | 'body' | 'caption' | 'overline' | 'code';
+type TypographyColor = 'foreground' | 'foreground-secondary' | 'foreground-muted' | 'accent' | 'status-error' | 'status-warning' | 'status-success' | 'status-info' | 'inherit';
+type TypographyWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+interface TypographyProps {
+    /** Visual scale variant. */
+    variant?: TypographyVariant;
+    /**
+     * Element to render. Defaults are sensible per variant
+     * (e.g. h1 → `<h1>`, body → `<p>`, code → `<code>`). Override
+     * with `as` when the semantic element should differ from the visual
+     * style (e.g. a styled-as-h1 product card heading rendered as `<div>`).
+     */
+    as?: keyof React$1.JSX.IntrinsicElements;
+    color?: TypographyColor;
+    weight?: TypographyWeight;
+    align?: TypographyAlign;
+    /** Truncate to one line with ellipsis. */
+    truncate?: boolean;
+    /** Render the text with reduced opacity (useful for disabled states). */
+    muted?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+    children?: React$1.ReactNode;
+}
+/**
+ * Polymorphic typography primitive. `variant` picks a visual scale; `as`
+ * controls the rendered element when it should differ from the default
+ * for that variant (e.g. a styled-as-h2 card title rendered as `<div>`).
+ *
+ * **Variants** map to the design-system text scale:
+ * - `display`: hero headlines
+ * - `h1` – `h4`: section / subsection headings
+ * - `subtitle`: emphasised lead text
+ * - `body` (default): paragraph text
+ * - `caption`: small label / hint text
+ * - `overline`: uppercase eyebrow text
+ * - `code`: inline code samples
+ *
+ * **Colour** accepts any semantic token; defaults to `inherit` so the
+ * parent's text colour flows through (useful when nesting Typography
+ * inside a coloured surface like an accent badge).
+ *
+ * @example Section heading
+ * ```tsx
+ * <Typography variant="h2">Vessel performance</Typography>
+ * ```
+ *
+ * @example Styled as h1 but rendered as div (for SEO-neutral cards)
+ * ```tsx
+ * <Typography variant="h1" as="div">Card title</Typography>
+ * ```
+ *
+ * @example Error message
+ * ```tsx
+ * <Typography variant="caption" color="status-error">{errorText}</Typography>
+ * ```
+ */
+declare function Typography({ variant, as, color, weight, align, truncate, muted, className, style, children, }: TypographyProps): react_jsx_runtime.JSX.Element;
+
 type IconButtonVariant = 'primary' | 'bordered';
 interface IconButtonProps {
     icon?: React.ReactNode;
@@ -599,7 +861,7 @@ declare function useNotification(): {
     danger: (props: Omit<NotificationPayload, "type">) => void;
 };
 
-type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
+type LoadingSpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 interface LoadingSpinnerProps {
     /**
      * Text revealed letter-by-letter beneath the spinner. Optional — pass
@@ -699,43 +961,117 @@ interface FadingBaseProps {
 declare function FadingBase({ className, isMounted, children, }: FadingBaseProps): react_jsx_runtime.JSX.Element;
 
 interface ListItem {
+    /** Stable key for React reconciliation + active-key matching. */
     key: string | number;
+    /** Main item text (title). Required. */
     label: React$1.ReactNode;
+    /** Optional description rendered below the label, in foreground-secondary. */
+    description?: React$1.ReactNode;
+    /**
+     * Optional leading slot, typically an Avatar. Anything React-renderable
+     * is accepted (icon, image, status badge…).
+     */
+    avatar?: React$1.ReactNode;
+    /** Optional trailing slot, e.g. a badge, count, or action icon. */
+    trailing?: React$1.ReactNode;
+    /** Disable interaction for this item only. */
+    disabled?: boolean;
 }
 interface ListProps {
     items: ListItem[];
     onItemClick: (item: ListItem) => void;
     activeKey?: string | number;
+    /**
+     * Visual density. `'compact'` for dense reference lists,
+     * `'comfortable'` (default) for typical UI, `'spacious'` for hero rows.
+     */
+    density?: 'compact' | 'comfortable' | 'spacious';
 }
 /**
- * Vertical clickable list with active-item highlight.
+ * Vertical clickable list with optional avatar / description / trailing
+ * slots per item. Built on `role="listbox"` + `role="option"` so screen
+ * readers announce it as a selectable list. Keyboard activation works on
+ * Enter and Space.
  *
- * @example
+ * **When to use this** over a Table:
+ * - When the dataset is a simple sequence of records that the user
+ *   browses + picks one of (sidebar nav, contact list, vessel chooser).
+ * - When each row's primary signal is a 1–2-line summary, not a tabular
+ *   breakdown.
+ *
+ * Use Table when comparing rows across multiple columns matters more than
+ * picking one.
+ *
+ * @example Plain
+ * ```tsx
  * <List
- *   items={vessels.map(v => ({ key: v.imo, label: v.name }))}
- *   activeKey={selectedImo}
- *   onItemClick={(item) => setSelected(item.key)}
+ *   items={[{ key: 1, label: 'Aurora' }, { key: 2, label: 'Beacon' }]}
+ *   activeKey={2}
+ *   onItemClick={(it) => setSelected(it.key)}
  * />
+ * ```
+ *
+ * @example With avatars + descriptions
+ * ```tsx
+ * <List
+ *   items={crew.map((c) => ({
+ *     key: c.id,
+ *     label: c.name,
+ *     description: c.rank,
+ *     avatar: <Avatar src={c.photo} alt={c.name} status={c.status} />,
+ *     trailing: <Badge count={c.unread} />,
+ *   }))}
+ *   onItemClick={(it) => navigate(`/crew/${it.key}`)}
+ * />
+ * ```
  */
-declare function List({ items, onItemClick, activeKey }: ListProps): react_jsx_runtime.JSX.Element;
+declare function List({ items, onItemClick, activeKey, density, }: ListProps): react_jsx_runtime.JSX.Element;
 
 interface ScalableContainerProps {
+    /** Resting width. Any CSS length / percent. Default `'100%'`. */
     width?: React$1.CSSProperties['width'];
+    /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: React$1.CSSProperties['height'];
+    /** Content to render inside. */
     children?: React$1.ReactNode;
-    /** CSS class applied to the children wrapper when expanded */
+    /** CSS class appended to the expanded children wrapper. */
     assignClassOnClick?: string;
+    /** Override the expand-button icon. */
+    expandIcon?: React$1.ReactNode;
+    /** Override the collapse-button icon. */
+    collapseIcon?: React$1.ReactNode;
+    /**
+     * Position of the toggle button inside the container.
+     * Default `'top-right'` — matches the OS-window convention.
+     */
+    togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 /**
- * Container that can be expanded to fill its parent, with a tooltip-annotated
- * expand/collapse icon button.
+ * Container that smoothly expands to fill its parent on click and
+ * collapses back to its resting size. Reads like a macOS / Windows
+ * window resizing — subtle elevation shift, smooth scale, no flash
+ * of colour or harsh background change.
+ *
+ * **What's different from the previous version**
+ * - Animates BOTH width and height (was width-only).
+ * - No baked-in background — the container is transparent by default,
+ *   so it overlays whatever surface the consumer puts behind it.
+ * - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
+ *   being raised. No colour change.
+ * - The toggle button is a plain rounded chip with the chevron icon,
+ *   not the old `IconButton` with the heavy background. Floats over
+ *   the content via absolute positioning so it doesn't push layout.
+ * - Configurable toggle position (default top-right, matching OS
+ *   close-button convention).
  *
  * @example
- * <ScalableContainer width="50%" height={300}>
- *   <Chart data={data} />
+ * ```tsx
+ * <ScalableContainer width={480} height={300}>
+ *   <Chart data={metrics} />
  * </ScalableContainer>
+ * ```
  */
-declare function ScalableContainer({ width, height, children, assignClassOnClick, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -821,50 +1157,6 @@ interface CatalogProps {
  */
 declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
 
-interface MenuBarItemProps {
-    icon: React$1.ReactNode;
-    isActive: boolean;
-    title: string;
-    /** Called when the item is clicked (navigation or logout etc.) */
-    onClick?: () => void;
-}
-/**
- * Single item in the MenuBar sidebar.
- *
- * Decoupled from React Router and context — navigation is delegated to `onClick`.
- * The Tooltip is powered by Radix (same as the standalone Tooltip component).
- *
- * @example
- * <MenuBarItem
- *   icon={<Icon.Dashboard />}
- *   title="Dashboard"
- *   isActive={pathname === '/dashboard'}
- *   onClick={() => navigate('/dashboard')}
- * />
- */
-declare function MenuBarItem({ icon, isActive, title, onClick }: MenuBarItemProps): react_jsx_runtime.JSX.Element;
-
-interface MenuBarItemConfig extends MenuBarItemProps {
-    key: string;
-}
-interface MenuBarProps {
-    items: MenuBarItemConfig[];
-}
-/**
- * Vertical icon sidebar (left edge of the app).
- *
- * Decoupled from React Router, useAuth, and useData.
- * The app composes the items array (with `onClick` handlers) and passes it in.
- *
- * @example
- * const items: MenuBarItemConfig[] = [
- *   { key: 'dash', icon: <Icon.Dashboard />, title: 'Dashboard', isActive: pathname === '/dashboard', onClick: () => navigate('/dashboard') },
- *   { key: 'logout', icon: <Icon.PowerOff />, title: 'Sign Out', isActive: false, onClick: logOut },
- * ]
- * <MenuBar items={items} />
- */
-declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
-
 /**
  * A single action in the context menu.
  *
@@ -1662,15 +1954,6 @@ interface SearchInputProps {
  */
 declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-interface DropdownPillProps {
-    value?: ReactNode;
-    hasSiblings?: boolean;
-}
-/**
- * Pill chip used inside Dropdown to display selected values.
- */
-declare function DropdownPill({ value, hasSiblings }: DropdownPillProps): react_jsx_runtime.JSX.Element;
-
 interface CheckboxProps {
     /** Controlled checked state */
     checked?: boolean;
@@ -1765,6 +2048,13 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * Show a "+N more" pill alongside the first selected item in multiselect
+     * mode. Defaults to `false` — a single pill is shown with the first
+     * selection and consumers typically open the dropdown to see the rest.
+     * Set `true` if you want the count visible on the trigger.
+     */
+    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -1787,7 +2077,7 @@ interface DropdownProps {
  * // Multi-select
  * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
  */
-declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -1998,4 +2288,4 @@ type TemporalPickerProps = DatePickerProps;
  */
 declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, 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, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, 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, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, 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, Wizard, type WizardProps, type WizardStep, useNotification };