@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/action-submit-42PxGLsR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-submit-42PxGLsR.cjs","names":["useTanStackFormContext","Button"],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"+KAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CAAuB,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,WAAA,EAAA,EAAA,GAAA,CAAc,mBAAoB,CAAS,EAAG,QAAS,WACjI,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}

package/dist/action-submit-SviPJW3i.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{K as t}from"./tanstack-form-PC9YNeeo.mjs";import{useCallback as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=({label:a,className:o})=>{let s=t(),c=n(async()=>{await s.handleSubmit({submitAction:`submit`}),s.state.isSubmitSuccessful&&s.reset()},[s]);return i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>i(e,{type:`button`,size:`md`,disabled:t,isLoading:n,className:r(`min-h-8 min-w-32`,o),onClick:c,children:a??`Xác nhận`})})};export{a as TanStackActionSubmit};
+//# sourceMappingURL=action-submit-SviPJW3i.mjs.map

package/dist/action-submit-SviPJW3i.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-submit-SviPJW3i.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/action-submit.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a submit button wired to the current TanStack Form context, automatically handling loading and disabled states.\n *\n * @example\n * import { TanStackActionSubmit } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionSubmit label=\"Save Changes\" className=\"mt-4\" />\n */\nexport const TanStackActionSubmit: React.FC<{\n  /** Button label text. Defaults to `'Submit'` when omitted. */\n  label?: string;\n  /** Additional CSS class names applied to the button element. */\n  className?: string;\n}> = ({ label, className }) => {\n  const form = useTanStackFormContext();\n\n  const onSubmit = useCallback(async () => {\n    await form.handleSubmit({ submitAction: 'submit' });\n    if (!form.state.isSubmitSuccessful) return;\n    form.reset();\n  }, [form]);\n  return (\n    <form.Subscribe\n      selector={state => ({\n        disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n        isSubmitting: state.isSubmitting,\n      })}\n      children={({ disabled, isSubmitting }) => {\n        return (\n          <Button type=\"button\" size=\"md\" disabled={disabled} isLoading={isSubmitting} className={cn('min-h-8 min-w-32', className)} onClick={onSubmit}>\n            {label ?? 'Xác nhận'}\n          </Button>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"0NAiBA,MAAa,GAKP,CAAE,QAAO,eAAgB,CAC7B,IAAM,EAAO,EAAuB,EAE9B,EAAW,EAAY,SAAY,CACvC,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,EAAG,CAAC,CAAI,CAAC,EACT,OACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CAAQ,KAAK,SAAS,KAAK,KAAe,WAAU,UAAW,EAAc,UAAW,EAAG,mBAAoB,CAAS,EAAG,QAAS,WACjI,GAAS,UACJ,CAAA,CAGb,CAAA,CAEL"}

package/dist/actions-form-Bo46j_dH.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./tanstack-form-CNrZQZhn.cjs");let n=require("lucide-react"),r=require("react/jsx-runtime");const i=({type:i=`create`})=>{let a=t.K();return(0,r.jsxs)(`div`,{className:`flex h-8 items-center justify-between`,children:[(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>(0,r.jsx)(e.Button,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>a.reset(),children:`Hủy bỏ`})}),i===`create`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`create`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.PlusIcon,{}),`Thêm mới`]})}),i===`update`&&(0,r.jsx)(a.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:i})=>(0,r.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:i,className:`h-full min-w-32`,onClick:async()=>{await a.handleSubmit({submitAction:`update`}),a.state.isSubmitSuccessful&&a.reset()},children:[(0,r.jsx)(n.ArrowDownToLine,{}),`Cập nhật`]})})]})};exports.TanStackActionsForm=i;
+//# sourceMappingURL=actions-form-Bo46j_dH.cjs.map

package/dist/actions-form-Bo46j_dH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-form-Bo46j_dH.cjs","names":["useTanStackFormContext","Button","PlusIcon","ArrowDownToLine"],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"0IAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAOA,EAAAA,EAAuB,EACpC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iDAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,eAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,WAAG,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,EAYE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,WACR,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,mBAEnB,EAAA,EAAA,KAAA,CAACD,EAAAA,OAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,EAYE,EAAA,EAAA,IAAA,CAACE,EAAAA,gBAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}

package/dist/actions-form-QdAsKwcQ.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{K as t}from"./tanstack-form-PC9YNeeo.mjs";import{ArrowDownToLine as n,PlusIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({type:o=`create`})=>{let s=t();return a(`div`,{className:`flex h-8 items-center justify-between`,children:[i(s.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>i(e,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>s.reset(),children:`Hủy bỏ`})}),o===`create`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:n})=>a(e,{type:`submit`,size:`md`,disabled:t,isLoading:n,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`create`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(r,{}),`Thêm mới`]})}),o===`update`&&i(s.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>a(e,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await s.handleSubmit({submitAction:`update`}),s.state.isSubmitSuccessful&&s.reset()},children:[i(n,{}),`Cập nhật`]})})]})};export{o as TanStackActionsForm};
+//# sourceMappingURL=actions-form-QdAsKwcQ.mjs.map

