@fanvue/ui 2.18.0 → 2.20.0

package/dist/index.d.ts

@@ -340,6 +340,31 @@ export declare interface AudioValidationError {
     message: string;
 }
 
+/**
+ * A combobox input with single- or multi-select, optional async loading, and
+ * native support for grouped + pinned options.
+ *
+ * - Pass `groups` plus an `options` array whose entries reference each group
+ *   via `groupId` to render hierarchical lists with proper `role="group"` +
+ *   `aria-labelledby` semantics. Options without a `groupId` render above
+ *   the first group; options marked `pinned` render above everything and
+ *   bypass the search filter.
+ * - Indentation of nested rows (e.g. price under product) is controlled by
+ *   the consumer via `renderOption` styling — there is no built-in indent.
+ *
+ * @example
+ * ```tsx
+ * <Autocomplete
+ *   aria-label="Choose a product"
+ *   options={[
+ *     { value: "__new__", label: "+ Create new product", pinned: true },
+ *     { value: "product:abc", label: "Demo Product", groupId: "recent" },
+ *   ]}
+ *   groups={[{ id: "recent", label: "Recent products" }]}
+ *   onChange={handleSelect}
+ * />
+ * ```
+ */
 export declare const Autocomplete: React_2.ForwardRefExoticComponent<AutocompleteProps & React_2.RefAttributes<HTMLInputElement>>;
 
 declare interface AutocompleteBaseProps {
@@ -383,6 +408,40 @@ declare interface AutocompleteBaseProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Ordered list of groups. When provided, options whose `groupId` matches
+     * an entry render under the corresponding heading. Groups with no visible
+     * (post-filter) options collapse silently. Pinned options render above
+     * everything; ungrouped options render between pinned and the first group.
+     * Only one level of grouping is supported.
+     */
+    groups?: AutocompleteGroup[];
+    /**
+     * Custom renderer for group headings. The returned node is wrapped by the
+     * component in an element carrying the `id` referenced by the surrounding
+     * `role="group"` wrapper's `aria-labelledby`, so consumers only need to
+     * return visual content.
+     */
+    renderGroupHeading?: (group: AutocompleteGroup) => React_2.ReactNode;
+}
+
+/**
+ * Describes a single group rendered above its matching options.
+ * Indentation of nested rows (e.g. price under product) is not built in —
+ * consumers control it via `renderOption` styling.
+ */
+export declare interface AutocompleteGroup {
+    /** Stable identifier referenced by `option.groupId`. */
+    id: string;
+    /**
+     * Group heading text. Used as the group's accessible name and matched
+     * against the search query: when the query matches a group's `label`,
+     * every option under that group is kept regardless of whether it
+     * individually matches the per-option filter. This supports the common
+     * "heading is the searchable label, items are sub-rows" shape (e.g.
+     * heading = product name, items = prices).
+     */
+    label: string;
 }
 
 declare interface AutocompleteMultiProps extends AutocompleteBaseProps {
@@ -393,9 +452,25 @@ declare interface AutocompleteMultiProps extends AutocompleteBaseProps {
 }
 
 export declare interface AutocompleteOption {
+    /** Unique value identifying the option. Returned via `onChange`. */
     value: string;
+    /** Visible label. Falls back to `value` when omitted. */
     label?: string;
+    /** When `true`, the option renders but cannot be selected. @default false */
     disabled?: boolean;
+    /**
+     * ID of the group this option belongs to. Must match an entry in the
+     * component's `groups` prop. Options without a `groupId` render in an
+     * implicit "ungrouped" bucket above the first declared group.
+     */
+    groupId?: string;
+    /**
+     * Pinned options bypass the search filter and stay visible at the top of
+     * the list regardless of the current query. Useful for "+ Create new"
+     * affordances. Pinned options ignore `groupId` and render before any
+     * grouped or ungrouped content. @default false
+     */
+    pinned?: boolean;
 }
 
 export declare type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;
@@ -1078,7 +1153,7 @@ export declare const CheckBoxOnIcon: React_2.ForwardRefExoticComponent<BaseIconP
 export declare type CheckBoxOnIconProps = BaseIconProps;
 
 export declare interface CheckboxProps extends Omit<React_2.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "asChild"> {
-    /** Size variant that controls label and helper text typography. @default "default" */
+    /** Size variant. @default "20" */
     size?: CheckboxSize;
     /** Label text displayed next to the checkbox. */
     label?: string;
@@ -1086,8 +1161,19 @@ export declare interface CheckboxProps extends Omit<React_2.ComponentPropsWithou
     helperText?: string;
 }
 
-/** Size variant controlling label and helper text typography. */
-export declare type CheckboxSize = "default" | "small";
+/**
+ * Size variant for the checkbox.
+ *
+ * - `"20"` (default) — 20px box, body-lg label.
+ * - `"16"` — 16px box, body-md label, used in compact contexts like data tables.
+ * - `"default"` and `"small"` are legacy aliases retained for back-compat
+ *   (`"default"` → `"20"`, `"small"` → `"20"` with smaller label typography).
+ */
+export declare type CheckboxSize = "20" | "16"
+/** @deprecated Use `"20"` instead. */
+| "default"
+/** @deprecated Use `"20"` (the smaller-typography variant remains via `"small"`). */
+| "small";
 
 /** A checkmark inside a filled circle icon (20 × 20). */
 export declare const CheckCircleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
@@ -1964,6 +2050,62 @@ export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<Dropdo
 /** Props for the {@link DropdownMenuGroup} component. */
 export declare type DropdownMenuGroupProps = React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
 
+/**
+ * Optional header rendered at the top of a {@link DropdownMenuContent}. Use
+ * `type="default"` to title the menu, or `type="search"` to embed a search
+ * input for filtering long lists.
+ *
+ * Renders an inset separator beneath the row so it slots cleanly above the
+ * first group of items.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <DropdownMenuHeader title="Sort by" onClose={() => setOpen(false)} />
+ *   <DropdownMenuItem>Newest</DropdownMenuItem>
+ *   <DropdownMenuItem>Oldest</DropdownMenuItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const DropdownMenuHeader: React_2.ForwardRefExoticComponent<DropdownMenuHeaderProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownMenuHeaderProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Visual type. `"default"` shows a title; `"search"` shows a search input. @default "default" */
+    type?: DropdownMenuHeaderType;
+    /** Height preset for the header row. @default "40" */
+    size?: DropdownMenuHeaderSize;
+    /** Title text shown when `type="default"`. Ignored if `children` is provided. */
+    title?: string;
+    /** Configuration for the embedded search input when `type="search"`. */
+    searchProps?: DropdownMenuHeaderSearchProps;
+    /** Whether to render the close icon button on the right. @default true */
+    showClose?: boolean;
+    /** Fires when the close icon button is activated. */
+    onClose?: () => void;
+    /** Accessible label for the close button. @default "Close menu" */
+    closeLabel?: string;
+}
+
+/** Search-input configuration for {@link DropdownMenuHeader} when `type="search"`. */
+export declare interface DropdownMenuHeaderSearchProps {
+    /** Controlled value of the search input. */
+    value?: string;
+    /** Uncontrolled default value. */
+    defaultValue?: string;
+    /** Fires when the input value changes. */
+    onChange?: (value: string) => void;
+    /** Placeholder text shown when the input is empty. @default "Search…" */
+    placeholder?: string;
+    /** Accessible label for the search input. @default "Search" */
+    "aria-label"?: string;
+}
+
+/** Header height preset. Matches the menu item sizing scale. */
+export declare type DropdownMenuHeaderSize = "40" | "32";
+
+/** Header type. `"default"` shows a title; `"search"` shows a search input. */
+export declare type DropdownMenuHeaderType = "default" | "search";
+
 /**
  * An individual item within a {@link DropdownMenuContent}.
  *
@@ -1982,32 +2124,86 @@ export declare type DropdownMenuGroupProps = React_2.ComponentPropsWithoutRef<ty
 export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface DropdownMenuItemProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
-    /** Height of the menu item row. @default "sm" */
+    /** Height of the menu item row. @default "40" */
     size?: DropdownMenuItemSize;
