@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/phone-number-6b_pkGI1.d.cts

@@ -0,0 +1,18 @@
+//#region packages/components/data-display/phone-number.d.ts
+type PhoneNumberDisplayProps = {
+  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */value: string;
+};
+/**
+ * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
+ *
+ * @example
+ * ```tsx
+ * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';
+ *
+ * <PhoneNumberDisplay value="0901234567" />
+ * ```
+ */
+declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
+//#endregion
+export { PhoneNumberDisplay as t };
+//# sourceMappingURL=phone-number-6b_pkGI1.d.cts.map

package/dist/phone-number-6b_pkGI1.d.mts

@@ -0,0 +1,18 @@
+//#region packages/components/data-display/phone-number.d.ts
+type PhoneNumberDisplayProps = {
+  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */value: string;
+};
+/**
+ * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
+ *
+ * @example
+ * ```tsx
+ * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';
+ *
+ * <PhoneNumberDisplay value="0901234567" />
+ * ```
+ */
+declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
+//#endregion
+export { PhoneNumberDisplay as t };
+//# sourceMappingURL=phone-number-6b_pkGI1.d.mts.map

package/dist/phone-number-C43z68gT.mjs

@@ -0,0 +1,2 @@
+import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"./ui/tooltip.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({value:a})=>i(e,{children:[r(n,{asChild:!0,children:r(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:a.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),r(t,{align:`start`,children:r(`p`,{className:`tabular-nums`,children:a.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});export{a as UITablePhoneNumberDisplay};
+//# sourceMappingURL=phone-number-C43z68gT.mjs.map

package/dist/phone-number-C43z68gT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-number-C43z68gT.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation.\n *\n * @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePhoneNumberDisplay value=\"0843456789\" />\n */\nexport const UITablePhoneNumberDisplay: React.FC<\n  React.PropsWithChildren<{\n    /** The raw phone number string to format and display. */\n    value: string;\n  }>\n> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"qIAYA,MAAa,GAKR,CAAE,WAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,IAAD,CAAG,UAAU,+DAAuD,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,iBACpB,EAAC,IAAD,CAAG,UAAU,wBAAgB,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,uBAAuB,CAAK,CAAA,CAC3F,CAAA,CACT,CAAA,CAAA"}

package/dist/phone-number-DhThJwd6.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/tooltip.cjs");let t=require("react/jsx-runtime");const n=({value:n})=>(0,t.jsxs)(e.Tooltip,{children:[(0,t.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,t.jsx)(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:n.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,t.jsx)(e.TooltipContent,{align:`start`,children:(0,t.jsx)(`p`,{className:`tabular-nums`,children:n.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});exports.UITablePhoneNumberDisplay=n;
+//# sourceMappingURL=phone-number-DhThJwd6.cjs.map

package/dist/phone-number-DhThJwd6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-number-DhThJwd6.cjs","names":["Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation.\n *\n * @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITablePhoneNumberDisplay value=\"0843456789\" />\n */\nexport const UITablePhoneNumberDisplay: React.FC<\n  React.PropsWithChildren<{\n    /** The raw phone number string to format and display. */\n    value: string;\n  }>\n> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"uEAYA,MAAa,GAKR,CAAE,YAEH,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,kBACpB,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,wBAAgB,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,uBAAuB,CAAK,CAAA,CAC3F,CAAA,CACT,CAAA,CAAA"}

package/dist/popover-CdOCi0xg.d.cts

@@ -0,0 +1,50 @@
+import { Popover } from "radix-ui";
+
+//#region packages/components/ui/popover.d.ts
+/**
+ * Floating panel built on Radix UI's Popover primitives, anchored to a trigger element with animated open/close transitions.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Popover, PopoverTrigger, PopoverContent, PopoverClose,
+ * } from '@customafk/lunas-ui/ui/popover';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button variant="outline">Open popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverClose />
+ *     <p>Popover body content goes here.</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare function Popover$1({
+  ...props
+}: React.ComponentProps<typeof Popover.Root>): import("react").JSX.Element;
+/** Element that opens or closes the popover on click; use `asChild` to render a custom trigger element. */
+declare function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof Popover.Trigger>): import("react").JSX.Element;
+/** Floating content panel rendered in a portal, matching the trigger width and animated on open/close. */
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Popover.Content>): import("react").JSX.Element;
+/** Optional anchor element that overrides the trigger as the popover's positioning reference point. */
+declare function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof Popover.Anchor>): import("react").JSX.Element;
+/** Close button pre-positioned at the top-right corner of `PopoverContent` using the shared `CloseButton` primitive. */
+declare function PopoverClose({
+  className,
+  ...props
+}: React.ComponentProps<typeof Popover.Close>): import("react").JSX.Element;
+//#endregion
+export { PopoverTrigger as a, PopoverContent as i, PopoverAnchor as n, PopoverClose as r, Popover$1 as t };
+//# sourceMappingURL=popover-CdOCi0xg.d.cts.map

package/dist/popover-CdOCi0xg.d.mts

@@ -0,0 +1,50 @@
+import { Popover } from "radix-ui";
+
+//#region packages/components/ui/popover.d.ts
+/**
+ * Floating panel built on Radix UI's Popover primitives, anchored to a trigger element with animated open/close transitions.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Popover, PopoverTrigger, PopoverContent, PopoverClose,
+ * } from '@customafk/lunas-ui/ui/popover';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button variant="outline">Open popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverClose />
+ *     <p>Popover body content goes here.</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare function Popover$1({
+  ...props
+}: React.ComponentProps<typeof Popover.Root>): import("react").JSX.Element;
+/** Element that opens or closes the popover on click; use `asChild` to render a custom trigger element. */
+declare function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof Popover.Trigger>): import("react").JSX.Element;
+/** Floating content panel rendered in a portal, matching the trigger width and animated on open/close. */
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof Popover.Content>): import("react").JSX.Element;
+/** Optional anchor element that overrides the trigger as the popover's positioning reference point. */
+declare function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof Popover.Anchor>): import("react").JSX.Element;
+/** Close button pre-positioned at the top-right corner of `PopoverContent` using the shared `CloseButton` primitive. */
+declare function PopoverClose({
+  className,
+  ...props
+}: React.ComponentProps<typeof Popover.Close>): import("react").JSX.Element;
+//#endregion
+export { PopoverTrigger as a, PopoverContent as i, PopoverAnchor as n, PopoverClose as r, Popover$1 as t };
+//# sourceMappingURL=popover-CdOCi0xg.d.mts.map