package/dist/actions-form-QdAsKwcQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-form-QdAsKwcQ.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/actions-form.tsx"],"sourcesContent":["import { ArrowDownToLine, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useTanStackFormContext } from '../form-context';\n\n/**\n * Renders a form action bar with a Cancel button and a context-aware submit button (Add New or Update) driven by TanStack Form state.\n *\n * @example\n * import { TanStackActionsForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * // Inside a TanStack Form provider:\n * <TanStackActionsForm type=\"create\" />\n *\n * // For an update workflow:\n * <TanStackActionsForm type=\"update\" />\n */\nexport const TanStackActionsForm: React.FC<\n  React.PropsWithChildren<{\n    /**\n     * Determines which submit button variant is rendered.\n     * - `'create'` — shows an \"Add New\" button that resets the form on success.\n     * - `'update'` — shows an \"Update\" button that resets the form on success.\n     * Defaults to `'create'`.\n     */\n    type?: 'create' | 'update';\n  }>\n> = ({ type = 'create' }) => {\n  const form = useTanStackFormContext();\n  return (\n    <div className=\"flex h-8 items-center justify-between\">\n      <form.Subscribe\n        selector={state => ({\n          disabled: state.isPristine || state.isSubmitting,\n        })}\n        children={({ disabled }) => {\n          return (\n            <Button color=\"muted\" variant=\"outline\" type=\"button\" size=\"md\" disabled={disabled} className=\"h-full min-w-32\" onClick={() => form.reset()}>\n              Hủy bỏ\n            </Button>\n          );\n        }}\n      />\n      {type === 'create' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'create' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <PlusIcon />\n                Thêm mới\n              </Button>\n            );\n          }}\n        />\n      )}\n      {type === 'update' && (\n        <form.Subscribe\n          selector={state => ({\n            disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit || state.isDefaultValue,\n            isSubmitting: state.isSubmitting,\n          })}\n          children={({ disabled, isSubmitting }) => {\n            return (\n              <Button\n                type=\"submit\"\n                size=\"md\"\n                disabled={disabled}\n                isLoading={isSubmitting}\n                className=\"h-full min-w-32\"\n                onClick={async () => {\n                  await form.handleSubmit({ submitAction: 'update' });\n                  if (!form.state.isSubmitSuccessful) return;\n                  form.reset();\n                }}\n              >\n                <ArrowDownToLine />\n                Cập nhật\n              </Button>\n            );\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"yMAkBA,MAAa,GAUR,CAAE,OAAO,YAAe,CAC3B,IAAM,EAAO,EAAuB,EACpC,OACE,EAAC,MAAD,CAAK,UAAU,iDAAf,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,EAAM,YACtC,GACA,UAAW,CAAE,cAET,EAAC,EAAD,CAAQ,MAAM,QAAQ,QAAQ,UAAU,KAAK,SAAS,KAAK,KAAe,WAAU,UAAU,kBAAkB,YAAe,EAAK,MAAM,WAAG,QAErI,CAAA,CAGb,CAAA,EACA,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,CAYE,EAAC,EAAD,CAAW,CAAA,EAAC,UAEN,GAGb,CAAA,EAEF,IAAS,UACR,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,WAAa,EAAM,eACtH,aAAc,EAAM,YACtB,GACA,UAAW,CAAE,WAAU,kBAEnB,EAAC,EAAD,CACE,KAAK,SACL,KAAK,KACK,WACV,UAAW,EACX,UAAU,kBACV,QAAS,SAAY,CACnB,MAAM,EAAK,aAAa,CAAE,aAAc,QAAS,CAAC,EAC7C,EAAK,MAAM,oBAChB,EAAK,MAAM,CACb,WAVF,CAYE,EAAC,EAAD,CAAkB,CAAA,EAAC,UAEb,GAGb,CAAA,CAEA,GAET"}

package/dist/activity-heatmap-chart-DufvFndI.mjs

@@ -0,0 +1,2 @@
+import{toDateLabel as e}from"./features/charts/index.mjs";import{ChartContainer as t,ChartTooltip as n,ChartTooltipContent as r}from"./ui/chart.mjs";import{useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Scatter as c,ScatterChart as l,XAxis as u,YAxis as d}from"recharts";const f=[`S`,`M`,`T`,`W`,`T`,`F`,`S`],p=({data:p,label:m=`Activity`,color:h=`var(--chart-1)`,valueFormatter:g=e=>e.toLocaleString(`en-US`),className:_,height:v})=>{let y=i(()=>({value:{label:m,color:h}}),[m,h]),{chartData:b,monthTicks:x,maxWeek:S,maxValue:C}=i(()=>{let e=p.map(e=>({...e,parsedDate:e.date instanceof Date?e.date:new Date(e.date)})).sort((e,t)=>e.parsedDate.getTime()-t.parsedDate.getTime());if(e.length===0)return{chartData:[],monthTicks:new Map,maxWeek:0,maxValue:1};let t=e[0]?.parsedDate,n=new Date(t);n.setDate(n.getDate()-n.getDay());let r=new Map,i=-1,a=e.map(e=>{let t=e.parsedDate.getDay(),a=Math.floor((e.parsedDate.getTime()-n.getTime())/864e5/7),o=e.parsedDate.getMonth();return o!==i&&(r.set(a,e.parsedDate.toLocaleDateString(`en-US`,{month:`short`})),i=o),{x:a,y:t,value:e.value,date:e.date}});return{chartData:a,monthTicks:r,maxWeek:Math.max(...a.map(e=>e.x)),maxValue:Math.max(...a.map(e=>e.value),1)}},[p]);return o(t,{"data-slot":`activity-heatmap-chart`,config:y,className:a(`w-full`,_),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:s(l,{margin:{top:8,right:12,bottom:0,left:0},children:[o(u,{type:`number`,dataKey:`x`,domain:[-.5,S+.5],ticks:Array.from(x.keys()),tickFormatter:e=>x.get(e)??``,tickLine:!1,axisLine:!1,tickMargin:8,interval:0}),o(d,{type:`number`,dataKey:`y`,domain:[-.5,6.5],reversed:!0,ticks:[0,1,2,3,4,5,6],tickFormatter:e=>f[e]??``,tickLine:!1,axisLine:!1,width:20,interval:0}),o(n,{cursor:!1,content:o(r,{hideLabel:!0,hideIndicator:!0,formatter:(t,n,r)=>{let i=r.payload;return s(`div`,{className:`grid gap-0.5`,children:[o(`span`,{className:`font-medium text-muted-strong`,children:e(i.date)}),s(`span`,{className:`text-muted`,children:[g(i.value),` `,y.value?.label]})]})}})}),o(c,{data:b,shape:e=>{let{cx:t,cy:n,payload:r}=e;if(t===void 0||n===void 0)return o(`g`,{});let i=Math.min(.12+.88*(r.value/C),1);return o(`rect`,{x:t-13/2,y:n-13/2,width:13,height:13,rx:3,fill:h,fillOpacity:i})}})]})})};export{p as ActivityHeatmapChart};
+//# sourceMappingURL=activity-heatmap-chart-DufvFndI.mjs.map

package/dist/activity-heatmap-chart-DufvFndI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-heatmap-chart-DufvFndI.mjs","names":["point"],"sources":["../packages/components/features/charts/components/activity-heatmap-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Scatter, ScatterChart, XAxis, YAxis } from 'recharts';\nimport type { ActivityPoint, BaseChartProps } from '../types';\nimport { toDateLabel } from '../utils';\n\nconst WEEKDAY_LABELS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\nconst CELL_SIZE = 13;\nconst MS_PER_DAY = 86_400_000;\n\nexport type ActivityHeatmapChartProps = BaseChartProps & {\n  data: ActivityPoint[];\n  /** Series label used in the theme config. Defaults to `'Activity'`. */\n  label?: string;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A GitHub-style calendar heatmap for daily activity/usage intensity — logins, orders, commits\n * per day — laid out as a week-by-weekday grid with color opacity mapped to value.\n *\n * @example\n * ```tsx\n * import { ActivityHeatmapChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ActivityHeatmapChart\n *   data={[\n *     { date: '2026-06-01', value: 4 },\n *     { date: '2026-06-02', value: 12 },\n *   ]}\n * />\n * ```\n */\nexport const ActivityHeatmapChart = ({\n  data,\n  label = 'Activity',\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  className,\n  height,\n}: ActivityHeatmapChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color } }), [label, color]);\n\n  const { chartData, monthTicks, maxWeek, maxValue } = useMemo(() => {\n    const parsed = data\n      .map(point => ({ ...point, parsedDate: point.date instanceof Date ? point.date : new Date(point.date) }))\n      .sort((a, b) => a.parsedDate.getTime() - b.parsedDate.getTime());\n\n    if (parsed.length === 0) return { chartData: [], monthTicks: new Map<number, string>(), maxWeek: 0, maxValue: 1 };\n\n    const firstDate = parsed[0]?.parsedDate;\n    const weekStart = new Date(firstDate);\n    weekStart.setDate(weekStart.getDate() - weekStart.getDay());\n\n    const months = new Map<number, string>();\n    let lastMonth = -1;\n\n    const points = parsed.map(point => {\n      const weekday = point.parsedDate.getDay();\n      const weekIndex = Math.floor((point.parsedDate.getTime() - weekStart.getTime()) / MS_PER_DAY / 7);\n      const month = point.parsedDate.getMonth();\n      if (month !== lastMonth) {\n        months.set(weekIndex, point.parsedDate.toLocaleDateString('en-US', { month: 'short' }));\n        lastMonth = month;\n      }\n      return { x: weekIndex, y: weekday, value: point.value, date: point.date };\n    });\n\n    return {\n      chartData: points,\n      monthTicks: months,\n      maxWeek: Math.max(...points.map(point => point.x)),\n      maxValue: Math.max(...points.map(point => point.value), 1),\n    };\n  }, [data]);\n\n  return (\n    <ChartContainer\n      data-slot=\"activity-heatmap-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 0 }}>\n        <XAxis\n          type=\"number\"\n          dataKey=\"x\"\n          domain={[-0.5, maxWeek + 0.5]}\n          ticks={Array.from(monthTicks.keys())}\n          tickFormatter={x => monthTicks.get(x) ?? ''}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          interval={0}\n        />\n        <YAxis\n          type=\"number\"\n          dataKey=\"y\"\n          domain={[-0.5, 6.5]}\n          reversed\n          ticks={[0, 1, 2, 3, 4, 5, 6]}\n          tickFormatter={y => WEEKDAY_LABELS[y] ?? ''}\n          tickLine={false}\n          axisLine={false}\n          width={20}\n          interval={0}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              hideIndicator\n              formatter={(_value, _name, item) => {\n                const point = item.payload as { date: string | Date; value: number };\n                return (\n                  <div className=\"grid gap-0.5\">\n                    <span className=\"font-medium text-muted-strong\">{toDateLabel(point.date)}</span>\n                    <span className=\"text-muted\">\n                      {valueFormatter(point.value)} {config.value?.label}\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter\n          data={chartData}\n          shape={props => {\n            const { cx, cy, payload } = props;\n            if (cx === undefined || cy === undefined) return <g />;\n            const point = payload as { value: number };\n            const intensity = Math.min(0.12 + 0.88 * (point.value / maxValue), 1);\n            return <rect x={cx - CELL_SIZE / 2} y={cy - CELL_SIZE / 2} width={CELL_SIZE} height={CELL_SIZE} rx={3} fill={color} fillOpacity={intensity} />;\n          }}\n        />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/activity-heatmap-chart-gDcvIAK_.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=[`S`,`M`,`T`,`W`,`T`,`F`,`S`],s=({data:s,label:c=`Activity`,color:l=`var(--chart-1)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),className:d,height:f})=>{let p=(0,n.useMemo)(()=>({value:{label:c,color:l}}),[c,l]),{chartData:m,monthTicks:h,maxWeek:g,maxValue:_}=(0,n.useMemo)(()=>{let e=s.map(e=>({...e,parsedDate:e.date instanceof Date?e.date:new Date(e.date)})).sort((e,t)=>e.parsedDate.getTime()-t.parsedDate.getTime());if(e.length===0)return{chartData:[],monthTicks:new Map,maxWeek:0,maxValue:1};let t=e[0]?.parsedDate,n=new Date(t);n.setDate(n.getDate()-n.getDay());let r=new Map,i=-1,a=e.map(e=>{let t=e.parsedDate.getDay(),a=Math.floor((e.parsedDate.getTime()-n.getTime())/864e5/7),o=e.parsedDate.getMonth();return o!==i&&(r.set(a,e.parsedDate.toLocaleDateString(`en-US`,{month:`short`})),i=o),{x:a,y:t,value:e.value,date:e.date}});return{chartData:a,monthTicks:r,maxWeek:Math.max(...a.map(e=>e.x)),maxValue:Math.max(...a.map(e=>e.value),1)}},[s]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`activity-heatmap-chart`,config:p,className:(0,r.cn)(`w-full`,d),style:f===void 0?void 0:{height:f,aspectRatio:`auto`},children:(0,i.jsxs)(a.ScatterChart,{margin:{top:8,right:12,bottom:0,left:0},children:[(0,i.jsx)(a.XAxis,{type:`number`,dataKey:`x`,domain:[-.5,g+.5],ticks:Array.from(h.keys()),tickFormatter:e=>h.get(e)??``,tickLine:!1,axisLine:!1,tickMargin:8,interval:0}),(0,i.jsx)(a.YAxis,{type:`number`,dataKey:`y`,domain:[-.5,6.5],reversed:!0,ticks:[0,1,2,3,4,5,6],tickFormatter:e=>o[e]??``,tickLine:!1,axisLine:!1,width:20,interval:0}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{hideLabel:!0,hideIndicator:!0,formatter:(t,n,r)=>{let a=r.payload;return(0,i.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,i.jsx)(`span`,{className:`font-medium text-muted-strong`,children:e.toDateLabel(a.date)}),(0,i.jsxs)(`span`,{className:`text-muted`,children:[u(a.value),` `,p.value?.label]})]})}})}),(0,i.jsx)(a.Scatter,{data:m,shape:e=>{let{cx:t,cy:n,payload:r}=e;if(t===void 0||n===void 0)return(0,i.jsx)(`g`,{});let a=Math.min(.12+.88*(r.value/_),1);return(0,i.jsx)(`rect`,{x:t-13/2,y:n-13/2,width:13,height:13,rx:3,fill:l,fillOpacity:a})}})]})})};exports.ActivityHeatmapChart=s;
+//# sourceMappingURL=activity-heatmap-chart-gDcvIAK_.cjs.map

package/dist/activity-heatmap-chart-gDcvIAK_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-heatmap-chart-gDcvIAK_.cjs","names":["ChartContainer","ScatterChart","XAxis","YAxis","ChartTooltip","ChartTooltipContent","toDateLabel","Scatter","point"],"sources":["../packages/components/features/charts/components/activity-heatmap-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Scatter, ScatterChart, XAxis, YAxis } from 'recharts';\nimport type { ActivityPoint, BaseChartProps } from '../types';\nimport { toDateLabel } from '../utils';\n\nconst WEEKDAY_LABELS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\nconst CELL_SIZE = 13;\nconst MS_PER_DAY = 86_400_000;\n\nexport type ActivityHeatmapChartProps = BaseChartProps & {\n  data: ActivityPoint[];\n  /** Series label used in the theme config. Defaults to `'Activity'`. */\n  label?: string;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A GitHub-style calendar heatmap for daily activity/usage intensity — logins, orders, commits\n * per day — laid out as a week-by-weekday grid with color opacity mapped to value.\n *\n * @example\n * ```tsx\n * import { ActivityHeatmapChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ActivityHeatmapChart\n *   data={[\n *     { date: '2026-06-01', value: 4 },\n *     { date: '2026-06-02', value: 12 },\n *   ]}\n * />\n * ```\n */\nexport const ActivityHeatmapChart = ({\n  data,\n  label = 'Activity',\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  className,\n  height,\n}: ActivityHeatmapChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color } }), [label, color]);\n\n  const { chartData, monthTicks, maxWeek, maxValue } = useMemo(() => {\n    const parsed = data\n      .map(point => ({ ...point, parsedDate: point.date instanceof Date ? point.date : new Date(point.date) }))\n      .sort((a, b) => a.parsedDate.getTime() - b.parsedDate.getTime());\n\n    if (parsed.length === 0) return { chartData: [], monthTicks: new Map<number, string>(), maxWeek: 0, maxValue: 1 };\n\n    const firstDate = parsed[0]?.parsedDate;\n    const weekStart = new Date(firstDate);\n    weekStart.setDate(weekStart.getDate() - weekStart.getDay());\n\n    const months = new Map<number, string>();\n    let lastMonth = -1;\n\n    const points = parsed.map(point => {\n      const weekday = point.parsedDate.getDay();\n      const weekIndex = Math.floor((point.parsedDate.getTime() - weekStart.getTime()) / MS_PER_DAY / 7);\n      const month = point.parsedDate.getMonth();\n      if (month !== lastMonth) {\n        months.set(weekIndex, point.parsedDate.toLocaleDateString('en-US', { month: 'short' }));\n        lastMonth = month;\n      }\n      return { x: weekIndex, y: weekday, value: point.value, date: point.date };\n    });\n\n    return {\n      chartData: points,\n      monthTicks: months,\n      maxWeek: Math.max(...points.map(point => point.x)),\n      maxValue: Math.max(...points.map(point => point.value), 1),\n    };\n  }, [data]);\n\n  return (\n    <ChartContainer\n      data-slot=\"activity-heatmap-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 0 }}>\n        <XAxis\n          type=\"number\"\n          dataKey=\"x\"\n          domain={[-0.5, maxWeek + 0.5]}\n          ticks={Array.from(monthTicks.keys())}\n          tickFormatter={x => monthTicks.get(x) ?? ''}\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          interval={0}\n        />\n        <YAxis\n          type=\"number\"\n          dataKey=\"y\"\n          domain={[-0.5, 6.5]}\n          reversed\n          ticks={[0, 1, 2, 3, 4, 5, 6]}\n          tickFormatter={y => WEEKDAY_LABELS[y] ?? ''}\n          tickLine={false}\n          axisLine={false}\n          width={20}\n          interval={0}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              hideIndicator\n              formatter={(_value, _name, item) => {\n                const point = item.payload as { date: string | Date; value: number };\n                return (\n                  <div className=\"grid gap-0.5\">\n                    <span className=\"font-medium text-muted-strong\">{toDateLabel(point.date)}</span>\n                    <span className=\"text-muted\">\n                      {valueFormatter(point.value)} {config.value?.label}\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter\n          data={chartData}\n          shape={props => {\n            const { cx, cy, payload } = props;\n            if (cx === undefined || cy === undefined) return <g />;\n            const point = payload as { value: number };\n            const intensity = Math.min(0.12 + 0.88 * (point.value / maxValue), 1);\n            return <rect x={cx - CELL_SIZE / 2} y={cy - CELL_SIZE / 2} width={CELL_SIZE} height={CELL_SIZE} rx={3} fill={color} fillOpacity={intensity} />;\n          }}\n        />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/add-new-DkBwXh0Q.d.cts

@@ -0,0 +1,16 @@
+//#region packages/components/ui/buttons/add-new.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. Defaults to a no-op. */onClick?: () => void;
+};
+/**
+ * A toolbar button that triggers a "create new" action, displaying a plus icon alongside a "Create" label that is hidden on small screens.
+ *
+ * @example
+ * import { AddNewBtn } from '@customafk/lunas-ui/ui/buttons/add-new';
+ *
+ * <AddNewBtn onClick={() => setOpen(true)} />
+ */
+declare const AddNewBtn: React.FC<React.PropsWithChildren<Props>>;
+//#endregion
+export { AddNewBtn as t };
+//# sourceMappingURL=add-new-DkBwXh0Q.d.cts.map

