@customafk/lunas-ui 0.2.68 → 0.2.69

package/dist/edit-button-DmMFMzG0.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"edit-button-DmMFMzG0.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/edit-button.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { PencilIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost icon button with a pencil icon that triggers an async edit handler;\n * displays a descriptive tooltip on hover. Intended for use in table row action columns.\n *\n * @example\n * import { UITableEditButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEditButton\n *   title=\"Edit employee details\"\n *   onClick={async () => await openEditModal(rowId)}\n * />\n */\nexport const UITableEditButton: React.FC<{\n  /** Tooltip label describing what will be edited; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" onClick={handleClick}>\n          <PencilIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Edit item'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4PAmBA,MAAa,GAKP,CAAE,QAAO,aAUX,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,QAXtD,EAClB,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKmF,WACrF,EAAC,EAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,IAAD,CAAA,SAAI,GAAS,WAAe,CAAA,CACd,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"edit-button-DmMFMzG0.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/edit-button.tsx"],"sourcesContent":["'use client';\nimport { useCallback } from 'react';\n\nimport { PencilIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost icon button with a pencil icon that triggers an async edit handler;\n * displays a descriptive tooltip on hover. Intended for use in table row action columns.\n *\n * @example\n * import { UITableEditButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEditButton\n *   title=\"Edit employee details\"\n *   onClick={async () => await openEditModal(rowId)}\n * />\n */\nexport const UITableEditButton: React.FC<{\n  /** Tooltip label describing what will be edited; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" onClick={handleClick}>\n          <PencilIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Edit item'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4PAoBA,MAAa,GAKP,CAAE,QAAO,aAUX,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,QAXtD,EAClB,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKmF,WACrF,EAAC,EAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,IAAD,CAAA,SAAI,GAAS,WAAe,CAAA,CACd,CAAA,CACT,CAAA,CAAA"}

package/dist/email-display-BKcoWmPK.mjs

@@ -0,0 +1,2 @@
+import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-BGzwkdFO.mjs";import{CheckIcon as a,CopyIcon as o,MailIcon as s}from"lucide-react";import{useEffect as c,useRef as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({email:p,linkable:m=!0})=>{let[h,g]=u(!1),_=l(null);return c(()=>()=>{_.current&&clearTimeout(_.current)},[]),p?d(n,{children:f(`div`,{className:`group flex items-center gap-x-1.5`,children:[d(s,{size:13,className:`shrink-0 text-text-positive-weak`}),m?d(`a`,{href:`mailto:${p}`,className:`truncate text-primary text-sm underline-offset-2 hover:underline`,onClick:e=>e.stopPropagation(),children:p}):d(`span`,{className:`truncate text-text-positive text-sm`,children:p}),f(e,{children:[d(r,{asChild:!0,children:d(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),navigator.clipboard.writeText(p).then(()=>{g(!0),_.current=setTimeout(()=>g(!1),1500)})},className:`shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive`,children:h?d(a,{size:13,className:`text-success-strong`}):d(o,{size:13})})}),d(t,{children:h?`Copied!`:`Copy email`})]})]})}):d(i,{})};export{p as UITableEmailDisplay};
+//# sourceMappingURL=email-display-BKcoWmPK.mjs.map