package/dist/popover-form-B2taDBAh.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./close-DYJZ8fkh.mjs";import{K as t}from"./tanstack-form-PC9YNeeo.mjs";import{n,t as r}from"./submit-button-CGBaPzE9.mjs";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Dialog as s}from"radix-ui";const c=({title:c,open:l,contentClassName:u,onOpenChange:d,children:f})=>{let p=t();return a(s.Root,{"data-slot":`dialog`,open:l,onOpenChange:d,children:o(s.Portal,{"data-slot":`dialog-portal`,children:[a(s.Overlay,{"data-slot":`dialog-overlay`,className:i(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),a(s.Content,{"data-slot":`dialog-content`,className:i(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:o(`section`,{className:`relative flex size-full flex-col`,children:[a(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:a(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:c})}),a(`div`,{className:i(`flex flex-1 flex-col overflow-y-auto py-4`,u),children:f}),o(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[a(p.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>a(r,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>p.handleSubmit()})}),a(p.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>a(n,{disabled:e,className:`w-full`,onClick:()=>{p.reset(),d?.(!1)}})})]}),a(s.Close,{asChild:!0,children:a(e,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
+//# sourceMappingURL=popover-form-B2taDBAh.mjs.map

package/dist/popover-form-B2taDBAh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-form-B2taDBAh.mjs","names":["DialogPrimitive"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"qRAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAO,EAAuB,EAEpC,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,wBACjE,EAACA,EAAgB,OAAjB,CAAwB,YAAU,yBAAlC,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,kDACA,yDACA,8DACF,CACD,CAAA,EACD,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,yHACA,eACA,+FACA,qGACF,WAEA,EAAC,UAAD,CAAS,UAAU,4CAAnB,CACE,EAAC,SAAD,CAAQ,UAAU,uEAChB,EAAC,KAAD,CAAI,UAAU,qEAA6D,CAAU,CAAA,CAC/E,CAAA,EAER,EAAC,MAAD,CAAK,UAAW,EAAG,4CAA6C,CAAgB,EAAI,UAAc,CAAA,EAElG,EAAC,MAAD,CAAK,UAAU,yEAAf,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,IAEL,EAACA,EAAgB,MAAjB,CAAuB,QAAA,YACrB,EAAC,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/popover-form-_hQQpfAB.cjs

@@ -0,0 +1,2 @@
+const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-CNrZQZhn.cjs"),n=require("./submit-button-CvINfld5.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("radix-ui");const o=({title:o,open:s,contentClassName:c,onOpenChange:l,children:u})=>{let d=t.K();return(0,i.jsx)(a.Dialog.Root,{"data-slot":`dialog`,open:s,onOpenChange:l,children:(0,i.jsxs)(a.Dialog.Portal,{"data-slot":`dialog-portal`,children:[(0,i.jsx)(a.Dialog.Overlay,{"data-slot":`dialog-overlay`,className:(0,r.cn)(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),(0,i.jsx)(a.Dialog.Content,{"data-slot":`dialog-content`,className:(0,r.cn)(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:(0,i.jsxs)(`section`,{className:`relative flex size-full flex-col`,children:[(0,i.jsx)(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:(0,i.jsx)(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:o})}),(0,i.jsx)(`div`,{className:(0,r.cn)(`flex flex-1 flex-col overflow-y-auto py-4`,c),children:u}),(0,i.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[(0,i.jsx)(d.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,i.jsx)(n.t,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>d.handleSubmit()})}),(0,i.jsx)(d.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>(0,i.jsx)(n.n,{disabled:e,className:`w-full`,onClick:()=>{d.reset(),l?.(!1)}})})]}),(0,i.jsx)(a.Dialog.Close,{asChild:!0,children:(0,i.jsx)(e.t,{className:`absolute top-2.5 right-3`})})]})})]})})};exports.TanStackPopoverForm=o;
+//# sourceMappingURL=popover-form-_hQQpfAB.cjs.map

package/dist/popover-form-_hQQpfAB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-form-_hQQpfAB.cjs","names":["useTanStackFormContext","DialogPrimitive","SubmitButton","CancelButton","CloseButton"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/**\n * Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n *\n * @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackPopoverForm\n *   title=\"Edit Profile\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n * >\n *   <EmailField />\n * </TanStackPopoverForm>\n */\nexport const TanStackPopoverForm: React.FC<\n  React.PropsWithChildren<{\n    /** Heading text displayed in the panel header. */\n    title: string;\n    /** Controlled open state of the popover dialog. */\n    open?: boolean;\n    /** Additional CSS class names applied to the scrollable content area. */\n    contentClassName?: string;\n    /** Callback fired when the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n  }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n  const form = useTanStackFormContext();\n\n  return (\n    <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"dialog-overlay\"\n          className={cn(\n            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n            'data-[state=open]:animate-in data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n            'duration-300',\n            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n          )}\n        >\n          <section className=\"relative flex size-full flex-col\">\n            <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n              <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n            </header>\n\n            <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n            <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n              <form.Subscribe\n                selector={state => ({\n                  isSubmitting: state.isSubmitting,\n                  disabled: state.isPristine || !state.isValid || state.isValidating || state.isSubmitting || !state.canSubmit,\n                })}\n                children={({ isSubmitting, disabled }) => (\n                  <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n                )}\n              />\n              <form.Subscribe\n                selector={state => ({ disabled: state.isPristine || state.isSubmitting })}\n                children={({ disabled }) => (\n                  <CancelButton\n                    disabled={disabled}\n                    className=\"w-full\"\n                    onClick={() => {\n                      form.reset();\n                      onOpenChange?.(false);\n                    }}\n                  />\n                )}\n              />\n            </div>\n\n            <DialogPrimitive.Close asChild>\n              <CloseButton className=\"absolute top-2.5 right-3\" />\n            </DialogPrimitive.Close>\n          </section>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n"],"mappings":"iOAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAOA,EAAAA,EAAuB,EAEpC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,yBACjE,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAgB,OAAjB,CAAwB,YAAU,yBAAlC,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,kDACA,yDACA,8DACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,yHACA,eACA,+FACA,qGACF,YAEA,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAU,4CAAnB,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,wEAChB,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,qEAA6D,CAAU,CAAA,CAC/E,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,4CAA6C,CAAgB,EAAI,UAAc,CAAA,GAElG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,yEAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,KAEL,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAgB,MAAjB,CAAuB,QAAA,aACrB,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/portfolio-allocation-treemap-Bn0X4wb6.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=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),s=({data:s,valueFormatter:c=e.formatCompactNumber,showLabels:l=!0,className:u,animate:d=!0,height:f})=>{let{chartData:p,config:m}=(0,n.useMemo)(()=>{let t=s.map((t,n)=>({...t,key:o(t),fill:t.color||e.getChartColor(n)}));return{chartData:t,config:Object.fromEntries(t.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[s]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`portfolio-allocation-treemap`,config:m,className:(0,r.cn)(`w-full`,u),style:f===void 0?void 0:{height:f,aspectRatio:`auto`},children:(0,i.jsx)(a.Treemap,{data:p,dataKey:`value`,nameKey:`key`,isAnimationActive:d,content:e=>{if(e.depth!==1)return(0,i.jsx)(`g`,{});let t=p.find(t=>t.key===e.name),n=l&&e.width>=36&&e.height>=24;return(0,i.jsxs)(`g`,{children:[(0,i.jsx)(`rect`,{x:e.x,y:e.y,width:e.width,height:e.height,fill:t?.fill,stroke:`var(--background)`}),n&&(0,i.jsx)(`text`,{x:e.x+6,y:e.y+16,className:`fill-white font-medium text-xs`,children:t?.name}),n&&e.height>40&&(0,i.jsx)(`text`,{x:e.x+6,y:e.y+32,className:`fill-white/80 font-number text-[11px]`,children:c(e.value)})]})},children:(0,i.jsx)(t.ChartTooltip,{content:(0,i.jsx)(t.ChartTooltipContent,{nameKey:`key`,hideLabel:!0,formatter:e=>c(Number(e))})})})})};exports.PortfolioAllocationTreemap=s;
+//# sourceMappingURL=portfolio-allocation-treemap-Bn0X4wb6.cjs.map

