npm - @customafk/lunas-ui - Versions diffs - 0.2.77 → 0.2.79 - Mend

@customafk/lunas-ui 0.2.77 → 0.2.79

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 (157) hide show

package/dist/{filter-DqedvThM.cjs.map → filter-B5EnnL9I.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-DqedvThM.cjs","names":["TagIcon","CalendarIcon","HashIcon","TypeIcon","ToggleLeftIcon","Label","Checkbox","Input","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Button","Popover","PopoverTrigger","PopoverContent","Trash2Icon","useUITableFilterContext","ResizablePanel","Activity","DropdownMenu","DropdownMenuTrigger","ListFilterPlus","DropdownMenuContent","DropdownMenuItem","Separator","ListFilterIcon"],"sources":["../packages/components/features/tables/components/table/filter.tsx"],"sourcesContent":["/*\n @file filter.tsx\n * Collapsible side-panel with column-visibility toggles and a dynamic filter builder.\n \n - \"Columns\" tab: toggle individual column visibility.\n * - \"Filters\" tab: \"Add Filter\" dropdown → active filter chips → per-filter Popover editor.\n /\nimport { Activity, useState } from 'react';\n\nimport { CalendarIcon, HashIcon, ListFilterIcon, ListFilterPlus, TagIcon, ToggleLeftIcon, Trash2Icon, TypeIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { ResizablePanel } from '@/components/ui/resizable';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useUITableFilterContext } from '../../hooks/use-context';\nimport type {\n ActiveFilter,\n BooleanFilterValue,\n DateRangeFilterValue,\n FilterDefinition,\n FilterType,\n FilterValue,\n NumberFilterValue,\n SingleTagFilterValue,\n TagFilterValue,\n TextFilterValue,\n} from '../../types';\n\n// ── icons per filter type ──────────────────────────────────────────────────────\n\nconst TYPE_ICONS: Record<FilterType, React.ReactNode> = {\n tag: <TagIcon size={14} />,\n 'single-tag': <TagIcon size={14} />,\n 'date-range': <CalendarIcon size={14} />,\n number: <HashIcon size={14} />,\n text: <TypeIcon size={14} />,\n boolean: <ToggleLeftIcon size={14} />,\n};\n\n// ── operator options ───────────────────────────────────────────────────────────\n\nconst NUMBER_OPERATORS: { value: NumberFilterValue['operator']; label: string }[] = [\n { value: 'eq', label: 'Bằng (=)' },\n { value: 'ne', label: 'Không bằng (≠)' },\n { value: 'gt', label: 'Lớn hơn (>)' },\n { value: 'gte', label: 'Ít nhất (≥)' },\n { value: 'lt', label: 'Nhỏ hơn (<)' },\n { value: 'lte', label: 'Nhiều nhất (≤)' },\n { value: 'between', label: 'Trong khoảng' },\n];\n\nconst TEXT_OPERATORS: { value: TextFilterValue['operator']; label: string }[] = [\n { value: 'contains', label: 'Chứa' },\n { value: 'equals', label: 'Bằng' },\n { value: 'starts-with', label: 'Bắt đầu bằng' },\n { value: 'ends-with', label: 'Kết thúc bằng' },\n];\n\n// ── summary label ──────────────────────────────────────────────────────────────\n\nfunction formatFilterValue(value: FilterValue, def: FilterDefinition): string {\n switch (value.type) {\n case 'single-tag': {\n if (!value.value) return 'Chưa đặt';\n return def.options?.find(o => o.value === value.value)?.label ?? value.value;\n }\n case 'tag': {\n if (!value.values.length) return 'Chưa đặt';\n return value.values.map(v => def.options?.find(o => o.value === v)?.label ?? v).join(', ');\n }\n case 'date-range': {\n if (!value.from && !value.to) return 'Ngày không xác định';\n if (value.from && value.to) return `${value.from} → ${value.to}`;\n if (value.from) return `từ ${value.from}`;\n return `đến ${value.to}`;\n }\n case 'number': {\n const op = { eq: '=', ne: '≠', gt: '>', gte: '≥', lt: '<', lte: '≤', between: 'trong khoảng' }[value.operator];\n if (value.value === undefined) return op;\n if (value.operator === 'between') return `${op} ${value.value} – ${value.valueTo ?? '?'}`;\n return `${op} ${value.value}`;\n }\n case 'text': {\n const op = {\n contains: 'chứa',\n equals: 'là',\n 'starts-with': 'bắt đầu bằng',\n 'ends-with': 'kết thúc bằng',\n }[value.operator];\n return value.value ? `${op} \"${value.value}\"` : op;\n }\n case 'boolean':\n if (value.value === null) return 'Không xác định';\n return value.value ? 'Có' : 'Không';\n }\n}\n\n// ── filter editors ─────────────────────────────────────────────────────────────\n\nconst TagFilterEditor: React.FC<{\n value: TagFilterValue;\n definition: FilterDefinition;\n onChange: (v: TagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.values.includes(option.value) && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.values.includes(option.value)}\n onCheckedChange={checked => {\n const next = checked ? [...value.values, option.value] : value.values.filter(v => v !== option.value);\n onChange({ type: 'tag', values: next });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst SingleTagFilterEditor: React.FC<{\n value: SingleTagFilterValue;\n definition: FilterDefinition;\n onChange: (v: SingleTagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.value === option.value && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.value === option.value}\n onCheckedChange={checked => {\n onChange({ type: 'single-tag', value: checked ? option.value : null });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst DateRangeFilterEditor: React.FC<{\n value: DateRangeFilterValue;\n onChange: (v: DateRangeFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Từ ngày</span>\n <Input type=\"date\" size=\"md\" value={value.from ?? ''} onValueChange={v => onChange({ ...value, from: v \|\| undefined })} />\n </div>\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Đến ngày</span>\n <Input type=\"date\" size=\"md\" value={value.to ?? ''} onValueChange={v => onChange({ ...value, to: v \|\| undefined })} />\n </div>\n </div>\n);\n\nconst NumberFilterEditor: React.FC<{\n value: NumberFilterValue;\n onChange: (v: NumberFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as NumberFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {NUMBER_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Giá trị\"\n value={value.value ?? ''}\n onValueChange={v => onChange({ ...value, value: v ? Number(v) : undefined })}\n />\n {value.operator === 'between' && (\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Đến giá trị\"\n value={value.valueTo ?? ''}\n onValueChange={v => onChange({ ...value, valueTo: v ? Number(v) : undefined })}\n />\n )}\n </div>\n);\n\nconst TextFilterEditor: React.FC<{\n value: TextFilterValue;\n onChange: (v: TextFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as TextFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {TEXT_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input type=\"text\" size=\"md\" placeholder=\"Nhập văn bản...\" value={value.value} onValueChange={v => onChange({ ...value, value: v })} />\n </div>\n);\n\nconst BOOLEAN_OPTIONS = [\n { label: 'Có', value: true as boolean \| null },\n { label: 'Không', value: false as boolean \| null },\n { label: 'Không xác định', value: null as boolean \| null },\n];\n\nconst BooleanFilterEditor: React.FC<{\n value: BooleanFilterValue;\n onChange: (v: BooleanFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {BOOLEAN_OPTIONS.map(({ label, value: v }) => (\n <Button\n key={label}\n type=\"button\"\n tabIndex={-1}\n variant=\"outline\"\n className={cn(\n 'rounded px-3 py-1.5 text-left text-sm transition-colors',\n value.value === v ? 'bg-primary-muted font-medium' : 'hover:bg-muted-bg-subtle'\n )}\n onClick={() => onChange({ type: 'boolean', value: v })}\n >\n {label}\n </Button>\n ))}\n </div>\n);\n\nfunction FilterEditor({ value, definition, onChange }: { value: FilterValue; definition: FilterDefinition; onChange: (v: FilterValue) => void }) {\n switch (value.type) {\n case 'tag':\n return <TagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'single-tag':\n return <SingleTagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'date-range':\n return <DateRangeFilterEditor value={value} onChange={onChange} />;\n case 'number':\n return <NumberFilterEditor value={value} onChange={onChange} />;\n case 'text':\n return <TextFilterEditor value={value} onChange={onChange} />;\n case 'boolean':\n return <BooleanFilterEditor value={value} onChange={onChange} />;\n }\n}\n\n// ── filter item chip ───────────────────────────────────────────────────────────\n\nconst FilterItem: React.FC<{\n filter: ActiveFilter;\n definition: FilterDefinition;\n onRemove: () => void;\n onUpdate: (value: FilterValue) => void;\n}> = ({ filter, definition, onRemove, onUpdate }) => (\n <div className=\"flex items-center gap-1\">\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className=\"flex-1 bg-white max-w-[calc(100%-32px)] justify-start\"\n innerClassName=\"flex truncate gap-1.5\"\n >\n <span className=\"shrink-0 text-text-positive font-medium\">{definition.label}</span>\n <span className=\"truncate text-xs text-text-positive-weak\">{formatFilterValue(filter.value, definition)}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-64 p-0\" align=\"start\" side=\"bottom\">\n <div className=\"border-b border-border px-3 py-2\">\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-text-positive-muted\">{TYPE_ICONS[definition.type]}</span>\n <p className=\"font-medium\">{definition.label}</p>\n </div>\n </div>\n <FilterEditor value={filter.value} definition={definition} onChange={onUpdate} />\n </PopoverContent>\n </Popover>\n <Button type=\"button\" size=\"icon\" variant=\"soft\" color=\"danger\" className=\"shrink\" onClick={onRemove}>\n <Trash2Icon size={13} />\n </Button>\n </div>\n);\n\n// ── column visibility row ──────────────────────────────────────────────────────\n\n// const ColumnVisibility: React.FC<{\n// checked: boolean;\n// title: string;\n// onCheckedChange?: (checked: boolean) => void;\n// }> = ({ checked, title, onCheckedChange }) => (\n// <Label>\n// <Checkbox checked={checked} onCheckedChange={onCheckedChange} />\n// <p className=\"text-sm\">{title}</p>\n// </Label>\n// );\n\n// ── main component ─────────────────────────────────────────────────────────────\n\n/\n Collapsible side-panel that lets users toggle column visibility and build\n * row filters without leaving the table view.\n \n The panel collapses to a narrow icon strip when no tab is active and expands\n * to at least 64 units when the \"Columns\" or \"Filters\" tab is selected.\n \n Wire filter capability by passing `filterDefinitions` and `onFilterChange` to\n * the parent `UITableProvider`.\n \n @example\n * ```tsx\n * <UITableProvider\n * filterDefinitions={[\n * { id: 'status', label: 'Status', type: 'tag', options: [{ label: 'Active', value: 'active' }] },\n * { id: 'created', label: 'Created At', type: 'date-range' },\n * { id: 'amount', label: 'Amount', type: 'number' },\n * ]}\n * onFilterChange={filters => console.log(filters)}\n * >\n * <ResizablePanelGroup direction=\"horizontal\">\n * <ResizablePanel><UITable /></ResizablePanel>\n * <ResizableHandle />\n * <UITableFilter />\n * </ResizablePanelGroup>\n * </UITableProvider>\n * ```\n /\nexport const UITableFilter = () => {\n // const { table } = useUITableContext();\n const { filterDefinitions, activeFilters, addFilter, removeFilter, updateFilter } = useUITableFilterContext();\n\n const [tab, setTab] = useState<'columns' \| 'filters' \| null>(null);\n\n const availableDefinitions = filterDefinitions.filter(def => !activeFilters.some(f => f.definitionId === def.id));\n\n return (\n <ResizablePanel defaultSize={25} className={cn('bg-card', tab === null ? 'max-w-8!' : 'min-w-64')}>\n <div className=\"relative z-20 flex size-full bg-muted-bg-subtle\">\n <div className=\"min-w-0 flex-1 overflow-hidden\">\n {/ Columns tab /}\n {/<Activity mode={tab === 'columns' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <p className=\"px-2 font-medium\">Columns Visibility</p>\n <Separator />\n <div className=\"flex flex-col gap-4 pt-4\">\n {table.getAllColumns().map(column => {\n if (['select', 'actions'].includes(column.id)) return null;\n return (\n <ColumnVisibility\n key={column.id}\n checked={column.getIsVisible()}\n title={String(column.columnDef.header)}\n onCheckedChange={value => column.toggleVisibility(!!value)}\n />\n );\n })}\n </div>\n </div>\n </Activity>/}\n\n {/ Filters tab /}\n <Activity mode={tab === 'filters' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <div className=\"flex items-center justify-between gap-2\">\n <p className=\"font-medium\">Bộ lọc</p>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" color=\"muted\" disabled={availableDefinitions.length === 0}>\n <ListFilterPlus size={13} />\n Thêm bộ lọc\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {availableDefinitions.map(def => (\n <DropdownMenuItem key={def.id} className=\"flex items-center gap-2\" onClick={() => addFilter(def.id)}>\n {TYPE_ICONS[def.type]}\n {def.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <Separator />\n {activeFilters.length === 0 ? (\n <p className=\"py-6 text-center text-xs text-text-positive-muted\">Không có bộ lọc nào</p>\n ) : (\n <div className=\"flex flex-col gap-2 pt-1\">\n {activeFilters.map(filter => {\n const def = filterDefinitions.find(d => d.id === filter.definitionId);\n if (!def) return null;\n return (\n <FilterItem\n key={filter.id}\n filter={filter}\n definition={def}\n onRemove={() => removeFilter(filter.id)}\n onUpdate={value => updateFilter(filter.id, value)}\n />\n );\n })}\n </div>\n )}\n </div>\n </Activity>\n </div>\n\n {/ Vertical tab strip /}\n <div className=\"flex h-full flex-col border-l border-border bg-muted-bg-subtle text-sm\">\n {/<button\n type=\"button\"\n className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'columns' && 'bg-card')}\n onClick={() => setTab(tab === 'columns' ? null : 'columns')}\n >\n <Columns4Icon size={18} />\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Columns</span>\n </button>\n <Separator />*/}\n <button\n type=\"button\"\n className={cn('relative flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'filters' && 'bg-card')}\n onClick={() => setTab(tab === 'filters' ? null : 'filters')}\n >\n <ListFilterIcon size={18} />\n {activeFilters.length > 0 && (\n <span className=\"absolute top-2 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] leading-none text-primary-foreground\">\n {activeFilters.length}\n </span>\n )}\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Bộ lọc</span>\n </button>\n <Separator />\n </div>\n </div>\n </ResizablePanel>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"filter-B5EnnL9I.cjs","names":["TagIcon","CalendarIcon","HashIcon","TypeIcon","ToggleLeftIcon","Label","Checkbox","Input","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Button","Popover","PopoverTrigger","PopoverContent","Trash2Icon","useUITableFilterContext","ResizablePanel","Activity","DropdownMenu","DropdownMenuTrigger","ListFilterPlus","DropdownMenuContent","DropdownMenuItem","Separator","ListFilterIcon"],"sources":["../packages/components/features/tables/components/table/filter.tsx"],"sourcesContent":["/*\n @file filter.tsx\n * Collapsible side-panel with column-visibility toggles and a dynamic filter builder.\n \n - \"Columns\" tab: toggle individual column visibility.\n * - \"Filters\" tab: \"Add Filter\" dropdown → active filter chips → per-filter Popover editor.\n /\nimport { Activity, useState } from 'react';\n\nimport { CalendarIcon, HashIcon, ListFilterIcon, ListFilterPlus, TagIcon, ToggleLeftIcon, Trash2Icon, TypeIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { ResizablePanel } from '@/components/ui/resizable';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useUITableFilterContext } from '../../hooks/use-context';\nimport type {\n ActiveFilter,\n BooleanFilterValue,\n DateRangeFilterValue,\n FilterDefinition,\n FilterType,\n FilterValue,\n NumberFilterValue,\n SingleTagFilterValue,\n TagFilterValue,\n TextFilterValue,\n} from '../../types';\n\n// ── icons per filter type ──────────────────────────────────────────────────────\n\nconst TYPE_ICONS: Record<FilterType, React.ReactNode> = {\n tag: <TagIcon size={14} />,\n 'single-tag': <TagIcon size={14} />,\n 'date-range': <CalendarIcon size={14} />,\n number: <HashIcon size={14} />,\n text: <TypeIcon size={14} />,\n boolean: <ToggleLeftIcon size={14} />,\n};\n\n// ── operator options ───────────────────────────────────────────────────────────\n\nconst NUMBER_OPERATORS: { value: NumberFilterValue['operator']; label: string }[] = [\n { value: 'eq', label: 'Bằng (=)' },\n { value: 'ne', label: 'Không bằng (≠)' },\n { value: 'gt', label: 'Lớn hơn (>)' },\n { value: 'gte', label: 'Ít nhất (≥)' },\n { value: 'lt', label: 'Nhỏ hơn (<)' },\n { value: 'lte', label: 'Nhiều nhất (≤)' },\n { value: 'between', label: 'Trong khoảng' },\n];\n\nconst TEXT_OPERATORS: { value: TextFilterValue['operator']; label: string }[] = [\n { value: 'contains', label: 'Chứa' },\n { value: 'equals', label: 'Bằng' },\n { value: 'starts-with', label: 'Bắt đầu bằng' },\n { value: 'ends-with', label: 'Kết thúc bằng' },\n];\n\n// ── summary label ──────────────────────────────────────────────────────────────\n\nfunction formatFilterValue(value: FilterValue, def: FilterDefinition): string {\n switch (value.type) {\n case 'single-tag': {\n if (!value.value) return 'Chưa đặt';\n return def.options?.find(o => o.value === value.value)?.label ?? value.value;\n }\n case 'tag': {\n if (!value.values.length) return 'Chưa đặt';\n return value.values.map(v => def.options?.find(o => o.value === v)?.label ?? v).join(', ');\n }\n case 'date-range': {\n if (!value.from && !value.to) return 'Ngày không xác định';\n if (value.from && value.to) return `${value.from} → ${value.to}`;\n if (value.from) return `từ ${value.from}`;\n return `đến ${value.to}`;\n }\n case 'number': {\n const op = { eq: '=', ne: '≠', gt: '>', gte: '≥', lt: '<', lte: '≤', between: 'trong khoảng' }[value.operator];\n if (value.value === undefined) return op;\n if (value.operator === 'between') return `${op} ${value.value} – ${value.valueTo ?? '?'}`;\n return `${op} ${value.value}`;\n }\n case 'text': {\n const op = {\n contains: 'chứa',\n equals: 'là',\n 'starts-with': 'bắt đầu bằng',\n 'ends-with': 'kết thúc bằng',\n }[value.operator];\n return value.value ? `${op} \"${value.value}\"` : op;\n }\n case 'boolean':\n if (value.value === null) return 'Không xác định';\n return value.value ? 'Có' : 'Không';\n }\n}\n\n// ── filter editors ─────────────────────────────────────────────────────────────\n\nconst TagFilterEditor: React.FC<{\n value: TagFilterValue;\n definition: FilterDefinition;\n onChange: (v: TagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.values.includes(option.value) && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.values.includes(option.value)}\n onCheckedChange={checked => {\n const next = checked ? [...value.values, option.value] : value.values.filter(v => v !== option.value);\n onChange({ type: 'tag', values: next });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst SingleTagFilterEditor: React.FC<{\n value: SingleTagFilterValue;\n definition: FilterDefinition;\n onChange: (v: SingleTagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.value === option.value && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.value === option.value}\n onCheckedChange={checked => {\n onChange({ type: 'single-tag', value: checked ? option.value : null });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst DateRangeFilterEditor: React.FC<{\n value: DateRangeFilterValue;\n onChange: (v: DateRangeFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Từ ngày</span>\n <Input type=\"date\" size=\"md\" value={value.from ?? ''} onValueChange={v => onChange({ ...value, from: v \|\| undefined })} />\n </div>\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Đến ngày</span>\n <Input type=\"date\" size=\"md\" value={value.to ?? ''} onValueChange={v => onChange({ ...value, to: v \|\| undefined })} />\n </div>\n </div>\n);\n\nconst NumberFilterEditor: React.FC<{\n value: NumberFilterValue;\n onChange: (v: NumberFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as NumberFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {NUMBER_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Giá trị\"\n value={value.value ?? ''}\n onValueChange={v => onChange({ ...value, value: v ? Number(v) : undefined })}\n />\n {value.operator === 'between' && (\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Đến giá trị\"\n value={value.valueTo ?? ''}\n onValueChange={v => onChange({ ...value, valueTo: v ? Number(v) : undefined })}\n />\n )}\n </div>\n);\n\nconst TextFilterEditor: React.FC<{\n value: TextFilterValue;\n onChange: (v: TextFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as TextFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {TEXT_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input type=\"text\" size=\"md\" placeholder=\"Nhập văn bản...\" value={value.value} onValueChange={v => onChange({ ...value, value: v })} />\n </div>\n);\n\nconst BOOLEAN_OPTIONS = [\n { label: 'Có', value: true as boolean \| null },\n { label: 'Không', value: false as boolean \| null },\n { label: 'Không xác định', value: null as boolean \| null },\n];\n\nconst BooleanFilterEditor: React.FC<{\n value: BooleanFilterValue;\n onChange: (v: BooleanFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {BOOLEAN_OPTIONS.map(({ label, value: v }) => (\n <Button\n key={label}\n type=\"button\"\n tabIndex={-1}\n variant=\"outline\"\n className={cn(\n 'rounded px-3 py-1.5 text-left text-sm transition-colors',\n value.value === v ? 'bg-primary-muted font-medium' : 'hover:bg-muted-bg-subtle'\n )}\n onClick={() => onChange({ type: 'boolean', value: v })}\n >\n {label}\n </Button>\n ))}\n </div>\n);\n\nfunction FilterEditor({ value, definition, onChange }: { value: FilterValue; definition: FilterDefinition; onChange: (v: FilterValue) => void }) {\n switch (value.type) {\n case 'tag':\n return <TagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'single-tag':\n return <SingleTagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'date-range':\n return <DateRangeFilterEditor value={value} onChange={onChange} />;\n case 'number':\n return <NumberFilterEditor value={value} onChange={onChange} />;\n case 'text':\n return <TextFilterEditor value={value} onChange={onChange} />;\n case 'boolean':\n return <BooleanFilterEditor value={value} onChange={onChange} />;\n }\n}\n\n// ── filter item chip ───────────────────────────────────────────────────────────\n\nconst FilterItem: React.FC<{\n filter: ActiveFilter;\n definition: FilterDefinition;\n onRemove: () => void;\n onUpdate: (value: FilterValue) => void;\n}> = ({ filter, definition, onRemove, onUpdate }) => (\n <div className=\"flex items-center gap-1\">\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className=\"flex-1 bg-white max-w-[calc(100%-32px)] justify-start\"\n innerClassName=\"flex truncate gap-1.5\"\n >\n <span className=\"shrink-0 text-text-positive font-medium\">{definition.label}</span>\n <span className=\"truncate text-xs text-text-positive-weak\">{formatFilterValue(filter.value, definition)}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-64 p-0\" align=\"start\" side=\"bottom\">\n <div className=\"border-b border-border px-3 py-2\">\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-text-positive-muted\">{TYPE_ICONS[definition.type]}</span>\n <p className=\"font-medium\">{definition.label}</p>\n </div>\n </div>\n <FilterEditor value={filter.value} definition={definition} onChange={onUpdate} />\n </PopoverContent>\n </Popover>\n <Button type=\"button\" size=\"icon\" variant=\"soft\" color=\"danger\" className=\"shrink\" onClick={onRemove}>\n <Trash2Icon size={13} />\n </Button>\n </div>\n);\n\n// ── column visibility row ──────────────────────────────────────────────────────\n\n// const ColumnVisibility: React.FC<{\n// checked: boolean;\n// title: string;\n// onCheckedChange?: (checked: boolean) => void;\n// }> = ({ checked, title, onCheckedChange }) => (\n// <Label>\n// <Checkbox checked={checked} onCheckedChange={onCheckedChange} />\n// <p className=\"text-sm\">{title}</p>\n// </Label>\n// );\n\n// ── main component ─────────────────────────────────────────────────────────────\n\n/\n Collapsible side-panel that lets users toggle column visibility and build\n * row filters without leaving the table view.\n \n The panel collapses to a narrow icon strip when no tab is active and expands\n * to at least 64 units when the \"Columns\" or \"Filters\" tab is selected.\n \n Wire filter capability by passing `filterDefinitions` and `onFilterChange` to\n * the parent `UITableProvider`.\n \n @example\n * ```tsx\n * <UITableProvider\n * filterDefinitions={[\n * { id: 'status', label: 'Status', type: 'tag', options: [{ label: 'Active', value: 'active' }] },\n * { id: 'created', label: 'Created At', type: 'date-range' },\n * { id: 'amount', label: 'Amount', type: 'number' },\n * ]}\n * onFilterChange={filters => console.log(filters)}\n * >\n * <ResizablePanelGroup direction=\"horizontal\">\n * <ResizablePanel><UITable /></ResizablePanel>\n * <ResizableHandle />\n * <UITableFilter />\n * </ResizablePanelGroup>\n * </UITableProvider>\n * ```\n /\nexport const UITableFilter = () => {\n // const { table } = useUITableContext();\n const { filterDefinitions, activeFilters, addFilter, removeFilter, updateFilter } = useUITableFilterContext();\n\n const [tab, setTab] = useState<'columns' \| 'filters' \| null>(null);\n\n const availableDefinitions = filterDefinitions.filter(def => !activeFilters.some(f => f.definitionId === def.id));\n\n return (\n <ResizablePanel defaultSize={25} className={cn('bg-card', tab === null ? 'max-w-8!' : 'min-w-64')}>\n <div className=\"relative z-20 flex size-full bg-muted-bg-subtle\">\n <div className=\"min-w-0 flex-1 overflow-hidden\">\n {/ Columns tab /}\n {/<Activity mode={tab === 'columns' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <p className=\"px-2 font-medium\">Columns Visibility</p>\n <Separator />\n <div className=\"flex flex-col gap-4 pt-4\">\n {table.getAllColumns().map(column => {\n if (['select', 'actions'].includes(column.id)) return null;\n return (\n <ColumnVisibility\n key={column.id}\n checked={column.getIsVisible()}\n title={String(column.columnDef.header)}\n onCheckedChange={value => column.toggleVisibility(!!value)}\n />\n );\n })}\n </div>\n </div>\n </Activity>/}\n\n {/ Filters tab /}\n <Activity mode={tab === 'filters' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <div className=\"flex items-center justify-between gap-2\">\n <p className=\"font-medium\">Bộ lọc</p>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" color=\"muted\" disabled={availableDefinitions.length === 0}>\n <ListFilterPlus size={13} />\n Thêm bộ lọc\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {availableDefinitions.map(def => (\n <DropdownMenuItem key={def.id} className=\"flex items-center gap-2\" onClick={() => addFilter(def.id)}>\n {TYPE_ICONS[def.type]}\n {def.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <Separator />\n {activeFilters.length === 0 ? (\n <p className=\"py-6 text-center text-xs text-text-positive-muted\">Không có bộ lọc nào</p>\n ) : (\n <div className=\"flex flex-col gap-2 pt-1\">\n {activeFilters.map(filter => {\n const def = filterDefinitions.find(d => d.id === filter.definitionId);\n if (!def) return null;\n return (\n <FilterItem\n key={filter.id}\n filter={filter}\n definition={def}\n onRemove={() => removeFilter(filter.id)}\n onUpdate={value => updateFilter(filter.id, value)}\n />\n );\n })}\n </div>\n )}\n </div>\n </Activity>\n </div>\n\n {/ Vertical tab strip /}\n <div className=\"flex h-full flex-col border-l border-border bg-muted-bg-subtle text-sm\">\n {/<button\n type=\"button\"\n className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'columns' && 'bg-card')}\n onClick={() => setTab(tab === 'columns' ? null : 'columns')}\n >\n <Columns4Icon size={18} />\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Columns</span>\n </button>\n <Separator />*/}\n <button\n type=\"button\"\n className={cn('relative flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'filters' && 'bg-card')}\n onClick={() => setTab(tab === 'filters' ? null : 'filters')}\n >\n <ListFilterIcon size={18} />\n {activeFilters.length > 0 && (\n <span className=\"absolute top-2 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] leading-none text-primary-foreground\">\n {activeFilters.length}\n </span>\n )}\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Bộ lọc</span>\n </button>\n <Separator />\n </div>\n </div>\n </ResizablePanel>\n );\n};\n"],"mappings":"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"}