package/dist/email-display-BKcoWmPK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-display-BKcoWmPK.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/email-display.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { CheckIcon, CopyIcon, MailIcon } from 'lucide-react';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableEmailDisplay} component. */\ntype Props = {\n  /** The email address to display; `null`/`undefined`/empty renders an empty state. */\n  email: string | null | undefined;\n  /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */\n  linkable?: boolean;\n};\n\n/**\n * Displays an email address in a table cell with a copy-to-clipboard button.\n * Shows a brief checkmark confirmation after copying.  Optionally wraps the\n * address in a `mailto:` link.  Renders {@link UITableEmpty} when `email` is\n * absent.\n *\n * @example\n * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEmailDisplay email=\"jane@example.com\" />\n */\nexport const UITableEmailDisplay: React.FC<Props> = ({ email, linkable = true }) => {\n  const [copied, setCopied] = useState(false);\n  const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (copiedTimeoutRef.current) clearTimeout(copiedTimeoutRef.current);\n    };\n  }, []);\n\n  if (!email) return <UITableEmpty />;\n\n  const handleCopy = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    navigator.clipboard.writeText(email).then(() => {\n      setCopied(true);\n      copiedTimeoutRef.current = setTimeout(() => setCopied(false), 1500);\n    });\n  };\n\n  return (\n    <TooltipProvider>\n      <div className=\"group flex items-center gap-x-1.5\">\n        <MailIcon size={13} className=\"shrink-0 text-text-positive-weak\" />\n\n        {linkable ? (\n          <a href={`mailto:${email}`} className=\"truncate text-primary text-sm underline-offset-2 hover:underline\" onClick={e => e.stopPropagation()}>\n            {email}\n          </a>\n        ) : (\n          <span className=\"truncate text-text-positive text-sm\">{email}</span>\n        )}\n\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              onClick={handleCopy}\n              className=\"shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive\"\n            >\n              {copied ? <CheckIcon size={13} className=\"text-success-strong\" /> : <CopyIcon size={13} />}\n            </button>\n          </TooltipTrigger>\n          <TooltipContent>{copied ? 'Copied!' : 'Copy email'}</TooltipContent>\n        </Tooltip>\n      </div>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"qUA6BA,MAAa,GAAwC,CAAE,QAAO,WAAW,MAAW,CAClF,GAAM,CAAC,EAAQ,GAAa,EAAS,EAAK,EACpC,EAAmB,EAA6C,IAAI,EAmB1E,OAjBA,UACe,CACP,EAAiB,SAAS,aAAa,EAAiB,OAAO,CACrE,EACC,CAAC,CAAC,EAEA,EAYH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAU,6CAAf,CACE,EAAC,EAAD,CAAU,KAAM,GAAI,UAAU,kCAAoC,CAAA,EAEjE,EACC,EAAC,IAAD,CAAG,KAAM,UAAU,IAAS,UAAU,mEAAmE,QAAS,GAAK,EAAE,gBAAgB,WACtI,CACA,CAAA,EAEH,EAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,EAGrE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,SAAD,CACE,QAzBQ,GAAwB,CAC1C,EAAE,gBAAgB,EAClB,EAAE,eAAe,EACjB,UAAU,UAAU,UAAU,CAAK,CAAC,CAAC,SAAW,CAC9C,EAAU,EAAI,EACd,EAAiB,QAAU,eAAiB,EAAU,EAAK,EAAG,IAAI,CACpE,CAAC,CACH,EAmBY,UAAU,yIAET,EAAS,EAAC,EAAD,CAAW,KAAM,GAAI,UAAU,qBAAuB,CAAA,EAAI,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,CACnF,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SAAiB,EAAS,UAAY,YAA6B,CAAA,CAC5D,CAAA,CAAA,CACN,GACU,CAAA,EApCA,EAAC,EAAD,CAAe,CAAA,CAsCpC"}

package/dist/email-display-DqKYq0iM.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/tooltip.cjs"),t=require("./tables-078i-X0d.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");const a=({email:a,linkable:o=!0})=>{let[s,c]=(0,r.useState)(!1),l=(0,r.useRef)(null);return(0,r.useEffect)(()=>()=>{l.current&&clearTimeout(l.current)},[]),a?(0,i.jsx)(e.TooltipProvider,{children:(0,i.jsxs)(`div`,{className:`group flex items-center gap-x-1.5`,children:[(0,i.jsx)(n.MailIcon,{size:13,className:`shrink-0 text-text-positive-weak`}),o?(0,i.jsx)(`a`,{href:`mailto:${a}`,className:`truncate text-primary text-sm underline-offset-2 hover:underline`,onClick:e=>e.stopPropagation(),children:a}):(0,i.jsx)(`span`,{className:`truncate text-text-positive text-sm`,children:a}),(0,i.jsxs)(e.Tooltip,{children:[(0,i.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,i.jsx)(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),navigator.clipboard.writeText(a).then(()=>{c(!0),l.current=setTimeout(()=>c(!1),1500)})},className:`shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive`,children:s?(0,i.jsx)(n.CheckIcon,{size:13,className:`text-success-strong`}):(0,i.jsx)(n.CopyIcon,{size:13})})}),(0,i.jsx)(e.TooltipContent,{children:s?`Copied!`:`Copy email`})]})]})}):(0,i.jsx)(t.Q,{})};exports.UITableEmailDisplay=a;
+//# sourceMappingURL=email-display-DqKYq0iM.cjs.map

package/dist/email-display-DqKYq0iM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-display-DqKYq0iM.cjs","names":["UITableEmpty","TooltipProvider","MailIcon","Tooltip","TooltipTrigger","CheckIcon","CopyIcon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/email-display.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { CheckIcon, CopyIcon, MailIcon } from 'lucide-react';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableEmailDisplay} component. */\ntype Props = {\n  /** The email address to display; `null`/`undefined`/empty renders an empty state. */\n  email: string | null | undefined;\n  /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */\n  linkable?: boolean;\n};\n\n/**\n * Displays an email address in a table cell with a copy-to-clipboard button.\n * Shows a brief checkmark confirmation after copying.  Optionally wraps the\n * address in a `mailto:` link.  Renders {@link UITableEmpty} when `email` is\n * absent.\n *\n * @example\n * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEmailDisplay email=\"jane@example.com\" />\n */\nexport const UITableEmailDisplay: React.FC<Props> = ({ email, linkable = true }) => {\n  const [copied, setCopied] = useState(false);\n  const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (copiedTimeoutRef.current) clearTimeout(copiedTimeoutRef.current);\n    };\n  }, []);\n\n  if (!email) return <UITableEmpty />;\n\n  const handleCopy = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    navigator.clipboard.writeText(email).then(() => {\n      setCopied(true);\n      copiedTimeoutRef.current = setTimeout(() => setCopied(false), 1500);\n    });\n  };\n\n  return (\n    <TooltipProvider>\n      <div className=\"group flex items-center gap-x-1.5\">\n        <MailIcon size={13} className=\"shrink-0 text-text-positive-weak\" />\n\n        {linkable ? (\n          <a href={`mailto:${email}`} className=\"truncate text-primary text-sm underline-offset-2 hover:underline\" onClick={e => e.stopPropagation()}>\n            {email}\n          </a>\n        ) : (\n          <span className=\"truncate text-text-positive text-sm\">{email}</span>\n        )}\n\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              onClick={handleCopy}\n              className=\"shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive\"\n            >\n              {copied ? <CheckIcon size={13} className=\"text-success-strong\" /> : <CopyIcon size={13} />}\n            </button>\n          </TooltipTrigger>\n          <TooltipContent>{copied ? 'Copied!' : 'Copy email'}</TooltipContent>\n        </Tooltip>\n      </div>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"uJA6BA,MAAa,GAAwC,CAAE,QAAO,WAAW,MAAW,CAClF,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,SAAA,CAAsB,EAAK,EACpC,GAAA,EAAA,EAAA,OAAA,CAAgE,IAAI,EAmB1E,OAjBA,EAAA,EAAA,UAAA,SACe,CACP,EAAiB,SAAS,aAAa,EAAiB,OAAO,CACrE,EACC,CAAC,CAAC,EAEA,GAYH,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,GAAI,UAAU,kCAAoC,CAAA,EAEjE,GACC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,KAAM,UAAU,IAAS,UAAU,mEAAmE,QAAS,GAAK,EAAE,gBAAgB,WACtI,CACA,CAAA,GAEH,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,GAGrE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,QAzBQ,GAAwB,CAC1C,EAAE,gBAAgB,EAClB,EAAE,eAAe,EACjB,UAAU,UAAU,UAAU,CAAK,CAAC,CAAC,SAAW,CAC9C,EAAU,EAAI,EACd,EAAiB,QAAU,eAAiB,EAAU,EAAK,EAAG,IAAI,CACpE,CAAC,CACH,EAmBY,UAAU,yIAET,GAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,GAAI,UAAU,qBAAuB,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,CACnF,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,SAAiB,EAAS,UAAY,YAA6B,CAAA,CAC5D,CAAA,CAAA,CACN,GACU,CAAA,GApCA,EAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAe,CAAA,CAsCpC"}

package/dist/{email-field-BErx3liY.cjs → email-field-DRb71gQI.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/input.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,required:h=!1,maxLength:g})=>{let{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e.G(),S=(0,s.useStore)(_.store,({isSubmitting:e})=>e),C=y.meta.isDirty&&y.meta.isTouched&&!y.meta.isValid,w=h&&y.value===null,T=!S&&!!y.value,E=(0,i.useCallback)(({target:{value:e}})=>{S||g&&e.length>g||x(e||null)},[S,g,x]),D=(0,i.useCallback)(()=>{S||x(null)},[S,x]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{"data-invalid":C,orientation:p,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{htmlFor:v,"aria-required":w,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{id:v,name:v,value:y.value===null?``:y.value,"aria-invalid":C,autoComplete:`email`,placeholder:u,className:(0,a.cn)(`pl-9`,T&&`pr-9`,S&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:b,onChange:E}),(0,o.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})}),T&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:D,children:(0,o.jsx)(r.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:m&&y.meta.isDirty&&(0,o.jsx)(n.FieldError,{errors:y.meta.errors})}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})};exports.EmailField=c;
-//# sourceMappingURL=email-field-BErx3liY.cjs.map
+const e=require("./tanstack-form-BC61U3F-.cjs"),t=require("./ui/input.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,required:h=!1,maxLength:g})=>{let{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e.G(),S=(0,s.useStore)(_.store,({isSubmitting:e})=>e),C=y.meta.isDirty&&y.meta.isTouched&&!y.meta.isValid,w=h&&y.value===null,T=!S&&!!y.value,E=(0,i.useCallback)(({target:{value:e}})=>{S||g&&e.length>g||x(e||null)},[S,g,x]),D=(0,i.useCallback)(()=>{S||x(null)},[S,x]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{"data-invalid":C,orientation:p,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{htmlFor:v,"aria-required":w,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{id:v,name:v,value:y.value===null?``:y.value,"aria-invalid":C,autoComplete:`email`,placeholder:u,className:(0,a.cn)(`pl-9`,T&&`pr-9`,S&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:b,onChange:E}),(0,o.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})}),T&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:D,children:(0,o.jsx)(r.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:m&&y.meta.isDirty&&(0,o.jsx)(n.FieldError,{errors:y.meta.errors})}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})};exports.EmailField=c;
+//# sourceMappingURL=email-field-DRb71gQI.cjs.map

package/dist/{email-field-BErx3liY.cjs.map → email-field-DRb71gQI.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"email-field-BErx3liY.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","AtSignIcon","XIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n *\n * @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"email\">\n *   {() => (\n *     <EmailField\n *       label=\"Email address\"\n *       placeholder=\"you@example.com\"\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  tooltip,\n  helperText,\n  orientation = 'responsive',\n  showErrorMessage = true,\n  required = false,\n  maxLength,\n}) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n  const _showClear = !isSubmitting && !!state.value;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  const onClear = useCallback(() => {\n    if (isSubmitting) return;\n    handleChange(null);\n  }, [isSubmitting, handleChange]);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={name}\n            name={name}\n            value={state.value === null ? '' : state.value}\n            aria-invalid={_invalid}\n            autoComplete=\"email\"\n            placeholder={placeholder}\n            className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n          <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n            <AtSignIcon size={14} />\n          </div>\n\n          {_showClear && (\n            <button\n              type=\"button\"\n              aria-label=\"Xóa\"\n              className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n              onClick={onClear}\n            >\n              <XIcon size={14} aria-hidden=\"true\" />\n            </button>\n          )}\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"4QA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,GAAA,EAAA,EAAA,YAAA,KAA4B,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,WAAA,EAAA,EAAA,GAAA,CAAc,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,IACC,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,YAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,GAGV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"email-field-DRb71gQI.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","AtSignIcon","XIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n *\n * @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"email\">\n *   {() => (\n *     <EmailField\n *       label=\"Email address\"\n *       placeholder=\"you@example.com\"\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  tooltip,\n  helperText,\n  orientation = 'responsive',\n  showErrorMessage = true,\n  required = false,\n  maxLength,\n}) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n  const _showClear = !isSubmitting && !!state.value;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  const onClear = useCallback(() => {\n    if (isSubmitting) return;\n    handleChange(null);\n  }, [isSubmitting, handleChange]);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={name}\n            name={name}\n            value={state.value === null ? '' : state.value}\n            aria-invalid={_invalid}\n            autoComplete=\"email\"\n            placeholder={placeholder}\n            className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n          <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n            <AtSignIcon size={14} />\n          </div>\n\n          {_showClear && (\n            <button\n              type=\"button\"\n              aria-label=\"Xóa\"\n              className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n              onClick={onClear}\n            >\n              <XIcon size={14} aria-hidden=\"true\" />\n            </button>\n          )}\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"4QA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,GAAA,EAAA,EAAA,YAAA,KAA4B,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,WAAA,EAAA,EAAA,GAAA,CAAc,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,IACC,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,YAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,GAGV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{email-field-BtcdBWL4.mjs → email-field-HFmUE81o.mjs}

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-BKyUqvzh.mjs";import{AtSignIcon as f,XIcon as p}from"lucide-react";import{useCallback as m}from"react";import{cn as h}from"@customafk/react-toolkit/utils";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useStore as v}from"@tanstack/react-form";const y=({label:y,description:b,placeholder:x,tooltip:S,helperText:C,orientation:w=`responsive`,showErrorMessage:T=!0,required:E=!1,maxLength:D})=>{let{form:O,name:k,state:A,handleBlur:j,handleChange:M}=e(),N=v(O.store,({isSubmitting:e})=>e),P=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,F=E&&A.value===null,I=!N&&!!A.value,L=m(({target:{value:e}})=>{N||D&&e.length>D||M(e||null)},[N,D,M]),R=m(()=>{N||M(null)},[N,M]);return _(s,{className:`gap-y-4 px-4`,children:[_(n,{"data-invalid":P,orientation:w,children:[_(r,{children:[_(c,{htmlFor:k,"aria-required":F,children:[y,S&&g(d,{tooltip:S})]}),g(a,{children:b})]}),_(i,{children:[g(t,{id:k,name:k,value:A.value===null?``:A.value,"aria-invalid":P,autoComplete:`email`,placeholder:x,className:h(`pl-9`,I&&`pr-9`,N&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:j,onChange:L}),g(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:g(f,{size:14})}),I&&g(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:R,children:g(p,{size:14,"aria-hidden":`true`})}),g(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:T&&A.meta.isDirty&&g(o,{errors:A.meta.errors})}),g(l,{isShow:!!C,children:C})]})]}),g(u,{})]})};export{y as EmailField};
-//# sourceMappingURL=email-field-BtcdBWL4.mjs.map
+import{G as e}from"./tanstack-form-DJMaMeUh.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-BKyUqvzh.mjs";import{AtSignIcon as f,XIcon as p}from"lucide-react";import{useCallback as m}from"react";import{cn as h}from"@customafk/react-toolkit/utils";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useStore as v}from"@tanstack/react-form";const y=({label:y,description:b,placeholder:x,tooltip:S,helperText:C,orientation:w=`responsive`,showErrorMessage:T=!0,required:E=!1,maxLength:D})=>{let{form:O,name:k,state:A,handleBlur:j,handleChange:M}=e(),N=v(O.store,({isSubmitting:e})=>e),P=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,F=E&&A.value===null,I=!N&&!!A.value,L=m(({target:{value:e}})=>{N||D&&e.length>D||M(e||null)},[N,D,M]),R=m(()=>{N||M(null)},[N,M]);return _(s,{className:`gap-y-4 px-4`,children:[_(n,{"data-invalid":P,orientation:w,children:[_(r,{children:[_(c,{htmlFor:k,"aria-required":F,children:[y,S&&g(d,{tooltip:S})]}),g(a,{children:b})]}),_(i,{children:[g(t,{id:k,name:k,value:A.value===null?``:A.value,"aria-invalid":P,autoComplete:`email`,placeholder:x,className:h(`pl-9`,I&&`pr-9`,N&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:j,onChange:L}),g(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:g(f,{size:14})}),I&&g(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:R,children:g(p,{size:14,"aria-hidden":`true`})}),g(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:T&&A.meta.isDirty&&g(o,{errors:A.meta.errors})}),g(l,{isShow:!!C,children:C})]})]}),g(u,{})]})};export{y as EmailField};
+//# sourceMappingURL=email-field-HFmUE81o.mjs.map

