@customafk/lunas-ui 0.2.74 → 0.2.76

package/dist/filter-DqedvThM.cjs.map

@@ -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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"}
+{"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":"wbAuCA,MAAM,EAAkD,CACtD,KAAK,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAD,CAAS,KAAM,EAAK,CAAA,EACzB,cAAc,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAD,CAAS,KAAM,EAAK,CAAA,EAClC,cAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,KAAM,EAAK,CAAA,EACvC,QAAQ,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EAC7B,MAAM,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,EAC3B,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,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,eACzB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BACX,UAAA,EAAW,SAAW,CAAC,EAAA,CAAG,SAAW,GACrC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,mCAAmC,SAAA,mBAAoB,CAAA,EAEpE,EAAW,QAAS,IAAI,IACtB,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,8GACA,EAAM,OAAO,SAAS,EAAO,KAAK,GAAK,0CACzC,EALF,SAAA,EAOE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,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,GACD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAW,SAAA,EAAO,KAAY,CAAA,CACzC,CAdA,EAAA,EAAO,KAcP,CACR,CAEA,CAAA,EAGD,GAIA,CAAE,QAAO,aAAY,eACzB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BACX,UAAA,EAAW,SAAW,CAAC,EAAA,CAAG,SAAW,GACrC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,mCAAmC,SAAA,mBAAoB,CAAA,EAEpE,EAAW,QAAS,IAAI,IACtB,EAAA,EAAA,KAAA,CAACD,EAAAA,MAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,8GACA,EAAM,QAAU,EAAO,OAAS,0CAClC,EALF,SAAA,EAOE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACE,QAAS,EAAM,QAAU,EAAO,MAChC,gBAAiB,GAAW,CAC1B,EAAS,CAAE,KAAM,aAAc,MAAO,EAAU,EAAO,MAAQ,IAAK,CAAC,CACvE,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAW,SAAA,EAAO,KAAY,CAAA,CACzC,CAbA,EAAA,EAAO,KAaP,CACR,CAEA,CAAA,EAGD,GAGA,CAAE,QAAO,eACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mCAAmC,SAAA,SAAa,CAAA,GAChE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,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,GAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mCAAmC,SAAA,UAAc,CAAA,GACjE,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,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,eACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,MAAO,EAAM,SAAU,cAAe,GAAM,EAAS,CAAE,GAAG,EAAO,SAAU,CAAoC,CAAC,EAAxH,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAK,KAClB,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAc,CAAA,CACD,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAiB,IAAI,IACpB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA2B,MAAO,EAAG,MAClC,SAAA,EAAG,KACM,EAFK,EAAG,KAER,CACb,CACY,CAAA,CACT,KACR,EAAA,EAAA,IAAA,CAACL,EAAAA,MAAD,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,YAClB,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,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,eACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,MAAO,EAAM,SAAU,cAAe,GAAM,EAAS,CAAE,GAAG,EAAO,SAAU,CAAkC,CAAC,EAAtH,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAK,KAClB,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAc,CAAA,CACD,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAe,IAAI,IAClB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA2B,MAAO,EAAG,MAClC,SAAA,EAAG,KACM,EAFK,EAAG,KAER,CACb,CACY,CAAA,CACT,CACR,CAAA,GAAA,EAAA,EAAA,IAAA,CAACL,EAAAA,MAAD,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,eACb,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BACZ,SAAA,EAAgB,KAAK,CAAE,QAAO,MAAO,MACpC,EAAA,EAAA,IAAA,CAACM,EAAAA,OAAD,CAEE,KAAK,SACL,SAAU,GACV,QAAQ,UACR,WAAA,EAAA,EAAA,GAAA,CACE,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,EAAA,EAAA,IAAA,CAAC,EAAD,CAAwB,QAAmB,aAAsB,UAAW,CAAA,EACrF,IAAK,aACH,OAAO,EAAA,EAAA,IAAA,CAAC,EAAD,CAA8B,QAAmB,aAAsB,UAAW,CAAA,EAC3F,IAAK,aACH,OAAO,EAAA,EAAA,IAAA,CAAC,EAAD,CAA8B,QAAiB,UAAW,CAAA,EACnE,IAAK,SACH,OAAO,EAAA,EAAA,IAAA,CAAC,EAAD,CAA2B,QAAiB,UAAW,CAAA,EAChE,IAAK,OACH,OAAO,EAAA,EAAA,IAAA,CAAC,EAAD,CAAyB,QAAiB,UAAW,CAAA,EAC9D,IAAK,UACH,OAAO,EAAA,EAAA,IAAA,CAAC,EAAD,CAA4B,QAAiB,UAAW,CAAA,CACnE,CACF,CAIA,MAAM,GAKA,CAAE,SAAQ,aAAY,WAAU,eACpC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAACF,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAU,wDACV,eAAe,wBALjB,SAAA,EAOE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,0CAA2C,SAAA,EAAW,KAAY,CAAA,GAClF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2CAA4C,SAAA,EAAkB,EAAO,MAAO,CAAU,CAAQ,CAAA,CACxG,GACM,CAAA,GAChB,EAAA,EAAA,KAAA,CAACG,EAAAA,eAAD,CAAgB,UAAU,WAAW,MAAM,QAAQ,KAAK,SAAxD,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mCACb,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4BAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,EAAW,EAAW,KAAY,CAAA,GAC9E,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,cAAe,SAAA,EAAW,KAAS,CAAA,CAC7C,GACF,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,MAAO,EAAO,MAAmB,aAAY,SAAU,CAAW,CAAA,CAClE,CACT,CAAA,CAAA,CAAA,CAAA,GACT,EAAA,EAAA,IAAA,CAACH,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,OAAO,MAAM,SAAS,UAAU,SAAS,QAAS,EAC1F,UAAA,EAAA,EAAA,IAAA,CAACI,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACjB,CAAA,CACL,IA8CM,MAAsB,CAEjC,GAAM,CAAE,oBAAmB,gBAAe,YAAW,eAAc,gBAAiBC,EAAAA,EAAwB,EAEtG,CAAC,EAAK,IAAA,EAAA,EAAA,SAAA,CAAiD,IAAI,EAE3D,EAAuB,EAAkB,OAAO,GAAO,CAAC,EAAc,KAAK,GAAK,EAAE,eAAiB,EAAI,EAAE,CAAC,EAEhH,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,YAAa,GAAI,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAQ,KAAO,WAAa,UAAU,EAC9F,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kDAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iCAuBb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,IAAQ,UAAY,UAAY,SAC9C,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oCAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0CAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,cAAc,SAAA,QAAS,CAAA,GACpC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,GACnB,UAAA,EAAA,EAAA,KAAA,CAACT,EAAAA,OAAD,CAAQ,QAAQ,UAAU,MAAM,QAAQ,SAAU,EAAqB,SAAW,EAAlF,SAAA,EACE,EAAA,EAAA,IAAA,CAACU,EAAAA,eAAD,CAAgB,KAAM,EAAK,CAAA,EAAC,aAEtB,GACW,CAAA,GACrB,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,MAAM,MACxB,SAAA,EAAqB,IAAI,IACxB,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,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,KACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,EACX,EAAc,SAAW,GACxB,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,oDAAoD,SAAA,qBAAsB,CAAA,GAEvF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,2BACZ,SAAA,EAAc,IAAI,GAAU,CAC3B,IAAM,EAAM,EAAkB,KAAK,GAAK,EAAE,KAAO,EAAO,YAAY,EAEpE,OADK,GAEH,EAAA,EAAA,IAAA,CAAC,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,GAGL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,yEAAf,SAAA,EAUE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CAAc,2EAA4E,IAAQ,WAAa,SAAS,EACxH,YAAe,EAAO,IAAQ,UAAY,KAAO,SAAS,EAH5D,SAAA,EAKE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,EAAK,CAAA,EAC1B,EAAc,OAAS,IACtB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6IACb,SAAA,EAAc,MACX,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,yCAAyC,SAAA,QAAY,CAAA,CAC/D,CACR,CAAA,GAAA,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAY,CAAA,CACT,CACF,CAAA,CAAA,GACS,CAAA,CAEpB"}

