@customafk/lunas-ui 0.2.75 → 0.2.76

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

@@ -1 +1 @@
-{"version":3,"file":"simple-text-field-Cmmmci4R.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,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,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-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"}

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

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-AGwPfwiM.mjs";import{Label as t}from"./ui/label.mjs";import{Textarea as n}from"./ui/textarea.mjs";import{FieldError as r}from"./field-V2DoD8qL.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}=e(),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(t,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m||x,onBlur:y,onChange:C}),S&&o(r,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
-//# sourceMappingURL=simple-textarea-field-BDqw8ewE.mjs.map
+import{G as e}from"./tanstack-form-q9hDCc0Y.mjs";import{Label as t}from"./ui/label.mjs";import{Textarea as n}from"./ui/textarea.mjs";import{FieldError as r}from"./field-V2DoD8qL.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}=e(),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(t,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m||x,onBlur:y,onChange:C}),S&&o(r,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
+//# sourceMappingURL=simple-textarea-field-B22rT6zS.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-BDqw8ewE.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,iCAAf,CACG,GACC,EAAC,EAAD,CAAO,QAAS,WAAhB,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,8BAAqB,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-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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"simple-textarea-field-B0fOG7nh.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,iCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,WAAhB,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAAqB,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-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"}

package/dist/{skeleton-Ct4sYEKk.d.cts → skeleton-BL19ZqPB.d.cts}

@@ -15,10 +15,7 @@
  * </div>
  * ```
  */
-declare function Skeleton({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 //#endregion
 export { Skeleton as t };
-//# sourceMappingURL=skeleton-Ct4sYEKk.d.cts.map
+//# sourceMappingURL=skeleton-BL19ZqPB.d.cts.map

package/dist/{skeleton-Ct4sYEKk.d.mts → skeleton-BL19ZqPB.d.mts}

@@ -15,10 +15,7 @@
  * </div>
  * ```
  */
-declare function Skeleton({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 //#endregion
 export { Skeleton as t };
-//# sourceMappingURL=skeleton-Ct4sYEKk.d.mts.map
+//# sourceMappingURL=skeleton-BL19ZqPB.d.mts.map

package/dist/{slider-DwR1MhR8.d.cts → slider-KvzhtIbT.d.cts}

@@ -1,5 +1,4 @@
 import { Slider } from "radix-ui";
-
 //#region packages/components/ui/slider.d.ts
 /**
  * An accessible range slider supporting single-thumb, multi-thumb, and vertical orientations.
@@ -11,14 +10,7 @@ import { Slider } from "radix-ui";
  * <Slider defaultValue={[40]} min={0} max={100} step={5} />
  * ```
  */
-declare function Slider$1({
-  className,
-  defaultValue,
-  value,
-  min,
-  max,
-  ...props
-}: React.ComponentProps<typeof Slider.Root>): import("react").JSX.Element;
+declare function Slider$1({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof Slider.Root>): import("react").JSX.Element;
 //#endregion
 export { Slider$1 as t };
-//# sourceMappingURL=slider-DwR1MhR8.d.cts.map
+//# sourceMappingURL=slider-KvzhtIbT.d.cts.map

package/dist/{slider-DwR1MhR8.d.mts → slider-KvzhtIbT.d.mts}

@@ -1,5 +1,4 @@
 import { Slider } from "radix-ui";
-
 //#region packages/components/ui/slider.d.ts
 /**
  * An accessible range slider supporting single-thumb, multi-thumb, and vertical orientations.
@@ -11,14 +10,7 @@ import { Slider } from "radix-ui";
  * <Slider defaultValue={[40]} min={0} max={100} step={5} />
  * ```
  */
-declare function Slider$1({
-  className,
-  defaultValue,
-  value,
-  min,
-  max,
-  ...props
-}: React.ComponentProps<typeof Slider.Root>): import("react").JSX.Element;
+declare function Slider$1({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof Slider.Root>): import("react").JSX.Element;
 //#endregion
 export { Slider$1 as t };
-//# sourceMappingURL=slider-DwR1MhR8.d.mts.map
+//# sourceMappingURL=slider-KvzhtIbT.d.mts.map

package/dist/{sonner-B6LxJMYT.d.mts → sonner-C-sM3xU2.d.mts}

@@ -1,5 +1,4 @@
 import { toast as toast$1 } from "sonner";
-
 //#region packages/components/ui/sonner.d.ts
 /**
  * Global toast notification container — mount once near the root of your app; use the exported `toast` helper to trigger toasts from anywhere.
@@ -19,4 +18,4 @@ import { toast as toast$1 } from "sonner";
 declare const Toaster$1: () => import("react").JSX.Element;
 //#endregion
 export { toast$1 as n, Toaster$1 as t };
-//# sourceMappingURL=sonner-B6LxJMYT.d.mts.map
+//# sourceMappingURL=sonner-C-sM3xU2.d.mts.map

package/dist/{sonner-BcNgR0GP.d.cts → sonner-D-rrTnjn.d.cts}

@@ -1,5 +1,4 @@
 import { toast } from "sonner";
-
 //#region packages/components/ui/sonner.d.ts
 /**
  * Global toast notification container — mount once near the root of your app; use the exported `toast` helper to trigger toasts from anywhere.
@@ -19,4 +18,4 @@ import { toast } from "sonner";
 declare const Toaster: () => import("react").JSX.Element;
 //#endregion
 export { toast as n, Toaster as t };
-//# sourceMappingURL=sonner-BcNgR0GP.d.cts.map
+//# sourceMappingURL=sonner-D-rrTnjn.d.cts.map

package/dist/sparkline-chart-TbGzakUl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline-chart-TbGzakUl.mjs","names":[],"sources":["../packages/components/features/charts/components/sparkline-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Area, AreaChart, Line, LineChart, ResponsiveContainer } from 'recharts';\nimport type { ChartTrend } from '../types';\n\nconst TREND_COLORS: Record<ChartTrend, string> = {\n  up: 'var(--success)',\n  down: 'var(--danger)',\n  neutral: 'var(--chart-1)',\n};\n\nexport type SparklineChartProps = {\n  data: number[] | Array<{ value: number }>;\n  /** Render style. Defaults to `'area'`. */\n  type?: 'line' | 'area';\n  /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */\n  trend?: ChartTrend;\n  /** Explicit series color; overrides `trend`. */\n  color?: string;\n  /** Fixed height in px. Defaults to `40`. */\n  height?: number;\n  animate?: boolean;\n  className?: string;\n};\n\n/**\n * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.\n *\n * @example\n * ```tsx\n * import { SparklineChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend=\"up\" />\n * ```\n */\nexport const SparklineChart = ({ data, type = 'area', trend = 'neutral', color, height = 40, animate = true, className }: SparklineChartProps) => {\n  const gradientId = useId();\n  const seriesColor = color || TREND_COLORS[trend];\n\n  const chartData = useMemo(() => data.map(point => (typeof point === 'number' ? { value: point } : point)), [data]);\n\n  const margin = { top: 2, right: 0, bottom: 2, left: 0 };\n\n  return (\n    <div data-slot=\"sparkline-chart\" className={cn('w-full', className)} style={{ height }}>\n      <ResponsiveContainer>\n        {type === 'line' ? (\n          <LineChart data={chartData} margin={margin}>\n            <Line type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n          </LineChart>\n        ) : (\n          <AreaChart data={chartData} margin={margin}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"5%\" stopColor={seriesColor} stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor={seriesColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} fill={`url(#${gradientId})`} isAnimationActive={animate} />\n          </AreaChart>\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n};\n"],"mappings":"kPASA,MAAM,EAA2C,CAC/C,GAAI,iBACJ,KAAM,gBACN,QAAS,gBACX,EA0Ba,GAAkB,CAAE,OAAM,OAAO,OAAQ,QAAQ,UAAW,QAAO,SAAS,GAAI,UAAU,GAAM,eAAqC,CAChJ,IAAM,EAAa,EAAM,EACnB,EAAc,GAAS,EAAa,GAEpC,EAAY,MAAc,EAAK,IAAI,GAAU,OAAO,GAAU,SAAW,CAAE,MAAO,CAAM,EAAI,CAAM,EAAG,CAAC,CAAI,CAAC,EAE3G,EAAS,CAAE,IAAK,EAAG,MAAO,EAAG,OAAQ,EAAG,KAAM,CAAE,EAEtD,OACE,EAAC,MAAD,CAAK,YAAU,kBAAkB,UAAW,EAAG,SAAU,CAAS,EAAG,MAAO,CAAE,QAAO,WACnF,EAAC,EAAD,CAAA,SACG,IAAS,OACR,EAAC,EAAD,CAAW,KAAM,EAAmB,kBAClC,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,CAC1G,CAAA,EAEX,EAAC,EAAD,CAAW,KAAM,EAAmB,kBAApC,CACE,EAAC,OAAD,CAAA,SACE,EAAC,iBAAD,CAAgB,GAAI,EAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAxD,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAa,YAAa,EAAM,CAAA,EAC7D,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAa,YAAa,GAAO,CAAA,CACjD,GACZ,CAAA,EACN,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,KAAM,QAAQ,EAAW,GAAI,kBAAmB,CAAU,CAAA,CAC3H,GAEM,CAAA,CAClB,CAAA,CAET"}
+{"version":3,"file":"sparkline-chart-TbGzakUl.mjs","names":[],"sources":["../packages/components/features/charts/components/sparkline-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Area, AreaChart, Line, LineChart, ResponsiveContainer } from 'recharts';\nimport type { ChartTrend } from '../types';\n\nconst TREND_COLORS: Record<ChartTrend, string> = {\n  up: 'var(--success)',\n  down: 'var(--danger)',\n  neutral: 'var(--chart-1)',\n};\n\nexport type SparklineChartProps = {\n  data: number[] | Array<{ value: number }>;\n  /** Render style. Defaults to `'area'`. */\n  type?: 'line' | 'area';\n  /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */\n  trend?: ChartTrend;\n  /** Explicit series color; overrides `trend`. */\n  color?: string;\n  /** Fixed height in px. Defaults to `40`. */\n  height?: number;\n  animate?: boolean;\n  className?: string;\n};\n\n/**\n * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.\n *\n * @example\n * ```tsx\n * import { SparklineChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend=\"up\" />\n * ```\n */\nexport const SparklineChart = ({ data, type = 'area', trend = 'neutral', color, height = 40, animate = true, className }: SparklineChartProps) => {\n  const gradientId = useId();\n  const seriesColor = color || TREND_COLORS[trend];\n\n  const chartData = useMemo(() => data.map(point => (typeof point === 'number' ? { value: point } : point)), [data]);\n\n  const margin = { top: 2, right: 0, bottom: 2, left: 0 };\n\n  return (\n    <div data-slot=\"sparkline-chart\" className={cn('w-full', className)} style={{ height }}>\n      <ResponsiveContainer>\n        {type === 'line' ? (\n          <LineChart data={chartData} margin={margin}>\n            <Line type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n          </LineChart>\n        ) : (\n          <AreaChart data={chartData} margin={margin}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"5%\" stopColor={seriesColor} stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor={seriesColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} fill={`url(#${gradientId})`} isAnimationActive={animate} />\n          </AreaChart>\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n};\n"],"mappings":"kPASA,MAAM,EAA2C,CAC/C,GAAI,iBACJ,KAAM,gBACN,QAAS,gBACX,EA0Ba,GAAkB,CAAE,OAAM,OAAO,OAAQ,QAAQ,UAAW,QAAO,SAAS,GAAI,UAAU,GAAM,eAAqC,CAChJ,IAAM,EAAa,EAAM,EACnB,EAAc,GAAS,EAAa,GAEpC,EAAY,MAAc,EAAK,IAAI,GAAU,OAAO,GAAU,SAAW,CAAE,MAAO,CAAM,EAAI,CAAM,EAAG,CAAC,CAAI,CAAC,EAE3G,EAAS,CAAE,IAAK,EAAG,MAAO,EAAG,OAAQ,EAAG,KAAM,CAAE,EAEtD,OACE,EAAC,MAAD,CAAK,YAAU,kBAAkB,UAAW,EAAG,SAAU,CAAS,EAAG,MAAO,CAAE,QAAO,EACnF,SAAA,EAAC,EAAD,CAAA,SACG,IAAS,OACR,EAAC,EAAD,CAAW,KAAM,EAAmB,SAClC,SAAA,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,CAC1G,CAAA,EAEX,EAAC,EAAD,CAAW,KAAM,EAAmB,SAApC,SAAA,CACE,EAAC,OAAD,CAAA,SACE,EAAC,iBAAD,CAAgB,GAAI,EAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAxD,SAAA,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAa,YAAa,EAAM,CAAA,EAC7D,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAa,YAAa,GAAO,CAAA,CACjD,CACZ,CAAA,CAAA,CAAA,EACN,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,KAAM,QAAQ,EAAW,GAAI,kBAAmB,CAAU,CAAA,CAC3H,CAEM,CAAA,CAAA,CAAA,CAClB,CAAA,CAET"}

package/dist/sparkline-chart-sPqaJHep.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline-chart-sPqaJHep.cjs","names":["ResponsiveContainer","LineChart","Line","AreaChart","Area"],"sources":["../packages/components/features/charts/components/sparkline-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Area, AreaChart, Line, LineChart, ResponsiveContainer } from 'recharts';\nimport type { ChartTrend } from '../types';\n\nconst TREND_COLORS: Record<ChartTrend, string> = {\n  up: 'var(--success)',\n  down: 'var(--danger)',\n  neutral: 'var(--chart-1)',\n};\n\nexport type SparklineChartProps = {\n  data: number[] | Array<{ value: number }>;\n  /** Render style. Defaults to `'area'`. */\n  type?: 'line' | 'area';\n  /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */\n  trend?: ChartTrend;\n  /** Explicit series color; overrides `trend`. */\n  color?: string;\n  /** Fixed height in px. Defaults to `40`. */\n  height?: number;\n  animate?: boolean;\n  className?: string;\n};\n\n/**\n * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.\n *\n * @example\n * ```tsx\n * import { SparklineChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend=\"up\" />\n * ```\n */\nexport const SparklineChart = ({ data, type = 'area', trend = 'neutral', color, height = 40, animate = true, className }: SparklineChartProps) => {\n  const gradientId = useId();\n  const seriesColor = color || TREND_COLORS[trend];\n\n  const chartData = useMemo(() => data.map(point => (typeof point === 'number' ? { value: point } : point)), [data]);\n\n  const margin = { top: 2, right: 0, bottom: 2, left: 0 };\n\n  return (\n    <div data-slot=\"sparkline-chart\" className={cn('w-full', className)} style={{ height }}>\n      <ResponsiveContainer>\n        {type === 'line' ? (\n          <LineChart data={chartData} margin={margin}>\n            <Line type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n          </LineChart>\n        ) : (\n          <AreaChart data={chartData} margin={margin}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"5%\" stopColor={seriesColor} stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor={seriesColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} fill={`url(#${gradientId})`} isAnimationActive={animate} />\n          </AreaChart>\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n};\n"],"mappings":"wHASA,MAAM,EAA2C,CAC/C,GAAI,iBACJ,KAAM,gBACN,QAAS,gBACX,EA0Ba,GAAkB,CAAE,OAAM,OAAO,OAAQ,QAAQ,UAAW,QAAO,SAAS,GAAI,UAAU,GAAM,eAAqC,CAChJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAmB,EACnB,EAAc,GAAS,EAAa,GAEpC,GAAA,EAAA,EAAA,QAAA,KAA0B,EAAK,IAAI,GAAU,OAAO,GAAU,SAAW,CAAE,MAAO,CAAM,EAAI,CAAM,EAAG,CAAC,CAAI,CAAC,EAE3G,EAAS,CAAE,IAAK,EAAG,MAAO,EAAG,OAAQ,EAAG,KAAM,CAAE,EAEtD,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EAAG,MAAO,CAAE,QAAO,YACnF,EAAA,EAAA,IAAA,CAACA,EAAAA,oBAAD,CAAA,SACG,IAAS,QACR,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,EAAmB,mBAClC,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,CAC1G,CAAA,GAEX,EAAA,EAAA,KAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,EAAmB,kBAApC,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,iBAAD,CAAgB,GAAI,EAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAxD,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAa,YAAa,EAAM,CAAA,GAC7D,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAa,YAAa,GAAO,CAAA,CACjD,GACZ,CAAA,GACN,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,KAAM,QAAQ,EAAW,GAAI,kBAAmB,CAAU,CAAA,CAC3H,GAEM,CAAA,CAClB,CAAA,CAET"}
+{"version":3,"file":"sparkline-chart-sPqaJHep.cjs","names":["ResponsiveContainer","LineChart","Line","AreaChart","Area"],"sources":["../packages/components/features/charts/components/sparkline-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Area, AreaChart, Line, LineChart, ResponsiveContainer } from 'recharts';\nimport type { ChartTrend } from '../types';\n\nconst TREND_COLORS: Record<ChartTrend, string> = {\n  up: 'var(--success)',\n  down: 'var(--danger)',\n  neutral: 'var(--chart-1)',\n};\n\nexport type SparklineChartProps = {\n  data: number[] | Array<{ value: number }>;\n  /** Render style. Defaults to `'area'`. */\n  type?: 'line' | 'area';\n  /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */\n  trend?: ChartTrend;\n  /** Explicit series color; overrides `trend`. */\n  color?: string;\n  /** Fixed height in px. Defaults to `40`. */\n  height?: number;\n  animate?: boolean;\n  className?: string;\n};\n\n/**\n * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.\n *\n * @example\n * ```tsx\n * import { SparklineChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend=\"up\" />\n * ```\n */\nexport const SparklineChart = ({ data, type = 'area', trend = 'neutral', color, height = 40, animate = true, className }: SparklineChartProps) => {\n  const gradientId = useId();\n  const seriesColor = color || TREND_COLORS[trend];\n\n  const chartData = useMemo(() => data.map(point => (typeof point === 'number' ? { value: point } : point)), [data]);\n\n  const margin = { top: 2, right: 0, bottom: 2, left: 0 };\n\n  return (\n    <div data-slot=\"sparkline-chart\" className={cn('w-full', className)} style={{ height }}>\n      <ResponsiveContainer>\n        {type === 'line' ? (\n          <LineChart data={chartData} margin={margin}>\n            <Line type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n          </LineChart>\n        ) : (\n          <AreaChart data={chartData} margin={margin}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"5%\" stopColor={seriesColor} stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor={seriesColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} fill={`url(#${gradientId})`} isAnimationActive={animate} />\n          </AreaChart>\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n};\n"],"mappings":"wHASA,MAAM,EAA2C,CAC/C,GAAI,iBACJ,KAAM,gBACN,QAAS,gBACX,EA0Ba,GAAkB,CAAE,OAAM,OAAO,OAAQ,QAAQ,UAAW,QAAO,SAAS,GAAI,UAAU,GAAM,eAAqC,CAChJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAmB,EACnB,EAAc,GAAS,EAAa,GAEpC,GAAA,EAAA,EAAA,QAAA,KAA0B,EAAK,IAAI,GAAU,OAAO,GAAU,SAAW,CAAE,MAAO,CAAM,EAAI,CAAM,EAAG,CAAC,CAAI,CAAC,EAE3G,EAAS,CAAE,IAAK,EAAG,MAAO,EAAG,OAAQ,EAAG,KAAM,CAAE,EAEtD,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EAAG,MAAO,CAAE,QAAO,EACnF,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,oBAAD,CAAA,SACG,IAAS,QACR,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,EAAmB,SAClC,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,CAC1G,CAAA,GAEX,EAAA,EAAA,KAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,EAAmB,SAApC,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,iBAAD,CAAgB,GAAI,EAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAxD,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAa,YAAa,EAAM,CAAA,GAC7D,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAa,YAAa,GAAO,CAAA,CACjD,CACZ,CAAA,CAAA,CAAA,GACN,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAa,YAAa,EAAG,KAAM,QAAQ,EAAW,GAAI,kBAAmB,CAAU,CAAA,CAC3H,CAEM,CAAA,CAAA,CAAA,CAClB,CAAA,CAET"}

package/dist/{spinner-CXuqcoB5.d.cts → spinner-Cz20qsxS.d.cts}

@@ -13,10 +13,7 @@
  * </Button>
  * ```
  */
-declare function Spinner({
-  className,
-  ...props
-}: React.ComponentProps<'svg'>): import("react").JSX.Element;
+declare function Spinner({ className, ...props }: React.ComponentProps<'svg'>): import("react").JSX.Element;
 //#endregion
 export { Spinner as t };
-//# sourceMappingURL=spinner-CXuqcoB5.d.cts.map
+//# sourceMappingURL=spinner-Cz20qsxS.d.cts.map

package/dist/{spinner-CXuqcoB5.d.mts → spinner-Cz20qsxS.d.mts}

@@ -13,10 +13,7 @@
  * </Button>
  * ```
  */
-declare function Spinner({
-  className,
-  ...props
-}: React.ComponentProps<'svg'>): import("react").JSX.Element;
+declare function Spinner({ className, ...props }: React.ComponentProps<'svg'>): import("react").JSX.Element;
 //#endregion
 export { Spinner as t };
-//# sourceMappingURL=spinner-CXuqcoB5.d.mts.map
+//# sourceMappingURL=spinner-Cz20qsxS.d.mts.map

package/dist/stacked-area-chart-DyxY96_l.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stacked-area-chart-DyxY96_l.cjs","names":["toDateLabel","ChartContainer","getChartColor","AreaChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/stacked-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type StackedAreaChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** One entry per stacked category. */\n  series: ChartSeries[];\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A stacked area chart for cumulative composition over time — e.g. revenue by channel, traffic\n * by source. Unlike `RevenueAreaChart` (a single series plus one comparison overlay), every\n * series here stacks to show the total alongside each category's contribution.\n *\n * @example\n * ```tsx\n * import { StackedAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <StackedAreaChart\n *   data={[{ date: '2026-06-01', direct: 4200, organic: 3100, paid: 1800 }]}\n *   series={[\n *     { key: 'direct', label: 'Direct' },\n *     { key: 'organic', label: 'Organic' },\n *     { key: 'paid', label: 'Paid' },\n *   ]}\n * />\n * ```\n */\nexport const StackedAreaChart = ({\n  data,\n  series,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: StackedAreaChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => Object.fromEntries(series.map((item, index) => [item.key, { label: item.label, color: item.color || getChartColor(index) }])),\n    [series]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"stacked-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={value => valueFormatter(Number(value))}\n            />\n          }\n        />\n        {series.map((item, index) => {\n          const color = item.color || getChartColor(index);\n          return (\n            <Area key={item.key} type=\"natural\" dataKey={item.key} stackId=\"stack\" stroke={color} fill={color} fillOpacity={0.35} isAnimationActive={animate} />\n          );\n        })}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAyCA,MAAa,GAAoB,CAC/B,OACA,SACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgBA,EAAAA,YAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,aAQE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,qBACV,QAAA,EAAA,EAAA,QAAA,KAPI,OAAO,YAAY,EAAO,KAAK,EAAM,IAAU,CAAC,EAAK,IAAK,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,OAASC,EAAAA,cAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EAClI,CAAC,CAAM,CAMQ,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,UAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAxE,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,EACA,EAAO,KAAK,EAAM,IAAU,CAC3B,IAAM,EAAQ,EAAK,OAASN,EAAAA,cAAc,CAAK,EAC/C,OACE,EAAA,EAAA,IAAA,CAACO,EAAAA,KAAD,CAAqB,KAAK,UAAU,QAAS,EAAK,IAAK,QAAQ,QAAQ,OAAQ,EAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,EAAxI,EAAK,GAAmI,CAEvJ,CAAC,EACA,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA"}
+{"version":3,"file":"stacked-area-chart-DyxY96_l.cjs","names":["toDateLabel","ChartContainer","getChartColor","AreaChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/stacked-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type StackedAreaChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** One entry per stacked category. */\n  series: ChartSeries[];\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A stacked area chart for cumulative composition over time — e.g. revenue by channel, traffic\n * by source. Unlike `RevenueAreaChart` (a single series plus one comparison overlay), every\n * series here stacks to show the total alongside each category's contribution.\n *\n * @example\n * ```tsx\n * import { StackedAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <StackedAreaChart\n *   data={[{ date: '2026-06-01', direct: 4200, organic: 3100, paid: 1800 }]}\n *   series={[\n *     { key: 'direct', label: 'Direct' },\n *     { key: 'organic', label: 'Organic' },\n *     { key: 'paid', label: 'Paid' },\n *   ]}\n * />\n * ```\n */\nexport const StackedAreaChart = ({\n  data,\n  series,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: StackedAreaChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => Object.fromEntries(series.map((item, index) => [item.key, { label: item.label, color: item.color || getChartColor(index) }])),\n    [series]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"stacked-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={value => valueFormatter(Number(value))}\n            />\n          }\n        />\n        {series.map((item, index) => {\n          const color = item.color || getChartColor(index);\n          return (\n            <Area key={item.key} type=\"natural\" dataKey={item.key} stackId=\"stack\" stroke={color} fill={color} fillOpacity={0.35} isAnimationActive={animate} />\n          );\n        })}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAyCA,MAAa,GAAoB,CAC/B,OACA,SACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgBA,EAAAA,YAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,aAQE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,qBACV,QAAA,EAAA,EAAA,QAAA,KAPI,OAAO,YAAY,EAAO,KAAK,EAAM,IAAU,CAAC,EAAK,IAAK,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,OAASC,EAAAA,cAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EAClI,CAAC,CAAM,CAMQ,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,UAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAxE,SAAA,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,EACA,EAAO,KAAK,EAAM,IAAU,CAC3B,IAAM,EAAQ,EAAK,OAASN,EAAAA,cAAc,CAAK,EAC/C,OACE,EAAA,EAAA,IAAA,CAACO,EAAAA,KAAD,CAAqB,KAAK,UAAU,QAAS,EAAK,IAAK,QAAQ,QAAQ,OAAQ,EAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,EAAxI,EAAK,GAAmI,CAEvJ,CAAC,EACA,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA"}

package/dist/stacked-area-chart-UIWIxTmq.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"stacked-area-chart-UIWIxTmq.mjs","names":[],"sources":["../packages/components/features/charts/components/stacked-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type StackedAreaChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** One entry per stacked category. */\n  series: ChartSeries[];\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A stacked area chart for cumulative composition over time — e.g. revenue by channel, traffic\n * by source. Unlike `RevenueAreaChart` (a single series plus one comparison overlay), every\n * series here stacks to show the total alongside each category's contribution.\n *\n * @example\n * ```tsx\n * import { StackedAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <StackedAreaChart\n *   data={[{ date: '2026-06-01', direct: 4200, organic: 3100, paid: 1800 }]}\n *   series={[\n *     { key: 'direct', label: 'Direct' },\n *     { key: 'organic', label: 'Organic' },\n *     { key: 'paid', label: 'Paid' },\n *   ]}\n * />\n * ```\n */\nexport const StackedAreaChart = ({\n  data,\n  series,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: StackedAreaChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => Object.fromEntries(series.map((item, index) => [item.key, { label: item.label, color: item.color || getChartColor(index) }])),\n    [series]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"stacked-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={value => valueFormatter(Number(value))}\n            />\n          }\n        />\n        {series.map((item, index) => {\n          const color = item.color || getChartColor(index);\n          return (\n            <Area key={item.key} type=\"natural\" dataKey={item.key} stackId=\"stack\" stroke={color} fill={color} fillOpacity={0.35} isAnimationActive={animate} />\n          );\n        })}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"+aAyCA,MAAa,GAAoB,CAC/B,OACA,SACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgB,EAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YAQE,EAAC,EAAD,CACE,YAAU,qBACV,OARW,MACP,OAAO,YAAY,EAAO,KAAK,EAAM,IAAU,CAAC,EAAK,IAAK,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,OAAS,EAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EAClI,CAAC,CAAM,CAMQ,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAxE,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,EACA,EAAO,KAAK,EAAM,IAAU,CAC3B,IAAM,EAAQ,EAAK,OAAS,EAAc,CAAK,EAC/C,OACE,EAAC,EAAD,CAAqB,KAAK,UAAU,QAAS,EAAK,IAAK,QAAQ,QAAQ,OAAQ,EAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,EAAxI,EAAK,GAAmI,CAEvJ,CAAC,EACA,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA"}
+{"version":3,"file":"stacked-area-chart-UIWIxTmq.mjs","names":[],"sources":["../packages/components/features/charts/components/stacked-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type StackedAreaChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** One entry per stacked category. */\n  series: ChartSeries[];\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A stacked area chart for cumulative composition over time — e.g. revenue by channel, traffic\n * by source. Unlike `RevenueAreaChart` (a single series plus one comparison overlay), every\n * series here stacks to show the total alongside each category's contribution.\n *\n * @example\n * ```tsx\n * import { StackedAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <StackedAreaChart\n *   data={[{ date: '2026-06-01', direct: 4200, organic: 3100, paid: 1800 }]}\n *   series={[\n *     { key: 'direct', label: 'Direct' },\n *     { key: 'organic', label: 'Organic' },\n *     { key: 'paid', label: 'Paid' },\n *   ]}\n * />\n * ```\n */\nexport const StackedAreaChart = ({\n  data,\n  series,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: StackedAreaChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => Object.fromEntries(series.map((item, index) => [item.key, { label: item.label, color: item.color || getChartColor(index) }])),\n    [series]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"stacked-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={value => valueFormatter(Number(value))}\n            />\n          }\n        />\n        {series.map((item, index) => {\n          const color = item.color || getChartColor(index);\n          return (\n            <Area key={item.key} type=\"natural\" dataKey={item.key} stackId=\"stack\" stroke={color} fill={color} fillOpacity={0.35} isAnimationActive={animate} />\n          );\n        })}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"+aAyCA,MAAa,GAAoB,CAC/B,OACA,SACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgB,EAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YAQE,EAAC,EAAD,CACE,YAAU,qBACV,OARW,MACP,OAAO,YAAY,EAAO,KAAK,EAAM,IAAU,CAAC,EAAK,IAAK,CAAE,MAAO,EAAK,MAAO,MAAO,EAAK,OAAS,EAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EAClI,CAAC,CAAM,CAMQ,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAxE,SAAA,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,EACA,EAAO,KAAK,EAAM,IAAU,CAC3B,IAAM,EAAQ,EAAK,OAAS,EAAc,CAAK,EAC/C,OACE,EAAC,EAAD,CAAqB,KAAK,UAAU,QAAS,EAAK,IAAK,QAAQ,QAAQ,OAAQ,EAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,EAAxI,EAAK,GAAmI,CAEvJ,CAAC,EACA,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA"}

package/dist/statistic-Bpif8p8R.d.cts

@@ -0,0 +1,42 @@
+import { VariantProps } from "class-variance-authority";
+//#region packages/components/data-display/statistic.d.ts
+declare const statisticVariants: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  trend?: "neutral" | "up" | "down" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StatisticProps = VariantProps<typeof statisticVariants> & {
+  /** Character used to separate the decimal part. Defaults to `'.'`. */
+  decimalSeparator?: string;
+  /** Character used to separate thousands groups. Defaults to `','`. */
+  groupSeparator?: string;
+  /** Optional node rendered before the numeric value (e.g. a currency symbol). */
+  prefix?: React.ReactNode;
+  /** Optional node rendered after the numeric value (e.g. a unit label). */
+  suffix?: React.ReactNode;
+  /** Number of decimal digits to display; omit to show all significant digits. */
+  precision?: number;
+  /** Rounding strategy applied before formatting. Defaults to `'round'`. */
+  roundingMode?: 'round' | 'floor' | 'ceil';
+  /** When `true`, pads the decimal part with trailing zeros up to `precision`. Defaults to `false`. */
+  showTrailingZeros?: boolean;
+  /** The numeric (or numeric-string) value to format and display. */
+  value: number | string;
+  /** Additional CSS classes applied to the wrapper element. */
+  className?: string;
+  /** Colour trend indicator: `'neutral'` (default), `'up'` (green), or `'down'` (red). */
+  trend?: 'neutral' | 'up' | 'down';
+};
+/**
+ * A memoised numeric display component with locale-aware formatting, optional prefix/suffix, trend colouring, and configurable rounding.
+ *
+ * @example
+ * ```tsx
+ * import { Statistic } from '@customafk/lunas-ui/data-display/statistic';
+ *
+ * <Statistic value={1234567.89} precision={2} prefix="$" trend="up" size="lg" />
+ * ```
+ */
+declare const Statistic: import("react").MemoExoticComponent<({ decimalSeparator, groupSeparator, prefix: Prefix, suffix: Suffix, precision, roundingMode, showTrailingZeros, size, trend, value, className }: StatisticProps) => import("react").JSX.Element>;
+//#endregion
+export { StatisticProps as n, Statistic as t };
+//# sourceMappingURL=statistic-Bpif8p8R.d.cts.map

package/dist/statistic-Bpif8p8R.d.mts

@@ -0,0 +1,42 @@
+import { VariantProps } from "class-variance-authority";
+//#region packages/components/data-display/statistic.d.ts
+declare const statisticVariants: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  trend?: "neutral" | "up" | "down" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StatisticProps = VariantProps<typeof statisticVariants> & {
+  /** Character used to separate the decimal part. Defaults to `'.'`. */
+  decimalSeparator?: string;
+  /** Character used to separate thousands groups. Defaults to `','`. */
+  groupSeparator?: string;
+  /** Optional node rendered before the numeric value (e.g. a currency symbol). */
+  prefix?: React.ReactNode;
+  /** Optional node rendered after the numeric value (e.g. a unit label). */
+  suffix?: React.ReactNode;
+  /** Number of decimal digits to display; omit to show all significant digits. */
+  precision?: number;
+  /** Rounding strategy applied before formatting. Defaults to `'round'`. */
+  roundingMode?: 'round' | 'floor' | 'ceil';
+  /** When `true`, pads the decimal part with trailing zeros up to `precision`. Defaults to `false`. */
+  showTrailingZeros?: boolean;
+  /** The numeric (or numeric-string) value to format and display. */
+  value: number | string;
+  /** Additional CSS classes applied to the wrapper element. */
+  className?: string;
+  /** Colour trend indicator: `'neutral'` (default), `'up'` (green), or `'down'` (red). */
+  trend?: 'neutral' | 'up' | 'down';
+};
+/**
+ * A memoised numeric display component with locale-aware formatting, optional prefix/suffix, trend colouring, and configurable rounding.
+ *
+ * @example
+ * ```tsx
+ * import { Statistic } from '@customafk/lunas-ui/data-display/statistic';
+ *
+ * <Statistic value={1234567.89} precision={2} prefix="$" trend="up" size="lg" />
+ * ```
+ */
+declare const Statistic: import("react").MemoExoticComponent<({ decimalSeparator, groupSeparator, prefix: Prefix, suffix: Suffix, precision, roundingMode, showTrailingZeros, size, trend, value, className }: StatisticProps) => import("react").JSX.Element>;
+//#endregion
+export { StatisticProps as n, Statistic as t };
+//# sourceMappingURL=statistic-Bpif8p8R.d.mts.map

package/dist/statistic-ClkqqDfk.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"statistic-ClkqqDfk.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};\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 */\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  }: 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('en-US', 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    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 text-lg text-text-positive 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        )}\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,EAkCa,EAA0B,GACpC,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,KACG,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,EAMrD,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,EAC5D,EAAC,EAAD,CAAe,CAAA,EAItB,EAAC,EAAD,CACE,QAAQ,OACR,UAAW,EACT,sDACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,SACnB,WATF,CAWG,EACD,EAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}
+{"version":3,"file":"statistic-ClkqqDfk.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};\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 */\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  }: 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('en-US', 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    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 text-lg text-text-positive 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        )}\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,EAkCa,EAA0B,GACpC,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,KACG,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,EAMrD,OAJI,IAAwB,KAAO,IAAwB,OAAS,CAAC,EAC5D,EAAC,EAAD,CAAe,CAAA,EAItB,EAAC,EAAD,CACE,QAAQ,OACR,UAAW,EACT,sDACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,SACnB,EATF,SAAA,CAWG,EACD,EAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}

package/dist/statistic-LL4uHlRb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"statistic-LL4uHlRb.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};\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 */\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  }: 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('en-US', 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    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 text-lg text-text-positive 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        )}\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,EAkCa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,KACG,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,EAMrD,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,sDACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,SACnB,WATF,CAWG,GACD,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}
+{"version":3,"file":"statistic-LL4uHlRb.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};\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 */\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  }: 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('en-US', 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    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 text-lg text-text-positive 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        )}\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,EAkCa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,mBAAmB,IACnB,iBAAiB,IACjB,OAAQ,EACR,OAAQ,EACR,YACA,eAAe,QACf,oBAAoB,GACpB,OAAO,KACP,QAAQ,KACG,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,EAMrD,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,sDACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,SACnB,EATF,SAAA,CAWG,GACD,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAuB,CAAA,EAC1B,CACG,GAEV,CACF,EACA,EAAwB,YAAc"}

package/dist/status-display-BUphOF18.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"status-display-BUphOF18.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,8CAH/C,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}
+{"version":3,"file":"status-display-BUphOF18.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-o9inMVvb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"status-display-o9inMVvb.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,8CAH/C,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,EAAI,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,CAKrE,CAAA"}
+{"version":3,"file":"status-display-o9inMVvb.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/submit-button-CGBaPzE9.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button-CGBaPzE9.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/ui/cancel-button.tsx","../packages/components/features/tanstack-form/components/ui/submit-button.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Secondary outline button used to dismiss or cancel a form without submitting, defaulting to the label \"Cancel\".\n *\n * @example\n * import { CancelButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <CancelButton onClick={() => router.back()} />\n */\nexport const CancelButton: React.FC<React.ComponentProps<'button'>> = ({ disabled, className, onClick, children }) => {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      color=\"muted\"\n      disabled={disabled}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {children ?? 'Huỷ'}\n    </Button>\n  );\n};\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Props for the {@link SubmitButton} component.\n */\ntype SubmitButtonProps = React.ComponentProps<'button'> & {\n  /**\n   * When `true` the button enters a loading state and is automatically disabled to prevent duplicate submissions.\n   */\n  isSubmitting?: boolean;\n  /**\n   * Label text rendered inside the button.\n   * @default 'Submit'\n   */\n  submitText?: string;\n};\n\n/**\n * Primary form submission button that shows a loading indicator while the form is being submitted.\n *\n * @example\n * import { SubmitButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <SubmitButton isSubmitting={form.state.isSubmitting} submitText=\"Save changes\" />\n */\nexport const SubmitButton: React.FC<SubmitButtonProps> = ({ isSubmitting, submitText = 'Xác nhận', disabled, className, onClick }) => {\n  return (\n    <Button\n      type=\"button\"\n      isLoading={isSubmitting}\n      disabled={disabled || isSubmitting}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {submitText}\n    </Button>\n  );\n};\n"],"mappings":"qIAcA,MAAa,GAA0D,CAAE,WAAU,YAAW,UAAS,cAEnG,EAAC,EAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACI,WACV,UAAW,EAAG,WAAY,CAAS,EAC1B,mBAER,GAAY,KACP,CAAA,ECIC,GAA6C,CAAE,eAAc,aAAa,WAAY,WAAU,YAAW,aAEpH,EAAC,EAAD,CACE,KAAK,SACL,UAAW,EACX,SAAU,GAAY,EACtB,UAAW,EAAG,WAAY,CAAS,EAC1B,mBAER,CACK,CAAA"}
+{"version":3,"file":"submit-button-CGBaPzE9.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/ui/cancel-button.tsx","../packages/components/features/tanstack-form/components/ui/submit-button.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Secondary outline button used to dismiss or cancel a form without submitting, defaulting to the label \"Cancel\".\n *\n * @example\n * import { CancelButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <CancelButton onClick={() => router.back()} />\n */\nexport const CancelButton: React.FC<React.ComponentProps<'button'>> = ({ disabled, className, onClick, children }) => {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      color=\"muted\"\n      disabled={disabled}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {children ?? 'Huỷ'}\n    </Button>\n  );\n};\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Props for the {@link SubmitButton} component.\n */\ntype SubmitButtonProps = React.ComponentProps<'button'> & {\n  /**\n   * When `true` the button enters a loading state and is automatically disabled to prevent duplicate submissions.\n   */\n  isSubmitting?: boolean;\n  /**\n   * Label text rendered inside the button.\n   * @default 'Submit'\n   */\n  submitText?: string;\n};\n\n/**\n * Primary form submission button that shows a loading indicator while the form is being submitted.\n *\n * @example\n * import { SubmitButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <SubmitButton isSubmitting={form.state.isSubmitting} submitText=\"Save changes\" />\n */\nexport const SubmitButton: React.FC<SubmitButtonProps> = ({ isSubmitting, submitText = 'Xác nhận', disabled, className, onClick }) => {\n  return (\n    <Button\n      type=\"button\"\n      isLoading={isSubmitting}\n      disabled={disabled || isSubmitting}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {submitText}\n    </Button>\n  );\n};\n"],"mappings":"qIAcA,MAAa,GAA0D,CAAE,WAAU,YAAW,UAAS,cAEnG,EAAC,EAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACI,WACV,UAAW,EAAG,WAAY,CAAS,EAC1B,UAER,SAAA,GAAY,KACP,CAAA,ECIC,GAA6C,CAAE,eAAc,aAAa,WAAY,WAAU,YAAW,aAEpH,EAAC,EAAD,CACE,KAAK,SACL,UAAW,EACX,SAAU,GAAY,EACtB,UAAW,EAAG,WAAY,CAAS,EAC1B,UAER,SAAA,CACK,CAAA"}

package/dist/submit-button-CvINfld5.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button-CvINfld5.cjs","names":["Button","Button"],"sources":["../packages/components/features/tanstack-form/components/ui/cancel-button.tsx","../packages/components/features/tanstack-form/components/ui/submit-button.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Secondary outline button used to dismiss or cancel a form without submitting, defaulting to the label \"Cancel\".\n *\n * @example\n * import { CancelButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <CancelButton onClick={() => router.back()} />\n */\nexport const CancelButton: React.FC<React.ComponentProps<'button'>> = ({ disabled, className, onClick, children }) => {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      color=\"muted\"\n      disabled={disabled}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {children ?? 'Huỷ'}\n    </Button>\n  );\n};\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Props for the {@link SubmitButton} component.\n */\ntype SubmitButtonProps = React.ComponentProps<'button'> & {\n  /**\n   * When `true` the button enters a loading state and is automatically disabled to prevent duplicate submissions.\n   */\n  isSubmitting?: boolean;\n  /**\n   * Label text rendered inside the button.\n   * @default 'Submit'\n   */\n  submitText?: string;\n};\n\n/**\n * Primary form submission button that shows a loading indicator while the form is being submitted.\n *\n * @example\n * import { SubmitButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <SubmitButton isSubmitting={form.state.isSubmitting} submitText=\"Save changes\" />\n */\nexport const SubmitButton: React.FC<SubmitButtonProps> = ({ isSubmitting, submitText = 'Xác nhận', disabled, className, onClick }) => {\n  return (\n    <Button\n      type=\"button\"\n      isLoading={isSubmitting}\n      disabled={disabled || isSubmitting}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {submitText}\n    </Button>\n  );\n};\n"],"mappings":"kHAcA,MAAa,GAA0D,CAAE,WAAU,YAAW,UAAS,eAEnG,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACI,WACV,WAAA,EAAA,EAAA,GAAA,CAAc,WAAY,CAAS,EAC1B,mBAER,GAAY,KACP,CAAA,ECIC,GAA6C,CAAE,eAAc,aAAa,WAAY,WAAU,YAAW,cAEpH,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACE,KAAK,SACL,UAAW,EACX,SAAU,GAAY,EACtB,WAAA,EAAA,EAAA,GAAA,CAAc,WAAY,CAAS,EAC1B,mBAER,CACK,CAAA"}
+{"version":3,"file":"submit-button-CvINfld5.cjs","names":["Button","Button"],"sources":["../packages/components/features/tanstack-form/components/ui/cancel-button.tsx","../packages/components/features/tanstack-form/components/ui/submit-button.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Secondary outline button used to dismiss or cancel a form without submitting, defaulting to the label \"Cancel\".\n *\n * @example\n * import { CancelButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <CancelButton onClick={() => router.back()} />\n */\nexport const CancelButton: React.FC<React.ComponentProps<'button'>> = ({ disabled, className, onClick, children }) => {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      color=\"muted\"\n      disabled={disabled}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {children ?? 'Huỷ'}\n    </Button>\n  );\n};\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\n/**\n * Props for the {@link SubmitButton} component.\n */\ntype SubmitButtonProps = React.ComponentProps<'button'> & {\n  /**\n   * When `true` the button enters a loading state and is automatically disabled to prevent duplicate submissions.\n   */\n  isSubmitting?: boolean;\n  /**\n   * Label text rendered inside the button.\n   * @default 'Submit'\n   */\n  submitText?: string;\n};\n\n/**\n * Primary form submission button that shows a loading indicator while the form is being submitted.\n *\n * @example\n * import { SubmitButton } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <SubmitButton isSubmitting={form.state.isSubmitting} submitText=\"Save changes\" />\n */\nexport const SubmitButton: React.FC<SubmitButtonProps> = ({ isSubmitting, submitText = 'Xác nhận', disabled, className, onClick }) => {\n  return (\n    <Button\n      type=\"button\"\n      isLoading={isSubmitting}\n      disabled={disabled || isSubmitting}\n      className={cn('min-w-40', className)}\n      onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}\n    >\n      {submitText}\n    </Button>\n  );\n};\n"],"mappings":"kHAcA,MAAa,GAA0D,CAAE,WAAU,YAAW,UAAS,eAEnG,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,MAAM,QACI,WACV,WAAA,EAAA,EAAA,GAAA,CAAc,WAAY,CAAS,EAC1B,UAER,SAAA,GAAY,KACP,CAAA,ECIC,GAA6C,CAAE,eAAc,aAAa,WAAY,WAAU,YAAW,cAEpH,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACE,KAAK,SACL,UAAW,EACX,SAAU,GAAY,EACtB,WAAA,EAAA,EAAA,GAAA,CAAc,WAAY,CAAS,EAC1B,UAER,SAAA,CACK,CAAA"}

package/dist/summary-bar-CYfgdxrQ.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"summary-bar-CYfgdxrQ.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=\"text-[11px] font-semibold uppercase tracking-widest text-text-positive-weak\">{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=\"text-xl font-bold tabular-nums text-text-positive-strong\">—</span>\n                )}\n\n                {/* Description */}\n                {item.description && <span className=\"text-xs text-text-positive-weak\">{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,4CAC3C,EAAC,MAAD,CAAK,UAAU,aAAa,MAAO,CAAE,oBAAqB,yCAA0C,WACjG,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,YAdR,CAkBE,EAAC,MAAD,CAAK,UAAW,EAAG,yBAA0B,CAAM,CAAI,CAAA,EAEvD,EAAC,MAAD,CAAK,UAAU,gDAAf,CAEE,EAAC,OAAD,CAAM,UAAU,uFAA+E,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,oEAA2D,GAAO,CAAA,EAInF,EAAK,aAAe,EAAC,OAAD,CAAM,UAAU,2CAAmC,EAAK,WAAkB,CAAA,CAC5F,GACF,GAzCE,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}
+{"version":3,"file":"summary-bar-CYfgdxrQ.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=\"text-[11px] font-semibold uppercase tracking-widest text-text-positive-weak\">{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=\"text-xl font-bold tabular-nums text-text-positive-strong\">—</span>\n                )}\n\n                {/* Description */}\n                {item.description && <span className=\"text-xs text-text-positive-weak\">{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,EAAK,aAAe,EAAC,OAAD,CAAM,UAAU,kCAAmC,SAAA,EAAK,WAAkB,CAAA,CAC5F,CACF,CAAA,CAAA,CAzCE,EAAA,EAAK,KAyCP,CAET,CAAC,CACE,CAAA,CACF,CAAA,CAET,CAAC,EACD,EAAkB,YAAc"}