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

@customafk/lunas-ui 0.2.81 → 0.2.83

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

Files changed (327) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-layout-DDcLanA0.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-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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"}

package/dist/{permalink-DhqOATLQ.mjs → permalink-BPCF_npZ.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Q as e}from"./tables-BTBtN1di.mjs";import{ExternalLinkIcon as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({href:i,label:a})=>i?r(`a`,{href:i,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[n(`span`,{children:a||i}),n(t,{size:14})]}):n(e,{});export{i as UITablePermalink};
-//# sourceMappingURL=permalink-DhqOATLQ.mjs.map
+import{Q as e}from"./tables-CuoBQNqx.mjs";import{ExternalLinkIcon as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({href:i,label:a})=>i?r(`a`,{href:i,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[n(`span`,{children:a||i}),n(t,{size:14})]}):n(e,{});export{i as UITablePermalink};
+//# sourceMappingURL=permalink-BPCF_npZ.mjs.map

package/dist/{permalink-DhqOATLQ.mjs.map → permalink-BPCF_npZ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"permalink-~~DhqOATLQ~~.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n \n @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n \n <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n /\nexport const UITablePermalink: React.FC<{\n /* The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. /\n href: string \| null \| undefined;\n /* Optional display text; falls back to the raw `href` when omitted. */\n label?: string;\n}> = ({ href, label }) => {\n if (!href) return <UITableEmpty />;\n\n return (\n <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n <span>{label \|\| href}</span>\n <ExternalLinkIcon size={14} />\n </a>\n );\n};\n"],"mappings":"4IAcA,MAAa,GAKP,CAAE,OAAM,WACP,EAGH,EAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,CACE,EAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,EAC3B,EAAC,EAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,IANa,EAAC,EAAD,CAAe,CAAA"}
1	+ {"version":3,"file":"permalink-BPCF_npZ.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n \n @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n \n <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n /\nexport const UITablePermalink: React.FC<{\n /* The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. /\n href: string \| null \| undefined;\n /* Optional display text; falls back to the raw `href` when omitted. */\n label?: string;\n}> = ({ href, label }) => {\n if (!href) return <UITableEmpty />;\n\n return (\n <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n <span>{label \|\| href}</span>\n <ExternalLinkIcon size={14} />\n </a>\n );\n};\n"],"mappings":"4IAcA,MAAa,GAKP,CAAE,OAAM,WACP,EAGH,EAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,CACE,EAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,EAC3B,EAAC,EAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,IANa,EAAC,EAAD,CAAe,CAAA"}

