@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/table/src/tv.d.ts

@@ -0,0 +1,176 @@
+export declare const tableVariants: import('tailwind-variants').TVReturnType<{
+    selected: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    sortable: {
+        true: {
+            headerCell: string[];
+        };
+        false: {
+            headerCell: string;
+        };
+    };
+    resizing: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            resizer: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    headerWrapper: string;
+    headerInner: string;
+    headerRow: string;
+    headerCell: string[];
+    headerCellDraggable: string;
+    headerCellCanDrag: string;
+    headerCellDragging: string;
+    headerCheckbox: string;
+    bodyWrapper: string;
+    bodyScroll: string;
+    body: string;
+    row: string;
+    rowStatic: string;
+    cell: string;
+    cellCheckbox: string;
+    sortIcon: string;
+    emptyState: string;
+    resizer: string[];
+    resizeGuide: string[];
+    dragGhost: string[];
+    dragIndicator: string[];
+}, undefined, {
+    selected: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    sortable: {
+        true: {
+            headerCell: string[];
+        };
+        false: {
+            headerCell: string;
+        };
+    };
+    resizing: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            resizer: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    headerWrapper: string;
+    headerInner: string;
+    headerRow: string;
+    headerCell: string[];
+    headerCellDraggable: string;
+    headerCellCanDrag: string;
+    headerCellDragging: string;
+    headerCheckbox: string;
+    bodyWrapper: string;
+    bodyScroll: string;
+    body: string;
+    row: string;
+    rowStatic: string;
+    cell: string;
+    cellCheckbox: string;
+    sortIcon: string;
+    emptyState: string;
+    resizer: string[];
+    resizeGuide: string[];
+    dragGhost: string[];
+    dragIndicator: string[];
+}, import('tailwind-variants').TVReturnType<{
+    selected: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    sortable: {
+        true: {
+            headerCell: string[];
+        };
+        false: {
+            headerCell: string;
+        };
+    };
+    resizing: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            resizer: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    headerWrapper: string;
+    headerInner: string;
+    headerRow: string;
+    headerCell: string[];
+    headerCellDraggable: string;
+    headerCellCanDrag: string;
+    headerCellDragging: string;
+    headerCheckbox: string;
+    bodyWrapper: string;
+    bodyScroll: string;
+    body: string;
+    row: string;
+    rowStatic: string;
+    cell: string;
+    cellCheckbox: string;
+    sortIcon: string;
+    emptyState: string;
+    resizer: string[];
+    resizeGuide: string[];
+    dragGhost: string[];
+    dragIndicator: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type TableVariantProps = Parameters<typeof tableVariants>[0];

package/dist/components/table/src/tv.js

@@ -0,0 +1,97 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const tableVariants = tcv({
+  slots: {
+    // Root container - flex column layout
+    root: "relative flex flex-col overflow-hidden",
+    // Header wrapper - clips content, fixed at top
+    headerWrapper: "group/header relative flex-shrink-0 overflow-hidden border-b",
+    // Header inner - can translate for scroll sync, matches body content width
+    headerInner: "",
+    // Header row - must match body row width for column alignment
+    headerRow: "flex w-full items-center bg-default-background",
+    // Header cell
+    headerCell: [
+      "group/cell relative flex h-8 items-center gap-1 px-3",
+      "select-none whitespace-nowrap flex-shrink-0"
+    ],
+    headerCellDraggable: "",
+    headerCellCanDrag: "cursor-grab",
+    headerCellDragging: "bg-accent-background/10 opacity-60",
+    headerCheckbox: "flex h-8 items-center justify-center px-2 flex-shrink-0",
+    // Body wrapper - takes remaining space, handles scrolling
+    bodyWrapper: "relative flex-1 min-h-0",
+    // Body scroll container (ScrollArea for container mode)
+    bodyScroll: "h-full w-full",
+    // Body content - relative for absolute positioned rows
+    body: "relative min-w-max",
+    // Row styles - w-full ensures flex children calculate width consistently
+    row: "absolute left-0 right-0 flex w-full items-center",
+    rowStatic: "relative flex w-full items-center h-[inherit] min-h-8",
+    // For non-virtualized mode
+    cell: "flex items-center px-3 flex-shrink-0",
+    cellCheckbox: "flex items-center justify-center px-2 flex-shrink-0",
+    // Sort icon
+    sortIcon: "size-3.5 opacity-60",
+    // Empty and loading states
+    emptyState: "flex flex-col items-center justify-center py-16 text-secondary-foreground",
+    // Column resize styles
+    resizer: [
+      "absolute -right-1 top-0 h-full w-2 cursor-col-resize z-3",
+      "before:absolute before:inset-y-2 before:left-0.75 before:w-0.5 before:content-[''] before:bg-tertiary-background",
+      "before:rounded-md before:opacity-0 group-hover/header:before:opacity-100 hover:before:bg-accent-foreground hover:before:inset-y-1",
+      "active:before:opacity-0"
+    ],
+    resizeGuide: ["pointer-events-none absolute top-0 z-50 w-px", "bg-accent-foreground"],
+    // Column drag styles
+    dragGhost: ["pointer-events-none absolute top-0 z-40", "bg-gray-500/10"],
+    dragIndicator: ["pointer-events-none absolute top-0 z-50 w-px", "bg-accent-foreground"]
+  },
+  variants: {
+    selected: {
+      true: { row: "bg-selected-background", rowStatic: "bg-selected-background" },
+      false: {}
+    },
+    active: {
+      true: { row: "bg-selected-background/70", rowStatic: "bg-selected-background/70" },
+      false: {}
+    },
+    sortable: {
+      true: {
+        headerCell: [
+          "text-secondary-foreground hover:text-default-foreground hover:bg-secondary-background",
+          "aria-[sort]:text-default-foreground"
+        ]
+      },
+      false: { headerCell: "text-default-foreground" }
+    },
+    resizing: {
+      true: { root: "pointer-events-none" },
+      false: {}
+    },
+    dragging: {
+      true: { resizer: "before:!opacity-0" },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      selected: true,
+      class: {
+        rowStatic: "hover:bg-selected-background/50"
+      }
+    },
+    {
+      selected: false,
+      class: {
+        rowStatic: "hover:bg-black/3 dark:hover:bg-white/3 hover:rounded-md"
+      }
+    }
+  ],
+  defaultVariants: {
+    selected: false,
+    active: false
+  }
+});
+export {
+  tableVariants
+};

package/dist/components/table/src/types.d.ts

@@ -0,0 +1,292 @@
+import { ReactNode, RefObject } from 'react';
+/** Selection mode for the table */
+export type SelectionMode = "single" | "multiple" | "none";
+/** Scroll mode for virtualization */
+export type ScrollMode = "container" | "window";
+/** Row key type */
+export type RowKey = string | number;
+/** Sort direction */
+export type SortDirection = "asc" | "desc";
+/** Sorting state */
+export interface SortingState {
+    id: string;
+    desc: boolean;
+}
+/** Row selection state */
+export type SelectionState = Set<RowKey>;
+/** Column definition */
+export interface TableColumnDef<T = unknown> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header content */
+    header?: ReactNode;
+    /** Column width (px or CSS value) */
+    width?: number | string;
+    /** Minimum column width */
+    minWidth?: number;
+    /** Maximum column width */
+    maxWidth?: number;
+    /** Flex grow value for flexible column width (e.g., 1, 2, 3) */
+    flex?: number;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Whether column is resizable */
+    resizable?: boolean;
+    /** Custom cell className */
+    className?: string;
+    /** Custom header className */
+    headerClassName?: string;
+}
+/** Column width state */
+export interface ColumnWidthState {
+    [columnId: string]: number;
+}
+/** Alias for ColumnWidthState */
+export type ColumnWidthsState = ColumnWidthState;
+/** Column order state */
+export type ColumnOrderState = string[];
+/** Resize state for showing guide line during drag */
+export interface ResizeState {
+    columnId: string;
+    startX: number;
+    startWidth: number;
+    currentX: number;
+}
+/** Table instance (exposed via ref) */
+export interface TableInstance<T> {
+    /** Get all rows data */
+    getData: () => T[];
+    /** Get selected row keys */
+    getSelectedKeys: () => RowKey[];
+    /** Get selected rows data */
+    getSelectedRows: () => T[];
+    /** Check if row is selected */
+    isRowSelected: (key: RowKey) => boolean;
+    /** Select row */
+    selectRow: (key: RowKey) => void;
+    /** Deselect row */
+    deselectRow: (key: RowKey) => void;
+    /** Toggle row selection */
+    toggleRowSelection: (key: RowKey) => void;
+    /** Select all rows */
+    selectAll: () => void;
+    /** Deselect all rows */
+    deselectAll: () => void;
+    /** Check if all rows are selected */
+    isAllSelected: () => boolean;
+    /** Check if some (but not all) rows are selected */
+    isSomeSelected: () => boolean;
+}
+/** Internal row data with metadata */
+export interface InternalRow<T> {
+    key: RowKey;
+    data: T;
+    index: number;
+}
+/** Consecutive selection style type */
+export type ConsecutiveStyle = "rounded-md" | "rounded-t-md" | "rounded-b-md" | "rounded-none" | "";
+/** Table context value */
+export interface TableContextValue<T = unknown> {
+    data: T[];
+    rows: InternalRow<T>[];
+    getRowKey: (row: T, index: number) => RowKey;
+    columns: TableColumnDef<T>[];
+    columnOrder: ColumnOrderState;
+    registerColumn: (column: TableColumnDef<T>) => void;
+    unregisterColumn: (id: string) => void;
+    selectable: boolean;
+    selectionMode: SelectionMode;
+    selectedKeys: Set<RowKey>;
+    isRowSelected: (key: RowKey) => boolean;
+    toggleRowSelection: (key: RowKey, index?: number) => void;
+    handleCheckboxClick: (key: RowKey, index: number, event: React.MouseEvent) => void;
+    isAllSelected: () => boolean;
+    isSomeSelected: () => boolean;
+    selectAll: () => void;
+    deselectAll: () => void;
+    sortable: boolean;
+    sorting: SortingState[];
+    toggleSort: (columnId: string) => void;
+    getSortDirection: (columnId: string) => SortDirection | null;
+    resizable: boolean;
+    columnWidths: ColumnWidthState;
+    resizeState: ResizeState | null;
+    getColumnWidth: (columnId: string) => number | undefined;
+    startResize: (columnId: string, startX: number, startWidth: number) => void;
+    updateResize: (currentX: number) => void;
+    endResize: () => void;
+    reorderable: boolean;
+    dragState: {
+        columnId: string;
+        targetIndex: number;
+    } | null;
+    startDrag: (columnId: string) => void;
+    updateDragTarget: (targetIndex: number) => void;
+    endDrag: () => void;
+    cancelDrag: () => void;
+    scrollMode: ScrollMode;
+    scrollRef?: RefObject<HTMLElement>;
+    containerRef?: RefObject<HTMLElement>;
+    virtualized: boolean;
+    /** Fixed row height in pixels */
+    rowHeight: number;
+    overscan: number;
+    activeRowKey: RowKey | null;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    getConsecutiveStyle: (index: number) => ConsecutiveStyle;
+    tableRef: RefObject<HTMLDivElement>;
+    tableInstance: TableInstance<T>;
+}
+/** Props for the Table root component */
+export interface TableProps<T> {
+    /** Table data */
+    data: T[];
+    /** Function to get unique key for each row */
+    getRowKey: (row: T, index: number) => RowKey;
+    /** Whether to show selection column */
+    selectable?: boolean;
+    /** Selection mode */
+    selectionMode?: SelectionMode;
+    /** Controlled selected keys */
+    selectedKeys?: RowKey[];
+    /** Default selected keys (uncontrolled) */
+    defaultSelectedKeys?: RowKey[];
+    /** Selection change callback */
+    onSelectionChange?: (selectedKeys: RowKey[]) => void;
+    /** Whether to enable virtualization */
+    virtualized?: boolean;
+    /** Fixed row height in pixels for virtualization (default: 32) */
+    rowHeight?: number;
+    /** Number of rows to render outside viewport */
+    overscan?: number;
+    /** Scroll mode */
+    scrollMode?: ScrollMode;
+    /** Custom scroll element ref (for custom container scroll) */
+    scrollRef?: RefObject<HTMLElement>;
+    /** Custom container ref (for custom container scroll) */
+    containerRef?: RefObject<HTMLElement>;
+    /** Whether table is sortable */
+    sortable?: boolean;
+    /** Controlled sorting state */
+    sorting?: SortingState[];
+    /** Default sorting state */
+    defaultSorting?: SortingState[];
+    /** Sorting change callback */
+    onSortingChange?: (sorting: SortingState[]) => void;
+    /** Whether columns are resizable */
+    resizable?: boolean;
+    /** Controlled column widths */
+    columnWidths?: ColumnWidthState;
+    /** Default column widths */
+    defaultColumnWidths?: ColumnWidthState;
+    /** Column width change callback */
+    onColumnWidthsChange?: (widths: ColumnWidthState) => void;
+    /** Whether columns are reorderable */
+    reorderable?: boolean;
+    /** Controlled column order */
+    columnOrder?: ColumnOrderState;
+    /** Default column order */
+    defaultColumnOrder?: ColumnOrderState;
+    /** Column order change callback */
+    onColumnOrderChange?: (order: ColumnOrderState) => void;
+    /** Active row key (for highlighting) */
+    activeRowKey?: RowKey | null;
+    /** Row click handler */
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    /** Custom class name */
+    className?: string;
+    /** Container height (for container scroll mode) */
+    height?: number | string;
+    /** Scroll event callback (for infinite scroll, etc.) */
+    onScroll?: (event: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }) => void;
+    /** Ref to table instance */
+    tableRef?: RefObject<TableInstance<T> | null>;
+    /** Children (Table.Header, Table.Body) */
+    children: ReactNode;
+}
+/** Props for Table.Header */
+export interface TableHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Props for Table.Column (used inside Table.Header) */
+export interface TableColumnProps {
+    /** Unique column identifier */
+    id: string;
+    /** Column header content */
+    children?: ReactNode;
+    /** Column width */
+    width?: number | string;
+    /** Minimum width */
+    minWidth?: number;
+    /** Maximum width */
+    maxWidth?: number;
+    /** Flex grow value for flexible column width (e.g., 1, 2, 3) */
+    flex?: number;
+    /** Whether sortable */
+    sortable?: boolean;
+    /** Whether resizable (overrides table-level setting) */
+    resizable?: boolean;
+    /** Header className */
+    className?: string;
+}
+/** Props for Table.Body */
+export interface TableBodyProps<T = unknown> {
+    /** Render function for each row */
+    children: (row: T, index: number) => ReactNode;
+    /** Body className */
+    className?: string;
+    /** Body class names */
+    classNames?: {
+        viewport?: string;
+    };
+}
+/** Props for Table.Row */
+export interface TableRowProps {
+    /** Row key (must match getRowKey result) */
+    rowKey: RowKey;
+    /** Row index */
+    index: number;
+    /** Children (Table.Cell elements) */
+    children: ReactNode;
+    /** Row className */
+    className?: string;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent) => void;
+}
+/** Props for Table.Cell */
+export interface TableCellProps {
+    /** Cell content */
+    children: ReactNode;
+    /** Column id this cell belongs to */
+    columnId?: string;
+    /** Cell className */
+    className?: string;
+}
+/** Props for Table.Value */
+export interface TableValueProps {
+    /** Value content */
+    children?: ReactNode;
+    /** Value className */
+    className?: string;
+}
+/** Props for Table.Footer (e.g., loading indicator for infinite scroll) */
+export interface TableFooterProps {
+    /** Footer content */
+    children: ReactNode;
+    /** Footer className */
+    className?: string;
+}
+/** Props for Table.SelectCell */
+export interface TableSelectCellProps {
+    /** Row key */
+    rowKey: RowKey;
+    /** Row index */
+    index: number;
+    /** Disabled state */
+    disabled?: boolean;
+}

