@customafk/lunas-ui 0.2.61 → 0.2.63

package/dist/{cms-layout-hLiQbkXR.cjs.map → cms-layout-SubgSF72.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cms-layout-hLiQbkXR.cjs","names":["TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","LunasLogo","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","colorHashLight","Button","MenuIcon","LunasLogo","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","UserRoundIcon","DropdownMenuContent","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","LogOutIcon","EarthIcon","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 } 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 { LunasLogo } from '@/components/features/logo';\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                <LunasLogo variant=\"horizontal\" size=\"xs\" className=\"ml-2\" />\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  } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n    const Comp = asChild ? Slot : 'button';\n    const { isMobile, state } = useSidebar();\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        {...props}\n      />\n    );\n\n    if (!tooltip) return button;\n\n    if (typeof tooltip === 'string') {\n      tooltip = { children: tooltip };\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </Tooltip>\n    );\n  }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n  return (\n    <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{ '--skeleton-width': width } as React.CSSProperties}\n      />\n    </div>\n  );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  CMSLayoutProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  // biome-ignore lint/style/useComponentExportOnlyModules: true\n  useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, LogOutIcon, MenuIcon, UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { LunasLogo } from '@/components/features/logo';\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport type CMSLayoutUser = {\n  /** Display name shown in the header and user dropdown. */\n  name: string;\n  /** Email address shown below the name in the dropdown. */\n  email?: string;\n  /** Role or position shown as a muted label in the dropdown. */\n  role?: string;\n  /** Optional avatar image URL; falls back to a color-hashed icon. */\n  avatarUrl?: string;\n};\n\nexport const CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n  user?: CMSLayoutUser;\n  onLogout?: () => void;\n  logoutLabel?: string;\n  logo?: React.ReactNode;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale, user, onLogout, logoutLabel = 'Log out', logo }) => {\n  const { toggleSidebar } = useSidebar();\n\n  const handleToggleSidebar = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      toggleSidebar();\n    },\n    [toggleSidebar]\n  );\n\n  const handleEnLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToEnLocale?.();\n    },\n    [onChangeToEnLocale]\n  );\n\n  const handleViLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToViLocale?.();\n    },\n    [onChangeToViLocale]\n  );\n\n  const avatarBg = user ? colorHashLight.hex(user.name) : undefined;\n\n  return (\n    <header\n      data-slot=\"cms-layout-header\"\n      className={cn(\n        'bg-card',\n        'h-(--header-height)',\n        'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n        'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n        'flex items-center shadow-nav',\n        'transition-[height] ease-linear'\n      )}\n    >\n      <Button\n        data-sidebar=\"trigger\"\n        data-slot=\"sidebar-trigger\"\n        variant=\"ghost\"\n        color=\"muted\"\n        size=\"icon\"\n        className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n        onClick={handleToggleSidebar}\n      >\n        <MenuIcon className=\"size-6!\" />\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n\n      <div className=\"flex flex-1 items-center sm:ml-2.5\">{logo ?? <LunasLogo variant=\"horizontal\" size=\"xs\" />}</div>\n\n      <div className=\"flex items-center gap-1\">\n        {user && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" color=\"muted\" className=\"h-9 gap-2.5 rounded-full px-2 transition-all\">\n                <Avatar className=\"size-7 shrink-0\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={14} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"hidden flex-col items-start sm:flex\">\n                  <span className=\"max-w-36 truncate text-xs font-semibold leading-tight text-text-positive\">{user.name}</span>\n                  {user.email && <span className=\"max-w-36 truncate text-xs leading-tight text-text-positive-weak\">{user.email}</span>}\n                </div>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-60\">\n              <div className=\"flex flex-col items-center gap-2 px-4 py-4 text-center\">\n                <Avatar className=\"size-12\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={22} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex min-w-0 w-full flex-col items-center gap-0.5\">\n                  <p className=\"truncate text-sm font-semibold text-text-positive\">{user.name}</p>\n                  {user.email && <p className=\"truncate text-xs text-text-positive-weak\">{user.email}</p>}\n                  {user.role && (\n                    <span className=\"mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak\">\n                      {user.role}\n                    </span>\n                  )}\n                </div>\n              </div>\n              {onLogout && (\n                <>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem className=\"text-danger focus:text-danger\" onClick={onLogout}>\n                      <LogOutIcon className=\"size-4\" />\n                      {logoutLabel}\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {user && (onChangeToEnLocale || onChangeToViLocale) && <div className=\"mx-1 h-5 w-px bg-border\" />}\n\n        {(onChangeToEnLocale || onChangeToViLocale) && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n                <EarthIcon className=\"size-6!\" />\n                {i18nText}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n                <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n  );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader, type CMSLayoutUser } from './components/header';\nimport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n  /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n  id: string;\n  /** Human-readable label rendered inside the sidebar button. */\n  label: string;\n  /** Optional icon element rendered to the left of the label. */\n  icon?: React.ReactNode;\n  /** Callback fired when the sidebar button is clicked. Use for simple programmatic navigation. */\n  onClick?: () => void;\n  /**\n   * Renders the button as a custom element using the Radix Slot (asChild) pattern.\n   * Return a single element (e.g. a TanStack Router `<Link>`) wrapping the icon + label content.\n   *\n   * @example\n   * ```tsx\n   * renderAs: ({ icon, label }) => <Link to=\"/dashboard\">{icon}{label}</Link>\n   * ```\n   */\n  renderAs?: (content: { icon?: React.ReactNode; label: string }) => React.ReactElement;\n};\n\ntype NavGroup = {\n  /** Unique identifier for the group, used as React key. */\n  id: string;\n  /** Optional section heading rendered above the group's items. */\n  label?: string;\n  /** Navigation items that belong to this group. */\n  items: NavItem[];\n};\n\nexport type { CMSLayoutUser };\n\nexport type CMSLayoutProps = {\n  /** Text label used by the header for language-toggle or i18n display. */\n  i18nText?: string;\n  /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n  activeNavItemId?: string;\n  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n  sidebar?: { groupcontent: NavGroup[] };\n  /** Callback fired when the logout button is clicked. */\n  onLogout?: () => void;\n  /** Callback fired when the user switches the UI locale to English. */\n  onChangeToEnLocale?: () => void;\n  /** Callback fired when the user switches the UI locale to Vietnamese. */\n  onChangeToViLocale?: () => void;\n  /**\n   * Label displayed on the logout button.\n   * @default 'Log out'\n   */\n  logoutLabel?: string;\n  /**\n   * Copyright string shown at the bottom of the sidebar.\n   * @default `Copyright © <current year>, Lunas.`\n   */\n  copyright?: string;\n  /** Authenticated user shown in the header avatar dropdown. Omit to hide the user menu. */\n  user?: CMSLayoutUser;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick, renderAs }) => (\n  <SidebarMenuItem>\n    {renderAs ? (\n      <SidebarMenuButton asChild isActive={id === activeNavItemId}>\n        {renderAs({ icon, label })}\n      </SidebarMenuButton>\n    ) : (\n      <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n        {icon}\n        {label}\n      </SidebarMenuButton>\n    )}\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 *           {\n *             id: 'dashboard',\n *             label: 'Dashboard',\n *             icon: <LayoutDashboardIcon />,\n *             // Option A — TanStack Router Link (asChild/Slot pattern):\n *             renderAs: ({ icon, label }) => <Link to=\"/\">{icon}{label}</Link>,\n *             // Option B — simple click handler:\n *             // onClick: () => router.navigate({ to: '/' }),\n *           },\n *         ],\n *       },\n *     ],\n *   }}\n *   onLogout={() => signOut()}\n * >\n *   <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n  i18nText,\n  activeNavItemId,\n  sidebar,\n  children,\n  onChangeToEnLocale,\n  onChangeToViLocale,\n  onLogout,\n  logoutLabel = 'Log out',\n  copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n  user,\n}) => {\n  const groups = sidebar?.groupcontent ?? [];\n\n  return (\n    <CMSLayoutProvider>\n      <CMSLayoutHeader\n        i18nText={i18nText}\n        onChangeToEnLocale={onChangeToEnLocale}\n        onChangeToViLocale={onChangeToViLocale}\n        user={user}\n        onLogout={onLogout}\n        logoutLabel={logoutLabel}\n      />\n      <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n        <SidebarContent>\n          {groups.map(group => (\n            <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n              {group.items.map(item => (\n                <SidebarContentGroupItem\n                  key={item.id}\n                  id={item.id}\n                  activeNavItemId={activeNavItemId}\n                  label={item.label}\n                  icon={item.icon}\n                  onClick={item.onClick}\n                />\n              ))}\n            </SidebarContentGroup>\n          ))}\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n                <LogOutIcon className=\"text-text-positive-weak\" />\n                {logoutLabel}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n              <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n      </CMSLayoutSidebar>\n      <CMSLayoutMain>{children}</CMSLayoutMain>\n    </CMSLayoutProvider>\n  );\n};\n"],"mappings":"8kBAoBA,MAiBM,GAAA,EAAA,EAAA,cAAA,CAA2D,IAAI,EAErE,SAAS,GAAa,CACpB,IAAM,GAAA,EAAA,EAAA,WAAA,CAAqB,CAAc,EACzC,GAAI,CAAC,EACH,MAAU,MAAM,mDAAmD,EAErE,OAAO,CACT,CAEA,SAAS,EAAkB,CACzB,cAAc,GACd,KAAM,EACN,aAAc,EACd,YACA,QACA,WACA,GAAG,GAKF,CACD,IAAM,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,CAAC,EAAO,IAAA,EAAA,EAAA,SAAA,CAAqB,CAAW,EACxC,EAAO,GAAY,EACnB,GAAA,EAAA,EAAA,YAAA,CACH,GAAmD,CAClD,IAAM,EAAY,OAAO,GAAU,WAAa,EAAM,CAAI,EAAI,EAC1D,EACF,EAAY,CAAS,EAErB,EAAS,CAAS,EAGpB,SAAS,OAAS,iBAA0B,EAAU,yBACxD,EACA,CAAC,EAAa,CAAI,CACpB,EAEM,GAAA,EAAA,EAAA,YAAA,KACG,EAAW,EAAc,GAAQ,CAAC,CAAI,EAAI,EAAQ,GAAQ,CAAC,CAAI,EACrE,CAAC,EAAU,CAAO,CAAC,GAEtB,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAiB,GAAyB,CAC1C,EAAM,MAAQ,MAA8B,EAAM,SAAW,EAAM,WACrE,EAAM,eAAe,EACrB,EAAc,EAElB,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAa,MACnC,OAAO,oBAAoB,UAAW,CAAa,CAClE,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,EAAQ,EAAO,WAAa,YAE5B,GAAA,EAAA,EAAA,QAAA,MACG,CAAE,QAAO,OAAM,UAAS,WAAU,aAAY,gBAAe,eAAc,GAClF,CAAC,EAAO,EAAM,EAAS,EAAU,EAAY,CAAa,CAC5D,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,YAC9B,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,cAAe,YAC9B,EAAA,EAAA,IAAA,CAAC,UAAD,CACE,YAAU,iBACV,MAAO,CAAE,kBAAmB,QAAe,uBAAwB,OAAoB,GAAG,CAAM,EAChG,WAAA,EAAA,EAAA,GAAA,CAAc,uDAAwD,CAAS,EAC/E,GAAI,EAEH,UACM,CAAA,CACM,CAAA,CACM,CAAA,CAE7B,CAEA,MAAM,GAAA,EAAA,EAAA,KAAA,EACH,CACC,OAAO,OACP,UAAU,UACV,cAAc,YACd,YACA,WACA,GAAG,KAKC,CACJ,GAAM,CAAE,WAAU,QAAO,aAAY,gBAAe,iBAAkB,EAAW,EAE3E,GAAA,EAAA,EAAA,YAAA,CACJ,GAAS,CACP,EAAc,EACd,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,EACA,CAAC,CAAa,CAChB,EAgDA,OA9CI,IAAgB,QAEhB,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,YAAU,UAAU,WAAA,EAAA,EAAA,GAAA,CAAc,uEAAwE,CAAS,EAAG,GAAI,EAC9H,UACI,CAAA,EAIP,GAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,EAAY,aAAc,EAAe,GAAI,YACxD,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CACE,eAAa,UACb,YAAU,UACV,cAAY,OACZ,MAAO,CAAE,kBAAmB,OAAqB,EAC3C,OACN,UAAU,qGANZ,EAQE,EAAA,EAAA,KAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,mBAAvB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAY,SAAmB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAkB,8BAA8C,CAAA,CACrD,KACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iFAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACE,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,WAAA,EAAA,EAAA,GAAA,CAAc,uBAAwB,CAAS,EAC/C,QAAS,WAPX,EASE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,SAAW,CAAA,GAC/B,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAU,gBAAoB,CAAA,CACxC,KACR,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,aAAa,KAAK,KAAK,UAAU,MAAQ,CAAA,CACzD,KACL,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,2BAA4B,UAAc,CAAA,CACtD,GACO,GACT,CAAA,GAKT,EAAA,EAAA,KAAA,CAAC,QAAD,CACE,UAAU,6DACV,aAAY,EACZ,mBAAkB,IAAU,YAAc,EAAc,GACxD,eAAc,EACd,YAAW,EACX,YAAU,mBANZ,EAQE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,WAAA,EAAA,EAAA,GAAA,CACE,iBACA,8CACA,+DACA,sBACA,kFACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,oBACV,WAAA,EAAA,EAAA,GAAA,CACE,4BACA,6BACA,+CACA,sBACA,0CACA,mFACA,CACF,EACA,GAAI,YAEJ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,eAAa,UAAU,YAAU,gBAAgB,UAAU,mCAC7D,UACE,CAAA,CACF,CAAA,CACA,GAEX,CACF,EACA,EAAiB,YAAc,mBAiD/B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAsB,CAAE,YAAW,WAAU,GAAG,MAElD,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,YAAU,gBAAgB,WAAA,EAAA,EAAA,GAAA,CAAc,uCAAwC,CAAS,EAAG,GAAI,WAAtG,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8DAAgE,CAAA,GAC/E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0CAA2C,UAAc,CAAA,CACpE,GAET,EACD,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,YAAU,gBAAgB,eAAa,QAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,uCAAwC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC5I,EACD,EAAa,YAAc,eAE3B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAsB,CAAE,YAAW,GAAG,MACnC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,eAAa,SAAS,WAAA,EAAA,EAAA,GAAA,CAAc,0BAA2B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/H,EACD,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAsB,CAAE,YAAW,GAAG,MACnC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,eAAa,SAAS,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC3H,EACD,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAyB,CAAE,YAAW,GAAG,MACtC,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,YAAU,oBAAoB,eAAa,YAAY,WAAA,EAAA,EAAA,GAAA,CAAc,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACjJ,EACD,EAAiB,YAAc,mBAE/B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAuB,CAAE,YAAW,GAAG,MAEzC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,kBACV,eAAa,UACb,WAAA,EAAA,EAAA,GAAA,CAAc,yFAA0F,CAAS,EACjH,GAAI,CACL,CAAA,CAEJ,EACD,EAAe,YAAc,iBAE7B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,eAAa,QAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACnI,EACD,EAAa,YAAc,eAE3B,MAAM,GAAA,EAAA,EAAA,KAAA,EAA0B,CAAE,YAAW,UAAU,GAAO,GAAG,MAI7D,EAAA,EAAA,IAAA,CAHW,EAAUC,EAAAA,EAAO,MAG5B,CACE,YAAU,sBACV,eAAa,cACb,WAAA,EAAA,EAAA,GAAA,CACE,iPACA,8EACA,CACF,EACA,GAAI,CACL,CAAA,CAEJ,EACD,EAAkB,YAAc,oBAsBhC,MAAM,GAAA,EAAA,EAAA,KAAA,EAA4B,CAAE,YAAW,GAAG,MACzC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,wBAAwB,eAAa,gBAAgB,WAAA,EAAA,EAAA,GAAA,CAAc,iBAAkB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpI,EACD,EAAoB,YAAc,sBAElC,MAAM,GAAA,EAAA,EAAA,KAAA,EAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,YAAU,eAAe,eAAa,OAAO,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrI,EACD,EAAY,YAAc,cAE1B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAwB,CAAE,YAAW,GAAG,MACrC,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,YAAU,oBAAoB,eAAa,YAAY,WAAA,EAAA,EAAA,GAAA,CAAc,2BAA4B,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrI,EACD,EAAgB,YAAc,kBAE9B,MAAM,GAAA,EAAA,EAAA,IAAA,CACJ,CACE,mBACA,iBACA,iCACA,gDACA,iCACA,2DACA,iEACA,mDACA,sDACA,6DACA,sFACA,mGACA,iHACA,kCACA,8BACF,EACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,kEACT,QACE,8KACJ,EACA,KAAM,CACJ,QAAS,eACT,GAAI,cACJ,GAAI,iDACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEM,GAAA,EAAA,EAAA,KAAA,EACH,CACC,UAAU,GACV,WAAW,GACX,UAAU,UACV,OAAO,UACP,UACA,YACA,GAAG,KAKkD,CACrD,IAAM,EAAO,EAAUA,EAAAA,EAAO,SACxB,CAAE,WAAU,SAAU,EAAW,EAEjC,GACJ,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,YAAU,sBACV,eAAa,cACb,YAAW,EACX,cAAa,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,EAA0B,CAAE,UAAS,MAAK,CAAC,EAAG,CAAS,EACrE,GAAI,CACL,CAAA,EASH,OANK,GAED,OAAO,GAAY,WACrB,EAAU,CAAE,SAAU,CAAQ,IAI9B,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,YAAS,CAAuB,CAAA,GAChD,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAK,QAAQ,MAAM,SAAS,OAAQ,IAAU,aAAe,EAAU,GAAI,CAAU,CAAA,CAC9F,CAAA,CAAA,GAVU,CAYvB,CACF,EACA,EAAkB,YAAc,oBCtahC,MAAa,GAQP,CAAE,WAAU,qBAAoB,qBAAoB,OAAM,WAAU,cAAc,UAAW,UAAW,CAC5G,GAAM,CAAE,iBAAkB,EAAW,EAE/B,GAAA,EAAA,EAAA,YAAA,CACH,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAc,CAChB,EACA,CAAC,CAAa,CAChB,EAEM,GAAA,EAAA,EAAA,YAAA,CACH,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,IAAqB,CACvB,EACA,CAAC,CAAkB,CACrB,EAEM,GAAA,EAAA,EAAA,YAAA,CACH,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,IAAqB,CACvB,EACA,CAAC,CAAkB,CACrB,EAEM,EAAW,EAAOC,EAAAA,eAAe,IAAI,EAAK,IAAI,EAAI,IAAA,GAExD,OACE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,YAAU,oBACV,WAAA,EAAA,EAAA,GAAA,CACE,UACA,sBACA,2DACA,kDACA,+BACA,iCACF,WATF,EAWE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACE,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,UAAU,+DACV,QAAS,WAPX,EASE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,SAAW,CAAA,GAC/B,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAU,gBAAoB,CAAA,CACxC,KAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8CAAsC,IAAQ,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,aAAa,KAAK,IAAM,CAAA,CAAO,CAAA,GAE/G,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,wDAAhD,EACE,EAAA,EAAA,KAAA,CAACK,EAAAA,OAAD,CAAQ,UAAU,2BAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,IAAK,EAAK,UAAW,IAAK,EAAK,IAAO,CAAA,GACnD,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAS,YACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,KACR,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+CAAf,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oFAA4E,EAAK,IAAW,CAAA,EAC3G,EAAK,QAAS,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2EAAmE,EAAK,KAAY,CAAA,CAChH,GACC,GACW,CAAA,GACrB,EAAA,EAAA,KAAA,CAACC,EAAAA,oBAAD,CAAqB,MAAM,MAAM,UAAU,gBAA3C,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kEAAf,EACE,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CAAQ,UAAU,mBAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,IAAK,EAAK,UAAW,IAAK,EAAK,IAAO,CAAA,GACnD,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAS,YACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,KACR,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6DAAf,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,6DAAqD,EAAK,IAAQ,CAAA,EAC9E,EAAK,QAAS,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,oDAA4C,EAAK,KAAS,CAAA,EACrF,EAAK,OACJ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iIACb,EAAK,IACF,CAAA,CAEL,GACF,IACJ,IACC,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,sBAAD,CAAwB,CAAA,GACxB,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU,gCAAgC,QAAS,WAArE,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,QAAU,CAAA,EAC/B,CACe,GACD,CAAA,CACnB,CAAA,CAAA,CAEe,GACT,CAAA,CAAA,EAGf,IAAS,GAAsB,KAAuB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yBAA2B,CAAA,GAE/F,GAAsB,KACtB,EAAA,EAAA,KAAA,CAACV,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CAAQ,YAAU,iBAAiB,QAAQ,QAAQ,MAAM,QAAQ,UAAU,wEAA3E,EACE,EAAA,EAAA,IAAA,CAACc,EAAAA,UAAD,CAAW,UAAU,SAAW,CAAA,EAC/B,CACK,GACW,CAAA,GACrB,EAAA,EAAA,IAAA,CAACL,EAAAA,oBAAD,CAAqB,MAAM,gBACzB,EAAA,EAAA,KAAA,CAACE,EAAAA,kBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,QAAS,WAAgB,cAA8B,CAAA,GACzE,EAAA,EAAA,IAAA,CAACA,EAAAA,iBAAD,CAAkB,QAAS,WAAgB,iBAAiC,CAAA,CAC3D,CAAA,CAAA,CACA,CAAA,CACT,CAAA,CAAA,CAEb,GACC,GAEZ,EC5FM,GAAA,EAAA,EAAA,KAAA,EAAwE,CAAE,KAAI,QAAO,OAAM,kBAAiB,UAAS,eACzH,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SACG,GACC,EAAA,EAAA,IAAA,CAAC,EAAD,CAAmB,QAAA,GAAQ,SAAU,IAAO,WACzC,EAAS,CAAE,OAAM,OAAM,CAAC,CACR,CAAA,GAEnB,EAAA,EAAA,KAAA,CAAC,EAAD,CAAmB,SAAU,IAAO,EAA0B,mBAA9D,CACG,EACA,CACgB,GAEN,CAAA,CAClB,EACD,EAAwB,YAAc,0BAEtC,MAAM,GAAA,EAAA,EAAA,KAAA,EAA8E,CAAE,KAAI,QAAO,eAC/F,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SAAoB,CAAyB,CAAA,GAC7C,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,UAAsB,CAAA,CACjB,CAAA,CACT,CAAA,CAAA,CACf,EACD,EAAoB,YAAc,sBAqClC,MAAa,GAAgE,CAC3E,WACA,kBACA,UACA,WACA,qBACA,qBACA,WACA,cAAc,UACd,YAAY,eAAe,IAAI,KAAK,CAAA,CAAE,YAAY,EAAE,UACpD,UACI,CACJ,IAAM,EAAS,GAAS,cAAgB,CAAC,EAEzC,OACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACY,WACU,qBACA,qBACd,OACI,WACG,aACd,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,EAAD,CAAkB,QAAQ,QAAQ,YAAY,gBAA9C,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SACG,EAAO,IAAI,IACV,EAAA,EAAA,IAAA,CAAC,EAAD,CAAoC,GAAI,EAAM,GAAI,MAAO,EAAM,eAC5D,EAAM,MAAM,IAAI,IACf,EAAA,EAAA,IAAA,CAAC,EAAD,CAEE,GAAI,EAAK,GACQ,kBACjB,MAAO,EAAK,MACZ,KAAM,EAAK,KACX,QAAS,EAAK,OACf,EANM,EAAK,EAMX,CACF,CACkB,EAXK,EAAM,EAWX,CACtB,CACa,CAAA,GAChB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAmB,UAAU,uBAAuB,QAAS,WAA7D,EACE,EAAA,EAAA,IAAA,CAACG,EAAAA,WAAD,CAAY,UAAU,yBAA2B,CAAA,EAChD,CACgB,GACJ,CAAA,GACjB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAiB,UAAU,0CACzB,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,8DAAsD,CAAa,CAAA,CACjE,CAAA,CACN,CAAA,CAAA,CACA,CAAA,CACC,KAClB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAgB,UAAwB,CAAA,CACvB,CAAA,CAAA,CAEvB"}
+{"version":3,"file":"cms-layout-SubgSF72.cjs","names":["TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","LunasLogo","Input","Separator","Slot","Tooltip","TooltipTrigger","TooltipContent","colorHashLight","Button","MenuIcon","LunasLogo","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","UserRoundIcon","DropdownMenuContent","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","LogOutIcon","EarthIcon","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 } 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 { LunasLogo } from '@/components/features/logo';\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                <LunasLogo variant=\"horizontal\" size=\"xs\" className=\"ml-2\" />\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  } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n    const Comp = asChild ? Slot : 'button';\n    const { isMobile, state } = useSidebar();\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        {...props}\n      />\n    );\n\n    if (!tooltip) return button;\n\n    if (typeof tooltip === 'string') {\n      tooltip = { children: tooltip };\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </Tooltip>\n    );\n  }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n  return (\n    <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{ '--skeleton-width': width } as React.CSSProperties}\n      />\n    </div>\n  );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  CMSLayoutProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  // biome-ignore lint/style/useComponentExportOnlyModules: true\n  useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, LogOutIcon, MenuIcon, UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { LunasLogo } from '@/components/features/logo';\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport { useSidebar } from './sidebar';\n\nexport type CMSLayoutUser = {\n  /** Display name shown in the header and user dropdown. */\n  name: string;\n  /** Email address shown below the name in the dropdown. */\n  email?: string;\n  /** Role or position shown as a muted label in the dropdown. */\n  role?: string;\n  /** Optional avatar image URL; falls back to a color-hashed icon. */\n  avatarUrl?: string;\n};\n\nexport const CMSLayoutHeader: React.FC<{\n  i18nText?: string;\n  onChangeToEnLocale?: () => void;\n  onChangeToViLocale?: () => void;\n  user?: CMSLayoutUser;\n  onLogout?: () => void;\n  logoutLabel?: string;\n  logo?: React.ReactNode;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale, user, onLogout, logoutLabel = 'Log out', logo }) => {\n  const { toggleSidebar } = useSidebar();\n\n  const handleToggleSidebar = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      toggleSidebar();\n    },\n    [toggleSidebar]\n  );\n\n  const handleEnLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToEnLocale?.();\n    },\n    [onChangeToEnLocale]\n  );\n\n  const handleViLocale = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onChangeToViLocale?.();\n    },\n    [onChangeToViLocale]\n  );\n\n  const avatarBg = user ? colorHashLight.hex(user.name) : undefined;\n\n  return (\n    <header\n      data-slot=\"cms-layout-header\"\n      className={cn(\n        'bg-card',\n        'h-(--header-height)',\n        'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n        'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-4.5',\n        'flex items-center shadow-nav',\n        'transition-[height] ease-linear'\n      )}\n    >\n      <Button\n        data-sidebar=\"trigger\"\n        data-slot=\"sidebar-trigger\"\n        variant=\"ghost\"\n        color=\"muted\"\n        size=\"icon\"\n        className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n        onClick={handleToggleSidebar}\n      >\n        <MenuIcon className=\"size-6!\" />\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n\n      <div className=\"flex flex-1 items-center sm:ml-2.5\">{logo ?? <LunasLogo variant=\"horizontal\" size=\"xs\" />}</div>\n\n      <div className=\"flex items-center gap-1\">\n        {user && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" color=\"muted\" className=\"h-9 gap-2.5 rounded-full px-2 transition-all\">\n                <Avatar className=\"size-7 shrink-0\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={14} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"hidden flex-col items-start sm:flex\">\n                  <span className=\"max-w-36 truncate text-xs font-semibold leading-tight text-text-positive\">{user.name}</span>\n                  {user.email && <span className=\"max-w-36 truncate text-xs leading-tight text-text-positive-weak\">{user.email}</span>}\n                </div>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-60\">\n              <div className=\"flex flex-col items-center gap-2 px-4 py-4 text-center\">\n                <Avatar className=\"size-12\">\n                  <AvatarImage src={user.avatarUrl} alt={user.name} />\n                  <AvatarFallback style={{ backgroundColor: avatarBg }}>\n                    <UserRoundIcon size={22} className=\"text-white\" />\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex min-w-0 w-full flex-col items-center gap-0.5\">\n                  <p className=\"truncate text-sm font-semibold text-text-positive\">{user.name}</p>\n                  {user.email && <p className=\"truncate text-xs text-text-positive-weak\">{user.email}</p>}\n                  {user.role && (\n                    <span className=\"mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak\">\n                      {user.role}\n                    </span>\n                  )}\n                </div>\n              </div>\n              {onLogout && (\n                <>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem className=\"text-danger focus:text-danger\" onClick={onLogout}>\n                      <LogOutIcon className=\"size-4\" />\n                      {logoutLabel}\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {user && (onChangeToEnLocale || onChangeToViLocale) && <div className=\"mx-1 h-5 w-px bg-border\" />}\n\n        {(onChangeToEnLocale || onChangeToViLocale) && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n                <EarthIcon className=\"size-6!\" />\n                {i18nText}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n                <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n  );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader, type CMSLayoutUser } from './components/header';\nimport {\n  CMSLayoutSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  CMSLayoutMain,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  CMSLayoutProvider,\n} from './components/sidebar';\n\ntype NavItem = {\n  /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n  id: string;\n  /** Human-readable label rendered inside the sidebar button. */\n  label: string;\n  /** Optional icon element rendered to the left of the label. */\n  icon?: React.ReactNode;\n  /** Callback fired when the sidebar button is clicked. Use for simple programmatic navigation. */\n  onClick?: () => void;\n  /**\n   * Renders the button as a custom element using the Radix Slot (asChild) pattern.\n   * Return a single element (e.g. a TanStack Router `<Link>`) wrapping the icon + label content.\n   *\n   * @example\n   * ```tsx\n   * renderAs: ({ icon, label }) => <Link to=\"/dashboard\">{icon}{label}</Link>\n   * ```\n   */\n  renderAs?: (content: { icon?: React.ReactNode; label: string }) => React.ReactElement;\n};\n\ntype NavGroup = {\n  /** Unique identifier for the group, used as React key. */\n  id: string;\n  /** Optional section heading rendered above the group's items. */\n  label?: string;\n  /** Navigation items that belong to this group. */\n  items: NavItem[];\n};\n\nexport type { CMSLayoutUser };\n\nexport type CMSLayoutProps = {\n  /** Text label used by the header for language-toggle or i18n display. */\n  i18nText?: string;\n  /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n  activeNavItemId?: string;\n  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n  sidebar?: { groupcontent: NavGroup[] };\n  /** Callback fired when the logout button is clicked. */\n  onLogout?: () => void;\n  /** Callback fired when the user switches the UI locale to English. */\n  onChangeToEnLocale?: () => void;\n  /** Callback fired when the user switches the UI locale to Vietnamese. */\n  onChangeToViLocale?: () => void;\n  /**\n   * Label displayed on the logout button.\n   * @default 'Log out'\n   */\n  logoutLabel?: string;\n  /**\n   * Copyright string shown at the bottom of the sidebar.\n   * @default `Copyright © <current year>, Lunas.`\n   */\n  copyright?: string;\n  /** Authenticated user shown in the header avatar dropdown. Omit to hide the user menu. */\n  user?: CMSLayoutUser;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick, renderAs }) => (\n  <SidebarMenuItem>\n    {renderAs ? (\n      <SidebarMenuButton asChild isActive={id === activeNavItemId}>\n        {renderAs({ icon, label })}\n      </SidebarMenuButton>\n    ) : (\n      <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n        {icon}\n        {label}\n      </SidebarMenuButton>\n    )}\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 *           {\n *             id: 'dashboard',\n *             label: 'Dashboard',\n *             icon: <LayoutDashboardIcon />,\n *             // Option A — TanStack Router Link (asChild/Slot pattern):\n *             renderAs: ({ icon, label }) => <Link to=\"/\">{icon}{label}</Link>,\n *             // Option B — simple click handler:\n *             // onClick: () => router.navigate({ to: '/' }),\n *           },\n *         ],\n *       },\n *     ],\n *   }}\n *   onLogout={() => signOut()}\n * >\n *   <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n  i18nText,\n  activeNavItemId,\n  sidebar,\n  children,\n  onChangeToEnLocale,\n  onChangeToViLocale,\n  onLogout,\n  logoutLabel = 'Log out',\n  copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n  user,\n}) => {\n  const groups = sidebar?.groupcontent ?? [];\n\n  return (\n    <CMSLayoutProvider>\n      <CMSLayoutHeader\n        i18nText={i18nText}\n        onChangeToEnLocale={onChangeToEnLocale}\n        onChangeToViLocale={onChangeToViLocale}\n        user={user}\n        onLogout={onLogout}\n        logoutLabel={logoutLabel}\n      />\n      <CMSLayoutSidebar variant=\"inset\" collapsible=\"icon\">\n        <SidebarContent>\n          {groups.map(group => (\n            <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n              {group.items.map(item => (\n                <SidebarContentGroupItem\n                  key={item.id}\n                  id={item.id}\n                  activeNavItemId={activeNavItemId}\n                  label={item.label}\n                  icon={item.icon}\n                  renderAs={item.renderAs}\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":"8kBAoBA,MAiBM,GAAA,EAAA,EAAA,cAAA,CAA2D,IAAI,EAErE,SAAS,GAAa,CACpB,IAAM,GAAA,EAAA,EAAA,WAAA,CAAqB,CAAc,EACzC,GAAI,CAAC,EACH,MAAU,MAAM,mDAAmD,EAErE,OAAO,CACT,CAEA,SAAS,EAAkB,CACzB,cAAc,GACd,KAAM,EACN,aAAc,EACd,YACA,QACA,WACA,GAAG,GAKF,CACD,IAAM,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,CAAC,EAAO,IAAA,EAAA,EAAA,SAAA,CAAqB,CAAW,EACxC,EAAO,GAAY,EACnB,GAAA,EAAA,EAAA,YAAA,CACH,GAAmD,CAClD,IAAM,EAAY,OAAO,GAAU,WAAa,EAAM,CAAI,EAAI,EAC1D,EACF,EAAY,CAAS,EAErB,EAAS,CAAS,EAGpB,SAAS,OAAS,iBAA0B,EAAU,yBACxD,EACA,CAAC,EAAa,CAAI,CACpB,EAEM,GAAA,EAAA,EAAA,YAAA,KACG,EAAW,EAAc,GAAQ,CAAC,CAAI,EAAI,EAAQ,GAAQ,CAAC,CAAI,EACrE,CAAC,EAAU,CAAO,CAAC,GAEtB,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAiB,GAAyB,CAC1C,EAAM,MAAQ,MAA8B,EAAM,SAAW,EAAM,WACrE,EAAM,eAAe,EACrB,EAAc,EAElB,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAa,MACnC,OAAO,oBAAoB,UAAW,CAAa,CAClE,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,EAAQ,EAAO,WAAa,YAE5B,GAAA,EAAA,EAAA,QAAA,MACG,CAAE,QAAO,OAAM,UAAS,WAAU,aAAY,gBAAe,eAAc,GAClF,CAAC,EAAO,EAAM,EAAS,EAAU,EAAY,CAAa,CAC5D,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,YAC9B,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,cAAe,YAC9B,EAAA,EAAA,IAAA,CAAC,UAAD,CACE,YAAU,iBACV,MAAO,CAAE,kBAAmB,QAAe,uBAAwB,OAAoB,GAAG,CAAM,EAChG,WAAA,EAAA,EAAA,GAAA,CAAc,uDAAwD,CAAS,EAC/E,GAAI,EAEH,UACM,CAAA,CACM,CAAA,CACM,CAAA,CAE7B,CAEA,MAAM,GAAA,EAAA,EAAA,KAAA,EACH,CACC,OAAO,OACP,UAAU,UACV,cAAc,YACd,YACA,WACA,GAAG,KAKC,CACJ,GAAM,CAAE,WAAU,QAAO,aAAY,gBAAe,iBAAkB,EAAW,EAE3E,GAAA,EAAA,EAAA,YAAA,CACJ,GAAS,CACP,EAAc,EACd,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,EACA,CAAC,CAAa,CAChB,EAgDA,OA9CI,IAAgB,QAEhB,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,YAAU,UAAU,WAAA,EAAA,EAAA,GAAA,CAAc,uEAAwE,CAAS,EAAG,GAAI,EAC9H,UACI,CAAA,EAIP,GAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,EAAY,aAAc,EAAe,GAAI,YACxD,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CACE,eAAa,UACb,YAAU,UACV,cAAY,OACZ,MAAO,CAAE,kBAAmB,OAAqB,EAC3C,OACN,UAAU,qGANZ,EAQE,EAAA,EAAA,KAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,mBAAvB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAY,SAAmB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAkB,8BAA8C,CAAA,CACrD,KACb,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iFAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACE,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,WAAA,EAAA,EAAA,GAAA,CAAc,uBAAwB,CAAS,EAC/C,QAAS,WAPX,EASE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,SAAW,CAAA,GAC/B,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAU,gBAAoB,CAAA,CACxC,KACR,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,aAAa,KAAK,KAAK,UAAU,MAAQ,CAAA,CACzD,KACL,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,2BAA4B,UAAc,CAAA,CACtD,GACO,GACT,CAAA,GAKT,EAAA,EAAA,KAAA,CAAC,QAAD,CACE,UAAU,6DACV,aAAY,EACZ,mBAAkB,IAAU,YAAc,EAAc,GACxD,eAAc,EACd,YAAW,EACX,YAAU,mBANZ,EAQE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,WAAA,EAAA,EAAA,GAAA,CACE,iBACA,8CACA,+DACA,sBACA,kFACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,oBACV,WAAA,EAAA,EAAA,GAAA,CACE,4BACA,6BACA,+CACA,sBACA,0CACA,mFACA,CACF,EACA,GAAI,YAEJ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,eAAa,UAAU,YAAU,gBAAgB,UAAU,mCAC7D,UACE,CAAA,CACF,CAAA,CACA,GAEX,CACF,EACA,EAAiB,YAAc,mBAiD/B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAsB,CAAE,YAAW,WAAU,GAAG,MAElD,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,YAAU,gBAAgB,WAAA,EAAA,EAAA,GAAA,CAAc,uCAAwC,CAAS,EAAG,GAAI,WAAtG,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8DAAgE,CAAA,GAC/E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0CAA2C,UAAc,CAAA,CACpE,GAET,EACD,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,YAAU,gBAAgB,eAAa,QAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,uCAAwC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC5I,EACD,EAAa,YAAc,eAE3B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAsB,CAAE,YAAW,GAAG,MACnC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,eAAa,SAAS,WAAA,EAAA,EAAA,GAAA,CAAc,0BAA2B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/H,EACD,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAsB,CAAE,YAAW,GAAG,MACnC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,eAAa,SAAS,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC3H,EACD,EAAc,YAAc,gBAE5B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAyB,CAAE,YAAW,GAAG,MACtC,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,YAAU,oBAAoB,eAAa,YAAY,WAAA,EAAA,EAAA,GAAA,CAAc,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACjJ,EACD,EAAiB,YAAc,mBAE/B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAuB,CAAE,YAAW,GAAG,MAEzC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,kBACV,eAAa,UACb,WAAA,EAAA,EAAA,GAAA,CAAc,yFAA0F,CAAS,EACjH,GAAI,CACL,CAAA,CAEJ,EACD,EAAe,YAAc,iBAE7B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAqB,CAAE,YAAW,GAAG,MAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,eAAa,QAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACnI,EACD,EAAa,YAAc,eAE3B,MAAM,GAAA,EAAA,EAAA,KAAA,EAA0B,CAAE,YAAW,UAAU,GAAO,GAAG,MAI7D,EAAA,EAAA,IAAA,CAHW,EAAUC,EAAAA,EAAO,MAG5B,CACE,YAAU,sBACV,eAAa,cACb,WAAA,EAAA,EAAA,GAAA,CACE,iPACA,8EACA,CACF,EACA,GAAI,CACL,CAAA,CAEJ,EACD,EAAkB,YAAc,oBAsBhC,MAAM,GAAA,EAAA,EAAA,KAAA,EAA4B,CAAE,YAAW,GAAG,MACzC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,wBAAwB,eAAa,gBAAgB,WAAA,EAAA,EAAA,GAAA,CAAc,iBAAkB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpI,EACD,EAAoB,YAAc,sBAElC,MAAM,GAAA,EAAA,EAAA,KAAA,EAAoB,CAAE,YAAW,GAAG,MACjC,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,YAAU,eAAe,eAAa,OAAO,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrI,EACD,EAAY,YAAc,cAE1B,MAAM,GAAA,EAAA,EAAA,KAAA,EAAwB,CAAE,YAAW,GAAG,MACrC,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,YAAU,oBAAoB,eAAa,YAAY,WAAA,EAAA,EAAA,GAAA,CAAc,2BAA4B,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrI,EACD,EAAgB,YAAc,kBAE9B,MAAM,GAAA,EAAA,EAAA,IAAA,CACJ,CACE,mBACA,iBACA,iCACA,gDACA,iCACA,2DACA,iEACA,mDACA,sDACA,6DACA,sFACA,mGACA,iHACA,kCACA,8BACF,EACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,kEACT,QACE,8KACJ,EACA,KAAM,CACJ,QAAS,eACT,GAAI,cACJ,GAAI,iDACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEM,GAAA,EAAA,EAAA,KAAA,EACH,CACC,UAAU,GACV,WAAW,GACX,UAAU,UACV,OAAO,UACP,UACA,YACA,GAAG,KAKkD,CACrD,IAAM,EAAO,EAAUA,EAAAA,EAAO,SACxB,CAAE,WAAU,SAAU,EAAW,EAEjC,GACJ,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,YAAU,sBACV,eAAa,cACb,YAAW,EACX,cAAa,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,EAA0B,CAAE,UAAS,MAAK,CAAC,EAAG,CAAS,EACrE,GAAI,CACL,CAAA,EASH,OANK,GAED,OAAO,GAAY,WACrB,EAAU,CAAE,SAAU,CAAQ,IAI9B,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,YAAS,CAAuB,CAAA,GAChD,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAK,QAAQ,MAAM,SAAS,OAAQ,IAAU,aAAe,EAAU,GAAI,CAAU,CAAA,CAC9F,CAAA,CAAA,GAVU,CAYvB,CACF,EACA,EAAkB,YAAc,oBCtahC,MAAa,GAQP,CAAE,WAAU,qBAAoB,qBAAoB,OAAM,WAAU,cAAc,UAAW,UAAW,CAC5G,GAAM,CAAE,iBAAkB,EAAW,EAE/B,GAAA,EAAA,EAAA,YAAA,CACH,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAc,CAChB,EACA,CAAC,CAAa,CAChB,EAEM,GAAA,EAAA,EAAA,YAAA,CACH,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,IAAqB,CACvB,EACA,CAAC,CAAkB,CACrB,EAEM,GAAA,EAAA,EAAA,YAAA,CACH,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,IAAqB,CACvB,EACA,CAAC,CAAkB,CACrB,EAEM,EAAW,EAAOC,EAAAA,eAAe,IAAI,EAAK,IAAI,EAAI,IAAA,GAExD,OACE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,YAAU,oBACV,WAAA,EAAA,EAAA,GAAA,CACE,UACA,sBACA,2DACA,kDACA,+BACA,iCACF,WATF,EAWE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CACE,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,UAAU,+DACV,QAAS,WAPX,EASE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,SAAW,CAAA,GAC/B,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAU,gBAAoB,CAAA,CACxC,KAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8CAAsC,IAAQ,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,aAAa,KAAK,IAAM,CAAA,CAAO,CAAA,GAE/G,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,wDAAhD,EACE,EAAA,EAAA,KAAA,CAACK,EAAAA,OAAD,CAAQ,UAAU,2BAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,IAAK,EAAK,UAAW,IAAK,EAAK,IAAO,CAAA,GACnD,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAS,YACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,KACR,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+CAAf,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oFAA4E,EAAK,IAAW,CAAA,EAC3G,EAAK,QAAS,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2EAAmE,EAAK,KAAY,CAAA,CAChH,GACC,GACW,CAAA,GACrB,EAAA,EAAA,KAAA,CAACC,EAAAA,oBAAD,CAAqB,MAAM,MAAM,UAAU,gBAA3C,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kEAAf,EACE,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CAAQ,UAAU,mBAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,IAAK,EAAK,UAAW,IAAK,EAAK,IAAO,CAAA,GACnD,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAS,YACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,KACR,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6DAAf,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,6DAAqD,EAAK,IAAQ,CAAA,EAC9E,EAAK,QAAS,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,oDAA4C,EAAK,KAAS,CAAA,EACrF,EAAK,OACJ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iIACb,EAAK,IACF,CAAA,CAEL,GACF,IACJ,IACC,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACE,EAAAA,sBAAD,CAAwB,CAAA,GACxB,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU,gCAAgC,QAAS,WAArE,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,QAAU,CAAA,EAC/B,CACe,GACD,CAAA,CACnB,CAAA,CAAA,CAEe,GACT,CAAA,CAAA,EAGf,IAAS,GAAsB,KAAuB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yBAA2B,CAAA,GAE/F,GAAsB,KACtB,EAAA,EAAA,KAAA,CAACV,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CAAQ,YAAU,iBAAiB,QAAQ,QAAQ,MAAM,QAAQ,UAAU,wEAA3E,EACE,EAAA,EAAA,IAAA,CAACc,EAAAA,UAAD,CAAW,UAAU,SAAW,CAAA,EAC/B,CACK,GACW,CAAA,GACrB,EAAA,EAAA,IAAA,CAACL,EAAAA,oBAAD,CAAqB,MAAM,gBACzB,EAAA,EAAA,KAAA,CAACE,EAAAA,kBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,QAAS,WAAgB,cAA8B,CAAA,GACzE,EAAA,EAAA,IAAA,CAACA,EAAAA,iBAAD,CAAkB,QAAS,WAAgB,iBAAiC,CAAA,CAC3D,CAAA,CAAA,CACA,CAAA,CACT,CAAA,CAAA,CAEb,GACC,GAEZ,EC5FM,GAAA,EAAA,EAAA,KAAA,EAAwE,CAAE,KAAI,QAAO,OAAM,kBAAiB,UAAS,eACzH,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SACG,GACC,EAAA,EAAA,IAAA,CAAC,EAAD,CAAmB,QAAA,GAAQ,SAAU,IAAO,WACzC,EAAS,CAAE,OAAM,OAAM,CAAC,CACR,CAAA,GAEnB,EAAA,EAAA,KAAA,CAAC,EAAD,CAAmB,SAAU,IAAO,EAA0B,mBAA9D,CACG,EACA,CACgB,GAEN,CAAA,CAClB,EACD,EAAwB,YAAc,0BAEtC,MAAM,GAAA,EAAA,EAAA,KAAA,EAA8E,CAAE,KAAI,QAAO,eAC/F,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SAAoB,CAAyB,CAAA,GAC7C,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAc,UAAsB,CAAA,CACjB,CAAA,CACT,CAAA,CAAA,CACf,EACD,EAAoB,YAAc,sBAqClC,MAAa,GAAgE,CAC3E,WACA,kBACA,UACA,WACA,qBACA,qBACA,WACA,cAAc,UACd,YAAY,eAAe,IAAI,KAAK,CAAA,CAAE,YAAY,EAAE,UACpD,UACI,CACJ,IAAM,EAAS,GAAS,cAAgB,CAAC,EAEzC,OACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACY,WACU,qBACA,qBACd,OACI,WACG,aACd,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,EAAD,CAAkB,QAAQ,QAAQ,YAAY,gBAA9C,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SACG,EAAO,IAAI,IACV,EAAA,EAAA,IAAA,CAAC,EAAD,CAAoC,GAAI,EAAM,GAAI,MAAO,EAAM,eAC5D,EAAM,MAAM,IAAI,IACf,EAAA,EAAA,IAAA,CAAC,EAAD,CAEE,GAAI,EAAK,GACQ,kBACjB,MAAO,EAAK,MACZ,KAAM,EAAK,KACX,SAAU,EAAK,SACf,QAAS,EAAK,OACf,EAPM,EAAK,EAOX,CACF,CACkB,EAZK,EAAM,EAYX,CACtB,CACa,CAAA,GAChB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,EAAD,CAAmB,UAAU,uBAAuB,QAAS,WAA7D,EACE,EAAA,EAAA,IAAA,CAACG,EAAAA,WAAD,CAAY,UAAU,yBAA2B,CAAA,EAChD,CACgB,GACJ,CAAA,GACjB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAiB,UAAU,0CACzB,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,8DAAsD,CAAa,CAAA,CACjE,CAAA,CACN,CAAA,CAAA,CACA,CAAA,CACC,KAClB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAgB,UAAwB,CAAA,CACvB,CAAA,CAAA,CAEvB"}

package/dist/features/charts/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../ui/chart.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime"),i=require("recharts");const a=e=>`var(--chart-${(e%8+8)%8+1})`,o=(e,t=`en-US`)=>new Intl.NumberFormat(t,{notation:`compact`,maximumFractionDigits:1}).format(e),s=(e,t=`USD`,n=`en-US`)=>new Intl.NumberFormat(n,{style:`currency`,currency:t,notation:Math.abs(e)>=1e4?`compact`:`standard`,maximumFractionDigits:+(Math.abs(e)>=1e4)}).format(e),c=(e,t=`en-US`)=>new Intl.NumberFormat(t,{style:`percent`,maximumFractionDigits:1}).format(e),l=(e,t=`en-US`)=>{let n=e instanceof Date?e:new Date(e);return Number.isNaN(n.getTime())?String(e):n.toLocaleDateString(t,{month:`short`,day:`numeric`})},u=({data:s,showConversionRates:l=!0,valueFormatter:u=o,className:d,animate:f=!0,height:p})=>{let{chartData:m,config:h}=(0,t.useMemo)(()=>{let e=s[0]?.value??0,t=s.map((t,n)=>{let r=e===0?0:t.value/e,i=l?`${u(t.value)} (${c(r)})`:u(t.value);return{...t,key:t.key||t.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),fill:t.color||a(n),valueLabel:i}});return{chartData:t,config:Object.fromEntries(t.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[s,l,u]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`conversion-funnel-chart`,config:h,className:(0,n.cn)(`w-full`,d),style:p===void 0?void 0:{height:p,aspectRatio:`auto`},children:(0,r.jsxs)(i.FunnelChart,{margin:{top:8,right:120,bottom:8,left:120},children:[(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{nameKey:`key`,hideLabel:!0})}),(0,r.jsxs)(i.Funnel,{dataKey:`value`,data:m,isAnimationActive:f,children:[(0,r.jsx)(i.LabelList,{dataKey:`name`,position:`left`,offset:12,className:`fill-muted-strong`,fontSize:12}),(0,r.jsx)(i.LabelList,{dataKey:`valueLabel`,position:`right`,offset:12,className:`fill-text-positive-strong font-number`,fontSize:12})]})]})})},d=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),f=({data:s,centerLabel:c,centerValueFormatter:l=o,totalValue:u,showLegend:f=!0,showCenterTotal:p=!0,className:m,animate:h=!0,height:g})=>{let{chartData:_,config:v,total:y}=(0,t.useMemo)(()=>{let e=s.map((e,t)=>({...e,key:d(e),fill:e.color||a(t)}));return{chartData:e,config:Object.fromEntries(e.map(e=>[e.key,{label:e.name,color:e.fill}])),total:u??s.reduce((e,t)=>e+t.value,0)}},[s,u]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`donut-chart`,config:v,className:(0,n.cn)(`mx-auto`,g===void 0&&`aspect-square`,m),style:g===void 0?void 0:{height:g,aspectRatio:`auto`},children:(0,r.jsxs)(i.PieChart,{children:[(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{nameKey:`key`,hideLabel:!0})}),(0,r.jsx)(i.Pie,{data:_,dataKey:`value`,nameKey:`key`,innerRadius:`60%`,strokeWidth:5,isAnimationActive:h,children:p&&(0,r.jsx)(i.Label,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:(0,r.jsxs)(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[(0,r.jsx)(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-2xl font-bold`,children:l(y)}),c&&(0,r.jsx)(`tspan`,{x:e.cx,y:(e.cy||0)+22,className:`fill-muted text-xs`,children:c})]})})}),f&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{nameKey:`key`})})]})})},p=({data:o,dataKey:s=`orders`,label:c=`Orders`,statuses:u,color:d=`var(--chart-1)`,valueFormatter:f=e=>e.toLocaleString(`en-US`),dateFormatter:p=l,showLegend:m=!!u,showGrid:h=!0,className:g,animate:_=!0,height:v})=>(0,r.jsx)(e.ChartContainer,{"data-slot":`orders-bar-chart`,config:(0,t.useMemo)(()=>u?Object.fromEntries(u.map((e,t)=>[e.key,{label:e.label,color:e.color||a(t)}])):{[s]:{label:c,color:d}},[u,s,c,d]),className:(0,n.cn)(`w-full`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[h&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:p}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:f}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?p(n):null}})}),u?u.map((e,t)=>(0,r.jsx)(i.Bar,{dataKey:e.key,stackId:`orders`,fill:e.color||a(t),radius:t===u.length-1?[4,4,0,0]:[0,0,0,0],isAnimationActive:_},e.key)):(0,r.jsx)(i.Bar,{dataKey:s,fill:d,radius:[4,4,0,0],isAnimationActive:_}),m&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})}),m=({data:a,label:o=`Revenue`,comparisonLabel:c=`Previous period`,showComparison:u=!1,color:d=`var(--chart-1)`,comparisonColor:f=`var(--chart-8)`,valueFormatter:p=e=>s(e),dateFormatter:m=l,showLegend:h=u,showGrid:g=!0,className:_,animate:v=!0,height:y})=>{let b=(0,t.useId)(),x=(0,t.useMemo)(()=>({value:{label:o,color:d},...u?{previousValue:{label:c,color:f}}:{}}),[o,d,u,c,f]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`revenue-area-chart`,config:x,className:(0,n.cn)(`w-full`,_),style:y===void 0?void 0:{height:y,aspectRatio:`auto`},children:(0,r.jsxs)(i.AreaChart,{data:a,margin:{top:8,right:12,bottom:0,left:12},children:[(0,r.jsxs)(`defs`,{children:[(0,r.jsxs)(`linearGradient`,{id:`${b}-value`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:d,stopOpacity:.6}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:d,stopOpacity:.05})]}),(0,r.jsxs)(`linearGradient`,{id:`${b}-previous`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:f,stopOpacity:.3}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:f,stopOpacity:.02})]})]}),g&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:m}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:p}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?m(n):null},formatter:(e,t,n)=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:x[String(t)]?.label||t}),(0,r.jsx)(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:p(Number(e))})]})})}),u&&(0,r.jsx)(i.Area,{type:`natural`,dataKey:`previousValue`,stroke:f,strokeWidth:2,strokeDasharray:`4 4`,fill:`url(#${b}-previous)`,isAnimationActive:v}),(0,r.jsx)(i.Area,{type:`natural`,dataKey:`value`,stroke:d,strokeWidth:2,fill:`url(#${b}-value)`,isAnimationActive:v}),h&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})},h=({data:a,revenueLabel:o=`Revenue`,ordersLabel:c=`Orders`,revenueColor:u=`var(--chart-1)`,ordersColor:d=`var(--chart-4)`,revenueFormatter:f=e=>s(e),ordersFormatter:p=e=>e.toLocaleString(`en-US`),dateFormatter:m=l,showLegend:h=!0,showGrid:g=!0,className:_,animate:v=!0,height:y})=>{let b=(0,t.useMemo)(()=>({revenue:{label:o,color:u},orders:{label:c,color:d}}),[o,u,c,d]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`revenue-orders-composed-chart`,config:b,className:(0,n.cn)(`w-full`,_),style:y===void 0?void 0:{height:y,aspectRatio:`auto`},children:(0,r.jsxs)(i.ComposedChart,{data:a,margin:{top:8,right:12,bottom:0,left:12},children:[g&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:m}),(0,r.jsx)(i.YAxis,{yAxisId:`revenue`,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:f}),(0,r.jsx)(i.YAxis,{yAxisId:`orders`,orientation:`right`,tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:p}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?m(n):null},formatter:(e,t,n)=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:b[String(t)]?.label||t}),(0,r.jsx)(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:t===`revenue`?f(Number(e)):p(Number(e))})]})})}),(0,r.jsx)(i.Bar,{dataKey:`revenue`,yAxisId:`revenue`,fill:u,radius:[4,4,0,0],isAnimationActive:v}),(0,r.jsx)(i.Line,{type:`natural`,dataKey:`orders`,yAxisId:`orders`,stroke:d,strokeWidth:2,dot:!1,isAnimationActive:v}),h&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})},g=({value:a,target:o,label:s=`Target`,valueFormatter:l=(e,t)=>c(t===0?0:e/t),color:u=`var(--chart-1)`,className:d,animate:f=!0,height:p})=>{let m=(0,t.useMemo)(()=>[{name:`progress`,value:Math.min(Math.max(a,0),o),fill:u}],[a,o,u]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`sales-target-radial-chart`,config:(0,t.useMemo)(()=>({progress:{label:s,color:u}}),[s,u]),className:(0,n.cn)(`mx-auto`,p===void 0&&`aspect-square`,d),style:p===void 0?void 0:{height:p,aspectRatio:`auto`},children:(0,r.jsxs)(i.RadialBarChart,{data:m,startAngle:90,endAngle:-270,innerRadius:`75%`,outerRadius:`100%`,children:[(0,r.jsx)(i.PolarAngleAxis,{type:`number`,domain:[0,o],angleAxisId:0,tick:!1}),(0,r.jsx)(i.RadialBar,{dataKey:`value`,angleAxisId:0,background:!0,cornerRadius:10,isAnimationActive:f}),(0,r.jsx)(i.PolarRadiusAxis,{tick:!1,tickLine:!1,axisLine:!1,children:(0,r.jsx)(i.Label,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:(0,r.jsxs)(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[(0,r.jsx)(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-3xl font-bold`,children:l(a,o)}),(0,r.jsx)(`tspan`,{x:e.cx,y:(e.cy||0)+24,className:`fill-muted text-xs`,children:s})]})})})]})})},_={up:`var(--success)`,down:`var(--danger)`,neutral:`var(--chart-1)`},v=({data:e,type:a=`area`,trend:o=`neutral`,color:s,height:c=40,animate:l=!0,className:u})=>{let d=(0,t.useId)(),f=s||_[o],p=(0,t.useMemo)(()=>e.map(e=>typeof e==`number`?{value:e}:e),[e]),m={top:2,right:0,bottom:2,left:0};return(0,r.jsx)(`div`,{"data-slot":`sparkline-chart`,className:(0,n.cn)(`w-full`,u),style:{height:c},children:(0,r.jsx)(i.ResponsiveContainer,{children:a===`line`?(0,r.jsx)(i.LineChart,{data:p,margin:m,children:(0,r.jsx)(i.Line,{type:`natural`,dataKey:`value`,stroke:f,strokeWidth:2,dot:!1,isAnimationActive:l})}):(0,r.jsxs)(i.AreaChart,{data:p,margin:m,children:[(0,r.jsx)(`defs`,{children:(0,r.jsxs)(`linearGradient`,{id:d,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:f,stopOpacity:.4}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:f,stopOpacity:.05})]})}),(0,r.jsx)(i.Area,{type:`natural`,dataKey:`value`,stroke:f,strokeWidth:2,fill:`url(#${d})`,isAnimationActive:l})]})})})},y=({data:a,label:s=`Sales`,maxItems:c=8,color:l=`var(--chart-1)`,valueFormatter:u=o,showValueLabels:d=!0,className:f,animate:p=!0,height:m})=>{let h=(0,t.useMemo)(()=>[...a].sort((e,t)=>t.value-e.value).slice(0,c),[a,c]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`top-products-bar-chart`,config:(0,t.useMemo)(()=>({value:{label:s,color:l}}),[s,l]),className:(0,n.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:h,layout:`vertical`,margin:{top:0,right:d?48:12,bottom:0,left:12},children:[(0,r.jsx)(i.XAxis,{type:`number`,dataKey:`value`,hide:!0}),(0,r.jsx)(i.YAxis,{type:`category`,dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8,width:120}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideLabel:!0})}),(0,r.jsx)(i.Bar,{dataKey:`value`,fill:l,radius:4,isAnimationActive:p,children:d&&(0,r.jsx)(i.LabelList,{dataKey:`value`,position:`right`,offset:8,className:`fill-muted-strong`,fontSize:12,formatter:e=>u(Number(e))})})]})})};exports.ConversionFunnelChart=u,exports.DonutChart=f,exports.OrdersBarChart=p,exports.RevenueAreaChart=m,exports.RevenueOrdersComposedChart=h,exports.SalesTargetRadialChart=g,exports.SparklineChart=v,exports.TopProductsBarChart=y,exports.formatCompactNumber=o,exports.formatCurrency=s,exports.formatPercent=c,exports.getChartColor=a,exports.toDateLabel=l;
+//# sourceMappingURL=index.cjs.map

package/dist/features/charts/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["ChartContainer","FunnelChart","ChartTooltip","ChartTooltipContent","Funnel","LabelList","ChartContainer","PieChart","ChartTooltip","ChartTooltipContent","Pie","Label","ChartLegend","ChartLegendContent","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","ChartLegend","ChartLegendContent","ChartContainer","AreaChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","ChartLegend","ChartLegendContent","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","Line","ChartLegend","ChartLegendContent","ChartContainer","RadialBarChart","PolarAngleAxis","RadialBar","PolarRadiusAxis","Label","ResponsiveContainer","LineChart","Line","AreaChart","Area","ChartContainer","BarChart","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","LabelList"],"sources":["../../../packages/components/features/charts/utils.ts","../../../packages/components/features/charts/components/conversion-funnel-chart.tsx","../../../packages/components/features/charts/components/donut-chart.tsx","../../../packages/components/features/charts/components/orders-bar-chart.tsx","../../../packages/components/features/charts/components/revenue-area-chart.tsx","../../../packages/components/features/charts/components/revenue-orders-composed-chart.tsx","../../../packages/components/features/charts/components/sales-target-radial-chart.tsx","../../../packages/components/features/charts/components/sparkline-chart.tsx","../../../packages/components/features/charts/components/top-products-bar-chart.tsx"],"sourcesContent":["const CHART_COLOR_COUNT = 8;\n\n/** Cycles through the eight `--chart-N` theme palette variables. */\nexport const getChartColor = (index: number): string => `var(--chart-${(((index % CHART_COLOR_COUNT) + CHART_COLOR_COUNT) % CHART_COLOR_COUNT) + 1})`;\n\nexport const formatCompactNumber = (value: number, locale = 'en-US'): string =>\n  new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(value);\n\nexport const formatCurrency = (value: number, currency = 'USD', locale = 'en-US'): string =>\n  new Intl.NumberFormat(locale, {\n    style: 'currency',\n    currency,\n    notation: Math.abs(value) >= 10_000 ? 'compact' : 'standard',\n    maximumFractionDigits: Math.abs(value) >= 10_000 ? 1 : 0,\n  }).format(value);\n\nexport const formatPercent = (value: number, locale = 'en-US'): string =>\n  new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }).format(value);\n\nexport const toDateLabel = (date: string | Date, locale = 'en-US'): string => {\n  const parsed = date instanceof Date ? date : new Date(date);\n  if (Number.isNaN(parsed.getTime())) return String(date);\n  return parsed.toLocaleDateString(locale, { month: 'short', day: 'numeric' });\n};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n  data: DonutChartSegment[];\n  /** Text under the center total, e.g. `'Total sales'`. */\n  centerLabel?: string;\n  /** Formats the center total. Defaults to compact notation. */\n  centerValueFormatter?: (total: number) => string;\n  /** Overrides the computed segment sum shown in the center. */\n  totalValue?: number;\n  showLegend?: boolean;\n  showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key || segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/**\n * A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n *\n * @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n *\n * <DonutChart\n *   data={[\n *     { name: 'Fashion', value: 12400 },\n *     { name: 'Electronics', value: 8200 },\n *   ]}\n *   centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n  data,\n  centerLabel,\n  centerValueFormatter = formatCompactNumber,\n  totalValue,\n  showLegend = true,\n  showCenterTotal = true,\n  className,\n  animate = true,\n  height,\n}: DonutChartProps) => {\n  const { chartData, config, total } = useMemo(() => {\n    const entries = data.map((segment, index) => ({\n      ...segment,\n      key: toKey(segment),\n      fill: segment.color || getChartColor(index),\n    }));\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return {\n      chartData: entries,\n      config: chartConfig,\n      total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n    };\n  }, [data, totalValue]);\n\n  return (\n    <ChartContainer\n      data-slot=\"donut-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <PieChart>\n        <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n          {showCenterTotal && (\n            <Label\n              content={({ viewBox }) => {\n                if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n                return (\n                  <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                    <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n                      {centerValueFormatter(total)}\n                    </tspan>\n                    {centerLabel && (\n                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 22} className=\"fill-muted text-xs\">\n                        {centerLabel}\n                      </tspan>\n                    )}\n                  </text>\n                );\n              }}\n            />\n          )}\n        </Pie>\n        {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n      </PieChart>\n    </ChartContainer>\n  );\n};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n","'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n","'use client';\n\nimport { useId, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Area, AreaChart, Line, LineChart, ResponsiveContainer } from 'recharts';\nimport type { ChartTrend } from '../types';\n\nconst TREND_COLORS: Record<ChartTrend, string> = {\n  up: 'var(--success)',\n  down: 'var(--danger)',\n  neutral: 'var(--chart-1)',\n};\n\nexport type SparklineChartProps = {\n  data: number[] | Array<{ value: number }>;\n  /** Render style. Defaults to `'area'`. */\n  type?: 'line' | 'area';\n  /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */\n  trend?: ChartTrend;\n  /** Explicit series color; overrides `trend`. */\n  color?: string;\n  /** Fixed height in px. Defaults to `40`. */\n  height?: number;\n  animate?: boolean;\n  className?: string;\n};\n\n/**\n * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.\n *\n * @example\n * ```tsx\n * import { SparklineChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend=\"up\" />\n * ```\n */\nexport const SparklineChart = ({ data, type = 'area', trend = 'neutral', color, height = 40, animate = true, className }: SparklineChartProps) => {\n  const gradientId = useId();\n  const seriesColor = color || TREND_COLORS[trend];\n\n  const chartData = useMemo(() => data.map(point => (typeof point === 'number' ? { value: point } : point)), [data]);\n\n  const margin = { top: 2, right: 0, bottom: 2, left: 0 };\n\n  return (\n    <div data-slot=\"sparkline-chart\" className={cn('w-full', className)} style={{ height }}>\n      <ResponsiveContainer>\n        {type === 'line' ? (\n          <LineChart data={chartData} margin={margin}>\n            <Line type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n          </LineChart>\n        ) : (\n          <AreaChart data={chartData} margin={margin}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"5%\" stopColor={seriesColor} stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor={seriesColor} stopOpacity={0.05} />\n              </linearGradient>\n            </defs>\n            <Area type=\"natural\" dataKey=\"value\" stroke={seriesColor} strokeWidth={2} fill={`url(#${gradientId})`} isAnimationActive={animate} />\n          </AreaChart>\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber } from '../utils';\n\nexport type TopProductsBarChartProps = BaseChartProps & {\n  data: NamedValue[];\n  /** Series label. Defaults to `'Sales'`. */\n  label?: string;\n  /** Number of items shown after sorting descending. Defaults to `8`. */\n  maxItems?: number;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  /** Value labels at the end of each bar. Defaults to `true`. */\n  showValueLabels?: boolean;\n};\n\n/**\n * A horizontal bar ranking chart — top products, best categories, top customers.\n *\n * @example\n * ```tsx\n * import { TopProductsBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <TopProductsBarChart\n *   data={[\n *     { name: 'Wireless Earbuds', value: 1245 },\n *     { name: 'Smart Watch', value: 986 },\n *   ]}\n * />\n * ```\n */\nexport const TopProductsBarChart = ({\n  data,\n  label = 'Sales',\n  maxItems = 8,\n  color = 'var(--chart-1)',\n  valueFormatter = formatCompactNumber,\n  showValueLabels = true,\n  className,\n  animate = true,\n  height,\n}: TopProductsBarChartProps) => {\n  const chartData = useMemo(() => [...data].sort((a, b) => b.value - a.value).slice(0, maxItems), [data, maxItems]);\n\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"top-products-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={chartData} layout=\"vertical\" margin={{ top: 0, right: showValueLabels ? 48 : 12, bottom: 0, left: 12 }}>\n        <XAxis type=\"number\" dataKey=\"value\" hide />\n        <YAxis type=\"category\" dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} width={120} />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n        <Bar dataKey=\"value\" fill={color} radius={4} isAnimationActive={animate}>\n          {showValueLabels && (\n            <LabelList\n              dataKey=\"value\"\n              position=\"right\"\n              offset={8}\n              className=\"fill-muted-strong\"\n              fontSize={12}\n              formatter={(value: React.ReactNode) => valueFormatter(Number(value))}\n            />\n          )}\n        </Bar>\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}