package/dist/portfolio-allocation-treemap-Bn0X4wb6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"portfolio-allocation-treemap-Bn0X4wb6.cjs","names":["formatCompactNumber","getChartColor","ChartContainer","Treemap","ChartTooltip","ChartTooltipContent"],"sources":["../packages/components/features/charts/components/portfolio-allocation-treemap.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 type { TreemapNode } from 'recharts';\nimport { Treemap } from 'recharts';\nimport type { BaseChartProps, PortfolioHolding } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type PortfolioAllocationTreemapProps = BaseChartProps & {\n  data: PortfolioHolding[];\n  valueFormatter?: (value: number) => string;\n  /** Shows the holding name and formatted value inside each rect when it fits. Defaults to `true`. */\n  showLabels?: boolean;\n};\n\nconst toKey = (holding: PortfolioHolding): string => holding.key || holding.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/**\n * A treemap for portfolio holdings / asset allocation, sized by weight — clearer than a donut\n * once there are more than a handful of positions.\n *\n * @example\n * ```tsx\n * import { PortfolioAllocationTreemap } from '@customafk/lunas-ui/features/charts';\n *\n * <PortfolioAllocationTreemap\n *   data={[\n *     { name: 'AAPL', value: 24000 },\n *     { name: 'MSFT', value: 18500 },\n *     { name: 'Bonds', value: 12000 },\n *   ]}\n * />\n * ```\n */\nexport const PortfolioAllocationTreemap = ({\n  data,\n  valueFormatter = formatCompactNumber,\n  showLabels = true,\n  className,\n  animate = true,\n  height,\n}: PortfolioAllocationTreemapProps) => {\n  const { chartData, config } = useMemo(() => {\n    const entries = data.map((holding, index) => ({\n      ...holding,\n      key: toKey(holding),\n      fill: holding.color || getChartColor(index),\n    }));\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data]);\n\n  const renderContent = (node: TreemapNode) => {\n    if (node.depth !== 1) return <g />;\n    const holding = chartData.find(entry => entry.key === node.name);\n    const fitsLabel = showLabels && node.width >= 36 && node.height >= 24;\n\n    return (\n      <g>\n        <rect x={node.x} y={node.y} width={node.width} height={node.height} fill={holding?.fill} stroke=\"var(--background)\" />\n        {fitsLabel && (\n          <text x={node.x + 6} y={node.y + 16} className=\"fill-white font-medium text-xs\">\n            {holding?.name}\n          </text>\n        )}\n        {fitsLabel && node.height > 40 && (\n          <text x={node.x + 6} y={node.y + 32} className=\"fill-white/80 font-number text-[11px]\">\n            {valueFormatter(node.value)}\n          </text>\n        )}\n      </g>\n    );\n  };\n\n  return (\n    <ChartContainer\n      data-slot=\"portfolio-allocation-treemap\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Treemap data={chartData} dataKey=\"value\" nameKey=\"key\" isAnimationActive={animate} content={renderContent}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel formatter={value => valueFormatter(Number(value))} />} />\n      </Treemap>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAoBA,MAAM,EAAS,GAAsC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAmB5G,GAA8B,CACzC,OACA,iBAAiBA,EAAAA,oBACjB,aAAa,GACb,YACA,UAAU,GACV,YACqC,CACrC,GAAM,CAAE,YAAW,WAAA,EAAA,EAAA,QAAA,KAAyB,CAC1C,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAASC,EAAAA,cAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,CAAI,CAAC,EAwBT,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,+BACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,kBAAmB,EAAS,QA7BjE,GAAsB,CAC3C,GAAI,EAAK,QAAU,EAAG,OAAO,EAAA,EAAA,IAAA,CAAC,IAAD,CAAI,CAAA,EACjC,IAAM,EAAU,EAAU,KAAK,GAAS,EAAM,MAAQ,EAAK,IAAI,EACzD,EAAY,GAAc,EAAK,OAAS,IAAM,EAAK,QAAU,GAEnE,OACE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAK,EAAG,EAAG,EAAK,EAAG,MAAO,EAAK,MAAO,OAAQ,EAAK,OAAQ,KAAM,GAAS,KAAM,OAAO,mBAAqB,CAAA,EACpH,IACC,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAK,EAAI,EAAG,EAAG,EAAK,EAAI,GAAI,UAAU,0CAC5C,GAAS,IACN,CAAA,EAEP,GAAa,EAAK,OAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAK,EAAI,EAAG,EAAG,EAAK,EAAI,GAAI,UAAU,iDAC5C,EAAe,EAAK,KAAK,CACtB,CAAA,CAEP,CAAA,CAAA,CAEP,YAUM,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,GAAU,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,CACrH,CAAA,CACK,CAAA,CAEpB"}

package/dist/portfolio-allocation-treemap-Cb9Kidrl.mjs

