@customafk/lunas-ui 0.2.42 → 0.2.43

package/dist/cards/grid-product-card.d.ts

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

package/dist/cards/grid-product-card.js

@@ -1,2 +0,0 @@
-import"../button.variants-BruXd4VM.js";import{Button as e}from"../ui/button.js";import"../heading-Bw3eo6IT.js";import"../paragraph-ESjXXqHU.js";import{Card as t}from"../ui/card.js";import"../skeleton-DAcbjBGp.js";import{Image as n}from"../ui/image.js";import{HeartIcon as r,ShoppingCartIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s,thumbnail:c,price:l})=>o(t,{className:`h-36 w-full flex-row gap-4 p-2 pr-4`,children:[a(n,{className:`aspect-square h-full flex-0`,src:c}),o(`div`,{className:`flex flex-1 flex-col gap-y-1`,children:[a(`p`,{className:`line-clamp-2 h-10 font-semibold text-sm text-text-positive`,children:s}),o(`p`,{className:`font-bold text-base text-success`,children:[l.toLocaleString(`vi-VN`),a(`small`,{className:`ml-0.5`,children:`VND`})]}),o(`div`,{className:`mb-3 flex flex-1 items-end justify-end gap-x-1`,children:[a(e,{size:`icon`,variant:`outline`,color:`muted`,className:`size-9`,children:a(r,{})}),o(e,{className:`max-w-52 max-sm:size-9 sm:flex-1`,children:[a(i,{}),a(`p`,{className:`sr-only sm:not-sr-only`,children:`Thêm vào giỏ`})]})]})]})]});export{s as GridProductCard};
-//# sourceMappingURL=grid-product-card.js.map

package/dist/cards/grid-product-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid-product-card.js","names":["GridProductCard: React.FC<Props>","Image"],"sources":["../../packages/components/cards/grid-product-card.tsx"],"sourcesContent":["import { HeartIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { Button } from '../ui/button';\nimport { Card } from '../ui/card';\nimport { Image } from '../ui/image';\n\ntype Props = {\n  /** Unique identifier for the product. */\n  id: string;\n  /** URL-friendly slug for the product. */\n  slug: string;\n  /** Display name of the product shown on the card. */\n  name: string;\n  /** URL of the product's thumbnail image. */\n  thumbnail: string;\n  /** Regular price of the product in VND. */\n  price: number;\n  /** Optional sale / discounted price in VND. */\n  salePrice?: number;\n  /** Optional sale discount percentage (0–100). */\n  salePercentage?: number;\n};\n\n/**\n * A horizontal (grid-row) product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.\n *\n * @example\n * ```tsx\n * import { GridProductCard } from '@customafk/lunas-ui/cards/grid-product-card';\n *\n * <GridProductCard\n *   id=\"prod-1\"\n *   slug=\"awesome-widget\"\n *   name=\"Awesome Widget\"\n *   thumbnail=\"/images/widget.png\"\n *   price={299000}\n * />\n * ```\n */\nexport const GridProductCard: React.FC<Props> = ({ name, thumbnail, price }) => {\n  return (\n    <Card className=\"h-36 w-full flex-row gap-4 p-2 pr-4\">\n      <Image className=\"aspect-square h-full flex-0\" src={thumbnail} />\n      <div className=\"flex flex-1 flex-col gap-y-1\">\n        <p className=\"line-clamp-2 h-10 font-semibold text-sm text-text-positive\">{name}</p>\n        <p className=\"font-bold text-base text-success\">\n          {price.toLocaleString('vi-VN')}\n          <small className=\"ml-0.5\">VND</small>\n        </p>\n        <div className=\"mb-3 flex flex-1 items-end justify-end gap-x-1\">\n          <Button size=\"icon\" variant=\"outline\" color=\"muted\" className=\"size-9\">\n            <HeartIcon />\n          </Button>\n          <Button className=\"max-w-52 max-sm:size-9 sm:flex-1\">\n            <ShoppingCartIcon />\n            <p className=\"sr-only sm:not-sr-only\">Thêm vào giỏ</p>\n          </Button>\n        </div>\n      </div>\n    </Card>\n  );\n};\n"],"mappings":"6WAuCA,MAAaA,GAAoC,CAAE,OAAM,YAAW,WAEhE,EAAC,EAAA,CAAK,UAAU,gDACd,EAACC,EAAAA,CAAM,UAAU,8BAA8B,IAAK,GAAa,CACjE,EAAC,MAAA,CAAI,UAAU,yCACb,EAAC,IAAA,CAAE,UAAU,sEAA8D,GAAS,CACpF,EAAC,IAAA,CAAE,UAAU,6CACV,EAAM,eAAe,QAAQ,CAC9B,EAAC,QAAA,CAAM,UAAU,kBAAS,OAAW,CAAA,EACnC,CACJ,EAAC,MAAA,CAAI,UAAU,2DACb,EAAC,EAAA,CAAO,KAAK,OAAO,QAAQ,UAAU,MAAM,QAAQ,UAAU,kBAC5D,EAAC,EAAA,EAAA,CAAY,EACN,CACT,EAAC,EAAA,CAAO,UAAU,6CAChB,EAAC,EAAA,EAAA,CAAmB,CACpB,EAAC,IAAA,CAAE,UAAU,kCAAyB,gBAAgB,CAAA,EAC/C,CAAA,EACL,GACF,CAAA,EACD"}

package/dist/cards/product-card.d.ts

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

package/dist/cards/product-card.js

@@ -1,2 +0,0 @@
-import"../button.variants-BruXd4VM.js";import{Button as e}from"../ui/button.js";import"../heading-Bw3eo6IT.js";import"../paragraph-ESjXXqHU.js";import{Card as t}from"../ui/card.js";import"../skeleton-DAcbjBGp.js";import{Image as n}from"../ui/image.js";import{HeartIcon as r,ShoppingCartIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s,thumbnail:c,price:l})=>o(t,{className:`size-full gap-y-2 p-2 pb-4`,children:[a(n,{src:c,className:`aspect-square`}),o(`div`,{className:`flex flex-col gap-y-1`,children:[a(`p`,{className:`line-clamp-2 h-10 text-sm font-semibold`,children:s}),o(`p`,{className:`text-success text-base font-bold`,children:[l.toLocaleString(`vi-VN`),a(`small`,{className:`ml-0.5`,children:`VND`})]}),o(`div`,{className:`mt-1 flex gap-x-1`,children:[o(e,{className:`flex-1`,children:[a(i,{}),`Thêm vào giỏ`]}),a(e,{size:`icon`,variant:`outline`,color:`muted`,className:`size-9`,children:a(r,{})})]})]})]});export{s as ProductCard};
-//# sourceMappingURL=product-card.js.map

