@customafk/lunas-ui 0.2.4 → 0.2.6

package/dist/ui/sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.mjs","names":["open","Separator","SlotPrimitive","Tooltip"],"sources":["../../packages/components/ui/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader } from './drawer';\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 = use(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      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, setOpenMobile]);\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      isMobile,\n\n      toggleSidebar,\n\n      open,\n      setOpen,\n\n      openMobile,\n      setOpenMobile,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, 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', 'has-data-[variant=inset]:bg-sidebar', '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 } = useSidebar();\n\n  if (collapsible === 'none') {\n    return (\n      <aside\n        data-slot=\"sidebar\"\n        className={cn('bg-sidebar', 'text-sidebar-foreground', 'flex h-full w-(--sidebar-width) flex-col', 'border-r', className)}\n        {...props}\n      >\n        {children}\n      </aside>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Drawer open={openMobile} onOpenChange={setOpenMobile} direction=\"left\">\n        <DrawerContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          // side={side}\n        >\n          <DrawerHeader className=\"sr-only\">\n            <DrawerContent>Sidebar</DrawerContent>\n            <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <aside\n      className=\"group peer text-sidebar-foreground bg-card hidden 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-14 w-(--sidebar-width)',\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',\n          'h-[calc(100dvh-3.5rem)] w-(--sidebar-width)',\n          'border-r',\n          'transition-[left,right,width] duration-200 ease-linear',\n          side === 'left' && 'left-0',\n          side === 'left' && 'group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',\n          side === 'right' && 'right-0',\n          side === 'right' && '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))+2px)]'\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-10 rounded-full', className)}\n      onClick={event => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <MenuIcon className=\"!size-6\" />\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 sm:flex',\n        'after:absolute',\n        'after:inset-y-0',\n        'after:left-1/2',\n        'after:w-0.5',\n        'group-data-[side=left]:-right-4',\n        'group-data-[side=right]:left-0',\n        'in-data-[side=left]:cursor-w-resize',\n        'in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize',\n        '[[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'hover:after:bg-sidebar-border',\n        'hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n        'group-data-[collapsible=offcanvas]:translate-x-0',\n        '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('w-full', 'relative', 'flex flex-1 flex-col', className)} {...props}>\n      <div className=\"h-14 w-full\" />\n      <div className={cn('flex-1 inset-shadow-sm')}>{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('bg-background h-8 w-full 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('bg-sidebar-border mx-2 w-auto', 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 p-2', className)} {...props} />;\n}\n\nfunction SidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        'text-sidebar-foreground/70',\n        'ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear',\n        'focus-visible:ring-2',\n        '[&>svg]:size-4',\n        '[&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8',\n        '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 ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring',\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform',\n        'focus-visible:ring-2',\n        'hover:bg-sidebar-accent',\n        'hover:text-sidebar-accent-foreground',\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 cursor-pointer flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding]',\n    'hover:bg-sidebar-accent',\n    'hover:text-sidebar-accent-foreground',\n    'focus-visible:ring-2',\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-accent',\n    'data-[active=true]:font-medium',\n    'data-[active=true]:text-sidebar-accent-foreground',\n    'data-[state=open]:hover:bg-sidebar-accent',\n    'data-[state=open]:hover:text-sidebar-accent-foreground',\n    'group-data-[collapsible=icon]:size-8!',\n    'group-data-[collapsible=icon]:p-2!',\n    '[&>span:last-child]:truncate',\n    '[&>svg]:size-4',\n    '[&>svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 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 ? SlotPrimitive.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 ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform',\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        '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 && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        showOnHover && 'group-focus-within/menu-item:opacity-100',\n        showOnHover && 'group-hover/menu-item:opacity-100',\n        showOnHover && 'data-[state=open]:opacity-100 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        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground',\n        '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        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 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 ? SlotPrimitive.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        'text-sidebar-foreground ring-sidebar-ring',\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',\n        'hover:bg-sidebar-accent',\n        'hover:text-sidebar-accent-foreground',\n        'active:bg-sidebar-accent',\n        'active:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        'disabled:pointer-events-none',\n        'disabled:opacity-50',\n        'aria-disabled:pointer-events-none',\n        'aria-disabled:opacity-50',\n        '[&>span:last-child]:truncate',\n        '[&>svg]:size-4',\n        '[&>svg]:shrink-0',\n        '[&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent',\n        '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  // eslint-disable-next-line react-refresh/only-export-components\n  useSidebar,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.mjs","names":["open","Separator","SlotPrimitive","Tooltip"],"sources":["../../packages/components/ui/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader } from './drawer';\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\n/**\n * Hook that returns the current sidebar state and control methods from the nearest SidebarProvider.\n * Must be used within a `<SidebarProvider>`.\n */\nfunction useSidebar() {\n  const context = use(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n\n  return context;\n}\n\n/**\n * Context provider that manages sidebar open/collapsed state, mobile drawer, keyboard shortcut (Ctrl+B), and CSS variables for all child Sidebar components.\n *\n * @example\n * ```tsx\n * import {\n *   SidebarProvider, Sidebar, SidebarHeader, SidebarContent,\n *   SidebarMenu, SidebarMenuItem, SidebarMenuButton,\n *   SidebarInset, SidebarTrigger,\n * } from '@customafk/lunas-ui/ui/sidebar';\n *\n * <SidebarProvider>\n *   <Sidebar>\n *     <SidebarHeader>Logo</SidebarHeader>\n *     <SidebarContent>\n *       <SidebarMenu>\n *         <SidebarMenuItem>\n *           <SidebarMenuButton asChild isActive>\n *             <a href=\"/dashboard\">Dashboard</a>\n *           </SidebarMenuButton>\n *         </SidebarMenuItem>\n *       </SidebarMenu>\n *     </SidebarContent>\n *   </Sidebar>\n *   <SidebarInset>\n *     <SidebarTrigger />\n *     <main>Page content</main>\n *   </SidebarInset>\n * </SidebarProvider>\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  /** Whether the sidebar starts expanded. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Callback fired when the open state changes. */\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      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, setOpenMobile]);\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      isMobile,\n\n      toggleSidebar,\n\n      open,\n      setOpen,\n\n      openMobile,\n      setOpenMobile,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, 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', 'has-data-[variant=inset]:bg-sidebar', 'flex h-dvh w-full', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n\n/**\n * The main sidebar panel; renders as a Drawer on mobile and a fixed `<aside>` on desktop with optional collapse behavior.\n *\n * @param side - Which edge of the viewport the sidebar attaches to. @default `'left'`\n * @param variant - Visual style: `'sidebar'` (default), `'floating'`, or `'inset'`.\n * @param collapsible - Collapse mode: `'offcanvas'` (slides out), `'icon'` (icon-only), or `'none'` (always visible).\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 } = useSidebar();\n\n  if (collapsible === 'none') {\n    return (\n      <aside\n        data-slot=\"sidebar\"\n        className={cn('bg-sidebar', 'text-sidebar-foreground', 'flex h-full w-(--sidebar-width) flex-col', 'border-r', className)}\n        {...props}\n      >\n        {children}\n      </aside>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Drawer open={openMobile} onOpenChange={setOpenMobile} direction=\"left\">\n        <DrawerContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          // side={side}\n        >\n          <DrawerHeader className=\"sr-only\">\n            <DrawerContent>Sidebar</DrawerContent>\n            <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <aside\n      className=\"group peer text-sidebar-foreground bg-card hidden 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-14 w-(--sidebar-width)',\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',\n          'h-[calc(100dvh-3.5rem)] w-(--sidebar-width)',\n          'border-r',\n          'transition-[left,right,width] duration-200 ease-linear',\n          side === 'left' && 'left-0',\n          side === 'left' && 'group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',\n          side === 'right' && 'right-0',\n          side === 'right' && '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))+2px)]'\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\n/** Icon button that toggles the sidebar open/collapsed state. */\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-10 rounded-full', className)}\n      onClick={event => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <MenuIcon className=\"!size-6\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\n/** Invisible drag-rail along the sidebar edge that toggles collapse on click. */\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 sm:flex',\n        'after:absolute',\n        'after:inset-y-0',\n        'after:left-1/2',\n        'after:w-0.5',\n        'group-data-[side=left]:-right-4',\n        'group-data-[side=right]:left-0',\n        'in-data-[side=left]:cursor-w-resize',\n        'in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize',\n        '[[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'hover:after:bg-sidebar-border',\n        'hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n        'group-data-[collapsible=offcanvas]:translate-x-0',\n        '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\n/** The main content area that sits beside the Sidebar; expands to fill the remaining viewport width. */\nfunction SidebarInset({ className, children, ...props }: React.ComponentProps<'main'>) {\n  return (\n    <main data-slot=\"sidebar-inset\" className={cn('w-full', 'relative', 'flex flex-1 flex-col', className)} {...props}>\n      <div className=\"h-14 w-full\" />\n      <div className={cn('flex-1 inset-shadow-sm')}>{children}</div>\n    </main>\n  );\n}\n\n/** A compact search input styled for use inside a sidebar header. */\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('bg-background h-8 w-full shadow-none', className)} {...props} />;\n}\n\n/** Sticky top section of the Sidebar, typically holding a logo or workspace switcher. */\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\n/** Sticky bottom section of the Sidebar, typically holding user account info or settings. */\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\n/** A horizontal Separator styled for use between sections inside a Sidebar. */\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('bg-sidebar-border mx-2 w-auto', className)} {...props} />;\n}\n\n/** Scrollable middle section of the Sidebar that grows to fill available space. */\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\n/** A logical section within SidebarContent, grouping related SidebarMenu items. */\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 p-2', className)} {...props} />;\n}\n\n/**\n * Small all-caps heading label at the top of a SidebarGroup; hidden automatically in icon-only collapse mode.\n *\n * @param asChild - When true, renders as the child element via Radix Slot.\n */\nfunction SidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        'text-sidebar-foreground/70',\n        'ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear',\n        'focus-visible:ring-2',\n        '[&>svg]:size-4',\n        '[&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8',\n        'group-data-[collapsible=icon]:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Action button (e.g. \"Add\") positioned absolutely at the top-right of a SidebarGroup label.\n *\n * @param asChild - When true, renders as the child element via Radix Slot.\n */\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring',\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform',\n        'focus-visible:ring-2',\n        'hover:bg-sidebar-accent',\n        'hover:text-sidebar-accent-foreground',\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\n/** The content area of a SidebarGroup, typically wrapping a SidebarMenu. */\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\n/** Vertical list `<ul>` that holds SidebarMenuItems. */\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\n/** A single `<li>` entry in a SidebarMenu that may include a button, action, and badge. */\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 cursor-pointer flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding]',\n    'hover:bg-sidebar-accent',\n    'hover:text-sidebar-accent-foreground',\n    'focus-visible:ring-2',\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-accent',\n    'data-[active=true]:font-medium',\n    'data-[active=true]:text-sidebar-accent-foreground',\n    'data-[state=open]:hover:bg-sidebar-accent',\n    'data-[state=open]:hover:text-sidebar-accent-foreground',\n    'group-data-[collapsible=icon]:size-8!',\n    'group-data-[collapsible=icon]:p-2!',\n    '[&>span:last-child]:truncate',\n    '[&>svg]:size-4',\n    '[&>svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 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\n/**\n * The primary clickable button within a SidebarMenuItem; collapses to an icon-only view when the sidebar is in icon-collapse mode and optionally shows a tooltip.\n *\n * @param asChild - When true, renders as the child element via Radix Slot (useful for router links).\n * @param isActive - Marks the button as the currently active route.\n * @param tooltip - A string or TooltipContent props shown when the sidebar is collapsed to icon-only mode.\n * @param variant - `'default'` or `'outline'`.\n * @param size - `'default'`, `'sm'`, or `'lg'`.\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 ? SlotPrimitive.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\n/**\n * An icon action button (e.g. more-options) positioned at the right of a SidebarMenuButton.\n *\n * @param asChild - When true, renders as the child element via Radix Slot.\n * @param showOnHover - When true, the action is only visible on hover or when the menu item is focused.\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 ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform',\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        '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 && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        showOnHover && 'group-focus-within/menu-item:opacity-100',\n        showOnHover && 'group-hover/menu-item:opacity-100',\n        showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Small numeric or text badge rendered at the right of a SidebarMenuButton (e.g. unread count). */\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        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground',\n        '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\n/**\n * Placeholder skeleton row rendered in place of a SidebarMenuButton while menu items are loading.\n *\n * @param showIcon - When true, also renders a small square skeleton for the icon slot.\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\n/** Indented nested list of SidebarMenuSubItems rendered below a parent SidebarMenuItem. */\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        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single `<li>` entry inside a SidebarMenuSub. */\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\n/**\n * The clickable link/button for a nested sub-menu entry inside a SidebarMenuSub.\n *\n * @param asChild - When true, renders as the child element via Radix Slot.\n * @param size - `'sm'` for smaller text, `'md'` for normal text.\n * @param isActive - Highlights the button as the currently active sub-route.\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 ? SlotPrimitive.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        'text-sidebar-foreground ring-sidebar-ring',\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',\n        'hover:bg-sidebar-accent',\n        'hover:text-sidebar-accent-foreground',\n        'active:bg-sidebar-accent',\n        'active:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        'disabled:pointer-events-none',\n        'disabled:opacity-50',\n        'aria-disabled:pointer-events-none',\n        'aria-disabled:opacity-50',\n        '[&>span:last-child]:truncate',\n        '[&>svg]:size-4',\n        '[&>svg]:shrink-0',\n        '[&>svg]:text-sidebar-accent-foreground',\n        'data-[active=true]:bg-sidebar-accent',\n        '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  // eslint-disable-next-line react-refresh/only-export-components\n  useSidebar,\n};\n"],"mappings":"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"}

package/dist/ui/skeleton.cjs

@@ -1 +1 @@
-"use client";const e=require(`../skeleton-CHympz8k.cjs`);exports.Skeleton=e.t;
+"use client";const e=require(`../skeleton-BfMCjXYM.cjs`);exports.Skeleton=e.t;

package/dist/ui/skeleton.d.cts

@@ -1,10 +1,27 @@
-import * as react_jsx_runtime233 from "react/jsx-runtime";
+import * as react_jsx_runtime230 from "react/jsx-runtime";
 
 //#region packages/components/ui/skeleton.d.ts
+
+/**
+ * Animated pulse placeholder used to indicate loading state for text, images, or other UI elements.
+ *
+ * @example
+ * ```tsx
+ * import { Skeleton } from '@customafk/lunas-ui/ui/skeleton';
+ *
+ * <div className="flex items-center gap-4">
+ *   <Skeleton className="size-10 rounded-full" />
+ *   <div className="space-y-2">
+ *     <Skeleton className="h-4 w-40" />
+ *     <Skeleton className="h-4 w-24" />
+ *   </div>
+ * </div>
+ * ```
+ */
 declare function Skeleton({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime233.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime230.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.cts.map

package/dist/ui/skeleton.d.mts

@@ -1,10 +1,27 @@
-import * as react_jsx_runtime243 from "react/jsx-runtime";
+import * as react_jsx_runtime169 from "react/jsx-runtime";
 
 //#region packages/components/ui/skeleton.d.ts
+
+/**
+ * Animated pulse placeholder used to indicate loading state for text, images, or other UI elements.
+ *
+ * @example
+ * ```tsx
+ * import { Skeleton } from '@customafk/lunas-ui/ui/skeleton';
+ *
+ * <div className="flex items-center gap-4">
+ *   <Skeleton className="size-10 rounded-full" />
+ *   <div className="space-y-2">
+ *     <Skeleton className="h-4 w-40" />
+ *     <Skeleton className="h-4 w-24" />
+ *   </div>
+ * </div>
+ * ```
+ */
 declare function Skeleton({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime243.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime169.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.mts.map

package/dist/ui/skeleton.mjs

@@ -1 +1 @@
-"use client";import{t as e}from"../skeleton-Ba6koCVf.mjs";export{e as Skeleton};
+"use client";import{t as e}from"../skeleton-BPxcW2yu.mjs";export{e as Skeleton};

package/dist/ui/slider.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`radix-ui`);function a({className:e,defaultValue:a,value:o,min:s=0,max:c=100,...l}){let u=(0,n.useMemo)(()=>Array.isArray(o)?o:Array.isArray(a)?a:[s,c],[o,a,s,c]);return(0,r.jsxs)(i.Slider.Root,{"data-slot":`slider`,defaultValue:a,value:o,min:s,max:c,className:(0,t.cn)(`relative flex w-full touch-none items-center select-none`,`data-[disabled]:opacity-50`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:min-h-44`,`data-[orientation=vertical]:w-auto`,`data-[orientation=vertical]:flex-col`,e),...l,children:[(0,r.jsx)(i.Slider.Track,{"data-slot":`slider-track`,className:(0,t.cn)(`bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`),children:(0,r.jsx)(i.Slider.Range,{"data-slot":`slider-range`,className:(0,t.cn)(`bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full`)})}),Array.from({length:u.length},(e,t)=>(0,r.jsx)(i.Slider.Thumb,{"data-slot":`slider-thumb`,className:`border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50`},t))]})}exports.Slider=a;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@customafk/react-toolkit/utils`),i=require(`radix-ui`);function a({className:e,defaultValue:a,value:o,min:s=0,max:c=100,...l}){let u=(0,t.useMemo)(()=>Array.isArray(o)?o:Array.isArray(a)?a:[s,c],[o,a,s,c]);return(0,n.jsxs)(i.Slider.Root,{"data-slot":`slider`,defaultValue:a,value:o,min:s,max:c,className:(0,r.cn)(`relative flex w-full touch-none items-center select-none`,`data-[disabled]:opacity-50`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:min-h-44`,`data-[orientation=vertical]:w-auto`,`data-[orientation=vertical]:flex-col`,e),...l,children:[(0,n.jsx)(i.Slider.Track,{"data-slot":`slider-track`,className:(0,r.cn)(`bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`),children:(0,n.jsx)(i.Slider.Range,{"data-slot":`slider-range`,className:(0,r.cn)(`bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full`)})}),Array.from({length:u.length},(e,t)=>(0,n.jsx)(i.Slider.Thumb,{"data-slot":`slider-thumb`,className:`border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50`},t))]})}exports.Slider=a;
 //# sourceMappingURL=slider.cjs.map

package/dist/ui/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":["SliderPrimitive"],"sources":["../../packages/components/ui/slider.tsx"],"sourcesContent":["'use client';\nimport { useMemo } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slider as SliderPrimitive } from 'radix-ui';\n\nfunction Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        'relative flex w-full touch-none items-center select-none',\n        'data-[disabled]:opacity-50',\n        'data-[orientation=vertical]:h-full',\n        'data-[orientation=vertical]:min-h-44',\n        'data-[orientation=vertical]:w-auto',\n        'data-[orientation=vertical]:flex-col',\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"],"mappings":"8KAMA,SAAS,EAAO,CAAE,YAAW,eAAc,QAAO,MAAM,EAAG,MAAM,IAAK,GAAG,GAA4D,CACnI,IAAM,GAAA,EAAA,EAAA,aAAyB,MAAM,QAAQ,EAAM,CAAG,EAAQ,MAAM,QAAQ,EAAa,CAAG,EAAe,CAAC,EAAK,EAAI,CAAG,CAAC,EAAO,EAAc,EAAK,EAAI,CAAC,CAExJ,OACE,EAAA,EAAA,MAACA,EAAAA,OAAgB,KAAA,CACf,YAAU,SACI,eACP,QACF,MACA,MACL,WAAA,EAAA,EAAA,IACE,2DACA,6BACA,qCACA,uCACA,qCACA,uCACA,EACD,CACD,GAAI,aAEJ,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eACV,WAAA,EAAA,EAAA,IACE,oMACD,WAED,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eACV,WAAA,EAAA,EAAA,IAAc,8FAA8F,EAC5G,EACoB,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAQ,OAAQ,EAAG,EAAG,KAC1C,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eAEV,UAAU,+OADL,EAEL,CACF,CAAA,EACmB"}
+{"version":3,"file":"slider.cjs","names":["SliderPrimitive"],"sources":["../../packages/components/ui/slider.tsx"],"sourcesContent":["'use client';\nimport { useMemo } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slider as SliderPrimitive } from 'radix-ui';\n\n/**\n * An accessible range slider supporting single-thumb, multi-thumb, and vertical orientations.\n *\n * @example\n * ```tsx\n * import { Slider } from '@customafk/lunas-ui/ui/slider';\n *\n * <Slider defaultValue={[40]} min={0} max={100} step={5} />\n * ```\n */\nfunction Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        'relative flex w-full touch-none items-center select-none',\n        'data-[disabled]:opacity-50',\n        'data-[orientation=vertical]:h-full',\n        'data-[orientation=vertical]:min-h-44',\n        'data-[orientation=vertical]:w-auto',\n        'data-[orientation=vertical]:flex-col',\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"],"mappings":"8KAgBA,SAAS,EAAO,CAAE,YAAW,eAAc,QAAO,MAAM,EAAG,MAAM,IAAK,GAAG,GAA4D,CACnI,IAAM,GAAA,EAAA,EAAA,aAAyB,MAAM,QAAQ,EAAM,CAAG,EAAQ,MAAM,QAAQ,EAAa,CAAG,EAAe,CAAC,EAAK,EAAI,CAAG,CAAC,EAAO,EAAc,EAAK,EAAI,CAAC,CAExJ,OACE,EAAA,EAAA,MAACA,EAAAA,OAAgB,KAAA,CACf,YAAU,SACI,eACP,QACF,MACA,MACL,WAAA,EAAA,EAAA,IACE,2DACA,6BACA,qCACA,uCACA,qCACA,uCACA,EACD,CACD,GAAI,aAEJ,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eACV,WAAA,EAAA,EAAA,IACE,oMACD,WAED,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eACV,WAAA,EAAA,EAAA,IAAc,8FAA8F,EAC5G,EACoB,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAQ,OAAQ,EAAG,EAAG,KAC1C,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eAEV,UAAU,+OADL,EAEL,CACF,CAAA,EACmB"}

package/dist/ui/slider.d.cts

@@ -1,7 +1,18 @@
-import * as react_jsx_runtime232 from "react/jsx-runtime";
+import * as react_jsx_runtime243 from "react/jsx-runtime";
 import { Slider as Slider$1 } from "radix-ui";
 
 //#region packages/components/ui/slider.d.ts
+
+/**
+ * An accessible range slider supporting single-thumb, multi-thumb, and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@customafk/lunas-ui/ui/slider';
+ *
+ * <Slider defaultValue={[40]} min={0} max={100} step={5} />
+ * ```
+ */
 declare function Slider({
   className,
   defaultValue,
@@ -9,7 +20,7 @@ declare function Slider({
   min,
   max,
   ...props
-}: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime232.JSX.Element;
+}: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime243.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=slider.d.cts.map

package/dist/ui/slider.d.mts

@@ -1,7 +1,18 @@
-import * as react_jsx_runtime198 from "react/jsx-runtime";
+import * as react_jsx_runtime197 from "react/jsx-runtime";
 import { Slider as Slider$1 } from "radix-ui";
 
 //#region packages/components/ui/slider.d.ts
+
+/**
+ * An accessible range slider supporting single-thumb, multi-thumb, and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@customafk/lunas-ui/ui/slider';
+ *
+ * <Slider defaultValue={[40]} min={0} max={100} step={5} />
+ * ```
+ */
 declare function Slider({
   className,
   defaultValue,
@@ -9,7 +20,7 @@ declare function Slider({
   min,
   max,
   ...props
-}: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime198.JSX.Element;
+}: React.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime197.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=slider.d.mts.map

package/dist/ui/slider.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{useMemo as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Slider as i}from"radix-ui";function a({className:a,defaultValue:o,value:s,min:c=0,max:l=100,...u}){let d=t(()=>Array.isArray(s)?s:Array.isArray(o)?o:[c,l],[s,o,c,l]);return r(i.Root,{"data-slot":`slider`,defaultValue:o,value:s,min:c,max:l,className:e(`relative flex w-full touch-none items-center select-none`,`data-[disabled]:opacity-50`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:min-h-44`,`data-[orientation=vertical]:w-auto`,`data-[orientation=vertical]:flex-col`,a),...u,children:[n(i.Track,{"data-slot":`slider-track`,className:e(`bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`),children:n(i.Range,{"data-slot":`slider-range`,className:e(`bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full`)})}),Array.from({length:d.length},(e,t)=>n(i.Thumb,{"data-slot":`slider-thumb`,className:`border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50`},t))]})}export{a as Slider};
+"use client";import{useMemo as e}from"react";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cn as r}from"@customafk/react-toolkit/utils";import{Slider as i}from"radix-ui";function a({className:a,defaultValue:o,value:s,min:c=0,max:l=100,...u}){let d=e(()=>Array.isArray(s)?s:Array.isArray(o)?o:[c,l],[s,o,c,l]);return n(i.Root,{"data-slot":`slider`,defaultValue:o,value:s,min:c,max:l,className:r(`relative flex w-full touch-none items-center select-none`,`data-[disabled]:opacity-50`,`data-[orientation=vertical]:h-full`,`data-[orientation=vertical]:min-h-44`,`data-[orientation=vertical]:w-auto`,`data-[orientation=vertical]:flex-col`,a),...u,children:[t(i.Track,{"data-slot":`slider-track`,className:r(`bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5`),children:t(i.Range,{"data-slot":`slider-range`,className:r(`bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full`)})}),Array.from({length:d.length},(e,n)=>t(i.Thumb,{"data-slot":`slider-thumb`,className:`border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50`},n))]})}export{a as Slider};
 //# sourceMappingURL=slider.mjs.map

package/dist/ui/slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.mjs","names":["SliderPrimitive"],"sources":["../../packages/components/ui/slider.tsx"],"sourcesContent":["'use client';\nimport { useMemo } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slider as SliderPrimitive } from 'radix-ui';\n\nfunction Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        'relative flex w-full touch-none items-center select-none',\n        'data-[disabled]:opacity-50',\n        'data-[orientation=vertical]:h-full',\n        'data-[orientation=vertical]:min-h-44',\n        'data-[orientation=vertical]:w-auto',\n        'data-[orientation=vertical]:flex-col',\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"],"mappings":"qLAMA,SAAS,EAAO,CAAE,YAAW,eAAc,QAAO,MAAM,EAAG,MAAM,IAAK,GAAG,GAA4D,CACnI,IAAM,EAAU,MAAe,MAAM,QAAQ,EAAM,CAAG,EAAQ,MAAM,QAAQ,EAAa,CAAG,EAAe,CAAC,EAAK,EAAI,CAAG,CAAC,EAAO,EAAc,EAAK,EAAI,CAAC,CAExJ,OACE,EAACA,EAAgB,KAAA,CACf,YAAU,SACI,eACP,QACF,MACA,MACL,UAAW,EACT,2DACA,6BACA,qCACA,uCACA,qCACA,uCACA,EACD,CACD,GAAI,YAEJ,EAACA,EAAgB,MAAA,CACf,YAAU,eACV,UAAW,EACT,oMACD,UAED,EAACA,EAAgB,MAAA,CACf,YAAU,eACV,UAAW,EAAG,8FAA8F,EAC5G,EACoB,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAQ,OAAQ,EAAG,EAAG,IAC1C,EAACA,EAAgB,MAAA,CACf,YAAU,eAEV,UAAU,+OADL,EAEL,CACF,CAAA,EACmB"}
+{"version":3,"file":"slider.mjs","names":["SliderPrimitive"],"sources":["../../packages/components/ui/slider.tsx"],"sourcesContent":["'use client';\nimport { useMemo } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Slider as SliderPrimitive } from 'radix-ui';\n\n/**\n * An accessible range slider supporting single-thumb, multi-thumb, and vertical orientations.\n *\n * @example\n * ```tsx\n * import { Slider } from '@customafk/lunas-ui/ui/slider';\n *\n * <Slider defaultValue={[40]} min={0} max={100} step={5} />\n * ```\n */\nfunction Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        'relative flex w-full touch-none items-center select-none',\n        'data-[disabled]:opacity-50',\n        'data-[orientation=vertical]:h-full',\n        'data-[orientation=vertical]:min-h-44',\n        'data-[orientation=vertical]:w-auto',\n        'data-[orientation=vertical]:flex-col',\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"],"mappings":"qLAgBA,SAAS,EAAO,CAAE,YAAW,eAAc,QAAO,MAAM,EAAG,MAAM,IAAK,GAAG,GAA4D,CACnI,IAAM,EAAU,MAAe,MAAM,QAAQ,EAAM,CAAG,EAAQ,MAAM,QAAQ,EAAa,CAAG,EAAe,CAAC,EAAK,EAAI,CAAG,CAAC,EAAO,EAAc,EAAK,EAAI,CAAC,CAExJ,OACE,EAACA,EAAgB,KAAA,CACf,YAAU,SACI,eACP,QACF,MACA,MACL,UAAW,EACT,2DACA,6BACA,qCACA,uCACA,qCACA,uCACA,EACD,CACD,GAAI,YAEJ,EAACA,EAAgB,MAAA,CACf,YAAU,eACV,UAAW,EACT,oMACD,UAED,EAACA,EAAgB,MAAA,CACf,YAAU,eACV,UAAW,EAAG,8FAA8F,EAC5G,EACoB,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAQ,OAAQ,EAAG,EAAG,IAC1C,EAACA,EAAgB,MAAA,CACf,YAAU,eAEV,UAAU,+OADL,EAEL,CACF,CAAA,EACmB"}

package/dist/ui/sonner.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,`__esModule`,{value:!0});const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`lucide-react`),r=require(`sonner`),i=require(`next-themes`);const a=()=>{let{theme:e=`system`}=(0,i.useTheme)();return(0,t.jsx)(r.Toaster,{richColors:!0,theme:e,expand:!1,visibleToasts:5,closeButton:!0,position:`bottom-right`,swipeDirections:[`left`,`right`],icons:{loading:(0,t.jsx)(n.LoaderIcon,{size:16,className:`animate-spin`})},toastOptions:{classNames:{toast:`!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999`,icon:`!size-6`,title:`!text-sm !font-bold`,description:`!text-xs !font-semibold !text-white/80`,success:`!bg-success`,info:`!bg-blue-700`,loading:`!bg-slate-500`,warning:`!bg-warning`,error:`!bg-danger`,closeButton:`!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow`}},className:`toaster group pointer-events-auto !z-999999`})};var o=a;exports.Toaster=a,exports.default=o,exports.toast=r.toast;
+"use client";Object.defineProperty(exports,`__esModule`,{value:!0});const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`react/jsx-runtime`),r=require(`sonner`),i=require(`next-themes`);const a=()=>{let{theme:e=`system`}=(0,i.useTheme)();return(0,n.jsx)(r.Toaster,{richColors:!0,theme:e,expand:!1,visibleToasts:5,closeButton:!0,position:`bottom-right`,swipeDirections:[`left`,`right`],icons:{loading:(0,n.jsx)(t.LoaderIcon,{size:16,className:`animate-spin`})},toastOptions:{classNames:{toast:`!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999`,icon:`!size-6`,title:`!text-sm !font-bold`,description:`!text-xs !font-semibold !text-white/80`,success:`!bg-success`,info:`!bg-blue-700`,loading:`!bg-slate-500`,warning:`!bg-warning`,error:`!bg-danger`,closeButton:`!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow`}},className:`toaster group pointer-events-auto !z-999999`})};var o=a;exports.Toaster=a,exports.default=o,exports.toast=r.toast;
 //# sourceMappingURL=sonner.cjs.map

package/dist/ui/sonner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.cjs","names":["Sonner","LoaderIcon"],"sources":["../../packages/components/ui/sonner.tsx"],"sourcesContent":["'use client';\nimport { LoaderIcon } from 'lucide-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, toast, type ToasterProps } from 'sonner';\n\nconst Toaster = () => {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      richColors\n      theme={theme as ToasterProps['theme']}\n      expand={false}\n      visibleToasts={5}\n      closeButton={true}\n      position=\"bottom-right\"\n      swipeDirections={['left', 'right']}\n      icons={{\n        loading: <LoaderIcon size={16} className=\"animate-spin\" />,\n      }}\n      toastOptions={{\n        classNames: {\n          toast: '!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999',\n          icon: '!size-6',\n          title: '!text-sm !font-bold',\n          description: '!text-xs !font-semibold !text-white/80',\n          success: '!bg-success',\n          info: '!bg-blue-700',\n          loading: '!bg-slate-500',\n          warning: '!bg-warning',\n          error: '!bg-danger',\n          closeButton: '!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow',\n        },\n      }}\n      className=\"toaster group pointer-events-auto !z-999999\"\n    />\n  );\n};\n\nexport { Toaster, toast };\nexport default Toaster;\n"],"mappings":"uNAKA,MAAM,MAAgB,CACpB,GAAM,CAAE,QAAQ,WAAA,EAAA,EAAA,WAAuB,CAEvC,OACE,EAAA,EAAA,KAACA,EAAAA,QAAAA,CACC,WAAA,GACO,QACP,OAAQ,GACR,cAAe,EACf,YAAa,GACb,SAAS,eACT,gBAAiB,CAAC,OAAQ,QAAQ,CAClC,MAAO,CACL,SAAS,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAI,UAAU,gBAAiB,CAC3D,CACD,aAAc,CACZ,WAAY,CACV,MAAO,6FACP,KAAM,UACN,MAAO,sBACP,YAAa,yCACb,QAAS,cACT,KAAM,eACN,QAAS,gBACT,QAAS,cACT,MAAO,aACP,YAAa,6FACd,CACF,CACD,UAAU,+CACV,EAKN,IAAA,EAAe"}
+{"version":3,"file":"sonner.cjs","names":["Sonner","LoaderIcon"],"sources":["../../packages/components/ui/sonner.tsx"],"sourcesContent":["'use client';\nimport { LoaderIcon } from 'lucide-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, toast, type ToasterProps } from 'sonner';\n\n/**\n * Global toast notification container — mount once near the root of your app; use the exported `toast` helper to trigger toasts from anywhere.\n *\n * @example\n * ```tsx\n * import { Toaster, toast } from '@customafk/lunas-ui/ui/sonner';\n *\n * // In your app root:\n * <Toaster />\n *\n * // Anywhere in your code:\n * toast.success('Saved!');\n * toast.error('Something went wrong.');\n * ```\n */\nconst Toaster = () => {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      richColors\n      theme={theme as ToasterProps['theme']}\n      expand={false}\n      visibleToasts={5}\n      closeButton={true}\n      position=\"bottom-right\"\n      swipeDirections={['left', 'right']}\n      icons={{\n        loading: <LoaderIcon size={16} className=\"animate-spin\" />,\n      }}\n      toastOptions={{\n        classNames: {\n          toast: '!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999',\n          icon: '!size-6',\n          title: '!text-sm !font-bold',\n          description: '!text-xs !font-semibold !text-white/80',\n          success: '!bg-success',\n          info: '!bg-blue-700',\n          loading: '!bg-slate-500',\n          warning: '!bg-warning',\n          error: '!bg-danger',\n          closeButton: '!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow',\n        },\n      }}\n      className=\"toaster group pointer-events-auto !z-999999\"\n    />\n  );\n};\n\nexport { Toaster, toast };\nexport default Toaster;\n"],"mappings":"uNAoBA,MAAM,MAAgB,CACpB,GAAM,CAAE,QAAQ,WAAA,EAAA,EAAA,WAAuB,CAEvC,OACE,EAAA,EAAA,KAACA,EAAAA,QAAAA,CACC,WAAA,GACO,QACP,OAAQ,GACR,cAAe,EACf,YAAa,GACb,SAAS,eACT,gBAAiB,CAAC,OAAQ,QAAQ,CAClC,MAAO,CACL,SAAS,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,KAAM,GAAI,UAAU,gBAAiB,CAC3D,CACD,aAAc,CACZ,WAAY,CACV,MAAO,6FACP,KAAM,UACN,MAAO,sBACP,YAAa,yCACb,QAAS,cACT,KAAM,eACN,QAAS,gBACT,QAAS,cACT,MAAO,aACP,YAAa,6FACd,CACF,CACD,UAAU,+CACV,EAKN,IAAA,EAAe"}

package/dist/ui/sonner.d.cts

@@ -1,8 +1,24 @@
-import * as react_jsx_runtime234 from "react/jsx-runtime";
+import * as react_jsx_runtime240 from "react/jsx-runtime";
 import { toast } from "sonner";
 
 //#region packages/components/ui/sonner.d.ts
-declare const Toaster: () => react_jsx_runtime234.JSX.Element;
+
+/**
+ * Global toast notification container — mount once near the root of your app; use the exported `toast` helper to trigger toasts from anywhere.
+ *
+ * @example
+ * ```tsx
+ * import { Toaster, toast } from '@customafk/lunas-ui/ui/sonner';
+ *
+ * // In your app root:
+ * <Toaster />
+ *
+ * // Anywhere in your code:
+ * toast.success('Saved!');
+ * toast.error('Something went wrong.');
+ * ```
+ */
+declare const Toaster: () => react_jsx_runtime240.JSX.Element;
 //#endregion
 export { Toaster, Toaster as default, toast };
 //# sourceMappingURL=sonner.d.cts.map

package/dist/ui/sonner.d.mts

@@ -1,8 +1,24 @@
-import * as react_jsx_runtime242 from "react/jsx-runtime";
+import * as react_jsx_runtime60 from "react/jsx-runtime";
 import { toast } from "sonner";
 
 //#region packages/components/ui/sonner.d.ts
-declare const Toaster: () => react_jsx_runtime242.JSX.Element;
+
+/**
+ * Global toast notification container — mount once near the root of your app; use the exported `toast` helper to trigger toasts from anywhere.
+ *
+ * @example
+ * ```tsx
+ * import { Toaster, toast } from '@customafk/lunas-ui/ui/sonner';
+ *
+ * // In your app root:
+ * <Toaster />
+ *
+ * // Anywhere in your code:
+ * toast.success('Saved!');
+ * toast.error('Something went wrong.');
+ * ```
+ */
+declare const Toaster: () => react_jsx_runtime60.JSX.Element;
 //#endregion
 export { Toaster, Toaster as default, toast };
 //# sourceMappingURL=sonner.d.mts.map

package/dist/ui/sonner.mjs

@@ -1,2 +1,2 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{LoaderIcon as t}from"lucide-react";import{Toaster as n,toast as r}from"sonner";import{useTheme as i}from"next-themes";const a=()=>{let{theme:r=`system`}=i();return e(n,{richColors:!0,theme:r,expand:!1,visibleToasts:5,closeButton:!0,position:`bottom-right`,swipeDirections:[`left`,`right`],icons:{loading:e(t,{size:16,className:`animate-spin`})},toastOptions:{classNames:{toast:`!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999`,icon:`!size-6`,title:`!text-sm !font-bold`,description:`!text-xs !font-semibold !text-white/80`,success:`!bg-success`,info:`!bg-blue-700`,loading:`!bg-slate-500`,warning:`!bg-warning`,error:`!bg-danger`,closeButton:`!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow`}},className:`toaster group pointer-events-auto !z-999999`})};var o=a;export{a as Toaster,o as default,r as toast};
+"use client";import{LoaderIcon as e}from"lucide-react";import{jsx as t}from"react/jsx-runtime";import{Toaster as n,toast as r}from"sonner";import{useTheme as i}from"next-themes";const a=()=>{let{theme:r=`system`}=i();return t(n,{richColors:!0,theme:r,expand:!1,visibleToasts:5,closeButton:!0,position:`bottom-right`,swipeDirections:[`left`,`right`],icons:{loading:t(e,{size:16,className:`animate-spin`})},toastOptions:{classNames:{toast:`!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999`,icon:`!size-6`,title:`!text-sm !font-bold`,description:`!text-xs !font-semibold !text-white/80`,success:`!bg-success`,info:`!bg-blue-700`,loading:`!bg-slate-500`,warning:`!bg-warning`,error:`!bg-danger`,closeButton:`!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow`}},className:`toaster group pointer-events-auto !z-999999`})};var o=a;export{a as Toaster,o as default,r as toast};
 //# sourceMappingURL=sonner.mjs.map

package/dist/ui/sonner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.mjs","names":["Sonner"],"sources":["../../packages/components/ui/sonner.tsx"],"sourcesContent":["'use client';\nimport { LoaderIcon } from 'lucide-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, toast, type ToasterProps } from 'sonner';\n\nconst Toaster = () => {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      richColors\n      theme={theme as ToasterProps['theme']}\n      expand={false}\n      visibleToasts={5}\n      closeButton={true}\n      position=\"bottom-right\"\n      swipeDirections={['left', 'right']}\n      icons={{\n        loading: <LoaderIcon size={16} className=\"animate-spin\" />,\n      }}\n      toastOptions={{\n        classNames: {\n          toast: '!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999',\n          icon: '!size-6',\n          title: '!text-sm !font-bold',\n          description: '!text-xs !font-semibold !text-white/80',\n          success: '!bg-success',\n          info: '!bg-blue-700',\n          loading: '!bg-slate-500',\n          warning: '!bg-warning',\n          error: '!bg-danger',\n          closeButton: '!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow',\n        },\n      }}\n      className=\"toaster group pointer-events-auto !z-999999\"\n    />\n  );\n};\n\nexport { Toaster, toast };\nexport default Toaster;\n"],"mappings":"kLAKA,MAAM,MAAgB,CACpB,GAAM,CAAE,QAAQ,UAAa,GAAU,CAEvC,OACE,EAACA,EAAAA,CACC,WAAA,GACO,QACP,OAAQ,GACR,cAAe,EACf,YAAa,GACb,SAAS,eACT,gBAAiB,CAAC,OAAQ,QAAQ,CAClC,MAAO,CACL,QAAS,EAAC,EAAA,CAAW,KAAM,GAAI,UAAU,gBAAiB,CAC3D,CACD,aAAc,CACZ,WAAY,CACV,MAAO,6FACP,KAAM,UACN,MAAO,sBACP,YAAa,yCACb,QAAS,cACT,KAAM,eACN,QAAS,gBACT,QAAS,cACT,MAAO,aACP,YAAa,6FACd,CACF,CACD,UAAU,+CACV,EAKN,IAAA,EAAe"}
+{"version":3,"file":"sonner.mjs","names":["Sonner"],"sources":["../../packages/components/ui/sonner.tsx"],"sourcesContent":["'use client';\nimport { LoaderIcon } from 'lucide-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, toast, type ToasterProps } from 'sonner';\n\n/**\n * Global toast notification container — mount once near the root of your app; use the exported `toast` helper to trigger toasts from anywhere.\n *\n * @example\n * ```tsx\n * import { Toaster, toast } from '@customafk/lunas-ui/ui/sonner';\n *\n * // In your app root:\n * <Toaster />\n *\n * // Anywhere in your code:\n * toast.success('Saved!');\n * toast.error('Something went wrong.');\n * ```\n */\nconst Toaster = () => {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      richColors\n      theme={theme as ToasterProps['theme']}\n      expand={false}\n      visibleToasts={5}\n      closeButton={true}\n      position=\"bottom-right\"\n      swipeDirections={['left', 'right']}\n      icons={{\n        loading: <LoaderIcon size={16} className=\"animate-spin\" />,\n      }}\n      toastOptions={{\n        classNames: {\n          toast: '!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999',\n          icon: '!size-6',\n          title: '!text-sm !font-bold',\n          description: '!text-xs !font-semibold !text-white/80',\n          success: '!bg-success',\n          info: '!bg-blue-700',\n          loading: '!bg-slate-500',\n          warning: '!bg-warning',\n          error: '!bg-danger',\n          closeButton: '!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow',\n        },\n      }}\n      className=\"toaster group pointer-events-auto !z-999999\"\n    />\n  );\n};\n\nexport { Toaster, toast };\nexport default Toaster;\n"],"mappings":"kLAoBA,MAAM,MAAgB,CACpB,GAAM,CAAE,QAAQ,UAAa,GAAU,CAEvC,OACE,EAACA,EAAAA,CACC,WAAA,GACO,QACP,OAAQ,GACR,cAAe,EACf,YAAa,GACb,SAAS,eACT,gBAAiB,CAAC,OAAQ,QAAQ,CAClC,MAAO,CACL,QAAS,EAAC,EAAA,CAAW,KAAM,GAAI,UAAU,gBAAiB,CAC3D,CACD,aAAc,CACZ,WAAY,CACV,MAAO,6FACP,KAAM,UACN,MAAO,sBACP,YAAa,yCACb,QAAS,cACT,KAAM,eACN,QAAS,gBACT,QAAS,cACT,MAAO,aACP,YAAa,6FACd,CACF,CACD,UAAU,+CACV,EAKN,IAAA,EAAe"}

package/dist/ui/spinner.cjs

@@ -1 +1 @@
-const e=require(`../spinner-Chm_2fLr.cjs`);exports.Spinner=e.t;
+const e=require(`../spinner-MKXqwF9G.cjs`);exports.Spinner=e.t;

package/dist/ui/spinner.d.cts

@@ -1,10 +1,25 @@
-import * as react_jsx_runtime261 from "react/jsx-runtime";
+import * as react_jsx_runtime242 from "react/jsx-runtime";
 
 //#region packages/components/ui/spinner.d.ts
+
+/**
+ * Spinning loading indicator rendered as an animated `Loader2Icon` SVG with an accessible `role="status"` and `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * import { Spinner } from '@customafk/lunas-ui/ui/spinner';
+ *
+ * <Spinner className="size-6 text-primary" />
+ *
+ * <Button disabled>
+ *   <Spinner /> Saving…
+ * </Button>
+ * ```
+ */
 declare function Spinner({
   className,
   ...props
-}: React.ComponentProps<'svg'>): react_jsx_runtime261.JSX.Element;
+}: React.ComponentProps<'svg'>): react_jsx_runtime242.JSX.Element;
 //#endregion
 export { Spinner };
 //# sourceMappingURL=spinner.d.cts.map

package/dist/ui/spinner.d.mts

@@ -1,10 +1,25 @@
-import * as react_jsx_runtime199 from "react/jsx-runtime";
+import * as react_jsx_runtime92 from "react/jsx-runtime";
 
 //#region packages/components/ui/spinner.d.ts
+
+/**
+ * Spinning loading indicator rendered as an animated `Loader2Icon` SVG with an accessible `role="status"` and `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * import { Spinner } from '@customafk/lunas-ui/ui/spinner';
+ *
+ * <Spinner className="size-6 text-primary" />
+ *
+ * <Button disabled>
+ *   <Spinner /> Saving…
+ * </Button>
+ * ```
+ */
 declare function Spinner({
   className,
   ...props
-}: React.ComponentProps<'svg'>): react_jsx_runtime199.JSX.Element;
+}: React.ComponentProps<'svg'>): react_jsx_runtime92.JSX.Element;
 //#endregion
 export { Spinner };
 //# sourceMappingURL=spinner.d.mts.map

package/dist/ui/spinner.mjs

@@ -1 +1 @@
-import{t as e}from"../spinner-D1v3Bard.mjs";export{e as Spinner};
+import{t as e}from"../spinner-EgMJOaQi.mjs";export{e as Spinner};

package/dist/ui/switch.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react/jsx-runtime`),r=require(`radix-ui`);function i({className:e,...i}){return(0,n.jsx)(r.Switch.Root,{"data-slot":`switch`,className:(0,t.cn)(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all`,`inline-flex h-5`,`data-[state=checked]:bg-primary`,`data-[state=unchecked]:bg-border-muted`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`data-[state=unchecked]:border-border-weak`,`data-[state=unchecked]:[&_span]:bg-accent-weak`,`data-[state=unchecked]:bg-transparent`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:shadow-none`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...i,children:(0,n.jsx)(r.Switch.Thumb,{"data-slot":`switch-thumb`,className:(0,t.cn)(`bg-background`,`pointer-events-none block size-4 rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}exports.Switch=i;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`@customafk/react-toolkit/utils`),r=require(`radix-ui`);function i({className:e,...i}){return(0,t.jsx)(r.Switch.Root,{"data-slot":`switch`,className:(0,n.cn)(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all`,`inline-flex h-5`,`data-[state=checked]:bg-primary`,`data-[state=unchecked]:bg-border-muted`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`data-[state=unchecked]:border-border-weak`,`data-[state=unchecked]:[&_span]:bg-accent-weak`,`data-[state=unchecked]:bg-transparent`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:shadow-none`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...i,children:(0,t.jsx)(r.Switch.Thumb,{"data-slot":`switch-thumb`,className:(0,n.cn)(`bg-background`,`pointer-events-none block size-4 rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}exports.Switch=i;
 //# sourceMappingURL=switch.cjs.map

package/dist/ui/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n        'inline-flex h-5',\n        'data-[state=checked]:bg-primary',\n        'data-[state=unchecked]:bg-border-muted',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n        'data-[state=unchecked]:border-border-weak',\n        'data-[state=unchecked]:[&_span]:bg-accent-weak',\n        'data-[state=unchecked]:bg-transparent',\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:shadow-none',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'bg-background',\n          'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":"2JAMA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,KAACA,EAAAA,OAAgB,KAAA,CACf,YAAU,SACV,WAAA,EAAA,EAAA,IACE,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,iDACA,wCACA,yCACA,kDACA,8CACA,uDACA,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eACV,WAAA,EAAA,EAAA,IACE,gBACA,4EACA,oDACA,uCACD,EACD,EACmB"}
+{"version":3,"file":"switch.cjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/**\n * Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.\n *\n * @example\n * ```tsx\n * import { Switch } from '@customafk/lunas-ui/ui/switch';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n *\n * <div className=\"flex items-center gap-2\">\n *   <Switch id=\"notifications\" />\n *   <Label htmlFor=\"notifications\">Enable notifications</Label>\n * </div>\n * ```\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer',\n        'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n        'inline-flex h-5',\n        'data-[state=checked]:bg-primary',\n        'data-[state=unchecked]:bg-border-muted',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-4',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-50',\n        'data-[state=unchecked]:border-border-weak',\n        'data-[state=unchecked]:[&_span]:bg-accent-weak',\n        'data-[state=unchecked]:bg-transparent',\n        'data-[state=unchecked]:[&_span]:size-4',\n        'data-[state=unchecked]:[&_span]:translate-x-0.5',\n        'data-[state=unchecked]:[&_span]:shadow-none',\n        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'bg-background',\n          'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n          'data-[state=checked]:translate-x-[calc(100%-3px)]',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":"2JAoBA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,KAACA,EAAAA,OAAgB,KAAA,CACf,YAAU,SACV,WAAA,EAAA,EAAA,IACE,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,iDACA,wCACA,yCACA,kDACA,8CACA,uDACA,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CACf,YAAU,eACV,WAAA,EAAA,EAAA,IACE,gBACA,4EACA,oDACA,uCACD,EACD,EACmB"}

package/dist/ui/switch.d.cts

@@ -1,11 +1,26 @@
-import * as react_jsx_runtime252 from "react/jsx-runtime";
+import * as react_jsx_runtime241 from "react/jsx-runtime";
 import { Switch as Switch$1 } from "radix-ui";
 
 //#region packages/components/ui/switch.d.ts
+
+/**
+ * Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.
+ *
+ * @example
+ * ```tsx
+ * import { Switch } from '@customafk/lunas-ui/ui/switch';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <div className="flex items-center gap-2">
+ *   <Switch id="notifications" />
+ *   <Label htmlFor="notifications">Enable notifications</Label>
+ * </div>
+ * ```
+ */
 declare function Switch({
   className,
   ...props
-}: React.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime252.JSX.Element;
+}: React.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime241.JSX.Element;
 //#endregion
 export { Switch };
 //# sourceMappingURL=switch.d.cts.map

package/dist/ui/switch.d.mts

@@ -1,11 +1,26 @@
-import * as react_jsx_runtime277 from "react/jsx-runtime";
+import * as react_jsx_runtime195 from "react/jsx-runtime";
 import { Switch as Switch$1 } from "radix-ui";
 
 //#region packages/components/ui/switch.d.ts
+
+/**
+ * Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.
+ *
+ * @example
+ * ```tsx
+ * import { Switch } from '@customafk/lunas-ui/ui/switch';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <div className="flex items-center gap-2">
+ *   <Switch id="notifications" />
+ *   <Label htmlFor="notifications">Enable notifications</Label>
+ * </div>
+ * ```
+ */
 declare function Switch({
   className,
   ...props
-}: React.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime277.JSX.Element;
+}: React.ComponentProps<typeof Switch$1.Root>): react_jsx_runtime195.JSX.Element;
 //#endregion
 export { Switch };
 //# sourceMappingURL=switch.d.mts.map