@customafk/lunas-ui 0.2.37 → 0.2.39

package/dist/ui/button-group.js

@@ -0,0 +1,2 @@
+import{t as e}from"../dist-EPxjIRJp.js";import{t}from"../separator-BM8hA4DP.js";import{cn as n}from"@customafk/react-toolkit/utils";import{cva as r}from"class-variance-authority";import{jsx as i}from"react/jsx-runtime";const a=r(`flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1`,{variants:{orientation:{horizontal:`[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none`,vertical:`flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none`}},defaultVariants:{orientation:`horizontal`}});function o({className:e,orientation:t,...r}){return i(`div`,{role:`group`,"data-slot":`button-group`,"data-orientation":t,className:n(a({orientation:t}),e),...r})}function s({className:t,asChild:r=!1,...a}){return i(r?e:`div`,{className:n(`flex items-center gap-2 rounded-md border border-border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none`,t),...a})}function c({className:e,orientation:r=`vertical`,...a}){return i(t,{"data-slot":`button-group-separator`,orientation:r,className:n(`relative m-0! self-stretch bg-muted-muted data-[orientation=vertical]:h-auto`,e),...a})}export{o as ButtonGroup,c as ButtonGroupSeparator,s as ButtonGroupText,a as buttonGroupVariants};
+//# sourceMappingURL=button-group.js.map

package/dist/ui/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../packages/components/ui/button-group.tsx"],"sourcesContent":["import { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Separator } from '@/components/ui/separator';\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',\n        vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n);\n\n/**\n * Groups buttons (or inputs) into a visually connected row or column by removing the border radii on adjacent sides.\n *\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupSeparator } from '@customafk/lunas-ui/ui/button-group';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * <ButtonGroup orientation=\"horizontal\">\n *   <Button variant=\"outline\">Left</Button>\n *   <ButtonGroupSeparator />\n *   <Button variant=\"outline\">Right</Button>\n * </ButtonGroup>\n * ```\n */\nfunction ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div role=\"group\" data-slot=\"button-group\" data-orientation={orientation} className={cn(buttonGroupVariants({ orientation }), className)} {...props} />\n  );\n}\n\n/**\n * A static text or icon addon rendered inside a ButtonGroup with muted background styling.\n *\n * @param asChild - When true, renders as the child element via Radix Slot instead of `<div>`.\n */\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border border-border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A visual Separator rendered between items inside a ButtonGroup. */\nfunction ButtonGroupSeparator({ className, orientation = 'vertical', ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn('relative m-0! self-stretch bg-muted-muted data-[orientation=vertical]:h-auto', className)}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":"2NAMA,MAAM,EAAsB,EAC1B,2RACA,CACE,SAAU,CACR,YAAa,CACX,WAAY,kHACZ,SAAU,2HACX,CACF,CACD,gBAAiB,CACf,YAAa,aACd,CACF,CACF,CAiBD,SAAS,EAAY,CAAE,YAAW,cAAa,GAAG,GAAiF,CACjI,OACE,EAAC,MAAA,CAAI,KAAK,QAAQ,YAAU,eAAe,mBAAkB,EAAa,UAAW,EAAG,EAAoB,CAAE,cAAa,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAS3J,SAAS,EAAgB,CACvB,YACA,UAAU,GACV,GAAG,GAGF,CAGD,OACE,EAHW,EAAU,EAAO,MAAA,CAI1B,UAAW,EACT,uKACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAqB,CAAE,YAAW,cAAc,WAAY,GAAG,GAAiD,CACvH,OACE,EAAC,EAAA,CACC,YAAU,yBACG,cACb,UAAW,EAAG,+EAAgF,EAAU,CACxG,GAAI,GACJ"}

package/dist/ui/button.cjs

@@ -1 +1 @@
-"use client";require(`../button.variants-tnhb123u.cjs`);const e=require(`../button-Bu4ejNOW.cjs`);exports.Button=e.t;
+"use client";require(`../button.variants-4kw6plrv.cjs`);const e=require(`../button-C--DAN1D.cjs`);exports.Button=e.t;

package/dist/ui/button.d.cts

@@ -1,2 +1,2 @@
-import { n as ButtonProps, t as Button } from "../button-CYLxBCfa.cjs";
+import { n as ButtonProps, t as Button } from "../button-IMi0bEY_.cjs";
 export { Button, ButtonProps };

package/dist/ui/button.d.ts

@@ -0,0 +1,2 @@
+import { n as ButtonProps, t as Button } from "../button-D4YMSwqK.js";
+export { Button, ButtonProps };

package/dist/ui/button.js

@@ -0,0 +1 @@
+"use client";import"../button.variants-CoSpd71B.js";import{t as e}from"../button-LMMbL-uH.js";export{e as Button};

