@customafk/lunas-ui 0.2.65 → 0.2.66

package/dist/features/text-editor/index.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../text-editor-DJYQXXtP.cjs");exports.LinkDialog=e.r,exports.TextEditor=e.t,exports.TextEditorToolbar=e.n;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../text-editor-CfQk5dIx.cjs");exports.LinkDialog=e.r,exports.TextEditor=e.t,exports.TextEditorToolbar=e.n;

package/dist/features/text-editor/index.d.cts

@@ -1,2 +1,2 @@
-import { a as LinkDialog, i as TextEditorProps, n as TextEditorToolbarProps, o as LinkDialogProps, r as TextEditor, t as TextEditorToolbar } from "../../index-DOaKN0wJ.cjs";
+import { a as LinkDialog, i as TextEditorProps, n as TextEditorToolbarProps, o as LinkDialogProps, r as TextEditor, t as TextEditorToolbar } from "../../index-D9bKlLiM.cjs";
 export { LinkDialog, type LinkDialogProps, TextEditor, type TextEditorProps, TextEditorToolbar, type TextEditorToolbarProps };

package/dist/features/text-editor/index.d.mts

@@ -1,2 +1,2 @@
-import { a as LinkDialog, i as TextEditorProps, n as TextEditorToolbarProps, o as LinkDialogProps, r as TextEditor, t as TextEditorToolbar } from "../../index-DOaKN0wJ.mjs";
+import { a as LinkDialog, i as TextEditorProps, n as TextEditorToolbarProps, o as LinkDialogProps, r as TextEditor, t as TextEditorToolbar } from "../../index-D9bKlLiM.mjs";
 export { LinkDialog, type LinkDialogProps, TextEditor, type TextEditorProps, TextEditorToolbar, type TextEditorToolbarProps };

package/dist/features/text-editor/index.mjs

@@ -1 +1 @@
-"use client";import{n as e,r as t,t as n}from"../../text-editor-BQtIXOpM.mjs";export{t as LinkDialog,n as TextEditor,e as TextEditorToolbar};
+"use client";import{n as e,r as t,t as n}from"../../text-editor-BYE2-G5K.mjs";export{t as LinkDialog,n as TextEditor,e as TextEditorToolbar};

package/dist/file-uploader-U64lH0zG.d.cts

@@ -0,0 +1,101 @@
+import { DropzoneProps } from "react-dropzone";
+
+//#region packages/components/ui/file-uploader.d.ts
+/**
+ * Props for the FileUploader component.
+ *
+ * @example
+ * ```tsx
+ * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';
+ *
+ * <FileUploader
+ *   accept={{ 'image/*': [] }}
+ *   maxSize={1024 * 1024 * 5}
+ *   maxFileCount={3}
+ *   multiple
+ *   onUpload={async (files) => { await uploadFiles(files); }}
+ * />
+ * ```
+ */
+interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Value of the uploader.
+   * @type File[]
+   * @default undefined
+   * @example value={files}
+   */
+  value?: File[];
+  /**
+   * Function to be called when the value changes.
+   * @type (files: File[]) => void
+   * @default undefined
+   * @example onValueChange={(files) => setFiles(files)}
+   */
+  onValueChange?: (files: File[]) => void;
+  /**
+   * Function to be called when files are uploaded.
+   * @type (files: File[]) => Promise<void>
+   * @default undefined
+   * @example onUpload={(files) => uploadFiles(files)}
+   */
+  onUpload?: (files: File[]) => Promise<void>;
+  /**
+   * Progress of the uploaded files.
+   * @type Record<string, number> | undefined
+   * @default undefined
+   * @example progresses={{ "file1.png": 50 }}
+   */
+  progresses?: Record<string, number>;
+  /**
+   * Accepted file types for the uploader.
+   * @type { [key: string]: string[]}
+   * @default
+   * ```ts
+   * { "image/*": [] }
+   * ```
+   * @example accept={["image/png", "image/jpeg"]}
+   */
+  accept?: DropzoneProps['accept'];
+  /**
+   * Maximum file size for the uploader.
+   * @type number | undefined
+   * @default 1024 * 1024 * 2 // 2MB
+   * @example maxSize={1024 * 1024 * 2} // 2MB
+   */
+  maxSize?: DropzoneProps['maxSize'];
+  /**
+   * Maximum number of files for the uploader.
+   * @type number | undefined
+   * @default 1
+   * @example maxFileCount={4}
+   */
+  maxFileCount?: DropzoneProps['maxFiles'];
+  /**
+   * Whether the uploader should accept multiple files.
+   * @type boolean
+   * @default false
+   * @example multiple
+   */
+  multiple?: boolean;
+  /**
+   * Whether the uploader is disabled.
+   * @type boolean
+   * @default false
+   * @example disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether to show the instructional drag-and-drop text inside the drop zone.
+   * @default true
+   */
+  showText?: boolean;
+  /** Size in pixels for the upload icon. */
+  iconSize?: number;
+}
+/**
+ * A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.
+ */
+declare function FileUploader(props: FileUploaderProps): import("react").JSX.Element;
+//#endregion
+export { FileUploader as t };
+//# sourceMappingURL=file-uploader-U64lH0zG.d.cts.map

