@devalok/shilp-sutra 0.49.2 → 0.49.4

package/dist/ui/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n  ComponentProps,\n  createContext,\n  CSSProperties,\n  ElementRef,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip'\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 SidebarContext = {\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<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = useState(false)\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        if (typeof document !== 'undefined') {\n          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        }\n      },\n      [setOpenProp, open],\n    )\n\n    const toggleSidebar = useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      ],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n  side,\n  onClose,\n  children,\n}: {\n  side: 'left' | 'right'\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  const isReduced = useReducedMotion()\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  // For a left sidebar, user swipes left (negative x) to close.\n  // For a right sidebar, user swipes right (positive x) to close.\n  const dragAxis = 'x' as const\n  const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n  return (\n    <motion.div\n      ref={panelRef}\n      className=\"h-full w-full\"\n      drag={!isReduced ? dragAxis : false}\n      dragConstraints={dragConstraints}\n      dragElastic={0.2}\n      onDragEnd={(\n        _: unknown,\n        info: { offset: { x: number }; velocity: { x: number } },\n      ) => {\n        const w = panelRef.current?.getBoundingClientRect().width ?? 280\n        if (side === 'left') {\n          // Swipe left to close: negative offset\n          if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n            onClose()\n          }\n        } else {\n          // Swipe right to close: positive offset\n          if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n            onClose()\n          }\n        }\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nconst Sidebar = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n  }\n>(\n  (\n    {\n      side = 'left',\n      variant = 'sidebar',\n      collapsible = 'offcanvas',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === 'none') {\n      return (\n        <aside\n          aria-label=\"Sidebar\"\n          className={cn(\n            'flex h-full w-(--sidebar-width) flex-col bg-surface-chrome text-surface-fg',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </aside>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-surface-chrome p-0 text-surface-fg [&>button]:hidden\"\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n              } as CSSProperties\n            }\n            side={side}\n            responsive={false}\n          >\n            <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n              <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n            </SidebarSwipeWrapper>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-surface-fg md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n      >\n        <div\n          className={cn(\n            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\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)_+_1rem)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          )}\n        />\n        <div\n          className={cn(\n            'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\n            side === 'left'\n              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n            variant === 'floating' || variant === 'inset'\n              ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+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          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-chrome group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised\"\n          >\n            {children}\n          </aside>\n        </div>\n      </div>\n    )\n  },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n  ElementRef<typeof Button>,\n  ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon-md\"\n      className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover',\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)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n          'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n  ElementRef<typeof Input>,\n  ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      size=\"sm\"\n      wrapperClassName={cn(\n        'bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n        wrapperClassName,\n      )}\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n  ElementRef<typeof Separator>,\n  ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\n        'bg-surface-border mx-ds-03 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-ds-md', className)}\n      {...props}\n    />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'hover:bg-surface-raised-hover hover:text-surface-fg',\n        outline:\n          'hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n      },\n      size: {\n        md: 'h-ds-sm text-ds-md',\n        sm: 'h-ds-xs-plus text-ds-sm',\n        lg: 'h-ds-lg text-ds-md group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = 'default',\n      size = 'md',\n      tooltip,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n        {...props}\n      >\n        {asChild ? children : (\n          <>\n            {isActive && (\n              <motion.span\n                layoutId=\"sidebar-active-indicator\"\n                className=\"absolute inset-0 rounded-control bg-accent-2\"\n                transition={springs.smooth}\n              />\n            )}\n            <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n          </>\n        )}\n      </Comp>\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\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== 'collapsed' || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg',\n        'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-control\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\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 CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n  HTMLAnchorElement,\n  ComponentProps<'a'> & {\n    asChild?: boolean\n    size?: 'sm' | 'md'\n    isActive?: boolean\n  }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n        'data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg',\n        size === 'sm' && 'text-ds-sm',\n        size === 'md' && 'text-ds-md',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\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  useSidebar,\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n  ComponentProps,\n  createContext,\n  CSSProperties,\n  ElementRef,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip'\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 SidebarContext = {\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<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = useState(false)\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        if (typeof document !== 'undefined') {\n          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        }\n      },\n      [setOpenProp, open],\n    )\n\n    const toggleSidebar = useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      ],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n  side,\n  onClose,\n  children,\n}: {\n  side: 'left' | 'right'\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  const isReduced = useReducedMotion()\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  // For a left sidebar, user swipes left (negative x) to close.\n  // For a right sidebar, user swipes right (positive x) to close.\n  const dragAxis = 'x' as const\n  const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n  return (\n    <motion.div\n      ref={panelRef}\n      className=\"h-full w-full\"\n      drag={!isReduced ? dragAxis : false}\n      dragConstraints={dragConstraints}\n      dragElastic={0.2}\n      onDragEnd={(\n        _: unknown,\n        info: { offset: { x: number }; velocity: { x: number } },\n      ) => {\n        const w = panelRef.current?.getBoundingClientRect().width ?? 280\n        if (side === 'left') {\n          // Swipe left to close: negative offset\n          if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n            onClose()\n          }\n        } else {\n          // Swipe right to close: positive offset\n          if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n            onClose()\n          }\n        }\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nconst Sidebar = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n  }\n>(\n  (\n    {\n      side = 'left',\n      variant = 'sidebar',\n      collapsible = 'offcanvas',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === 'none') {\n      return (\n        <aside\n          aria-label=\"Sidebar\"\n          className={cn(\n            'flex h-full w-(--sidebar-width) flex-col bg-surface-chrome text-surface-fg',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </aside>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-surface-chrome p-0 text-surface-fg [&>button]:hidden\"\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n              } as CSSProperties\n            }\n            side={side}\n            responsive={false}\n          >\n            <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n              <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n            </SidebarSwipeWrapper>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-surface-fg md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n      >\n        <div\n          className={cn(\n            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\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)_+_1rem)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          )}\n        />\n        <div\n          className={cn(\n            'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\n            side === 'left'\n              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n            variant === 'floating' || variant === 'inset'\n              ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+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          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-chrome group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised\"\n          >\n            {children}\n          </aside>\n        </div>\n      </div>\n    )\n  },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n  ElementRef<typeof Button>,\n  ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon-md\"\n      className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover',\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)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n          'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n  ElementRef<typeof Input>,\n  ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      size=\"sm\"\n      wrapperClassName={cn(\n        'bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n        wrapperClassName,\n      )}\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n  ElementRef<typeof Separator>,\n  ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\n        'bg-surface-border mx-ds-03 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-ds-md', className)}\n      {...props}\n    />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'hover:bg-surface-raised-hover hover:text-surface-fg',\n        outline:\n          'hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n      },\n      size: {\n        md: 'h-ds-sm text-ds-md',\n        sm: 'h-ds-xs-plus text-ds-sm',\n        lg: 'h-ds-lg text-ds-md group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = 'default',\n      size = 'md',\n      tooltip,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n        {...props}\n      >\n        {asChild ? children : (\n          <>\n            {isActive && (\n              <motion.span\n                layoutId=\"sidebar-active-indicator\"\n                className=\"absolute inset-0 rounded-control bg-accent-2\"\n                transition={springs.smooth}\n              />\n            )}\n            <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n          </>\n        )}\n      </Comp>\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\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== 'collapsed' || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg',\n        'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-control\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\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 CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n  HTMLAnchorElement,\n  ComponentProps<'a'> & {\n    asChild?: boolean\n    size?: 'sm' | 'md'\n    isActive?: boolean\n  }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n        'data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg',\n        size === 'sm' && 'text-ds-sm',\n        size === 'md' && 'text-ds-md',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\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  useSidebar,\n}\n"],"mappings":"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"}

