@customafk/lunas-ui 0.2.74 → 0.2.76

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

@@ -0,0 +1 @@
+{"version":3,"file":"cms-layout-Cr0FjyGt.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-(--header-height)',\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-(--header-height) 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-var(--header-height)\" />\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-(--header-height) 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":"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"}

package/dist/cms-layout-pnkDb9PY.mjs

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

package/dist/cms-layout-pnkDb9PY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cms-layout-pnkDb9PY.mjs","names":[],"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-(--header-height)',\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-(--header-height) 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-var(--header-height)\" />\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-(--header-height) 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":"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"}

package/dist/{collapsible-liIHmFuw.d.cts → collapsible-D3MS6pMC.d.cts}

@@ -1,5 +1,4 @@
 import { Collapsible } from "radix-ui";
-
 //#region packages/components/ui/collapsible.d.ts
 /**
  * Root provider for a Collapsible section — toggles the visibility of its content.
@@ -16,17 +15,11 @@ import { Collapsible } from "radix-ui";
  * </Collapsible>
  * ```
  */
-declare function Collapsible$1({
-  ...props
-}: React.ComponentProps<typeof Collapsible.Root>): import("react").JSX.Element;
+declare function Collapsible$1({ ...props }: React.ComponentProps<typeof Collapsible.Root>): import("react").JSX.Element;
 /** Button or element that expands or collapses the CollapsibleContent. */
-declare function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof Collapsible.CollapsibleTrigger>): import("react").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger>): import("react").JSX.Element;
 /** The section that is shown or hidden based on the Collapsible open state. */
-declare function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof Collapsible.CollapsibleContent>): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible.CollapsibleContent>): import("react").JSX.Element;
 //#endregion
 export { CollapsibleContent as n, CollapsibleTrigger as r, Collapsible$1 as t };
-//# sourceMappingURL=collapsible-liIHmFuw.d.cts.map
+//# sourceMappingURL=collapsible-D3MS6pMC.d.cts.map

package/dist/{collapsible-liIHmFuw.d.mts → collapsible-D3MS6pMC.d.mts}

@@ -1,5 +1,4 @@
 import { Collapsible } from "radix-ui";
-
 //#region packages/components/ui/collapsible.d.ts
 /**
  * Root provider for a Collapsible section — toggles the visibility of its content.
@@ -16,17 +15,11 @@ import { Collapsible } from "radix-ui";
  * </Collapsible>
  * ```
  */
-declare function Collapsible$1({
-  ...props
-}: React.ComponentProps<typeof Collapsible.Root>): import("react").JSX.Element;
+declare function Collapsible$1({ ...props }: React.ComponentProps<typeof Collapsible.Root>): import("react").JSX.Element;
 /** Button or element that expands or collapses the CollapsibleContent. */
-declare function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof Collapsible.CollapsibleTrigger>): import("react").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger>): import("react").JSX.Element;
 /** The section that is shown or hidden based on the Collapsible open state. */
-declare function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof Collapsible.CollapsibleContent>): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible.CollapsibleContent>): import("react").JSX.Element;
 //#endregion
 export { CollapsibleContent as n, CollapsibleTrigger as r, Collapsible$1 as t };
-//# sourceMappingURL=collapsible-liIHmFuw.d.mts.map
+//# sourceMappingURL=collapsible-D3MS6pMC.d.mts.map

package/dist/combobox-BFLmuV4w.d.cts