package/dist/add-new-DkBwXh0Q.d.mts

@@ -0,0 +1,16 @@
+//#region packages/components/ui/buttons/add-new.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. Defaults to a no-op. */onClick?: () => void;
+};
+/**
+ * A toolbar button that triggers a "create new" action, displaying a plus icon alongside a "Create" label that is hidden on small screens.
+ *
+ * @example
+ * import { AddNewBtn } from '@customafk/lunas-ui/ui/buttons/add-new';
+ *
+ * <AddNewBtn onClick={() => setOpen(true)} />
+ */
+declare const AddNewBtn: React.FC<React.PropsWithChildren<Props>>;
+//#endregion
+export { AddNewBtn as t };
+//# sourceMappingURL=add-new-DkBwXh0Q.d.mts.map

package/dist/alert-dialog-Cdhz7jSj.d.cts

@@ -0,0 +1,88 @@
+import { AlertDialog } from "radix-ui";
+
+//#region packages/components/ui/alert-dialog.d.ts
+/**
+ * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AlertDialog, AlertDialogTrigger, AlertDialogContent,
+ *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+ *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+ * } from '@customafk/lunas-ui/ui/alert-dialog';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="solid" color="danger">Delete account</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone. Your account will be permanently deleted.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
+declare function AlertDialog$1({
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Root>): import("react").JSX.Element;
+/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */
+declare function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Trigger>): import("react").JSX.Element;
+/** Renders alert dialog overlay and content into a portal outside the normal React tree. */
+declare function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Portal>): import("react").JSX.Element;
+/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */
+declare function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Overlay>): import("react").JSX.Element;
+/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */
+declare function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Content>): import("react").JSX.Element;
+/** Layout wrapper for the alert dialog title and description. */
+declare function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */
+declare function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Accessible heading for the alert dialog, styled with the h3 heading variant. */
+declare function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Title>): import("react").JSX.Element;
+/** Muted supporting text that explains the consequences of the destructive action. */
+declare function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Description>): import("react").JSX.Element;
+/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */
+declare function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Action>): import("react").JSX.Element;
+/** Cancel button that closes the alert dialog without performing the destructive action. */
+declare function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Cancel>): import("react").JSX.Element;
+//#endregion
+export { AlertDialogDescription as a, AlertDialogOverlay as c, AlertDialogTrigger as d, AlertDialogContent as i, AlertDialogPortal as l, AlertDialogAction as n, AlertDialogFooter as o, AlertDialogCancel as r, AlertDialogHeader as s, AlertDialog$1 as t, AlertDialogTitle as u };
+//# sourceMappingURL=alert-dialog-Cdhz7jSj.d.cts.map