package/dist/ui/buttons/add-new.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../chunk-Bmb41Sf3.cjs`);require(`../../button.variants-tnhb123u.cjs`);const t=require(`../../button-Bu4ejNOW.cjs`),n=require(`../../paragraph-D-JHj7EP.cjs`);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);const a=({onClick:e=()=>{}})=>(0,i.jsxs)(t.t,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:e,children:[(0,i.jsx)(r.PlusIcon,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),(0,i.jsx)(n.t,{variant:`sm`,className:`max-sm:sr-only`,children:`Create`})]});exports.AddNewBtn=a;
+const e=require(`../../chunk-350yNsax.cjs`);require(`../../button.variants-4kw6plrv.cjs`);const t=require(`../../button-C--DAN1D.cjs`),n=require(`../../paragraph-DvTZvbzw.cjs`);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);const a=({onClick:e=()=>{}})=>(0,i.jsxs)(t.t,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:e,children:[(0,i.jsx)(r.PlusIcon,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),(0,i.jsx)(n.t,{variant:`sm`,className:`max-sm:sr-only`,children:`Create`})]});exports.AddNewBtn=a;
 //# sourceMappingURL=add-new.cjs.map

package/dist/ui/buttons/add-new.d.ts

@@ -0,0 +1,17 @@
+//#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 };
+//# sourceMappingURL=add-new.d.ts.map

package/dist/ui/buttons/add-new.js

@@ -0,0 +1,2 @@
+import"../../button.variants-CoSpd71B.js";import{t as e}from"../../button-LMMbL-uH.js";import{t}from"../../paragraph-Cc13ZI4d.js";import{PlusIcon as n}from"lucide-react";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({onClick:a=()=>{}})=>i(e,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:a,children:[r(n,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),r(t,{variant:`sm`,className:`max-sm:sr-only`,children:`Create`})]});export{a as AddNewBtn};
+//# sourceMappingURL=add-new.js.map

package/dist/ui/buttons/add-new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-new.js","names":["AddNewBtn: React.FC<React.PropsWithChildren<Props>>"],"sources":["../../../packages/components/ui/buttons/add-new.tsx"],"sourcesContent":["import { PlusIcon } from 'lucide-react';\n\nimport { Paragraph } from '@/components/typography/paragraph';\n\nimport { Button } from '../button';\n\ntype Props = {\n  /** Callback invoked when the button is clicked. Defaults to a no-op. */\n  onClick?: () => void;\n};\n\n/**\n * A toolbar button that triggers a \"create new\" action, displaying a plus icon alongside a \"Create\" label that is hidden on small screens.\n *\n * @example\n * import { AddNewBtn } from '@customafk/lunas-ui/ui/buttons/add-new';\n *\n * <AddNewBtn onClick={() => setOpen(true)} />\n */\nexport const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {\n  return (\n    <Button\n      aria-label=\"Tạo mới\"\n      variant=\"outline\"\n      color=\"muted\"\n      className=\"outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0\"\n      onClick={onClick}\n    >\n      <PlusIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <Paragraph variant=\"sm\" className=\"max-sm:sr-only\">\n        Create\n      </Paragraph>\n    </Button>\n  );\n};\n"],"mappings":"4NAmBA,MAAaA,GAAuD,CAAE,cAAgB,MAElF,EAAC,EAAA,CACC,aAAW,UACX,QAAQ,UACR,MAAM,QACN,UAAU,oEACD,oBAET,EAAC,EAAA,CAAS,UAAU,sBAAsB,KAAM,GAAI,cAAY,QAAS,CACzE,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,0BAAiB,UAEvC,CAAA,EACL"}

package/dist/ui/buttons/edit.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../chunk-Bmb41Sf3.cjs`);require(`../../button.variants-tnhb123u.cjs`);const t=require(`../../button-Bu4ejNOW.cjs`);let n=require(`lucide-react`),r=require(`react/jsx-runtime`);const i=({onClick:e})=>(0,r.jsx)(t.t,{"aria-label":`Chỉnh sửa`,variant:`ghost`,color:`secondary`,size:`icon`,className:`max-sm:aspect-square max-sm:p-0`,onClick:e,children:(0,r.jsx)(n.Edit2Icon,{size:16,className:`opacity-60`})});exports.EditBtn=i;
+const e=require(`../../chunk-350yNsax.cjs`);require(`../../button.variants-4kw6plrv.cjs`);const t=require(`../../button-C--DAN1D.cjs`);let n=require(`lucide-react`),r=require(`react/jsx-runtime`);const i=({onClick:e})=>(0,r.jsx)(t.t,{"aria-label":`Chỉnh sửa`,variant:`ghost`,color:`secondary`,size:`icon`,className:`max-sm:aspect-square max-sm:p-0`,onClick:e,children:(0,r.jsx)(n.Edit2Icon,{size:16,className:`opacity-60`})});exports.EditBtn=i;
 //# sourceMappingURL=edit.cjs.map

package/dist/ui/buttons/edit.d.ts

@@ -0,0 +1,17 @@
+//#region packages/components/ui/buttons/edit.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+/**
+ * An icon-only ghost button that triggers an edit action, rendered with a pencil icon.
+ *
+ * @example
+ * import { EditBtn } from '@customafk/lunas-ui/ui/buttons/edit';
+ *
+ * <EditBtn onClick={() => openEditDialog(record.id)} />
+ */
+declare const EditBtn: React.FC<Props>;
+//#endregion
+export { EditBtn };
+//# sourceMappingURL=edit.d.ts.map

package/dist/ui/buttons/edit.js

@@ -0,0 +1,2 @@
+import"../../button.variants-CoSpd71B.js";import{t as e}from"../../button-LMMbL-uH.js";import{Edit2Icon as t}from"lucide-react";import{jsx as n}from"react/jsx-runtime";const r=({onClick:r})=>n(e,{"aria-label":`Chỉnh sửa`,variant:`ghost`,color:`secondary`,size:`icon`,className:`max-sm:aspect-square max-sm:p-0`,onClick:r,children:n(t,{size:16,className:`opacity-60`})});export{r as EditBtn};
+//# sourceMappingURL=edit.js.map