package/dist/{email-field-BtcdBWL4.mjs.map → email-field-HFmUE81o.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"email-field-BtcdBWL4.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n *\n * @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"email\">\n *   {() => (\n *     <EmailField\n *       label=\"Email address\"\n *       placeholder=\"you@example.com\"\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  tooltip,\n  helperText,\n  orientation = 'responsive',\n  showErrorMessage = true,\n  required = false,\n  maxLength,\n}) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n  const _showClear = !isSubmitting && !!state.value;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  const onClear = useCallback(() => {\n    if (isSubmitting) return;\n    handleChange(null);\n  }, [isSubmitting, handleChange]);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={name}\n            name={name}\n            value={state.value === null ? '' : state.value}\n            aria-invalid={_invalid}\n            autoComplete=\"email\"\n            placeholder={placeholder}\n            className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n          <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n            <AtSignIcon size={14} />\n          </div>\n\n          {_showClear && (\n            <button\n              type=\"button\"\n              aria-label=\"Xóa\"\n              className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n              onClick={onClear}\n            >\n              <XIcon size={14} aria-hidden=\"true\" />\n            </button>\n          )}\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"uhBA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,EAAU,MAAkB,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,uBAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,UAAW,EAAG,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,oFACb,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,GACC,EAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,WAET,EAAC,EAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,EAGV,EAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"email-field-HFmUE81o.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n *\n * @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"email\">\n *   {() => (\n *     <EmailField\n *       label=\"Email address\"\n *       placeholder=\"you@example.com\"\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  tooltip,\n  helperText,\n  orientation = 'responsive',\n  showErrorMessage = true,\n  required = false,\n  maxLength,\n}) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n  const _showClear = !isSubmitting && !!state.value;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  const onClear = useCallback(() => {\n    if (isSubmitting) return;\n    handleChange(null);\n  }, [isSubmitting, handleChange]);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={name}\n            name={name}\n            value={state.value === null ? '' : state.value}\n            aria-invalid={_invalid}\n            autoComplete=\"email\"\n            placeholder={placeholder}\n            className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n          <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n            <AtSignIcon size={14} />\n          </div>\n\n          {_showClear && (\n            <button\n              type=\"button\"\n              aria-label=\"Xóa\"\n              className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n              onClick={onClear}\n            >\n              <XIcon size={14} aria-hidden=\"true\" />\n            </button>\n          )}\n\n          <div className=\"mt-1 flex w-full items-start justify-start\">\n            {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n          </div>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"uhBA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,EAAU,MAAkB,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,uBAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,UAAW,EAAG,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,oFACb,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,GACC,EAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,WAET,EAAC,EAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,EAGV,EAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/features/tables/index.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../tables-B1O9qy-m.cjs");exports.UITableAnalysisPanel=e.t,exports.UITableAvatarNameDisplay=e.n,exports.UITableBadgeDisplay=e.r,exports.UITableBody=e.W,exports.UITableBooleanDisplay=e.i,exports.UITableCell=e.U,exports.UITableCellActions=e.H,exports.UITableCellSelect=e.V,exports.UITableContainer=e.D,exports.UITableCurrencyDisplay=e.a,exports.UITableDateDisplay=e.o,exports.UITableDescriptionDisplay=e.s,exports.UITableEditButton=e.c,exports.UITableEmailDisplay=e.l,exports.UITableEmpty=e.Y,exports.UITableEmptyDisplay=e.B,exports.UITableFilter=e.u,exports.UITableFooter=e.z,exports.UITableFooterRow=e.R,exports.UITableHead=e.L,exports.UITableHeadCell=e.F,exports.UITableHeadCellOption=e.I,exports.UITableHeadCellSelect=e.P,exports.UITableHeadRow=e.N,exports.UITableInnerTable=e.M,exports.UITableInnerWrapper=e.j,exports.UITableListDisplay=e.d,exports.UITableLoadMore=e.A,exports.UITableMoreButton=e.f,exports.UITableNameDisplay=e.p,exports.UITablePermalink=e.m,exports.UITablePhoneNumberDisplay=e.h,exports.UITableProgressDisplay=e.g,exports.UITableProvider=e.E,exports.UITableRemoveButton=e._,exports.UITableRow=e.k,exports.UITableStatisticDisplay=e.v,exports.UITableStatusDisplay=e.y,exports.UITableSummaryBar=e.b,exports.UITableToggleButton=e.x,exports.UITableTooltip=e.S,exports.UITableTooltipActions=e.C,exports.UITableTooltipFilter=e.w,exports.UITableUserDataDisplay=e.T,exports.UITableWrapper=e.O;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../tables-078i-X0d.cjs");exports.UITableAnalysisPanel=e.t,exports.UITableAvatarNameDisplay=e.n,exports.UITableBadgeDisplay=e.r,exports.UITableBody=e.K,exports.UITableBooleanDisplay=e.i,exports.UITableCell=e.G,exports.UITableCellActions=e.W,exports.UITableCellSelect=e.U,exports.UITableContainer=e.D,exports.UITableCurrencyDisplay=e.a,exports.UITableDateDisplay=e.o,exports.UITableDescriptionDisplay=e.s,exports.UITableEditButton=e.c,exports.UITableEmailDisplay=e.l,exports.UITableEmpty=e.Q,exports.UITableEmptyDisplay=e.H,exports.UITableFilter=e.u,exports.UITableFooter=e.V,exports.UITableFooterRow=e.R,exports.UITableHead=e.L,exports.UITableHeadCell=e.F,exports.UITableHeadCellOption=e.I,exports.UITableHeadCellSelect=e.P,exports.UITableHeadRow=e.N,exports.UITableInnerTable=e.M,exports.UITableInnerWrapper=e.j,exports.UITableListDisplay=e.d,exports.UITableLoadMore=e.A,exports.UITableMoreButton=e.f,exports.UITableNameDisplay=e.p,exports.UITablePermalink=e.m,exports.UITablePhoneNumberDisplay=e.h,exports.UITableProgressDisplay=e.g,exports.UITableProvider=e.E,exports.UITableRemoveButton=e._,exports.UITableRow=e.k,exports.UITableStatisticDisplay=e.v,exports.UITableStatusDisplay=e.y,exports.UITableSummaryBar=e.b,exports.UITableToggleButton=e.x,exports.UITableTooltip=e.S,exports.UITableTooltipActions=e.C,exports.UITableTooltipFilter=e.w,exports.UITableUserDataDisplay=e.T,exports.UITableWrapper=e.O;