@@ -0,0 +1,120 @@
+import { t as Command$1 } from "./command-BM9cIuFp.cjs";
+import { Command } from "cmdk";
+//#region packages/components/ui/combobox.d.ts
+/** A single selectable/creatable option rendered in the `Combobox` dropdown. */
+interface ComboboxOption {
+  /** Unique value used for selection, comparison, and de-duplication. */
+  value: string;
+  /** Human-readable label displayed in the dropdown and as a chip. */
+  label: string;
+  /** When true, the option cannot be selected. */
+  disable?: boolean;
+  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from "clear all". */
+  fixed?: boolean;
+  /** Group the options by providing a matching key. */
+  [key: string]: string | boolean | undefined;
+}
+/** Props for the `Combobox` component. */
+interface ComboboxProps {
+  /** Controlled list of currently selected options. */
+  value?: ComboboxOption[];
+  /** Initial selection when uncontrolled. */
+  defaultValue?: ComboboxOption[];
+  /** Fired whenever the selection changes. */
+  onChange?: (options: ComboboxOption[]) => void;
+  /** Manually controlled options. */
+  options?: ComboboxOption[];
+  /** Initial options pre-loaded into the dropdown (uncontrolled). */
+  defaultOptions?: ComboboxOption[];
+  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */
+  onSearch?: (query: string) => Promise<ComboboxOption[]>;
+  /** Debounce delay in ms for `onSearch`. Defaults to 500. */
+  delay?: number;
+  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */
+  triggerSearchOnFocus?: boolean;
+  /** Group options in the dropdown by this option key. */
+  groupBy?: string;
+  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */
+  placeholder?: string;
+  disabled?: boolean;
+  /** Visual color variant of the trigger box. Defaults to `'normal'`. */
+  color?: 'normal' | 'danger';
+  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Full override of the loading row content, shown while `onSearch` is pending. */
+  loadingIndicator?: React.ReactNode;
+  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */
+  loadingText?: string;
+  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */
+  emptyIndicator?: React.ReactNode;
+  /** Allow creating a new option when the typed query doesn't match any existing option. */
+  creatable?: boolean;
+  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */
+  createHint?: React.ReactNode | ((query: string) => React.ReactNode);
+  /** Accessible label for the confirm button. Defaults to `Create "<query>"`. */
+  createLabel?: string | ((query: string) => string);
+  /** Fired when a new option is created via the creatable flow. */
+  onCreateOption?: (query: string) => void;
+  /** Maximum number of options that can be selected at once. */
+  maxSelected?: number;
+  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */
+  onMaxSelected?: (max: number) => void;
+  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */
+  hideSelectedFromList?: boolean;
+  /** Hide the "Clear Selected Input" action. */
+  hideClearAllButton?: boolean;
+  /** Fired after all (non-fixed) selections are cleared via "Clear Selected Input". */
+  onClearAll?: () => void;
+  /** Hide the search input's clear (×) button. */
+  hideClearQueryButton?: boolean;
+  /** Fired after the typed query is cleared via the search input's clear button. */
+  onClearQuery?: () => void;
+  className?: string;
+  badgeClassName?: string;
+  contentClassName?: string;
+  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */
+  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command$1>, 'value' | 'onValueChange'>;
+  /** Props forwarded to the underlying `CommandPrimitive.Input`. */
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof Command.Input>, 'value' | 'placeholder' | 'disabled'>;
+}
+/** Imperative handle exposed by `Combobox` via `ref`. */
+interface ComboboxRef {
+  /** The currently selected options. */
+  selectedValue: ComboboxOption[];
+  /** The underlying search `<input>` DOM element. */
+  input: HTMLInputElement;
+  /** Programmatically open the dropdown and focus the search input. */
+  focus: () => void;
+  /** Clear all selected options. */
+  reset: () => void;
+  /** Clear the currently typed query without touching the selection. */
+  clearQuery: () => void;
+}
+/**
+ * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a
+ * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an
+ * optional async-loaded option list, and a creatable "custom input" prompt for values that don't
+ * match any existing option.
+ *
+ * @example
+ * ```tsx
+ * import { Combobox } from '@customafk/lunas-ui/ui/combobox';
+ *
+ * const options = [
+ *   { value: 'hokkaido', label: 'Hokkaido' },
+ *   { value: 'aomori', label: 'Aomori' },
+ * ];
+ *
+ * <Combobox
+ *   options={options}
+ *   placeholder="Search location…"
+ *   creatable
+ *   createHint="This location isn't registered yet — it will be added as a custom entry."
+ *   onChange={(selected) => console.log(selected)}
+ * />
+ * ```
+ */
+declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<ComboboxRef>>;
+//#endregion
+export { ComboboxRef as i, ComboboxOption as n, ComboboxProps as r, Combobox as t };
+//# sourceMappingURL=combobox-BFLmuV4w.d.cts.map