package/dist/alert-dialog-Cdhz7jSj.d.mts

@@ -0,0 +1,88 @@
+import { AlertDialog } from "radix-ui";
+
+//#region packages/components/ui/alert-dialog.d.ts
+/**
+ * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AlertDialog, AlertDialogTrigger, AlertDialogContent,
+ *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+ *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+ * } from '@customafk/lunas-ui/ui/alert-dialog';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="solid" color="danger">Delete account</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone. Your account will be permanently deleted.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
+declare function AlertDialog$1({
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Root>): import("react").JSX.Element;
+/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */
+declare function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Trigger>): import("react").JSX.Element;
+/** Renders alert dialog overlay and content into a portal outside the normal React tree. */
+declare function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Portal>): import("react").JSX.Element;
+/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */
+declare function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Overlay>): import("react").JSX.Element;
+/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */
+declare function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Content>): import("react").JSX.Element;
+/** Layout wrapper for the alert dialog title and description. */
+declare function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */
+declare function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Accessible heading for the alert dialog, styled with the h3 heading variant. */
+declare function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Title>): import("react").JSX.Element;
+/** Muted supporting text that explains the consequences of the destructive action. */
+declare function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Description>): import("react").JSX.Element;
+/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */
+declare function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Action>): import("react").JSX.Element;
+/** Cancel button that closes the alert dialog without performing the destructive action. */
+declare function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialog.Cancel>): import("react").JSX.Element;
+//#endregion
+export { AlertDialogDescription as a, AlertDialogOverlay as c, AlertDialogTrigger as d, AlertDialogContent as i, AlertDialogPortal as l, AlertDialogAction as n, AlertDialogFooter as o, AlertDialogCancel as r, AlertDialogHeader as s, AlertDialog$1 as t, AlertDialogTitle as u };
+//# sourceMappingURL=alert-dialog-Cdhz7jSj.d.mts.map

package/dist/analysis-panel-DzsZKA9l.cjs

