@customafk/lunas-ui 0.2.36 → 0.2.38

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.36",
+  "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

package/dist/cms-layout-BrubV8D8.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"cms-layout-BrubV8D8.cjs","names":["open","TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n}>","Button","MenuIcon","ShoppingCartIcon","DropdownMenu","DropdownMenuTrigger","EarthIcon","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>","LogOutIcon"],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\nfunction CMSLayoutProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n      // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [setOpenProp, open]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n  }, [isMobile, setOpen]);\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [toggleSidebar]);\n\n  const state = open ? 'expanded' : 'collapsed';\n\n  const contextValue = useMemo<SidebarContextProps>(\n    () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <section\n          data-slot=\"layout-wrapper\"\n          style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n          className={cn('relative group/sidebar-wrapper flex h-dvh bg-sidebar', className)}\n          {...props}\n        >\n          {children}\n        </section>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\nconst CMSLayoutSidebar = memo(\n  ({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    side?: 'left' | 'right';\n    variant?: 'sidebar' | 'floating' | 'inset';\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n  }) => {\n    const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n    const handleToggleSidebar = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n      event => {\n        toggleSidebar();\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [toggleSidebar]\n    );\n\n    if (collapsible === 'none') {\n      return (\n        <aside data-slot=\"sidebar\" className={cn('flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-slot=\"sidebar\"\n            data-mobile=\"true\"\n            style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n            side={side}\n            className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex size-full flex-col\">\n              <div className=\"flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4\">\n                <Button\n                  data-sidebar=\"trigger\"\n                  data-slot=\"sidebar-trigger\"\n                  variant=\"ghost\"\n                  color=\"muted\"\n                  size=\"icon\"\n                  className={cn('size-10 rounded-full', className)}\n                  onClick={handleToggleSidebar}\n                >\n                  <MenuIcon className=\"size-6!\" />\n                  <span className=\"sr-only\">Toggle Sidebar</span>\n                </Button>\n                <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <ShoppingCartIcon size={20} />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Lunas Store</span>\n                  <span className=\"truncate text-xs\">Established 2023</span>\n                </div>\n              </div>\n              <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n            </div>\n          </SheetContent>\n        </Sheet>\n      );\n    }\n\n    return (\n      <aside\n        className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n        data-slot=\"sidebar\"\n      >\n        <div\n          data-slot=\"sidebar-gap\"\n          className={cn(\n            'bg-transparent',\n            'transition-[width] duration-200 ease-linear',\n            'h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]',\n            'w-(--sidebar-width)',\n            'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n          )}\n        />\n        <div\n          data-slot=\"sidebar-container\"\n          className={cn(\n            'hidden md:flex shadow-nav',\n            'fixed left-0 inset-y-0 p-2',\n            'top-[calc(var(--header-height)+0.5rem)] z-10',\n            'w-(--sidebar-width)',\n            'transition-all duration-200 ease-linear',\n            'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n            className\n          )}\n          {...props}\n        >\n          <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n            {children}\n          </div>\n        </div>\n      </aside>\n    );\n  }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn('size-7', className)}\n      onClick={event => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n  return (\n    <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n      <div className=\"h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]\" />\n      <div className=\"relative flex-1 size-full overflow-auto\">{children}</div>\n    </main>\n  );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n  return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n  return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n      {...props}\n    />\n  );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        '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',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n  return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n  return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n  [\n    'peer/menu-button',\n    'cursor-pointer',\n    'flex w-full items-center gap-2',\n    'overflow-hidden rounded-md p-2 outline-hidden',\n    'truncate text-left font-normal',\n    'transition-[color,background-color,width,height,padding]',\n    'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n    'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n    'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n    'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n    '[&>svg]:size-6 [&>svg]:shrink-0',\n    '[&>span:last-child]:truncate',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n        outline:\n          '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))]',\n      },\n      size: {\n        default: 'h-10 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nconst SidebarMenuButton = memo(\n  ({\n    asChild = false,\n    isActive = false,\n    variant = 'default',\n    size = 'default',\n    tooltip,\n    className,\n    ...props\n  }: React.ComponentProps<'button'> & {\n    asChild?: boolean;\n    isActive?: boolean;\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n    onClick?: () => void;\n  } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n    const Comp = asChild ? Slot : 'button';\n    const { isMobile, state } = useSidebar();\n\n    const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n      event => {\n        props.onClick?.();\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [props.onClick]\n    );\n\n    const button = (\n      <Comp\n        data-slot=\"sidebar-menu-button\"\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        onClick={handleClick}\n        {...props}\n      />\n    );\n\n    if (!tooltip) return button;\n\n    if (typeof tooltip === 'string') {\n      tooltip = { children: tooltip };\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </Tooltip>\n    );\n  }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n  return (\n    <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{ '--skeleton-width': width } as React.CSSProperties}\n      />\n    </div>\n  );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  CMSLayoutProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  // biome-ignore lint/style/useComponentExportOnlyModules: true\n  useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, MenuIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport const CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale }) => {\n  const { toggleSidebar } = useSidebar();\n\n  const handleToggleSidebar = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      toggleSidebar();\n    },\n    [toggleSidebar]\n  );\n\n  const handleEnLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToEnLocale?.();\n    },\n    [onChangeToEnLocale]\n  );\n\n  const handleViLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToViLocale?.();\n    },\n    [onChangeToViLocale]\n  );\n\n  return (\n    <header\n      data-slot=\"cms-layout-header\"\n      className={cn(\n        'bg-card',\n        'h-(--header-height)',\n        'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n        'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n        'flex items-center shadow-nav',\n        'transition-[height] ease-linear'\n      )}\n    >\n      <Button\n        data-sidebar=\"trigger\"\n        data-slot=\"sidebar-trigger\"\n        variant=\"ghost\"\n        color=\"muted\"\n        size=\"icon\"\n        className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n        onClick={handleToggleSidebar}\n      >\n        <MenuIcon className=\"size-6!\" />\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n\n      <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n          <ShoppingCartIcon size={20} />\n        </div>\n        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n          <span className=\"truncate font-medium\">Lunas Enterprise</span>\n          <span className=\"truncate text-xs\">Established 2025</span>\n        </div>\n      </div>\n\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n            <EarthIcon className=\"size-6!\" />\n            {i18nText}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n            <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </header>\n  );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader } from './components/header';\nimport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n  /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n  id: string;\n  /** Human-readable label rendered inside the sidebar button. */\n  label: string;\n  /** Optional icon element rendered to the left of the label. */\n  icon?: React.ReactNode;\n  /** Callback fired when the sidebar button is clicked. */\n  onClick?: () => void;\n};\n\ntype NavGroup = {\n  /** Unique identifier for the group, used as React key. */\n  id: string;\n  /** Optional section heading rendered above the group's items. */\n  label?: string;\n  /** Navigation items that belong to this group. */\n  items: NavItem[];\n};\n\nexport type CMSLayoutProps = {\n  /** Text label used by the header for language-toggle or i18n display. */\n  i18nText?: string;\n  /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n  activeNavItemId?: string;\n  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n  sidebar?: { groupcontent: NavGroup[] };\n  /** Callback fired when the logout button is clicked. */\n  onLogout?: () => void;\n  /** Callback fired when the user switches the UI locale to English. */\n  onChangeToEnLocale?: () => void;\n  /** Callback fired when the user switches the UI locale to Vietnamese. */\n  onChangeToViLocale?: () => void;\n  /**\n   * Label displayed on the logout button.\n   * @default 'Log out'\n   */\n  logoutLabel?: string;\n  /**\n   * Copyright string shown at the bottom of the sidebar.\n   * @default `Copyright © <current year>, Lunas.`\n   */\n  copyright?: string;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick }) => (\n  <SidebarMenuItem>\n    <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n      {icon}\n      {label}\n    </SidebarMenuButton>\n  </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n  <SidebarGroup>\n    <SidebarGroupLabel>{label}</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>{children}</SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n *   activeNavItemId=\"dashboard\"\n *   sidebar={{\n *     groupcontent: [\n *       {\n *         id: 'main',\n *         label: 'Main',\n *         items: [\n *           { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },\n *         ],\n *       },\n *     ],\n *   }}\n *   onLogout={() => signOut()}\n * >\n *   <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n  i18nText,\n  activeNavItemId,\n  sidebar,\n  children,\n  onChangeToEnLocale,\n  onChangeToViLocale,\n  onLogout,\n  logoutLabel = 'Log out',\n  copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n}) => {\n  const groups = sidebar?.groupcontent ?? [];\n\n  return (\n    <CMSLayoutProvider>\n      <CMSLayoutHeader i18nText={i18nText} onChangeToEnLocale={onChangeToEnLocale} onChangeToViLocale={onChangeToViLocale} />\n      <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n        <SidebarContent>\n          {groups.map(group => (\n            <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n              {group.items.map(item => (\n                <SidebarContentGroupItem\n                  key={item.id}\n                  id={item.id}\n                  activeNavItemId={activeNavItemId}\n                  label={item.label}\n                  icon={item.icon}\n                  onClick={item.onClick}\n                />\n              ))}\n            </SidebarContentGroup>\n          ))}\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n                <LogOutIcon className=\"text-text-positive-weak\" />\n                {logoutLabel}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n              <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </CMSLayoutSidebar>\n      <CMSLayoutMain>{children}</CMSLayoutMain>\n    </CMSLayoutProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/cms-layout-C2-yysO2.mjs