package/dist/features/tables/index.d.cts

@@ -1,2 +1,2 @@
-import { $ as FilterType, A as UITableLoadMore, At as TableProviderProps, B as UITableEmptyDisplay, C as UITableTooltipActions, Ct as TUITableHeadCellSelect, D as UITableContainer, Dt as TUITableLoadMore, E as UITableProvider, Et as TUITableInnerWrapper, F as UITableHeadCellOption, G as ActiveFilter, H as UITableCellActions, I as UITableHeadCell, J as ColumnAggregationType, K as BooleanFilterValue, L as UITableHead, M as UITableInnerTable, Mt as TextFilterValue, N as UITableHeadRow, Nt as UITableEmpty, O as UITableWrapper, Ot as TUITableRow, P as UITableHeadCellSelect, Q as FilterOption, R as UITableFooterRow, S as UITableTooltip, St as TUITableHeadCellOption, T as UITableUserDataDisplay, Tt as TUITableInnerTable, U as UITableCell, V as UITableCellSelect, W as UITableBody, X as DateRangeFilterValue, Y as CsvCell, Z as FilterDefinition, _ as UITableRemoveButton, _t as TUITableColumn, a as UITableCurrencyDisplay, at as TTableAnalysisContext, b as UITableSummaryBar, bt as TUITableHead, c as UITableEditButton, ct as TTableFilterContext, d as UITableListDisplay, dt as TTableInnerWrapperContext, et as FilterValue, f as UITableMoreButton, ft as TTableRowContext, g as UITableProgressDisplay, gt as TUITableCellSelect, h as UITablePhoneNumberDisplay, ht as TUITableCellActions, i as UITableBooleanDisplay, it as SummaryItem, j as UITableInnerWrapper, jt as TagFilterValue, k as UITableRow, kt as TUITableWrapper, l as UITableEmailDisplay, lt as TTableHeadRowContext, m as UITablePermalink, mt as TUITableCell, n as UITableAvatarNameDisplay, nt as RowData, o as UITableDateDisplay, ot as TTableBodyContext, p as UITableNameDisplay, pt as TUITableBody, q as ColumnAggregation, r as UITableBadgeDisplay, rt as SingleTagFilterValue, s as UITableDescriptionDisplay, st as TTableContext, t as UITableAnalysisPanel, tt as NumberFilterValue, u as UITableFilter, ut as TTableInnerTableContext, v as UITableStatisticDisplay, vt as TUITableEmptyDisplay, w as UITableTooltipFilter, wt as TUITableHeadRow, x as UITableToggleButton, xt as TUITableHeadCell, y as UITableStatusDisplay, yt as TUITableFooter, z as UITableFooter } from "../../index-BRE7tL8d.cjs";
-export { ActiveFilter, BooleanFilterValue, ColumnAggregation, ColumnAggregationType, CsvCell, DateRangeFilterValue, FilterDefinition, FilterOption, FilterType, FilterValue, NumberFilterValue, RowData, SingleTagFilterValue, SummaryItem, TTableAnalysisContext, TTableBodyContext, TTableContext, TTableFilterContext, TTableHeadRowContext, TTableInnerTableContext, TTableInnerWrapperContext, TTableRowContext, TUITableBody, TUITableCell, TUITableCellActions, TUITableCellSelect, TUITableColumn, TUITableEmptyDisplay, TUITableFooter, TUITableHead, TUITableHeadCell, TUITableHeadCellOption, TUITableHeadCellSelect, TUITableHeadRow, TUITableInnerTable, TUITableInnerWrapper, TUITableLoadMore, TUITableRow, TUITableWrapper, TableProviderProps, TagFilterValue, TextFilterValue, UITableAnalysisPanel, UITableAvatarNameDisplay, UITableBadgeDisplay, UITableBody, UITableBooleanDisplay, UITableCell, UITableCellActions, UITableCellSelect, UITableContainer, UITableCurrencyDisplay, UITableDateDisplay, UITableDescriptionDisplay, UITableEditButton, UITableEmailDisplay, UITableEmpty, UITableEmptyDisplay, UITableFilter, UITableFooter, UITableFooterRow, UITableHead, UITableHeadCell, UITableHeadCellOption, UITableHeadCellSelect, UITableHeadRow, UITableInnerTable, UITableInnerWrapper, UITableListDisplay, UITableLoadMore, UITableMoreButton, UITableNameDisplay, UITablePermalink, UITablePhoneNumberDisplay, UITableProgressDisplay, UITableProvider, UITableRemoveButton, UITableRow, UITableStatisticDisplay, UITableStatusDisplay, UITableSummaryBar, UITableToggleButton, UITableTooltip, UITableTooltipActions, UITableTooltipFilter, UITableUserDataDisplay, UITableWrapper };
+import { $ as FilterType, A as UITableLoadMore, At as TUITableWrapper, B as UITableEmptyDisplay, C as UITableTooltipActions, Ct as TUITableHeadCellOption, D as UITableContainer, Dt as TUITableInnerWrapper, E as UITableProvider, Et as TUITableInnerTable, F as UITableHeadCellOption, G as ActiveFilter, H as UITableCellActions, I as UITableHeadCell, J as ColumnAggregationType, K as BooleanFilterValue, L as UITableHead, M as UITableInnerTable, Mt as TagFilterValue, N as UITableHeadRow, Nt as TextFilterValue, O as UITableWrapper, Ot as TUITableLoadMore, P as UITableHeadCellSelect, Pt as UITableEmpty, Q as FilterOption, R as UITableFooterRow, S as UITableTooltip, St as TUITableHeadCell, T as UITableUserDataDisplay, Tt as TUITableHeadRow, U as UITableCell, V as UITableCellSelect, W as UITableBody, X as DateRangeFilterValue, Y as CsvCell, Z as FilterDefinition, _ as UITableRemoveButton, _t as TUITableCellSelect, a as UITableCurrencyDisplay, at as TTableAnalysisContext, b as UITableSummaryBar, bt as TUITableFooter, c as UITableEditButton, ct as TTableFilterContext, d as UITableListDisplay, dt as TTableInnerWrapperContext, et as FilterValue, f as UITableMoreButton, ft as TTableRowContext, g as UITableProgressDisplay, gt as TUITableCellActions, h as UITablePhoneNumberDisplay, ht as TUITableCell, i as UITableBooleanDisplay, it as SummaryItem, j as UITableInnerWrapper, jt as TableProviderProps, k as UITableRow, kt as TUITableRow, l as UITableEmailDisplay, lt as TTableHeadRowContext, m as UITablePermalink, mt as TUITableBody, n as UITableAvatarNameDisplay, nt as RowData, o as UITableDateDisplay, ot as TTableBodyContext, p as UITableNameDisplay, pt as TTableSummaryContext, q as ColumnAggregation, r as UITableBadgeDisplay, rt as SingleTagFilterValue, s as UITableDescriptionDisplay, st as TTableContext, t as UITableAnalysisPanel, tt as NumberFilterValue, u as UITableFilter, ut as TTableInnerTableContext, v as UITableStatisticDisplay, vt as TUITableColumn, w as UITableTooltipFilter, wt as TUITableHeadCellSelect, x as UITableToggleButton, xt as TUITableHead, y as UITableStatusDisplay, yt as TUITableEmptyDisplay, z as UITableFooter } from "../../index-FEMPGfwO.cjs";
+export { ActiveFilter, BooleanFilterValue, ColumnAggregation, ColumnAggregationType, CsvCell, DateRangeFilterValue, FilterDefinition, FilterOption, FilterType, FilterValue, NumberFilterValue, RowData, SingleTagFilterValue, SummaryItem, TTableAnalysisContext, TTableBodyContext, TTableContext, TTableFilterContext, TTableHeadRowContext, TTableInnerTableContext, TTableInnerWrapperContext, TTableRowContext, TTableSummaryContext, TUITableBody, TUITableCell, TUITableCellActions, TUITableCellSelect, TUITableColumn, TUITableEmptyDisplay, TUITableFooter, TUITableHead, TUITableHeadCell, TUITableHeadCellOption, TUITableHeadCellSelect, TUITableHeadRow, TUITableInnerTable, TUITableInnerWrapper, TUITableLoadMore, TUITableRow, TUITableWrapper, TableProviderProps, TagFilterValue, TextFilterValue, UITableAnalysisPanel, UITableAvatarNameDisplay, UITableBadgeDisplay, UITableBody, UITableBooleanDisplay, UITableCell, UITableCellActions, UITableCellSelect, UITableContainer, UITableCurrencyDisplay, UITableDateDisplay, UITableDescriptionDisplay, UITableEditButton, UITableEmailDisplay, UITableEmpty, UITableEmptyDisplay, UITableFilter, UITableFooter, UITableFooterRow, UITableHead, UITableHeadCell, UITableHeadCellOption, UITableHeadCellSelect, UITableHeadRow, UITableInnerTable, UITableInnerWrapper, UITableListDisplay, UITableLoadMore, UITableMoreButton, UITableNameDisplay, UITablePermalink, UITablePhoneNumberDisplay, UITableProgressDisplay, UITableProvider, UITableRemoveButton, UITableRow, UITableStatisticDisplay, UITableStatusDisplay, UITableSummaryBar, UITableToggleButton, UITableTooltip, UITableTooltipActions, UITableTooltipFilter, UITableUserDataDisplay, UITableWrapper };