-    /** Whether the item uses destructive (error) styling. */
+    /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */
     destructive?: boolean;
-    /** Icon rendered before the label. */
+    /** Icon (or other node) rendered before the label. */
     leadingIcon?: React_2.ReactNode;
-    /** Icon rendered after the label. */
+    /** Icon (or other node) rendered after the label. */
     trailingIcon?: React_2.ReactNode;
-    /** Whether the item is in a selected state. */
+    /** Marks the item as the current selection in a single-select menu. @default false */
     selected?: boolean;
 }
 
-/** Available sizes for a dropdown menu item. */
-export declare type DropdownMenuItemSize = "sm" | "md";
+/**
+ * Height preset for a dropdown menu item.
+ *
+ * `"40"` (default) and `"32"` are the v2 numeric tokens that mirror the Figma
+ * design system. `"sm"` and `"md"` are deprecated aliases retained for
+ * backwards compatibility — `"sm"` maps to `"32"`, `"md"` maps to `"40"`.
+ */
+export declare type DropdownMenuItemSize = "40" | "32"
+/** @deprecated Use `"32"` instead. */
+| "sm"
+/** @deprecated Use `"40"` instead. */
+| "md";
 
-/** A label for a group of items. Not focusable or selectable. */
+/** A non-interactive label that groups related items within a menu. */
 export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Vertical placement of a {@link DropdownMenuLabel} within its group. */