package/dist/{permalink-29QzG9Xe.cjs → permalink-DCvWlrAT.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./tables-BzP8Cnvh.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({href:r,label:i})=>r?(0,n.jsxs)(`a`,{href:r,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[(0,n.jsx)(`span`,{children:i||r}),(0,n.jsx)(t.ExternalLinkIcon,{size:14})]}):(0,n.jsx)(e.Q,{});exports.UITablePermalink=r;
-//# sourceMappingURL=permalink-29QzG9Xe.cjs.map
+const e=require("./tables-DdLEj1dI.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({href:r,label:i})=>r?(0,n.jsxs)(`a`,{href:r,target:`_blank`,className:`inline-flex items-center gap-1 truncate text-primary text-sm underline`,rel:`noopener noreferrer`,children:[(0,n.jsx)(`span`,{children:i||r}),(0,n.jsx)(t.ExternalLinkIcon,{size:14})]}):(0,n.jsx)(e.Q,{});exports.UITablePermalink=r;
+//# sourceMappingURL=permalink-DCvWlrAT.cjs.map

package/dist/{permalink-29QzG9Xe.cjs.map → permalink-DCvWlrAT.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"permalink-~~29QzG9Xe~~.cjs","names":["UITableEmpty","ExternalLinkIcon"],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n \n @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n \n <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n /\nexport const UITablePermalink: React.FC<{\n /* The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. /\n href: string \| null \| undefined;\n /* Optional display text; falls back to the raw `href` when omitted. */\n label?: string;\n}> = ({ href, label }) => {\n if (!href) return <UITableEmpty />;\n\n return (\n <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n <span>{label \|\| href}</span>\n <ExternalLinkIcon size={14} />\n </a>\n );\n};\n"],"mappings":"sGAcA,MAAa,GAKP,CAAE,OAAM,WACP,GAGH,EAAA,EAAA,KAAA,CAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,GAC3B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,KANa,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}
1	+ {"version":3,"file":"permalink-DCvWlrAT.cjs","names":["UITableEmpty","ExternalLinkIcon"],"sources":["../packages/components/features/tables/components/atoms/permalink.tsx"],"sourcesContent":["import { ExternalLinkIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Renders an external-link anchor with an icon for use in table cells, opening\n * the target URL in a new tab with safe `rel` attributes. Renders\n * {@link UITableEmpty} when `href` is absent.\n \n @example\n * import { UITablePermalink } from '@customafk/lunas-ui/features/tables';\n \n <UITablePermalink href=\"https://example.com/records/42\" label=\"View record\" />\n /\nexport const UITablePermalink: React.FC<{\n /* The destination URL the anchor navigates to; `null`/`undefined`/empty renders an empty state. /\n href: string \| null \| undefined;\n /* Optional display text; falls back to the raw `href` when omitted. */\n label?: string;\n}> = ({ href, label }) => {\n if (!href) return <UITableEmpty />;\n\n return (\n <a href={href} target=\"_blank\" className=\"inline-flex items-center gap-1 truncate text-primary text-sm underline\" rel=\"noopener noreferrer\">\n <span>{label \|\| href}</span>\n <ExternalLinkIcon size={14} />\n </a>\n );\n};\n"],"mappings":"sGAcA,MAAa,GAKP,CAAE,OAAM,WACP,GAGH,EAAA,EAAA,KAAA,CAAC,IAAD,CAAS,OAAM,OAAO,SAAS,UAAU,yEAAyE,IAAI,sBAAtH,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,GAAS,CAAW,CAAA,GAC3B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,KAAM,EAAK,CAAA,CAC5B,KANa,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}

package/dist/phone-CTTjc3mv.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function e(e){if(!e?.trim())return null;let t=e.replace(/\D/g,``),n=t.length>9&&t.startsWith(`84`)?t.slice(2):t.startsWith(`0`)?t.slice(1):t,r=/^\d{9,10}$/.test(n);if(!r)return{nsn:n,national:t,international:t,valid:r};let i=n.length===9?[n.slice(0,3),n.slice(3,6),n.slice(6,9)]:[n.slice(0,4),n.slice(4,7),n.slice(7,10)];return{nsn:n,national:`0${i[0]} ${i[1]} ${i[2]}`,international:`+84 ${i[0]} ${i[1]} ${i[2]}`,valid:r}}export{e as t};
2	+ //# sourceMappingURL=phone-CTTjc3mv.mjs.map

package/dist/phone-CTTjc3mv.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"phone-CTTjc3mv.mjs","names":[],"sources":["../packages/libs/phone.ts"],"sourcesContent":["export type TVietnamesePhone = {\n /** Digits only, national significant number with the trunk `0` and any `84`/`+84` prefix removed. */\n nsn: string;\n /** National display form, e.g. `'0987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n national: string;\n /** International display form, e.g. `'+84 987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n international: string;\n /** `false` when the input's national significant number isn't 9–10 digits (not a recognizable VN phone number). */\n valid: boolean;\n};\n\n/**\n * Parses a Vietnamese phone number in any common input shape (`0987654321`, `+84987654321`,\n * `84987654321`, with or without spaces/dashes) into national and international display forms.\n * Never throws — returns `null` for empty/blank input, and falls back to sanitized digits\n * (with `valid: false`) for anything that doesn't look like a 9–10 digit VN number.\n */\nexport function formatVietnamesePhone(raw: string | null | undefined): TVietnamesePhone | null {\n if (!raw?.trim()) return null;\n\n const digits = raw.replace(/\\D/g, '');\n const nsn = digits.length > 9 && digits.startsWith('84') ? digits.slice(2) : digits.startsWith('0') ? digits.slice(1) : digits;\n const valid = /^\\d{9,10}$/.test(nsn);\n\n if (!valid) return { nsn, national: digits, international: digits, valid };\n\n const groups = nsn.length === 9 ? [nsn.slice(0, 3), nsn.slice(3, 6), nsn.slice(6, 9)] : [nsn.slice(0, 4), nsn.slice(4, 7), nsn.slice(7, 10)];\n\n return {\n nsn,\n national: `0${groups[0]} ${groups[1]} ${groups[2]}`,\n international: `+84 ${groups[0]} ${groups[1]} ${groups[2]}`,\n valid,\n };\n}\n"],"mappings":"AAiBA,SAAgB,EAAsB,EAAyD,CAC7F,GAAI,CAAC,GAAK,KAAK,EAAG,OAAO,KAEzB,IAAM,EAAS,EAAI,QAAQ,MAAO,EAAE,EAC9B,EAAM,EAAO,OAAS,GAAK,EAAO,WAAW,IAAI,EAAI,EAAO,MAAM,CAAC,EAAI,EAAO,WAAW,GAAG,EAAI,EAAO,MAAM,CAAC,EAAI,EAClH,EAAQ,aAAa,KAAK,CAAG,EAEnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAK,SAAU,EAAQ,cAAe,EAAQ,OAAM,EAEzE,IAAM,EAAS,EAAI,SAAW,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,CAAC,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,EAAE,CAAC,EAE3I,MAAO,CACL,MACA,SAAU,IAAI,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KAC/C,cAAe,OAAO,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KACvD,OACF,CACF"}

package/dist/phone-CUxXVTg6.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function e(e){if(!e?.trim())return null;let t=e.replace(/\D/g,``),n=t.length>9&&t.startsWith(`84`)?t.slice(2):t.startsWith(`0`)?t.slice(1):t,r=/^\d{9,10}$/.test(n);if(!r)return{nsn:n,national:t,international:t,valid:r};let i=n.length===9?[n.slice(0,3),n.slice(3,6),n.slice(6,9)]:[n.slice(0,4),n.slice(4,7),n.slice(7,10)];return{nsn:n,national:`0${i[0]} ${i[1]} ${i[2]}`,international:`+84 ${i[0]} ${i[1]} ${i[2]}`,valid:r}}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});
2	+ //# sourceMappingURL=phone-CUxXVTg6.cjs.map