package/dist/features/tables/index.d.mts

@@ -1,2 +1,2 @@
-import { $ as FilterType, A as UITableLoadMore, At as TableProviderProps, B as UITableEmptyDisplay, C as UITableTooltipActions, Ct as TUITableHeadCellSelect, D as UITableContainer, Dt as TUITableLoadMore, E as UITableProvider, Et as TUITableInnerWrapper, F as UITableHeadCellOption, G as ActiveFilter, H as UITableCellActions, I as UITableHeadCell, J as ColumnAggregationType, K as BooleanFilterValue, L as UITableHead, M as UITableInnerTable, Mt as TextFilterValue, N as UITableHeadRow, Nt as UITableEmpty, O as UITableWrapper, Ot as TUITableRow, P as UITableHeadCellSelect, Q as FilterOption, R as UITableFooterRow, S as UITableTooltip, St as TUITableHeadCellOption, T as UITableUserDataDisplay, Tt as TUITableInnerTable, U as UITableCell, V as UITableCellSelect, W as UITableBody, X as DateRangeFilterValue, Y as CsvCell, Z as FilterDefinition, _ as UITableRemoveButton, _t as TUITableColumn, a as UITableCurrencyDisplay, at as TTableAnalysisContext, b as UITableSummaryBar, bt as TUITableHead, c as UITableEditButton, ct as TTableFilterContext, d as UITableListDisplay, dt as TTableInnerWrapperContext, et as FilterValue, f as UITableMoreButton, ft as TTableRowContext, g as UITableProgressDisplay, gt as TUITableCellSelect, h as UITablePhoneNumberDisplay, ht as TUITableCellActions, i as UITableBooleanDisplay, it as SummaryItem, j as UITableInnerWrapper, jt as TagFilterValue, k as UITableRow, kt as TUITableWrapper, l as UITableEmailDisplay, lt as TTableHeadRowContext, m as UITablePermalink, mt as TUITableCell, n as UITableAvatarNameDisplay, nt as RowData, o as UITableDateDisplay, ot as TTableBodyContext, p as UITableNameDisplay, pt as TUITableBody, q as ColumnAggregation, r as UITableBadgeDisplay, rt as SingleTagFilterValue, s as UITableDescriptionDisplay, st as TTableContext, t as UITableAnalysisPanel, tt as NumberFilterValue, u as UITableFilter, ut as TTableInnerTableContext, v as UITableStatisticDisplay, vt as TUITableEmptyDisplay, w as UITableTooltipFilter, wt as TUITableHeadRow, x as UITableToggleButton, xt as TUITableHeadCell, y as UITableStatusDisplay, yt as TUITableFooter, z as UITableFooter } from "../../index-DvoLzsh0.mjs";
-export { ActiveFilter, BooleanFilterValue, ColumnAggregation, ColumnAggregationType, CsvCell, DateRangeFilterValue, FilterDefinition, FilterOption, FilterType, FilterValue, NumberFilterValue, RowData, SingleTagFilterValue, SummaryItem, TTableAnalysisContext, TTableBodyContext, TTableContext, TTableFilterContext, TTableHeadRowContext, TTableInnerTableContext, TTableInnerWrapperContext, TTableRowContext, TUITableBody, TUITableCell, TUITableCellActions, TUITableCellSelect, TUITableColumn, TUITableEmptyDisplay, TUITableFooter, TUITableHead, TUITableHeadCell, TUITableHeadCellOption, TUITableHeadCellSelect, TUITableHeadRow, TUITableInnerTable, TUITableInnerWrapper, TUITableLoadMore, TUITableRow, TUITableWrapper, TableProviderProps, TagFilterValue, TextFilterValue, UITableAnalysisPanel, UITableAvatarNameDisplay, UITableBadgeDisplay, UITableBody, UITableBooleanDisplay, UITableCell, UITableCellActions, UITableCellSelect, UITableContainer, UITableCurrencyDisplay, UITableDateDisplay, UITableDescriptionDisplay, UITableEditButton, UITableEmailDisplay, UITableEmpty, UITableEmptyDisplay, UITableFilter, UITableFooter, UITableFooterRow, UITableHead, UITableHeadCell, UITableHeadCellOption, UITableHeadCellSelect, UITableHeadRow, UITableInnerTable, UITableInnerWrapper, UITableListDisplay, UITableLoadMore, UITableMoreButton, UITableNameDisplay, UITablePermalink, UITablePhoneNumberDisplay, UITableProgressDisplay, UITableProvider, UITableRemoveButton, UITableRow, UITableStatisticDisplay, UITableStatusDisplay, UITableSummaryBar, UITableToggleButton, UITableTooltip, UITableTooltipActions, UITableTooltipFilter, UITableUserDataDisplay, UITableWrapper };
+import { $ as FilterType, A as UITableLoadMore, At as TUITableWrapper, B as UITableEmptyDisplay, C as UITableTooltipActions, Ct as TUITableHeadCellOption, D as UITableContainer, Dt as TUITableInnerWrapper, E as UITableProvider, Et as TUITableInnerTable, F as UITableHeadCellOption, G as ActiveFilter, H as UITableCellActions, I as UITableHeadCell, J as ColumnAggregationType, K as BooleanFilterValue, L as UITableHead, M as UITableInnerTable, Mt as TagFilterValue, N as UITableHeadRow, Nt as TextFilterValue, O as UITableWrapper, Ot as TUITableLoadMore, P as UITableHeadCellSelect, Pt as UITableEmpty, Q as FilterOption, R as UITableFooterRow, S as UITableTooltip, St as TUITableHeadCell, T as UITableUserDataDisplay, Tt as TUITableHeadRow, U as UITableCell, V as UITableCellSelect, W as UITableBody, X as DateRangeFilterValue, Y as CsvCell, Z as FilterDefinition, _ as UITableRemoveButton, _t as TUITableCellSelect, a as UITableCurrencyDisplay, at as TTableAnalysisContext, b as UITableSummaryBar, bt as TUITableFooter, c as UITableEditButton, ct as TTableFilterContext, d as UITableListDisplay, dt as TTableInnerWrapperContext, et as FilterValue, f as UITableMoreButton, ft as TTableRowContext, g as UITableProgressDisplay, gt as TUITableCellActions, h as UITablePhoneNumberDisplay, ht as TUITableCell, i as UITableBooleanDisplay, it as SummaryItem, j as UITableInnerWrapper, jt as TableProviderProps, k as UITableRow, kt as TUITableRow, l as UITableEmailDisplay, lt as TTableHeadRowContext, m as UITablePermalink, mt as TUITableBody, n as UITableAvatarNameDisplay, nt as RowData, o as UITableDateDisplay, ot as TTableBodyContext, p as UITableNameDisplay, pt as TTableSummaryContext, q as ColumnAggregation, r as UITableBadgeDisplay, rt as SingleTagFilterValue, s as UITableDescriptionDisplay, st as TTableContext, t as UITableAnalysisPanel, tt as NumberFilterValue, u as UITableFilter, ut as TTableInnerTableContext, v as UITableStatisticDisplay, vt as TUITableColumn, w as UITableTooltipFilter, wt as TUITableHeadCellSelect, x as UITableToggleButton, xt as TUITableHead, y as UITableStatusDisplay, yt as TUITableEmptyDisplay, z as UITableFooter } from "../../index-_GTjwUdG.mjs";
+export { ActiveFilter, BooleanFilterValue, ColumnAggregation, ColumnAggregationType, CsvCell, DateRangeFilterValue, FilterDefinition, FilterOption, FilterType, FilterValue, NumberFilterValue, RowData, SingleTagFilterValue, SummaryItem, TTableAnalysisContext, TTableBodyContext, TTableContext, TTableFilterContext, TTableHeadRowContext, TTableInnerTableContext, TTableInnerWrapperContext, TTableRowContext, TTableSummaryContext, TUITableBody, TUITableCell, TUITableCellActions, TUITableCellSelect, TUITableColumn, TUITableEmptyDisplay, TUITableFooter, TUITableHead, TUITableHeadCell, TUITableHeadCellOption, TUITableHeadCellSelect, TUITableHeadRow, TUITableInnerTable, TUITableInnerWrapper, TUITableLoadMore, TUITableRow, TUITableWrapper, TableProviderProps, TagFilterValue, TextFilterValue, UITableAnalysisPanel, UITableAvatarNameDisplay, UITableBadgeDisplay, UITableBody, UITableBooleanDisplay, UITableCell, UITableCellActions, UITableCellSelect, UITableContainer, UITableCurrencyDisplay, UITableDateDisplay, UITableDescriptionDisplay, UITableEditButton, UITableEmailDisplay, UITableEmpty, UITableEmptyDisplay, UITableFilter, UITableFooter, UITableFooterRow, UITableHead, UITableHeadCell, UITableHeadCellOption, UITableHeadCellSelect, UITableHeadRow, UITableInnerTable, UITableInnerWrapper, UITableListDisplay, UITableLoadMore, UITableMoreButton, UITableNameDisplay, UITablePermalink, UITablePhoneNumberDisplay, UITableProgressDisplay, UITableProvider, UITableRemoveButton, UITableRow, UITableStatisticDisplay, UITableStatusDisplay, UITableSummaryBar, UITableToggleButton, UITableTooltip, UITableTooltipActions, UITableTooltipFilter, UITableUserDataDisplay, UITableWrapper };

