npm - @customafk/lunas-ui - Versions diffs - 0.2.81 → 0.2.83 - Mend

@customafk/lunas-ui 0.2.81 → 0.2.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (327) hide show

package/dist/{cms-layout-Ba_5wSnr.mjs.map → cms-layout-BHLo0_L_.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cms-layout-Ba_5wSnr.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 { PanelLeftIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { 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_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' \| 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\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 [_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 setOpen(open => !open);\n }, [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>(() => ({ state, open, setOpen, toggleSidebar }), [state, open, setOpen, toggleSidebar]);\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div data-slot=\"layout-scroll-container\" className=\"h-dvh w-full overflow-auto bg-sidebar\">\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(\n 'group/sidebar-wrapper relative grid',\n 'h-dvh min-h-160 w-full min-w-264 max-w-svw',\n 'grid-cols-[auto_1fr] grid-rows-[auto_1fr]',\n className\n )}\n {...props}\n >\n {children}\n </section>\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' \| 'right';\n }) => {\n const { state } = useSidebar();\n\n return (\n <div\n className=\"group peer relative col-start-1 row-start-2 block bg-card text-sidebar-foreground\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? 'icon' : ''}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[side=right]:rotate-180',\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 'absolute inset-y-0 z-10 flex w-(--sidebar-width) p-2 shadow-nav',\n 'transition-[left,right,width] duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n side === 'left' ? 'left-0' : 'right-0',\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 </div>\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('col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1', className)} {...props}>\n <div className=\"relative grid min-h-0 grid-cols-1 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 { 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'} {...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 CMSLayoutMain,\n CMSLayoutProvider,\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\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 { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { LunasLogo } from '@/components/features/logo';\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 'col-span-2 row-start-1 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 CMSLayoutMain,\n CMSLayoutProvider,\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\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>\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":"0hCAiBA,MAaM,EAAiB,EAA0C,IAAI,EAErE,SAAS,GAAa,CACpB,IAAM,EAAU,EAAW,CAAc,EACzC,GAAI,CAAC,EACH,MAAU,MAAM,mDAAmD,EAErE,OAAO,CACT,CAEA,SAAS,EAAkB,CACzB,cAAc,GACd,KAAM,EACN,aAAc,EACd,YACA,QACA,WACA,GAAG,GAKF,CACD,GAAM,CAAC,EAAO,GAAY,EAAS,CAAW,EACxC,EAAO,GAAY,EACnB,EAAU,EACb,GAAmD,CAClD,IAAM,EAAY,OAAO,GAAU,WAAa,EAAM,CAAI,EAAI,EAC1D,EACF,EAAY,CAAS,EAErB,EAAS,CAAS,EAGpB,SAAS,OAAS,iBAA0B,EAAU,yBACxD,EACA,CAAC,EAAa,CAAI,CACpB,EAEM,EAAgB,MAAkB,CACtC,EAAQ,GAAQ,CAAC,CAAI,CACvB,EAAG,CAAC,CAAO,CAAC,EAEZ,MAAgB,CACd,IAAM,EAAiB,GAAyB,CAC1C,EAAM,MAAQ,MAA8B,EAAM,SAAW,EAAM,WACrE,EAAM,eAAe,EACrB,EAAc,EAElB,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAa,MACnC,OAAO,oBAAoB,UAAW,CAAa,CAClE,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,EAAQ,EAAO,WAAa,YAE5B,EAAe,OAAoC,CAAE,QAAO,OAAM,UAAS,eAAc,GAAI,CAAC,EAAO,EAAM,EAAS,CAAa,CAAC,EAExI,OACE,EAAC,EAAe,SAAhB,CAAyB,MAAO,EAC9B,SAAA,EAAC,EAAD,CAAiB,cAAe,EAC9B,SAAA,EAAC,MAAD,CAAK,YAAU,0BAA0B,UAAU,wCACjD,SAAA,EAAC,UAAD,CACE,YAAU,iBACV,MAAO,CAAE,kBAAmB,QAAe,uBAAwB,OAAoB,GAAG,CAAM,EAChG,UAAW,EACT,sCACA,6CACA,4CACA,CACF,EACA,GAAI,EAEH,UACM,CAAA,CACN,CAAA,CACU,CAAA,CACM,CAAA,CAE7B,CAEA,MAAM,EAAmB,GACtB,CACC,OAAO,OACP,YACA,WACA,GAAG,KAGC,CACJ,GAAM,CAAE,SAAU,EAAW,EAE7B,OACE,EAAC,MAAD,CACE,UAAU,oFACV,aAAY,EACZ,mBAAkB,IAAU,YAAc,OAAS,GACnD,YAAW,EACX,YAAU,UALZ,SAAA,CAOE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EACT,0FACA,qCACA,kFACF,CACD,CAAA,EACD,EAAC,MAAD,CACE,YAAU,oBACV,UAAW,EACT,kEACA,yDACA,mFACA,IAAS,OAAS,SAAW,UAC7B,CACF,EACA,GAAI,EAEJ,SAAA,EAAC,MAAD,CAAK,eAAa,UAAU,YAAU,gBAAgB,UAAU,mCAC7D,UACE,CAAA,CACF,CAAA,CACF,GAET,CACF,EACA,EAAiB,YAAc,mBAiD/B,MAAM,EAAgB,GAAM,CAAE,YAAW,WAAU,GAAG,KAElD,EAAC,OAAD,CAAM,YAAU,gBAAgB,UAAW,EAAG,2DAA4D,CAAS,EAAG,GAAI,EACxH,SAAA,EAAC,MAAD,CAAK,UAAU,kDAAmD,UAAc,CAAA,CAC5E,CAAA,CAET,EACD,EAAc,YAAc,gBAE5B,MAAM,EAAe,GAAM,CAAE,YAAW,GAAG,KAClC,EAAC,EAAD,CAAO,YAAU,gBAAgB,eAAa,QAAQ,UAAW,EAAG,uCAAwC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC5I,EACD,EAAa,YAAc,eAE3B,MAAM,EAAgB,GAAM,CAAE,YAAW,GAAG,KACnC,EAAC,MAAD,CAAK,YAAU,iBAAiB,eAAa,SAAS,UAAW,EAAG,0BAA2B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/H,EACD,EAAc,YAAc,gBAE5B,MAAM,EAAgB,GAAM,CAAE,YAAW,GAAG,KACnC,EAAC,MAAD,CAAK,YAAU,iBAAiB,eAAa,SAAS,UAAW,EAAG,sBAAuB,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC3H,EACD,EAAc,YAAc,gBAE5B,MAAM,EAAmB,GAAM,CAAE,YAAW,GAAG,KACtC,EAAC,EAAD,CAAW,YAAU,oBAAoB,eAAa,YAAY,UAAW,EAAG,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACjJ,EACD,EAAiB,YAAc,mBAE/B,MAAM,EAAiB,GAAM,CAAE,YAAW,GAAG,KAEzC,EAAC,MAAD,CACE,YAAU,kBACV,eAAa,UACb,UAAW,EAAG,yFAA0F,CAAS,EACjH,GAAI,CACL,CAAA,CAEJ,EACD,EAAe,YAAc,iBAE7B,MAAM,EAAe,GAAM,CAAE,YAAW,GAAG,KAClC,EAAC,MAAD,CAAK,YAAU,gBAAgB,eAAa,QAAQ,UAAW,EAAG,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACnI,EACD,EAAa,YAAc,eAE3B,MAAM,EAAoB,GAAM,CAAE,YAAW,UAAU,GAAO,GAAG,KAI7D,EAHW,EAAU,EAAO,MAG5B,CACE,YAAU,sBACV,eAAa,cACb,UAAW,EACT,iPACA,8EACA,CACF,EACA,GAAI,CACL,CAAA,CAEJ,EACD,EAAkB,YAAc,oBAsBhC,MAAM,EAAsB,GAAM,CAAE,YAAW,GAAG,KACzC,EAAC,MAAD,CAAK,YAAU,wBAAwB,eAAa,gBAAgB,UAAW,EAAG,iBAAkB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpI,EACD,EAAoB,YAAc,sBAElC,MAAM,EAAc,GAAM,CAAE,YAAW,GAAG,KACjC,EAAC,KAAD,CAAI,YAAU,eAAe,eAAa,OAAO,UAAW,EAAG,qCAAsC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrI,EACD,EAAY,YAAc,cAE1B,MAAM,EAAkB,GAAM,CAAE,YAAW,GAAG,KACrC,EAAC,KAAD,CAAI,YAAU,oBAAoB,eAAa,YAAY,UAAW,EAAG,2BAA4B,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrI,EACD,EAAgB,YAAc,kBAE9B,MAAM,EAA4B,EAChC,CACE,mBACA,iBACA,iCACA,gDACA,iCACA,2DACA,iEACA,mDACA,sDACA,6DACA,sFACA,mGACA,iHACA,kCACA,8BACF,EACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,kEACT,QACE,8KACJ,EACA,KAAM,CACJ,QAAS,eACT,GAAI,cACJ,GAAI,iDACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEM,EAAoB,GACvB,CACC,UAAU,GACV,WAAW,GACX,UAAU,UACV,OAAO,UACP,UACA,YACA,GAAG,KAKkD,CACrD,IAAM,EAAO,EAAU,EAAO,SACxB,CAAE,SAAU,EAAW,EAEvB,EACJ,EAAC,EAAD,CACE,YAAU,sBACV,eAAa,cACb,YAAW,EACX,cAAa,EACb,UAAW,EAAG,EAA0B,CAAE,UAAS,MAAK,CAAC,EAAG,CAAS,EACrE,GAAI,CACL,CAAA,EASH,OANK,GAED,OAAO,GAAY,WACrB,EAAU,CAAE,SAAU,CAAQ,GAI9B,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GAAS,SAAA,CAAuB,CAAA,EAChD,EAAC,EAAD,CAAgB,KAAK,QAAQ,MAAM,SAAS,OAAQ,IAAU,YAAa,GAAI,CAAU,CAAA,CAClF,CAAA,CAAA,GAVU,CAYvB,CACF,EACA,EAAkB,YAAc,oBC/VhC,MAAa,IAQP,CAAE,WAAU,qBAAoB,qBAAoB,OAAM,WAAU,cAAc,UAAW,UAAW,CAC5G,GAAM,CAAE,iBAAkB,EAAW,EAE/B,EAAsB,EACzB,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAc,CAChB,EACA,CAAC,CAAa,CAChB,EAEM,EAAiB,EACpB,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,IAAqB,CACvB,EACA,CAAC,CAAkB,CACrB,EAEM,EAAiB,EACpB,GAA4B,CAC3B,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,IAAqB,CACvB,EACA,CAAC,CAAkB,CACrB,EAEM,EAAW,EAAO,EAAe,IAAI,EAAK,IAAI,EAAI,IAAA,GAExD,OACE,EAAC,SAAD,CACE,YAAU,oBACV,UAAW,EACT,UACA,sBACA,yCACA,gDACA,+BACA,iCACF,EATF,SAAA,CAWE,EAAC,EAAD,CACE,eAAa,UACb,YAAU,kBACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,UAAU,+DACV,QAAS,EAPX,SAAA,CASE,EAAC,EAAD,CAAU,UAAU,SAAW,CAAA,EAC/B,EAAC,OAAD,CAAM,UAAU,UAAU,SAAA,gBAAoB,CAAA,CACxC,IAER,EAAC,MAAD,CAAK,UAAU,qCAAsC,SAAA,GAAQ,EAAC,EAAD,CAAW,QAAQ,aAAa,KAAK,IAAM,CAAA,CAAO,CAAA,EAE/G,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAqB,QAAA,GACnB,SAAA,EAAC,EAAD,CAAQ,QAAQ,QAAQ,MAAM,QAAQ,UAAU,+CAAhD,SAAA,CACE,EAAC,EAAD,CAAQ,UAAU,kBAAlB,SAAA,CACE,EAAC,EAAD,CAAa,IAAK,EAAK,UAAW,IAAK,EAAK,IAAO,CAAA,EACnD,EAAC,EAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAS,EACjD,SAAA,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,CACR,CAAA,EAAA,EAAC,MAAD,CAAK,UAAU,sCAAf,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,2EAA4E,SAAA,EAAK,IAAW,CAAA,EAC3G,EAAK,OAAS,EAAC,OAAD,CAAM,UAAU,kEAAmE,SAAA,EAAK,KAAY,CAAA,CAChH,CACC,CAAA,CAAA,GACW,CAAA,EACrB,EAAC,EAAD,CAAqB,MAAM,MAAM,UAAU,OAA3C,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,yDAAf,SAAA,CACE,EAAC,EAAD,CAAQ,UAAU,UAAlB,SAAA,CACE,EAAC,EAAD,CAAa,IAAK,EAAK,UAAW,IAAK,EAAK,IAAO,CAAA,EACnD,EAAC,EAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAS,EACjD,SAAA,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,CACR,CAAA,EAAA,EAAC,MAAD,CAAK,UAAU,oDAAf,SAAA,CACE,EAAC,IAAD,CAAG,UAAU,oDAAqD,SAAA,EAAK,IAAQ,CAAA,EAC9E,EAAK,OAAS,EAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,EAAK,KAAS,CAAA,EACrF,EAAK,MACJ,EAAC,OAAD,CAAM,UAAU,wHACb,SAAA,EAAK,IACF,CAAA,CAEL,CACF,CAAA,CAAA,CACJ,CAAA,EAAA,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CAAwB,CAAA,EACxB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAkB,UAAU,gCAAgC,QAAS,EAArE,SAAA,CACE,EAAC,EAAD,CAAY,UAAU,QAAU,CAAA,EAC/B,CACe,CACD,CAAA,CAAA,CAAA,CACnB,CAAA,CAAA,CAEe,CACT,CAAA,CAAA,CAAA,CAAA,EAGf,IAAS,GAAsB,IAAuB,EAAC,MAAD,CAAK,UAAU,yBAA2B,CAAA,GAE/F,GAAsB,IACtB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAqB,QAAA,GACnB,SAAA,EAAC,EAAD,CAAQ,YAAU,iBAAiB,QAAQ,QAAQ,MAAM,QAAQ,UAAU,+DAA3E,SAAA,CACE,EAAC,EAAD,CAAW,UAAU,SAAW,CAAA,EAC/B,CACK,GACW,CAAA,EACrB,EAAC,EAAD,CAAqB,MAAM,MACzB,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAkB,QAAS,EAAgB,SAAA,cAA8B,CAAA,EACzE,EAAC,EAAD,CAAkB,QAAS,EAAgB,SAAA,iBAAiC,CAAA,CAC3D,CAAA,CAAA,CACA,CAAA,CACT,CAAA,CAAA,CAEb,GACC,GAEZ,EC5FM,EAA0B,GAA8C,CAAE,KAAI,QAAO,OAAM,kBAAiB,UAAS,cACzH,EAAC,EAAD,CAAA,SACG,EACC,EAAC,EAAD,CAAmB,QAAA,GAAQ,SAAU,IAAO,EACzC,SAAA,EAAS,CAAE,OAAM,OAAM,CAAC,CACR,CAAA,EAEnB,EAAC,EAAD,CAAmB,SAAU,IAAO,EAA0B,UAA9D,SAAA,CACG,EACA,CACgB,CAEN,CAAA,CAAA,CAAA,CAClB,EACD,EAAwB,YAAc,0BAEtC,MAAM,EAAsB,GAAwD,CAAE,KAAI,QAAO,cAC/F,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAoB,CAAyB,CAAA,EAC7C,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAc,UAAsB,CAAA,CACjB,CAAA,CACT,CAAA,CAAA,CACf,EACD,EAAoB,YAAc,sBAqClC,MAAa,IAAgE,CAC3E,WACA,kBACA,UACA,WACA,qBACA,qBACA,WACA,cAAc,UACd,YAAY,eAAe,IAAI,KAAK,CAAA,CAAE,YAAY,EAAE,UACpD,UACI,CACJ,IAAM,EAAS,GAAS,cAAgB,CAAC,EAEzC,OACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,GAAD,CACY,WACU,qBACA,qBACd,OACI,WACG,aACd,CAAA,EACD,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACG,EAAO,IAAI,GACV,EAAC,EAAD,CAAoC,GAAI,EAAM,GAAI,MAAO,EAAM,MAC5D,SAAA,EAAM,MAAM,IAAI,GACf,EAAC,EAAD,CAEE,GAAI,EAAK,GACQ,kBACjB,MAAO,EAAK,MACZ,KAAM,EAAK,KACX,SAAU,EAAK,SACf,QAAS,EAAK,OACf,EAPM,EAAK,EAOX,CACF,CACkB,EAZK,EAAM,EAYX,CACtB,CACa,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAmB,UAAU,uBAAuB,QAAS,EAA7D,SAAA,CACE,EAAC,EAAD,CAAY,UAAU,yBAA2B,CAAA,EAChD,CACgB,CACJ,CAAA,CAAA,CAAA,EACjB,EAAC,EAAD,CAAiB,UAAU,gCACzB,SAAA,EAAC,IAAD,CAAG,UAAU,qDAAsD,SAAA,CAAa,CAAA,CACjE,CAAA,CACN,CAAA,CAAA,CACA,CAAA,CACC,CAAA,CAAA,EAClB,EAAC,EAAD,CAAgB,UAAwB,CAAA,CACvB,CAAA,CAAA,CAEvB"}
1	+ {"version":3,"file":"cms-layout-BHLo0_L_.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 { PanelLeftIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { 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_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' \| 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\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 [_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 setOpen(open => !open);\n }, [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>(() => ({ state, open, setOpen, toggleSidebar }), [state, open, setOpen, toggleSidebar]);\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div data-slot=\"layout-scroll-container\" className=\"h-dvh w-full overflow-auto bg-sidebar\">\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(\n 'group/sidebar-wrapper relative grid',\n 'h-dvh min-h-160 w-full min-w-264 max-w-svw',\n 'grid-cols-[auto_1fr] grid-rows-[auto_1fr]',\n className\n )}\n {...props}\n >\n {children}\n </section>\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' \| 'right';\n }) => {\n const { state } = useSidebar();\n\n return (\n <div\n className=\"group peer relative col-start-1 row-start-2 block bg-card text-sidebar-foreground\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? 'icon' : ''}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[side=right]:rotate-180',\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 'absolute inset-y-0 z-10 flex w-(--sidebar-width) p-2 shadow-nav',\n 'transition-[left,right,width] duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n side === 'left' ? 'left-0' : 'right-0',\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 </div>\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('col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1', className)} {...props}>\n <div className=\"relative grid min-h-0 grid-cols-1 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 { 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'} {...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 CMSLayoutMain,\n CMSLayoutProvider,\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\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 { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { LunasLogo } from '@/components/features/logo';\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 'col-span-2 row-start-1 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 CMSLayoutMain,\n CMSLayoutProvider,\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\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>\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/combobox-Bhgo112r.cjs ADDED Viewed

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

package/dist/{combobox-kp_kPY8o.cjs.map → combobox-Bhgo112r.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-kp_kPY8o.cjs","names":["Popover","PopoverTrigger","Badge","XIcon","ChevronDownIcon","PopoverContent","Command","Button","CommandPrimitive","inputVariants","CommandList","Spinner","PlusIcon","CommandItem","CommandGroup","CheckIcon"],"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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"}
1	+ {"version":3,"file":"combobox-Bhgo112r.cjs","names":["Popover","PopoverTrigger","Badge","XIcon","ChevronDownIcon","PopoverContent","Command","Button","CommandPrimitive","inputVariants","CommandList","Spinner","PlusIcon","CommandItem","CommandGroup","CheckIcon"],"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-C0nno01T.mjs ADDED Viewed

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