package/dist/ui/buttons/edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.js","names":["EditBtn: React.FC<Props>"],"sources":["../../../packages/components/ui/buttons/edit.tsx"],"sourcesContent":["import { Edit2Icon } from 'lucide-react';\n\nimport { Button } from '../button';\n\ntype Props = {\n  /** Callback invoked when the button is clicked. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\n/**\n * An icon-only ghost button that triggers an edit action, rendered with a pencil icon.\n *\n * @example\n * import { EditBtn } from '@customafk/lunas-ui/ui/buttons/edit';\n *\n * <EditBtn onClick={() => openEditDialog(record.id)} />\n */\nexport const EditBtn: React.FC<Props> = ({ onClick }) => {\n  return (\n    <Button aria-label=\"Chỉnh sửa\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"max-sm:aspect-square max-sm:p-0\" onClick={onClick}>\n      <Edit2Icon size={16} className=\"opacity-60\" />\n    </Button>\n  );\n};\n"],"mappings":"wKAiBA,MAAaA,GAA4B,CAAE,aAEvC,EAAC,EAAA,CAAO,aAAW,YAAY,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,UAAU,kCAA2C,mBAChI,EAAC,EAAA,CAAU,KAAM,GAAI,UAAU,cAAe,EACvC"}

package/dist/ui/buttons/refresh.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../chunk-Bmb41Sf3.cjs`);require(`../../button.variants-tnhb123u.cjs`);const t=require(`../../button-Bu4ejNOW.cjs`),n=require(`../../paragraph-D-JHj7EP.cjs`);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);const a=({onClick:e=()=>{}})=>(0,i.jsxs)(t.t,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:e,children:[(0,i.jsx)(r.RefreshCwIcon,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),(0,i.jsx)(n.t,{variant:`sm`,className:`max-sm:sr-only`,children:`Reset`})]});exports.RefreshBtn=a;
+const e=require(`../../chunk-350yNsax.cjs`);require(`../../button.variants-4kw6plrv.cjs`);const t=require(`../../button-C--DAN1D.cjs`),n=require(`../../paragraph-DvTZvbzw.cjs`);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);const a=({onClick:e=()=>{}})=>(0,i.jsxs)(t.t,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:e,children:[(0,i.jsx)(r.RefreshCwIcon,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),(0,i.jsx)(n.t,{variant:`sm`,className:`max-sm:sr-only`,children:`Reset`})]});exports.RefreshBtn=a;
 //# sourceMappingURL=refresh.cjs.map

package/dist/ui/buttons/refresh.d.ts

@@ -0,0 +1,17 @@
+//#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 };
+//# sourceMappingURL=refresh.d.ts.map

package/dist/ui/buttons/refresh.js

@@ -0,0 +1,2 @@
+import"../../button.variants-CoSpd71B.js";import{t as e}from"../../button-LMMbL-uH.js";import{t}from"../../paragraph-Cc13ZI4d.js";import{RefreshCwIcon as n}from"lucide-react";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({onClick:a=()=>{}})=>i(e,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:a,children:[r(n,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),r(t,{variant:`sm`,className:`max-sm:sr-only`,children:`Reset`})]});export{a as RefreshBtn};
+//# sourceMappingURL=refresh.js.map

package/dist/ui/buttons/refresh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refresh.js","names":["RefreshBtn: React.FC<React.PropsWithChildren<Props>>"],"sources":["../../../packages/components/ui/buttons/refresh.tsx"],"sourcesContent":["import { RefreshCwIcon } from 'lucide-react';\n\nimport { Paragraph } from '@/components/typography/paragraph';\n\nimport { Button } from '../button';\n\ntype Props = {\n  /** Callback invoked when the button is clicked. Defaults to a no-op. */\n  onClick?: () => void;\n};\n\n/**\n * A toolbar button that triggers a refresh/reset action, displaying a rotating arrows icon alongside a \"Reset\" label that is hidden on small screens.\n *\n * @example\n * import { RefreshBtn } from '@customafk/lunas-ui/ui/buttons/refresh';\n *\n * <RefreshBtn onClick={() => resetFilters()} />\n */\nexport const RefreshBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {\n  return (\n    <Button\n      aria-label=\"Tạo mới\"\n      variant=\"outline\"\n      color=\"muted\"\n      className=\"outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0\"\n      onClick={onClick}\n    >\n      <RefreshCwIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <Paragraph variant=\"sm\" className=\"max-sm:sr-only\">\n        Reset\n      </Paragraph>\n    </Button>\n  );\n};\n"],"mappings":"iOAmBA,MAAaA,GAAwD,CAAE,cAAgB,MAEnF,EAAC,EAAA,CACC,aAAW,UACX,QAAQ,UACR,MAAM,QACN,UAAU,oEACD,oBAET,EAAC,EAAA,CAAc,UAAU,sBAAsB,KAAM,GAAI,cAAY,QAAS,CAC9E,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,0BAAiB,SAEvC,CAAA,EACL"}

package/dist/ui/buttons/trash.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../chunk-Bmb41Sf3.cjs`);require(`../../button.variants-tnhb123u.cjs`);const t=require(`../../button-Bu4ejNOW.cjs`);let n=require(`lucide-react`),r=require(`react/jsx-runtime`);const i=({onClick:e})=>(0,r.jsx)(t.t,{"aria-label":`Xoá`,variant:`ghost`,size:`icon`,color:`secondary`,className:`max-sm:aspect-square max-sm:p-0`,onClick:e,children:(0,r.jsx)(n.Trash2Icon,{size:16,className:`opacity-60`,"aria-hidden":`true`})});exports.TrashBtn=i;
+const e=require(`../../chunk-350yNsax.cjs`);require(`../../button.variants-4kw6plrv.cjs`);const t=require(`../../button-C--DAN1D.cjs`);let n=require(`lucide-react`),r=require(`react/jsx-runtime`);const i=({onClick:e})=>(0,r.jsx)(t.t,{"aria-label":`Xoá`,variant:`ghost`,size:`icon`,color:`secondary`,className:`max-sm:aspect-square max-sm:p-0`,onClick:e,children:(0,r.jsx)(n.Trash2Icon,{size:16,className:`opacity-60`,"aria-hidden":`true`})});exports.TrashBtn=i;
 //# sourceMappingURL=trash.cjs.map

package/dist/ui/buttons/trash.d.ts

@@ -0,0 +1,17 @@
+//#region packages/components/ui/buttons/trash.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. */
+  onClick?: () => void;
+};
+/**
+ * An icon-only ghost button that triggers a delete action, rendered with a trash-can icon.
+ *
+ * @example
+ * import { TrashBtn } from '@customafk/lunas-ui/ui/buttons/trash';
+ *
+ * <TrashBtn onClick={() => deleteRecord(record.id)} />
+ */
+declare const TrashBtn: React.FC<Props>;
+//#endregion
+export { TrashBtn };
+//# sourceMappingURL=trash.d.ts.map

package/dist/ui/buttons/trash.js

@@ -0,0 +1,2 @@
+import"../../button.variants-CoSpd71B.js";import{t as e}from"../../button-LMMbL-uH.js";import{Trash2Icon as t}from"lucide-react";import{jsx as n}from"react/jsx-runtime";const r=({onClick:r})=>n(e,{"aria-label":`Xoá`,variant:`ghost`,size:`icon`,color:`secondary`,className:`max-sm:aspect-square max-sm:p-0`,onClick:r,children:n(t,{size:16,className:`opacity-60`,"aria-hidden":`true`})});export{r as TrashBtn};
+//# sourceMappingURL=trash.js.map