package/dist/phone-CUxXVTg6.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"phone-CUxXVTg6.cjs","names":[],"sources":["../packages/libs/phone.ts"],"sourcesContent":["export type TVietnamesePhone = {\n /** Digits only, national significant number with the trunk `0` and any `84`/`+84` prefix removed. */\n nsn: string;\n /** National display form, e.g. `'0987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n national: string;\n /** International display form, e.g. `'+84 987 654 321'`. Falls back to the sanitized digits when `valid` is `false`. */\n international: string;\n /** `false` when the input's national significant number isn't 9–10 digits (not a recognizable VN phone number). */\n valid: boolean;\n};\n\n/**\n * Parses a Vietnamese phone number in any common input shape (`0987654321`, `+84987654321`,\n * `84987654321`, with or without spaces/dashes) into national and international display forms.\n * Never throws — returns `null` for empty/blank input, and falls back to sanitized digits\n * (with `valid: false`) for anything that doesn't look like a 9–10 digit VN number.\n */\nexport function formatVietnamesePhone(raw: string | null | undefined): TVietnamesePhone | null {\n if (!raw?.trim()) return null;\n\n const digits = raw.replace(/\\D/g, '');\n const nsn = digits.length > 9 && digits.startsWith('84') ? digits.slice(2) : digits.startsWith('0') ? digits.slice(1) : digits;\n const valid = /^\\d{9,10}$/.test(nsn);\n\n if (!valid) return { nsn, national: digits, international: digits, valid };\n\n const groups = nsn.length === 9 ? [nsn.slice(0, 3), nsn.slice(3, 6), nsn.slice(6, 9)] : [nsn.slice(0, 4), nsn.slice(4, 7), nsn.slice(7, 10)];\n\n return {\n nsn,\n national: `0${groups[0]} ${groups[1]} ${groups[2]}`,\n international: `+84 ${groups[0]} ${groups[1]} ${groups[2]}`,\n valid,\n };\n}\n"],"mappings":"AAiBA,SAAgB,EAAsB,EAAyD,CAC7F,GAAI,CAAC,GAAK,KAAK,EAAG,OAAO,KAEzB,IAAM,EAAS,EAAI,QAAQ,MAAO,EAAE,EAC9B,EAAM,EAAO,OAAS,GAAK,EAAO,WAAW,IAAI,EAAI,EAAO,MAAM,CAAC,EAAI,EAAO,WAAW,GAAG,EAAI,EAAO,MAAM,CAAC,EAAI,EAClH,EAAQ,aAAa,KAAK,CAAG,EAEnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAK,SAAU,EAAQ,cAAe,EAAQ,OAAM,EAEzE,IAAM,EAAS,EAAI,SAAW,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,CAAC,EAAI,CAAC,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,CAAC,EAAG,EAAI,MAAM,EAAG,EAAE,CAAC,EAE3I,MAAO,CACL,MACA,SAAU,IAAI,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KAC/C,cAAe,OAAO,EAAO,GAAG,GAAG,EAAO,GAAG,GAAG,EAAO,KACvD,OACF,CACF"}

