@customafk/lunas-ui 0.2.11 → 0.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/dist/{alert-CI3ANQHC.d.cts → alert-DUC0U7cI.d.mts} +7 -7
  2. package/dist/{alert-DQHE-pdI.mjs → alert-DjfDTXIK.mjs} +1 -1
  3. package/dist/{alert-DQHE-pdI.mjs.map → alert-DjfDTXIK.mjs.map} +1 -1
  4. package/dist/{alert-C1YY0oUh.d.mts → alert-_grSHXD3.d.cts} +6 -6
  5. package/dist/{alert-BqJVf4wD.cjs → alert-kJbUcjIR.cjs} +1 -1
  6. package/dist/{alert-BqJVf4wD.cjs.map → alert-kJbUcjIR.cjs.map} +1 -1
  7. package/dist/{badge-DXeJVvRU.d.mts → badge-BwjhcVgG.d.cts} +6 -6
  8. package/dist/{badge-PKOZAtox.d.cts → badge-DvElo91N.d.mts} +6 -6
  9. package/dist/{button-BwvdZSJE.d.cts → button-B46oQvo-.d.mts} +6 -6
  10. package/dist/{button-BuQ09ya9.d.mts → button-CRujrbey.d.cts} +5 -5
  11. package/dist/{calendar-B2V4Lv0T.cjs → calendar-BMXIBCsr.cjs} +1 -1
  12. package/dist/{calendar-B2V4Lv0T.cjs.map → calendar-BMXIBCsr.cjs.map} +1 -1
  13. package/dist/{calendar-Cw1G0sVL.mjs → calendar-WMJIKojX.mjs} +1 -1
  14. package/dist/{calendar-Cw1G0sVL.mjs.map → calendar-WMJIKojX.mjs.map} +1 -1
  15. package/dist/{cms-layout-r9TmK6hi.cjs → cms-layout-BLJpfFpE.cjs} +1 -1
  16. package/dist/{cms-layout-r9TmK6hi.cjs.map → cms-layout-BLJpfFpE.cjs.map} +1 -1
  17. package/dist/{cms-layout-Bp6rU_of.mjs → cms-layout-BYzUepEk.mjs} +1 -1
  18. package/dist/{cms-layout-Bp6rU_of.mjs.map → cms-layout-BYzUepEk.mjs.map} +1 -1
  19. package/dist/data-display/statistic.d.cts +2 -2
  20. package/dist/{dialog-CRVNgVZU.d.cts → dialog-BuM8wDKV.d.cts} +12 -12
  21. package/dist/{dialog-CiCeXhAu.d.mts → dialog-HkbI2x97.d.mts} +12 -12
  22. package/dist/dialogs/detail-dialog/components/sidebar.d.cts +26 -26
  23. package/dist/dialogs/detail-dialog/components/sidebar.d.mts +26 -26
  24. package/dist/features/descriptions/index.d.cts +3 -3
  25. package/dist/features/descriptions/index.d.mts +7 -7
  26. package/dist/features/search-modal/index.d.cts +2 -2
  27. package/dist/features/tables/index.cjs +1 -1
  28. package/dist/features/tables/index.d.cts +2 -1181
  29. package/dist/features/tables/index.d.mts +3 -1181
  30. package/dist/features/tables/index.mjs +1 -1
  31. package/dist/features/tanstack-form/index.cjs +1 -1
  32. package/dist/features/tanstack-form/index.d.cts +1 -1
  33. package/dist/features/tanstack-form/index.d.mts +1 -1
  34. package/dist/features/tanstack-form/index.mjs +1 -1
  35. package/dist/{field-DfsTE4Ie.mjs → field-C5HOxxiX.mjs} +2 -2
  36. package/dist/{field-DfsTE4Ie.mjs.map → field-C5HOxxiX.mjs.map} +1 -1
  37. package/dist/{field-C51eJ6QN.cjs → field-D1wvj5Wj.cjs} +2 -2
  38. package/dist/{field-C51eJ6QN.cjs.map → field-D1wvj5Wj.cjs.map} +1 -1
  39. package/dist/index-B5wgYino.d.cts +1009 -0
  40. package/dist/{index-Dm0lp7bT.d.mts → index-DNOZLwxL.d.cts} +282 -282
  41. package/dist/{index-C3SKVvaI.d.cts → index-DaAbyifH.d.mts} +230 -230
  42. package/dist/index-b6uMbewl.d.mts +1009 -0
  43. package/dist/index.cjs +1 -1
  44. package/dist/index.d.cts +8 -8
  45. package/dist/index.d.mts +8 -8
  46. package/dist/index.mjs +1 -1
  47. package/dist/{input-CoHHwUwI.d.mts → input-BLyJp8UZ.d.cts} +6 -6
  48. package/dist/{input-BpZ_mAuD.d.cts → input-BaQTUEQF.d.mts} +5 -5
  49. package/dist/{label-3vAlNtF9.mjs → label-COqDQDMy.mjs} +1 -1
  50. package/dist/{label-3vAlNtF9.mjs.map → label-COqDQDMy.mjs.map} +1 -1
  51. package/dist/{label-zyBJYydC.cjs → label-DYsRdKMt.cjs} +1 -1
  52. package/dist/{label-zyBJYydC.cjs.map → label-DYsRdKMt.cjs.map} +1 -1
  53. package/dist/layouts/cms-layout/index.cjs +1 -1
  54. package/dist/layouts/cms-layout/index.mjs +1 -1
  55. package/dist/layouts/flex.d.cts +4 -4
  56. package/dist/layouts/flex.d.mts +4 -4
  57. package/dist/layouts/payment-layout/index.cjs +1 -1
  58. package/dist/layouts/payment-layout/index.mjs +1 -1
  59. package/dist/pages/FeatureDeveloping.d.cts +2 -2
  60. package/dist/pages/FeatureDeveloping.d.mts +2 -2
  61. package/dist/pages/FeatureFixing.d.cts +2 -2
  62. package/dist/pages/FeatureFixing.d.mts +2 -2
  63. package/dist/pages/NotAuthorized.d.cts +2 -2
  64. package/dist/pages/NotAuthorized.d.mts +2 -2
  65. package/dist/pages/NotFound.d.cts +2 -2
  66. package/dist/pages/NotFound.d.mts +2 -2
  67. package/dist/{payment-layout-C9pP5HdT.cjs → payment-layout-C8_xrnVn.cjs} +1 -1
  68. package/dist/{payment-layout-C9pP5HdT.cjs.map → payment-layout-C8_xrnVn.cjs.map} +1 -1
  69. package/dist/{payment-layout-D-69gOPJ.mjs → payment-layout-CVBTGjMw.mjs} +1 -1
  70. package/dist/{payment-layout-D-69gOPJ.mjs.map → payment-layout-CVBTGjMw.mjs.map} +1 -1
  71. package/dist/{popover-CmoqhK17.cjs → popover-AEt-aSy3.cjs} +1 -1
  72. package/dist/{popover-CmoqhK17.cjs.map → popover-AEt-aSy3.cjs.map} +1 -1
  73. package/dist/{popover-BFJhuzW3.mjs → popover-OJXFbqJi.mjs} +1 -1
  74. package/dist/{popover-BFJhuzW3.mjs.map → popover-OJXFbqJi.mjs.map} +1 -1
  75. package/dist/{radio-group-D5OurBIG.mjs → radio-group-5ktXGXSv.mjs} +1 -1
  76. package/dist/{radio-group-D5OurBIG.mjs.map → radio-group-5ktXGXSv.mjs.map} +1 -1
  77. package/dist/{radio-group-DAv2EU3F.cjs → radio-group-C7FAAawm.cjs} +1 -1
  78. package/dist/{radio-group-DAv2EU3F.cjs.map → radio-group-C7FAAawm.cjs.map} +1 -1
  79. package/dist/{select-DRCKwnTV.mjs → select-DrHceSnf.mjs} +1 -1
  80. package/dist/{select-DRCKwnTV.mjs.map → select-DrHceSnf.mjs.map} +1 -1
  81. package/dist/{select-DfvSMRUq.cjs → select-DzylYFes.cjs} +1 -1
  82. package/dist/{select-DfvSMRUq.cjs.map → select-DzylYFes.cjs.map} +1 -1
  83. package/dist/tables-BtcCgpJB.mjs +4 -0
  84. package/dist/tables-BtcCgpJB.mjs.map +1 -0
  85. package/dist/tables-DZvtd0HA.cjs +4 -0
  86. package/dist/tables-DZvtd0HA.cjs.map +1 -0
  87. package/dist/{tanstack-form-Bb9JXuEq.cjs → tanstack-form-BUjk7DIz.cjs} +2 -2
  88. package/dist/{tanstack-form-Bb9JXuEq.cjs.map → tanstack-form-BUjk7DIz.cjs.map} +1 -1
  89. package/dist/{tanstack-form-BwyHENeF.mjs → tanstack-form-DtZdrifK.mjs} +2 -2
  90. package/dist/{tanstack-form-BwyHENeF.mjs.map → tanstack-form-DtZdrifK.mjs.map} +1 -1
  91. package/dist/{textarea-CvoBIPlJ.cjs → textarea-DZ86A_cm.cjs} +1 -1
  92. package/dist/{textarea-CvoBIPlJ.cjs.map → textarea-DZ86A_cm.cjs.map} +1 -1
  93. package/dist/{textarea-5RD9ToTV.mjs → textarea-Dd1fBf_4.mjs} +1 -1
  94. package/dist/{textarea-5RD9ToTV.mjs.map → textarea-Dd1fBf_4.mjs.map} +1 -1
  95. package/dist/typography/paragraph.d.cts +2 -2
  96. package/dist/typography/paragraph.d.mts +4 -4
  97. package/dist/typography/title.d.cts +2 -2
  98. package/dist/typography/title.d.mts +2 -2
  99. package/dist/ui/alert-dialog.d.cts +12 -12
  100. package/dist/ui/alert-dialog.d.mts +12 -12
  101. package/dist/ui/alert.cjs +1 -1
  102. package/dist/ui/alert.d.cts +1 -1
  103. package/dist/ui/alert.d.mts +1 -1
  104. package/dist/ui/alert.mjs +1 -1
  105. package/dist/ui/aspect-ratio.d.cts +2 -2
  106. package/dist/ui/aspect-ratio.d.mts +2 -2
  107. package/dist/ui/avatar.d.cts +4 -4
  108. package/dist/ui/avatar.d.mts +4 -4
  109. package/dist/ui/badge.d.cts +1 -1
  110. package/dist/ui/badge.d.mts +1 -1
  111. package/dist/ui/breadcrumb.d.cts +8 -8
  112. package/dist/ui/breadcrumb.d.mts +8 -8
  113. package/dist/ui/button-group.d.cts +6 -6
  114. package/dist/ui/button-group.d.mts +4 -4
  115. package/dist/ui/button.d.cts +1 -1
  116. package/dist/ui/button.d.mts +1 -1
  117. package/dist/ui/calendar.cjs +1 -1
  118. package/dist/ui/calendar.d.cts +4 -4
  119. package/dist/ui/calendar.d.mts +4 -4
  120. package/dist/ui/calendar.mjs +1 -1
  121. package/dist/ui/card.d.cts +8 -8
  122. package/dist/ui/card.d.mts +8 -8
  123. package/dist/ui/carousel.d.cts +7 -7
  124. package/dist/ui/carousel.d.mts +7 -7
  125. package/dist/ui/checkbox.d.cts +2 -2
  126. package/dist/ui/checkbox.d.mts +2 -2
  127. package/dist/ui/collapsible.d.cts +4 -4
  128. package/dist/ui/collapsible.d.mts +4 -4
  129. package/dist/ui/command.d.cts +11 -11
  130. package/dist/ui/command.d.mts +11 -11
  131. package/dist/ui/context-menu.d.cts +16 -16
  132. package/dist/ui/context-menu.d.mts +16 -16
  133. package/dist/ui/dialog.d.cts +1 -1
  134. package/dist/ui/dialog.d.mts +1 -1
  135. package/dist/ui/drawer.d.cts +11 -11
  136. package/dist/ui/drawer.d.mts +11 -11
  137. package/dist/ui/dropdown-menu.d.cts +16 -16
  138. package/dist/ui/dropdown-menu.d.mts +16 -16
  139. package/dist/ui/empty.d.cts +7 -7
  140. package/dist/ui/empty.d.mts +9 -9
  141. package/dist/ui/field.cjs +1 -1
  142. package/dist/ui/field.d.cts +22 -22
  143. package/dist/ui/field.d.mts +24 -24
  144. package/dist/ui/field.mjs +1 -1
  145. package/dist/ui/file-uploader.d.cts +2 -2
  146. package/dist/ui/file-uploader.d.mts +2 -2
  147. package/dist/ui/form.cjs +1 -1
  148. package/dist/ui/form.d.cts +11 -11
  149. package/dist/ui/form.d.mts +11 -11
  150. package/dist/ui/form.mjs +1 -1
  151. package/dist/ui/hover-card.d.cts +4 -4
  152. package/dist/ui/hover-card.d.mts +4 -4
  153. package/dist/ui/input-otp.d.cts +5 -5
  154. package/dist/ui/input-otp.d.mts +5 -5
  155. package/dist/ui/input.d.cts +1 -1
  156. package/dist/ui/input.d.mts +1 -1
  157. package/dist/ui/inputs/search-input.d.cts +3 -3
  158. package/dist/ui/inputs/search-input.d.mts +3 -3
  159. package/dist/ui/item.d.cts +14 -14
  160. package/dist/ui/item.d.mts +14 -14
  161. package/dist/ui/label.cjs +1 -1
  162. package/dist/ui/label.d.cts +2 -2
  163. package/dist/ui/label.d.mts +2 -2
  164. package/dist/ui/label.mjs +1 -1
  165. package/dist/ui/menubar.d.cts +17 -17
  166. package/dist/ui/menubar.d.mts +17 -17
  167. package/dist/ui/multi-select.d.cts +2 -2
  168. package/dist/ui/multi-select.d.mts +3 -3
  169. package/dist/ui/navigation-menu.d.cts +11 -11
  170. package/dist/ui/navigation-menu.d.mts +9 -9
  171. package/dist/ui/pagination.d.cts +9 -9
  172. package/dist/ui/pagination.d.mts +9 -9
  173. package/dist/ui/popover.cjs +1 -1
  174. package/dist/ui/popover.d.cts +6 -6
  175. package/dist/ui/popover.d.mts +6 -6
  176. package/dist/ui/popover.mjs +1 -1
  177. package/dist/ui/progress.d.cts +2 -2
  178. package/dist/ui/progress.d.mts +2 -2
  179. package/dist/ui/radio-group.cjs +1 -1
  180. package/dist/ui/radio-group.d.cts +3 -3
  181. package/dist/ui/radio-group.d.mts +3 -3
  182. package/dist/ui/radio-group.mjs +1 -1
  183. package/dist/ui/resizable.d.cts +9 -9
  184. package/dist/ui/resizable.d.mts +9 -9
  185. package/dist/ui/scroll-area.d.cts +6 -6
  186. package/dist/ui/scroll-area.d.mts +6 -6
  187. package/dist/ui/select.cjs +1 -1
  188. package/dist/ui/select.d.cts +9 -9
  189. package/dist/ui/select.d.mts +9 -9
  190. package/dist/ui/select.mjs +1 -1
  191. package/dist/ui/separator.d.cts +2 -2
  192. package/dist/ui/separator.d.mts +2 -2
  193. package/dist/ui/sheet.d.cts +9 -9
  194. package/dist/ui/sheet.d.mts +9 -9
  195. package/dist/ui/sidebar.d.cts +26 -26
  196. package/dist/ui/sidebar.d.mts +26 -26
  197. package/dist/ui/skeleton.d.cts +2 -2
  198. package/dist/ui/skeleton.d.mts +2 -2
  199. package/dist/ui/slider.d.cts +2 -2
  200. package/dist/ui/slider.d.mts +2 -2
  201. package/dist/ui/sonner.d.cts +2 -2
  202. package/dist/ui/sonner.d.mts +2 -2
  203. package/dist/ui/spinner.d.cts +2 -2
  204. package/dist/ui/spinner.d.mts +2 -2
  205. package/dist/ui/switch.d.cts +2 -2
  206. package/dist/ui/switch.d.mts +2 -2
  207. package/dist/ui/table.d.cts +18 -18
  208. package/dist/ui/table.d.mts +18 -18
  209. package/dist/ui/tabs.d.cts +5 -5
  210. package/dist/ui/tabs.d.mts +5 -5
  211. package/dist/ui/textarea.cjs +1 -1
  212. package/dist/ui/textarea.d.cts +2 -2
  213. package/dist/ui/textarea.d.mts +2 -2
  214. package/dist/ui/textarea.mjs +1 -1
  215. package/dist/ui/toggle-group.d.cts +3 -3
  216. package/dist/ui/toggle-group.d.mts +3 -3
  217. package/dist/ui/toggle.d.cts +4 -4
  218. package/dist/ui/toggle.d.mts +4 -4
  219. package/dist/ui/tooltip.d.cts +5 -5
  220. package/dist/ui/tooltip.d.mts +5 -5
  221. package/package.json +1 -1
  222. package/dist/tables-Chn2pQSc.cjs +0 -4
  223. package/dist/tables-Chn2pQSc.cjs.map +0 -1
  224. package/dist/tables-eLIhswqW.mjs +0 -4
  225. package/dist/tables-eLIhswqW.mjs.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"cms-layout-r9TmK6hi.cjs","names":["open","TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}>","Button","MenuIcon","ShoppingCartIcon","DropdownMenu","DropdownMenuTrigger","EarthIcon","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>","LogOutIcon"],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\nfunction CMSLayoutProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <section\n data-slot=\"layout-wrapper\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n className={cn('relative group/sidebar-wrapper flex h-dvh bg-sidebar', className)}\n {...props}\n >\n {children}\n </section>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n }) => {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n },\n [toggleSidebar]\n );\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n side={side}\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]',\n 'w-(--sidebar-width)',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex shadow-nav',\n 'fixed left-0 inset-y-0 p-2',\n 'top-[calc(var(--header-height)+0.5rem)] z-10',\n 'w-(--sidebar-width)',\n 'transition-all duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n className\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n {children}\n </div>\n </div>\n </aside>\n );\n }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"relative flex-1 size-full overflow-auto\">{children}</div>\n </main>\n );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n [\n 'peer/menu-button',\n 'cursor-pointer',\n 'flex w-full items-center gap-2',\n 'overflow-hidden rounded-md p-2 outline-hidden',\n 'truncate text-left font-normal',\n 'transition-[color,background-color,width,height,padding]',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6 [&>svg]:shrink-0',\n '[&>span:last-child]:truncate',\n ],\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n },\n size: {\n default: 'h-10 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nconst SidebarMenuButton = memo(\n ({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n }: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n onClick?: () => void;\n } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n props.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n },\n [props.onClick]\n );\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n onClick={handleClick}\n {...props}\n />\n );\n\n if (!tooltip) return button;\n\n if (typeof tooltip === 'string') {\n tooltip = { children: tooltip };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </Tooltip>\n );\n }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n CMSLayoutProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, MenuIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport const CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale }) => {\n const { toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n toggleSidebar();\n },\n [toggleSidebar]\n );\n\n const handleEnLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToEnLocale?.();\n },\n [onChangeToEnLocale]\n );\n\n const handleViLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToViLocale?.();\n },\n [onChangeToViLocale]\n );\n\n return (\n <header\n data-slot=\"cms-layout-header\"\n className={cn(\n 'bg-card',\n 'h-(--header-height)',\n 'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n 'flex items-center shadow-nav',\n 'transition-[height] ease-linear'\n )}\n >\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n\n <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Enterprise</span>\n <span className=\"truncate text-xs\">Established 2025</span>\n </div>\n </div>\n\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n <EarthIcon className=\"size-6!\" />\n {i18nText}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </header>\n );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader } from './components/header';\nimport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. */\n onClick?: () => void;\n};\n\ntype NavGroup = {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n /** Navigation items that belong to this group. */\n items: NavItem[];\n};\n\nexport type CMSLayoutProps = {\n /** Text label used by the header for language-toggle or i18n display. */\n i18nText?: string;\n /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: { groupcontent: NavGroup[] };\n /** Callback fired when the logout button is clicked. */\n onLogout?: () => void;\n /** Callback fired when the user switches the UI locale to English. */\n onChangeToEnLocale?: () => void;\n /** Callback fired when the user switches the UI locale to Vietnamese. */\n onChangeToViLocale?: () => void;\n /**\n * Label displayed on the logout button.\n * @default 'Log out'\n */\n logoutLabel?: string;\n /**\n * Copyright string shown at the bottom of the sidebar.\n * @default `Copyright © <current year>, Lunas.`\n */\n copyright?: string;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick }) => (\n <SidebarMenuItem>\n <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n {icon}\n {label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n <SidebarGroup>\n <SidebarGroupLabel>{label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>{children}</SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n * activeNavItemId=\"dashboard\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'main',\n * label: 'Main',\n * items: [\n * { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },\n * ],\n * },\n * ],\n * }}\n * onLogout={() => signOut()}\n * >\n * <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n i18nText,\n activeNavItemId,\n sidebar,\n children,\n onChangeToEnLocale,\n onChangeToViLocale,\n onLogout,\n logoutLabel = 'Log out',\n copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n}) => {\n const groups = sidebar?.groupcontent ?? [];\n\n return (\n <CMSLayoutProvider>\n <CMSLayoutHeader i18nText={i18nText} onChangeToEnLocale={onChangeToEnLocale} onChangeToViLocale={onChangeToViLocale} />\n <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groups.map(group => (\n <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n {group.items.map(item => (\n <SidebarContentGroupItem\n key={item.id}\n id={item.id}\n activeNavItemId={activeNavItemId}\n label={item.label}\n icon={item.icon}\n onClick={item.onClick}\n />\n ))}\n </SidebarContentGroup>\n ))}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n <LogOutIcon className=\"text-text-positive-weak\" />\n {logoutLabel}\n </SidebarMenuButton>\n </SidebarMenuItem>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </CMSLayoutSidebar>\n <CMSLayoutMain>{children}</CMSLayoutMain>\n </CMSLayoutProvider>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"cms-layout-BLJpfFpE.cjs","names":["open","TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}>","Button","MenuIcon","ShoppingCartIcon","DropdownMenu","DropdownMenuTrigger","EarthIcon","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>","LogOutIcon"],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\nfunction CMSLayoutProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <section\n data-slot=\"layout-wrapper\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n className={cn('relative group/sidebar-wrapper flex h-dvh bg-sidebar', className)}\n {...props}\n >\n {children}\n </section>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n }) => {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n },\n [toggleSidebar]\n );\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n side={side}\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]',\n 'w-(--sidebar-width)',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex shadow-nav',\n 'fixed left-0 inset-y-0 p-2',\n 'top-[calc(var(--header-height)+0.5rem)] z-10',\n 'w-(--sidebar-width)',\n 'transition-all duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n className\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n {children}\n </div>\n </div>\n </aside>\n );\n }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"relative flex-1 size-full overflow-auto\">{children}</div>\n </main>\n );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n [\n 'peer/menu-button',\n 'cursor-pointer',\n 'flex w-full items-center gap-2',\n 'overflow-hidden rounded-md p-2 outline-hidden',\n 'truncate text-left font-normal',\n 'transition-[color,background-color,width,height,padding]',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6 [&>svg]:shrink-0',\n '[&>span:last-child]:truncate',\n ],\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n },\n size: {\n default: 'h-10 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nconst SidebarMenuButton = memo(\n ({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n }: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n onClick?: () => void;\n } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n props.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n },\n [props.onClick]\n );\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n onClick={handleClick}\n {...props}\n />\n );\n\n if (!tooltip) return button;\n\n if (typeof tooltip === 'string') {\n tooltip = { children: tooltip };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </Tooltip>\n );\n }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n CMSLayoutProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, MenuIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport const CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale }) => {\n const { toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n toggleSidebar();\n },\n [toggleSidebar]\n );\n\n const handleEnLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToEnLocale?.();\n },\n [onChangeToEnLocale]\n );\n\n const handleViLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToViLocale?.();\n },\n [onChangeToViLocale]\n );\n\n return (\n <header\n data-slot=\"cms-layout-header\"\n className={cn(\n 'bg-card',\n 'h-(--header-height)',\n 'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n 'flex items-center shadow-nav',\n 'transition-[height] ease-linear'\n )}\n >\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n\n <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Enterprise</span>\n <span className=\"truncate text-xs\">Established 2025</span>\n </div>\n </div>\n\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n <EarthIcon className=\"size-6!\" />\n {i18nText}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </header>\n );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader } from './components/header';\nimport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. */\n onClick?: () => void;\n};\n\ntype NavGroup = {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n /** Navigation items that belong to this group. */\n items: NavItem[];\n};\n\nexport type CMSLayoutProps = {\n /** Text label used by the header for language-toggle or i18n display. */\n i18nText?: string;\n /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: { groupcontent: NavGroup[] };\n /** Callback fired when the logout button is clicked. */\n onLogout?: () => void;\n /** Callback fired when the user switches the UI locale to English. */\n onChangeToEnLocale?: () => void;\n /** Callback fired when the user switches the UI locale to Vietnamese. */\n onChangeToViLocale?: () => void;\n /**\n * Label displayed on the logout button.\n * @default 'Log out'\n */\n logoutLabel?: string;\n /**\n * Copyright string shown at the bottom of the sidebar.\n * @default `Copyright © <current year>, Lunas.`\n */\n copyright?: string;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick }) => (\n <SidebarMenuItem>\n <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n {icon}\n {label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n <SidebarGroup>\n <SidebarGroupLabel>{label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>{children}</SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n * activeNavItemId=\"dashboard\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'main',\n * label: 'Main',\n * items: [\n * { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },\n * ],\n * },\n * ],\n * }}\n * onLogout={() => signOut()}\n * >\n * <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n i18nText,\n activeNavItemId,\n sidebar,\n children,\n onChangeToEnLocale,\n onChangeToViLocale,\n onLogout,\n logoutLabel = 'Log out',\n copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n}) => {\n const groups = sidebar?.groupcontent ?? [];\n\n return (\n <CMSLayoutProvider>\n <CMSLayoutHeader i18nText={i18nText} onChangeToEnLocale={onChangeToEnLocale} onChangeToViLocale={onChangeToViLocale} />\n <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groups.map(group => (\n <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n {group.items.map(item => (\n <SidebarContentGroupItem\n key={item.id}\n id={item.id}\n activeNavItemId={activeNavItemId}\n label={item.label}\n icon={item.icon}\n onClick={item.onClick}\n />\n ))}\n </SidebarContentGroup>\n ))}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n <LogOutIcon className=\"text-text-positive-weak\" />\n {logoutLabel}\n </SidebarMenuButton>\n </SidebarMenuItem>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </CMSLayoutSidebar>\n <CMSLayoutMain>{children}</CMSLayoutMain>\n </CMSLayoutProvider>\n );\n};\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