package/dist/ui/buttons/trash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trash.js","names":["TrashBtn: React.FC<Props>"],"sources":["../../../packages/components/ui/buttons/trash.tsx"],"sourcesContent":["import { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '../button';\n\ntype Props = {\n  /** Callback invoked when the button is clicked. */\n  onClick?: () => void;\n};\n\n/**\n * An icon-only ghost button that triggers a delete action, rendered with a trash-can icon.\n *\n * @example\n * import { TrashBtn } from '@customafk/lunas-ui/ui/buttons/trash';\n *\n * <TrashBtn onClick={() => deleteRecord(record.id)} />\n */\nexport const TrashBtn: React.FC<Props> = ({ onClick }) => {\n  return (\n    <Button aria-label=\"Xoá\" variant=\"ghost\" size=\"icon\" color=\"secondary\" className=\"max-sm:aspect-square max-sm:p-0\" onClick={onClick}>\n      <Trash2Icon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n    </Button>\n  );\n};\n"],"mappings":"yKAiBA,MAAaA,GAA6B,CAAE,aAExC,EAAC,EAAA,CAAO,aAAW,MAAM,QAAQ,QAAQ,KAAK,OAAO,MAAM,YAAY,UAAU,kCAA2C,mBAC1H,EAAC,EAAA,CAAW,KAAM,GAAI,UAAU,aAAa,cAAY,QAAS,EAC3D"}

package/dist/ui/buttons/upload-image.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../chunk-Bmb41Sf3.cjs`);require(`../../button.variants-tnhb123u.cjs`);const t=require(`../../button-Bu4ejNOW.cjs`);let n=require(`lucide-react`),r=require(`react/jsx-runtime`);const i=({size:e=`5rem`,onClick:i})=>(0,r.jsx)(t.t,{style:{width:e,height:e},variant:`outline`,color:`muted`,onClick:i,children:(0,r.jsx)(n.UploadIcon,{className:`size-6`})});exports.UploadImageBtn=i;
+const e=require(`../../chunk-350yNsax.cjs`);require(`../../button.variants-4kw6plrv.cjs`);const t=require(`../../button-C--DAN1D.cjs`);let n=require(`lucide-react`),r=require(`react/jsx-runtime`);const i=({size:e=`5rem`,onClick:i})=>(0,r.jsx)(t.t,{style:{width:e,height:e},variant:`outline`,color:`muted`,onClick:i,children:(0,r.jsx)(n.UploadIcon,{className:`size-6`})});exports.UploadImageBtn=i;
 //# sourceMappingURL=upload-image.cjs.map

package/dist/ui/buttons/upload-image.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react";
+
+//#region packages/components/ui/buttons/upload-image.d.ts
+type Props = {
+  /**
+   * Numeric pixel value applied to both the `width` and `height` of the button via inline styles.
+   * @default '5rem'
+   */
+  size?: number;
+  /** Callback invoked when the button is clicked. */
+  onClick?: () => void;
+};
+/**
+ * A square outline button for triggering image upload flows, rendered with an upload icon and a configurable size.
+ *
+ * @example
+ * import { UploadImageBtn } from '@customafk/lunas-ui/ui/buttons/upload-image';
+ *
+ * <UploadImageBtn size={96} onClick={() => openFilePicker()} />
+ */
+declare const UploadImageBtn: React.FC<PropsWithChildren<Props>>;
+//#endregion
+export { UploadImageBtn };
+//# sourceMappingURL=upload-image.d.ts.map

package/dist/ui/buttons/upload-image.js

@@ -0,0 +1,2 @@
+import"../../button.variants-CoSpd71B.js";import{t as e}from"../../button-LMMbL-uH.js";import{UploadIcon as t}from"lucide-react";import{jsx as n}from"react/jsx-runtime";const r=({size:r=`5rem`,onClick:i})=>n(e,{style:{width:r,height:r},variant:`outline`,color:`muted`,onClick:i,children:n(t,{className:`size-6`})});export{r as UploadImageBtn};
+//# sourceMappingURL=upload-image.js.map

package/dist/ui/buttons/upload-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-image.js","names":["UploadImageBtn: React.FC<PropsWithChildren<Props>>"],"sources":["../../../packages/components/ui/buttons/upload-image.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport { UploadIcon } from 'lucide-react';\n\nimport { Button } from '../button';\n\ntype Props = {\n  /**\n   * Numeric pixel value applied to both the `width` and `height` of the button via inline styles.\n   * @default '5rem'\n   */\n  size?: number;\n  /** Callback invoked when the button is clicked. */\n  onClick?: () => void;\n};\n\n/**\n * A square outline button for triggering image upload flows, rendered with an upload icon and a configurable size.\n *\n * @example\n * import { UploadImageBtn } from '@customafk/lunas-ui/ui/buttons/upload-image';\n *\n * <UploadImageBtn size={96} onClick={() => openFilePicker()} />\n */\nexport const UploadImageBtn: React.FC<PropsWithChildren<Props>> = ({ size = '5rem', onClick }) => {\n  return (\n    <Button\n      style={{\n        width: size,\n        height: size,\n      }}\n      variant=\"outline\"\n      color=\"muted\"\n      onClick={onClick}\n    >\n      <UploadIcon className=\"size-6\" />\n    </Button>\n  );\n};\n"],"mappings":"yKAwBA,MAAaA,GAAsD,CAAE,OAAO,OAAQ,aAEhF,EAAC,EAAA,CACC,MAAO,CACL,MAAO,EACP,OAAQ,EACT,CACD,QAAQ,UACR,MAAM,QACG,mBAET,EAAC,EAAA,CAAW,UAAU,SAAA,CAAW,EAC1B"}

package/dist/ui/calendar.cjs

@@ -1 +1 @@
-"use client";require(`../button.variants-tnhb123u.cjs`),require(`../button-Bu4ejNOW.cjs`);const e=require(`../calendar-CMd11yg9.cjs`);exports.Calendar=e.t,exports.CalendarDayButton=e.n;
+"use client";require(`../button.variants-4kw6plrv.cjs`),require(`../button-C--DAN1D.cjs`);const e=require(`../calendar-4weBDnXz.cjs`);exports.Calendar=e.t,exports.CalendarDayButton=e.n;

package/dist/ui/calendar.d.cts

@@ -1,5 +1,5 @@
-import { t as Button } from "../button-CYLxBCfa.cjs";
-import * as react70 from "react";
+import { t as Button } from "../button-IMi0bEY_.cjs";
+import * as react231 from "react";
 import { DayButton, DayPicker } from "react-day-picker";
 
 //#region packages/components/ui/calendar.d.ts
@@ -9,7 +9,7 @@ declare const CalendarDayButton: ({
   modifiers,
   color: _,
   ...props
-}: React.ComponentProps<typeof DayButton>) => react70.JSX.Element;
+}: React.ComponentProps<typeof DayButton>) => react231.JSX.Element;
 /**
  * A fully styled date-picker calendar built on top of react-day-picker, supporting single, range, and multiple selection modes.
  *
@@ -39,7 +39,7 @@ declare function Calendar({
 }: React.ComponentProps<typeof DayPicker> & {
   /** Variant applied to the previous/next navigation buttons. */
   buttonVariant?: React.ComponentProps<typeof Button>['variant'];
-}): react70.JSX.Element;
+}): react231.JSX.Element;
 //#endregion
 export { Calendar, CalendarDayButton };
 //# sourceMappingURL=calendar.d.cts.map

package/dist/ui/calendar.d.ts

@@ -0,0 +1,45 @@
+import { t as Button } from "../button-D4YMSwqK.js";
+import * as react79 from "react";
+import { DayButton, DayPicker } from "react-day-picker";
+
+//#region packages/components/ui/calendar.d.ts
+declare const CalendarDayButton: ({
+  className,
+  day,
+  modifiers,
+  color: _,
+  ...props
+}: React.ComponentProps<typeof DayButton>) => react79.JSX.Element;
+/**
+ * A fully styled date-picker calendar built on top of react-day-picker, supporting single, range, and multiple selection modes.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from '@customafk/lunas-ui/ui/calendar';
+ *
+ * const [date, setDate] = React.useState<Date>();
+ *
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   captionLayout="dropdown"
+ * />
+ * ```
+ */
+declare function Calendar({
+  className,
+  classNames,
+  showOutsideDays,
+  captionLayout,
+  buttonVariant,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  /** Variant applied to the previous/next navigation buttons. */
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): react79.JSX.Element;
+//#endregion
+export { Calendar, CalendarDayButton };
+//# sourceMappingURL=calendar.d.ts.map

package/dist/ui/calendar.js

@@ -0,0 +1 @@
+"use client";import"../button.variants-CoSpd71B.js";import"../button-LMMbL-uH.js";import{n as e,t}from"../calendar-DzPt7b6k.js";export{t as Calendar,e as CalendarDayButton};

package/dist/ui/card.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../heading-wUXEbicM.cjs`),n=require(`../paragraph-D-JHj7EP.cjs`);let r=require(`@customafk/react-toolkit/utils`),i=require(`react/jsx-runtime`);function a({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card`,className:(0,r.cn)(`flex flex-col gap-6 rounded-lg border border-border bg-card py-6 text-text-positive shadow-card`,`transition-[box-shadow,opacity] duration-150 ease-in-out`,`data-[interactive=true]:cursor-pointer`,`data-[interactive=true]:hover:shadow-dropdown`,`data-[interactive=true]:focus-visible:outline-none data-[interactive=true]:focus-visible:ring-2 data-[interactive=true]:focus-visible:ring-ring data-[interactive=true]:focus-visible:ring-offset-2`,`data-[interactive=true]:active:opacity-90`,e),...t})}function o({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-header`,className:(0,r.cn)(`@container/card-header`,`grid auto-rows-min grid-rows-[auto_auto]`,`items-start gap-1.5 px-6 text-text-positive-strong`,`has-data-[slot=card-action]:grid-cols-[1fr_auto]`,`[.border-b]:pb-6`,e),...t})}function s({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`card-title`,className:(0,r.cn)(t.t({level:`h3`}),e),...n})}function c({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-description`,className:(0,r.cn)(n.n({variant:`muted`}),e),...t})}function l({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-action`,className:(0,r.cn)(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,e),...t})}function u({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-content`,className:(0,r.cn)(`px-6 text-sm`,e),...t})}function d({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-footer`,className:(0,r.cn)(`flex items-center px-6 text-sm [.border-t]:pt-6`,e),...t})}exports.Card=a,exports.CardAction=l,exports.CardContent=u,exports.CardDescription=c,exports.CardFooter=d,exports.CardHeader=o,exports.CardTitle=s;
+"use client";const e=require(`../chunk-350yNsax.cjs`),t=require(`../heading-tGTqk3pA.cjs`),n=require(`../paragraph-DvTZvbzw.cjs`);let r=require(`@customafk/react-toolkit/utils`),i=require(`react/jsx-runtime`);function a({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card`,className:(0,r.cn)(`flex flex-col gap-6 rounded-lg border border-border bg-card py-6 text-text-positive shadow-card`,`transition-[box-shadow,opacity] duration-150 ease-in-out`,`data-[interactive=true]:cursor-pointer`,`data-[interactive=true]:hover:shadow-dropdown`,`data-[interactive=true]:focus-visible:outline-none data-[interactive=true]:focus-visible:ring-2 data-[interactive=true]:focus-visible:ring-ring data-[interactive=true]:focus-visible:ring-offset-2`,`data-[interactive=true]:active:opacity-90`,e),...t})}function o({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-header`,className:(0,r.cn)(`@container/card-header`,`grid auto-rows-min grid-rows-[auto_auto]`,`items-start gap-1.5 px-6 text-text-positive-strong`,`has-data-[slot=card-action]:grid-cols-[1fr_auto]`,`[.border-b]:pb-6`,e),...t})}function s({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`card-title`,className:(0,r.cn)(t.t({level:`h3`}),e),...n})}function c({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-description`,className:(0,r.cn)(n.n({variant:`muted`}),e),...t})}function l({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-action`,className:(0,r.cn)(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,e),...t})}function u({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-content`,className:(0,r.cn)(`px-6 text-sm`,e),...t})}function d({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`card-footer`,className:(0,r.cn)(`flex items-center px-6 text-sm [.border-t]:pt-6`,e),...t})}exports.Card=a,exports.CardAction=l,exports.CardContent=u,exports.CardDescription=c,exports.CardFooter=d,exports.CardHeader=o,exports.CardTitle=s;
 //# sourceMappingURL=card.cjs.map

