npm - @customafk/lunas-ui - Versions diffs - 0.2.82 → 0.2.84 - Mend

@customafk/lunas-ui 0.2.82 → 0.2.84

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

Files changed (410) hide show

package/dist/{filter-CQ9BD0MV.cjs.map → filter-DQEjSnOP.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-CQ9BD0MV.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-text-positive-muted text-xs\">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 rounded bg-secondary-bg-subtle px-4 py-2 transition-colors hover:bg-secondary-muted',\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=\"max-w-[calc(100%-32px)] flex-1 justify-start bg-white\"\n innerClassName=\"flex truncate gap-1.5\"\n >\n <span className=\"shrink-0 font-medium text-text-positive\">{definition.label}</span>\n <span className=\"truncate text-text-positive-weak text-xs\">{formatFilterValue(filter.value, definition)}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-64 p-0\" align=\"start\" side=\"bottom\">\n <div className=\"border-border border-b 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-text-positive-muted text-xs\">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-border border-l 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] text-primary-foreground leading-none\">\n {activeFilters.length}\n </span>\n )}\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Bộ lọc</span>\n </button>\n <Separator />\n </div>\n </div>\n </ResizablePanel>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"filter-DQEjSnOP.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-text-positive-muted text-xs\">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 rounded bg-secondary-bg-subtle px-4 py-2 transition-colors hover:bg-secondary-muted',\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=\"max-w-[calc(100%-32px)] flex-1 justify-start bg-white\"\n innerClassName=\"flex truncate gap-1.5\"\n >\n <span className=\"shrink-0 font-medium text-text-positive\">{definition.label}</span>\n <span className=\"truncate text-text-positive-weak text-xs\">{formatFilterValue(filter.value, definition)}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-64 p-0\" align=\"start\" side=\"bottom\">\n <div className=\"border-border border-b 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-text-positive-muted text-xs\">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-border border-l 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] text-primary-foreground leading-none\">\n {activeFilters.length}\n </span>\n )}\n <span className=\"text-nowrap [writing-mode:vertical-lr]\">Bộ lọc</span>\n </button>\n <Separator />\n </div>\n </div>\n </ResizablePanel>\n );\n};\n"],"mappings":"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"}

package/dist/{flex-CrxTaAXE.d.cts → flex-D7IE_cdR.d.cts} RENAMED Viewed