package/dist/{flex-bw7U4hXn.d.cts → flex-CrxTaAXE.d.cts}

@@ -1,9 +1,8 @@
 import { VariantProps } from "class-variance-authority";
-
 //#region packages/components/layouts/flex.d.ts
 declare const flexVariants: (props?: ({
   vertical?: boolean | null | undefined;
-  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
+  width?: "max" | "min" | "auto" | "full" | "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;
@@ -12,7 +11,8 @@ declare const flexVariants: (props?: ({
   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. */className?: string;
+  /** Additional Tailwind classes merged on top of the variant-generated classes. */
+  className?: string;
   /**
    * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.
    * @default false
@@ -97,18 +97,7 @@ type Props = {
  * </Flex>
  * ```
  */
-declare const Flex: import("react").MemoExoticComponent<({
-  vertical,
-  wrap,
-  width,
-  margin,
-  padding,
-  gap,
-  justify,
-  align,
-  className,
-  children
-}: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
+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-bw7U4hXn.d.cts.map
+//# sourceMappingURL=flex-CrxTaAXE.d.cts.map

package/dist/{flex-bw7U4hXn.d.mts → flex-CrxTaAXE.d.mts}

@@ -1,9 +1,8 @@
 import { VariantProps } from "class-variance-authority";
-
 //#region packages/components/layouts/flex.d.ts
 declare const flexVariants: (props?: ({
   vertical?: boolean | null | undefined;
-  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
+  width?: "max" | "min" | "auto" | "full" | "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;
@@ -12,7 +11,8 @@ declare const flexVariants: (props?: ({
   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. */className?: string;
+  /** Additional Tailwind classes merged on top of the variant-generated classes. */
+  className?: string;
   /**
    * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.
    * @default false
@@ -97,18 +97,7 @@ type Props = {
  * </Flex>
  * ```
  */
-declare const Flex: import("react").MemoExoticComponent<({
-  vertical,
-  wrap,
-  width,
-  margin,
-  padding,
-  gap,
-  justify,
-  align,
-  className,
-  children
-}: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
+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-bw7U4hXn.d.mts.map
+//# sourceMappingURL=flex-CrxTaAXE.d.mts.map

package/dist/{form-CMP15S4r.d.cts → form-D0M_qGX_.d.cts}

@@ -1,6 +1,5 @@
 import { Label, Slot } from "radix-ui";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
-
 //#region packages/components/ui/form.d.ts
 /**
  * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.
@@ -29,32 +28,11 @@ import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
  * </Form>
  * ```
  */
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
-  children,
-  watch,
-  getValues,
-  getFieldState,
-  setError,
-  clearErrors,
-  setValue,
-  setValues,
-  trigger,
-  formState,
-  resetField,
-  reset,
-  handleSubmit,
-  unregister,
-  control,
-  register,
-  setFocus,
-  subscribe
-}: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 /**
  * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.
  */
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
 /**
  * Hook that returns the field state and IDs for the enclosing FormField.
  * Must be called inside a component rendered within a `<FormField>`.
@@ -78,32 +56,17 @@ declare const useFormField: () => {
  *
  * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).
  */
-declare const FormItem: import("react").MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & {
+declare const FormItem: import("react").MemoExoticComponent<({ className, orientation, ...props }: React.ComponentProps<"div"> & {
   orientation?: "vertical" | "horizontal" | "responsive";
 }) => import("react").JSX.Element>;
 /** Styled label automatically associated with the FormItem's control via `htmlFor`. */
-declare const FormLabel: import("react").MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
+declare const FormLabel: import("react").MemoExoticComponent<({ ...props }: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
 /** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
-declare const FormControl: import("react").MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
+declare const FormControl: import("react").MemoExoticComponent<({ ...props }: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
 /** Helper text displayed below the control that provides additional context about the field. */
-declare function FormDescription({
-  className,
-  ...props
-}: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
 /** Displays the validation error message for the field, or falls back to `children` when there is no error. */
-declare function FormMessage({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function FormMessage({ className, children, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
 //#endregion
 export { FormItem as a, useFormField as c, FormField as i, FormControl as n, FormLabel as o, FormDescription as r, FormMessage as s, Form as t };
-//# sourceMappingURL=form-CMP15S4r.d.cts.map
+//# sourceMappingURL=form-D0M_qGX_.d.cts.map

package/dist/{form-CMP15S4r.d.mts → form-D0M_qGX_.d.mts}

@@ -1,6 +1,5 @@
 import { Label, Slot } from "radix-ui";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
-
 //#region packages/components/ui/form.d.ts
 /**
  * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.
@@ -29,32 +28,11 @@ import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
  * </Form>
  * ```
  */
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
-  children,
-  watch,
-  getValues,
-  getFieldState,
-  setError,
-  clearErrors,
-  setValue,
-  setValues,
-  trigger,
-  formState,
-  resetField,
-  reset,
-  handleSubmit,
-  unregister,
-  control,
-  register,
-  setFocus,
-  subscribe
-}: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 /**
  * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.
  */
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
 /**
  * Hook that returns the field state and IDs for the enclosing FormField.
  * Must be called inside a component rendered within a `<FormField>`.
@@ -78,32 +56,17 @@ declare const useFormField: () => {
  *
  * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).
  */
-declare const FormItem: import("react").MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & {
+declare const FormItem: import("react").MemoExoticComponent<({ className, orientation, ...props }: React.ComponentProps<"div"> & {
   orientation?: "vertical" | "horizontal" | "responsive";
 }) => import("react").JSX.Element>;
 /** Styled label automatically associated with the FormItem's control via `htmlFor`. */
-declare const FormLabel: import("react").MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
+declare const FormLabel: import("react").MemoExoticComponent<({ ...props }: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
 /** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
-declare const FormControl: import("react").MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
+declare const FormControl: import("react").MemoExoticComponent<({ ...props }: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
 /** Helper text displayed below the control that provides additional context about the field. */
-declare function FormDescription({
-  className,
-  ...props
-}: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
 /** Displays the validation error message for the field, or falls back to `children` when there is no error. */
-declare function FormMessage({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function FormMessage({ className, children, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
 //#endregion
 export { FormItem as a, useFormField as c, FormField as i, FormControl as n, FormLabel as o, FormDescription as r, FormMessage as s, Form as t };
-//# sourceMappingURL=form-CMP15S4r.d.mts.map
+//# sourceMappingURL=form-D0M_qGX_.d.mts.map

package/dist/gain-loss-bar-chart-Dz1oAj8H.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gain-loss-bar-chart-Dz1oAj8H.mjs","names":[],"sources":["../packages/components/features/charts/components/gain-loss-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatSignedPercent, getDirectionColor } from '../utils';\n\nexport type GainLossBarChartProps = BaseChartProps & {\n  /** `name` is the period label (e.g. a month or quarter); `value` is the signed return. */\n  data: NamedValue[];\n  /** Series label. Defaults to `'Return'`. */\n  label?: string;\n  upColor?: string;\n  downColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to a signed percentage. */\n  valueFormatter?: (value: number) => string;\n  showGrid?: boolean;\n};\n\n/**\n * Diverging bars for period returns — bars grow up (gain) or down (loss) from a zero baseline,\n * colored accordingly. Clearer than a plain bar chart for signed data.\n *\n * @example\n * ```tsx\n * import { GainLossBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <GainLossBarChart\n *   data={[\n *     { name: 'Jan', value: 0.032 },\n *     { name: 'Feb', value: -0.014 },\n *   ]}\n * />\n * ```\n */\nexport const GainLossBarChart = ({\n  data,\n  label = 'Return',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => formatSignedPercent(value),\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: GainLossBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color: upColor } }), [label, upColor]);\n\n  return (\n    <ChartContainer\n      data-slot=\"gain-loss-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n        <ReferenceLine y={0} stroke=\"var(--border)\" />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator formatter={value => valueFormatter(Number(value))} />} />\n        <Bar\n          dataKey=\"value\"\n          isAnimationActive={animate}\n          shape={props => <Rectangle {...props} fill={getDirectionColor(Number(props.payload?.value ?? 0), 0, { up: upColor, down: downColor })} />}\n        />\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"kbAwCA,MAAa,GAAoB,CAC/B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAoB,CAAK,EACnD,WAAW,GACX,YACA,UAAU,GACV,YAKE,EAAC,EAAD,CACE,YAAU,sBACV,OALW,OAA4B,CAAE,MAAO,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAKhF,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,EACxE,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,EAC7C,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,cAAA,GAAc,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,EACjI,EAAC,EAAD,CACE,QAAQ,QACR,kBAAmB,EACnB,MAAO,GAAS,EAAC,EAAD,CAAW,GAAI,EAAO,KAAM,EAAkB,OAAO,EAAM,SAAS,OAAS,CAAC,EAAG,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,CAAI,CAAA,CACzI,CAAA,CACO,GACI,CAAA"}
+{"version":3,"file":"gain-loss-bar-chart-Dz1oAj8H.mjs","names":[],"sources":["../packages/components/features/charts/components/gain-loss-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatSignedPercent, getDirectionColor } from '../utils';\n\nexport type GainLossBarChartProps = BaseChartProps & {\n  /** `name` is the period label (e.g. a month or quarter); `value` is the signed return. */\n  data: NamedValue[];\n  /** Series label. Defaults to `'Return'`. */\n  label?: string;\n  upColor?: string;\n  downColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to a signed percentage. */\n  valueFormatter?: (value: number) => string;\n  showGrid?: boolean;\n};\n\n/**\n * Diverging bars for period returns — bars grow up (gain) or down (loss) from a zero baseline,\n * colored accordingly. Clearer than a plain bar chart for signed data.\n *\n * @example\n * ```tsx\n * import { GainLossBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <GainLossBarChart\n *   data={[\n *     { name: 'Jan', value: 0.032 },\n *     { name: 'Feb', value: -0.014 },\n *   ]}\n * />\n * ```\n */\nexport const GainLossBarChart = ({\n  data,\n  label = 'Return',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => formatSignedPercent(value),\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: GainLossBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color: upColor } }), [label, upColor]);\n\n  return (\n    <ChartContainer\n      data-slot=\"gain-loss-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n        <ReferenceLine y={0} stroke=\"var(--border)\" />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator formatter={value => valueFormatter(Number(value))} />} />\n        <Bar\n          dataKey=\"value\"\n          isAnimationActive={animate}\n          shape={props => <Rectangle {...props} fill={getDirectionColor(Number(props.payload?.value ?? 0), 0, { up: upColor, down: downColor })} />}\n        />\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"kbAwCA,MAAa,GAAoB,CAC/B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAoB,CAAK,EACnD,WAAW,GACX,YACA,UAAU,GACV,YAKE,EAAC,EAAD,CACE,YAAU,sBACV,OALW,OAA4B,CAAE,MAAO,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAKhF,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAvE,SAAA,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,EACxE,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,EAC7C,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,cAAA,GAAc,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,EACjI,EAAC,EAAD,CACE,QAAQ,QACR,kBAAmB,EACnB,MAAO,GAAS,EAAC,EAAD,CAAW,GAAI,EAAO,KAAM,EAAkB,OAAO,EAAM,SAAS,OAAS,CAAC,EAAG,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,CAAI,CAAA,CACzI,CAAA,CACO,GACI,CAAA"}

package/dist/gain-loss-bar-chart-FUzN7DxF.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"gain-loss-bar-chart-FUzN7DxF.cjs","names":["formatSignedPercent","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ReferenceLine","ChartTooltip","ChartTooltipContent","Bar","Rectangle","getDirectionColor"],"sources":["../packages/components/features/charts/components/gain-loss-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatSignedPercent, getDirectionColor } from '../utils';\n\nexport type GainLossBarChartProps = BaseChartProps & {\n  /** `name` is the period label (e.g. a month or quarter); `value` is the signed return. */\n  data: NamedValue[];\n  /** Series label. Defaults to `'Return'`. */\n  label?: string;\n  upColor?: string;\n  downColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to a signed percentage. */\n  valueFormatter?: (value: number) => string;\n  showGrid?: boolean;\n};\n\n/**\n * Diverging bars for period returns — bars grow up (gain) or down (loss) from a zero baseline,\n * colored accordingly. Clearer than a plain bar chart for signed data.\n *\n * @example\n * ```tsx\n * import { GainLossBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <GainLossBarChart\n *   data={[\n *     { name: 'Jan', value: 0.032 },\n *     { name: 'Feb', value: -0.014 },\n *   ]}\n * />\n * ```\n */\nexport const GainLossBarChart = ({\n  data,\n  label = 'Return',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => formatSignedPercent(value),\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: GainLossBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color: upColor } }), [label, upColor]);\n\n  return (\n    <ChartContainer\n      data-slot=\"gain-loss-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n        <ReferenceLine y={0} stroke=\"var(--border)\" />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator formatter={value => valueFormatter(Number(value))} />} />\n        <Bar\n          dataKey=\"value\"\n          isAnimationActive={animate}\n          shape={props => <Rectangle {...props} fill={getDirectionColor(Number(props.payload?.value ?? 0), 0, { up: upColor, down: downColor })} />}\n        />\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAwCA,MAAa,GAAoB,CAC/B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAASA,EAAAA,oBAAoB,CAAK,EACnD,WAAW,GACX,YACA,UAAU,GACV,aAKE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,sBACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,MAAO,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAKhF,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,GACxE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,GAC7C,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,cAAA,GAAc,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,GACjI,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CACE,QAAQ,QACR,kBAAmB,EACnB,MAAO,IAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAMC,EAAAA,kBAAkB,OAAO,EAAM,SAAS,OAAS,CAAC,EAAG,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,CAAI,CAAA,CACzI,CAAA,CACO,GACI,CAAA"}
+{"version":3,"file":"gain-loss-bar-chart-FUzN7DxF.cjs","names":["formatSignedPercent","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ReferenceLine","ChartTooltip","ChartTooltipContent","Bar","Rectangle","getDirectionColor"],"sources":["../packages/components/features/charts/components/gain-loss-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatSignedPercent, getDirectionColor } from '../utils';\n\nexport type GainLossBarChartProps = BaseChartProps & {\n  /** `name` is the period label (e.g. a month or quarter); `value` is the signed return. */\n  data: NamedValue[];\n  /** Series label. Defaults to `'Return'`. */\n  label?: string;\n  upColor?: string;\n  downColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to a signed percentage. */\n  valueFormatter?: (value: number) => string;\n  showGrid?: boolean;\n};\n\n/**\n * Diverging bars for period returns — bars grow up (gain) or down (loss) from a zero baseline,\n * colored accordingly. Clearer than a plain bar chart for signed data.\n *\n * @example\n * ```tsx\n * import { GainLossBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <GainLossBarChart\n *   data={[\n *     { name: 'Jan', value: 0.032 },\n *     { name: 'Feb', value: -0.014 },\n *   ]}\n * />\n * ```\n */\nexport const GainLossBarChart = ({\n  data,\n  label = 'Return',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => formatSignedPercent(value),\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: GainLossBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color: upColor } }), [label, upColor]);\n\n  return (\n    <ChartContainer\n      data-slot=\"gain-loss-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n        <ReferenceLine y={0} stroke=\"var(--border)\" />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator formatter={value => valueFormatter(Number(value))} />} />\n        <Bar\n          dataKey=\"value\"\n          isAnimationActive={animate}\n          shape={props => <Rectangle {...props} fill={getDirectionColor(Number(props.payload?.value ?? 0), 0, { up: upColor, down: downColor })} />}\n        />\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAwCA,MAAa,GAAoB,CAC/B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAASA,EAAAA,oBAAoB,CAAK,EACnD,WAAW,GACX,YACA,UAAU,GACV,aAKE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,sBACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,MAAO,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAKhF,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAvE,SAAA,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,GACxE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,GAC7C,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,cAAA,GAAc,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,GACjI,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CACE,QAAQ,QACR,kBAAmB,EACnB,MAAO,IAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAMC,EAAAA,kBAAkB,OAAO,EAAM,SAAS,OAAS,CAAC,EAAG,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,CAAI,CAAA,CACzI,CAAA,CACO,GACI,CAAA"}

package/dist/{google-Bl-jBW8L.d.cts → google-vajkoOiC.d.cts}

@@ -1,8 +1,9 @@
 import { CredentialResponse } from "@react-oauth/google";
-
 //#region packages/components/systems/google.d.ts
 type GoogleProps = {
-  /** When `true`, the Google One Tap prompt is suppressed and no login dialog is shown. */isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  /** When `true`, the Google One Tap prompt is suppressed and no login dialog is shown. */
+  isDisabled: boolean;
+  /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
   onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
 };
 /**
@@ -21,8 +22,11 @@ type GoogleProps = {
  */
 declare const Google: React.FC<GoogleProps>;
 type ReactOAuthProps = {
-  /** Google OAuth 2.0 client ID from the Google Cloud Console. */clientId: string; /** When `true`, the Google One Tap prompt is suppressed. */
-  isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  /** Google OAuth 2.0 client ID from the Google Cloud Console. */
+  clientId: string;
+  /** When `true`, the Google One Tap prompt is suppressed. */
+  isDisabled: boolean;
+  /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
   onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
 };
 /**
@@ -45,4 +49,4 @@ type ReactOAuthProps = {
 declare const ReactOAuth: React.FC<React.PropsWithChildren<ReactOAuthProps>>;
 //#endregion
 export { ReactOAuth as n, Google as t };
-//# sourceMappingURL=google-Bl-jBW8L.d.cts.map
+//# sourceMappingURL=google-vajkoOiC.d.cts.map

package/dist/{google-Bl-jBW8L.d.mts → google-vajkoOiC.d.mts}

@@ -1,8 +1,9 @@
 import { CredentialResponse } from "@react-oauth/google";
-
 //#region packages/components/systems/google.d.ts
 type GoogleProps = {
-  /** When `true`, the Google One Tap prompt is suppressed and no login dialog is shown. */isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  /** When `true`, the Google One Tap prompt is suppressed and no login dialog is shown. */
+  isDisabled: boolean;
+  /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
   onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
 };
 /**
@@ -21,8 +22,11 @@ type GoogleProps = {
  */
 declare const Google: React.FC<GoogleProps>;
 type ReactOAuthProps = {
-  /** Google OAuth 2.0 client ID from the Google Cloud Console. */clientId: string; /** When `true`, the Google One Tap prompt is suppressed. */
-  isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  /** Google OAuth 2.0 client ID from the Google Cloud Console. */
+  clientId: string;
+  /** When `true`, the Google One Tap prompt is suppressed. */
+  isDisabled: boolean;
+  /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
   onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
 };
 /**
@@ -45,4 +49,4 @@ type ReactOAuthProps = {
 declare const ReactOAuth: React.FC<React.PropsWithChildren<ReactOAuthProps>>;
 //#endregion
 export { ReactOAuth as n, Google as t };
-//# sourceMappingURL=google-Bl-jBW8L.d.mts.map
+//# sourceMappingURL=google-vajkoOiC.d.mts.map

package/dist/{grid-product-card-bpADqDOQ.d.cts → grid-product-card-P5X8ZPQF.d.cts}

@@ -1,11 +1,18 @@
 //#region packages/components/cards/grid-product-card.d.ts
 type Props = {
-  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
-  slug: string; /** Display name of the product shown on the card. */
-  name: string; /** URL of the product's thumbnail image. */
-  thumbnail: string; /** Regular price of the product in VND. */
-  price: number; /** Optional sale / discounted price in VND. */
-  salePrice?: number; /** Optional sale discount percentage (0–100). */
+  /** Unique identifier for the product. */
+  id: string;
+  /** URL-friendly slug for the product. */
+  slug: string;
+  /** Display name of the product shown on the card. */
+  name: string;
+  /** URL of the product's thumbnail image. */
+  thumbnail: string;
+  /** Regular price of the product in VND. */
+  price: number;
+  /** Optional sale / discounted price in VND. */
+  salePrice?: number;
+  /** Optional sale discount percentage (0–100). */
   salePercentage?: number;
 };
 /**
@@ -27,4 +34,4 @@ type Props = {
 declare const GridProductCard: React.FC<Props>;
 //#endregion
 export { GridProductCard as t };
-//# sourceMappingURL=grid-product-card-bpADqDOQ.d.cts.map
+//# sourceMappingURL=grid-product-card-P5X8ZPQF.d.cts.map

package/dist/{grid-product-card-bpADqDOQ.d.mts → grid-product-card-P5X8ZPQF.d.mts}

@@ -1,11 +1,18 @@
 //#region packages/components/cards/grid-product-card.d.ts
 type Props = {
-  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
-  slug: string; /** Display name of the product shown on the card. */
-  name: string; /** URL of the product's thumbnail image. */
-  thumbnail: string; /** Regular price of the product in VND. */
-  price: number; /** Optional sale / discounted price in VND. */
-  salePrice?: number; /** Optional sale discount percentage (0–100). */
+  /** Unique identifier for the product. */
+  id: string;
+  /** URL-friendly slug for the product. */
+  slug: string;
+  /** Display name of the product shown on the card. */
+  name: string;
+  /** URL of the product's thumbnail image. */
+  thumbnail: string;
+  /** Regular price of the product in VND. */
+  price: number;
+  /** Optional sale / discounted price in VND. */
+  salePrice?: number;
+  /** Optional sale discount percentage (0–100). */
   salePercentage?: number;
 };
 /**
@@ -27,4 +34,4 @@ type Props = {
 declare const GridProductCard: React.FC<Props>;
 //#endregion
 export { GridProductCard as t };
-//# sourceMappingURL=grid-product-card-bpADqDOQ.d.mts.map
+//# sourceMappingURL=grid-product-card-P5X8ZPQF.d.mts.map

package/dist/group-field-gejvx_Td.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group-field-gejvx_Td.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gOA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,cAGE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAoB,uBAApB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,CAAkB,CAAA,EAC/B,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACG,EACD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"group-field-gejvx_Td.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gOA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,cAGE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAApB,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,CAAkB,CAAA,EAC/B,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACG,EACD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP"}

package/dist/group-field-sVykO2JZ.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"group-field-sVykO2JZ.cjs","names":["FieldGroup","Field","FieldContent","FieldLabel","FieldDescription","FieldContentMain","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,eAGE,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,uBAApB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAa,CAAkB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,CACG,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"group-field-sVykO2JZ.cjs","names":["FieldGroup","Field","FieldContent","FieldLabel","FieldDescription","FieldContentMain","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,eAGE,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAApB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAa,CAAkB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,CACG,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}