@mihcm/ui 0.14.1

package/dist/ContextMenu.native.d.ts

@@ -0,0 +1,81 @@
+/**
+ * ContextMenu (React Native variant).
+ *
+ * Uses Modal for the overlay and Pressable for items.
+ * Long-press on the trigger opens the menu.
+ * Same sub-component API as the web variant.
+ *
+ * Wiki: docs/components/ContextMenu.md
+ */
+import { type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { type VariantProps } from 'class-variance-authority';
+type ClassedViewProps = Omit<ViewProps, 'style'> & {
+    className?: string;
+};
+export interface ContextMenuProps {
+    children: ReactNode;
+}
+export declare function ContextMenu({ children }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export interface ContextMenuTriggerProps extends ClassedViewProps {
+    children: ReactNode;
+}
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<View>>;
+export interface ContextMenuContentProps extends ClassedViewProps {
+}
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<View>>;
+declare const contextMenuItemVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ContextMenuItemProps extends ClassedViewProps, VariantProps<typeof contextMenuItemVariants> {
+    disabled?: boolean;
+    onSelect?: () => void;
+    inset?: boolean;
+    children: ReactNode;
+}
+export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<ContextMenuItemProps & import("react").RefAttributes<View>>;
+export interface ContextMenuCheckboxItemProps extends ClassedViewProps {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    children: ReactNode;
+}
+export declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<ContextMenuCheckboxItemProps & import("react").RefAttributes<View>>;
+export interface ContextMenuRadioItemProps extends ClassedViewProps {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+}
+export declare const ContextMenuRadioItem: import("react").ForwardRefExoticComponent<ContextMenuRadioItemProps & import("react").RefAttributes<View>>;
+export declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
+    className?: string;
+} & import("react").RefAttributes<View>>;
+export declare const ContextMenuSub: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuRadioGroup: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ContextMenuLabelProps extends ClassedViewProps {
+    inset?: boolean;
+    children: ReactNode;
+}
+export declare const ContextMenuLabel: import("react").ForwardRefExoticComponent<ContextMenuLabelProps & import("react").RefAttributes<View>>;
+export declare const ContextMenuSeparator: import("react").ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
+    className?: string;
+} & import("react").RefAttributes<View>>;
+export declare const ContextMenuSubTrigger: import("react").ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
+    className?: string;
+} & {
+    inset?: boolean;
+    children: ReactNode;
+} & import("react").RefAttributes<View>>;
+export declare const ContextMenuSubContent: import("react").ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
+    className?: string;
+} & import("react").RefAttributes<View>>;
+export interface ContextMenuShortcutProps extends ClassedViewProps {
+    children: ReactNode;
+}
+export declare const ContextMenuShortcut: import("react").ForwardRefExoticComponent<ContextMenuShortcutProps & import("react").RefAttributes<View>>;
+export {};
+//# sourceMappingURL=ContextMenu.native.d.ts.map

package/dist/ContextMenu.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.native.d.ts","sourceRoot":"","sources":["../src/ContextMenu.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,IAAI,EACJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,KAAK,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAmB1E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAQzD;AAID,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,0GAgB9B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;CAAG;AAEpE,eAAO,MAAM,kBAAkB,0GAkC9B,CAAC;AAIF,QAAA,MAAM,uBAAuB;;8EAW5B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,gBAAgB,EACtB,YAAY,CAAC,OAAO,uBAAuB,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,uGAoC3B,CAAC;AAIF,MAAM,WAAW,4BAA6B,SAAQ,gBAAgB;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,+GAmBnC,CAAC;AAIF,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB,4GAehC,CAAC;AAIF,eAAO,MAAM,gBAAgB;gBAxNoC,MAAM;wCA4NtE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAAoB,CAAC;AACzF,eAAO,MAAM,qBAAqB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAAoB,CAAC;AAIhG,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,wGAQ5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBApPgC,MAAM;wCA0PtE,CAAC;AAIF,eAAO,MAAM,qBAAqB;gBA9P+B,MAAM;;YA8PY,OAAO;cAAY,SAAS;wCAS9G,CAAC;AAEF,eAAO,MAAM,qBAAqB;gBAzQ+B,MAAM;wCA6QtE,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,2GAQ/B,CAAC"}