package/dist/ui/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/ui/skeleton.tsx"],"sourcesContent":["// @server-safe\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst skeletonVariants = cva('bg-skeleton-base', {\n  variants: {\n    variant: {\n      rectangle: 'rounded-control',\n      circle: 'rounded-pill aspect-square',\n      text: 'rounded-control-inner h-4 w-full',\n    },\n    animation: {\n      pulse: 'animate-pulse motion-reduce:animate-none',\n      shimmer:\n        'bg-[length:200%_100%] bg-linear-to-r from-skeleton-base via-skeleton-shimmer to-skeleton-base animate-skeleton-shimmer [background-attachment:fixed] motion-reduce:animate-none',\n      none: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'rectangle',\n    animation: 'pulse',\n  },\n})\n\n/**\n * Props for Skeleton — a loading placeholder with shape variants and two animation styles.\n *\n * **Shape variants:** `rectangle` (default, rounded corners) | `circle` (aspect-square pill) |\n * `text` (full-width slim bar, for text line placeholders)\n *\n * **Animation:** `pulse` (default, opacity fade) | `shimmer` (left-to-right gradient sweep,\n * respects `prefers-reduced-motion`) | `none` (static, for testing or paused states)\n *\n * @example\n * // Text line placeholder (repeatable for a paragraph skeleton):\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" className=\"w-3/4\" />\n *\n * @example\n * // Avatar + name card loading state:\n * <div className=\"flex items-center gap-ds-04\">\n *   <Skeleton variant=\"circle\" className=\"h-ds-md w-ds-md\" />\n *   <div className=\"flex flex-col gap-ds-02 flex-1\">\n *     <Skeleton variant=\"text\" className=\"w-1/2\" />\n *     <Skeleton variant=\"text\" className=\"w-1/3\" />\n *   </div>\n * </div>\n *\n * @example\n * // Card placeholder with shimmer animation:\n * <Skeleton variant=\"rectangle\" animation=\"shimmer\" className=\"h-48 w-full\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {}\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, variant, animation, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(skeletonVariants({ variant, animation }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSkeleton.displayName = 'Skeleton'\n\n// ---------------------------------------------------------------------------\n// Animation helper — resolves animation classes for sub-components\n// ---------------------------------------------------------------------------\n\nconst animationClasses = {\n  pulse: 'animate-pulse',\n  shimmer:\n    'bg-[length:200%_100%] bg-linear-to-r from-skeleton-base via-skeleton-shimmer to-skeleton-base animate-skeleton-shimmer motion-reduce:animate-none',\n  none: '',\n} as const\n\ntype SkeletonAnimation = 'pulse' | 'shimmer' | 'none'\n\n// ---------------------------------------------------------------------------\n// SkeletonAvatar\n// ---------------------------------------------------------------------------\n\nconst avatarSizeClasses = {\n  sm: 'h-8 w-8',\n  md: 'h-10 w-10',\n  lg: 'h-12 w-12',\n  xl: 'h-16 w-16',\n} as const\n\nexport interface SkeletonAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg' | 'xl'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonAvatar = React.forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ className, size = 'md', animation = 'pulse', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-skeleton-base rounded-pill',\n          avatarSizeClasses[size],\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSkeletonAvatar.displayName = 'SkeletonAvatar'\n\n// ---------------------------------------------------------------------------\n// SkeletonText\n// ---------------------------------------------------------------------------\n\nconst lastLineWidthClasses = {\n  full: 'w-full',\n  'three-quarter': 'w-3/4',\n  half: 'w-1/2',\n} as const\n\nconst textSpacingClasses = {\n  sm: 'gap-ds-02',\n  md: 'gap-ds-03',\n} as const\n\nexport interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  lines?: number\n  /** Last line width — 'full' | 'three-quarter' | 'half' (default: 'three-quarter') */\n  lastLineWidth?: 'full' | 'three-quarter' | 'half'\n  /** Gap between lines */\n  spacing?: 'sm' | 'md'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      className,\n      lines = 3,\n      lastLineWidth = 'three-quarter',\n      spacing = 'md',\n      animation = 'pulse',\n      ...props\n    },\n    ref,\n  ) => {\n    const safeLines = Math.max(1, lines ?? 3)\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col', textSpacingClasses[spacing], className)}\n        {...props}\n      >\n        {Array.from({ length: safeLines }).map((_, i) => (\n          <div\n            key={i}\n            className={cn(\n              'h-3.5 rounded-control-inner bg-skeleton-base',\n              animationClasses[animation],\n              i === safeLines - 1 ? lastLineWidthClasses[lastLineWidth] : 'w-full',\n            )}\n          />\n        ))}\n      </div>\n    )\n  },\n)\nSkeletonText.displayName = 'SkeletonText'\n\n// ---------------------------------------------------------------------------\n// SkeletonButton\n// ---------------------------------------------------------------------------\n\nconst buttonSizeClasses = {\n  sm: 'h-ds-sm',\n  md: 'h-ds-md',\n  lg: 'h-ds-lg',\n} as const\n\nconst buttonWidthClasses = {\n  auto: { sm: 'w-24', md: 'w-28', lg: 'w-32' },\n  full: { sm: 'w-full', md: 'w-full', lg: 'w-full' },\n} as const\n\nexport interface SkeletonButtonProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg'\n  width?: 'auto' | 'full' | 'icon'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonButton = React.forwardRef<HTMLDivElement, SkeletonButtonProps>(\n  ({ className, size = 'md', width = 'auto', animation = 'pulse', ...props }, ref) => {\n    const isIcon = width === 'icon'\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-skeleton-base rounded-control',\n          buttonSizeClasses[size],\n          isIcon ? 'aspect-square' : buttonWidthClasses[width as 'auto' | 'full'][size],\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSkeletonButton.displayName = 'SkeletonButton'\n\n// ---------------------------------------------------------------------------\n// SkeletonInput\n// ---------------------------------------------------------------------------\n\nconst inputSizeClasses = {\n  sm: 'h-ds-sm',\n  md: 'h-ds-md',\n  lg: 'h-ds-lg',\n} as const\n\nexport interface SkeletonInputProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonInput = React.forwardRef<HTMLDivElement, SkeletonInputProps>(\n  ({ className, size = 'md', animation = 'pulse', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'w-full bg-skeleton-base rounded-control border border-skeleton-base/30',\n          inputSizeClasses[size],\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSkeletonInput.displayName = 'SkeletonInput'\n\n// ---------------------------------------------------------------------------\n// SkeletonChart\n// ---------------------------------------------------------------------------\n\n/** Deterministic bar heights based on index (percentage of container height) */\nconst BAR_HEIGHTS = [65, 40, 85, 55, 70, 30, 90, 50, 75, 35, 80, 45, 60, 95, 38] as const\n\nexport interface SkeletonChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  bars?: number\n  height?: string\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonChart = React.forwardRef<HTMLDivElement, SkeletonChartProps>(\n  ({ className, bars = 7, height = 'h-40', animation = 'pulse', ...props }, ref) => {\n    const safeBars = Math.max(1, bars ?? 7)\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-end gap-ds-02', height, className)}\n        {...props}\n      >\n        {Array.from({ length: safeBars }).map((_, i) => {\n          const barHeight = BAR_HEIGHTS[i % BAR_HEIGHTS.length]\n          return (\n            <div\n              key={i}\n              className={cn(\n                'flex-1 bg-skeleton-base rounded-t-control-inner',\n                animationClasses[animation],\n              )}\n              style={{ height: `${barHeight}%` }}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nSkeletonChart.displayName = 'SkeletonChart'\n\n// ---------------------------------------------------------------------------\n// SkeletonImage\n// ---------------------------------------------------------------------------\n\nexport interface SkeletonImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: string\n  height?: string\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonImage = React.forwardRef<HTMLDivElement, SkeletonImageProps>(\n  ({ className, width = 'w-full', height = 'h-40', animation = 'pulse', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-skeleton-base rounded-control relative flex items-center justify-center',\n          width,\n          height,\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-skeleton-shimmer opacity-40\"\n          aria-hidden=\"true\"\n        >\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n          <polyline points=\"21 15 16 10 5 21\" />\n        </svg>\n      </div>\n    )\n  },\n)\nSkeletonImage.displayName = 'SkeletonImage'\n\n// ---------------------------------------------------------------------------\n// SkeletonGroup\n// ---------------------------------------------------------------------------\n\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible label for the loading state */\n  label?: string\n}\n\nconst SkeletonGroup = React.forwardRef<HTMLDivElement, SkeletonGroupProps>(\n  ({ label = 'Loading', children, ...props }, ref) => {\n    return (\n      <div ref={ref} role=\"status\" aria-label={label} aria-busy=\"true\" {...props}>\n        <span className=\"sr-only\">{label}...</span>\n        {children}\n      </div>\n    )\n  },\n)\nSkeletonGroup.displayName = 'SkeletonGroup'\n\nexport {\n  Skeleton,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonChart,\n  SkeletonGroup,\n  SkeletonImage,\n  SkeletonInput,\n  SkeletonText,\n  skeletonVariants,\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAmB,EAAI,oBAAoB;CAC/C,UAAU;EACR,SAAS;GACP,WAAW;GACX,QAAQ;GACR,MAAM;GACP;EACD,WAAW;GACT,OAAO;GACP,SACE;GACF,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,WAAW;EACZ;CACF,CAAC,EAmCI,IAAW,EAAM,YACpB,EAAE,cAAW,YAAS,cAAW,GAAG,KAAS,MAE1C,kBAAC,OAAD;CACO;CACL,eAAY;CACZ,WAAW,EAAG,EAAiB;EAAE;EAAS;EAAW,CAAC,EAAE,EAAU;CAClE,GAAI;CACJ,CAAA,CAGP;AACD,EAAS,cAAc;AAMvB,IAAM,IAAmB;CACvB,OAAO;CACP,SACE;CACF,MAAM;CACP,EAQK,IAAoB;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAOK,IAAiB,EAAM,YAC1B,EAAE,cAAW,UAAO,MAAM,eAAY,SAAS,GAAG,KAAS,MAExD,kBAAC,OAAD;CACO;CACL,WAAW,EACT,iCACA,EAAkB,IAClB,EAAiB,IACjB,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAe,cAAc;AAM7B,IAAM,IAAuB;CAC3B,MAAM;CACN,iBAAiB;CACjB,MAAM;CACP,EAEK,IAAqB;CACzB,IAAI;CACJ,IAAI;CACL,EAWK,IAAe,EAAM,YAEvB,EACE,cACA,WAAQ,GACR,mBAAgB,iBAChB,aAAU,MACV,eAAY,SACZ,GAAG,KAEL,MACG;CACH,IAAM,IAAY,KAAK,IAAI,GAAG,KAAS,EAAE;AACzC,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,iBAAiB,EAAmB,IAAU,EAAU;EACtE,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAW,CAAC,CAAC,KAAK,GAAG,MACzC,kBAAC,OAAD,EAEE,WAAW,EACT,gDACA,EAAiB,IACjB,MAAM,IAAY,IAAI,EAAqB,KAAiB,SAC7D,EACD,EANK,EAML,CACF;EACE,CAAA;EAGX;AACD,EAAa,cAAc;AAM3B,IAAM,IAAoB;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAqB;CACzB,MAAM;EAAE,IAAI;EAAQ,IAAI;EAAQ,IAAI;EAAQ;CAC5C,MAAM;EAAE,IAAI;EAAU,IAAI;EAAU,IAAI;EAAU;CACnD,EAQK,IAAiB,EAAM,YAC1B,EAAE,cAAW,UAAO,MAAM,WAAQ,QAAQ,eAAY,SAAS,GAAG,KAAS,MAAQ;CAClF,IAAM,IAAS,MAAU;AACzB,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,oCACA,EAAkB,IAClB,IAAS,kBAAkB,EAAmB,GAA0B,IACxE,EAAiB,IACjB,EACD;EACD,GAAI;EACJ,CAAA;EAGP;AACD,EAAe,cAAc;AAM7B,IAAM,IAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAOK,IAAgB,EAAM,YACzB,EAAE,cAAW,UAAO,MAAM,eAAY,SAAS,GAAG,KAAS,MAExD,kBAAC,OAAD;CACO;CACL,WAAW,EACT,0EACA,EAAiB,IACjB,EAAiB,IACjB,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAc,cAAc;AAO5B,IAAM,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAG,EAQ1E,IAAgB,EAAM,YACzB,EAAE,cAAW,UAAO,GAAG,YAAS,QAAQ,eAAY,SAAS,GAAG,KAAS,MAAQ;CAChF,IAAM,IAAW,KAAK,IAAI,GAAG,KAAQ,EAAE;AACvC,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,4BAA4B,GAAQ,EAAU;EAC5D,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAU,CAAC,CAAC,KAAK,GAAG,MAAM;GAC9C,IAAM,IAAY,EAAY,IAAI,EAAY;AAC9C,UACE,kBAAC,OAAD;IAEE,WAAW,EACT,mDACA,EAAiB,GAClB;IACD,OAAO,EAAE,QAAQ,GAAG,EAAU,IAAI;IAClC,EANK,EAML;IAEJ;EACE,CAAA;EAGX;AACD,EAAc,cAAc;AAY5B,IAAM,IAAgB,EAAM,YACzB,EAAE,cAAW,WAAQ,UAAU,YAAS,QAAQ,eAAY,SAAS,GAAG,KAAS,MAE9E,kBAAC,OAAD;CACO;CACL,WAAW,EACT,8EACA,GACA,GACA,EAAiB,IACjB,EACD;CACD,GAAI;WAEJ,kBAAC,OAAD;EACE,OAAM;EACN,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EACV,eAAY;YAXd;GAaE,kBAAC,QAAD;IAAM,GAAE;IAAI,GAAE;IAAI,OAAM;IAAK,QAAO;IAAK,IAAG;IAAI,IAAG;IAAM,CAAA;GACzD,kBAAC,UAAD;IAAQ,IAAG;IAAM,IAAG;IAAM,GAAE;IAAQ,CAAA;GACpC,kBAAC,YAAD,EAAU,QAAO,oBAAqB,CAAA;GAClC;;CACF,CAAA,CAGX;AACD,EAAc,cAAc;AAW5B,IAAM,IAAgB,EAAM,YACzB,EAAE,WAAQ,WAAW,aAAU,GAAG,KAAS,MAExC,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAS,cAAY;CAAO,aAAU;CAAO,GAAI;WAArE,CACE,kBAAC,QAAD;EAAM,WAAU;YAAhB,CAA2B,GAAM,MAAU;KAC1C,EACG;GAGX;AACD,EAAc,cAAc"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/ui/skeleton.tsx"],"sourcesContent":["// @server-safe\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst skeletonVariants = cva('bg-skeleton-base', {\n  variants: {\n    variant: {\n      rectangle: 'rounded-control',\n      circle: 'rounded-pill aspect-square',\n      text: 'rounded-control-inner h-4 w-full',\n    },\n    animation: {\n      pulse: 'animate-pulse motion-reduce:animate-none',\n      shimmer:\n        'bg-[length:200%_100%] bg-linear-to-r from-skeleton-base via-skeleton-shimmer to-skeleton-base animate-skeleton-shimmer [background-attachment:fixed] motion-reduce:animate-none',\n      none: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'rectangle',\n    animation: 'pulse',\n  },\n})\n\n/**\n * Props for Skeleton — a loading placeholder with shape variants and two animation styles.\n *\n * **Shape variants:** `rectangle` (default, rounded corners) | `circle` (aspect-square pill) |\n * `text` (full-width slim bar, for text line placeholders)\n *\n * **Animation:** `pulse` (default, opacity fade) | `shimmer` (left-to-right gradient sweep,\n * respects `prefers-reduced-motion`) | `none` (static, for testing or paused states)\n *\n * @example\n * // Text line placeholder (repeatable for a paragraph skeleton):\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" className=\"w-3/4\" />\n *\n * @example\n * // Avatar + name card loading state:\n * <div className=\"flex items-center gap-ds-04\">\n *   <Skeleton variant=\"circle\" className=\"h-ds-md w-ds-md\" />\n *   <div className=\"flex flex-col gap-ds-02 flex-1\">\n *     <Skeleton variant=\"text\" className=\"w-1/2\" />\n *     <Skeleton variant=\"text\" className=\"w-1/3\" />\n *   </div>\n * </div>\n *\n * @example\n * // Card placeholder with shimmer animation:\n * <Skeleton variant=\"rectangle\" animation=\"shimmer\" className=\"h-48 w-full\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {}\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, variant, animation, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(skeletonVariants({ variant, animation }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSkeleton.displayName = 'Skeleton'\n\n// ---------------------------------------------------------------------------\n// Animation helper — resolves animation classes for sub-components\n// ---------------------------------------------------------------------------\n\nconst animationClasses = {\n  pulse: 'animate-pulse',\n  shimmer:\n    'bg-[length:200%_100%] bg-linear-to-r from-skeleton-base via-skeleton-shimmer to-skeleton-base animate-skeleton-shimmer motion-reduce:animate-none',\n  none: '',\n} as const\n\ntype SkeletonAnimation = 'pulse' | 'shimmer' | 'none'\n\n// ---------------------------------------------------------------------------\n// SkeletonAvatar\n// ---------------------------------------------------------------------------\n\nconst avatarSizeClasses = {\n  sm: 'h-8 w-8',\n  md: 'h-10 w-10',\n  lg: 'h-12 w-12',\n  xl: 'h-16 w-16',\n} as const\n\nexport interface SkeletonAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg' | 'xl'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonAvatar = React.forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ className, size = 'md', animation = 'pulse', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-skeleton-base rounded-pill',\n          avatarSizeClasses[size],\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSkeletonAvatar.displayName = 'SkeletonAvatar'\n\n// ---------------------------------------------------------------------------\n// SkeletonText\n// ---------------------------------------------------------------------------\n\nconst lastLineWidthClasses = {\n  full: 'w-full',\n  'three-quarter': 'w-3/4',\n  half: 'w-1/2',\n} as const\n\nconst textSpacingClasses = {\n  sm: 'gap-ds-02',\n  md: 'gap-ds-03',\n} as const\n\nexport interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  lines?: number\n  /** Last line width — 'full' | 'three-quarter' | 'half' (default: 'three-quarter') */\n  lastLineWidth?: 'full' | 'three-quarter' | 'half'\n  /** Gap between lines */\n  spacing?: 'sm' | 'md'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      className,\n      lines = 3,\n      lastLineWidth = 'three-quarter',\n      spacing = 'md',\n      animation = 'pulse',\n      ...props\n    },\n    ref,\n  ) => {\n    const safeLines = Math.max(1, lines ?? 3)\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col', textSpacingClasses[spacing], className)}\n        {...props}\n      >\n        {Array.from({ length: safeLines }).map((_, i) => (\n          <div\n            key={i}\n            className={cn(\n              'h-3.5 rounded-control-inner bg-skeleton-base',\n              animationClasses[animation],\n              i === safeLines - 1 ? lastLineWidthClasses[lastLineWidth] : 'w-full',\n            )}\n          />\n        ))}\n      </div>\n    )\n  },\n)\nSkeletonText.displayName = 'SkeletonText'\n\n// ---------------------------------------------------------------------------\n// SkeletonButton\n// ---------------------------------------------------------------------------\n\nconst buttonSizeClasses = {\n  sm: 'h-ds-sm',\n  md: 'h-ds-md',\n  lg: 'h-ds-lg',\n} as const\n\nconst buttonWidthClasses = {\n  auto: { sm: 'w-24', md: 'w-28', lg: 'w-32' },\n  full: { sm: 'w-full', md: 'w-full', lg: 'w-full' },\n} as const\n\nexport interface SkeletonButtonProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg'\n  width?: 'auto' | 'full' | 'icon'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonButton = React.forwardRef<HTMLDivElement, SkeletonButtonProps>(\n  ({ className, size = 'md', width = 'auto', animation = 'pulse', ...props }, ref) => {\n    const isIcon = width === 'icon'\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-skeleton-base rounded-control',\n          buttonSizeClasses[size],\n          isIcon ? 'aspect-square' : buttonWidthClasses[width as 'auto' | 'full'][size],\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSkeletonButton.displayName = 'SkeletonButton'\n\n// ---------------------------------------------------------------------------\n// SkeletonInput\n// ---------------------------------------------------------------------------\n\nconst inputSizeClasses = {\n  sm: 'h-ds-sm',\n  md: 'h-ds-md',\n  lg: 'h-ds-lg',\n} as const\n\nexport interface SkeletonInputProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg'\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonInput = React.forwardRef<HTMLDivElement, SkeletonInputProps>(\n  ({ className, size = 'md', animation = 'pulse', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'w-full bg-skeleton-base rounded-control border border-skeleton-base/30',\n          inputSizeClasses[size],\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSkeletonInput.displayName = 'SkeletonInput'\n\n// ---------------------------------------------------------------------------\n// SkeletonChart\n// ---------------------------------------------------------------------------\n\n/** Deterministic bar heights based on index (percentage of container height) */\nconst BAR_HEIGHTS = [65, 40, 85, 55, 70, 30, 90, 50, 75, 35, 80, 45, 60, 95, 38] as const\n\nexport interface SkeletonChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  bars?: number\n  height?: string\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonChart = React.forwardRef<HTMLDivElement, SkeletonChartProps>(\n  ({ className, bars = 7, height = 'h-40', animation = 'pulse', ...props }, ref) => {\n    const safeBars = Math.max(1, bars ?? 7)\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-end gap-ds-02', height, className)}\n        {...props}\n      >\n        {Array.from({ length: safeBars }).map((_, i) => {\n          const barHeight = BAR_HEIGHTS[i % BAR_HEIGHTS.length]\n          return (\n            <div\n              key={i}\n              className={cn(\n                'flex-1 bg-skeleton-base rounded-t-control-inner',\n                animationClasses[animation],\n              )}\n              style={{ height: `${barHeight}%` }}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nSkeletonChart.displayName = 'SkeletonChart'\n\n// ---------------------------------------------------------------------------\n// SkeletonImage\n// ---------------------------------------------------------------------------\n\nexport interface SkeletonImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: string\n  height?: string\n  animation?: SkeletonAnimation\n}\n\nconst SkeletonImage = React.forwardRef<HTMLDivElement, SkeletonImageProps>(\n  ({ className, width = 'w-full', height = 'h-40', animation = 'pulse', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-skeleton-base rounded-control relative flex items-center justify-center',\n          width,\n          height,\n          animationClasses[animation],\n          className,\n        )}\n        {...props}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-skeleton-shimmer opacity-40\"\n          aria-hidden=\"true\"\n        >\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n          <polyline points=\"21 15 16 10 5 21\" />\n        </svg>\n      </div>\n    )\n  },\n)\nSkeletonImage.displayName = 'SkeletonImage'\n\n// ---------------------------------------------------------------------------\n// SkeletonGroup\n// ---------------------------------------------------------------------------\n\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible label for the loading state */\n  label?: string\n}\n\nconst SkeletonGroup = React.forwardRef<HTMLDivElement, SkeletonGroupProps>(\n  ({ label = 'Loading', children, ...props }, ref) => {\n    return (\n      <div ref={ref} role=\"status\" aria-label={label} aria-busy=\"true\" {...props}>\n        <span className=\"sr-only\">{label}...</span>\n        {children}\n      </div>\n    )\n  },\n)\nSkeletonGroup.displayName = 'SkeletonGroup'\n\nexport {\n  Skeleton,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonChart,\n  SkeletonGroup,\n  SkeletonImage,\n  SkeletonInput,\n  SkeletonText,\n  skeletonVariants,\n}\n"],"mappings":"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"}

