@campfire-interactive/ui 0.6.0 → 0.8.0

package/dist/index.d.ts

@@ -29,6 +29,23 @@ type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /**
+     * Renders the CHILD element with this button's styling, instead of a
+     * `button`.
+     *
+     * For the button that is really a link — "New part", "Import", "Back to
+     * Quotes". Those have to be anchors: an onClick navigation loses
+     * middle-click, open-in-new-tab, copy-link-address and the status bar, and
+     * a screen reader announces a destination as a button. Every app was
+     * choosing between correct markup and correct styling, and the router-based
+     * ones mostly chose styling. This is the spelling the fleet's vendored
+     * shadcn buttons already use, so it needs no explaining at a call site.
+     *
+     * The child must be a single element that accepts a ref. `leadingIcon`,
+     * `trailingIcon` and `loading` are ignored, because the child owns its own
+     * content — put the icon inside it.
+     */
+    asChild?: boolean;
     /**
      * Renders a spinner in place of any leading icon and blocks activation.
      * Kept distinct from `disabled` so the caller can tell "working" apart from
@@ -715,6 +732,17 @@ interface ComboboxProps<T extends string = string> {
     disabled?: boolean;
     id?: string;
     name?: string;
+    /**
+     * Labelling, forwarded to the trigger.
+     *
+     * `Select` grew these when pm found 33 call sites labelling a control by its
+     * table column header; `Combobox` was written later and did not get them,
+     * which left every picker whose label is a column heading or a filter-bar
+     * position announcing only its placeholder. master-data's plant and scope
+     * pickers are both that shape.
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     className?: string;
     /**
@@ -924,6 +952,118 @@ interface CountBadgeProps extends Omit<BadgeProps, 'children' | 'dot' | 'icon'>
 /** A numeric count — unread items, filters applied, rows selected. */
 declare const CountBadge: react.ForwardRefExoticComponent<CountBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+type AlertTone = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: AlertTone;