package/dist/ContextMenu.native.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ContextMenu (React Native variant).
+ *
+ * Uses Modal for the overlay and Pressable for items.
+ * Long-press on the trigger opens the menu.
+ * Same sub-component API as the web variant.
+ *
+ * Wiki: docs/components/ContextMenu.md
+ */
+import { forwardRef, createContext, useContext, useCallback, useState, } from 'react';
+import { Modal, Pressable, Text, View, } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+const ContextMenuCtx = createContext(null);
+function useCtx() {
+    const ctx = useContext(ContextMenuCtx);
+    if (!ctx)
+        throw new Error('ContextMenu sub-components must be used within <ContextMenu>.');
+    return ctx;
+}
+export function ContextMenu({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsx(ContextMenuCtx.Provider, { value: { open: isOpen, setOpen: setIsOpen }, children: children }));
+}
+export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger({ className, children, ...props }, ref) {
+    const ctx = useCtx();
+    return (_jsx(Pressable, { ref: ref, onLongPress: () => ctx.setOpen(true), delayLongPress: 500, className: cn(className), ...props, children: children }));
+});
+export const ContextMenuContent = forwardRef(function ContextMenuContent({ className, children, ...props }, ref) {
+    const ctx = useCtx();
+    return (_jsx(Modal, { visible: ctx.open, transparent: true, animationType: "fade", onRequestClose: () => ctx.setOpen(false), statusBarTranslucent: true, children: _jsx(Pressable, { onPress: () => ctx.setOpen(false), className: "flex-1 items-center justify-center bg-black/40", accessibilityRole: "none", children: _jsx(Pressable, { onPress: (e) => e.stopPropagation(), children: _jsx(View, { ref: ref, accessibilityRole: "menu", className: cn('min-w-[200px] rounded-xl border border-border bg-card p-1 shadow-lg', className), ...props, children: children }) }) }) }));
+});
+/* ── Item ──────────────────────────────────────────────────────────── */
+const contextMenuItemVariants = cva('flex-row items-center rounded-lg px-3 py-3', {
+    variants: {
+        variant: {
+            default: '',
+            destructive: '',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+export const ContextMenuItem = forwardRef(function ContextMenuItem({ className, variant, disabled, onSelect, inset, children, ...props }, ref) {
+    const ctx = useCtx();
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "menuitem", accessibilityState: { disabled: !!disabled }, disabled: disabled, onPress: () => {
+            if (!disabled) {
+                onSelect?.();
+                ctx.setOpen(false);
+            }
+        }, className: cn(contextMenuItemVariants({ variant }), disabled && 'opacity-50', inset && 'pl-8', className), ...props, children: _jsx(Text, { className: cn('flex-1 text-sm', variant === 'destructive' ? 'text-destructive' : 'text-foreground'), numberOfLines: 1, children: children }) }));
+});
+export const ContextMenuCheckboxItem = forwardRef(function ContextMenuCheckboxItem({ className, checked, onCheckedChange, disabled, children, ...props }, ref) {
+    return (_jsxs(Pressable, { ref: ref, accessibilityRole: "checkbox", accessibilityState: { checked: !!checked, disabled: !!disabled }, disabled: disabled, onPress: () => onCheckedChange?.(!checked), className: cn('flex-row items-center rounded-lg px-3 py-3 pl-8', disabled && 'opacity-50', className), ...props, children: [checked && (_jsx(Text, { className: "absolute left-2 text-foreground", children: "\u2713" })), _jsx(Text, { className: "flex-1 text-sm text-foreground", numberOfLines: 1, children: children })] }));
+});
+export const ContextMenuRadioItem = forwardRef(function ContextMenuRadioItem({ className, disabled, children, ...props }, ref) {
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "radio", accessibilityState: { disabled: !!disabled }, disabled: disabled, className: cn('flex-row items-center rounded-lg px-3 py-3 pl-8', disabled && 'opacity-50', className), ...props, children: _jsx(Text, { className: "flex-1 text-sm text-foreground", numberOfLines: 1, children: children }) }));
+});
+/* ── Group + RadioGroup ───────────────────────────────────────────── */
+export const ContextMenuGroup = forwardRef(function ContextMenuGroup({ className, ...props }, ref) {
+    return _jsx(View, { ref: ref, className: cn('py-1', className), ...props });
+});
+export const ContextMenuSub = ({ children }) => _jsx(_Fragment, { children: children });
+export const ContextMenuRadioGroup = ({ children }) => _jsx(_Fragment, { children: children });
+export const ContextMenuLabel = forwardRef(function ContextMenuLabel({ className, inset, children, ...props }, ref) {
+    return (_jsx(View, { ref: ref, className: cn('px-3 py-1.5', inset && 'pl-8', className), ...props, children: _jsx(Text, { className: "text-xs font-semibold text-muted-foreground", children: children }) }));
+});
+/* ── Separator ────────────────────────────────────────────────────── */
+export const ContextMenuSeparator = forwardRef(function ContextMenuSeparator({ className, ...props }, ref) {
+    return (_jsx(View, { ref: ref, className: cn('my-1 h-px bg-border', className), ...props }));
+});
+/* ── SubTrigger + SubContent (passthrough on native) ─────────────── */
+export const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {
+    return (_jsxs(View, { ref: ref, className: cn('flex-row items-center rounded-lg px-3 py-3', inset && 'pl-8', className), ...props, children: [_jsx(Text, { className: "flex-1 text-sm text-foreground", children: children }), _jsx(Text, { className: "text-xs text-muted-foreground", children: "\u203A" })] }));
+});
+export const ContextMenuSubContent = forwardRef(function ContextMenuSubContent({ className, ...props }, ref) {
+    return _jsx(View, { ref: ref, className: cn(className), ...props });
+});
+export const ContextMenuShortcut = forwardRef(function ContextMenuShortcut({ className, children, ...props }, ref) {
+    return (_jsx(View, { ref: ref, className: cn('ml-auto pl-4', className), ...props, children: _jsx(Text, { className: "text-xs tracking-widest text-muted-foreground", children: children }) }));
+});
+//# sourceMappingURL=ContextMenu.native.js.map