package/dist/cards/product-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"product-card.js","names":["ProductCard: React.FC<Props>","Image"],"sources":["../../packages/components/cards/product-card.tsx"],"sourcesContent":["import { HeartIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { Button } from '../ui/button';\nimport { Card } from '../ui/card';\nimport { Image } from '../ui/image';\n\ntype Props = {\n  /** Unique identifier for the product. */\n  id: string;\n  /** URL-friendly slug for the product. */\n  slug: string;\n  /** Display name of the product shown on the card. */\n  name: string;\n  /** URL of the product's thumbnail image. */\n  thumbnail: string;\n  /** Regular price of the product in VND. */\n  price: number;\n  /** Optional sale / discounted price in VND. */\n  salePrice?: number;\n  /** Optional sale discount percentage (0–100). */\n  salePercentage?: number;\n};\n\n/**\n * A vertical product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.\n *\n * @example\n * ```tsx\n * import { ProductCard } from '@customafk/lunas-ui/cards/product-card';\n *\n * <ProductCard\n *   id=\"prod-1\"\n *   slug=\"awesome-widget\"\n *   name=\"Awesome Widget\"\n *   thumbnail=\"/images/widget.png\"\n *   price={299000}\n * />\n * ```\n */\nexport const ProductCard: React.FC<Props> = ({ name, thumbnail, price }) => {\n  return (\n    <Card className=\"size-full gap-y-2 p-2 pb-4\">\n      <Image src={thumbnail} className=\"aspect-square\" />\n      <div className=\"flex flex-col gap-y-1\">\n        <p className=\"line-clamp-2 h-10 text-sm font-semibold\">{name}</p>\n        <p className=\"text-success text-base font-bold\">\n          {price.toLocaleString('vi-VN')}\n          <small className=\"ml-0.5\">VND</small>\n        </p>\n        <div className=\"mt-1 flex gap-x-1\">\n          <Button className=\"flex-1\">\n            <ShoppingCartIcon />\n            Thêm vào giỏ\n          </Button>\n          <Button size=\"icon\" variant=\"outline\" color=\"muted\" className=\"size-9\">\n            <HeartIcon />\n          </Button>\n        </div>\n      </div>\n    </Card>\n  );\n};\n"],"mappings":"6WAuCA,MAAaA,GAAgC,CAAE,OAAM,YAAW,WAE5D,EAAC,EAAA,CAAK,UAAU,uCACd,EAACC,EAAAA,CAAM,IAAK,EAAW,UAAU,iBAAkB,CACnD,EAAC,MAAA,CAAI,UAAU,kCACb,EAAC,IAAA,CAAE,UAAU,mDAA2C,GAAS,CACjE,EAAC,IAAA,CAAE,UAAU,6CACV,EAAM,eAAe,QAAQ,CAC9B,EAAC,QAAA,CAAM,UAAU,kBAAS,OAAW,CAAA,EACnC,CACJ,EAAC,MAAA,CAAI,UAAU,8BACb,EAAC,EAAA,CAAO,UAAU,mBAChB,EAAC,EAAA,EAAA,CAAmB,CAAA,eAAA,EAEb,CACT,EAAC,EAAA,CAAO,KAAK,OAAO,QAAQ,UAAU,MAAM,QAAQ,UAAU,kBAC5D,EAAC,EAAA,EAAA,CAAY,EACN,CAAA,EACL,GACF,CAAA,EACD"}

package/dist/cards/simple-card.d.ts

@@ -1,35 +0,0 @@
-import * as react3 from "react";
-
-//#region packages/components/cards/simple-card.d.ts
-type Props = {
-  /** The card's heading text displayed in the header. */
-  title: string;
-  /** Optional subtitle or description shown below the title. */
-  description?: string;
-  /** Optional node rendered as a card action (e.g. a button) in the header. */
-  action?: React.ReactNode;
-  /** Optional node rendered inside the card footer. */
-  footer?: React.ReactNode;
-};
-/**
- * A general-purpose card with a header, optional description, action slot, content area, and footer.
- *
- * @example
- * ```tsx
- * import { SimpleCard } from '@customafk/lunas-ui/cards/simple-card';
- *
- * <SimpleCard title="Summary" description="Overview of results">
- *   <p>Card body content goes here.</p>
- * </SimpleCard>
- * ```
- */
-declare const SimpleCard: ({
-  title,
-  description,
-  action,
-  footer,
-  children
-}: React.PropsWithChildren<Props>) => react3.JSX.Element;
-//#endregion
-export { SimpleCard };
-//# sourceMappingURL=simple-card.d.ts.map

package/dist/cards/simple-card.js

@@ -1,2 +0,0 @@
-"use client";import"../heading-Bw3eo6IT.js";import"../paragraph-ESjXXqHU.js";import{Card as e,CardAction as t,CardContent as n,CardDescription as r,CardFooter as i,CardHeader as a,CardTitle as o}from"../ui/card.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({title:l,description:u,action:d,footer:f,children:p})=>c(e,{children:[c(a,{children:[s(o,{children:l}),s(r,{children:u}),d&&s(t,{children:d})]}),s(n,{children:p}),f&&s(i,{children:f})]});export{l as SimpleCard};
-//# sourceMappingURL=simple-card.js.map

package/dist/cards/simple-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"simple-card.js","names":[],"sources":["../../packages/components/cards/simple-card.tsx"],"sourcesContent":["'use client';\nimport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card';\n\ntype Props = {\n  /** The card's heading text displayed in the header. */\n  title: string;\n  /** Optional subtitle or description shown below the title. */\n  description?: string;\n  /** Optional node rendered as a card action (e.g. a button) in the header. */\n  action?: React.ReactNode;\n  /** Optional node rendered inside the card footer. */\n  footer?: React.ReactNode;\n};\n\n/**\n * A general-purpose card with a header, optional description, action slot, content area, and footer.\n *\n * @example\n * ```tsx\n * import { SimpleCard } from '@customafk/lunas-ui/cards/simple-card';\n *\n * <SimpleCard title=\"Summary\" description=\"Overview of results\">\n *   <p>Card body content goes here.</p>\n * </SimpleCard>\n * ```\n */\nexport const SimpleCard = ({ title, description, action, footer, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        <CardDescription>{description}</CardDescription>\n        {action && <CardAction>{action}</CardAction>}\n      </CardHeader>\n      <CardContent>{children}</CardContent>\n      {footer && <CardFooter>{footer}</CardFooter>}\n    </Card>\n  );\n};\n"],"mappings":"yQA0BA,MAAa,GAAc,CAAE,QAAO,cAAa,SAAQ,SAAQ,cAE7D,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SAAW,EAAA,CAAkB,CAC9B,EAAC,EAAA,CAAA,SAAiB,EAAA,CAA8B,CAC/C,GAAU,EAAC,EAAA,CAAA,SAAY,EAAA,CAAoB,GACjC,CACb,EAAC,EAAA,CAAa,WAAA,CAAuB,CACpC,GAAU,EAAC,EAAA,CAAA,SAAY,EAAA,CAAoB,GACvC"}

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/close-Dflkky9q.cjs

@@ -1,2 +0,0 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`);const i=({className:e,...i})=>(0,r.jsx)(`button`,{className:(0,n.cn)(`flex cursor-pointer items-center justify-center rounded-[100px] p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,e),...i,children:(0,r.jsx)(t.XIcon,{size:24})});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
-//# sourceMappingURL=close-Dflkky9q.cjs.map

package/dist/close-Dflkky9q.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"close-Dflkky9q.cjs","names":["CloseButton: React.FC<React.ComponentProps<'button'>>","XIcon"],"sources":["../packages/components/ui/buttons/close.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nexport const CloseButton: React.FC<React.ComponentProps<'button'>> = ({ className, ...props }) => {\n  return (\n    <button\n      className={cn(\n        'flex cursor-pointer items-center justify-center rounded-[100px] p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60',\n        className\n      )}\n      {...props}\n    >\n      <XIcon size={24} />\n    </button>\n  );\n};\n"],"mappings":"iJAIA,MAAaA,GAAyD,CAAE,YAAW,GAAG,MAElF,EAAA,EAAA,KAAC,SAAA,CACC,WAAA,EAAA,EAAA,IACE,qQACA,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,KAAM,GAAA,CAAM,EACZ"}

package/dist/close-DrkwaVXK.js