package/dist/{phone-number-D9j5xYDW.d.cts → phone-number-B1bLIt8i.d.cts} RENAMED Viewed

@@ -1,7 +1,7 @@
 //#region packages/components/data-display/phone-number.d.ts
 type PhoneNumberDisplayProps = {
-  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */
-  value: string;
+  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `0901 234 567` with a `+84` tooltip. */
+  value: string | null | undefined;
 };
 /**
  * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
@@ -16,4 +16,4 @@ type PhoneNumberDisplayProps = {
 declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
 //#endregion
 export { PhoneNumberDisplay as t };
-//# sourceMappingURL=phone-number-D9j5xYDW.d.cts.map
+//# sourceMappingURL=phone-number-B1bLIt8i.d.cts.map

package/dist/{phone-number-D9j5xYDW.d.mts → phone-number-B1bLIt8i.d.mts} RENAMED Viewed

@@ -1,7 +1,7 @@
 //#region packages/components/data-display/phone-number.d.ts
 type PhoneNumberDisplayProps = {
-  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */
-  value: string;
+  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `0901 234 567` with a `+84` tooltip. */
+  value: string | null | undefined;
 };
 /**
  * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
@@ -16,4 +16,4 @@ type PhoneNumberDisplayProps = {
 declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
 //#endregion
 export { PhoneNumberDisplay as t };
-//# sourceMappingURL=phone-number-D9j5xYDW.d.mts.map
+//# sourceMappingURL=phone-number-B1bLIt8i.d.mts.map

package/dist/{phone-number-CQXrATQO.mjs → phone-number-DHFLnHWO.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"./ui/tooltip.mjs";import{Q as r}from"./tables-BTBtN1di.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({value:o})=>o?a(e,{children:[i(n,{asChild:!0,children:i(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:o.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),i(t,{align:`start`,children:i(`p`,{className:`tabular-nums`,children:o.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):i(r,{});export{o as UITablePhoneNumberDisplay};
-//# sourceMappingURL=phone-number-CQXrATQO.mjs.map
+import{Tooltip as e,TooltipContent as t,TooltipTrigger as n}from"./ui/tooltip.mjs";import{Q as r}from"./tables-CuoBQNqx.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({value:o})=>o?a(e,{children:[i(n,{asChild:!0,children:i(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:o.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),i(t,{align:`start`,children:i(`p`,{className:`tabular-nums`,children:o.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):i(r,{});export{o as UITablePhoneNumberDisplay};
+//# sourceMappingURL=phone-number-DHFLnHWO.mjs.map

package/dist/{phone-number-CQXrATQO.mjs.map → phone-number-DHFLnHWO.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-number-~~CQXrATQO~~.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITablePhoneNumberDisplay value=\"0843456789\" />\n /\nexport const UITablePhoneNumberDisplay: React.FC<{\n /* The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n value: string \| null \| undefined;\n}> = ({ value }) => {\n if (!value) return <UITableEmpty />;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n </TooltipTrigger>\n <TooltipContent align=\"start\">\n <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"+KAcA,MAAa,GAGP,CAAE,WACD,EAGH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QACpB,SAAA,EAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,EAVQ,EAAC,EAAD,CAAe,CAAA"}
1	+ {"version":3,"file":"phone-number-DHFLnHWO.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITablePhoneNumberDisplay value=\"0843456789\" />\n /\nexport const UITablePhoneNumberDisplay: React.FC<{\n /* The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n value: string \| null \| undefined;\n}> = ({ value }) => {\n if (!value) return <UITableEmpty />;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n </TooltipTrigger>\n <TooltipContent align=\"start\">\n <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"+KAcA,MAAa,GAGP,CAAE,WACD,EAGH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QACpB,SAAA,EAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,EAVQ,EAAC,EAAD,CAAe,CAAA"}

package/dist/{phone-number-C2k8llhf.cjs → phone-number-YzmDmFBU.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./ui/tooltip.cjs"),t=require("./tables-BzP8Cnvh.cjs");let n=require("react/jsx-runtime");const r=({value:r})=>r?(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsx)(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:r.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,n.jsx)(e.TooltipContent,{align:`start`,children:(0,n.jsx)(`p`,{className:`tabular-nums`,children:r.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):(0,n.jsx)(t.Q,{});exports.UITablePhoneNumberDisplay=r;
-//# sourceMappingURL=phone-number-C2k8llhf.cjs.map
+const e=require("./ui/tooltip.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react/jsx-runtime");const r=({value:r})=>r?(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsx)(`p`,{className:`font-number text-text-positive text-sm tabular-nums`,children:r.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,n.jsx)(e.TooltipContent,{align:`start`,children:(0,n.jsx)(`p`,{className:`tabular-nums`,children:r.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`+84 $1 $2 $3`)})})]}):(0,n.jsx)(t.Q,{});exports.UITablePhoneNumberDisplay=r;
+//# sourceMappingURL=phone-number-YzmDmFBU.cjs.map

package/dist/{phone-number-C2k8llhf.cjs.map → phone-number-YzmDmFBU.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-number-~~C2k8llhf~~.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITablePhoneNumberDisplay value=\"0843456789\" />\n /\nexport const UITablePhoneNumberDisplay: React.FC<{\n /* The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n value: string \| null \| undefined;\n}> = ({ value }) => {\n if (!value) return <UITableEmpty />;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n </TooltipTrigger>\n <TooltipContent align=\"start\">\n <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"0GAcA,MAAa,GAGP,CAAE,WACD,GAGH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QACpB,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,GAVQ,EAAA,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAe,CAAA"}
1	+ {"version":3,"file":"phone-number-YzmDmFBU.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/*\n Formats and displays a phone number string in a table cell using the\n * `(NXX) NXX-XXXX` pattern, with a tooltip that shows the full international\n * dialling representation. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITablePhoneNumberDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITablePhoneNumberDisplay value=\"0843456789\" />\n /\nexport const UITablePhoneNumberDisplay: React.FC<{\n /* The raw phone number string to format and display; `null`/`undefined`/empty renders an empty state. */\n value: string \| null \| undefined;\n}> = ({ value }) => {\n if (!value) return <UITableEmpty />;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <p className=\"font-number text-text-positive text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n </TooltipTrigger>\n <TooltipContent align=\"start\">\n <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '+84 $1 $2 $3')}</p>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"0GAcA,MAAa,GAGP,CAAE,WACD,GAGH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,EAAM,QAAQ,wBAAyB,YAAY,CAAK,CAAA,CAC9G,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QACpB,UAAA,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,eAAgB,SAAA,EAAM,MAAM,CAAC,CAAC,CAAC,QAAQ,wBAAyB,cAAc,CAAK,CAAA,CAClF,CAAA,CACT,CAAA,CAAA,GAVQ,EAAA,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAe,CAAA"}

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

@@ -1,2 +1,2 @@
-import{t as e}from"./close-DYJZ8fkh.mjs";import{K as t}from"./tanstack-form-q9hDCc0Y.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=t();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(e,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
-//# sourceMappingURL=popover-form-BsapHJck.mjs.map
+import{t as e}from"./close-DYJZ8fkh.mjs";import{K as t}from"./tanstack-form-fkaBh9RO.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=t();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(e,{className:`absolute top-2.5 right-3`})})]})})]})})};export{c as TanStackPopoverForm};
+//# sourceMappingURL=popover-form-CeRVpy1B.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-form-~~BsapHJck~~.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-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"}

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

@@ -1,2 +1,2 @@
-const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-BxqS40rB.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.K();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;
-//# sourceMappingURL=popover-form-Bq2GcuZu.cjs.map
+const e=require("./close-BYHgEZvZ.cjs"),t=require("./tanstack-form-C0ab8EEl.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.K();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;
+//# sourceMappingURL=popover-form-Ch_iMMSm.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-form-~~Bq2GcuZu~~.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-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"}

package/dist/{progress-display-B4WVzdJw.cjs → progress-display-57LT7U37.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./tables-BzP8Cnvh.cjs"),t=require("./ui/progress.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(0,n.memo)(({value:n,showLabel:a=!0,successThreshold:o=70,warningThreshold:s=40})=>{if(n==null)return(0,i.jsx)(e.Q,{});let c=Math.min(100,Math.max(0,n));return(0,i.jsxs)(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[(0,i.jsx)(t.Progress,{value:c,className:(0,r.cn)(`flex-1`,c>=o?`[&>[data-slot=progress-indicator]]:bg-success`:c>=s?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),a&&(0,i.jsxs)(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[c,`%`]})]})});a.displayName=`UITableProgressDisplay`,exports.UITableProgressDisplay=a;
-//# sourceMappingURL=progress-display-B4WVzdJw.cjs.map
+const e=require("./ui/progress.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=(0,n.memo)(({value:n,showLabel:a=!0,successThreshold:o=70,warningThreshold:s=40})=>{if(n==null)return(0,i.jsx)(t.Q,{});let c=Math.min(100,Math.max(0,n));return(0,i.jsxs)(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[(0,i.jsx)(e.Progress,{value:c,className:(0,r.cn)(`flex-1`,c>=o?`[&>[data-slot=progress-indicator]]:bg-success`:c>=s?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),a&&(0,i.jsxs)(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[c,`%`]})]})});a.displayName=`UITableProgressDisplay`,exports.UITableProgressDisplay=a;
+//# sourceMappingURL=progress-display-57LT7U37.cjs.map

package/dist/{progress-display-B4WVzdJw.cjs.map → progress-display-57LT7U37.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-display-~~B4WVzdJw~~.cjs","names":["UITableEmpty","Progress"],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. /\ntype Props = {\n /* Percentage value between 0 and 100; `null`/`undefined` renders an empty state. /\n value: number \| null \| undefined;\n /* When `true`, shows the numeric percentage next to the bar (default: `true`). /\n showLabel?: boolean;\n /\n Color thresholds applied to the progress indicator.\n * - `≥ successThreshold` → green\n * - `≥ warningThreshold` → yellow\n * - otherwise → red\n \n Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n /\n successThreshold?: number;\n warningThreshold?: number;\n};\n\n/\n Renders a horizontal progress bar with an optional percentage label for a\n * table cell. The bar color shifts from red → yellow → green based on\n * configurable thresholds. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n if (value === null \|\| value === undefined) return <UITableEmpty />;\n\n const clamped = Math.min(100, Math.max(0, value));\n\n const indicatorClass =\n clamped >= successThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-success'\n : clamped >= warningThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-warning'\n : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n return (\n <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n </div>\n );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0KAqCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,MAAO,EAAS,WAAA,EAAA,EAAA,GAAA,CAAc,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,IAAa,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}
1	+ {"version":3,"file":"progress-display-57LT7U37.cjs","names":["UITableEmpty","Progress"],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. /\ntype Props = {\n /* Percentage value between 0 and 100; `null`/`undefined` renders an empty state. /\n value: number \| null \| undefined;\n /* When `true`, shows the numeric percentage next to the bar (default: `true`). /\n showLabel?: boolean;\n /\n Color thresholds applied to the progress indicator.\n * - `≥ successThreshold` → green\n * - `≥ warningThreshold` → yellow\n * - otherwise → red\n \n Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n /\n successThreshold?: number;\n warningThreshold?: number;\n};\n\n/\n Renders a horizontal progress bar with an optional percentage label for a\n * table cell. The bar color shifts from red → yellow → green based on\n * configurable thresholds. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n if (value === null \|\| value === undefined) return <UITableEmpty />;\n\n const clamped = Math.min(100, Math.max(0, value));\n\n const indicatorClass =\n clamped >= successThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-success'\n : clamped >= warningThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-warning'\n : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n return (\n <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n </div>\n );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0KAqCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,MAAO,EAAS,WAAA,EAAA,EAAA,GAAA,CAAc,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,IAAa,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}

package/dist/{progress-display-DZb1qjfY.mjs → progress-display-AfoHitiE.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Q as e}from"./tables-BTBtN1di.mjs";import{Progress as t}from"./ui/progress.mjs";import{memo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=n(({value:n,showLabel:o=!0,successThreshold:s=70,warningThreshold:c=40})=>{if(n==null)return i(e,{});let l=Math.min(100,Math.max(0,n));return a(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[i(t,{value:l,className:r(`flex-1`,l>=s?`[&>[data-slot=progress-indicator]]:bg-success`:l>=c?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),o&&a(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[l,`%`]})]})});o.displayName=`UITableProgressDisplay`;export{o as UITableProgressDisplay};
-//# sourceMappingURL=progress-display-DZb1qjfY.mjs.map
+import{Progress as e}from"./ui/progress.mjs";import{Q as t}from"./tables-CuoBQNqx.mjs";import{memo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=n(({value:n,showLabel:o=!0,successThreshold:s=70,warningThreshold:c=40})=>{if(n==null)return i(t,{});let l=Math.min(100,Math.max(0,n));return a(`div`,{className:`flex w-full min-w-24 items-center gap-x-2`,children:[i(e,{value:l,className:r(`flex-1`,l>=s?`[&>[data-slot=progress-indicator]]:bg-success`:l>=c?`[&>[data-slot=progress-indicator]]:bg-warning`:`[&>[data-slot=progress-indicator]]:bg-danger`)}),o&&a(`span`,{className:`w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums`,children:[l,`%`]})]})});o.displayName=`UITableProgressDisplay`;export{o as UITableProgressDisplay};
+//# sourceMappingURL=progress-display-AfoHitiE.mjs.map

package/dist/{progress-display-DZb1qjfY.mjs.map → progress-display-AfoHitiE.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-display-~~DZb1qjfY~~.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. /\ntype Props = {\n /* Percentage value between 0 and 100; `null`/`undefined` renders an empty state. /\n value: number \| null \| undefined;\n /* When `true`, shows the numeric percentage next to the bar (default: `true`). /\n showLabel?: boolean;\n /\n Color thresholds applied to the progress indicator.\n * - `≥ successThreshold` → green\n * - `≥ warningThreshold` → yellow\n * - otherwise → red\n \n Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n /\n successThreshold?: number;\n warningThreshold?: number;\n};\n\n/\n Renders a horizontal progress bar with an optional percentage label for a\n * table cell. The bar color shifts from red → yellow → green based on\n * configurable thresholds. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n if (value === null \|\| value === undefined) return <UITableEmpty />;\n\n const clamped = Math.min(100, Math.max(0, value));\n\n const indicatorClass =\n clamped >= successThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-success'\n : clamped >= warningThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-warning'\n : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n return (\n <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n </div>\n );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0NAqCA,MAAa,EAAyB,GAAM,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAC,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,CACE,EAAC,EAAD,CAAU,MAAO,EAAS,UAAW,EAAG,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,GAAa,EAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}
1	+ {"version":3,"file":"progress-display-AfoHitiE.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/progress-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Progress } from '@/components/ui/progress';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableProgressDisplay} component. /\ntype Props = {\n /* Percentage value between 0 and 100; `null`/`undefined` renders an empty state. /\n value: number \| null \| undefined;\n /* When `true`, shows the numeric percentage next to the bar (default: `true`). /\n showLabel?: boolean;\n /\n Color thresholds applied to the progress indicator.\n * - `≥ successThreshold` → green\n * - `≥ warningThreshold` → yellow\n * - otherwise → red\n \n Defaults: `successThreshold = 70`, `warningThreshold = 40`.\n /\n successThreshold?: number;\n warningThreshold?: number;\n};\n\n/\n Renders a horizontal progress bar with an optional percentage label for a\n * table cell. The bar color shifts from red → yellow → green based on\n * configurable thresholds. Renders {@link UITableEmpty} when `value` is absent.\n \n @example\n * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableProgressDisplay value={75} />\n */\nexport const UITableProgressDisplay = memo(({ value, showLabel = true, successThreshold = 70, warningThreshold = 40 }: Props) => {\n if (value === null \|\| value === undefined) return <UITableEmpty />;\n\n const clamped = Math.min(100, Math.max(0, value));\n\n const indicatorClass =\n clamped >= successThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-success'\n : clamped >= warningThreshold\n ? '[&>[data-slot=progress-indicator]]:bg-warning'\n : '[&>[data-slot=progress-indicator]]:bg-danger';\n\n return (\n <div className=\"flex w-full min-w-24 items-center gap-x-2\">\n <Progress value={clamped} className={cn('flex-1', indicatorClass)} />\n {showLabel && <span className=\"w-9 shrink-0 text-right font-number text-text-positive-weak text-xs tabular-nums\">{clamped}%</span>}\n </div>\n );\n});\nUITableProgressDisplay.displayName = 'UITableProgressDisplay';\n"],"mappings":"0NAqCA,MAAa,EAAyB,GAAM,CAAE,QAAO,YAAY,GAAM,mBAAmB,GAAI,mBAAmB,MAAgB,CAC/H,GAAI,GAAU,KAA6B,OAAO,EAAC,EAAD,CAAe,CAAA,EAEjE,IAAM,EAAU,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAShD,OACE,EAAC,MAAD,CAAK,UAAU,4CAAf,SAAA,CACE,EAAC,EAAD,CAAU,MAAO,EAAS,UAAW,EAAG,SAR1C,GAAW,EACP,gDACA,GAAW,EACT,gDACA,8CAI4D,CAAI,CAAA,EACnE,GAAa,EAAC,OAAD,CAAM,UAAU,mFAAhB,SAAA,CAAoG,EAAQ,GAAO,CAC9H,CAAA,CAAA,GAET,CAAC,EACD,EAAuB,YAAc"}

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

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