@cytario/design 9.7.0 → 9.8.0

package/dist/index.d.ts

@@ -1,9 +1,11 @@
-import { ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, ToggleButtonProps as ToggleButtonProps$1, TextFieldProps, TextField, ColorField, SelectProps as SelectProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, TableProps, RowProps as RowProps$1, TableBodyProps, TableHeaderProps, CheckboxProps as CheckboxProps$1, SwitchFieldProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, LabelProps as LabelProps$1, SliderProps as SliderProps$1, Selection, PressEvent, PopoverProps as PopoverProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, ToggleButtonGroupProps, Key } from 'react-aria-components';
-export { Key, RouterConfig, RouterProvider, Tab as UnstyledTab, TabList as UnstyledTabList, TabPanel as UnstyledTabPanel, Tabs as UnstyledTabs } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, ToggleButtonProps as ToggleButtonProps$1, TextFieldProps, TextField, ColorField, SelectProps as SelectProps$1, CheckboxProps as CheckboxProps$1, SwitchFieldProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, LabelProps as LabelProps$1, SliderProps as SliderProps$1, Selection, PressEvent, PopoverProps as PopoverProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, ToggleButtonGroupProps, Key } from 'react-aria-components';
+export { Key, ListBox, ListBoxItem, RouterConfig, RouterProvider, Tab as UnstyledTab, TabList as UnstyledTabList, TabPanel as UnstyledTabPanel, Tabs as UnstyledTabs } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ComponentType, HTMLAttributes, ReactNode, Ref, InputHTMLAttributes } from 'react';
 import { LucideIcon, LucideProps } from 'lucide-react';
