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

@customafk/lunas-ui 0.2.83 → 0.2.85

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 (262) hide show

package/dist/{payment-layout-BZtIcu-3.cjs.map → payment-layout-C38xIc2X.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-layout-BZtIcu-3.cjs","names":["TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Slot","Tooltip","TooltipTrigger","TooltipContent","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph","Button","MenuIcon","LunasLogo","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","LogOutIcon"],"sources":["../packages/components/layouts/payment-layout/components/sidebar.tsx","../packages/components/layouts/payment-layout/components/header.tsx","../packages/components/layouts/payment-layout/components/mobile-bottom-nav.tsx","../packages/components/layouts/payment-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' \| 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps \| null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\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\n // This sets the cookie to keep the sidebar state.\n // biome-ignore lint/suspicious/noDocumentCookie: true\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\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\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex h-dvh w-full', className)}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' \| 'right';\n variant?: 'sidebar' \| 'floating' \| 'inset';\n collapsible?: 'offcanvas' \| 'icon' \| 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop /}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative',\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) w-(--sidebar-width)',\n 'sm:h-[calc(var(--header-height)+0.5rem)]',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' \|\| variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex',\n 'fixed inset-y-0 top-14 z-10 shadow-nav',\n 'h-[calc(100dvh-3.5rem)] w-(--sidebar-width)',\n 'transition-[left,right,width] duration-200 ease-linear',\n side === 'left' && 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)-1)]',\n side === 'right' && 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)-1)]',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' \|\| variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className={cn(\n 'flex size-full flex-col',\n 'group-data-[variant=floating]:rounded-lg',\n 'group-data-[variant=floating]:border',\n 'group-data-[variant=floating]:border-sidebar-border',\n 'group-data-[variant=floating]:shadow-sm'\n )}\n >\n {children}\n </div>\n </div>\n </aside>\n );\n}\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\nfunction SidebarInset({ className, children, ...props }: React.ComponentProps<'main'>) {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"inset-shadow-sm flex-1\">{children}</div>\n </main>\n );\n}\n\nfunction SidebarInput({ 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}\n\nfunction SidebarHeader({ 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}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nfunction SidebarSeparator({ 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}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\nfunction SidebarGroupLabel({ 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] 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}\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-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n '[&>svg]:size-4',\n '[&>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\nfunction SidebarGroupContent({ 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}\n\nfunction SidebarMenu({ 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}\n\nfunction SidebarMenuItem({ 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}\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,width,height,padding]',\n 'hover:bg-sidebar-accent',\n 'hover:text-sidebar-accent-foreground',\n 'active:bg-sidebar-accent',\n 'active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none',\n 'disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none',\n 'aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted',\n 'data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent',\n 'data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12!',\n 'group-data-[collapsible=icon]:p-3!',\n 'group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6',\n '[&>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/80',\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\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string \| React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' \|\| isMobile} {...tooltip} />\n </Tooltip>\n );\n}\n\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-transform 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',\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 // Random width between 50 to 90%.\n const width = useMemo(() => {\n return `${Math.floor(Math.random() 40) + 50}%`;\n }, []);\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={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\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-sidebar-border border-l 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 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 Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","import { useCallback } from 'react';\n\nimport { LogOutIcon, MenuIcon, UserRoundIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport type { PaymentLayoutUser } from '../index';\nimport { useSidebar } from './sidebar';\nimport { Flex } from '../../flex';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { LunasLogo } from '@/components/features/logo';\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\ntype UserDataDisplayProps = {\n /** Unique identifier used to deterministically generate the avatar background colour. /\n uuid: string;\n /* Display name rendered as the primary line of the user card. /\n username: string;\n /* Email address rendered as the secondary, muted line below the username. /\n email: string;\n};\n\n/\n Displays a user identity card with a colour-hashed avatar, username, and email address.\n \n @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n \n <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n /\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n return (\n <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n <Avatar className=\"size-9 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\" className=\"hidden sm:flex\">\n <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n\nexport const PaymentLayoutHeader: React.FC<{\n user?: PaymentLayoutUser \| null;\n isLogin?: boolean;\n onLogin?: () => void;\n onLogout?: () => void;\n logo?: React.ReactNode;\n}> = ({ user, isLogin = true, onLogin, onLogout, 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 handleLogout = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onLogout?.();\n },\n [onLogout]\n );\n\n const handleLogin = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onLogin?.();\n },\n [onLogin]\n );\n\n return (\n <header\n data-slot=\"payment-layout-header\"\n className={cn(\n 'bg-card',\n // 'h-(--header-height)',\n 'h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5',\n 'flex items-center shadow-nav',\n 'transition-[width,height] ease-linear'\n )}\n >\n {isLogin && (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"hidden size-10 rounded-full transition-all hover:text-text-positive md:flex\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )}\n\n <div className=\"flex flex-1 items-center sm:ml-2.5\">{logo ?? <LunasLogo variant=\"horizontal\" size=\"xs\" />}</div>\n\n {user ? (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" color=\"muted\" className=\"gap-x-2 rounded-full px-2 transition-all hover:text-text-positive\">\n <UserDataDisplay uuid={user?.uuid ?? ''} username={user.fullname} email={user.email} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-56\">\n <DropdownMenuLabel className=\"font-normal\">\n <p className=\"font-medium\">{user.fullname}</p>\n <p className=\"text-muted-foreground text-xs\">{user.email}</p>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleLogout}>\n <LogOutIcon size={14} />\n Đăng xuất\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n ) : (\n <Button size=\"sm\" onClick={handleLogin}>\n Đăng nhập\n </Button>\n )}\n </header>\n );\n};\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useSidebar } from './sidebar';\n\ntype MobileBottomNavItem = {\n id: string;\n label: string;\n icon?: React.ReactNode;\n onClick?: () => void;\n};\n\ntype MobileBottomNavProps = {\n items: MobileBottomNavItem[];\n activeNavItemId?: string;\n};\n\nexport const MobileBottomNav: React.FC<MobileBottomNavProps> = ({ items, activeNavItemId }) => {\n const { isMobile } = useSidebar();\n\n if (!isMobile \|\| items.length === 0) return null;\n\n const visibleItems = items.slice(0, 5);\n\n return (\n <nav data-slot=\"mobile-bottom-nav\" className=\"fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-border border-t bg-card md:hidden\">\n {visibleItems.map(item => (\n <button\n key={item.id}\n type=\"button\"\n onClick={item.onClick}\n data-active={item.id === activeNavItemId}\n className={cn(\n 'flex flex-1 flex-col items-center justify-center gap-0.5',\n 'text-muted-foreground transition-colors',\n 'data-[active=true]:text-sidebar-primary',\n '[&>svg]:size-5 [&>svg]:shrink-0'\n )}\n >\n {item.icon}\n <span className=\"max-w-16 truncate text-[10px] leading-3\">{item.label}</span>\n </button>\n ))}\n </nav>\n );\n};\n","import { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { PaymentLayoutHeader } from './components/header';\nimport { MobileBottomNav } from './components/mobile-bottom-nav';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n} from './components/sidebar';\n\nexport type PaymentLayoutUser = {\n uuid?: string;\n /* Display name shown in the header and dropdown. /\n fullname: string;\n /* Email address shown in the user dropdown. /\n email: string;\n /* Optional avatar image URL; falls back to initials when omitted. /\n avatar?: string;\n};\n\n/\n Full-page payment application shell with a collapsible inset sidebar and a fixed header.\n * On mobile, the sidebar is replaced by a bottom navigation bar (up to 5 items).\n \n @example\n * ```tsx\n * import { PaymentLayout } from '@customafk/lunas-ui/layouts/payment-layout';\n * import { CreditCardIcon } from 'lucide-react';\n \n <PaymentLayout\n * activeNavItemId=\"transactions\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'payment',\n * label: 'Payment',\n * items: [\n * { id: 'transactions', label: 'Transactions', icon: <CreditCardIcon />, onClick: () => router.push('/transactions') },\n * ],\n * },\n * ],\n * }}\n * user={{ fullname: 'Nguyen Van A', email: 'a@example.com' }}\n * onLogin={() => setLoginOpen(true)}\n * onLogout={() => authService.logout()}\n * >\n * <TransactionsPage />\n * </PaymentLayout>\n * ```\n /\nexport const PaymentLayout: React.FC<\n React.PropsWithChildren<{\n /* ID of the currently active navigation item; matched against each item's `id` to apply the active style. /\n activeNavItemId?: string;\n /* Sidebar navigation definition; omitting this prop renders an empty sidebar. /\n sidebar?: {\n groupcontent: {\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 items: {\n /* Unique identifier for the nav item, used as React key and for active-state comparison. /\n id: string;\n /* Human-readable label rendered inside the sidebar button. /\n label: string;\n /* Optional icon element rendered to the left of the label. /\n icon?: React.ReactNode;\n /* Callback fired when the sidebar button is clicked. /\n onClick?: () => void;\n }[];\n }[];\n };\n /* Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. /\n user?: PaymentLayoutUser \| null;\n /* When false the sidebar and bottom nav are hidden entirely (e.g. unauthenticated state). Defaults to true. /\n isLogin?: boolean;\n /* Called when the login button in the header is clicked (only shown when `user` is absent). /\n onLogin?: () => void;\n /* Called when the logout item in the user dropdown is clicked. */\n onLogout?: () => void;\n }>\n> = ({ activeNavItemId, sidebar, user, isLogin = true, onLogin, onLogout, children }) => {\n const groupcontent = useMemo(() => {\n return sidebar?.groupcontent \|\| [];\n }, [sidebar]);\n\n const flatNavItems = useMemo(() => {\n return groupcontent.flatMap(group => group.items);\n }, [groupcontent]);\n\n return (\n <SidebarProvider>\n <PaymentLayoutHeader user={user} isLogin={isLogin} onLogin={onLogin} onLogout={onLogout} />\n\n {isLogin && (\n <Sidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groupcontent.map(group => {\n return (\n <SidebarGroup key={group.id}>\n <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {group.items.map(item => {\n return (\n <SidebarMenuItem key={item.id}>\n <SidebarMenuButton\n isActive={item.id === activeNavItemId}\n onClick={event => {\n item.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n {item.icon}\n {item.label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n );\n })}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n );\n })}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-muted-foreground text-xs\">Copyright © 2025, Lunas.</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </Sidebar>\n )}\n\n <SidebarInset>\n <section className=\"relative size-full\">\n <div className={cn('absolute inset-0 overflow-y-auto', isLogin && 'pb-16 md:pb-0')}>{children}</div>\n </section>\n </SidebarInset>\n\n {isLogin && <MobileBottomNav items={flatNavItems} activeNavItemId={activeNavItemId} />}\n </SidebarProvider>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"payment-layout-C38xIc2X.cjs","names":["TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Slot","Tooltip","TooltipTrigger","TooltipContent","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph","Button","MenuIcon","LunasLogo","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","LogOutIcon"],"sources":["../packages/components/layouts/payment-layout/components/sidebar.tsx","../packages/components/layouts/payment-layout/components/header.tsx","../packages/components/layouts/payment-layout/components/mobile-bottom-nav.tsx","../packages/components/layouts/payment-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' \| 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps \| null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\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\n // This sets the cookie to keep the sidebar state.\n // biome-ignore lint/suspicious/noDocumentCookie: true\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\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\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex h-dvh w-full', className)}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' \| 'right';\n variant?: 'sidebar' \| 'floating' \| 'inset';\n collapsible?: 'offcanvas' \| 'icon' \| 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop /}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative',\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) w-(--sidebar-width)',\n 'sm:h-[calc(var(--header-height)+0.5rem)]',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' \|\| variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex',\n 'fixed inset-y-0 top-14 z-10 shadow-nav',\n 'h-[calc(100dvh-3.5rem)] w-(--sidebar-width)',\n 'transition-[left,right,width] duration-200 ease-linear',\n side === 'left' && 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)-1)]',\n side === 'right' && 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)-1)]',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' \|\| variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className={cn(\n 'flex size-full flex-col',\n 'group-data-[variant=floating]:rounded-lg',\n 'group-data-[variant=floating]:border',\n 'group-data-[variant=floating]:border-sidebar-border',\n 'group-data-[variant=floating]:shadow-sm'\n )}\n >\n {children}\n </div>\n </div>\n </aside>\n );\n}\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\nfunction SidebarInset({ className, children, ...props }: React.ComponentProps<'main'>) {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"inset-shadow-sm flex-1\">{children}</div>\n </main>\n );\n}\n\nfunction SidebarInput({ 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}\n\nfunction SidebarHeader({ 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}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nfunction SidebarSeparator({ 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}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\nfunction SidebarGroupLabel({ 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] 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}\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-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n '[&>svg]:size-4',\n '[&>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\nfunction SidebarGroupContent({ 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}\n\nfunction SidebarMenu({ 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}\n\nfunction SidebarMenuItem({ 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}\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,width,height,padding]',\n 'hover:bg-sidebar-accent',\n 'hover:text-sidebar-accent-foreground',\n 'active:bg-sidebar-accent',\n 'active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none',\n 'disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none',\n 'aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted',\n 'data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent',\n 'data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12!',\n 'group-data-[collapsible=icon]:p-3!',\n 'group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6',\n '[&>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/80',\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\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string \| React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' \|\| isMobile} {...tooltip} />\n </Tooltip>\n );\n}\n\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-transform 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',\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 // Random width between 50 to 90%.\n const width = useMemo(() => {\n return `${Math.floor(Math.random() 40) + 50}%`;\n }, []);\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={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\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-sidebar-border border-l 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 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 Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","import { useCallback } from 'react';\n\nimport { LogOutIcon, MenuIcon, UserRoundIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport type { PaymentLayoutUser } from '../index';\nimport { useSidebar } from './sidebar';\nimport { Flex } from '../../flex';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { LunasLogo } from '@/components/features/logo';\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\ntype UserDataDisplayProps = {\n /** Unique identifier used to deterministically generate the avatar background colour. /\n uuid: string;\n /* Display name rendered as the primary line of the user card. /\n username: string;\n /* Email address rendered as the secondary, muted line below the username. /\n email: string;\n};\n\n/\n Displays a user identity card with a colour-hashed avatar, username, and email address.\n \n @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n \n <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n /\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n return (\n <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n <Avatar className=\"size-9 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\" className=\"hidden sm:flex\">\n <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n\nexport const PaymentLayoutHeader: React.FC<{\n user?: PaymentLayoutUser \| null;\n isLogin?: boolean;\n onLogin?: () => void;\n onLogout?: () => void;\n logo?: React.ReactNode;\n}> = ({ user, isLogin = true, onLogin, onLogout, 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 handleLogout = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onLogout?.();\n },\n [onLogout]\n );\n\n const handleLogin = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onLogin?.();\n },\n [onLogin]\n );\n\n return (\n <header\n data-slot=\"payment-layout-header\"\n className={cn(\n 'bg-card',\n // 'h-(--header-height)',\n 'h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5',\n 'flex items-center shadow-nav',\n 'transition-[width,height] ease-linear'\n )}\n >\n {isLogin && (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"hidden size-10 rounded-full transition-all hover:text-text-positive md:flex\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )}\n\n <div className=\"flex flex-1 items-center sm:ml-2.5\">{logo ?? <LunasLogo variant=\"horizontal\" size=\"xs\" />}</div>\n\n {user ? (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" color=\"muted\" className=\"gap-x-2 rounded-full px-2 transition-all hover:text-text-positive\">\n <UserDataDisplay uuid={user?.uuid ?? ''} username={user.fullname} email={user.email} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-56\">\n <DropdownMenuLabel className=\"font-normal\">\n <p className=\"font-medium\">{user.fullname}</p>\n <p className=\"text-muted-foreground text-xs\">{user.email}</p>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleLogout}>\n <LogOutIcon size={14} />\n Đăng xuất\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n ) : (\n <Button size=\"sm\" onClick={handleLogin}>\n Đăng nhập\n </Button>\n )}\n </header>\n );\n};\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useSidebar } from './sidebar';\n\ntype MobileBottomNavItem = {\n id: string;\n label: string;\n icon?: React.ReactNode;\n onClick?: () => void;\n};\n\ntype MobileBottomNavProps = {\n items: MobileBottomNavItem[];\n activeNavItemId?: string;\n};\n\nexport const MobileBottomNav: React.FC<MobileBottomNavProps> = ({ items, activeNavItemId }) => {\n const { isMobile } = useSidebar();\n\n if (!isMobile \|\| items.length === 0) return null;\n\n const visibleItems = items.slice(0, 5);\n\n return (\n <nav data-slot=\"mobile-bottom-nav\" className=\"fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-border border-t bg-card md:hidden\">\n {visibleItems.map(item => (\n <button\n key={item.id}\n type=\"button\"\n onClick={item.onClick}\n data-active={item.id === activeNavItemId}\n className={cn(\n 'flex flex-1 flex-col items-center justify-center gap-0.5',\n 'text-muted-foreground transition-colors',\n 'data-[active=true]:text-sidebar-primary',\n '[&>svg]:size-5 [&>svg]:shrink-0'\n )}\n >\n {item.icon}\n <span className=\"max-w-16 truncate text-[10px] leading-3\">{item.label}</span>\n </button>\n ))}\n </nav>\n );\n};\n","import { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { PaymentLayoutHeader } from './components/header';\nimport { MobileBottomNav } from './components/mobile-bottom-nav';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n} from './components/sidebar';\n\nexport type PaymentLayoutUser = {\n uuid?: string;\n /* Display name shown in the header and dropdown. /\n fullname: string;\n /* Email address shown in the user dropdown. /\n email: string;\n /* Optional avatar image URL; falls back to initials when omitted. /\n avatar?: string;\n};\n\n/\n Full-page payment application shell with a collapsible inset sidebar and a fixed header.\n * On mobile, the sidebar is replaced by a bottom navigation bar (up to 5 items).\n \n @example\n * ```tsx\n * import { PaymentLayout } from '@customafk/lunas-ui/layouts/payment-layout';\n * import { CreditCardIcon } from 'lucide-react';\n \n <PaymentLayout\n * activeNavItemId=\"transactions\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'payment',\n * label: 'Payment',\n * items: [\n * { id: 'transactions', label: 'Transactions', icon: <CreditCardIcon />, onClick: () => router.push('/transactions') },\n * ],\n * },\n * ],\n * }}\n * user={{ fullname: 'Nguyen Van A', email: 'a@example.com' }}\n * onLogin={() => setLoginOpen(true)}\n * onLogout={() => authService.logout()}\n * >\n * <TransactionsPage />\n * </PaymentLayout>\n * ```\n /\nexport const PaymentLayout: React.FC<\n React.PropsWithChildren<{\n /* ID of the currently active navigation item; matched against each item's `id` to apply the active style. /\n activeNavItemId?: string;\n /* Sidebar navigation definition; omitting this prop renders an empty sidebar. /\n sidebar?: {\n groupcontent: {\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 items: {\n /* Unique identifier for the nav item, used as React key and for active-state comparison. /\n id: string;\n /* Human-readable label rendered inside the sidebar button. /\n label: string;\n /* Optional icon element rendered to the left of the label. /\n icon?: React.ReactNode;\n /* Callback fired when the sidebar button is clicked. /\n onClick?: () => void;\n }[];\n }[];\n };\n /* Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. /\n user?: PaymentLayoutUser \| null;\n /* When false the sidebar and bottom nav are hidden entirely (e.g. unauthenticated state). Defaults to true. /\n isLogin?: boolean;\n /* Called when the login button in the header is clicked (only shown when `user` is absent). /\n onLogin?: () => void;\n /* Called when the logout item in the user dropdown is clicked. */\n onLogout?: () => void;\n }>\n> = ({ activeNavItemId, sidebar, user, isLogin = true, onLogin, onLogout, children }) => {\n const groupcontent = useMemo(() => {\n return sidebar?.groupcontent \|\| [];\n }, [sidebar]);\n\n const flatNavItems = useMemo(() => {\n return groupcontent.flatMap(group => group.items);\n }, [groupcontent]);\n\n return (\n <SidebarProvider>\n <PaymentLayoutHeader user={user} isLogin={isLogin} onLogin={onLogin} onLogout={onLogout} />\n\n {isLogin && (\n <Sidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groupcontent.map(group => {\n return (\n <SidebarGroup key={group.id}>\n <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {group.items.map(item => {\n return (\n <SidebarMenuItem key={item.id}>\n <SidebarMenuButton\n isActive={item.id === activeNavItemId}\n onClick={event => {\n item.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n {item.icon}\n {item.label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n );\n })}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n );\n })}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-muted-foreground text-xs\">Copyright © 2025, Lunas.</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </Sidebar>\n )}\n\n <SidebarInset>\n <section className=\"relative size-full\">\n <div className={cn('absolute inset-0 overflow-y-auto', isLogin && 'pb-16 md:pb-0')}>{children}</div>\n </section>\n </SidebarInset>\n\n {isLogin && <MobileBottomNav items={flatNavItems} activeNavItemId={activeNavItemId} />}\n </SidebarProvider>\n );\n};\n"],"mappings":"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"}

