@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/features/tanstack-form/index.d.cts

@@ -1,2 +1,2 @@
-import { $ as EmailFieldProps, A as EmailField, B as SimpleRadioGroupField, C as TextareaField, D as RadioGroupField, E as SelectField, F as SimpleTextareaField, G as ArrayHeaderRow, H as SimpleComboboxField, I as SimpleSelectField, J as BooleanFieldValue, K as SimpleArrayField, L as SimplePasswordField, M as ComboboxField, N as CheckboxField, O as PasswordField, P as SimpleTextField, Q as DateFieldValue, R as SimpleNumberField, S as TextEditorField, T as SwitchField, U as SimpleBooleanField, V as SimpleDateField, W as ArrayCol, X as ComboboxFieldProps, Y as CheckboxFieldProps, Z as DateFieldProps, _ as TanStackDialogForm, a as withTanStackForm, at as NumberFieldValue, b as TanStackActionsForm, c as FieldContentMain, ct as RadioOption, d as FieldLabel, dt as SimpleTextFieldProps, et as FieldOrientation, f as FieldSeparator, ft as SwitchFieldProps, g as TanStackFieldGroup, gt as TextareaFieldProps, h as TanStackPopoverForm, ht as TextFieldValue, i as withTanStackFieldGroup, it as NumberFieldProps, j as DateField, k as NumberField, l as FieldError, lt as SelectFieldProps, m as TanStackSectionForm, mt as TextFieldProps, n as useTanStackForm, nt as FieldType, o as Field, ot as PasswordFieldProps, p as TanStackTitleField, pt as TextEditorFieldProps, q as AnyFieldProps, r as useTanStackFormContext, rt as MultiSelectFieldValue, s as FieldContent, st as RadioGroupFieldProps, t as useTanStackFieldContext, tt as FieldRounding, u as FieldGroup, ut as SelectOption, v as TanStackContainerForm, w as TextField, x as TanStackActionSubmit, y as TanStackCardForm, z as SimpleEmailField } from "../../index-C2KjuFXQ.cjs";
+import { $ as EmailFieldProps, A as TanStackActionSubmit, B as TextField, C as SimpleNumberField, D as SimpleTextField, E as SimpleSelectField, F as TanStackFieldGroup, G as useTanStackFieldContext, H as useTanStackForm, I as TanStackPopoverForm, J as BooleanFieldValue, K as useTanStackFormContext, L as TanStackSectionForm, M as TanStackCardForm, N as TanStackContainerForm, O as SimpleTextareaField, P as TanStackDialogForm, Q as DateFieldValue, R as TanStackTitleField, S as SimpleEmailField, T as SimpleRadioGroupField, U as withTanStackFieldGroup, V as TextareaField, W as withTanStackForm, X as ComboboxFieldProps, Y as CheckboxFieldProps, Z as DateFieldProps, _ as SelectField, a as DateField, at as NumberFieldValue, b as SimpleComboboxField, c as FieldContent, ct as RadioOption, d as FieldGroup, dt as SimpleTextFieldProps, et as FieldOrientation, f as FieldLabel, ft as SwitchFieldProps, g as RadioGroupField, gt as TextareaFieldProps, h as PasswordField, ht as TextFieldValue, i as ComboboxField, it as NumberFieldProps, j as TanStackActionsForm, k as SwitchField, l as FieldContentMain, lt as SelectFieldProps, m as NumberField, mt as TextFieldProps, n as ArrayHeaderRow, nt as FieldType, o as EmailField, ot as PasswordFieldProps, p as FieldSeparator, pt as TextEditorFieldProps, q as AnyFieldProps, r as CheckboxField, rt as MultiSelectFieldValue, s as Field, st as RadioGroupFieldProps, t as ArrayCol, tt as FieldRounding, u as FieldError, ut as SelectOption, v as SimpleArrayField, w as SimplePasswordField, x as SimpleDateField, y as SimpleBooleanField, z as TextEditorField } from "../../index-DDROD2y9.cjs";
 export { AnyFieldProps, ArrayCol, ArrayHeaderRow, BooleanFieldValue, CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxFieldProps, DateField, DateFieldProps, DateFieldValue, EmailField, EmailFieldProps, Field, FieldContent, FieldContentMain, FieldError, FieldGroup, FieldLabel, FieldOrientation, FieldRounding, FieldSeparator, FieldType, MultiSelectFieldValue, NumberField, NumberFieldProps, NumberFieldValue, PasswordField, PasswordFieldProps, RadioGroupField, RadioGroupFieldProps, RadioOption, SelectField, SelectFieldProps, SelectOption, SimpleArrayField, SimpleBooleanField, SimpleComboboxField, SimpleDateField, SimpleEmailField, SimpleNumberField, SimplePasswordField, SimpleRadioGroupField, SimpleSelectField, SimpleTextField, SimpleTextFieldProps, SimpleTextareaField, SwitchField, SwitchFieldProps, TanStackActionSubmit, TanStackActionsForm, TanStackCardForm, TanStackContainerForm, TanStackDialogForm, TanStackFieldGroup, TanStackPopoverForm, TanStackSectionForm, TanStackTitleField, TextEditorField, TextEditorFieldProps, TextField, TextFieldProps, TextFieldValue, TextareaField, TextareaFieldProps, useTanStackFieldContext, useTanStackForm, useTanStackFormContext, withTanStackFieldGroup, withTanStackForm };

package/dist/features/tanstack-form/index.d.mts