package/dist/combobox-C64Rvd7n.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{Badge as t}from"./ui/badge.mjs";import{Command as n,CommandGroup as r,CommandItem as i,CommandList as ee}from"./ui/command.mjs";import{Spinner as te}from"./ui/spinner.mjs";import{Popover as ne,PopoverContent as re,PopoverTrigger as ie}from"./ui/popover.mjs";import{inputVariants as ae}from"./ui/input.mjs";import{CheckIcon as oe,ChevronDownIcon as se,PlusIcon as ce,XIcon as a}from"lucide-react";import{forwardRef as o,useCallback as s,useEffect as c,useImperativeHandle as le,useMemo as l,useRef as u,useState as d}from"react";import{cn as f}from"@customafk/react-toolkit/utils";import{cva as ue}from"class-variance-authority";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{Command as de,useCommandState as g}from"cmdk";const fe=ue([`relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow`,`outline-hidden`,`aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak`],{variants:{color:{normal:[`border-border-weak`,`focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`].join(` `),danger:[`border-danger bg-danger-bg-subtle`,`focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak`,`data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak`].join(` `)},size:{sm:`min-h-8 text-xs`,md:`min-h-9 text-sm`,lg:`min-h-10 text-base`}},defaultVariants:{color:`normal`,size:`md`}});function _(e){e.preventDefault(),e.stopPropagation()}function pe(e,t){let[n,r]=d(e);return c(()=>{let n=setTimeout(()=>r(e),t??500);return()=>clearTimeout(n)},[e,t]),n}function v(e,t){if(e.length===0)return{};if(!t)return{"":e};let n={};return e.forEach(e=>{let r=e[t]||``;n[r]||(n[r]=[]),n[r].push(e)}),n}function me(e,t){let n={};for(let[r,i]of Object.entries(e))n[r]=i.filter(e=>!t.has(e.value));return n}function he(e,t){return e.length===t.length&&e.every((e,n)=>e.value===t[n]?.value)}const y=o(({className:e,...t},n)=>g(e=>e.filtered.count===0)?m(`div`,{ref:n,className:f(`p-2.5 pt-1 text-center text-xs`,e),"cmdk-empty":``,role:`presentation`,...t}):null);y.displayName=`ComboboxCommandEmpty`;const b=o(({value:o,defaultValue:ue=[],onChange:g,options:b,defaultOptions:ge=[],onSearch:x,delay:_e,triggerSearchOnFocus:S=!1,groupBy:C,placeholder:w,disabled:T,color:E,size:D=`md`,loadingIndicator:ve,loadingText:ye,emptyIndicator:be,creatable:O=!1,createHint:k,createLabel:A,onCreateOption:j,maxSelected:M=2**53-1,onMaxSelected:N,hideSelectedFromList:P=!1,hideClearAllButton:xe=!1,onClearAll:Se,hideClearQueryButton:Ce=!1,onClearQuery:we,className:Te,badgeClassName:Ee,contentClassName:De,commandProps:F,inputProps:I},Oe)=>{let L=u(null),R=u(0),z=u(!0),[B,V]=d(!1),[H,ke]=d(!1),[Ae,je]=d(ue),[U,Me]=d(v(ge,C)),[W,G]=d(``),K=o??Ae,q=W.trim(),J=pe(W,_e??500),Y=s(e=>{o===void 0&&je(e),g?.(e)},[g,o]);le(Oe,()=>({selectedValue:[...K],input:L.current,focus:()=>{V(!0),L.current?.focus()},reset:()=>Y([]),clearQuery:()=>G(``)}),[K,Y]),c(()=>(z.current=!0,()=>{z.current=!1}),[]),c(()=>{B||G(``)},[B]);let X=l(()=>new Set(K.map(e=>e.value)),[K]),Z=s(e=>{Y(K.filter(t=>t.value!==e.value))},[K,Y]),Ne=s(e=>{if(X.has(e.value)){e.fixed||Z(e);return}if(K.length>=M){N?.(M);return}G(``),Y([...K,e])},[Z,M,N,K,X,Y]);c(()=>{!b||x||Me(e=>he(b,Object.values(e).flat())?e:v(b,C))},[b,C,x]),c(()=>{(async()=>{if(!x||!B||!S&&!J)return;let e=++R.current;ke(!0);let t=await x(J);!z.current||e!==R.current||(Me(v(t,C)),ke(!1))})()},[J,C,B,S,x]);let Pe=l(()=>P?me(U,X):U,[P,U,X]),Q=l(()=>{if(!O||!q||H)return!1;let e=q.toLowerCase(),t=Object.values(U).some(t=>t.some(t=>t.label.toLowerCase()===e)),n=K.some(t=>t.label.toLowerCase()===e);return!t&&!n},[O,q,H,U,K]),Fe=typeof A==`function`?A(q):A??`Create "${q}"`,Ie=typeof k==`function`?k(q):k,$=s(()=>{if(K.length>=M){N?.(M);return}let e=q;G(``),Y([...K,{value:e,label:e}]),j?.(e),V(!1)},[q,M,j,N,K,Y]),Le=s(e=>{let t=L.current;if(t){if((e.key===`Delete`||e.key===`Backspace`)&&t.value===``&&K.length>0){let e=K[K.length-1];e.fixed||Z(e)}e.key===`Enter`&&Q&&(e.preventDefault(),$())}},[$,Z,K,Q]),Re=K.some(e=>!e.fixed);return h(ne,{open:B,onOpenChange:e=>!T&&V(e),children:[m(ie,{asChild:!0,children:h(`div`,{"data-slot":`combobox-trigger`,role:`combobox`,"aria-expanded":B,"aria-haspopup":`listbox`,"aria-disabled":T||void 0,tabIndex:T?-1:0,className:f(fe({color:E,size:D}),K.length!==0&&`p-1`,!T&&`cursor-pointer`,T&&`pointer-events-none`,Te),onKeyDown:e=>{T||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),V(e=>!e))},children:[K.length===0&&m(`span`,{className:`flex-1 truncate px-3 py-2 text-text-positive-muted`,children:w}),K.map(e=>h(t,{"data-slot":`combobox-chip`,"data-fixed":e.fixed||void 0,variant:`soft`,color:E===`danger`?`danger`:`secondary`,size:D,pill:!1,className:f(`gap-1 text-xs bg-muted-muted font-normal`,T&&`opacity-50`,Ee),children:[e.label,!e.fixed&&!T&&m(`button`,{type:`button`,"data-slot":`combobox-chip-remove`,"aria-label":`Remove ${e.label}`,onMouseDown:_,onClick:t=>{t.stopPropagation(),Z(e)},className:`ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted`,children:m(a,{size:12,strokeWidth:2,"aria-hidden":`true`})})]},e.value)),m(se,{size:16,"aria-hidden":`true`,className:f(`ms-auto me-2 shrink-0 text-text-positive-muted transition-transform`,B&&`rotate-180`)})]})}),m(re,{align:`start`,"data-slot":`combobox-content`,className:f(`w-(--radix-popover-trigger-width) p-0`,De),children:h(n,{...F,onKeyDown:e=>{Le(e),F?.onKeyDown?.(e)},"data-slot":`combobox`,className:f(`overflow-visible bg-white`,F?.className),shouldFilter:F?.shouldFilter??!x,children:[!xe&&Re&&h(e,{type:`button`,"data-slot":`combobox-clear-all`,tabIndex:-1,size:`xs`,variant:`ghost`,color:`muted`,className:`w-fit mt-1 font-normal hover:text-text-positive`,onMouseDown:_,onClick:()=>{let e=K.filter(e=>e.fixed);Y(e),Se?.()},children:[m(a,{size:10,strokeWidth:2,"aria-hidden":`true`,className:`size-3!`}),`Clear Selected Input`]}),h(`div`,{"data-slot":`combobox-search`,className:`relative px-2.5 pt-2.5 pb-1 border-t border-t-border`,children:[m(de.Input,{...I,ref:L,"data-slot":`combobox-input`,value:W,onValueChange:e=>{G(e),I?.onValueChange?.(e)},placeholder:w,className:f(ae({size:`sm`}),`pe-8`,I?.className)}),!Ce&&W.length>0&&m(`button`,{type:`button`,"data-slot":`combobox-clear-query`,"aria-label":`Clear search`,onMouseDown:_,onClick:()=>{G(``),we?.(),L.current?.focus()},className:`absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive`,children:m(a,{size:14,strokeWidth:2,"aria-hidden":`true`})})]}),m(ee,{"data-slot":`combobox-list`,className:`shadow-lg outline-hidden`,onMouseDown:e=>e.preventDefault(),children:H?m(`div`,{"data-slot":`combobox-loading`,className:`flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted`,children:ve??h(p,{children:[m(te,{className:`size-4`}),ye]})}):Q?h(`div`,{"data-slot":`combobox-create`,className:`flex flex-col gap-2 p-3`,children:[Ie&&m(`p`,{className:`pe-10 text-text-positive-weak text-xs`,children:Ie}),m(`div`,{className:`flex justify-end`,children:h(e,{type:`button`,"data-slot":`combobox-create-confirm`,"aria-label":Fe,size:`xs`,variant:`outline`,color:`muted`,onMouseDown:_,onClick:$,children:[m(ce,{}),`Thêm mới`]})})]}):h(p,{children:[m(y,{"data-slot":`combobox-empty`,children:m(`div`,{className:`bg-muted-muted size-full min-h-14 flex items-center justify-center`,children:be??`No results found.`})}),m(i,{value:`__combobox-first-item-guard__`,className:`hidden`,"aria-hidden":`true`}),Object.entries(Pe).map(([e,t])=>m(r,{heading:e||void 0,value:e||`__combobox-options__`,children:t.map(e=>{let t=X.has(e.value);return h(i,{value:e.value,keywords:[e.label],disabled:e.disable,"data-picked":t||void 0,onMouseDown:_,onSelect:()=>Ne(e),className:f(`cursor-pointer justify-between`,e.disable&&`cursor-not-allowed opacity-50`,t&&`bg-primary-bg-subtle! text-primary!`),children:[e.label,t&&h(p,{children:[m(oe,{size:14,className:`ms-auto text-primary`,"aria-hidden":`true`}),m(`span`,{className:`sr-only`,children:`, selected`})]})]},e.value)})},e))]})})]})})]})});b.displayName=`Combobox`;export{b as t};
+//# sourceMappingURL=combobox-C64Rvd7n.mjs.map