+export declare type DropdownMenuLabelPosition = "default" | "top";
+
 /** Props for the {@link DropdownMenuLabel} component. */
 export declare interface DropdownMenuLabelProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    /**
+     * Vertical placement within the surrounding group. `"top"` is used for the
+     * first label directly under a header; `"default"` adds extra top padding to
+     * separate it from preceding items. @default "default"
+     */
+    position?: DropdownMenuLabelPosition;
 }
 
 /** Props for the {@link DropdownMenu} root component. */
 export declare interface DropdownMenuProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {
 }
 
+/**
+ * Groups {@link DropdownMenuRadioItem} children so they behave as a
+ * single-select set. Controlled via `value`/`onValueChange`.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
+ *   <DropdownMenuRadioItem value="newest">Newest first</DropdownMenuRadioItem>
+ *   <DropdownMenuRadioItem value="oldest">Oldest first</DropdownMenuRadioItem>
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DropdownMenuRadioGroup} component. */
+export declare interface DropdownMenuRadioGroupProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {
+}
+
+/**
+ * A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows
+ * a circular indicator that fills when selected, plus an optional helper line
+ * underneath the title.
+ */
+export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownMenuRadioItemProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+    /** Optional secondary text shown below the title. */
+    helper?: string;
+    /** Height of the item row. @default "40" */
+    size?: DropdownMenuRadioItemSize;
+}
+
+/** Height preset for a {@link DropdownMenuRadioItem}. */
+export declare type DropdownMenuRadioItemSize = "40";
+
 /** Visual separator between groups of items. */
 export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -3863,20 +4059,25 @@ export declare type SwitchToggleSize = "24" | "32" | "40";
  */
 export declare const Table: React_2.ForwardRefExoticComponent<TableProps & React_2.RefAttributes<HTMLTableElement>>;
 