@@ -1,2 +1,2 @@
-import { $ as EmailFieldProps, A as EmailField, B as SimpleRadioGroupField, C as TextareaField, D as RadioGroupField, E as SelectField, F as SimpleTextareaField, G as ArrayHeaderRow, H as SimpleComboboxField, I as SimpleSelectField, J as BooleanFieldValue, K as SimpleArrayField, L as SimplePasswordField, M as ComboboxField, N as CheckboxField, O as PasswordField, P as SimpleTextField, Q as DateFieldValue, R as SimpleNumberField, S as TextEditorField, T as SwitchField, U as SimpleBooleanField, V as SimpleDateField, W as ArrayCol, X as ComboboxFieldProps, Y as CheckboxFieldProps, Z as DateFieldProps, _ as TanStackDialogForm, a as withTanStackForm, at as NumberFieldValue, b as TanStackActionsForm, c as FieldContentMain, ct as RadioOption, d as FieldLabel, dt as SimpleTextFieldProps, et as FieldOrientation, f as FieldSeparator, ft as SwitchFieldProps, g as TanStackFieldGroup, gt as TextareaFieldProps, h as TanStackPopoverForm, ht as TextFieldValue, i as withTanStackFieldGroup, it as NumberFieldProps, j as DateField, k as NumberField, l as FieldError, lt as SelectFieldProps, m as TanStackSectionForm, mt as TextFieldProps, n as useTanStackForm, nt as FieldType, o as Field, ot as PasswordFieldProps, p as TanStackTitleField, pt as TextEditorFieldProps, q as AnyFieldProps, r as useTanStackFormContext, rt as MultiSelectFieldValue, s as FieldContent, st as RadioGroupFieldProps, t as useTanStackFieldContext, tt as FieldRounding, u as FieldGroup, ut as SelectOption, v as TanStackContainerForm, w as TextField, x as TanStackActionSubmit, y as TanStackCardForm, z as SimpleEmailField } from "../../index-C2KjuFXQ.mjs";
+import { $ as EmailFieldProps, A as TanStackActionSubmit, B as TextField, C as SimpleNumberField, D as SimpleTextField, E as SimpleSelectField, F as TanStackFieldGroup, G as useTanStackFieldContext, H as useTanStackForm, I as TanStackPopoverForm, J as BooleanFieldValue, K as useTanStackFormContext, L as TanStackSectionForm, M as TanStackCardForm, N as TanStackContainerForm, O as SimpleTextareaField, P as TanStackDialogForm, Q as DateFieldValue, R as TanStackTitleField, S as SimpleEmailField, T as SimpleRadioGroupField, U as withTanStackFieldGroup, V as TextareaField, W as withTanStackForm, X as ComboboxFieldProps, Y as CheckboxFieldProps, Z as DateFieldProps, _ as SelectField, a as DateField, at as NumberFieldValue, b as SimpleComboboxField, c as FieldContent, ct as RadioOption, d as FieldGroup, dt as SimpleTextFieldProps, et as FieldOrientation, f as FieldLabel, ft as SwitchFieldProps, g as RadioGroupField, gt as TextareaFieldProps, h as PasswordField, ht as TextFieldValue, i as ComboboxField, it as NumberFieldProps, j as TanStackActionsForm, k as SwitchField, l as FieldContentMain, lt as SelectFieldProps, m as NumberField, mt as TextFieldProps, n as ArrayHeaderRow, nt as FieldType, o as EmailField, ot as PasswordFieldProps, p as FieldSeparator, pt as TextEditorFieldProps, q as AnyFieldProps, r as CheckboxField, rt as MultiSelectFieldValue, s as Field, st as RadioGroupFieldProps, t as ArrayCol, tt as FieldRounding, u as FieldError, ut as SelectOption, v as SimpleArrayField, w as SimplePasswordField, x as SimpleDateField, y as SimpleBooleanField, z as TextEditorField } from "../../index-DDROD2y9.mjs";
 export { AnyFieldProps, ArrayCol, ArrayHeaderRow, BooleanFieldValue, CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxFieldProps, DateField, DateFieldProps, DateFieldValue, EmailField, EmailFieldProps, Field, FieldContent, FieldContentMain, FieldError, FieldGroup, FieldLabel, FieldOrientation, FieldRounding, FieldSeparator, FieldType, MultiSelectFieldValue, NumberField, NumberFieldProps, NumberFieldValue, PasswordField, PasswordFieldProps, RadioGroupField, RadioGroupFieldProps, RadioOption, SelectField, SelectFieldProps, SelectOption, SimpleArrayField, SimpleBooleanField, SimpleComboboxField, SimpleDateField, SimpleEmailField, SimpleNumberField, SimplePasswordField, SimpleRadioGroupField, SimpleSelectField, SimpleTextField, SimpleTextFieldProps, SimpleTextareaField, SwitchField, SwitchFieldProps, TanStackActionSubmit, TanStackActionsForm, TanStackCardForm, TanStackContainerForm, TanStackDialogForm, TanStackFieldGroup, TanStackPopoverForm, TanStackSectionForm, TanStackTitleField, TextEditorField, TextEditorFieldProps, TextField, TextFieldProps, TextFieldValue, TextareaField, TextareaFieldProps, useTanStackFieldContext, useTanStackForm, useTanStackFormContext, withTanStackFieldGroup, withTanStackForm };

package/dist/features/tanstack-form/index.mjs

