luxtable 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -1,19 +1,790 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ColumnDef } from '@tanstack/react-table';
-export * from '@tanstack/react-table';
+import { ColumnDef, SortingState, RowSelectionState, Column, Table as Table$1, HeaderContext, CellContext } from '@tanstack/react-table';
+export { ColumnDef, RowSelectionState, SortingState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import * as React$1 from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { ClassValue } from 'clsx';
 
-interface LuxTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
+/**
+ * All type definitions for LuxTable
+ */
+interface LuxTableOptions {
+    /** Pagination feature (default: false) */
+    pagination?: boolean;
+    /** Rows per page (default: 10) */
+    pageSize?: number;
+    /** Sorting feature (default: true) */
+    sorting?: boolean;
+    /** Column filtering feature (default: false) */
+    filtering?: boolean;
+    /** Row selection mode - "single": single select, "multiple": multi-select, "none": disabled */
+    selection?: "single" | "multiple" | "none";
+    /** Show selection checkbox (default: true if selection !== "none") */
+    showSelectionCheckbox?: boolean;
+    /** Show toolbar with search and controls (default: false) */
+    showToolbar?: boolean;
+    /** Show global search in toolbar (default: true when toolbar is shown) */
+    showGlobalSearch?: boolean;
+    /** Show column visibility controls in toolbar (default: true when toolbar is shown) */
+    showColumnVisibility?: boolean;
+}
+interface LuxTableProps<TData> {
+    /** Column definitions */
+    columns: ColumnDef<TData, any>[];
+    /** Table data */
     data: TData[];
+    /** Additional CSS classes */
+    className?: string;
+    /** Table options */
+    options?: LuxTableOptions;
+    /** Controlled sorting state */
+    sorting?: SortingState;
+    /** Called when sorting changes */
+    onSortingChange?: (sorting: SortingState) => void;
+    /** Controlled row selection state */
+    rowSelection?: RowSelectionState;
+    /** Called when row selection changes */
+    onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    /** Called when selected rows change (with row data) */
+    onSelectedRowsChange?: (rows: TData[]) => void;
+    /** Unique ID field for each row (default: "id") */
+    getRowId?: (row: TData, index: number) => string;
+}
+/**
+ * Extended type for Column meta
+ * Can be used in the meta field in column definitions
+ */
+interface ColumnMeta {
+    /** Filter type: text or select */
+    filterVariant?: "text" | "select";
+}
+/**
+ * Pagination information
+ */
+interface PaginationInfo {
+    pageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    totalPages: number;
+}
+
+/**
+ * LuxTable - Advanced React table component
+ *
+ * Modern table built on top of TanStack Table, comes with ready-to-use features.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <LuxTable
+ *   columns={columns}
+ *   data={data}
+ *   options={{
+ *     pagination: true,
+ *     pageSize: 20,
+ *     filtering: true,
+ *     sorting: true
+ *   }}
+ * />
+ *
+ * // With row selection
+ * <LuxTable
+ *   columns={columns}
+ *   data={data}
+ *   options={{
+ *     selection: "multiple", // or "single"
+ *   }}
+ *   onSelectedRowsChange={(selectedRows) => {
+ *     console.log("Selected rows:", selectedRows);
+ *   }}
+ * />
+ * ```
+ */
+declare function LuxTable<TData>({ columns, data, className, options, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, onSelectedRowsChange, getRowId, }: LuxTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface ColumnFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+/**
+ * Column filter component
+ * Rendered as text input or select dropdown using shadcn/ui components
+ *
+ * @example
+ * ```tsx
+ * <ColumnFilter column={column} />
+ * ```
+ */
+declare function ColumnFilter<TData, TValue>({ column }: ColumnFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+interface TablePaginationProps<TData> {
+    table: Table$1<TData>;
+}
+/**
+ * Table pagination component
+ * Provides page navigation, record info and page size selection
+ */
+declare function TablePagination<TData>({ table }: TablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface TableToolbarProps<TData> {
+    /** TanStack Table instance */
+    table: Table$1<TData>;
+    /** Whether column filtering is enabled */
+    showFiltering?: boolean;
+    /** Callback to toggle column filtering UI */
+    onFilteringToggle?: (enabled: boolean) => void;
+    /** Current filtering state */
+    filteringEnabled?: boolean;
+    /** Show global search input */
+    showGlobalSearch?: boolean;
+    /** Show column visibility controls */
+    showColumnVisibility?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TableToolbar - A toolbar component for LuxTable
+ *
+ * Provides controls for:
+ * - Global search across all columns
+ * - Column visibility toggle (show/hide columns)
+ * - Column filtering toggle (on/off)
+ */
+declare function TableToolbar<TData>({ table, showFiltering, onFilteringToggle, filteringEnabled, showGlobalSearch, showColumnVisibility, className, }: TableToolbarProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface LuxDataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    title: string;
+}
+declare function LuxDataTableColumnHeader<TData, TValue>({ column, title, className, }: LuxDataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
+
+interface SortIconProps {
+    direction?: "asc" | "desc" | false;
+}
+/**
+ * Sort status icon
+ * - no direction: chevrons up-down icon (sortable indicator)
+ * - asc: up arrow (A-Z)
+ * - desc: down arrow (Z-A)
+ */
+declare function SortIcon({ direction }: SortIconProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Default colors for Status Cell
+ *
+ * 4 values are defined for each status:
+ * - bg: Light theme background color
+ * - text: Light theme text color
+ * - darkBg: Dark theme background color
+ * - darkText: Dark theme text color
+ */
+declare const defaultStatusColors: Record<string, {
+    bg: string;
+    text: string;
+    darkBg: string;
+    darkText: string;
+}>;
+interface StatusCellProps {
+    /** Status value to display (e.g., "Active", "Pending") */
+    value: string;
+    /**
+     * Custom color definitions
+     * Used to override default colors or add new colors
+     *
+     * @example
+     * ```tsx
+     * colors={{
+     *   Custom: { bg: "bg-purple-100", text: "text-purple-800" }
+     * }}
+     * ```
+     */
+    colors?: Record<string, {
+        bg: string;
+        text: string;
+        darkBg?: string;
+        darkText?: string;
+    }>;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Ready-to-use component for status cells
+ *
+ * Supports the following statuses by default:
+ * - **Active** → Green badge
+ * - **Inactive** → Red badge
+ * - **Pending** → Yellow badge
+ * - **Completed** → Blue badge
+ * - **Cancelled** → Gray badge
+ *
+ * Undefined statuses are automatically shown with a gray badge.
+ *
+ * @example
+ * // Basit kullanım
+ * ```tsx
+ * <StatusCell value="Active" />
+ * ```
+ *
+ * @example
+ * // Özel renklerle kullanım
+ * ```tsx
+ * <StatusCell
+ *   value="OnHold"
+ *   colors={{
+ *     OnHold: {
+ *       bg: "bg-orange-100",
+ *       text: "text-orange-800",
+ *       darkBg: "dark:bg-orange-900",
+ *       darkText: "dark:text-orange-300"
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * // TanStack Table column içinde kullanım
+ * ```tsx
+ * columnHelper.accessor("status", {
+ *   header: "Durum",
+ *   cell: (info) => <StatusCell value={info.getValue()} />,
+ * })
+ * ```
+ */
+declare function StatusCell({ value, colors, className }: StatusCellProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressCellProps {
+    /** Progress value (between 0-100) */
+    value: number;
+    /**
+     * Progress bar color
+     * @default "bg-blue-600"
+     */
+    barColor?: string;
+    /**
+     * Background color
+     * @default "bg-gray-200 dark:bg-gray-700"
+     */
+    bgColor?: string;
+    /**
+     * Show percentage label
+     * @default false
+     */
+    showLabel?: boolean;
+    /** Additional CSS classes */
     className?: string;
-    options?: {
-        pagination?: boolean;
-        selection?: "single" | "multiple" | "none";
-    };
 }
-declare function LuxTable<TData, TValue>({ columns, data, className, options }: LuxTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+/**
+ * Ready-to-use component for progress bar cells
+ *
+ * Displays percentage values as a visual progress bar.
+ * Value is automatically clamped between 0-100.
+ *
+ * @example
+ * // Basit kullanım
+ * ```tsx
+ * <ProgressCell value={75} />
+ * ```
+ *
+ * @example
+ * // Etiket ile
+ * ```tsx
+ * <ProgressCell value={42} showLabel />
+ * ```
+ *
+ * @example
+ * // Özel renklerle
+ * ```tsx
+ * <ProgressCell
+ *   value={60}
+ *   barColor="bg-green-500"
+ *   bgColor="bg-green-100"
+ *   showLabel
+ * />
+ * ```
+ *
+ * @example
+ * // TanStack Table column içinde kullanım
+ * ```tsx
+ * columnHelper.accessor("progress", {
+ *   header: "İlerleme",
+ *   cell: (info) => <ProgressCell value={info.getValue()} showLabel />,
+ * })
+ * ```
+ */
+declare function ProgressCell({ value, barColor, bgColor, showLabel, className, }: ProgressCellProps): react_jsx_runtime.JSX.Element;
+
+interface BooleanCellProps {
+    /** Boolean değer */
+    value: boolean;
+    /**
+     * True değeri için metin
+     * @default "Yes"
+     */
+    trueLabel?: string;
+    /**
+     * False değeri için metin
+     * @default "No"
+     */
+    falseLabel?: string;
+    /**
+     * True değeri için renk sınıfları
+     * @default "text-green-600 dark:text-green-400"
+     */
+    trueColor?: string;
+    /**
+     * False değeri için renk sınıfları
+     * @default "text-red-600 dark:text-red-400"
+     */
+    falseColor?: string;
+}
+/**
+ * Boolean değerler için hazır bileşen
+ *
+ * True değerleri yeşil, false değerleri kırmızı renkte gösterir.
+ * Etiketler ve renkler tamamen özelleştirilebilir.
+ *
+ * @example
+ * // Basit kullanım
+ * ```tsx
+ * <BooleanCell value={true} />
+ * // Çıktı: "Yes" (yeşil)
+ * ```
+ *
+ * @example
+ * // Türkçe etiketlerle
+ * ```tsx
+ * <BooleanCell value={false} trueLabel="Evet" falseLabel="Hayır" />
+ * // Çıktı: "Hayır" (kırmızı)
+ * ```
+ *
+ * @example
+ * // İkon kullanımı
+ * ```tsx
+ * <BooleanCell value={true} trueLabel="✓" falseLabel="✗" />
+ * // Çıktı: "✓" (yeşil)
+ * ```
+ *
+ * @example
+ * // Özel renklerle
+ * ```tsx
+ * <BooleanCell
+ *   value={true}
+ *   trueLabel="Onaylandı"
+ *   trueColor="text-blue-600 dark:text-blue-400"
+ * />
+ * ```
+ *
+ * @example
+ * // TanStack Table column içinde kullanım
+ * ```tsx
+ * columnHelper.accessor("isActive", {
+ *   header: "Aktif",
+ *   cell: (info) => (
+ *     <BooleanCell
+ *       value={info.getValue()}
+ *       trueLabel="Aktif"
+ *       falseLabel="Pasif"
+ *     />
+ *   ),
+ * })
+ * ```
+ */
+declare function BooleanCell({ value, trueLabel, falseLabel, trueColor, falseColor, }: BooleanCellProps): react_jsx_runtime.JSX.Element;
+
+interface DateCellProps {
+    /** Date value (ISO string or Date object) */
+    value: string | Date;
+    /**
+     * Date format
+     * - "short": Short format (e.g., 12/28/2024)
+     * - "long": Long format (e.g., December 28, 2024)
+     * - "relative": Relative format (e.g., "Today", "Yesterday", "3 days ago")
+     * @default "short"
+     */
+    format?: "short" | "long" | "relative";
+    /**
+     * Locale (language and region)
+     * @default "en-US"
+     */
+    locale?: string;
+}
+/**
+ * Ready-to-use component for date values
+ *
+ * Supported formats:
+ * - **short**: Standard short date format (e.g., 12/28/2024)
+ * - **long**: Long format with month name (e.g., December 28, 2024)
+ * - **relative**: Relative time (Today, Yesterday, X days ago)
+ *
+ * Invalid dates are automatically displayed as "-".
+ *
+ * @example
+ * // Simple usage (short format)
+ * ```tsx
+ * <DateCell value="2024-12-28" />
+ * // Output: "12/28/2024"
+ * ```
+ *
+ * @example
+ * // Long format
+ * ```tsx
+ * <DateCell value={new Date()} format="long" />
+ * // Output: "December 28, 2024"
+ * ```
+ *
+ * @example
+ * // Relative format
+ * ```tsx
+ * <DateCell value={new Date()} format="relative" />
+ * // Output: "Today"
+ * ```
+ *
+ * @example
+ * // Different locale
+ * ```tsx
+ * <DateCell value="2024-12-28" format="long" locale="fr-FR" />
+ * // Output: "28 décembre 2024"
+ * ```
+ *
+ * @example
+ * // Usage within TanStack Table column
+ * ```tsx
+ * columnHelper.accessor("createdAt", {
+ *   header: "Created At",
+ *   cell: (info) => <DateCell value={info.getValue()} format="long" />,
+ * })
+ * ```
+ */
+declare function DateCell({ value, format, locale }: DateCellProps): react_jsx_runtime.JSX.Element;
+
+interface CurrencyCellProps {
+    /** Sayısal değer */
+    value: number;
+    /**
+     * Para birimi kodu (ISO 4217)
+     * @default "TRY"
+     * @example "USD", "EUR", "GBP", "JPY"
+     */
+    currency?: string;
+    /**
+     * Locale (dil ve bölge formatı)
+     * @default "tr-TR"
+     */
+    locale?: string;
+}
+/**
+ * Para birimi için hazır bileşen
+ *
+ * Intl.NumberFormat kullanarak sayısal değerleri yerel formatta gösterir.
+ * Para birimi sembolü, binlik ayracı ve ondalık formatı otomatik ayarlanır.
+ *
+ * @example
+ * // Türk Lirası (varsayılan)
+ * ```tsx
+ * <CurrencyCell value={1234.56} />
+ * // Çıktı: "₺1.234,56"
+ * ```
+ *
+ * @example
+ * // Amerikan Doları
+ * ```tsx
+ * <CurrencyCell value={1234.56} currency="USD" locale="en-US" />
+ * // Çıktı: "$1,234.56"
+ * ```
+ *
+ * @example
+ * // Euro
+ * ```tsx
+ * <CurrencyCell value={1234.56} currency="EUR" locale="de-DE" />
+ * // Çıktı: "1.234,56 €"
+ * ```
+ *
+ * @example
+ * // TanStack Table column içinde kullanım
+ * ```tsx
+ * columnHelper.accessor("price", {
+ *   header: "Fiyat",
+ *   cell: (info) => <CurrencyCell value={info.getValue()} />,
+ * })
+ * ```
+ *
+ * @example
+ * // Çoklu para birimi desteği
+ * ```tsx
+ * columnHelper.accessor("amount", {
+ *   header: "Tutar",
+ *   cell: (info) => (
+ *     <CurrencyCell
+ *       value={info.getValue()}
+ *       currency={info.row.original.currency}
+ *     />
+ *   ),
+ * })
+ * ```
+ */
+declare function CurrencyCell({ value, currency, locale }: CurrencyCellProps): react_jsx_runtime.JSX.Element;
+
+interface CopyableCellProps {
+    /** Value to display and copy */
+    value: string | number;
+    /**
+     * Duration of feedback shown after copying (ms)
+     * @default 2000
+     */
+    feedbackDuration?: number;
+    /** Callback called after copying */
+    onCopy?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Tooltip text
+     * @default "Click to copy"
+     */
+    tooltip?: string;
+    /**
+     * Always show icon?
+     * If false, only visible on hover
+     * @default false
+     */
+    alwaysShowIcon?: boolean;
+}
+/**
+ * Cell component that copies value to clipboard when clicked
+ *
+ * Ideal for values users frequently need to copy such as
+ * Email addresses, reference codes, IDs.
+ *
+ * Features:
+ * - Single click copy
+ * - Shows ✓ icon when copied
+ * - Option to show icon on hover or always
+ * - Capable of capturing copy event with optional callback
+ *
+ * @example
+ * // Simple usage
+ * ```tsx
+ * <CopyableCell value="user@example.com" />
+ * ```
+ *
+ * @example
+ * // With Callback
+ * ```tsx
+ * <CopyableCell
+ *   value="ABC123"
+ *   onCopy={(val) => console.log('Copied:', val)}
+ *   tooltip="Copy reference code"
+ * />
+ * ```
+ *
+ * @example
+ * // Icon always visible
+ * ```tsx
+ * <CopyableCell
+ *   value="order-12345"
+ *   alwaysShowIcon
+ * />
+ * ```
+ *
+ * @example
+ * // Usage within TanStack Table column
+ * ```tsx
+ * columnHelper.accessor("email", {
+ *   header: "Email",
+ *   cell: (info) => <CopyableCell value={info.getValue()} />,
+ * })
+ * ```
+ */
+declare function CopyableCell({ value, feedbackDuration, onCopy, className, tooltip, alwaysShowIcon, }: CopyableCellProps): react_jsx_runtime.JSX.Element;
+/**
+ * Factory function for CopyableCell
+ *
+ * Designed for easy use with column helper.
+ * Creates CopyableCell by passing the value directly.
+ *
+ * @example
+ * ```tsx
+ * const columnHelper = createColumnHelper<User>();
+ *
+ * const columns = [
+ *   columnHelper.accessor("email", {
+ *     header: "Email",
+ *     cell: (info) => createCopyableCell(info.getValue()),
+ *   }),
+ *   columnHelper.accessor("orderId", {
+ *     header: "Order No",
+ *     cell: (info) => createCopyableCell(info.getValue(), {
+ *       tooltip: "Copy order number"
+ *     }),
+ *   }),
+ * ];
+ * ```
+ */
+declare function createCopyableCell(value: string | number, options?: Omit<CopyableCellProps, "value">): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof CheckboxPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+
+declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { LuxTable, cn };
+interface ColumnOptions<TData, TValue> {
+    id?: string;
+    header?: string | ((context: HeaderContext<TData, TValue>) => React$1.ReactNode);
+    cell?: (info: CellContext<TData, TValue>) => React$1.ReactNode;
+    enableSorting?: boolean;
+    /** Column meta information (e.g. filterVariant) */
+    meta?: {
+        /** Filter type: "text" (default) or "select" (dropdown) */
+        filterVariant?: "text" | "select";
+    };
+}
+type ColumnType = "text" | "status" | "progress" | "boolean" | "date" | "currency" | "custom";
+interface SmartColumnOptions<TData, TValue> extends ColumnOptions<TData, TValue> {
+    /**
+     * Column type - used for automatic rendering
+     * - text: Displays value as plain text (default)
+     * - status: Displays with StatusCell component
+     * - progress: Displays with ProgressCell component
+     * - boolean: Displays with BooleanCell component
+     * - date: Displays with DateCell component
+     * - currency: Displays with CurrencyCell component
+     * - custom: Uses your provided cell function
+     */
+    type?: ColumnType;
+    /** Custom colors for Status type */
+    statusColors?: Record<string, {
+        bg: string;
+        text: string;
+        darkBg?: string;
+        darkText?: string;
+    }>;
+    /** Bar color for Progress type */
+    progressBarColor?: string;
+    /** Whether to show label for Progress type */
+    showProgressLabel?: boolean;
+    /** Labels for Boolean type */
+    booleanLabels?: {
+        true: string;
+        false: string;
+    };
+    /** Format for Date type */
+    dateFormat?: "short" | "long" | "relative";
+    /** Currency code for Currency type */
+    currency?: string;
+    /** Locale */
+    locale?: string;
+}
+declare function createColumnHelper<TData>(): {
+    /**
+     * Simple accessor - if cell is not provided, value is rendered automatically
+     */
+    accessor: <TValue>(accessor: keyof TData & string, column?: ColumnOptions<TData, TValue>) => ColumnDef<TData, TValue>;
+    /**
+     * Display column (for actions etc.)
+     */
+    display: (column: {
+        id: string;
+        header?: string | (() => React$1.ReactNode);
+        cell?: (info: CellContext<TData, unknown>) => React$1.ReactNode;
+        enableSorting?: boolean;
+        enableHiding?: boolean;
+    }) => ColumnDef<TData, unknown>;
+    /**
+     * Action column - specialized display column for row actions
+     * Disables sorting by default
+     */
+    action: (column: {
+        cell: (info: CellContext<TData, unknown>) => React$1.ReactNode;
+        id?: string;
+        header?: string | (() => React$1.ReactNode);
+    }) => ColumnDef<TData, unknown>;
+    /**
+     * Create all columns automatically - Table directly from JSON
+     * Just specifying headers is enough, cell is rendered automatically
+     */
+    auto: (columns: Array<{
+        accessor: keyof TData & string;
+        header: string;
+        cell?: (info: CellContext<TData, unknown>) => React$1.ReactNode;
+    }>) => ColumnDef<TData, unknown>[];
+};
+/**
+ * Creates automatic columns from JSON data
+ * Uses column names as header (camelCase -> Title Case)
+ */
+declare function createColumnsFromData<TData extends Record<string, unknown>>(data: TData[], options?: {
+    exclude?: (keyof TData)[];
+    include?: (keyof TData)[];
+    headers?: Partial<Record<keyof TData, string>>;
+    cells?: Partial<Record<keyof TData, (info: CellContext<TData, unknown>) => React$1.ReactNode>>;
+}): ColumnDef<TData, unknown>[];
+
+export { BooleanCell, type BooleanCellProps, Button, Checkbox, ColumnFilter, type ColumnMeta, type ColumnOptions, type ColumnType, CopyableCell, type CopyableCellProps, CurrencyCell, type CurrencyCellProps, DateCell, type DateCellProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, LuxDataTableColumnHeader, LuxTable, type LuxTableOptions, type LuxTableProps, type PaginationInfo, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressCell, type ProgressCellProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SmartColumnOptions, SortIcon, type SortIconProps, StatusCell, type StatusCellProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, buttonVariants, cn, createColumnHelper, createColumnsFromData, createCopyableCell, defaultStatusColors };