npm - erp-pro-ui - Versions diffs - 0.1.1 → 0.1.2 - Mend

erp-pro-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (400) hide show

package/dist/chunks/data-table-DyEQn9Yj.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data-table-DyEQn9Yj.mjs","names":[],"sources":["../../src/components/data-display/data-table/DataTable.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n useReactTable,\n getCoreRowModel,\n getPaginationRowModel,\n getFilteredRowModel,\n flexRender,\n type CellContext,\n type ColumnDef,\n type PaginationState,\n type Table,\n} from \"@tanstack/react-table\";\nimport { Chip } from \"../chip\";\nimport { Button } from \"../../forms/button\";\nimport { Combobox } from \"../../forms/combobox\";\nimport { MultiSelectCombobox } from \"../../forms/multi-select-combobox\";\nimport { Checkbox } from \"../../forms/checkbox\";\nimport { Input } from \"../../forms/input\";\nimport { Select } from \"../../forms/select\";\nimport { Switch } from \"../../forms/switch\";\nimport {\n DatePicker,\n type DatePickerValue,\n type DateRangeValue,\n} from \"../../forms/date-picker\";\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisVerticalIcon,\n FilterIcon,\n FilterProfileIcon,\n FilterXIcon,\n LoaderIcon,\n RefreshIcon,\n SearchIcon,\n SelectionIcon,\n SettingsIcon,\n TrashIcon,\n} from \"../../icons\";\n\n// Filter option type - can be static or async\nexport interface FilterOption {\n id: string;\n label: string;\n type?:\n | \"text\"\n | \"select\"\n | \"combobox\"\n | \"checkbox\"\n | \"switch\"\n | \"date\"\n | \"date-range\"\n | \"number-range\";\n placeholder?: string;\n options?: string[]; // Static options\n // Async options support\n queryKey?: string | string[]; // React Query key for caching\n fetchOptions?: () => Promise<string[]>; // Async function to fetch options\n isLoading?: boolean; // Loading state (managed externally)\n multiple?: boolean; // Enable multi-select\n /* Crystal UI Unification */\n /*\n ### Automated Browser Testing\n The filters were verified using the browser subagent, confirming that each filter type correctly updates the table data in real-time and adheres to our new unified \"Crystal\" aesthetic.\n\n ````carousel\n ![Unified Crystal Filters](file:///Users/dani.dev/.gemini/antigravity/brain/cddc57db-96d9-409e-add9-b0c887fa88f1/data_table_crystal_filters_verification_1771807771898.png)\n \n ![Crystal Combobox Dropdown](file:///Users/dani.dev/.gemini/antigravity/brain/cddc57db-96d9-409e-add9-b0c887fa88f1/crystal_look_verification_final_1771807597075.png)\n \n ![Global Unification Verification Recording](file:///Users/dani.dev/.gemini/antigravity/brain/cddc57db-96d9-409e-add9-b0c887fa88f1/verify_global_crystal_style_1771807684506.webp)\n ````\n\n ### Key Successes:\n - **Unified Aesthetic**: All components now share a consistent `backdrop-blur-xl` and semi-transparent background.\n - **Improved Visual Hierarchy**: The crystal effect makes the components feel integrated with the page while still being clearly interactive.\n - **Robust Logic**: Maintained all advanced filtering logic (date ranges, numeric ranges, partial matches) while upgrading the visual layer.\n */\n}\n\n// Filter value can be single string, array of strings, or range objects\nexport type FilterValue =\n | string\n | string[]\n | boolean\n | DatePickerValue\n | { min?: number; max?: number };\nexport type FilterValues = Record<string, FilterValue>;\n\nexport interface DataTableBulkActionContext<T> {\n selectedRows: T[];\n selectedCount: number;\n clearSelection: () => void;\n disableBulkSelection: () => void;\n}\n\nexport interface DataTableCellRenderContext<T> {\n value: unknown;\n row: T;\n rowIndex: number;\n columnId: string;\n}\n\nexport interface DataTableColumn<T> {\n id: string;\n label: string;\n visible?: boolean;\n filterable?: boolean;\n multiFilter?: boolean;\n priority?: number;\n renderCell?: (context: DataTableCellRenderContext<T>) => React.ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface DataTableProps<T = Record<string, any>> {\n columns: DataTableColumn<T>[];\n data: T[];\n isLoading?: boolean; // Table data loading state\n onColumnToggle?: (columnId: string) => void;\n /** Number of items per page */\n pageSize?: number;\n /** Maximum height for the scrollable table area */\n maxHeight?: string;\n onSearch?: (query: string) => void;\n onExport?: () => void;\n onRowAction?: (action: string, row: T) => void;\n onBulkDelete?: (rows: T[]) => void;\n renderBulkActions?: (\n context: DataTableBulkActionContext<T>,\n ) => React.ReactNode;\n renderBulkActionCard?: (\n context: DataTableBulkActionContext<T>,\n ) => React.ReactNode;\n onFilterChange?: (filters: FilterValues) => void;\n // Filter options - can include async filters\n filterOptions?: FilterOption[];\n // Called when filters are applied (for server-side filtering)\n onFiltersApply?: (filters: FilterValues) => void;\n // Enable server-side filtering mode\n serverSideFiltering?: boolean;\n searchPlaceholder?: string;\n children?: React.ReactNode;\n /** Total row count for server-side pagination */\n totalCount?: number;\n /** Callback when pagination changes (for server-side pagination) */\n onPaginationChange?: (pageIndex: number, pageSize: number) => void;\n}\n\nfunction renderDefaultCellValue(value: unknown): React.ReactNode {\n if (value === undefined || value === null || value === \"\") {\n return \"-\";\n }\n\n if (typeof value === \"boolean\") {\n return value ? \"Yes\" : \"No\";\n }\n\n if (Array.isArray(value)) {\n return value.length > 0 ? value.join(\", \") : \"-\";\n }\n\n return value as React.ReactNode;\n}\n\ninterface FilterDropdownProps {\n isOpen: boolean;\n onClose: () => void;\n children: React.ReactNode;\n}\n\nexport const FilterDropdown: React.FC<FilterDropdownProps> = ({\n isOpen,\n onClose,\n children,\n}) => {\n if (!isOpen) return null;\n\n return (\n <>\n <div\n className=\"fixed inset-0 z-40\"\n onClick={onClose}\n aria-hidden=\"true\"\n />\n <div className=\"absolute top-full right-0 z-50 mt-2 min-w-64 overflow-hidden rounded-[4px] border border-white/45 bg-neutral-50 shadow-[0_18px_40px_rgba(15,23,42,0.18)] ring-1 ring-inset ring-white/35 backdrop-blur-2xl dark:border-white/10 dark:bg-neutral-800/50 dark:shadow-[0_22px_48px_rgba(0,0,0,0.42)] dark:ring-white/6\">\n {children}\n </div>\n </>\n );\n};\n\ninterface FilterButtonProps {\n icon: React.ReactNode;\n label: string;\n onClick: () => void;\n hasActive?: boolean;\n}\n\nexport const FilterButton: React.FC<FilterButtonProps> = ({\n icon,\n label,\n onClick,\n hasActive,\n}) => (\n <Button\n onClick={onClick}\n title={label}\n aria-label={label}\n className={`h-10 min-w-10 px-0 py-0 shadow-none ${\n hasActive\n ? \"border-accent/20 bg-accent-subtle text-accent hover:bg-accent-subtle hover:opacity-100\"\n : \"border-transparent bg-transparent text-neutral-600 hover:bg-neutral-100 hover:text-neutral-700 hover:opacity-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200\"\n }`}\n >\n {icon}\n </Button>\n);\n\ninterface ColumnToggleProps {\n columns: {\n id: string;\n label: string;\n visible?: boolean;\n }[];\n onToggle: (columnId: string) => void;\n onShowAll?: () => void;\n onHideAll?: () => void;\n}\n\nexport const ColumnToggle: React.FC<ColumnToggleProps> = ({\n columns,\n onToggle,\n onShowAll,\n onHideAll,\n}) => (\n <div className=\"p-4 space-y-3\">\n <div className=\"flex items-center justify-between mb-3\">\n <span className=\"text-sm font-semibold text-neutral-900 dark:text-white\">\n COLUMNS\n </span>\n </div>\n\n <div className=\"space-y-2 max-h-64 overflow-y-auto\">\n {columns.map((col) => (\n <div\n key={col.id}\n className=\"rounded-[8px] px-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-700\"\n >\n <Checkbox\n checked={col.visible !== false}\n onChange={() => onToggle(col.id)}\n label={col.label}\n />\n </div>\n ))}\n </div>\n\n {(onShowAll || onHideAll) && (\n <div className=\"flex gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-700\">\n {onShowAll && (\n <Button\n onClick={onShowAll}\n size=\"small\"\n className=\"flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-accent shadow-none hover:bg-transparent hover:text-accent-hover hover:opacity-100\"\n >\n SHOW ALL\n </Button>\n )}\n {onHideAll && (\n <Button\n onClick={onHideAll}\n size=\"small\"\n className=\"flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-neutral-500 shadow-none hover:bg-transparent hover:text-neutral-600 hover:opacity-100 dark:text-neutral-300 dark:hover:text-white\"\n >\n HIDE ALL\n </Button>\n )}\n </div>\n )}\n </div>\n);\n\ninterface FilterProfileProps {\n isOpen: boolean;\n onClose: () => void;\n onSaveProfile: (name: string) => void;\n}\n\nexport const FilterProfile: React.FC<FilterProfileProps> = ({\n isOpen,\n onClose,\n onSaveProfile,\n}) => {\n const [profileName, setProfileName] = React.useState(\"\");\n\n const handleSave = () => {\n if (profileName.trim()) {\n onSaveProfile(profileName);\n setProfileName(\"\");\n onClose();\n }\n };\n\n if (!isOpen) return null;\n\n return (\n <div\n className=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50\"\n onClick={onClose}\n >\n <div\n className=\"bg-white dark:bg-neutral-800 rounded-xl p-6 max-w-md w-full mx-4\"\n onClick={(e) => e.stopPropagation()}\n >\n <h2 className=\"text-2xl font-bold text-neutral-900 dark:text-white mb-4\">\n Add new profile\n </h2>\n\n <label className=\"mb-2 block text-sm font-medium text-accent\">\n Enter filter profile name:\n </label>\n <Input\n type=\"text\"\n value={profileName}\n onChange={(e) => setProfileName(e.target.value)}\n placeholder=\"Enter value\"\n className=\"\"\n onKeyDown={(e) => e.key === \"Enter\" && handleSave()}\n />\n\n <div className=\"flex justify-end gap-3 mt-6\">\n <Button onClick={onClose} className=\"min-w-28\" size=\"medium\">\n Cancel\n </Button>\n <Button\n onClick={handleSave}\n disabled={!profileName.trim()}\n className=\"min-w-28\"\n size=\"medium\"\n primary\n >\n Save\n </Button>\n </div>\n </div>\n </div>\n );\n};\n\ntype AsyncFilterOptionsState = Record<\n string,\n { options: string[]; isLoading: boolean }\n>;\n\ntype NumberRangeFilterValue = { min?: number; max?: number };\n\nconst ICON_BUTTON_CLASS_NAME =\n \"inline-flex items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-700\";\nconst DISABLED_ICON_BUTTON_CLASS_NAME = `${ICON_BUTTON_CLASS_NAME} disabled:opacity-40 disabled:cursor-not-allowed`;\nconst TABLE_CONTROL_ICON_CLASS_NAME = \"h-[18px] w-[18px] shrink-0\";\nconst TABLE_COMPLEX_ICON_CLASS_NAME = \"h-5 w-5 shrink-0\";\n\nconst isFilterValueEmpty = (value?: FilterValue | null): boolean => {\n if (value === undefined || value === null) {\n return true;\n }\n\n if (typeof value === \"string\") {\n return value === \"\";\n }\n\n if (Array.isArray(value)) {\n return value.length === 0;\n }\n\n if (value instanceof Date || typeof value === \"boolean\") {\n return false;\n }\n\n if (\"start\" in value || \"end\" in value) {\n const rangeValue = value as DateRangeValue;\n return !rangeValue.start && !rangeValue.end;\n }\n\n return value.min === undefined && value.max === undefined;\n};\n\nconst isFilterActive = (value?: FilterValue): boolean =>\n !isFilterValueEmpty(value);\n\nconst toSelectOptions = (options?: string[]) =>\n (options || []).map((option) => ({\n value: option,\n label: option,\n }));\n\nconst getStringFilterValue = (value?: FilterValue): string =>\n typeof value === \"string\" ? value : \"\";\n\nconst getMultiStringFilterValue = (value?: FilterValue): string[] => {\n if (Array.isArray(value)) {\n return value;\n }\n\n return typeof value === \"string\" && value ? [value] : [];\n};\n\nconst getNumberRangeFilterValue = (\n value?: FilterValue,\n): NumberRangeFilterValue => {\n if (\n !value ||\n typeof value !== \"object\" ||\n \"start\" in value ||\n \"end\" in value\n ) {\n return {};\n }\n\n return value as NumberRangeFilterValue;\n};\n\nconst getDateFilterValue = (value?: FilterValue): DatePickerValue =>\n value instanceof Date || value === null ? value : null;\n\nconst getDateRangeFilterValue = (value?: FilterValue): DateRangeValue => {\n if (\n value &&\n typeof value === \"object\" &&\n \"start\" in value &&\n \"end\" in value\n ) {\n return value as DateRangeValue;\n }\n\n return { start: null, end: null };\n};\n\nfunction buildGeneratedFilterOptions<T>(\n columns: DataTableProps<T>[\"columns\"],\n data: T[],\n): FilterOption[] {\n return columns\n .filter((column) => column.filterable !== false)\n .map((column) => {\n const uniqueValues = new Set<string>();\n\n data.forEach((row) => {\n const value = (row as Record<string, unknown>)[column.id];\n if (value !== undefined && value !== null && value !== \"\") {\n uniqueValues.add(String(value));\n }\n });\n\n return {\n id: column.id,\n label: column.label,\n options: Array.from(uniqueValues).sort(),\n multiple: column.multiFilter,\n };\n });\n}\n\nfunction resolveFilterOptions<T>(\n columns: DataTableProps<T>[\"columns\"],\n data: T[],\n externalFilterOptions: FilterOption[] | undefined,\n asyncFilterOptions: AsyncFilterOptionsState,\n): FilterOption[] {\n if (!externalFilterOptions?.length) {\n return buildGeneratedFilterOptions(columns, data);\n }\n\n return externalFilterOptions.map((filter) => {\n const asyncState = asyncFilterOptions[filter.id];\n if (!asyncState) {\n return filter;\n }\n\n return {\n ...filter,\n options: asyncState.options,\n isLoading: asyncState.isLoading,\n };\n });\n}\n\nfunction matchesSearchQuery<T>(row: T, searchQuery: string): boolean {\n if (!searchQuery.trim()) {\n return true;\n }\n\n const query = searchQuery.toLowerCase();\n return Object.values(row as Record<string, unknown>).some((value) => {\n if (value === undefined || value === null) {\n return false;\n }\n\n return String(value).toLowerCase().includes(query);\n });\n}\n\nfunction matchesFilterValue(\n rowValue: unknown,\n filterValue: FilterValue,\n filterOption?: FilterOption,\n): boolean {\n if (isFilterValueEmpty(filterValue)) {\n return true;\n }\n\n switch (filterOption?.type) {\n case \"text\":\n return String(rowValue)\n .toLowerCase()\n .includes(String(filterValue).toLowerCase());\n case \"number-range\": {\n const rangeValue = getNumberRangeFilterValue(filterValue);\n const numericValue = Number(rowValue);\n if (rangeValue.min !== undefined && numericValue < rangeValue.min) {\n return false;\n }\n if (rangeValue.max !== undefined && numericValue > rangeValue.max) {\n return false;\n }\n return true;\n }\n case \"date-range\": {\n const rangeValue = getDateRangeFilterValue(filterValue);\n if (!rangeValue.start) {\n return true;\n }\n const timeValue = new Date(rowValue as string | number | Date).getTime();\n if (timeValue < rangeValue.start.getTime()) {\n return false;\n }\n return !rangeValue.end || timeValue <= rangeValue.end.getTime();\n }\n case \"date\": {\n const selectedDate = filterValue as Date;\n const rowDate = new Date(rowValue as string | number | Date);\n return selectedDate.toDateString() === rowDate.toDateString();\n }\n case \"switch\":\n case \"checkbox\":\n return Boolean(rowValue) === Boolean(filterValue);\n default: {\n const rowValueString = String(rowValue).toLowerCase();\n if (Array.isArray(filterValue)) {\n return filterValue.some(\n (value) => String(value).toLowerCase() === rowValueString,\n );\n }\n\n return typeof filterValue !== \"string\"\n ? true\n : rowValueString === filterValue.toLowerCase();\n }\n }\n}\n\nfunction filterClientData<T>(\n data: T[],\n activeFilters: FilterValues,\n searchQuery: string,\n serverSideFiltering: boolean,\n filterOptions: FilterOption[],\n): T[] {\n if (serverSideFiltering) {\n return data;\n }\n\n const filterOptionsMap = new Map(\n filterOptions.map((filterOption) => [filterOption.id, filterOption]),\n );\n\n return data.filter((row) => {\n if (!matchesSearchQuery(row, searchQuery)) {\n return false;\n }\n\n return Object.entries(activeFilters).every(([filterId, filterValue]) => {\n const rowValue = (row as Record<string, unknown>)[filterId];\n return matchesFilterValue(\n rowValue,\n filterValue,\n filterOptionsMap.get(filterId),\n );\n });\n });\n}\n\nfunction useAsyncFilterOptions(\n externalFilterOptions: FilterOption[] | undefined,\n filterSelectorOpen: boolean,\n): AsyncFilterOptionsState {\n const [asyncFilterOptions, setAsyncFilterOptions] =\n React.useState<AsyncFilterOptionsState>({});\n const asyncFilterOptionsRef = React.useRef(asyncFilterOptions);\n\n React.useEffect(() => {\n asyncFilterOptionsRef.current = asyncFilterOptions;\n }, [asyncFilterOptions]);\n\n const fetchAsyncOptions = React.useCallback(async (filter: FilterOption) => {\n if (\n !filter.fetchOptions ||\n asyncFilterOptionsRef.current[filter.id]?.options.length\n ) {\n return;\n }\n\n setAsyncFilterOptions((prev) => ({\n ...prev,\n [filter.id]: { options: [], isLoading: true },\n }));\n\n try {\n const options = await filter.fetchOptions();\n setAsyncFilterOptions((prev) => ({\n ...prev,\n [filter.id]: { options, isLoading: false },\n }));\n } catch {\n setAsyncFilterOptions((prev) => ({\n ...prev,\n [filter.id]: { options: [], isLoading: false },\n }));\n }\n }, []);\n\n React.useEffect(() => {\n if (!filterSelectorOpen || !externalFilterOptions) {\n return;\n }\n\n externalFilterOptions.forEach((filter) => {\n if (filter.fetchOptions) {\n void fetchAsyncOptions(filter);\n }\n });\n }, [externalFilterOptions, fetchAsyncOptions, filterSelectorOpen]);\n\n return asyncFilterOptions;\n}\n\nfunction LoadingFilterField({ label }: { label: string }) {\n return (\n <div className=\"h-10 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 rounded-md px-3\">\n <LoaderIcon\n className=\"w-4 h-4 animate-spin text-neutral-400\"\n aria-hidden=\"true\"\n />\n <span className=\"ml-2 text-sm text-neutral-500\">{label}</span>\n </div>\n );\n}\n\ninterface NumberRangeFilterProps {\n value: NumberRangeFilterValue;\n onChange: (value: NumberRangeFilterValue) => void;\n}\n\nfunction NumberRangeFilter({ value, onChange }: NumberRangeFilterProps) {\n return (\n <div className=\"flex items-center gap-1\">\n <Input\n type=\"number\"\n placeholder=\"Min\"\n value={value.min ?? \"\"}\n onChange={(event) => {\n const min =\n event.target.value === \"\" ? undefined : Number(event.target.value);\n onChange({ ...value, min });\n }}\n className=\"h-9 px-2 text-xs\"\n />\n <span className=\"text-neutral-400\">-</span>\n <Input\n type=\"number\"\n placeholder=\"Max\"\n value={value.max ?? \"\"}\n onChange={(event) => {\n const max =\n event.target.value === \"\" ? undefined : Number(event.target.value);\n onChange({ ...value, max });\n }}\n className=\"h-9 px-2 text-xs\"\n />\n </div>\n );\n}\n\ninterface FilterFieldControlProps {\n filter: FilterOption;\n value?: FilterValue;\n isActive: boolean;\n onChange: (value: FilterValue) => void;\n}\n\nfunction FilterFieldControl({\n filter,\n value,\n isActive,\n onChange,\n}: FilterFieldControlProps) {\n if (filter.isLoading) {\n return <LoadingFilterField label={filter.label} />;\n }\n\n const activeClassName = isActive ? \"border-accent\" : \"\";\n\n switch (filter.type) {\n case \"text\":\n return (\n <Input\n value={getStringFilterValue(value)}\n onChange={(event) => onChange(event.target.value)}\n placeholder={filter.placeholder || filter.label}\n className={activeClassName}\n />\n );\n case \"select\":\n return (\n <Select\n value={getStringFilterValue(value)}\n onChange={(event) => onChange(event.target.value)}\n placeholder={filter.placeholder || filter.label}\n options={toSelectOptions(filter.options)}\n className={activeClassName}\n />\n );\n case \"switch\":\n case \"checkbox\":\n return (\n <Switch\n checked={Boolean(value)}\n onChange={(event) => onChange(event.target.checked)}\n label={filter.label}\n />\n );\n case \"date\":\n return (\n <DatePicker\n mode=\"single\"\n value={getDateFilterValue(value)}\n onChange={(nextValue) => onChange(nextValue)}\n placeholder={filter.placeholder || filter.label}\n />\n );\n case \"date-range\":\n return (\n <DatePicker\n mode=\"range\"\n value={getDateRangeFilterValue(value)}\n onChange={(nextValue) => onChange(nextValue)}\n placeholder={filter.placeholder || filter.label}\n />\n );\n case \"number-range\":\n return (\n <NumberRangeFilter\n value={getNumberRangeFilterValue(value)}\n onChange={onChange}\n />\n );\n default:\n return filter.multiple ? (\n <MultiSelectCombobox\n value={getMultiStringFilterValue(value)}\n onChange={(values) => onChange(values)}\n placeholder={filter.placeholder || filter.label}\n options={toSelectOptions(filter.options)}\n className={isActive ? \"border-accent border-2\" : \"\"}\n />\n ) : (\n <Combobox\n value={getStringFilterValue(value)}\n onChange={(nextValue) => onChange(nextValue)}\n placeholder={filter.placeholder || filter.label}\n options={toSelectOptions(filter.options)}\n className={isActive ? \"border-accent border-2\" : \"\"}\n />\n );\n }\n}\n\ninterface ToolbarIconButtonProps {\n title: string;\n onClick?: () => void;\n disabled?: boolean;\n children: React.ReactNode;\n}\n\nfunction ToolbarIconButton({\n title,\n onClick,\n disabled,\n children,\n}: ToolbarIconButtonProps) {\n return (\n <Button\n onClick={onClick}\n disabled={disabled}\n title={title}\n aria-label={title}\n className={\n disabled\n ? `${DISABLED_ICON_BUTTON_CLASS_NAME} h-10 w-10 shrink-0 border-transparent bg-transparent px-0 py-0 text-base shadow-none hover:bg-transparent hover:opacity-100`\n : `${ICON_BUTTON_CLASS_NAME} h-10 w-10 shrink-0 border-transparent bg-transparent px-0 py-0 text-base shadow-none hover:opacity-100`\n }\n >\n {children}\n </Button>\n );\n}\n\ninterface SearchFieldProps {\n value: string;\n onChange: (value: string) => void;\n placeholder: string;\n}\n\nfunction SearchField({ value, onChange, placeholder }: SearchFieldProps) {\n return (\n <div className=\"relative w-[300px]\">\n <SearchIcon\n className={`pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-neutral-400 ${TABLE_CONTROL_ICON_CLASS_NAME}`}\n aria-hidden=\"true\"\n />\n <Input\n type=\"text\"\n value={value}\n onChange={(event) => onChange(event.target.value)}\n placeholder={placeholder}\n style={{ paddingLeft: \"2.75rem\" }}\n />\n </div>\n );\n}\n\ninterface RowActionsCellProps<T> {\n rowIndex: number;\n row: T;\n isOpen: boolean;\n onToggle: (rowIndex: number) => void;\n onClose: () => void;\n onRowAction?: (action: string, row: T) => void;\n}\n\nfunction RowActionsCell<T>({\n rowIndex,\n row,\n isOpen,\n onToggle,\n onClose,\n onRowAction,\n}: RowActionsCellProps<T>) {\n return (\n <td className=\"px-2 py-3 text-right relative\">\n <Button\n onClick={() => onToggle(rowIndex)}\n aria-label=\"Open row actions\"\n className=\"h-8 w-8 border-none bg-transparent px-0 py-0 text-neutral-500 shadow-none hover:bg-neutral-100 hover:text-neutral-700 hover:opacity-100 dark:hover:bg-neutral-600 dark:hover:text-neutral-200\"\n >\n <EllipsisVerticalIcon\n className={TABLE_CONTROL_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </Button>\n {isOpen ? (\n <>\n <div className=\"fixed inset-0 z-40\" onClick={onClose} />\n <div className=\"absolute right-0 top-full mt-1 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 z-50 min-w-32 py-1\">\n <Button\n onClick={() => {\n onRowAction?.(\"edit\", row);\n onClose();\n }}\n className=\"w-full justify-start rounded-none border-none bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 shadow-none hover:bg-neutral-50 hover:text-neutral-900 hover:opacity-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white\"\n >\n Edit\n </Button>\n <Button\n onClick={() => {\n onRowAction?.(\"delete\", row);\n onClose();\n }}\n className=\"w-full justify-start rounded-none border-none bg-transparent px-4 py-2 text-sm font-normal text-error shadow-none hover:bg-neutral-50 hover:text-error hover:opacity-100 dark:hover:bg-neutral-700\"\n >\n Delete\n </Button>\n </div>\n </>\n ) : null}\n </td>\n );\n}\n\ninterface DataTablePaginationProps<T> {\n table: Table<T>;\n totalCount?: number;\n filteredCount: number;\n}\n\nfunction DataTablePagination<T>({\n table,\n totalCount,\n filteredCount,\n}: DataTablePaginationProps<T>) {\n const { pageIndex, pageSize } = table.getState().pagination;\n const itemCount = totalCount ?? filteredCount;\n const pageStart = itemCount === 0 ? 0 : pageIndex * pageSize + 1;\n const pageEnd = Math.min((pageIndex + 1) * pageSize, itemCount);\n\n return (\n <div className=\"flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n Showing {pageStart} to {pageEnd} of {itemCount} items\n </span>\n </div>\n\n <div className=\"flex flex-wrap items-center justify-end gap-2\">\n <span className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n Rows\n </span>\n <Select\n value={String(pageSize)}\n onChange={(event) => table.setPageSize(Number(event.target.value))}\n aria-label=\"Rows per page\"\n containerClassName=\"w-24 min-w-24 shrink-0\"\n triggerClassName=\"px-3 font-medium text-neutral-900 dark:text-white\"\n options={[10, 20, 30, 50, 100].map((size) => ({\n value: String(size),\n label: String(size),\n }))}\n />\n\n <ToolbarIconButton\n title=\"First page\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronsLeftIcon\n className={TABLE_CONTROL_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n\n <ToolbarIconButton\n title=\"Previous page\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon\n className={TABLE_CONTROL_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n\n <span className=\"inline-flex h-10 shrink-0 items-center rounded-lg px-3 text-sm font-medium text-neutral-700 dark:text-neutral-300\">\n Page {pageIndex + 1} of {table.getPageCount()}\n </span>\n\n <ToolbarIconButton\n title=\"Next page\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon\n className={TABLE_CONTROL_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n\n <ToolbarIconButton\n title=\"Last page\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronsRightIcon\n className={TABLE_CONTROL_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n </div>\n </div>\n );\n}\n\ninterface FilterSelectorMenuProps {\n filterOptions: FilterOption[];\n visibleFilters: string[];\n onToggleFilter: (filterId: string, isVisible: boolean) => void;\n onShowAll: () => void;\n onHideAll: () => void;\n}\n\nfunction FilterSelectorMenu({\n filterOptions,\n visibleFilters,\n onToggleFilter,\n onShowAll,\n onHideAll,\n}: FilterSelectorMenuProps) {\n return (\n <div className=\"p-2 min-w-48 space-y-1\">\n <div className=\"px-2 pb-2 text-xs font-semibold text-neutral-500 dark:text-neutral-300\">\n Show filters\n </div>\n {filterOptions.map((filter) => (\n <div key={filter.id} className=\"min-w-36\">\n <Checkbox\n checked={visibleFilters.includes(filter.id)}\n onChange={(event) =>\n onToggleFilter(filter.id, event.target.checked)\n }\n label={filter.label}\n />\n </div>\n ))}\n <div className=\"flex gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-700\">\n <Button\n onClick={onShowAll}\n size=\"small\"\n className=\"flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-accent shadow-none hover:bg-transparent hover:text-accent-hover hover:opacity-100\"\n >\n SHOW ALL\n </Button>\n <Button\n onClick={onHideAll}\n size=\"small\"\n className=\"flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-neutral-500 shadow-none hover:bg-transparent hover:text-neutral-600 hover:opacity-100 dark:text-neutral-300 dark:hover:text-white\"\n >\n HIDE ALL\n </Button>\n </div>\n </div>\n );\n}\n\ninterface DataTableToolbarProps<T> {\n searchQuery: string;\n onSearchChange: (value: string) => void;\n searchPlaceholder: string;\n bulkDeleteEnabled: boolean;\n bulkSelectionActive: boolean;\n selectedCount: number;\n bulkActionsContent?: React.ReactNode;\n bulkActionCard?: React.ReactNode;\n onToggleBulkSelection: () => void;\n onBulkDeleteSelected: () => void;\n onExport?: () => void;\n columnMenuOpen: boolean;\n onToggleColumnMenu: () => void;\n onCloseColumnMenu: () => void;\n columns: DataTableProps<T>[\"columns\"];\n onColumnToggle?: (columnId: string) => void;\n onShowAllColumns: () => void;\n onHideAllColumns: () => void;\n}\n\nfunction DataTableToolbar<T>({\n searchQuery,\n onSearchChange,\n searchPlaceholder,\n bulkDeleteEnabled,\n bulkSelectionActive,\n selectedCount,\n bulkActionsContent,\n bulkActionCard,\n onToggleBulkSelection,\n onBulkDeleteSelected,\n onExport,\n columnMenuOpen,\n onToggleColumnMenu,\n onCloseColumnMenu,\n columns,\n onColumnToggle,\n onShowAllColumns,\n onHideAllColumns,\n}: DataTableToolbarProps<T>) {\n const hasSelectedRows = selectedCount > 0;\n\n return (\n <div className=\"border-b border-neutral-200 px-4 py-3 dark:border-neutral-700\">\n <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n {bulkDeleteEnabled ? (\n <FilterButton\n icon={\n <SelectionIcon\n className={TABLE_COMPLEX_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n }\n label={\n bulkSelectionActive\n ? \"Disable bulk selection\"\n : \"Enable bulk selection\"\n }\n onClick={onToggleBulkSelection}\n hasActive={bulkSelectionActive}\n />\n ) : null}\n\n <SearchField\n value={searchQuery}\n onChange={onSearchChange}\n placeholder={searchPlaceholder}\n />\n </div>\n\n <div className=\"flex items-center gap-1 self-end lg:self-auto\">\n <ToolbarIconButton onClick={onExport} title=\"Refresh\">\n <RefreshIcon\n className={TABLE_CONTROL_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n\n <div className=\"relative\">\n <ToolbarIconButton\n onClick={onToggleColumnMenu}\n title=\"Column settings\"\n >\n <SettingsIcon\n className={TABLE_COMPLEX_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n\n <FilterDropdown isOpen={columnMenuOpen} onClose={onCloseColumnMenu}>\n <ColumnToggle\n columns={columns}\n onToggle={(columnId) => {\n onColumnToggle?.(columnId);\n }}\n onShowAll={onShowAllColumns}\n onHideAll={onHideAllColumns}\n />\n </FilterDropdown>\n </div>\n </div>\n </div>\n\n {bulkSelectionActive && hasSelectedRows\n ? (bulkActionCard ?? (\n <div className=\"mt-2 flex flex-col gap-2 rounded-[4px] border border-neutral-200 bg-neutral-50 px-3 py-2 shadow-sm dark:border-neutral-700 dark:bg-neutral-800/50 dark:shadow-black/25 lg:flex-row lg:items-center lg:justify-between\">\n <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n <Chip\n variant=\"soft\"\n color=\"primary\"\n size=\"sm\"\n className=\"uppercase tracking-wide\"\n >\n Bulk actions\n </Chip>\n <p className=\"text-sm font-medium text-neutral-900 dark:text-white\">\n {selectedCount} {selectedCount === 1 ? \"row\" : \"rows\"}{\" \"}\n selected\n </p>\n </div>\n\n <div className=\"flex flex-wrap items-center gap-2\">\n {bulkActionsContent}\n {bulkDeleteEnabled ? (\n <Button\n onClick={onBulkDeleteSelected}\n primary\n size=\"small\"\n className=\"border-accent/20 px-3 py-2 text-sm text-on-accent shadow-lg shadow-accent/20 hover:bg-accent-hover hover:opacity-100\"\n >\n <TrashIcon className=\"h-4 w-4\" aria-hidden=\"true\" />\n Delete selected\n </Button>\n ) : null}\n </div>\n </div>\n ))\n : null}\n </div>\n );\n}\n\ninterface TableStateRowProps {\n colSpan: number;\n children: React.ReactNode;\n}\n\nfunction TableStateRow({ colSpan, children }: TableStateRowProps) {\n return (\n <tr>\n <td colSpan={colSpan} className=\"px-4 py-12 text-center text-neutral-500\">\n {children}\n </td>\n </tr>\n );\n}\n\nfunction LoadingTableState({ colSpan }: { colSpan: number }) {\n return (\n <TableStateRow colSpan={colSpan}>\n <div className=\"flex flex-col items-center gap-3\">\n <LoaderIcon\n className=\"w-8 h-8 animate-spin text-accent\"\n aria-hidden=\"true\"\n />\n <span>Loading data...</span>\n </div>\n </TableStateRow>\n );\n}\n\nfunction EmptyTableState({ colSpan }: { colSpan: number }) {\n return (\n <TableStateRow colSpan={colSpan}>\n <div className=\"flex flex-col items-center gap-2\">\n <span className=\"text-4xl\">🔍</span>\n <p className=\"font-medium\">No results found</p>\n <p className=\"text-sm\">Try adjusting the filter</p>\n </div>\n </TableStateRow>\n );\n}\n\ninterface DataTableRowsProps<T> {\n table: Table<T>;\n isLoading: boolean;\n bulkSelectionActive: boolean;\n selectedRowIds: Record<string, boolean>;\n onToggleRowSelection: (rowId: string, checked: boolean) => void;\n rowMenuOpen: number | null;\n onToggleRowMenu: (rowIndex: number) => void;\n onCloseRowMenu: () => void;\n onRowAction?: (action: string, row: T) => void;\n}\n\nfunction DataTableRows<T>({\n table,\n isLoading,\n bulkSelectionActive,\n selectedRowIds,\n onToggleRowSelection,\n rowMenuOpen,\n onToggleRowMenu,\n onCloseRowMenu,\n onRowAction,\n}: DataTableRowsProps<T>) {\n const colSpan =\n table.getVisibleLeafColumns().length + (bulkSelectionActive ? 2 : 1);\n\n if (isLoading) {\n return <LoadingTableState colSpan={colSpan} />;\n }\n\n if (table.getRowModel().rows.length === 0) {\n return <EmptyTableState colSpan={colSpan} />;\n }\n\n return (\n <>\n {table.getRowModel().rows.map((row) => (\n <tr\n key={row.id}\n className=\"border-b border-neutral-100 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-colors\"\n >\n {bulkSelectionActive ? (\n <td className=\"w-12 px-4 py-3 align-middle\">\n <Checkbox\n aria-label={`Select row ${row.id}`}\n checked={Boolean(selectedRowIds[row.id])}\n onChange={(event) =>\n onToggleRowSelection(row.id, event.target.checked)\n }\n />\n </td>\n ) : null}\n {row.getVisibleCells().map((cell) => (\n <td\n key={cell.id}\n className=\"px-4 py-3 text-sm text-neutral-700 dark:text-neutral-300\"\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </td>\n ))}\n <RowActionsCell\n rowIndex={row.index}\n row={row.original}\n isOpen={rowMenuOpen === row.index}\n onToggle={onToggleRowMenu}\n onClose={onCloseRowMenu}\n onRowAction={onRowAction}\n />\n </tr>\n ))}\n </>\n );\n}\n\nconst usesManualPagination = (\n totalCount?: number,\n onPaginationChange?: (pageIndex: number, pageSize: number) => void,\n) => totalCount !== undefined || typeof onPaginationChange === \"function\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default function DataTable<T = Record<string, any>>({\n columns,\n data,\n isLoading = false,\n onColumnToggle,\n pageSize = 10,\n maxHeight = \"500px\",\n onSearch,\n onExport,\n onRowAction,\n onBulkDelete,\n renderBulkActions,\n renderBulkActionCard,\n onFilterChange,\n onFiltersApply,\n serverSideFiltering = false,\n filterOptions: externalFilterOptions,\n searchPlaceholder = \"Search ...\",\n totalCount,\n onPaginationChange,\n}: DataTableProps<T>) {\n const [pagination, setPagination] = React.useState<PaginationState>({\n pageIndex: 0,\n pageSize: pageSize,\n });\n const [columnMenuOpen, setColumnMenuOpen] = React.useState(false);\n const [profileMenuOpen, setProfileMenuOpen] = React.useState(false);\n const [profileOpen, setProfileOpen] = React.useState(false);\n const [filterSelectorOpen, setFilterSelectorOpen] = React.useState(false);\n const [visibleFilters, setVisibleFilters] = React.useState<string[]>([]);\n const [activeFilters, setActiveFilters] = React.useState<FilterValues>({});\n const [bulkSelectionActive, setBulkSelectionActive] = React.useState(false);\n const [selectedRowIds, setSelectedRowIds] = React.useState<\n Record<string, boolean>\n >({});\n const [rowMenuOpen, setRowMenuOpen] = React.useState<number | null>(null);\n const [searchQuery, setSearchQuery] = React.useState(\"\");\n const [columnVisibility, setColumnVisibility] = React.useState<\n Record<string, boolean>\n >(() =>\n Object.fromEntries(\n columns.map((column) => [column.id, column.visible !== false]),\n ),\n );\n\n const columnsVisibilitySignature = React.useMemo(\n () =>\n columns\n .map((column) => `${column.id}:${column.visible !== false}`)\n .join(\"|\"),\n [columns],\n );\n\n React.useEffect(() => {\n setColumnVisibility(\n Object.fromEntries(\n columns.map((column) => [column.id, column.visible !== false]),\n ),\n );\n }, [columns, columnsVisibilitySignature]);\n\n const asyncFilterOptions = useAsyncFilterOptions(\n externalFilterOptions,\n filterSelectorOpen,\n );\n\n // Auto-generate filter options from columns that are filterable\n const filterOptions: FilterOption[] = React.useMemo(() => {\n return resolveFilterOptions(\n columns,\n data,\n externalFilterOptions,\n asyncFilterOptions,\n );\n }, [columns, data, externalFilterOptions, asyncFilterOptions]);\n\n const resolvedColumns = React.useMemo(\n () =>\n columns.map((column) => ({\n ...column,\n visible: columnVisibility[column.id] ?? column.visible !== false,\n })),\n [columnVisibility, columns],\n );\n\n const visibleColumns = React.useMemo(\n () => resolvedColumns.filter((column) => column.visible !== false),\n [resolvedColumns],\n );\n const manualPagination = usesManualPagination(totalCount, onPaginationChange);\n const pageCount =\n totalCount === undefined\n ? undefined\n : Math.ceil(totalCount / pagination.pageSize);\n\n // Filter data based on search query and active filters (client-side only)\n const filteredData = React.useMemo(() => {\n return filterClientData(\n data,\n activeFilters,\n searchQuery,\n serverSideFiltering,\n filterOptions,\n );\n }, [data, activeFilters, searchQuery, serverSideFiltering, filterOptions]);\n\n // TanStack Table columns definition\n const tableColumns = React.useMemo<ColumnDef<T>[]>(\n () =>\n visibleColumns.map((col) => ({\n id: col.id,\n accessorKey: col.id,\n header: col.label,\n cell: (info: CellContext<T, unknown>) => {\n const value = info.getValue();\n\n if (col.renderCell) {\n return col.renderCell({\n value,\n row: info.row.original,\n rowIndex: info.row.index,\n columnId: col.id,\n });\n }\n\n return renderDefaultCellValue(value);\n },\n })),\n [visibleColumns],\n );\n\n const updatePagination = React.useCallback(\n (\n updater:\n | PaginationState\n | ((previous: PaginationState) => PaginationState),\n ) => {\n setPagination((previous) => {\n const nextPagination =\n typeof updater === \"function\" ? updater(previous) : updater;\n\n if (\n previous.pageIndex !== nextPagination.pageIndex ||\n previous.pageSize !== nextPagination.pageSize\n ) {\n onPaginationChange?.(\n nextPagination.pageIndex,\n nextPagination.pageSize,\n );\n }\n\n return nextPagination;\n });\n },\n [onPaginationChange],\n );\n\n const table = useReactTable({\n data: filteredData,\n columns: tableColumns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n state: {\n pagination,\n globalFilter: searchQuery,\n },\n onPaginationChange: updatePagination,\n manualPagination,\n pageCount,\n });\n\n const visibleRows = table.getRowModel().rows;\n const bulkDeleteEnabled = typeof onBulkDelete === \"function\";\n const selectedRows = React.useMemo(\n () =>\n visibleRows\n .filter((row) => selectedRowIds[row.id])\n .map((row) => row.original),\n [selectedRowIds, visibleRows],\n );\n const allVisibleRowsSelected =\n visibleRows.length > 0 &&\n visibleRows.every((row) => selectedRowIds[row.id]);\n\n React.useEffect(() => {\n updatePagination((previous) =>\n previous.pageIndex === 0 ? previous : { ...previous, pageIndex: 0 },\n );\n }, [activeFilters, searchQuery, updatePagination]);\n\n React.useEffect(() => {\n setSelectedRowIds((previous) => {\n const visibleRowIds = new Set(visibleRows.map((row) => row.id));\n const nextSelection = Object.fromEntries(\n Object.entries(previous).filter(\n ([rowId, isSelected]) => isSelected && visibleRowIds.has(rowId),\n ),\n );\n\n const previousKeys = Object.keys(previous).sort().join(\"|\");\n const nextKeys = Object.keys(nextSelection).sort().join(\"|\");\n\n return previousKeys === nextKeys ? previous : nextSelection;\n });\n }, [visibleRows]);\n\n const applyFilters = React.useCallback(\n (nextFilters: FilterValues) => {\n setActiveFilters(nextFilters);\n onFilterChange?.(nextFilters);\n\n if (serverSideFiltering) {\n onFiltersApply?.(nextFilters);\n }\n },\n [onFilterChange, onFiltersApply, serverSideFiltering],\n );\n\n const handleSearchChange = React.useCallback(\n (value: string) => {\n setSearchQuery(value);\n onSearch?.(value);\n },\n [onSearch],\n );\n\n const handleFilterChange = React.useCallback(\n (filterId: string, value: FilterValue) => {\n applyFilters({\n ...activeFilters,\n [filterId]: value,\n });\n },\n [activeFilters, applyFilters],\n );\n\n const handleResetFilters = React.useCallback(() => {\n applyFilters({});\n }, [applyFilters]);\n\n const handleToggleFilterVisibility = React.useCallback(\n (filterId: string, isVisible: boolean) => {\n setVisibleFilters((previous) => {\n if (isVisible) {\n return previous.includes(filterId)\n ? previous\n : [...previous, filterId];\n }\n\n return previous.filter((id) => id !== filterId);\n });\n\n if (!isVisible && filterId in activeFilters) {\n const nextFilters = { ...activeFilters };\n delete nextFilters[filterId];\n applyFilters(nextFilters);\n }\n },\n [activeFilters, applyFilters],\n );\n\n const handleShowAllFilters = React.useCallback(() => {\n setVisibleFilters(filterOptions.map((filter) => filter.id));\n }, [filterOptions]);\n\n const handleHideAllFilters = React.useCallback(() => {\n setVisibleFilters([]);\n handleResetFilters();\n }, [handleResetFilters]);\n\n const handleToggleRowMenu = React.useCallback((rowIndex: number) => {\n setRowMenuOpen((previous) => (previous === rowIndex ? null : rowIndex));\n }, []);\n\n const handleToggleFilterSelector = React.useCallback(() => {\n setFilterSelectorOpen((previous) => !previous);\n }, []);\n\n const handleToggleProfileMenu = React.useCallback(() => {\n setProfileMenuOpen((previous) => !previous);\n }, []);\n\n const handleToggleColumnMenu = React.useCallback(() => {\n setColumnMenuOpen((previous) => !previous);\n }, []);\n\n const handleToggleColumnVisibility = React.useCallback(\n (columnId: string) => {\n setColumnVisibility((previous) => ({\n ...previous,\n [columnId]: !(previous[columnId] ?? true),\n }));\n onColumnToggle?.(columnId);\n },\n [onColumnToggle],\n );\n\n const handleShowAllColumns = React.useCallback(() => {\n setColumnVisibility(\n Object.fromEntries(columns.map((column) => [column.id, true])),\n );\n }, [columns]);\n\n const handleHideAllColumns = React.useCallback(() => {\n setColumnVisibility(\n Object.fromEntries(columns.map((column) => [column.id, false])),\n );\n }, [columns]);\n\n const handleToggleBulkSelection = React.useCallback(() => {\n setBulkSelectionActive((previous) => {\n if (previous) {\n setSelectedRowIds({});\n }\n\n return !previous;\n });\n }, []);\n\n const handleToggleRowSelection = React.useCallback(\n (rowId: string, checked: boolean) => {\n setSelectedRowIds((previous) => {\n if (checked) {\n return {\n ...previous,\n [rowId]: true,\n };\n }\n\n const nextSelection = { ...previous };\n delete nextSelection[rowId];\n return nextSelection;\n });\n },\n [],\n );\n\n const handleToggleAllVisibleRows = React.useCallback(\n (checked: boolean) => {\n setSelectedRowIds((previous) => {\n const nextSelection = { ...previous };\n\n visibleRows.forEach((row) => {\n if (checked) {\n nextSelection[row.id] = true;\n } else {\n delete nextSelection[row.id];\n }\n });\n\n return nextSelection;\n });\n },\n [visibleRows],\n );\n\n const handleBulkDeleteSelected = React.useCallback(() => {\n if (!onBulkDelete || selectedRows.length === 0) {\n return;\n }\n\n onBulkDelete(selectedRows);\n setSelectedRowIds({});\n }, [onBulkDelete, selectedRows]);\n\n const handleClearSelectedRows = React.useCallback(() => {\n setSelectedRowIds({});\n }, []);\n\n const handleDisableBulkSelection = React.useCallback(() => {\n setBulkSelectionActive(false);\n setSelectedRowIds({});\n }, []);\n\n const bulkActionContext = React.useMemo<DataTableBulkActionContext<T>>(\n () => ({\n selectedRows,\n selectedCount: selectedRows.length,\n clearSelection: handleClearSelectedRows,\n disableBulkSelection: handleDisableBulkSelection,\n }),\n [handleClearSelectedRows, handleDisableBulkSelection, selectedRows],\n );\n\n const bulkActionsContent = renderBulkActions?.(bulkActionContext);\n const bulkActionCard = renderBulkActionCard?.(bulkActionContext);\n\n const handleOpenProfile = React.useCallback(() => {\n setProfileOpen(true);\n setProfileMenuOpen(false);\n }, []);\n\n const hasActiveFilters = Object.values(activeFilters).some(isFilterActive);\n\n const handleSaveProfile = (profileName: string) => {\n void {\n name: profileName,\n filters: activeFilters,\n timestamp: new Date().toISOString(),\n };\n };\n\n return (\n <div className=\"space-y-0\">\n {/* Row 1: Filters Row - Separated with border */}\n <div className=\"mb-4 flex items-center justify-between gap-4 rounded-[8px] border border-neutral-200 bg-neutral-50 px-4 py-4 dark:border-neutral-700 dark:bg-neutral-800/50\">\n <div className=\"flex items-center gap-3 flex-wrap\">\n {filterOptions\n .filter((filter) => visibleFilters.includes(filter.id))\n .map((filter, index) => {\n const isActive = isFilterActive(activeFilters[filter.id]);\n\n return (\n <div\n key={filter.id}\n className={`min-w-[200px] ${\n index > 0\n ? \"border-l border-neutral-200 pl-3 dark:border-neutral-600\"\n : \"\"\n }`}\n >\n <FilterFieldControl\n filter={filter}\n value={activeFilters[filter.id]}\n isActive={isActive}\n onChange={(value) => handleFilterChange(filter.id, value)}\n />\n </div>\n );\n })}\n </div>\n\n {/* Right side icons */}\n <div className=\"flex items-center gap-1 ml-auto\">\n <div className=\"relative\">\n <ToolbarIconButton\n onClick={handleToggleFilterSelector}\n title=\"Add filter\"\n >\n <FilterIcon\n className={TABLE_COMPLEX_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n <FilterDropdown\n isOpen={filterSelectorOpen}\n onClose={() => setFilterSelectorOpen(false)}\n >\n <FilterSelectorMenu\n filterOptions={filterOptions}\n visibleFilters={visibleFilters}\n onToggleFilter={handleToggleFilterVisibility}\n onShowAll={handleShowAllFilters}\n onHideAll={handleHideAllFilters}\n />\n </FilterDropdown>\n </div>\n\n <ToolbarIconButton\n onClick={handleResetFilters}\n disabled={!hasActiveFilters}\n title=\"Clear filters\"\n >\n <FilterXIcon\n className={TABLE_COMPLEX_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n\n <div className=\"relative\">\n <ToolbarIconButton\n onClick={handleToggleProfileMenu}\n title=\"Filter profiles\"\n >\n <FilterProfileIcon\n className={TABLE_COMPLEX_ICON_CLASS_NAME}\n aria-hidden=\"true\"\n />\n </ToolbarIconButton>\n <FilterDropdown\n isOpen={profileMenuOpen}\n onClose={() => setProfileMenuOpen(false)}\n >\n <div className=\"p-2 min-w-48\">\n <Button\n onClick={handleOpenProfile}\n className=\"w-full justify-start border-2 border-dashed border-accent/40 bg-transparent px-4 py-3 text-left text-sm font-medium text-accent shadow-none hover:bg-accent-subtle hover:opacity-100\"\n >\n Save new filter profile\n </Button>\n </div>\n </FilterDropdown>\n </div>\n </div>\n </div>\n\n {/* Table */}\n <div className=\"bg-background-secondary rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden\">\n <DataTableToolbar\n searchQuery={searchQuery}\n onSearchChange={handleSearchChange}\n searchPlaceholder={searchPlaceholder}\n bulkDeleteEnabled={bulkDeleteEnabled}\n bulkSelectionActive={bulkSelectionActive}\n selectedCount={selectedRows.length}\n bulkActionsContent={bulkActionsContent}\n bulkActionCard={bulkActionCard}\n onToggleBulkSelection={handleToggleBulkSelection}\n onBulkDeleteSelected={handleBulkDeleteSelected}\n onExport={onExport}\n columnMenuOpen={columnMenuOpen}\n onToggleColumnMenu={handleToggleColumnMenu}\n onCloseColumnMenu={() => setColumnMenuOpen(false)}\n columns={resolvedColumns}\n onColumnToggle={handleToggleColumnVisibility}\n onShowAllColumns={handleShowAllColumns}\n onHideAllColumns={handleHideAllColumns}\n />\n\n {/* Table Container */}\n <div className=\"overflow-auto\" style={{ maxHeight }}>\n <table className=\"w-full min-w-[600px]\">\n <thead className=\"sticky top-0 z-10 bg-background-secondary\">\n {table.getHeaderGroups().map((headerGroup) => (\n <tr\n key={headerGroup.id}\n className=\"border-b border-neutral-200 dark:border-neutral-700\"\n >\n {bulkSelectionActive ? (\n <th className=\"w-12 px-4 py-3 bg-background-secondary\">\n <Checkbox\n aria-label=\"Select all visible rows\"\n checked={allVisibleRowsSelected}\n onChange={(event) =>\n handleToggleAllVisibleRows(event.target.checked)\n }\n />\n </th>\n ) : null}\n {headerGroup.headers.map((header) => (\n <th\n key={header.id}\n className=\"bg-background-secondary px-4 py-3 text-left text-sm font-semibold text-neutral-900 dark:text-white whitespace-nowrap\"\n >\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </th>\n ))}\n <th className=\"w-12 bg-background-secondary\"></th>\n </tr>\n ))}\n </thead>\n <tbody>\n <DataTableRows\n table={table}\n isLoading={isLoading}\n bulkSelectionActive={bulkSelectionActive}\n selectedRowIds={selectedRowIds}\n onToggleRowSelection={handleToggleRowSelection}\n rowMenuOpen={rowMenuOpen}\n onToggleRowMenu={handleToggleRowMenu}\n onCloseRowMenu={() => setRowMenuOpen(null)}\n onRowAction={onRowAction}\n />\n </tbody>\n </table>\n </div>\n\n <DataTablePagination\n table={table}\n totalCount={totalCount}\n filteredCount={filteredData.length}\n />\n </div>\n\n {/* Profile Modal */}\n <FilterProfile\n isOpen={profileOpen}\n onClose={() => setProfileOpen(false)}\n onSaveProfile={(name) => {\n handleSaveProfile(name);\n setProfileOpen(false);\n }}\n />\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/chunks/{date-picker-BWBkr6LG.mjs → date-picker-D8gaaMlJ.mjs} RENAMED Viewed