+/**
+ * `<tbody>` wrapper. Removes the bottom border on cells in the final row to
+ * match the Figma `V2 Table Final Row` treatment.
+ */
 export declare const TableBody: React_2.ForwardRefExoticComponent<TableBodyProps & React_2.RefAttributes<HTMLTableSectionElement>>;
 
 export declare interface TableBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
 }
 
 /**
- * Surface wrapper for data tables: rounded container, spacing, and size
- * context for {@link TableCell} descendants. Compose with {@link TableScrollArea},
- * {@link Table}, {@link TableHeader}, {@link TableBody}, {@link TableRow},
+ * Surface wrapper for data tables: rounded 24px container with a strong
+ * outer border, inner spacing, and size context for {@link TableCell}
+ * descendants. Compose with {@link TableScrollArea}, {@link Table},
+ * {@link TableHeader}, {@link TableBody}, {@link TableRow},
  * {@link TableHead}, and {@link TableCell}.
  *
  * @example
  * ```tsx
- * <TableCard size="md">
+ * <TableCard>
  *   <TableScrollArea>
  *     <Table>
  *       <TableHeader>
@@ -3901,10 +4102,41 @@ export declare interface TableCardProps extends React_2.HTMLAttributes<HTMLDivEl
     size?: TableSize;
 }
 
+/**
+ * Body cell. v2: `h-16` (or `h-20` when the parent {@link TableCard} uses
+ * `size="lg"`), `px-4 py-3` padding, body-sm typography, and a single
+ * `border-border-primary` rule that is zeroed by {@link TableBody} for the
+ * final row.
+ */
 export declare const TableCell: React_2.ForwardRefExoticComponent<TableCellProps & React_2.RefAttributes<HTMLTableCellElement>>;
 
 /**
- * Horizontal group for icons, chips, and metadata inside a {@link TableCell} (Figma `gap-[10px]`).
+ * Two-line content slot matching Figma `V2 Table Content` — primary line
+ * (semibold) over an optional secondary line (regular, muted) with a 2px
+ * gap. Use inside {@link TableCell} for the common stacked-text pattern.
+ */
+export declare function TableCellContent({ primary, secondary, primaryAdornment, secondaryAdornment, className, }: TableCellContentProps): JSX.Element;
+
+export declare namespace TableCellContent {
+    var displayName: string;
+}
+
+export declare interface TableCellContentProps {
+    /** Primary line (semibold body-sm). */
+    primary: React_2.ReactNode;
+    /** Optional secondary line (regular body-sm, secondary color). */
+    secondary?: React_2.ReactNode;
+    /** Inline node rendered next to the primary line (icon, chip). */
+    primaryAdornment?: React_2.ReactNode;
+    /** Inline node rendered next to the secondary line. */
+    secondaryAdornment?: React_2.ReactNode;
+    /** Class for the outer wrapper. */
+    className?: string;
+}
+
+/**
+ * Horizontal group for icons, chips, and metadata inside a {@link TableCell}
+ * (Figma `gap-[4px]`).
  */
 export declare const TableCellGroup: React_2.ForwardRefExoticComponent<TableCellGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -3915,7 +4147,7 @@ export declare interface TableCellGroupProps extends React_2.HTMLAttributes<HTML
 export declare type TableCellIntent = "default" | "checkbox" | "stacked" | "multiline" | "sideLabel";
 
 export declare interface TableCellProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
-    /** `pillProgress` uses wider horizontal padding; row dividers match the default weight for visibility. @default "default" */
+    /** Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat. @default "default" */
     cellVariant?: TableCellVariant;
     /** Alignment and typography preset for common cell types. @default "default" */
     intent?: TableCellIntent;
@@ -3929,6 +4161,10 @@ export declare const TableFooter: React_2.ForwardRefExoticComponent<TableFooterP
 export declare interface TableFooterProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
 }
 
+/**
+ * Header cell. v2: transparent background, 48px min height, tertiary text,
+ * `border-border-primary` bottom rule.
+ */
 export declare const TableHead: React_2.ForwardRefExoticComponent<TableHeadProps & React_2.RefAttributes<HTMLTableCellElement>>;
 
 export declare const TableHeader: React_2.ForwardRefExoticComponent<TableHeaderProps & React_2.RefAttributes<HTMLTableSectionElement>>;