package/dist/{filter-CWuRGTl4.mjs → filter-BCNjqiBx.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{X as t}from"./tables-BGzwkdFO.mjs";import{Checkbox as n}from"./ui/checkbox.mjs";import{DropdownMenu as r,DropdownMenuContent as i,DropdownMenuItem as a,DropdownMenuTrigger as o}from"./ui/dropdown-menu.mjs";import{ResizablePanel as s}from"./ui/resizable.mjs";import{Popover as c,PopoverContent as l,PopoverTrigger as u}from"./ui/popover.mjs";import{Input as d}from"./ui/input.mjs";import{Separator as f}from"./ui/separator.mjs";import{Label as p}from"./ui/label.mjs";import{Select as m,SelectContent as h,SelectItem as g,SelectTrigger as _,SelectValue as v}from"./ui/select.mjs";import{CalendarIcon as y,HashIcon as b,ListFilterIcon as x,ListFilterPlus as S,TagIcon as C,ToggleLeftIcon as w,Trash2Icon as T,TypeIcon as E}from"lucide-react";import{Activity as D,useState as O}from"react";import{cn as k}from"@customafk/react-toolkit/utils";import{jsx as A,jsxs as j}from"react/jsx-runtime";const M={tag:A(C,{size:14}),"single-tag":A(C,{size:14}),"date-range":A(y,{size:14}),number:A(b,{size:14}),text:A(E,{size:14}),boolean:A(w,{size:14})},N=[{value:`eq`,label:`Bằng (=)`},{value:`ne`,label:`Không bằng (≠)`},{value:`gt`,label:`Lớn hơn (>)`},{value:`gte`,label:`Ít nhất (≥)`},{value:`lt`,label:`Nhỏ hơn (<)`},{value:`lte`,label:`Nhiều nhất (≤)`},{value:`between`,label:`Trong khoảng`}],P=[{value:`contains`,label:`Chứa`},{value:`equals`,label:`Bằng`},{value:`starts-with`,label:`Bắt đầu bằng`},{value:`ends-with`,label:`Kết thúc bằng`}];function F(e,t){switch(e.type){case`single-tag`:return e.value?t.options?.find(t=>t.value===e.value)?.label??e.value:`Chưa đặt`;case`tag`:return e.values.length?e.values.map(e=>t.options?.find(t=>t.value===e)?.label??e).join(`, `):`Chưa đặt`;case`date-range`:return!e.from&&!e.to?`Ngày không xác định`:e.from&&e.to?`${e.from} → ${e.to}`:e.from?`từ ${e.from}`:`đến ${e.to}`;case`number`:{let t={eq:`=`,ne:`≠`,gt:`>`,gte:`≥`,lt:`<`,lte:`≤`,between:`trong khoảng`}[e.operator];return e.value===void 0?t:e.operator===`between`?`${t} ${e.value} – ${e.valueTo??`?`}`:`${t} ${e.value}`}case`text`:{let t={contains:`chứa`,equals:`là`,"starts-with":`bắt đầu bằng`,"ends-with":`kết thúc bằng`}[e.operator];return e.value?`${t} "${e.value}"`:t}case`boolean`:return e.value===null?`Không xác định`:e.value?`Có`:`Không`}}const I=({value:e,definition:t,onChange:r})=>A(`div`,{className:`flex flex-col gap-1 p-3`,children:(t.options??[]).length===0?A(`p`,{className:`text-xs text-text-positive-muted`,children:`Không có tùy chọn`}):t.options.map(t=>j(p,{className:k(`flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors`,e.values.includes(t.value)&&`bg-primary-muted hover:bg-primary-subtle`),children:[A(n,{checked:e.values.includes(t.value),onCheckedChange:n=>{r({type:`tag`,values:n?[...e.values,t.value]:e.values.filter(e=>e!==t.value)})}}),A(`span`,{className:`text-sm`,children:t.label})]},t.value))}),L=({value:e,definition:t,onChange:r})=>A(`div`,{className:`flex flex-col gap-1 p-3`,children:(t.options??[]).length===0?A(`p`,{className:`text-xs text-text-positive-muted`,children:`Không có tùy chọn`}):t.options.map(t=>j(p,{className:k(`flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors`,e.value===t.value&&`bg-primary-muted hover:bg-primary-subtle`),children:[A(n,{checked:e.value===t.value,onCheckedChange:e=>{r({type:`single-tag`,value:e?t.value:null})}}),A(`span`,{className:`text-sm`,children:t.label})]},t.value))}),R=({value:e,onChange:t})=>j(`div`,{className:`flex flex-col gap-3 p-3`,children:[j(`div`,{className:`flex flex-col gap-1`,children:[A(`span`,{className:`text-text-positive-muted text-xs`,children:`Từ ngày`}),A(d,{type:`date`,size:`md`,value:e.from??``,onValueChange:n=>t({...e,from:n||void 0})})]}),j(`div`,{className:`flex flex-col gap-1`,children:[A(`span`,{className:`text-text-positive-muted text-xs`,children:`Đến ngày`}),A(d,{type:`date`,size:`md`,value:e.to??``,onValueChange:n=>t({...e,to:n||void 0})})]})]}),z=({value:e,onChange:t})=>j(`div`,{className:`flex flex-col gap-3 p-3`,children:[j(m,{value:e.operator,onValueChange:n=>t({...e,operator:n}),children:[A(_,{size:`sm`,children:A(v,{})}),A(h,{children:N.map(e=>A(g,{value:e.value,children:e.label},e.value))})]}),A(d,{type:`number`,size:`md`,placeholder:`Giá trị`,value:e.value??``,onValueChange:n=>t({...e,value:n?Number(n):void 0})}),e.operator===`between`&&A(d,{type:`number`,size:`md`,placeholder:`Đến giá trị`,value:e.valueTo??``,onValueChange:n=>t({...e,valueTo:n?Number(n):void 0})})]}),B=({value:e,onChange:t})=>j(`div`,{className:`flex flex-col gap-3 p-3`,children:[j(m,{value:e.operator,onValueChange:n=>t({...e,operator:n}),children:[A(_,{size:`sm`,children:A(v,{})}),A(h,{children:P.map(e=>A(g,{value:e.value,children:e.label},e.value))})]}),A(d,{type:`text`,size:`md`,placeholder:`Nhập văn bản...`,value:e.value,onValueChange:n=>t({...e,value:n})})]}),V=[{label:`Có`,value:!0},{label:`Không`,value:!1},{label:`Không xác định`,value:null}],H=({value:t,onChange:n})=>A(`div`,{className:`flex flex-col gap-1 p-3`,children:V.map(({label:r,value:i})=>A(e,{type:`button`,tabIndex:-1,variant:`outline`,className:k(`rounded px-3 py-1.5 text-left text-sm transition-colors`,t.value===i?`bg-primary-muted font-medium`:`hover:bg-muted-bg-subtle`),onClick:()=>n({type:`boolean`,value:i}),children:r},r))});function U({value:e,definition:t,onChange:n}){switch(e.type){case`tag`:return A(I,{value:e,definition:t,onChange:n});case`single-tag`:return A(L,{value:e,definition:t,onChange:n});case`date-range`:return A(R,{value:e,onChange:n});case`number`:return A(z,{value:e,onChange:n});case`text`:return A(B,{value:e,onChange:n});case`boolean`:return A(H,{value:e,onChange:n})}}const W=({filter:t,definition:n,onRemove:r,onUpdate:i})=>j(`div`,{className:`flex items-center gap-1`,children:[j(c,{children:[A(u,{asChild:!0,children:j(e,{type:`button`,variant:`outline`,color:`muted`,className:`flex-1 bg-white max-w-[calc(100%-32px)] justify-start`,innerClassName:`flex truncate gap-1.5`,children:[A(`span`,{className:`shrink-0 text-text-positive font-medium`,children:n.label}),A(`span`,{className:`truncate text-xs text-text-positive-weak`,children:F(t.value,n)})]})}),j(l,{className:`w-64 p-0`,align:`start`,side:`bottom`,children:[A(`div`,{className:`border-b border-border px-3 py-2`,children:j(`div`,{className:`flex items-center gap-1.5`,children:[A(`span`,{className:`text-text-positive-muted`,children:M[n.type]}),A(`p`,{className:`font-medium`,children:n.label})]})}),A(U,{value:t.value,definition:n,onChange:i})]})]}),A(e,{type:`button`,size:`icon`,variant:`soft`,color:`danger`,className:`shrink`,onClick:r,children:A(T,{size:13})})]}),G=()=>{let{filterDefinitions:n,activeFilters:c,addFilter:l,removeFilter:u,updateFilter:d}=t(),[p,m]=O(null),h=n.filter(e=>!c.some(t=>t.definitionId===e.id));return A(s,{defaultSize:25,className:k(`bg-card`,p===null?`max-w-8!`:`min-w-64`),children:j(`div`,{className:`relative z-20 flex size-full bg-muted-bg-subtle`,children:[A(`div`,{className:`min-w-0 flex-1 overflow-hidden`,children:A(D,{mode:p===`filters`?`visible`:`hidden`,children:j(`div`,{className:`flex size-full flex-col gap-2 p-4`,children:[j(`div`,{className:`flex items-center justify-between gap-2`,children:[A(`p`,{className:`font-medium`,children:`Bộ lọc`}),j(r,{children:[A(o,{asChild:!0,children:j(e,{variant:`outline`,color:`muted`,disabled:h.length===0,children:[A(S,{size:13}),`Thêm bộ lọc`]})}),A(i,{align:`end`,children:h.map(e=>j(a,{className:`flex items-center gap-2`,onClick:()=>l(e.id),children:[M[e.type],e.label]},e.id))})]})]}),A(f,{}),c.length===0?A(`p`,{className:`py-6 text-center text-xs text-text-positive-muted`,children:`Không có bộ lọc nào`}):A(`div`,{className:`flex flex-col gap-2 pt-1`,children:c.map(e=>{let t=n.find(t=>t.id===e.definitionId);return t?A(W,{filter:e,definition:t,onRemove:()=>u(e.id),onUpdate:t=>d(e.id,t)},e.id):null})})]})})}),j(`div`,{className:`flex h-full flex-col border-l border-border bg-muted-bg-subtle text-sm`,children:[j(`button`,{type:`button`,className:k(`relative flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4`,p===`filters`&&`bg-card`),onClick:()=>m(p===`filters`?null:`filters`),children:[A(x,{size:18}),c.length>0&&A(`span`,{className:`absolute top-2 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] leading-none text-primary-foreground`,children:c.length}),A(`span`,{className:`text-nowrap [writing-mode:vertical-lr]`,children:`Bộ lọc`})]}),A(f,{})]})]})})};export{G as UITableFilter};
-//# sourceMappingURL=filter-CWuRGTl4.mjs.map
+import{Button as e}from"./ui/button.mjs";import{X as t}from"./tables-7_KgoyS-.mjs";import{Checkbox as n}from"./ui/checkbox.mjs";import{DropdownMenu as r,DropdownMenuContent as i,DropdownMenuItem as a,DropdownMenuTrigger as o}from"./ui/dropdown-menu.mjs";import{ResizablePanel as s}from"./ui/resizable.mjs";import{Popover as c,PopoverContent as l,PopoverTrigger as u}from"./ui/popover.mjs";import{Input as d}from"./ui/input.mjs";import{Separator as f}from"./ui/separator.mjs";import{Label as p}from"./ui/label.mjs";import{Select as m,SelectContent as h,SelectItem as g,SelectTrigger as _,SelectValue as v}from"./ui/select.mjs";import{CalendarIcon as y,HashIcon as b,ListFilterIcon as x,ListFilterPlus as S,TagIcon as C,ToggleLeftIcon as w,Trash2Icon as T,TypeIcon as E}from"lucide-react";import{Activity as D,useState as O}from"react";import{cn as k}from"@customafk/react-toolkit/utils";import{jsx as A,jsxs as j}from"react/jsx-runtime";const M={tag:A(C,{size:14}),"single-tag":A(C,{size:14}),"date-range":A(y,{size:14}),number:A(b,{size:14}),text:A(E,{size:14}),boolean:A(w,{size:14})},N=[{value:`eq`,label:`Bằng (=)`},{value:`ne`,label:`Không bằng (≠)`},{value:`gt`,label:`Lớn hơn (>)`},{value:`gte`,label:`Ít nhất (≥)`},{value:`lt`,label:`Nhỏ hơn (<)`},{value:`lte`,label:`Nhiều nhất (≤)`},{value:`between`,label:`Trong khoảng`}],P=[{value:`contains`,label:`Chứa`},{value:`equals`,label:`Bằng`},{value:`starts-with`,label:`Bắt đầu bằng`},{value:`ends-with`,label:`Kết thúc bằng`}];function F(e,t){switch(e.type){case`single-tag`:return e.value?t.options?.find(t=>t.value===e.value)?.label??e.value:`Chưa đặt`;case`tag`:return e.values.length?e.values.map(e=>t.options?.find(t=>t.value===e)?.label??e).join(`, `):`Chưa đặt`;case`date-range`:return!e.from&&!e.to?`Ngày không xác định`:e.from&&e.to?`${e.from} → ${e.to}`:e.from?`từ ${e.from}`:`đến ${e.to}`;case`number`:{let t={eq:`=`,ne:`≠`,gt:`>`,gte:`≥`,lt:`<`,lte:`≤`,between:`trong khoảng`}[e.operator];return e.value===void 0?t:e.operator===`between`?`${t} ${e.value} – ${e.valueTo??`?`}`:`${t} ${e.value}`}case`text`:{let t={contains:`chứa`,equals:`là`,"starts-with":`bắt đầu bằng`,"ends-with":`kết thúc bằng`}[e.operator];return e.value?`${t} "${e.value}"`:t}case`boolean`:return e.value===null?`Không xác định`:e.value?`Có`:`Không`}}const I=({value:e,definition:t,onChange:r})=>A(`div`,{className:`flex flex-col gap-1 p-3`,children:(t.options??[]).length===0?A(`p`,{className:`text-xs text-text-positive-muted`,children:`Không có tùy chọn`}):t.options.map(t=>j(p,{className:k(`flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors`,e.values.includes(t.value)&&`bg-primary-muted hover:bg-primary-subtle`),children:[A(n,{checked:e.values.includes(t.value),onCheckedChange:n=>{r({type:`tag`,values:n?[...e.values,t.value]:e.values.filter(e=>e!==t.value)})}}),A(`span`,{className:`text-sm`,children:t.label})]},t.value))}),L=({value:e,definition:t,onChange:r})=>A(`div`,{className:`flex flex-col gap-1 p-3`,children:(t.options??[]).length===0?A(`p`,{className:`text-xs text-text-positive-muted`,children:`Không có tùy chọn`}):t.options.map(t=>j(p,{className:k(`flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors`,e.value===t.value&&`bg-primary-muted hover:bg-primary-subtle`),children:[A(n,{checked:e.value===t.value,onCheckedChange:e=>{r({type:`single-tag`,value:e?t.value:null})}}),A(`span`,{className:`text-sm`,children:t.label})]},t.value))}),R=({value:e,onChange:t})=>j(`div`,{className:`flex flex-col gap-3 p-3`,children:[j(`div`,{className:`flex flex-col gap-1`,children:[A(`span`,{className:`text-text-positive-muted text-xs`,children:`Từ ngày`}),A(d,{type:`date`,size:`md`,value:e.from??``,onValueChange:n=>t({...e,from:n||void 0})})]}),j(`div`,{className:`flex flex-col gap-1`,children:[A(`span`,{className:`text-text-positive-muted text-xs`,children:`Đến ngày`}),A(d,{type:`date`,size:`md`,value:e.to??``,onValueChange:n=>t({...e,to:n||void 0})})]})]}),z=({value:e,onChange:t})=>j(`div`,{className:`flex flex-col gap-3 p-3`,children:[j(m,{value:e.operator,onValueChange:n=>t({...e,operator:n}),children:[A(_,{size:`sm`,children:A(v,{})}),A(h,{children:N.map(e=>A(g,{value:e.value,children:e.label},e.value))})]}),A(d,{type:`number`,size:`md`,placeholder:`Giá trị`,value:e.value??``,onValueChange:n=>t({...e,value:n?Number(n):void 0})}),e.operator===`between`&&A(d,{type:`number`,size:`md`,placeholder:`Đến giá trị`,value:e.valueTo??``,onValueChange:n=>t({...e,valueTo:n?Number(n):void 0})})]}),B=({value:e,onChange:t})=>j(`div`,{className:`flex flex-col gap-3 p-3`,children:[j(m,{value:e.operator,onValueChange:n=>t({...e,operator:n}),children:[A(_,{size:`sm`,children:A(v,{})}),A(h,{children:P.map(e=>A(g,{value:e.value,children:e.label},e.value))})]}),A(d,{type:`text`,size:`md`,placeholder:`Nhập văn bản...`,value:e.value,onValueChange:n=>t({...e,value:n})})]}),V=[{label:`Có`,value:!0},{label:`Không`,value:!1},{label:`Không xác định`,value:null}],H=({value:t,onChange:n})=>A(`div`,{className:`flex flex-col gap-1 p-3`,children:V.map(({label:r,value:i})=>A(e,{type:`button`,tabIndex:-1,variant:`outline`,className:k(`rounded px-3 py-1.5 text-left text-sm transition-colors`,t.value===i?`bg-primary-muted font-medium`:`hover:bg-muted-bg-subtle`),onClick:()=>n({type:`boolean`,value:i}),children:r},r))});function U({value:e,definition:t,onChange:n}){switch(e.type){case`tag`:return A(I,{value:e,definition:t,onChange:n});case`single-tag`:return A(L,{value:e,definition:t,onChange:n});case`date-range`:return A(R,{value:e,onChange:n});case`number`:return A(z,{value:e,onChange:n});case`text`:return A(B,{value:e,onChange:n});case`boolean`:return A(H,{value:e,onChange:n})}}const W=({filter:t,definition:n,onRemove:r,onUpdate:i})=>j(`div`,{className:`flex items-center gap-1`,children:[j(c,{children:[A(u,{asChild:!0,children:j(e,{type:`button`,variant:`outline`,color:`muted`,className:`flex-1 bg-white max-w-[calc(100%-32px)] justify-start`,innerClassName:`flex truncate gap-1.5`,children:[A(`span`,{className:`shrink-0 text-text-positive font-medium`,children:n.label}),A(`span`,{className:`truncate text-xs text-text-positive-weak`,children:F(t.value,n)})]})}),j(l,{className:`w-64 p-0`,align:`start`,side:`bottom`,children:[A(`div`,{className:`border-b border-border px-3 py-2`,children:j(`div`,{className:`flex items-center gap-1.5`,children:[A(`span`,{className:`text-text-positive-muted`,children:M[n.type]}),A(`p`,{className:`font-medium`,children:n.label})]})}),A(U,{value:t.value,definition:n,onChange:i})]})]}),A(e,{type:`button`,size:`icon`,variant:`soft`,color:`danger`,className:`shrink`,onClick:r,children:A(T,{size:13})})]}),G=()=>{let{filterDefinitions:n,activeFilters:c,addFilter:l,removeFilter:u,updateFilter:d}=t(),[p,m]=O(null),h=n.filter(e=>!c.some(t=>t.definitionId===e.id));return A(s,{defaultSize:25,className:k(`bg-card`,p===null?`max-w-8!`:`min-w-64`),children:j(`div`,{className:`relative z-20 flex size-full bg-muted-bg-subtle`,children:[A(`div`,{className:`min-w-0 flex-1 overflow-hidden`,children:A(D,{mode:p===`filters`?`visible`:`hidden`,children:j(`div`,{className:`flex size-full flex-col gap-2 p-4`,children:[j(`div`,{className:`flex items-center justify-between gap-2`,children:[A(`p`,{className:`font-medium`,children:`Bộ lọc`}),j(r,{children:[A(o,{asChild:!0,children:j(e,{variant:`outline`,color:`muted`,disabled:h.length===0,children:[A(S,{size:13}),`Thêm bộ lọc`]})}),A(i,{align:`end`,children:h.map(e=>j(a,{className:`flex items-center gap-2`,onClick:()=>l(e.id),children:[M[e.type],e.label]},e.id))})]})]}),A(f,{}),c.length===0?A(`p`,{className:`py-6 text-center text-xs text-text-positive-muted`,children:`Không có bộ lọc nào`}):A(`div`,{className:`flex flex-col gap-2 pt-1`,children:c.map(e=>{let t=n.find(t=>t.id===e.definitionId);return t?A(W,{filter:e,definition:t,onRemove:()=>u(e.id),onUpdate:t=>d(e.id,t)},e.id):null})})]})})}),j(`div`,{className:`flex h-full flex-col border-l border-border bg-muted-bg-subtle text-sm`,children:[j(`button`,{type:`button`,className:k(`relative flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4`,p===`filters`&&`bg-card`),onClick:()=>m(p===`filters`?null:`filters`),children:[A(x,{size:18}),c.length>0&&A(`span`,{className:`absolute top-2 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] leading-none text-primary-foreground`,children:c.length}),A(`span`,{className:`text-nowrap [writing-mode:vertical-lr]`,children:`Bộ lọc`})]}),A(f,{})]})]})})};export{G as UITableFilter};
+//# sourceMappingURL=filter-BCNjqiBx.mjs.map

package/dist/{filter-CWuRGTl4.mjs.map → filter-BCNjqiBx.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-CWuRGTl4.mjs","names":[],"sources":["../packages/components/features/tables/components/table/filter.tsx"],"sourcesContent":["/*\n @file filter.tsx\n * Collapsible side-panel with column-visibility toggles and a dynamic filter builder.\n \n - \"Columns\" tab: toggle individual column visibility.\n * - \"Filters\" tab: \"Add Filter\" dropdown → active filter chips → per-filter Popover editor.\n /\nimport { Activity, useState } from 'react';\n\nimport { CalendarIcon, HashIcon, ListFilterIcon, ListFilterPlus, TagIcon, ToggleLeftIcon, Trash2Icon, TypeIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { ResizablePanel } from '@/components/ui/resizable';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useUITableFilterContext } from '../../hooks/use-context';\nimport type {\n ActiveFilter,\n BooleanFilterValue,\n DateRangeFilterValue,\n FilterDefinition,\n FilterType,\n FilterValue,\n NumberFilterValue,\n SingleTagFilterValue,\n TagFilterValue,\n TextFilterValue,\n} from '../../types';\n\n// ── icons per filter type ──────────────────────────────────────────────────────\n\nconst TYPE_ICONS: Record<FilterType, React.ReactNode> = {\n tag: <TagIcon size={14} />,\n 'single-tag': <TagIcon size={14} />,\n 'date-range': <CalendarIcon size={14} />,\n number: <HashIcon size={14} />,\n text: <TypeIcon size={14} />,\n boolean: <ToggleLeftIcon size={14} />,\n};\n\n// ── operator options ───────────────────────────────────────────────────────────\n\nconst NUMBER_OPERATORS: { value: NumberFilterValue['operator']; label: string }[] = [\n { value: 'eq', label: 'Bằng (=)' },\n { value: 'ne', label: 'Không bằng (≠)' },\n { value: 'gt', label: 'Lớn hơn (>)' },\n { value: 'gte', label: 'Ít nhất (≥)' },\n { value: 'lt', label: 'Nhỏ hơn (<)' },\n { value: 'lte', label: 'Nhiều nhất (≤)' },\n { value: 'between', label: 'Trong khoảng' },\n];\n\nconst TEXT_OPERATORS: { value: TextFilterValue['operator']; label: string }[] = [\n { value: 'contains', label: 'Chứa' },\n { value: 'equals', label: 'Bằng' },\n { value: 'starts-with', label: 'Bắt đầu bằng' },\n { value: 'ends-with', label: 'Kết thúc bằng' },\n];\n\n// ── summary label ──────────────────────────────────────────────────────────────\n\nfunction formatFilterValue(value: FilterValue, def: FilterDefinition): string {\n switch (value.type) {\n case 'single-tag': {\n if (!value.value) return 'Chưa đặt';\n return def.options?.find(o => o.value === value.value)?.label ?? value.value;\n }\n case 'tag': {\n if (!value.values.length) return 'Chưa đặt';\n return value.values.map(v => def.options?.find(o => o.value === v)?.label ?? v).join(', ');\n }\n case 'date-range': {\n if (!value.from && !value.to) return 'Ngày không xác định';\n if (value.from && value.to) return `${value.from} → ${value.to}`;\n if (value.from) return `từ ${value.from}`;\n return `đến ${value.to}`;\n }\n case 'number': {\n const op = { eq: '=', ne: '≠', gt: '>', gte: '≥', lt: '<', lte: '≤', between: 'trong khoảng' }[value.operator];\n if (value.value === undefined) return op;\n if (value.operator === 'between') return `${op} ${value.value} – ${value.valueTo ?? '?'}`;\n return `${op} ${value.value}`;\n }\n case 'text': {\n const op = {\n contains: 'chứa',\n equals: 'là',\n 'starts-with': 'bắt đầu bằng',\n 'ends-with': 'kết thúc bằng',\n }[value.operator];\n return value.value ? `${op} \"${value.value}\"` : op;\n }\n case 'boolean':\n if (value.value === null) return 'Không xác định';\n return value.value ? 'Có' : 'Không';\n }\n}\n\n// ── filter editors ─────────────────────────────────────────────────────────────\n\nconst TagFilterEditor: React.FC<{\n value: TagFilterValue;\n definition: FilterDefinition;\n onChange: (v: TagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.values.includes(option.value) && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.values.includes(option.value)}\n onCheckedChange={checked => {\n const next = checked ? [...value.values, option.value] : value.values.filter(v => v !== option.value);\n onChange({ type: 'tag', values: next });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst SingleTagFilterEditor: React.FC<{\n value: SingleTagFilterValue;\n definition: FilterDefinition;\n onChange: (v: SingleTagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.value === option.value && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.value === option.value}\n onCheckedChange={checked => {\n onChange({ type: 'single-tag', value: checked ? option.value : null });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst DateRangeFilterEditor: React.FC<{\n value: DateRangeFilterValue;\n onChange: (v: DateRangeFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Từ ngày</span>\n <Input type=\"date\" size=\"md\" value={value.from ?? ''} onValueChange={v => onChange({ ...value, from: v \|\| undefined })} />\n </div>\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Đến ngày</span>\n <Input type=\"date\" size=\"md\" value={value.to ?? ''} onValueChange={v => onChange({ ...value, to: v \|\| undefined })} />\n </div>\n </div>\n);\n\nconst NumberFilterEditor: React.FC<{\n value: NumberFilterValue;\n onChange: (v: NumberFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as NumberFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {NUMBER_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Giá trị\"\n value={value.value ?? ''}\n onValueChange={v => onChange({ ...value, value: v ? Number(v) : undefined })}\n />\n {value.operator === 'between' && (\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Đến giá trị\"\n value={value.valueTo ?? ''}\n onValueChange={v => onChange({ ...value, valueTo: v ? Number(v) : undefined })}\n />\n )}\n </div>\n);\n\nconst TextFilterEditor: React.FC<{\n value: TextFilterValue;\n onChange: (v: TextFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as TextFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {TEXT_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input type=\"text\" size=\"md\" placeholder=\"Nhập văn bản...\" value={value.value} onValueChange={v => onChange({ ...value, value: v })} />\n </div>\n);\n\nconst BOOLEAN_OPTIONS = [\n { label: 'Có', value: true as boolean \| null },\n { label: 'Không', value: false as boolean \| null },\n { label: 'Không xác định', value: null as boolean \| null },\n];\n\nconst BooleanFilterEditor: React.FC<{\n value: BooleanFilterValue;\n onChange: (v: BooleanFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {BOOLEAN_OPTIONS.map(({ label, value: v }) => (\n <Button\n key={label}\n type=\"button\"\n tabIndex={-1}\n variant=\"outline\"\n className={cn(\n 'rounded px-3 py-1.5 text-left text-sm transition-colors',\n value.value === v ? 'bg-primary-muted font-medium' : 'hover:bg-muted-bg-subtle'\n )}\n onClick={() => onChange({ type: 'boolean', value: v })}\n >\n {label}\n </Button>\n ))}\n </div>\n);\n\nfunction FilterEditor({ value, definition, onChange }: { value: FilterValue; definition: FilterDefinition; onChange: (v: FilterValue) => void }) {\n switch (value.type) {\n case 'tag':\n return <TagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'single-tag':\n return <SingleTagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'date-range':\n return <DateRangeFilterEditor value={value} onChange={onChange} />;\n case 'number':\n return <NumberFilterEditor value={value} onChange={onChange} />;\n case 'text':\n return <TextFilterEditor value={value} onChange={onChange} />;\n case 'boolean':\n return <BooleanFilterEditor value={value} onChange={onChange} />;\n }\n}\n\n// ── filter item chip ───────────────────────────────────────────────────────────\n\nconst FilterItem: React.FC<{\n filter: ActiveFilter;\n definition: FilterDefinition;\n onRemove: () => void;\n onUpdate: (value: FilterValue) => void;\n}> = ({ filter, definition, onRemove, onUpdate }) => (\n <div className=\"flex items-center gap-1\">\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className=\"flex-1 bg-white max-w-[calc(100%-32px)] justify-start\"\n innerClassName=\"flex truncate gap-1.5\"\n >\n <span className=\"shrink-0 text-text-positive font-medium\">{definition.label}</span>\n <span className=\"truncate text-xs text-text-positive-weak\">{formatFilterValue(filter.value, definition)}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-64 p-0\" align=\"start\" side=\"bottom\">\n <div className=\"border-b border-border px-3 py-2\">\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-text-positive-muted\">{TYPE_ICONS[definition.type]}</span>\n <p className=\"font-medium\">{definition.label}</p>\n </div>\n </div>\n <FilterEditor value={filter.value} definition={definition} onChange={onUpdate} />\n </PopoverContent>\n </Popover>\n <Button type=\"button\" size=\"icon\" variant=\"soft\" color=\"danger\" className=\"shrink\" onClick={onRemove}>\n <Trash2Icon size={13} />\n </Button>\n </div>\n);\n\n// ── column visibility row ──────────────────────────────────────────────────────\n\n// const ColumnVisibility: React.FC<{\n// checked: boolean;\n// title: string;\n// onCheckedChange?: (checked: boolean) => void;\n// }> = ({ checked, title, onCheckedChange }) => (\n// <Label>\n// <Checkbox checked={checked} onCheckedChange={onCheckedChange} />\n// <p className=\"text-sm\">{title}</p>\n// </Label>\n// );\n\n// ── main component ─────────────────────────────────────────────────────────────\n\n/\n Collapsible side-panel that lets users toggle column visibility and build\n * row filters without leaving the table view.\n \n The panel collapses to a narrow icon strip when no tab is active and expands\n * to at least 64 units when the \"Columns\" or \"Filters\" tab is selected.\n \n Wire filter capability by passing `filterDefinitions` and `onFilterChange` to\n * the parent `UITableProvider`.\n \n @example\n * ```tsx\n * <UITableProvider\n * filterDefinitions={[\n * { id: 'status', label: 'Status', type: 'tag', options: [{ label: 'Active', value: 'active' }] },\n * { id: 'created', label: 'Created At', type: 'date-range' },\n * { id: 'amount', label: 'Amount', type: 'number' },\n * ]}\n * onFilterChange={filters => console.log(filters)}\n * >\n * <ResizablePanelGroup direction=\"horizontal\">\n * <ResizablePanel><UITable /></ResizablePanel>\n * <ResizableHandle />\n * <UITableFilter />\n * </ResizablePanelGroup>\n * </UITableProvider>\n * ```\n /\nexport const UITableFilter = () => {\n // const { table } = useUITableContext();\n const { filterDefinitions, activeFilters, addFilter, removeFilter, updateFilter } = useUITableFilterContext();\n\n const [tab, setTab] = useState<'columns' \| 'filters' \| null>(null);\n\n const availableDefinitions = filterDefinitions.filter(def => !activeFilters.some(f => f.definitionId === def.id));\n\n return (\n <ResizablePanel defaultSize={25} className={cn('bg-card', tab === null ? 'max-w-8!' : 'min-w-64')}>\n <div className=\"relative z-20 flex size-full bg-muted-bg-subtle\">\n <div className=\"min-w-0 flex-1 overflow-hidden\">\n {/ Columns tab /}\n {/<Activity mode={tab === 'columns' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <p className=\"px-2 font-medium\">Columns Visibility</p>\n <Separator />\n <div className=\"flex flex-col gap-4 pt-4\">\n {table.getAllColumns().map(column => {\n if (['select', 'actions'].includes(column.id)) return null;\n return (\n <ColumnVisibility\n key={column.id}\n checked={column.getIsVisible()}\n title={String(column.columnDef.header)}\n onCheckedChange={value => column.toggleVisibility(!!value)}\n />\n );\n })}\n </div>\n </div>\n </Activity>/}\n\n {/ Filters tab /}\n <Activity mode={tab === 'filters' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <div className=\"flex items-center justify-between gap-2\">\n <p className=\"font-medium\">Bộ lọc</p>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" color=\"muted\" disabled={availableDefinitions.length === 0}>\n <ListFilterPlus size={13} />\n Thêm bộ lọc\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {availableDefinitions.map(def => (\n <DropdownMenuItem key={def.id} className=\"flex items-center gap-2\" onClick={() => addFilter(def.id)}>\n {TYPE_ICONS[def.type]}\n {def.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <Separator />\n {activeFilters.length === 0 ? (\n <p className=\"py-6 text-center text-xs text-text-positive-muted\">Không có bộ lọc nào</p>\n ) : (\n <div className=\"flex flex-col gap-2 pt-1\">\n {activeFilters.map(filter => {\n const def = filterDefinitions.find(d => d.id === filter.definitionId);\n if (!def) return null;\n return (\n <FilterItem\n key={filter.id}\n filter={filter}\n definition={def}\n onRemove={() => removeFilter(filter.id)}\n onUpdate={value => updateFilter(filter.id, value)}\n />\n );\n })}\n </div>\n )}\n </div>\n </Activity>\n </div>\n\n {/ Vertical tab strip /}\n <div className=\"flex h-full flex-col border-l border-border bg-muted-bg-subtle text-sm\">\n {/<button\n type=\"button\"\n className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'columns' && 'bg-card')}\n onClick={() => setTab(tab === 'columns' ? null : 'columns')}\n >\n <Columns4Icon size={18} />\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Columns</span>\n </button>\n <Separator />*/}\n <button\n type=\"button\"\n className={cn('relative flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'filters' && 'bg-card')}\n onClick={() => setTab(tab === 'filters' ? null : 'filters')}\n >\n <ListFilterIcon size={18} />\n {activeFilters.length > 0 && (\n <span className=\"absolute top-2 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] leading-none text-primary-foreground\">\n {activeFilters.length}\n </span>\n )}\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Bộ lọc</span>\n </button>\n <Separator />\n </div>\n </div>\n </ResizablePanel>\n );\n};\n"],"mappings":"w6BAuCA,MAAM,EAAkD,CACtD,IAAK,EAAC,EAAD,CAAS,KAAM,EAAK,CAAA,EACzB,aAAc,EAAC,EAAD,CAAS,KAAM,EAAK,CAAA,EAClC,aAAc,EAAC,EAAD,CAAc,KAAM,EAAK,CAAA,EACvC,OAAQ,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EAC7B,KAAM,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,EAC3B,QAAS,EAAC,EAAD,CAAgB,KAAM,EAAK,CAAA,CACtC,EAIM,EAA8E,CAClF,CAAE,MAAO,KAAM,MAAO,UAAW,EACjC,CAAE,MAAO,KAAM,MAAO,gBAAiB,EACvC,CAAE,MAAO,KAAM,MAAO,aAAc,EACpC,CAAE,MAAO,MAAO,MAAO,aAAc,EACrC,CAAE,MAAO,KAAM,MAAO,aAAc,EACpC,CAAE,MAAO,MAAO,MAAO,gBAAiB,EACxC,CAAE,MAAO,UAAW,MAAO,cAAe,CAC5C,EAEM,EAA0E,CAC9E,CAAE,MAAO,WAAY,MAAO,MAAO,EACnC,CAAE,MAAO,SAAU,MAAO,MAAO,EACjC,CAAE,MAAO,cAAe,MAAO,cAAe,EAC9C,CAAE,MAAO,YAAa,MAAO,eAAgB,CAC/C,EAIA,SAAS,EAAkB,EAAoB,EAA+B,CAC5E,OAAQ,EAAM,KAAd,CACE,IAAK,aAEH,OADK,EAAM,MACJ,EAAI,SAAS,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,OAAS,EAAM,MAD9C,WAG3B,IAAK,MAEH,OADK,EAAM,OAAO,OACX,EAAM,OAAO,IAAI,GAAK,EAAI,SAAS,KAAK,GAAK,EAAE,QAAU,CAAC,CAAC,EAAE,OAAS,CAAC,CAAC,CAAC,KAAK,IAAI,EADxD,WAGnC,IAAK,aAIH,MAHI,CAAC,EAAM,MAAQ,CAAC,EAAM,GAAW,sBACjC,EAAM,MAAQ,EAAM,GAAW,GAAG,EAAM,KAAK,KAAK,EAAM,KACxD,EAAM,KAAa,MAAM,EAAM,OAC5B,OAAO,EAAM,KAEtB,IAAK,SAAU,CACb,IAAM,EAAK,CAAE,GAAI,IAAK,GAAI,IAAK,GAAI,IAAK,IAAK,IAAK,GAAI,IAAK,IAAK,IAAK,QAAS,cAAe,EAAE,EAAM,UAGrG,OAFI,EAAM,QAAU,IAAA,GAAkB,EAClC,EAAM,WAAa,UAAkB,GAAG,EAAG,GAAG,EAAM,MAAM,KAAK,EAAM,SAAW,MAC7E,GAAG,EAAG,GAAG,EAAM,OACxB,CACA,IAAK,OAAQ,CACX,IAAM,EAAK,CACT,SAAU,OACV,OAAQ,KACR,cAAe,eACf,YAAa,eACf,EAAE,EAAM,UACR,OAAO,EAAM,MAAQ,GAAG,EAAG,IAAI,EAAM,MAAM,GAAK,CAClD,CACA,IAAK,UAEH,OADI,EAAM,QAAU,KAAa,iBAC1B,EAAM,MAAQ,KAAO,OAChC,CACF,CAIA,MAAM,GAIA,CAAE,QAAO,aAAY,cACzB,EAAC,MAAD,CAAK,UAAU,0BACX,UAAA,EAAW,SAAW,CAAC,EAAA,CAAG,SAAW,EACrC,EAAC,IAAD,CAAG,UAAU,mCAAmC,SAAA,mBAAoB,CAAA,EAEpE,EAAW,QAAS,IAAI,GACtB,EAAC,EAAD,CAEE,UAAW,EACT,8GACA,EAAM,OAAO,SAAS,EAAO,KAAK,GAAK,0CACzC,EALF,SAAA,CAOE,EAAC,EAAD,CACE,QAAS,EAAM,OAAO,SAAS,EAAO,KAAK,EAC3C,gBAAiB,GAAW,CAE1B,EAAS,CAAE,KAAM,MAAO,OADX,EAAU,CAAC,GAAG,EAAM,OAAQ,EAAO,KAAK,EAAI,EAAM,OAAO,OAAO,GAAK,IAAM,EAAO,KAAK,CAC/D,CAAC,CACxC,CACD,CAAA,EACD,EAAC,OAAD,CAAM,UAAU,UAAW,SAAA,EAAO,KAAY,CAAA,CACzC,CAdA,EAAA,EAAO,KAcP,CACR,CAEA,CAAA,EAGD,GAIA,CAAE,QAAO,aAAY,cACzB,EAAC,MAAD,CAAK,UAAU,0BACX,UAAA,EAAW,SAAW,CAAC,EAAA,CAAG,SAAW,EACrC,EAAC,IAAD,CAAG,UAAU,mCAAmC,SAAA,mBAAoB,CAAA,EAEpE,EAAW,QAAS,IAAI,GACtB,EAAC,EAAD,CAEE,UAAW,EACT,8GACA,EAAM,QAAU,EAAO,OAAS,0CAClC,EALF,SAAA,CAOE,EAAC,EAAD,CACE,QAAS,EAAM,QAAU,EAAO,MAChC,gBAAiB,GAAW,CAC1B,EAAS,CAAE,KAAM,aAAc,MAAO,EAAU,EAAO,MAAQ,IAAK,CAAC,CACvE,CACD,CAAA,EACD,EAAC,OAAD,CAAM,UAAU,UAAW,SAAA,EAAO,KAAY,CAAA,CACzC,CAbA,EAAA,EAAO,KAaP,CACR,CAEA,CAAA,EAGD,GAGA,CAAE,QAAO,cACb,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,mCAAmC,SAAA,SAAa,CAAA,EAChE,EAAC,EAAD,CAAO,KAAK,OAAO,KAAK,KAAK,MAAO,EAAM,MAAQ,GAAI,cAAe,GAAK,EAAS,CAAE,GAAG,EAAO,KAAM,GAAK,IAAA,EAAU,CAAC,CAAI,CAAA,CACtH,CACL,CAAA,EAAA,EAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,mCAAmC,SAAA,UAAc,CAAA,EACjE,EAAC,EAAD,CAAO,KAAK,OAAO,KAAK,KAAK,MAAO,EAAM,IAAM,GAAI,cAAe,GAAK,EAAS,CAAE,GAAG,EAAO,GAAI,GAAK,IAAA,EAAU,CAAC,CAAI,CAAA,CAClH,CACF,CAAA,CAAA,IAGD,GAGA,CAAE,QAAO,cACb,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACE,EAAC,EAAD,CAAQ,MAAO,EAAM,SAAU,cAAe,GAAM,EAAS,CAAE,GAAG,EAAO,SAAU,CAAoC,CAAC,EAAxH,SAAA,CACE,EAAC,EAAD,CAAe,KAAK,KAClB,SAAA,EAAC,EAAD,CAAc,CAAA,CACD,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAiB,IAAI,GACpB,EAAC,EAAD,CAA2B,MAAO,EAAG,MAClC,SAAA,EAAG,KACM,EAFK,EAAG,KAER,CACb,CACY,CAAA,CACT,IACR,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACL,YAAY,UACZ,MAAO,EAAM,OAAS,GACtB,cAAe,GAAK,EAAS,CAAE,GAAG,EAAO,MAAO,EAAI,OAAO,CAAC,EAAI,IAAA,EAAU,CAAC,CAC5E,CAAA,EACA,EAAM,WAAa,WAClB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACL,YAAY,cACZ,MAAO,EAAM,SAAW,GACxB,cAAe,GAAK,EAAS,CAAE,GAAG,EAAO,QAAS,EAAI,OAAO,CAAC,EAAI,IAAA,EAAU,CAAC,CAC9E,CAAA,CAEA,IAGD,GAGA,CAAE,QAAO,cACb,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACE,EAAC,EAAD,CAAQ,MAAO,EAAM,SAAU,cAAe,GAAM,EAAS,CAAE,GAAG,EAAO,SAAU,CAAkC,CAAC,EAAtH,SAAA,CACE,EAAC,EAAD,CAAe,KAAK,KAClB,SAAA,EAAC,EAAD,CAAc,CAAA,CACD,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAe,IAAI,GAClB,EAAC,EAAD,CAA2B,MAAO,EAAG,MAClC,SAAA,EAAG,KACM,EAFK,EAAG,KAER,CACb,CACY,CAAA,CACT,CACR,CAAA,EAAA,EAAC,EAAD,CAAO,KAAK,OAAO,KAAK,KAAK,YAAY,kBAAkB,MAAO,EAAM,MAAO,cAAe,GAAK,EAAS,CAAE,GAAG,EAAO,MAAO,CAAE,CAAC,CAAI,CAAA,CACnI,IAGD,EAAkB,CACtB,CAAE,MAAO,KAAM,MAAO,EAAuB,EAC7C,CAAE,MAAO,QAAS,MAAO,EAAwB,EACjD,CAAE,MAAO,iBAAkB,MAAO,IAAuB,CAC3D,EAEM,GAGA,CAAE,QAAO,cACb,EAAC,MAAD,CAAK,UAAU,0BACZ,SAAA,EAAgB,KAAK,CAAE,QAAO,MAAO,KACpC,EAAC,EAAD,CAEE,KAAK,SACL,SAAU,GACV,QAAQ,UACR,UAAW,EACT,0DACA,EAAM,QAAU,EAAI,+BAAiC,0BACvD,EACA,YAAe,EAAS,CAAE,KAAM,UAAW,MAAO,CAAE,CAAC,EAEpD,SAAA,CACK,EAXD,CAWC,CACT,CACE,CAAA,EAGP,SAAS,EAAa,CAAE,QAAO,aAAY,YAAsG,CAC/I,OAAQ,EAAM,KAAd,CACE,IAAK,MACH,OAAO,EAAC,EAAD,CAAwB,QAAmB,aAAsB,UAAW,CAAA,EACrF,IAAK,aACH,OAAO,EAAC,EAAD,CAA8B,QAAmB,aAAsB,UAAW,CAAA,EAC3F,IAAK,aACH,OAAO,EAAC,EAAD,CAA8B,QAAiB,UAAW,CAAA,EACnE,IAAK,SACH,OAAO,EAAC,EAAD,CAA2B,QAAiB,UAAW,CAAA,EAChE,IAAK,OACH,OAAO,EAAC,EAAD,CAAyB,QAAiB,UAAW,CAAA,EAC9D,IAAK,UACH,OAAO,EAAC,EAAD,CAA4B,QAAiB,UAAW,CAAA,CACnE,CACF,CAIA,MAAM,GAKA,CAAE,SAAQ,aAAY,WAAU,cACpC,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,EAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAU,wDACV,eAAe,wBALjB,SAAA,CAOE,EAAC,OAAD,CAAM,UAAU,0CAA2C,SAAA,EAAW,KAAY,CAAA,EAClF,EAAC,OAAD,CAAM,UAAU,2CAA4C,SAAA,EAAkB,EAAO,MAAO,CAAU,CAAQ,CAAA,CACxG,GACM,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,WAAW,MAAM,QAAQ,KAAK,SAAxD,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,mCACb,SAAA,EAAC,MAAD,CAAK,UAAU,4BAAf,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,EAAW,EAAW,KAAY,CAAA,EAC9E,EAAC,IAAD,CAAG,UAAU,cAAe,SAAA,EAAW,KAAS,CAAA,CAC7C,GACF,CAAA,EACL,EAAC,EAAD,CAAc,MAAO,EAAO,MAAmB,aAAY,SAAU,CAAW,CAAA,CAClE,CACT,CAAA,CAAA,CAAA,CAAA,EACT,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,OAAO,MAAM,SAAS,UAAU,SAAS,QAAS,EAC1F,SAAA,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,IA8CM,MAAsB,CAEjC,GAAM,CAAE,oBAAmB,gBAAe,YAAW,eAAc,gBAAiB,EAAwB,EAEtG,CAAC,EAAK,GAAU,EAAuC,IAAI,EAE3D,EAAuB,EAAkB,OAAO,GAAO,CAAC,EAAc,KAAK,GAAK,EAAE,eAAiB,EAAI,EAAE,CAAC,EAEhH,OACE,EAAC,EAAD,CAAgB,YAAa,GAAI,UAAW,EAAG,UAAW,IAAQ,KAAO,WAAa,UAAU,EAC9F,SAAA,EAAC,MAAD,CAAK,UAAU,kDAAf,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,iCAuBb,SAAA,EAAC,EAAD,CAAU,KAAM,IAAQ,UAAY,UAAY,SAC9C,SAAA,EAAC,MAAD,CAAK,UAAU,oCAAf,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,0CAAf,SAAA,CACE,EAAC,IAAD,CAAG,UAAU,cAAc,SAAA,QAAS,CAAA,EACpC,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAqB,QAAA,GACnB,SAAA,EAAC,EAAD,CAAQ,QAAQ,UAAU,MAAM,QAAQ,SAAU,EAAqB,SAAW,EAAlF,SAAA,CACE,EAAC,EAAD,CAAgB,KAAM,EAAK,CAAA,EAAC,aAEtB,GACW,CAAA,EACrB,EAAC,EAAD,CAAqB,MAAM,MACxB,SAAA,EAAqB,IAAI,GACxB,EAAC,EAAD,CAA+B,UAAU,0BAA0B,YAAe,EAAU,EAAI,EAAE,EAAlG,SAAA,CACG,EAAW,EAAI,MACf,EAAI,KACW,CAHK,EAAA,EAAI,EAGT,CACnB,CACkB,CAAA,CACT,CAAA,CAAA,CACX,IACL,EAAC,EAAD,CAAY,CAAA,EACX,EAAc,SAAW,EACxB,EAAC,IAAD,CAAG,UAAU,oDAAoD,SAAA,qBAAsB,CAAA,EAEvF,EAAC,MAAD,CAAK,UAAU,2BACZ,SAAA,EAAc,IAAI,GAAU,CAC3B,IAAM,EAAM,EAAkB,KAAK,GAAK,EAAE,KAAO,EAAO,YAAY,EAEpE,OADK,EAEH,EAAC,EAAD,CAEU,SACR,WAAY,EACZ,aAAgB,EAAa,EAAO,EAAE,EACtC,SAAU,GAAS,EAAa,EAAO,GAAI,CAAK,CACjD,EALM,EAAO,EAKb,EARc,IAUnB,CAAC,CACE,CAAA,CAEJ,GACG,CAAA,CACP,CAAA,EAGL,EAAC,MAAD,CAAK,UAAU,yEAAf,SAAA,CAUE,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAG,2EAA4E,IAAQ,WAAa,SAAS,EACxH,YAAe,EAAO,IAAQ,UAAY,KAAO,SAAS,EAH5D,SAAA,CAKE,EAAC,EAAD,CAAgB,KAAM,EAAK,CAAA,EAC1B,EAAc,OAAS,GACtB,EAAC,OAAD,CAAM,UAAU,6IACb,SAAA,EAAc,MACX,CAAA,EAER,EAAC,OAAD,CAAM,UAAU,yCAAyC,SAAA,QAAY,CAAA,CAC/D,CACR,CAAA,EAAA,EAAC,EAAD,CAAY,CAAA,CACT,CACF,CAAA,CAAA,GACS,CAAA,CAEpB"}
1	+ {"version":3,"file":"filter-BCNjqiBx.mjs","names":[],"sources":["../packages/components/features/tables/components/table/filter.tsx"],"sourcesContent":["/*\n @file filter.tsx\n * Collapsible side-panel with column-visibility toggles and a dynamic filter builder.\n \n - \"Columns\" tab: toggle individual column visibility.\n * - \"Filters\" tab: \"Add Filter\" dropdown → active filter chips → per-filter Popover editor.\n /\nimport { Activity, useState } from 'react';\n\nimport { CalendarIcon, HashIcon, ListFilterIcon, ListFilterPlus, TagIcon, ToggleLeftIcon, Trash2Icon, TypeIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { ResizablePanel } from '@/components/ui/resizable';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useUITableFilterContext } from '../../hooks/use-context';\nimport type {\n ActiveFilter,\n BooleanFilterValue,\n DateRangeFilterValue,\n FilterDefinition,\n FilterType,\n FilterValue,\n NumberFilterValue,\n SingleTagFilterValue,\n TagFilterValue,\n TextFilterValue,\n} from '../../types';\n\n// ── icons per filter type ──────────────────────────────────────────────────────\n\nconst TYPE_ICONS: Record<FilterType, React.ReactNode> = {\n tag: <TagIcon size={14} />,\n 'single-tag': <TagIcon size={14} />,\n 'date-range': <CalendarIcon size={14} />,\n number: <HashIcon size={14} />,\n text: <TypeIcon size={14} />,\n boolean: <ToggleLeftIcon size={14} />,\n};\n\n// ── operator options ───────────────────────────────────────────────────────────\n\nconst NUMBER_OPERATORS: { value: NumberFilterValue['operator']; label: string }[] = [\n { value: 'eq', label: 'Bằng (=)' },\n { value: 'ne', label: 'Không bằng (≠)' },\n { value: 'gt', label: 'Lớn hơn (>)' },\n { value: 'gte', label: 'Ít nhất (≥)' },\n { value: 'lt', label: 'Nhỏ hơn (<)' },\n { value: 'lte', label: 'Nhiều nhất (≤)' },\n { value: 'between', label: 'Trong khoảng' },\n];\n\nconst TEXT_OPERATORS: { value: TextFilterValue['operator']; label: string }[] = [\n { value: 'contains', label: 'Chứa' },\n { value: 'equals', label: 'Bằng' },\n { value: 'starts-with', label: 'Bắt đầu bằng' },\n { value: 'ends-with', label: 'Kết thúc bằng' },\n];\n\n// ── summary label ──────────────────────────────────────────────────────────────\n\nfunction formatFilterValue(value: FilterValue, def: FilterDefinition): string {\n switch (value.type) {\n case 'single-tag': {\n if (!value.value) return 'Chưa đặt';\n return def.options?.find(o => o.value === value.value)?.label ?? value.value;\n }\n case 'tag': {\n if (!value.values.length) return 'Chưa đặt';\n return value.values.map(v => def.options?.find(o => o.value === v)?.label ?? v).join(', ');\n }\n case 'date-range': {\n if (!value.from && !value.to) return 'Ngày không xác định';\n if (value.from && value.to) return `${value.from} → ${value.to}`;\n if (value.from) return `từ ${value.from}`;\n return `đến ${value.to}`;\n }\n case 'number': {\n const op = { eq: '=', ne: '≠', gt: '>', gte: '≥', lt: '<', lte: '≤', between: 'trong khoảng' }[value.operator];\n if (value.value === undefined) return op;\n if (value.operator === 'between') return `${op} ${value.value} – ${value.valueTo ?? '?'}`;\n return `${op} ${value.value}`;\n }\n case 'text': {\n const op = {\n contains: 'chứa',\n equals: 'là',\n 'starts-with': 'bắt đầu bằng',\n 'ends-with': 'kết thúc bằng',\n }[value.operator];\n return value.value ? `${op} \"${value.value}\"` : op;\n }\n case 'boolean':\n if (value.value === null) return 'Không xác định';\n return value.value ? 'Có' : 'Không';\n }\n}\n\n// ── filter editors ─────────────────────────────────────────────────────────────\n\nconst TagFilterEditor: React.FC<{\n value: TagFilterValue;\n definition: FilterDefinition;\n onChange: (v: TagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.values.includes(option.value) && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.values.includes(option.value)}\n onCheckedChange={checked => {\n const next = checked ? [...value.values, option.value] : value.values.filter(v => v !== option.value);\n onChange({ type: 'tag', values: next });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst SingleTagFilterEditor: React.FC<{\n value: SingleTagFilterValue;\n definition: FilterDefinition;\n onChange: (v: SingleTagFilterValue) => void;\n}> = ({ value, definition, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {(definition.options ?? []).length === 0 ? (\n <p className=\"text-xs text-text-positive-muted\">Không có tùy chọn</p>\n ) : (\n definition.options!.map(option => (\n <Label\n key={option.value}\n className={cn(\n 'flex items-center gap-2 bg-secondary-bg-subtle hover:bg-secondary-muted px-4 py-2 rounded transition-colors',\n value.value === option.value && 'bg-primary-muted hover:bg-primary-subtle'\n )}\n >\n <Checkbox\n checked={value.value === option.value}\n onCheckedChange={checked => {\n onChange({ type: 'single-tag', value: checked ? option.value : null });\n }}\n />\n <span className=\"text-sm\">{option.label}</span>\n </Label>\n ))\n )}\n </div>\n);\n\nconst DateRangeFilterEditor: React.FC<{\n value: DateRangeFilterValue;\n onChange: (v: DateRangeFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Từ ngày</span>\n <Input type=\"date\" size=\"md\" value={value.from ?? ''} onValueChange={v => onChange({ ...value, from: v \|\| undefined })} />\n </div>\n <div className=\"flex flex-col gap-1\">\n <span className=\"text-text-positive-muted text-xs\">Đến ngày</span>\n <Input type=\"date\" size=\"md\" value={value.to ?? ''} onValueChange={v => onChange({ ...value, to: v \|\| undefined })} />\n </div>\n </div>\n);\n\nconst NumberFilterEditor: React.FC<{\n value: NumberFilterValue;\n onChange: (v: NumberFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as NumberFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {NUMBER_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Giá trị\"\n value={value.value ?? ''}\n onValueChange={v => onChange({ ...value, value: v ? Number(v) : undefined })}\n />\n {value.operator === 'between' && (\n <Input\n type=\"number\"\n size=\"md\"\n placeholder=\"Đến giá trị\"\n value={value.valueTo ?? ''}\n onValueChange={v => onChange({ ...value, valueTo: v ? Number(v) : undefined })}\n />\n )}\n </div>\n);\n\nconst TextFilterEditor: React.FC<{\n value: TextFilterValue;\n onChange: (v: TextFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-3 p-3\">\n <Select value={value.operator} onValueChange={op => onChange({ ...value, operator: op as TextFilterValue['operator'] })}>\n <SelectTrigger size=\"sm\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {TEXT_OPERATORS.map(op => (\n <SelectItem key={op.value} value={op.value}>\n {op.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input type=\"text\" size=\"md\" placeholder=\"Nhập văn bản...\" value={value.value} onValueChange={v => onChange({ ...value, value: v })} />\n </div>\n);\n\nconst BOOLEAN_OPTIONS = [\n { label: 'Có', value: true as boolean \| null },\n { label: 'Không', value: false as boolean \| null },\n { label: 'Không xác định', value: null as boolean \| null },\n];\n\nconst BooleanFilterEditor: React.FC<{\n value: BooleanFilterValue;\n onChange: (v: BooleanFilterValue) => void;\n}> = ({ value, onChange }) => (\n <div className=\"flex flex-col gap-1 p-3\">\n {BOOLEAN_OPTIONS.map(({ label, value: v }) => (\n <Button\n key={label}\n type=\"button\"\n tabIndex={-1}\n variant=\"outline\"\n className={cn(\n 'rounded px-3 py-1.5 text-left text-sm transition-colors',\n value.value === v ? 'bg-primary-muted font-medium' : 'hover:bg-muted-bg-subtle'\n )}\n onClick={() => onChange({ type: 'boolean', value: v })}\n >\n {label}\n </Button>\n ))}\n </div>\n);\n\nfunction FilterEditor({ value, definition, onChange }: { value: FilterValue; definition: FilterDefinition; onChange: (v: FilterValue) => void }) {\n switch (value.type) {\n case 'tag':\n return <TagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'single-tag':\n return <SingleTagFilterEditor value={value} definition={definition} onChange={onChange} />;\n case 'date-range':\n return <DateRangeFilterEditor value={value} onChange={onChange} />;\n case 'number':\n return <NumberFilterEditor value={value} onChange={onChange} />;\n case 'text':\n return <TextFilterEditor value={value} onChange={onChange} />;\n case 'boolean':\n return <BooleanFilterEditor value={value} onChange={onChange} />;\n }\n}\n\n// ── filter item chip ───────────────────────────────────────────────────────────\n\nconst FilterItem: React.FC<{\n filter: ActiveFilter;\n definition: FilterDefinition;\n onRemove: () => void;\n onUpdate: (value: FilterValue) => void;\n}> = ({ filter, definition, onRemove, onUpdate }) => (\n <div className=\"flex items-center gap-1\">\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className=\"flex-1 bg-white max-w-[calc(100%-32px)] justify-start\"\n innerClassName=\"flex truncate gap-1.5\"\n >\n <span className=\"shrink-0 text-text-positive font-medium\">{definition.label}</span>\n <span className=\"truncate text-xs text-text-positive-weak\">{formatFilterValue(filter.value, definition)}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-64 p-0\" align=\"start\" side=\"bottom\">\n <div className=\"border-b border-border px-3 py-2\">\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-text-positive-muted\">{TYPE_ICONS[definition.type]}</span>\n <p className=\"font-medium\">{definition.label}</p>\n </div>\n </div>\n <FilterEditor value={filter.value} definition={definition} onChange={onUpdate} />\n </PopoverContent>\n </Popover>\n <Button type=\"button\" size=\"icon\" variant=\"soft\" color=\"danger\" className=\"shrink\" onClick={onRemove}>\n <Trash2Icon size={13} />\n </Button>\n </div>\n);\n\n// ── column visibility row ──────────────────────────────────────────────────────\n\n// const ColumnVisibility: React.FC<{\n// checked: boolean;\n// title: string;\n// onCheckedChange?: (checked: boolean) => void;\n// }> = ({ checked, title, onCheckedChange }) => (\n// <Label>\n// <Checkbox checked={checked} onCheckedChange={onCheckedChange} />\n// <p className=\"text-sm\">{title}</p>\n// </Label>\n// );\n\n// ── main component ─────────────────────────────────────────────────────────────\n\n/\n Collapsible side-panel that lets users toggle column visibility and build\n * row filters without leaving the table view.\n \n The panel collapses to a narrow icon strip when no tab is active and expands\n * to at least 64 units when the \"Columns\" or \"Filters\" tab is selected.\n \n Wire filter capability by passing `filterDefinitions` and `onFilterChange` to\n * the parent `UITableProvider`.\n \n @example\n * ```tsx\n * <UITableProvider\n * filterDefinitions={[\n * { id: 'status', label: 'Status', type: 'tag', options: [{ label: 'Active', value: 'active' }] },\n * { id: 'created', label: 'Created At', type: 'date-range' },\n * { id: 'amount', label: 'Amount', type: 'number' },\n * ]}\n * onFilterChange={filters => console.log(filters)}\n * >\n * <ResizablePanelGroup direction=\"horizontal\">\n * <ResizablePanel><UITable /></ResizablePanel>\n * <ResizableHandle />\n * <UITableFilter />\n * </ResizablePanelGroup>\n * </UITableProvider>\n * ```\n /\nexport const UITableFilter = () => {\n // const { table } = useUITableContext();\n const { filterDefinitions, activeFilters, addFilter, removeFilter, updateFilter } = useUITableFilterContext();\n\n const [tab, setTab] = useState<'columns' \| 'filters' \| null>(null);\n\n const availableDefinitions = filterDefinitions.filter(def => !activeFilters.some(f => f.definitionId === def.id));\n\n return (\n <ResizablePanel defaultSize={25} className={cn('bg-card', tab === null ? 'max-w-8!' : 'min-w-64')}>\n <div className=\"relative z-20 flex size-full bg-muted-bg-subtle\">\n <div className=\"min-w-0 flex-1 overflow-hidden\">\n {/ Columns tab /}\n {/<Activity mode={tab === 'columns' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <p className=\"px-2 font-medium\">Columns Visibility</p>\n <Separator />\n <div className=\"flex flex-col gap-4 pt-4\">\n {table.getAllColumns().map(column => {\n if (['select', 'actions'].includes(column.id)) return null;\n return (\n <ColumnVisibility\n key={column.id}\n checked={column.getIsVisible()}\n title={String(column.columnDef.header)}\n onCheckedChange={value => column.toggleVisibility(!!value)}\n />\n );\n })}\n </div>\n </div>\n </Activity>/}\n\n {/ Filters tab /}\n <Activity mode={tab === 'filters' ? 'visible' : 'hidden'}>\n <div className=\"flex size-full flex-col gap-2 p-4\">\n <div className=\"flex items-center justify-between gap-2\">\n <p className=\"font-medium\">Bộ lọc</p>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" color=\"muted\" disabled={availableDefinitions.length === 0}>\n <ListFilterPlus size={13} />\n Thêm bộ lọc\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {availableDefinitions.map(def => (\n <DropdownMenuItem key={def.id} className=\"flex items-center gap-2\" onClick={() => addFilter(def.id)}>\n {TYPE_ICONS[def.type]}\n {def.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <Separator />\n {activeFilters.length === 0 ? (\n <p className=\"py-6 text-center text-xs text-text-positive-muted\">Không có bộ lọc nào</p>\n ) : (\n <div className=\"flex flex-col gap-2 pt-1\">\n {activeFilters.map(filter => {\n const def = filterDefinitions.find(d => d.id === filter.definitionId);\n if (!def) return null;\n return (\n <FilterItem\n key={filter.id}\n filter={filter}\n definition={def}\n onRemove={() => removeFilter(filter.id)}\n onUpdate={value => updateFilter(filter.id, value)}\n />\n );\n })}\n </div>\n )}\n </div>\n </Activity>\n </div>\n\n {/ Vertical tab strip /}\n <div className=\"flex h-full flex-col border-l border-border bg-muted-bg-subtle text-sm\">\n {/<button\n type=\"button\"\n className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'columns' && 'bg-card')}\n onClick={() => setTab(tab === 'columns' ? null : 'columns')}\n >\n <Columns4Icon size={18} />\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Columns</span>\n </button>\n <Separator />*/}\n <button\n type=\"button\"\n className={cn('relative flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'filters' && 'bg-card')}\n onClick={() => setTab(tab === 'filters' ? null : 'filters')}\n >\n <ListFilterIcon size={18} />\n {activeFilters.length > 0 && (\n <span className=\"absolute top-2 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] leading-none text-primary-foreground\">\n {activeFilters.length}\n </span>\n )}\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Bộ lọc</span>\n </button>\n <Separator />\n </div>\n </div>\n </ResizablePanel>\n );\n};\n"],"mappings":"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"}