@@ -1,6 +1,7 @@
 import { t as Calendar } from "./calendar-BarcG6x_.mjs";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
 //#region src/components/forms/date-picker/DatePicker.tsx
 var formatDate = (date) => date?.toLocaleDateString(void 0, {
 	month: "short",
@@ -14,6 +15,7 @@ var emptyRange = {
 };
 var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick a date", helperText, disabled = false, className = "", presets }) => {
 	const [open, setOpen] = useState(false);
+	const [visible, setVisible] = useState(false);
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = useState(value ?? (mode === "range" ? emptyRange : null));
 	const currentValue = isControlled ? value : internalValue;
@@ -37,6 +39,9 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 		onChange?.(next);
 	};
 	const containerRef = useRef(null);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const radius = 100;
 	useEffect(() => {
 		const handleClickOutside = (event) => {
 			if (containerRef.current && !containerRef.current.contains(event.target)) setOpen(false);
@@ -46,6 +51,11 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, [open]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
 	const handlePresetClick = (getValue) => {
 		updateValue(getValue());
 		setOpen(false);
@@ -60,20 +70,33 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: `flex w-full items-center justify-between rounded-md border border-black/5 dark:border-white/10 backdrop-blur-xl bg-white/40 dark:bg-zinc-950/40 px-3 py-2 text-sm shadow-sm ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
-					onClick: () => !disabled && setOpen((prev) => !prev),
-					"aria-haspopup": "dialog",
-					"aria-expanded": open,
-					disabled,
-					children: [/* @__PURE__ */ jsx("span", {
-						className: displayValue ? "text-foreground" : "text-muted-foreground",
-						children: displayValue || placeholder
-					}), /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						children: "📅"
-					})]
+				children: [/* @__PURE__ */ jsx(motion.div, {
+					style: { backgroundImage: disabled ? "none" : useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+					onMouseMove: !disabled ? handleMouseMove : void 0,
+					onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+					onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+					className: disabled ? "group/date-picker rounded-lg border-none bg-muted p-[2px]" : "group/date-picker rounded-lg border-border p-[2px]",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: `shadow-input flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${disabled ? "cursor-not-allowed opacity-50" : "group-hover/date-picker:shadow-none"}`,
+						onClick: () => !disabled && setOpen((prev) => !prev),
+						"aria-haspopup": "dialog",
+						"aria-expanded": open,
+						disabled,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: displayValue ? "text-foreground" : "text-muted-foreground",
+							children: displayValue || placeholder
+						}), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: "📅"
+						})]
+					})
 				}), open && !disabled && /* @__PURE__ */ jsxs("div", {
 					className: "absolute left-0 top-12 z-40 dropdown-panel",
 					children: [/* @__PURE__ */ jsx(Calendar, {
@@ -92,7 +115,7 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 						className: "mt-3 flex flex-wrap gap-2",
 						children: presets.map((preset) => /* @__PURE__ */ jsx("button", {
 							type: "button",
-							className: "rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-ring hover:text-heading",
+							className: "rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent",
 							onClick: () => handlePresetClick(preset.value),
 							children: preset.label
 						}, preset.label))
@@ -109,4 +132,4 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 //#endregion
 export { DatePicker as t };
-//# sourceMappingURL=date-picker-BWBkr6LG.mjs.map
+//# sourceMappingURL=date-picker-D8gaaMlJ.mjs.map

package/dist/chunks/date-picker-D8gaaMlJ.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-picker-D8gaaMlJ.mjs","names":[],"sources":["../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { Calendar } from \"../calendar\";\n\nimport type { DatePickerProps, DatePickerValue, DateRangeValue } from \"./types\";\n\nconst formatDate = (date: Date | null) =>\n date?.toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n }) ?? \"\";\n\nconst isRangeValue = (value: DatePickerValue): value is DateRangeValue =>\n typeof value === \"object\" &&\n value !== null &&\n \"start\" in value &&\n \"end\" in value;\n\nconst emptyRange: DateRangeValue = { start: null, end: null };\n\nexport const DatePicker = ({\n mode = \"single\",\n value,\n onChange,\n label,\n placeholder = \"Pick a date\",\n helperText,\n disabled = false,\n className = \"\",\n presets,\n}: DatePickerProps) => {\n const [open, setOpen] = useState(false);\n const [visible, setVisible] = useState(false);\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useState<DatePickerValue>(\n value ?? (mode === \"range\" ? emptyRange : null),\n );\n\n const currentValue = isControlled ? value : internalValue;\n const singleValue = mode === \"range\" ? null : (currentValue as Date | null);\n const rangeValue =\n mode === \"range\" && isRangeValue(currentValue)\n ? currentValue\n : mode === \"range\"\n ? { ...emptyRange }\n : emptyRange;\n\n const displayValue = useMemo(() => {\n if (mode === \"range\") {\n if (rangeValue.start && rangeValue.end) {\n return `${formatDate(rangeValue.start)} — ${formatDate(rangeValue.end)}`;\n }\n if (rangeValue.start) {\n return `${formatDate(rangeValue.start)} — …`;\n }\n return \"\";\n }\n return formatDate(singleValue);\n }, [mode, rangeValue.end, rangeValue.start, singleValue]);\n\n const updateValue = (next: DatePickerValue) => {\n if (!isControlled) {\n setInternalValue(next);\n }\n onChange?.(next);\n };\n\n const containerRef = useRef<HTMLDivElement>(null);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n if (open) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [open]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handlePresetClick = (getValue: () => DatePickerValue) => {\n const next = getValue();\n updateValue(next);\n setOpen(false);\n };\n\n return (\n <div ref={containerRef} className={`w-full space-y-2 ${className}`.trim()}>\n {label && <p className=\"text-sm font-medium text-heading\">{label}</p>}\n <div className=\"relative\">\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={\n disabled\n ? \"group/date-picker rounded-lg border-none bg-muted p-[2px]\"\n : \"group/date-picker rounded-lg border-border p-[2px]\"\n }\n >\n <button\n type=\"button\"\n className={`shadow-input flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${\n disabled\n ? \"cursor-not-allowed opacity-50\"\n : \"group-hover/date-picker:shadow-none\"\n }`}\n onClick={() => !disabled && setOpen((prev) => !prev)}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n disabled={disabled}\n >\n <span\n className={\n displayValue ? \"text-foreground\" : \"text-muted-foreground\"\n }\n >\n {displayValue || placeholder}\n </span>\n <span aria-hidden=\"true\">📅</span>\n </button>\n </motion.div>\n {open && !disabled && (\n <div className=\"absolute left-0 top-12 z-40 dropdown-panel\">\n <Calendar\n value={mode === \"single\" ? (singleValue ?? null) : undefined}\n selectionMode={mode}\n range={mode === \"range\" ? rangeValue : undefined}\n onSelect={\n mode === \"single\"\n ? (date) => {\n updateValue(date);\n setOpen(false);\n }\n : undefined\n }\n onRangeSelect={\n mode === \"range\"\n ? (nextRange) => {\n updateValue(nextRange);\n if (nextRange.start && nextRange.end) {\n setOpen(false);\n }\n }\n : undefined\n }\n />\n {presets?.length ? (\n <div className=\"mt-3 flex flex-wrap gap-2\">\n {presets.map((preset) => (\n <button\n key={preset.label}\n type=\"button\"\n className=\"rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent\"\n onClick={() => handlePresetClick(preset.value)}\n >\n {preset.label}\n </button>\n ))}\n </div>\n ) : null}\n </div>\n )}\n </div>\n {helperText && (\n <p className=\"text-xs text-muted-foreground\">{helperText}</p>\n )}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/{date-picker-DooielHi.cjs → date-picker-W9om1j7A.cjs} RENAMED Viewed

@@ -2,6 +2,7 @@ require("./chunk-B_GkZjkl.cjs");
 const require_calendar = require("./calendar-xrGmvukr.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
 //#region src/components/forms/date-picker/DatePicker.tsx
 var formatDate = (date) => date?.toLocaleDateString(void 0, {
 	month: "short",
@@ -15,6 +16,7 @@ var emptyRange = {
 };
 var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick a date", helperText, disabled = false, className = "", presets }) => {
 	const [open, setOpen] = (0, react.useState)(false);
+	const [visible, setVisible] = (0, react.useState)(false);
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = (0, react.useState)(value ?? (mode === "range" ? emptyRange : null));
 	const currentValue = isControlled ? value : internalValue;
@@ -38,6 +40,9 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 		onChange?.(next);
 	};
 	const containerRef = (0, react.useRef)(null);
+	const mouseX = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const radius = 100;
 	(0, react.useEffect)(() => {
 		const handleClickOutside = (event) => {
 			if (containerRef.current && !containerRef.current.contains(event.target)) setOpen(false);
@@ -47,6 +52,11 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, [open]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
 	const handlePresetClick = (getValue) => {
 		updateValue(getValue());
 		setOpen(false);
@@ -61,20 +71,33 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: `flex w-full items-center justify-between rounded-md border border-black/5 dark:border-white/10 backdrop-blur-xl bg-white/40 dark:bg-zinc-950/40 px-3 py-2 text-sm shadow-sm ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
-					onClick: () => !disabled && setOpen((prev) => !prev),
-					"aria-haspopup": "dialog",
-					"aria-expanded": open,
-					disabled,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: displayValue ? "text-foreground" : "text-muted-foreground",
-						children: displayValue || placeholder
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"aria-hidden": "true",
-						children: "📅"
-					})]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+					style: { backgroundImage: disabled ? "none" : framer_motion.useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+					onMouseMove: !disabled ? handleMouseMove : void 0,
+					onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+					onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+					className: disabled ? "group/date-picker rounded-lg border-none bg-muted p-[2px]" : "group/date-picker rounded-lg border-border p-[2px]",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: `shadow-input flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${disabled ? "cursor-not-allowed opacity-50" : "group-hover/date-picker:shadow-none"}`,
+						onClick: () => !disabled && setOpen((prev) => !prev),
+						"aria-haspopup": "dialog",
+						"aria-expanded": open,
+						disabled,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: displayValue ? "text-foreground" : "text-muted-foreground",
+							children: displayValue || placeholder
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							children: "📅"
+						})]
+					})
 				}), open && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "absolute left-0 top-12 z-40 dropdown-panel",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
@@ -93,7 +116,7 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 						className: "mt-3 flex flex-wrap gap-2",
 						children: presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
-							className: "rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-ring hover:text-heading",
+							className: "rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent",
 							onClick: () => handlePresetClick(preset.value),
 							children: preset.label
 						}, preset.label))
@@ -115,4 +138,4 @@ Object.defineProperty(exports, "DatePicker", {
 	}
 });
-//# sourceMappingURL=date-picker-DooielHi.cjs.map
+//# sourceMappingURL=date-picker-W9om1j7A.cjs.map

package/dist/chunks/date-picker-W9om1j7A.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-picker-W9om1j7A.cjs","names":[],"sources":["../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { Calendar } from \"../calendar\";\n\nimport type { DatePickerProps, DatePickerValue, DateRangeValue } from \"./types\";\n\nconst formatDate = (date: Date | null) =>\n date?.toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n }) ?? \"\";\n\nconst isRangeValue = (value: DatePickerValue): value is DateRangeValue =>\n typeof value === \"object\" &&\n value !== null &&\n \"start\" in value &&\n \"end\" in value;\n\nconst emptyRange: DateRangeValue = { start: null, end: null };\n\nexport const DatePicker = ({\n mode = \"single\",\n value,\n onChange,\n label,\n placeholder = \"Pick a date\",\n helperText,\n disabled = false,\n className = \"\",\n presets,\n}: DatePickerProps) => {\n const [open, setOpen] = useState(false);\n const [visible, setVisible] = useState(false);\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useState<DatePickerValue>(\n value ?? (mode === \"range\" ? emptyRange : null),\n );\n\n const currentValue = isControlled ? value : internalValue;\n const singleValue = mode === \"range\" ? null : (currentValue as Date | null);\n const rangeValue =\n mode === \"range\" && isRangeValue(currentValue)\n ? currentValue\n : mode === \"range\"\n ? { ...emptyRange }\n : emptyRange;\n\n const displayValue = useMemo(() => {\n if (mode === \"range\") {\n if (rangeValue.start && rangeValue.end) {\n return `${formatDate(rangeValue.start)} — ${formatDate(rangeValue.end)}`;\n }\n if (rangeValue.start) {\n return `${formatDate(rangeValue.start)} — …`;\n }\n return \"\";\n }\n return formatDate(singleValue);\n }, [mode, rangeValue.end, rangeValue.start, singleValue]);\n\n const updateValue = (next: DatePickerValue) => {\n if (!isControlled) {\n setInternalValue(next);\n }\n onChange?.(next);\n };\n\n const containerRef = useRef<HTMLDivElement>(null);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n if (open) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [open]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handlePresetClick = (getValue: () => DatePickerValue) => {\n const next = getValue();\n updateValue(next);\n setOpen(false);\n };\n\n return (\n <div ref={containerRef} className={`w-full space-y-2 ${className}`.trim()}>\n {label && <p className=\"text-sm font-medium text-heading\">{label}</p>}\n <div className=\"relative\">\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={\n disabled\n ? \"group/date-picker rounded-lg border-none bg-muted p-[2px]\"\n : \"group/date-picker rounded-lg border-border p-[2px]\"\n }\n >\n <button\n type=\"button\"\n className={`shadow-input flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${\n disabled\n ? \"cursor-not-allowed opacity-50\"\n : \"group-hover/date-picker:shadow-none\"\n }`}\n onClick={() => !disabled && setOpen((prev) => !prev)}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n disabled={disabled}\n >\n <span\n className={\n displayValue ? \"text-foreground\" : \"text-muted-foreground\"\n }\n >\n {displayValue || placeholder}\n </span>\n <span aria-hidden=\"true\">📅</span>\n </button>\n </motion.div>\n {open && !disabled && (\n <div className=\"absolute left-0 top-12 z-40 dropdown-panel\">\n <Calendar\n value={mode === \"single\" ? (singleValue ?? null) : undefined}\n selectionMode={mode}\n range={mode === \"range\" ? rangeValue : undefined}\n onSelect={\n mode === \"single\"\n ? (date) => {\n updateValue(date);\n setOpen(false);\n }\n : undefined\n }\n onRangeSelect={\n mode === \"range\"\n ? (nextRange) => {\n updateValue(nextRange);\n if (nextRange.start && nextRange.end) {\n setOpen(false);\n }\n }\n : undefined\n }\n />\n {presets?.length ? (\n <div className=\"mt-3 flex flex-wrap gap-2\">\n {presets.map((preset) => (\n <button\n key={preset.label}\n type=\"button\"\n className=\"rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent\"\n onClick={() => handlePresetClick(preset.value)}\n >\n {preset.label}\n </button>\n ))}\n </div>\n ) : null}\n </div>\n )}\n </div>\n {helperText && (\n <p className=\"text-xs text-muted-foreground\">{helperText}</p>\n )}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/{dialog-Cbuf8V0g.cjs → dialog-CYFiWN8M.cjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-DYkpqWYG.cjs");
-const require_overlay = require("./overlay-BfUR77DT.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+const require_overlay = require("./overlay-DWNTyQzK.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -215,29 +215,29 @@ var basePanel = `
 `;
 var variantStyles = {
 	default: {
-		icon: "bg-primary-100 dark:bg-primary-900/30",
-		button: "bg-primary hover:bg-primary-600 text-white",
-		iconColor: "text-primary dark:text-primary-400"
+		icon: "bg-accent-subtle",
+		button: "bg-accent hover:bg-accent-hover text-on-accent",
+		iconColor: "text-accent"
 	},
 	destructive: {
-		icon: "bg-red-100 dark:bg-red-900/30",
-		button: "bg-red-500 hover:bg-red-600 text-white",
-		iconColor: "text-red-500 dark:text-red-400"
+		icon: "bg-danger-subtle",
+		button: "bg-destructive hover:opacity-90 text-white",
+		iconColor: "text-danger"
 	},
 	success: {
-		icon: "bg-green-100 dark:bg-green-900/30",
-		button: "bg-green-500 hover:bg-green-600 text-white",
-		iconColor: "text-green-500 dark:text-green-400"
+		icon: "bg-success-subtle",
+		button: "bg-success hover:opacity-90 text-white",
+		iconColor: "text-success"
 	},
 	warning: {
-		icon: "bg-amber-100 dark:bg-amber-900/30",
-		button: "bg-amber-500 hover:bg-amber-600 text-white",
-		iconColor: "text-amber-500 dark:text-amber-400"
+		icon: "bg-warning-subtle",
+		button: "bg-warning hover:opacity-90 text-neutral-950",
+		iconColor: "text-warning"
 	},
 	info: {
-		icon: "bg-blue-100 dark:bg-blue-900/30",
-		button: "bg-blue-500 hover:bg-blue-600 text-white",
-		iconColor: "text-blue-500 dark:text-blue-400"
+		icon: "bg-info-subtle",
+		button: "bg-info hover:opacity-90 text-white",
+		iconColor: "text-info"
 	}
 };
 var VariantIcon = ({ variant }) => {
@@ -343,7 +343,7 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			exit: currentAnimation.exit,
 			transition: currentTransition,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-tr from-white/10 via-transparent to-white/5 dark:from-white/5 dark:to-transparent pointer-events-none rounded-2xl" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-white/10 via-transparent to-white/5 dark:from-white/5 dark:to-transparent pointer-events-none rounded-2xl" }),
 				showClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-neutral-400 dark:text-neutral-500\n                  hover:text-neutral-600 dark:hover:text-neutral-300\n                  hover:bg-neutral-100/50 dark:hover:bg-white/10",
@@ -357,7 +357,7 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative flex gap-4",
 					children: [preset !== "custom" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`,
+						className: `shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: styles.iconColor,
 							children: icon || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VariantIcon, { variant })
@@ -393,4 +393,4 @@ Object.defineProperty(exports, "Dialog", {
 	}
 });
-//# sourceMappingURL=dialog-Cbuf8V0g.cjs.map
+//# sourceMappingURL=dialog-CYFiWN8M.cjs.map

package/dist/chunks/dialog-CYFiWN8M.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dialog-CYFiWN8M.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport {\n motion,\n AnimatePresence,\n type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n AlertCircleIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoCircleIcon,\n LoaderIcon,\n QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n DialogProps,\n DialogVariant,\n DialogAnimation,\n DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n scale: {\n initial: { opacity: 0, scale: 0.9, y: 20 },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.95, y: 10 },\n },\n slideUp: {\n initial: { opacity: 0, y: 100 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 50 },\n },\n slideDown: {\n initial: { opacity: 0, y: -100 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -50 },\n },\n slideLeft: {\n initial: { opacity: 0, x: 100 },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: 50 },\n },\n slideRight: {\n initial: { opacity: 0, x: -100 },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: -50 },\n },\n elastic: {\n initial: { opacity: 0, scale: 0.5, y: 50 },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.8, y: 20 },\n },\n bounce: {\n initial: { opacity: 0, scale: 0.3, y: -100 },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.5, y: -50 },\n },\n flip: {\n initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n animate: { opacity: 1, rotateX: 0, scale: 1 },\n exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n },\n zoom: {\n initial: { opacity: 0, scale: 0, rotate: -10 },\n animate: { opacity: 1, scale: 1, rotate: 0 },\n exit: { opacity: 0, scale: 0.5, rotate: 5 },\n },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n fade: { duration: 0.2 },\n scale: { type: \"spring\", damping: 25, stiffness: 300 },\n slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n flip: { type: \"spring\", damping: 15, stiffness: 150 },\n zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n relative w-full max-w-lg rounded-2xl overflow-hidden\n border border-white/30 dark:border-white/10\n backdrop-blur-2xl backdrop-saturate-150\n bg-gradient-to-br from-white/80 via-white/70 to-white/60\n dark:from-neutral-900/90 dark:via-neutral-900/80 dark:to-neutral-800/70\n p-6\n shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n dark:shadow-[0_8px_32px_rgba(0,0,0,0.5),0_2px_8px_rgba(0,0,0,0.3)]\n ring-1 ring-inset ring-white/20 dark:ring-white/5\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n DialogVariant,\n { icon: string; button: string; iconColor: string }\n> = {\n default: {\n icon: \"bg-accent-subtle\",\n button: \"bg-accent hover:bg-accent-hover text-on-accent\",\n iconColor: \"text-accent\",\n },\n destructive: {\n icon: \"bg-danger-subtle\",\n button: \"bg-destructive hover:opacity-90 text-white\",\n iconColor: \"text-danger\",\n },\n success: {\n icon: \"bg-success-subtle\",\n button: \"bg-success hover:opacity-90 text-white\",\n iconColor: \"text-success\",\n },\n warning: {\n icon: \"bg-warning-subtle\",\n button: \"bg-warning hover:opacity-90 text-neutral-950\",\n iconColor: \"text-warning\",\n },\n info: {\n icon: \"bg-info-subtle\",\n button: \"bg-info hover:opacity-90 text-white\",\n iconColor: \"text-info\",\n },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n const icons: Record<DialogVariant, ReactElement> = {\n default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n };\n return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nexport const Dialog = ({\n open,\n onOpenChange,\n title,\n description,\n children,\n footer,\n closeOnOverlay = true,\n showClose = true,\n className = \"\",\n widthClassName = \"\",\n variant = \"default\",\n preset = \"custom\",\n confirmLabel = \"OK\",\n cancelLabel = \"Cancel\",\n onConfirm,\n onCancel,\n loading = false,\n icon,\n animation = \"scale\",\n}: DialogProps) => {\n const currentAnimation = animationVariants[animation];\n const currentTransition = animationTransitions[animation];\n const panelRef = useRef<HTMLDivElement | null>(null);\n useOverlayEffects(panelRef, open);\n\n useEffect(() => {\n if (!open || typeof window === \"undefined\") return;\n const handleKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onOpenChange?.(false);\n }\n };\n window.addEventListener(\"keydown\", handleKey);\n return () => window.removeEventListener(\"keydown\", handleKey);\n }, [open, onOpenChange]);\n\n const handleOverlayClick = () => {\n if (closeOnOverlay) {\n onOpenChange?.(false);\n }\n };\n\n const handleCancel = () => {\n onCancel?.();\n onOpenChange?.(false);\n };\n\n const handleConfirm = () => {\n onConfirm?.();\n if (!loading) {\n onOpenChange?.(false);\n }\n };\n\n const styles = variantStyles[variant];\n const showPresetButtons = preset !== \"custom\" && !footer;\n const showCancelButton = preset === \"confirm\";\n\n // Render preset buttons\n const renderFooter = () => {\n if (footer) return footer;\n if (!showPresetButtons) return null;\n\n return (\n <div className=\"flex gap-3 justify-end w-full\">\n {showCancelButton && (\n <button\n type=\"button\"\n onClick={handleCancel}\n disabled={loading}\n className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n py-2.5 px-4 text-sm font-semibold leading-none\n rounded-lg transition-all duration-200\n bg-neutral-200 dark:bg-neutral-700\n border border-neutral-300 dark:border-neutral-600\n text-neutral-800 dark:text-white\n shadow-sm hover:bg-neutral-300 dark:hover:bg-neutral-600\n active:scale-95 hover:opacity-90\n disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {cancelLabel}\n </button>\n )}\n <button\n type=\"button\"\n onClick={handleConfirm}\n disabled={loading}\n className={`inline-flex items-center justify-center gap-2 cursor-pointer\n py-2.5 px-4 text-sm font-semibold leading-none\n rounded-lg transition-all duration-200\n shadow-md hover:shadow-lg\n active:scale-95 hover:opacity-90\n disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n >\n {loading && <Spinner />}\n {confirmLabel}\n </button>\n </div>\n );\n };\n\n return (\n <AnimatePresence>\n {open && (\n <div\n className=\"fixed inset-0 z-50 flex items-center justify-center px-4 overlay-backdrop\"\n role=\"presentation\"\n >\n {/* Backdrop with blur */}\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.2 }}\n className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n onClick={handleOverlayClick}\n />\n\n {/* Crystal panel */}\n <motion.div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={title}\n className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n tabIndex={-1}\n ref={panelRef}\n onClick={(event) => event.stopPropagation()}\n initial={currentAnimation.initial}\n animate={currentAnimation.animate}\n exit={currentAnimation.exit}\n transition={currentTransition}\n >\n {/* Subtle gradient overlay for crystal effect */}\n <div className=\"absolute inset-0 bg-linear-to-tr from-white/10 via-transparent to-white/5 dark:from-white/5 dark:to-transparent pointer-events-none rounded-2xl\" />\n\n {/* Close button */}\n {showClose && (\n <button\n type=\"button\"\n className=\"absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n rounded-full transition-all duration-200\n text-neutral-400 dark:text-neutral-500\n hover:text-neutral-600 dark:hover:text-neutral-300\n hover:bg-neutral-100/50 dark:hover:bg-white/10\"\n aria-label=\"Close dialog\"\n onClick={() => onOpenChange?.(false)}\n >\n <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n </button>\n )}\n\n {/* Content */}\n <div className=\"relative flex gap-4\">\n {/* Icon */}\n {preset !== \"custom\" && (\n <div\n className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n >\n <span className={styles.iconColor}>\n {icon || <VariantIcon variant={variant} />}\n </span>\n </div>\n )}\n\n {/* Text content */}\n <div className=\"flex-1 min-w-0\">\n {title && (\n <h2 className=\"text-lg font-semibold text-neutral-900 dark:text-white pr-8\">\n {title}\n </h2>\n )}\n {description && (\n <p className=\"mt-1 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed\">\n {description}\n </p>\n )}\n </div>\n </div>\n\n {/* Children content */}\n {children && (\n <div className=\"mt-4 space-y-4 relative\">{children}</div>\n )}\n\n {/* Footer */}\n {(footer || showPresetButtons) && (\n <footer className=\"mt-6 flex justify-end gap-3 relative\">\n {renderFooter()}\n </footer>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n );\n};\n"],"mappings":";;;;;;;AAgCA,IAAM,oBAA8D;CAClE,MAAM;EACJ,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,MAAM,EAAE,SAAS,GAAG;EACrB;CACD,OAAO;EACL,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;GAAI;EAC1C,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAM,GAAG;GAAI;EACzC;CACD,SAAS;EACP,SAAS;GAAE,SAAS;GAAG,GAAG;GAAK;EAC/B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI;EAC5B;CACD,WAAW;EACT,SAAS;GAAE,SAAS;GAAG,GAAG;GAAM;EAChC,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAK;EAC7B;CACD,WAAW;EACT,SAAS;GAAE,SAAS;GAAG,GAAG;GAAK;EAC/B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI;EAC5B;CACD,YAAY;EACV,SAAS;GAAE,SAAS;GAAG,GAAG;GAAM;EAChC,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAK;EAC7B;CACD,SAAS;EACP,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;GAAI;EAC1C,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;GAAI;EACxC;CACD,QAAQ;EACN,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;GAAM;EAC5C,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;GAAK;EACzC;CACD,MAAM;EACJ,SAAS;GAAE,SAAS;GAAG,SAAS;GAAK,OAAO;GAAK;EACjD,SAAS;GAAE,SAAS;GAAG,SAAS;GAAG,OAAO;GAAG;EAC7C,MAAM;GAAE,SAAS;GAAG,SAAS;GAAI,OAAO;GAAK;EAC9C;CACD,MAAM;EACJ,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,QAAQ;GAAK;EAC9C,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,QAAQ;GAAG;EAC5C,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK,QAAQ;GAAG;EAC5C;CACF;AAGD,IAAM,uBAAwD;CAC5D,MAAM,EAAE,UAAU,IAAK;CACvB,OAAO;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CACtD,SAAS;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CACxD,WAAW;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CAC1D,WAAW;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CAC1D,YAAY;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CAC3D,SAAS;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CACxD,QAAQ;EAAE,MAAM;EAAU,SAAS;EAAG,WAAW;EAAK,QAAQ;EAAK;CACnE,MAAM;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CACrD,MAAM;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;EAAK;CACtD;AAGD,IAAM,YAAY;;;;;;;;;;;AAalB,IAAM,gBAGF;CACF,SAAS;EACP,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACD,aAAa;EACX,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACD,SAAS;EACP,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACD,SAAS;EACP,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACD,MAAM;EACJ,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF;AAGD,IAAM,eAAe,EAAE,cAAwD;AAQ7E,QAPmD;EACjD,SAAS,iBAAA,GAAA,kBAAA,KAAC,cAAA,oBAAD;GAAoB,WAAU;GAAU,eAAY;GAAS,CAAA;EACtE,aAAa,iBAAA,GAAA,kBAAA,KAAC,cAAA,mBAAD;GAAmB,WAAU;GAAU,eAAY;GAAS,CAAA;EACzE,SAAS,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;GAAiB,WAAU;GAAU,eAAY;GAAS,CAAA;EACnE,SAAS,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;GAAiB,WAAU;GAAU,eAAY;GAAS,CAAA;EACnE,MAAM,iBAAA,GAAA,kBAAA,KAAC,cAAA,gBAAD;GAAgB,WAAU;GAAU,eAAY;GAAS,CAAA;EAChE,CACY;;AAIf,IAAM,gBACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,YAAD;CAAY,WAAU;CAAuB,eAAY;CAAS,CAAA;AAGpE,IAAa,UAAU,EACrB,MACA,cACA,OACA,aACA,UACA,QACA,iBAAiB,MACjB,YAAY,MACZ,YAAY,IACZ,iBAAiB,IACjB,UAAU,WACV,SAAS,UACT,eAAe,MACf,cAAc,UACd,WACA,UACA,UAAU,OACV,MACA,YAAY,cACK;CACjB,MAAM,mBAAmB,kBAAkB;CAC3C,MAAM,oBAAoB,qBAAqB;CAC/C,MAAM,YAAA,GAAA,MAAA,QAAyC,KAAK;AACpD,iBAAA,kBAAkB,UAAU,KAAK;AAEjC,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,QAAQ,OAAO,WAAW,YAAa;EAC5C,MAAM,aAAa,UAAyB;AAC1C,OAAI,MAAM,QAAQ,SAChB,gBAAe,MAAM;;AAGzB,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa,OAAO,oBAAoB,WAAW,UAAU;IAC5D,CAAC,MAAM,aAAa,CAAC;CAExB,MAAM,2BAA2B;AAC/B,MAAI,eACF,gBAAe,MAAM;;CAIzB,MAAM,qBAAqB;AACzB,cAAY;AACZ,iBAAe,MAAM;;CAGvB,MAAM,sBAAsB;AAC1B,eAAa;AACb,MAAI,CAAC,QACH,gBAAe,MAAM;;CAIzB,MAAM,SAAS,cAAc;CAC7B,MAAM,oBAAoB,WAAW,YAAY,CAAC;CAClD,MAAM,mBAAmB,WAAW;CAGpC,MAAM,qBAAqB;AACzB,MAAI,OAAQ,QAAO;AACnB,MAAI,CAAC,kBAAmB,QAAO;AAE/B,SACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACG,oBACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAU;cAUT;IACM,CAAA,EAEX,iBAAA,GAAA,kBAAA,MAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAW;;;;;8DAKyC,OAAO;cAT7D,CAWG,WAAW,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAW,CAAA,EACtB,aACM;MACL;;;AAIV,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD,EAAA,UACG,QACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAU;EACV,MAAK;YAFP,CAKE,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAU;GACV,SAAS;GACT,CAAA,EAGF,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;GACE,MAAK;GACL,cAAW;GACX,cAAY;GACZ,WAAW,GAAG,UAAU,iBAAiB,UAAU,GAAG,iBAAiB,MAAM;GAC7E,UAAU;GACV,KAAK;GACL,UAAU,UAAU,MAAM,iBAAiB;GAC3C,SAAS,iBAAiB;GAC1B,SAAS,iBAAiB;GAC1B,MAAM,iBAAiB;GACvB,YAAY;aAXd;IAcE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mJAAoJ,CAAA;IAGlK,aACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;KACE,MAAK;KACL,WAAU;KAKV,cAAW;KACX,eAAe,eAAe,MAAM;eAEpC,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;MAAW,WAAU;MAAU,eAAY;MAAS,CAAA;KAC7C,CAAA;IAIX,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CAEG,WAAW,YACV,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAW,oEAAoE,OAAO;gBAEtF,iBAAA,GAAA,kBAAA,KAAC,QAAD;OAAM,WAAW,OAAO;iBACrB,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAsB,SAAW,CAAA;OACrC,CAAA;MACH,CAAA,EAIR,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;OAAI,WAAU;iBACX;OACE,CAAA,EAEN,eACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA,CAEF;QACF;;IAGL,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;KAA2B;KAAe,CAAA;KAIzD,UAAU,sBACV,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAAQ,WAAU;eACf,cAAc;KACR,CAAA;IAEA;KACT;KAEQ,CAAA"}