package/dist/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-raised-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      color: {\n        accent: 'border-accent-7 focus-visible:ring-accent-9',\n        success: 'border-success-7 focus-visible:ring-success-9',\n        warning: 'border-warning-7 focus-visible:ring-warning-9',\n        error: 'border-error-7 focus-visible:ring-error-9',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\nconst sliderRangeColorMap: Record<string, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n}\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const thumbCount = (value ?? defaultValue ?? [0]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', sliderRangeColorMap[color])} />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          className={sliderThumbVariants({ size, color })}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAsB,EAC1B,6EACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAAsB,EAC1B,gVACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EAAE,MAAM;EAAM,OAAO;EAAU;CACjD,CACF,EAEK,IAA8C;CAClD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACR,EA0BK,IAAS,EAAM,YAGlB,EAAE,cAAW,cAAc,GAAW,UAAO,iBAAc,MAAM,IAAW,MAAM,OAAO,IAAY,UAAU,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAO,KAAY,MACnB,IAAQ,KAAa,UACrB,IAAW,GAAc,EACzB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,KAAc,KAAS,KAAgB,CAAC,EAAE,EAAE;AAElD,QACE,kBAAC,GAAD;EACO;EACE;EACO;EACd,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,4DACA,EACD;EACD,GAAI;YAXN,CAaE,kBAAC,GAAD;GAAuB,WAAW,EAAoB,EAAE,SAAM,CAAC;aAC7D,kBAAC,GAAD,EAAuB,WAAW,EAAG,mBAAmB,EAAoB,GAAO,EAAI,CAAA;GACjE,CAAA,EACvB,MAAM,KAAK,EAAE,QAAQ,GAAY,GAAG,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAY,MAAe,IAAK,IAAmC,KAAA;GACnE,WAAW,EAAoB;IAAE;IAAM;IAAO,CAAC;GAC/C,EAHK,EAGL,CACF,CACmB;;EAEzB;AACF,EAAO,cAAA,EAAmC"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-raised-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      color: {\n        accent: 'border-accent-7 focus-visible:ring-accent-9',\n        success: 'border-success-7 focus-visible:ring-success-9',\n        warning: 'border-warning-7 focus-visible:ring-warning-9',\n        error: 'border-error-7 focus-visible:ring-error-9',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\nconst sliderRangeColorMap: Record<string, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n}\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const thumbCount = (value ?? defaultValue ?? [0]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', sliderRangeColorMap[color])} />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          className={sliderThumbVariants({ size, color })}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAsB,EAC1B,6EACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAAsB,EAC1B,gVACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAS;AACjD,CACF,GAEM,IAA8C;CAClD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT,GA0BM,IAAS,EAAM,YAGlB,EAAE,cAAW,cAAc,GAAW,UAAO,iBAAc,MAAM,IAAW,MAAM,OAAO,IAAY,UAAU,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAO,KAAY,MACnB,IAAQ,KAAa,UACrB,IAAW,EAAa,GACxB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,KAAc,KAAS,KAAgB,CAAC,CAAC,EAAA,CAAG;CAElD,OACE,kBAAC,GAAD;EACO;EACE;EACO;EACd,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,4DACA,CACF;EACA,GAAI;YAXN,CAaE,kBAAC,GAAD;GAAuB,WAAW,EAAoB,EAAE,QAAK,CAAC;aAC5D,kBAAC,GAAD,EAAuB,WAAW,EAAG,mBAAmB,EAAoB,EAAM,EAAI,CAAA;EACjE,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAY,MAAe,IAAK,IAAmC,KAAA;GACnE,WAAW,EAAoB;IAAE;IAAM;GAAM,CAAC;EAC/C,GAHM,CAGN,CACF,CACmB;;AAE1B,CAAC;AACD,EAAO,cAAA,EAAmC"}