package/dist/popover-form-Ba_Nw79b.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-DCB2addt.cjs"),n=require("./submit-button-CvINfld5.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("radix-ui");const o=({title:o,open:s,contentClassName:c,onOpenChange:l,children:u})=>{let d=t.it();return(0,i.jsx)(a.Dialog.Root,{"data-slot":`dialog`,open:s,onOpenChange:l,children:(0,i.jsxs)(a.Dialog.Portal,{"data-slot":`dialog-portal`,children:[(0,i.jsx)(a.Dialog.Overlay,{"data-slot":`dialog-overlay`,className:(0,r.cn)(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),(0,i.jsx)(a.Dialog.Content,{"data-slot":`dialog-content`,className:(0,r.cn)(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:(0,i.jsxs)(`section`,{className:`relative flex size-full flex-col`,children:[(0,i.jsx)(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:(0,i.jsx)(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:o})}),(0,i.jsx)(`div`,{className:(0,r.cn)(`flex flex-1 flex-col overflow-y-auto py-4`,c),children:u}),(0,i.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[(0,i.jsx)(d.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine\|\|!e.isValid\|\|e.isValidating\|\|e.isSubmitting\|\|!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,i.jsx)(n.t,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>d.handleSubmit()})}),(0,i.jsx)(d.Subscribe,{selector:e=>({disabled:e.isPristine\|\|e.isSubmitting}),children:({disabled:e})=>(0,i.jsx)(n.n,{disabled:e,className:`w-full`,onClick:()=>{d.reset(),l?.(!1)}})})]}),(0,i.jsx)(a.Dialog.Close,{asChild:!0,children:(0,i.jsx)(e.t,{className:`absolute top-2.5 right-3`})})]})})]})})};exports.TanStackPopoverForm=o;
2	+ //# sourceMappingURL=popover-form-Ba_Nw79b.cjs.map

