@customafk/lunas-ui 0.2.82 → 0.2.84

package/dist/{simple-select-field-DfZk0zPa.mjs.map → simple-select-field-B3uEUqvQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-select-field-DfZk0zPa.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"2pBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-select-field-B3uEUqvQ.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"inBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-select-field-C8vmeHbL.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs"),r=require("./ui/drawer.cjs"),i=require("./ui/select.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("@customafk/react-toolkit/hooks/useMobile");const u=({label:u,placeholder:d,required:f,options:p})=>{let m=(0,o.useId)(),{state:h,handleBlur:g,handleChange:_}=t.rt(),v=(0,l.useIsMobile)(),[y,b]=(0,o.useState)(!1),x=h.meta.isTouched&&!h.meta.isValid,S=p.find(e=>e.value===h.value)?.label;return v?(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[u&&(0,c.jsxs)(n.Label,{htmlFor:m,children:[u,f&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsx)(e.Button,{id:m,type:`button`,variant:`outline`,color:`muted`,className:(0,s.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!h.value&&`text-text-positive-muted`,x&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":x,onBlur:g,onClick:()=>b(!0),children:S??(0,c.jsx)(`span`,{className:`text-text-positive-muted`,children:d})}),(0,c.jsx)(r.Drawer,{open:y,onOpenChange:b,direction:`bottom`,children:(0,c.jsxs)(r.DrawerContent,{children:[(0,c.jsx)(r.DrawerHeader,{children:(0,c.jsx)(r.DrawerTitle,{children:u??d??`Select an option`})}),(0,c.jsx)(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:p.length>0?p.map(e=>(0,c.jsx)(r.DrawerClose,{asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,className:(0,s.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,h.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{_(e.value),b(!1)},children:e.label})},e.value)):(0,c.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,c.jsx)(a.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]})}),x&&(0,c.jsx)(t.Y,{errors:h.meta.errors})]}):(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[u&&(0,c.jsxs)(n.Label,{htmlFor:m,children:[u,f&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,c.jsxs)(i.Select,{value:h.value??``,onValueChange:_,children:[(0,c.jsx)(i.SelectTrigger,{id:m,"aria-invalid":x?`true`:void 0,onBlur:g,children:(0,c.jsx)(i.SelectValue,{placeholder:d})}),(0,c.jsx)(i.SelectContent,{children:p.length>0?p.map(e=>(0,c.jsx)(i.SelectItem,{value:e.value,children:e.label},e.value)):(0,c.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,c.jsx)(a.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),x&&(0,c.jsx)(t.Y,{errors:h.meta.errors})]})};exports.SimpleSelectField=u;
+//# sourceMappingURL=simple-select-field-C8vmeHbL.cjs.map

package/dist/{simple-select-field-C9u7Pg9u.cjs.map → simple-select-field-C8vmeHbL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-select-field-C9u7Pg9u.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"uXAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-select-field-C8vmeHbL.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n  const id = useId();\n  const { state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n  const isMobile = useIsMobile();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const _invalid = state.meta.isTouched && !state.meta.isValid;\n  const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n  if (isMobile) {\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <Label htmlFor={id}>\n            {label}\n            {required && <span className=\"text-danger-strong\">*</span>}\n          </Label>\n        )}\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          color=\"muted\"\n          className={cn(\n            'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n            !state.value && 'text-text-positive-muted',\n            _invalid && 'outline-danger bg-danger-bg-subtle'\n          )}\n          aria-invalid={_invalid}\n          onBlur={handleBlur}\n          onClick={() => setDrawerOpen(true)}\n        >\n          {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n        </Button>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n            </DrawerHeader>\n            <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n              {options.length > 0 ? (\n                options.map(option => (\n                  <DrawerClose key={option.value} asChild>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n                        'hover:bg-muted-muted active:bg-muted-muted',\n                        state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n                      )}\n                      onClick={() => {\n                        handleChange(option.value);\n                        setDrawerOpen(false);\n                      }}\n                    >\n                      {option.label}\n                    </button>\n                  </DrawerClose>\n                ))\n              ) : (\n                <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n                  <PackagePlusIcon strokeWidth={1} />\n                  No options available\n                </div>\n              )}\n            </div>\n          </DrawerContent>\n        </Drawer>\n\n        {_invalid && <FieldError errors={state.meta.errors} />}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Select value={state.value ?? ''} onValueChange={handleChange}>\n        <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.length > 0 ? (\n            options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))\n          ) : (\n            <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n              <PackagePlusIcon strokeWidth={1} />\n              No options available\n            </div>\n          )}\n        </SelectContent>\n      </Select>\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qVAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-text-field-BEoQmd1b.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,disabled:p})=>{let m=a(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=t(),b=c(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(({target:{value:e}})=>{b||f&&e.length>f||y(e||null)},[b,f,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(r,{htmlFor:m,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:m,name:g,value:_.value??``,"aria-invalid":x,placeholder:u,autoComplete:`off`,disabled:p||b,onBlur:v,onChange:S}),x&&o(e,{errors:_.meta.errors})]})};export{l as SimpleTextField};
+//# sourceMappingURL=simple-text-field-BEoQmd1b.mjs.map

package/dist/{simple-text-field-CT9KFUSK.mjs.map → simple-text-field-BEoQmd1b.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-CT9KFUSK.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kUAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-text-field-BEoQmd1b.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wRAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-text-field-zFJt_99J.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-BiOihtxs.cjs"),n=require("./ui/label.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,maxLength:l,disabled:u})=>{let d=(0,r.useId)(),{form:f,name:p,state:m,handleBlur:h,handleChange:g}=t.rt(),_=(0,a.useStore)(f.store,({isSubmitting:e})=>e),v=m.meta.isTouched&&!m.meta.isValid,y=(0,r.useCallback)(({target:{value:e}})=>{_||l&&e.length>l||g(e||null)},[_,l,g]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(n.Label,{htmlFor:d,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(e.Input,{id:d,name:p,value:m.value??``,"aria-invalid":v,placeholder:s,autoComplete:`off`,disabled:u||_,onBlur:h,onChange:y}),v&&(0,i.jsx)(t.Y,{errors:m.meta.errors})]})};exports.SimpleTextField=o;
+//# sourceMappingURL=simple-text-field-zFJt_99J.cjs.map

package/dist/{simple-text-field-BxPjcB4c.cjs.map → simple-text-field-zFJt_99J.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-BxPjcB4c.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"kOAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,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,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-text-field-zFJt_99J.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Input\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        autoComplete=\"off\"\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"gMAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,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,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-textarea-field-CzpApMiv.mjs

@@ -0,0 +1,2 @@
+import{Y as e,rt as t}from"./tanstack-form-Do6xL2kv.mjs";import{Label as n}from"./ui/label.mjs";import{Textarea as r}from"./ui/textarea.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,rows:p,disabled:m})=>{let h=a(),{form:g,name:_,state:v,handleBlur:y,handleChange:b}=t(),x=c(g.store,({isSubmitting:e})=>e),S=v.meta.isTouched&&!v.meta.isValid,C=i(({target:{value:e}})=>{x||f&&e.length>f||b(e||null)},[x,f,b]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(n,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(r,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m||x,onBlur:y,onChange:C}),S&&o(e,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
+//# sourceMappingURL=simple-textarea-field-CzpApMiv.mjs.map

package/dist/{simple-textarea-field-B22rT6zS.mjs.map → simple-textarea-field-CzpApMiv.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-B22rT6zS.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"wUAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-textarea-field-CzpApMiv.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"8RAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-textarea-field-DyQZEDTe.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs"),t=require("./ui/label.cjs"),n=require("./ui/textarea.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,maxLength:l,rows:u,disabled:d})=>{let f=(0,r.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.rt(),v=(0,a.useStore)(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=(0,r.useCallback)(({target:{value:e}})=>{v||l&&e.length>l||_(e||null)},[v,l,_]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(t.Label,{htmlFor:f,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(n.Textarea,{id:f,name:m,value:h.value??``,"aria-invalid":y,placeholder:s,rows:u,disabled:d||v,onBlur:g,onChange:b}),y&&(0,i.jsx)(e.Y,{errors:h.meta.errors})]})};exports.SimpleTextareaField=o;
+//# sourceMappingURL=simple-textarea-field-DyQZEDTe.cjs.map

package/dist/{simple-textarea-field-DG9oPtP-.cjs.map → simple-textarea-field-DyQZEDTe.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-DG9oPtP-.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"qOAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,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,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
+{"version":3,"file":"simple-textarea-field-DyQZEDTe.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n  label?: string;\n  placeholder?: string;\n  required?: boolean;\n  maxLength?: number;\n  rows?: number;\n  disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n  const id = useId();\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.isTouched && !state.meta.isValid;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\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  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <Label htmlFor={id}>\n          {label}\n          {required && <span className=\"text-danger-strong\">*</span>}\n        </Label>\n      )}\n      <Textarea\n        id={id}\n        name={name}\n        value={state.value ?? ''}\n        aria-invalid={_invalid}\n        placeholder={placeholder}\n        rows={rows}\n        disabled={disabled || isSubmitting}\n        onBlur={handleBlur}\n        onChange={onChange}\n      />\n      {_invalid && <FieldError errors={state.meta.errors} />}\n    </div>\n  );\n};\n"],"mappings":"mMAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,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,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/{statistic-CE_Jg8SN.cjs → statistic-CXBTEgKI.cjs}

@@ -1,2 +1,2 @@
-const e=require("./layouts/flex.cjs"),t=require("./tables-BqZ4Zs6e.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},o=(0,n.memo)(({decimalSeparator:o=`.`,groupSeparator:s=`,`,prefix:c,suffix:l,precision:u,roundingMode:d=`round`,showTrailingZeros:f=!1,size:p=`lg`,value:m=0,colorize:h=!1,trend:g})=>{let _=(0,n.useMemo)(()=>{let e={};return typeof u==`number`&&u>=0&&f&&(e.minimumFractionDigits=u),e.maximumFractionDigits=u,e},[u,f]),v=(0,n.useCallback)(e=>{let t=e;return typeof u==`number`&&u>=0&&(t=a(e,u,d)),t.toLocaleString(`vi-VN`,_)},[d,_,u]),y=(0,n.useMemo)(()=>{if(typeof m==`number`)return Number.isNaN(m)||!Number.isFinite(m)?`N/A`:v(m);if(typeof m==`string`){let e=m.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:v(t)}return`N/A`},[m,v]),b=(0,n.useMemo)(()=>o===`.`&&s===`,`?y:y.replace(/,/g,s).replace(/\./g,o),[y,o,s]),x=(0,n.useMemo)(()=>{if(g)return g;if(!h)return;let e=typeof m==`string`?Number(m.trim()):m;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[g,h,m]);return b===`0`||b===`N/A`||!b?(0,i.jsx)(t.Q,{}):(0,i.jsxs)(e.Flex,{padding:`none`,className:(0,r.cn)(`font-number tabular-nums`,p===`xs`&&`text-xs`,p===`sm`&&`text-sm`,p===`md`&&`text-base`,p===`lg`&&`text-lg`,p===`xl`&&`text-xl`,!x&&`text-text-positive`,x===`down`&&`text-danger`,x===`up`&&`text-success`,x===`neutral`&&`text-text-positive-strong`),children:[c,(0,i.jsx)(`p`,{children:b}),l]})});o.displayName=`UITableStatisticDisplay`,exports.UITableStatisticDisplay=o;
-//# sourceMappingURL=statistic-CE_Jg8SN.cjs.map
+const e=require("./layouts/flex.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},o=(0,n.memo)(({decimalSeparator:o=`.`,groupSeparator:s=`,`,prefix:c,suffix:l,precision:u,roundingMode:d=`round`,showTrailingZeros:f=!1,size:p=`lg`,value:m=0,colorize:h=!1,trend:g})=>{let _=(0,n.useMemo)(()=>{let e={};return typeof u==`number`&&u>=0&&f&&(e.minimumFractionDigits=u),e.maximumFractionDigits=u,e},[u,f]),v=(0,n.useCallback)(e=>{let t=e;return typeof u==`number`&&u>=0&&(t=a(e,u,d)),t.toLocaleString(`vi-VN`,_)},[d,_,u]),y=(0,n.useMemo)(()=>{if(typeof m==`number`)return Number.isNaN(m)||!Number.isFinite(m)?`N/A`:v(m);if(typeof m==`string`){let e=m.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:v(t)}return`N/A`},[m,v]),b=(0,n.useMemo)(()=>o===`.`&&s===`,`?y:y.replace(/,/g,s).replace(/\./g,o),[y,o,s]),x=(0,n.useMemo)(()=>{if(g)return g;if(!h)return;let e=typeof m==`string`?Number(m.trim()):m;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[g,h,m]);return b===`0`||b===`N/A`||!b?(0,i.jsx)(t.Q,{}):(0,i.jsxs)(e.Flex,{padding:`none`,className:(0,r.cn)(`font-number tabular-nums`,p===`xs`&&`text-xs`,p===`sm`&&`text-sm`,p===`md`&&`text-base`,p===`lg`&&`text-lg`,p===`xl`&&`text-xl`,!x&&`text-text-positive`,x===`down`&&`text-danger`,x===`up`&&`text-success`,x===`neutral`&&`text-text-positive-strong`),children:[c,(0,i.jsx)(`p`,{children:b}),l]})});o.displayName=`UITableStatisticDisplay`,exports.UITableStatisticDisplay=o;
+//# sourceMappingURL=statistic-CXBTEgKI.cjs.map

package/dist/{statistic-CE_Jg8SN.cjs.map → statistic-CXBTEgKI.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"statistic-CE_Jg8SN.cjs","names":["UITableEmpty","Flex"],"sources":["../packages/components/features/tables/components/atoms/statistic.tsx"],"sourcesContent":["'use client';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { UITableEmpty } from './empty';\n\n/**\n * Applies the specified rounding mode to `num` at the given decimal precision.\n *\n * @param num - The number to round.\n * @param precisionValue - Number of decimal places to keep.\n * @param roundingMode - Rounding strategy: `'round'` (default), `'floor'`, or `'ceil'`.\n * @returns The rounded number.\n */\nconst applyRounding = (num: number, precisionValue: number, roundingMode?: 'round' | 'floor' | 'ceil') => {\n  const multiplier = 10 ** precisionValue;\n\n  switch (roundingMode) {\n    case 'floor':\n      return Math.floor(num * multiplier) / multiplier;\n    case 'ceil':\n      return Math.ceil(num * multiplier) / multiplier;\n    default:\n      return Math.round(num * multiplier) / multiplier;\n  }\n};\n\n/** Props for the {@link UITableStatisticDisplay} component. */\ntype Props = {\n  /** Character used to separate the integer and fractional parts (default: `'.'`). */\n  decimalSeparator?: string;\n  /** Character used to separate thousands groups (default: `','`). */\n  groupSeparator?: string;\n  /** Optional node rendered before the formatted number (e.g. a currency symbol). */\n  prefix?: React.ReactNode;\n  /** Optional node rendered after the formatted number (e.g. a unit label). */\n  suffix?: React.ReactNode;\n  /** Number of decimal digits to display. */\n  precision?: number;\n  /** Rounding strategy applied before formatting (default: `'round'`). */\n  roundingMode?: 'round' | 'floor' | 'ceil';\n  /** When `true`, pads the fractional part with trailing zeros up to `precision` digits. */\n  showTrailingZeros?: boolean;\n  /** Font-size variant for the displayed number (default: `'lg'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** The numeric or string value to format; falsy / invalid values render an empty state. */\n  value: number | string | null | undefined;\n  /** When `true` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive figure can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\n};\n\n/**\n * A memoized table-cell component that formats a numeric value with configurable\n * separators, precision, rounding, and size; renders {@link UITableEmpty} when\n * the value is zero, invalid, or absent.\n *\n * @example\n * import { UITableStatisticDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" size=\"md\" />\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" trend=\"down\" />\n */\nexport const UITableStatisticDisplay = memo(\n  ({\n    decimalSeparator = '.',\n    groupSeparator = ',',\n    prefix: Prefix,\n    suffix: Suffix,\n    precision,\n    roundingMode = 'round',\n    showTrailingZeros = false,\n    size = 'lg',\n    value = 0,\n    colorize = false,\n    trend,\n  }: Props) => {\n    // Memoize number formatting options\n    const formatOptions = useMemo((): Intl.NumberFormatOptions => {\n      const options: Intl.NumberFormatOptions = {};\n\n      if (typeof precision === 'number' && precision >= 0 && showTrailingZeros) {\n        options.minimumFractionDigits = precision;\n        options.maximumFractionDigits = precision;\n      } else {\n        options.maximumFractionDigits = precision;\n      }\n\n      return options;\n    }, [precision, showTrailingZeros]);\n\n    const formatNumber = useCallback(\n      (num: number): string => {\n        let processedNum = num;\n\n        // Áp dụng làm tròn nếu có precision\n        if (typeof precision === 'number' && precision >= 0) {\n          processedNum = applyRounding(num, precision, roundingMode);\n        }\n\n        return processedNum.toLocaleString('vi-VN', formatOptions);\n      },\n      [roundingMode, formatOptions, precision]\n    );\n\n    // Memoize value processing\n    const processedValue = useMemo((): string => {\n      // Xử lý giá trị number\n      if (typeof value === 'number') {\n        if (Number.isNaN(value) || !Number.isFinite(value)) {\n          return 'N/A';\n        }\n        return formatNumber(value);\n      }\n\n      // Xử lý giá trị string\n      if (typeof value === 'string') {\n        const trimmedValue = value.trim();\n\n        // Nếu là chuỗi rỗng\n        if (!trimmedValue) {\n          return 'N/A';\n        }\n\n        // Thử convert sang number\n        const numValue = Number(trimmedValue);\n\n        if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {\n          // Nếu không phải số, trả về string gốc\n          return 'N/A';\n        }\n\n        return formatNumber(numValue);\n      }\n\n      return 'N/A';\n    }, [value, formatNumber]);\n\n    // Memoize separator replacement\n    const finalFormattedValue = useMemo((): string => {\n      // Chỉ thay thế separators nếu khác mặc định\n      if (decimalSeparator === '.' && groupSeparator === ',') {\n        return processedValue;\n      }\n      return processedValue.replace(/,/g, groupSeparator).replace(/\\./g, decimalSeparator);\n    }, [processedValue, decimalSeparator, groupSeparator]);\n\n    const effectiveTrend = useMemo(() => {\n      if (trend) return trend;\n      if (!colorize) return undefined;\n\n      const num = typeof value === 'string' ? Number(value.trim()) : value;\n      if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n      if (num < 0) return 'down';\n      if (num > 0) return 'up';\n      return 'neutral';\n    }, [trend, colorize, value]);\n\n    if (finalFormattedValue === '0' || finalFormattedValue === 'N/A' || !finalFormattedValue) {\n      return <UITableEmpty />;\n    }\n\n    return (\n      <Flex\n        padding=\"none\"\n        className={cn(\n          'font-number tabular-nums',\n          size === 'xs' && 'text-xs',\n          size === 'sm' && 'text-sm',\n          size === 'md' && 'text-base',\n          size === 'lg' && 'text-lg',\n          size === 'xl' && 'text-xl',\n          !effectiveTrend && 'text-text-positive',\n          effectiveTrend === 'down' && 'text-danger',\n          effectiveTrend === 'up' && 'text-success',\n          effectiveTrend === 'neutral' && 'text-text-positive-strong'\n        )}\n      >\n        {Prefix}\n        <p>{finalFormattedValue}</p>\n        {Suffix}\n      </Flex>\n    );\n  }\n);\nUITableStatisticDisplay.displayName = 'UITableStatisticDisplay';\n"],"mappings":"2KAgBA,MAAM,GAAiB,EAAa,EAAwB,IAA8C,CACxG,IAAM,EAAa,IAAM,EAEzB,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,EACxC,IAAK,OACH,OAAO,KAAK,KAAK,EAAM,CAAU,EAAI,EACvC,QACE,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,CAC1C,CACF,EA2Ca,GAAA,EAAA,EAAA,KAAA,EACV,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,EACR,WAAW,GACX,WACW,CAEX,IAAM,GAAA,EAAA,EAAA,QAAA,KAAwD,CAC5D,IAAM,EAAoC,CAAC,EAS3C,OAPI,OAAO,GAAc,UAAY,GAAa,GAAK,IACrD,EAAQ,sBAAwB,GAGhC,EAAQ,sBAAwB,EAG3B,CACT,EAAG,CAAC,EAAW,CAAiB,CAAC,EAE3B,GAAA,EAAA,EAAA,YAAA,CACH,GAAwB,CACvB,IAAI,EAAe,EAOnB,OAJI,OAAO,GAAc,UAAY,GAAa,IAChD,EAAe,EAAc,EAAK,EAAW,CAAY,GAGpD,EAAa,eAAe,QAAS,CAAa,CAC3D,EACA,CAAC,EAAc,EAAe,CAAS,CACzC,EAGM,GAAA,EAAA,EAAA,QAAA,KAAuC,CAE3C,GAAI,OAAO,GAAU,SAInB,OAHI,OAAO,MAAM,CAAK,GAAK,CAAC,OAAO,SAAS,CAAK,EACxC,MAEF,EAAa,CAAK,EAI3B,GAAI,OAAO,GAAU,SAAU,CAC7B,IAAM,EAAe,EAAM,KAAK,EAGhC,GAAI,CAAC,EACH,MAAO,MAIT,IAAM,EAAW,OAAO,CAAY,EAOpC,OALI,OAAO,MAAM,CAAQ,GAAK,CAAC,OAAO,SAAS,CAAQ,EAE9C,MAGF,EAAa,CAAQ,CAC9B,CAEA,MAAO,KACT,EAAG,CAAC,EAAO,CAAY,CAAC,EAGlB,GAAA,EAAA,EAAA,QAAA,KAEA,IAAqB,KAAO,IAAmB,IAC1C,EAEF,EAAe,QAAQ,KAAM,CAAc,CAAC,CAAC,QAAQ,MAAO,CAAgB,EAClF,CAAC,EAAgB,EAAkB,CAAc,CAAC,EAE/C,GAAA,EAAA,EAAA,QAAA,KAA+B,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAM3B,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,GAC5D,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAItB,EAAA,EAAA,KAAA,CAACC,EAAAA,KAAD,CACE,QAAQ,OACR,WAAA,EAAA,EAAA,GAAA,CACE,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,cAC7B,IAAmB,MAAQ,eAC3B,IAAmB,WAAa,2BAClC,EAbF,SAAA,CAeG,GACD,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}
+{"version":3,"file":"statistic-CXBTEgKI.cjs","names":["UITableEmpty","Flex"],"sources":["../packages/components/features/tables/components/atoms/statistic.tsx"],"sourcesContent":["'use client';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { UITableEmpty } from './empty';\n\n/**\n * Applies the specified rounding mode to `num` at the given decimal precision.\n *\n * @param num - The number to round.\n * @param precisionValue - Number of decimal places to keep.\n * @param roundingMode - Rounding strategy: `'round'` (default), `'floor'`, or `'ceil'`.\n * @returns The rounded number.\n */\nconst applyRounding = (num: number, precisionValue: number, roundingMode?: 'round' | 'floor' | 'ceil') => {\n  const multiplier = 10 ** precisionValue;\n\n  switch (roundingMode) {\n    case 'floor':\n      return Math.floor(num * multiplier) / multiplier;\n    case 'ceil':\n      return Math.ceil(num * multiplier) / multiplier;\n    default:\n      return Math.round(num * multiplier) / multiplier;\n  }\n};\n\n/** Props for the {@link UITableStatisticDisplay} component. */\ntype Props = {\n  /** Character used to separate the integer and fractional parts (default: `'.'`). */\n  decimalSeparator?: string;\n  /** Character used to separate thousands groups (default: `','`). */\n  groupSeparator?: string;\n  /** Optional node rendered before the formatted number (e.g. a currency symbol). */\n  prefix?: React.ReactNode;\n  /** Optional node rendered after the formatted number (e.g. a unit label). */\n  suffix?: React.ReactNode;\n  /** Number of decimal digits to display. */\n  precision?: number;\n  /** Rounding strategy applied before formatting (default: `'round'`). */\n  roundingMode?: 'round' | 'floor' | 'ceil';\n  /** When `true`, pads the fractional part with trailing zeros up to `precision` digits. */\n  showTrailingZeros?: boolean;\n  /** Font-size variant for the displayed number (default: `'lg'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** The numeric or string value to format; falsy / invalid values render an empty state. */\n  value: number | string | null | undefined;\n  /** When `true` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive figure can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\n};\n\n/**\n * A memoized table-cell component that formats a numeric value with configurable\n * separators, precision, rounding, and size; renders {@link UITableEmpty} when\n * the value is zero, invalid, or absent.\n *\n * @example\n * import { UITableStatisticDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" size=\"md\" />\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" trend=\"down\" />\n */\nexport const UITableStatisticDisplay = memo(\n  ({\n    decimalSeparator = '.',\n    groupSeparator = ',',\n    prefix: Prefix,\n    suffix: Suffix,\n    precision,\n    roundingMode = 'round',\n    showTrailingZeros = false,\n    size = 'lg',\n    value = 0,\n    colorize = false,\n    trend,\n  }: Props) => {\n    // Memoize number formatting options\n    const formatOptions = useMemo((): Intl.NumberFormatOptions => {\n      const options: Intl.NumberFormatOptions = {};\n\n      if (typeof precision === 'number' && precision >= 0 && showTrailingZeros) {\n        options.minimumFractionDigits = precision;\n        options.maximumFractionDigits = precision;\n      } else {\n        options.maximumFractionDigits = precision;\n      }\n\n      return options;\n    }, [precision, showTrailingZeros]);\n\n    const formatNumber = useCallback(\n      (num: number): string => {\n        let processedNum = num;\n\n        // Áp dụng làm tròn nếu có precision\n        if (typeof precision === 'number' && precision >= 0) {\n          processedNum = applyRounding(num, precision, roundingMode);\n        }\n\n        return processedNum.toLocaleString('vi-VN', formatOptions);\n      },\n      [roundingMode, formatOptions, precision]\n    );\n\n    // Memoize value processing\n    const processedValue = useMemo((): string => {\n      // Xử lý giá trị number\n      if (typeof value === 'number') {\n        if (Number.isNaN(value) || !Number.isFinite(value)) {\n          return 'N/A';\n        }\n        return formatNumber(value);\n      }\n\n      // Xử lý giá trị string\n      if (typeof value === 'string') {\n        const trimmedValue = value.trim();\n\n        // Nếu là chuỗi rỗng\n        if (!trimmedValue) {\n          return 'N/A';\n        }\n\n        // Thử convert sang number\n        const numValue = Number(trimmedValue);\n\n        if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {\n          // Nếu không phải số, trả về string gốc\n          return 'N/A';\n        }\n\n        return formatNumber(numValue);\n      }\n\n      return 'N/A';\n    }, [value, formatNumber]);\n\n    // Memoize separator replacement\n    const finalFormattedValue = useMemo((): string => {\n      // Chỉ thay thế separators nếu khác mặc định\n      if (decimalSeparator === '.' && groupSeparator === ',') {\n        return processedValue;\n      }\n      return processedValue.replace(/,/g, groupSeparator).replace(/\\./g, decimalSeparator);\n    }, [processedValue, decimalSeparator, groupSeparator]);\n\n    const effectiveTrend = useMemo(() => {\n      if (trend) return trend;\n      if (!colorize) return undefined;\n\n      const num = typeof value === 'string' ? Number(value.trim()) : value;\n      if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n      if (num < 0) return 'down';\n      if (num > 0) return 'up';\n      return 'neutral';\n    }, [trend, colorize, value]);\n\n    if (finalFormattedValue === '0' || finalFormattedValue === 'N/A' || !finalFormattedValue) {\n      return <UITableEmpty />;\n    }\n\n    return (\n      <Flex\n        padding=\"none\"\n        className={cn(\n          'font-number tabular-nums',\n          size === 'xs' && 'text-xs',\n          size === 'sm' && 'text-sm',\n          size === 'md' && 'text-base',\n          size === 'lg' && 'text-lg',\n          size === 'xl' && 'text-xl',\n          !effectiveTrend && 'text-text-positive',\n          effectiveTrend === 'down' && 'text-danger',\n          effectiveTrend === 'up' && 'text-success',\n          effectiveTrend === 'neutral' && 'text-text-positive-strong'\n        )}\n      >\n        {Prefix}\n        <p>{finalFormattedValue}</p>\n        {Suffix}\n      </Flex>\n    );\n  }\n);\nUITableStatisticDisplay.displayName = 'UITableStatisticDisplay';\n"],"mappings":"2KAgBA,MAAM,GAAiB,EAAa,EAAwB,IAA8C,CACxG,IAAM,EAAa,IAAM,EAEzB,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,EACxC,IAAK,OACH,OAAO,KAAK,KAAK,EAAM,CAAU,EAAI,EACvC,QACE,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,CAC1C,CACF,EA2Ca,GAAA,EAAA,EAAA,KAAA,EACV,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,EACR,WAAW,GACX,WACW,CAEX,IAAM,GAAA,EAAA,EAAA,QAAA,KAAwD,CAC5D,IAAM,EAAoC,CAAC,EAS3C,OAPI,OAAO,GAAc,UAAY,GAAa,GAAK,IACrD,EAAQ,sBAAwB,GAGhC,EAAQ,sBAAwB,EAG3B,CACT,EAAG,CAAC,EAAW,CAAiB,CAAC,EAE3B,GAAA,EAAA,EAAA,YAAA,CACH,GAAwB,CACvB,IAAI,EAAe,EAOnB,OAJI,OAAO,GAAc,UAAY,GAAa,IAChD,EAAe,EAAc,EAAK,EAAW,CAAY,GAGpD,EAAa,eAAe,QAAS,CAAa,CAC3D,EACA,CAAC,EAAc,EAAe,CAAS,CACzC,EAGM,GAAA,EAAA,EAAA,QAAA,KAAuC,CAE3C,GAAI,OAAO,GAAU,SAInB,OAHI,OAAO,MAAM,CAAK,GAAK,CAAC,OAAO,SAAS,CAAK,EACxC,MAEF,EAAa,CAAK,EAI3B,GAAI,OAAO,GAAU,SAAU,CAC7B,IAAM,EAAe,EAAM,KAAK,EAGhC,GAAI,CAAC,EACH,MAAO,MAIT,IAAM,EAAW,OAAO,CAAY,EAOpC,OALI,OAAO,MAAM,CAAQ,GAAK,CAAC,OAAO,SAAS,CAAQ,EAE9C,MAGF,EAAa,CAAQ,CAC9B,CAEA,MAAO,KACT,EAAG,CAAC,EAAO,CAAY,CAAC,EAGlB,GAAA,EAAA,EAAA,QAAA,KAEA,IAAqB,KAAO,IAAmB,IAC1C,EAEF,EAAe,QAAQ,KAAM,CAAc,CAAC,CAAC,QAAQ,MAAO,CAAgB,EAClF,CAAC,EAAgB,EAAkB,CAAc,CAAC,EAE/C,GAAA,EAAA,EAAA,QAAA,KAA+B,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAM3B,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,GAC5D,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAItB,EAAA,EAAA,KAAA,CAACC,EAAAA,KAAD,CACE,QAAQ,OACR,WAAA,EAAA,EAAA,GAAA,CACE,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,cAC7B,IAAmB,MAAQ,eAC3B,IAAmB,WAAa,2BAClC,EAbF,SAAA,CAeG,GACD,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}

package/dist/{statistic-639yMA2d.mjs → statistic-CvgurN5Z.mjs}

@@ -1,2 +1,2 @@
-import{Flex as e}from"./layouts/flex.mjs";import{Q as t}from"./tables-Dg3KMBKA.mjs";import{memo as n,useCallback as r,useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},l=n(({decimalSeparator:n=`.`,groupSeparator:l=`,`,prefix:u,suffix:d,precision:f,roundingMode:p=`round`,showTrailingZeros:m=!1,size:h=`lg`,value:g=0,colorize:_=!1,trend:v})=>{let y=i(()=>{let e={};return typeof f==`number`&&f>=0&&m&&(e.minimumFractionDigits=f),e.maximumFractionDigits=f,e},[f,m]),b=r(e=>{let t=e;return typeof f==`number`&&f>=0&&(t=c(e,f,p)),t.toLocaleString(`vi-VN`,y)},[p,y,f]),x=i(()=>{if(typeof g==`number`)return Number.isNaN(g)||!Number.isFinite(g)?`N/A`:b(g);if(typeof g==`string`){let e=g.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:b(t)}return`N/A`},[g,b]),S=i(()=>n===`.`&&l===`,`?x:x.replace(/,/g,l).replace(/\./g,n),[x,n,l]),C=i(()=>{if(v)return v;if(!_)return;let e=typeof g==`string`?Number(g.trim()):g;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[v,_,g]);return S===`0`||S===`N/A`||!S?o(t,{}):s(e,{padding:`none`,className:a(`font-number tabular-nums`,h===`xs`&&`text-xs`,h===`sm`&&`text-sm`,h===`md`&&`text-base`,h===`lg`&&`text-lg`,h===`xl`&&`text-xl`,!C&&`text-text-positive`,C===`down`&&`text-danger`,C===`up`&&`text-success`,C===`neutral`&&`text-text-positive-strong`),children:[u,o(`p`,{children:S}),d]})});l.displayName=`UITableStatisticDisplay`;export{l as UITableStatisticDisplay};
-//# sourceMappingURL=statistic-639yMA2d.mjs.map
+import{Flex as e}from"./layouts/flex.mjs";import{Q as t}from"./tables-CuoBQNqx.mjs";import{memo as n,useCallback as r,useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},l=n(({decimalSeparator:n=`.`,groupSeparator:l=`,`,prefix:u,suffix:d,precision:f,roundingMode:p=`round`,showTrailingZeros:m=!1,size:h=`lg`,value:g=0,colorize:_=!1,trend:v})=>{let y=i(()=>{let e={};return typeof f==`number`&&f>=0&&m&&(e.minimumFractionDigits=f),e.maximumFractionDigits=f,e},[f,m]),b=r(e=>{let t=e;return typeof f==`number`&&f>=0&&(t=c(e,f,p)),t.toLocaleString(`vi-VN`,y)},[p,y,f]),x=i(()=>{if(typeof g==`number`)return Number.isNaN(g)||!Number.isFinite(g)?`N/A`:b(g);if(typeof g==`string`){let e=g.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:b(t)}return`N/A`},[g,b]),S=i(()=>n===`.`&&l===`,`?x:x.replace(/,/g,l).replace(/\./g,n),[x,n,l]),C=i(()=>{if(v)return v;if(!_)return;let e=typeof g==`string`?Number(g.trim()):g;if(!(typeof e!=`number`||Number.isNaN(e)))return e<0?`down`:e>0?`up`:`neutral`},[v,_,g]);return S===`0`||S===`N/A`||!S?o(t,{}):s(e,{padding:`none`,className:a(`font-number tabular-nums`,h===`xs`&&`text-xs`,h===`sm`&&`text-sm`,h===`md`&&`text-base`,h===`lg`&&`text-lg`,h===`xl`&&`text-xl`,!C&&`text-text-positive`,C===`down`&&`text-danger`,C===`up`&&`text-success`,C===`neutral`&&`text-text-positive-strong`),children:[u,o(`p`,{children:S}),d]})});l.displayName=`UITableStatisticDisplay`;export{l as UITableStatisticDisplay};
+//# sourceMappingURL=statistic-CvgurN5Z.mjs.map

package/dist/{statistic-639yMA2d.mjs.map → statistic-CvgurN5Z.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"statistic-639yMA2d.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/statistic.tsx"],"sourcesContent":["'use client';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { UITableEmpty } from './empty';\n\n/**\n * Applies the specified rounding mode to `num` at the given decimal precision.\n *\n * @param num - The number to round.\n * @param precisionValue - Number of decimal places to keep.\n * @param roundingMode - Rounding strategy: `'round'` (default), `'floor'`, or `'ceil'`.\n * @returns The rounded number.\n */\nconst applyRounding = (num: number, precisionValue: number, roundingMode?: 'round' | 'floor' | 'ceil') => {\n  const multiplier = 10 ** precisionValue;\n\n  switch (roundingMode) {\n    case 'floor':\n      return Math.floor(num * multiplier) / multiplier;\n    case 'ceil':\n      return Math.ceil(num * multiplier) / multiplier;\n    default:\n      return Math.round(num * multiplier) / multiplier;\n  }\n};\n\n/** Props for the {@link UITableStatisticDisplay} component. */\ntype Props = {\n  /** Character used to separate the integer and fractional parts (default: `'.'`). */\n  decimalSeparator?: string;\n  /** Character used to separate thousands groups (default: `','`). */\n  groupSeparator?: string;\n  /** Optional node rendered before the formatted number (e.g. a currency symbol). */\n  prefix?: React.ReactNode;\n  /** Optional node rendered after the formatted number (e.g. a unit label). */\n  suffix?: React.ReactNode;\n  /** Number of decimal digits to display. */\n  precision?: number;\n  /** Rounding strategy applied before formatting (default: `'round'`). */\n  roundingMode?: 'round' | 'floor' | 'ceil';\n  /** When `true`, pads the fractional part with trailing zeros up to `precision` digits. */\n  showTrailingZeros?: boolean;\n  /** Font-size variant for the displayed number (default: `'lg'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** The numeric or string value to format; falsy / invalid values render an empty state. */\n  value: number | string | null | undefined;\n  /** When `true` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive figure can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\n};\n\n/**\n * A memoized table-cell component that formats a numeric value with configurable\n * separators, precision, rounding, and size; renders {@link UITableEmpty} when\n * the value is zero, invalid, or absent.\n *\n * @example\n * import { UITableStatisticDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" size=\"md\" />\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" trend=\"down\" />\n */\nexport const UITableStatisticDisplay = memo(\n  ({\n    decimalSeparator = '.',\n    groupSeparator = ',',\n    prefix: Prefix,\n    suffix: Suffix,\n    precision,\n    roundingMode = 'round',\n    showTrailingZeros = false,\n    size = 'lg',\n    value = 0,\n    colorize = false,\n    trend,\n  }: Props) => {\n    // Memoize number formatting options\n    const formatOptions = useMemo((): Intl.NumberFormatOptions => {\n      const options: Intl.NumberFormatOptions = {};\n\n      if (typeof precision === 'number' && precision >= 0 && showTrailingZeros) {\n        options.minimumFractionDigits = precision;\n        options.maximumFractionDigits = precision;\n      } else {\n        options.maximumFractionDigits = precision;\n      }\n\n      return options;\n    }, [precision, showTrailingZeros]);\n\n    const formatNumber = useCallback(\n      (num: number): string => {\n        let processedNum = num;\n\n        // Áp dụng làm tròn nếu có precision\n        if (typeof precision === 'number' && precision >= 0) {\n          processedNum = applyRounding(num, precision, roundingMode);\n        }\n\n        return processedNum.toLocaleString('vi-VN', formatOptions);\n      },\n      [roundingMode, formatOptions, precision]\n    );\n\n    // Memoize value processing\n    const processedValue = useMemo((): string => {\n      // Xử lý giá trị number\n      if (typeof value === 'number') {\n        if (Number.isNaN(value) || !Number.isFinite(value)) {\n          return 'N/A';\n        }\n        return formatNumber(value);\n      }\n\n      // Xử lý giá trị string\n      if (typeof value === 'string') {\n        const trimmedValue = value.trim();\n\n        // Nếu là chuỗi rỗng\n        if (!trimmedValue) {\n          return 'N/A';\n        }\n\n        // Thử convert sang number\n        const numValue = Number(trimmedValue);\n\n        if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {\n          // Nếu không phải số, trả về string gốc\n          return 'N/A';\n        }\n\n        return formatNumber(numValue);\n      }\n\n      return 'N/A';\n    }, [value, formatNumber]);\n\n    // Memoize separator replacement\n    const finalFormattedValue = useMemo((): string => {\n      // Chỉ thay thế separators nếu khác mặc định\n      if (decimalSeparator === '.' && groupSeparator === ',') {\n        return processedValue;\n      }\n      return processedValue.replace(/,/g, groupSeparator).replace(/\\./g, decimalSeparator);\n    }, [processedValue, decimalSeparator, groupSeparator]);\n\n    const effectiveTrend = useMemo(() => {\n      if (trend) return trend;\n      if (!colorize) return undefined;\n\n      const num = typeof value === 'string' ? Number(value.trim()) : value;\n      if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n      if (num < 0) return 'down';\n      if (num > 0) return 'up';\n      return 'neutral';\n    }, [trend, colorize, value]);\n\n    if (finalFormattedValue === '0' || finalFormattedValue === 'N/A' || !finalFormattedValue) {\n      return <UITableEmpty />;\n    }\n\n    return (\n      <Flex\n        padding=\"none\"\n        className={cn(\n          'font-number tabular-nums',\n          size === 'xs' && 'text-xs',\n          size === 'sm' && 'text-sm',\n          size === 'md' && 'text-base',\n          size === 'lg' && 'text-lg',\n          size === 'xl' && 'text-xl',\n          !effectiveTrend && 'text-text-positive',\n          effectiveTrend === 'down' && 'text-danger',\n          effectiveTrend === 'up' && 'text-success',\n          effectiveTrend === 'neutral' && 'text-text-positive-strong'\n        )}\n      >\n        {Prefix}\n        <p>{finalFormattedValue}</p>\n        {Suffix}\n      </Flex>\n    );\n  }\n);\nUITableStatisticDisplay.displayName = 'UITableStatisticDisplay';\n"],"mappings":"qPAgBA,MAAM,GAAiB,EAAa,EAAwB,IAA8C,CACxG,IAAM,EAAa,IAAM,EAEzB,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,EACxC,IAAK,OACH,OAAO,KAAK,KAAK,EAAM,CAAU,EAAI,EACvC,QACE,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,CAC1C,CACF,EA2Ca,EAA0B,GACpC,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,EACR,WAAW,GACX,WACW,CAEX,IAAM,EAAgB,MAAwC,CAC5D,IAAM,EAAoC,CAAC,EAS3C,OAPI,OAAO,GAAc,UAAY,GAAa,GAAK,IACrD,EAAQ,sBAAwB,GAGhC,EAAQ,sBAAwB,EAG3B,CACT,EAAG,CAAC,EAAW,CAAiB,CAAC,EAE3B,EAAe,EAClB,GAAwB,CACvB,IAAI,EAAe,EAOnB,OAJI,OAAO,GAAc,UAAY,GAAa,IAChD,EAAe,EAAc,EAAK,EAAW,CAAY,GAGpD,EAAa,eAAe,QAAS,CAAa,CAC3D,EACA,CAAC,EAAc,EAAe,CAAS,CACzC,EAGM,EAAiB,MAAsB,CAE3C,GAAI,OAAO,GAAU,SAInB,OAHI,OAAO,MAAM,CAAK,GAAK,CAAC,OAAO,SAAS,CAAK,EACxC,MAEF,EAAa,CAAK,EAI3B,GAAI,OAAO,GAAU,SAAU,CAC7B,IAAM,EAAe,EAAM,KAAK,EAGhC,GAAI,CAAC,EACH,MAAO,MAIT,IAAM,EAAW,OAAO,CAAY,EAOpC,OALI,OAAO,MAAM,CAAQ,GAAK,CAAC,OAAO,SAAS,CAAQ,EAE9C,MAGF,EAAa,CAAQ,CAC9B,CAEA,MAAO,KACT,EAAG,CAAC,EAAO,CAAY,CAAC,EAGlB,EAAsB,MAEtB,IAAqB,KAAO,IAAmB,IAC1C,EAEF,EAAe,QAAQ,KAAM,CAAc,CAAC,CAAC,QAAQ,MAAO,CAAgB,EAClF,CAAC,EAAgB,EAAkB,CAAc,CAAC,EAE/C,EAAiB,MAAc,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAM3B,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,EAC5D,EAAC,EAAD,CAAe,CAAA,EAItB,EAAC,EAAD,CACE,QAAQ,OACR,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,cAC7B,IAAmB,MAAQ,eAC3B,IAAmB,WAAa,2BAClC,EAbF,SAAA,CAeG,EACD,EAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}
+{"version":3,"file":"statistic-CvgurN5Z.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/statistic.tsx"],"sourcesContent":["'use client';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { UITableEmpty } from './empty';\n\n/**\n * Applies the specified rounding mode to `num` at the given decimal precision.\n *\n * @param num - The number to round.\n * @param precisionValue - Number of decimal places to keep.\n * @param roundingMode - Rounding strategy: `'round'` (default), `'floor'`, or `'ceil'`.\n * @returns The rounded number.\n */\nconst applyRounding = (num: number, precisionValue: number, roundingMode?: 'round' | 'floor' | 'ceil') => {\n  const multiplier = 10 ** precisionValue;\n\n  switch (roundingMode) {\n    case 'floor':\n      return Math.floor(num * multiplier) / multiplier;\n    case 'ceil':\n      return Math.ceil(num * multiplier) / multiplier;\n    default:\n      return Math.round(num * multiplier) / multiplier;\n  }\n};\n\n/** Props for the {@link UITableStatisticDisplay} component. */\ntype Props = {\n  /** Character used to separate the integer and fractional parts (default: `'.'`). */\n  decimalSeparator?: string;\n  /** Character used to separate thousands groups (default: `','`). */\n  groupSeparator?: string;\n  /** Optional node rendered before the formatted number (e.g. a currency symbol). */\n  prefix?: React.ReactNode;\n  /** Optional node rendered after the formatted number (e.g. a unit label). */\n  suffix?: React.ReactNode;\n  /** Number of decimal digits to display. */\n  precision?: number;\n  /** Rounding strategy applied before formatting (default: `'round'`). */\n  roundingMode?: 'round' | 'floor' | 'ceil';\n  /** When `true`, pads the fractional part with trailing zeros up to `precision` digits. */\n  showTrailingZeros?: boolean;\n  /** Font-size variant for the displayed number (default: `'lg'`). */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** The numeric or string value to format; falsy / invalid values render an empty state. */\n  value: number | string | null | undefined;\n  /** When `true` and `trend` is not set, auto-derives color from the value's sign (negative → red, positive → green, zero → neutral). */\n  colorize?: boolean;\n  /**\n   * Explicit color override, independent of the value's numeric sign — e.g. a large\n   * positive figure can still be marked `'down'` (red) to flag it as significant.\n   * Takes precedence over `colorize`'s sign-based auto-detection.\n   */\n  trend?: 'up' | 'down' | 'neutral';\n};\n\n/**\n * A memoized table-cell component that formats a numeric value with configurable\n * separators, precision, rounding, and size; renders {@link UITableEmpty} when\n * the value is zero, invalid, or absent.\n *\n * @example\n * import { UITableStatisticDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" size=\"md\" />\n * <UITableStatisticDisplay value={1234567.89} precision={2} prefix=\"$\" trend=\"down\" />\n */\nexport const UITableStatisticDisplay = memo(\n  ({\n    decimalSeparator = '.',\n    groupSeparator = ',',\n    prefix: Prefix,\n    suffix: Suffix,\n    precision,\n    roundingMode = 'round',\n    showTrailingZeros = false,\n    size = 'lg',\n    value = 0,\n    colorize = false,\n    trend,\n  }: Props) => {\n    // Memoize number formatting options\n    const formatOptions = useMemo((): Intl.NumberFormatOptions => {\n      const options: Intl.NumberFormatOptions = {};\n\n      if (typeof precision === 'number' && precision >= 0 && showTrailingZeros) {\n        options.minimumFractionDigits = precision;\n        options.maximumFractionDigits = precision;\n      } else {\n        options.maximumFractionDigits = precision;\n      }\n\n      return options;\n    }, [precision, showTrailingZeros]);\n\n    const formatNumber = useCallback(\n      (num: number): string => {\n        let processedNum = num;\n\n        // Áp dụng làm tròn nếu có precision\n        if (typeof precision === 'number' && precision >= 0) {\n          processedNum = applyRounding(num, precision, roundingMode);\n        }\n\n        return processedNum.toLocaleString('vi-VN', formatOptions);\n      },\n      [roundingMode, formatOptions, precision]\n    );\n\n    // Memoize value processing\n    const processedValue = useMemo((): string => {\n      // Xử lý giá trị number\n      if (typeof value === 'number') {\n        if (Number.isNaN(value) || !Number.isFinite(value)) {\n          return 'N/A';\n        }\n        return formatNumber(value);\n      }\n\n      // Xử lý giá trị string\n      if (typeof value === 'string') {\n        const trimmedValue = value.trim();\n\n        // Nếu là chuỗi rỗng\n        if (!trimmedValue) {\n          return 'N/A';\n        }\n\n        // Thử convert sang number\n        const numValue = Number(trimmedValue);\n\n        if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {\n          // Nếu không phải số, trả về string gốc\n          return 'N/A';\n        }\n\n        return formatNumber(numValue);\n      }\n\n      return 'N/A';\n    }, [value, formatNumber]);\n\n    // Memoize separator replacement\n    const finalFormattedValue = useMemo((): string => {\n      // Chỉ thay thế separators nếu khác mặc định\n      if (decimalSeparator === '.' && groupSeparator === ',') {\n        return processedValue;\n      }\n      return processedValue.replace(/,/g, groupSeparator).replace(/\\./g, decimalSeparator);\n    }, [processedValue, decimalSeparator, groupSeparator]);\n\n    const effectiveTrend = useMemo(() => {\n      if (trend) return trend;\n      if (!colorize) return undefined;\n\n      const num = typeof value === 'string' ? Number(value.trim()) : value;\n      if (typeof num !== 'number' || Number.isNaN(num)) return undefined;\n      if (num < 0) return 'down';\n      if (num > 0) return 'up';\n      return 'neutral';\n    }, [trend, colorize, value]);\n\n    if (finalFormattedValue === '0' || finalFormattedValue === 'N/A' || !finalFormattedValue) {\n      return <UITableEmpty />;\n    }\n\n    return (\n      <Flex\n        padding=\"none\"\n        className={cn(\n          'font-number tabular-nums',\n          size === 'xs' && 'text-xs',\n          size === 'sm' && 'text-sm',\n          size === 'md' && 'text-base',\n          size === 'lg' && 'text-lg',\n          size === 'xl' && 'text-xl',\n          !effectiveTrend && 'text-text-positive',\n          effectiveTrend === 'down' && 'text-danger',\n          effectiveTrend === 'up' && 'text-success',\n          effectiveTrend === 'neutral' && 'text-text-positive-strong'\n        )}\n      >\n        {Prefix}\n        <p>{finalFormattedValue}</p>\n        {Suffix}\n      </Flex>\n    );\n  }\n);\nUITableStatisticDisplay.displayName = 'UITableStatisticDisplay';\n"],"mappings":"qPAgBA,MAAM,GAAiB,EAAa,EAAwB,IAA8C,CACxG,IAAM,EAAa,IAAM,EAEzB,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,EACxC,IAAK,OACH,OAAO,KAAK,KAAK,EAAM,CAAU,EAAI,EACvC,QACE,OAAO,KAAK,MAAM,EAAM,CAAU,EAAI,CAC1C,CACF,EA2Ca,EAA0B,GACpC,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,EACR,WAAW,GACX,WACW,CAEX,IAAM,EAAgB,MAAwC,CAC5D,IAAM,EAAoC,CAAC,EAS3C,OAPI,OAAO,GAAc,UAAY,GAAa,GAAK,IACrD,EAAQ,sBAAwB,GAGhC,EAAQ,sBAAwB,EAG3B,CACT,EAAG,CAAC,EAAW,CAAiB,CAAC,EAE3B,EAAe,EAClB,GAAwB,CACvB,IAAI,EAAe,EAOnB,OAJI,OAAO,GAAc,UAAY,GAAa,IAChD,EAAe,EAAc,EAAK,EAAW,CAAY,GAGpD,EAAa,eAAe,QAAS,CAAa,CAC3D,EACA,CAAC,EAAc,EAAe,CAAS,CACzC,EAGM,EAAiB,MAAsB,CAE3C,GAAI,OAAO,GAAU,SAInB,OAHI,OAAO,MAAM,CAAK,GAAK,CAAC,OAAO,SAAS,CAAK,EACxC,MAEF,EAAa,CAAK,EAI3B,GAAI,OAAO,GAAU,SAAU,CAC7B,IAAM,EAAe,EAAM,KAAK,EAGhC,GAAI,CAAC,EACH,MAAO,MAIT,IAAM,EAAW,OAAO,CAAY,EAOpC,OALI,OAAO,MAAM,CAAQ,GAAK,CAAC,OAAO,SAAS,CAAQ,EAE9C,MAGF,EAAa,CAAQ,CAC9B,CAEA,MAAO,KACT,EAAG,CAAC,EAAO,CAAY,CAAC,EAGlB,EAAsB,MAEtB,IAAqB,KAAO,IAAmB,IAC1C,EAEF,EAAe,QAAQ,KAAM,CAAc,CAAC,CAAC,QAAQ,MAAO,CAAgB,EAClF,CAAC,EAAgB,EAAkB,CAAc,CAAC,EAE/C,EAAiB,MAAc,CACnC,GAAI,EAAO,OAAO,EAClB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC3D,YAAO,GAAQ,UAAY,OAAO,MAAM,CAAG,GAG/C,OAFI,EAAM,EAAU,OAChB,EAAM,EAAU,KACb,SACT,EAAG,CAAC,EAAO,EAAU,CAAK,CAAC,EAM3B,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,EAC5D,EAAC,EAAD,CAAe,CAAA,EAItB,EAAC,EAAD,CACE,QAAQ,OACR,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAkB,qBACnB,IAAmB,QAAU,cAC7B,IAAmB,MAAQ,eAC3B,IAAmB,WAAa,2BAClC,EAbF,SAAA,CAeG,EACD,EAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}

package/dist/{status-display-BCYpNJmd.mjs → status-display-Caae2aYf.mjs}

@@ -1,2 +1,2 @@
-import{Badge as e}from"./ui/badge.mjs";import{Q as t}from"./tables-Dg3KMBKA.mjs";import{jsx as n}from"react/jsx-runtime";const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?n(t,{}):n(e,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});export{r as UITableStatusDisplay};
-//# sourceMappingURL=status-display-BCYpNJmd.mjs.map
+import{Badge as e}from"./ui/badge.mjs";import{Q as t}from"./tables-CuoBQNqx.mjs";import{jsx as n}from"react/jsx-runtime";const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?n(t,{}):n(e,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});export{r as UITableStatusDisplay};
+//# sourceMappingURL=status-display-Caae2aYf.mjs.map

package/dist/{status-display-BCYpNJmd.mjs.map → status-display-Caae2aYf.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"status-display-BCYpNJmd.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"yHAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,GAAW,EAAC,EAAD,CAAe,CAAA,EAM/E,EAAC,EAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,qCAH/C,SAAA,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}
+{"version":3,"file":"status-display-Caae2aYf.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"yHAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,GAAW,EAAC,EAAD,CAAe,CAAA,EAM/E,EAAC,EAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,qCAH/C,SAAA,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}

package/dist/{status-display-xcCCGpGS.cjs → status-display-EVwkPrm6.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/badge.cjs"),t=require("./tables-BqZ4Zs6e.cjs");let n=require("react/jsx-runtime");const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?(0,n.jsx)(t.Q,{}):(0,n.jsx)(e.Badge,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});exports.UITableStatusDisplay=r;
-//# sourceMappingURL=status-display-xcCCGpGS.cjs.map
+const e=require("./ui/badge.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react/jsx-runtime");const r=({value:r,colorMap:i,defaultColor:a=`muted`,variant:o=`soft`})=>r==null||r===``?(0,n.jsx)(t.Q,{}):(0,n.jsx)(e.Badge,{variant:o,color:(i&&i[r])??a,size:`sm`,className:`min-w-16 justify-center capitalize`,children:r.charAt(0).toUpperCase()+r.slice(1).replace(/_/g,` `)});exports.UITableStatusDisplay=r;
+//# sourceMappingURL=status-display-EVwkPrm6.cjs.map

package/dist/{status-display-xcCCGpGS.cjs.map → status-display-EVwkPrm6.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"status-display-xcCCGpGS.cjs","names":["UITableEmpty","Badge"],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"wGAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,IAAW,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAM/E,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,qCAH/C,SAAA,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}
+{"version":3,"file":"status-display-EVwkPrm6.cjs","names":["UITableEmpty","Badge"],"sources":["../packages/components/features/tables/components/atoms/status-display.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { UITableEmpty } from './empty';\n\ntype BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Props for the {@link UITableStatusDisplay} component. */\ntype Props = {\n  /** The status string to display; `null`/`undefined` renders an empty state. */\n  value: string | null | undefined;\n  /**\n   * Maps each status string to a badge color.  Any key not present in the map\n   * falls back to `defaultColor`.\n   */\n  colorMap?: Record<string, BadgeColor>;\n  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */\n  defaultColor?: BadgeColor;\n  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */\n  variant?: 'solid' | 'soft' | 'outline';\n};\n\n/**\n * Renders a color-coded status badge for a table cell.  The mapping from status\n * string to badge color is fully configurable via `colorMap`; unknown statuses\n * fall back to `defaultColor`.\n *\n * @example\n * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableStatusDisplay\n *   value=\"active\"\n *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}\n * />\n */\nexport const UITableStatusDisplay: React.FC<Props> = ({ value, colorMap, defaultColor = 'muted', variant = 'soft' }) => {\n  if (value === null || value === undefined || value === '') return <UITableEmpty />;\n\n  const color: BadgeColor = (colorMap && colorMap[value]) ?? defaultColor;\n  const label = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');\n\n  return (\n    <Badge variant={variant} color={color} size=\"sm\" className=\"min-w-16 justify-center capitalize\">\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":"wGAmCA,MAAa,GAAyC,CAAE,QAAO,WAAU,eAAe,QAAS,UAAU,UACrG,GAAU,MAA+B,IAAU,IAAW,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAM/E,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAgB,UAAS,OAJA,GAAY,EAAS,KAAW,EAIlB,KAAK,KAAK,UAAU,qCAH/C,SAAA,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}

package/dist/{summary-bar-C3NAnI3V.mjs → summary-bar-B6B_wmZA.mjs}

@@ -1,2 +1,2 @@
-import{Statistic as e}from"./data-display/statistic.mjs";import{Y as t,Z as n}from"./tables-Dg3KMBKA.mjs";import{memo as r}from"react";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s={up:`bg-success`,down:`bg-danger`,neutral:`bg-primary`},c=r(()=>{let{summary:r,onSummaryItemClick:c}=t(),{isOpen:l}=n();return!l||!r||r.length===0?null:a(`div`,{"data-slot":`table-summary-bar`,className:`w-full overflow-x-auto px-2 pb-1`,children:a(`div`,{className:`grid gap-3`,style:{gridTemplateColumns:`repeat(auto-fill, minmax(200px, 240px))`},children:r.map(t=>{let n=s[t.trend??`neutral`],r=!!c;return o(`div`,{className:i(`flex flex-col overflow-hidden rounded border border-border bg-card shadow-card`,r&&`cursor-pointer transition-shadow hover:shadow-md`),onClick:r?()=>c(t):void 0,role:r?`button`:void 0,tabIndex:r?0:void 0,onKeyDown:r?e=>{(e.key===`Enter`||e.key===` `)&&c(t)}:void 0,children:[a(`div`,{className:i(`h-0.75 w-full shrink-0`,n)}),o(`div`,{className:`flex flex-1 flex-col gap-2 px-5 py-4`,children:[a(`span`,{className:`font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest`,children:t.label}),t.value!==null&&t.value!==void 0?a(e,{value:t.value,prefix:t.prefix,suffix:t.suffix,precision:t.precision,trend:t.trend,size:`xl`,className:`font-bold`}):a(`span`,{className:`font-bold text-text-positive-strong text-xl tabular-nums`,children:`—`}),!!t.description&&a(`span`,{className:`text-text-positive-weak text-xs`,children:t.description})]})]},t.label)})})})});c.displayName=`UITableSummaryBar`;export{c as UITableSummaryBar};
-//# sourceMappingURL=summary-bar-C3NAnI3V.mjs.map
+import{Statistic as e}from"./data-display/statistic.mjs";import{Y as t,Z as n}from"./tables-CuoBQNqx.mjs";import{memo as r}from"react";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s={up:`bg-success`,down:`bg-danger`,neutral:`bg-primary`},c=r(()=>{let{summary:r,onSummaryItemClick:c}=t(),{isOpen:l}=n();return!l||!r||r.length===0?null:a(`div`,{"data-slot":`table-summary-bar`,className:`w-full overflow-x-auto px-2 pb-1`,children:a(`div`,{className:`grid gap-3`,style:{gridTemplateColumns:`repeat(auto-fill, minmax(200px, 240px))`},children:r.map(t=>{let n=s[t.trend??`neutral`],r=!!c;return o(`div`,{className:i(`flex flex-col overflow-hidden rounded border border-border bg-card shadow-card`,r&&`cursor-pointer transition-shadow hover:shadow-md`),onClick:r?()=>c(t):void 0,role:r?`button`:void 0,tabIndex:r?0:void 0,onKeyDown:r?e=>{(e.key===`Enter`||e.key===` `)&&c(t)}:void 0,children:[a(`div`,{className:i(`h-0.75 w-full shrink-0`,n)}),o(`div`,{className:`flex flex-1 flex-col gap-2 px-5 py-4`,children:[a(`span`,{className:`font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest`,children:t.label}),t.value!==null&&t.value!==void 0?a(e,{value:t.value,prefix:t.prefix,suffix:t.suffix,precision:t.precision,trend:t.trend,size:`xl`,className:`font-bold`}):a(`span`,{className:`font-bold text-text-positive-strong text-xl tabular-nums`,children:`—`}),!!t.description&&a(`span`,{className:`text-text-positive-weak text-xs`,children:t.description})]})]},t.label)})})})});c.displayName=`UITableSummaryBar`;export{c as UITableSummaryBar};
+//# sourceMappingURL=summary-bar-B6B_wmZA.mjs.map

package/dist/{summary-bar-C3NAnI3V.mjs.map → summary-bar-B6B_wmZA.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"summary-bar-C3NAnI3V.mjs","names":[],"sources":["../packages/components/features/tables/components/table/summary-bar.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Statistic } from '@/components/data-display/statistic';\nimport { useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport type { SummaryItem } from '../../types';\n\nconst trendAccent: Record<NonNullable<SummaryItem['trend']>, string> = {\n  up: 'bg-success',\n  down: 'bg-danger',\n  neutral: 'bg-primary',\n};\n\nexport const UITableSummaryBar = memo(() => {\n  const { summary, onSummaryItemClick } = useUITableContext();\n  const { isOpen } = useUITableSummaryContext();\n\n  if (!isOpen || !summary || summary.length === 0) return null;\n\n  return (\n    <div data-slot=\"table-summary-bar\" className=\"w-full overflow-x-auto px-2 pb-1\">\n      <div className=\"grid gap-3\" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 240px))' }}>\n        {summary.map(item => {\n          const accent = trendAccent[item.trend ?? 'neutral'];\n          const isClickable = !!onSummaryItemClick;\n\n          return (\n            <div\n              key={item.label}\n              className={cn(\n                'flex flex-col overflow-hidden rounded border border-border bg-card shadow-card',\n                isClickable && 'cursor-pointer transition-shadow hover:shadow-md'\n              )}\n              onClick={isClickable ? () => onSummaryItemClick(item) : undefined}\n              role={isClickable ? 'button' : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onKeyDown={\n                isClickable\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') onSummaryItemClick(item);\n                    }\n                  : undefined\n              }\n            >\n              {/* Coloured accent strip */}\n              <div className={cn('h-0.75 w-full shrink-0', accent)} />\n\n              <div className=\"flex flex-1 flex-col gap-2 px-5 py-4\">\n                {/* Label */}\n                <span className=\"font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest\">{item.label}</span>\n\n                {/* Value */}\n                {item.value !== null && item.value !== undefined ? (\n                  <Statistic\n                    value={item.value}\n                    prefix={item.prefix}\n                    suffix={item.suffix}\n                    precision={item.precision}\n                    trend={item.trend}\n                    size=\"xl\"\n                    className=\"font-bold\"\n                  />\n                ) : (\n                  <span className=\"font-bold text-text-positive-strong text-xl tabular-nums\">—</span>\n                )}\n\n                {/* Description */}\n                {!!item.description && <span className=\"text-text-positive-weak text-xs\">{item.description}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nUITableSummaryBar.displayName = 'UITableSummaryBar';\n"],"mappings":"6OASA,MAAM,EAAiE,CACrE,GAAI,aACJ,KAAM,YACN,QAAS,YACX,EAEa,EAAoB,MAAW,CAC1C,GAAM,CAAE,UAAS,sBAAuB,EAAkB,EACpD,CAAE,UAAW,EAAyB,EAI5C,MAFI,CAAC,GAAU,CAAC,GAAW,EAAQ,SAAW,EAAU,KAGtD,EAAC,MAAD,CAAK,YAAU,oBAAoB,UAAU,mCAC3C,SAAA,EAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,EACjG,SAAA,EAAQ,IAAI,GAAQ,CACnB,IAAM,EAAS,EAAY,EAAK,OAAS,WACnC,EAAc,CAAC,CAAC,EAEtB,OACE,EAAC,MAAD,CAEE,UAAW,EACT,iFACA,GAAe,kDACjB,EACA,QAAS,MAAoB,EAAmB,CAAI,EAAI,IAAA,GACxD,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,UACE,EACI,GAAK,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,MAAK,EAAmB,CAAI,CACjE,EACA,IAAA,GAdR,SAAA,CAkBE,EAAC,MAAD,CAAK,UAAW,EAAG,yBAA0B,CAAM,CAAI,CAAA,EAEvD,EAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CAEE,EAAC,OAAD,CAAM,UAAU,8EAA+E,SAAA,EAAK,KAAY,CAAA,EAG/G,EAAK,QAAU,MAAQ,EAAK,QAAU,IAAA,GACrC,EAAC,EAAD,CACE,MAAO,EAAK,MACZ,OAAQ,EAAK,OACb,OAAQ,EAAK,OACb,UAAW,EAAK,UAChB,MAAO,EAAK,MACZ,KAAK,KACL,UAAU,WACX,CAAA,EAED,EAAC,OAAD,CAAM,UAAU,2DAA2D,SAAA,GAAO,CAAA,EAInF,CAAC,CAAC,EAAK,aAAe,EAAC,OAAD,CAAM,UAAU,kCAAmC,SAAA,EAAK,WAAkB,CAAA,CAC9F,CACF,CAAA,CAAA,CAzCE,EAAA,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}
+{"version":3,"file":"summary-bar-B6B_wmZA.mjs","names":[],"sources":["../packages/components/features/tables/components/table/summary-bar.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Statistic } from '@/components/data-display/statistic';\nimport { useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport type { SummaryItem } from '../../types';\n\nconst trendAccent: Record<NonNullable<SummaryItem['trend']>, string> = {\n  up: 'bg-success',\n  down: 'bg-danger',\n  neutral: 'bg-primary',\n};\n\nexport const UITableSummaryBar = memo(() => {\n  const { summary, onSummaryItemClick } = useUITableContext();\n  const { isOpen } = useUITableSummaryContext();\n\n  if (!isOpen || !summary || summary.length === 0) return null;\n\n  return (\n    <div data-slot=\"table-summary-bar\" className=\"w-full overflow-x-auto px-2 pb-1\">\n      <div className=\"grid gap-3\" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 240px))' }}>\n        {summary.map(item => {\n          const accent = trendAccent[item.trend ?? 'neutral'];\n          const isClickable = !!onSummaryItemClick;\n\n          return (\n            <div\n              key={item.label}\n              className={cn(\n                'flex flex-col overflow-hidden rounded border border-border bg-card shadow-card',\n                isClickable && 'cursor-pointer transition-shadow hover:shadow-md'\n              )}\n              onClick={isClickable ? () => onSummaryItemClick(item) : undefined}\n              role={isClickable ? 'button' : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onKeyDown={\n                isClickable\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') onSummaryItemClick(item);\n                    }\n                  : undefined\n              }\n            >\n              {/* Coloured accent strip */}\n              <div className={cn('h-0.75 w-full shrink-0', accent)} />\n\n              <div className=\"flex flex-1 flex-col gap-2 px-5 py-4\">\n                {/* Label */}\n                <span className=\"font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest\">{item.label}</span>\n\n                {/* Value */}\n                {item.value !== null && item.value !== undefined ? (\n                  <Statistic\n                    value={item.value}\n                    prefix={item.prefix}\n                    suffix={item.suffix}\n                    precision={item.precision}\n                    trend={item.trend}\n                    size=\"xl\"\n                    className=\"font-bold\"\n                  />\n                ) : (\n                  <span className=\"font-bold text-text-positive-strong text-xl tabular-nums\">—</span>\n                )}\n\n                {/* Description */}\n                {!!item.description && <span className=\"text-text-positive-weak text-xs\">{item.description}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nUITableSummaryBar.displayName = 'UITableSummaryBar';\n"],"mappings":"6OASA,MAAM,EAAiE,CACrE,GAAI,aACJ,KAAM,YACN,QAAS,YACX,EAEa,EAAoB,MAAW,CAC1C,GAAM,CAAE,UAAS,sBAAuB,EAAkB,EACpD,CAAE,UAAW,EAAyB,EAI5C,MAFI,CAAC,GAAU,CAAC,GAAW,EAAQ,SAAW,EAAU,KAGtD,EAAC,MAAD,CAAK,YAAU,oBAAoB,UAAU,mCAC3C,SAAA,EAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,EACjG,SAAA,EAAQ,IAAI,GAAQ,CACnB,IAAM,EAAS,EAAY,EAAK,OAAS,WACnC,EAAc,CAAC,CAAC,EAEtB,OACE,EAAC,MAAD,CAEE,UAAW,EACT,iFACA,GAAe,kDACjB,EACA,QAAS,MAAoB,EAAmB,CAAI,EAAI,IAAA,GACxD,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,UACE,EACI,GAAK,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,MAAK,EAAmB,CAAI,CACjE,EACA,IAAA,GAdR,SAAA,CAkBE,EAAC,MAAD,CAAK,UAAW,EAAG,yBAA0B,CAAM,CAAI,CAAA,EAEvD,EAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CAEE,EAAC,OAAD,CAAM,UAAU,8EAA+E,SAAA,EAAK,KAAY,CAAA,EAG/G,EAAK,QAAU,MAAQ,EAAK,QAAU,IAAA,GACrC,EAAC,EAAD,CACE,MAAO,EAAK,MACZ,OAAQ,EAAK,OACb,OAAQ,EAAK,OACb,UAAW,EAAK,UAChB,MAAO,EAAK,MACZ,KAAK,KACL,UAAU,WACX,CAAA,EAED,EAAC,OAAD,CAAM,UAAU,2DAA2D,SAAA,GAAO,CAAA,EAInF,CAAC,CAAC,EAAK,aAAe,EAAC,OAAD,CAAM,UAAU,kCAAmC,SAAA,EAAK,WAAkB,CAAA,CAC9F,CACF,CAAA,CAAA,CAzCE,EAAA,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}

package/dist/{summary-bar-C08g8bb1.cjs → summary-bar-D36n4fox.cjs}

@@ -1,2 +1,2 @@
-const e=require("./data-display/statistic.cjs"),t=require("./tables-BqZ4Zs6e.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a={up:`bg-success`,down:`bg-danger`,neutral:`bg-primary`},o=(0,n.memo)(()=>{let{summary:n,onSummaryItemClick:o}=t.Y(),{isOpen:s}=t.Z();return!s||!n||n.length===0?null:(0,i.jsx)(`div`,{"data-slot":`table-summary-bar`,className:`w-full overflow-x-auto px-2 pb-1`,children:(0,i.jsx)(`div`,{className:`grid gap-3`,style:{gridTemplateColumns:`repeat(auto-fill, minmax(200px, 240px))`},children:n.map(t=>{let n=a[t.trend??`neutral`],s=!!o;return(0,i.jsxs)(`div`,{className:(0,r.cn)(`flex flex-col overflow-hidden rounded border border-border bg-card shadow-card`,s&&`cursor-pointer transition-shadow hover:shadow-md`),onClick:s?()=>o(t):void 0,role:s?`button`:void 0,tabIndex:s?0:void 0,onKeyDown:s?e=>{(e.key===`Enter`||e.key===` `)&&o(t)}:void 0,children:[(0,i.jsx)(`div`,{className:(0,r.cn)(`h-0.75 w-full shrink-0`,n)}),(0,i.jsxs)(`div`,{className:`flex flex-1 flex-col gap-2 px-5 py-4`,children:[(0,i.jsx)(`span`,{className:`font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest`,children:t.label}),t.value!==null&&t.value!==void 0?(0,i.jsx)(e.Statistic,{value:t.value,prefix:t.prefix,suffix:t.suffix,precision:t.precision,trend:t.trend,size:`xl`,className:`font-bold`}):(0,i.jsx)(`span`,{className:`font-bold text-text-positive-strong text-xl tabular-nums`,children:`—`}),!!t.description&&(0,i.jsx)(`span`,{className:`text-text-positive-weak text-xs`,children:t.description})]})]},t.label)})})})});o.displayName=`UITableSummaryBar`,exports.UITableSummaryBar=o;
-//# sourceMappingURL=summary-bar-C08g8bb1.cjs.map
+const e=require("./data-display/statistic.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a={up:`bg-success`,down:`bg-danger`,neutral:`bg-primary`},o=(0,n.memo)(()=>{let{summary:n,onSummaryItemClick:o}=t.Y(),{isOpen:s}=t.Z();return!s||!n||n.length===0?null:(0,i.jsx)(`div`,{"data-slot":`table-summary-bar`,className:`w-full overflow-x-auto px-2 pb-1`,children:(0,i.jsx)(`div`,{className:`grid gap-3`,style:{gridTemplateColumns:`repeat(auto-fill, minmax(200px, 240px))`},children:n.map(t=>{let n=a[t.trend??`neutral`],s=!!o;return(0,i.jsxs)(`div`,{className:(0,r.cn)(`flex flex-col overflow-hidden rounded border border-border bg-card shadow-card`,s&&`cursor-pointer transition-shadow hover:shadow-md`),onClick:s?()=>o(t):void 0,role:s?`button`:void 0,tabIndex:s?0:void 0,onKeyDown:s?e=>{(e.key===`Enter`||e.key===` `)&&o(t)}:void 0,children:[(0,i.jsx)(`div`,{className:(0,r.cn)(`h-0.75 w-full shrink-0`,n)}),(0,i.jsxs)(`div`,{className:`flex flex-1 flex-col gap-2 px-5 py-4`,children:[(0,i.jsx)(`span`,{className:`font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest`,children:t.label}),t.value!==null&&t.value!==void 0?(0,i.jsx)(e.Statistic,{value:t.value,prefix:t.prefix,suffix:t.suffix,precision:t.precision,trend:t.trend,size:`xl`,className:`font-bold`}):(0,i.jsx)(`span`,{className:`font-bold text-text-positive-strong text-xl tabular-nums`,children:`—`}),!!t.description&&(0,i.jsx)(`span`,{className:`text-text-positive-weak text-xs`,children:t.description})]})]},t.label)})})})});o.displayName=`UITableSummaryBar`,exports.UITableSummaryBar=o;
+//# sourceMappingURL=summary-bar-D36n4fox.cjs.map

package/dist/{summary-bar-C08g8bb1.cjs.map → summary-bar-D36n4fox.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"summary-bar-C08g8bb1.cjs","names":["useUITableContext","useUITableSummaryContext","Statistic"],"sources":["../packages/components/features/tables/components/table/summary-bar.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Statistic } from '@/components/data-display/statistic';\nimport { useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport type { SummaryItem } from '../../types';\n\nconst trendAccent: Record<NonNullable<SummaryItem['trend']>, string> = {\n  up: 'bg-success',\n  down: 'bg-danger',\n  neutral: 'bg-primary',\n};\n\nexport const UITableSummaryBar = memo(() => {\n  const { summary, onSummaryItemClick } = useUITableContext();\n  const { isOpen } = useUITableSummaryContext();\n\n  if (!isOpen || !summary || summary.length === 0) return null;\n\n  return (\n    <div data-slot=\"table-summary-bar\" className=\"w-full overflow-x-auto px-2 pb-1\">\n      <div className=\"grid gap-3\" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 240px))' }}>\n        {summary.map(item => {\n          const accent = trendAccent[item.trend ?? 'neutral'];\n          const isClickable = !!onSummaryItemClick;\n\n          return (\n            <div\n              key={item.label}\n              className={cn(\n                'flex flex-col overflow-hidden rounded border border-border bg-card shadow-card',\n                isClickable && 'cursor-pointer transition-shadow hover:shadow-md'\n              )}\n              onClick={isClickable ? () => onSummaryItemClick(item) : undefined}\n              role={isClickable ? 'button' : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onKeyDown={\n                isClickable\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') onSummaryItemClick(item);\n                    }\n                  : undefined\n              }\n            >\n              {/* Coloured accent strip */}\n              <div className={cn('h-0.75 w-full shrink-0', accent)} />\n\n              <div className=\"flex flex-1 flex-col gap-2 px-5 py-4\">\n                {/* Label */}\n                <span className=\"font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest\">{item.label}</span>\n\n                {/* Value */}\n                {item.value !== null && item.value !== undefined ? (\n                  <Statistic\n                    value={item.value}\n                    prefix={item.prefix}\n                    suffix={item.suffix}\n                    precision={item.precision}\n                    trend={item.trend}\n                    size=\"xl\"\n                    className=\"font-bold\"\n                  />\n                ) : (\n                  <span className=\"font-bold text-text-positive-strong text-xl tabular-nums\">—</span>\n                )}\n\n                {/* Description */}\n                {!!item.description && <span className=\"text-text-positive-weak text-xs\">{item.description}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nUITableSummaryBar.displayName = 'UITableSummaryBar';\n"],"mappings":"qLASA,MAAM,EAAiE,CACrE,GAAI,aACJ,KAAM,YACN,QAAS,YACX,EAEa,GAAA,EAAA,EAAA,KAAA,KAA+B,CAC1C,GAAM,CAAE,UAAS,sBAAuBA,EAAAA,EAAkB,EACpD,CAAE,UAAWC,EAAAA,EAAyB,EAI5C,MAFI,CAAC,GAAU,CAAC,GAAW,EAAQ,SAAW,EAAU,MAGtD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,oBAAoB,UAAU,mCAC3C,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,EACjG,SAAA,EAAQ,IAAI,GAAQ,CACnB,IAAM,EAAS,EAAY,EAAK,OAAS,WACnC,EAAc,CAAC,CAAC,EAEtB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,iFACA,GAAe,kDACjB,EACA,QAAS,MAAoB,EAAmB,CAAI,EAAI,IAAA,GACxD,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,UACE,EACI,GAAK,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,MAAK,EAAmB,CAAI,CACjE,EACA,IAAA,GAdR,SAAA,EAkBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,yBAA0B,CAAM,CAAI,CAAA,GAEvD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,EAEE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8EAA+E,SAAA,EAAK,KAAY,CAAA,EAG/G,EAAK,QAAU,MAAQ,EAAK,QAAU,IAAA,IACrC,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,MAAO,EAAK,MACZ,OAAQ,EAAK,OACb,OAAQ,EAAK,OACb,UAAW,EAAK,UAChB,MAAO,EAAK,MACZ,KAAK,KACL,UAAU,WACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2DAA2D,SAAA,GAAO,CAAA,EAInF,CAAC,CAAC,EAAK,cAAe,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kCAAmC,SAAA,EAAK,WAAkB,CAAA,CAC9F,CACF,CAAA,CAAA,CAzCE,EAAA,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}
+{"version":3,"file":"summary-bar-D36n4fox.cjs","names":["useUITableContext","useUITableSummaryContext","Statistic"],"sources":["../packages/components/features/tables/components/table/summary-bar.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Statistic } from '@/components/data-display/statistic';\nimport { useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport type { SummaryItem } from '../../types';\n\nconst trendAccent: Record<NonNullable<SummaryItem['trend']>, string> = {\n  up: 'bg-success',\n  down: 'bg-danger',\n  neutral: 'bg-primary',\n};\n\nexport const UITableSummaryBar = memo(() => {\n  const { summary, onSummaryItemClick } = useUITableContext();\n  const { isOpen } = useUITableSummaryContext();\n\n  if (!isOpen || !summary || summary.length === 0) return null;\n\n  return (\n    <div data-slot=\"table-summary-bar\" className=\"w-full overflow-x-auto px-2 pb-1\">\n      <div className=\"grid gap-3\" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 240px))' }}>\n        {summary.map(item => {\n          const accent = trendAccent[item.trend ?? 'neutral'];\n          const isClickable = !!onSummaryItemClick;\n\n          return (\n            <div\n              key={item.label}\n              className={cn(\n                'flex flex-col overflow-hidden rounded border border-border bg-card shadow-card',\n                isClickable && 'cursor-pointer transition-shadow hover:shadow-md'\n              )}\n              onClick={isClickable ? () => onSummaryItemClick(item) : undefined}\n              role={isClickable ? 'button' : undefined}\n              tabIndex={isClickable ? 0 : undefined}\n              onKeyDown={\n                isClickable\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') onSummaryItemClick(item);\n                    }\n                  : undefined\n              }\n            >\n              {/* Coloured accent strip */}\n              <div className={cn('h-0.75 w-full shrink-0', accent)} />\n\n              <div className=\"flex flex-1 flex-col gap-2 px-5 py-4\">\n                {/* Label */}\n                <span className=\"font-semibold text-[11px] text-text-positive-weak uppercase tracking-widest\">{item.label}</span>\n\n                {/* Value */}\n                {item.value !== null && item.value !== undefined ? (\n                  <Statistic\n                    value={item.value}\n                    prefix={item.prefix}\n                    suffix={item.suffix}\n                    precision={item.precision}\n                    trend={item.trend}\n                    size=\"xl\"\n                    className=\"font-bold\"\n                  />\n                ) : (\n                  <span className=\"font-bold text-text-positive-strong text-xl tabular-nums\">—</span>\n                )}\n\n                {/* Description */}\n                {!!item.description && <span className=\"text-text-positive-weak text-xs\">{item.description}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nUITableSummaryBar.displayName = 'UITableSummaryBar';\n"],"mappings":"qLASA,MAAM,EAAiE,CACrE,GAAI,aACJ,KAAM,YACN,QAAS,YACX,EAEa,GAAA,EAAA,EAAA,KAAA,KAA+B,CAC1C,GAAM,CAAE,UAAS,sBAAuBA,EAAAA,EAAkB,EACpD,CAAE,UAAWC,EAAAA,EAAyB,EAI5C,MAFI,CAAC,GAAU,CAAC,GAAW,EAAQ,SAAW,EAAU,MAGtD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,oBAAoB,UAAU,mCAC3C,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,EACjG,SAAA,EAAQ,IAAI,GAAQ,CACnB,IAAM,EAAS,EAAY,EAAK,OAAS,WACnC,EAAc,CAAC,CAAC,EAEtB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,iFACA,GAAe,kDACjB,EACA,QAAS,MAAoB,EAAmB,CAAI,EAAI,IAAA,GACxD,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,UACE,EACI,GAAK,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,MAAK,EAAmB,CAAI,CACjE,EACA,IAAA,GAdR,SAAA,EAkBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,yBAA0B,CAAM,CAAI,CAAA,GAEvD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,EAEE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8EAA+E,SAAA,EAAK,KAAY,CAAA,EAG/G,EAAK,QAAU,MAAQ,EAAK,QAAU,IAAA,IACrC,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,MAAO,EAAK,MACZ,OAAQ,EAAK,OACb,OAAQ,EAAK,OACb,UAAW,EAAK,UAChB,MAAO,EAAK,MACZ,KAAK,KACL,UAAU,WACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2DAA2D,SAAA,GAAO,CAAA,EAInF,CAAC,CAAC,EAAK,cAAe,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kCAAmC,SAAA,EAAK,WAAkB,CAAA,CAC9F,CACF,CAAA,CAAA,CAzCE,EAAA,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}

package/dist/switch-field-CsI6eXJu.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-BiOihtxs.cjs");let t=require("@customafk/react-toolkit/utils"),n=require("react/jsx-runtime"),r=require("radix-ui");function i({className:e,...i}){return(0,n.jsx)(r.Switch.Root,{"data-slot":`switch`,className:(0,t.cn)(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...i,children:(0,n.jsx)(r.Switch.Thumb,{"data-slot":`switch-thumb`,className:(0,t.cn)(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const a=({label:t,description:r,helperText:a})=>{let o=e.rt();return(0,n.jsxs)(e.X,{className:`gap-y-4 px-4`,children:[(0,n.jsxs)(e.G,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[(0,n.jsxs)(e.K,{children:[(0,n.jsx)(e.tt,{className:`cursor-pointer`,children:(0,n.jsx)(`label`,{htmlFor:o.name,children:t})}),(0,n.jsx)(e.J,{children:r}),(0,n.jsx)(i,{id:o.name,checked:o.state.value??!1,className:`absolute top-1 right-1`,onBlur:o.handleBlur,onCheckedChange:o.handleChange})]}),(0,n.jsx)(e.$,{isShow:!!a,children:a})]}),(0,n.jsx)(e.et,{})]})};exports.SwitchField=a;
+//# sourceMappingURL=switch-field-CsI6eXJu.cjs.map

package/dist/{switch-field-yE4A6EoF.cjs.map → switch-field-CsI6eXJu.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"switch-field-yE4A6EoF.cjs","names":["SwitchPrimitive","useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldTitle","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/**\n * Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n *\n * @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n        'inline-flex h-5',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n\n        '-outline-offset-1 inset-shadow-2xs outline-1',\n\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:outline-primary-strong',\n\n        'data-[state=unchecked]:bg-muted-weak',\n        'data-[state=unchecked]:outline-border',\n\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'block size-4 bg-card shadow-xs',\n          'pointer-events-none rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n *\n * @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"notifications\">\n *   {() => (\n *     <SwitchField\n *       label=\"Enable notifications\"\n *       description=\"Receive email alerts for important events\"\n *       helperText=\"You can change this at any time\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n  const field = useTanStackFieldContext<boolean | null>();\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n        <FieldContent>\n          <FieldTitle className=\"cursor-pointer\">\n            <label htmlFor={field.name}>{label}</label>\n          </FieldTitle>\n          <FieldDescription>{description}</FieldDescription>\n          <Switch\n            id={field.name}\n            checked={field.state.value ?? false}\n            className=\"absolute top-1 right-1\"\n            onBlur={field.handleBlur}\n            onCheckedChange={field.handleChange}\n          />\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"uLAcA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,KAAjB,CACE,YAAU,SACV,WAAA,EAAA,EAAA,GAAA,CACE,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,MAAjB,CACE,YAAU,eACV,WAAA,EAAA,EAAA,GAAA,CACE,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQC,EAAAA,EAAwC,EAEtD,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,iBACpB,UAAA,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"switch-field-CsI6eXJu.cjs","names":["SwitchPrimitive","useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldTitle","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/**\n * Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n *\n * @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n        'inline-flex h-5',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n\n        '-outline-offset-1 inset-shadow-2xs outline-1',\n\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:outline-primary-strong',\n\n        'data-[state=unchecked]:bg-muted-weak',\n        'data-[state=unchecked]:outline-border',\n\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'block size-4 bg-card shadow-xs',\n          'pointer-events-none rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n *\n * @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"notifications\">\n *   {() => (\n *     <SwitchField\n *       label=\"Enable notifications\"\n *       description=\"Receive email alerts for important events\"\n *       helperText=\"You can change this at any time\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n  const field = useTanStackFieldContext<boolean | null>();\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n        <FieldContent>\n          <FieldTitle className=\"cursor-pointer\">\n            <label htmlFor={field.name}>{label}</label>\n          </FieldTitle>\n          <FieldDescription>{description}</FieldDescription>\n          <Switch\n            id={field.name}\n            checked={field.state.value ?? false}\n            className=\"absolute top-1 right-1\"\n            onBlur={field.handleBlur}\n            onCheckedChange={field.handleChange}\n          />\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qJAcA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,KAAjB,CACE,YAAU,SACV,WAAA,EAAA,EAAA,GAAA,CACE,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,MAAjB,CACE,YAAU,eACV,WAAA,EAAA,EAAA,GAAA,CACE,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQC,EAAAA,GAAwC,EAEtD,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAY,UAAU,iBACpB,UAAA,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/switch-field-D2SWDM1l.mjs

@@ -0,0 +1,2 @@
+import{$ as e,G as t,J as n,K as r,X as i,et as a,rt as o,tt as s}from"./tanstack-form-Do6xL2kv.mjs";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{Switch as d}from"radix-ui";function f({className:e,...t}){return l(d.Root,{"data-slot":`switch`,className:c(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...t,children:l(d.Thumb,{"data-slot":`switch-thumb`,className:c(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const p=({label:c,description:d,helperText:p})=>{let m=o();return u(i,{className:`gap-y-4 px-4`,children:[u(t,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[u(r,{children:[l(s,{className:`cursor-pointer`,children:l(`label`,{htmlFor:m.name,children:c})}),l(n,{children:d}),l(f,{id:m.name,checked:m.state.value??!1,className:`absolute top-1 right-1`,onBlur:m.handleBlur,onCheckedChange:m.handleChange})]}),l(e,{isShow:!!p,children:p})]}),l(a,{})]})};export{p as SwitchField};
+//# sourceMappingURL=switch-field-D2SWDM1l.mjs.map

package/dist/{switch-field-Cz4lDf1D.mjs.map → switch-field-D2SWDM1l.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"switch-field-Cz4lDf1D.mjs","names":["Switch","SwitchPrimitive","Switch"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/**\n * Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n *\n * @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n        'inline-flex h-5',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n\n        '-outline-offset-1 inset-shadow-2xs outline-1',\n\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:outline-primary-strong',\n\n        'data-[state=unchecked]:bg-muted-weak',\n        'data-[state=unchecked]:outline-border',\n\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'block size-4 bg-card shadow-xs',\n          'pointer-events-none rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n *\n * @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"notifications\">\n *   {() => (\n *     <SwitchField\n *       label=\"Enable notifications\"\n *       description=\"Receive email alerts for important events\"\n *       helperText=\"You can change this at any time\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n  const field = useTanStackFieldContext<boolean | null>();\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n        <FieldContent>\n          <FieldTitle className=\"cursor-pointer\">\n            <label htmlFor={field.name}>{label}</label>\n          </FieldTitle>\n          <FieldDescription>{description}</FieldDescription>\n          <Switch\n            id={field.name}\n            checked={field.state.value ?? false}\n            className=\"absolute top-1 right-1\"\n            onBlur={field.handleBlur}\n            onCheckedChange={field.handleChange}\n          />\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"iVAcA,SAASA,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACC,EAAgB,KAAjB,CACE,YAAU,SACV,UAAW,EACT,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,SAAA,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQ,EAAwC,EAEtD,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,UAAU,iBACpB,SAAA,EAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAACC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"switch-field-D2SWDM1l.mjs","names":["Switch","SwitchPrimitive","Switch"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/**\n * Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n *\n * @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n        'inline-flex h-5',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n\n        '-outline-offset-1 inset-shadow-2xs outline-1',\n\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:outline-primary-strong',\n\n        'data-[state=unchecked]:bg-muted-weak',\n        'data-[state=unchecked]:outline-border',\n\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'block size-4 bg-card shadow-xs',\n          'pointer-events-none rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n *\n * @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"notifications\">\n *   {() => (\n *     <SwitchField\n *       label=\"Enable notifications\"\n *       description=\"Receive email alerts for important events\"\n *       helperText=\"You can change this at any time\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n  const field = useTanStackFieldContext<boolean | null>();\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n        <FieldContent>\n          <FieldTitle className=\"cursor-pointer\">\n            <label htmlFor={field.name}>{label}</label>\n          </FieldTitle>\n          <FieldDescription>{description}</FieldDescription>\n          <Switch\n            id={field.name}\n            checked={field.state.value ?? false}\n            className=\"absolute top-1 right-1\"\n            onBlur={field.handleBlur}\n            onCheckedChange={field.handleChange}\n          />\n        </FieldContent>\n        <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6OAcA,SAASA,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACC,EAAgB,KAAjB,CACE,YAAU,SACV,UAAW,EACT,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,SAAA,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQ,EAAwC,EAEtD,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,UAAU,iBACpB,SAAA,EAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAACC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}