package/dist/ui/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../src/ui/spinner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst sizeClasses = {\n  sm: 'h-ico-sm w-ico-sm',\n  md: 'h-ico-md w-ico-md',\n  lg: 'h-ico-lg w-ico-lg',\n} as const\n\n/** Arc stroke width per size */\nconst arcStrokeWidths = { sm: 3, md: 3, lg: 4 } as const\n\n/** Thinner icon stroke for checkmark / X — feels lighter and more refined */\nconst iconStrokeWidths = { sm: 1.8, md: 2, lg: 2.5 } as const\n\n/**\n * Props for Spinner — an animated arc spinner with optional success (checkmark) and error (X)\n * state transitions, powered by Framer Motion.\n *\n * **Sizes:** `sm` (16px) | `md` (20px, default) | `lg` (24px)\n *\n * **States:**\n * - `spinning` (default): Rotating arc with Material Design-style pulse\n * - `success`: Arc completes to filled green circle, white checkmark draws in\n * - `error`: Arc completes to filled red circle, white X draws in\n *\n * **Variants:**\n * - `filled` (default): Semantic colored fill + white icon — for standalone contexts\n * - `bare`: No fill, icon uses `currentColor` — for embedding in buttons, toolbars, etc.\n *\n * **Accessibility:** `role=\"status\"` with sr-only text that updates per state.\n * Respects `prefers-reduced-motion` — shows static icons with opacity crossfades.\n *\n * @example\n * <Spinner />                                           // basic arc spinner\n * <Spinner size=\"sm\" />                                 // small\n * <Spinner state=\"success\" />                           // filled green circle + white check\n * <Spinner state=\"success\" variant=\"bare\" />            // just the check, currentColor\n * <Spinner state=\"error\" />                             // filled red circle + white X\n * <Spinner delay={150} />                               // no render until 150ms\n * <Spinner state=\"success\" onComplete={handleDone} />   // callback after animation\n */\nexport interface SpinnerProps {\n  /** sm | md | lg — maps to icon size tokens. Default: 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** Current state. Default: 'spinning' */\n  state?: 'spinning' | 'success' | 'error'\n  /** Visual variant for success/error states. Default: 'filled' */\n  variant?: 'filled' | 'bare'\n  /** Delay in ms before showing (avoids flicker). Default: 0 */\n  delay?: number\n  /** Fires when success/error transition animation completes */\n  onComplete?: () => void\n  className?: string\n}\n\nconst RADIUS = 10\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nconst srText: Record<string, string> = {\n  spinning: 'Loading...',\n  success: 'Complete',\n  error: 'Error',\n}\n\nconst stateColors: Record<string, string> = {\n  spinning: 'var(--color-accent-9)',\n  success: 'var(--color-success-9)',\n  error: 'var(--color-error-9)',\n}\n\n// Filled variant — icons fit inside the filled circle\nconst CHECKMARK_D = 'M7 12.5l3 3 7-7'\nconst X_MARK_D = 'M8 8l8 8M16 8l-8 8'\n\n// Bare variant — larger icons since there's no circle constraining them\nconst CHECKMARK_BARE_D = 'M5 12.5l4 4 10-10'\nconst X_MARK_BARE_D = 'M6 6l12 12M18 6l-12 12'\n\nconst Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(\n  ({ size = 'md', state = 'spinning', variant = 'filled', delay = 0, onComplete, className }, ref) => {\n    const prefersReduced = useReducedMotion()\n    const [visible, setVisible] = React.useState(delay === 0)\n\n    React.useEffect(() => {\n      if (delay <= 0) {\n        setVisible(true)\n        return\n      }\n      const timer = setTimeout(() => setVisible(true), delay)\n      return () => clearTimeout(timer)\n    }, [delay])\n\n    if (!visible) return null\n\n    const arcSw = arcStrokeWidths[size]\n    const iconSw = iconStrokeWidths[size]\n    const isSpinning = state === 'spinning'\n    const isFinal = state === 'success' || state === 'error'\n    const isFilled = variant === 'filled'\n    const color = variant === 'bare' && state === 'spinning' ? 'currentColor' : stateColors[state]\n\n    // Icon stroke: white on filled backgrounds, currentColor on bare\n    const iconColor = isFilled ? 'white' : 'currentColor'\n    const checkPath = isFilled ? CHECKMARK_D : CHECKMARK_BARE_D\n    const xPath = isFilled ? X_MARK_D : X_MARK_BARE_D\n\n    // ── Sequence timing (seconds) ──────────────────────────────────\n    // Filled: arc completes → fill fades in → white icon draws\n    // Bare:   arc completes + fades out → currentColor icon draws\n    const ARC_COMPLETE = 0.4\n    const FILL_DELAY = 0.3\n    const FILL_DURATION = 0.25\n    const ICON_DELAY = isFilled ? 0.5 : 0.35\n    const ICON_DURATION = 0.35\n\n    return (\n      <span ref={ref} role=\"status\" className={cn('inline-flex', className)}>\n        <svg\n          className={sizeClasses[size]}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          {/* Background track circle — hidden in bare final state */}\n          {prefersReduced ? (\n            !(isFinal && !isFilled) && (\n              <circle\n                cx=\"12\"\n                cy=\"12\"\n                r={RADIUS}\n                stroke=\"var(--color-surface-border)\"\n                strokeWidth={arcSw}\n                fill=\"none\"\n              />\n            )\n          ) : (\n            <motion.circle\n              cx=\"12\"\n              cy=\"12\"\n              r={RADIUS}\n              stroke=\"var(--color-surface-border)\"\n              strokeWidth={arcSw}\n              fill=\"none\"\n              animate={{ opacity: isFinal && !isFilled ? 0 : 1 }}\n              transition={{ duration: 0.2, delay: isFinal && !isFilled ? ARC_COMPLETE : 0 }}\n            />\n          )}\n\n          {/* Animated arc — spins when loading, completes to full circle on state change */}\n          {prefersReduced ? (\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r={RADIUS}\n              stroke={color}\n              strokeWidth={arcSw}\n              fill=\"none\"\n              strokeLinecap=\"round\"\n              strokeDasharray={\n                isSpinning\n                  ? `${CIRCUMFERENCE * 0.75} ${CIRCUMFERENCE * 0.25}`\n                  : `${CIRCUMFERENCE} 0`\n              }\n              style={{\n                transformOrigin: 'center',\n                transform: isSpinning ? 'rotate(-90deg)' : undefined,\n                opacity: isFinal && !isFilled ? 0 : 1,\n              }}\n            />\n          ) : (\n            <motion.circle\n              cx=\"12\"\n              cy=\"12\"\n              r={RADIUS}\n              stroke={color}\n              strokeWidth={arcSw}\n              fill=\"none\"\n              strokeLinecap=\"round\"\n              style={{ transformOrigin: 'center' }}\n              animate={\n                isSpinning\n                  ? {\n                      rotate: [0, 360],\n                      strokeDasharray: [\n                        `${CIRCUMFERENCE * 0.1} ${CIRCUMFERENCE * 0.9}`,\n                        `${CIRCUMFERENCE * 0.75} ${CIRCUMFERENCE * 0.25}`,\n                        `${CIRCUMFERENCE * 0.1} ${CIRCUMFERENCE * 0.9}`,\n                      ],\n                    }\n                  : {\n                      rotate: 0,\n                      strokeDasharray: `${CIRCUMFERENCE} 0`,\n                      // In bare mode, fade out the arc after it completes\n                      ...(!isFilled && { opacity: 0 }),\n                    }\n              }\n              transition={\n                isSpinning\n                  ? {\n                      rotate: { duration: 1, repeat: Infinity, ease: 'linear' },\n                      strokeDasharray: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },\n                    }\n                  : {\n                      rotate: { duration: 0.3, ease: 'easeOut' },\n                      strokeDasharray: { duration: ARC_COMPLETE, ease: 'easeInOut' },\n                      ...(!isFilled && { opacity: { duration: 0.2, delay: ARC_COMPLETE } }),\n                    }\n              }\n            />\n          )}\n\n          {/* Filled circle — fades in after arc completes, covers track (filled variant only) */}\n          <AnimatePresence>\n            {isFinal && isFilled &&\n              (prefersReduced ? (\n                <circle\n                  key=\"fill-static\"\n                  cx=\"12\"\n                  cy=\"12\"\n                  r={RADIUS + arcSw / 2}\n                  fill={color}\n                  stroke=\"none\"\n                />\n              ) : (\n                <motion.circle\n                  key=\"fill\"\n                  cx=\"12\"\n                  cy=\"12\"\n                  r={RADIUS + arcSw / 2}\n                  fill={color}\n                  stroke=\"none\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ duration: FILL_DURATION, delay: FILL_DELAY, ease: 'easeOut' }}\n                  style={{ transformOrigin: 'center' }}\n                />\n              ))}\n          </AnimatePresence>\n\n          {/* Checkmark — white on filled, currentColor on bare */}\n          <AnimatePresence>\n            {state === 'success' &&\n              (prefersReduced ? (\n                <path\n                  key=\"check-static\"\n                  d={checkPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  fill=\"none\"\n                />\n              ) : (\n                <motion.path\n                  key=\"check\"\n                  d={checkPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  fill=\"none\"\n                  initial={{ pathLength: 0, opacity: 0 }}\n                  animate={{ pathLength: 1, opacity: 1 }}\n                  transition={{\n                    pathLength: { duration: ICON_DURATION, ease: 'easeOut', delay: ICON_DELAY },\n                    opacity: { duration: 0.1, delay: ICON_DELAY },\n                  }}\n                  onAnimationComplete={() => onComplete?.()}\n                />\n              ))}\n          </AnimatePresence>\n\n          {/* X mark — white on filled, currentColor on bare */}\n          <AnimatePresence>\n            {state === 'error' &&\n              (prefersReduced ? (\n                <path\n                  key=\"x-static\"\n                  d={xPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  fill=\"none\"\n                />\n              ) : (\n                <motion.path\n                  key=\"x\"\n                  d={xPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  fill=\"none\"\n                  initial={{ pathLength: 0, opacity: 0 }}\n                  animate={{ pathLength: 1, opacity: 1 }}\n                  transition={{\n                    pathLength: { duration: ICON_DURATION, ease: 'easeOut', delay: ICON_DELAY },\n                    opacity: { duration: 0.1, delay: ICON_DELAY },\n                  }}\n                  onAnimationComplete={() => onComplete?.()}\n                />\n              ))}\n          </AnimatePresence>\n        </svg>\n        <span className=\"sr-only\">{srText[state]}</span>\n      </span>\n    )\n  },\n)\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\n"],"mappings":"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"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/ui/spinner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst sizeClasses = {\n  sm: 'h-ico-sm w-ico-sm',\n  md: 'h-ico-md w-ico-md',\n  lg: 'h-ico-lg w-ico-lg',\n} as const\n\n/** Arc stroke width per size */\nconst arcStrokeWidths = { sm: 3, md: 3, lg: 4 } as const\n\n/** Thinner icon stroke for checkmark / X — feels lighter and more refined */\nconst iconStrokeWidths = { sm: 1.8, md: 2, lg: 2.5 } as const\n\n/**\n * Props for Spinner — an animated arc spinner with optional success (checkmark) and error (X)\n * state transitions, powered by Framer Motion.\n *\n * **Sizes:** `sm` (16px) | `md` (20px, default) | `lg` (24px)\n *\n * **States:**\n * - `spinning` (default): Rotating arc with Material Design-style pulse\n * - `success`: Arc completes to filled green circle, white checkmark draws in\n * - `error`: Arc completes to filled red circle, white X draws in\n *\n * **Variants:**\n * - `filled` (default): Semantic colored fill + white icon — for standalone contexts\n * - `bare`: No fill, icon uses `currentColor` — for embedding in buttons, toolbars, etc.\n *\n * **Accessibility:** `role=\"status\"` with sr-only text that updates per state.\n * Respects `prefers-reduced-motion` — shows static icons with opacity crossfades.\n *\n * @example\n * <Spinner />                                           // basic arc spinner\n * <Spinner size=\"sm\" />                                 // small\n * <Spinner state=\"success\" />                           // filled green circle + white check\n * <Spinner state=\"success\" variant=\"bare\" />            // just the check, currentColor\n * <Spinner state=\"error\" />                             // filled red circle + white X\n * <Spinner delay={150} />                               // no render until 150ms\n * <Spinner state=\"success\" onComplete={handleDone} />   // callback after animation\n */\nexport interface SpinnerProps {\n  /** sm | md | lg — maps to icon size tokens. Default: 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** Current state. Default: 'spinning' */\n  state?: 'spinning' | 'success' | 'error'\n  /** Visual variant for success/error states. Default: 'filled' */\n  variant?: 'filled' | 'bare'\n  /** Delay in ms before showing (avoids flicker). Default: 0 */\n  delay?: number\n  /** Fires when success/error transition animation completes */\n  onComplete?: () => void\n  className?: string\n}\n\nconst RADIUS = 10\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nconst srText: Record<string, string> = {\n  spinning: 'Loading...',\n  success: 'Complete',\n  error: 'Error',\n}\n\nconst stateColors: Record<string, string> = {\n  spinning: 'var(--color-accent-9)',\n  success: 'var(--color-success-9)',\n  error: 'var(--color-error-9)',\n}\n\n// Filled variant — icons fit inside the filled circle\nconst CHECKMARK_D = 'M7 12.5l3 3 7-7'\nconst X_MARK_D = 'M8 8l8 8M16 8l-8 8'\n\n// Bare variant — larger icons since there's no circle constraining them\nconst CHECKMARK_BARE_D = 'M5 12.5l4 4 10-10'\nconst X_MARK_BARE_D = 'M6 6l12 12M18 6l-12 12'\n\nconst Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(\n  ({ size = 'md', state = 'spinning', variant = 'filled', delay = 0, onComplete, className }, ref) => {\n    const prefersReduced = useReducedMotion()\n    const [visible, setVisible] = React.useState(delay === 0)\n\n    React.useEffect(() => {\n      if (delay <= 0) {\n        setVisible(true)\n        return\n      }\n      const timer = setTimeout(() => setVisible(true), delay)\n      return () => clearTimeout(timer)\n    }, [delay])\n\n    if (!visible) return null\n\n    const arcSw = arcStrokeWidths[size]\n    const iconSw = iconStrokeWidths[size]\n    const isSpinning = state === 'spinning'\n    const isFinal = state === 'success' || state === 'error'\n    const isFilled = variant === 'filled'\n    const color = variant === 'bare' && state === 'spinning' ? 'currentColor' : stateColors[state]\n\n    // Icon stroke: white on filled backgrounds, currentColor on bare\n    const iconColor = isFilled ? 'white' : 'currentColor'\n    const checkPath = isFilled ? CHECKMARK_D : CHECKMARK_BARE_D\n    const xPath = isFilled ? X_MARK_D : X_MARK_BARE_D\n\n    // ── Sequence timing (seconds) ──────────────────────────────────\n    // Filled: arc completes → fill fades in → white icon draws\n    // Bare:   arc completes + fades out → currentColor icon draws\n    const ARC_COMPLETE = 0.4\n    const FILL_DELAY = 0.3\n    const FILL_DURATION = 0.25\n    const ICON_DELAY = isFilled ? 0.5 : 0.35\n    const ICON_DURATION = 0.35\n\n    return (\n      <span ref={ref} role=\"status\" className={cn('inline-flex', className)}>\n        <svg\n          className={sizeClasses[size]}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          {/* Background track circle — hidden in bare final state */}\n          {prefersReduced ? (\n            !(isFinal && !isFilled) && (\n              <circle\n                cx=\"12\"\n                cy=\"12\"\n                r={RADIUS}\n                stroke=\"var(--color-surface-border)\"\n                strokeWidth={arcSw}\n                fill=\"none\"\n              />\n            )\n          ) : (\n            <motion.circle\n              cx=\"12\"\n              cy=\"12\"\n              r={RADIUS}\n              stroke=\"var(--color-surface-border)\"\n              strokeWidth={arcSw}\n              fill=\"none\"\n              animate={{ opacity: isFinal && !isFilled ? 0 : 1 }}\n              transition={{ duration: 0.2, delay: isFinal && !isFilled ? ARC_COMPLETE : 0 }}\n            />\n          )}\n\n          {/* Animated arc — spins when loading, completes to full circle on state change */}\n          {prefersReduced ? (\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r={RADIUS}\n              stroke={color}\n              strokeWidth={arcSw}\n              fill=\"none\"\n              strokeLinecap=\"round\"\n              strokeDasharray={\n                isSpinning\n                  ? `${CIRCUMFERENCE * 0.75} ${CIRCUMFERENCE * 0.25}`\n                  : `${CIRCUMFERENCE} 0`\n              }\n              style={{\n                transformOrigin: 'center',\n                transform: isSpinning ? 'rotate(-90deg)' : undefined,\n                opacity: isFinal && !isFilled ? 0 : 1,\n              }}\n            />\n          ) : (\n            <motion.circle\n              cx=\"12\"\n              cy=\"12\"\n              r={RADIUS}\n              stroke={color}\n              strokeWidth={arcSw}\n              fill=\"none\"\n              strokeLinecap=\"round\"\n              style={{ transformOrigin: 'center' }}\n              animate={\n                isSpinning\n                  ? {\n                      rotate: [0, 360],\n                      strokeDasharray: [\n                        `${CIRCUMFERENCE * 0.1} ${CIRCUMFERENCE * 0.9}`,\n                        `${CIRCUMFERENCE * 0.75} ${CIRCUMFERENCE * 0.25}`,\n                        `${CIRCUMFERENCE * 0.1} ${CIRCUMFERENCE * 0.9}`,\n                      ],\n                    }\n                  : {\n                      rotate: 0,\n                      strokeDasharray: `${CIRCUMFERENCE} 0`,\n                      // In bare mode, fade out the arc after it completes\n                      ...(!isFilled && { opacity: 0 }),\n                    }\n              }\n              transition={\n                isSpinning\n                  ? {\n                      rotate: { duration: 1, repeat: Infinity, ease: 'linear' },\n                      strokeDasharray: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },\n                    }\n                  : {\n                      rotate: { duration: 0.3, ease: 'easeOut' },\n                      strokeDasharray: { duration: ARC_COMPLETE, ease: 'easeInOut' },\n                      ...(!isFilled && { opacity: { duration: 0.2, delay: ARC_COMPLETE } }),\n                    }\n              }\n            />\n          )}\n\n          {/* Filled circle — fades in after arc completes, covers track (filled variant only) */}\n          <AnimatePresence>\n            {isFinal && isFilled &&\n              (prefersReduced ? (\n                <circle\n                  key=\"fill-static\"\n                  cx=\"12\"\n                  cy=\"12\"\n                  r={RADIUS + arcSw / 2}\n                  fill={color}\n                  stroke=\"none\"\n                />\n              ) : (\n                <motion.circle\n                  key=\"fill\"\n                  cx=\"12\"\n                  cy=\"12\"\n                  r={RADIUS + arcSw / 2}\n                  fill={color}\n                  stroke=\"none\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ duration: FILL_DURATION, delay: FILL_DELAY, ease: 'easeOut' }}\n                  style={{ transformOrigin: 'center' }}\n                />\n              ))}\n          </AnimatePresence>\n\n          {/* Checkmark — white on filled, currentColor on bare */}\n          <AnimatePresence>\n            {state === 'success' &&\n              (prefersReduced ? (\n                <path\n                  key=\"check-static\"\n                  d={checkPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  fill=\"none\"\n                />\n              ) : (\n                <motion.path\n                  key=\"check\"\n                  d={checkPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  fill=\"none\"\n                  initial={{ pathLength: 0, opacity: 0 }}\n                  animate={{ pathLength: 1, opacity: 1 }}\n                  transition={{\n                    pathLength: { duration: ICON_DURATION, ease: 'easeOut', delay: ICON_DELAY },\n                    opacity: { duration: 0.1, delay: ICON_DELAY },\n                  }}\n                  onAnimationComplete={() => onComplete?.()}\n                />\n              ))}\n          </AnimatePresence>\n\n          {/* X mark — white on filled, currentColor on bare */}\n          <AnimatePresence>\n            {state === 'error' &&\n              (prefersReduced ? (\n                <path\n                  key=\"x-static\"\n                  d={xPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  fill=\"none\"\n                />\n              ) : (\n                <motion.path\n                  key=\"x\"\n                  d={xPath}\n                  stroke={iconColor}\n                  strokeWidth={iconSw}\n                  strokeLinecap=\"round\"\n                  fill=\"none\"\n                  initial={{ pathLength: 0, opacity: 0 }}\n                  animate={{ pathLength: 1, opacity: 1 }}\n                  transition={{\n                    pathLength: { duration: ICON_DURATION, ease: 'easeOut', delay: ICON_DELAY },\n                    opacity: { duration: 0.1, delay: ICON_DELAY },\n                  }}\n                  onAnimationComplete={() => onComplete?.()}\n                />\n              ))}\n          </AnimatePresence>\n        </svg>\n        <span className=\"sr-only\">{srText[state]}</span>\n      </span>\n    )\n  },\n)\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\n"],"mappings":"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"}