package/dist/ContextMenu.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.native.js","sourceRoot":"","sources":["../src/ContextMenu.native.tsx"],"names":[],"mappings":"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"}

package/dist/DataTable.d.ts

@@ -0,0 +1,98 @@
+/**
+ * DataTable (web variant — React DOM).
+ *
+ * Full-featured data table powered by TanStack Table v8 and rendered
+ * with the design system's Table primitives. Supports sorting,
+ * filtering, pagination, row selection, column visibility,
+ * expandable rows, column resizing, column/row pinning, grouping,
+ * and faceted filtering — all toggled via boolean props.
+ *
+ * Wiki: docs/components/DataTable.md
+ */
+import { type ReactNode } from 'react';
+import { createColumnHelper, type ColumnDef, type RowSelectionState, type Row, type Column } from '@tanstack/react-table';
+import { type TableHeaderTone, type TableVariant } from './Table.js';
+export { createColumnHelper };
+export type { ColumnDef, Row, RowSelectionState, TableVariant };
+interface DataTableColumnHeaderProps<TData, TValue> {
+    column: Column<TData, TValue>;
+    title: string;
+    className?: string;
+}
+export declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    /** Show a global search input above the table. */
+    searchable?: boolean;
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string;
+    /** Enable column header click-to-sort. @default true */
+    sortable?: boolean;
+    /** Show pagination controls below the table. */
+    paginated?: boolean;
+    /** Rows per page when `paginated` is true. @default 10 */
+    pageSize?: number;
+    /** Options for the rows-per-page selector. @default [5, 10, 20, 50] */
+    pageSizeOptions?: number[];
+    /** Add a selection checkbox column. */
+    selectable?: boolean;
+    /** Show a column-visibility toggle dropdown. */
+    columnVisibility?: boolean;
+    /** Enable expandable rows. */
+    expandable?: boolean;
+    /** Row-level guard for expand. */
+    getRowCanExpand?: (row: Row<TData>) => boolean;
+    /** Content rendered when a row is expanded. */
+    renderSubComponent?: (props: {
+        row: Row<TData>;
+    }) => ReactNode;
+    /** Called whenever row selection changes. */
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Enable per-column filter inputs below each header. */
+    columnFilterable?: boolean;
+    /** Allow shift+click to sort by multiple columns. */
+    multiSort?: boolean;
+    /** Allow columns to be resized by dragging the header edge. */
+    resizable?: boolean;
+    /** Enable column pinning. Provide pinned column IDs via `pinnedColumns`. */
+    columnPinnable?: boolean;
+    /** Column IDs to pin left/right. Only used when `columnPinnable` is true. */
+    pinnedColumns?: {
+        left?: string[];
+        right?: string[];
+    };
+    /** Enable row pinning. Provide pinned row IDs via `pinnedRows`. */
+    rowPinnable?: boolean;
+    /** Row IDs to pin top/bottom. Only used when `rowPinnable` is true. */
+    pinnedRows?: {
+        top?: string[];
+        bottom?: string[];
+    };
+    /** Enable row grouping by column. */
+    groupable?: boolean;
+    /** Enable faceted filtering (unique value lists, min/max ranges). Requires `columnFilterable`. */
+    faceted?: boolean;
+    /** Visual style variant for the table. @default 'default' */
+    variant?: TableVariant;
+    /** Semantic header color. */
+    headerTone?: TableHeaderTone;
+    /** ClassName applied to every header cell. */
+    headerClassName?: string;
+    /** Enable a minimum width table layout for wide/large datasets. */
+    wide?: boolean;
+    /** Render large row sets through TanStack Virtual inside a fixed-height scroll area. */
+    virtualized?: boolean;
+    /** Scroll container height when `virtualized` is true. */
+    virtualHeight?: number;
+    /** Estimated row height for TanStack Virtual. */
+    estimateRowHeight?: number;
+    /** Extra rows rendered before/after the viewport. */
+    virtualOverscan?: number;
+    /** Additional className on the root wrapper. */
+    className?: string;
+    /** Message shown when no rows match. @default 'No results.' */
+    emptyMessage?: string;
+}
+export declare function DataTable<TData, TValue>({ columns: userColumns, data, searchable, searchPlaceholder, sortable, paginated, pageSize: initialPageSize, pageSizeOptions, selectable, columnVisibility: showColumnVisibility, expandable, getRowCanExpand, renderSubComponent, onRowSelectionChange, columnFilterable, multiSort, resizable, columnPinnable, pinnedColumns, rowPinnable, pinnedRows, groupable, faceted, variant, headerTone, headerClassName, wide, virtualized, virtualHeight, estimateRowHeight, virtualOverscan, className, emptyMessage, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../src/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/DataTable.js

@@ -0,0 +1,291 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DataTable (web variant — React DOM).
+ *
+ * Full-featured data table powered by TanStack Table v8 and rendered
+ * with the design system's Table primitives. Supports sorting,
+ * filtering, pagination, row selection, column visibility,
+ * expandable rows, column resizing, column/row pinning, grouping,
+ * and faceted filtering — all toggled via boolean props.
+ *
+ * Wiki: docs/components/DataTable.md
+ */
+import { Fragment, useState, useMemo, useCallback, useEffect, useRef, } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel, getFacetedRowModel, getFacetedMinMaxValues, getFacetedUniqueValues, flexRender, createColumnHelper, } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, } from './Table.js';
+import { Input } from './Input.js';
+import { Button } from './Button.js';
+import { Checkbox } from './Checkbox.js';
+import { Select, SelectTrigger, SelectContent, SelectItem } from './Select.js';
+import { cn } from './internal/cn.js';
+/* ── Re-export for consumer convenience ───────────────────────────── */
+export { createColumnHelper };
+export function DataTableColumnHeader({ column, title, className, }) {
+    if (!column.getCanSort()) {
+        return _jsx("span", { className: className, children: title });
+    }
+    const sorted = column.getIsSorted();
+    return (_jsxs("button", { type: "button", className: cn('inline-flex items-center gap-1 -ml-1 px-1 py-0.5 rounded-md', 'hover:bg-muted transition-colors duration-150', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className), onClick: column.getToggleSortingHandler(), "aria-label": `Sort by ${title}`, children: [title, _jsxs("span", { className: "inline-flex flex-col", "aria-hidden": true, children: [_jsx("svg", { viewBox: "0 0 8 4", className: cn('h-1.5 w-2 transition-transform duration-200', sorted === 'asc' ? 'text-foreground' : 'text-muted-foreground/40'), fill: "currentColor", children: _jsx("path", { d: "M4 0L8 4H0z" }) }), _jsx("svg", { viewBox: "0 0 8 4", className: cn('h-1.5 w-2 transition-transform duration-200', sorted === 'desc' ? 'text-foreground' : 'text-muted-foreground/40'), fill: "currentColor", children: _jsx("path", { d: "M4 4L0 0h8z" }) })] })] }));
+}
+/* ── Column visibility dropdown ───────────────────────────────────── */
+function ColumnVisibilityDropdown({ table, }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleClick(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(!open), "aria-expanded": open, "aria-haspopup": "true", children: [_jsx("svg", { "aria-hidden": true, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" }) }), "Columns"] }), open && (_jsx("div", { className: "absolute right-0 top-full z-50 mt-1 min-w-[10rem] rounded-lg border border-border bg-card p-1 shadow-md", children: table.getAllLeafColumns().map((column) => {
+                    if (column.id === 'select' || column.id === 'expand')
+                        return null;
+                    return (_jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted transition-colors duration-150", children: [_jsx(Checkbox, { size: "sm", checked: column.getIsVisible(), onCheckedChange: (v) => column.toggleVisibility(!!v) }), _jsx("span", { className: "capitalize", children: typeof column.columnDef.header === 'string'
+                                    ? column.columnDef.header
+                                    : column.id })] }, column.id));
+                }) }))] }));
+}
+/* ── Column filter input ──────────────────────────────────────────── */
+function ColumnFilterInput({ column, faceted, }) {
+    const columnFilterValue = column.getFilterValue();
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    /* Close faceted dropdown on outside click */
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleClick(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+    /* Faceted: number column → min/max range */
+    if (faceted) {
+        const facetedMinMax = column.getFacetedMinMaxValues?.();
+        const isNumberColumn = facetedMinMax !== undefined &&
+            facetedMinMax[0] !== undefined &&
+            typeof facetedMinMax[0] === 'number';
+        if (isNumberColumn) {
+            const [min, max] = facetedMinMax;
+            const currentRange = columnFilterValue ?? [
+                undefined,
+                undefined,
+            ];
+            return (_jsxs("div", { className: "grid min-w-[10rem] grid-cols-2 gap-1", children: [_jsx(Input, { type: "number", value: currentRange[0] ?? '', onChange: (e) => {
+                            const val = e.target.value ? Number(e.target.value) : undefined;
+                            column.setFilterValue((old) => [
+                                val,
+                                old?.[1],
+                            ]);
+                        }, placeholder: `Min (${min})`, className: "h-8 min-w-0 bg-background px-2 text-xs shadow-mi-input" }), _jsx(Input, { type: "number", value: currentRange[1] ?? '', onChange: (e) => {
+                            const val = e.target.value ? Number(e.target.value) : undefined;
+                            column.setFilterValue((old) => [
+                                old?.[0],
+                                val,
+                            ]);
+                        }, placeholder: `Max (${max})`, className: "h-8 min-w-0 bg-background px-2 text-xs shadow-mi-input" })] }));
+        }
+        /* Faceted: string column → unique values list */
+        const uniqueValues = column.getFacetedUniqueValues?.();
+        if (uniqueValues && uniqueValues.size > 0) {
+            const sortedValues = Array.from(uniqueValues.keys())
+                .filter((v) => typeof v === 'string')
+                .sort();
+            return (_jsxs("div", { ref: ref, className: "relative", children: [_jsx(Input, { type: "text", value: columnFilterValue ?? '', onChange: (e) => column.setFilterValue(e.target.value || undefined), onFocus: () => setOpen(true), placeholder: "Filter...", className: "h-8 min-w-[8rem] bg-background px-2 text-xs shadow-mi-input" }), open && sortedValues.length > 0 && (_jsx("div", { className: "absolute left-0 top-full z-50 mt-1 max-h-40 min-w-full overflow-y-auto rounded-md border border-border bg-card p-1 shadow-mi-modal", children: sortedValues.map((val) => (_jsxs("button", { type: "button", className: "block w-full rounded px-2 py-1 text-left text-xs hover:bg-muted transition-colors duration-150", onClick: () => {
+                                column.setFilterValue(val);
+                                setOpen(false);
+                            }, children: [val, ' ', _jsxs("span", { className: "text-muted-foreground", children: ["(", uniqueValues.get(val), ")"] })] }, val))) }))] }));
+        }
+    }
+    /* Default: simple text input */
+    return (_jsx(Input, { type: "text", value: columnFilterValue ?? '', onChange: (e) => column.setFilterValue(e.target.value || undefined), placeholder: "Filter...", className: "h-8 min-w-[8rem] bg-background px-2 text-xs shadow-mi-input" }));
+}
+export function DataTable({ columns: userColumns, data, searchable = false, searchPlaceholder = 'Search...', sortable = true, paginated = false, pageSize: initialPageSize = 10, pageSizeOptions = [5, 10, 20, 50], selectable = false, columnVisibility: showColumnVisibility = false, expandable = false, getRowCanExpand, renderSubComponent, onRowSelectionChange, columnFilterable = false, multiSort = false, resizable = false, columnPinnable = false, pinnedColumns, rowPinnable = false, pinnedRows, groupable = false, faceted = false, variant = 'default', headerTone = 'default', headerClassName, wide = false, virtualized = false, virtualHeight = 520, estimateRowHeight = 56, virtualOverscan = 8, className, emptyMessage = 'No results.', }) {
+    /* ── State ──────────────────────────────────────────────────────── */
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [visibility, setVisibility] = useState({});
+    const [rowSelection, setRowSelection] = useState({});
+    const [expanded, setExpanded] = useState({});
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: initialPageSize });
+    const [grouping, setGrouping] = useState([]);
+    const [columnPinning, setColumnPinning] = useState(pinnedColumns ?? {});
+    const [rowPinning, setRowPinning] = useState(pinnedRows ?? {});
+    const tableScrollRef = useRef(null);
+    /* ── Sync controlled pinning props ─────────────────────────────── */
+    useEffect(() => {
+        if (columnPinnable && pinnedColumns !== undefined) {
+            setColumnPinning(pinnedColumns);
+        }
+    }, [columnPinnable, pinnedColumns]);
+    useEffect(() => {
+        if (rowPinnable && pinnedRows !== undefined) {
+            setRowPinning(pinnedRows);
+        }
+    }, [rowPinnable, pinnedRows]);
+    /* ── Notify parent of selection changes ─────────────────────────── */
+    useEffect(() => {
+        onRowSelectionChange?.(rowSelection);
+    }, [rowSelection, onRowSelectionChange]);
+    /* ── Compose columns (selection + expand + user) ────────────────── */
+    const columns = useMemo(() => {
+        const cols = [];
+        if (selectable) {
+            cols.push({
+                id: 'select',
+                header: ({ table }) => (_jsx(Checkbox, { checked: table.getIsAllPageRowsSelected()
+                        ? true
+                        : table.getIsSomePageRowsSelected()
+                            ? 'indeterminate'
+                            : false, onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v), "aria-label": "Select all" })),
+                cell: ({ row }) => (_jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (v) => row.toggleSelected(!!v), "aria-label": "Select row" })),
+                enableSorting: false,
+                enableHiding: false,
+                enableColumnFilter: false,
+                enableGrouping: false,
+            });
+        }
+        if (expandable) {
+            cols.push({
+                id: 'expand',
+                header: () => null,
+                cell: ({ row }) => row.getCanExpand() ? (_jsx("button", { type: "button", onClick: row.getToggleExpandedHandler(), "aria-label": row.getIsExpanded() ? 'Collapse row' : 'Expand row', className: "p-1 rounded-md hover:bg-muted transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 2, className: cn('h-4 w-4 transition-transform duration-200', row.getIsExpanded() && 'rotate-90'), children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 4l4 4-4 4" }) }) })) : null,
+                enableSorting: false,
+                enableHiding: false,
+                enableColumnFilter: false,
+                enableGrouping: false,
+            });
+        }
+        cols.push(...userColumns);
+        return cols;
+    }, [userColumns, selectable, expandable]);
+    /* ── Table instance ─────────────────────────────────────────────── */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            columnFilters,
+            globalFilter,
+            columnVisibility: visibility,
+            rowSelection,
+            expanded,
+            pagination,
+            ...(groupable ? { grouping } : {}),
+            ...(columnPinnable ? { columnPinning } : {}),
+            ...(rowPinnable ? { rowPinning } : {}),
+        },
+        enableSorting: sortable,
+        ...(multiSort ? { enableMultiSort: true } : {}),
+        ...(resizable
+            ? { enableColumnResizing: true, columnResizeMode: 'onChange' }
+            : {}),
+        autoResetPageIndex: false,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnVisibilityChange: setVisibility,
+        onRowSelectionChange: setRowSelection,
+        onExpandedChange: setExpanded,
+        onPaginationChange: setPagination,
+        ...(groupable ? { onGroupingChange: setGrouping } : {}),
+        ...(columnPinnable ? { onColumnPinningChange: setColumnPinning } : {}),
+        ...(rowPinnable ? { onRowPinningChange: setRowPinning } : {}),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getRowCanExpand: getRowCanExpand ?? (() => expandable),
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        ...(groupable ? { getGroupedRowModel: getGroupedRowModel() } : {}),
+        ...(faceted
+            ? {
+                getFacetedRowModel: getFacetedRowModel(),
+                getFacetedMinMaxValues: getFacetedMinMaxValues(),
+                getFacetedUniqueValues: getFacetedUniqueValues(),
+            }
+            : {}),
+    });
+    /* ── Pagination helpers ─────────────────────────────────────────── */
+    const pageIndex = table.getState().pagination.pageIndex;
+    const pageCount = table.getPageCount();
+    const regularRows = table.getRowModel().rows;
+    const rowVirtualizer = useVirtualizer({
+        count: regularRows.length,
+        getScrollElement: () => tableScrollRef.current,
+        estimateSize: () => estimateRowHeight,
+        overscan: virtualOverscan,
+        enabled: virtualized,
+    });
+    const virtualRows = virtualized ? rowVirtualizer.getVirtualItems() : [];
+    const topVirtualPadding = virtualized && virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
+    const bottomVirtualPadding = virtualized && virtualRows.length > 0
+        ? rowVirtualizer.getTotalSize() - (virtualRows.at(-1)?.end ?? 0)
+        : 0;
+    const rowsToRender = virtualized
+        ? virtualRows.map((virtualRow) => regularRows[virtualRow.index]).filter((row) => Boolean(row))
+        : regularRows;
+    /* ── Pinning style helper ──────────────────────────────────────── */
+    const getPinningStyles = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (header) => {
+        if (!columnPinnable)
+            return {};
+        const isPinned = header.column.getIsPinned();
+        if (!isPinned)
+            return {};
+        return {
+            position: 'sticky',
+            left: isPinned === 'left' ? `${header.getStart('left')}px` : undefined,
+            right: isPinned === 'right' ? `${header.getStart('right')}px` : undefined,
+            zIndex: 1,
+            backgroundColor: 'var(--color-card, #fff)',
+        };
+    }, [columnPinnable]);
+    const getCellPinningStyles = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (cell) => {
+        if (!columnPinnable)
+            return {};
+        const isPinned = cell.column.getIsPinned();
+        if (!isPinned)
+            return {};
+        return {
+            position: 'sticky',
+            left: isPinned === 'left' ? `${cell.column.getStart('left')}px` : undefined,
+            right: isPinned === 'right' ? `${cell.column.getStart('right')}px` : undefined,
+            zIndex: 1,
+            backgroundColor: 'var(--color-card, #fff)',
+        };
+    }, [columnPinnable]);
+    /* ── Render ─────────────────────────────────────────────────────── */
+    return (_jsxs("div", { className: cn('w-full space-y-4', className), children: [(searchable || showColumnVisibility) && (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [searchable && (_jsx(Input, { placeholder: searchPlaceholder, value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value), className: "w-full bg-background shadow-mi-input sm:max-w-sm", size: "sm", leadingIcon: _jsxs("svg", { "aria-hidden": true, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" })] }) })), showColumnVisibility && (_jsx("div", { className: "sm:ml-auto", children: _jsx(ColumnVisibilityDropdown, { table: table }) }))] })), _jsx("div", { ref: tableScrollRef, className: cn('overflow-x-auto overflow-y-visible rounded-xl bg-card', virtualized && 'overflow-y-auto', (variant === 'bordered' || variant === 'card') && 'border border-border shadow-mi-card'), style: virtualized ? { maxHeight: virtualHeight } : undefined, children: _jsxs(Table, { variant: variant, headerTone: headerTone, className: cn((wide || columnFilterable || resizable) && 'min-w-[960px]'), ...(resizable ? { style: { width: table.getCenterTotalSize() } } : {}), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(Fragment, { children: [_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsxs(TableHead, { colSpan: header.colSpan, style: {
+                                                width: resizable ? header.getSize() : (header.getSize() !== 150 ? header.getSize() : undefined),
+                                                ...getPinningStyles(header),
+                                            }, className: cn('h-12 whitespace-nowrap px-3 py-2 align-middle', resizable && 'relative', (header.column.id === 'select' || header.column.id === 'expand') && 'w-12 min-w-12', headerClassName), children: [header.isPlaceholder ? null : (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [groupable && header.column.getCanGroup() && (_jsx("button", { type: "button", onClick: header.column.getToggleGroupingHandler(), className: cn('rounded p-0.5 hover:bg-muted transition-colors duration-150', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), "aria-label": header.column.getIsGrouped()
+                                                                ? `Ungroup by ${header.column.id}`
+                                                                : `Group by ${header.column.id}`, title: header.column.getIsGrouped()
+                                                                ? `Ungroup by ${header.column.id}`
+                                                                : `Group by ${header.column.id}`, children: _jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, className: cn('h-3.5 w-3.5', header.column.getIsGrouped()
+                                                                    ? 'text-foreground'
+                                                                    : 'text-muted-foreground/50'), children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 4h12M2 8h8M2 12h4" }) }) })), flexRender(header.column.columnDef.header, header.getContext())] })), resizable && (_jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onDoubleClick: () => header.column.resetSize(), role: "separator", "aria-orientation": "vertical", className: cn('absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none', 'hover:bg-primary/50 transition-colors duration-150', header.column.getIsResizing() && 'bg-primary') }))] }, header.id))) }), columnFilterable && (_jsx(TableRow, { className: "bg-muted/30 hover:bg-muted/30", children: headerGroup.headers.map((header) => (_jsx(TableHead, { colSpan: header.colSpan, style: {
+                                                width: resizable ? header.getSize() : (header.getSize() !== 150 ? header.getSize() : undefined),
+                                                ...getPinningStyles(header),
+                                            }, className: cn('h-12 border-t border-border px-3 py-2 align-middle', (header.column.id === 'select' || header.column.id === 'expand') && 'w-12 min-w-12'), children: !header.isPlaceholder && header.column.getCanFilter() ? (_jsx(ColumnFilterInput, { column: header.column, faceted: faceted })) : null }, `${header.id}-filter`))) }))] }, headerGroup.id))) }), _jsxs(TableBody, { children: [rowPinnable &&
+                                    table.getTopRows().map((row) => (_jsx(Fragment, { children: _jsx(TableRow, { "data-state": row.getIsSelected() ? 'selected' : undefined, className: "bg-muted/30", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { style: getCellPinningStyles(cell), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }) }, row.id))), regularRows.length ? (_jsxs(_Fragment, { children: [topVirtualPadding > 0 ? (_jsx(TableRow, { "aria-hidden": true, children: _jsx(TableCell, { colSpan: columns.length, style: { height: topVirtualPadding, padding: 0 } }) })) : null, rowsToRender.map((row) => (_jsxs(Fragment, { children: [_jsx(TableRow, { "data-state": row.getIsSelected() ? 'selected' : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { style: getCellPinningStyles(cell), children: groupable && cell.getIsGrouped() ? (_jsxs("button", { type: "button", onClick: row.getToggleExpandedHandler(), className: "inline-flex items-center gap-1 font-medium", children: [_jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 2, className: cn('h-3.5 w-3.5 transition-transform duration-200', row.getIsExpanded() && 'rotate-90'), children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 4l4 4-4 4" }) }), flexRender(cell.column.columnDef.cell, cell.getContext()), ' ', _jsxs("span", { className: "text-muted-foreground text-xs", children: ["(", row.subRows.length, ")"] })] })) : groupable && cell.getIsAggregated() ? (flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext())) : groupable && cell.getIsPlaceholder() ? null : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }), row.getIsExpanded() && renderSubComponent && !row.subRows.length && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: row.getVisibleCells().length, className: "p-0", children: renderSubComponent({ row: row }) }) }, `${row.id}-expanded`))] }, row.id))), bottomVirtualPadding > 0 ? (_jsx(TableRow, { "aria-hidden": true, children: _jsx(TableCell, { colSpan: columns.length, style: { height: bottomVirtualPadding, padding: 0 } }) })) : null] })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) })), rowPinnable &&
+                                    table.getBottomRows().map((row) => (_jsx(Fragment, { children: _jsx(TableRow, { "data-state": row.getIsSelected() ? 'selected' : undefined, className: "bg-muted/30", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { style: getCellPinningStyles(cell), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }) }, row.id)))] })] }) }), paginated && (_jsxs("div", { className: "flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: selectable && (_jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " of", ' ', table.getFilteredRowModel().rows.length, " row(s) selected"] })) }), _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground whitespace-nowrap", children: "Rows per page" }), _jsxs(Select, { value: String(table.getState().pagination.pageSize), onValueChange: (v) => table.setPageSize(Number(v)), children: [_jsx(SelectTrigger, { className: "h-7 w-[70px] text-sm" }), _jsx(SelectContent, { children: pageSizeOptions.map((size) => (_jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }), _jsxs("span", { className: "text-muted-foreground whitespace-nowrap", children: ["Page ", pageIndex + 1, " of ", pageCount || 1] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: "Previous" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: "Next" })] })] })] }))] }));
+}
+//# sourceMappingURL=DataTable.js.map