@devalok/shilp-sutra 0.36.0 → 0.36.1

package/dist/ui/sidebar.js

@@ -258,7 +258,7 @@ var K = y(({ className: e, ...t }, n) => /* @__PURE__ */ T("li", {
 	...t
 }));
 K.displayName = "SidebarMenuItem";
-var ce = i("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-ds-md 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", {
+var ce = i("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-ds-md 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", {
 	variants: {
 		variant: {
 			default: "hover:bg-surface-raised-hover hover:text-surface-fg",
@@ -267,7 +267,7 @@ var ce = i("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 da
 		size: {
 			md: "h-ds-sm text-ds-md",
 			sm: "h-ds-xs-plus text-ds-sm",
-			lg: "h-ds-lg text-ds-md group-data-[collapsible=icon]:!p-0"
+			lg: "h-ds-lg text-ds-md group-data-[collapsible=icon]:p-0!"
 		}
 	},
 	defaultVariants: {

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 { VariantProps, cva } from 'class-variance-authority'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { motion, useReducedMotion } from 'framer-motion'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\nimport { Button } from './button'\nimport { Input } from './input'\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'\nimport {\n  ComponentProps,\n  forwardRef,\n  useMemo,\n  useCallback,\n  useEffect,\n  useContext,\n  useRef,\n  useState,\n  createContext,\n  CSSProperties,\n  ElementRef,\n} from 'react'\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-raised 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-raised 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)_+_theme(spacing.4))]'\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)_+_theme(spacing.4)_+2px)]'\n              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n            className,\n          )}\n          {...props}\n        >\n          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow\"\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-[2px] 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-theme(spacing.4))] 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-ds-xl md:peer-data-[variant=inset]:shadow',\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-ds-md 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-ds-md 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-ds-md 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-ds-md 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-ds-md 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-ds-md 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-ds-md px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-ds-md\"\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-ds-md 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 { VariantProps, cva } from 'class-variance-authority'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { motion, useReducedMotion } from 'framer-motion'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\nimport { Button } from './button'\nimport { Input } from './input'\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'\nimport {\n  ComponentProps,\n  forwardRef,\n  useMemo,\n  useCallback,\n  useEffect,\n  useContext,\n  useRef,\n  useState,\n  createContext,\n  CSSProperties,\n  ElementRef,\n} from 'react'\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-raised 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-raised 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)_+_theme(spacing.4))]'\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)_+_theme(spacing.4)_+2px)]'\n              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n            className,\n          )}\n          {...props}\n        >\n          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow\"\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-[2px] 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-theme(spacing.4))] 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-ds-xl md:peer-data-[variant=inset]:shadow',\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-ds-md 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-ds-md 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-ds-md 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-ds-md 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-ds-md 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-ds-md 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-ds-md px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-ds-md\"\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-ds-md 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/stepper.js

@@ -40,7 +40,7 @@ var c = i.createContext({
 	});
 }), u = i.forwardRef(({ label: e, description: t, icon: n, className: l, ...u }, d) => {
 	let { _index: f = 0, ...p } = u, { activeStep: m, orientation: h, stepperId: g, onStepClick: _ } = i.useContext(c), v = f < m ? "completed" : f === m ? "active" : "pending", y = v === "completed" && !!_, b = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-		className: r("relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold", "transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard", v === "completed" && "bg-accent-9 text-accent-fg", v === "active" && "bg-accent-9 text-accent-fg", v === "pending" && "bg-surface-raised text-surface-fg-subtle border border-surface-border-strong"),
+		className: r("relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold", "transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard", v === "completed" && "bg-accent-9 text-accent-fg", v === "active" && "bg-accent-9 text-accent-fg", v === "pending" && "bg-surface-raised text-surface-fg-subtle border border-surface-border-strong"),
 		children: n || (v === "completed" ? /* @__PURE__ */ o("svg", {
 			className: "w-ico-sm h-ico-sm",
 			viewBox: "0 0 24 24",
@@ -73,7 +73,7 @@ var c = i.createContext({
 			tabIndex: 0,
 			"aria-label": `Go to step ${f + 1}: ${e}`,
 			onClick: () => _(f),
-			className: r("flex items-center gap-ds-03 cursor-pointer select-none", "rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01", "bg-transparent border-0", "hover:bg-surface-raised-hover active:bg-surface-raised-active", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2", "transition-colors duration-fast-01 ease-productive-standard"),
+			className: r("flex items-center gap-ds-03 cursor-pointer select-none", "rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01", "bg-transparent border-0", "hover:bg-surface-raised-hover active:bg-surface-raised-active", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2", "transition-colors duration-fast-01 ease-productive-standard"),
 			children: b
 		})
 	}) : /* @__PURE__ */ o("div", {

package/dist/ui/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs } from './lib/motion'\n\ntype StepState = 'completed' | 'active' | 'pending'\n\ntype StepperContextValue = {\n  activeStep: number\n  orientation: 'horizontal' | 'vertical'\n  stepperId: string\n  onStepClick?: (stepIndex: number) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  orientation: 'horizontal',\n  stepperId: '',\n})\n\n/**\n * Props for Stepper — a multi-step progress indicator that renders a connected series of `<Step>`\n * children with connector lines, showing completed/active/pending states automatically.\n *\n * **`activeStep`:** 0-indexed. Step at `activeStep` is \"active\", steps before it are \"completed\",\n * steps after it are \"pending\". Update this value to advance the stepper.\n *\n * **Orientation:** `'horizontal'` (default, left-to-right) | `'vertical'` (top-to-bottom, for sidebars).\n *\n * **Children:** Must be `<Step>` components. The Stepper injects `_index` into each child automatically.\n *\n * @example\n * // Horizontal 3-step form wizard:\n * <Stepper activeStep={currentStep}>\n *   <Step label=\"Account\" description=\"Create your credentials\" />\n *   <Step label=\"Profile\" description=\"Add your details\" />\n *   <Step label=\"Review\" description=\"Confirm and submit\" />\n * </Stepper>\n *\n * @example\n * // Vertical onboarding checklist in a sidebar:\n * <Stepper activeStep={completedSteps} orientation=\"vertical\">\n *   <Step label=\"Connect workspace\" />\n *   <Step label=\"Invite teammates\" />\n *   <Step label=\"Set up billing\" />\n * </Stepper>\n *\n * @example\n * // Clickable completed steps — user can navigate back:\n * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>\n *   <Step label=\"Account\" />\n *   <Step label=\"Profile\" />\n *   <Step label=\"Review\" />\n * </Stepper>\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeStep: number\n  orientation?: 'horizontal' | 'vertical'\n  /** Called when a completed step is clicked. Receives the 0-based step index. */\n  onStepClick?: (stepIndex: number) => void\n  children: React.ReactNode\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, orientation = 'horizontal', onStepClick, className, children, ...props }, ref) => {\n    const steps = React.Children.toArray(children)\n    const stepperId = React.useId()\n    const contextValue = React.useMemo(\n      () => ({ activeStep, orientation, stepperId, onStepClick }),\n      [activeStep, orientation, stepperId, onStepClick],\n    )\n    return (\n      <StepperContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-ds-02',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row items-center',\n            className,\n          )}\n          role=\"list\"\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {React.isValidElement<StepInternalProps>(child)\n                ? React.cloneElement(child, { _index: index })\n                : child}\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\n                    'relative flex-1 overflow-hidden',\n                    orientation === 'vertical'\n                      ? 'ml-ds-04 w-ds-01 min-h-ds-05'\n                      : 'h-ds-01 min-w-ds-05',\n                    'bg-surface-border',\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {/* Filled portion — smooth CSS transition */}\n                  <div\n                    className={cn(\n                      'absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard',\n                      orientation === 'vertical' ? 'origin-top' : 'origin-left',\n                    )}\n                    style={{\n                      transform: `${orientation === 'vertical' ? 'scaleY' : 'scaleX'}(${index < activeStep ? 1 : 0})`,\n                    }}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  },\n)\n\n/**\n * Props for Step — a single step within a `<Stepper>`. The visual state (completed/active/pending)\n * is derived from the parent Stepper's `activeStep` and this step's position — you don't set it manually.\n *\n * @example\n * // Basic step with label and description:\n * <Step label=\"Payment\" description=\"Enter your card details\" />\n *\n * @example\n * // Step with a custom icon (overrides the default number/checkmark):\n * <Step label=\"Verified\" icon={<IconShieldCheck className=\"h-ico-sm w-ico-sm\" />} />\n */\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  description?: string\n  icon?: React.ReactNode\n}\n\ntype StepInternalProps = StepProps & { _index?: number }\n\nconst Step = React.forwardRef<HTMLDivElement, StepProps>(\n  ({ label, description, icon, className, ...props }, ref) => {\n    const { _index = 0, ...restProps } = props as StepInternalProps\n    const { activeStep, orientation, stepperId, onStepClick } = React.useContext(StepperContext)\n    const state: StepState = _index < activeStep ? 'completed' : _index === activeStep ? 'active' : 'pending'\n    const isClickable = state === 'completed' && !!onStepClick\n\n    const stepContent = (\n      <>\n        <div\n          className={cn(\n            'relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold',\n            'transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard',\n            state === 'completed' && 'bg-accent-9 text-accent-fg',\n            state === 'active' && 'bg-accent-9 text-accent-fg',\n            state === 'pending' && 'bg-surface-raised text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon || (state === 'completed' ? (\n            <svg\n              className=\"w-ico-sm h-ico-sm\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          ) : (\n            _index + 1\n          ))}\n        </div>\n        <div className=\"flex flex-col\">\n          <span\n            className={cn(\n              'text-ds-md font-medium leading-ds-snug',\n              state === 'pending'\n                ? 'text-surface-fg-subtle'\n                : 'text-surface-fg',\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-ds-sm text-surface-fg-muted leading-ds-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      </>\n    )\n\n    if (isClickable) {\n      return (\n        <div\n          ref={ref}\n          data-step=\"\"\n          data-state={state}\n          role=\"listitem\"\n          className={cn(\n            orientation === 'vertical' && 'py-ds-02',\n            className,\n          )}\n          {...restProps}\n        >\n          <button\n            type=\"button\"\n            tabIndex={0}\n            aria-label={`Go to step ${_index + 1}: ${label}`}\n            onClick={() => onStepClick(_index)}\n            className={cn(\n              'flex items-center gap-ds-03 cursor-pointer select-none',\n              'rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-raised-hover active:bg-surface-raised-active',\n              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2',\n              'transition-colors duration-fast-01 ease-productive-standard',\n            )}\n          >\n            {stepContent}\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-step=\"\"\n        data-state={state}\n        role=\"listitem\"\n        aria-current={state === 'active' ? 'step' : undefined}\n        aria-label={`Step ${_index + 1}: ${label}, ${state === 'completed' ? 'completed' : state === 'active' ? 'current' : 'upcoming'}`}\n        className={cn(\n          'flex items-center gap-ds-03',\n          orientation === 'vertical' && 'py-ds-02',\n          className,\n        )}\n        {...restProps}\n      >\n        {stepContent}\n      </div>\n    )\n  },\n)\n\n/**\n * Props for StepperContent — wraps the content panel for the active step, animating\n * slide transitions when `activeStep` changes. Detects forward vs backward navigation\n * and slides content accordingly.\n *\n * @example\n * <StepperContent activeStep={currentStep}>\n *   {currentStep === 0 && <AccountForm />}\n *   {currentStep === 1 && <ProfileForm />}\n *   {currentStep === 2 && <ReviewPanel />}\n * </StepperContent>\n */\ninterface StepperContentProps {\n  activeStep: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst SLIDE_OFFSET = 40\n\nconst stepContentVariants = {\n  enter: (direction: number) => ({\n    opacity: 0,\n    x: direction * SLIDE_OFFSET,\n  }),\n  center: {\n    opacity: 1,\n    x: 0,\n  },\n  exit: (direction: number) => ({\n    opacity: 0,\n    x: direction * -SLIDE_OFFSET,\n  }),\n}\n\nfunction StepperContent({ activeStep, children, className }: StepperContentProps) {\n  const prevStepRef = React.useRef(activeStep)\n  const direction = activeStep >= prevStepRef.current ? 1 : -1\n\n  React.useEffect(() => {\n    prevStepRef.current = activeStep\n  }, [activeStep])\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <AnimatePresence mode=\"wait\" custom={direction}>\n        <motion.div\n          key={activeStep}\n          custom={direction}\n          variants={stepContentVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springs.smooth}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Stepper, Step, StepperContent, type StepperProps, type StepProps, type StepperContentProps }\n"],"mappings":";;;;;;;AAgBA,IAAM,IAAiB,EAAM,cAAmC;CAC9D,YAAY;CACZ,aAAa;CACb,WAAW;CACZ,CAAC,EA8CI,IAAU,EAAM,YACnB,EAAE,eAAY,iBAAc,cAAc,gBAAa,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC/F,IAAM,IAAQ,EAAM,SAAS,QAAQ,EAAS,EACxC,IAAY,EAAM,OAAO,EACzB,IAAe,EAAM,eAClB;EAAE;EAAY;EAAa;EAAW;EAAa,GAC1D;EAAC;EAAY;EAAa;EAAW;EAAY,CAClD;AACD,QACE,kBAAC,EAAe,UAAhB;EAAyB,OAAO;YAC9B,kBAAC,OAAD;GACO;GACL,WAAW,EACT,kBACA,MAAgB,aAAa,aAAa,yBAC1C,EACD;GACD,MAAK;GACL,GAAI;aAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,EAAM,eAAkC,EAAM,GAC3C,EAAM,aAAa,GAAO,EAAE,QAAQ,GAAO,CAAC,GAC5C,GACH,IAAQ,EAAM,SAAS,KACtB,kBAAC,OAAD;IACE,WAAW,EACT,mCACA,MAAgB,aACZ,iCACA,uBACJ,oBACD;IACD,eAAY;cAGZ,kBAAC,OAAD;KACE,WAAW,EACT,mGACA,MAAgB,aAAa,eAAe,cAC7C;KACD,OAAO,EACL,WAAW,GAAG,MAAgB,aAAa,WAAW,SAAS,GAAG,MAAQ,GAAmB,IAC9F;KACD,CAAA;IACE,CAAA,CAEO,EAAA,EA3BI,EA2BJ,CACjB;GACE,CAAA;EACkB,CAAA;EAG/B,EAsBK,IAAO,EAAM,YAChB,EAAE,UAAO,gBAAa,SAAM,cAAW,GAAG,KAAS,MAAQ;CAC1D,IAAM,EAAE,YAAS,GAAG,GAAG,MAAc,GAC/B,EAAE,eAAY,gBAAa,cAAW,mBAAgB,EAAM,WAAW,EAAe,EACtF,IAAmB,IAAS,IAAa,cAAc,MAAW,IAAa,WAAW,WAC1F,IAAc,MAAU,eAAe,CAAC,CAAC,GAEzC,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EACE,WAAW,EACT,oHACA,kGACA,MAAU,eAAe,8BACzB,MAAU,YAAY,8BACtB,MAAU,aAAa,+EACxB;YAEA,MAAS,MAAU,cAClB,kBAAC,OAAD;GACE,WAAU;GACV,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAa;GACb,eAAc;GACd,gBAAe;aAEf,kBAAC,YAAD,EAAU,QAAO,kBAAmB,CAAA;GAChC,CAAA,GAEN,IAAS;EAEP,CAAA,EACN,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GACE,WAAW,EACT,0CACA,MAAU,YACN,2BACA,kBACL;aAEA;GACI,CAAA,EACN,KACC,kBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA,CAEL;IACL,EAAA,CAAA;AAoCL,QAjCI,IAEA,kBAAC,OAAD;EACO;EACL,aAAU;EACV,cAAY;EACZ,MAAK;EACL,WAAW,EACT,MAAgB,cAAc,YAC9B,EACD;EACD,GAAI;YAEJ,kBAAC,UAAD;GACE,MAAK;GACL,UAAU;GACV,cAAY,cAAc,IAAS,EAAE,IAAI;GACzC,eAAe,EAAY,EAAO;GAClC,WAAW,EACT,0DACA,uDACA,2BACA,iEACA,2GACA,8DACD;aAEA;GACM,CAAA;EACL,CAAA,GAKR,kBAAC,OAAD;EACO;EACL,aAAU;EACV,cAAY;EACZ,MAAK;EACL,gBAAc,MAAU,WAAW,SAAS,KAAA;EAC5C,cAAY,QAAQ,IAAS,EAAE,IAAI,EAAM,IAAI,MAAU,cAAc,cAAc,MAAU,WAAW,YAAY;EACpH,WAAW,EACT,+BACA,MAAgB,cAAc,YAC9B,EACD;EACD,GAAI;YAEH;EACG,CAAA;EAGX,EAoBK,IAAe,IAEf,IAAsB;CAC1B,QAAQ,OAAuB;EAC7B,SAAS;EACT,GAAG,IAAY;EAChB;CACD,QAAQ;EACN,SAAS;EACT,GAAG;EACJ;CACD,OAAO,OAAuB;EAC5B,SAAS;EACT,GAAG,IAAY,CAAC;EACjB;CACF;AAED,SAAS,EAAe,EAAE,eAAY,aAAU,gBAAkC;CAChF,IAAM,IAAc,EAAM,OAAO,EAAW,EACtC,IAAY,KAAc,EAAY,UAAU,IAAI;AAM1D,QAJA,EAAM,gBAAgB;AACpB,IAAY,UAAU;IACrB,CAAC,EAAW,CAAC,EAGd,kBAAC,OAAD;EAAK,WAAW,EAAG,4BAA4B,EAAU;YACvD,kBAAC,GAAD;GAAiB,MAAK;GAAO,QAAQ;aACnC,kBAAC,EAAO,KAAR;IAEE,QAAQ;IACR,UAAU;IACV,SAAQ;IACR,SAAQ;IACR,MAAK;IACL,YAAY,EAAQ;IAEnB;IACU,EATN,EASM;GACG,CAAA;EACd,CAAA;;AAIV,EAAQ,cAAc,WACtB,EAAK,cAAc,QACnB,EAAe,cAAc"}
+{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs } from './lib/motion'\n\ntype StepState = 'completed' | 'active' | 'pending'\n\ntype StepperContextValue = {\n  activeStep: number\n  orientation: 'horizontal' | 'vertical'\n  stepperId: string\n  onStepClick?: (stepIndex: number) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  orientation: 'horizontal',\n  stepperId: '',\n})\n\n/**\n * Props for Stepper — a multi-step progress indicator that renders a connected series of `<Step>`\n * children with connector lines, showing completed/active/pending states automatically.\n *\n * **`activeStep`:** 0-indexed. Step at `activeStep` is \"active\", steps before it are \"completed\",\n * steps after it are \"pending\". Update this value to advance the stepper.\n *\n * **Orientation:** `'horizontal'` (default, left-to-right) | `'vertical'` (top-to-bottom, for sidebars).\n *\n * **Children:** Must be `<Step>` components. The Stepper injects `_index` into each child automatically.\n *\n * @example\n * // Horizontal 3-step form wizard:\n * <Stepper activeStep={currentStep}>\n *   <Step label=\"Account\" description=\"Create your credentials\" />\n *   <Step label=\"Profile\" description=\"Add your details\" />\n *   <Step label=\"Review\" description=\"Confirm and submit\" />\n * </Stepper>\n *\n * @example\n * // Vertical onboarding checklist in a sidebar:\n * <Stepper activeStep={completedSteps} orientation=\"vertical\">\n *   <Step label=\"Connect workspace\" />\n *   <Step label=\"Invite teammates\" />\n *   <Step label=\"Set up billing\" />\n * </Stepper>\n *\n * @example\n * // Clickable completed steps — user can navigate back:\n * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>\n *   <Step label=\"Account\" />\n *   <Step label=\"Profile\" />\n *   <Step label=\"Review\" />\n * </Stepper>\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeStep: number\n  orientation?: 'horizontal' | 'vertical'\n  /** Called when a completed step is clicked. Receives the 0-based step index. */\n  onStepClick?: (stepIndex: number) => void\n  children: React.ReactNode\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, orientation = 'horizontal', onStepClick, className, children, ...props }, ref) => {\n    const steps = React.Children.toArray(children)\n    const stepperId = React.useId()\n    const contextValue = React.useMemo(\n      () => ({ activeStep, orientation, stepperId, onStepClick }),\n      [activeStep, orientation, stepperId, onStepClick],\n    )\n    return (\n      <StepperContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-ds-02',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row items-center',\n            className,\n          )}\n          role=\"list\"\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {React.isValidElement<StepInternalProps>(child)\n                ? React.cloneElement(child, { _index: index })\n                : child}\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\n                    'relative flex-1 overflow-hidden',\n                    orientation === 'vertical'\n                      ? 'ml-ds-04 w-ds-01 min-h-ds-05'\n                      : 'h-ds-01 min-w-ds-05',\n                    'bg-surface-border',\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {/* Filled portion — smooth CSS transition */}\n                  <div\n                    className={cn(\n                      'absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard',\n                      orientation === 'vertical' ? 'origin-top' : 'origin-left',\n                    )}\n                    style={{\n                      transform: `${orientation === 'vertical' ? 'scaleY' : 'scaleX'}(${index < activeStep ? 1 : 0})`,\n                    }}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  },\n)\n\n/**\n * Props for Step — a single step within a `<Stepper>`. The visual state (completed/active/pending)\n * is derived from the parent Stepper's `activeStep` and this step's position — you don't set it manually.\n *\n * @example\n * // Basic step with label and description:\n * <Step label=\"Payment\" description=\"Enter your card details\" />\n *\n * @example\n * // Step with a custom icon (overrides the default number/checkmark):\n * <Step label=\"Verified\" icon={<IconShieldCheck className=\"h-ico-sm w-ico-sm\" />} />\n */\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  description?: string\n  icon?: React.ReactNode\n}\n\ntype StepInternalProps = StepProps & { _index?: number }\n\nconst Step = React.forwardRef<HTMLDivElement, StepProps>(\n  ({ label, description, icon, className, ...props }, ref) => {\n    const { _index = 0, ...restProps } = props as StepInternalProps\n    const { activeStep, orientation, stepperId, onStepClick } = React.useContext(StepperContext)\n    const state: StepState = _index < activeStep ? 'completed' : _index === activeStep ? 'active' : 'pending'\n    const isClickable = state === 'completed' && !!onStepClick\n\n    const stepContent = (\n      <>\n        <div\n          className={cn(\n            'relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold',\n            'transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard',\n            state === 'completed' && 'bg-accent-9 text-accent-fg',\n            state === 'active' && 'bg-accent-9 text-accent-fg',\n            state === 'pending' && 'bg-surface-raised text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon || (state === 'completed' ? (\n            <svg\n              className=\"w-ico-sm h-ico-sm\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          ) : (\n            _index + 1\n          ))}\n        </div>\n        <div className=\"flex flex-col\">\n          <span\n            className={cn(\n              'text-ds-md font-medium leading-ds-snug',\n              state === 'pending'\n                ? 'text-surface-fg-subtle'\n                : 'text-surface-fg',\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-ds-sm text-surface-fg-muted leading-ds-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      </>\n    )\n\n    if (isClickable) {\n      return (\n        <div\n          ref={ref}\n          data-step=\"\"\n          data-state={state}\n          role=\"listitem\"\n          className={cn(\n            orientation === 'vertical' && 'py-ds-02',\n            className,\n          )}\n          {...restProps}\n        >\n          <button\n            type=\"button\"\n            tabIndex={0}\n            aria-label={`Go to step ${_index + 1}: ${label}`}\n            onClick={() => onStepClick(_index)}\n            className={cn(\n              'flex items-center gap-ds-03 cursor-pointer select-none',\n              'rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-raised-hover active:bg-surface-raised-active',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2',\n              'transition-colors duration-fast-01 ease-productive-standard',\n            )}\n          >\n            {stepContent}\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-step=\"\"\n        data-state={state}\n        role=\"listitem\"\n        aria-current={state === 'active' ? 'step' : undefined}\n        aria-label={`Step ${_index + 1}: ${label}, ${state === 'completed' ? 'completed' : state === 'active' ? 'current' : 'upcoming'}`}\n        className={cn(\n          'flex items-center gap-ds-03',\n          orientation === 'vertical' && 'py-ds-02',\n          className,\n        )}\n        {...restProps}\n      >\n        {stepContent}\n      </div>\n    )\n  },\n)\n\n/**\n * Props for StepperContent — wraps the content panel for the active step, animating\n * slide transitions when `activeStep` changes. Detects forward vs backward navigation\n * and slides content accordingly.\n *\n * @example\n * <StepperContent activeStep={currentStep}>\n *   {currentStep === 0 && <AccountForm />}\n *   {currentStep === 1 && <ProfileForm />}\n *   {currentStep === 2 && <ReviewPanel />}\n * </StepperContent>\n */\ninterface StepperContentProps {\n  activeStep: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst SLIDE_OFFSET = 40\n\nconst stepContentVariants = {\n  enter: (direction: number) => ({\n    opacity: 0,\n    x: direction * SLIDE_OFFSET,\n  }),\n  center: {\n    opacity: 1,\n    x: 0,\n  },\n  exit: (direction: number) => ({\n    opacity: 0,\n    x: direction * -SLIDE_OFFSET,\n  }),\n}\n\nfunction StepperContent({ activeStep, children, className }: StepperContentProps) {\n  const prevStepRef = React.useRef(activeStep)\n  const direction = activeStep >= prevStepRef.current ? 1 : -1\n\n  React.useEffect(() => {\n    prevStepRef.current = activeStep\n  }, [activeStep])\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <AnimatePresence mode=\"wait\" custom={direction}>\n        <motion.div\n          key={activeStep}\n          custom={direction}\n          variants={stepContentVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springs.smooth}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Stepper, Step, StepperContent, type StepperProps, type StepProps, type StepperContentProps }\n"],"mappings":"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"}

package/llms-full.txt

@@ -5,7 +5,7 @@
 > All variant values and props verified from source CVA definitions.
 >
 > Package: @devalok/shilp-sutra
-> Version: 0.36.0
+> Version: 0.36.1
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",