package/dist/file-uploader-U64lH0zG.d.mts

@@ -0,0 +1,101 @@
+import { DropzoneProps } from "react-dropzone";
+
+//#region packages/components/ui/file-uploader.d.ts
+/**
+ * Props for the FileUploader component.
+ *
+ * @example
+ * ```tsx
+ * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';
+ *
+ * <FileUploader
+ *   accept={{ 'image/*': [] }}
+ *   maxSize={1024 * 1024 * 5}
+ *   maxFileCount={3}
+ *   multiple
+ *   onUpload={async (files) => { await uploadFiles(files); }}
+ * />
+ * ```
+ */
+interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Value of the uploader.
+   * @type File[]
+   * @default undefined
+   * @example value={files}
+   */
+  value?: File[];
+  /**
+   * Function to be called when the value changes.
+   * @type (files: File[]) => void
+   * @default undefined
+   * @example onValueChange={(files) => setFiles(files)}
+   */
+  onValueChange?: (files: File[]) => void;
+  /**
+   * Function to be called when files are uploaded.
+   * @type (files: File[]) => Promise<void>
+   * @default undefined
+   * @example onUpload={(files) => uploadFiles(files)}
+   */
+  onUpload?: (files: File[]) => Promise<void>;
+  /**
+   * Progress of the uploaded files.
+   * @type Record<string, number> | undefined
+   * @default undefined
+   * @example progresses={{ "file1.png": 50 }}
+   */
+  progresses?: Record<string, number>;
+  /**
+   * Accepted file types for the uploader.
+   * @type { [key: string]: string[]}
+   * @default
+   * ```ts
+   * { "image/*": [] }
+   * ```
+   * @example accept={["image/png", "image/jpeg"]}
+   */
+  accept?: DropzoneProps['accept'];
+  /**
+   * Maximum file size for the uploader.
+   * @type number | undefined
+   * @default 1024 * 1024 * 2 // 2MB
+   * @example maxSize={1024 * 1024 * 2} // 2MB
+   */
+  maxSize?: DropzoneProps['maxSize'];
+  /**
+   * Maximum number of files for the uploader.
+   * @type number | undefined
+   * @default 1
+   * @example maxFileCount={4}
+   */
+  maxFileCount?: DropzoneProps['maxFiles'];
+  /**
+   * Whether the uploader should accept multiple files.
+   * @type boolean
+   * @default false
+   * @example multiple
+   */
+  multiple?: boolean;
+  /**
+   * Whether the uploader is disabled.
+   * @type boolean
+   * @default false
+   * @example disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether to show the instructional drag-and-drop text inside the drop zone.
+   * @default true
+   */
+  showText?: boolean;
+  /** Size in pixels for the upload icon. */
+  iconSize?: number;
+}
+/**
+ * A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.
+ */
+declare function FileUploader(props: FileUploaderProps): import("react").JSX.Element;
+//#endregion
+export { FileUploader as t };
+//# sourceMappingURL=file-uploader-U64lH0zG.d.mts.map

package/dist/filter-CMzD5h0M.mjs

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

package/dist/filter-CMzD5h0M.mjs.map

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

package/dist/filter-Cmg6SHMu.cjs

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