package/dist/ui/card.d.cts

@@ -1,4 +1,4 @@
-import * as react58 from "react";
+import * as react212 from "react";
 
 //#region packages/components/ui/card.d.ts
 
@@ -27,37 +27,37 @@ import * as react58 from "react";
 declare function Card({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 /** Top section of the card that holds the title, description, and optional action slot. */
 declare function CardHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 /** Primary heading for the card, styled with the h3 heading variant. */
 declare function CardTitle({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 /** Muted supporting text displayed beneath the card title. */
 declare function CardDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 /** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */
 declare function CardAction({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 /** Main body area of the card with horizontal padding for content alignment. */
 declare function CardContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 /** Bottom section of the card, typically used for supplementary text or secondary actions. */
 declare function CardFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>): react58.JSX.Element;
+}: React.ComponentProps<'div'>): react212.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
 //# sourceMappingURL=card.d.cts.map

package/dist/ui/card.d.ts

@@ -0,0 +1,63 @@
+import * as react63 from "react";
+
+//#region packages/components/ui/card.d.ts
+
+/**
+ * Surface container for grouping related content with a bordered, shadowed panel that supports optional interactive hover states.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Card, CardHeader, CardTitle, CardDescription,
+ *   CardContent, CardFooter, CardAction,
+ * } from '@customafk/lunas-ui/ui/card';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Plan overview</CardTitle>
+ *     <CardDescription>Your current subscription details.</CardDescription>
+ *     <CardAction><Button size="sm">Upgrade</Button></CardAction>
+ *   </CardHeader>
+ *   <CardContent>Monthly usage: 42 / 100 requests</CardContent>
+ *   <CardFooter>Renews on 1 Jun 2026</CardFooter>
+ * </Card>
+ * ```
+ */
+declare function Card({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+/** Top section of the card that holds the title, description, and optional action slot. */
+declare function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+/** Primary heading for the card, styled with the h3 heading variant. */
+declare function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+/** Muted supporting text displayed beneath the card title. */
+declare function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+/** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */
+declare function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+/** Main body area of the card with horizontal padding for content alignment. */
+declare function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+/** Bottom section of the card, typically used for supplementary text or secondary actions. */
+declare function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react63.JSX.Element;
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.d.ts.map

package/dist/ui/card.js

@@ -0,0 +1,2 @@
+"use client";import{t as e}from"../heading-Bz-hSatD.js";import{n as t}from"../paragraph-Cc13ZI4d.js";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r}from"react/jsx-runtime";function i({className:e,...t}){return r(`div`,{"data-slot":`card`,className:n(`flex flex-col gap-6 rounded-lg border border-border bg-card py-6 text-text-positive shadow-card`,`transition-[box-shadow,opacity] duration-150 ease-in-out`,`data-[interactive=true]:cursor-pointer`,`data-[interactive=true]:hover:shadow-dropdown`,`data-[interactive=true]:focus-visible:outline-none data-[interactive=true]:focus-visible:ring-2 data-[interactive=true]:focus-visible:ring-ring data-[interactive=true]:focus-visible:ring-offset-2`,`data-[interactive=true]:active:opacity-90`,e),...t})}function a({className:e,...t}){return r(`div`,{"data-slot":`card-header`,className:n(`@container/card-header`,`grid auto-rows-min grid-rows-[auto_auto]`,`items-start gap-1.5 px-6 text-text-positive-strong`,`has-data-[slot=card-action]:grid-cols-[1fr_auto]`,`[.border-b]:pb-6`,e),...t})}function o({className:t,...i}){return r(`div`,{"data-slot":`card-title`,className:n(e({level:`h3`}),t),...i})}function s({className:e,...i}){return r(`div`,{"data-slot":`card-description`,className:n(t({variant:`muted`}),e),...i})}function c({className:e,...t}){return r(`div`,{"data-slot":`card-action`,className:n(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,e),...t})}function l({className:e,...t}){return r(`div`,{"data-slot":`card-content`,className:n(`px-6 text-sm`,e),...t})}function u({className:e,...t}){return r(`div`,{"data-slot":`card-footer`,className:n(`flex items-center px-6 text-sm [.border-t]:pt-6`,e),...t})}export{i as Card,c as CardAction,l as CardContent,s as CardDescription,u as CardFooter,a as CardHeader,o as CardTitle};
+//# sourceMappingURL=card.js.map

package/dist/ui/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../packages/components/ui/card.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { headingVariants } from '../typography/heading';\nimport { paragraphVariants } from '../typography/paragraph';\n\n/**\n * Surface container for grouping related content with a bordered, shadowed panel that supports optional interactive hover states.\n *\n * @example\n * ```tsx\n * import {\n *   Card, CardHeader, CardTitle, CardDescription,\n *   CardContent, CardFooter, CardAction,\n * } from '@customafk/lunas-ui/ui/card';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Plan overview</CardTitle>\n *     <CardDescription>Your current subscription details.</CardDescription>\n *     <CardAction><Button size=\"sm\">Upgrade</Button></CardAction>\n *   </CardHeader>\n *   <CardContent>Monthly usage: 42 / 100 requests</CardContent>\n *   <CardFooter>Renews on 1 Jun 2026</CardFooter>\n * </Card>\n * ```\n */\nfunction Card({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        'flex flex-col gap-6 rounded-lg border border-border bg-card py-6 text-text-positive shadow-card',\n        'transition-[box-shadow,opacity] duration-150 ease-in-out',\n        'data-[interactive=true]:cursor-pointer',\n        'data-[interactive=true]:hover:shadow-dropdown',\n        'data-[interactive=true]:focus-visible:outline-none data-[interactive=true]:focus-visible:ring-2 data-[interactive=true]:focus-visible:ring-ring data-[interactive=true]:focus-visible:ring-offset-2',\n        'data-[interactive=true]:active:opacity-90',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Top section of the card that holds the title, description, and optional action slot. */\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        '@container/card-header',\n        'grid auto-rows-min grid-rows-[auto_auto]',\n        'items-start gap-1.5 px-6 text-text-positive-strong',\n        'has-data-[slot=card-action]:grid-cols-[1fr_auto]',\n        '[.border-b]:pb-6',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Primary heading for the card, styled with the h3 heading variant. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-title\" className={cn(headingVariants({ level: 'h3' }), className)} {...props} />;\n}\n\n/** Muted supporting text displayed beneath the card title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-description\" className={cn(paragraphVariants({ variant: 'muted' }), className)} {...props} />;\n}\n\n/** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-action\" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />;\n}\n\n/** Main body area of the card with horizontal padding for content alignment. */\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('px-6 text-sm', className)} {...props} />;\n}\n\n/** Bottom section of the card, typically used for supplementary text or secondary actions. */\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-footer\" className={cn('flex items-center px-6 text-sm [.border-t]:pt-6', className)} {...props} />;\n}\n\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"],"mappings":"iMA4BA,SAAS,EAAK,CAAE,YAAW,GAAG,GAAsC,CAClE,OACE,EAAC,MAAA,CACC,YAAU,OACV,UAAW,EACT,kGACA,2DACA,yCACA,gDACA,sMACA,4CACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAC,MAAA,CACC,YAAU,cACV,UAAW,EACT,yBACA,2CACA,qDACA,mDACA,mBACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAU,CAAE,YAAW,GAAG,GAAsC,CACvE,OAAO,EAAC,MAAA,CAAI,YAAU,aAAa,UAAW,EAAG,EAAgB,CAAE,MAAO,KAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAI9G,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAsC,CAC7E,OAAO,EAAC,MAAA,CAAI,YAAU,mBAAmB,UAAW,EAAG,EAAkB,CAAE,QAAS,QAAS,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAI3H,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAC,MAAA,CAAI,YAAU,cAAc,UAAW,EAAG,iEAAkE,EAAU,CAAE,GAAI,GAAS,CAI/I,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAC,MAAA,CAAI,YAAU,eAAe,UAAW,EAAG,eAAgB,EAAU,CAAE,GAAI,GAAS,CAI9F,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAC,MAAA,CAAI,YAAU,cAAc,UAAW,EAAG,kDAAmD,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/carousel.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);require(`../button.variants-tnhb123u.cjs`);const t=require(`../button-Bu4ejNOW.cjs`);let n=require(`lucide-react`),r=require(`react`),i=require(`@customafk/react-toolkit/utils`),a=require(`react/jsx-runtime`),o=require(`embla-carousel-react`);o=e.t(o);const s=(0,r.createContext)(null);function c(){let e=(0,r.use)(s);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function l({orientation:e=`horizontal`,opts:t,setApi:n,plugins:c,className:l,children:u,...d}){let[f,p]=(0,o.default)({...t,axis:e===`horizontal`?`x`:`y`},c),[m,h]=(0,r.useState)(!1),[g,_]=(0,r.useState)(!1),v=(0,r.useCallback)(e=>{e&&(h(e.canScrollPrev()),_(e.canScrollNext()))},[]),y=(0,r.useCallback)(()=>{p?.scrollPrev()},[p]),b=(0,r.useCallback)(()=>{p?.scrollNext()},[p]),x=(0,r.useCallback)(e=>{e.key===`ArrowLeft`?(e.preventDefault(),y()):e.key===`ArrowRight`&&(e.preventDefault(),b())},[y,b]);return(0,r.useEffect)(()=>{!p||!n||n(p)},[p,n]),(0,r.useEffect)(()=>{if(p)return v(p),p.on(`reInit`,v),p.on(`select`,v),()=>{p?.off(`select`,v)}},[p,v]),(0,a.jsx)(s.Provider,{value:{carouselRef:f,api:p,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:y,scrollNext:b,canScrollPrev:m,canScrollNext:g},children:(0,a.jsx)(`div`,{onKeyDownCapture:x,className:(0,i.cn)(`relative`,l),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...d,children:u})})}function u({className:e,...t}){let{carouselRef:n,orientation:r}=c();return(0,a.jsx)(`div`,{ref:n,className:`overflow-hidden`,"data-slot":`carousel-content`,children:(0,a.jsx)(`div`,{className:(0,i.cn)(`flex`,r===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function d({className:e,...t}){let{orientation:n}=c();return(0,a.jsx)(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:(0,i.cn)(`min-w-0 shrink-0 grow-0 basis-full`,n===`horizontal`?`pl-4`:`pt-4`,e),...t})}function f({className:e,variant:r=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollPrev:u,canScrollPrev:d}=c();return(0,a.jsxs)(t.t,{"data-slot":`carousel-previous`,variant:r,size:o,className:(0,i.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,a.jsx)(n.ArrowLeft,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Previous slide`})]})}function p({className:e,variant:r=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollNext:u,canScrollNext:d}=c();return(0,a.jsxs)(t.t,{"data-slot":`carousel-next`,variant:r,size:o,className:(0,i.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,a.jsx)(n.ArrowRight,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Next slide`})]})}exports.Carousel=l,exports.CarouselContent=u,exports.CarouselItem=d,exports.CarouselNext=p,exports.CarouselPrevious=f;
+"use client";const e=require(`../chunk-350yNsax.cjs`);require(`../button.variants-4kw6plrv.cjs`);const t=require(`../button-C--DAN1D.cjs`);let n=require(`lucide-react`),r=require(`react`),i=require(`@customafk/react-toolkit/utils`),a=require(`react/jsx-runtime`),o=require(`embla-carousel-react`);o=e.n(o);const s=(0,r.createContext)(null);function c(){let e=(0,r.use)(s);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function l({orientation:e=`horizontal`,opts:t,setApi:n,plugins:c,className:l,children:u,...d}){let[f,p]=(0,o.default)({...t,axis:e===`horizontal`?`x`:`y`},c),[m,h]=(0,r.useState)(!1),[g,_]=(0,r.useState)(!1),v=(0,r.useCallback)(e=>{e&&(h(e.canScrollPrev()),_(e.canScrollNext()))},[]),y=(0,r.useCallback)(()=>{p?.scrollPrev()},[p]),b=(0,r.useCallback)(()=>{p?.scrollNext()},[p]),x=(0,r.useCallback)(e=>{e.key===`ArrowLeft`?(e.preventDefault(),y()):e.key===`ArrowRight`&&(e.preventDefault(),b())},[y,b]);return(0,r.useEffect)(()=>{!p||!n||n(p)},[p,n]),(0,r.useEffect)(()=>{if(p)return v(p),p.on(`reInit`,v),p.on(`select`,v),()=>{p?.off(`select`,v)}},[p,v]),(0,a.jsx)(s.Provider,{value:{carouselRef:f,api:p,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:y,scrollNext:b,canScrollPrev:m,canScrollNext:g},children:(0,a.jsx)(`div`,{onKeyDownCapture:x,className:(0,i.cn)(`relative`,l),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...d,children:u})})}function u({className:e,...t}){let{carouselRef:n,orientation:r}=c();return(0,a.jsx)(`div`,{ref:n,className:`overflow-hidden`,"data-slot":`carousel-content`,children:(0,a.jsx)(`div`,{className:(0,i.cn)(`flex`,r===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function d({className:e,...t}){let{orientation:n}=c();return(0,a.jsx)(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:(0,i.cn)(`min-w-0 shrink-0 grow-0 basis-full`,n===`horizontal`?`pl-4`:`pt-4`,e),...t})}function f({className:e,variant:r=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollPrev:u,canScrollPrev:d}=c();return(0,a.jsxs)(t.t,{"data-slot":`carousel-previous`,variant:r,size:o,className:(0,i.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,a.jsx)(n.ArrowLeft,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Previous slide`})]})}function p({className:e,variant:r=`outline`,size:o=`icon`,...s}){let{orientation:l,scrollNext:u,canScrollNext:d}=c();return(0,a.jsxs)(t.t,{"data-slot":`carousel-next`,variant:r,size:o,className:(0,i.cn)(`absolute size-8 rounded-full`,l===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,e),disabled:!d,onClick:u,...s,children:[(0,a.jsx)(n.ArrowRight,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Next slide`})]})}exports.Carousel=l,exports.CarouselContent=u,exports.CarouselItem=d,exports.CarouselNext=p,exports.CarouselPrevious=f;
 //# sourceMappingURL=carousel.cjs.map

package/dist/ui/carousel.d.cts

@@ -1,5 +1,5 @@
-import { t as Button } from "../button-CYLxBCfa.cjs";
-import * as react82 from "react";
+import { t as Button } from "../button-IMi0bEY_.cjs";
+import * as react159 from "react";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
 //#region packages/components/ui/carousel.d.ts
@@ -41,31 +41,31 @@ declare function Carousel({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps): react82.JSX.Element;
+}: React.ComponentProps<'div'> & CarouselProps): react159.JSX.Element;
 /** The scrollable track that holds all CarouselItem elements. */
 declare function CarouselContent({
   className,
   ...props
-}: React.ComponentProps<'div'>): react82.JSX.Element;
+}: React.ComponentProps<'div'>): react159.JSX.Element;
 /** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */
 declare function CarouselItem({
   className,
   ...props
-}: React.ComponentProps<'div'>): react82.JSX.Element;
+}: React.ComponentProps<'div'>): react159.JSX.Element;
 /** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */
 declare function CarouselPrevious({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Button>): react82.JSX.Element;
+}: React.ComponentProps<typeof Button>): react159.JSX.Element;
 /** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */
 declare function CarouselNext({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Button>): react82.JSX.Element;
+}: React.ComponentProps<typeof Button>): react159.JSX.Element;
 //#endregion
 export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
 //# sourceMappingURL=carousel.d.cts.map

package/dist/ui/carousel.d.ts

@@ -0,0 +1,71 @@
+import { t as Button } from "../button-D4YMSwqK.js";
+import * as react73 from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+
+//#region packages/components/ui/carousel.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+/**
+ * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Carousel, CarouselContent, CarouselItem,
+ *   CarouselPrevious, CarouselNext,
+ * } from '@customafk/lunas-ui/ui/carousel';
+ *
+ * <Carousel>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />
+ *   <CarouselNext />
+ * </Carousel>
+ * ```
+ */
+declare function Carousel({
+  orientation,
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps): react73.JSX.Element;
+/** The scrollable track that holds all CarouselItem elements. */
+declare function CarouselContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react73.JSX.Element;
+/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */
+declare function CarouselItem({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react73.JSX.Element;
+/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */
+declare function CarouselPrevious({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button>): react73.JSX.Element;
+/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */
+declare function CarouselNext({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button>): react73.JSX.Element;
+//#endregion
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
+//# sourceMappingURL=carousel.d.ts.map

package/dist/ui/carousel.js

@@ -0,0 +1,2 @@
+"use client";import"../button.variants-CoSpd71B.js";import{t as e}from"../button-LMMbL-uH.js";import{ArrowLeft as t,ArrowRight as n}from"lucide-react";import{createContext as r,use as i,useCallback as a,useEffect as o,useState as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import d from"embla-carousel-react";const f=r(null);function p(){let e=i(f);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function m({orientation:e=`horizontal`,opts:t,setApi:n,plugins:r,className:i,children:u,...p}){let[m,h]=d({...t,axis:e===`horizontal`?`x`:`y`},r),[g,_]=s(!1),[v,y]=s(!1),b=a(e=>{e&&(_(e.canScrollPrev()),y(e.canScrollNext()))},[]),x=a(()=>{h?.scrollPrev()},[h]),S=a(()=>{h?.scrollNext()},[h]),C=a(e=>{e.key===`ArrowLeft`?(e.preventDefault(),x()):e.key===`ArrowRight`&&(e.preventDefault(),S())},[x,S]);return o(()=>{!h||!n||n(h)},[h,n]),o(()=>{if(h)return b(h),h.on(`reInit`,b),h.on(`select`,b),()=>{h?.off(`select`,b)}},[h,b]),l(f.Provider,{value:{carouselRef:m,api:h,opts:t,orientation:e||(t?.axis===`y`?`vertical`:`horizontal`),scrollPrev:x,scrollNext:S,canScrollPrev:g,canScrollNext:v},children:l(`div`,{onKeyDownCapture:C,className:c(`relative`,i),role:`region`,"aria-roledescription":`carousel`,"data-slot":`carousel`,...p,children:u})})}function h({className:e,...t}){let{carouselRef:n,orientation:r}=p();return l(`div`,{ref:n,className:`overflow-hidden`,"data-slot":`carousel-content`,children:l(`div`,{className:c(`flex`,r===`horizontal`?`-ml-4`:`-mt-4 flex-col`,e),...t})})}function g({className:e,...t}){let{orientation:n}=p();return l(`div`,{role:`group`,"aria-roledescription":`slide`,"data-slot":`carousel-item`,className:c(`min-w-0 shrink-0 grow-0 basis-full`,n===`horizontal`?`pl-4`:`pt-4`,e),...t})}function _({className:n,variant:r=`outline`,size:i=`icon`,...a}){let{orientation:o,scrollPrev:s,canScrollPrev:d}=p();return u(e,{"data-slot":`carousel-previous`,variant:r,size:i,className:c(`absolute size-8 rounded-full`,o===`horizontal`?`top-1/2 -left-12 -translate-y-1/2`:`-top-12 left-1/2 -translate-x-1/2 rotate-90`,n),disabled:!d,onClick:s,...a,children:[l(t,{}),l(`span`,{className:`sr-only`,children:`Previous slide`})]})}function v({className:t,variant:r=`outline`,size:i=`icon`,...a}){let{orientation:o,scrollNext:s,canScrollNext:d}=p();return u(e,{"data-slot":`carousel-next`,variant:r,size:i,className:c(`absolute size-8 rounded-full`,o===`horizontal`?`top-1/2 -right-12 -translate-y-1/2`:`-bottom-12 left-1/2 -translate-x-1/2 rotate-90`,t),disabled:!d,onClick:s,...a,children:[l(n,{}),l(`span`,{className:`sr-only`,children:`Next slide`})]})}export{m as Carousel,h as CarouselContent,g as CarouselItem,v as CarouselNext,_ as CarouselPrevious};
+//# sourceMappingURL=carousel.js.map