package/dist/components/table/tsup.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('tsup').Options | import('tsup').Options[] | ((overrideOptions: import('tsup').Options) => import('tsup').Options | import('tsup').Options[] | Promise<import('tsup').Options | import('tsup').Options[]>);
+export default _default;

package/dist/components/tabs/dist/index.js

@@ -1,4 +1,4 @@
-import { memo, forwardRef, useId, createContext, useContext } from "react";
+import { memo, forwardRef, useContext, createContext, useId } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -297,8 +297,9 @@ var TabsRoot = forwardRef(function Tabs(props, ref) {
   );
 });
 TabsRoot.displayName = "Tabs";
-var Tabs2 = TabsRoot;
-Tabs2.Item = TabItem;
+var Tabs2 = Object.assign(TabsRoot, {
+  Item: TabItem
+});
 export {
   TabItem,
   Tabs2 as Tabs

package/dist/components/tabs/src/tabs.d.ts

@@ -13,5 +13,5 @@ export interface TabsProps extends Omit<HTMLProps<HTMLElement>, "onChange" | "as
 interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLElement>> {
     Item: typeof TabItem;
 }
-declare const Tabs: TabsComponent;
-export { Tabs };
+export declare const Tabs: TabsComponent;
+export {};

package/dist/components/tabs/src/tabs.js

@@ -5,7 +5,7 @@ import { TabsContext } from "./context.js";
 import { TabItem } from "./tab-item.js";
 import { tabsTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
-const TabsRoot = forwardRef(function Tabs(props, ref) {
+const TabsRoot = forwardRef(function Tabs2(props, ref) {
   const {
     as = "div",
     value: valueProp,
@@ -54,8 +54,9 @@ const TabsRoot = forwardRef(function Tabs(props, ref) {
   );
 });
 TabsRoot.displayName = "Tabs";
-const Tabs2 = TabsRoot;
-Tabs2.Item = TabItem;
+const Tabs = Object.assign(TabsRoot, {
+  Item: TabItem
+});
 export {
-  Tabs2 as Tabs
+  Tabs
 };

package/dist/components/text-field/dist/index.d.ts

@@ -23,4 +23,4 @@ interface TextFieldComponent extends react__default.ForwardRefExoticComponent<Te
 }
 declare const TextField: TextFieldComponent;
 
-export { TextField, type TextFieldProps };
+export { type FieldAddonProps, TextField, type TextFieldProps };

package/dist/components/text-field/dist/index.js

@@ -170,23 +170,23 @@ var TextFieldContent = ({
   prefixNode,
   suffixNode,
   inputProps,
-  styles,
+  tv,
   inputRef
-}) => /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+}) => /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
   prefixNode && cloneElement(prefixNode, {
-    className: tcx(styles.prefix(), prefixNode.props.className)
+    className: tcx(tv.prefix(), prefixNode.props.className)
   }),
   /* @__PURE__ */ jsx(
     Input,
     {
       ref: inputRef,
       variant: "reset",
-      className: styles.input(),
+      className: tv.input(),
       ...inputProps
     }
   ),
   suffixNode && cloneElement(suffixNode, {
-    className: tcx(styles.suffix(), suffixNode.props.className)
+    className: tcx(tv.suffix(), suffixNode.props.className)
   })
 ] });
 var TextFieldBase = forwardRef((props, ref) => {
@@ -208,7 +208,7 @@ var TextFieldBase = forwardRef((props, ref) => {
   const suffixNode = suffixElements[0] || null;
   const labelNode = labelElements[0] || null;
   const descriptionNode = descriptionElements[0] || null;
-  const styles = TextFieldTv({
+  const tv = TextFieldTv({
     variant,
     size,
     hasPrefix: !!prefixNode,
@@ -218,7 +218,7 @@ var TextFieldBase = forwardRef((props, ref) => {
   });
   const generatedId = useId();
   const uuid = props.id ?? generatedId;
-  return labelNode || descriptionNode ? /* @__PURE__ */ jsxs("div", { className: tcx(styles.container(), className), children: [
+  return labelNode || descriptionNode ? /* @__PURE__ */ jsxs("div", { className: tcx(tv.container(), className), children: [
     labelNode && cloneElement(labelNode, {
       variant,
       disabled,
@@ -230,13 +230,13 @@ var TextFieldBase = forwardRef((props, ref) => {
         className,
         prefixNode,
         suffixNode,
-        styles,
+        tv,
         inputRef: ref,
         inputProps: { ...rest, id: uuid, size, disabled }
       }
     ),
     descriptionNode && cloneElement(descriptionNode, {
-      className: tcx(styles.description(), descriptionNode.props.className)
+      className: tcx(tv.description(), descriptionNode.props.className)
     })
   ] }) : /* @__PURE__ */ jsx(
     TextFieldContent,
@@ -244,7 +244,7 @@ var TextFieldBase = forwardRef((props, ref) => {
       className,
       prefixNode,
       suffixNode,
-      styles,
+      tv,
       inputRef: ref,
       inputProps: { ...rest, id: uuid, size, disabled }
     }