package/dist/filter-Cmg6SHMu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-Cmg6SHMu.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,oCACX,EAAW,SAAW,CAAC,EAAA,CAAG,SAAW,GACrC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,4CAAmC,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,WALF,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,mBAAW,EAAO,KAAY,CAAA,CACzC,GAdA,EAAO,KAcP,CACR,CAEA,CAAA,EAGD,GAIA,CAAE,QAAO,aAAY,eACzB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oCACX,EAAW,SAAW,CAAC,EAAA,CAAG,SAAW,GACrC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,4CAAmC,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,WALF,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,mBAAW,EAAO,KAAY,CAAA,CACzC,GAbA,EAAO,KAaP,CACR,CAEA,CAAA,EAGD,GAGA,CAAE,QAAO,eACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,4CAAmC,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,KACL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,4CAAmC,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,GACF,IAGD,GAGA,CAAE,QAAO,eACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,MAAO,EAAM,SAAU,cAAe,GAAM,EAAS,CAAE,GAAG,EAAO,SAAU,CAAoC,CAAC,WAAxH,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAK,eAClB,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,eAClC,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,mCAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,MAAO,EAAM,SAAU,cAAe,GAAM,EAAS,CAAE,GAAG,EAAO,SAAU,CAAkC,CAAC,WAAtH,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAK,eAClB,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,eAClC,EAAG,KACM,EAFK,EAAG,KAER,CACb,CACY,CAAA,CACT,KACR,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,mCACZ,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,WAEpD,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,mCAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,KAAA,CAACF,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAU,wDACV,eAAe,iCALjB,EAOE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mDAA2C,EAAW,KAAY,CAAA,GAClF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oDAA4C,EAAkB,EAAO,MAAO,CAAU,CAAQ,CAAA,CACxG,GACM,CAAA,GAChB,EAAA,EAAA,KAAA,CAACG,EAAAA,eAAD,CAAgB,UAAU,WAAW,MAAM,QAAQ,KAAK,kBAAxD,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6CACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,qCAAf,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oCAA4B,EAAW,EAAW,KAAY,CAAA,GAC9E,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,uBAAe,EAAW,KAAS,CAAA,CAC7C,GACF,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,MAAO,EAAO,MAAmB,aAAY,SAAU,CAAW,CAAA,CAClE,GACT,CAAA,CAAA,GACT,EAAA,EAAA,IAAA,CAACH,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,OAAO,QAAQ,OAAO,MAAM,SAAS,UAAU,SAAS,QAAS,YAC1F,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,YAC9F,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2DAAf,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,2CAuBb,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,IAAQ,UAAY,UAAY,mBAC9C,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mDAAf,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,uBAAc,QAAS,CAAA,GACpC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,KAAA,CAACT,EAAAA,OAAD,CAAQ,QAAQ,UAAU,MAAM,QAAQ,SAAU,EAAqB,SAAW,WAAlF,EACE,EAAA,EAAA,IAAA,CAACU,EAAAA,eAAD,CAAgB,KAAM,EAAK,CAAA,EAAC,aAEtB,GACW,CAAA,GACrB,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,MAAM,eACxB,EAAqB,IAAI,IACxB,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAA+B,UAAU,0BAA0B,YAAe,EAAU,EAAI,EAAE,WAAlG,CACG,EAAW,EAAI,MACf,EAAI,KACW,GAHK,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,6DAAoD,qBAAsB,CAAA,GAEvF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oCACZ,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,kFAAf,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,WAH5D,EAKE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,EAAK,CAAA,EAC1B,EAAc,OAAS,IACtB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,sJACb,EAAc,MACX,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kDAAyC,QAAY,CAAA,CAC/D,KACR,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAY,CAAA,CACT,GACF,GACS,CAAA,CAEpB"}

package/dist/flex-CT71VV-I.d.cts

@@ -0,0 +1,114 @@
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/layouts/flex.d.ts
+declare const flexVariants: (props?: ({
+  vertical?: boolean | null | undefined;
+  width?: "auto" | "max" | "min" | "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;
+  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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Props = {
+  /** 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
+   */
+  vertical?: boolean;
+  /**
+   * Controls the width of the flex container.
+   * - `'full'` — `w-full`
+   * - `'auto'` — `w-auto`
+   * - `'fit'`  — `w-fit` (default)
+   * - `'screen'` — `w-screen`
+   * - `'min'` — `w-min`
+   * - `'max'` — `w-max`
+   * - `'null'` — no width utility applied
+   * @default 'fit'
+   */
+  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';
+  /**
+   * Allows children to wrap onto multiple lines when `true`.
+   * @default true
+   */
+  wrap?: boolean;
+  /**
+   * Uniform margin applied to the container.
+   * - `'none'` — `m-0` (default)
+   * - `'sm'` — `m-2`
+   * - `'md'` — `m-4`
+   * - `'lg'` — `m-6`
+   * - `'xl'` — `m-8`
+   * @default 'none'
+   */
+  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Uniform padding applied to the container.
+   * - `'none'` — `p-0`
+   * - `'sm'`  — `p-2` (default)
+   * - `'md'`  — `p-4`
+   * - `'lg'`  — `p-6`
+   * - `'xl'`  — `p-8`
+   * @default 'sm'
+   */
+  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Gap between child elements.
+   * - `'none'` — `gap-0`
+   * - `'xs'`  — `gap-1` (default)
+   * - `'sm'`  — `gap-2`
+   * - `'md'`  — `gap-4`
+   * - `'lg'`  — `gap-6`
+   * - `'xl'`  — `gap-8`
+   * @default 'xs'
+   */
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Justification of children along the main axis (`justify-content`).
+   * @default 'start'
+   */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+  /**
+   * Alignment of children along the cross axis (`align-items`).
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+} & VariantProps<typeof flexVariants>;
+/**
+ * A flexible, variant-driven flex container built on CVA and TailwindCSS.
+ *
+ * @example
+ * ```tsx
+ * import { Flex } from '@customafk/lunas-ui/layouts/flex';
+ *
+ * // Horizontal row with centered children and a medium gap
+ * <Flex gap="md" justify="between" align="center">
+ *   <span>Left</span>
+ *   <span>Right</span>
+ * </Flex>
+ *
+ * // Vertical stack that fills parent width
+ * <Flex vertical width="full" gap="sm" padding="md">
+ *   <p>First item</p>
+ *   <p>Second item</p>
+ * </Flex>
+ * ```
+ */
+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-CT71VV-I.d.cts.map