@@ -1,2 +0,0 @@
-import{XIcon as e}from"lucide-react";import{cn as t}from"@customafk/react-toolkit/utils";import{jsx as n}from"react/jsx-runtime";const r=({className:r,...i})=>n(`button`,{className:t(`flex cursor-pointer items-center justify-center rounded-[100px] p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,r),...i,children:n(e,{size:24})});export{r as t};
-//# sourceMappingURL=close-DrkwaVXK.js.map

package/dist/close-DrkwaVXK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"close-DrkwaVXK.js","names":["CloseButton: React.FC<React.ComponentProps<'button'>>"],"sources":["../packages/components/ui/buttons/close.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nexport const CloseButton: React.FC<React.ComponentProps<'button'>> = ({ className, ...props }) => {\n  return (\n    <button\n      className={cn(\n        'flex cursor-pointer items-center justify-center rounded-[100px] p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60',\n        className\n      )}\n      {...props}\n    >\n      <XIcon size={24} />\n    </button>\n  );\n};\n"],"mappings":"iIAIA,MAAaA,GAAyD,CAAE,YAAW,GAAG,KAElF,EAAC,SAAA,CACC,UAAW,EACT,qQACA,EACD,CACD,GAAI,WAEJ,EAAC,EAAA,CAAM,KAAM,GAAA,CAAM,EACZ"}

package/dist/cms-layout-B8maJRLp.cjs

@@ -1,2 +0,0 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`@radix-ui/react-slot`),r=require(`@customafk/react-toolkit/utils`),i=require(`class-variance-authority`),a=require(`react/jsx-runtime`),o=require(`react`),s=require(`@/components/ui/tooltip`),c=require(`@customafk/react-toolkit/color-hash`),l=require(`@customafk/react-toolkit/hooks/useMobile`),u=require(`@/components/ui/button`),d=require(`@/components/ui/separator`),f=require(`@/components/ui/sheet`),p=require(`@/components/ui/skeleton`),m=require(`@/components/ui/avatar`),h=require(`@/components/ui/dropdown-menu`),g=require(`@/components/ui/input`);const _=`sidebar_state`,v=3600*24*7,y=`16rem`,b=`18rem`,x=`3rem`,S=`b`,C=(0,o.createContext)(null);function w(){let e=(0,o.useContext)(C);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function T({defaultOpen:e=!0,open:t,onOpenChange:n,className:i,style:c,children:u,...d}){let f=(0,l.useIsMobile)(),[p,m]=(0,o.useState)(!1),[h,g]=(0,o.useState)(e),_=t??h,v=(0,o.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,o.useCallback)(()=>f?m(e=>!e):v(e=>!e),[f,v]);(0,o.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 b=_?`expanded`:`collapsed`,x=(0,o.useMemo)(()=>({state:b,open:_,setOpen:v,isMobile:f,openMobile:p,setOpenMobile:m,toggleSidebar:y}),[b,_,v,f,p,y]);return(0,a.jsx)(C.Provider,{value:x,children:(0,a.jsx)(s.TooltipProvider,{delayDuration:0,children:(0,a.jsx)(`section`,{"data-slot":`layout-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...c},className:(0,r.cn)(`relative group/sidebar-wrapper flex h-dvh bg-sidebar`,i),...d,children:u})})})}const E=(0,o.memo)(({side:e=`left`,variant:n=`sidebar`,collapsible:i=`offcanvas`,className:s,children:c,...l})=>{let{isMobile:d,state:p,openMobile:m,setOpenMobile:h,toggleSidebar:g}=w(),_=(0,o.useCallback)(e=>{g(),e.preventDefault(),e.stopPropagation()},[g]);return i===`none`?(0,a.jsx)(`aside`,{"data-slot":`sidebar`,className:(0,r.cn)(`flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,s),...l,children:c}):d?(0,a.jsx)(f.Sheet,{open:m,onOpenChange:h,...l,children:(0,a.jsxs)(f.SheetContent,{"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,a.jsxs)(f.SheetHeader,{className:`sr-only`,children:[(0,a.jsx)(f.SheetTitle,{children:`Sidebar`}),(0,a.jsx)(f.SheetDescription,{children:`Displays the mobile sidebar.`})]}),(0,a.jsxs)(`div`,{className:`flex size-full flex-col`,children:[(0,a.jsxs)(`div`,{className:`flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4`,children:[(0,a.jsxs)(u.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:(0,r.cn)(`size-10 rounded-full`,s),onClick:_,children:[(0,a.jsx)(t.MenuIcon,{className:`size-6!`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,a.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,a.jsx)(t.ShoppingCartIcon,{size:20})}),(0,a.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,a.jsx)(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),(0,a.jsx)(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),(0,a.jsx)(`div`,{className:`flex flex-1 flex-col p-2`,children:c})]})]})}):(0,a.jsxs)(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":p,"data-collapsible":p===`collapsed`?i:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[(0,a.jsx)(`div`,{"data-slot":`sidebar-gap`,className:(0,r.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,a.jsx)(`div`,{"data-slot":`sidebar-container`,className:(0,r.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)))]`,s),...l,children:(0,a.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`relative flex size-full flex-col`,children:c})})]})});E.displayName=`CMSLayoutSidebar`;const D=(0,o.memo)(({className:e,children:t,...n})=>(0,a.jsxs)(`main`,{"data-slot":`sidebar-inset`,className:(0,r.cn)(`relative flex w-full flex-1 flex-col`,e),...n,children:[(0,a.jsx)(`div`,{className:`h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]`}),(0,a.jsx)(`div`,{className:`relative flex-1 size-full overflow-auto`,children:t})]}));D.displayName=`CMSLayoutMain`;const O=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(g.Input,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:(0,r.cn)(`h-8 w-full bg-background shadow-none`,e),...t}));O.displayName=`SidebarInput`;const k=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:(0,r.cn)(`flex flex-col gap-2 p-2`,e),...t}));k.displayName=`SidebarHeader`;const A=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:(0,r.cn)(`flex flex-col gap-2`,e),...t}));A.displayName=`SidebarFooter`;const j=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(d.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:(0,r.cn)(`mx-2 w-auto bg-sidebar-border`,e),...t}));j.displayName=`SidebarSeparator`;const M=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:(0,r.cn)(`flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t}));M.displayName=`SidebarContent`;const N=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,r.cn)(`relative flex w-full flex-col`,e),...t}));N.displayName=`SidebarGroup`;const P=(0,o.memo)(({className:e,asChild:t=!1,...i})=>(0,a.jsx)(t?n.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,r.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),...i}));P.displayName=`SidebarGroupLabel`;const F=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,r.cn)(`w-full text-sm`,e),...t}));F.displayName=`SidebarGroupContent`;const I=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:(0,r.cn)(`flex w-full min-w-0 flex-col gap-1`,e),...t}));I.displayName=`SidebarMenu`;const L=(0,o.memo)(({className:e,...t})=>(0,a.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:(0,r.cn)(`group/menu-item relative`,e),...t}));L.displayName=`SidebarMenuItem`;const R=(0,i.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`}}),z=(0,o.memo)(({asChild:e=!1,isActive:t=!1,variant:i=`default`,size:c=`default`,tooltip:l,className:u,...d})=>{let f=e?n.Slot:`button`,{isMobile:p,state:m}=w(),h=(0,o.useCallback)(e=>{d.onClick?.(),e.preventDefault(),e.stopPropagation()},[d.onClick]),g=(0,a.jsx)(f,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":c,"data-active":t,className:(0,r.cn)(R({variant:i,size:c}),u),onClick:h,...d});return l?(typeof l==`string`&&(l={children:l}),(0,a.jsxs)(s.Tooltip,{children:[(0,a.jsx)(s.TooltipTrigger,{asChild:!0,children:g}),(0,a.jsx)(s.TooltipContent,{side:`right`,align:`center`,hidden:m!==`collapsed`||p,...l})]})):g});z.displayName=`SidebarMenuButton`;const B=({i18nText:e,onChangeToEnLocale:n,onChangeToViLocale:i,user:s,onLogout:l,logoutLabel:d=`Log out`})=>{let{toggleSidebar:f}=w(),p=(0,o.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),f()},[f]),g=(0,o.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),n?.()},[n]),_=(0,o.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),i?.()},[i]),v=s?c.colorHashLight.hex(s.name):void 0;return(0,a.jsxs)(`header`,{"data-slot":`cms-layout-header`,className:(0,r.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,a.jsxs)(u.Button,{"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:p,children:[(0,a.jsx)(t.MenuIcon,{className:`size-6!`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,a.jsxs)(`div`,{className:`flex flex-1 gap-x-2 sm:ml-2.5`,children:[(0,a.jsx)(`div`,{className:`flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:(0,a.jsx)(t.ShoppingCartIcon,{size:20})}),(0,a.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,a.jsx)(`span`,{className:`truncate font-medium`,children:`Lunas Enterprise`}),(0,a.jsx)(`span`,{className:`truncate text-xs`,children:`Established 2025`})]})]}),(0,a.jsxs)(`div`,{className:`flex items-center gap-1`,children:[s&&(0,a.jsxs)(h.DropdownMenu,{children:[(0,a.jsx)(h.DropdownMenuTrigger,{asChild:!0,children:(0,a.jsxs)(u.Button,{variant:`ghost`,color:`muted`,className:`h-9 gap-2.5 rounded-full px-2 transition-all`,children:[(0,a.jsxs)(m.Avatar,{className:`size-7 shrink-0`,children:[(0,a.jsx)(m.AvatarImage,{src:s.avatarUrl,alt:s.name}),(0,a.jsx)(m.AvatarFallback,{style:{backgroundColor:v},children:(0,a.jsx)(t.UserRoundIcon,{size:14,className:`text-white`})})]}),(0,a.jsxs)(`div`,{className:`hidden flex-col items-start sm:flex`,children:[(0,a.jsx)(`span`,{className:`max-w-36 truncate text-xs font-semibold leading-tight text-text-positive`,children:s.name}),s.email&&(0,a.jsx)(`span`,{className:`max-w-36 truncate text-xs leading-tight text-text-positive-weak`,children:s.email})]})]})}),(0,a.jsxs)(h.DropdownMenuContent,{align:`end`,className:`w-60`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col items-center gap-2 px-4 py-4 text-center`,children:[(0,a.jsxs)(m.Avatar,{className:`size-12`,children:[(0,a.jsx)(m.AvatarImage,{src:s.avatarUrl,alt:s.name}),(0,a.jsx)(m.AvatarFallback,{style:{backgroundColor:v},children:(0,a.jsx)(t.UserRoundIcon,{size:22,className:`text-white`})})]}),(0,a.jsxs)(`div`,{className:`flex min-w-0 w-full flex-col items-center gap-0.5`,children:[(0,a.jsx)(`p`,{className:`truncate text-sm font-semibold text-text-positive`,children:s.name}),s.email&&(0,a.jsx)(`p`,{className:`truncate text-xs text-text-positive-weak`,children:s.email}),s.role&&(0,a.jsx)(`span`,{className:`mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak`,children:s.role})]})]}),l&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(h.DropdownMenuSeparator,{}),(0,a.jsx)(h.DropdownMenuGroup,{children:(0,a.jsxs)(h.DropdownMenuItem,{className:`text-danger focus:text-danger`,onClick:l,children:[(0,a.jsx)(t.LogOutIcon,{className:`size-4`}),d]})})]})]})]}),s&&(n||i)&&(0,a.jsx)(`div`,{className:`mx-1 h-5 w-px bg-border`}),(n||i)&&(0,a.jsxs)(h.DropdownMenu,{children:[(0,a.jsx)(h.DropdownMenuTrigger,{asChild:!0,children:(0,a.jsxs)(u.Button,{"data-slot":`locale-trigger`,variant:`ghost`,color:`muted`,className:`gap-x-1 rounded-full transition-all hover:text-text-positive`,children:[(0,a.jsx)(t.EarthIcon,{className:`size-6!`}),e]})}),(0,a.jsx)(h.DropdownMenuContent,{align:`end`,children:(0,a.jsxs)(h.DropdownMenuGroup,{children:[(0,a.jsx)(h.DropdownMenuItem,{onClick:g,children:`EN - English`}),(0,a.jsx)(h.DropdownMenuItem,{onClick:_,children:`VI - Vietnamese`})]})})]})]})]})},V=(0,o.memo)(({id:e,label:t,icon:n,activeNavItemId:r,onClick:i})=>(0,a.jsx)(L,{children:(0,a.jsxs)(z,{isActive:e===r,onClick:i,children:[n,t]})}));V.displayName=`SidebarContentGroupItem`;const H=(0,o.memo)(({id:e,label:t,children:n})=>(0,a.jsxs)(N,{children:[(0,a.jsx)(P,{children:t}),(0,a.jsx)(F,{children:(0,a.jsx)(I,{children:n})})]}));H.displayName=`SidebarContentGroup`;const U=({i18nText:e,activeNavItemId:n,sidebar:r,children:i,onChangeToEnLocale:o,onChangeToViLocale:s,onLogout:c,logoutLabel:l=`Log out`,copyright:u=`Copyright © ${new Date().getFullYear()}, Lunas.`,user:d})=>{let f=r?.groupcontent??[];return(0,a.jsxs)(T,{children:[(0,a.jsx)(B,{i18nText:e,onChangeToEnLocale:o,onChangeToViLocale:s,user:d,onLogout:c,logoutLabel:l}),(0,a.jsxs)(E,{variant:`inset`,collapsible:`icon`,children:[(0,a.jsx)(M,{children:f.map(e=>(0,a.jsx)(H,{id:e.id,label:e.label,children:e.items.map(e=>(0,a.jsx)(V,{id:e.id,activeNavItemId:n,label:e.label,icon:e.icon,onClick:e.onClick},e.id))},e.id))}),(0,a.jsx)(A,{children:(0,a.jsxs)(I,{children:[(0,a.jsx)(L,{children:(0,a.jsxs)(z,{className:`border border-border`,onClick:c,children:[(0,a.jsx)(t.LogOutIcon,{className:`text-text-positive-weak`}),l]})}),(0,a.jsx)(L,{className:`mt-2 border-t border-t-border`,children:(0,a.jsx)(`p`,{className:`pt-2 text-center text-xs text-text-positive-subtle`,children:u})})]})})]}),(0,a.jsx)(D,{children:i})]})};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return U}});
-//# sourceMappingURL=cms-layout-B8maJRLp.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cms-layout-B8maJRLp.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  user?: CMSLayoutUser;\n  onLogout?: () => void;\n  logoutLabel?: string;\n}>","colorHashLight","Button","MenuIcon","ShoppingCartIcon","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","UserRoundIcon","DropdownMenuContent","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","LogOutIcon","EarthIcon","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, LogOutIcon, MenuIcon, ShoppingCartIcon, UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport type CMSLayoutUser = {\n  /** Display name shown in the header and user dropdown. */\n  name: string;\n  /** Email address shown below the name in the dropdown. */\n  email?: string;\n  /** Role or position shown as a muted label in the dropdown. */\n  role?: string;\n  /** Optional avatar image URL; falls back to a color-hashed icon. */\n  avatarUrl?: string;\n};\n\nexport const CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n  user?: CMSLayoutUser;\n  onLogout?: () => void;\n  logoutLabel?: string;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale, user, onLogout, logoutLabel = 'Log out' }) => {\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  const avatarBg = user ? colorHashLight.hex(user.name) : undefined;\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      <div className=\"flex items-center gap-1\">\n        {user && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" color=\"muted\" className=\"h-9 gap-2.5 rounded-full px-2 transition-all\">\n                <Avatar className=\"size-7 shrink-0\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={14} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"hidden flex-col items-start sm:flex\">\n                  <span className=\"max-w-36 truncate text-xs font-semibold leading-tight text-text-positive\">{user.name}</span>\n                  {user.email && <span className=\"max-w-36 truncate text-xs leading-tight text-text-positive-weak\">{user.email}</span>}\n                </div>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-60\">\n              <div className=\"flex flex-col items-center gap-2 px-4 py-4 text-center\">\n                <Avatar className=\"size-12\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={22} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex min-w-0 w-full flex-col items-center gap-0.5\">\n                  <p className=\"truncate text-sm font-semibold text-text-positive\">{user.name}</p>\n                  {user.email && <p className=\"truncate text-xs text-text-positive-weak\">{user.email}</p>}\n                  {user.role && (\n                    <span className=\"mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak\">\n                      {user.role}\n                    </span>\n                  )}\n                </div>\n              </div>\n              {onLogout && (\n                <>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem className=\"text-danger focus:text-danger\" onClick={onLogout}>\n                      <LogOutIcon className=\"size-4\" />\n                      {logoutLabel}\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {user && (onChangeToEnLocale || onChangeToViLocale) && <div className=\"mx-1 h-5 w-px bg-border\" />}\n\n        {(onChangeToEnLocale || onChangeToViLocale) && (\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        )}\n      </div>\n    </header>\n  );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader, type CMSLayoutUser } 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 { CMSLayoutUser };\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  /** Authenticated user shown in the header avatar dropdown. Omit to hide the user menu. */\n  user?: CMSLayoutUser;\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  user,\n}) => {\n  const groups = sidebar?.groupcontent ?? [];\n\n  return (\n    <CMSLayoutProvider>\n      <CMSLayoutHeader\n        i18nText={i18nText}\n        onChangeToEnLocale={onChangeToEnLocale}\n        onChangeToViLocale={onChangeToViLocale}\n        user={user}\n        onLogout={onLogout}\n        logoutLabel={logoutLabel}\n      />\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":"8nBAmBA,MAAM,EAAsB,gBACtB,EAAyB,KAAU,GAAK,EACxC,EAAgB,QAChB,EAAuB,QACvB,EAAqB,OACrB,EAA4B,IAY5B,GAAA,EAAA,EAAA,eAA2D,KAAK,CAEtE,SAAS,GAAa,CACpB,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAe,CAC1C,GAAI,CAAC,EACH,MAAU,MAAM,oDAAoD,CAEtE,OAAO,EAGT,SAAS,EAAkB,CACzB,cAAc,GACd,KAAM,EACN,aAAc,EACd,YACA,QACA,WACA,GAAG,GAKF,CACD,IAAM,GAAA,EAAA,EAAA,cAAwB,CACxB,CAAC,EAAY,IAAA,EAAA,EAAA,UAA0B,GAAM,CAE7C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAqB,EAAY,CACzC,EAAO,GAAY,EACnB,GAAA,EAAA,EAAA,aACH,GAAmD,CAClD,IAAM,EAAY,OAAO,GAAU,WAAa,EAAM,EAAK,CAAG,EAC1D,EACF,EAAY,EAAU,CAEtB,EAAS,EAAU,CAGrB,SAAS,OAAS,iBAA0B,EAAU,2BAExD,CAAC,EAAa,EAAK,CACpB,CAEK,GAAA,EAAA,EAAA,iBACG,EAAW,EAAc,GAAQ,CAACA,EAAK,CAAG,EAAQ,GAAQ,CAACA,EAAK,CACtE,CAAC,EAAU,EAAQ,CAAC,EAEvB,EAAA,EAAA,eAAgB,CACd,IAAM,EAAiB,GAAyB,CAC1C,EAAM,MAAQ,MAA8B,EAAM,SAAW,EAAM,WACrE,EAAM,gBAAgB,CACtB,GAAe,GAInB,OADA,OAAO,iBAAiB,UAAW,EAAc,KACpC,OAAO,oBAAoB,UAAW,EAAc,EAChE,CAAC,EAAc,CAAC,CAEnB,IAAM,EAAQ,EAAO,WAAa,YAE5B,GAAA,EAAA,EAAA,cACG,CAAE,QAAO,OAAM,UAAS,WAAU,aAAY,gBAAe,gBAAe,EACnF,CAAC,EAAO,EAAM,EAAS,EAAU,EAAY,EAAc,CAC5D,CAED,OACE,EAAA,EAAA,KAAC,EAAe,SAAA,CAAS,MAAO,YAC9B,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,cAAe,YAC9B,EAAA,EAAA,KAAC,UAAA,CACC,YAAU,iBACV,MAAO,CAAE,kBAAmB,QAAe,uBAAwB,OAAoB,GAAG,EAAO,CACjG,WAAA,EAAA,EAAA,IAAc,uDAAwD,EAAU,CAChF,GAAI,EAEH,YACO,EACM,EACM,CAI9B,MAAM,GAAA,EAAA,EAAA,OACH,CACC,OAAO,OACP,UAAU,UACV,cAAc,YACd,YACA,WACA,GAAG,KAKC,CACJ,GAAM,CAAE,WAAU,QAAO,aAAY,gBAAe,iBAAkB,GAAY,CAE5E,GAAA,EAAA,EAAA,aACJ,GAAS,CACP,GAAe,CACf,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,EAEzB,CAAC,EAAc,CAChB,CAsDD,OApDI,IAAgB,QAEhB,EAAA,EAAA,KAAC,QAAA,CAAM,YAAU,UAAU,WAAA,EAAA,EAAA,IAAc,uEAAwE,EAAU,CAAE,GAAI,EAC9H,YACK,CAIR,GAEA,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,KAAM,EAAY,aAAc,EAAe,GAAI,YACxD,EAAA,EAAA,MAACC,EAAAA,aAAAA,CACC,eAAa,UACb,YAAU,UACV,cAAY,OACZ,MAAO,CAAE,kBAAmB,QAAsB,CAC5C,OACN,UAAU,uGAEV,EAAA,EAAA,MAACC,EAAAA,YAAAA,CAAY,UAAU,qBACrB,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAAA,SAAW,UAAA,CAAoB,EAChC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CAAAA,SAAiB,+BAAA,CAA+C,CAAA,EACrD,EACd,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,qCACb,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,mFACb,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,WAAA,EAAA,EAAA,IAAc,uBAAwB,EAAU,CAChD,QAAS,aAET,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,UAAU,UAAA,CAAY,EAChC,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,mBAAU,kBAAqB,CAAA,EACxC,EACT,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,qIACb,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CAAiB,KAAM,GAAA,CAAM,EAC1B,EACN,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,yDACb,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,gCAAuB,eAAkB,EACzD,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,4BAAmB,oBAAuB,CAAA,EACtD,GACF,EACN,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,2BAA4B,YAAe,CAAA,EACtD,CAAA,EACO,EACT,EAKV,EAAA,EAAA,MAAC,QAAA,CACC,UAAU,6DACV,aAAY,EACZ,mBAAkB,IAAU,YAAc,EAAc,GACxD,eAAc,EACd,YAAW,EACX,YAAU,qBAEV,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,cACV,WAAA,EAAA,EAAA,IACE,iBACA,8CACA,+DACA,sBACA,mFACD,EACD,EACF,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,oBACV,WAAA,EAAA,EAAA,IACE,4BACA,6BACA,+CACA,sBACA,0CACA,mFACA,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAA,CAAI,eAAa,UAAU,YAAU,gBAAgB,UAAU,mCAC7D,YACG,EACF,CAAA,EACA,EAGb,CACD,EAAiB,YAAc,mBAiD/B,MAAM,GAAA,EAAA,EAAA,OAAsB,CAAE,YAAW,WAAU,GAAG,MAElD,EAAA,EAAA,MAAC,OAAA,CAAK,YAAU,gBAAgB,WAAA,EAAA,EAAA,IAAc,uCAAwC,EAAU,CAAE,GAAI,aACpG,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,+DAAA,CAAiE,EAChF,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,0CAA2C,YAAe,CAAA,EACpE,CAET,CACF,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,OAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,KAACC,EAAAA,MAAAA,CAAM,YAAU,gBAAgB,eAAa,QAAQ,WAAA,EAAA,EAAA,IAAc,uCAAwC,EAAU,CAAE,GAAI,GAAS,CAC5I,CACF,EAAa,YAAc,eAE3B,MAAM,GAAA,EAAA,EAAA,OAAsB,CAAE,YAAW,GAAG,MACnC,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,iBAAiB,eAAa,SAAS,WAAA,EAAA,EAAA,IAAc,0BAA2B,EAAU,CAAE,GAAI,GAAS,CAC/H,CACF,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,OAAsB,CAAE,YAAW,GAAG,MACnC,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,iBAAiB,eAAa,SAAS,WAAA,EAAA,EAAA,IAAc,sBAAuB,EAAU,CAAE,GAAI,GAAS,CAC3H,CACF,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,OAAyB,CAAE,YAAW,GAAG,MACtC,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAU,YAAU,oBAAoB,eAAa,YAAY,WAAA,EAAA,EAAA,IAAc,gCAAiC,EAAU,CAAE,GAAI,GAAS,CACjJ,CACF,EAAiB,YAAc,mBAE/B,MAAM,GAAA,EAAA,EAAA,OAAuB,CAAE,YAAW,GAAG,MAEzC,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,kBACV,eAAa,UACb,WAAA,EAAA,EAAA,IAAc,yFAA0F,EAAU,CAClH,GAAI,GACJ,CAEJ,CACF,EAAe,YAAc,iBAE7B,MAAM,GAAA,EAAA,EAAA,OAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,gBAAgB,eAAa,QAAQ,WAAA,EAAA,EAAA,IAAc,gCAAiC,EAAU,CAAE,GAAI,GAAS,CACnI,CACF,EAAa,YAAc,eAE3B,MAAM,GAAA,EAAA,EAAA,OAA0B,CAAE,YAAW,UAAU,GAAO,GAAG,MAI7D,EAAA,EAAA,KAHW,EAAUC,EAAAA,KAAO,MAAA,CAI1B,YAAU,sBACV,eAAa,cACb,WAAA,EAAA,EAAA,IACE,iPACA,8EACA,EACD,CACD,GAAI,GACJ,CAEJ,CACF,EAAkB,YAAc,oBAsBhC,MAAM,GAAA,EAAA,EAAA,OAA4B,CAAE,YAAW,GAAG,MACzC,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,wBAAwB,eAAa,gBAAgB,WAAA,EAAA,EAAA,IAAc,iBAAkB,EAAU,CAAE,GAAI,GAAS,CACpI,CACF,EAAoB,YAAc,sBAElC,MAAM,GAAA,EAAA,EAAA,OAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,eAAe,eAAa,OAAO,WAAA,EAAA,EAAA,IAAc,qCAAsC,EAAU,CAAE,GAAI,GAAS,CACrI,CACF,EAAY,YAAc,cAE1B,MAAM,GAAA,EAAA,EAAA,OAAwB,CAAE,YAAW,GAAG,MACrC,EAAA,EAAA,KAAC,KAAA,CAAG,YAAU,oBAAoB,eAAa,YAAY,WAAA,EAAA,EAAA,IAAc,2BAA4B,EAAU,CAAE,GAAI,GAAS,CACrI,CACF,EAAgB,YAAc,kBAE9B,MAAM,GAAA,EAAA,EAAA,KACJ,CACE,mBACA,iBACA,iCACA,gDACA,iCACA,2DACA,iEACA,mDACA,sDACA,6DACA,sFACA,mGACA,iHACA,kCACA,+BACD,CACD,CACE,SAAU,CACR,QAAS,CACP,QAAS,kEACT,QACE,+KACH,CACD,KAAM,CACJ,QAAS,eACT,GAAI,cACJ,GAAI,kDACL,CACF,CACD,gBAAiB,CACf,QAAS,UACT,KAAM,UACP,CACF,CACF,CAEK,GAAA,EAAA,EAAA,OACH,CACC,UAAU,GACV,WAAW,GACX,UAAU,UACV,OAAO,UACP,UACA,YACA,GAAG,KAMkD,CACrD,IAAM,EAAO,EAAUA,EAAAA,KAAO,SACxB,CAAE,WAAU,SAAU,GAAY,CAElC,GAAA,EAAA,EAAA,aACJ,GAAS,CACP,EAAM,WAAW,CACjB,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,EAEzB,CAAC,EAAM,QAAQ,CAChB,CAEK,GACJ,EAAA,EAAA,KAAC,EAAA,CACC,YAAU,sBACV,eAAa,cACb,YAAW,EACX,cAAa,EACb,WAAA,EAAA,EAAA,IAAc,EAA0B,CAAE,UAAS,OAAM,CAAC,CAAE,EAAU,CACtE,QAAS,EACT,GAAI,GACJ,CASJ,OANK,GAED,OAAO,GAAY,WACrB,EAAU,CAAE,SAAU,EAAS,GAI/B,EAAA,EAAA,MAACC,EAAAA,QAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,QAAA,YAAS,GAAwB,EACjD,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,KAAK,QAAQ,MAAM,SAAS,OAAQ,IAAU,aAAe,EAAU,GAAI,GAAW,CAAA,CAAA,CAC9F,EAVS,GAaxB,CACD,EAAkB,YAAc,oBCvbhC,MAAaC,GAOP,CAAE,WAAU,qBAAoB,qBAAoB,OAAM,WAAU,cAAc,aAAgB,CACtG,GAAM,CAAE,iBAAkB,GAAY,CAEhC,GAAA,EAAA,EAAA,aACH,GAA4B,CAC3B,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,GAAe,EAEjB,CAAC,EAAc,CAChB,CAEK,GAAA,EAAA,EAAA,aACH,GAA4B,CAC3B,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,KAAsB,EAExB,CAAC,EAAmB,CACrB,CAEK,GAAA,EAAA,EAAA,aACH,GAA4B,CAC3B,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,KAAsB,EAExB,CAAC,EAAmB,CACrB,CAEK,EAAW,EAAOC,EAAAA,eAAe,IAAI,EAAK,KAAK,CAAG,IAAA,GAExD,OACE,EAAA,EAAA,MAAC,SAAA,CACC,YAAU,oBACV,WAAA,EAAA,EAAA,IACE,UACA,sBACA,2DACA,kDACA,+BACA,kCACD,YAED,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,UAAU,+DACV,QAAS,aAET,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,UAAU,UAAA,CAAY,EAChC,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,mBAAU,kBAAqB,CAAA,EACxC,EAET,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,2CACb,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,gIACb,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CAAiB,KAAM,GAAA,CAAM,EAC1B,EACN,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,yDACb,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,gCAAuB,oBAAuB,EAC9D,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,4BAAmB,oBAAuB,CAAA,EACtD,CAAA,EACF,EAEN,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,oCACZ,IACC,EAAA,EAAA,MAACC,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,oBAAAA,CAAoB,QAAA,aACnB,EAAA,EAAA,MAACJ,EAAAA,OAAAA,CAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAU,0DAC9C,EAAA,EAAA,MAACK,EAAAA,OAAAA,CAAO,UAAU,6BAChB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAY,IAAK,EAAK,UAAW,IAAK,EAAK,MAAQ,EACpD,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,MAAO,CAAE,gBAAiB,EAAU,WAClD,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,CAAA,EACV,EACT,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,iDACb,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oFAA4E,EAAK,MAAY,CAC5G,EAAK,QAAS,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,2EAAmE,EAAK,OAAa,CAAA,EAChH,CAAA,EACC,EACW,EACtB,EAAA,EAAA,MAACC,EAAAA,oBAAAA,CAAoB,MAAM,MAAM,UAAU,kBACzC,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,oEACb,EAAA,EAAA,MAACJ,EAAAA,OAAAA,CAAO,UAAU,qBAChB,EAAA,EAAA,KAACC,EAAAA,YAAAA,CAAY,IAAK,EAAK,UAAW,IAAK,EAAK,MAAQ,EACpD,EAAA,EAAA,KAACC,EAAAA,eAAAA,CAAe,MAAO,CAAE,gBAAiB,EAAU,WAClD,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,CAAA,EACV,EACT,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,+DACb,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,6DAAqD,EAAK,MAAS,CAC/E,EAAK,QAAS,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,oDAA4C,EAAK,OAAU,CACtF,EAAK,OACJ,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,iIACb,EAAK,MACD,GAEL,CAAA,EACF,CACL,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAACE,EAAAA,sBAAAA,EAAAA,CAAwB,EACzB,EAAA,EAAA,KAACC,EAAAA,kBAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,iBAAAA,CAAiB,UAAU,gCAAgC,QAAS,aACnE,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,UAAU,SAAA,CAAW,CAChC,EAAA,EACgB,CAAA,CACD,CAAA,CAAA,CACnB,CAAA,EAEe,CAAA,CAAA,CACT,CAGhB,IAAS,GAAsB,KAAuB,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,0BAAA,CAA4B,EAEhG,GAAsB,KACtB,EAAA,EAAA,MAACV,EAAAA,aAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,oBAAAA,CAAoB,QAAA,aACnB,EAAA,EAAA,MAACJ,EAAAA,OAAAA,CAAO,YAAU,iBAAiB,QAAQ,QAAQ,MAAM,QAAQ,UAAU,0EACzE,EAAA,EAAA,KAACc,EAAAA,UAAAA,CAAU,UAAU,UAAA,CAAY,CAChC,EAAA,EACM,EACW,EACtB,EAAA,EAAA,KAACL,EAAAA,oBAAAA,CAAoB,MAAM,gBACzB,EAAA,EAAA,MAACE,EAAAA,kBAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,iBAAAA,CAAiB,QAAS,WAAgB,gBAA+B,EAC1E,EAAA,EAAA,KAACA,EAAAA,iBAAAA,CAAiB,QAAS,WAAgB,mBAAkC,CAAA,CAAA,CAC3D,EACA,CAAA,CAAA,CACT,GAEb,GACC,EC1GP,GAAA,EAAA,EAAA,OAAwE,CAAE,KAAI,QAAO,OAAM,kBAAiB,cAChH,EAAA,EAAA,KAAC,EAAA,CAAA,UACC,EAAA,EAAA,MAAC,EAAA,CAAkB,SAAU,IAAO,EAA0B,oBAC3D,EACA,EAAA,EACiB,CAAA,CACJ,CAClB,CACF,EAAwB,YAAc,0BAEtC,MAAM,GAAA,EAAA,EAAA,OAA8E,CAAE,KAAI,QAAO,eAC/F,EAAA,EAAA,MAAC,EAAA,CAAA,SAAA,EACC,EAAA,EAAA,KAAC,EAAA,CAAA,SAAmB,EAAA,CAA0B,EAC9C,EAAA,EAAA,KAAC,EAAA,CAAA,UACC,EAAA,EAAA,KAAC,EAAA,CAAa,WAAA,CAAuB,CAAA,CACjB,CAAA,CAAA,CACT,CACf,CACF,EAAoB,YAAc,sBA6BlC,MAAaG,GAAgE,CAC3E,WACA,kBACA,UACA,WACA,qBACA,qBACA,WACA,cAAc,UACd,YAAY,eAAe,IAAI,MAAM,CAAC,aAAa,CAAC,UACpD,UACI,CACJ,IAAM,EAAS,GAAS,cAAgB,EAAE,CAE1C,OACE,EAAA,EAAA,MAAC,EAAA,CAAA,SAAA,EACC,EAAA,EAAA,KAAC,EAAA,CACW,WACU,qBACA,qBACd,OACI,WACG,eACb,EACF,EAAA,EAAA,MAAC,EAAA,CAAiB,QAAQ,QAAQ,YAAY,kBAC5C,EAAA,EAAA,KAAC,EAAA,CAAA,SACE,EAAO,IAAI,IACV,EAAA,EAAA,KAAC,EAAA,CAAmC,GAAI,EAAM,GAAI,MAAO,EAAM,eAC5D,EAAM,MAAM,IAAI,IACf,EAAA,EAAA,KAAC,EAAA,CAEC,GAAI,EAAK,GACQ,kBACjB,MAAO,EAAK,MACZ,KAAM,EAAK,KACX,QAAS,EAAK,SALT,EAAK,GAMV,CACF,EAVsB,EAAM,GAWV,CACtB,CAAA,CACa,EACjB,EAAA,EAAA,KAAC,EAAA,CAAA,UACC,EAAA,EAAA,MAAC,EAAA,CAAA,SAAA,EACC,EAAA,EAAA,KAAC,EAAA,CAAA,UACC,EAAA,EAAA,MAAC,EAAA,CAAkB,UAAU,uBAAuB,QAAS,aAC3D,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,UAAU,0BAAA,CAA4B,CACjD,EAAA,EACiB,CAAA,CACJ,EAClB,EAAA,EAAA,KAAC,EAAA,CAAgB,UAAU,0CACzB,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,8DAAsD,GAAc,EACjE,CAAA,CAAA,CACN,CAAA,CACA,CAAA,EACC,EACnB,EAAA,EAAA,KAAC,EAAA,CAAe,WAAA,CAAyB,GACvB"}