@@ -0,0 +1,2 @@
+import{formatCompactNumber as e,getChartColor as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartTooltip as r,ChartTooltipContent as i}from"./ui/chart.mjs";import{useMemo as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{Treemap as l}from"recharts";const u=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),d=({data:d,valueFormatter:f=e,showLabels:p=!0,className:m,animate:h=!0,height:g})=>{let{chartData:_,config:v}=a(()=>{let e=d.map((e,n)=>({...e,key:u(e),fill:e.color||t(n)}));return{chartData:e,config:Object.fromEntries(e.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[d]);return s(n,{"data-slot":`portfolio-allocation-treemap`,config:v,className:o(`w-full`,m),style:g===void 0?void 0:{height:g,aspectRatio:`auto`},children:s(l,{data:_,dataKey:`value`,nameKey:`key`,isAnimationActive:h,content:e=>{if(e.depth!==1)return s(`g`,{});let t=_.find(t=>t.key===e.name),n=p&&e.width>=36&&e.height>=24;return c(`g`,{children:[s(`rect`,{x:e.x,y:e.y,width:e.width,height:e.height,fill:t?.fill,stroke:`var(--background)`}),n&&s(`text`,{x:e.x+6,y:e.y+16,className:`fill-white font-medium text-xs`,children:t?.name}),n&&e.height>40&&s(`text`,{x:e.x+6,y:e.y+32,className:`fill-white/80 font-number text-[11px]`,children:f(e.value)})]})},children:s(r,{content:s(i,{nameKey:`key`,hideLabel:!0,formatter:e=>f(Number(e))})})})})};export{d as PortfolioAllocationTreemap};
+//# sourceMappingURL=portfolio-allocation-treemap-Cb9Kidrl.mjs.map

package/dist/portfolio-allocation-treemap-Cb9Kidrl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"portfolio-allocation-treemap-Cb9Kidrl.mjs","names":[],"sources":["../packages/components/features/charts/components/portfolio-allocation-treemap.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 type { TreemapNode } from 'recharts';\nimport { Treemap } from 'recharts';\nimport type { BaseChartProps, PortfolioHolding } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type PortfolioAllocationTreemapProps = BaseChartProps & {\n  data: PortfolioHolding[];\n  valueFormatter?: (value: number) => string;\n  /** Shows the holding name and formatted value inside each rect when it fits. Defaults to `true`. */\n  showLabels?: boolean;\n};\n\nconst toKey = (holding: PortfolioHolding): string => holding.key || holding.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/**\n * A treemap for portfolio holdings / asset allocation, sized by weight — clearer than a donut\n * once there are more than a handful of positions.\n *\n * @example\n * ```tsx\n * import { PortfolioAllocationTreemap } from '@customafk/lunas-ui/features/charts';\n *\n * <PortfolioAllocationTreemap\n *   data={[\n *     { name: 'AAPL', value: 24000 },\n *     { name: 'MSFT', value: 18500 },\n *     { name: 'Bonds', value: 12000 },\n *   ]}\n * />\n * ```\n */\nexport const PortfolioAllocationTreemap = ({\n  data,\n  valueFormatter = formatCompactNumber,\n  showLabels = true,\n  className,\n  animate = true,\n  height,\n}: PortfolioAllocationTreemapProps) => {\n  const { chartData, config } = useMemo(() => {\n    const entries = data.map((holding, index) => ({\n      ...holding,\n      key: toKey(holding),\n      fill: holding.color || getChartColor(index),\n    }));\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data]);\n\n  const renderContent = (node: TreemapNode) => {\n    if (node.depth !== 1) return <g />;\n    const holding = chartData.find(entry => entry.key === node.name);\n    const fitsLabel = showLabels && node.width >= 36 && node.height >= 24;\n\n    return (\n      <g>\n        <rect x={node.x} y={node.y} width={node.width} height={node.height} fill={holding?.fill} stroke=\"var(--background)\" />\n        {fitsLabel && (\n          <text x={node.x + 6} y={node.y + 16} className=\"fill-white font-medium text-xs\">\n            {holding?.name}\n          </text>\n        )}\n        {fitsLabel && node.height > 40 && (\n          <text x={node.x + 6} y={node.y + 32} className=\"fill-white/80 font-number text-[11px]\">\n            {valueFormatter(node.value)}\n          </text>\n        )}\n      </g>\n    );\n  };\n\n  return (\n    <ChartContainer\n      data-slot=\"portfolio-allocation-treemap\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Treemap data={chartData} dataKey=\"value\" nameKey=\"key\" isAnimationActive={animate} content={renderContent}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel formatter={value => valueFormatter(Number(value))} />} />\n      </Treemap>\n    </ChartContainer>\n  );\n};\n"],"mappings":"yVAoBA,MAAM,EAAS,GAAsC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAmB5G,GAA8B,CACzC,OACA,iBAAiB,EACjB,aAAa,GACb,YACA,UAAU,GACV,YACqC,CACrC,GAAM,CAAE,YAAW,UAAW,MAAc,CAC1C,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAAS,EAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,CAAI,CAAC,EAwBT,OACE,EAAC,EAAD,CACE,YAAU,+BACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAS,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,kBAAmB,EAAS,QA7BjE,GAAsB,CAC3C,GAAI,EAAK,QAAU,EAAG,OAAO,EAAC,IAAD,CAAI,CAAA,EACjC,IAAM,EAAU,EAAU,KAAK,GAAS,EAAM,MAAQ,EAAK,IAAI,EACzD,EAAY,GAAc,EAAK,OAAS,IAAM,EAAK,QAAU,GAEnE,OACE,EAAC,IAAD,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,EAAG,EAAK,EAAG,EAAG,EAAK,EAAG,MAAO,EAAK,MAAO,OAAQ,EAAK,OAAQ,KAAM,GAAS,KAAM,OAAO,mBAAqB,CAAA,EACpH,GACC,EAAC,OAAD,CAAM,EAAG,EAAK,EAAI,EAAG,EAAG,EAAK,EAAI,GAAI,UAAU,0CAC5C,GAAS,IACN,CAAA,EAEP,GAAa,EAAK,OAAS,IAC1B,EAAC,OAAD,CAAM,EAAG,EAAK,EAAI,EAAG,EAAG,EAAK,EAAI,GAAI,UAAU,iDAC5C,EAAe,EAAK,KAAK,CACtB,CAAA,CAEP,CAAA,CAAA,CAEP,WAUM,EAAC,EAAD,CAAc,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,GAAU,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,CACrH,CAAA,CACK,CAAA,CAEpB"}

package/dist/price-range-area-chart-BW6RQb_9.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=({data:o,label:s=`Close`,rangeLabel:c=`Range`,color:l=`var(--chart-1)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),dateFormatter:d=e.toDateLabel,showGrid:f=!0,className:p,animate:m=!0,height:h})=>{let g=(0,n.useMemo)(()=>({close:{label:s,color:l},rangeSpan:{label:c,color:l}}),[s,l,c]),_=(0,n.useMemo)(()=>o.map(e=>({...e,rangeSpan:e.high-e.low})),[o]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`price-range-area-chart`,config:g,className:(0,r.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,i.jsxs)(a.ComposedChart,{data:_,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:d}),(0,i.jsx)(a.YAxis,{domain:[`auto`,`auto`],tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:u}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?d(n):null},formatter:(e,t,n)=>{if(t!==`close`)return null;let r=n.payload;return(0,i.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,i.jsxs)(`span`,{className:`text-muted`,children:[g.close?.label,` `,(0,i.jsx)(`span`,{className:`font-medium font-number text-text-positive-strong`,children:u(Number(e))})]}),(0,i.jsxs)(`span`,{className:`text-[11px] text-muted`,children:[u(r.low),` – `,u(r.high)]})]})}})}),(0,i.jsx)(a.Area,{dataKey:`low`,stackId:`range`,stroke:`none`,fill:`transparent`,isAnimationActive:m}),(0,i.jsx)(a.Area,{dataKey:`rangeSpan`,stackId:`range`,stroke:`none`,fill:l,fillOpacity:.15,isAnimationActive:m}),(0,i.jsx)(a.Line,{type:`natural`,dataKey:`close`,stroke:l,strokeWidth:2,dot:!1,isAnimationActive:m})]})})};exports.PriceRangeAreaChart=o;
+//# sourceMappingURL=price-range-area-chart-BW6RQb_9.cjs.map

package/dist/price-range-area-chart-BW6RQb_9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-range-area-chart-BW6RQb_9.cjs","names":["toDateLabel","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","Line"],"sources":["../packages/components/features/charts/components/price-range-area-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 { Area, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { toDateLabel } from '../utils';\n\nexport type PriceRangeAreaChartProps = BaseChartProps & {\n  /** Only `date`, `high`, `low`, and `close` are used; pass the same rows given to `CandlestickChart`. */\n  data: Array<Pick<OHLCPoint, 'date' | 'high' | 'low' | 'close'>>;\n  /** Close-price series label. Defaults to `'Close'`. */\n  label?: string;\n  /** High-low band label. Defaults to `'Range'`. */\n  rangeLabel?: string;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showGrid?: boolean;\n};\n\n/**\n * A shaded high-low trading-range band with the close price drawn on top — the daily range is\n * visible at a glance alongside the closing trend.\n *\n * @example\n * ```tsx\n * import { PriceRangeAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <PriceRangeAreaChart\n *   data={[{ date: '2026-06-01', high: 146.2, low: 141.8, close: 144.9 }]}\n * />\n * ```\n */\nexport const PriceRangeAreaChart = ({\n  data,\n  label = 'Close',\n  rangeLabel = 'Range',\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: PriceRangeAreaChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ close: { label, color }, rangeSpan: { label: rangeLabel, color } }), [label, color, rangeLabel]);\n\n  const chartData = useMemo(() => data.map(point => ({ ...point, rangeSpan: point.high - point.low })), [data]);\n\n  return (\n    <ChartContainer\n      data-slot=\"price-range-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={chartData} 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 domain={['auto', 'auto']} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => {\n                if (name !== 'close') return null;\n                const point = item.payload as { high: number; low: number };\n                return (\n                  <div className=\"grid gap-0.5\">\n                    <span className=\"text-muted\">\n                      {config.close?.label} <span className=\"font-medium font-number text-text-positive-strong\">{valueFormatter(Number(value))}</span>\n                    </span>\n                    <span className=\"text-[11px] text-muted\">\n                      {valueFormatter(point.low)} – {valueFormatter(point.high)}\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Area dataKey=\"low\" stackId=\"range\" stroke=\"none\" fill=\"transparent\" isAnimationActive={animate} />\n        <Area dataKey=\"rangeSpan\" stackId=\"range\" stroke=\"none\" fill={color} fillOpacity={0.15} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"close\" stroke={color} strokeWidth={2} dot={false} isAnimationActive={animate} />\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAsCA,MAAa,GAAuB,CAClC,OACA,QAAQ,QACR,aAAa,QACb,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgBA,EAAAA,YAChB,WAAW,GACX,YACA,UAAU,GACV,YAC8B,CAC9B,IAAM,GAAA,EAAA,EAAA,QAAA,MAAqC,CAAE,MAAO,CAAE,QAAO,OAAM,EAAG,UAAW,CAAE,MAAO,EAAY,OAAM,CAAE,GAAI,CAAC,EAAO,EAAO,CAAU,CAAC,EAEtI,GAAA,EAAA,EAAA,QAAA,KAA0B,EAAK,IAAI,IAAU,CAAE,GAAG,EAAO,UAAW,EAAM,KAAO,EAAM,GAAI,EAAE,EAAG,CAAC,CAAI,CAAC,EAE5G,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,yBACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAjF,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,OAAQ,CAAC,OAAQ,MAAM,EAAG,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GAC7H,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,GACR,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,WAAY,EAAO,EAAM,IAAS,CAChC,GAAI,IAAS,QAAS,OAAO,KAC7B,IAAM,EAAQ,EAAK,QACnB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,EACE,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,EAAO,OAAO,MAAM,KAAC,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6DAAqD,EAAe,OAAO,CAAK,CAAC,CAAQ,CAAA,CAC3H,KACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,kCAAhB,CACG,EAAe,EAAM,GAAG,EAAE,MAAI,EAAe,EAAM,IAAI,CACpD,GACH,GAET,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,QAAQ,MAAM,QAAQ,QAAQ,OAAO,OAAO,KAAK,cAAc,kBAAmB,CAAU,CAAA,GAClG,EAAA,EAAA,IAAA,CAACA,EAAAA,KAAD,CAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,OAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,CAAA,GACrH,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAO,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,CAChG,GACD,CAAA,CAEpB"}

package/dist/price-range-area-chart-Dy01mhWJ.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{Area as c,CartesianGrid as l,ComposedChart as u,Line as d,XAxis as f,YAxis as p}from"recharts";const m=({data:m,label:h=`Close`,rangeLabel:g=`Range`,color:_=`var(--chart-1)`,valueFormatter:v=e=>e.toLocaleString(`en-US`),dateFormatter:y=e,showGrid:b=!0,className:x,animate:S=!0,height:C})=>{let w=i(()=>({close:{label:h,color:_},rangeSpan:{label:g,color:_}}),[h,_,g]),T=i(()=>m.map(e=>({...e,rangeSpan:e.high-e.low})),[m]);return o(t,{"data-slot":`price-range-area-chart`,config:w,className:a(`w-full`,x),style:C===void 0?void 0:{height:C,aspectRatio:`auto`},children:s(u,{data:T,margin:{top:8,right:12,bottom:0,left:12},children:[b&&o(l,{vertical:!1}),o(f,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:y}),o(p,{domain:[`auto`,`auto`],tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:v}),o(n,{cursor:!1,content:o(r,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?y(n):null},formatter:(e,t,n)=>{if(t!==`close`)return null;let r=n.payload;return s(`div`,{className:`grid gap-0.5`,children:[s(`span`,{className:`text-muted`,children:[w.close?.label,` `,o(`span`,{className:`font-medium font-number text-text-positive-strong`,children:v(Number(e))})]}),s(`span`,{className:`text-[11px] text-muted`,children:[v(r.low),` – `,v(r.high)]})]})}})}),o(c,{dataKey:`low`,stackId:`range`,stroke:`none`,fill:`transparent`,isAnimationActive:S}),o(c,{dataKey:`rangeSpan`,stackId:`range`,stroke:`none`,fill:_,fillOpacity:.15,isAnimationActive:S}),o(d,{type:`natural`,dataKey:`close`,stroke:_,strokeWidth:2,dot:!1,isAnimationActive:S})]})})};export{m as PriceRangeAreaChart};
+//# sourceMappingURL=price-range-area-chart-Dy01mhWJ.mjs.map

package/dist/price-range-area-chart-Dy01mhWJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-range-area-chart-Dy01mhWJ.mjs","names":[],"sources":["../packages/components/features/charts/components/price-range-area-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 { Area, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { toDateLabel } from '../utils';\n\nexport type PriceRangeAreaChartProps = BaseChartProps & {\n  /** Only `date`, `high`, `low`, and `close` are used; pass the same rows given to `CandlestickChart`. */\n  data: Array<Pick<OHLCPoint, 'date' | 'high' | 'low' | 'close'>>;\n  /** Close-price series label. Defaults to `'Close'`. */\n  label?: string;\n  /** High-low band label. Defaults to `'Range'`. */\n  rangeLabel?: string;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showGrid?: boolean;\n};\n\n/**\n * A shaded high-low trading-range band with the close price drawn on top — the daily range is\n * visible at a glance alongside the closing trend.\n *\n * @example\n * ```tsx\n * import { PriceRangeAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <PriceRangeAreaChart\n *   data={[{ date: '2026-06-01', high: 146.2, low: 141.8, close: 144.9 }]}\n * />\n * ```\n */\nexport const PriceRangeAreaChart = ({\n  data,\n  label = 'Close',\n  rangeLabel = 'Range',\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: PriceRangeAreaChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ close: { label, color }, rangeSpan: { label: rangeLabel, color } }), [label, color, rangeLabel]);\n\n  const chartData = useMemo(() => data.map(point => ({ ...point, rangeSpan: point.high - point.low })), [data]);\n\n  return (\n    <ChartContainer\n      data-slot=\"price-range-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={chartData} 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 domain={['auto', 'auto']} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => {\n                if (name !== 'close') return null;\n                const point = item.payload as { high: number; low: number };\n                return (\n                  <div className=\"grid gap-0.5\">\n                    <span className=\"text-muted\">\n                      {config.close?.label} <span className=\"font-medium font-number text-text-positive-strong\">{valueFormatter(Number(value))}</span>\n                    </span>\n                    <span className=\"text-[11px] text-muted\">\n                      {valueFormatter(point.low)} – {valueFormatter(point.high)}\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Area dataKey=\"low\" stackId=\"range\" stroke=\"none\" fill=\"transparent\" isAnimationActive={animate} />\n        <Area dataKey=\"rangeSpan\" stackId=\"range\" stroke=\"none\" fill={color} fillOpacity={0.15} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"close\" stroke={color} strokeWidth={2} dot={false} isAnimationActive={animate} />\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"iYAsCA,MAAa,GAAuB,CAClC,OACA,QAAQ,QACR,aAAa,QACb,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgB,EAChB,WAAW,GACX,YACA,UAAU,GACV,YAC8B,CAC9B,IAAM,EAAS,OAA4B,CAAE,MAAO,CAAE,QAAO,OAAM,EAAG,UAAW,CAAE,MAAO,EAAY,OAAM,CAAE,GAAI,CAAC,EAAO,EAAO,CAAU,CAAC,EAEtI,EAAY,MAAc,EAAK,IAAI,IAAU,CAAE,GAAG,EAAO,UAAW,EAAM,KAAO,EAAM,GAAI,EAAE,EAAG,CAAC,CAAI,CAAC,EAE5G,OACE,EAAC,EAAD,CACE,YAAU,yBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAe,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAjF,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,OAAQ,CAAC,OAAQ,MAAM,EAAG,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EAC7H,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IAAS,CAChC,GAAI,IAAS,QAAS,OAAO,KAC7B,IAAM,EAAQ,EAAK,QACnB,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,CACE,EAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,EAAO,OAAO,MAAM,IAAC,EAAC,OAAD,CAAM,UAAU,6DAAqD,EAAe,OAAO,CAAK,CAAC,CAAQ,CAAA,CAC3H,IACN,EAAC,OAAD,CAAM,UAAU,kCAAhB,CACG,EAAe,EAAM,GAAG,EAAE,MAAI,EAAe,EAAM,IAAI,CACpD,GACH,GAET,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAM,QAAQ,MAAM,QAAQ,QAAQ,OAAO,OAAO,KAAK,cAAc,kBAAmB,CAAU,CAAA,EAClG,EAAC,EAAD,CAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,OAAO,KAAM,EAAO,YAAa,IAAM,kBAAmB,CAAU,CAAA,EACrH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAO,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,CAChG,GACD,CAAA,CAEpB"}

package/dist/product-card-CvXLXbpV.d.cts

@@ -0,0 +1,30 @@
+//#region packages/components/cards/product-card.d.ts
+type Props = {
+  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
+  slug: string; /** Display name of the product shown on the card. */
+  name: string; /** URL of the product's thumbnail image. */
+  thumbnail: string; /** Regular price of the product in VND. */
+  price: number; /** Optional sale / discounted price in VND. */
+  salePrice?: number; /** Optional sale discount percentage (0–100). */
+  salePercentage?: number;
+};
+/**
+ * A vertical product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.
+ *
+ * @example
+ * ```tsx
+ * import { ProductCard } from '@customafk/lunas-ui/cards/product-card';
+ *
+ * <ProductCard
+ *   id="prod-1"
+ *   slug="awesome-widget"
+ *   name="Awesome Widget"
+ *   thumbnail="/images/widget.png"
+ *   price={299000}
+ * />
+ * ```
+ */
+declare const ProductCard: React.FC<Props>;
+//#endregion
+export { ProductCard as t };
+//# sourceMappingURL=product-card-CvXLXbpV.d.cts.map

package/dist/product-card-CvXLXbpV.d.mts

@@ -0,0 +1,30 @@
+//#region packages/components/cards/product-card.d.ts
+type Props = {
+  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
+  slug: string; /** Display name of the product shown on the card. */
+  name: string; /** URL of the product's thumbnail image. */
+  thumbnail: string; /** Regular price of the product in VND. */
+  price: number; /** Optional sale / discounted price in VND. */
+  salePrice?: number; /** Optional sale discount percentage (0–100). */
+  salePercentage?: number;
+};
+/**
+ * A vertical product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.
+ *
+ * @example
+ * ```tsx
+ * import { ProductCard } from '@customafk/lunas-ui/cards/product-card';
+ *
+ * <ProductCard
+ *   id="prod-1"
+ *   slug="awesome-widget"
+ *   name="Awesome Widget"
+ *   thumbnail="/images/widget.png"
+ *   price={299000}
+ * />
+ * ```
+ */
+declare const ProductCard: React.FC<Props>;
+//#endregion
+export { ProductCard as t };
+//# sourceMappingURL=product-card-CvXLXbpV.d.mts.map

package/dist/progress-Bp-5keO8.d.cts

@@ -0,0 +1,21 @@
+import { Progress } from "radix-ui";
+
+//#region packages/components/ui/progress.d.ts
+/**
+ * A horizontal progress bar that visually represents a completion percentage.
+ *
+ * @example
+ * ```tsx
+ * import { Progress } from '@customafk/lunas-ui/ui/progress';
+ *
+ * <Progress value={65} />
+ * ```
+ */
+declare function Progress$1({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof Progress.Root>): import("react").JSX.Element;
+//#endregion
+export { Progress$1 as t };
+//# sourceMappingURL=progress-Bp-5keO8.d.cts.map

package/dist/progress-Bp-5keO8.d.mts

@@ -0,0 +1,21 @@
+import { Progress } from "radix-ui";
+
+//#region packages/components/ui/progress.d.ts
+/**
+ * A horizontal progress bar that visually represents a completion percentage.
+ *
+ * @example
+ * ```tsx
+ * import { Progress } from '@customafk/lunas-ui/ui/progress';
+ *
+ * <Progress value={65} />
+ * ```
+ */
+declare function Progress$1({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof Progress.Root>): import("react").JSX.Element;
+//#endregion
+export { Progress$1 as t };
+//# sourceMappingURL=progress-Bp-5keO8.d.mts.map

package/dist/progress-display-Bp0xVhln.cjs

@@ -0,0 +1,2 @@
+const e=require("./tables-7aC9WFs9.cjs"),t=require("./ui/progress.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(0,n.memo)(({value:n,showLabel:a=!0,successThreshold:o=70,warningThreshold:s=40})=>{if(n==null)return(0,i.jsx)(e.Y,{});let c=Math.min(100,Math.max(0,n));return(0,i.jsxs)(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[(0,i.jsx)(t.Progress,{value:c,className:(0,r.cn)(`flex-1`,c>=o?`[&>[data-slot=progress-indicator]]:bg-success`:c>=s?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),a&&(0,i.jsxs)(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[c,`%`]})]})});a.displayName=`UITableProgressDisplay`,exports.UITableProgressDisplay=a;
+//# sourceMappingURL=progress-display-Bp0xVhln.cjs.map

package/dist/progress-display-Bp0xVhln.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-display-Bp0xVhln.cjs","names":["UITableEmpty","Progress"],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. */\ntype Props = {\n  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */\n  value: number | null | undefined;\n  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */\n  showLabel?: boolean;\n  /**\n   * Color thresholds applied to the progress indicator.\n   * - `≥ successThreshold` → green\n   * - `≥ warningThreshold` → yellow\n   * - otherwise → red\n   *\n   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n   */\n  successThreshold?: number;\n  warningThreshold?: number;\n};\n\n/**\n * Renders a horizontal progress bar with an optional percentage label for a\n * table cell.  The bar color shifts from red → yellow → green based on\n * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n\n  const clamped = Math.min(100, Math.max(0, value));\n\n  const indicatorClass =\n    clamped >= successThreshold\n      ? '[&>[data-slot=progress-indicator]]:bg-success'\n      : clamped >= warningThreshold\n        ? '[&>[data-slot=progress-indicator]]:bg-warning'\n        : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n  return (\n    <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n      <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n      {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n    </div>\n  );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0KAqCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,qDAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,MAAO,EAAS,WAAA,EAAA,EAAA,GAAA,CAAc,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,IAAa,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,4FAAhB,CAAoG,EAAQ,GAAO,GAC9H,GAET,CAAC,EACD,EAAuB,YAAc"}

package/dist/progress-display-DYj7vAe9.mjs

@@ -0,0 +1,2 @@
+import{Y as e}from"./tables-UikqnT9q.mjs";import{Progress as t}from"./ui/progress.mjs";import{memo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=n(({value:n,showLabel:o=!0,successThreshold:s=70,warningThreshold:c=40})=>{if(n==null)return i(e,{});let l=Math.min(100,Math.max(0,n));return a(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[i(t,{value:l,className:r(`flex-1`,l>=s?`[&>[data-slot=progress-indicator]]:bg-success`:l>=c?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),o&&a(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[l,`%`]})]})});o.displayName=`UITableProgressDisplay`;export{o as UITableProgressDisplay};
+//# sourceMappingURL=progress-display-DYj7vAe9.mjs.map

package/dist/progress-display-DYj7vAe9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-display-DYj7vAe9.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. */\ntype Props = {\n  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */\n  value: number | null | undefined;\n  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */\n  showLabel?: boolean;\n  /**\n   * Color thresholds applied to the progress indicator.\n   * - `≥ successThreshold` → green\n   * - `≥ warningThreshold` → yellow\n   * - otherwise → red\n   *\n   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n   */\n  successThreshold?: number;\n  warningThreshold?: number;\n};\n\n/**\n * Renders a horizontal progress bar with an optional percentage label for a\n * table cell.  The bar color shifts from red → yellow → green based on\n * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.\n *\n * @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n\n  const clamped = Math.min(100, Math.max(0, value));\n\n  const indicatorClass =\n    clamped >= successThreshold\n      ? '[&>[data-slot=progress-indicator]]:bg-success'\n      : clamped >= warningThreshold\n        ? '[&>[data-slot=progress-indicator]]:bg-warning'\n        : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n  return (\n    <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n      <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n      {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n    </div>\n  );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0NAqCA,MAAa,EAAyB,GAAM,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAC,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAC,MAAD,CAAK,UAAU,qDAAf,CACE,EAAC,EAAD,CAAU,MAAO,EAAS,UAAW,EAAG,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,GAAa,EAAC,OAAD,CAAM,UAAU,4FAAhB,CAAoG,EAAQ,GAAO,GAC9H,GAET,CAAC,EACD,EAAuB,YAAc"}

package/dist/radio-group-field-McpjpLW-.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/radio-group.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,description:s,orientation:c,options:l,tooltip:u,helperText:d})=>{let f=e.G(),p=(0,a.useStore)(f.form.store,({isSubmitting:e})=>e);return(0,i.jsxs)(n.FieldGroup,{className:`px-4`,children:[(0,i.jsxs)(n.Field,{orientation:c,className:`flex-col gap-2`,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{children:[o,u&&(0,i.jsx)(n.FieldTooltip,{tooltip:u})]}),(0,i.jsx)(n.FieldDescription,{children:s}),(0,i.jsx)(n.FieldNote,{isShow:!!d,children:d})]}),(0,i.jsx)(n.FieldContentMain,{children:(0,i.jsx)(t.RadioGroup,{value:f.state.value??``,className:`w-full`,onValueChange:f.handleChange,children:l.map(e=>(0,i.jsx)(n.FieldLabel,{className:(0,r.cn)(`h-fit`,f.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,p&&`pointer-events-none bg-muted-muted opacity-60`,f.state.value===e.value&&p&&`border-border-strong!`),children:(0,i.jsxs)(n.Field,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[(0,i.jsx)(t.RadioGroupItem,{value:e.value,className:`mt-0.5 shrink-0`}),(0,i.jsxs)(n.FieldContent,{className:`gap-0.5!`,children:[(0,i.jsx)(n.FieldTitle,{children:e.label}),(0,i.jsx)(n.FieldDescription,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),(0,i.jsx)(n.FieldSeparator,{})]})};exports.RadioGroupField=o;
+//# sourceMappingURL=radio-group-field-McpjpLW-.cjs.map

package/dist/radio-group-field-McpjpLW-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-field-McpjpLW-.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qOAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,EAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,gBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,UAAU,0BAA3C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,sBACjF,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,YAEA,EAAA,EAAA,KAAA,CAACF,EAAAA,MAAD,CAAO,YAAY,aAAa,UAAU,0CAA1C,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,aAAD,CAAc,UAAU,oBAAxB,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,WAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,iBAAD,CAAkB,UAAU,mBAAW,EAAO,WAA8B,CAAA,CAChE,GACT,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/radio-group-field-ZqMrf9Dx.mjs

@@ -0,0 +1,2 @@
+import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{RadioGroup as t,RadioGroupItem as n}from"./ui/radio-group.mjs";import{Field as r,FieldContent as i,FieldContentMain as a,FieldDescription as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTitle as d,FieldTooltip as f}from"./field-BKyUqvzh.mjs";import{cn as p}from"@customafk/react-toolkit/utils";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useStore as g}from"@tanstack/react-form";const _=({label:_,description:v,orientation:y,options:b,tooltip:x,helperText:S})=>{let C=e(),w=g(C.form.store,({isSubmitting:e})=>e);return h(s,{className:`px-4`,children:[h(r,{orientation:y,className:`flex-col gap-2`,children:[h(i,{children:[h(c,{children:[_,x&&m(f,{tooltip:x})]}),m(o,{children:v}),m(l,{isShow:!!S,children:S})]}),m(a,{children:m(t,{value:C.state.value??``,className:`w-full`,onValueChange:C.handleChange,children:b.map(e=>m(c,{className:p(`h-fit`,C.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,w&&`pointer-events-none bg-muted-muted opacity-60`,C.state.value===e.value&&w&&`border-border-strong!`),children:h(r,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[m(n,{value:e.value,className:`mt-0.5 shrink-0`}),h(i,{className:`gap-0.5!`,children:[m(d,{children:e.label}),m(o,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),m(u,{})]})};export{_ as RadioGroupField};
+//# sourceMappingURL=radio-group-field-ZqMrf9Dx.mjs.map

package/dist/radio-group-field-ZqMrf9Dx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-field-ZqMrf9Dx.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6dAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,gBAAtB,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,0BAA3C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,sBACjF,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,WAEA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,0CAA1C,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,oBAAxB,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,mBAAW,EAAO,WAA8B,CAAA,CAChE,GACT,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/radio-group-ycQQrPGn.d.cts

@@ -0,0 +1,35 @@
+import { RadioGroup } from "radix-ui";
+
+//#region packages/components/ui/radio-group.d.ts
+/**
+ * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <RadioGroup defaultValue="monthly">
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="monthly" id="monthly" />
+ *     <Label htmlFor="monthly">Monthly</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="annually" id="annually" />
+ *     <Label htmlFor="annually">Annually</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Root>): import("react").JSX.Element;
+/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */
+declare function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Item>): import("react").JSX.Element;
+//#endregion
+export { RadioGroupItem as n, RadioGroup$1 as t };
+//# sourceMappingURL=radio-group-ycQQrPGn.d.cts.map

package/dist/radio-group-ycQQrPGn.d.mts

@@ -0,0 +1,35 @@
+import { RadioGroup } from "radix-ui";
+
+//#region packages/components/ui/radio-group.d.ts
+/**
+ * Accessible radio button group built on Radix UI's RadioGroup primitive, where only one option can be selected at a time.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@customafk/lunas-ui/ui/radio-group';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <RadioGroup defaultValue="monthly">
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="monthly" id="monthly" />
+ *     <Label htmlFor="monthly">Monthly</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="annually" id="annually" />
+ *     <Label htmlFor="annually">Annually</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Root>): import("react").JSX.Element;
+/** Individual radio button within a `RadioGroup`; shows a filled circle indicator when selected. */
+declare function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroup.Item>): import("react").JSX.Element;
+//#endregion
+export { RadioGroupItem as n, RadioGroup$1 as t };
+//# sourceMappingURL=radio-group-ycQQrPGn.d.mts.map

package/dist/refresh-BiyrZAXL.d.cts

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

package/dist/refresh-BiyrZAXL.d.mts

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

package/dist/remove-button-B3qFw-M5.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/tooltip.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");const a=({title:a,onClick:o})=>(0,i.jsxs)(t.Tooltip,{children:[(0,i.jsx)(t.TooltipTrigger,{children:(0,i.jsx)(e.Button,{type:`button`,variant:`ghost`,color:`danger`,size:`icon`,onClick:(0,r.useCallback)(async e=>{e.preventDefault(),e.stopPropagation(),await o?.()},[o]),children:(0,i.jsx)(n.Trash2Icon,{})})}),(0,i.jsx)(t.TooltipContent,{children:(0,i.jsx)(`p`,{children:a||`Remove item from list table`})})]});exports.UITableRemoveButton=a;
+//# sourceMappingURL=remove-button-B3qFw-M5.cjs.map