package/dist/features/tables/index.mjs

@@ -1 +1 @@
-"use client";import{A as e,B as t,C as n,D as r,E as i,F as a,H as o,I as s,L as c,M as l,N as u,O as d,P as f,R as p,S as m,T as h,U as g,V as _,W as v,Y as y,_ as b,a as x,b as S,c as C,d as w,f as T,g as E,h as D,i as O,j as k,k as A,l as j,m as M,n as N,o as P,p as F,r as I,s as L,t as R,u as z,v as B,w as V,x as H,y as U,z as W}from"../../tables-9d53sH9E.mjs";export{R as UITableAnalysisPanel,N as UITableAvatarNameDisplay,I as UITableBadgeDisplay,v as UITableBody,O as UITableBooleanDisplay,g as UITableCell,o as UITableCellActions,_ as UITableCellSelect,r as UITableContainer,x as UITableCurrencyDisplay,P as UITableDateDisplay,L as UITableDescriptionDisplay,C as UITableEditButton,j as UITableEmailDisplay,y as UITableEmpty,t as UITableEmptyDisplay,z as UITableFilter,W as UITableFooter,p as UITableFooterRow,c as UITableHead,a as UITableHeadCell,s as UITableHeadCellOption,f as UITableHeadCellSelect,u as UITableHeadRow,l as UITableInnerTable,k as UITableInnerWrapper,w as UITableListDisplay,e as UITableLoadMore,T as UITableMoreButton,F as UITableNameDisplay,M as UITablePermalink,D as UITablePhoneNumberDisplay,E as UITableProgressDisplay,i as UITableProvider,b as UITableRemoveButton,A as UITableRow,B as UITableStatisticDisplay,U as UITableStatusDisplay,S as UITableSummaryBar,H as UITableToggleButton,m as UITableTooltip,n as UITableTooltipActions,V as UITableTooltipFilter,h as UITableUserDataDisplay,d as UITableWrapper};
+"use client";import{A as e,C as t,D as n,E as r,F as i,G as a,H as o,I as s,K as c,L as l,M as u,N as d,O as f,P as p,Q 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}from"../../tables-BGzwkdFO.mjs";export{z as UITableAnalysisPanel,P as UITableAvatarNameDisplay,L as UITableBadgeDisplay,c as UITableBody,k as UITableBooleanDisplay,a as UITableCell,b as UITableCellActions,v as UITableCellSelect,n as UITableContainer,S as UITableCurrencyDisplay,F as UITableDateDisplay,R as UITableDescriptionDisplay,w as UITableEditButton,M as UITableEmailDisplay,m as UITableEmpty,o as UITableEmptyDisplay,B as UITableFilter,y as UITableFooter,h as UITableFooterRow,l as UITableHead,i as UITableHeadCell,s as UITableHeadCellOption,p as UITableHeadCellSelect,d as UITableHeadRow,u as UITableInnerTable,A as UITableInnerWrapper,T as UITableListDisplay,e as UITableLoadMore,E as UITableMoreButton,I as UITableNameDisplay,N as UITablePermalink,O as UITablePhoneNumberDisplay,D as UITableProgressDisplay,r as UITableProvider,x as UITableRemoveButton,j as UITableRow,V as UITableStatisticDisplay,W as UITableStatusDisplay,C as UITableSummaryBar,U as UITableToggleButton,g as UITableTooltip,t as UITableTooltipActions,H as UITableTooltipFilter,_ as UITableUserDataDisplay,f as UITableWrapper};

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

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

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

@@ -1,2 +1,2 @@
-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";
+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-CgP5OCy0.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 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";
+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-CgP5OCy0.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-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};
+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-DJMaMeUh.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/{filter-CG6wQHRd.mjs → filter-CWuRGTl4.mjs}

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

package/dist/{filter-CG6wQHRd.mjs.map → filter-CWuRGTl4.mjs.map}

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

package/dist/{filter-Bb9_Blk3.cjs → filter-DqedvThM.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./tables-B1O9qy-m.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-Bb9_Blk3.cjs.map
+const e=require("./ui/button.cjs"),t=require("./tables-078i-X0d.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.X(),[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-DqedvThM.cjs.map