@@ -2,13 +2,13 @@ import { VariantProps } from "class-variance-authority";
 //#region packages/components/layouts/flex.d.ts
 declare const flexVariants: (props?: ({
   vertical?: boolean | null | undefined;
-  width?: "max" | "min" | "auto" | "full" | "fit" | "screen" | "null" | null | undefined;
+  width?: "auto" | "full" | "fit" | "screen" | "min" | "max" | "null" | null | undefined;
   wrap?: boolean | null | undefined;
   margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
-  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "start" | "center" | "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. */
@@ -76,10 +76,12 @@ type Props = {
    * @default 'center'
    */
   align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-} & VariantProps<typeof flexVariants>;
+} & VariantProps<typeof flexVariants> & Omit<React.ComponentPropsWithoutRef<'div'>, 'className'>;
 /**
  * A flexible, variant-driven flex container built on CVA and TailwindCSS.
  *
+ * Any other `div` attribute (`data-slot`, `id`, `role`, `onClick`, ...) is forwarded to the root element.
+ *
  * @example
  * ```tsx
  * import { Flex } from '@customafk/lunas-ui/layouts/flex';
@@ -97,7 +99,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, ...rest }: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
 //#endregion
 export { Flex as t };
-//# sourceMappingURL=flex-CrxTaAXE.d.cts.map
+//# sourceMappingURL=flex-D7IE_cdR.d.cts.map

package/dist/{flex-CrxTaAXE.d.mts → flex-D7IE_cdR.d.mts} RENAMED Viewed

@@ -2,13 +2,13 @@ import { VariantProps } from "class-variance-authority";
 //#region packages/components/layouts/flex.d.ts
 declare const flexVariants: (props?: ({
   vertical?: boolean | null | undefined;
-  width?: "max" | "min" | "auto" | "full" | "fit" | "screen" | "null" | null | undefined;
+  width?: "auto" | "full" | "fit" | "screen" | "min" | "max" | "null" | null | undefined;
   wrap?: boolean | null | undefined;
   margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
-  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "start" | "center" | "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. */
@@ -76,10 +76,12 @@ type Props = {
    * @default 'center'
    */
   align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-} & VariantProps<typeof flexVariants>;
+} & VariantProps<typeof flexVariants> & Omit<React.ComponentPropsWithoutRef<'div'>, 'className'>;
 /**
  * A flexible, variant-driven flex container built on CVA and TailwindCSS.
  *
+ * Any other `div` attribute (`data-slot`, `id`, `role`, `onClick`, ...) is forwarded to the root element.
+ *
  * @example
  * ```tsx
  * import { Flex } from '@customafk/lunas-ui/layouts/flex';
@@ -97,7 +99,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, ...rest }: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
 //#endregion
 export { Flex as t };
-//# sourceMappingURL=flex-CrxTaAXE.d.mts.map
+//# sourceMappingURL=flex-D7IE_cdR.d.mts.map

package/dist/group-field-Cs0uWHg0.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{$ as e,G as t,J as n,K as r,X as i,Z as a,et as o,q as s}from"./tanstack-form-Do6xL2kv.mjs";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=({label:u,description:d,helperText:f,orientation:p=`responsive`,children:m})=>l(i,{className:`gap-y-4 px-4`,children:[l(t,{orientation:p,children:[l(r,{children:[c(a,{children:u}),c(n,{children:d})]}),l(s,{children:[m,c(e,{isShow:!!f,children:f})]})]}),c(o,{})]});export{u as TanStackFieldGroup};
2	+ //# sourceMappingURL=group-field-Cs0uWHg0.mjs.map

package/dist/{group-field-gejvx_Td.mjs.map → group-field-Cs0uWHg0.mjs.map} RENAMED Viewed

	@@ -1 +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,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"}
1	+ {"version":3,"file":"group-field-Cs0uWHg0.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":"qJA0BA,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-DJXL9sRy.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./tanstack-form-BiOihtxs.cjs");let t=require("react/jsx-runtime");const n=({label:n,description:r,helperText:i,orientation:a=`responsive`,children:o})=>(0,t.jsxs)(e.X,{className:`gap-y-4 px-4`,children:[(0,t.jsxs)(e.G,{orientation:a,children:[(0,t.jsxs)(e.K,{children:[(0,t.jsx)(e.Z,{children:n}),(0,t.jsx)(e.J,{children:r})]}),(0,t.jsxs)(e.q,{children:[o,(0,t.jsx)(e.$,{isShow:!!i,children:i})]})]}),(0,t.jsx)(e.et,{})]});exports.TanStackFieldGroup=n;
2	+ //# sourceMappingURL=group-field-DJXL9sRy.cjs.map

package/dist/{group-field-sVykO2JZ.cjs.map → group-field-DJXL9sRy.cjs.map} RENAMED Viewed

	@@ -1 +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,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"}
1	+ {"version":3,"file":"group-field-DJXL9sRy.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":"mFA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,eAGE,EAAA,EAAA,KAAA,CAACA,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAoB,cAApB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAa,CAAkB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,CACG,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAiB,CAAA,CACP"}

package/dist/{index-DvC1inRy.d.cts → index-0HuXxgjQ.d.cts} RENAMED Viewed

@@ -1,3 +1,4 @@
+import { i as TextEditorProps } from "./index-CvFEJoon.cjs";
 import * as React$1 from "react";
 import { ComponentType } from "react";
 //#region packages/components/features/tanstack-form/types.d.ts
@@ -97,7 +98,7 @@ type TextareaFieldProps = {
   disabled?: boolean;
 };
 /** Props for {@link TextEditorField} — a rich-text (WYSIWYG) editor field. */
-type TextEditorFieldProps = {
+type TextEditorFieldProps = Pick<TextEditorProps, 'maxLength' | 'showCharacterCount' | 'enableLink' | 'enableBubbleMenu' | 'enableTaskList' | 'enableHighlight' | 'enableColor' | 'enableImage' | 'enableTable' | 'enableSlashCommand' | 'onImageUpload' | 'variant' | 'size'> & {
   /** Field label displayed above the editor. */
   label: string;
   /** Secondary text rendered below the label. */
@@ -2144,6 +2145,9 @@ type SimpleArrayFieldProps<T> = {
   className?: string;
 };
 //#endregion
+//#region packages/components/features/tanstack-form/components/fields/text-editor-field.d.ts
+declare const TextEditorField: React.FC<TextEditorFieldProps>;
+//#endregion
 //#region packages/components/features/tanstack-form/components/form-context.d.ts
 /**
  * Shared field/form contexts, split out from `tanstack-form.tsx` so that field and form
@@ -2155,7 +2159,6 @@ declare const fieldContext: import("react").Context<AnyFieldApi>, formContext: i
 //#region packages/components/features/tanstack-form/tanstack-form.d.ts
 declare const TextField: ComponentType<TextFieldProps>;
 declare const TextareaField: ComponentType<TextareaFieldProps>;
-declare const TextEditorField: ComponentType<TextEditorFieldProps>;
 declare const NumberField: ComponentType<NumberFieldProps>;
 declare const EmailField: ComponentType<EmailFieldProps>;
 declare const PasswordField: ComponentType<PasswordFieldProps>;
@@ -2384,7 +2387,7 @@ declare const FieldError: ComponentType<import("react").ClassAttributes<HTMLDivE
 declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
   readonly TextField: ComponentType<TextFieldProps>;
   readonly TextareaField: ComponentType<TextareaFieldProps>;
-  readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+  readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
   readonly NumberField: ComponentType<NumberFieldProps>;
   readonly EmailField: ComponentType<EmailFieldProps>;
   readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -2558,7 +2561,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
 }>, withTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
   readonly TextField: ComponentType<TextFieldProps>;
   readonly TextareaField: ComponentType<TextareaFieldProps>;
-  readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+  readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
   readonly NumberField: ComponentType<NumberFieldProps>;
   readonly EmailField: ComponentType<EmailFieldProps>;
   readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -2733,7 +2736,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
     readonly TextField: ComponentType<TextFieldProps>;
     readonly TextareaField: ComponentType<TextareaFieldProps>;
-    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
     readonly NumberField: ComponentType<NumberFieldProps>;
     readonly EmailField: ComponentType<EmailFieldProps>;
     readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -2908,7 +2911,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
 }>>, withTanStackFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {
   readonly TextField: ComponentType<TextFieldProps>;
   readonly TextareaField: ComponentType<TextareaFieldProps>;
-  readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+  readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
   readonly NumberField: ComponentType<NumberFieldProps>;
   readonly EmailField: ComponentType<EmailFieldProps>;
   readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -3083,7 +3086,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
     readonly TextField: ComponentType<TextFieldProps>;
     readonly TextareaField: ComponentType<TextareaFieldProps>;
-    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
     readonly NumberField: ComponentType<NumberFieldProps>;
     readonly EmailField: ComponentType<EmailFieldProps>;
     readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -3257,7 +3260,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   }> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
     readonly TextField: ComponentType<TextFieldProps>;
     readonly TextareaField: ComponentType<TextareaFieldProps>;
-    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
     readonly NumberField: ComponentType<NumberFieldProps>;
     readonly EmailField: ComponentType<EmailFieldProps>;
     readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -3432,5 +3435,5 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   fields: TFields;
 }>) => ReturnType<import("react").FunctionComponent>;
 //#endregion
-export { EmailFieldProps as $, TanStackActionSubmit as A, TextField as B, SimpleNumberField as C, SimpleTextField as D, SimpleSelectField as E, TanStackFieldGroup as F, useTanStackFieldContext as G, useTanStackForm as H, TanStackPopoverForm as I, BooleanFieldValue as J, useTanStackFormContext as K, TanStackSectionForm as L, TanStackCardForm as M, TanStackContainerForm as N, SimpleTextareaField as O, TanStackDialogForm as P, DateFieldValue as Q, TanStackTitleField as R, SimpleEmailField as S, SimpleRadioGroupField as T, withTanStackFieldGroup as U, TextareaField as V, withTanStackForm as W, ComboboxFieldProps as X, CheckboxFieldProps as Y, DateFieldProps as Z, SelectField as _, DateField as a, NumberFieldValue as at, SimpleComboboxField as b, FieldContent as c, RadioOption as ct, FieldGroup as d, SimpleTextFieldProps as dt, FieldOrientation as et, FieldLabel as f, SwitchFieldProps as ft, RadioGroupField as g, TextareaFieldProps as gt, PasswordField as h, TextFieldValue as ht, ComboboxField as i, NumberFieldProps as it, TanStackActionsForm as j, SwitchField as k, FieldContentMain as l, SelectFieldProps as lt, NumberField as m, TextFieldProps as mt, ArrayHeaderRow as n, FieldType as nt, EmailField as o, PasswordFieldProps as ot, FieldSeparator as p, TextEditorFieldProps as pt, AnyFieldProps as q, CheckboxField as r, MultiSelectFieldValue as rt, Field as s, RadioGroupFieldProps as st, ArrayCol as t, FieldRounding as tt, FieldError as u, SelectOption as ut, SimpleArrayField as v, SimplePasswordField as w, SimpleDateField as x, SimpleBooleanField as y, TextEditorField as z };
-//# sourceMappingURL=index-DvC1inRy.d.cts.map
+export { EmailFieldProps as $, TanStackActionSubmit as A, TextareaField as B, SimpleNumberField as C, SimpleTextField as D, SimpleSelectField as E, TanStackFieldGroup as F, useTanStackFormContext as G, withTanStackFieldGroup as H, TanStackPopoverForm as I, BooleanFieldValue as J, TextEditorField as K, TanStackSectionForm as L, TanStackCardForm as M, TanStackContainerForm as N, SimpleTextareaField as O, TanStackDialogForm as P, DateFieldValue as Q, TanStackTitleField as R, SimpleEmailField as S, SimpleRadioGroupField as T, withTanStackForm as U, useTanStackForm as V, useTanStackFieldContext as W, ComboboxFieldProps as X, CheckboxFieldProps as Y, DateFieldProps as Z, SelectField as _, DateField as a, NumberFieldValue as at, SimpleComboboxField as b, FieldContent as c, RadioOption as ct, FieldGroup as d, SimpleTextFieldProps as dt, FieldOrientation as et, FieldLabel as f, SwitchFieldProps as ft, RadioGroupField as g, TextareaFieldProps as gt, PasswordField as h, TextFieldValue as ht, ComboboxField as i, NumberFieldProps as it, TanStackActionsForm as j, SwitchField as k, FieldContentMain as l, SelectFieldProps as lt, NumberField as m, TextFieldProps as mt, ArrayHeaderRow as n, FieldType as nt, EmailField as o, PasswordFieldProps as ot, FieldSeparator as p, TextEditorFieldProps as pt, AnyFieldProps as q, CheckboxField as r, MultiSelectFieldValue as rt, Field as s, RadioGroupFieldProps as st, ArrayCol as t, FieldRounding as tt, FieldError as u, SelectOption as ut, SimpleArrayField as v, SimplePasswordField as w, SimpleDateField as x, SimpleBooleanField as y, TextField as z };
+//# sourceMappingURL=index-0HuXxgjQ.d.cts.map

package/dist/{index-DvC1inRy.d.mts → index-CZ_2KVir.d.mts} RENAMED Viewed

@@ -1,3 +1,4 @@
+import { i as TextEditorProps } from "./index-CvFEJoon.mjs";
 import * as React$1 from "react";
 import { ComponentType } from "react";
 //#region packages/components/features/tanstack-form/types.d.ts
@@ -97,7 +98,7 @@ type TextareaFieldProps = {
   disabled?: boolean;
 };
 /** Props for {@link TextEditorField} — a rich-text (WYSIWYG) editor field. */
-type TextEditorFieldProps = {
+type TextEditorFieldProps = Pick<TextEditorProps, 'maxLength' | 'showCharacterCount' | 'enableLink' | 'enableBubbleMenu' | 'enableTaskList' | 'enableHighlight' | 'enableColor' | 'enableImage' | 'enableTable' | 'enableSlashCommand' | 'onImageUpload' | 'variant' | 'size'> & {
   /** Field label displayed above the editor. */
   label: string;
   /** Secondary text rendered below the label. */
@@ -2144,6 +2145,9 @@ type SimpleArrayFieldProps<T> = {
   className?: string;
 };
 //#endregion
+//#region packages/components/features/tanstack-form/components/fields/text-editor-field.d.ts
+declare const TextEditorField: React.FC<TextEditorFieldProps>;
+//#endregion
 //#region packages/components/features/tanstack-form/components/form-context.d.ts
 /**
  * Shared field/form contexts, split out from `tanstack-form.tsx` so that field and form
@@ -2155,7 +2159,6 @@ declare const fieldContext: import("react").Context<AnyFieldApi>, formContext: i
 //#region packages/components/features/tanstack-form/tanstack-form.d.ts
 declare const TextField: ComponentType<TextFieldProps>;
 declare const TextareaField: ComponentType<TextareaFieldProps>;
-declare const TextEditorField: ComponentType<TextEditorFieldProps>;
 declare const NumberField: ComponentType<NumberFieldProps>;
 declare const EmailField: ComponentType<EmailFieldProps>;
 declare const PasswordField: ComponentType<PasswordFieldProps>;
@@ -2384,7 +2387,7 @@ declare const FieldError: ComponentType<import("react").ClassAttributes<HTMLDivE
 declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
   readonly TextField: ComponentType<TextFieldProps>;
   readonly TextareaField: ComponentType<TextareaFieldProps>;
-  readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+  readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
   readonly NumberField: ComponentType<NumberFieldProps>;
   readonly EmailField: ComponentType<EmailFieldProps>;
   readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -2558,7 +2561,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
 }>, withTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFormData> | undefined, TOnChange extends FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
   readonly TextField: ComponentType<TextFieldProps>;
   readonly TextareaField: ComponentType<TextareaFieldProps>;
-  readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+  readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
   readonly NumberField: ComponentType<NumberFieldProps>;
   readonly EmailField: ComponentType<EmailFieldProps>;
   readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -2733,7 +2736,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
     readonly TextField: ComponentType<TextFieldProps>;
     readonly TextareaField: ComponentType<TextareaFieldProps>;
-    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
     readonly NumberField: ComponentType<NumberFieldProps>;
     readonly EmailField: ComponentType<EmailFieldProps>;
     readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -2908,7 +2911,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
 }>>, withTanStackFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {
   readonly TextField: ComponentType<TextFieldProps>;
   readonly TextareaField: ComponentType<TextareaFieldProps>;
-  readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+  readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
   readonly NumberField: ComponentType<NumberFieldProps>;
   readonly EmailField: ComponentType<EmailFieldProps>;
   readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -3083,7 +3086,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
     readonly TextField: ComponentType<TextFieldProps>;
     readonly TextareaField: ComponentType<TextareaFieldProps>;
-    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
     readonly NumberField: ComponentType<NumberFieldProps>;
     readonly EmailField: ComponentType<EmailFieldProps>;
     readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -3257,7 +3260,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   }> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
     readonly TextField: ComponentType<TextFieldProps>;
     readonly TextareaField: ComponentType<TextareaFieldProps>;
-    readonly TextEditorField: ComponentType<TextEditorFieldProps>;
+    readonly TextEditorField: import("react").FC<TextEditorFieldProps>;
     readonly NumberField: ComponentType<NumberFieldProps>;
     readonly EmailField: ComponentType<EmailFieldProps>;
     readonly PasswordField: ComponentType<PasswordFieldProps>;
@@ -3432,5 +3435,5 @@ declare const useTanStackForm: <TFormData, TOnMount extends FormValidateOrFn<TFo
   fields: TFields;
 }>) => ReturnType<import("react").FunctionComponent>;
 //#endregion
-export { EmailFieldProps as $, TanStackActionSubmit as A, TextField as B, SimpleNumberField as C, SimpleTextField as D, SimpleSelectField as E, TanStackFieldGroup as F, useTanStackFieldContext as G, useTanStackForm as H, TanStackPopoverForm as I, BooleanFieldValue as J, useTanStackFormContext as K, TanStackSectionForm as L, TanStackCardForm as M, TanStackContainerForm as N, SimpleTextareaField as O, TanStackDialogForm as P, DateFieldValue as Q, TanStackTitleField as R, SimpleEmailField as S, SimpleRadioGroupField as T, withTanStackFieldGroup as U, TextareaField as V, withTanStackForm as W, ComboboxFieldProps as X, CheckboxFieldProps as Y, DateFieldProps as Z, SelectField as _, DateField as a, NumberFieldValue as at, SimpleComboboxField as b, FieldContent as c, RadioOption as ct, FieldGroup as d, SimpleTextFieldProps as dt, FieldOrientation as et, FieldLabel as f, SwitchFieldProps as ft, RadioGroupField as g, TextareaFieldProps as gt, PasswordField as h, TextFieldValue as ht, ComboboxField as i, NumberFieldProps as it, TanStackActionsForm as j, SwitchField as k, FieldContentMain as l, SelectFieldProps as lt, NumberField as m, TextFieldProps as mt, ArrayHeaderRow as n, FieldType as nt, EmailField as o, PasswordFieldProps as ot, FieldSeparator as p, TextEditorFieldProps as pt, AnyFieldProps as q, CheckboxField as r, MultiSelectFieldValue as rt, Field as s, RadioGroupFieldProps as st, ArrayCol as t, FieldRounding as tt, FieldError as u, SelectOption as ut, SimpleArrayField as v, SimplePasswordField as w, SimpleDateField as x, SimpleBooleanField as y, TextEditorField as z };
-//# sourceMappingURL=index-DvC1inRy.d.mts.map
+export { EmailFieldProps as $, TanStackActionSubmit as A, TextareaField as B, SimpleNumberField as C, SimpleTextField as D, SimpleSelectField as E, TanStackFieldGroup as F, useTanStackFormContext as G, withTanStackFieldGroup as H, TanStackPopoverForm as I, BooleanFieldValue as J, TextEditorField as K, TanStackSectionForm as L, TanStackCardForm as M, TanStackContainerForm as N, SimpleTextareaField as O, TanStackDialogForm as P, DateFieldValue as Q, TanStackTitleField as R, SimpleEmailField as S, SimpleRadioGroupField as T, withTanStackForm as U, useTanStackForm as V, useTanStackFieldContext as W, ComboboxFieldProps as X, CheckboxFieldProps as Y, DateFieldProps as Z, SelectField as _, DateField as a, NumberFieldValue as at, SimpleComboboxField as b, FieldContent as c, RadioOption as ct, FieldGroup as d, SimpleTextFieldProps as dt, FieldOrientation as et, FieldLabel as f, SwitchFieldProps as ft, RadioGroupField as g, TextareaFieldProps as gt, PasswordField as h, TextFieldValue as ht, ComboboxField as i, NumberFieldProps as it, TanStackActionsForm as j, SwitchField as k, FieldContentMain as l, SelectFieldProps as lt, NumberField as m, TextFieldProps as mt, ArrayHeaderRow as n, FieldType as nt, EmailField as o, PasswordFieldProps as ot, FieldSeparator as p, TextEditorFieldProps as pt, AnyFieldProps as q, CheckboxField as r, MultiSelectFieldValue as rt, Field as s, RadioGroupFieldProps as st, ArrayCol as t, FieldRounding as tt, FieldError as u, SelectOption as ut, SimpleArrayField as v, SimplePasswordField as w, SimpleDateField as x, SimpleBooleanField as y, TextField as z };
+//# sourceMappingURL=index-CZ_2KVir.d.mts.map