+import { ColumnDefBase, FilterFn, RowSelectionState, OnChangeFn, SortingState, ColumnFiltersState, VisibilityState, ColumnSizingState } from '@tanstack/react-table';
+import { StoreApi } from 'zustand';
 
 type LogoProps = {
     /** Override the wordmark fill (defaults to theme-driven --logo-fill) */
@@ -252,31 +254,189 @@ interface SelectProps extends Omit<SelectProps$1<SelectItem>, "children"> {
 }
 declare function Select({ label, items, placeholder, description, errorMessage, size, isDisabled, isRequired, className, renderItem, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
-type TableSize = "compact" | "comfortable";
-interface DataTableProps extends Omit<TableProps, "className"> {
-    /** Row density */
-    size?: TableSize;
-    /** Additional classes merged into the base styles via twMerge. */
-    className?: string;
+type ColumnBehavior = Pick<ColumnDefBase<unknown>, "enableResizing">;
+interface ColumnSorting {
+    enableSorting?: boolean;
+    sortingFn?: "alphanumeric" | "datetime" | "basic" | "boolean";
+}
+interface ColumnSizing {
+    size: number;
+    minSize?: number;
+    maxSize?: number;
+}
+interface ColumnDisplay {
+    align?: "left" | "right" | "center";
+    monospace?: boolean;
+    ellipsis?: "left" | "middle" | "right";
+    copyable?: boolean;
+}
+interface ColumnFiltering {
+    enableColumnFilter?: boolean;
+    filterType?: "text" | "select";
+    filterPlaceholder?: string;
+    filterOptions?: {
+        label: string;
+        value: string;
+    }[];
+    filterRender?: (option: {
+        label: string;
+        value: string;
+    }) => ReactNode;
+    filterFn?: FilterFn<unknown>;
+}
+interface ColumnVisibility {
+    defaultVisible?: boolean;
+    anchor?: boolean;
+}
+interface ColumnConfig extends ColumnBehavior, ColumnSorting, ColumnSizing, ColumnDisplay, ColumnFiltering, ColumnVisibility {
+    id: string;
+    header: string;
 }
-declare function Table({ size, className, ...props }: DataTableProps): react_jsx_runtime.JSX.Element;
-declare function TableHeader<T extends object>(props: TableHeaderProps<T>): react_jsx_runtime.JSX.Element;
-interface ColumnProps extends Omit<ColumnProps$1, "className"> {
-    /** Additional classes merged into the base styles via twMerge. */
-    className?: string;
+/**
+ * Maps column IDs to render functions. Each function receives the full typed
+ * row object and returns a ReactNode. Columns without a renderer display
+ * their raw accessor value.
+ */
+type CellRenderers<TData> = Partial<Record<string, (row: TData) => ReactNode>>;
+interface TableProps<TData extends object> {
+    columns: ColumnConfig[];
+    data: TData[];
+    cellRenderers?: CellRenderers<TData>;
+    tableId?: string;
+    ariaLabel?: string;
+    enableRowSelection?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    getRowId?: (row: TData) => string;
+    showFilters?: boolean;
+    /** Sorting used when the viewer has no persisted preference — defaults to
+     *  the anchor column ascending. */
+    defaultSorting?: SortingState;
+}
+
+declare function Table<TData extends object>({ columns, data, cellRenderers, tableId, ariaLabel, enableRowSelection, rowSelection, onRowSelectionChange, getRowId, showFilters, defaultSorting, }: TableProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface UseColumnFiltersOptions {
+    tableId: string;
 }
-declare function Column({ className, ...props }: ColumnProps): react_jsx_runtime.JSX.Element;
-declare function TableBody<T extends object>(props: TableBodyProps<T>): react_jsx_runtime.JSX.Element;
-interface RowProps<T extends object> extends Omit<RowProps$1<T>, "className"> {
-    /** Additional classes merged into the base styles via twMerge. */
-    className?: string;
+/**
+ * Manages column filter state via the per-table Zustand store (persisted to
+ * localStorage). Callers sharing a `tableId` — Table, Grid, Tree — all see
+ * the same filter state without prop drilling. This hook is the state layer
+ * that keeps filter UI unified across view modes.
+ */
+declare function useColumnFilters({ tableId }: UseColumnFiltersOptions): {
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: OnChangeFn<ColumnFiltersState>;
+    resetFilters: () => void;
+};
+
+/**
+ * Manages column visibility state with persistence and anchor enforcement.
+ *
+ * Visibility is derived from (in priority order):
+ * 1. Stored preference (persisted across sessions)
+ * 2. Column's `defaultVisible` config (defaults to true if omitted)
+ * 3. Anchor columns are always forced visible
+ */
+declare function useColumnVisibility(columns: ColumnConfig[], tableId: string): {
+    columnVisibility: VisibilityState;
+    setColumnVisibility: OnChangeFn<VisibilityState>;
+    toggleableColumns: ColumnConfig[];
+    toggleColumn: (columnId: string) => void;
+};
+
+/**
+ * Manages column width state for a table with persistence.
+ *
+ * Column widths are derived from persisted values (if available) or fall back
+ * to the default sizes defined in column config. Width changes are automatically
+ * synced to the table's store for persistence across sessions.
+ *
+ * The index column always has a fixed width of 48px and is not persisted.
+ */
+declare function useColumnWidths(columns: ColumnConfig[], tableId: string): {
+    columnSizing: ColumnSizingState;
+    setColumnSizing: OnChangeFn<ColumnSizingState>;
+    resetWidths: () => void;
+};
+
+/**
+ * Manages sorting state for a table with persistence.
+ *
+ * When no stored sorting exists, falls back to `defaultSorting` — typically
+ * the anchor column ascending, or a newest-first default for views that
+ * list time-ordered entries.
+ */
+declare function useTableSorting(tableId: string, defaultSorting?: SortingState): {
+    sorting: SortingState;
+    setSorting: OnChangeFn<SortingState>;
+};
+
+interface SelectionFooterProps {
+    selectedCount: number;
+    totalCount: number;
+    onReset: () => void;
+    children?: ReactNode;
 }
-declare function Row<T extends object>({ className, ...props }: RowProps<T>): react_jsx_runtime.JSX.Element;
-interface CellProps extends Omit<CellProps$1, "className"> {
-    /** Additional classes merged into the base styles via twMerge. */
-    className?: string;
+declare function SelectionFooter({ selectedCount, totalCount, onReset, children, }: SelectionFooterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * "No results match your filters" empty state with a "Clear all filters"
+ * action. Shared by Table views when column filters exclude every row.
+ */
+declare function NoFilterResults({ tableId }: {
+    tableId: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface TableStore {
+    tableId: string;
+    columnWidths: Record<string, number>;
+    sorting: SortingState;
+    columnVisibility: VisibilityState;
+    columnFilters: ColumnFiltersState;
+    setColumnWidth: (columnId: string, width: number) => void;
+    setSorting: (sorting: SortingState) => void;
+    setColumnVisibility: (visibility: VisibilityState) => void;
+    setColumnFilters: (filters: ColumnFiltersState) => void;
+    reset: () => void;
 }
-declare function Cell({ className, ...props }: CellProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Gets or creates a table store instance for the given tableId.
+ *
+ * Store instances are singletons - the same tableId always returns the same store.
+ * This ensures state persists across component unmounts and remounts.
+ *
+ * @param tableId - Unique identifier for the table
+ * @returns The table store instance for this tableId
+ *
+ * @example
+ * ```tsx
+ * function MyTable() {
+ *   const store = useTableStore("files-table");
+ *   const columnWidths = store.getState().columnWidths;
+ *   // ...
+ * }
+ * ```
+ */
+declare function useTableStore(tableId: string): StoreApi<TableStore>;
+/**
+ * Gets the table store instance for a given tableId without React hooks.
+ * Useful for accessing store outside of React components.
+ *
+ * @param tableId - Unique identifier for the table
+ * @returns The table store instance or undefined if not yet created
+ *
+ * @example
+ * ```tsx
+ * const store = getTableStore("files-table");
+ * if (store) {
+ *   store.getState().reset();
+ * }
+ * ```
+ */
+declare function getTableStore(tableId: string): StoreApi<TableStore> | undefined;
 
 interface DialogProps {
     isOpen: boolean;
@@ -847,4 +1007,4 @@ interface FormWizardNavProps {
 }
 declare function FormWizardNav({ onNext, isSubmitting, submitLabel, }: FormWizardNavProps): react_jsx_runtime.JSX.Element;
 
-export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, Banner, type BannerProps, type BannerVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Cell, Checkbox, type CheckboxProps, Column, type DataTableProps, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Description, DescriptionList, type DescriptionListItemProps, type DescriptionListLayout, type DescriptionListProps, type DescriptionProps, type DescriptionSize, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Fieldset, type FieldsetProps, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, H1, H2, H3, H4, H5, H6, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, IconButtonToggle, type IconButtonToggleProps, type IconComponent, type IconName, type IconProps, type IconValue, Input, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkVariant, Logo, type LogoProps, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, MetricText, type MetricTextProps, PathPill, type PathPillProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Prose, type ProseProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SectionHeader, type SectionHeaderProps, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, TruncatedText, type TruncatedTextProps, type UseContextMenuProps, type UseContextMenuResult, buttonBaseClass, createToastBridge, iconRegistry, pillColorFromName, selectedStyles, useContextMenu, useFormWizard, useToast, variantStyles };
+export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, Banner, type BannerProps, type BannerVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CellRenderers, Checkbox, type CheckboxProps, type ColumnConfig, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Description, DescriptionList, type DescriptionListItemProps, type DescriptionListLayout, type DescriptionListProps, type DescriptionProps, type DescriptionSize, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Fieldset, type FieldsetProps, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, H1, H2, H3, H4, H5, H6, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, IconButtonToggle, type IconButtonToggleProps, type IconComponent, type IconName, type IconProps, type IconValue, Input, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkVariant, Logo, type LogoProps, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, MetricText, type MetricTextProps, NoFilterResults, PathPill, type PathPillProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Prose, type ProseProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, SectionHeader, type SectionHeaderProps, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, SelectionFooter, type SelectionFooterProps, Slider, type SliderProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, TruncatedText, type TruncatedTextProps, type UseContextMenuProps, type UseContextMenuResult, buttonBaseClass, createToastBridge, getTableStore, iconRegistry, pillColorFromName, selectedStyles, useColumnFilters, useColumnVisibility, useColumnWidths, useContextMenu, useFormWizard, useTableSorting, useTableStore, useToast, variantStyles };