package/dist/{popover-form-Ch_iMMSm.cjs.map → popover-form-Ba_Nw79b.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-form-~~Ch_iMMSm~~.cjs","names":["useTanStackFormContext","DialogPrimitive","SubmitButton","CancelButton","CloseButton"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n \n @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackPopoverForm\n * title=\"Edit Profile\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <EmailField />\n * </TanStackPopoverForm>\n /\nexport const TanStackPopoverForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the panel header. /\n title: string;\n /* Controlled open state of the popover dialog. /\n open?: boolean;\n /* Additional CSS class names applied to the scrollable content area. /\n contentClassName?: string;\n /* Callback fired when the open state changes. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n return (\n <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n 'data-[state=open]:animate-in data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n )}\n />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n 'duration-300',\n 'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n )}\n >\n <section className=\"relative flex size-full flex-col\">\n <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n </header>\n\n <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n )}\n />\n <form.Subscribe\n selector={state => ({ disabled: state.isPristine \|\| state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n className=\"w-full\"\n onClick={() => {\n form.reset();\n onOpenChange?.(false);\n }}\n />\n )}\n />\n </div>\n\n <DialogPrimitive.Close asChild>\n <CloseButton className=\"absolute top-2.5 right-3\" />\n </DialogPrimitive.Close>\n </section>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n};\n"],"mappings":"iOAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAOA,EAAAA,~~EAAuB~~,EAEpC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,UAAA,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,kDACA,yDACA,8DACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,yHACA,eACA,+FACA,qGACF,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,8DAChB,UAAA,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,4CAA6C,CAAgB,EAAI,UAAc,CAAA,GAElG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,KAEL,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAgB,MAAjB,CAAuB,QAAA,GACrB,UAAA,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}
1	+ {"version":3,"file":"popover-form-Ba_Nw79b.cjs","names":["useTanStackFormContext","DialogPrimitive","SubmitButton","CancelButton","CloseButton"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n \n @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackPopoverForm\n * title=\"Edit Profile\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <EmailField />\n * </TanStackPopoverForm>\n /\nexport const TanStackPopoverForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the panel header. /\n title: string;\n /* Controlled open state of the popover dialog. /\n open?: boolean;\n /* Additional CSS class names applied to the scrollable content area. /\n contentClassName?: string;\n /* Callback fired when the open state changes. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n return (\n <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n 'data-[state=open]:animate-in data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n )}\n />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n 'duration-300',\n 'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n )}\n >\n <section className=\"relative flex size-full flex-col\">\n <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n </header>\n\n <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n )}\n />\n <form.Subscribe\n selector={state => ({ disabled: state.isPristine \|\| state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n className=\"w-full\"\n onClick={() => {\n form.reset();\n onOpenChange?.(false);\n }}\n />\n )}\n />\n </div>\n\n <DialogPrimitive.Close asChild>\n <CloseButton className=\"absolute top-2.5 right-3\" />\n </DialogPrimitive.Close>\n </section>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n};\n"],"mappings":"iOAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAOA,EAAAA,GAAuB,EAEpC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,UAAA,EAAA,EAAA,KAAA,CAACA,EAAAA,OAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,kDACA,yDACA,8DACF,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,QAAjB,CACE,YAAU,iBACV,WAAA,EAAA,EAAA,GAAA,CACE,yHACA,eACA,+FACA,qGACF,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,8DAChB,UAAA,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,4CAA6C,CAAgB,EAAI,UAAc,CAAA,GAElG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,KAEL,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAgB,MAAjB,CAAuB,QAAA,GACrB,UAAA,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/popover-form-C9mNInr2.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{it as e}from"./tanstack-form-BhKAn9I0.mjs";import{t}from"./close-DYJZ8fkh.mjs";import{n,t as r}from"./submit-button-CGBaPzE9.mjs";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Dialog as s}from"radix-ui";const c=({title:c,open:l,contentClassName:u,onOpenChange:d,children:f})=>{let p=e();return a(s.Root,{"data-slot":`dialog`,open:l,onOpenChange:d,children:o(s.Portal,{"data-slot":`dialog-portal`,children:[a(s.Overlay,{"data-slot":`dialog-overlay`,className:i(`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm`,`data-[state=open]:animate-in data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:fade-out`)}),a(s.Content,{"data-slot":`dialog-content`,className:i(`fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border`,`duration-300`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out`),children:o(`section`,{className:`relative flex size-full flex-col`,children:[a(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:a(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:c})}),a(`div`,{className:i(`flex flex-1 flex-col overflow-y-auto py-4`,u),children:f}),o(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[a(p.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine\|\|!e.isValid\|\|e.isValidating\|\|e.isSubmitting\|\|!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>a(r,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>p.handleSubmit()})}),a(p.Subscribe,{selector:e=>({disabled:e.isPristine\|\|e.isSubmitting}),children:({disabled:e})=>a(n,{disabled:e,className:`w-full`,onClick:()=>{p.reset(),d?.(!1)}})})]}),a(s.Close,{asChild:!0,children:a(t,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
2	+ //# sourceMappingURL=popover-form-C9mNInr2.mjs.map

package/dist/{popover-form-CeRVpy1B.mjs.map → popover-form-C9mNInr2.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-form-~~CeRVpy1B~~.mjs","names":["DialogPrimitive"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n \n @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackPopoverForm\n * title=\"Edit Profile\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <EmailField />\n * </TanStackPopoverForm>\n /\nexport const TanStackPopoverForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the panel header. /\n title: string;\n /* Controlled open state of the popover dialog. /\n open?: boolean;\n /* Additional CSS class names applied to the scrollable content area. /\n contentClassName?: string;\n /* Callback fired when the open state changes. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n return (\n <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n 'data-[state=open]:animate-in data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n )}\n />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n 'duration-300',\n 'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n )}\n >\n <section className=\"relative flex size-full flex-col\">\n <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n </header>\n\n <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n )}\n />\n <form.Subscribe\n selector={state => ({ disabled: state.isPristine \|\| state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n className=\"w-full\"\n onClick={() => {\n form.reset();\n onOpenChange?.(false);\n }}\n />\n )}\n />\n </div>\n\n <DialogPrimitive.Close asChild>\n <CloseButton className=\"absolute top-2.5 right-3\" />\n </DialogPrimitive.Close>\n </section>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n};\n"],"mappings":"~~qRAyBA~~,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAO,EAAuB,EAEpC,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,SAAA,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,kDACA,yDACA,8DACF,CACD,CAAA,EACD,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,yHACA,eACA,+FACA,qGACF,EAEA,SAAA,EAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,CACE,EAAC,SAAD,CAAQ,UAAU,8DAChB,SAAA,EAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,EAER,EAAC,MAAD,CAAK,UAAW,EAAG,4CAA6C,CAAgB,EAAI,UAAc,CAAA,EAElG,EAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,IAEL,EAACA,EAAgB,MAAjB,CAAuB,QAAA,GACrB,SAAA,EAAC,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}
1	+ {"version":3,"file":"popover-form-C9mNInr2.mjs","names":["DialogPrimitive"],"sources":["../packages/components/features/tanstack-form/components/forms/popover-form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CloseButton } from '@/components/ui/buttons/close';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a slide-in side-panel dialog that wraps a TanStack form with built-in submit and cancel actions.\n \n @example\n * import { TanStackPopoverForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackPopoverForm\n * title=\"Edit Profile\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <EmailField />\n * </TanStackPopoverForm>\n /\nexport const TanStackPopoverForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the panel header. /\n title: string;\n /* Controlled open state of the popover dialog. /\n open?: boolean;\n /* Additional CSS class names applied to the scrollable content area. /\n contentClassName?: string;\n /* Callback fired when the open state changes. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, open, contentClassName, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n return (\n <DialogPrimitive.Root data-slot=\"dialog\" open={open} onOpenChange={onOpenChange}>\n <DialogPrimitive.Portal data-slot=\"dialog-portal\">\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',\n 'data-[state=open]:animate-in data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out'\n )}\n />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-4 right-4 z-50 h-[calc(100dvh-2rem)] min-w-sm max-w-xl rounded-md bg-background shadow-lg ring-1 ring-border',\n 'duration-300',\n 'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:fade-in',\n 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:fade-out'\n )}\n >\n <section className=\"relative flex size-full flex-col\">\n <header className=\"flex h-14 shrink-0 items-center border-b border-border px-5\">\n <h2 className=\"font-semibold text-base tracking-tight text-text-positive\">{title}</h2>\n </header>\n\n <div className={cn('flex flex-1 flex-col overflow-y-auto py-4', contentClassName)}>{children}</div>\n\n <div className=\"flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3\">\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} className=\"w-full\" onClick={() => form.handleSubmit()} />\n )}\n />\n <form.Subscribe\n selector={state => ({ disabled: state.isPristine \|\| state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n className=\"w-full\"\n onClick={() => {\n form.reset();\n onOpenChange?.(false);\n }}\n />\n )}\n />\n </div>\n\n <DialogPrimitive.Close asChild>\n <CloseButton className=\"absolute top-2.5 right-3\" />\n </DialogPrimitive.Close>\n </section>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n};\n"],"mappings":"iRAyBA,MAAa,GAWR,CAAE,QAAO,OAAM,mBAAkB,eAAc,cAAe,CACjE,IAAM,EAAO,EAAuB,EAEpC,OACE,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAe,OAAoB,eACjE,SAAA,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAlC,SAAA,CACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,kDACA,yDACA,8DACF,CACD,CAAA,EACD,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,yHACA,eACA,+FACA,qGACF,EAEA,SAAA,EAAC,UAAD,CAAS,UAAU,mCAAnB,SAAA,CACE,EAAC,SAAD,CAAQ,UAAU,8DAChB,SAAA,EAAC,KAAD,CAAI,UAAU,4DAA6D,SAAA,CAAU,CAAA,CAC/E,CAAA,EAER,EAAC,MAAD,CAAK,UAAW,EAAG,4CAA6C,CAAgB,EAAI,UAAc,CAAA,EAElG,EAAC,MAAD,CAAK,UAAU,gEAAf,SAAA,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAU,UAAU,SAAS,YAAe,EAAK,aAAa,CAAI,CAAA,CAEzH,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAc,EAAM,YAAa,GACvE,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,UAAU,SACV,YAAe,CACb,EAAK,MAAM,EACX,IAAe,EAAK,CACtB,CACD,CAAA,CAEJ,CAAA,CACE,IAEL,EAACA,EAAgB,MAAjB,CAAuB,QAAA,GACrB,SAAA,EAAC,EAAD,CAAa,UAAU,0BAA4B,CAAA,CAC9B,CAAA,CAChB,GACc,CAAA,CACH,GACJ,CAAA,CAE1B"}

package/dist/radio-group-field-BCJWamjd.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./tanstack-form-DCB2addt.cjs"),t=require("./ui/radio-group.cjs");let n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,description:o,orientation:s,options:c,tooltip:l,helperText:u})=>{let d=e.rt(),f=(0,i.useStore)(d.form.store,({isSubmitting:e})=>e);return(0,r.jsxs)(e.X,{className:`px-4`,children:[(0,r.jsxs)(e.G,{orientation:s,className:`flex-col gap-2`,children:[(0,r.jsxs)(e.K,{children:[(0,r.jsxs)(e.Z,{children:[a,l&&(0,r.jsx)(e.nt,{tooltip:l})]}),(0,r.jsx)(e.J,{children:o}),(0,r.jsx)(e.$,{isShow:!!u,children:u})]}),(0,r.jsx)(e.q,{children:(0,r.jsx)(t.RadioGroup,{value:d.state.value??``,className:`w-full`,onValueChange:d.handleChange,children:c.map(i=>(0,r.jsx)(e.Z,{className:(0,n.cn)(`h-fit`,d.state.value===i.value&&`border-primary-weak! bg-primary-bg-subtle`,f&&`pointer-events-none bg-muted-muted opacity-60`,d.state.value===i.value&&f&&`border-border-strong!`),children:(0,r.jsxs)(e.G,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[(0,r.jsx)(t.RadioGroupItem,{value:i.value,className:`mt-0.5 shrink-0`}),(0,r.jsxs)(e.K,{className:`gap-0.5!`,children:[(0,r.jsx)(e.tt,{children:i.label}),(0,r.jsx)(e.J,{className:`text-xs`,children:i.description})]})]})},i.value))})})]}),(0,r.jsx)(e.et,{})]})};exports.RadioGroupField=a;
2	+ //# sourceMappingURL=radio-group-field-BCJWamjd.cjs.map

package/dist/{radio-group-field-BFhBfzoT.cjs.map → radio-group-field-BCJWamjd.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group-field-~~BFhBfzoT~~.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTitle,\n FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n const field = useTanStackFieldContext<string \| null>();\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} className=\"flex-col gap-2\">\n <FieldContent>\n <FieldLabel>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContent>\n\n <FieldContentMain>\n <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n {options.map(option => (\n <FieldLabel\n key={option.value}\n className={cn(\n 'h-fit',\n field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n field.state.value === option.value && isSubmitting && 'border-border-strong!'\n )}\n >\n <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n <FieldContent className=\"gap-0.5!\">\n <FieldTitle>{option.label}</FieldTitle>\n <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n </FieldContent>\n </Field>\n </FieldLabel>\n ))}\n </RadioGroup>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"~~qOAuBA~~,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,~~EAAuC~~,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~WAAD~~,CAAY,UAAU,OAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~MAAD~~,CAAoB,cAAa,UAAU,iBAA3C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~aAAD~~,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~WAAD~~,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,~~aAAD~~,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,~~iBAAD~~,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,~~UAAD~~,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,~~iBAAD~~,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,~~WAAD~~,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,UAAA,EAAA,EAAA,KAAA,CAACF,EAAAA,~~MAAD~~,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,~~aAAD~~,CAAc,UAAU,WAAxB,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,~~WAAD~~,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,~~iBAAD~~,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,~~eAAD~~,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"radio-group-field-BCJWamjd.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTitle,\n FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n const field = useTanStackFieldContext<string \| null>();\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} className=\"flex-col gap-2\">\n <FieldContent>\n <FieldLabel>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContent>\n\n <FieldContentMain>\n <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n {options.map(option => (\n <FieldLabel\n key={option.value}\n className={cn(\n 'h-fit',\n field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n field.state.value === option.value && isSubmitting && 'border-border-strong!'\n )}\n >\n <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n <FieldContent className=\"gap-0.5!\">\n <FieldTitle>{option.label}</FieldTitle>\n <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n </FieldContent>\n </Field>\n </FieldLabel>\n ))}\n </RadioGroup>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"mMAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,GAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,OAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,EAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,UAAA,EAAA,EAAA,KAAA,CAACF,EAAAA,EAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,EAAD,CAAc,UAAU,WAAxB,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,GAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/radio-group-field-DYqU_6hW.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{$ as e,G as t,J as n,K as r,X as i,Z as a,et as o,nt as s,q as c,rt as l,tt as u}from"./tanstack-form-BhKAn9I0.mjs";import{RadioGroup as d,RadioGroupItem as f}from"./ui/radio-group.mjs";import{cn as p}from"@customafk/react-toolkit/utils";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useStore as g}from"@tanstack/react-form";const _=({label:_,description:v,orientation:y,options:b,tooltip:x,helperText:S})=>{let C=l(),w=g(C.form.store,({isSubmitting:e})=>e);return h(i,{className:`px-4`,children:[h(t,{orientation:y,className:`flex-col gap-2`,children:[h(r,{children:[h(a,{children:[_,x&&m(s,{tooltip:x})]}),m(n,{children:v}),m(e,{isShow:!!S,children:S})]}),m(c,{children:m(d,{value:C.state.value??``,className:`w-full`,onValueChange:C.handleChange,children:b.map(e=>m(a,{className:p(`h-fit`,C.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,w&&`pointer-events-none bg-muted-muted opacity-60`,C.state.value===e.value&&w&&`border-border-strong!`),children:h(t,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[m(f,{value:e.value,className:`mt-0.5 shrink-0`}),h(r,{className:`gap-0.5!`,children:[m(u,{children:e.label}),m(n,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),m(o,{})]})};export{_ as RadioGroupField};
2	+ //# sourceMappingURL=radio-group-field-DYqU_6hW.mjs.map

package/dist/{radio-group-field-Iwo2Q2Ig.mjs.map → radio-group-field-DYqU_6hW.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group-field-~~Iwo2Q2Ig~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTitle,\n FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n const field = useTanStackFieldContext<string \| null>();\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} className=\"flex-col gap-2\">\n <FieldContent>\n <FieldLabel>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContent>\n\n <FieldContentMain>\n <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n {options.map(option => (\n <FieldLabel\n key={option.value}\n className={cn(\n 'h-fit',\n field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n field.state.value === option.value && isSubmitting && 'border-border-strong!'\n )}\n >\n <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n <FieldContent className=\"gap-0.5!\">\n <FieldTitle>{option.label}</FieldTitle>\n <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n </FieldContent>\n </Field>\n </FieldLabel>\n ))}\n </RadioGroup>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"~~6dAuBA~~,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,OAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,SAAA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,WAAxB,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"radio-group-field-DYqU_6hW.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTitle,\n FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n const field = useTanStackFieldContext<string \| null>();\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} className=\"flex-col gap-2\">\n <FieldContent>\n <FieldLabel>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContent>\n\n <FieldContentMain>\n <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n {options.map(option => (\n <FieldLabel\n key={option.value}\n className={cn(\n 'h-fit',\n field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n field.state.value === option.value && isSubmitting && 'border-border-strong!'\n )}\n >\n <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n <FieldContent className=\"gap-0.5!\">\n <FieldTitle>{option.label}</FieldTitle>\n <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n </FieldContent>\n </Field>\n </FieldLabel>\n ))}\n </RadioGroup>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"uVAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,OAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,SAAA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,WAAxB,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{resizable-CNqPu4Ck.d.cts → resizable-DTnfCua-.d.cts} RENAMED Viewed

@@ -35,7 +35,7 @@ declare const ResizablePanelGroup: import("react").NamedExoticComponent<Omit<imp
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
 /** An individual resizable panel within a ResizablePanelGroup. */
-declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLButtonElement | HTMLLabelElement | HTMLFieldSetElement | HTMLLegendElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLDivElement | HTMLParagraphElement | HTMLButtonElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -60,4 +60,4 @@ declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("
 declare const ResizableHandle: import("react").NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
-//# sourceMappingURL=resizable-CNqPu4Ck.d.cts.map
+//# sourceMappingURL=resizable-DTnfCua-.d.cts.map

package/dist/{resizable-CNqPu4Ck.d.mts → resizable-DTnfCua-.d.mts} RENAMED Viewed

@@ -35,7 +35,7 @@ declare const ResizablePanelGroup: import("react").NamedExoticComponent<Omit<imp
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
 /** An individual resizable panel within a ResizablePanelGroup. */
-declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLButtonElement | HTMLLabelElement | HTMLFieldSetElement | HTMLLegendElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLDivElement | HTMLParagraphElement | HTMLButtonElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -60,4 +60,4 @@ declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("
 declare const ResizableHandle: import("react").NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
-//# sourceMappingURL=resizable-CNqPu4Ck.d.mts.map
+//# sourceMappingURL=resizable-DTnfCua-.d.mts.map

package/dist/rolldown-runtime-DWNI8pZO.cjs ADDED Viewed

@@ -0,0 +1 @@

+ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/select-field-D7Ny2Qne.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{$ as e,G as t,J as n,K as r,X as i,Y as a,Z as o,et as s,nt as ee,q as c,rt as l}from"./tanstack-form-BhKAn9I0.mjs";import{Dialog as u,DialogClose as d,DialogOverlay as f,DialogPortal as p}from"./ui/dialog.mjs";import{Select as te,SelectContent as m,SelectItem as h,SelectTrigger as g,SelectValue as _}from"./ui/select.mjs";import{ChevronDownIcon as v,PackagePlusIcon as y,XIcon as b}from"lucide-react";import{memo as x,useId as S,useState as C}from"react";import{cn as w}from"@customafk/react-toolkit/utils";import{Fragment as T,jsx as E,jsxs as D}from"react/jsx-runtime";import{Dialog as O}from"radix-ui";import{useStore as k}from"@tanstack/react-form";import{useIsMobile as A}from"@customafk/react-toolkit/hooks/useMobile";const j=x(({label:x,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,options:F,helperText:I,clearable:L=!1,required:R=!1,disabled:z=!1,showErrorMessage:B=!0})=>{let V=S(),H=l(),U=A(),[W,G]=C(!1),K=k(H.form.store,({isSubmitting:e})=>e),q=z\|\|K,J=H.state.meta.isDirty\|\|H.state.meta.isTouched,Y=J&&!H.state.meta.isValid,X=R&&H.state.value===null,Z=L&&!!H.state.value&&!q,Q=F.find(e=>e.value===H.state.value)?.label,$=()=>{H.handleChange(null),H.handleBlur()};return D(i,{className:`gap-y-4 px-4`,children:[D(t,{orientation:N,"data-invalid":Y,children:[D(r,{children:[D(o,{htmlFor:H.name,"aria-required":X,children:[x,P&&E(ee,{tooltip:P})]}),E(n,{children:j})]}),D(c,{className:`flex flex-col`,children:[U?D(T,{children:[D(`button`,{id:H.name,type:`button`,disabled:q,"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,onClick:()=>G(!0),className:w(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,Y&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!H.state.value&&`text-text-positive-muted`),children:[E(`span`,{className:`line-clamp-1`,children:Q??M}),E(v,{size:16,className:`shrink-0 opacity-50`})]}),E(u,{open:W,onOpenChange:e=>{G(e),e\|\|H.handleBlur()},children:D(p,{children:[E(f,{}),D(O.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:w(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[D(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[E(`span`,{className:`font-semibold text-sm text-text-positive`,children:x??M??`Chọn một tùy chọn`}),E(d,{asChild:!0,children:E(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:E(b,{size:16})})})]}),D(`div`,{className:`flex flex-col overflow-y-auto`,children:[Z&&E(d,{asChild:!0,children:D(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:$,children:[E(b,{size:14}),`Xóa lựa chọn`]})}),F.length>0?F.map(e=>E(d,{asChild:!0,children:E(`button`,{type:`button`,className:w(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,H.state.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{H.handleChange(e.value),H.handleBlur()},children:e.label})},e.value)):D(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[E(y,{strokeWidth:1}),`Không có tùy chọn`]})]}),E(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):D(`div`,{className:`relative`,children:[D(te,{value:H.state.value??``,disabled:q,onValueChange:H.handleChange,children:[E(g,{"aria-invalid":Y?`true`:void 0,"aria-describedby":V,onBlur:H.handleBlur,children:E(_,{placeholder:M})}),E(m,{children:F.length>0?F.map(e=>E(h,{value:e.value,children:e.label},e.value)):D(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[E(y,{strokeWidth:1}),`No options available`]})})]}),Z&&E(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:$,children:E(b,{"aria-hidden":`true`})})]}),J&&B&&E(a,{id:V,className:`mt-1`,errors:H.state.meta.errors}),E(e,{isShow:!!I,children:I})]})]}),E(s,{})]})});j.displayName=`SelectField`;export{j as SelectField};
2	+ //# sourceMappingURL=select-field-D7Ny2Qne.mjs.map

package/dist/{select-field-NJgDDCO2.mjs.map → select-field-D7Ny2Qne.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-field-NJgDDCO2.mjs","names":["Dialog","RadixDialog","Select"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n options,\n helperText,\n clearable = false,\n required = false,\n disabled = false,\n showErrorMessage = true,\n }) => {\n const errorId = useId();\n const field = useTanStackFieldContext<string \| null>();\n const isMobile = useIsMobile();\n const [dialogOpen, setDialogOpen] = useState(false);\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _invalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _showClear = clearable && !!field.state.value && !isDisabled;\n\n const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n const onClear = () => {\n field.handleChange(null);\n field.handleBlur();\n };\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation={orientation} data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain className=\"flex flex-col\">\n {isMobile ? (\n <>\n <button\n id={field.name}\n type=\"button\"\n disabled={isDisabled}\n aria-invalid={_invalid ? 'true' : undefined}\n aria-describedby={errorId}\n onBlur={field.handleBlur}\n onClick={() => setDialogOpen(true)}\n className={cn(\n 'flex w-full items-center justify-between',\n 'outline-1 outline-border -outline-offset-1',\n 'gap-2 rounded bg-transparent px-3 py-2',\n 'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n 'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n !field.state.value && 'text-text-positive-muted'\n )}\n >\n <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n </button>\n\n <Dialog\n open={dialogOpen}\n onOpenChange={open => {\n setDialogOpen(open);\n if (!open) field.handleBlur();\n }}\n >\n <DialogPortal>\n <DialogOverlay />\n <RadixDialog.Content\n onOpenAutoFocus={e => e.preventDefault()}\n className={cn(\n 'fixed inset-x-0 bottom-0 z-50',\n 'flex flex-col bg-background rounded-t-2xl outline-none',\n 'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n 'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n 'duration-300'\n )}\n >\n <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n <DialogClose asChild>\n <button\n type=\"button\"\n aria-label=\"Đóng\"\n className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n >\n <XIcon size={16} />\n </button>\n </DialogClose>\n </div>\n\n <div className=\"flex flex-col overflow-y-auto\">\n {_showClear && (\n <DialogClose asChild>\n <button\n type=\"button\"\n className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n onClick={onClear}\n >\n <XIcon size={14} />\n Xóa lựa chọn\n </button>\n </DialogClose>\n )}\n {options.length > 0 ? (\n options.map(option => (\n <DialogClose key={option.value} asChild>\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n 'hover:bg-muted-muted active:bg-muted-muted',\n field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n )}\n onClick={() => {\n field.handleChange(option.value);\n field.handleBlur();\n }}\n >\n {option.label}\n </button>\n </DialogClose>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n Không có tùy chọn\n </div>\n )}\n </div>\n\n <div className=\"shrink-0 h-safe-bottom\" />\n </RadixDialog.Content>\n </DialogPortal>\n </Dialog>\n </>\n ) : (\n <div className=\"relative\">\n <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.handleBlur}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options.length > 0 ? (\n options.map(option => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </SelectContent>\n </Select>\n\n {_showClear && (\n <button\n type=\"button\"\n aria-label=\"Xóa lựa chọn\"\n className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n onClick={onClear}\n >\n <XIcon aria-hidden=\"true\" />\n </button>\n )}\n </div>\n )}\n\n {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}
1	+ {"version":3,"file":"select-field-D7Ny2Qne.mjs","names":["Dialog","RadixDialog","Select"],"sources":["../packages/components/features/tanstack-form/components/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { ChevronDownIcon, PackagePlusIcon, XIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { SelectFieldProps as Props } from '../../types';\n\nexport const SelectField = memo<Props>(\n ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n options,\n helperText,\n clearable = false,\n required = false,\n disabled = false,\n showErrorMessage = true,\n }) => {\n const errorId = useId();\n const field = useTanStackFieldContext<string \| null>();\n const isMobile = useIsMobile();\n const [dialogOpen, setDialogOpen] = useState(false);\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _invalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _showClear = clearable && !!field.state.value && !isDisabled;\n\n const selectedLabel = options.find(o => o.value === field.state.value)?.label;\n\n const onClear = () => {\n field.handleChange(null);\n field.handleBlur();\n };\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation={orientation} data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain className=\"flex flex-col\">\n {isMobile ? (\n <>\n <button\n id={field.name}\n type=\"button\"\n disabled={isDisabled}\n aria-invalid={_invalid ? 'true' : undefined}\n aria-describedby={errorId}\n onBlur={field.handleBlur}\n onClick={() => setDialogOpen(true)}\n className={cn(\n 'flex w-full items-center justify-between',\n 'outline-1 outline-border -outline-offset-1',\n 'gap-2 rounded bg-transparent px-3 py-2',\n 'shadow-input transition-all cursor-pointer whitespace-nowrap text-sm',\n 'focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n _invalid && 'outline-danger bg-danger-bg-subtle ring-danger-weak',\n !field.state.value && 'text-text-positive-muted'\n )}\n >\n <span className=\"line-clamp-1\">{selectedLabel ?? placeholder}</span>\n <ChevronDownIcon size={16} className=\"shrink-0 opacity-50\" />\n </button>\n\n <Dialog\n open={dialogOpen}\n onOpenChange={open => {\n setDialogOpen(open);\n if (!open) field.handleBlur();\n }}\n >\n <DialogPortal>\n <DialogOverlay />\n <RadixDialog.Content\n onOpenAutoFocus={e => e.preventDefault()}\n className={cn(\n 'fixed inset-x-0 bottom-0 z-50',\n 'flex flex-col bg-background rounded-t-2xl outline-none',\n 'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n 'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n 'duration-300'\n )}\n >\n <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n <span className=\"font-semibold text-sm text-text-positive\">{label ?? placeholder ?? 'Chọn một tùy chọn'}</span>\n <DialogClose asChild>\n <button\n type=\"button\"\n aria-label=\"Đóng\"\n className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n >\n <XIcon size={16} />\n </button>\n </DialogClose>\n </div>\n\n <div className=\"flex flex-col overflow-y-auto\">\n {_showClear && (\n <DialogClose asChild>\n <button\n type=\"button\"\n className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n onClick={onClear}\n >\n <XIcon size={14} />\n Xóa lựa chọn\n </button>\n </DialogClose>\n )}\n {options.length > 0 ? (\n options.map(option => (\n <DialogClose key={option.value} asChild>\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n 'hover:bg-muted-muted active:bg-muted-muted',\n field.state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n )}\n onClick={() => {\n field.handleChange(option.value);\n field.handleBlur();\n }}\n >\n {option.label}\n </button>\n </DialogClose>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n Không có tùy chọn\n </div>\n )}\n </div>\n\n <div className=\"shrink-0 h-safe-bottom\" />\n </RadixDialog.Content>\n </DialogPortal>\n </Dialog>\n </>\n ) : (\n <div className=\"relative\">\n <Select value={field.state.value ?? ''} disabled={isDisabled} onValueChange={field.handleChange}>\n <SelectTrigger aria-invalid={_invalid ? 'true' : undefined} aria-describedby={errorId} onBlur={field.handleBlur}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options.length > 0 ? (\n options.map(option => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </SelectContent>\n </Select>\n\n {_showClear && (\n <button\n type=\"button\"\n aria-label=\"Xóa lựa chọn\"\n className=\"absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n onClick={onClear}\n >\n <XIcon aria-hidden=\"true\" />\n </button>\n )}\n </div>\n )}\n\n {_touched && showErrorMessage && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nSelectField.displayName = 'SelectField';\n"],"mappings":"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"}

package/dist/select-field-UWnBMAzL.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-DCB2addt.cjs"),n=require("./ui/select.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("radix-ui"),c=require("@tanstack/react-form"),l=require("@customafk/react-toolkit/hooks/useMobile");const u=(0,i.memo)(({label:u,description:d,placeholder:f,orientation:p=`responsive`,tooltip:m,options:h,helperText:g,clearable:_=!1,required:v=!1,disabled:y=!1,showErrorMessage:b=!0})=>{let x=(0,i.useId)(),S=t.rt(),C=(0,l.useIsMobile)(),[w,T]=(0,i.useState)(!1),E=(0,c.useStore)(S.form.store,({isSubmitting:e})=>e),D=y\|\|E,O=S.state.meta.isDirty\|\|S.state.meta.isTouched,k=O&&!S.state.meta.isValid,A=v&&S.state.value===null,j=_&&!!S.state.value&&!D,M=h.find(e=>e.value===S.state.value)?.label,N=()=>{S.handleChange(null),S.handleBlur()};return(0,o.jsxs)(t.X,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(t.G,{orientation:p,"data-invalid":k,children:[(0,o.jsxs)(t.K,{children:[(0,o.jsxs)(t.Z,{htmlFor:S.name,"aria-required":A,children:[u,m&&(0,o.jsx)(t.nt,{tooltip:m})]}),(0,o.jsx)(t.J,{children:d})]}),(0,o.jsxs)(t.q,{className:`flex flex-col`,children:[C?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(`button`,{id:S.name,type:`button`,disabled:D,"aria-invalid":k?`true`:void 0,"aria-describedby":x,onBlur:S.handleBlur,onClick:()=>T(!0),className:(0,a.cn)(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,k&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!S.state.value&&`text-text-positive-muted`),children:[(0,o.jsx)(`span`,{className:`line-clamp-1`,children:M??f}),(0,o.jsx)(r.ChevronDownIcon,{size:16,className:`shrink-0 opacity-50`})]}),(0,o.jsx)(e.Dialog,{open:w,onOpenChange:e=>{T(e),e\|\|S.handleBlur()},children:(0,o.jsxs)(e.DialogPortal,{children:[(0,o.jsx)(e.DialogOverlay,{}),(0,o.jsxs)(s.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,a.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,o.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:u??f??`Chọn một tùy chọn`}),(0,o.jsx)(e.DialogClose,{asChild:!0,children:(0,o.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,o.jsx)(r.XIcon,{size:16})})})]}),(0,o.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[j&&(0,o.jsx)(e.DialogClose,{asChild:!0,children:(0,o.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:N,children:[(0,o.jsx)(r.XIcon,{size:14}),`Xóa lựa chọn`]})}),h.length>0?h.map(t=>(0,o.jsx)(e.DialogClose,{asChild:!0,children:(0,o.jsx)(`button`,{type:`button`,className:(0,a.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,S.state.value===t.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{S.handleChange(t.value),S.handleBlur()},children:t.label})},t.value)):(0,o.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,o.jsx)(r.PackagePlusIcon,{strokeWidth:1}),`Không có tùy chọn`]})]}),(0,o.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,o.jsxs)(`div`,{className:`relative`,children:[(0,o.jsxs)(n.Select,{value:S.state.value??``,disabled:D,onValueChange:S.handleChange,children:[(0,o.jsx)(n.SelectTrigger,{"aria-invalid":k?`true`:void 0,"aria-describedby":x,onBlur:S.handleBlur,children:(0,o.jsx)(n.SelectValue,{placeholder:f})}),(0,o.jsx)(n.SelectContent,{children:h.length>0?h.map(e=>(0,o.jsx)(n.SelectItem,{value:e.value,children:e.label},e.value)):(0,o.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,o.jsx)(r.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),j&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:N,children:(0,o.jsx)(r.XIcon,{"aria-hidden":`true`})})]}),O&&b&&(0,o.jsx)(t.Y,{id:x,className:`mt-1`,errors:S.state.meta.errors}),(0,o.jsx)(t.$,{isShow:!!g,children:g})]})]}),(0,o.jsx)(t.et,{})]})});u.displayName=`SelectField`,exports.SelectField=u;
2	+ //# sourceMappingURL=select-field-UWnBMAzL.cjs.map