@campfire-interactive/ui 0.5.1 → 0.7.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
@@ -685,6 +702,29 @@ interface ComboboxProps<T extends string = string> {
     loading?: boolean;
     emptyLabel?: string;
     loadingLabel?: string;
+    /**
+     * How many rows the list renders at once. The rest are not dropped quietly —
+     * a notice takes the last row and says how many are shown, because a picker
+     * silently offering 20 of 200 is the same bug as a table silently paging.
+     * Pass `0` to render everything, which is right only for a list bounded by
+     * the domain rather than by the customer.
+     */
+    maxResults?: number;
+    /** Overrides the truncation notice. Receives how many rows are shown. */
+    truncatedLabel?: (shown: number) => string;
+    /**
+     * Fires as the list opens and closes. `Select` has had this since pm's
+     * click-to-edit cells needed it: those save on blur, and a portalled list
+     * moves focus off the trigger, so without knowing the list is open a cell
+     * closes itself the instant the user clicks into it.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Forwarded to the trigger. Only useful alongside `onOpenChange`, which is
+     * what tells a commit-on-blur caller to ignore the blur the list itself
+     * caused.
+     */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
     /** Adds a "Clear" affordance to the trigger once something is selected. */
     clearable?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -692,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;
     /**
@@ -717,11 +768,15 @@ interface ComboboxProps<T extends string = string> {
  * typing a part number finds a row whose label is a description. Pass
  * `onSearchChange` to filter on the server instead.
  *
+ * `maxResults` caps what is rendered (50 by default) and says so in the last
+ * row. Options carrying a `group` are rendered under a heading, in the order
+ * the caller gives them — which is how a picker puts RECENTS above SEARCH.
+ *
  * Keyboard: ArrowUp/ArrowDown move, Home/End jump, Enter selects, Escape
  * closes. The list is `aria-activedescendant`-driven, so focus stays in the
  * search field and a screen reader announces each row as it is highlighted.
  */
-declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, clearable, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
+declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, maxResults, truncatedLabel, onOpenChange, onBlur, clearable, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
 
 declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
 declare const TooltipRoot: react.FC<RadixTooltip.TooltipProps>;
@@ -897,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';
@@ -970,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;
@@ -1398,6 +1577,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[];
@@ -1480,4 +1790,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 };