@@ -1 +1 @@
-import{A as e,B as t,C as n,D as r,E as i,F as a,G as o,H as s,I as c,K as l,L as u,M as d,N as f,O as p,P as m,R as h,S as g,T as _,U as v,V as y,W as b,_ as x,a as S,b as C,c as w,d as T,f as E,g as D,h as O,i as k,j as A,k as j,l as M,m as N,n as P,o as F,p as I,r as L,s as R,t as z,u as B,v as V,w as H,x as U,y as W,z as G}from"../../tanstack-form-DTCgWGCA.mjs";export{b as ArrayCol,o as ArrayHeaderRow,i as CheckboxField,_ as ComboboxField,H as DateField,n as EmailField,u as Field,h as FieldContent,G as FieldContentMain,t as FieldError,y as FieldGroup,s as FieldLabel,v as FieldSeparator,g as NumberField,U as PasswordField,C as RadioGroupField,W as SelectField,l as SimpleArrayField,c as SimpleBooleanField,a as SimpleComboboxField,m as SimpleDateField,d as SimpleEmailField,A as SimpleNumberField,e as SimplePasswordField,f as SimpleRadioGroupField,j as SimpleSelectField,r as SimpleTextField,p as SimpleTextareaField,V as SwitchField,N as TanStackActionSubmit,I as TanStackActionsForm,E as TanStackCardForm,T as TanStackContainerForm,B as TanStackDialogForm,M as TanStackFieldGroup,w as TanStackPopoverForm,R as TanStackSectionForm,F as TanStackTitleField,O as TextEditorField,x as TextField,D as TextareaField,z as useTanStackFieldContext,P as useTanStackForm,L as useTanStackFormContext,k as withTanStackFieldGroup,S as withTanStackForm};
+import{A as e,B as t,C as n,D as r,E as i,F as a,G as o,H as s,I as c,K as l,L as u,M as d,N as f,O as p,P as m,R as h,S as g,T as _,U as v,V as y,W as b,_ as x,a as S,b as C,c as w,d as T,f as E,g as D,h as O,i as k,j as A,k as j,l as M,m as N,n as P,o as F,p as I,r as L,s as R,t as z,u as B,v as V,w as H,x as U,y as W,z as G}from"../../tanstack-form-PC9YNeeo.mjs";export{z as ArrayCol,P as ArrayHeaderRow,L as CheckboxField,k as ComboboxField,S as DateField,F as EmailField,R as Field,w as FieldContent,M as FieldContentMain,B as FieldError,T as FieldGroup,E as FieldLabel,I as FieldSeparator,N as NumberField,O as PasswordField,D as RadioGroupField,x as SelectField,V as SimpleArrayField,W as SimpleBooleanField,C as SimpleComboboxField,U as SimpleDateField,g as SimpleEmailField,n as SimpleNumberField,H as SimplePasswordField,_ as SimpleRadioGroupField,i as SimpleSelectField,r as SimpleTextField,p as SimpleTextareaField,j as SwitchField,e as TanStackActionSubmit,A as TanStackActionsForm,d as TanStackCardForm,f as TanStackContainerForm,m as TanStackDialogForm,a as TanStackFieldGroup,c as TanStackPopoverForm,u as TanStackSectionForm,h as TanStackTitleField,G as TextEditorField,t as TextField,y as TextareaField,o as useTanStackFieldContext,s as useTanStackForm,l as useTanStackFormContext,v as withTanStackFieldGroup,b as withTanStackForm};

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/field-BKyUqvzh.mjs