1
  import{t as e}from"./dist-CIN9T2FB.mjs";import{t}from"./button-C6ybzxxj.mjs";import{i as n,n as r,r as i,t as a}from"./tooltip-Bj0iOG4s.mjs";import{t as o}from"./separator-BMsbHAVt.mjs";import{i as s,o as c,r as l,s as u,t as d}from"./sheet-DMIqn1iv.mjs";import{a as f,h as p,i as m,r as h,t as g}from"./dropdown-menu-DWSfXhHo.mjs";import{t as _}from"./input-6f9JTc79.mjs";import{EarthIcon as v,LogOutIcon as y,MenuIcon as b,ShoppingCartIcon as x}from"lucide-react";import{createContext as S,memo as C,useCallback as w,useContext as T,useEffect as E,useMemo as D,useState as O}from"react";import{jsx as k,jsxs as A}from"react/jsx-runtime";import{cn as j}from"@customafk/react-toolkit/utils";import{cva as M}from"class-variance-authority";import{useIsMobile as N}from"@customafk/react-toolkit/hooks/useMobile";const P=S(null);function F(){let e=T(P);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function I({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:a,children:o,...s}){let c=N(),[l,u]=O(!1),[d,f]=O(e),p=t??d,m=w(e=>{let t=typeof e==`function`?e(p):e;n?n(t):f(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,p]),h=w(()=>c?u(e=>!e):m(e=>!e),[c,m]);E(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),h())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[h]);let g=p?`expanded`:`collapsed`,_=D(()=>({state:g,open:p,setOpen:m,isMobile:c,openMobile:l,setOpenMobile:u,toggleSidebar:h}),[g,p,m,c,l,h]);return k(P.Provider,{value:_,children:k(i,{delayDuration:0,children:k(`section`,{"data-slot":`layout-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:j(`relative group/sidebar-wrapper flex h-dvh bg-sidebar`,r),...s,children:o})})})}const L=C(({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o})=>{let{isMobile:f,state:p,openMobile:m,setOpenMobile:h,toggleSidebar:g}=F(),_=w(e=>{g(),e.preventDefault(),e.stopPropagation()},[g]);return r===`none`?k(`aside`,{"data-slot":`sidebar`,className:j(`flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...o,children:a}):f?k(d,{open:m,onOpenChange:h,...o,children:A(l,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,style:{"--sidebar-width":`18rem`},side:e,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden`,children:[A(c,{className:`sr-only`,children:[k(u,{children:`Sidebar`}),k(s,{children:`Displays the mobile sidebar.`})]}),A(`div`,{className:`flex size-full flex-col`,children:[A(`div`,{className:`flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4`,children:[A(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:j(`size-10 rounded-full`,i),onClick:_,children:[k(b,{className:`size-6!`}),k(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),k(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:k(x,{size:20})}),A(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[k(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),k(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),k(`div`,{className:`flex flex-1 flex-col p-2`,children:a})]})]})}):A(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":p,"data-collapsible":p===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[k(`div`,{"data-slot":`sidebar-gap`,className:j(`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)))]`)}),k(`div`,{"data-slot":`sidebar-container`,className:j(`hidden md:flex shadow-nav`,`fixed left-0 inset-y-0 p-2`,`top-[calc(var(--header-height)+0.5rem)] z-10`,`w-(--sidebar-width)`,`transition-all duration-200 ease-linear`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`,i),...o,children:k(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`relative flex size-full flex-col`,children:a})})]})});L.displayName=`CMSLayoutSidebar`;const R=C(({className:e,children:t,...n})=>A(`main`,{"data-slot":`sidebar-inset`,className:j(`relative flex w-full flex-1 flex-col`,e),...n,children:[k(`div`,{className:`h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]`}),k(`div`,{className:`relative flex-1 size-full overflow-auto`,children:t})]}));R.displayName=`CMSLayoutMain`;const z=C(({className:e,...t})=>k(_,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:j(`h-8 w-full bg-background shadow-none`,e),...t}));z.displayName=`SidebarInput`;const B=C(({className:e,...t})=>k(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:j(`flex flex-col gap-2 p-2`,e),...t}));B.displayName=`SidebarHeader`;const V=C(({className:e,...t})=>k(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:j(`flex flex-col gap-2`,e),...t}));V.displayName=`SidebarFooter`;const H=C(({className:e,...t})=>k(o,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:j(`mx-2 w-auto bg-sidebar-border`,e),...t}));H.displayName=`SidebarSeparator`;const U=C(({className:e,...t})=>k(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:j(`flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t}));U.displayName=`SidebarContent`;const W=C(({className:e,...t})=>k(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:j(`relative flex w-full flex-col`,e),...t}));W.displayName=`SidebarGroup`;const G=C(({className:t,asChild:n=!1,...r})=>k(n?e:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:j(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r}));G.displayName=`SidebarGroupLabel`;const K=C(({className:e,...t})=>k(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:j(`w-full text-sm`,e),...t}));K.displayName=`SidebarGroupContent`;const q=C(({className:e,...t})=>k(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:j(`flex w-full min-w-0 flex-col gap-1`,e),...t}));q.displayName=`SidebarMenu`;const J=C(({className:e,...t})=>k(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:j(`group/menu-item relative`,e),...t}));J.displayName=`SidebarMenuItem`;const Y=M([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,background-color,width,height,padding]`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`disabled:pointer-events-none disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6 [&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}}),X=C(({asChild:t=!1,isActive:i=!1,variant:o=`default`,size:s=`default`,tooltip:c,className:l,...u})=>{let d=t?e:`button`,{isMobile:f,state:p}=F(),m=w(e=>{u.onClick?.(),e.preventDefault(),e.stopPropagation()},[u.onClick]),h=k(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":s,"data-active":i,className:j(Y({variant:o,size:s}),l),onClick:m,...u});return c?(typeof c==`string`&&(c={children:c}),A(a,{children:[k(n,{asChild:!0,children:h}),k(r,{side:`right`,align:`center`,hidden:p!==`collapsed`||f,...c})]})):h});X.displayName=`SidebarMenuButton`;const Z=({i18nText:e,onChangeToEnLocale:n,onChangeToViLocale:r})=>{let{toggleSidebar:i}=F(),a=w(e=>{e.preventDefault(),e.stopPropagation(),i()},[i]),o=w(e=>{e.preventDefault(),e.stopPropagation(),n?.()},[n]),s=w(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return A(`header`,{"data-slot":`cms-layout-header`,className:j(`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:[A(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`size-10 rounded-full transition-all hover:text-text-positive`,onClick:a,children:[k(b,{className:`size-6!`}),k(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),A(`div`,{className:`flex flex-1 gap-x-2 sm:ml-2.5`,children:[k(`div`,{className:`flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:k(x,{size:20})}),A(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[k(`span`,{className:`truncate font-medium`,children:`Lunas Enterprise`}),k(`span`,{className:`truncate text-xs`,children:`Established 2025`})]})]}),A(g,{children:[k(p,{asChild:!0,children:A(t,{"data-slot":`locale-trigger`,variant:`ghost`,color:`muted`,className:`gap-x-1 rounded-full transition-all hover:text-text-positive`,children:[k(v,{className:`size-6!`}),e]})}),k(h,{align:`end`,children:A(m,{children:[k(f,{onClick:o,children:`EN - English`}),k(f,{onClick:s,children:`VI - Vietnamese`})]})})]})]})},Q=C(({id:e,label:t,icon:n,activeNavItemId:r,onClick:i})=>k(J,{children:A(X,{isActive:e===r,onClick:i,children:[n,t]})}));Q.displayName=`SidebarContentGroupItem`;const $=C(({id:e,label:t,children:n})=>A(W,{children:[k(G,{children:t}),k(K,{children:k(q,{children:n})})]}));$.displayName=`SidebarContentGroup`;const ee=({i18nText:e,activeNavItemId:t,sidebar:n,children:r,onChangeToEnLocale:i,onChangeToViLocale:a,onLogout:o,logoutLabel:s=`Log out`,copyright:c=`Copyright © ${new Date().getFullYear()}, Lunas.`})=>{let l=n?.groupcontent??[];return A(I,{children:[k(Z,{i18nText:e,onChangeToEnLocale:i,onChangeToViLocale:a}),A(L,{variant:`inset`,collapsible:`icon`,children:[k(U,{children:l.map(e=>k($,{id:e.id,label:e.label,children:e.items.map(e=>k(Q,{id:e.id,activeNavItemId:t,label:e.label,icon:e.icon,onClick:e.onClick},e.id))},e.id))}),k(V,{children:A(q,{children:[k(J,{children:A(X,{className:`border border-border`,onClick:o,children:[k(y,{className:`text-text-positive-weak`}),s]})}),k(J,{className:`mt-2 border-t border-t-border`,children:k(`p`,{className:`pt-2 text-center text-xs text-text-positive-subtle`,children:c})})]})})]}),k(R,{children:r})]})};export{ee as t};
2
- //# sourceMappingURL=cms-layout-Bp6rU_of.mjs.map
2
+ //# sourceMappingURL=cms-layout-BYzUepEk.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"cms-layout-Bp6rU_of.mjs","names":["open","CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}>","CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>"],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\nfunction CMSLayoutProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <section\n data-slot=\"layout-wrapper\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n className={cn('relative group/sidebar-wrapper flex h-dvh bg-sidebar', className)}\n {...props}\n >\n {children}\n </section>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n }) => {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n },\n [toggleSidebar]\n );\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n side={side}\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]',\n 'w-(--sidebar-width)',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex shadow-nav',\n 'fixed left-0 inset-y-0 p-2',\n 'top-[calc(var(--header-height)+0.5rem)] z-10',\n 'w-(--sidebar-width)',\n 'transition-all duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n className\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n {children}\n </div>\n </div>\n </aside>\n );\n }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"relative flex-1 size-full overflow-auto\">{children}</div>\n </main>\n );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n [\n 'peer/menu-button',\n 'cursor-pointer',\n 'flex w-full items-center gap-2',\n 'overflow-hidden rounded-md p-2 outline-hidden',\n 'truncate text-left font-normal',\n 'transition-[color,background-color,width,height,padding]',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6 [&>svg]:shrink-0',\n '[&>span:last-child]:truncate',\n ],\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n },\n size: {\n default: 'h-10 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nconst SidebarMenuButton = memo(\n ({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n }: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n onClick?: () => void;\n } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n props.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n },\n [props.onClick]\n );\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n onClick={handleClick}\n {...props}\n />\n );\n\n if (!tooltip) return button;\n\n if (typeof tooltip === 'string') {\n tooltip = { children: tooltip };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </Tooltip>\n );\n }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n CMSLayoutProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, MenuIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport const CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale }) => {\n const { toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n toggleSidebar();\n },\n [toggleSidebar]\n );\n\n const handleEnLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToEnLocale?.();\n },\n [onChangeToEnLocale]\n );\n\n const handleViLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToViLocale?.();\n },\n [onChangeToViLocale]\n );\n\n return (\n <header\n data-slot=\"cms-layout-header\"\n className={cn(\n 'bg-card',\n 'h-(--header-height)',\n 'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n 'flex items-center shadow-nav',\n 'transition-[height] ease-linear'\n )}\n >\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n\n <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Enterprise</span>\n <span className=\"truncate text-xs\">Established 2025</span>\n </div>\n </div>\n\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n <EarthIcon className=\"size-6!\" />\n {i18nText}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </header>\n );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader } from './components/header';\nimport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. */\n onClick?: () => void;\n};\n\ntype NavGroup = {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n /** Navigation items that belong to this group. */\n items: NavItem[];\n};\n\nexport type CMSLayoutProps = {\n /** Text label used by the header for language-toggle or i18n display. */\n i18nText?: string;\n /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: { groupcontent: NavGroup[] };\n /** Callback fired when the logout button is clicked. */\n onLogout?: () => void;\n /** Callback fired when the user switches the UI locale to English. */\n onChangeToEnLocale?: () => void;\n /** Callback fired when the user switches the UI locale to Vietnamese. */\n onChangeToViLocale?: () => void;\n /**\n * Label displayed on the logout button.\n * @default 'Log out'\n */\n logoutLabel?: string;\n /**\n * Copyright string shown at the bottom of the sidebar.\n * @default `Copyright © <current year>, Lunas.`\n */\n copyright?: string;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick }) => (\n <SidebarMenuItem>\n <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n {icon}\n {label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n <SidebarGroup>\n <SidebarGroupLabel>{label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>{children}</SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n * activeNavItemId=\"dashboard\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'main',\n * label: 'Main',\n * items: [\n * { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },\n * ],\n * },\n * ],\n * }}\n * onLogout={() => signOut()}\n * >\n * <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n i18nText,\n activeNavItemId,\n sidebar,\n children,\n onChangeToEnLocale,\n onChangeToViLocale,\n onLogout,\n logoutLabel = 'Log out',\n copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n}) => {\n const groups = sidebar?.groupcontent ?? [];\n\n return (\n <CMSLayoutProvider>\n <CMSLayoutHeader i18nText={i18nText} onChangeToEnLocale={onChangeToEnLocale} onChangeToViLocale={onChangeToViLocale} />\n <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groups.map(group => (\n <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n {group.items.map(item => (\n <SidebarContentGroupItem\n key={item.id}\n id={item.id}\n activeNavItemId={activeNavItemId}\n label={item.label}\n icon={item.icon}\n onClick={item.onClick}\n />\n ))}\n </SidebarContentGroup>\n ))}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n <LogOutIcon className=\"text-text-positive-weak\" />\n {logoutLabel}\n </SidebarMenuButton>\n </SidebarMenuItem>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </CMSLayoutSidebar>\n <CMSLayoutMain>{children}</CMSLayoutMain>\n </CMSLayoutProvider>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"cms-layout-BYzUepEk.mjs","names":["open","CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}>","CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>"],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\nfunction CMSLayoutProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <section\n data-slot=\"layout-wrapper\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n className={cn('relative group/sidebar-wrapper flex h-dvh bg-sidebar', className)}\n {...props}\n >\n {children}\n </section>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n }) => {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n },\n [toggleSidebar]\n );\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n side={side}\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-b border-border-weak p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]',\n 'w-(--sidebar-width)',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex shadow-nav',\n 'fixed left-0 inset-y-0 p-2',\n 'top-[calc(var(--header-height)+0.5rem)] z-10',\n 'w-(--sidebar-width)',\n 'transition-all duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n className\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n {children}\n </div>\n </div>\n </aside>\n );\n }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"relative flex-1 size-full overflow-auto\">{children}</div>\n </main>\n );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n [\n 'peer/menu-button',\n 'cursor-pointer',\n 'flex w-full items-center gap-2',\n 'overflow-hidden rounded-md p-2 outline-hidden',\n 'truncate text-left font-normal',\n 'transition-[color,background-color,width,height,padding]',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6 [&>svg]:shrink-0',\n '[&>span:last-child]:truncate',\n ],\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n },\n size: {\n default: 'h-10 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nconst SidebarMenuButton = memo(\n ({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n }: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n onClick?: () => void;\n } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n event => {\n props.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n },\n [props.onClick]\n );\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n onClick={handleClick}\n {...props}\n />\n );\n\n if (!tooltip) return button;\n\n if (typeof tooltip === 'string') {\n tooltip = { children: tooltip };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </Tooltip>\n );\n }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n CMSLayoutProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, MenuIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport const CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale }) => {\n const { toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n toggleSidebar();\n },\n [toggleSidebar]\n );\n\n const handleEnLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToEnLocale?.();\n },\n [onChangeToEnLocale]\n );\n\n const handleViLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToViLocale?.();\n },\n [onChangeToViLocale]\n );\n\n return (\n <header\n data-slot=\"cms-layout-header\"\n className={cn(\n 'bg-card',\n 'h-(--header-height)',\n 'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n 'flex items-center shadow-nav',\n 'transition-[height] ease-linear'\n )}\n >\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n\n <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Enterprise</span>\n <span className=\"truncate text-xs\">Established 2025</span>\n </div>\n </div>\n\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n <EarthIcon className=\"size-6!\" />\n {i18nText}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </header>\n );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader } from './components/header';\nimport {\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n CMSLayoutMain,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. */\n onClick?: () => void;\n};\n\ntype NavGroup = {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n /** Navigation items that belong to this group. */\n items: NavItem[];\n};\n\nexport type CMSLayoutProps = {\n /** Text label used by the header for language-toggle or i18n display. */\n i18nText?: string;\n /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: { groupcontent: NavGroup[] };\n /** Callback fired when the logout button is clicked. */\n onLogout?: () => void;\n /** Callback fired when the user switches the UI locale to English. */\n onChangeToEnLocale?: () => void;\n /** Callback fired when the user switches the UI locale to Vietnamese. */\n onChangeToViLocale?: () => void;\n /**\n * Label displayed on the logout button.\n * @default 'Log out'\n */\n logoutLabel?: string;\n /**\n * Copyright string shown at the bottom of the sidebar.\n * @default `Copyright © <current year>, Lunas.`\n */\n copyright?: string;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick }) => (\n <SidebarMenuItem>\n <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n {icon}\n {label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n <SidebarGroup>\n <SidebarGroupLabel>{label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>{children}</SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n * activeNavItemId=\"dashboard\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'main',\n * label: 'Main',\n * items: [\n * { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },\n * ],\n * },\n * ],\n * }}\n * onLogout={() => signOut()}\n * >\n * <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n i18nText,\n activeNavItemId,\n sidebar,\n children,\n onChangeToEnLocale,\n onChangeToViLocale,\n onLogout,\n logoutLabel = 'Log out',\n copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n}) => {\n const groups = sidebar?.groupcontent ?? [];\n\n return (\n <CMSLayoutProvider>\n <CMSLayoutHeader i18nText={i18nText} onChangeToEnLocale={onChangeToEnLocale} onChangeToViLocale={onChangeToViLocale} />\n <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groups.map(group => (\n <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n {group.items.map(item => (\n <SidebarContentGroupItem\n key={item.id}\n id={item.id}\n activeNavItemId={activeNavItemId}\n label={item.label}\n icon={item.icon}\n onClick={item.onClick}\n />\n ))}\n </SidebarContentGroup>\n ))}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n <LogOutIcon className=\"text-text-positive-weak\" />\n {logoutLabel}\n </SidebarMenuButton>\n </SidebarMenuItem>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </CMSLayoutSidebar>\n <CMSLayoutMain>{children}</CMSLayoutMain>\n </CMSLayoutProvider>\n );\n};\n"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime0 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime1 from "react/jsx-runtime";
2
2
  import * as class_variance_authority_types0 from "class-variance-authority/types";
3
3
  import * as react0 from "react";
4
4
  import { VariantProps } from "class-variance-authority";
@@ -52,7 +52,7 @@ declare const Statistic: react0.MemoExoticComponent<({
52
52
  trend,
53
53
  value,
54
54
  className
55
- }: StatisticProps) => react_jsx_runtime0.JSX.Element>;
55
+ }: StatisticProps) => react_jsx_runtime1.JSX.Element>;
56
56
  //#endregion
57
57
  export { Statistic, StatisticProps };
58
58
  //# sourceMappingURL=statistic.d.cts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime97 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime33 from "react/jsx-runtime";
2
2
  import { Dialog } from "radix-ui";
3
3
 
4
4
  //#region packages/components/ui/dialog.d.ts
@@ -33,24 +33,24 @@ import { Dialog } from "radix-ui";
33
33
  */
34
34
  declare function Dialog$1({
35
35
  ...props
36
- }: React.ComponentProps<typeof Dialog.Root>): react_jsx_runtime97.JSX.Element;
36
+ }: React.ComponentProps<typeof Dialog.Root>): react_jsx_runtime33.JSX.Element;
37
37
  /** Element that opens the dialog when clicked; typically wrapped with `asChild` around a `Button`. */
38
38
  declare function DialogTrigger({
39
39
  ...props
40
- }: React.ComponentProps<typeof Dialog.Trigger>): react_jsx_runtime97.JSX.Element;
40
+ }: React.ComponentProps<typeof Dialog.Trigger>): react_jsx_runtime33.JSX.Element;
41
41
  /** Renders dialog overlay and content into a portal outside the normal React tree. */
42
42
  declare function DialogPortal({
43
43
  ...props
44
- }: React.ComponentProps<typeof Dialog.Portal>): react_jsx_runtime97.JSX.Element;
44
+ }: React.ComponentProps<typeof Dialog.Portal>): react_jsx_runtime33.JSX.Element;
45
45
  /** Button that closes the dialog; can be composed with `asChild` to use a custom element. */
46
46
  declare function DialogClose({
47
47
  ...props
48
- }: React.ComponentProps<typeof Dialog.Close>): react_jsx_runtime97.JSX.Element;
48
+ }: React.ComponentProps<typeof Dialog.Close>): react_jsx_runtime33.JSX.Element;
49
49
  /** Semi-transparent backdrop rendered behind the dialog panel with fade-in/out animation. */
50
50
  declare function DialogOverlay({
51
51
  className,
52
52
  ...props
53
- }: React.ComponentProps<typeof Dialog.Overlay>): react_jsx_runtime97.JSX.Element;
53
+ }: React.ComponentProps<typeof Dialog.Overlay>): react_jsx_runtime33.JSX.Element;
54
54
  /**
55
55
  * Animated dialog panel centred on screen; includes `DialogOverlay` and an optional close button.
56
56
  *
@@ -64,27 +64,27 @@ declare function DialogContent({
64
64
  }: React.ComponentProps<typeof Dialog.Content> & {
65
65
  /** When `true` (default), renders an `×` close button fixed to the top-right corner of the panel. */
66
66
  showCloseButton?: boolean;
67
- }): react_jsx_runtime97.JSX.Element;
67
+ }): react_jsx_runtime33.JSX.Element;
68
68
  /** Layout wrapper for the dialog title and description, stacked vertically with left alignment on wider screens. */
69
69
  declare function DialogHeader({
70
70
  className,
71
71
  ...props
72
- }: React.ComponentProps<'div'>): react_jsx_runtime97.JSX.Element;
72
+ }: React.ComponentProps<'div'>): react_jsx_runtime33.JSX.Element;
73
73
  /** Layout wrapper for dialog action buttons, stacked on mobile and right-aligned in a row on wider screens. */
74
74
  declare function DialogFooter({
75
75
  className,
76
76
  ...props
77
- }: React.ComponentProps<'div'>): react_jsx_runtime97.JSX.Element;
77
+ }: React.ComponentProps<'div'>): react_jsx_runtime33.JSX.Element;
78
78
  /** Accessible heading for the dialog panel, styled with the h3 heading variant and announced by screen readers. */
79
79
  declare function DialogTitle({
80
80
  className,
81
81
  ...props
82
- }: React.ComponentProps<typeof Dialog.Title>): react_jsx_runtime97.JSX.Element;
82
+ }: React.ComponentProps<typeof Dialog.Title>): react_jsx_runtime33.JSX.Element;
83
83
  /** Muted supporting text that describes the dialog's purpose; read by screen readers alongside the title. */
84
84
  declare function DialogDescription({
85
85
  className,
86
86
  ...props
87
- }: React.ComponentProps<typeof Dialog.Description>): react_jsx_runtime97.JSX.Element;
87
+ }: React.ComponentProps<typeof Dialog.Description>): react_jsx_runtime33.JSX.Element;
88
88
  //#endregion
89
89
  export { DialogFooter as a, DialogPortal as c, DialogDescription as i, DialogTitle as l, DialogClose as n, DialogHeader as o, DialogContent as r, DialogOverlay as s, Dialog$1 as t, DialogTrigger as u };
90
- //# sourceMappingURL=dialog-CRVNgVZU.d.cts.map
90
+ //# sourceMappingURL=dialog-BuM8wDKV.d.cts.map