@customafk/lunas-ui 0.2.37 → 0.2.38

package/dist/ui/toggle.d.cts

@@ -1,5 +1,5 @@
-import * as react234 from "react";
-import * as class_variance_authority_types9 from "class-variance-authority/types";
+import * as react262 from "react";
+import * as class_variance_authority_types10 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "radix-ui";
 
@@ -7,7 +7,7 @@ import { Toggle as Toggle$1 } from "radix-ui";
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "sm" | "lg" | "default" | null | undefined;
-} & class_variance_authority_types9.ClassProp) | undefined) => string;
+} & class_variance_authority_types10.ClassProp) | undefined) => string;
 /**
  * A two-state button that switches between pressed (`on`) and unpressed (`off`).
  *
@@ -26,7 +26,7 @@ declare function Toggle({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react234.JSX.Element;
+}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react262.JSX.Element;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.cts.map

package/dist/ui/toggle.d.mts

@@ -1,13 +1,13 @@
-import * as react103 from "react";
+import * as react199 from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "radix-ui";
-import * as class_variance_authority_types3 from "class-variance-authority/types";
+import * as class_variance_authority_types7 from "class-variance-authority/types";
 
 //#region packages/components/ui/toggle.d.ts
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "sm" | "lg" | "default" | null | undefined;
-} & class_variance_authority_types3.ClassProp) | undefined) => string;
+} & class_variance_authority_types7.ClassProp) | undefined) => string;
 /**
  * A two-state button that switches between pressed (`on`) and unpressed (`off`).
  *
@@ -26,7 +26,7 @@ declare function Toggle({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react103.JSX.Element;
+}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react199.JSX.Element;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.mts.map

package/dist/ui/tooltip.cjs

@@ -1 +1 @@
-"use client";const e=require(`../tooltip-DC6i1A25.cjs`);exports.Tooltip=e.t,exports.TooltipContent=e.n,exports.TooltipProvider=e.r,exports.TooltipTrigger=e.i;
+"use client";const e=require(`../tooltip-CBdoIzoM.cjs`);exports.Tooltip=e.t,exports.TooltipContent=e.n,exports.TooltipProvider=e.r,exports.TooltipTrigger=e.i;

package/dist/ui/tooltip.d.cts

@@ -1,4 +1,4 @@
-import * as react230 from "react";
+import * as react258 from "react";
 import { Tooltip as Tooltip$1 } from "radix-ui";
 
 //#region packages/components/ui/tooltip.d.ts
@@ -19,7 +19,7 @@ import { Tooltip as Tooltip$1 } from "radix-ui";
 declare function TooltipProvider({
   delayDuration,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Provider>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Provider>): react258.JSX.Element;
 /**
  * Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
  *
@@ -38,18 +38,18 @@ declare function TooltipProvider({
  */
 declare function Tooltip({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Root>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Root>): react258.JSX.Element;
 /** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
 declare function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Trigger>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Trigger>): react258.JSX.Element;
 /** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
 declare function TooltipContent({
   className,
   sideOffset,
   children,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Content>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Content>): react258.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.cts.map

package/dist/ui/tooltip.d.mts

@@ -1,4 +1,4 @@
-import * as react229 from "react";
+import * as react224 from "react";
 import { Tooltip as Tooltip$1 } from "radix-ui";
 
 //#region packages/components/ui/tooltip.d.ts
@@ -19,7 +19,7 @@ import { Tooltip as Tooltip$1 } from "radix-ui";
 declare function TooltipProvider({
   delayDuration,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Provider>): react229.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Provider>): react224.JSX.Element;
 /**
  * Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
  *
@@ -38,18 +38,18 @@ declare function TooltipProvider({
  */
 declare function Tooltip({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Root>): react229.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Root>): react224.JSX.Element;
 /** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
 declare function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Trigger>): react229.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Trigger>): react224.JSX.Element;
 /** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
 declare function TooltipContent({
   className,
   sideOffset,
   children,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Content>): react229.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Content>): react224.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.mts.map

package/dist/ui/tooltip.mjs

@@ -1 +1 @@
-"use client";import{i as e,n as t,r as n,t as r}from"../tooltip-BfBJRYpc.mjs";export{r as Tooltip,t as TooltipContent,n as TooltipProvider,e as TooltipTrigger};
+"use client";import{i as e,n as t,r as n,t as r}from"../tooltip-Dxl5Wa8i.mjs";export{r as Tooltip,t as TooltipContent,n as TooltipProvider,e as TooltipTrigger};

package/dist/{user-D8Skw8dI.mjs → user-DtZy4P9d.mjs}

@@ -1,2 +1,2 @@
-import{t as e}from"./paragraph-CjstaJFj.mjs";import{t}from"./flex-BAcvp4lB.mjs";import{n,t as r}from"./avatar-m1LjDIil.mjs";import{UserRoundIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{colorHashLight as s}from"@customafk/react-toolkit/color-hash";const c=({uuid:c,username:l,email:u})=>o(t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[a(r,{className:`size-10 shadow-card`,children:a(n,{style:{backgroundColor:s.hex(c)},children:a(i,{size:28,className:`text-white`})})}),o(t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[a(e,{className:`text-sm font-medium text-text-positive`,children:l}),a(e,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:u})]})]});export{c as t};
-//# sourceMappingURL=user-D8Skw8dI.mjs.map
+import{t as e}from"./paragraph-DYLaQtTV.mjs";import{t}from"./flex-B6YSJzGe.mjs";import{n,t as r}from"./avatar-fltdRVsJ.mjs";import{UserRoundIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{colorHashLight as s}from"@customafk/react-toolkit/color-hash";const c=({uuid:c,username:l,email:u})=>o(t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[a(r,{className:`size-10 shadow-card`,children:a(n,{style:{backgroundColor:s.hex(c)},children:a(i,{size:28,className:`text-white`})})}),o(t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[a(e,{className:`text-sm font-medium text-text-positive`,children:l}),a(e,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:u})]})]});export{c as t};
+//# sourceMappingURL=user-DtZy4P9d.mjs.map

package/dist/{user-D8Skw8dI.mjs.map → user-DtZy4P9d.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"user-D8Skw8dI.mjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gSA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,WAE9E,EAAC,EAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,iBAC3D,EAAC,EAAA,CAAO,UAAU,+BAChB,EAAC,EAAA,CAAe,MAAO,CAAE,gBAAiB,EAAe,IAAI,EAAK,CAAE,UAClE,EAAC,EAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,CACT,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,kBAC7C,EAAC,EAAA,CAAU,UAAU,kDAA0C,GAAqB,CACpF,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}
+{"version":3,"file":"user-DtZy4P9d.mjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gSA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,WAE9E,EAAC,EAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,iBAC3D,EAAC,EAAA,CAAO,UAAU,+BAChB,EAAC,EAAA,CAAe,MAAO,CAAE,gBAAiB,EAAe,IAAI,EAAK,CAAE,UAClE,EAAC,EAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,CACT,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,kBAC7C,EAAC,EAAA,CAAU,UAAU,kDAA0C,GAAqB,CACpF,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}

package/dist/{user-Dns1BKaT.cjs → user-ii4FBhO1.cjs}

@@ -1,2 +1,2 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./paragraph-D-JHj7EP.cjs`),n=require(`./flex-DYh2t8ft.cjs`),r=require(`./avatar-CqRl9dge.cjs`);let i=require(`lucide-react`),a=require(`react/jsx-runtime`),o=require(`@customafk/react-toolkit/color-hash`);const s=({uuid:e,username:s,email:c})=>(0,a.jsxs)(n.t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[(0,a.jsx)(r.t,{className:`size-10 shadow-card`,children:(0,a.jsx)(r.n,{style:{backgroundColor:o.colorHashLight.hex(e)},children:(0,a.jsx)(i.UserRoundIcon,{size:28,className:`text-white`})})}),(0,a.jsxs)(n.t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[(0,a.jsx)(t.t,{className:`text-sm font-medium text-text-positive`,children:s}),(0,a.jsx)(t.t,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:c})]})]});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
-//# sourceMappingURL=user-Dns1BKaT.cjs.map
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./paragraph-DvTZvbzw.cjs`),n=require(`./flex-DmWmOBn5.cjs`),r=require(`./avatar-TyOphzGo.cjs`);let i=require(`lucide-react`),a=require(`react/jsx-runtime`),o=require(`@customafk/react-toolkit/color-hash`);const s=({uuid:e,username:s,email:c})=>(0,a.jsxs)(n.t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[(0,a.jsx)(r.t,{className:`size-10 shadow-card`,children:(0,a.jsx)(r.n,{style:{backgroundColor:o.colorHashLight.hex(e)},children:(0,a.jsx)(i.UserRoundIcon,{size:28,className:`text-white`})})}),(0,a.jsxs)(n.t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[(0,a.jsx)(t.t,{className:`text-sm font-medium text-text-positive`,children:s}),(0,a.jsx)(t.t,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:c})]})]});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
+//# sourceMappingURL=user-ii4FBhO1.cjs.map

package/dist/{user-Dns1BKaT.cjs.map → user-ii4FBhO1.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"user-Dns1BKaT.cjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gQA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,YAE9E,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,kBAC3D,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAO,UAAU,gCAChB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAO,CAAE,gBAAiBC,EAAAA,eAAe,IAAI,EAAK,CAAE,WAClE,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,EACT,EAAA,EAAA,MAACJ,EAAAA,EAAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,mBAC7C,EAAA,EAAA,KAACK,EAAAA,EAAAA,CAAU,UAAU,kDAA0C,GAAqB,EACpF,EAAA,EAAA,KAACA,EAAAA,EAAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}
+{"version":3,"file":"user-ii4FBhO1.cjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gQA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,YAE9E,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,kBAC3D,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAO,UAAU,gCAChB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAO,CAAE,gBAAiBC,EAAAA,eAAe,IAAI,EAAK,CAAE,WAClE,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,EACT,EAAA,EAAA,MAACJ,EAAAA,EAAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,mBAC7C,EAAA,EAAA,KAACK,EAAAA,EAAAA,CAAU,UAAU,kDAA0C,GAAqB,EACpF,EAAA,EAAA,KAACA,EAAAA,EAAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -423,7 +423,11 @@
     "format": "npx @biomejs/biome format",
     "format:fix": "npx @biomejs/biome format --write",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:storybook": "vitest --config vitest.storybook.config.ts"
   },
   "peerDependencies": {
     "@customafk/react-toolkit": "0.0.19",
@@ -459,7 +463,7 @@
     "lucide-react": "^0.545.0",
     "nanoid": "^5.1.6",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.0",
+    "radix-ui": "^1.6.0",
     "react": "^19.2.0",
     "react-country-flag": "^3.1.0",
     "react-day-picker": "^9.9.0",
@@ -481,15 +485,26 @@
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-onboarding": "^10.1.0",
     "@storybook/addon-themes": "^10.1.0",
+    "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react-vite": "^10.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.0.0",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "jsdom": "^26.1.0",
+    "playwright": "^1.61.0",
     "tsdown": "^0.18.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.30.1",
     "unplugin-lightningcss": "^0.4.2",
-    "vite": "^6.3.5",
+    "vite": "^8.0.16",
     "vitest": "^4.1.8"
   },
   "main": "./dist/index.cjs",

package/styles/spacing.css

@@ -0,0 +1,186 @@
+/**
+ * spacing.css — Three-scale responsive spacing system
+ *
+ * ─────────────────────────────────────────────────────────────
+ * THE THREE SCALES
+ * ─────────────────────────────────────────────────────────────
+ *
+ * Pick the scale based on what sits on either side of the gap:
+ *
+ *   layout    — gaps between large page regions (sections, page gutters,
+ *               hero-to-content, sidebar-to-main). The things on either
+ *               side are full-width zones.
+ *
+ *   section   — gaps inside a section (header-to-body, card stacks,
+ *               grouped rows, list items). The things on either side are
+ *               content blocks within a zone.
+ *
+ *   component — internal padding and gaps of a single UI component
+ *               (button, chip, input, badge, tag). The things on either
+ *               side are parts of one atomic element.
+ *
+ * Rule of thumb: the bigger the things on either side, the higher the
+ * scale. A gap between two full sections is `layout`. A gap between two
+ * lines of text inside a card is `component`.
+ *
+ * ─────────────────────────────────────────────────────────────
+ * BREAKPOINTS (mobile-first)
+ * ─────────────────────────────────────────────────────────────
+ *
+ *   mobile   — default (no media query), < 768px
+ *   tablet   — @media (min-width: 768px)   → Tailwind `md:`
+ *   desktop  — @media (min-width: 1024px)  → Tailwind `lg:`
+ *
+ * ─────────────────────────────────────────────────────────────
+ * NAMING CONVENTION
+ * ─────────────────────────────────────────────────────────────
+ *
+ *   --spacing-{scale}-{size}
+ *
+ *   Scales : layout | section | component
+ *   Sizes  : xl | lg | md | sm | xs | none
+ *
+ * ─────────────────────────────────────────────────────────────
+ * HOW TO USE
+ * ─────────────────────────────────────────────────────────────
+ *
+ * In CSS / inline styles:
+ *
+ *   gap: var(--spacing-layout-md);
+ *   padding: var(--spacing-section-lg);
+ *   padding-inline: var(--spacing-component-sm);
+ *
+ * In Tailwind (via arbitrary value):
+ *
+ *   class="gap-[var(--spacing-layout-md)]"
+ *   class="p-[var(--spacing-section-lg)]"
+ *
+ * The CSS variable automatically resolves to the correct pixel value
+ * for the current viewport, so no responsive prefix is needed.
+ *
+ * ─────────────────────────────────────────────────────────────
+ * IMPORT ORDER (for consumers)
+ * ─────────────────────────────────────────────────────────────
+ *
+ *   @import 'styles/base.css';
+ *   @import 'styles/theme.css';
+ *   @import 'styles/spacing.css';   ← here
+ *   @import 'styles/typography.css'; (optional)
+ */
+
+/* ─────────────────────────────────────────────────────────────
+   BASE VALUES — mobile (< 768px)
+   ───────────────────────────────────────────────────────────── */
+:root {
+  /* ── Layout scale ──────────────────────────────────────────
+   * Page-level spacing: gaps between sections, page gutters.
+   * Use when spacing two full-width page regions apart.
+   *
+   * Token              Mobile   Tablet   Desktop
+   * --spacing-layout-xl   48px    64px    128px
+   * --spacing-layout-lg   32px    48px     96px
+   * --spacing-layout-md   16px    32px     64px
+   * --spacing-layout-sm   12px    24px     48px
+   * --spacing-layout-xs    8px    16px     32px
+   * --spacing-layout-none   0       0        0
+   */
+  --spacing-layout-xl: 48px;
+  --spacing-layout-lg: 32px;
+  --spacing-layout-md: 16px;
+  --spacing-layout-sm: 12px;
+  --spacing-layout-xs: 8px;
+  --spacing-layout-none: 0;
+
+  /* ── Section scale ─────────────────────────────────────────
+   * Section-level spacing: header-to-body, card stacks,
+   * grouped rows, list items within a section.
+   *
+   * Token                Mobile   Tablet   Desktop
+   * --spacing-section-xl   20px    32px     48px
+   * --spacing-section-lg   16px    20px     32px
+   * --spacing-section-md   12px    16px     24px
+   * --spacing-section-sm   12px    16px     16px
+   * --spacing-section-xs    8px    12px     12px
+   * --spacing-section-none   0       0        0
+   */
+  --spacing-section-xl: 20px;
+  --spacing-section-lg: 16px;
+  --spacing-section-md: 12px;
+  --spacing-section-sm: 12px;
+  --spacing-section-xs: 8px;
+  --spacing-section-none: 0;
+
+  /* ── Component scale ───────────────────────────────────────
+   * Component-internal spacing: padding and gaps inside a
+   * single UI element (button, chip, input, badge).
+   *
+   * Token                  Mobile   Tablet   Desktop
+   * --spacing-component-xl   12px    16px     24px
+   * --spacing-component-lg   12px    16px     16px
+   * --spacing-component-md    8px    12px     12px
+   * --spacing-component-sm    8px    FLAT     FLAT   ← same at all sizes
+   * --spacing-component-xs    4px    FLAT     FLAT   ← same at all sizes
+   * --spacing-component-none   0       0        0
+   *
+   * Note: component-sm and component-xs are intentionally flat.
+   * Tight internal spacing reads the same across all viewports.
+   */
+  --spacing-component-xl: 12px;
+  --spacing-component-lg: 12px;
+  --spacing-component-md: 8px;
+  --spacing-component-sm: 8px;
+  --spacing-component-xs: 4px;
+  --spacing-component-none: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   TABLET — 768px+ (Tailwind `md:`)
+   ───────────────────────────────────────────────────────────── */
+@media (min-width: 768px) {
+  :root {
+    /* Layout */
+    --spacing-layout-xl: 64px;
+    --spacing-layout-lg: 48px;
+    --spacing-layout-md: 32px;
+    --spacing-layout-sm: 24px;
+    --spacing-layout-xs: 16px;
+
+    /* Section */
+    --spacing-section-xl: 32px;
+    --spacing-section-lg: 20px;
+    --spacing-section-md: 16px;
+    --spacing-section-sm: 16px;
+    --spacing-section-xs: 12px;
+
+    /* Component (xl / lg / md scale up; sm and xs stay flat) */
+    --spacing-component-xl: 16px;
+    --spacing-component-lg: 16px;
+    --spacing-component-md: 12px;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   DESKTOP — 1024px+ (Tailwind `lg:`)
+   ───────────────────────────────────────────────────────────── */
+@media (min-width: 1024px) {
+  :root {
+    /* Layout */
+    --spacing-layout-xl: 128px;
+    --spacing-layout-lg: 96px;
+    --spacing-layout-md: 64px;
+    --spacing-layout-sm: 48px;
+    --spacing-layout-xs: 32px;
+
+    /* Section */
+    --spacing-section-xl: 48px;
+    --spacing-section-lg: 32px;
+    --spacing-section-md: 24px;
+    --spacing-section-sm: 16px;
+    --spacing-section-xs: 12px;
+
+    /* Component (xl / lg / md scale up; sm and xs stay flat) */
+    --spacing-component-xl: 24px;
+    --spacing-component-lg: 16px;
+    --spacing-component-md: 12px;
+  }
+}

package/dist/button-Bu4ejNOW.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-Bu4ejNOW.cjs","names":["Slot","buttonVariants","buttonLoadingVariant","Loader2Icon"],"sources":["../packages/components/ui/button.tsx"],"sourcesContent":["'use client';\n\nimport { Loader2Icon } from 'lucide-react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type ButtonVariantProps, buttonLoadingVariant, buttonVariants } from './button.variants';\n\n/**\n * Props for the {@link Button} component.\n *\n * Extends all native `<button>` attributes except `color`, which is\n * re-declared as a semantic design-token via {@link ButtonVariantProps}.\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/utilities/slot} Radix Slot (asChild pattern)\n */\nexport interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {\n  /**\n   * When `true`, renders children through Radix's `<Slot>` primitive,\n   * merging all button props directly onto the child element.\n   *\n   * Use this to swap the rendered HTML element while keeping button styling\n   * (e.g. render a Next.js `<Link>` that looks like a button).\n   *\n   * @default false\n   * @example\n   * ```tsx\n   * <Button asChild variant=\"ghost\">\n   *   <Link href=\"/dashboard\">Go to Dashboard</Link>\n   * </Button>\n   * ```\n   */\n  asChild?: boolean;\n\n  /**\n   * When `true`, shows an animated `Loader2` spinner overlay and sets\n   * `aria-busy=\"true\"`. The button is implicitly disabled while loading —\n   * no separate `disabled` prop is needed for loading states.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n\n  /**\n   * Visual style variant of the button.\n   *\n   * | Value | Description |\n   * |---|---|\n   * | `\"default\"` | Filled surface — primary call-to-action (default) |\n   * | `\"outline\"` | Transparent background with a visible border |\n   * | `\"ghost\"` | No background or border — minimal footprint |\n   * | `\"link\"` | Styled as an underlined hyperlink |\n   * | `\"icon\"` | Square, padding-free — icon-only buttons |\n   * | `\"destructive\"` | Red-toned filled surface for danger actions |\n   *\n   * @default \"default\"\n   */\n  variant?: ButtonVariantProps['variant'];\n\n  /**\n   * Semantic color token applied to the button's surface and text.\n   *\n   * | Value | Usage |\n   * |---|---|\n   * | `\"primary\"` | Brand primary (default) |\n   * | `\"success\"` | Confirmation / save actions |\n   * | `\"danger\"` | Destructive / delete actions |\n   * | `\"warning\"` | Cautionary / irreversible actions |\n   * | `\"muted\"` | Secondary / low-emphasis actions |\n   *\n   * @default \"primary\"\n   */\n  color?: ButtonVariantProps['color'];\n\n  /**\n   * Controls height, horizontal padding, and font size.\n   *\n   * | Value | Height |\n   * |---|---|\n   * | `\"sm\"` | 32 px |\n   * | `\"default\"` | 36 px |\n   * | `\"lg\"` | 40 px |\n   * | `\"icon\"` | 36 × 36 px (square) |\n   *\n   * @default \"default\"\n   */\n  size?: ButtonVariantProps['size'];\n\n  /**\n   * Additional class names applied to the inner `<div>` that wraps `children`.\n   * Use this to style the children's flex container without overriding the\n   * button's outer layout or focus-ring classes.\n   */\n  innerClassName?: string;\n}\n\n/**\n * Primary interactive button component for `@customafk/lunas-ui`.\n *\n * Built on Radix UI's `<Slot>` primitive. Supports multiple visual variants,\n * semantic color tokens, a built-in loading state with full accessibility\n * attributes, and polymorphic rendering via `asChild`. All native `<button>`\n * attributes are forwarded to the underlying element.\n *\n * **Import:** `import { Button } from '@customafk/lunas-ui/ui/button'`\n *\n * @example Basic usage\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * export function SaveAction() {\n *   return <Button color=\"primary\">Save changes</Button>;\n * }\n * ```\n *\n * @example Async loading state\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * export function SubmitButton({ isPending }: { isPending: boolean }) {\n *   return (\n *     <Button type=\"submit\" isLoading={isPending}>\n *       Submit\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example Destructive outline button\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * export function DeleteButton({ onDelete }: { onDelete: () => void }) {\n *   return (\n *     <Button variant=\"outline\" color=\"danger\" onClick={onDelete}>\n *       Delete account\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example Polymorphic — render as Next.js Link\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n * import Link from 'next/link';\n *\n * export function NavLink() {\n *   return (\n *     <Button asChild variant=\"ghost\" size=\"sm\">\n *       <Link href=\"/settings\">Settings</Link>\n *     </Button>\n *   );\n * }\n * ```\n */\nfunction Button({\n  className,\n  variant,\n  size = 'default',\n  color,\n  asChild = false,\n  isLoading = false,\n  children,\n  disabled,\n  type = 'button',\n  innerClassName,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n  const isDisabled = disabled || isLoading;\n\n  return (\n    <Comp\n      {...(!asChild ? { type, disabled: isDisabled } : undefined)}\n      data-slot=\"button\"\n      data-state={isLoading ? 'loading' : undefined}\n      aria-disabled={isDisabled ? true : undefined}\n      aria-busy={isLoading ? true : undefined}\n      className={cn(\n        buttonVariants({\n          variant,\n          size,\n          color,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {isLoading && (\n        <div className={buttonLoadingVariant({ variant, color })}>\n          <Loader2Icon size={16} className=\"animate-spin\" />\n          <span className=\"sr-only\">Loading</span>\n        </div>\n      )}\n      <div className={cn('inline-flex items-center justify-center gap-x-1', isLoading && 'invisible pointer-events-none', innerClassName)}>{children}</div>\n    </Comp>\n  );\n}\n\nexport { Button };\n"],"mappings":"8NA0JA,SAAS,EAAO,CACd,YACA,UACA,OAAO,UACP,QACA,UAAU,GACV,YAAY,GACZ,WACA,WACA,OAAO,SACP,iBACA,GAAG,GACW,CACd,IAAM,EAAO,EAAUA,EAAAA,EAAO,SACxB,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,MAAC,EAAA,CACC,GAAM,EAA2C,IAAA,GAAjC,CAAE,OAAM,SAAU,EAAY,CAC9C,YAAU,SACV,aAAY,EAAY,UAAY,IAAA,GACpC,gBAAe,EAAa,GAAO,IAAA,GACnC,YAAW,EAAY,GAAO,IAAA,GAC9B,WAAA,EAAA,EAAA,IACEC,EAAAA,EAAe,CACb,UACA,OACA,QACA,YACD,CAAC,CACH,CACD,GAAI,YAEH,IACC,EAAA,EAAA,MAAC,MAAA,CAAI,UAAWC,EAAAA,EAAqB,CAAE,UAAS,QAAO,CAAC,YACtD,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAY,KAAM,GAAI,UAAU,gBAAiB,EAClD,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,mBAAU,WAAc,CAAA,EACpC,EAER,EAAA,EAAA,KAAC,MAAA,CAAI,WAAA,EAAA,EAAA,IAAc,kDAAmD,GAAa,gCAAiC,EAAe,CAAG,YAAe,CAAA,EAChJ"}

package/dist/button-CfPTDyoq.mjs

@@ -1,2 +0,0 @@
-import{t as e}from"./dist-BQGL-YKY.mjs";import{n as t,t as n}from"./button.variants-B8aRZ52K.mjs";import{Loader2Icon as r}from"lucide-react";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s({className:s,variant:c,size:l=`default`,color:u,asChild:d=!1,isLoading:f=!1,children:p,disabled:m,type:h=`button`,innerClassName:g,..._}){let v=d?e:`button`,y=m||f;return o(v,{...d?void 0:{type:h,disabled:y},"data-slot":`button`,"data-state":f?`loading`:void 0,"aria-disabled":y?!0:void 0,"aria-busy":f?!0:void 0,className:i(t({variant:c,size:l,color:u,className:s})),..._,children:[f&&o(`div`,{className:n({variant:c,color:u}),children:[a(r,{size:16,className:`animate-spin`}),a(`span`,{className:`sr-only`,children:`Loading`})]}),a(`div`,{className:i(`inline-flex items-center justify-center gap-x-1`,f&&`invisible pointer-events-none`,g),children:p})]})}export{s as t};
-//# sourceMappingURL=button-CfPTDyoq.mjs.map

package/dist/button-CfPTDyoq.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-CfPTDyoq.mjs","names":[],"sources":["../packages/components/ui/button.tsx"],"sourcesContent":["'use client';\n\nimport { Loader2Icon } from 'lucide-react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type ButtonVariantProps, buttonLoadingVariant, buttonVariants } from './button.variants';\n\n/**\n * Props for the {@link Button} component.\n *\n * Extends all native `<button>` attributes except `color`, which is\n * re-declared as a semantic design-token via {@link ButtonVariantProps}.\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/utilities/slot} Radix Slot (asChild pattern)\n */\nexport interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {\n  /**\n   * When `true`, renders children through Radix's `<Slot>` primitive,\n   * merging all button props directly onto the child element.\n   *\n   * Use this to swap the rendered HTML element while keeping button styling\n   * (e.g. render a Next.js `<Link>` that looks like a button).\n   *\n   * @default false\n   * @example\n   * ```tsx\n   * <Button asChild variant=\"ghost\">\n   *   <Link href=\"/dashboard\">Go to Dashboard</Link>\n   * </Button>\n   * ```\n   */\n  asChild?: boolean;\n\n  /**\n   * When `true`, shows an animated `Loader2` spinner overlay and sets\n   * `aria-busy=\"true\"`. The button is implicitly disabled while loading —\n   * no separate `disabled` prop is needed for loading states.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n\n  /**\n   * Visual style variant of the button.\n   *\n   * | Value | Description |\n   * |---|---|\n   * | `\"default\"` | Filled surface — primary call-to-action (default) |\n   * | `\"outline\"` | Transparent background with a visible border |\n   * | `\"ghost\"` | No background or border — minimal footprint |\n   * | `\"link\"` | Styled as an underlined hyperlink |\n   * | `\"icon\"` | Square, padding-free — icon-only buttons |\n   * | `\"destructive\"` | Red-toned filled surface for danger actions |\n   *\n   * @default \"default\"\n   */\n  variant?: ButtonVariantProps['variant'];\n\n  /**\n   * Semantic color token applied to the button's surface and text.\n   *\n   * | Value | Usage |\n   * |---|---|\n   * | `\"primary\"` | Brand primary (default) |\n   * | `\"success\"` | Confirmation / save actions |\n   * | `\"danger\"` | Destructive / delete actions |\n   * | `\"warning\"` | Cautionary / irreversible actions |\n   * | `\"muted\"` | Secondary / low-emphasis actions |\n   *\n   * @default \"primary\"\n   */\n  color?: ButtonVariantProps['color'];\n\n  /**\n   * Controls height, horizontal padding, and font size.\n   *\n   * | Value | Height |\n   * |---|---|\n   * | `\"sm\"` | 32 px |\n   * | `\"default\"` | 36 px |\n   * | `\"lg\"` | 40 px |\n   * | `\"icon\"` | 36 × 36 px (square) |\n   *\n   * @default \"default\"\n   */\n  size?: ButtonVariantProps['size'];\n\n  /**\n   * Additional class names applied to the inner `<div>` that wraps `children`.\n   * Use this to style the children's flex container without overriding the\n   * button's outer layout or focus-ring classes.\n   */\n  innerClassName?: string;\n}\n\n/**\n * Primary interactive button component for `@customafk/lunas-ui`.\n *\n * Built on Radix UI's `<Slot>` primitive. Supports multiple visual variants,\n * semantic color tokens, a built-in loading state with full accessibility\n * attributes, and polymorphic rendering via `asChild`. All native `<button>`\n * attributes are forwarded to the underlying element.\n *\n * **Import:** `import { Button } from '@customafk/lunas-ui/ui/button'`\n *\n * @example Basic usage\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * export function SaveAction() {\n *   return <Button color=\"primary\">Save changes</Button>;\n * }\n * ```\n *\n * @example Async loading state\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * export function SubmitButton({ isPending }: { isPending: boolean }) {\n *   return (\n *     <Button type=\"submit\" isLoading={isPending}>\n *       Submit\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example Destructive outline button\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * export function DeleteButton({ onDelete }: { onDelete: () => void }) {\n *   return (\n *     <Button variant=\"outline\" color=\"danger\" onClick={onDelete}>\n *       Delete account\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example Polymorphic — render as Next.js Link\n * ```tsx\n * import { Button } from '@customafk/lunas-ui/ui/button';\n * import Link from 'next/link';\n *\n * export function NavLink() {\n *   return (\n *     <Button asChild variant=\"ghost\" size=\"sm\">\n *       <Link href=\"/settings\">Settings</Link>\n *     </Button>\n *   );\n * }\n * ```\n */\nfunction Button({\n  className,\n  variant,\n  size = 'default',\n  color,\n  asChild = false,\n  isLoading = false,\n  children,\n  disabled,\n  type = 'button',\n  innerClassName,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n  const isDisabled = disabled || isLoading;\n\n  return (\n    <Comp\n      {...(!asChild ? { type, disabled: isDisabled } : undefined)}\n      data-slot=\"button\"\n      data-state={isLoading ? 'loading' : undefined}\n      aria-disabled={isDisabled ? true : undefined}\n      aria-busy={isLoading ? true : undefined}\n      className={cn(\n        buttonVariants({\n          variant,\n          size,\n          color,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {isLoading && (\n        <div className={buttonLoadingVariant({ variant, color })}>\n          <Loader2Icon size={16} className=\"animate-spin\" />\n          <span className=\"sr-only\">Loading</span>\n        </div>\n      )}\n      <div className={cn('inline-flex items-center justify-center gap-x-1', isLoading && 'invisible pointer-events-none', innerClassName)}>{children}</div>\n    </Comp>\n  );\n}\n\nexport { Button };\n"],"mappings":"mPA0JA,SAAS,EAAO,CACd,YACA,UACA,OAAO,UACP,QACA,UAAU,GACV,YAAY,GACZ,WACA,WACA,OAAO,SACP,iBACA,GAAG,GACW,CACd,IAAM,EAAO,EAAU,EAAO,SACxB,EAAa,GAAY,EAE/B,OACE,EAAC,EAAA,CACC,GAAM,EAA2C,IAAA,GAAjC,CAAE,OAAM,SAAU,EAAY,CAC9C,YAAU,SACV,aAAY,EAAY,UAAY,IAAA,GACpC,gBAAe,EAAa,GAAO,IAAA,GACnC,YAAW,EAAY,GAAO,IAAA,GAC9B,UAAW,EACT,EAAe,CACb,UACA,OACA,QACA,YACD,CAAC,CACH,CACD,GAAI,YAEH,GACC,EAAC,MAAA,CAAI,UAAW,EAAqB,CAAE,UAAS,QAAO,CAAC,WACtD,EAAC,EAAA,CAAY,KAAM,GAAI,UAAU,gBAAiB,CAClD,EAAC,OAAA,CAAK,UAAU,mBAAU,WAAc,CAAA,EACpC,CAER,EAAC,MAAA,CAAI,UAAW,EAAG,kDAAmD,GAAa,gCAAiC,EAAe,CAAG,YAAe,CAAA,EAChJ"}

package/dist/chunk-Bmb41Sf3.cjs

@@ -1 +0,0 @@
-var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/cms-layout-BrubV8D8.cjs

@@ -1,2 +0,0 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./dist-CAeolvAH.cjs`),n=require(`./button-Bu4ejNOW.cjs`),r=require(`./tooltip-DC6i1A25.cjs`),i=require(`./separator-CBup_ah1.cjs`),a=require(`./sheet-DAjZ-Q6Q.cjs`),o=require(`./dropdown-menu-Bz7oMQ36.cjs`),s=require(`./input-BvzsfAUc.cjs`);let c=require(`lucide-react`),l=require(`react`),u=require(`@customafk/react-toolkit/utils`),d=require(`class-variance-authority`),f=require(`react/jsx-runtime`),p=require(`@customafk/react-toolkit/hooks/useMobile`);const m=`sidebar_state`,h=3600*24*7,g=`16rem`,_=`18rem`,v=`3rem`,y=`b`,b=(0,l.createContext)(null);function x(){let e=(0,l.useContext)(b);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function S({defaultOpen:e=!0,open:t,onOpenChange:n,className:i,style:a,children:o,...s}){let c=(0,p.useIsMobile)(),[d,m]=(0,l.useState)(!1),[h,g]=(0,l.useState)(e),_=t??h,v=(0,l.useCallback)(e=>{let t=typeof e==`function`?e(_):e;n?n(t):g(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,_]),y=(0,l.useCallback)(()=>c?m(e=>!e):v(e=>!e),[c,v]);(0,l.useEffect)(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),y())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[y]);let x=_?`expanded`:`collapsed`,S=(0,l.useMemo)(()=>({state:x,open:_,setOpen:v,isMobile:c,openMobile:d,setOpenMobile:m,toggleSidebar:y}),[x,_,v,c,d,y]);return(0,f.jsx)(b.Provider,{value:S,children:(0,f.jsx)(r.r,{delayDuration:0,children:(0,f.jsx)(`section`,{"data-slot":`layout-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:(0,u.cn)(`relative group/sidebar-wrapper flex h-dvh bg-sidebar`,i),...s,children:o})})})}const C=(0,l.memo)(({side:e=`left`,variant:t=`sidebar`,collapsible:r=`offcanvas`,className:i,children:o,...s})=>{let{isMobile:d,state:p,openMobile:m,setOpenMobile:h,toggleSidebar:g}=x(),_=(0,l.useCallback)(e=>{g(),e.preventDefault(),e.stopPropagation()},[g]);return r===`none`?(0,f.jsx)(`aside`,{"data-slot":`sidebar`,className:(0,u.cn)(`flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...s,children:o}):d?(0,f.jsx)(a.t,{open:m,onOpenChange:h,...s,children:(0,f.jsxs)(a.r,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,style:{"--sidebar-width":`18rem`},side:e,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden`,children:[(0,f.jsxs)(a.o,{className:`sr-only`,children:[(0,f.jsx)(a.s,{children:`Sidebar`}),(0,f.jsx)(a.i,{children:`Displays the mobile sidebar.`})]}),(0,f.jsxs)(`div`,{className:`flex size-full flex-col`,children:[(0,f.jsxs)(`div`,{className:`flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4`,children:[(0,f.jsxs)(n.t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:(0,u.cn)(`size-10 rounded-full`,i),onClick:_,children:[(0,f.jsx)(c.MenuIcon,{className:`size-6!`}),(0,f.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,f.jsx)(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:(0,f.jsx)(c.ShoppingCartIcon,{size:20})}),(0,f.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,f.jsx)(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),(0,f.jsx)(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),(0,f.jsx)(`div`,{className:`flex flex-1 flex-col p-2`,children:o})]})]})}):(0,f.jsxs)(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":p,"data-collapsible":p===`collapsed`?r:``,"data-variant":t,"data-side":e,"data-slot":`sidebar`,children:[(0,f.jsx)(`div`,{"data-slot":`sidebar-gap`,className:(0,u.cn)(`bg-transparent`,`transition-[width] duration-200 ease-linear`,`h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]`,`w-(--sidebar-width)`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`)}),(0,f.jsx)(`div`,{"data-slot":`sidebar-container`,className:(0,u.cn)(`hidden md:flex shadow-nav`,`fixed left-0 inset-y-0 p-2`,`top-[calc(var(--header-height)+0.5rem)] z-10`,`w-(--sidebar-width)`,`transition-all duration-200 ease-linear`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`,i),...s,children:(0,f.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`relative flex size-full flex-col`,children:o})})]})});C.displayName=`CMSLayoutSidebar`;const w=(0,l.memo)(({className:e,children:t,...n})=>(0,f.jsxs)(`main`,{"data-slot":`sidebar-inset`,className:(0,u.cn)(`relative flex w-full flex-1 flex-col`,e),...n,children:[(0,f.jsx)(`div`,{className:`h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]`}),(0,f.jsx)(`div`,{className:`relative flex-1 size-full overflow-auto`,children:t})]}));w.displayName=`CMSLayoutMain`;const T=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(s.t,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:(0,u.cn)(`h-8 w-full bg-background shadow-none`,e),...t}));T.displayName=`SidebarInput`;const E=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:(0,u.cn)(`flex flex-col gap-2 p-2`,e),...t}));E.displayName=`SidebarHeader`;const D=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:(0,u.cn)(`flex flex-col gap-2`,e),...t}));D.displayName=`SidebarFooter`;const O=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(i.t,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:(0,u.cn)(`mx-2 w-auto bg-sidebar-border`,e),...t}));O.displayName=`SidebarSeparator`;const k=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:(0,u.cn)(`flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t}));k.displayName=`SidebarContent`;const A=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,u.cn)(`relative flex w-full flex-col`,e),...t}));A.displayName=`SidebarGroup`;const j=(0,l.memo)(({className:e,asChild:n=!1,...r})=>(0,f.jsx)(n?t.t:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,u.cn)(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,e),...r}));j.displayName=`SidebarGroupLabel`;const M=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,u.cn)(`w-full text-sm`,e),...t}));M.displayName=`SidebarGroupContent`;const N=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:(0,u.cn)(`flex w-full min-w-0 flex-col gap-1`,e),...t}));N.displayName=`SidebarMenu`;const P=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:(0,u.cn)(`group/menu-item relative`,e),...t}));P.displayName=`SidebarMenuItem`;const F=(0,d.cva)([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,background-color,width,height,padding]`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`disabled:pointer-events-none disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6 [&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}}),I=(0,l.memo)(({asChild:e=!1,isActive:n=!1,variant:i=`default`,size:a=`default`,tooltip:o,className:s,...c})=>{let d=e?t.t:`button`,{isMobile:p,state:m}=x(),h=(0,l.useCallback)(e=>{c.onClick?.(),e.preventDefault(),e.stopPropagation()},[c.onClick]),g=(0,f.jsx)(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":n,className:(0,u.cn)(F({variant:i,size:a}),s),onClick:h,...c});return o?(typeof o==`string`&&(o={children:o}),(0,f.jsxs)(r.t,{children:[(0,f.jsx)(r.i,{asChild:!0,children:g}),(0,f.jsx)(r.n,{side:`right`,align:`center`,hidden:m!==`collapsed`||p,...o})]})):g});I.displayName=`SidebarMenuButton`;const L=({i18nText:e,onChangeToEnLocale:t,onChangeToViLocale:r})=>{let{toggleSidebar:i}=x(),a=(0,l.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),i()},[i]),s=(0,l.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),t?.()},[t]),d=(0,l.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return(0,f.jsxs)(`header`,{"data-slot":`cms-layout-header`,className:(0,u.cn)(`bg-card`,`h-(--header-height)`,`sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6`,`absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5`,`flex items-center shadow-nav`,`transition-[height] ease-linear`),children:[(0,f.jsxs)(n.t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`size-10 rounded-full transition-all hover:text-text-positive`,onClick:a,children:[(0,f.jsx)(c.MenuIcon,{className:`size-6!`}),(0,f.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,f.jsxs)(`div`,{className:`flex flex-1 gap-x-2 sm:ml-2.5`,children:[(0,f.jsx)(`div`,{className:`flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:(0,f.jsx)(c.ShoppingCartIcon,{size:20})}),(0,f.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,f.jsx)(`span`,{className:`truncate font-medium`,children:`Lunas Enterprise`}),(0,f.jsx)(`span`,{className:`truncate text-xs`,children:`Established 2025`})]})]}),(0,f.jsxs)(o.t,{children:[(0,f.jsx)(o.h,{asChild:!0,children:(0,f.jsxs)(n.t,{"data-slot":`locale-trigger`,variant:`ghost`,color:`muted`,className:`gap-x-1 rounded-full transition-all hover:text-text-positive`,children:[(0,f.jsx)(c.EarthIcon,{className:`size-6!`}),e]})}),(0,f.jsx)(o.r,{align:`end`,children:(0,f.jsxs)(o.i,{children:[(0,f.jsx)(o.a,{onClick:s,children:`EN - English`}),(0,f.jsx)(o.a,{onClick:d,children:`VI - Vietnamese`})]})})]})]})},R=(0,l.memo)(({id:e,label:t,icon:n,activeNavItemId:r,onClick:i})=>(0,f.jsx)(P,{children:(0,f.jsxs)(I,{isActive:e===r,onClick:i,children:[n,t]})}));R.displayName=`SidebarContentGroupItem`;const z=(0,l.memo)(({id:e,label:t,children:n})=>(0,f.jsxs)(A,{children:[(0,f.jsx)(j,{children:t}),(0,f.jsx)(M,{children:(0,f.jsx)(N,{children:n})})]}));z.displayName=`SidebarContentGroup`;const B=({i18nText:e,activeNavItemId:t,sidebar:n,children:r,onChangeToEnLocale:i,onChangeToViLocale:a,onLogout:o,logoutLabel:s=`Log out`,copyright:l=`Copyright © ${new Date().getFullYear()}, Lunas.`})=>{let u=n?.groupcontent??[];return(0,f.jsxs)(S,{children:[(0,f.jsx)(L,{i18nText:e,onChangeToEnLocale:i,onChangeToViLocale:a}),(0,f.jsxs)(C,{variant:`inset`,collapsible:`icon`,children:[(0,f.jsx)(k,{children:u.map(e=>(0,f.jsx)(z,{id:e.id,label:e.label,children:e.items.map(e=>(0,f.jsx)(R,{id:e.id,activeNavItemId:t,label:e.label,icon:e.icon,onClick:e.onClick},e.id))},e.id))}),(0,f.jsx)(D,{children:(0,f.jsxs)(N,{children:[(0,f.jsx)(P,{children:(0,f.jsxs)(I,{className:`border border-border`,onClick:o,children:[(0,f.jsx)(c.LogOutIcon,{className:`text-text-positive-weak`}),s]})}),(0,f.jsx)(P,{className:`mt-2 border-t border-t-border`,children:(0,f.jsx)(`p`,{className:`pt-2 text-center text-xs text-text-positive-subtle`,children:l})})]})})]}),(0,f.jsx)(w,{children:r})]})};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return B}});
-//# sourceMappingURL=cms-layout-BrubV8D8.cjs.map