@@ -0,0 +1,2 @@
+import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"./ui/tooltip.mjs";import{Separator as r}from"./ui/separator.mjs";import{HelpCircleIcon as i,InfoIcon as a}from"lucide-react";import{memo as o,useMemo as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{cva as l}from"class-variance-authority";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{Label as f}from"radix-ui";function p({className:e,children:t,...n}){return d(f.Root,{"data-slot":`label`,className:c(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required:*:data-[slot=required-indicator]:inline-block`,e),...n,children:[u(`span`,{className:`flex items-center gap-1`,children:t}),u(`span`,{"data-slot":`required-indicator`,className:`hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white`,children:`Bắt buộc`})]})}const m=l(`group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center gap-4`,`*:data-[slot=field-content]:basis-1/2`,`*:data-[slot=field-content-main]:flex-1`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-content]:basis-1/2`,`@md/field-group:*:data-[slot=field-content-main]:basis-1/2`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),h=o(({className:e,...t})=>u(`fieldset`,{"data-slot":`field-set`,className:c(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));h.displayName=`FieldSet`;const g=o(({className:e,variant:t=`legend`,...n})=>u(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:c(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));g.displayName=`FieldLegend`;const _=o(({className:e,...t})=>u(`div`,{"data-slot":`field-group`,className:c(`group/field-group @container/field-group`,`flex flex-col gap-7 pt-4`,`data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));_.displayName=`FieldGroup`;const v=o(({className:e,orientation:t=`vertical`,...n})=>u(`div`,{"data-slot":`field`,"data-orientation":t,className:c(m({orientation:t}),e),...n}));v.displayName=`Field`;const y=o(({className:e,...t})=>u(`div`,{"data-slot":`field-content`,className:c(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));y.displayName=`FieldContent`;const b=o(({className:e,...t})=>u(`div`,{"data-slot":`field-content-main`,className:c(`relative`,e),...t}));b.displayName=`FieldContentMain`;const x=o(({className:e,...t})=>u(p,{"data-slot":`field-label`,className:c(`group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));x.displayName=`FieldLabel`;const S=o(({className:e,...t})=>u(`div`,{"data-slot":`field-label`,className:c(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));S.displayName=`FieldTitle`;const C=o(({className:e,...t})=>u(`p`,{"data-slot":`field-description`,className:c(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));C.displayName=`FieldDescription`;const w=o(({isShow:e=!0,className:t,children:n,...r})=>e===!1?null:d(`div`,{"data-slot":`field-note`,className:c(`flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs`,t),...r,children:[u(a,{size:12,className:`mt-0.5 shrink-0 text-primary/70`}),u(`span`,{children:n})]}));w.displayName=`FieldNote`;const T=o(({tooltip:r})=>d(e,{children:[u(n,{asChild:!0,children:d(`button`,{type:`button`,tabIndex:-1,className:`inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none`,children:[u(i,{size:13,"aria-hidden":`true`}),u(`span`,{className:`sr-only`,children:`Thêm thông tin`})]})}),u(t,{side:`top`,className:`max-w-xs text-balance`,children:r})]}));T.displayName=`FieldTooltip`;const E=o(({children:e,className:t,...n})=>d(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:c(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,t),...n,children:[u(r,{className:`absolute inset-0 top-1/2`}),e&&u(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));E.displayName=`FieldSeparator`;const D=o(({className:e,children:t,errors:n,requiredMessage:r=`Trường này là bắt buộc`,...i})=>{let a=s(()=>{let e=e=>e.code===`invalid_type`?r:e.message;return t||(n?n?.length===1&&n[0]?.message?u(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:u(`p`,{children:e(n[0])})}):u(`ul`,{className:`flex list-none flex-col`,children:n.map(t=>typeof t==`string`?u(`li`,{children:t},t):t?.message?u(`li`,{children:e(t)},t.code??t.message):null)}):null)},[t,n,r]);return a?u(`div`,{role:`alert`,"data-slot":`field-error`,className:c(`w-full font-medium text-danger-strong text-xs`,e),...i,children:a}):null});D.displayName=`FieldError`;export{v as Field,y as FieldContent,b as FieldContentMain,C as FieldDescription,D as FieldError,_ as FieldGroup,x as FieldLabel,g as FieldLegend,w as FieldNote,E as FieldSeparator,S as FieldTitle,T as FieldTooltip};
+//# sourceMappingURL=field-BKyUqvzh.mjs.map

package/dist/field-BKyUqvzh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-BKyUqvzh.mjs","names":["Label","LabelPrimitive","Label","Tooltip","Separator"],"sources":["../packages/components/features/tanstack-form/components/ui/label.tsx","../packages/components/features/tanstack-form/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Label as LabelPrimitive } from 'radix-ui';\n\n/**\n * Form field label that automatically renders a \"Required\" badge when the field is marked aria-required.\n *\n * @example\n * import { Label } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Label htmlFor=\"email\">Email address</Label>\n */\nfunction Label({ className, children, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        'text-text-positive',\n        'flex w-full items-center justify-between',\n        'select-none font-medium text-sm/6 leading-none',\n        'group-data-[disabled=true]:pointer-events-none',\n        'group-data-[disabled=true]:opacity-50',\n        'peer-disabled:cursor-not-allowed',\n        'peer-disabled:opacity-50',\n        'aria-required:*:data-[slot=required-indicator]:inline-block',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex items-center gap-1\">{children}</span>\n      <span\n        data-slot=\"required-indicator\"\n        className=\"hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white\"\n      >\n        Bắt buộc\n      </span>\n    </LabelPrimitive.Root>\n  );\n}\n\nexport { Label };\n","'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { HelpCircleIcon, InfoIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from './label';\n\nconst fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col *:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center gap-4',\n        '*:data-[slot=field-content]:basis-1/2',\n        '*:data-[slot=field-content-main]:flex-1',\n        '*:data-[slot=field-label]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col *:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:gap-4',\n        '@md/field-group:*:w-auto',\n        '@md/field-group:*:data-[slot=field-content]:basis-1/2',\n        '@md/field-group:*:data-[slot=field-content-main]:basis-1/2',\n        '@md/field-group:*:data-[slot=field-label]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\n/**\n * Outermost `<fieldset>` wrapper that stacks multiple `Field` rows with consistent vertical spacing.\n *\n * @example\n * import { FieldSet } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSet>\n *   <Field><FieldLabel>Name</FieldLabel><FieldContent><input /></FieldContent></Field>\n * </FieldSet>\n */\nconst FieldSet = memo(({ className, ...props }: React.ComponentProps<'fieldset'>) => {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n});\nFieldSet.displayName = 'FieldSet';\n\n/**\n * Props for {@link FieldLegend}.\n */\ntype FieldLegendProps = React.ComponentProps<'legend'> & {\n  /**\n   * Visual weight of the legend text.\n   * - `'legend'` — larger base-size text (section heading).\n   * - `'label'` — smaller label-size text (matches field label weight).\n   * @default 'legend'\n   */\n  variant?: 'legend' | 'label';\n};\n\n/**\n * `<legend>` element for a `<fieldset>`, styled as either a section heading or a compact label.\n *\n * @example\n * import { FieldSet, FieldLegend } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSet>\n *   <FieldLegend variant=\"legend\">Personal details</FieldLegend>\n * </FieldSet>\n */\nconst FieldLegend = memo(({ className, variant = 'legend', ...props }: FieldLegendProps) => {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}\n      {...props}\n    />\n  );\n});\nFieldLegend.displayName = 'FieldLegend';\n\n/**\n * Container `<div>` that groups a set of `Field` rows with container-query support for responsive layouts.\n *\n * @example\n * import { FieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldGroup>\n *   <Field>…</Field>\n *   <Field>…</Field>\n * </FieldGroup>\n */\nconst FieldGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group',\n        'flex flex-col gap-7 pt-4',\n        'data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldGroup.displayName = 'FieldGroup';\n\n/**\n * Single form field row that arranges label, input, and meta elements with configurable orientation.\n *\n * @example\n * import { Field } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Field orientation=\"horizontal\">\n *   <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n *   <FieldContent><input id=\"username\" /></FieldContent>\n * </Field>\n */\nconst Field = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n});\nField.displayName = 'Field';\n\n/**\n * Flex column wrapper that houses the primary input control together with description and error slots.\n *\n * @example\n * import { FieldContent } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldContent>\n *   <input type=\"text\" />\n *   <FieldDescription>Enter your full name.</FieldDescription>\n * </FieldContent>\n */\nconst FieldContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex flex-col gap-1.5 leading-snug', className)} {...props} />;\n});\nFieldContent.displayName = 'FieldContent';\n\n/**\n * Positioned wrapper for the main input element that enables absolutely-placed adornments (icons, spinners).\n *\n * @example\n * import { FieldContentMain } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldContentMain>\n *   <input type=\"text\" className=\"pr-8\" />\n *   <SearchIcon className=\"absolute right-2 top-2\" />\n * </FieldContentMain>\n */\nconst FieldContentMain = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content-main\" className={cn('relative', className)} {...props} />;\n});\nFieldContentMain.displayName = 'FieldContentMain';\n\n/**\n * Styled `<label>` element for a `Field`, extending the base `Label` with field-group-aware spacing and border states.\n *\n * @example\n * import { FieldLabel } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldLabel htmlFor=\"email\" aria-required>Email</FieldLabel>\n */\nconst FieldLabel = memo(({ className, ...props }: React.ComponentProps<typeof Label>) => {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        'has-[>[data-slot=field]]:border-border',\n        'has-data-[state=checked]:border-primary',\n        '*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldLabel.displayName = 'FieldLabel';\n\n/**\n * Inline title element (non-`<label>`) for fields whose label cannot be a native `<label>`, such as custom checkbox groups.\n *\n * @example\n * import { FieldTitle } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldTitle>Notification preferences</FieldTitle>\n */\nconst FieldTitle = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n});\nFieldTitle.displayName = 'FieldTitle';\n\n/**\n * Supplementary hint text rendered below the input to guide the user, with support for inline anchor links.\n *\n * @example\n * import { FieldDescription } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldDescription>Must be at least 8 characters.</FieldDescription>\n */\nconst FieldDescription = memo(({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        // biome-ignore lint/security/noSecrets: true\n        'nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldDescription.displayName = 'FieldDescription';\n\n/**\n * Props for {@link FieldNote}.\n */\ntype FieldNoteProps = React.ComponentProps<'div'> & {\n  /**\n   * When `false` the note is not rendered at all; useful for conditional display without wrapper conditionals.\n   * @default true\n   */\n  isShow?: boolean;\n};\n\n/**\n * Highlighted informational callout box with an info icon, shown below a field to surface contextual guidance.\n *\n * @example\n * import { FieldNote } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldNote isShow={isDraftMode}>Changes are saved automatically in draft mode.</FieldNote>\n */\nconst FieldNote = memo(({ isShow = true, className, children, ...props }: FieldNoteProps) => {\n  if (isShow === false) return null;\n  return (\n    <div\n      data-slot=\"field-note\"\n      className={cn(\n        'flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs',\n        className\n      )}\n      {...props}\n    >\n      <InfoIcon size={12} className=\"mt-0.5 shrink-0 text-primary/70\" />\n      <span>{children}</span>\n    </div>\n  );\n});\nFieldNote.displayName = 'FieldNote';\n\n/**\n * Props for {@link FieldTooltip}.\n */\ntype FieldTooltipProps = {\n  /** Text content displayed inside the tooltip when the help icon is hovered or focused. */\n  tooltip: string;\n};\n\n/**\n * Small help-circle icon button that reveals a tooltip with additional field context on hover or focus.\n *\n * @example\n * import { FieldTooltip } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldLabel>\n *   Password <FieldTooltip tooltip=\"Use at least one uppercase letter and one number.\" />\n * </FieldLabel>\n */\nconst FieldTooltip = memo(({ tooltip }: FieldTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          className=\"inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none\"\n        >\n          <HelpCircleIcon size={13} aria-hidden=\"true\" />\n          <span className=\"sr-only\">Thêm thông tin</span>\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\" className=\"max-w-xs text-balance\">\n        {tooltip}\n      </TooltipContent>\n    </Tooltip>\n  );\n});\nFieldTooltip.displayName = 'FieldTooltip';\n\n/**\n * Visual divider row that optionally displays a centered text label, used to separate logical sections within a `FieldGroup`.\n *\n * @example\n * import { FieldSeparator } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSeparator>or</FieldSeparator>\n */\nconst FieldSeparator = memo(({ children, className, ...props }: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span className=\"relative mx-auto block w-fit bg-background px-2 text-text-positive-weak\" data-slot=\"field-separator-content\">\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\nFieldSeparator.displayName = 'FieldSeparator';\n\n/**\n * Props for {@link FieldError}.\n */\ntype FieldErrorProps = React.ComponentProps<'div'> & {\n  errors?: Array<{ code?: string; message?: string } | undefined>;\n  requiredMessage?: string;\n};\n\nconst FieldError = memo(({ className, children, errors, requiredMessage = 'Trường này là bắt buộc', ...props }: FieldErrorProps) => {\n  const content = useMemo(() => {\n    const resolve = (error: { code?: string; message?: string }) => (error.code === 'invalid_type' ? requiredMessage : error.message);\n\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return (\n        <div className=\"flex flex-row items-center justify-start gap-x-0.5\">\n          <p>{resolve(errors[0])}</p>\n        </div>\n      );\n    }\n\n    return (\n      <ul className=\"flex list-none flex-col\">\n        {errors.map(error => {\n          if (typeof error === 'string') return <li key={error}>{error}</li>;\n          if (!error?.message) return null;\n          return <li key={error.code ?? error.message}>{resolve(error)}</li>;\n        })}\n      </ul>\n    );\n  }, [children, errors, requiredMessage]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div role=\"alert\" data-slot=\"field-error\" className={cn('w-full font-medium text-danger-strong text-xs', className)} {...props}>\n      {content}\n    </div>\n  );\n});\nFieldError.displayName = 'FieldError';\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldNote,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldContentMain,\n  FieldTitle,\n  FieldTooltip,\n};\n"],"mappings":"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"}

package/dist/field-BV5twmKA.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/tooltip.cjs"),t=require("./ui/separator.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("class-variance-authority"),o=require("react/jsx-runtime"),s=require("radix-ui");function c({className:e,children:t,...n}){return(0,o.jsxs)(s.Label.Root,{"data-slot":`label`,className:(0,i.cn)(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required:*:data-[slot=required-indicator]:inline-block`,e),...n,children:[(0,o.jsx)(`span`,{className:`flex items-center gap-1`,children:t}),(0,o.jsx)(`span`,{"data-slot":`required-indicator`,className:`hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white`,children:`Bắt buộc`})]})}const l=(0,a.cva)(`group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center gap-4`,`*:data-[slot=field-content]:basis-1/2`,`*:data-[slot=field-content-main]:flex-1`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-content]:basis-1/2`,`@md/field-group:*:data-[slot=field-content-main]:basis-1/2`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),u=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(`fieldset`,{"data-slot":`field-set`,className:(0,i.cn)(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));u.displayName=`FieldSet`;const d=(0,r.memo)(({className:e,variant:t=`legend`,...n})=>(0,o.jsx)(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:(0,i.cn)(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));d.displayName=`FieldLegend`;const f=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(`div`,{"data-slot":`field-group`,className:(0,i.cn)(`group/field-group @container/field-group`,`flex flex-col gap-7 pt-4`,`data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));f.displayName=`FieldGroup`;const p=(0,r.memo)(({className:e,orientation:t=`vertical`,...n})=>(0,o.jsx)(`div`,{"data-slot":`field`,"data-orientation":t,className:(0,i.cn)(l({orientation:t}),e),...n}));p.displayName=`Field`;const m=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(`div`,{"data-slot":`field-content`,className:(0,i.cn)(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));m.displayName=`FieldContent`;const h=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(`div`,{"data-slot":`field-content-main`,className:(0,i.cn)(`relative`,e),...t}));h.displayName=`FieldContentMain`;const g=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(c,{"data-slot":`field-label`,className:(0,i.cn)(`group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));g.displayName=`FieldLabel`;const _=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(`div`,{"data-slot":`field-label`,className:(0,i.cn)(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));_.displayName=`FieldTitle`;const v=(0,r.memo)(({className:e,...t})=>(0,o.jsx)(`p`,{"data-slot":`field-description`,className:(0,i.cn)(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));v.displayName=`FieldDescription`;const y=(0,r.memo)(({isShow:e=!0,className:t,children:r,...a})=>e===!1?null:(0,o.jsxs)(`div`,{"data-slot":`field-note`,className:(0,i.cn)(`flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs`,t),...a,children:[(0,o.jsx)(n.InfoIcon,{size:12,className:`mt-0.5 shrink-0 text-primary/70`}),(0,o.jsx)(`span`,{children:r})]}));y.displayName=`FieldNote`;const b=(0,r.memo)(({tooltip:t})=>(0,o.jsxs)(e.Tooltip,{children:[(0,o.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,o.jsxs)(`button`,{type:`button`,tabIndex:-1,className:`inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none`,children:[(0,o.jsx)(n.HelpCircleIcon,{size:13,"aria-hidden":`true`}),(0,o.jsx)(`span`,{className:`sr-only`,children:`Thêm thông tin`})]})}),(0,o.jsx)(e.TooltipContent,{side:`top`,className:`max-w-xs text-balance`,children:t})]}));b.displayName=`FieldTooltip`;const x=(0,r.memo)(({children:e,className:n,...r})=>(0,o.jsxs)(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:(0,i.cn)(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,n),...r,children:[(0,o.jsx)(t.Separator,{className:`absolute inset-0 top-1/2`}),e&&(0,o.jsx)(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));x.displayName=`FieldSeparator`;const S=(0,r.memo)(({className:e,children:t,errors:n,requiredMessage:a=`Trường này là bắt buộc`,...s})=>{let c=(0,r.useMemo)(()=>{let e=e=>e.code===`invalid_type`?a:e.message;return t||(n?n?.length===1&&n[0]?.message?(0,o.jsx)(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:(0,o.jsx)(`p`,{children:e(n[0])})}):(0,o.jsx)(`ul`,{className:`flex list-none flex-col`,children:n.map(t=>typeof t==`string`?(0,o.jsx)(`li`,{children:t},t):t?.message?(0,o.jsx)(`li`,{children:e(t)},t.code??t.message):null)}):null)},[t,n,a]);return c?(0,o.jsx)(`div`,{role:`alert`,"data-slot":`field-error`,className:(0,i.cn)(`w-full font-medium text-danger-strong text-xs`,e),...s,children:c}):null});S.displayName=`FieldError`,exports.Field=p,exports.FieldContent=m,exports.FieldContentMain=h,exports.FieldDescription=v,exports.FieldError=S,exports.FieldGroup=f,exports.FieldLabel=g,exports.FieldLegend=d,exports.FieldNote=y,exports.FieldSeparator=x,exports.FieldTitle=_,exports.FieldTooltip=b;
+//# sourceMappingURL=field-BV5twmKA.cjs.map

package/dist/field-BV5twmKA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-BV5twmKA.cjs","names":["LabelPrimitive","InfoIcon","Tooltip","TooltipTrigger","HelpCircleIcon","TooltipContent","Separator"],"sources":["../packages/components/features/tanstack-form/components/ui/label.tsx","../packages/components/features/tanstack-form/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Label as LabelPrimitive } from 'radix-ui';\n\n/**\n * Form field label that automatically renders a \"Required\" badge when the field is marked aria-required.\n *\n * @example\n * import { Label } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Label htmlFor=\"email\">Email address</Label>\n */\nfunction Label({ className, children, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        'text-text-positive',\n        'flex w-full items-center justify-between',\n        'select-none font-medium text-sm/6 leading-none',\n        'group-data-[disabled=true]:pointer-events-none',\n        'group-data-[disabled=true]:opacity-50',\n        'peer-disabled:cursor-not-allowed',\n        'peer-disabled:opacity-50',\n        'aria-required:*:data-[slot=required-indicator]:inline-block',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex items-center gap-1\">{children}</span>\n      <span\n        data-slot=\"required-indicator\"\n        className=\"hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white\"\n      >\n        Bắt buộc\n      </span>\n    </LabelPrimitive.Root>\n  );\n}\n\nexport { Label };\n","'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { HelpCircleIcon, InfoIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from './label';\n\nconst fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col *:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center gap-4',\n        '*:data-[slot=field-content]:basis-1/2',\n        '*:data-[slot=field-content-main]:flex-1',\n        '*:data-[slot=field-label]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col *:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:gap-4',\n        '@md/field-group:*:w-auto',\n        '@md/field-group:*:data-[slot=field-content]:basis-1/2',\n        '@md/field-group:*:data-[slot=field-content-main]:basis-1/2',\n        '@md/field-group:*:data-[slot=field-label]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\n/**\n * Outermost `<fieldset>` wrapper that stacks multiple `Field` rows with consistent vertical spacing.\n *\n * @example\n * import { FieldSet } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSet>\n *   <Field><FieldLabel>Name</FieldLabel><FieldContent><input /></FieldContent></Field>\n * </FieldSet>\n */\nconst FieldSet = memo(({ className, ...props }: React.ComponentProps<'fieldset'>) => {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n});\nFieldSet.displayName = 'FieldSet';\n\n/**\n * Props for {@link FieldLegend}.\n */\ntype FieldLegendProps = React.ComponentProps<'legend'> & {\n  /**\n   * Visual weight of the legend text.\n   * - `'legend'` — larger base-size text (section heading).\n   * - `'label'` — smaller label-size text (matches field label weight).\n   * @default 'legend'\n   */\n  variant?: 'legend' | 'label';\n};\n\n/**\n * `<legend>` element for a `<fieldset>`, styled as either a section heading or a compact label.\n *\n * @example\n * import { FieldSet, FieldLegend } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSet>\n *   <FieldLegend variant=\"legend\">Personal details</FieldLegend>\n * </FieldSet>\n */\nconst FieldLegend = memo(({ className, variant = 'legend', ...props }: FieldLegendProps) => {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}\n      {...props}\n    />\n  );\n});\nFieldLegend.displayName = 'FieldLegend';\n\n/**\n * Container `<div>` that groups a set of `Field` rows with container-query support for responsive layouts.\n *\n * @example\n * import { FieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldGroup>\n *   <Field>…</Field>\n *   <Field>…</Field>\n * </FieldGroup>\n */\nconst FieldGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group',\n        'flex flex-col gap-7 pt-4',\n        'data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldGroup.displayName = 'FieldGroup';\n\n/**\n * Single form field row that arranges label, input, and meta elements with configurable orientation.\n *\n * @example\n * import { Field } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Field orientation=\"horizontal\">\n *   <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n *   <FieldContent><input id=\"username\" /></FieldContent>\n * </Field>\n */\nconst Field = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n});\nField.displayName = 'Field';\n\n/**\n * Flex column wrapper that houses the primary input control together with description and error slots.\n *\n * @example\n * import { FieldContent } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldContent>\n *   <input type=\"text\" />\n *   <FieldDescription>Enter your full name.</FieldDescription>\n * </FieldContent>\n */\nconst FieldContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex flex-col gap-1.5 leading-snug', className)} {...props} />;\n});\nFieldContent.displayName = 'FieldContent';\n\n/**\n * Positioned wrapper for the main input element that enables absolutely-placed adornments (icons, spinners).\n *\n * @example\n * import { FieldContentMain } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldContentMain>\n *   <input type=\"text\" className=\"pr-8\" />\n *   <SearchIcon className=\"absolute right-2 top-2\" />\n * </FieldContentMain>\n */\nconst FieldContentMain = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content-main\" className={cn('relative', className)} {...props} />;\n});\nFieldContentMain.displayName = 'FieldContentMain';\n\n/**\n * Styled `<label>` element for a `Field`, extending the base `Label` with field-group-aware spacing and border states.\n *\n * @example\n * import { FieldLabel } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldLabel htmlFor=\"email\" aria-required>Email</FieldLabel>\n */\nconst FieldLabel = memo(({ className, ...props }: React.ComponentProps<typeof Label>) => {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        'has-[>[data-slot=field]]:border-border',\n        'has-data-[state=checked]:border-primary',\n        '*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldLabel.displayName = 'FieldLabel';\n\n/**\n * Inline title element (non-`<label>`) for fields whose label cannot be a native `<label>`, such as custom checkbox groups.\n *\n * @example\n * import { FieldTitle } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldTitle>Notification preferences</FieldTitle>\n */\nconst FieldTitle = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n});\nFieldTitle.displayName = 'FieldTitle';\n\n/**\n * Supplementary hint text rendered below the input to guide the user, with support for inline anchor links.\n *\n * @example\n * import { FieldDescription } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldDescription>Must be at least 8 characters.</FieldDescription>\n */\nconst FieldDescription = memo(({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        // biome-ignore lint/security/noSecrets: true\n        'nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldDescription.displayName = 'FieldDescription';\n\n/**\n * Props for {@link FieldNote}.\n */\ntype FieldNoteProps = React.ComponentProps<'div'> & {\n  /**\n   * When `false` the note is not rendered at all; useful for conditional display without wrapper conditionals.\n   * @default true\n   */\n  isShow?: boolean;\n};\n\n/**\n * Highlighted informational callout box with an info icon, shown below a field to surface contextual guidance.\n *\n * @example\n * import { FieldNote } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldNote isShow={isDraftMode}>Changes are saved automatically in draft mode.</FieldNote>\n */\nconst FieldNote = memo(({ isShow = true, className, children, ...props }: FieldNoteProps) => {\n  if (isShow === false) return null;\n  return (\n    <div\n      data-slot=\"field-note\"\n      className={cn(\n        'flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs',\n        className\n      )}\n      {...props}\n    >\n      <InfoIcon size={12} className=\"mt-0.5 shrink-0 text-primary/70\" />\n      <span>{children}</span>\n    </div>\n  );\n});\nFieldNote.displayName = 'FieldNote';\n\n/**\n * Props for {@link FieldTooltip}.\n */\ntype FieldTooltipProps = {\n  /** Text content displayed inside the tooltip when the help icon is hovered or focused. */\n  tooltip: string;\n};\n\n/**\n * Small help-circle icon button that reveals a tooltip with additional field context on hover or focus.\n *\n * @example\n * import { FieldTooltip } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldLabel>\n *   Password <FieldTooltip tooltip=\"Use at least one uppercase letter and one number.\" />\n * </FieldLabel>\n */\nconst FieldTooltip = memo(({ tooltip }: FieldTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          className=\"inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none\"\n        >\n          <HelpCircleIcon size={13} aria-hidden=\"true\" />\n          <span className=\"sr-only\">Thêm thông tin</span>\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"top\" className=\"max-w-xs text-balance\">\n        {tooltip}\n      </TooltipContent>\n    </Tooltip>\n  );\n});\nFieldTooltip.displayName = 'FieldTooltip';\n\n/**\n * Visual divider row that optionally displays a centered text label, used to separate logical sections within a `FieldGroup`.\n *\n * @example\n * import { FieldSeparator } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSeparator>or</FieldSeparator>\n */\nconst FieldSeparator = memo(({ children, className, ...props }: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span className=\"relative mx-auto block w-fit bg-background px-2 text-text-positive-weak\" data-slot=\"field-separator-content\">\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\nFieldSeparator.displayName = 'FieldSeparator';\n\n/**\n * Props for {@link FieldError}.\n */\ntype FieldErrorProps = React.ComponentProps<'div'> & {\n  errors?: Array<{ code?: string; message?: string } | undefined>;\n  requiredMessage?: string;\n};\n\nconst FieldError = memo(({ className, children, errors, requiredMessage = 'Trường này là bắt buộc', ...props }: FieldErrorProps) => {\n  const content = useMemo(() => {\n    const resolve = (error: { code?: string; message?: string }) => (error.code === 'invalid_type' ? requiredMessage : error.message);\n\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return (\n        <div className=\"flex flex-row items-center justify-start gap-x-0.5\">\n          <p>{resolve(errors[0])}</p>\n        </div>\n      );\n    }\n\n    return (\n      <ul className=\"flex list-none flex-col\">\n        {errors.map(error => {\n          if (typeof error === 'string') return <li key={error}>{error}</li>;\n          if (!error?.message) return null;\n          return <li key={error.code ?? error.message}>{resolve(error)}</li>;\n        })}\n      </ul>\n    );\n  }, [children, errors, requiredMessage]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div role=\"alert\" data-slot=\"field-error\" className={cn('w-full font-medium text-danger-strong text-xs', className)} {...props}>\n      {content}\n    </div>\n  );\n});\nFieldError.displayName = 'FieldError';\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldNote,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldContentMain,\n  FieldTitle,\n  FieldTooltip,\n};\n"],"mappings":"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"}

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