@customafk/lunas-ui 0.2.56 → 0.2.58

package/dist/{payment-layout-DfxNDF8G.cjs.map → payment-layout-Dlvc1P7b.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"payment-layout-DfxNDF8G.cjs","names":["TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Slot","Tooltip","TooltipTrigger","TooltipContent","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph","Button","MenuIcon","ShoppingCartIcon","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, ShoppingCartIcon, 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 { 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}> = ({ user, isLogin = true, onLogin, onLogout }) => {\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 gap-x-2 sm:ml-2.5\">\n        <div className=\"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 Payment</span>\n          <span className=\"truncate text-xs\">Quản lý đơn hàng</span>\n        </div>\n      </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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"}
+{"version":3,"file":"payment-layout-Dlvc1P7b.cjs","names":["TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Slot","Tooltip","TooltipTrigger","TooltipContent","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph","Button","MenuIcon","ShoppingCartIcon","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, ShoppingCartIcon, 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 { 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}> = ({ user, isLogin = true, onLogin, onLogout }) => {\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 gap-x-2 sm:ml-2.5\">\n        <div className=\"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 Payment</span>\n          <span className=\"truncate text-xs\">Quản lý đơn hàng</span>\n        </div>\n      </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/rolldown-runtime-CMqjfN_6.cjs

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

package/dist/tanstack-form-Bnfatlfx.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/tooltip.cjs"),n=require("./ui/separator.cjs"),r=require("./close-BYHgEZvZ.cjs"),i=require("./ui/dialog.cjs"),a=require("./ui/command.cjs"),o=require("./ui/checkbox.cjs"),s=require("./ui/input.cjs"),c=require("./ui/label.cjs"),l=require("./ui/popover.cjs"),u=require("./ui/select.cjs"),d=require("./ui/switch.cjs"),f=require("./ui/drawer.cjs"),p=require("./ui/calendar.cjs"),m=require("./ui/radio-group.cjs"),h=require("./ui/textarea.cjs"),g=require("./text-editor-DJYQXXtP.cjs");let _=require("lucide-react"),v=require("react"),y=require("@customafk/react-toolkit/utils"),b=require("class-variance-authority"),x=require("react/jsx-runtime"),S=require("@customafk/react-toolkit/date-fns"),C=require("radix-ui"),w=require("@customafk/react-toolkit/hooks/useMobile"),T=require("@tanstack/react-form");function E({width:e,className:t,children:n}){return(0,x.jsx)(`div`,{"data-slot":`array-col`,style:e?{width:typeof e==`number`?`${e}px`:e,flexShrink:0}:{flex:1,minWidth:0},className:t,children:n})}function D({className:e,children:t}){return(0,x.jsxs)(`div`,{"data-slot":`array-header-row`,className:(0,y.cn)(`mb-1 flex items-center gap-2 px-1 text-xs font-medium text-text-positive-weak`,e),children:[t,(0,x.jsx)(`div`,{className:`min-w-8 w-8 shrink-0`})]})}function O({defaultRow:t,children:n,addLabel:r=`Thêm hàng`,className:i}){let a=Q(),o=a.state.value??[],s=(0,v.useCallback)(()=>{a.pushValue({...t})},[a,t]),c=(0,v.useCallback)(e=>{a.removeValue(e)},[a]);return(0,x.jsxs)(`div`,{"data-slot":`simple-array-field`,className:(0,y.cn)(`flex flex-col gap-2`,i),children:[o.map((t,r)=>(0,x.jsxs)(`div`,{className:`flex items-start gap-2`,children:[n(r),(0,x.jsx)(e.Button,{type:`button`,size:`icon`,variant:`ghost`,color:`danger`,className:`min-w-8`,onClick:()=>c(r),children:(0,x.jsx)(_.Trash2Icon,{size:14})})]},r)),(0,x.jsx)(`div`,{children:(0,x.jsxs)(e.Button,{type:`button`,variant:`outline`,color:`muted`,size:`xs`,onClick:s,children:[(0,x.jsx)(_.PlusIcon,{size:13}),r]})})]})}function k({className:e,children:t,...n}){return(0,x.jsxs)(C.Label.Root,{"data-slot":`label`,className:(0,y.cn)(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required:*:data-[slot=required-indicator]:inline-block`,e),...n,children:[(0,x.jsx)(`span`,{className:`flex items-center gap-1`,children:t}),(0,x.jsx)(`span`,{"data-slot":`required-indicator`,className:`hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white`,children:`Bắt buộc`})]})}const A=(0,b.cva)(`group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col *:w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center gap-4`,`*:data-[slot=field-content]:basis-1/2`,`*:data-[slot=field-content-main]:flex-1`,`*:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col *:w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group:*:w-auto`,`@md/field-group:*:data-[slot=field-content]:basis-1/2`,`@md/field-group:*:data-[slot=field-content-main]:basis-1/2`,`@md/field-group:*:data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),j=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(`fieldset`,{"data-slot":`field-set`,className:(0,y.cn)(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));j.displayName=`FieldSet`;const M=(0,v.memo)(({className:e,variant:t=`legend`,...n})=>(0,x.jsx)(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:(0,y.cn)(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));M.displayName=`FieldLegend`;const N=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(`div`,{"data-slot":`field-group`,className:(0,y.cn)(`group/field-group @container/field-group`,`flex flex-col gap-7 pt-4`,`data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4`,e),...t}));N.displayName=`FieldGroup`;const P=(0,v.memo)(({className:e,orientation:t=`vertical`,...n})=>(0,x.jsx)(`div`,{"data-slot":`field`,"data-orientation":t,className:(0,y.cn)(A({orientation:t}),e),...n}));P.displayName=`Field`;const F=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(`div`,{"data-slot":`field-content`,className:(0,y.cn)(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));F.displayName=`FieldContent`;const I=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(`div`,{"data-slot":`field-content-main`,className:(0,y.cn)(`relative`,e),...t}));I.displayName=`FieldContentMain`;const L=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(k,{"data-slot":`field-label`,className:(0,y.cn)(`group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));L.displayName=`FieldLabel`;const R=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(`div`,{"data-slot":`field-label`,className:(0,y.cn)(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));R.displayName=`FieldTitle`;const z=(0,v.memo)(({className:e,...t})=>(0,x.jsx)(`p`,{"data-slot":`field-description`,className:(0,y.cn)(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));z.displayName=`FieldDescription`;const B=(0,v.memo)(({isShow:e=!0,className:t,children:n,...r})=>e===!1?null:(0,x.jsxs)(`div`,{"data-slot":`field-note`,className:(0,y.cn)(`flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs`,t),...r,children:[(0,x.jsx)(_.InfoIcon,{size:12,className:`mt-0.5 shrink-0 text-primary/70`}),(0,x.jsx)(`span`,{children:n})]}));B.displayName=`FieldNote`;const V=(0,v.memo)(({tooltip:e})=>(0,x.jsxs)(t.Tooltip,{children:[(0,x.jsx)(t.TooltipTrigger,{asChild:!0,children:(0,x.jsxs)(`button`,{type:`button`,tabIndex:-1,className:`inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none`,children:[(0,x.jsx)(_.HelpCircleIcon,{size:13,"aria-hidden":`true`}),(0,x.jsx)(`span`,{className:`sr-only`,children:`Thêm thông tin`})]})}),(0,x.jsx)(t.TooltipContent,{side:`top`,className:`max-w-xs text-balance`,children:e})]}));V.displayName=`FieldTooltip`;const H=(0,v.memo)(({children:e,className:t,...r})=>(0,x.jsxs)(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:(0,y.cn)(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,t),...r,children:[(0,x.jsx)(n.Separator,{className:`absolute inset-0 top-1/2`}),e&&(0,x.jsx)(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));H.displayName=`FieldSeparator`;const U=(0,v.memo)(({className:e,children:t,errors:n,requiredMessage:r=`Trường này là bắt buộc`,...i})=>{let a=(0,v.useMemo)(()=>{let e=e=>e.code===`invalid_type`?r:e.message;return t||(n?n?.length===1&&n[0]?.message?(0,x.jsx)(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:(0,x.jsx)(`p`,{children:e(n[0])})}):(0,x.jsx)(`ul`,{className:`flex list-none flex-col`,children:n.map(t=>typeof t==`string`?(0,x.jsx)(`li`,{children:t},t):t?.message?(0,x.jsx)(`li`,{children:e(t)},t.code??t.message):null)}):null)},[t,n,r]);return a?(0,x.jsx)(`div`,{role:`alert`,"data-slot":`field-error`,className:(0,y.cn)(`w-full font-medium text-danger-strong text-xs`,e),...i,children:a}):null});U.displayName=`FieldError`;const W=({label:e,required:t,disabled:n,variant:r=`checkbox`})=>{let i=(0,v.useId)(),{form:a,name:s,state:l,handleBlur:u,handleChange:f}=Q(),p=(0,T.useStore)(a.store,({isSubmitting:e})=>e),m=l.meta.isTouched&&!l.meta.isValid,h=l.value??!1,g=n||p,_=(0,v.useCallback)(e=>{p||f(e)},[p,f]);return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-2 h-9`,children:[r===`switch`?(0,x.jsx)(d.Switch,{id:i,name:s,checked:h,disabled:g,"aria-invalid":m,onBlur:u,onCheckedChange:_}):(0,x.jsx)(o.Checkbox,{id:i,name:s,checked:h,disabled:g,"aria-invalid":m,onBlur:u,onCheckedChange:_}),e&&(0,x.jsxs)(c.Label,{htmlFor:i,className:`cursor-pointer`,children:[e,t&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]})]}),m&&(0,x.jsx)(U,{errors:l.meta.errors})]})},G=({label:t,placeholder:n,required:r,disabled:i,options:o})=>{let s=(0,v.useId)(),{form:u,state:d,handleBlur:p,handleChange:m}=Q(),h=(0,T.useStore)(u.store,({isSubmitting:e})=>e),g=(0,w.useIsMobile)(),[_,b]=(0,v.useState)(!1),S=d.meta.isTouched&&!d.meta.isValid,C=i||h,E=o.find(({value:e})=>e===d.value)?.label,D=(0,x.jsxs)(a.Command,{children:[(0,x.jsx)(a.CommandInput,{placeholder:n??`Tìm kiếm…`}),(0,x.jsxs)(a.CommandList,{children:[(0,x.jsx)(a.CommandEmpty,{children:`Không tìm thấy kết quả.`}),(0,x.jsx)(a.CommandGroup,{children:o.map(e=>(0,x.jsx)(a.CommandItem,{value:e.label,onSelect:()=>{m(e.value===d.value?null:e.value),b(!1)},children:e.label},e.value))})]})]});return g?(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[t&&(0,x.jsxs)(c.Label,{htmlFor:s,children:[t,r&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsx)(e.Button,{id:s,type:`button`,variant:`outline`,color:`muted`,disabled:C,"aria-invalid":S,className:(0,y.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!d.value&&`text-text-positive-muted`,S&&`outline-danger bg-danger-bg-subtle`),onBlur:p,onClick:()=>b(!0),children:E??(0,x.jsx)(`span`,{className:`text-text-positive-muted`,children:n})}),(0,x.jsx)(f.Drawer,{open:_,onOpenChange:b,direction:`bottom`,children:(0,x.jsxs)(f.DrawerContent,{children:[(0,x.jsx)(f.DrawerHeader,{children:(0,x.jsx)(f.DrawerTitle,{children:t??n??`Tìm kiếm…`})}),(0,x.jsx)(`div`,{className:`overflow-y-auto pb-safe-bottom`,children:D})]})}),S&&(0,x.jsx)(U,{errors:d.meta.errors})]}):(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[t&&(0,x.jsxs)(c.Label,{htmlFor:s,children:[t,r&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsxs)(l.Popover,{children:[(0,x.jsx)(l.PopoverTrigger,{asChild:!0,children:(0,x.jsx)(e.Button,{id:s,variant:`outline`,color:`muted`,size:`lg`,disabled:C,"aria-invalid":S,className:(0,y.cn)(`flex w-full items-center justify-start rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,!d.value&&`text-text-positive-muted`),children:E??(0,x.jsx)(`span`,{className:`text-text-positive-muted`,children:n})})}),(0,x.jsx)(l.PopoverContent,{align:`start`,side:`bottom`,className:`w-[--radix-popover-trigger-width] p-0 rounded`,onBlur:p,children:D})]}),S&&(0,x.jsx)(U,{errors:d.meta.errors})]})},K=({label:t,placeholder:n,required:r,disabled:i,minDate:a,maxDate:o})=>{let s=(0,v.useId)(),{form:u,state:d,handleBlur:f,handleChange:m}=Q(),h=(0,T.useStore)(u.store,({isSubmitting:e})=>e),g=d.meta.isTouched&&!d.meta.isValid;return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[t&&(0,x.jsxs)(c.Label,{htmlFor:s,children:[t,r&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsxs)(l.Popover,{children:[(0,x.jsx)(l.PopoverTrigger,{asChild:!0,children:(0,x.jsxs)(e.Button,{id:s,variant:`outline`,color:`muted`,size:`lg`,disabled:i||h,"aria-invalid":g,className:(0,y.cn)(`flex w-full items-center justify-between rounded outline-border font-normal`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,d.value===null&&`text-text-positive-muted`),children:[(0,x.jsx)(`span`,{children:d.value?(0,S.format)(d.value,`PPP`):n??`Select date`}),(0,x.jsx)(_.CalendarDaysIcon,{strokeWidth:1})]})}),(0,x.jsx)(l.PopoverContent,{align:`start`,side:`bottom`,className:`w-fit p-0 rounded`,onBlur:f,children:(0,x.jsx)(p.Calendar,{mode:`single`,selected:d.value??void 0,hidden:{before:a??new Date(1900,0,1),after:o??new Date(2100,11,31)},onSelect:e=>{e&&m(e)}})})]}),g&&(0,x.jsx)(U,{errors:d.meta.errors})]})},q=({label:e,required:t,disabled:n,options:r,orientation:i=`vertical`})=>{let{form:a,name:o,state:s,handleBlur:l,handleChange:u}=Q(),d=(0,T.useStore)(a.store,({isSubmitting:e})=>e),f=s.meta.isTouched&&!s.meta.isValid,p=n||d;return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[e&&(0,x.jsxs)(c.Label,{children:[e,t&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsx)(m.RadioGroup,{name:o,value:s.value??``,disabled:p,"aria-invalid":f,className:i===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:u,onBlur:l,children:r.map(e=>(0,x.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,x.jsx)(m.RadioGroupItem,{id:`${o}-${e.value}`,value:e.value}),(0,x.jsx)(c.Label,{htmlFor:`${o}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),f&&(0,x.jsx)(U,{errors:s.meta.errors})]})},J=({label:e,placeholder:t,required:n,maxLength:r,disabled:i})=>{let a=(0,v.useId)(),{form:o,name:l,state:u,handleBlur:d,handleChange:f}=Q(),p=(0,T.useStore)(o.store,({isSubmitting:e})=>e),m=u.meta.isTouched&&!u.meta.isValid,h=(0,v.useCallback)(({target:{value:e}})=>{p||r&&e.length>r||f(e||null)},[p,r,f]);return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[e&&(0,x.jsxs)(c.Label,{htmlFor:a,children:[e,n&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsx)(s.Input,{id:a,name:l,type:`email`,value:u.value??``,"aria-invalid":m,autoComplete:`email`,placeholder:t,disabled:i||p,className:(0,y.cn)(`pl-9`),onBlur:d,onChange:h}),(0,x.jsx)(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,x.jsx)(_.AtSignIcon,{size:14})})]}),m&&(0,x.jsx)(U,{errors:u.meta.errors})]})},ee=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,te=e=>Number(e).toLocaleString(),ne=(e,t,n)=>{if(n===`none`)return e;let r=10**t,i=e*r;switch(n){case`up`:return Math.ceil(i)/r;case`down`:return Math.floor(i)/r;case`nearest`:return i%1<.1?Math.floor(i)/r:i%1>=.59?Math.ceil(i)/r:(Math.floor(i)+.5)/r;default:return e}},re=({disabled:e=!1,readOnly:t=!1,allowNegative:n=!1,numberAfterDecimalPoint:r=2,roundingRule:i=`none`,value:a=null,unitText:o,decimal:c,placeholder:l,precision:u,wrapperClassName:d,className:f,onChange:p,onValueChange:m,onFocus:h,onBlur:g,..._})=>{let b=(0,v.useRef)(null),S=(0,v.useRef)(null),[C,w]=(0,v.useState)(a?.toString()??null),T=(0,v.useMemo)(()=>c?.[1]??r,[c,r]),E=(0,v.useMemo)(()=>c&&c[0]-c[1],[c]),D=(0,v.useMemo)(()=>ee(n),[n]),O=(0,v.useCallback)(e=>{if(!T||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length;return n.length<=T&&r<=(E??1/0)},[T,E]),k=(0,v.useCallback)(e=>{if(e===`0`)return`0`;if(!Number(e))return null;let[t,n=``]=ne(parseFloat(e),Math.min(T-1,u||0),i).toString().split(`.`),r=te(t);return n?`${r}.${n}`:r},[T,u,i]),A=(0,v.useCallback)(e=>{let t=e===`0`,n=e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e);if(t){m?.(0),w(e);return}if(n){w(()=>(m?.(0),e));return}},[m]),j=(0,v.useCallback)(e=>{p?.(e);let{value:t}=e.target;if(t===``||t===void 0){m?.(null),w(null);return}A(t),!(!D.test(t)||!O(t))&&(m?.(parseFloat(t)||0),w(t))},[O,p,m,A,D]),M=(0,v.useCallback)(e=>{t||(h?.(e),w(e=>typeof e==`string`?e.replace(/,/g,``):null))},[t,h]),N=(0,v.useCallback)(e=>{t||(g?.(e),w(e=>e===null?null:e===`0`||e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e)?`0`:typeof e==`string`?k(e):null))},[t,k,g]);return(0,v.useEffect)(()=>{let e=document.activeElement===S.current;if(a==null||!D.test(a.toString())||!O(a.toString())){w(null);return}w(t=>e?t:k(a.toString()))},[k,a,O,D]),(0,v.useEffect)(()=>{if(!b.current||!S.current||!o)return;let e=b.current.offsetWidth;S.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[o]),(0,x.jsxs)(`div`,{className:(0,y.cn)(`relative`,d),children:[(0,x.jsx)(s.Input,{..._,ref:S,value:C||(t?`0`:``),placeholder:l,disabled:e,readOnly:t,className:(0,y.cn)(`text-end font-number text-sm slashed-zero lining-nums tabular-nums`,t&&`bg-muted text-muted-foreground`,f),onChange:j,onFocus:M,onBlur:N}),o&&(0,x.jsx)(`span`,{ref:b,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm`,children:o})]})},ie=({label:e,placeholder:t,required:n,unit:r,allowNegative:i,disabled:a})=>{let o=(0,v.useId)(),{form:s,state:l,handleBlur:u,handleChange:d}=Q(),f=(0,T.useStore)(s.store,({isSubmitting:e})=>e),p=l.meta.isTouched&&!l.meta.isValid,m=(0,v.useCallback)(e=>{f||d(e)},[f,d]);return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[e&&(0,x.jsxs)(c.Label,{htmlFor:o,children:[e,n&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsx)(re,{id:o,value:l.value,placeholder:t,unitText:r,allowNegative:i,disabled:a||f,onBlur:u,onValueChange:m}),p&&(0,x.jsx)(U,{errors:l.meta.errors})]})},ae=({label:e,placeholder:t,required:n,disabled:r})=>{let i=(0,v.useId)(),{form:a,name:o,state:l,handleBlur:u,handleChange:d}=Q(),f=(0,T.useStore)(a.store,({isSubmitting:e})=>e),[p,m]=(0,v.useState)(!1),h=l.meta.isTouched&&!l.meta.isValid,g=(0,v.useCallback)(()=>m(e=>!e),[]),y=(0,v.useCallback)(({target:{value:e}})=>{f||d(e||null)},[f,d]);return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[e&&(0,x.jsxs)(c.Label,{htmlFor:i,children:[e,n&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsx)(s.Input,{id:i,name:o,type:p?`text`:`password`,value:l.value??``,"aria-invalid":h,autoComplete:`current-password`,placeholder:t,disabled:r||f,className:`pr-9`,onBlur:u,onChange:y}),(0,x.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-label":p?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":p,"aria-controls":i,className:`absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50`,disabled:r||f,onClick:g,children:p?(0,x.jsx)(_.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,x.jsx)(_.EyeIcon,{size:16,"aria-hidden":`true`})})]}),h&&(0,x.jsx)(U,{errors:l.meta.errors})]})},oe=({label:t,placeholder:n,required:r,options:i})=>{let a=(0,v.useId)(),{state:o,handleBlur:s,handleChange:l}=Q(),d=(0,w.useIsMobile)(),[p,m]=(0,v.useState)(!1),h=o.meta.isTouched&&!o.meta.isValid,g=i.find(e=>e.value===o.value)?.label;return d?(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[t&&(0,x.jsxs)(c.Label,{htmlFor:a,children:[t,r&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsx)(e.Button,{id:a,type:`button`,variant:`outline`,color:`muted`,className:(0,y.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!o.value&&`text-text-positive-muted`,h&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":h,onBlur:s,onClick:()=>m(!0),children:g??(0,x.jsx)(`span`,{className:`text-text-positive-muted`,children:n})}),(0,x.jsx)(f.Drawer,{open:p,onOpenChange:m,direction:`bottom`,children:(0,x.jsxs)(f.DrawerContent,{children:[(0,x.jsx)(f.DrawerHeader,{children:(0,x.jsx)(f.DrawerTitle,{children:t??n??`Select an option`})}),(0,x.jsx)(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:i.length>0?i.map(e=>(0,x.jsx)(f.DrawerClose,{asChild:!0,children:(0,x.jsx)(`button`,{type:`button`,className:(0,y.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,o.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{l(e.value),m(!1)},children:e.label})},e.value)):(0,x.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,x.jsx)(_.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]})}),h&&(0,x.jsx)(U,{errors:o.meta.errors})]}):(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[t&&(0,x.jsxs)(c.Label,{htmlFor:a,children:[t,r&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsxs)(u.Select,{value:o.value??``,onValueChange:l,children:[(0,x.jsx)(u.SelectTrigger,{id:a,"aria-invalid":h?`true`:void 0,onBlur:s,children:(0,x.jsx)(u.SelectValue,{placeholder:n})}),(0,x.jsx)(u.SelectContent,{children:i.length>0?i.map(e=>(0,x.jsx)(u.SelectItem,{value:e.value,children:e.label},e.value)):(0,x.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,x.jsx)(_.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),h&&(0,x.jsx)(U,{errors:o.meta.errors})]})},se=({label:e,placeholder:t,required:n,maxLength:r,rows:i,disabled:a})=>{let o=(0,v.useId)(),{form:s,name:l,state:u,handleBlur:d,handleChange:f}=Q(),p=(0,T.useStore)(s.store,({isSubmitting:e})=>e),m=u.meta.isTouched&&!u.meta.isValid,g=(0,v.useCallback)(({target:{value:e}})=>{p||r&&e.length>r||f(e||null)},[p,r,f]);return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[e&&(0,x.jsxs)(c.Label,{htmlFor:o,children:[e,n&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsx)(h.Textarea,{id:o,name:l,value:u.value??``,"aria-invalid":m,placeholder:t,rows:i,disabled:a||p,onBlur:d,onChange:g}),m&&(0,x.jsx)(U,{errors:u.meta.errors})]})},ce=({label:e,placeholder:t,required:n,maxLength:r,disabled:i})=>{let a=(0,v.useId)(),{form:o,name:l,state:u,handleBlur:d,handleChange:f}=Q(),p=(0,T.useStore)(o.store,({isSubmitting:e})=>e),m=u.meta.isTouched&&!u.meta.isValid,h=(0,v.useCallback)(({target:{value:e}})=>{p||r&&e.length>r||f(e||null)},[p,r,f]);return(0,x.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[e&&(0,x.jsxs)(c.Label,{htmlFor:a,children:[e,n&&(0,x.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,x.jsx)(s.Input,{id:a,name:l,value:u.value??``,"aria-invalid":m,placeholder:t,autoComplete:`off`,disabled:i||p,onBlur:d,onChange:h}),m&&(0,x.jsx)(U,{errors:u.meta.errors})]})},le=({label:e,description:t,options:n,tooltip:r,helperText:i,orientation:a})=>{let s=Q(),c=(0,T.useStore)(s.form.store,({isSubmitting:e})=>e);return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:a,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{children:[e,r&&(0,x.jsx)(V,{tooltip:r})]}),(0,x.jsx)(z,{children:t}),(0,x.jsx)(B,{isShow:!!i,children:i})]}),(0,x.jsx)(I,{children:(0,x.jsx)(N,{className:`flex flex-col gap-y-2`,children:n.map(e=>(0,x.jsxs)(P,{orientation:`horizontal`,children:[(0,x.jsx)(o.Checkbox,{id:`${s.name}-${e.value}`,name:s.name,checked:s.state.value?.includes(e.value)??!1,disabled:c,onCheckedChange:t=>{if(t&&s.state.value!==null)s.pushValue(e.value);else if(t&&s.state.value===null)s.setValue([e.value]);else if(!t&&s.state.value!==null){let t=s.state.value.indexOf(e.value);t>-1&&s.removeValue(t)}else s.setValue(null)}}),(0,x.jsx)(L,{htmlFor:`${s.name}-${e.value}`,className:`text-text-positive`,children:e.label})]},e.value))})})]}),(0,x.jsx)(H,{})]})},Y=(0,v.memo)(({label:t,description:n,placeholder:r,tooltip:o,helperText:s,orientation:c=`responsive`,options:u,required:d=!1,disabled:f=!1,clearable:p=!1,showErrorMessage:m=!0})=>{let h=(0,v.useId)(),g=Q(),b=(0,w.useIsMobile)(),[S,E]=(0,v.useState)(!1),[D,O]=(0,v.useState)(!1),k=(0,T.useStore)(g.form.store,({isSubmitting:e})=>e),A=f||k,j=g.state.meta.isDirty||g.state.meta.isTouched,M=j&&!g.state.meta.isValid,R=d&&g.state.value===null,W=p&&!!g.state.value&&!A,G=u.find(({value:e})=>e===g.state.value)?.label,K=()=>{g.handleChange(null),g.handleBlur()},q=t=>(0,x.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:A,"aria-invalid":M?!0:void 0,"aria-describedby":h,className:(0,y.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,W&&`pr-8`,!g.state.value&&`text-text-positive-muted`,M&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:G?(0,x.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:G}):(0,x.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:r})}),J=e=>(0,x.jsxs)(a.Command,{className:`border-none`,children:[(0,x.jsx)(a.CommandInput,{placeholder:r??`Tìm kiếm…`}),(0,x.jsxs)(a.CommandList,{children:[(0,x.jsx)(a.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,x.jsx)(a.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:u.map(({value:t,label:n})=>(0,x.jsx)(a.CommandItem,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:c,"data-invalid":M,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{"aria-required":R,htmlFor:g.name,children:[t,o&&(0,x.jsx)(V,{tooltip:o})]}),(0,x.jsx)(z,{children:n})]}),(0,x.jsx)(I,{className:`flex justify-end`,children:(0,x.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,x.jsxs)(`div`,{className:`relative`,children:[b?(0,x.jsxs)(x.Fragment,{children:[q(()=>E(!0)),(0,x.jsx)(i.Dialog,{open:S,onOpenChange:e=>{E(e),e||g.handleBlur()},children:(0,x.jsxs)(i.DialogPortal,{children:[(0,x.jsx)(i.DialogOverlay,{}),(0,x.jsxs)(C.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,y.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,x.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,x.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:t}),(0,x.jsx)(i.DialogClose,{asChild:!0,children:(0,x.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,x.jsx)(_.XIcon,{size:16})})})]}),(0,x.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[W&&(0,x.jsx)(i.DialogClose,{asChild:!0,children:(0,x.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:K,children:[(0,x.jsx)(_.XIcon,{size:14}),`Xóa lựa chọn`]})}),J(e=>{g.handleChange(e),E(!1),g.handleBlur()})]}),(0,x.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,x.jsxs)(l.Popover,{open:D,onOpenChange:e=>{O(e),e||g.handleBlur()},children:[(0,x.jsx)(l.PopoverTrigger,{asChild:!0,children:q()}),(0,x.jsx)(l.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:J(e=>{g.handleChange(e),O(!1),g.handleBlur()})})]}),W&&(0,x.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:K,children:(0,x.jsx)(_.XIcon,{"aria-hidden":`true`})})]}),j&&m&&(0,x.jsx)(U,{id:h,className:`mt-1`,errors:g.state.meta.errors}),(0,x.jsx)(B,{isShow:!!s,children:s})]})})]}),(0,x.jsx)(H,{})]})});Y.displayName=`ComboboxField`;const X=(0,v.memo)(({label:t,description:n,placeholder:r,orientation:i=`responsive`,tooltip:a,helperText:o,showErrorMessage:s=!0,required:c=!1,disabled:u=!1,minDate:d,maxDate:f})=>{let m=(0,v.useId)(),h=Q(),[g,b]=(0,v.useState)(!1),C=(0,T.useStore)(h.form.store,({isSubmitting:e})=>e),w=u||C,E=h.state.meta.isDirty||h.state.meta.isTouched,D=E&&!h.state.meta.isValid,O=c&&h.state.value===null,k=e=>{h.handleChange(e),b(!1)};return(0,x.jsxs)(N,{className:`px-4`,children:[(0,x.jsxs)(P,{orientation:i,"data-invalid":D,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{htmlFor:h.name,"aria-required":O,children:[t,a&&(0,x.jsx)(V,{tooltip:a})]}),(0,x.jsx)(z,{children:n})]}),(0,x.jsx)(I,{className:`flex flex-col space-y-1`,children:(0,x.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,x.jsxs)(l.Popover,{open:g,onOpenChange:e=>{b(e),e||h.handleBlur()},children:[(0,x.jsx)(l.PopoverTrigger,{asChild:!0,children:(0,x.jsxs)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:w,"aria-invalid":D?!0:void 0,"aria-describedby":m,className:(0,y.cn)(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,h.state.value===null&&`text-text-positive-muted`,D&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),children:[(0,x.jsx)(`p`,{children:h.state.value===null?r??`Select date`:(0,S.format)(h.state.value,`PPPP`)}),(0,x.jsx)(_.CalendarDaysIcon,{strokeWidth:1})]})}),(0,x.jsxs)(l.PopoverContent,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,children:[(0,x.jsxs)(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.endOfToday)()),children:`Hôm nay`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.endOfTomorrow)()),children:`Ngày mai`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.endOfYesterday)()),children:`Hôm qua`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.subDays)((0,S.endOfToday)(),3)),children:`3 ngày qua`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.subDays)((0,S.endOfToday)(),7)),children:`7 ngày qua`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.subDays)((0,S.endOfToday)(),30)),children:`30 ngày qua`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.startOfMonth)((0,S.endOfToday)())),children:`Tháng này`}),(0,x.jsx)(e.Button,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>k((0,S.lastDayOfMonth)((0,S.endOfToday)())),children:`Tháng trước`})]}),(0,x.jsx)(`div`,{className:`flex flex-1 flex-col`,children:(0,x.jsx)(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:(0,x.jsx)(p.Calendar,{mode:`single`,selected:h.state.value??void 0,hidden:{before:d??new Date(1900,0,1),after:f??new Date(2100,11,31)},onSelect:e=>{e&&k(e)}})})})]})]}),E&&s&&(0,x.jsx)(U,{id:m,className:`mt-1`,errors:h.state.meta.errors}),(0,x.jsx)(B,{isShow:!!o,children:o})]})})]}),(0,x.jsx)(H,{})]})});X.displayName=`DateField`;const ue=({label:e,description:t,placeholder:n,tooltip:r,helperText:i,orientation:a=`responsive`,showErrorMessage:o=!0,required:c=!1,maxLength:l})=>{let{form:u,name:d,state:f,handleBlur:p,handleChange:m}=Q(),h=(0,T.useStore)(u.store,({isSubmitting:e})=>e),g=f.meta.isDirty&&f.meta.isTouched&&!f.meta.isValid,b=c&&f.value===null,S=!h&&!!f.value,C=(0,v.useCallback)(({target:{value:e}})=>{h||l&&e.length>l||m(e||null)},[h,l,m]),w=(0,v.useCallback)(()=>{h||m(null)},[h,m]);return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{"data-invalid":g,orientation:a,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{htmlFor:d,"aria-required":b,children:[e,r&&(0,x.jsx)(V,{tooltip:r})]}),(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{children:[(0,x.jsx)(s.Input,{id:d,name:d,value:f.value===null?``:f.value,"aria-invalid":g,autoComplete:`email`,placeholder:n,className:(0,y.cn)(`pl-9`,S&&`pr-9`,h&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:p,onChange:C}),(0,x.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,x.jsx)(_.AtSignIcon,{size:14})}),S&&(0,x.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:w,children:(0,x.jsx)(_.XIcon,{size:14,"aria-hidden":`true`})}),(0,x.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:o&&f.meta.isDirty&&(0,x.jsx)(U,{errors:f.meta.errors})}),(0,x.jsx)(B,{isShow:!!i,children:i})]})]}),(0,x.jsx)(H,{})]})},Z=(0,v.memo)(({label:e,description:t,placeholder:n,tooltip:r,helperText:i,orientation:a=`responsive`,showErrorMessage:o=!0,rounding:s,decimalPlaces:c,precision:l,unit:u,required:d=!1,disabled:f=!1,allowNegative:p})=>{let m=(0,v.useId)(),h=(0,v.useId)(),g=Q(),b=(0,T.useStore)(g.form.store,({isSubmitting:e})=>e),S=f||b,C=g.state.meta.isDirty||g.state.meta.isTouched,w=C&&!g.state.meta.isValid,E=d&&g.state.value===null,D=!!g.state.meta.errors.length,O=(0,v.useCallback)(e=>{S||g.handleChange(e)},[S,g.handleChange]);return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:a,"data-invalid":w,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{htmlFor:m,"aria-required":E,children:[e,r&&(0,x.jsx)(V,{tooltip:r})]}),(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{children:[(0,x.jsxs)(`div`,{className:`relative w-full`,children:[(0,x.jsx)(re,{id:m,value:g.state.value,"aria-invalid":w,"aria-describedby":h,placeholder:n,disabled:S,roundingRule:s,numberAfterDecimalPoint:c,precision:l,unitText:u,allowNegative:p,className:(0,y.cn)(S&&`pointer-events-none opacity-60`),onBlur:g.handleBlur,onValueChange:O}),b&&(0,x.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:(0,x.jsx)(_.Loader2Icon,{className:`animate-spin text-primary-strong`})}),!b&&C&&o&&D&&(0,x.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:(0,x.jsx)(_.BanIcon,{})}),(0,x.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:C&&o?(0,x.jsx)(U,{id:h,className:`flex-1`,errors:g.state.meta.errors}):(0,x.jsx)(`div`,{})})]}),(0,x.jsx)(B,{isShow:!!i,children:i})]})]}),(0,x.jsx)(H,{})]})});Z.displayName=`NumberField`;const de=({label:e,description:t,placeholder:n,orientation:r=`responsive`,tooltip:i,helperText:a,showErrorMessage:o=!0})=>{let c=(0,v.useId)(),{form:l,name:u,state:d,handleBlur:f,handleChange:p}=Q(),m=(0,T.useStore)(l.store,({isSubmitting:e})=>e),[h,g]=(0,v.useState)(!1),y=d.meta.isDirty&&d.meta.isTouched&&!d.meta.isValid,b=(0,v.useCallback)(()=>g(e=>!e),[]),S=(0,v.useCallback)(({target:{value:e}})=>{m||p(e||null)},[m,p]);return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{"data-invalid":y,orientation:r,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{htmlFor:c,children:[e,i&&(0,x.jsx)(V,{tooltip:i})]}),(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{children:[(0,x.jsx)(s.Input,{id:c,name:u,type:h?`text`:`password`,placeholder:n,value:d.value??``,"aria-invalid":y,autoComplete:`new-password`,onBlur:f,onChange:S}),(0,x.jsx)(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:b,"aria-label":h?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":h,"aria-controls":c,children:h?(0,x.jsx)(_.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,x.jsx)(_.EyeIcon,{size:16,"aria-hidden":`true`})}),(0,x.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:o&&d.meta.isDirty&&(0,x.jsx)(U,{errors:d.meta.errors})}),(0,x.jsx)(B,{isShow:!!a,children:a})]})]}),(0,x.jsx)(H,{})]})},fe=({label:e,description:t,orientation:n,options:r,tooltip:i,helperText:a})=>{let o=Q(),s=(0,T.useStore)(o.form.store,({isSubmitting:e})=>e);return(0,x.jsxs)(N,{className:`px-4`,children:[(0,x.jsxs)(P,{orientation:n,className:`flex-col gap-2`,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{children:[e,i&&(0,x.jsx)(V,{tooltip:i})]}),(0,x.jsx)(z,{children:t}),(0,x.jsx)(B,{isShow:!!a,children:a})]}),(0,x.jsx)(I,{children:(0,x.jsx)(m.RadioGroup,{value:o.state.value??``,className:`w-full`,onValueChange:o.handleChange,children:r.map(e=>(0,x.jsx)(L,{className:(0,y.cn)(`h-fit`,o.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,s&&`pointer-events-none bg-muted-muted opacity-60`,o.state.value===e.value&&s&&`border-border-strong!`),children:(0,x.jsxs)(P,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[(0,x.jsx)(m.RadioGroupItem,{value:e.value,className:`mt-0.5 shrink-0`}),(0,x.jsxs)(F,{className:`gap-0.5!`,children:[(0,x.jsx)(R,{children:e.label}),(0,x.jsx)(z,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),(0,x.jsx)(H,{})]})},pe=(0,v.memo)(({label:e,description:t,placeholder:n,orientation:r=`responsive`,tooltip:a,options:o,helperText:s,clearable:c=!1,required:l=!1,disabled:d=!1,showErrorMessage:f=!0})=>{let p=(0,v.useId)(),m=Q(),h=(0,w.useIsMobile)(),[g,b]=(0,v.useState)(!1),S=(0,T.useStore)(m.form.store,({isSubmitting:e})=>e),E=d||S,D=m.state.meta.isDirty||m.state.meta.isTouched,O=D&&!m.state.meta.isValid,k=l&&m.state.value===null,A=c&&!!m.state.value&&!E,j=o.find(e=>e.value===m.state.value)?.label,M=()=>{m.handleChange(null),m.handleBlur()};return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:r,"data-invalid":O,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{htmlFor:m.name,"aria-required":k,children:[e,a&&(0,x.jsx)(V,{tooltip:a})]}),(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{className:`flex flex-col`,children:[h?(0,x.jsxs)(x.Fragment,{children:[(0,x.jsxs)(`button`,{id:m.name,type:`button`,disabled:E,"aria-invalid":O?`true`:void 0,"aria-describedby":p,onBlur:m.handleBlur,onClick:()=>b(!0),className:(0,y.cn)(`flex w-full items-center justify-between`,`outline-1 outline-border -outline-offset-1`,`gap-2 rounded bg-transparent px-3 py-2`,`shadow-input transition-all cursor-pointer whitespace-nowrap text-sm`,`focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`disabled:cursor-not-allowed disabled:opacity-50`,O&&`outline-danger bg-danger-bg-subtle ring-danger-weak`,!m.state.value&&`text-text-positive-muted`),children:[(0,x.jsx)(`span`,{className:`line-clamp-1`,children:j??n}),(0,x.jsx)(_.ChevronDownIcon,{size:16,className:`shrink-0 opacity-50`})]}),(0,x.jsx)(i.Dialog,{open:g,onOpenChange:e=>{b(e),e||m.handleBlur()},children:(0,x.jsxs)(i.DialogPortal,{children:[(0,x.jsx)(i.DialogOverlay,{}),(0,x.jsxs)(C.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,y.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,x.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,x.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:e??n??`Chọn một tùy chọn`}),(0,x.jsx)(i.DialogClose,{asChild:!0,children:(0,x.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,x.jsx)(_.XIcon,{size:16})})})]}),(0,x.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[A&&(0,x.jsx)(i.DialogClose,{asChild:!0,children:(0,x.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:M,children:[(0,x.jsx)(_.XIcon,{size:14}),`Xóa lựa chọn`]})}),o.length>0?o.map(e=>(0,x.jsx)(i.DialogClose,{asChild:!0,children:(0,x.jsx)(`button`,{type:`button`,className:(0,y.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,m.state.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{m.handleChange(e.value),m.handleBlur()},children:e.label})},e.value)):(0,x.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,x.jsx)(_.PackagePlusIcon,{strokeWidth:1}),`Không có tùy chọn`]})]}),(0,x.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(u.Select,{value:m.state.value??``,disabled:E,onValueChange:m.handleChange,children:[(0,x.jsx)(u.SelectTrigger,{"aria-invalid":O?`true`:void 0,"aria-describedby":p,onBlur:m.handleBlur,children:(0,x.jsx)(u.SelectValue,{placeholder:n})}),(0,x.jsx)(u.SelectContent,{children:o.length>0?o.map(e=>(0,x.jsx)(u.SelectItem,{value:e.value,children:e.label},e.value)):(0,x.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,x.jsx)(_.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),A&&(0,x.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-7 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:M,children:(0,x.jsx)(_.XIcon,{"aria-hidden":`true`})})]}),D&&f&&(0,x.jsx)(U,{id:p,className:`mt-1`,errors:m.state.meta.errors}),(0,x.jsx)(B,{isShow:!!s,children:s})]})]}),(0,x.jsx)(H,{})]})});pe.displayName=`SelectField`;function me({className:e,...t}){return(0,x.jsx)(C.Switch.Root,{"data-slot":`switch`,className:(0,y.cn)(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...t,children:(0,x.jsx)(C.Switch.Thumb,{"data-slot":`switch-thumb`,className:(0,y.cn)(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const he=({label:e,description:t,helperText:n})=>{let r=Q();return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[(0,x.jsxs)(F,{children:[(0,x.jsx)(R,{className:`cursor-pointer`,children:(0,x.jsx)(`label`,{htmlFor:r.name,children:e})}),(0,x.jsx)(z,{children:t}),(0,x.jsx)(me,{id:r.name,checked:r.state.value??!1,className:`absolute top-1 right-1`,onBlur:r.handleBlur,onCheckedChange:r.handleChange})]}),(0,x.jsx)(B,{isShow:!!n,children:n})]}),(0,x.jsx)(H,{})]})},ge=e=>{e.key===`Enter`&&e.preventDefault()},_e=(0,v.memo)(({label:e,description:t,placeholder:n,tooltip:r,helperText:i,counter:a=!1,orientation:o=`responsive`,showClearButton:c=!1,showErrorMessage:l=!0,required:u=!1,disabled:d=!1,maxLength:f})=>{let p=(0,v.useId)(),m=(0,v.useId)(),h=(0,v.useRef)(null),{form:g,name:b,state:S,handleBlur:C,handleChange:w}=Q(),E=(0,T.useStore)(g.store,({isSubmitting:e})=>e),D=d||E,O=S.meta.isDirty||S.meta.isTouched,k=O&&!S.meta.isValid,A=u&&S.value===null,j=S.meta.errors.length>0,M=c&&!D&&!!S.value,R=a?S.value?.length??0:0,W=a&&!!f&&R>=f*.8,G=a&&!!f&&R>=f,K=a?f?`${R} / ${f} ký tự`:`${R} ký tự`:null,q=a||O&&l,J=(0,v.useCallback)(({target:{value:e}})=>{a&&f&&e.length>f||w(e||null)},[a,f,w]),ee=(0,v.useCallback)(()=>{w(null),h.current?.focus()},[w]);return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:o,"data-invalid":k,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{"aria-required":A,htmlFor:p,children:[e,r&&(0,x.jsx)(V,{tooltip:r})]}),t&&(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{children:[(0,x.jsx)(s.Input,{ref:h,id:p,name:b,value:S.value??``,"aria-invalid":k,"aria-describedby":m,autoComplete:`off`,placeholder:n,autoCapitalize:`none`,autoCorrect:`off`,disabled:D,className:(0,y.cn)(`pr-6`,D&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:C,onChange:J,onKeyDown:ge}),M&&(0,x.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-1 top-2.5 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:ee,children:(0,x.jsx)(_.XIcon,{"aria-hidden":`true`})}),E&&(0,x.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,x.jsx)(_.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!M&&O&&l&&j&&(0,x.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,x.jsx)(_.BanIcon,{"aria-hidden":`true`,size:14})}),q&&(0,x.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[O&&l?(0,x.jsx)(U,{id:m,className:`flex-1`,errors:S.meta.errors}):(0,x.jsx)(`div`,{}),a&&(0,x.jsx)(`p`,{className:(0,y.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,G?`font-medium text-danger-strong`:W?`text-warning-strong`:`text-text-positive-weak`),children:K})]}),(0,x.jsx)(B,{isShow:!!i,children:i})]})]}),(0,x.jsx)(H,{})]})});_e.displayName=`TextField`;const ve=(0,v.memo)(({label:e,description:t,placeholder:n,tooltip:r,helperText:i,counter:a=!1,orientation:o=`responsive`,showErrorMessage:s=!0,required:c=!1,disabled:l=!1,maxLength:u})=>{let d=(0,v.useId)(),f=(0,v.useId)(),[p,m]=(0,v.useState)(!1),g=(0,v.useRef)(null),{form:b,state:S,name:C,handleBlur:w,handleChange:E}=Q(),D=(0,T.useStore)(b.store,({isSubmitting:e})=>e),O=l||D,k=S.value?.length??0,A=(0,v.useMemo)(()=>a?u?`${k} / ${u} ký tự`:`${k} ký tự`:``,[k,a,u]),j=!!u&&k>=u*.8,M=!!u&&k>=u,R=S.meta.isDirty||S.meta.isTouched,W=R&&!S.meta.isValid,G=c&&S.value===null,K=!!S.meta.errors.length,q=!!S.value&&!O,J=(0,v.useMemo)(()=>(0,y.cn)(`h-4 flex-0 text-nowrap text-end text-xs tabular-nums transition-colors`,M?`font-medium text-danger-strong`:j?`text-warning-strong`:`text-text-positive-weak`),[M,j]),ee=(0,v.useCallback)(({target:{value:e}})=>{O||a&&u&&e.length>u||E(e||null)},[O,a,u,E]),te=(0,v.useCallback)(async()=>{S.value&&(await navigator.clipboard.writeText(S.value),g.current!==null&&window.clearTimeout(g.current),m(!0),g.current=window.setTimeout(()=>m(!1),1500))},[S.value]);return(0,v.useEffect)(()=>()=>{g.current!==null&&window.clearTimeout(g.current)},[]),(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:o,"data-invalid":W,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{"aria-required":G,htmlFor:d,children:[e,r&&(0,x.jsx)(V,{tooltip:r})]}),(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{children:[(0,x.jsx)(h.Textarea,{id:d,name:C,value:S.value??``,"aria-invalid":W,"aria-describedby":f,autoCapitalize:`none`,autoComplete:`off`,autoCorrect:`off`,placeholder:n,disabled:O,className:(0,y.cn)(O&&`pointer-events-none bg-muted-muted opacity-60`),onChange:ee,onBlur:w}),q&&(0,x.jsx)(`button`,{type:`button`,"aria-label":`Sao chép`,className:`absolute inset-e-1 top-2 flex size-4 cursor-pointer items-center justify-center rounded-md outline-none transition-[color,transform] focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:te,children:p?(0,x.jsx)(_.CheckIcon,{"aria-hidden":`true`,className:`text-success-strong`}):(0,x.jsx)(_.CopyIcon,{"aria-hidden":`true`,className:`text-text-positive-weak transition-colors hover:text-text-positive focus-visible:text-primary-strong`})}),D&&(0,x.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-muted-weak`,children:(0,x.jsx)(_.Loader2Icon,{size:14,className:`animate-spin text-primary-strong`})}),!q&&R&&s&&K&&(0,x.jsx)(`div`,{className:`absolute inset-e-2 inset-y-0 top-2.5 text-danger-strong`,children:(0,x.jsx)(_.BanIcon,{size:14})}),(0,x.jsxs)(`div`,{className:`my-1 flex w-full items-start justify-between gap-x-2`,children:[R&&s?(0,x.jsx)(U,{id:f,className:`flex-1`,errors:S.meta.errors}):(0,x.jsx)(`div`,{}),!!a&&(0,x.jsx)(`p`,{className:J,children:A})]}),(0,x.jsx)(B,{isShow:!!i,children:i})]})]}),(0,x.jsx)(H,{})]})});ve.displayName=`TextareaField`;const ye=(0,v.memo)(({label:e,description:t,placeholder:n,tooltip:r,helperText:i,showErrorMessage:a=!0,required:o=!1})=>{let{form:s,state:c,handleChange:l}=Q(),u=(0,T.useStore)(s.store,({isSubmitting:e})=>e),d=c.meta.isDirty&&c.meta.isTouched&&!c.meta.isValid,f=o&&c.value===null,p=(0,v.useCallback)(e=>{u||l(e||null)},[u,l]);return(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:`vertical`,"data-invalid":d,children:[(0,x.jsxs)(F,{children:[(0,x.jsxs)(L,{"aria-required":f,children:[e,r&&(0,x.jsx)(V,{tooltip:r})]}),(0,x.jsx)(z,{children:t})]}),(0,x.jsx)(g.t,{value:c.value??``,placeholder:n,readOnly:u,onChange:p}),c.meta.isDirty&&a&&!!c.meta.errors.length&&(0,x.jsx)(U,{errors:c.meta.errors}),(0,x.jsx)(B,{isShow:!!i,children:i})]}),(0,x.jsx)(H,{})]})});ye.displayName=`TextEditorField`;const be=({label:t,className:n})=>{let r=$(),i=(0,v.useCallback)(async()=>{await r.handleSubmit({submitAction:`submit`}),r.state.isSubmitSuccessful&&r.reset()},[r]);return(0,x.jsx)(r.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:r,isSubmitting:a})=>(0,x.jsx)(e.Button,{type:`button`,size:`md`,disabled:r,isLoading:a,className:(0,y.cn)(`min-h-8 min-w-32`,n),onClick:i,children:t??`Xác nhận`})})},xe=({type:t=`create`})=>{let n=$();return(0,x.jsxs)(`div`,{className:`flex h-8 items-center justify-between`,children:[(0,x.jsx)(n.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:t})=>(0,x.jsx)(e.Button,{color:`muted`,variant:`outline`,type:`button`,size:`md`,disabled:t,className:`h-full min-w-32`,onClick:()=>n.reset(),children:`Hủy bỏ`})}),t===`create`&&(0,x.jsx)(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>(0,x.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await n.handleSubmit({submitAction:`create`}),n.state.isSubmitSuccessful&&n.reset()},children:[(0,x.jsx)(_.PlusIcon,{}),`Thêm mới`]})}),t===`update`&&(0,x.jsx)(n.Subscribe,{selector:e=>({disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit||e.isDefaultValue,isSubmitting:e.isSubmitting}),children:({disabled:t,isSubmitting:r})=>(0,x.jsxs)(e.Button,{type:`submit`,size:`md`,disabled:t,isLoading:r,className:`h-full min-w-32`,onClick:async()=>{await n.handleSubmit({submitAction:`update`}),n.state.isSubmitSuccessful&&n.reset()},children:[(0,x.jsx)(_.ArrowDownToLine,{}),`Cập nhật`]})})]})};function Se({className:e,orientation:t=`horizontal`,decorative:n=!0,...r}){return(0,x.jsx)(C.Separator.Root,{"data-slot":`separator`,decorative:n,orientation:t,className:(0,y.cn)(`shrink-0 bg-border-weak`,`data-[orientation=horizontal]:h-px`,`data-[orientation=horizontal]:w-full`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:w-px`,e),...r})}const Ce=({title:t,description:n,onDelete:r,children:i})=>(0,x.jsxs)(`section`,{"data-slot":`card-form`,className:`relative flex flex-col rounded-md bg-card pb-4 shadow-card ring-1 ring-border`,children:[(0,x.jsxs)(`div`,{"data-slot":`card-form-header`,className:`flex flex-col space-y-0.5 px-4 py-3`,children:[(0,x.jsx)(`p`,{className:`font-semibold text-base tracking-tight`,children:t}),!!n&&(0,x.jsx)(`p`,{className:`text-text-positive-weak text-sm`,children:n})]}),(0,x.jsx)(Se,{}),(0,x.jsx)(`div`,{"data-slot":`card-form-main`,className:`flex flex-col py-4`,children:i}),!!r&&(0,x.jsxs)(e.Button,{color:`danger`,variant:`ghost`,size:`sm`,className:`absolute top-2.5 right-3`,onClick:e=>{r?.(),e.preventDefault(),e.stopPropagation()},children:[(0,x.jsx)(_.Trash2Icon,{}),`Remove`]})]}),we=({children:e})=>(0,x.jsx)(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:e}),Te=({disabled:t,className:n,onClick:r,children:i})=>(0,x.jsx)(e.Button,{type:`button`,variant:`outline`,color:`muted`,disabled:t,className:(0,y.cn)(`min-w-40`,n),onClick:r,children:i??`Huỷ`}),Ee=({isSubmitting:t,submitText:n=`Xác nhận`,disabled:r,className:i,onClick:a})=>(0,x.jsx)(e.Button,{type:`button`,isLoading:t,disabled:r||t,className:(0,y.cn)(`min-w-40`,i),onClick:a,children:n}),De=({title:e,submitText:t,width:r,maxWidth:a,className:o,open:s,onOpenChange:c,children:l})=>{let u=$(),d=(0,v.useCallback)(e=>{e||u.reset(),c?.(e)},[u.reset,c]);return(0,x.jsx)(i.Dialog,{open:s,onOpenChange:d,children:(0,x.jsxs)(i.DialogPortal,{"data-slot":`dialog-portal`,children:[(0,x.jsx)(i.DialogOverlay,{}),(0,x.jsxs)(i.DialogContent,{style:{"--width":r,"--max-width":a},className:(0,y.cn)(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,r&&`sm:w-(--width)`,a&&`sm:max-w-(--max-width)`,o),onOpenAutoFocus:e=>{e.preventDefault()},children:[(0,x.jsx)(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:(0,x.jsx)(i.DialogTitle,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:e})}),(0,x.jsx)(n.Separator,{}),(0,x.jsx)(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:l}),(0,x.jsx)(n.Separator,{}),(0,x.jsxs)(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[(0,x.jsx)(u.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>(0,x.jsx)(Te,{disabled:e,onClick:()=>{u.reset(),d(!1)}})}),(0,x.jsx)(u.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:n})=>(0,x.jsx)(Ee,{isSubmitting:e,disabled:n,submitText:t,onClick:()=>u.handleSubmit()})})]})]})]})})},Oe=({label:e,description:t,helperText:n,orientation:r=`responsive`,children:i})=>(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{orientation:r,children:[(0,x.jsxs)(F,{children:[(0,x.jsx)(L,{children:e}),(0,x.jsx)(z,{children:t})]}),(0,x.jsxs)(I,{children:[i,(0,x.jsx)(B,{isShow:!!n,children:n})]})]}),(0,x.jsx)(H,{})]}),ke=({title:e,open:t,contentClassName:n,onOpenChange:i,children:a})=>{let o=$();return(0,x.jsx)(C.Dialog.Root,{"data-slot":`dialog`,open:t,onOpenChange:i,children:(0,x.jsxs)(C.Dialog.Portal,{"data-slot":`dialog-portal`,children:[(0,x.jsx)(C.Dialog.Overlay,{"data-slot":`dialog-overlay`,className:(0,y.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,x.jsx)(C.Dialog.Content,{"data-slot":`dialog-content`,className:(0,y.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,x.jsxs)(`section`,{className:`relative flex size-full flex-col`,children:[(0,x.jsx)(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border px-5`,children:(0,x.jsx)(`h2`,{className:`font-semibold text-base tracking-tight text-text-positive`,children:e})}),(0,x.jsx)(`div`,{className:(0,y.cn)(`flex flex-1 flex-col overflow-y-auto py-4`,n),children:a}),(0,x.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-2 border-t border-border px-4 py-3`,children:[(0,x.jsx)(o.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,x.jsx)(Ee,{isSubmitting:e,disabled:t,className:`w-full`,onClick:()=>o.handleSubmit()})}),(0,x.jsx)(o.Subscribe,{selector:e=>({disabled:e.isPristine||e.isSubmitting}),children:({disabled:e})=>(0,x.jsx)(Te,{disabled:e,className:`w-full`,onClick:()=>{o.reset(),i?.(!1)}})})]}),(0,x.jsx)(C.Dialog.Close,{asChild:!0,children:(0,x.jsx)(r.t,{className:`absolute top-2.5 right-3`})})]})})]})})},Ae=({children:e})=>(0,x.jsx)(`header`,{"data-slot":`section-header`,className:`flex items-center px-4 py-3 font-semibold text-base text-text-positive tracking-tight`,children:e}),je=({children:e})=>(0,x.jsx)(`main`,{"data-slot":`section-main`,className:`relative flex flex-col py-4`,children:e}),Me=({title:e,children:t})=>(0,x.jsxs)(`section`,{"data-slot":`section-form`,className:`flex flex-col rounded-md bg-background shadow-card ring-1 ring-border`,children:[(0,x.jsx)(Ae,{children:e}),(0,x.jsx)(Se,{}),(0,x.jsx)(je,{children:t})]}),Ne=({title:e,description:t,helperText:n})=>(0,x.jsxs)(N,{className:`gap-y-4 px-4`,children:[(0,x.jsxs)(P,{className:`gap-0`,children:[(0,x.jsxs)(F,{children:[(0,x.jsx)(M,{className:`mb-1`,children:e}),(0,x.jsx)(z,{children:t})]}),(0,x.jsx)(B,{isShow:!!n,children:n})]}),(0,x.jsx)(H,{})]}),{fieldContext:Pe,formContext:Fe,useFieldContext:Q,useFormContext:$}=(0,T.createFormHookContexts)(),{useAppForm:Ie,withForm:Le,withFieldGroup:Re}=(0,T.createFormHook)({fieldContext:Pe,formContext:Fe,fieldComponents:{TextField:_e,TextareaField:ve,TextEditorField:ye,NumberField:Z,EmailField:ue,PasswordField:de,SelectField:pe,ComboboxField:Y,DateField:X,SwitchField:he,RadioGroupField:fe,CheckboxField:le,SimpleTextField:ce,SimpleEmailField:J,SimplePasswordField:ae,SimpleTextareaField:se,SimpleNumberField:ie,SimpleSelectField:oe,SimpleArrayField:O,SimpleBooleanField:W,SimpleComboboxField:G,SimpleDateField:K,SimpleRadioGroupField:q,FieldGroup:N,Field:P,FieldContent:F,FieldLabel:L,FieldContentMain:I,FieldSeparator:H,FieldError:U},formComponents:{TanStackDialogForm:De,TanStackPopoverForm:ke,TanStackContainerForm:we,TanStackSectionForm:Me,TanStackCardForm:Ce,TanStackFieldGroup:Oe,TanStackTitleField:Ne,TanStackActionsForm:xe,TanStackActionSubmit:be,ArrayCol:E,ArrayHeaderRow:D}});Object.defineProperty(exports,"A",{enumerable:!0,get:function(){return ae}}),Object.defineProperty(exports,"B",{enumerable:!0,get:function(){return U}}),Object.defineProperty(exports,"C",{enumerable:!0,get:function(){return ue}}),Object.defineProperty(exports,"D",{enumerable:!0,get:function(){return ce}}),Object.defineProperty(exports,"E",{enumerable:!0,get:function(){return le}}),Object.defineProperty(exports,"F",{enumerable:!0,get:function(){return G}}),Object.defineProperty(exports,"G",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"H",{enumerable:!0,get:function(){return L}}),Object.defineProperty(exports,"I",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"K",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"L",{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,"M",{enumerable:!0,get:function(){return J}}),Object.defineProperty(exports,"N",{enumerable:!0,get:function(){return q}}),Object.defineProperty(exports,"O",{enumerable:!0,get:function(){return se}}),Object.defineProperty(exports,"P",{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,"R",{enumerable:!0,get:function(){return F}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return Z}}),Object.defineProperty(exports,"T",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"U",{enumerable:!0,get:function(){return H}}),Object.defineProperty(exports,"V",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"W",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return _e}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return Le}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return fe}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return ke}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return we}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return Ce}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return ve}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return ye}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return Re}}),Object.defineProperty(exports,"j",{enumerable:!0,get:function(){return ie}}),Object.defineProperty(exports,"k",{enumerable:!0,get:function(){return oe}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return Oe}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return be}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return Ie}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return Ne}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return xe}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return Me}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return De}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return he}}),Object.defineProperty(exports,"w",{enumerable:!0,get:function(){return X}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return de}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return pe}}),Object.defineProperty(exports,"z",{enumerable:!0,get:function(){return I}});
+//# sourceMappingURL=tanstack-form-Bnfatlfx.cjs.map