package/dist/{flex-BTPF2-F6.d.cts → flex-CWo0w9K1.d.cts} RENAMED Viewed

@@ -2,13 +2,13 @@ import { VariantProps } from "class-variance-authority";
 //#region packages/components/layouts/flex.d.ts
 declare const flexVariants: (props?: ({
   vertical?: boolean | null | undefined;
-  width?: "auto" | "full" | "fit" | "screen" | "min" | "max" | "null" | null | undefined;
+  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
   wrap?: boolean | null | undefined;
   margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-  justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
-  align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = {
   /** Additional Tailwind classes merged on top of the variant-generated classes. */
@@ -100,4 +100,4 @@ type Props = {
 declare const Flex: import("react").MemoExoticComponent<({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
 //#endregion
 export { Flex as t };
-//# sourceMappingURL=flex-BTPF2-F6.d.cts.map
+//# sourceMappingURL=flex-CWo0w9K1.d.cts.map

package/dist/{flex-BTPF2-F6.d.mts → flex-CWo0w9K1.d.mts} RENAMED Viewed

@@ -2,13 +2,13 @@ import { VariantProps } from "class-variance-authority";
 //#region packages/components/layouts/flex.d.ts
 declare const flexVariants: (props?: ({
   vertical?: boolean | null | undefined;
-  width?: "auto" | "full" | "fit" | "screen" | "min" | "max" | "null" | null | undefined;
+  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
   wrap?: boolean | null | undefined;
   margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-  justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
-  align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = {
   /** Additional Tailwind classes merged on top of the variant-generated classes. */
@@ -100,4 +100,4 @@ type Props = {
 declare const Flex: import("react").MemoExoticComponent<({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
 //#endregion
 export { Flex as t };
-//# sourceMappingURL=flex-BTPF2-F6.d.mts.map
+//# sourceMappingURL=flex-CWo0w9K1.d.mts.map

package/dist/{index-C9JAujMq.d.cts → index-BapooVnN.d.cts} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { t as AnyEntity } from "./types-cKvPPVBe.cjs";
 import "./statistic-Bpif8p8R.cjs";
-import "./button-BnoPktln.cjs";
+import "./button-DQLIL8K2.cjs";
 import "./tooltip-BVYKhsC2.cjs";
 import "./separator-Cvxkpzrj.cjs";
 import "./index-DJKJt7oV.cjs";
@@ -8,20 +8,20 @@ import "./badge-BPiU1Ss2.cjs";
 import "./index-CLx89ATZ.cjs";
 import "./index-DvC1inRy.cjs";
 import "./index-DRAyYm8g.cjs";
-import "./flex-BTPF2-F6.cjs";
+import "./flex-CWo0w9K1.cjs";
 import "./google-vajkoOiC.cjs";
 import "./paragraph-CkCNIsvz.cjs";
 import "./title-D8BSkLsi.cjs";
 import "./upload-image-DM-tkZuR.cjs";
-import { n as InputVariantProps } from "./input-D73TrUof.cjs";
-import "./search-input-h_3MoMqK.cjs";
+import { n as InputVariantProps } from "./input-DxNK7Wo6.cjs";
+import "./search-input-C8feOKe2.cjs";
 import "./alert-C8wdckO8.cjs";
 import "./alert-dialog-8aDimwPK.cjs";
 import "./aspect-ratio-DqXWkGJQ.cjs";
 import "./avatar-yN3dNBsZ.cjs";
 import "./button-group-CP48qR0o.cjs";
-import "./calendar-iDMPT1kI.cjs";
-import "./carousel-bBvM31sh.cjs";
+import "./calendar-DHcoDDIc.cjs";
+import "./carousel-D0jTbSoW.cjs";
 import "./chart-D8tNf0_6.cjs";
 import "./checkbox-Cuc-_UcF.cjs";
 import "./collapsible-D3MS6pMC.cjs";
@@ -36,16 +36,16 @@ import "./file-uploader-DyHOMFK3.cjs";
 import "./form-D0M_qGX_.cjs";
 import "./hover-card-JeShfV9g.cjs";
 import "./input-otp-DGf28Nq2.cjs";
-import "./item-BxUBO7Hd.cjs";
+import "./item-CtLZgUB6.cjs";
 import "./label-CKywNz0h.cjs";
 import "./menubar-PDJeDtHh.cjs";
 import "./multi-select-V3chK_bJ.cjs";
 import "./navigation-menu-BCjjeblq.cjs";
-import "./pagination-BRw-yZBY.cjs";
+import "./pagination-DqJlXNY0.cjs";
 import "./popover-qfF3o0zL.cjs";
 import "./progress-BpWaSlPG.cjs";
 import "./radio-group-D_ssq0Q2.cjs";
-import "./resizable-CWmitx5U.cjs";
+import "./resizable-B61Fbl57.cjs";
 import "./scroll-area-BpSwutyr.cjs";
 import "./select-UNtSe_Fs.cjs";
 import "./sheet-BBvQsKM_.cjs";
@@ -53,8 +53,8 @@ import "./slider-KvzhtIbT.cjs";
 import "./sonner-D-rrTnjn.cjs";
 import "./switch-Ce5Pre2e.cjs";
 import "./tabs-DLEtBGOr.cjs";
-import "./toggle-CqTmiPDi.cjs";
-import "./toggle-group--bJylFDV.cjs";
+import "./toggle-v1PgAvdG.cjs";
+import "./toggle-group-DM5tS0Kt.cjs";
 import { ComponentType } from "react";
 import { AccessorKeyColumnDef, CellContext, Column, ColumnPinningPosition, ColumnPinningState, Header, HeaderGroup, Row, RowSelectionState, Table } from "@tanstack/react-table";
 //#region packages/components/features/tables/components/atoms/empty.d.ts
@@ -737,4 +737,4 @@ declare const UITableTooltipActions: ComponentType<{
 }>;
 //#endregion
 export { FilterType as $, UITableLoadMore as A, TUITableWrapper as At, UITableEmptyDisplay as B, UITableTooltipActions as C, TUITableHeadCellOption as Ct, UITableContainer as D, TUITableInnerWrapper as Dt, UITableProvider as E, TUITableInnerTable as Et, UITableHeadCellOption as F, ActiveFilter as G, UITableCellActions as H, UITableHeadCell as I, ColumnAggregationType as J, BooleanFilterValue as K, UITableHead as L, UITableInnerTable as M, TagFilterValue as Mt, UITableHeadRow as N, TextFilterValue as Nt, UITableWrapper as O, TUITableLoadMore as Ot, UITableHeadCellSelect as P, UITableEmpty as Pt, FilterOption as Q, UITableFooterRow as R, UITableTooltip as S, TUITableHeadCell as St, UITableUserDataDisplay as T, TUITableHeadRow as Tt, UITableCell as U, UITableCellSelect as V, UITableBody as W, DateRangeFilterValue as X, CsvCell as Y, FilterDefinition as Z, UITableRemoveButton as _, TUITableCellSelect as _t, UITableCurrencyDisplay as a, TTableAnalysisContext as at, UITableSummaryBar as b, TUITableFooter as bt, UITableEditButton as c, TTableFilterContext as ct, UITableListDisplay as d, TTableInnerWrapperContext as dt, FilterValue as et, UITableMoreButton as f, TTableRowContext as ft, UITableProgressDisplay as g, TUITableCellActions as gt, UITablePhoneNumberDisplay as h, TUITableCell as ht, UITableBooleanDisplay as i, SummaryItem as it, UITableInnerWrapper as j, TableProviderProps as jt, UITableRow as k, TUITableRow as kt, UITableEmailDisplay as l, TTableHeadRowContext as lt, UITablePermalink as m, TUITableBody as mt, UITableAvatarNameDisplay as n, RowData as nt, UITableDateDisplay as o, TTableBodyContext as ot, UITableNameDisplay as p, TTableSummaryContext as pt, ColumnAggregation as q, UITableBadgeDisplay as r, SingleTagFilterValue as rt, UITableDescriptionDisplay as s, TTableContext as st, UITableAnalysisPanel as t, NumberFilterValue as tt, UITableFilter as u, TTableInnerTableContext as ut, UITableStatisticDisplay as v, TUITableColumn as vt, UITableTooltipFilter as w, TUITableHeadCellSelect as wt, UITableToggleButton as x, TUITableHead as xt, UITableStatusDisplay as y, TUITableEmptyDisplay as yt, UITableFooter as z };
-//# sourceMappingURL=index-C9JAujMq.d.cts.map
+//# sourceMappingURL=index-BapooVnN.d.cts.map

package/dist/{index-DnHoBjv7.d.mts → index-CFgFCg9H.d.mts} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { t as AnyEntity } from "./types-cKvPPVBe.mjs";
 import "./statistic-Bpif8p8R.mjs";
-import "./button-BnoPktln.mjs";
+import "./button-DQLIL8K2.mjs";
 import "./tooltip-BVYKhsC2.mjs";
 import "./separator-Cvxkpzrj.mjs";
 import "./index-DJKJt7oV.mjs";
@@ -8,20 +8,20 @@ import "./badge-BPiU1Ss2.mjs";
 import "./index-BMuVmm7f.mjs";
 import "./index-DvC1inRy.mjs";
 import "./index-DRAyYm8g.mjs";
-import "./flex-BTPF2-F6.mjs";
+import "./flex-CWo0w9K1.mjs";
 import "./google-vajkoOiC.mjs";
 import "./paragraph-CRo5eC7H.mjs";
 import "./title-D8BSkLsi.mjs";
 import "./upload-image-DM-tkZuR.mjs";
-import { n as InputVariantProps } from "./input-D73TrUof.mjs";
-import "./search-input-DEvYI6Rm.mjs";
+import { n as InputVariantProps } from "./input-DxNK7Wo6.mjs";
+import "./search-input-CoqwakbI.mjs";
 import "./alert-C8wdckO8.mjs";
 import "./alert-dialog-8aDimwPK.mjs";
 import "./aspect-ratio-DqXWkGJQ.mjs";
 import "./avatar-yN3dNBsZ.mjs";
 import "./button-group-Br7Cye6b.mjs";
-import "./calendar-BkV5hTX2.mjs";
-import "./carousel-D7VXWJ3S.mjs";
+import "./calendar-5VVBPn4F.mjs";
+import "./carousel-qH6YsFKK.mjs";
 import "./chart-D8tNf0_6.mjs";
 import "./checkbox-Cuc-_UcF.mjs";
 import "./collapsible-D3MS6pMC.mjs";
@@ -36,16 +36,16 @@ import "./file-uploader-DyHOMFK3.mjs";
 import "./form-D0M_qGX_.mjs";
 import "./hover-card-JeShfV9g.mjs";
 import "./input-otp-DGf28Nq2.mjs";
-import "./item-ChW41yKF.mjs";
+import "./item-Brbp9t6f.mjs";
 import "./label-CKywNz0h.mjs";
 import "./menubar-PDJeDtHh.mjs";
 import "./multi-select-C4ae_jaX.mjs";
 import "./navigation-menu-BCjjeblq.mjs";
-import "./pagination-BlLiOvY9.mjs";
+import "./pagination-BVA_yrBO.mjs";
 import "./popover-qfF3o0zL.mjs";
 import "./progress-BpWaSlPG.mjs";
 import "./radio-group-D_ssq0Q2.mjs";
-import "./resizable-CWmitx5U.mjs";
+import "./resizable-B61Fbl57.mjs";
 import "./scroll-area-BpSwutyr.mjs";
 import "./select-UNtSe_Fs.mjs";
 import "./sheet-BBvQsKM_.mjs";
@@ -53,8 +53,8 @@ import "./slider-KvzhtIbT.mjs";
 import "./sonner-C-sM3xU2.mjs";
 import "./switch-Ce5Pre2e.mjs";
 import "./tabs-DLEtBGOr.mjs";
-import "./toggle-CqTmiPDi.mjs";
-import "./toggle-group-l_Mi7NRg.mjs";
+import "./toggle-v1PgAvdG.mjs";
+import "./toggle-group-_PBz44Im.mjs";
 import { ComponentType } from "react";
 import { AccessorKeyColumnDef, CellContext, Column, ColumnPinningPosition, ColumnPinningState, Header, HeaderGroup, Row, RowSelectionState, Table } from "@tanstack/react-table";
 //#region packages/components/features/tables/components/atoms/empty.d.ts
@@ -737,4 +737,4 @@ declare const UITableTooltipActions: ComponentType<{
 }>;
 //#endregion
 export { FilterType as $, UITableLoadMore as A, TUITableWrapper as At, UITableEmptyDisplay as B, UITableTooltipActions as C, TUITableHeadCellOption as Ct, UITableContainer as D, TUITableInnerWrapper as Dt, UITableProvider as E, TUITableInnerTable as Et, UITableHeadCellOption as F, ActiveFilter as G, UITableCellActions as H, UITableHeadCell as I, ColumnAggregationType as J, BooleanFilterValue as K, UITableHead as L, UITableInnerTable as M, TagFilterValue as Mt, UITableHeadRow as N, TextFilterValue as Nt, UITableWrapper as O, TUITableLoadMore as Ot, UITableHeadCellSelect as P, UITableEmpty as Pt, FilterOption as Q, UITableFooterRow as R, UITableTooltip as S, TUITableHeadCell as St, UITableUserDataDisplay as T, TUITableHeadRow as Tt, UITableCell as U, UITableCellSelect as V, UITableBody as W, DateRangeFilterValue as X, CsvCell as Y, FilterDefinition as Z, UITableRemoveButton as _, TUITableCellSelect as _t, UITableCurrencyDisplay as a, TTableAnalysisContext as at, UITableSummaryBar as b, TUITableFooter as bt, UITableEditButton as c, TTableFilterContext as ct, UITableListDisplay as d, TTableInnerWrapperContext as dt, FilterValue as et, UITableMoreButton as f, TTableRowContext as ft, UITableProgressDisplay as g, TUITableCellActions as gt, UITablePhoneNumberDisplay as h, TUITableCell as ht, UITableBooleanDisplay as i, SummaryItem as it, UITableInnerWrapper as j, TableProviderProps as jt, UITableRow as k, TUITableRow as kt, UITableEmailDisplay as l, TTableHeadRowContext as lt, UITablePermalink as m, TUITableBody as mt, UITableAvatarNameDisplay as n, RowData as nt, UITableDateDisplay as o, TTableBodyContext as ot, UITableNameDisplay as p, TTableSummaryContext as pt, ColumnAggregation as q, UITableBadgeDisplay as r, SingleTagFilterValue as rt, UITableDescriptionDisplay as s, TTableContext as st, UITableAnalysisPanel as t, NumberFilterValue as tt, UITableFilter as u, TTableInnerTableContext as ut, UITableStatisticDisplay as v, TUITableColumn as vt, UITableTooltipFilter as w, TUITableHeadCellSelect as wt, UITableToggleButton as x, TUITableHead as xt, UITableStatusDisplay as y, TUITableEmptyDisplay as yt, UITableFooter as z };
-//# sourceMappingURL=index-DnHoBjv7.d.mts.map
+//# sourceMappingURL=index-CFgFCg9H.d.mts.map