+    /** Bold first line. Omit it for a one-sentence alert — a title that merely restates the body is noise. */
+    title?: ReactNode;
+    /**
+     * Replaces the tone's default icon. Pass `null` to render no icon at all —
+     * worth it in a dense form where a row of icons is more decoration than signal.
+     */
+    icon?: ReactNode | null;
+    /** Trailing controls — a retry, a "Create it", a link out. */
+    actions?: ReactNode;
+    /** Renders a close button. The caller owns the dismissed state. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /** `subtle` drops the fill and keeps a left rule — for an alert inside a card that already has a ground. */
+    variant?: 'soft' | 'subtle';
+}
+/**
+ * AN INLINE MESSAGE ABOUT THE THING ON THE SCREEN.
+ *
+ * ── Why this exists ───────────────────────────────────────────────────────
+ *
+ * This package shipped `PageState` (the screen is loading / failed / empty)
+ * and `Toast` (something just happened, elsewhere) and nothing for the case
+ * between them: a message that belongs to a region of a page and stays there.
+ * Seven apps hand-rolled it — `CampfireSeedBanner`, `OwnershipBanner`, two
+ * vendored shadcn `alert`s, and a spread of one-off `<div>`s — and the
+ * one-offs are where the contrast defects were: the fleet's common pattern is
+ * a mid-tone on a 10%-alpha wash of itself, which lands near 2:1.
+ *
+ * ── The distinction to get right ──────────────────────────────────────────
+ *
+ * Use `Alert` when the message is ABOUT something the user can see and should
+ * persist while that remains true — "SAP is the source of truth for Plants",
+ * "this quote is awarded and can no longer be edited". Use `Toast` for the
+ * result of an action the user just took. Use `ErrorState` when the message
+ * REPLACES the content because there is no content to show.
+ *
+ * ── Accessibility ─────────────────────────────────────────────────────────
+ *
+ * `error` and `warning` announce as `role="alert"`; the quieter tones use
+ * `role="status"`. Both are live regions, so an alert that appears in
+ * response to a save is heard, not just seen. Tone is never carried by color
+ * alone — every tone has its own icon, which survives greyscale and every
+ * color vision deficiency.
+ */
+declare function Alert({ tone, title, icon, actions, onDismiss, dismissLabel, variant, className, children, ...rest }: AlertProps): react.JSX.Element;
+
+interface DataListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'children'> {
+    /**
+     * `label` — label left, value right, in a two-column grid. The scanning
+     *   layout for a record's own fields.
+     * `stack` — label above value. Right when the values are long (an address,
+     *   a description) or when the list sits in a narrow column.
+     * `inline` — label and value on one line, wrapping as a run. For a meta
+     *   strip under a page title, not for a record's fields.
+     */
+    layout?: 'label' | 'stack' | 'inline';
+    /** Columns of pairs. `label` layout only; ignored otherwise. */
+    columns?: 1 | 2 | 3;
+    /** Width of the label column in `label` layout. Default `12rem`. */
+    labelWidth?: string;
+    /** Rules between rows. Worth it past about eight pairs, where the eye loses the row. */
+    divided?: boolean;
+    size?: 'sm' | 'md';
+    children?: ReactNode;
+}
+/**
+ * A RECORD'S FIELDS: the label/value grid every detail page in the suite draws.
+ *
+ * ── Why this exists ───────────────────────────────────────────────────────
+ *
+ * Nine of the twelve frontends have their own `__label` / `__value` pair CSS,
+ * and they disagree about nearly everything: four render a real `<dl>` and
+ * five use nested `<div>`s, the label column is 140px / 180px / 200px / 40%,
+ * and the empty value is `—`, `-`, `N/A`, an empty string, or the literal
+ * `null`. That last one is not cosmetic — a blank cell and a missing field
+ * look identical, so a reader cannot tell "we don't know" from "nothing here".
+ *
+ * ── The decisions this makes ──────────────────────────────────────────────
+ *
+ * A real `<dl>`, so the pairing is in the accessibility tree and not only in
+ * the visual grid. One empty marker — an em dash, with the pair still rendered
+ * and still announced, because a field that vanishes when empty makes two
+ * records with different data look like the same record. And the label column
+ * collapses to stacked at phone width, where a 200px label beside a value
+ * leaves the value about forty pixels.
+ *
+ * ── Empty values ─────────────────────────────────────────────────────────
+ *
+ * `DataListItem` renders `—` for `null`, `undefined` and `''`. It does NOT do
+ * that for `0` or `false`, which are answers. Pass `empty` to say something
+ * more specific ("Not set", "Inherited from the part type") — a screen where
+ * the reason is knowable should say the reason.
+ */
+declare function DataList({ layout, columns, labelWidth, divided, size, className, style, children, ...rest }: DataListProps): react.JSX.Element;
+interface DataListItemProps {
+    label: ReactNode;
+    /** `null`, `undefined` and `''` all render the empty marker. `0` and `false` do not. */
+    children?: ReactNode;
+    /** What to show when the value is empty. Defaults to an em dash. */
+    empty?: ReactNode;
+    /** Spans every column in a multi-column list — for the one long field among short ones. */
+    full?: boolean;
+    /** Renders the value in the mono face. For ids, codes, SKUs. */
+    mono?: boolean;
+    className?: string;
+}
+/** One label/value pair. Always renders, empty or not — see `DataList`. */
+declare function DataListItem({ label, children, empty, full, mono, className, }: DataListItemProps): react.JSX.Element;
+
 interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /** Tightens row height for dense data screens. */
     density?: 'comfortable' | 'compact';
@@ -997,8 +1137,20 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     numeric?: boolean;
     /** Truncates with an ellipsis instead of wrapping. Pair it with a `title`. */
     truncate?: boolean;
+    /**
+     * Renders the cell in the mono face.
+     *
+     * For an identifier rather than a word — a part number, a plant code, an
+     * external system's id. It is not decoration: in the proportional face the
+     * digit 1, lowercase l and capital I are near-identical, and a column of
+     * codes is exactly where someone reads a character at a time and copies it
+     * somewhere that has to match. master-data's reference lists are the case
+     * that forced it; every app with a code column had wrapped the value in a
+     * `<code>` by hand and picked its own size.
+     */
+    mono?: boolean;
 }