package/dist/ui/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type Placement } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n  'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n    // Positioning, focus-in/return, outside-click, and Escape all come from the\n    // Popover primitive now — no hand-rolled floating-ui / listeners.\n    const [side, align] = React.useMemo(() => {\n      const [s, a] = placementProp.split('-')\n      return [\n        s as 'top' | 'right' | 'bottom' | 'left',\n        (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n          | 'start'\n          | 'center'\n          | 'end',\n      ]\n    }, [placementProp])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n    // aria-expanded / focus-return for us.\n    const dropdownTrigger = (\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={dropdownLabel}\n          className={cn(\n            'inline-flex items-center justify-center select-none',\n            'transition-colors duration-fast-01 ease-productive-standard',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n            'disabled:pointer-events-none disabled:opacity-action-disabled',\n            halfClasses,\n            heightClass[size],\n            triggerPadding[size],\n          )}\n          style={triggerStyle}\n        >\n          {dropdownIcon ?? <ChevronDown />}\n        </button>\n      </PopoverTrigger>\n    )\n\n    return (\n      <Popover open={openProp} onOpenChange={onOpenChange}>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {dropdownTrigger}\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {dropdownTrigger}\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n        {dropdownContent && (\n          <PopoverContent\n            side={side}\n            align={align}\n            sideOffset={8}\n            className=\"w-auto min-w-[10rem] p-ds-01\"\n          >\n            {dropdownContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":";;;;;;AAoDA,IAAM,IAAmE;CACvE,OAAO;EACL,QAAQ;EAAmB,OAAO;EAAkB,SAAS;EAC7D,SAAS;EAAoB,SAAS;EACvC;CACD,MAAM;EACJ,QAAQ;EAAe,OAAO;EAAc,SAAS;EACrD,SAAS;EAAgB,SAAS;EACnC;CACD,SAAS;EACP,QAAQ;EAAe,OAAO;EAAc,SAAS;EACrD,SAAS;EAAgB,SAAS;EACnC;CACF,EAEK,IAA+C;CACnD,IAAI;CAAgB,IAAI;CAAW,IAAI;CACvC,WAAW;CAAgB,WAAW;CAAW,WAAW;CAC7D,EAEK,IAA6C;CACjD,IAAI;CAAc,IAAI;CAAc,IAAI;CACxC,WAAW;CAAc,WAAW;CAAc,WAAW;CAC9D,EAEK,IAAkD;CACtD,IAAI;CAAkB,IAAI;CAAoB,IAAI;CAClD,WAAW;CAAY,WAAW;CAAY,WAAW;CAC1D,EAEK,IAAkD;CACtD,IAAI;CAAY,IAAI;CAAY,IAAI;CACpC,WAAW;CAAY,WAAW;CAAY,WAAW;CAC1D,EAEK,IAA+C;CACnD,IAAI;CAAmB,IAAI;CAAmB,IAAI;CAClD,WAAW;CAAmB,WAAW;CAAmB,WAAW;CACxE;AAED,SAAS,EAAe,GAA6B,GAAuB;CAC1E,IAAM,IAA0D;EAC9D,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;GACV;EACD,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;GACV;EACD,SAAS;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;GACV;EACF;AACD,QAAO,EAAI,GAAS,MAAU,EAAI,GAAS;;AAG7C,SAAS,EAAsB,GAAuB;CACpD,IAAM,IAA8B;EAClC,QAAQ;EAAmB,OAAO;EAAkB,SAAS;EAC7D,SAAS;EAAoB,SAAS;EACvC;AACD,QAAO,EAAI,MAAU,EAAI;;AAK3B,SAAS,EAAY,EAAE,gBAAqC;AAC1D,QACE,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAkB;EAAW,eAAY;YAC5F,kBAAC,QAAD;GAAM,GAAE;GAAqB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAChH,CAAA;;AAMV,IAAM,IAAc,EAAM,WACxB,SACE,EACE,aACA,YACA,oBACA,MAAM,GACN,iBACA,aAAU,SACV,WAAQ,UACR,UAAO,MACP,cAAW,IACX,cAAc,GACd,mBAAgB,gBAChB,iBACA,iBAAc,SACd,WAAW,IAAgB,WAC3B,iBACA,gBAEF,GACA;CAIA,IAAM,CAAC,GAAM,KAAS,EAAM,cAAc;EACxC,IAAM,CAAC,GAAG,KAAK,EAAc,MAAM,IAAI;AACvC,SAAO,CACL,GACC,MAAM,UAAU,UAAU,MAAM,QAAQ,QAAQ,SAIlD;IACA,CAAC,EAAc,CAAC,EAEb,IAAc,EAAe,GAAS,EAAM,EAC5C,IAAU,EAAa,GAAS,MAAU,EAAa,GAAS,QAEhE,IAAe,KAAgB,OAEjC,KAAA,IADA,EAAE,OAAO,OAAO,KAAiB,WAAW,GAAG,EAAa,MAAM,GAAc,EAK9E,IACJ,kBAAC,GAAD;EAAgB,SAAA;YACd,kBAAC,UAAD;GACE,MAAK;GACK;GACV,cAAY;GACZ,WAAW,EACT,uDACA,+DACA,0GACA,iEACA,GACA,EAAY,IACZ,EAAe,GAChB;GACD,OAAO;aAEN,KAAgB,kBAAC,GAAD,EAAe,CAAA;GACzB,CAAA;EACM,CAAA;AAGnB,QACE,kBAAC,GAAD;EAAS,MAAM;EAAwB;YAAvC,CAEE,kBAAC,OAAD;GACO;GACL,MAAK;GACL,cAAY,KAAa,KAAA;GACzB,WAAW,EAAG,wBAAwB,EAAU;aAEhD,kBAAC,OAAD;IACE,WAAW,EACT,6CACA,EAAY,IACZ,MAAY,WAAW,iBACvB,MAAY,aAAa,UAAU,EAAsB,EAAM,GAChE;cANH;KAQG,MAAgB,UACf,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,OAAD,EAAK,WAAW,EAAG,qBAAqB,EAAQ,EAAI,CAAA,CACnD,EAAA,CAAA;KAIL,kBAAC,UAAD;MACE,MAAK;MACI;MACC;MACV,cAAY;MACZ,WAAW,EACT,uFACA,2EACA,uBACA,0GACA,iEACA,GACA,EAAY,IACZ,EAAU,IACV,EAAe,GAChB;MAEA;MACM,CAAA;KAER,MAAgB,WACf,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD,EAAK,WAAW,EAAG,qBAAqB,EAAQ,EAAI,CAAA,EACnD,EACA,EAAA,CAAA;KAED;;GACF,CAAA,EAGL,KACC,kBAAC,GAAD;GACQ;GACC;GACP,YAAY;GACZ,WAAU;aAET;GACc,CAAA,CAEX;;EAGf;AAED,EAAY,cAAc"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type Placement } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n  'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n    // Positioning, focus-in/return, outside-click, and Escape all come from the\n    // Popover primitive now — no hand-rolled floating-ui / listeners.\n    const [side, align] = React.useMemo(() => {\n      const [s, a] = placementProp.split('-')\n      return [\n        s as 'top' | 'right' | 'bottom' | 'left',\n        (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n          | 'start'\n          | 'center'\n          | 'end',\n      ]\n    }, [placementProp])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n    // aria-expanded / focus-return for us.\n    const dropdownTrigger = (\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={dropdownLabel}\n          className={cn(\n            'inline-flex items-center justify-center select-none',\n            'transition-colors duration-fast-01 ease-productive-standard',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n            'disabled:pointer-events-none disabled:opacity-action-disabled',\n            halfClasses,\n            heightClass[size],\n            triggerPadding[size],\n          )}\n          style={triggerStyle}\n        >\n          {dropdownIcon ?? <ChevronDown />}\n        </button>\n      </PopoverTrigger>\n    )\n\n    return (\n      <Popover open={openProp} onOpenChange={onOpenChange}>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {dropdownTrigger}\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {dropdownTrigger}\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n        {dropdownContent && (\n          <PopoverContent\n            side={side}\n            align={align}\n            sideOffset={8}\n            className=\"w-auto min-w-[10rem] p-ds-01\"\n          >\n            {dropdownContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}