@@ -1,2 +0,0 @@
-import{t as e}from"./dist-BQGL-YKY.mjs";import{t}from"./button-CfPTDyoq.mjs";import{i as n,n as r,r as i,t as a}from"./tooltip-BfBJRYpc.mjs";import{t as o}from"./separator-C6s-YvlT.mjs";import{i as s,o as c,r as l,s as u,t as d}from"./sheet-Cj8hoftE.mjs";import{a as f,h as p,i as m,r as h,t as g}from"./dropdown-menu-C6tRSumY.mjs";import{t as _}from"./input-5gk-Jv1y.mjs";import{EarthIcon as v,LogOutIcon as y,MenuIcon as b,ShoppingCartIcon as x}from"lucide-react";import{createContext as S,memo as C,useCallback as w,useContext as T,useEffect as E,useMemo as D,useState as O}from"react";import{cn as k}from"@customafk/react-toolkit/utils";import{cva as A}from"class-variance-authority";import{jsx as j,jsxs as M}from"react/jsx-runtime";import{useIsMobile as N}from"@customafk/react-toolkit/hooks/useMobile";const P=S(null);function F(){let e=T(P);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function I({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:a,children:o,...s}){let c=N(),[l,u]=O(!1),[d,f]=O(e),p=t??d,m=w(e=>{let t=typeof e==`function`?e(p):e;n?n(t):f(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,p]),h=w(()=>c?u(e=>!e):m(e=>!e),[c,m]);E(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),h())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[h]);let g=p?`expanded`:`collapsed`,_=D(()=>({state:g,open:p,setOpen:m,isMobile:c,openMobile:l,setOpenMobile:u,toggleSidebar:h}),[g,p,m,c,l,h]);return j(P.Provider,{value:_,children:j(i,{delayDuration:0,children:j(`section`,{"data-slot":`layout-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:k(`relative group/sidebar-wrapper flex h-dvh bg-sidebar`,r),...s,children:o})})})}const L=C(({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o})=>{let{isMobile:f,state:p,openMobile:m,setOpenMobile:h,toggleSidebar:g}=F(),_=w(e=>{g(),e.preventDefault(),e.stopPropagation()},[g]);return r===`none`?j(`aside`,{"data-slot":`sidebar`,className:k(`flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...o,children:a}):f?j(d,{open:m,onOpenChange:h,...o,children:M(l,{"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:[M(c,{className:`sr-only`,children:[j(u,{children:`Sidebar`}),j(s,{children:`Displays the mobile sidebar.`})]}),M(`div`,{className:`flex size-full flex-col`,children:[M(`div`,{className:`flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4`,children:[M(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:k(`size-10 rounded-full`,i),onClick:_,children:[j(b,{className:`size-6!`}),j(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),j(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:j(x,{size:20})}),M(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[j(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),j(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),j(`div`,{className:`flex flex-1 flex-col p-2`,children:a})]})]})}):M(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":p,"data-collapsible":p===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[j(`div`,{"data-slot":`sidebar-gap`,className:k(`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)))]`)}),j(`div`,{"data-slot":`sidebar-container`,className:k(`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),...o,children:j(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`relative flex size-full flex-col`,children:a})})]})});L.displayName=`CMSLayoutSidebar`;const R=C(({className:e,children:t,...n})=>M(`main`,{"data-slot":`sidebar-inset`,className:k(`relative flex w-full flex-1 flex-col`,e),...n,children:[j(`div`,{className:`h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]`}),j(`div`,{className:`relative flex-1 size-full overflow-auto`,children:t})]}));R.displayName=`CMSLayoutMain`;const z=C(({className:e,...t})=>j(_,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:k(`h-8 w-full bg-background shadow-none`,e),...t}));z.displayName=`SidebarInput`;const B=C(({className:e,...t})=>j(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:k(`flex flex-col gap-2 p-2`,e),...t}));B.displayName=`SidebarHeader`;const V=C(({className:e,...t})=>j(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:k(`flex flex-col gap-2`,e),...t}));V.displayName=`SidebarFooter`;const H=C(({className:e,...t})=>j(o,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:k(`mx-2 w-auto bg-sidebar-border`,e),...t}));H.displayName=`SidebarSeparator`;const U=C(({className:e,...t})=>j(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:k(`flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t}));U.displayName=`SidebarContent`;const W=C(({className:e,...t})=>j(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:k(`relative flex w-full flex-col`,e),...t}));W.displayName=`SidebarGroup`;const G=C(({className:t,asChild:n=!1,...r})=>j(n?e:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:k(`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`,t),...r}));G.displayName=`SidebarGroupLabel`;const K=C(({className:e,...t})=>j(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:k(`w-full text-sm`,e),...t}));K.displayName=`SidebarGroupContent`;const q=C(({className:e,...t})=>j(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:k(`flex w-full min-w-0 flex-col gap-1`,e),...t}));q.displayName=`SidebarMenu`;const J=C(({className:e,...t})=>j(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:k(`group/menu-item relative`,e),...t}));J.displayName=`SidebarMenuItem`;const Y=A([`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`}}),X=C(({asChild:t=!1,isActive:i=!1,variant:o=`default`,size:s=`default`,tooltip:c,className:l,...u})=>{let d=t?e:`button`,{isMobile:f,state:p}=F(),m=w(e=>{u.onClick?.(),e.preventDefault(),e.stopPropagation()},[u.onClick]),h=j(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":s,"data-active":i,className:k(Y({variant:o,size:s}),l),onClick:m,...u});return c?(typeof c==`string`&&(c={children:c}),M(a,{children:[j(n,{asChild:!0,children:h}),j(r,{side:`right`,align:`center`,hidden:p!==`collapsed`||f,...c})]})):h});X.displayName=`SidebarMenuButton`;const Z=({i18nText:e,onChangeToEnLocale:n,onChangeToViLocale:r})=>{let{toggleSidebar:i}=F(),a=w(e=>{e.preventDefault(),e.stopPropagation(),i()},[i]),o=w(e=>{e.preventDefault(),e.stopPropagation(),n?.()},[n]),s=w(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return M(`header`,{"data-slot":`cms-layout-header`,className:k(`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:[M(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:[j(b,{className:`size-6!`}),j(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),M(`div`,{className:`flex flex-1 gap-x-2 sm:ml-2.5`,children:[j(`div`,{className:`flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:j(x,{size:20})}),M(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[j(`span`,{className:`truncate font-medium`,children:`Lunas Enterprise`}),j(`span`,{className:`truncate text-xs`,children:`Established 2025`})]})]}),M(g,{children:[j(p,{asChild:!0,children:M(t,{"data-slot":`locale-trigger`,variant:`ghost`,color:`muted`,className:`gap-x-1 rounded-full transition-all hover:text-text-positive`,children:[j(v,{className:`size-6!`}),e]})}),j(h,{align:`end`,children:M(m,{children:[j(f,{onClick:o,children:`EN - English`}),j(f,{onClick:s,children:`VI - Vietnamese`})]})})]})]})},Q=C(({id:e,label:t,icon:n,activeNavItemId:r,onClick:i})=>j(J,{children:M(X,{isActive:e===r,onClick:i,children:[n,t]})}));Q.displayName=`SidebarContentGroupItem`;const $=C(({id:e,label:t,children:n})=>M(W,{children:[j(G,{children:t}),j(K,{children:j(q,{children:n})})]}));$.displayName=`SidebarContentGroup`;const ee=({i18nText:e,activeNavItemId:t,sidebar:n,children:r,onChangeToEnLocale:i,onChangeToViLocale:a,onLogout:o,logoutLabel:s=`Log out`,copyright:c=`Copyright © ${new Date().getFullYear()}, Lunas.`})=>{let l=n?.groupcontent??[];return M(I,{children:[j(Z,{i18nText:e,onChangeToEnLocale:i,onChangeToViLocale:a}),M(L,{variant:`inset`,collapsible:`icon`,children:[j(U,{children:l.map(e=>j($,{id:e.id,label:e.label,children:e.items.map(e=>j(Q,{id:e.id,activeNavItemId:t,label:e.label,icon:e.icon,onClick:e.onClick},e.id))},e.id))}),j(V,{children:M(q,{children:[j(J,{children:M(X,{className:`border border-border`,onClick:o,children:[j(y,{className:`text-text-positive-weak`}),s]})}),j(J,{className:`mt-2 border-t border-t-border`,children:j(`p`,{className:`pt-2 text-center text-xs text-text-positive-subtle`,children:c})})]})})]}),j(R,{children:r})]})};export{ee as t};
-//# sourceMappingURL=cms-layout-C2-yysO2.mjs.map

package/dist/cms-layout-C2-yysO2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"cms-layout-C2-yysO2.mjs","names":["open","CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n}>","CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>"],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\nfunction CMSLayoutProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n      // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n    },\n    [setOpenProp, open]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n  }, [isMobile, setOpen]);\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [toggleSidebar]);\n\n  const state = open ? 'expanded' : 'collapsed';\n\n  const contextValue = useMemo<SidebarContextProps>(\n    () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <section\n          data-slot=\"layout-wrapper\"\n          style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n          className={cn('relative group/sidebar-wrapper flex h-dvh bg-sidebar', className)}\n          {...props}\n        >\n          {children}\n        </section>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\nconst CMSLayoutSidebar = memo(\n  ({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    side?: 'left' | 'right';\n    variant?: 'sidebar' | 'floating' | 'inset';\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n  }) => {\n    const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n    const handleToggleSidebar = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n      event => {\n        toggleSidebar();\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [toggleSidebar]\n    );\n\n    if (collapsible === 'none') {\n      return (\n        <aside data-slot=\"sidebar\" className={cn('flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-slot=\"sidebar\"\n            data-mobile=\"true\"\n            style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n            side={side}\n            className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex size-full flex-col\">\n              <div className=\"flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4\">\n                <Button\n                  data-sidebar=\"trigger\"\n                  data-slot=\"sidebar-trigger\"\n                  variant=\"ghost\"\n                  color=\"muted\"\n                  size=\"icon\"\n                  className={cn('size-10 rounded-full', className)}\n                  onClick={handleToggleSidebar}\n                >\n                  <MenuIcon className=\"size-6!\" />\n                  <span className=\"sr-only\">Toggle Sidebar</span>\n                </Button>\n                <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <ShoppingCartIcon size={20} />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Lunas Store</span>\n                  <span className=\"truncate text-xs\">Established 2023</span>\n                </div>\n              </div>\n              <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n            </div>\n          </SheetContent>\n        </Sheet>\n      );\n    }\n\n    return (\n      <aside\n        className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n        data-slot=\"sidebar\"\n      >\n        <div\n          data-slot=\"sidebar-gap\"\n          className={cn(\n            'bg-transparent',\n            'transition-[width] duration-200 ease-linear',\n            'h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]',\n            'w-(--sidebar-width)',\n            'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n          )}\n        />\n        <div\n          data-slot=\"sidebar-container\"\n          className={cn(\n            'hidden md:flex shadow-nav',\n            'fixed left-0 inset-y-0 p-2',\n            'top-[calc(var(--header-height)+0.5rem)] z-10',\n            'w-(--sidebar-width)',\n            'transition-all duration-200 ease-linear',\n            'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n            className\n          )}\n          {...props}\n        >\n          <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n            {children}\n          </div>\n        </div>\n      </aside>\n    );\n  }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn('size-7', className)}\n      onClick={event => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n  return (\n    <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n      <div className=\"h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]\" />\n      <div className=\"relative flex-1 size-full overflow-auto\">{children}</div>\n    </main>\n  );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n  return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n  return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n      {...props}\n    />\n  );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        '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',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n  return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n  return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n  [\n    'peer/menu-button',\n    'cursor-pointer',\n    'flex w-full items-center gap-2',\n    'overflow-hidden rounded-md p-2 outline-hidden',\n    'truncate text-left font-normal',\n    'transition-[color,background-color,width,height,padding]',\n    'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n    'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n    'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n    'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n    '[&>svg]:size-6 [&>svg]:shrink-0',\n    '[&>span:last-child]:truncate',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n        outline:\n          '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))]',\n      },\n      size: {\n        default: 'h-10 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nconst SidebarMenuButton = memo(\n  ({\n    asChild = false,\n    isActive = false,\n    variant = 'default',\n    size = 'default',\n    tooltip,\n    className,\n    ...props\n  }: React.ComponentProps<'button'> & {\n    asChild?: boolean;\n    isActive?: boolean;\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n    onClick?: () => void;\n  } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n    const Comp = asChild ? Slot : 'button';\n    const { isMobile, state } = useSidebar();\n\n    const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n      event => {\n        props.onClick?.();\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [props.onClick]\n    );\n\n    const button = (\n      <Comp\n        data-slot=\"sidebar-menu-button\"\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        onClick={handleClick}\n        {...props}\n      />\n    );\n\n    if (!tooltip) return button;\n\n    if (typeof tooltip === 'string') {\n      tooltip = { children: tooltip };\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </Tooltip>\n    );\n  }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n  return (\n    <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{ '--skeleton-width': width } as React.CSSProperties}\n      />\n    </div>\n  );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  CMSLayoutProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  // biome-ignore lint/style/useComponentExportOnlyModules: true\n  useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, MenuIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport const CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale }) => {\n  const { toggleSidebar } = useSidebar();\n\n  const handleToggleSidebar = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      toggleSidebar();\n    },\n    [toggleSidebar]\n  );\n\n  const handleEnLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToEnLocale?.();\n    },\n    [onChangeToEnLocale]\n  );\n\n  const handleViLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToViLocale?.();\n    },\n    [onChangeToViLocale]\n  );\n\n  return (\n    <header\n      data-slot=\"cms-layout-header\"\n      className={cn(\n        'bg-card',\n        'h-(--header-height)',\n        'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n        'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n        'flex items-center shadow-nav',\n        'transition-[height] ease-linear'\n      )}\n    >\n      <Button\n        data-sidebar=\"trigger\"\n        data-slot=\"sidebar-trigger\"\n        variant=\"ghost\"\n        color=\"muted\"\n        size=\"icon\"\n        className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n        onClick={handleToggleSidebar}\n      >\n        <MenuIcon className=\"size-6!\" />\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n\n      <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n        <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n          <ShoppingCartIcon size={20} />\n        </div>\n        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n          <span className=\"truncate font-medium\">Lunas Enterprise</span>\n          <span className=\"truncate text-xs\">Established 2025</span>\n        </div>\n      </div>\n\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n            <EarthIcon className=\"size-6!\" />\n            {i18nText}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n            <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </header>\n  );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader } from './components/header';\nimport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n  /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n  id: string;\n  /** Human-readable label rendered inside the sidebar button. */\n  label: string;\n  /** Optional icon element rendered to the left of the label. */\n  icon?: React.ReactNode;\n  /** Callback fired when the sidebar button is clicked. */\n  onClick?: () => void;\n};\n\ntype NavGroup = {\n  /** Unique identifier for the group, used as React key. */\n  id: string;\n  /** Optional section heading rendered above the group's items. */\n  label?: string;\n  /** Navigation items that belong to this group. */\n  items: NavItem[];\n};\n\nexport type CMSLayoutProps = {\n  /** Text label used by the header for language-toggle or i18n display. */\n  i18nText?: string;\n  /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n  activeNavItemId?: string;\n  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n  sidebar?: { groupcontent: NavGroup[] };\n  /** Callback fired when the logout button is clicked. */\n  onLogout?: () => void;\n  /** Callback fired when the user switches the UI locale to English. */\n  onChangeToEnLocale?: () => void;\n  /** Callback fired when the user switches the UI locale to Vietnamese. */\n  onChangeToViLocale?: () => void;\n  /**\n   * Label displayed on the logout button.\n   * @default 'Log out'\n   */\n  logoutLabel?: string;\n  /**\n   * Copyright string shown at the bottom of the sidebar.\n   * @default `Copyright © <current year>, Lunas.`\n   */\n  copyright?: string;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick }) => (\n  <SidebarMenuItem>\n    <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n      {icon}\n      {label}\n    </SidebarMenuButton>\n  </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n  <SidebarGroup>\n    <SidebarGroupLabel>{label}</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>{children}</SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n *   activeNavItemId=\"dashboard\"\n *   sidebar={{\n *     groupcontent: [\n *       {\n *         id: 'main',\n *         label: 'Main',\n *         items: [\n *           { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },\n *         ],\n *       },\n *     ],\n *   }}\n *   onLogout={() => signOut()}\n * >\n *   <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n  i18nText,\n  activeNavItemId,\n  sidebar,\n  children,\n  onChangeToEnLocale,\n  onChangeToViLocale,\n  onLogout,\n  logoutLabel = 'Log out',\n  copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n}) => {\n  const groups = sidebar?.groupcontent ?? [];\n\n  return (\n    <CMSLayoutProvider>\n      <CMSLayoutHeader i18nText={i18nText} onChangeToEnLocale={onChangeToEnLocale} onChangeToViLocale={onChangeToViLocale} />\n      <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n        <SidebarContent>\n          {groups.map(group => (\n            <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n              {group.items.map(item => (\n                <SidebarContentGroupItem\n                  key={item.id}\n                  id={item.id}\n                  activeNavItemId={activeNavItemId}\n                  label={item.label}\n                  icon={item.icon}\n                  onClick={item.onClick}\n                />\n              ))}\n            </SidebarContentGroup>\n          ))}\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n                <LogOutIcon className=\"text-text-positive-weak\" />\n                {logoutLabel}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n              <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </CMSLayoutSidebar>\n      <CMSLayoutMain>{children}</CMSLayoutMain>\n    </CMSLayoutProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/dist-BQGL-YKY.mjs

@@ -1,2 +0,0 @@
-import*as e from"react";function t(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function n(...e){return n=>{let r=!1,i=e.map(e=>{let i=t(e,n);return!r&&typeof i==`function`&&(r=!0),i});if(r)return()=>{for(let n=0;n<i.length;n++){let r=i[n];typeof r==`function`?r():t(e[n],null)}}}}function r(...t){return e.useCallback(n(...t),t)}function i(t){let n=e.forwardRef((n,i)=>{let{children:a,...o}=n,d=null,p=!1,_=[];f(a)&&typeof g==`function`&&(a=g(a._payload)),e.Children.forEach(a,e=>{if(u(e)){p=!0;let t=e,n=`child`in t.props?t.props.child:t.props.children;f(n)&&typeof g==`function`&&(n=g(n._payload)),d=s(t,n),_.push(d?.props?.children)}else _.push(e)}),d?d=e.cloneElement(d,void 0,_):!p&&e.Children.count(a)===1&&e.isValidElement(a)&&(d=a);let v=d?l(d):void 0,y=r(i,v);if(!d){if(a||a===0)throw Error(p?h(t):m(t));return a}let b=c(o,d.props??{});return d.type!==e.Fragment&&(b.ref=i?y:v),e.cloneElement(d,b)});return n.displayName=`${t}.Slot`,n}var a=i(`Slot`),o=Symbol.for(`radix.slottable`),s=(t,n)=>{if(`child`in t.props){let n=t.props.child;return e.isValidElement(n)?e.cloneElement(n,void 0,t.props.children(n.props.children)):null}return e.isValidElement(n)?n:null};function c(e,t){let n={...t};for(let r in t){let i=e[r],a=t[r];/^on[A-Z]/.test(r)?i&&a?n[r]=(...e)=>{let t=a(...e);return i(...e),t}:i&&(n[r]=i):r===`style`?n[r]={...i,...a}:r===`className`&&(n[r]=[i,a].filter(Boolean).join(` `))}return{...e,...n}}function l(e){let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function u(t){return e.isValidElement(t)&&typeof t.type==`function`&&`__radixId`in t.type&&t.type.__radixId===o}var d=Symbol.for(`react.lazy`);function f(e){return typeof e==`object`&&!!e&&`$$typeof`in e&&e.$$typeof===d&&`_payload`in e&&p(e._payload)}function p(e){return typeof e==`object`&&!!e&&`then`in e}var m=e=>`${e} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`,h=e=>`${e} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`,g=e.use;export{a as t};
-//# sourceMappingURL=dist-BQGL-YKY.mjs.map