-declare function TableCell({ numeric, truncate, className, ...rest }: TableCellProps): react.JSX.Element;
+declare function TableCell({ numeric, truncate, mono, className, ...rest }: TableCellProps): react.JSX.Element;
 interface TableEmptyProps {
     /** Must match the table's column count, or the message will not span the width. */
     colSpan: number;
@@ -1016,20 +1168,27 @@ declare function TableCaption({ className, ...rest }: React.HTMLAttributes<HTMLT
 declare const Tabs: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
 /** @deprecated Use `Tabs`. Kept so existing imports keep working. */
 declare const TabsRoot: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
-interface TabsListProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.List> {
-    /**
-     * `pill` is a segmented control — a rounded tray with the active tab raised.
-     * `underline` is the page-level look: a row of tabs under a heading with the
-     * active one underscored.
-     *
-     * Defaults to `pill` because that is what the vendored shadcn TabsList
-     * rendered, and eleven apps use `<TabsList>` bare. Defaulting to `underline`
-     * would restyle every tab row in the fleet on adoption — a design decision
-     * dressed up as a migration. Opt into `underline` per call site.
-     */
-    variant?: 'pill' | 'underline';
-}
-declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * THERE IS ONE TAB LOOK: the segmented pill tray, with the active tab raised
+ * on white.
+ *
+ * There were two. `underline` — a row of tabs under a heading with the active
+ * one underscored — shipped alongside it as an opt-in for page-level strips,
+ * and the fleet answered by never opting in. A sweep found exactly one caller
+ * in one app (pm's Timeline sub-tabs), where its only effect was to make two
+ * of the four strips on those pages disagree with the other two. Nine repos
+ * are not on this package and carry their own vendored pill-only tabs;
+ * master-data's twelve `TabSet` call sites and analytics' two all took the
+ * default. A variant that one screen in the fleet used, and used to look
+ * inconsistent with its neighbours, is not a variant — it is a way to get the
+ * design wrong, so it is gone rather than deprecated.
+ *
+ * `data-variant="pill"` stays on the element. Nothing reads it as a choice any
+ * more, but the stylesheet still selects on it, and rewriting every selector
+ * to drop one attribute would risk the look this change is meant to preserve.
+ */
+type TabsListProps = React.ComponentPropsWithoutRef<typeof RadixTabs.List>;
+declare const TabsList: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
     icon?: React.ReactNode;
     /** A count beside the label — rows in the tab, unread items. Hidden at zero. */
@@ -1050,7 +1209,6 @@ interface TabSetProps {
     value?: string;
     onValueChange?: (value: string) => void;
     defaultValue?: string;
-    variant?: 'pill' | 'underline';
     className?: string;
 }
 /**
@@ -1063,7 +1221,7 @@ interface TabSetProps {
  * `defaultValue` falls back to the first tab: Radix renders no panel at all
  * when neither is set, which reads as a blank screen.
  */
-declare function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }: TabSetProps): react.JSX.Element;
+declare function TabSet({ tabs, value, onValueChange, defaultValue, className }: TabSetProps): react.JSX.Element;
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     orientation?: 'horizontal' | 'vertical';
@@ -1425,6 +1583,137 @@ interface ListToolbarProps {
  */
 declare function ListToolbar({ search, filters, actions, className }: ListToolbarProps): react.JSX.Element;
 
+interface Breadcrumb {
+    label: ReactNode;
+    /**
+     * Rendered as an `<a href>`. In a router app pass `render` instead — an
+     * anchor inside a SPA reloads the document and throws away the client state
+     * the crumb was supposed to return you to.
+     */
+    href?: string;
+    /** Wraps the crumb's label — `(node) => <Link to="/parts">{node}</Link>`. */
+    render?: (label: ReactNode) => ReactNode;
+}
+interface PageHeaderProps {
+    title: ReactNode;
+    /**
+     * The line under the title. Named `description` because it is what the
+     * majority of the fleet's copies called it; `subtitle` and `subhead` were
+     * the same prop under other names.
+     */
+    description?: ReactNode;
+    /** Right-aligned page actions. Never wraps under the title. */
+    actions?: ReactNode;
+    /** Trail above the title. Omit it on a top-level list — a one-crumb trail is noise. */
+    breadcrumbs?: Breadcrumb[];
+    /**
+     * Renders a back control above the title. Router-free by construction: this
+     * package takes no router dependency, so the caller supplies the navigation.
+     */
+    onBack?: () => void;
+    backLabel?: ReactNode;
+    /**
+     * The heading level. `1` is right for a page; drop to `2` when the header
+     * sits inside a page that already has an `<h1>` (a tab panel, a wizard step).
+     * The rendered SIZE does not change with it — level is document structure,
+     * not typography.
+     */
+    level?: 1 | 2 | 3;
+    /** A meta row under the title — status badges, an id, a last-updated stamp. */
+    children?: ReactNode;
+    /** Draws the rule under the header. Off by default. */
+    bordered?: boolean;
+    className?: string;
+}
+/**
+ * THE FIRST THING A USER SEES ON EVERY SCREEN, and the fleet had seven of it.
+ *
+ * ── Why this exists ───────────────────────────────────────────────────────
+ *
+ * The cross-repo audit found `PageHeader` implemented separately in six apps
+ * plus an inline copy in a seventh, with **three different prop names for the
+ * same subtitle** (`subtitle` / `description` / `rightSlot`), three heading
+ * levels, four type sizes and three font weights. Two of them also portalled
+ * their actions into the shell toolbar and two rendered them beside the title,
+ * so "the actions" meant different places in different apps.
+ *
+ * Nothing about a title row is app-specific. It drifted because it was never
+ * anybody's to own.
+ *
+ * ── The decisions this makes for a caller ─────────────────────────────────
+ *
+ * One size (`--cfi-ui-text-xl`, semibold), one description treatment, actions
+ * right and `flex: none` so a long title never squeezes them onto a second
+ * line, and the heading level decoupled from the size — a header inside a tab
+ * panel should be an `<h2>` in the document outline and still look like the
+ * page title, which is exactly the tradeoff the per-app copies got wrong in
+ * both directions.
+ *
+ * ── What it deliberately does not do ──────────────────────────────────────
+ *
+ * It does not navigate. `onBack` is a callback and a breadcrumb takes a
+ * `render` wrapper, because `ui` has no router dependency and should not
+ * acquire one to draw a link. It does not portal: analytics and cpq teleport
+ * their actions into the shell header, which is a shell concern and belongs in
+ * whatever Tier 3 eventually owns `AppShell`, not in a title row.
+ */
+declare function PageHeader({ title, description, actions, breadcrumbs, onBack, backLabel, level, children, bordered, className, }: PageHeaderProps): react.JSX.Element;
+
+interface SelectionBarProps {
+    /** How many rows are selected. At `0` the bar renders nothing — see below. */
+    count: number;
+    /**
+     * The bulk actions. Normally `Button`s at `size="sm"`, left at the default
+     * `variant="secondary"`; a destructive one takes `variant="danger"`.
+     */
+    children?: ReactNode;
+    /** Clears the selection. The bar always offers this, on the right. */
+    onClear?: () => void;
+    clearLabel?: string;
+    /**
+     * How the count reads. Defaults to "{n} selected". Pass a function in an
+     * i18n app, or to name the thing — `(n) => \`${n} parts selected\``.
+     */
+    label?: (count: number) => ReactNode;
+    /** Greys out the whole bar while a bulk action is in flight. */
+    busy?: boolean;
+    /** `bar` sits inline above the table. `floating` docks at the bottom of the viewport. */
+    variant?: 'bar' | 'floating';
+    className?: string;
+}
+/**
+ * WHAT YOU CAN DO WITH THE ROWS YOU TICKED.
+ *
+ * ── Why this exists ───────────────────────────────────────────────────────
+ *
+ * Six apps grew one: `BulkArchiveBar`, `BulkActions`, an inline
+ * `{selected.size} selected` strip, and three variants that only appear once
+ * the selection is non-empty but each decide that differently. The count
+ * phrasing, the position of Clear, and whether the bar pushes the table down
+ * or floats over it were all separate guesses.
+ *
+ * ── Self-hiding, deliberately ─────────────────────────────────────────────
+ *
+ * `count === 0` renders `null`, so a page mounts it unconditionally instead of
+ * writing `{selected.size > 0 && <Bar/>}` on every list. That is not just
+ * terser: the conditional is what drifts. Two of the six apps rendered an
+ * empty bar at zero and reserved its height, so the table jumped by 44px the
+ * first time anyone ticked a box.
+ *
+ * ── Clear is not an action ────────────────────────────────────────────────
+ *
+ * It sits apart from the bulk actions, on the right, because it is the only
+ * control here that changes what is selected rather than what happens to it —
+ * and because a Clear adjacent to Archive is a mis-click that is not undoable.
+ *
+ * ── Announcing ────────────────────────────────────────────────────────────
+ *
+ * `role="status"` with `aria-live="polite"`: a selection count that only
+ * updates visually leaves a screen-reader user ticking boxes with no feedback
+ * that anything is accumulating.
+ */
+declare function SelectionBar({ count, children, onClear, clearLabel, label, busy, variant, className, }: SelectionBarProps): react.JSX.Element | null;
+
 interface PagedRows<T> {
     /** The slice to render. */
     rows: T[];
@@ -1507,4 +1796,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
  */
 declare function formatPercent(value: number | null | undefined, decimals?: number): string;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, usePagedRows, useSortState, useToast };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, usePagedRows, useSortState, useToast };