@@ -0,0 +1,2 @@
+const e=require("./data-display/statistic.cjs"),t=require("./tables-7aC9WFs9.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime");function o(e,t,n){switch(n){case`count`:return e;case`sum`:return t.reduce((e,t)=>e+t,0);case`avg`:return t.length===0?0:t.reduce((e,t)=>e+t,0)/t.length;case`min`:return t.length===0?0:Math.min(...t);case`max`:return t.length===0?0:Math.max(...t)}}function s(e,t){return e.map(e=>{let n=e.getValue(t);return typeof n==`string`?Number(n):typeof n==`number`?n:NaN}).filter(e=>!Number.isNaN(e))}const c={sum:`Tổng`,avg:`Trung bình`,count:`Đếm`,min:`Nhỏ nhất`,max:`Lớn nhất`},l=(0,r.memo)(()=>{let{table:l,totalRows:d}=t.q(),{rowSelectionState:f}=t.K(),{isOpen:p,toggle:m}=t.G(),h=(0,r.useMemo)(()=>l.getRowModel().rows,[l]),g=(0,r.useMemo)(()=>l.getSelectedRowModel().flatRows,[l,f]),_=(0,r.useMemo)(()=>l.getHeaderGroups()[0]?.headers??[],[l]),v=(0,r.useMemo)(()=>_.filter(e=>![`select`,`actions`].includes(e.id)).flatMap(e=>{let t=e.column.columnDef.meta?.aggregation;if(!t)return[];let n=t.label??(typeof e.column.columnDef.header==`string`?e.column.columnDef.header:e.id),r=s(h,e.id),i=g.length>0?s(g,e.id):null;return[{colId:e.id,header:n,aggregation:t,allValue:o(h.length,r,t.type),selectedValue:i===null?null:o(g.length,i,t.type)}]}),[_,h,g]);return(0,a.jsxs)(`div`,{"data-slot":`table-analysis-panel`,className:`w-full border-t border-border`,children:[(0,a.jsxs)(`button`,{type:`button`,className:(0,i.cn)(`flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive`,`hover:bg-muted-bg-subtle transition-colors outline-none`,`focus-visible:ring-2 focus-visible:ring-primary-weak`),onClick:m,"aria-expanded":p,children:[(0,a.jsx)(`span`,{children:`Tổng quan dữ liệu`}),p?(0,a.jsx)(n.ChevronUpIcon,{size:14}):(0,a.jsx)(n.ChevronDownIcon,{size:14})]}),p&&(0,a.jsxs)(`div`,{className:`px-4 pb-4 pt-2 space-y-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-4`,children:[(0,a.jsx)(u,{label:`Tổng bản ghi`,value:d??h.length}),(0,a.jsx)(u,{label:`Hàng hiển thị`,value:h.length}),(0,a.jsx)(u,{label:`Hàng đã chọn`,value:g.length,highlight:g.length>0})]}),v.length>0&&(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak`,children:`Tóm tắt cột`}),(0,a.jsx)(`div`,{className:`overflow-x-auto rounded-md border border-border`,children:(0,a.jsxs)(`table`,{className:`w-full text-sm`,children:[(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{className:`border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak`,children:[(0,a.jsx)(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Cột`}),(0,a.jsx)(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Kiểu`}),(0,a.jsx)(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Tất cả hàng`}),g.length>0&&(0,a.jsx)(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Hàng đã chọn`})]})}),(0,a.jsx)(`tbody`,{children:v.map((t,n)=>(0,a.jsxs)(`tr`,{className:(0,i.cn)(`border-b border-border last:border-b-0`,n%2==1&&`bg-muted-bg-subtle/50`),children:[(0,a.jsx)(`td`,{className:`px-3 py-2 text-text-positive font-medium`,children:t.header}),(0,a.jsx)(`td`,{className:`px-3 py-2 text-text-positive-weak`,children:c[t.aggregation.type]}),(0,a.jsx)(`td`,{className:`px-3 py-2 text-right`,children:(0,a.jsx)(e.Statistic,{value:t.allValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})}),g.length>0&&(0,a.jsx)(`td`,{className:`px-3 py-2 text-right`,children:t.selectedValue===null?(0,a.jsx)(`span`,{className:`text-text-positive-weak`,children:`—`}):(0,a.jsx)(e.Statistic,{value:t.selectedValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})})]},t.colId))})]})})]})]})]})});l.displayName=`UITableAnalysisPanel`;const u=(0,r.memo)(({label:e,value:t,highlight:n})=>(0,a.jsxs)(`div`,{className:(0,i.cn)(`flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white`,n&&t>0?`border-primary bg-primary-bg-subtle`:`border-border bg-white`),children:[(0,a.jsx)(`span`,{className:`text-[11px] text-text-positive-weak`,children:e}),(0,a.jsx)(`span`,{className:`text-base font-semibold tabular-nums text-text-positive-strong`,children:t.toLocaleString()})]}));u.displayName=`StatChip`,exports.UITableAnalysisPanel=l;
+//# sourceMappingURL=analysis-panel-DzsZKA9l.cjs.map

package/dist/analysis-panel-DzsZKA9l.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"analysis-panel-DzsZKA9l.cjs","names":["useUITableContext","useUITableBodyContext","useUITableAnalysisContext","ChevronUpIcon","ChevronDownIcon","Statistic"],"sources":["../packages/components/features/tables/components/table/analysis-panel.tsx"],"sourcesContent":["'use client';\nimport { memo, useMemo } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { AnyEntity } from '@/types';\nimport { Statistic } from '@/components/data-display/statistic';\n\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\n\nfunction computeAggregation(rowCount: number, values: number[], type: ColumnAggregationType): number {\n  switch (type) {\n    case 'count':\n      return rowCount;\n    case 'sum':\n      return values.reduce((a, b) => a + b, 0);\n    case 'avg':\n      return values.length === 0 ? 0 : values.reduce((a, b) => a + b, 0) / values.length;\n    case 'min':\n      return values.length === 0 ? 0 : Math.min(...values);\n    case 'max':\n      return values.length === 0 ? 0 : Math.max(...values);\n  }\n}\n\nfunction extractNumericValues(rows: { getValue: (id: string) => unknown }[], colId: string): number[] {\n  return rows\n    .map(r => {\n      const v = r.getValue(colId);\n      const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN;\n      return n;\n    })\n    .filter(n => !Number.isNaN(n));\n}\n\ntype AggregationLabel = {\n  colId: string;\n  header: string;\n  aggregation: ColumnAggregation;\n  allValue: number;\n  selectedValue: number | null;\n};\n\nconst typeLabels: Record<ColumnAggregationType, string> = {\n  sum: 'Tổng',\n  avg: 'Trung bình',\n  count: 'Đếm',\n  min: 'Nhỏ nhất',\n  max: 'Lớn nhất',\n};\n\nexport const UITableAnalysisPanel = memo(() => {\n  const { table, totalRows } = useUITableContext();\n  const { rowSelectionState } = useUITableBodyContext();\n  const { isOpen, toggle } = useUITableAnalysisContext();\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: row model\n  const allRows = useMemo(() => table.getRowModel().rows, [table]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: selected rows\n  const selectedRows = useMemo(() => table.getSelectedRowModel().flatRows, [table, rowSelectionState]);\n\n  const headers = useMemo(() => table.getHeaderGroups()[0]?.headers ?? [], [table]);\n\n  const aggregationRows = useMemo<AggregationLabel[]>(() => {\n    return headers\n      .filter(h => !['select', 'actions'].includes(h.id))\n      .flatMap(header => {\n        const agg = (header.column.columnDef.meta as AnyEntity)?.aggregation as ColumnAggregation | undefined;\n        if (!agg) return [];\n\n        const headerText = agg.label ?? (typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.id);\n\n        const allValues = extractNumericValues(allRows, header.id);\n        const selectedValues = selectedRows.length > 0 ? extractNumericValues(selectedRows, header.id) : null;\n\n        return [\n          {\n            colId: header.id,\n            header: headerText,\n            aggregation: agg,\n            allValue: computeAggregation(allRows.length, allValues, agg.type),\n            selectedValue: selectedValues !== null ? computeAggregation(selectedRows.length, selectedValues, agg.type) : null,\n          },\n        ];\n      });\n  }, [headers, allRows, selectedRows]);\n\n  return (\n    <div data-slot=\"table-analysis-panel\" className=\"w-full border-t border-border\">\n      <button\n        type=\"button\"\n        className={cn(\n          'flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive',\n          'hover:bg-muted-bg-subtle transition-colors outline-none',\n          'focus-visible:ring-2 focus-visible:ring-primary-weak'\n        )}\n        onClick={toggle}\n        aria-expanded={isOpen}\n      >\n        <span>Tổng quan dữ liệu</span>\n        {isOpen ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />}\n      </button>\n\n      {isOpen && (\n        <div className=\"px-4 pb-4 pt-2 space-y-4\">\n          {/* Row summary */}\n          <div className=\"flex flex-wrap gap-4\">\n            <StatChip label=\"Tổng bản ghi\" value={totalRows ?? allRows.length} />\n            <StatChip label=\"Hàng hiển thị\" value={allRows.length} />\n            <StatChip label=\"Hàng đã chọn\" value={selectedRows.length} highlight={selectedRows.length > 0} />\n          </div>\n\n          {/* Column aggregations */}\n          {aggregationRows.length > 0 && (\n            <div>\n              <p className=\"mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak\">Tóm tắt cột</p>\n              <div className=\"overflow-x-auto rounded-md border border-border\">\n                <table className=\"w-full text-sm\">\n                  <thead>\n                    <tr className=\"border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak\">\n                      <th className=\"px-3 py-2 text-left font-medium\">Cột</th>\n                      <th className=\"px-3 py-2 text-left font-medium\">Kiểu</th>\n                      <th className=\"px-3 py-2 text-right font-medium\">Tất cả hàng</th>\n                      {selectedRows.length > 0 && <th className=\"px-3 py-2 text-right font-medium\">Hàng đã chọn</th>}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {aggregationRows.map((row, idx) => (\n                      <tr key={row.colId} className={cn('border-b border-border last:border-b-0', idx % 2 === 1 && 'bg-muted-bg-subtle/50')}>\n                        <td className=\"px-3 py-2 text-text-positive font-medium\">{row.header}</td>\n                        <td className=\"px-3 py-2 text-text-positive-weak\">{typeLabels[row.aggregation.type]}</td>\n                        <td className=\"px-3 py-2 text-right\">\n                          <Statistic\n                            value={row.allValue}\n                            prefix={row.aggregation.prefix}\n                            suffix={row.aggregation.suffix}\n                            precision={row.aggregation.precision}\n                            size=\"sm\"\n                          />\n                        </td>\n                        {selectedRows.length > 0 && (\n                          <td className=\"px-3 py-2 text-right\">\n                            {row.selectedValue !== null ? (\n                              <Statistic\n                                value={row.selectedValue}\n                                prefix={row.aggregation.prefix}\n                                suffix={row.aggregation.suffix}\n                                precision={row.aggregation.precision}\n                                size=\"sm\"\n                              />\n                            ) : (\n                              <span className=\"text-text-positive-weak\">—</span>\n                            )}\n                          </td>\n                        )}\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\nUITableAnalysisPanel.displayName = 'UITableAnalysisPanel';\n\nconst StatChip = memo<{ label: string; value: number; highlight?: boolean }>(({ label, value, highlight }) => (\n  <div\n    className={cn(\n      'flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white',\n      highlight && value > 0 ? 'border-primary bg-primary-bg-subtle' : 'border-border bg-white'\n    )}\n  >\n    <span className=\"text-[11px] text-text-positive-weak\">{label}</span>\n    <span className=\"text-base font-semibold tabular-nums text-text-positive-strong\">{value.toLocaleString()}</span>\n  </div>\n));\nStatChip.displayName = 'StatChip';\n"],"mappings":"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"}

package/dist/analysis-panel-ikcRtzG9.mjs

@@ -0,0 +1,2 @@
+import{Statistic as e}from"./data-display/statistic.mjs";import{G as t,K as n,q as r}from"./tables-UikqnT9q.mjs";import{ChevronDownIcon as i,ChevronUpIcon as a}from"lucide-react";import{memo as o,useMemo as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(e,t,n){switch(n){case`count`:return e;case`sum`:return t.reduce((e,t)=>e+t,0);case`avg`:return t.length===0?0:t.reduce((e,t)=>e+t,0)/t.length;case`min`:return t.length===0?0:Math.min(...t);case`max`:return t.length===0?0:Math.max(...t)}}function f(e,t){return e.map(e=>{let n=e.getValue(t);return typeof n==`string`?Number(n):typeof n==`number`?n:NaN}).filter(e=>!Number.isNaN(e))}const p={sum:`Tổng`,avg:`Trung bình`,count:`Đếm`,min:`Nhỏ nhất`,max:`Lớn nhất`},m=o(()=>{let{table:o,totalRows:m}=r(),{rowSelectionState:g}=n(),{isOpen:_,toggle:v}=t(),y=s(()=>o.getRowModel().rows,[o]),b=s(()=>o.getSelectedRowModel().flatRows,[o,g]),x=s(()=>o.getHeaderGroups()[0]?.headers??[],[o]),S=s(()=>x.filter(e=>![`select`,`actions`].includes(e.id)).flatMap(e=>{let t=e.column.columnDef.meta?.aggregation;if(!t)return[];let n=t.label??(typeof e.column.columnDef.header==`string`?e.column.columnDef.header:e.id),r=f(y,e.id),i=b.length>0?f(b,e.id):null;return[{colId:e.id,header:n,aggregation:t,allValue:d(y.length,r,t.type),selectedValue:i===null?null:d(b.length,i,t.type)}]}),[x,y,b]);return u(`div`,{"data-slot":`table-analysis-panel`,className:`w-full border-t border-border`,children:[u(`button`,{type:`button`,className:c(`flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive`,`hover:bg-muted-bg-subtle transition-colors outline-none`,`focus-visible:ring-2 focus-visible:ring-primary-weak`),onClick:v,"aria-expanded":_,children:[l(`span`,{children:`Tổng quan dữ liệu`}),l(_?a:i,{size:14})]}),_&&u(`div`,{className:`px-4 pb-4 pt-2 space-y-4`,children:[u(`div`,{className:`flex flex-wrap gap-4`,children:[l(h,{label:`Tổng bản ghi`,value:m??y.length}),l(h,{label:`Hàng hiển thị`,value:y.length}),l(h,{label:`Hàng đã chọn`,value:b.length,highlight:b.length>0})]}),S.length>0&&u(`div`,{children:[l(`p`,{className:`mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak`,children:`Tóm tắt cột`}),l(`div`,{className:`overflow-x-auto rounded-md border border-border`,children:u(`table`,{className:`w-full text-sm`,children:[l(`thead`,{children:u(`tr`,{className:`border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak`,children:[l(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Cột`}),l(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Kiểu`}),l(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Tất cả hàng`}),b.length>0&&l(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Hàng đã chọn`})]})}),l(`tbody`,{children:S.map((t,n)=>u(`tr`,{className:c(`border-b border-border last:border-b-0`,n%2==1&&`bg-muted-bg-subtle/50`),children:[l(`td`,{className:`px-3 py-2 text-text-positive font-medium`,children:t.header}),l(`td`,{className:`px-3 py-2 text-text-positive-weak`,children:p[t.aggregation.type]}),l(`td`,{className:`px-3 py-2 text-right`,children:l(e,{value:t.allValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})}),b.length>0&&l(`td`,{className:`px-3 py-2 text-right`,children:t.selectedValue===null?l(`span`,{className:`text-text-positive-weak`,children:`—`}):l(e,{value:t.selectedValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})})]},t.colId))})]})})]})]})]})});m.displayName=`UITableAnalysisPanel`;const h=o(({label:e,value:t,highlight:n})=>u(`div`,{className:c(`flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white`,n&&t>0?`border-primary bg-primary-bg-subtle`:`border-border bg-white`),children:[l(`span`,{className:`text-[11px] text-text-positive-weak`,children:e}),l(`span`,{className:`text-base font-semibold tabular-nums text-text-positive-strong`,children:t.toLocaleString()})]}));h.displayName=`StatChip`;export{m as UITableAnalysisPanel};
+//# sourceMappingURL=analysis-panel-ikcRtzG9.mjs.map

package/dist/analysis-panel-ikcRtzG9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"analysis-panel-ikcRtzG9.mjs","names":[],"sources":["../packages/components/features/tables/components/table/analysis-panel.tsx"],"sourcesContent":["'use client';\nimport { memo, useMemo } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { AnyEntity } from '@/types';\nimport { Statistic } from '@/components/data-display/statistic';\n\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\n\nfunction computeAggregation(rowCount: number, values: number[], type: ColumnAggregationType): number {\n  switch (type) {\n    case 'count':\n      return rowCount;\n    case 'sum':\n      return values.reduce((a, b) => a + b, 0);\n    case 'avg':\n      return values.length === 0 ? 0 : values.reduce((a, b) => a + b, 0) / values.length;\n    case 'min':\n      return values.length === 0 ? 0 : Math.min(...values);\n    case 'max':\n      return values.length === 0 ? 0 : Math.max(...values);\n  }\n}\n\nfunction extractNumericValues(rows: { getValue: (id: string) => unknown }[], colId: string): number[] {\n  return rows\n    .map(r => {\n      const v = r.getValue(colId);\n      const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN;\n      return n;\n    })\n    .filter(n => !Number.isNaN(n));\n}\n\ntype AggregationLabel = {\n  colId: string;\n  header: string;\n  aggregation: ColumnAggregation;\n  allValue: number;\n  selectedValue: number | null;\n};\n\nconst typeLabels: Record<ColumnAggregationType, string> = {\n  sum: 'Tổng',\n  avg: 'Trung bình',\n  count: 'Đếm',\n  min: 'Nhỏ nhất',\n  max: 'Lớn nhất',\n};\n\nexport const UITableAnalysisPanel = memo(() => {\n  const { table, totalRows } = useUITableContext();\n  const { rowSelectionState } = useUITableBodyContext();\n  const { isOpen, toggle } = useUITableAnalysisContext();\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: row model\n  const allRows = useMemo(() => table.getRowModel().rows, [table]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: selected rows\n  const selectedRows = useMemo(() => table.getSelectedRowModel().flatRows, [table, rowSelectionState]);\n\n  const headers = useMemo(() => table.getHeaderGroups()[0]?.headers ?? [], [table]);\n\n  const aggregationRows = useMemo<AggregationLabel[]>(() => {\n    return headers\n      .filter(h => !['select', 'actions'].includes(h.id))\n      .flatMap(header => {\n        const agg = (header.column.columnDef.meta as AnyEntity)?.aggregation as ColumnAggregation | undefined;\n        if (!agg) return [];\n\n        const headerText = agg.label ?? (typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.id);\n\n        const allValues = extractNumericValues(allRows, header.id);\n        const selectedValues = selectedRows.length > 0 ? extractNumericValues(selectedRows, header.id) : null;\n\n        return [\n          {\n            colId: header.id,\n            header: headerText,\n            aggregation: agg,\n            allValue: computeAggregation(allRows.length, allValues, agg.type),\n            selectedValue: selectedValues !== null ? computeAggregation(selectedRows.length, selectedValues, agg.type) : null,\n          },\n        ];\n      });\n  }, [headers, allRows, selectedRows]);\n\n  return (\n    <div data-slot=\"table-analysis-panel\" className=\"w-full border-t border-border\">\n      <button\n        type=\"button\"\n        className={cn(\n          'flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive',\n          'hover:bg-muted-bg-subtle transition-colors outline-none',\n          'focus-visible:ring-2 focus-visible:ring-primary-weak'\n        )}\n        onClick={toggle}\n        aria-expanded={isOpen}\n      >\n        <span>Tổng quan dữ liệu</span>\n        {isOpen ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />}\n      </button>\n\n      {isOpen && (\n        <div className=\"px-4 pb-4 pt-2 space-y-4\">\n          {/* Row summary */}\n          <div className=\"flex flex-wrap gap-4\">\n            <StatChip label=\"Tổng bản ghi\" value={totalRows ?? allRows.length} />\n            <StatChip label=\"Hàng hiển thị\" value={allRows.length} />\n            <StatChip label=\"Hàng đã chọn\" value={selectedRows.length} highlight={selectedRows.length > 0} />\n          </div>\n\n          {/* Column aggregations */}\n          {aggregationRows.length > 0 && (\n            <div>\n              <p className=\"mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak\">Tóm tắt cột</p>\n              <div className=\"overflow-x-auto rounded-md border border-border\">\n                <table className=\"w-full text-sm\">\n                  <thead>\n                    <tr className=\"border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak\">\n                      <th className=\"px-3 py-2 text-left font-medium\">Cột</th>\n                      <th className=\"px-3 py-2 text-left font-medium\">Kiểu</th>\n                      <th className=\"px-3 py-2 text-right font-medium\">Tất cả hàng</th>\n                      {selectedRows.length > 0 && <th className=\"px-3 py-2 text-right font-medium\">Hàng đã chọn</th>}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {aggregationRows.map((row, idx) => (\n                      <tr key={row.colId} className={cn('border-b border-border last:border-b-0', idx % 2 === 1 && 'bg-muted-bg-subtle/50')}>\n                        <td className=\"px-3 py-2 text-text-positive font-medium\">{row.header}</td>\n                        <td className=\"px-3 py-2 text-text-positive-weak\">{typeLabels[row.aggregation.type]}</td>\n                        <td className=\"px-3 py-2 text-right\">\n                          <Statistic\n                            value={row.allValue}\n                            prefix={row.aggregation.prefix}\n                            suffix={row.aggregation.suffix}\n                            precision={row.aggregation.precision}\n                            size=\"sm\"\n                          />\n                        </td>\n                        {selectedRows.length > 0 && (\n                          <td className=\"px-3 py-2 text-right\">\n                            {row.selectedValue !== null ? (\n                              <Statistic\n                                value={row.selectedValue}\n                                prefix={row.aggregation.prefix}\n                                suffix={row.aggregation.suffix}\n                                precision={row.aggregation.precision}\n                                size=\"sm\"\n                              />\n                            ) : (\n                              <span className=\"text-text-positive-weak\">—</span>\n                            )}\n                          </td>\n                        )}\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\nUITableAnalysisPanel.displayName = 'UITableAnalysisPanel';\n\nconst StatChip = memo<{ label: string; value: number; highlight?: boolean }>(({ label, value, highlight }) => (\n  <div\n    className={cn(\n      'flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white',\n      highlight && value > 0 ? 'border-primary bg-primary-bg-subtle' : 'border-border bg-white'\n    )}\n  >\n    <span className=\"text-[11px] text-text-positive-weak\">{label}</span>\n    <span className=\"text-base font-semibold tabular-nums text-text-positive-strong\">{value.toLocaleString()}</span>\n  </div>\n));\nStatChip.displayName = 'StatChip';\n"],"mappings":"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"}

package/dist/aspect-ratio-huscluwJ.d.cts

@@ -0,0 +1,22 @@
+import { AspectRatio } from "radix-ui";
+
+//#region packages/components/ui/aspect-ratio.d.ts
+/**
+ * Constrains its child to a given aspect ratio using the Radix UI AspectRatio primitive.
+ *
+ * @example
+ * ```tsx
+ * import { AspectRatio } from '@customafk/lunas-ui/ui/aspect-ratio';
+ *
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="/banner.jpg" alt="Banner" className="size-full object-cover" />
+ * </AspectRatio>
+ * ```
+ */
+declare function AspectRatio$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof AspectRatio.Root>): import("react").JSX.Element;
+//#endregion
+export { AspectRatio$1 as t };
+//# sourceMappingURL=aspect-ratio-huscluwJ.d.cts.map

package/dist/aspect-ratio-huscluwJ.d.mts

@@ -0,0 +1,22 @@
+import { AspectRatio } from "radix-ui";
+
+//#region packages/components/ui/aspect-ratio.d.ts
+/**
+ * Constrains its child to a given aspect ratio using the Radix UI AspectRatio primitive.
+ *
+ * @example
+ * ```tsx
+ * import { AspectRatio } from '@customafk/lunas-ui/ui/aspect-ratio';
+ *
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="/banner.jpg" alt="Banner" className="size-full object-cover" />
+ * </AspectRatio>
+ * ```
+ */
+declare function AspectRatio$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof AspectRatio.Root>): import("react").JSX.Element;
+//#endregion
+export { AspectRatio$1 as t };
+//# sourceMappingURL=aspect-ratio-huscluwJ.d.mts.map

package/dist/avatar-BpeFwSkQ.d.cts

@@ -0,0 +1,33 @@
+import { Avatar } from "radix-ui";
+
+//#region packages/components/ui/avatar.d.ts
+/**
+ * Circular user avatar built on Radix UI's Avatar primitives, falling back to initials or an icon when the image fails to load.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback } from '@customafk/lunas-ui/ui/avatar';
+ *
+ * <Avatar>
+ *   <AvatarImage src="https://example.com/avatar.jpg" alt="Jane Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+declare function Avatar$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Avatar.Root>): import("react").JSX.Element;
+/** The avatar photo; hidden automatically by Radix UI when the image fails to load, revealing `AvatarFallback`. */
+declare function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof Avatar.Image>): import("react").JSX.Element;
+/** Fallback content (e.g. initials) displayed inside the avatar when the image is unavailable or still loading. */
+declare function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof Avatar.Fallback>): import("react").JSX.Element;
+//#endregion
+export { AvatarFallback as n, AvatarImage as r, Avatar$1 as t };
+//# sourceMappingURL=avatar-BpeFwSkQ.d.cts.map

package/dist/avatar-BpeFwSkQ.d.mts

@@ -0,0 +1,33 @@
+import { Avatar } from "radix-ui";
+
+//#region packages/components/ui/avatar.d.ts
+/**
+ * Circular user avatar built on Radix UI's Avatar primitives, falling back to initials or an icon when the image fails to load.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback } from '@customafk/lunas-ui/ui/avatar';
+ *
+ * <Avatar>
+ *   <AvatarImage src="https://example.com/avatar.jpg" alt="Jane Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+declare function Avatar$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Avatar.Root>): import("react").JSX.Element;
+/** The avatar photo; hidden automatically by Radix UI when the image fails to load, revealing `AvatarFallback`. */
+declare function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof Avatar.Image>): import("react").JSX.Element;
+/** Fallback content (e.g. initials) displayed inside the avatar when the image is unavailable or still loading. */
+declare function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof Avatar.Fallback>): import("react").JSX.Element;
+//#endregion
+export { AvatarFallback as n, AvatarImage as r, Avatar$1 as t };
+//# sourceMappingURL=avatar-BpeFwSkQ.d.mts.map

package/dist/avatar-name-display-BrpnTqa_.mjs

@@ -0,0 +1,2 @@
+import{Avatar as e,AvatarFallback as t,AvatarImage as n}from"./ui/avatar.mjs";import{UserRoundIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{colorHashLight as o}from"@customafk/react-toolkit/color-hash";const s=({name:s,avatarUrl:c,uuid:l})=>{let u=o.hex(l??s);return a(`div`,{className:`flex min-w-0 items-center gap-2`,children:[a(e,{className:`size-8 shrink-0`,children:[i(n,{src:c,alt:s}),i(t,{style:{backgroundColor:u},children:i(r,{size:18,className:`text-white`})})]}),i(`span`,{className:`truncate text-sm font-medium`,children:s})]})};export{s as UITableAvatarNameDisplay};
+//# sourceMappingURL=avatar-name-display-BrpnTqa_.mjs.map

package/dist/avatar-name-display-BrpnTqa_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-name-display-BrpnTqa_.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/avatar-name-display.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\n\n/** Props for the {@link UITableAvatarNameDisplay} component. */\ntype Props = {\n  /** Display name shown beside the avatar. */\n  name: string;\n  /** Optional image URL for the avatar. Falls back to a color-hashed icon when absent. */\n  avatarUrl?: string;\n  /** Seed for deterministic avatar background color generation. Defaults to `name`. */\n  uuid?: string;\n};\n\n/**\n * Renders a circular avatar paired with a name in a compact horizontal row.\n * When no `avatarUrl` is provided the fallback uses a deterministic background\n * color derived from `uuid` (or `name`) via `colorHashLight`, matching the\n * style of `UserDataDisplay`.\n *\n * @example\n * import { UITableAvatarNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableAvatarNameDisplay name=\"Jane Smith\" uuid=\"user-42\" avatarUrl=\"/avatars/jane.png\" />\n */\nexport const UITableAvatarNameDisplay: React.FC<Props> = ({ name, avatarUrl, uuid }) => {\n  const bgColor = colorHashLight.hex(uuid ?? name);\n  return (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      <Avatar className=\"size-8 shrink-0\">\n        <AvatarImage src={avatarUrl} alt={name} />\n        <AvatarFallback style={{ backgroundColor: bgColor }}>\n          <UserRoundIcon size={18} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <span className=\"truncate text-sm font-medium\">{name}</span>\n    </div>\n  );\n};\n"],"mappings":"kPA6BA,MAAa,GAA6C,CAAE,OAAM,YAAW,UAAW,CACtF,IAAM,EAAU,EAAe,IAAI,GAAQ,CAAI,EAC/C,OACE,EAAC,MAAD,CAAK,UAAU,2CAAf,CACE,EAAC,EAAD,CAAQ,UAAU,2BAAlB,CACE,EAAC,EAAD,CAAa,IAAK,EAAW,IAAK,CAAO,CAAA,EACzC,EAAC,EAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAQ,WAChD,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,IACR,EAAC,OAAD,CAAM,UAAU,wCAAgC,CAAW,CAAA,CACxD,GAET"}

package/dist/avatar-name-display-CLi1DJUs.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/avatar.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime"),r=require("@customafk/react-toolkit/color-hash");const i=({name:i,avatarUrl:a,uuid:o})=>{let s=r.colorHashLight.hex(o??i);return(0,n.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,n.jsxs)(e.Avatar,{className:`size-8 shrink-0`,children:[(0,n.jsx)(e.AvatarImage,{src:a,alt:i}),(0,n.jsx)(e.AvatarFallback,{style:{backgroundColor:s},children:(0,n.jsx)(t.UserRoundIcon,{size:18,className:`text-white`})})]}),(0,n.jsx)(`span`,{className:`truncate text-sm font-medium`,children:i})]})};exports.UITableAvatarNameDisplay=i;
+//# sourceMappingURL=avatar-name-display-CLi1DJUs.cjs.map

package/dist/avatar-name-display-CLi1DJUs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-name-display-CLi1DJUs.cjs","names":["colorHashLight","Avatar","AvatarImage","AvatarFallback","UserRoundIcon"],"sources":["../packages/components/features/tables/components/atoms/avatar-name-display.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\n\n/** Props for the {@link UITableAvatarNameDisplay} component. */\ntype Props = {\n  /** Display name shown beside the avatar. */\n  name: string;\n  /** Optional image URL for the avatar. Falls back to a color-hashed icon when absent. */\n  avatarUrl?: string;\n  /** Seed for deterministic avatar background color generation. Defaults to `name`. */\n  uuid?: string;\n};\n\n/**\n * Renders a circular avatar paired with a name in a compact horizontal row.\n * When no `avatarUrl` is provided the fallback uses a deterministic background\n * color derived from `uuid` (or `name`) via `colorHashLight`, matching the\n * style of `UserDataDisplay`.\n *\n * @example\n * import { UITableAvatarNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableAvatarNameDisplay name=\"Jane Smith\" uuid=\"user-42\" avatarUrl=\"/avatars/jane.png\" />\n */\nexport const UITableAvatarNameDisplay: React.FC<Props> = ({ name, avatarUrl, uuid }) => {\n  const bgColor = colorHashLight.hex(uuid ?? name);\n  return (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      <Avatar className=\"size-8 shrink-0\">\n        <AvatarImage src={avatarUrl} alt={name} />\n        <AvatarFallback style={{ backgroundColor: bgColor }}>\n          <UserRoundIcon size={18} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <span className=\"truncate text-sm font-medium\">{name}</span>\n    </div>\n  );\n};\n"],"mappings":"iJA6BA,MAAa,GAA6C,CAAE,OAAM,YAAW,UAAW,CACtF,IAAM,EAAUA,EAAAA,eAAe,IAAI,GAAQ,CAAI,EAC/C,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,UAAU,2BAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,IAAK,EAAW,IAAK,CAAO,CAAA,GACzC,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAQ,YAChD,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,KACR,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wCAAgC,CAAW,CAAA,CACxD,GAET"}

package/dist/{badge-D0InQSvM.d.cts → badge-MRT40pxM.d.cts}

@@ -2,8 +2,8 @@ import { VariantProps } from "class-variance-authority";
 
 //#region packages/components/ui/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "outline" | "solid" | "soft" | null | undefined;
-  color?: "muted" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "danger" | null | undefined;
+  variant?: "solid" | "soft" | "outline" | null | undefined;
+  color?: "primary" | "secondary" | "muted" | "accent" | "info" | "success" | "warning" | "danger" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   pill?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -37,4 +37,4 @@ declare function Badge({
 }: BadgeProps): import("react").JSX.Element;
 //#endregion
 export { BadgeProps as n, badgeVariants as r, Badge as t };
-//# sourceMappingURL=badge-D0InQSvM.d.cts.map
+//# sourceMappingURL=badge-MRT40pxM.d.cts.map