package/dist/ui/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../src/ui/stack.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype SpacingToken =\n  | 'ds-01'\n  | 'ds-02'\n  | 'ds-02b'\n  | 'ds-03'\n  | 'ds-04'\n  | 'ds-05'\n  | 'ds-05b'\n  | 'ds-06'\n  | 'ds-07'\n  | 'ds-08'\n  | 'ds-09'\n  | 'ds-10'\n  | 'ds-11'\n  | 'ds-12'\n  | 'ds-13'\n\ntype StackProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  direction?: 'vertical' | 'horizontal' | 'row' | 'column'\n  gap?: SpacingToken | number\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nconst gapMap: Record<string, string> = {\n  '0': 'gap-0',\n  '1': 'gap-ds-01',\n  '2': 'gap-ds-02',\n  '3': 'gap-ds-03',\n  '4': 'gap-ds-04',\n  '5': 'gap-ds-05',\n  '6': 'gap-ds-06',\n  '7': 'gap-ds-07',\n  '8': 'gap-ds-08',\n  '9': 'gap-ds-09',\n  '10': 'gap-ds-10',\n  '11': 'gap-ds-11',\n  '12': 'gap-ds-12',\n  '13': 'gap-ds-13',\n  'ds-01': 'gap-ds-01',\n  'ds-02': 'gap-ds-02',\n  'ds-02b': 'gap-ds-02b',\n  'ds-03': 'gap-ds-03',\n  'ds-04': 'gap-ds-04',\n  'ds-05': 'gap-ds-05',\n  'ds-05b': 'gap-ds-05b',\n  'ds-06': 'gap-ds-06',\n  'ds-07': 'gap-ds-07',\n  'ds-08': 'gap-ds-08',\n  'ds-09': 'gap-ds-09',\n  'ds-10': 'gap-ds-10',\n  'ds-11': 'gap-ds-11',\n  'ds-12': 'gap-ds-12',\n  'ds-13': 'gap-ds-13',\n} as const\n\n// Polymorphic component type — preserves T across the call site so element-\n// specific props (e.g. `<Stack as=\"ul\">` accepting `<ul>` props) typecheck.\n// Standard polymorphic-component pattern; see text.tsx for the same shape.\ntype StackComponent = (<T extends React.ElementType = 'div'>(\n  props: StackProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n) => React.ReactElement | null) & { displayName?: string }\n\nconst StackImpl = React.forwardRef<HTMLElement, StackProps>(\n  ({ as, direction = 'vertical', gap, align, justify, wrap, className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn(\n          'flex',\n          (direction === 'vertical' || direction === 'column') ? 'flex-col' : 'flex-row',\n          gap != null && gapMap[String(gap)],\n          align && alignMap[align],\n          justify && justifyMap[justify],\n          wrap && 'flex-wrap',\n          className,\n        ),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nStackImpl.displayName = 'Stack'\n\nconst Stack = StackImpl as unknown as StackComponent\n\nexport { type SpacingToken, Stack, type StackProps }\n"],"mappings":";;;AAiCA,IAAM,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;CACX,EAEK,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;CACT,EAEK,IAAiC;CACrC,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,IAAM;CACN,IAAM;CACN,IAAM;CACN,IAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACV,EASK,IAAY,EAAM,YACrB,EAAE,OAAI,eAAY,YAAY,QAAK,UAAO,YAAS,SAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjG,IAAM,IAAY,KAAM;AACxB,QAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EACT,QACC,MAAc,cAAc,MAAc,WAAY,aAAa,YACpE,KAAO,QAAQ,EAAO,OAAO,EAAI,GACjC,KAAS,EAAS,IAClB,KAAW,EAAW,IACtB,KAAQ,aACR,EACD;EACD,GAAG;EACJ,EACD,EACD;EAEJ;AACD,EAAU,cAAc;AAExB,IAAM,IAAQ"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/ui/stack.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype SpacingToken =\n  | 'ds-01'\n  | 'ds-02'\n  | 'ds-02b'\n  | 'ds-03'\n  | 'ds-04'\n  | 'ds-05'\n  | 'ds-05b'\n  | 'ds-06'\n  | 'ds-07'\n  | 'ds-08'\n  | 'ds-09'\n  | 'ds-10'\n  | 'ds-11'\n  | 'ds-12'\n  | 'ds-13'\n\ntype StackProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  direction?: 'vertical' | 'horizontal' | 'row' | 'column'\n  gap?: SpacingToken | number\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nconst gapMap: Record<string, string> = {\n  '0': 'gap-0',\n  '1': 'gap-ds-01',\n  '2': 'gap-ds-02',\n  '3': 'gap-ds-03',\n  '4': 'gap-ds-04',\n  '5': 'gap-ds-05',\n  '6': 'gap-ds-06',\n  '7': 'gap-ds-07',\n  '8': 'gap-ds-08',\n  '9': 'gap-ds-09',\n  '10': 'gap-ds-10',\n  '11': 'gap-ds-11',\n  '12': 'gap-ds-12',\n  '13': 'gap-ds-13',\n  'ds-01': 'gap-ds-01',\n  'ds-02': 'gap-ds-02',\n  'ds-02b': 'gap-ds-02b',\n  'ds-03': 'gap-ds-03',\n  'ds-04': 'gap-ds-04',\n  'ds-05': 'gap-ds-05',\n  'ds-05b': 'gap-ds-05b',\n  'ds-06': 'gap-ds-06',\n  'ds-07': 'gap-ds-07',\n  'ds-08': 'gap-ds-08',\n  'ds-09': 'gap-ds-09',\n  'ds-10': 'gap-ds-10',\n  'ds-11': 'gap-ds-11',\n  'ds-12': 'gap-ds-12',\n  'ds-13': 'gap-ds-13',\n} as const\n\n// Polymorphic component type — preserves T across the call site so element-\n// specific props (e.g. `<Stack as=\"ul\">` accepting `<ul>` props) typecheck.\n// Standard polymorphic-component pattern; see text.tsx for the same shape.\ntype StackComponent = (<T extends React.ElementType = 'div'>(\n  props: StackProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n) => React.ReactElement | null) & { displayName?: string }\n\nconst StackImpl = React.forwardRef<HTMLElement, StackProps>(\n  ({ as, direction = 'vertical', gap, align, justify, wrap, className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn(\n          'flex',\n          (direction === 'vertical' || direction === 'column') ? 'flex-col' : 'flex-row',\n          gap != null && gapMap[String(gap)],\n          align && alignMap[align],\n          justify && justifyMap[justify],\n          wrap && 'flex-wrap',\n          className,\n        ),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nStackImpl.displayName = 'Stack'\n\nconst Stack = StackImpl as unknown as StackComponent\n\nexport { type SpacingToken, Stack, type StackProps }\n"],"mappings":";;;AAiCA,IAAM,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;AACZ,GAEM,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV,GAEM,IAAiC;CACrC,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,IAAM;CACN,IAAM;CACN,IAAM;CACN,IAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;AACX,GASM,IAAY,EAAM,YACrB,EAAE,OAAI,eAAY,YAAY,QAAK,UAAO,YAAS,SAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjG,IAAM,IAAY,KAAM;CACxB,OAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EACT,QACC,MAAc,cAAc,MAAc,WAAY,aAAa,YACpE,KAAO,QAAQ,EAAO,OAAO,CAAG,IAChC,KAAS,EAAS,IAClB,KAAW,EAAW,IACtB,KAAQ,aACR,CACF;EACA,GAAG;CACL,GACA,CACF;AACF,CACF;AACA,EAAU,cAAc;AAExB,IAAM,IAAQ"}