@@ -3955,7 +4191,8 @@ export declare interface TableLineClampProps extends React_2.HTMLAttributes<HTML
 }
 
 /**
- * Rounded thumbnail sized from {@link TableCard} `size` (`md` vs `lg`).
+ * Square 48px thumbnail used inside {@link TableCell} for media columns
+ * (Figma `V2 Media Thumbnail Item`).
  */
 export declare const TableMediaThumbnail: React_2.ForwardRefExoticComponent<TableMediaThumbnailProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -3964,20 +4201,25 @@ export declare interface TableMediaThumbnailProps extends Omit<React_2.HTMLAttri
     src: string;
     /** Alt text for the image. @default "" */
     alt?: string;
-    /** Applies the table’s blurred-media treatment. @default false */
+    /** Applies the table's blurred-media treatment. @default false */
     blurred?: boolean;
     /** `center` uses the fixed media column width from the lg spec. @default "start" */
     align?: "start" | "center";
 }
 
 /**
- * Footer bar for data tables: rows-per-page control, page navigation, and range
- * summary. Pair `paginationSlot` with {@link Pagination} for numbered controls.
+ * Footer bar for data tables: rows-per-page control, page navigation, and
+ * range summary. Pair `paginationSlot` with {@link Pagination} for numbered
+ * controls.
+ *
+ * v2 sits flush inside {@link TableCard} (`px-3` matches the card's inner
+ * gutter); the chip styling now lives on the {@link TableRowsPerPageSelect}
+ * trigger itself.
  *
  * @example
  * ```tsx
  * <TablePagination
- *   leadingSlot={<Select size="32" aria-label="Rows per page">…</Select>}
+ *   leadingSlot={<TableRowsPerPageSelect />}
  *   paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}
  *   summary="20–30 of 100 rows"
  * />
@@ -4027,7 +4269,8 @@ export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableR
 }
 
 /**
- * Rows-per-page {@link Select} styled for {@link TablePagination} (Figma field).
+ * Rows-per-page {@link Select} styled for {@link TablePagination}. v2 uses a
+ * subtle pill trigger with the table's secondary-surface background.
  */
 export declare function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps): JSX.Element;
 
@@ -4039,31 +4282,56 @@ export declare interface TableRowsPerPageSelectProps {
 }
 
 /**
- * Horizontal scroll container for wide tables. Uses an inner scrollport so the
- * table respects the card radius (plain `overflow-x-auto` on the table
- * wrapper often loses rounded corners with `border-collapse`).
+ * Horizontal scroll container for wide tables. The inner scrollport keeps
+ * `border-collapse` styles intact when the table wraps.
  */
 export declare const TableScrollArea: React_2.ForwardRefExoticComponent<TableScrollAreaProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface TableScrollAreaProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Rounds the top of the table block to match {@link TableCard}. Set `false` when {@link TableToolbar} is above this scroll area. @default true */
+    /**
+     * No longer needed in v2 — {@link TableCard} handles corner rounding via
+     * its own `overflow-hidden rounded-3xl`. Accepted for back-compat.
+     *
+     * @deprecated v2 ignores this prop; safe to remove.
+     */
     roundTop?: boolean;
 }
 
-/** Row density for body cells — `md` (60px min height) or `lg` (80px). */
-export declare type TableSize = "md" | "lg";
+/**
+ * Row density for body cells.
+ *
+ * - `"md"` (default) → 64px Figma `V2 Table Cell` Small.
+ * - `"lg"` → 80px Figma `V2 Table Cell` Large.
+ *
+ * `"default"` is the v2 numeric-token equivalent of `"md"` and is preferred
+ * for new code.
+ */
+export declare type TableSize = "md" | "lg" | "default";
+
+/** Current sort direction of a {@link TableSortLabel}. `null` means unsorted. */
+export declare type TableSortDirection = "asc" | "desc" | null;
 
 /**
- * Sortable column label with caption typography and a sort affordance.
+ * Sortable column label. v2 expresses the sort state with a 1px underline
+ * beneath the label plus a directional arrow when sorted.
  */
 export declare const TableSortLabel: React_2.ForwardRefExoticComponent<TableSortLabelProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare interface TableSortLabelProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     children: React_2.ReactNode;