package/dist/cms-layout-CLeGdpMb.js

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

package/dist/cms-layout-CLeGdpMb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cms-layout-CLeGdpMb.js","names":["open","CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n  user?: CMSLayoutUser;\n  onLogout?: () => void;\n  logoutLabel?: string;\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, LogOutIcon, MenuIcon, ShoppingCartIcon, UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport type CMSLayoutUser = {\n  /** Display name shown in the header and user dropdown. */\n  name: string;\n  /** Email address shown below the name in the dropdown. */\n  email?: string;\n  /** Role or position shown as a muted label in the dropdown. */\n  role?: string;\n  /** Optional avatar image URL; falls back to a color-hashed icon. */\n  avatarUrl?: string;\n};\n\nexport const CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n  user?: CMSLayoutUser;\n  onLogout?: () => void;\n  logoutLabel?: string;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale, user, onLogout, logoutLabel = 'Log out' }) => {\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  const avatarBg = user ? colorHashLight.hex(user.name) : undefined;\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      <div className=\"flex items-center gap-1\">\n        {user && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" color=\"muted\" className=\"h-9 gap-2.5 rounded-full px-2 transition-all\">\n                <Avatar className=\"size-7 shrink-0\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={14} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"hidden flex-col items-start sm:flex\">\n                  <span className=\"max-w-36 truncate text-xs font-semibold leading-tight text-text-positive\">{user.name}</span>\n                  {user.email && <span className=\"max-w-36 truncate text-xs leading-tight text-text-positive-weak\">{user.email}</span>}\n                </div>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-60\">\n              <div className=\"flex flex-col items-center gap-2 px-4 py-4 text-center\">\n                <Avatar className=\"size-12\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={22} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex min-w-0 w-full flex-col items-center gap-0.5\">\n                  <p className=\"truncate text-sm font-semibold text-text-positive\">{user.name}</p>\n                  {user.email && <p className=\"truncate text-xs text-text-positive-weak\">{user.email}</p>}\n                  {user.role && (\n                    <span className=\"mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak\">\n                      {user.role}\n                    </span>\n                  )}\n                </div>\n              </div>\n              {onLogout && (\n                <>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem className=\"text-danger focus:text-danger\" onClick={onLogout}>\n                      <LogOutIcon className=\"size-4\" />\n                      {logoutLabel}\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {user && (onChangeToEnLocale || onChangeToViLocale) && <div className=\"mx-1 h-5 w-px bg-border\" />}\n\n        {(onChangeToEnLocale || onChangeToViLocale) && (\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        )}\n      </div>\n    </header>\n  );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader, type CMSLayoutUser } 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 { CMSLayoutUser };\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  /** Authenticated user shown in the header avatar dropdown. Omit to hide the user menu. */\n  user?: CMSLayoutUser;\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  user,\n}) => {\n  const groups = sidebar?.groupcontent ?? [];\n\n  return (\n    <CMSLayoutProvider>\n      <CMSLayoutHeader\n        i18nText={i18nText}\n        onChangeToEnLocale={onChangeToEnLocale}\n        onChangeToViLocale={onChangeToViLocale}\n        user={user}\n        onLogout={onLogout}\n        logoutLabel={logoutLabel}\n      />\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/data-display/country.d.ts

@@ -1,22 +0,0 @@
-import { ECountry } from "@/types";
-
-//#region packages/components/data-display/country.d.ts
-type CountryDisplayProps = {
-  /** The country enum value to display; renders "No country" when `null` or `undefined`. */
-  country?: ECountry | null;
-};
-/**
- * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
- *
- * @example
- * ```tsx
- * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';
- * import { ECountry } from '@customafk/lunas-ui/types';
- *
- * <CountryDisplay country={ECountry.VIETNAM} />
- * ```
- */
-declare const CountryDisplay: React.FC<CountryDisplayProps>;
-//#endregion
-export { CountryDisplay };
-//# sourceMappingURL=country.d.ts.map

package/dist/data-display/country.js

@@ -1,2 +0,0 @@
-"use client";import{t as e}from"../paragraph-ESjXXqHU.js";import{t}from"../flex-D_XtSjf4.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{useMemo as i}from"react";import a from"react-country-flag";import{ECountry as o}from"@/types";const s={[o.VIETNAM]:`VN`,[o.USA]:`US`,[o.JAPAN]:`JP`,[o.CHINA]:`CN`,[o.KOREA]:`KR`,[o.SINGAPORE]:`SG`,[o.MALAYSIA]:`MY`,[o.INDONESIA]:`ID`,[o.TAIWAN]:`TW`,[o.THAILAND]:`TH`},c={[o.VIETNAM]:`Vietnam`,[o.USA]:`America`,[o.JAPAN]:`Japan`,[o.CHINA]:`China`,[o.KOREA]:`Korea`,[o.SINGAPORE]:`Singapore`,[o.MALAYSIA]:`Malaysia`,[o.INDONESIA]:`Indonesia`,[o.TAIWAN]:`Taiwan`,[o.THAILAND]:`Thailand`},l=({country:o})=>{let l=i(()=>o?s[o]:`VN`,[o]);return o?r(t,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:[n(a,{svg:!0,countryCode:l,className:`emojiFlag border`}),n(e,{variant:`sm`,children:c[o]})]}):n(t,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:n(e,{variant:`muted`,className:`line-clamp-1 text-xs`,children:`No country`})})};export{l as CountryDisplay};
-//# sourceMappingURL=country.js.map

package/dist/data-display/country.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"country.js","names":["COUNTRY_CODES: Record<ECountry, string>","COUNTRY_LABELS: Record<ECountry, string>","CountryDisplay: React.FC<CountryDisplayProps>"],"sources":["../../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"oPAUA,MAAMA,EAA0C,EAC7C,EAAS,SAAU,MACnB,EAAS,KAAM,MACf,EAAS,OAAQ,MACjB,EAAS,OAAQ,MACjB,EAAS,OAAQ,MACjB,EAAS,WAAY,MACrB,EAAS,UAAW,MACpB,EAAS,WAAY,MACrB,EAAS,QAAS,MAClB,EAAS,UAAW,KACtB,CAEKC,EAA2C,EAC9C,EAAS,SAAU,WACnB,EAAS,KAAM,WACf,EAAS,OAAQ,SACjB,EAAS,OAAQ,SACjB,EAAS,OAAQ,SACjB,EAAS,WAAY,aACrB,EAAS,UAAW,YACpB,EAAS,WAAY,aACrB,EAAS,QAAS,UAClB,EAAS,UAAW,WACtB,CAkBYC,GAAiD,CAAE,aAAc,CAC5E,IAAM,EAAO,MAAe,EAAU,EAAc,GAAW,KAAO,CAAC,EAAQ,CAAC,CAYhF,OAVK,EAWH,EAAC,EAAA,CAAK,YAAU,kBAAkB,QAAQ,OAAO,UAAU,iBACzD,EAAC,EAAA,CAAiB,IAAA,GAAI,YAAa,EAAM,UAAU,oBAAqB,CACxE,EAAC,EAAA,CAAU,QAAQ,cAAM,EAAe,IAAqB,CAAA,EACxD,CAZL,EAAC,EAAA,CAAK,YAAU,kBAAkB,QAAQ,OAAO,UAAU,gBACzD,EAAC,EAAA,CAAU,QAAQ,QAAQ,UAAU,gCAAuB,cAEhD,EACP"}

package/dist/data-display/data-list.d.ts

@@ -1,43 +0,0 @@
-//#region packages/components/data-display/data-list.d.ts
-type DataListProps = {
-  /** Additional CSS classes applied to the wrapping container. */
-  className?: string;
-};
-/**
- * A vertical container that stacks `DataListItem` rows with consistent spacing.
- *
- * @example
- * ```tsx
- * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';
- *
- * <DataList>
- *   <DataListItem label="Status" value="Active" />
- *   <DataListItem label="Created" value="2024-01-15" />
- * </DataList>
- * ```
- */
-declare const DataList: React.FC<React.PropsWithChildren<DataListProps>>;
-type DataListItemProps = {
-  /** Descriptive label shown to the left of (or above, on mobile) the value. */
-  label: string;
-  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */
-  value: string | number | React.ReactNode;
-  /** Minimum width applied to the label column. Defaults to `'120px'`. */
-  minLabelWidth?: string;
-  /** Additional CSS classes applied to the row container. */
-  className?: string;
-};
-/**
- * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.
- *
- * @example
- * ```tsx
- * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';
- *
- * <DataListItem label="Email" value="user@example.com" />
- * ```
- */
-declare const DataListItem: React.FC<DataListItemProps>;
-//#endregion
-export { DataList, DataListItem };
-//# sourceMappingURL=data-list.d.ts.map

package/dist/data-display/data-list.js

@@ -1,2 +0,0 @@
-"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({children:n,className:r})=>t(`div`,{"data-slot":`data-list`,className:e(`flex w-full flex-col gap-4`,r),children:n}),i=({label:r,value:i,minLabelWidth:a=`120px`,className:o})=>n(`div`,{"data-slot":`data-list-item`,className:e(`flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4`,o),children:[t(`span`,{"data-slot":`data-list-label`,style:{minWidth:a},className:`text-sm text-text-positive-weak`,children:r}),t(`span`,{"data-slot":`data-list-value`,className:`text-sm text-text-positive`,children:i})]});export{r as DataList,i as DataListItem};
-//# sourceMappingURL=data-list.js.map