package/dist/combobox-C64Rvd7n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-C64Rvd7n.mjs","names":["Command","CommandPrimitive"],"sources":["../packages/components/ui/combobox.variants.ts","../packages/components/ui/combobox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/** CVA styling for the `Combobox` trigger box (border/background/focus-ring by color and size). */\nexport const comboboxVariants = cva(\n  [\n    'relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow',\n    'outline-hidden',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak',\n  ],\n  {\n    variants: {\n      color: {\n        normal: [\n          'border-border-weak',\n          'focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n        ].join(' '),\n        danger: [\n          'border-danger bg-danger-bg-subtle',\n          'focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak',\n          'data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak',\n        ].join(' '),\n      },\n      size: {\n        sm: 'min-h-8 text-xs',\n        md: 'min-h-9 text-sm',\n        lg: 'min-h-10 text-base',\n      },\n    },\n    defaultVariants: { color: 'normal', size: 'md' },\n  }\n);\n\nexport type ComboboxVariantProps = VariantProps<typeof comboboxVariants>;\n","'use client';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { Badge } from './badge';\nimport { comboboxVariants } from './combobox.variants';\nimport { Command, CommandGroup, CommandItem, CommandList } from './command';\nimport { inputVariants } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\nimport { Button } from './button';\n\n/** A single selectable/creatable option rendered in the `Combobox` dropdown. */\nexport interface ComboboxOption {\n  /** Unique value used for selection, comparison, and de-duplication. */\n  value: string;\n  /** Human-readable label displayed in the dropdown and as a chip. */\n  label: string;\n  /** When true, the option cannot be selected. */\n  disable?: boolean;\n  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from \"clear all\". */\n  fixed?: boolean;\n  /** Group the options by providing a matching key. */\n  [key: string]: string | boolean | undefined;\n}\n\ninterface GroupOption {\n  [key: string]: ComboboxOption[];\n}\n\n/** Props for the `Combobox` component. */\nexport interface ComboboxProps {\n  /** Controlled list of currently selected options. */\n  value?: ComboboxOption[];\n  /** Initial selection when uncontrolled. */\n  defaultValue?: ComboboxOption[];\n  /** Fired whenever the selection changes. */\n  onChange?: (options: ComboboxOption[]) => void;\n\n  /** Manually controlled options. */\n  options?: ComboboxOption[];\n  /** Initial options pre-loaded into the dropdown (uncontrolled). */\n  defaultOptions?: ComboboxOption[];\n  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */\n  onSearch?: (query: string) => Promise<ComboboxOption[]>;\n  /** Debounce delay in ms for `onSearch`. Defaults to 500. */\n  delay?: number;\n  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */\n  triggerSearchOnFocus?: boolean;\n  /** Group options in the dropdown by this option key. */\n  groupBy?: string;\n\n  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Visual color variant of the trigger box. Defaults to `'normal'`. */\n  color?: 'normal' | 'danger';\n  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */\n  size?: 'sm' | 'md' | 'lg';\n\n  /** Full override of the loading row content, shown while `onSearch` is pending. */\n  loadingIndicator?: React.ReactNode;\n  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */\n  loadingText?: string;\n\n  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */\n  emptyIndicator?: React.ReactNode;\n\n  /** Allow creating a new option when the typed query doesn't match any existing option. */\n  creatable?: boolean;\n  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */\n  createHint?: React.ReactNode | ((query: string) => React.ReactNode);\n  /** Accessible label for the confirm button. Defaults to `Create \"<query>\"`. */\n  createLabel?: string | ((query: string) => string);\n  /** Fired when a new option is created via the creatable flow. */\n  onCreateOption?: (query: string) => void;\n\n  /** Maximum number of options that can be selected at once. */\n  maxSelected?: number;\n  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */\n  onMaxSelected?: (max: number) => void;\n\n  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */\n  hideSelectedFromList?: boolean;\n\n  /** Hide the \"Clear Selected Input\" action. */\n  hideClearAllButton?: boolean;\n  /** Fired after all (non-fixed) selections are cleared via \"Clear Selected Input\". */\n  onClearAll?: () => void;\n  /** Hide the search input's clear (×) button. */\n  hideClearQueryButton?: boolean;\n  /** Fired after the typed query is cleared via the search input's clear button. */\n  onClearQuery?: () => void;\n\n  className?: string;\n  badgeClassName?: string;\n  contentClassName?: string;\n  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command>, 'value' | 'onValueChange'>;\n  /** Props forwarded to the underlying `CommandPrimitive.Input`. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>;\n}\n\n/** Imperative handle exposed by `Combobox` via `ref`. */\nexport interface ComboboxRef {\n  /** The currently selected options. */\n  selectedValue: ComboboxOption[];\n  /** The underlying search `<input>` DOM element. */\n  input: HTMLInputElement;\n  /** Programmatically open the dropdown and focus the search input. */\n  focus: () => void;\n  /** Clear all selected options. */\n  reset: () => void;\n  /** Clear the currently typed query without touching the selection. */\n  clearQuery: () => void;\n}\n\n/** Shared handler that keeps the search input focused while interacting with a chip/button/row. */\nfunction stopMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: ComboboxOption[], groupBy?: string) {\n  if (options.length === 0) return {};\n  if (!groupBy) return { '': options };\n\n  const groupOption: GroupOption = {};\n  options.forEach(option => {\n    const key = (option[groupBy] as string) || '';\n    if (!groupOption[key]) groupOption[key] = [];\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, pickedValues: Set<string>) {\n  const cloneOption: GroupOption = {};\n  for (const [key, options] of Object.entries(groupOption)) {\n    cloneOption[key] = options.filter(option => !pickedValues.has(option.value));\n  }\n  return cloneOption;\n}\n\n/** Cheap structural-equality check on option identity (by `value`, in order) — avoids `JSON.stringify` comparisons. */\nfunction haveSameOptionValues(a: ComboboxOption[], b: ComboboxOption[]) {\n  if (a.length !== b.length) return false;\n  return a.every((option, index) => option.value === b[index]?.value);\n}\n\n/**\n * shadcn/ui's `CommandEmpty` doesn't render correctly inside a controlled/filtered `Command`, so\n * this re-implements `cmdk`'s own `Empty` primitive directly.\n *\n * @reference https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n */\nconst CommandEmpty = forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n  if (!render) return null;\n  return <div ref={forwardedRef} className={cn('p-2.5 pt-1 text-center text-xs', className)} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nCommandEmpty.displayName = 'ComboboxCommandEmpty';\n\n/**\n * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a\n * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an\n * optional async-loaded option list, and a creatable \"custom input\" prompt for values that don't\n * match any existing option.\n *\n * @example\n * ```tsx\n * import { Combobox } from '@customafk/lunas-ui/ui/combobox';\n *\n * const options = [\n *   { value: 'hokkaido', label: 'Hokkaido' },\n *   { value: 'aomori', label: 'Aomori' },\n * ];\n *\n * <Combobox\n *   options={options}\n *   placeholder=\"Search location…\"\n *   creatable\n *   createHint=\"This location isn't registered yet — it will be added as a custom entry.\"\n *   onChange={(selected) => console.log(selected)}\n * />\n * ```\n */\nexport const Combobox = forwardRef<ComboboxRef, ComboboxProps>(\n  (\n    {\n      value,\n      defaultValue = [],\n      onChange,\n      options: arrayOptions,\n      defaultOptions: arrayDefaultOptions = [],\n      onSearch,\n      delay,\n      triggerSearchOnFocus = false,\n      groupBy,\n      placeholder,\n      disabled,\n      color,\n      size = 'md',\n      loadingIndicator,\n      loadingText,\n      emptyIndicator,\n      creatable = false,\n      createHint,\n      createLabel,\n      onCreateOption,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hideSelectedFromList = false,\n      hideClearAllButton = false,\n      onClearAll,\n      hideClearQueryButton = false,\n      onClearQuery,\n      className,\n      badgeClassName,\n      contentClassName,\n      commandProps,\n      inputProps,\n    }: ComboboxProps,\n    ref: React.Ref<ComboboxRef>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const searchRequestIdRef = useRef(0);\n    const isMountedRef = useRef(true);\n\n    const [open, setOpen] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [internalSelected, setInternalSelected] = useState<ComboboxOption[]>(defaultValue);\n    const [options, setOptions] = useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy));\n    const [inputValue, setInputValue] = useState('');\n\n    const selected = value ?? internalSelected;\n    const trimmedInputValue = inputValue.trim();\n    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);\n\n    /** Notifies `onChange` unconditionally; only mirrors into local state when uncontrolled. */\n    const setSelected = useCallback(\n      (next: ComboboxOption[]) => {\n        if (value === undefined) setInternalSelected(next);\n        onChange?.(next);\n      },\n      [onChange, value]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => {\n          setOpen(true);\n          inputRef.current?.focus();\n        },\n        reset: () => setSelected([]),\n        clearQuery: () => setInputValue(''),\n      }),\n      [selected, setSelected]\n    );\n\n    useEffect(() => {\n      isMountedRef.current = true;\n      return () => {\n        isMountedRef.current = false;\n      };\n    }, []);\n\n    // Start each open with a blank query, so reopening always shows the full list first.\n    useEffect(() => {\n      if (!open) setInputValue('');\n    }, [open]);\n\n    const selectedValues = useMemo(() => new Set(selected.map(option => option.value)), [selected]);\n\n    const handleUnselect = useCallback(\n      (option: ComboboxOption) => {\n        setSelected(selected.filter(s => s.value !== option.value));\n      },\n      [selected, setSelected]\n    );\n\n    const handleSelect = useCallback(\n      (option: ComboboxOption) => {\n        if (selectedValues.has(option.value)) {\n          if (!option.fixed) handleUnselect(option);\n          return;\n        }\n        if (selected.length >= maxSelected) {\n          onMaxSelected?.(maxSelected);\n          return;\n        }\n        setInputValue('');\n        setSelected([...selected, option]);\n      },\n      [handleUnselect, maxSelected, onMaxSelected, selected, selectedValues, setSelected]\n    );\n\n    useEffect(() => {\n      if (!arrayOptions || onSearch) return;\n      setOptions(prev => {\n        const prevFlat = Object.values(prev).flat();\n        return haveSameOptionValues(arrayOptions, prevFlat) ? prev : transToGroupOption(arrayOptions, groupBy);\n      });\n    }, [arrayOptions, groupBy, onSearch]);\n\n    useEffect(() => {\n      const exec = async () => {\n        if (!onSearch || !open) return;\n        if (!triggerSearchOnFocus && !debouncedSearchTerm) return;\n\n        const requestId = ++searchRequestIdRef.current;\n        setIsLoading(true);\n        const res = await onSearch(debouncedSearchTerm);\n        if (!isMountedRef.current || requestId !== searchRequestIdRef.current) return;\n        setOptions(transToGroupOption(res, groupBy));\n        setIsLoading(false);\n      };\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n    const selectables = useMemo<GroupOption>(\n      () => (hideSelectedFromList ? removePickedOption(options, selectedValues) : options),\n      [hideSelectedFromList, options, selectedValues]\n    );\n\n    const showCreatePrompt = useMemo(() => {\n      if (!creatable || !trimmedInputValue || isLoading) return false;\n\n      const normalizedQuery = trimmedInputValue.toLowerCase();\n      const matchesExisting = Object.values(options).some(group => group.some(o => o.label.toLowerCase() === normalizedQuery));\n      const matchesSelected = selected.some(s => s.label.toLowerCase() === normalizedQuery);\n      return !matchesExisting && !matchesSelected;\n    }, [creatable, trimmedInputValue, isLoading, options, selected]);\n\n    const resolvedCreateLabel = typeof createLabel === 'function' ? createLabel(trimmedInputValue) : (createLabel ?? `Create \"${trimmedInputValue}\"`);\n    const resolvedCreateHint = typeof createHint === 'function' ? createHint(trimmedInputValue) : createHint;\n\n    const handleCreateOption = useCallback(() => {\n      if (selected.length >= maxSelected) {\n        onMaxSelected?.(maxSelected);\n        return;\n      }\n      const query = trimmedInputValue;\n      setInputValue('');\n      setSelected([...selected, { value: query, label: query }]);\n      onCreateOption?.(query);\n      setOpen(false);\n    }, [trimmedInputValue, maxSelected, onCreateOption, onMaxSelected, selected, setSelected]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '' && selected.length > 0) {\n          const lastSelectOption = selected[selected.length - 1];\n          if (!lastSelectOption.fixed) handleUnselect(lastSelectOption);\n        }\n\n        if (e.key === 'Enter' && showCreatePrompt) {\n          e.preventDefault();\n          handleCreateOption();\n        }\n      },\n      [handleCreateOption, handleUnselect, selected, showCreatePrompt]\n    );\n\n    const hasClearableSelection = selected.some(s => !s.fixed);\n\n    return (\n      <Popover open={open} onOpenChange={next => !disabled && setOpen(next)}>\n        <PopoverTrigger asChild>\n          <div\n            data-slot=\"combobox-trigger\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            className={cn(\n              comboboxVariants({ color, size }),\n              selected.length !== 0 && 'p-1',\n              !disabled && 'cursor-pointer',\n              disabled && 'pointer-events-none',\n              className\n            )}\n            onKeyDown={e => {\n              if (disabled) return;\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                setOpen(o => !o);\n              }\n            }}\n          >\n            {selected.length === 0 && <span className=\"flex-1 truncate px-3 py-2 text-text-positive-muted\">{placeholder}</span>}\n\n            {selected.map(option => (\n              <Badge\n                key={option.value}\n                data-slot=\"combobox-chip\"\n                data-fixed={option.fixed || undefined}\n                variant=\"soft\"\n                color={color === 'danger' ? 'danger' : 'secondary'}\n                size={size}\n                pill={false}\n                className={cn('gap-1 text-xs bg-muted-muted font-normal', disabled && 'opacity-50', badgeClassName)}\n              >\n                {option.label}\n                {!option.fixed && !disabled && (\n                  <button\n                    type=\"button\"\n                    data-slot=\"combobox-chip-remove\"\n                    aria-label={`Remove ${option.label}`}\n                    onMouseDown={stopMouseDown}\n                    onClick={e => {\n                      e.stopPropagation();\n                      handleUnselect(option);\n                    }}\n                    className=\"ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted\"\n                  >\n                    <XIcon size={12} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </Badge>\n            ))}\n\n            <ChevronDownIcon\n              size={16}\n              aria-hidden=\"true\"\n              className={cn('ms-auto me-2 shrink-0 text-text-positive-muted transition-transform', open && 'rotate-180')}\n            />\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" data-slot=\"combobox-content\" className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}>\n          <Command\n            {...commandProps}\n            onKeyDown={e => {\n              handleKeyDown(e);\n              commandProps?.onKeyDown?.(e);\n            }}\n            data-slot=\"combobox\"\n            className={cn('overflow-visible bg-white', commandProps?.className)}\n            shouldFilter={commandProps?.shouldFilter ?? !onSearch}\n          >\n            {!hideClearAllButton && hasClearableSelection && (\n              <Button\n                type=\"button\"\n                data-slot=\"combobox-clear-all\"\n                tabIndex={-1}\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"muted\"\n                className=\"w-fit mt-1 font-normal hover:text-text-positive\"\n                onMouseDown={stopMouseDown}\n                onClick={() => {\n                  const remaining = selected.filter(s => s.fixed);\n                  setSelected(remaining);\n                  onClearAll?.();\n                }}\n              >\n                <XIcon size={10} strokeWidth={2} aria-hidden=\"true\" className=\"size-3!\" />\n                Clear Selected Input\n              </Button>\n            )}\n\n            <div data-slot=\"combobox-search\" className=\"relative px-2.5 pt-2.5 pb-1 border-t border-t-border\">\n              <CommandPrimitive.Input\n                {...inputProps}\n                ref={inputRef}\n                data-slot=\"combobox-input\"\n                value={inputValue}\n                onValueChange={val => {\n                  setInputValue(val);\n                  inputProps?.onValueChange?.(val);\n                }}\n                placeholder={placeholder}\n                className={cn(inputVariants({ size: 'sm' }), 'pe-8', inputProps?.className)}\n              />\n              {!hideClearQueryButton && inputValue.length > 0 && (\n                <button\n                  type=\"button\"\n                  data-slot=\"combobox-clear-query\"\n                  aria-label=\"Clear search\"\n                  onMouseDown={stopMouseDown}\n                  onClick={() => {\n                    setInputValue('');\n                    onClearQuery?.();\n                    inputRef.current?.focus();\n                  }}\n                  className=\"absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive\"\n                >\n                  <XIcon size={14} strokeWidth={2} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n\n            <CommandList data-slot=\"combobox-list\" className=\"shadow-lg outline-hidden\" onMouseDown={e => e.preventDefault()}>\n              {isLoading ? (\n                <div data-slot=\"combobox-loading\" className=\"flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted\">\n                  {loadingIndicator ?? (\n                    <>\n                      <Spinner className=\"size-4\" />\n                      {loadingText}\n                    </>\n                  )}\n                </div>\n              ) : showCreatePrompt ? (\n                <div data-slot=\"combobox-create\" className=\"flex flex-col gap-2 p-3\">\n                  {resolvedCreateHint && <p className=\"pe-10 text-text-positive-weak text-xs\">{resolvedCreateHint}</p>}\n                  <div className=\"flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      data-slot=\"combobox-create-confirm\"\n                      aria-label={resolvedCreateLabel}\n                      size=\"xs\"\n                      variant=\"outline\"\n                      color=\"muted\"\n                      onMouseDown={stopMouseDown}\n                      onClick={handleCreateOption}\n                    >\n                      <PlusIcon />\n                      Thêm mới\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty data-slot=\"combobox-empty\">\n                    <div className=\"bg-muted-muted size-full min-h-14 flex items-center justify-center\">{emptyIndicator ?? 'No results found.'}</div>\n                  </CommandEmpty>\n\n                  {/* Absorbs cmdk's default \"auto-highlight the first item\" behavior so opening the\n                      dropdown with no typed query doesn't silently arm Enter to toggle a real option. */}\n                  <CommandItem value=\"__combobox-first-item-guard__\" className=\"hidden\" aria-hidden=\"true\" />\n\n                  {Object.entries(selectables).map(([key, groupOptions]) => (\n                    <CommandGroup key={key} heading={key || undefined} value={key || '__combobox-options__'}>\n                      {groupOptions.map(option => {\n                        const picked = selectedValues.has(option.value);\n                        return (\n                          <CommandItem\n                            key={option.value}\n                            value={option.value}\n                            keywords={[option.label]}\n                            disabled={option.disable}\n                            data-picked={picked || undefined}\n                            onMouseDown={stopMouseDown}\n                            onSelect={() => handleSelect(option)}\n                            className={cn(\n                              'cursor-pointer justify-between',\n                              option.disable && 'cursor-not-allowed opacity-50',\n                              picked && 'bg-primary-bg-subtle! text-primary!'\n                            )}\n                          >\n                            {option.label}\n                            {picked && (\n                              <>\n                                <CheckIcon size={14} className=\"ms-auto text-primary\" aria-hidden=\"true\" />\n                                <span className=\"sr-only\">, selected</span>\n                              </>\n                            )}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"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"}

package/dist/{combobox-field-Bxrct4lA.cjs → combobox-field-BE9miJ3D.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-Bae0TOEr.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BSLi-P0Q.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("radix-ui"),d=require("@customafk/react-toolkit/hooks/useMobile"),f=require("@tanstack/react-form");const p=(0,s.memo)(({label:p,description:m,placeholder:h,tooltip:g,helperText:_,orientation:v=`responsive`,options:y,required:b=!1,disabled:x=!1,clearable:S=!1,showErrorMessage:C=!0,modal:w})=>{let T=(0,s.useId)(),E=r.G(),D=(0,d.useIsMobile)(),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(!1),M=(0,f.useStore)(E.form.store,({isSubmitting:e})=>e),N=x||M,P=E.state.meta.isDirty||E.state.meta.isTouched,F=P&&!E.state.meta.isValid,I=b&&E.state.value===null,L=S&&!!E.state.value&&!N,R=E.state.meta.errors.length>0,z=y.find(({value:e})=>e===E.state.value)?.label,B=()=>{E.handleChange(null),E.handleBlur()},V=t=>(0,l.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:N,"aria-invalid":F?!0:void 0,"aria-describedby":T,className:(0,c.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,L&&`pr-8`,!E.state.value&&`text-text-positive-muted`,F&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:z?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:z}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),H=e=>(0,l.jsxs)(n.Command,{className:`border-none`,children:[(0,l.jsx)(n.CommandInput,{placeholder:h??`Tìm kiếm…`}),(0,l.jsxs)(n.CommandList,{children:[(0,l.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,l.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:y.map(({value:t,label:r})=>(0,l.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,l.jsxs)(a.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,l.jsxs)(a.Field,{orientation:v,"data-invalid":F,children:[(0,l.jsxs)(a.FieldContent,{children:[(0,l.jsxs)(a.FieldLabel,{"aria-required":I,htmlFor:E.name,children:[p,g&&(0,l.jsx)(a.FieldTooltip,{tooltip:g})]}),(0,l.jsx)(a.FieldDescription,{children:m})]}),(0,l.jsx)(a.FieldContentMain,{className:`flex justify-end`,children:(0,l.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,l.jsxs)(`div`,{className:`relative`,children:[D?(0,l.jsxs)(l.Fragment,{children:[V(()=>k(!0)),(0,l.jsx)(t.Dialog,{open:O,onOpenChange:e=>{k(e),e||E.handleBlur()},children:(0,l.jsxs)(t.DialogPortal,{children:[(0,l.jsx)(t.DialogOverlay,{}),(0,l.jsxs)(u.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,c.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,l.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:p}),(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,l.jsx)(o.XIcon,{size:16})})})]}),(0,l.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[L&&(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:B,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),H(e=>{E.handleChange(e),k(!1),E.handleBlur()})]}),(0,l.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,l.jsxs)(i.Popover,{open:A,modal:w,onOpenChange:e=>{j(e),e||E.handleBlur()},children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:V()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:H(e=>{E.handleChange(e),j(!1),E.handleBlur()})})]}),L&&(0,l.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:B,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&R&&(0,l.jsx)(a.FieldError,{id:T,className:`mt-1`,errors:E.state.meta.errors}),(0,l.jsx)(a.FieldNote,{isShow:!!_,children:_})]})})]}),(0,l.jsx)(a.FieldSeparator,{})]})});p.displayName=`ComboboxField`,exports.ComboboxField=p;
-//# sourceMappingURL=combobox-field-Bxrct4lA.cjs.map
+const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-BxqS40rB.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BSLi-P0Q.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("radix-ui"),d=require("@tanstack/react-form"),f=require("@customafk/react-toolkit/hooks/useMobile");const p=(0,s.memo)(({label:p,description:m,placeholder:h,tooltip:g,helperText:_,orientation:v=`responsive`,options:y,required:b=!1,disabled:x=!1,clearable:S=!1,showErrorMessage:C=!0,modal:w})=>{let T=(0,s.useId)(),E=r.G(),D=(0,f.useIsMobile)(),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(!1),M=(0,d.useStore)(E.form.store,({isSubmitting:e})=>e),N=x||M,P=E.state.meta.isDirty||E.state.meta.isTouched,F=P&&!E.state.meta.isValid,I=b&&E.state.value===null,L=S&&!!E.state.value&&!N,R=E.state.meta.errors.length>0,z=y.find(({value:e})=>e===E.state.value)?.label,B=()=>{E.handleChange(null),E.handleBlur()},V=t=>(0,l.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:N,"aria-invalid":F?!0:void 0,"aria-describedby":T,className:(0,c.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,L&&`pr-8`,!E.state.value&&`text-text-positive-muted`,F&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:z?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:z}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),H=e=>(0,l.jsxs)(n.Command,{className:`border-none`,children:[(0,l.jsx)(n.CommandInput,{placeholder:h??`Tìm kiếm…`}),(0,l.jsxs)(n.CommandList,{children:[(0,l.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,l.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:y.map(({value:t,label:r})=>(0,l.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,l.jsxs)(a.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,l.jsxs)(a.Field,{orientation:v,"data-invalid":F,children:[(0,l.jsxs)(a.FieldContent,{children:[(0,l.jsxs)(a.FieldLabel,{"aria-required":I,htmlFor:E.name,children:[p,g&&(0,l.jsx)(a.FieldTooltip,{tooltip:g})]}),(0,l.jsx)(a.FieldDescription,{children:m})]}),(0,l.jsx)(a.FieldContentMain,{className:`flex justify-end`,children:(0,l.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,l.jsxs)(`div`,{className:`relative`,children:[D?(0,l.jsxs)(l.Fragment,{children:[V(()=>k(!0)),(0,l.jsx)(t.Dialog,{open:O,onOpenChange:e=>{k(e),e||E.handleBlur()},children:(0,l.jsxs)(t.DialogPortal,{children:[(0,l.jsx)(t.DialogOverlay,{}),(0,l.jsxs)(u.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,c.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,l.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:p}),(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,l.jsx)(o.XIcon,{size:16})})})]}),(0,l.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[L&&(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:B,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),H(e=>{E.handleChange(e),k(!1),E.handleBlur()})]}),(0,l.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,l.jsxs)(i.Popover,{open:A,modal:w,onOpenChange:e=>{j(e),e||E.handleBlur()},children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:V()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:H(e=>{E.handleChange(e),j(!1),E.handleBlur()})})]}),L&&(0,l.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:B,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&R&&(0,l.jsx)(a.FieldError,{id:T,className:`mt-1`,errors:E.state.meta.errors}),(0,l.jsx)(a.FieldNote,{isShow:!!_,children:_})]})})]}),(0,l.jsx)(a.FieldSeparator,{})]})});p.displayName=`ComboboxField`,exports.ComboboxField=p;
+//# sourceMappingURL=combobox-field-BE9miJ3D.cjs.map