+    /**
+     * Visual indicator of the column's sort state. When set to `"asc"` or
+     * `"desc"`, a 1px underline accent appears beneath the label and a small
+     * directional arrow is shown next to it. @default null
+     */
+    direction?: TableSortDirection;
 }
 
 /**
- * Two-line primary + secondary text block for “cell + info” patterns.
+ * Two-line primary + secondary text block for "cell + info" patterns.
+ *
+ * @deprecated Prefer {@link TableCellContent} which supports adornments and
+ * matches the Figma `V2 Table Content` slot.
  */
 export declare function TableStackedText({ title, subtitle }: TableStackedTextProps): JSX.Element;
 

package/dist/index.mjs

@@ -27,7 +27,7 @@ import { CyclingText } from "./components/CyclingText/CyclingText.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "./components/Dialog/Dialog.mjs";
 import { Divider } from "./components/Divider/Divider.mjs";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/Drawer/Drawer.mjs";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
 import { EmptyState } from "./components/EmptyState/EmptyState.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
@@ -212,7 +212,7 @@ import { StepperStep } from "./components/Stepper/StepperStep.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
 import { SwitchField } from "./components/SwitchField/SwitchField.mjs";
 import { SwitchToggle } from "./components/SwitchToggle/SwitchToggle.mjs";
-import { Table, TableBody, TableCard, TableCell, TableCellGroup, TableFooter, TableHead, TableHeader, TableLineClamp, TableMediaThumbnail, TablePillProgressLayout, TableProgressTrack, TableRow, TableRowsPerPageSelect, TableScrollArea, TableSortLabel, TableStackedText, TableStatusDot, TableToolbar } from "./components/Table/Table.mjs";
+import { Table, TableBody, TableCard, TableCell, TableCellContent, TableCellGroup, TableFooter, TableHead, TableHeader, TableLineClamp, TableMediaThumbnail, TablePillProgressLayout, TableProgressTrack, TableRow, TableRowsPerPageSelect, TableScrollArea, TableSortLabel, TableStackedText, TableStatusDot, TableToolbar } from "./components/Table/Table.mjs";
 import { TablePagination } from "./components/Table/TablePagination.mjs";
 import { Tabs } from "./components/Tabs/Tabs.mjs";
 import { TabsContent } from "./components/Tabs/TabsContent.mjs";
@@ -332,8 +332,11 @@ export {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
+  DropdownMenuHeader,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   EditIcon,
@@ -451,6 +454,7 @@ export {
   TableBody,
   TableCard,
   TableCell,
+  TableCellContent,
   TableCellGroup,
   TableFooter,
   TableHead,

package/dist/styles/base.css

@@ -131,8 +131,10 @@
 
 :root {
   --color-special-bottom-nav-highlight: var(--primitives-color-green-500);
+  --color-content-disabled: var(--primitives-color-gray-450);
 }
 
 .dark {
   --color-special-bottom-nav-highlight: var(--primitives-color-gray-white);
+  --color-content-disabled: var(--primitives-color-gray-450);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.18.0",
+  "version": "2.20.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -166,7 +166,10 @@
       "ajv": ">=8.18.0",
       "brace-expansion": ">=5.0.5",
       "yaml": ">=2.8.3",
-      "postcss": ">=8.5.10"
+      "postcss": ">=8.5.10",
+      "tmp": ">=0.2.6",
+      "ws": ">=8.20.1",
+      "qs": ">=6.15.2"
     }
   },
   "size-limit": [