@signalflare-ai/ui 1.2.0 → 1.3.0

package/dist/sidebar-D4zrlYpn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-D4zrlYpn.js","names":[],"sources":["../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n  CaretRightIcon,\n  MagnifyingGlassIcon,\n  SidebarSimpleIcon,\n} from \"@phosphor-icons/react\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by SignalFlare convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const SF_SIDEBAR_VARIANTS = {\n  variant: {\n    sidebar: {\n      classes: \"\",\n      description: \"Standard sidebar with border separator\",\n    },\n    floating: {\n      classes: \"\",\n      description: \"Floating sidebar with shadow and rounded corners\",\n    },\n    inset: {\n      classes: \"\",\n      description: \"Inset sidebar within the content area\",\n    },\n  },\n  collapsible: {\n    icon: {\n      classes: \"\",\n      description: \"Collapses to show icons only\",\n    },\n    offcanvas: {\n      classes: \"\",\n      description: \"Slides off screen when collapsed\",\n    },\n    none: {\n      classes: \"\",\n      description: \"Cannot be collapsed\",\n    },\n  },\n  side: {\n    left: {\n      classes: \"\",\n      description: \"Left-aligned sidebar\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Right-aligned sidebar\",\n    },\n  },\n} as const;\n\nexport const SF_SIDEBAR_DEFAULT_VARIANTS = {\n  variant: \"sidebar\",\n  collapsible: \"icon\",\n  side: \"left\",\n} as const;\n\nexport const SF_SIDEBAR_STYLING = {\n  width: {\n    expanded: \"16rem\",\n    icon: \"3rem\",\n  },\n  mobile: {\n    breakpoint: 768,\n  },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst MOBILE_BREAKPOINT = 768;\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => setIsMobile(mql.matches);\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(mql.matches);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport interface SidebarContextValue {\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  variant: \"sidebar\" | \"floating\" | \"inset\";\n  side: \"left\" | \"right\";\n  collapsible: \"icon\" | \"offcanvas\" | \"none\";\n  width: number;\n  resizable: boolean;\n  minWidth: number;\n  maxWidth: number;\n  isResizing: boolean;\n  setIsResizing: (resizing: boolean) => void;\n  setWidth: (width: number) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n  }\n  return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n  /** Initial open state when uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode). */\n  onOpenChange?: (open: boolean) => void;\n  /** Sidebar layout variant. @default \"sidebar\" */\n  variant?: SidebarVariant;\n  /** Which side the sidebar is on. @default \"left\" */\n  side?: SidebarSide;\n  collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n  /** Enable drag-to-resize on the sidebar edge. @default false */\n  resizable?: boolean;\n  /** Initial width in pixels when resizable. @default 256 */\n  defaultWidth?: number;\n  /** Minimum width in pixels when resizing. @default 200 */\n  minWidth?: number;\n  /** Maximum width in pixels when resizing. @default 480 */\n  maxWidth?: number;\n  /** Callback when width changes during resize. */\n  onWidthChange?: (width: number) => void;\n  /** Content — typically `<Sidebar>` + main content. */\n  children: ReactNode;\n  /** Additional CSS classes for the wrapper div. */\n  className?: string;\n  /** Inline styles for the wrapper div. */\n  style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>{...}</Sidebar>\n *   <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  variant = SF_SIDEBAR_DEFAULT_VARIANTS.variant,\n  side = SF_SIDEBAR_DEFAULT_VARIANTS.side,\n  collapsible = SF_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n  resizable = false,\n  defaultWidth = DEFAULT_WIDTH_PX,\n  minWidth = MIN_WIDTH_PX,\n  maxWidth = MAX_WIDTH_PX,\n  onWidthChange,\n  children,\n  className,\n  style,\n}: SidebarProviderProps) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n  const [width, setWidthState] = useState(defaultWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n      setWidthState(clamped);\n      onWidthChange?.(clamped);\n    },\n    [minWidth, maxWidth, onWidthChange]\n  );\n\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((prev: boolean) => boolean)) => {\n      const next = typeof value === \"function\" ? value(open) : value;\n      setOpenProp?.(next);\n      _setOpen(next);\n    },\n    [setOpenProp, open]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) {\n      setOpenMobile((prev) => !prev);\n    } else {\n      setOpen((prev: boolean) => !prev);\n    }\n  }, [isMobile, setOpen]);\n\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n  const contextValue = useMemo<SidebarContextValue>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n    }),\n    [\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n    ]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-sidebar-wrapper=\"\"\n        data-state={state}\n        data-side={side}\n        style={\n          {\n            \"--sidebar-width\": sidebarWidthValue,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full\",\n          \"has-data-[variant=inset]:bg-sf-recessed\",\n          isResizing && \"select-none\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Additional CSS classes for the sidebar element. */\n  className?: string;\n  /** Sidebar content — Header, Content, Footer, etc. */\n  children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n *   <Sidebar>\n *     <Sidebar.Header>...</Sidebar.Header>\n *     <Sidebar.Content>...</Sidebar.Content>\n *     <Sidebar.Footer>...</Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    const {\n      state,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      side,\n      variant,\n      collapsible,\n      isResizing,\n      resizable,\n      width,\n    } = useSidebar();\n\n    if (collapsible === \"none\") {\n      return (\n        <aside\n          ref={ref}\n          data-state=\"expanded\"\n          data-side={side}\n          data-variant={variant}\n          data-sidebar=\"sidebar\"\n          style={{\n            width: \"var(--sidebar-width)\",\n            minWidth: \"var(--sidebar-width)\",\n            maxWidth: \"var(--sidebar-width)\",\n          }}\n          className={cn(\n            \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-sf-base text-sf-default\",\n            variant === \"sidebar\" &&\n              (side === \"left\"\n                ? \"border-r border-sf-line\"\n                : \"border-l border-sf-line\"),\n            variant === \"floating\" &&\n              \"m-2 rounded-lg border border-sf-line shadow-lg\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <DialogBase.Root open={openMobile} onOpenChange={setOpenMobile}>\n          <DialogBase.Portal>\n            <DialogBase.Backdrop className=\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\" />\n            <DialogBase.Popup\n              className={cn(\n                \"fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-sf-base p-0\",\n                \"duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n                side === \"left\" &&\n                  \"left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full\",\n                side === \"right\" &&\n                  \"right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full\"\n              )}\n              style={\n                {\n                  \"--sidebar-width\": SIDEBAR_WIDTH,\n                  transitionProperty: \"transform, opacity\",\n                  transitionTimingFunction:\n                    \"var(--default-transition-timing-function)\",\n                } as CSSProperties\n              }\n            >\n              <div\n                data-sidebar=\"sidebar\"\n                data-mobile=\"true\"\n                className={cn(\n                  \"flex h-full w-full flex-col bg-sf-base text-sf-default\",\n                  className\n                )}\n              >\n                {children}\n              </div>\n            </DialogBase.Popup>\n          </DialogBase.Portal>\n        </DialogBase.Root>\n      );\n    }\n\n    // Resolve the target width from CSS variables or literal values\n    const collapsedWidth =\n      collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n    const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n    const targetWidth = state === \"expanded\" ? expandedWidth : collapsedWidth;\n\n    return (\n      <aside\n        ref={ref}\n        data-state={state}\n        data-side={side}\n        data-variant={variant}\n        data-collapsible={collapsible}\n        data-sidebar=\"sidebar\"\n        style={{ width: targetWidth }}\n        className={cn(\n          \"group/sidebar relative flex h-full shrink-0 grow-0 flex-col\",\n          // overflow-hidden makes flex min-width resolve to 0 (per spec),\n          // preventing children from pushing the sidebar wider than its width\n          \"min-w-0 overflow-hidden whitespace-nowrap\",\n          \"bg-sf-base text-sf-default\",\n          // Transition width — matches production SidebarNav curve exactly\n          \"transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]\",\n          \"motion-reduce:transition-none\",\n          // Disable transition during resize drag\n          isResizing && \"transition-none!\",\n          variant === \"sidebar\" &&\n            (side === \"left\"\n              ? \"border-r border-sf-line\"\n              : \"border-l border-sf-line\"),\n          variant === \"floating\" &&\n            \"m-2 rounded-lg border border-sf-line shadow-lg\",\n          className\n        )}\n        {...props}\n      >\n        {/* TooltipProvider groups all collapsed-state tooltips so hovering\n            between icons shows tooltips instantly (no repeated delay). */}\n        <TooltipProvider>{children}</TooltipProvider>\n      </aside>\n    );\n  }\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n *   <Logo />\n *   <span>Design Engineering</span>\n *   <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"header\"\n    className={cn(\n      \"flex items-center gap-2 border-b border-sf-line px-2 py-3\",\n      \"overflow-hidden\",\n      // Collapsed: just remove border, keep same height\n      \"group-data-[state=collapsed]/sidebar:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n *   <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"content\"\n    className={cn(\n      \"flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2\",\n      // Collapsed: flatten spacing so icons are evenly spaced\n      \"group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0\",\n      \"group-data-[state=collapsed]/sidebar:overflow-x-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n *   <Sidebar.Trigger />\n *   <Button shape=\"square\" icon={InfoIcon} aria-label=\"Help\" />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"footer\"\n    className={cn(\n      \"flex min-w-0 flex-col gap-2 border-t border-sf-line px-2 py-2\",\n      // Collapsed: remove border, tighten padding\n      \"group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/** Context to signal children they're inside a collapsible group and provide open state. */\ninterface SidebarGroupCollapsibleContextValue {\n  isCollapsible: boolean;\n  isOpen: boolean;\n}\nconst SidebarGroupCollapsibleContext =\n  createContext<SidebarGroupCollapsibleContextValue>({\n    isCollapsible: false,\n    isOpen: true,\n  });\n\nexport interface SidebarGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** When true, the group can be expanded/collapsed via its label. @default false */\n  collapsible?: boolean;\n  /** Initial open state when collapsible and uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state (collapsible mode only). */\n  open?: boolean;\n  /** Callback when open state changes (collapsible mode only). */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Groups related menu items with an optional label.\n * When `collapsible` is set, wraps content with Base UI Collapsible for\n * animated expand/collapse via the group label.\n *\n * @example Non-collapsible group\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n *\n * @example Collapsible group (requires GroupContent for animation)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.GroupContent>\n *     <Sidebar.Menu>...</Sidebar.Menu>\n *   </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n  (\n    {\n      className,\n      collapsible = false,\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Track internal open state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isOpen = openProp ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setInternalOpen(newOpen);\n        onOpenChange?.(newOpen);\n      },\n      [onOpenChange]\n    );\n\n    const contextValue = useMemo(\n      () => ({ isCollapsible: collapsible, isOpen }),\n      [collapsible, isOpen]\n    );\n\n    const content = (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn(\n          \"flex min-w-0 flex-col gap-0.5\",\n          // Collapsed: remove internal gap so icons stack uniformly\n          \"group-data-[state=collapsed]/sidebar:gap-0\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n\n    if (!collapsible) {\n      return (\n        <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n          {content}\n        </SidebarGroupCollapsibleContext.Provider>\n      );\n    }\n\n    return (\n      <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n        <CollapsibleBase.Root\n          defaultOpen={defaultOpen}\n          open={openProp}\n          onOpenChange={handleOpenChange}\n          className=\"min-w-0\"\n        >\n          {content}\n        </CollapsibleBase.Root>\n      </SidebarGroupCollapsibleContext.Provider>\n    );\n  }\n);\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * Hidden when the sidebar is collapsed to icon-only mode.\n *\n * When used inside a collapsible `Sidebar.Group`, renders as a\n * `Collapsible.Trigger` with an auto-rotating chevron.\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { isCollapsible } = useContext(SidebarGroupCollapsibleContext);\n\n  if (isCollapsible) {\n    return (\n      <CollapsibleBase.Trigger\n        ref={ref as React.Ref<HTMLButtonElement>}\n        data-sidebar=\"group-label\"\n        className={cn(\n          \"group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-sf-subtle\",\n          \"group-data-[state=collapsed]/sidebar:hidden\",\n          className\n        )}\n        {...(props as ComponentPropsWithoutRef<\"button\">)}\n      >\n        <span className=\"flex-1 truncate text-left\">{children}</span>\n        <CaretRightIcon\n          className={cn(\n            \"ml-auto size-3 shrink-0 text-sf-subtle transition-transform duration-200\",\n            \"group-data-[panel-open]/group-label:rotate-90\"\n          )}\n        />\n      </CollapsibleBase.Trigger>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"truncate px-3 py-1 text-xs font-medium text-sf-subtle\",\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// Sidebar GroupContent\n// ============================================================================\n\n/**\n * Animation wrapper for collapsible group content. Uses CSS grid-rows\n * for smooth height transitions when the group is expanded/collapsed.\n *\n * **Only needed for collapsible groups.** For non-collapsible groups,\n * place `Menu` directly inside `Group` — no wrapper required.\n *\n * @example Collapsible group (GroupContent required)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.GroupContent>\n *     <Sidebar.Menu>...</Sidebar.Menu>\n *   </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n *\n * @example Non-collapsible group (no GroupContent needed)\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroupContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { isCollapsible, isOpen } = useContext(SidebarGroupCollapsibleContext);\n\n  if (isCollapsible) {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group-content\"\n        className={cn(\n          \"grid\",\n          // Animate height via grid-rows — matches production NavGroup pattern\n          \"transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n          \"motion-reduce:transition-none\",\n          // Default: collapsed\n          \"grid-rows-[0fr]\",\n          // When sidebar is expanded, respect group open/close state\n          isOpen\n            ? \"group-data-[state=expanded]/sidebar:grid-rows-[1fr]\"\n            : \"group-data-[state=expanded]/sidebar:grid-rows-[0fr]\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"overflow-hidden\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nSidebarGroupContent.displayName = \"Sidebar.GroupContent\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuItem>\n *     <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *     <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n *   </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\n      \"m-0 flex min-w-0 list-none flex-col gap-0.5 p-0\",\n      \"group-data-[state=collapsed]/sidebar:gap-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when you need to place siblings (e.g., `MenuAction`) alongside\n * a `MenuButton`.\n *\n * @example Explicit usage (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"children\"\n> {\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  active?: boolean;\n  /**\n   * Button size.\n   * - `\"base\"` — Standard nav item\n   * - `\"sm\"` — Compact nav item\n   * @default \"base\"\n   */\n  size?: SidebarMenuButtonSize;\n  href?: string;\n  tooltip?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).\n *\n * When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron\n * auto-rotates thanks to Base UI's `data-panel-open` attribute combined with\n * `group/menu-button` CSS grouping.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With MenuAction sibling (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      className,\n      icon: IconProp,\n      active = false,\n      size = \"base\",\n      href,\n      tooltip,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { state } = useSidebar();\n    const LinkComponent = useLinkComponent();\n    const isInsideMenuItem = useContext(MenuItemContext);\n\n    // Render icon — supports both component types and React elements\n    const iconNode = (() => {\n      if (!IconProp) return null;\n      if (React.isValidElement(IconProp)) return IconProp;\n      const Comp = IconProp as React.ComponentType<{ className?: string }>;\n      return (\n        <Comp\n          className={cn(\"shrink-0\", size === \"base\" ? \"size-3.5\" : \"size-3\")}\n        />\n      );\n    })();\n\n    const content = (\n      <>\n        {iconNode}\n        <span\n          className={cn(\n            \"flex flex-1 items-center min-w-0 text-left overflow-hidden\",\n            \"group-data-[state=collapsed]/sidebar:hidden\"\n          )}\n        >\n          {children}\n        </span>\n      </>\n    );\n\n    const buttonClasses = cn(\n      // Layout\n      \"group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer\",\n      // Sizing\n      size === \"base\" && \"min-h-[34px] px-3 py-1.5 text-sm font-medium\",\n      size === \"sm\" && \"min-h-[28px] px-2 py-1 text-sm\",\n      // Default state — transition includes padding so collapsed centering animates smoothly\n      \"text-sf-default\",\n      \"transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n      // Icon color\n      \"[&>svg]:text-sf-subtle\",\n      !active && \"hover:bg-sf-tint\",\n      // Active state\n      active && \"bg-sf-tint\",\n      // When a child sub-button is active, don't show active styling on the parent trigger\n      \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-sf-tint\",\n      // Focus\n      \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n      // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;\n      // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.\n      \"group-data-[state=collapsed]/sidebar:px-2\",\n      className\n    );\n\n    let button: React.ReactNode = href ? (\n      <LinkComponent\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={cn(buttonClasses, \"no-underline!\")}\n        href={href}\n        to={href}\n        data-active={active || undefined}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        onClick={\n          props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n        }\n      >\n        {content}\n      </LinkComponent>\n    ) : (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={buttonClasses}\n        data-active={active || undefined}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n\n    // Wrap in Tooltip when collapsed and tooltip text is provided.\n    if (state === \"collapsed\" && tooltip) {\n      button = (\n        <Tooltip content={tooltip} side=\"right\">\n          {button}\n        </Tooltip>\n      );\n    }\n\n    // Auto-wrap in <li> when not already inside a MenuItem\n    if (!isInsideMenuItem) {\n      return (\n        <li data-sidebar=\"menu-item\" className=\"relative\">\n          {button}\n        </li>\n      );\n    }\n\n    return button;\n  }\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuAction\n// ============================================================================\n\n/**\n * Right-aligned action button inside a menu item (e.g., settings gear, plus icon).\n * Positioned absolutely so it overlays the menu button.\n * Hidden when the sidebar is collapsed.\n */\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    data-sidebar=\"menu-action\"\n    className={cn(\n      \"absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1\",\n      \"text-sf-strong hover:bg-sf-overlay\",\n      \"transition-colors duration-150\",\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuAction.displayName = \"Sidebar.MenuAction\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n *   Containers\n *   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n  HTMLSpanElement,\n  ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"inline-flex shrink-0 items-center rounded-full border border-dashed border-sf-line\",\n      \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-sf-strong\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-sf-line p-0 pl-2.5\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuSubItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Marks this sub-item as currently active/selected. @default false */\n  active?: boolean;\n  /** Navigation URL. When set, renders as a link via LinkProvider. */\n  href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n  HTMLButtonElement,\n  SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n  const LinkComponent = useLinkComponent();\n  const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n  const buttonClasses = cn(\n    \"flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none\",\n    \"text-sf-default transition-colors duration-150\",\n    !active && \"hover:bg-sf-tint\",\n    active && \"bg-sf-tint\",\n    \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n    className\n  );\n\n  const content = <span className=\"flex-1 truncate text-left\">{children}</span>;\n\n  const button: React.ReactNode = href ? (\n    <LinkComponent\n      ref={ref as React.Ref<HTMLAnchorElement>}\n      className={cn(buttonClasses, \"no-underline!\")}\n      href={href}\n      to={href}\n      data-active={active || undefined}\n      data-sidebar=\"menu-sub-button\"\n      onClick={\n        props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n      }\n    >\n      {content}\n    </LinkComponent>\n  ) : (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClasses}\n      data-active={active || undefined}\n      data-sidebar=\"menu-sub-button\"\n      {...props}\n    >\n      {content}\n    </button>\n  );\n\n  // Auto-wrap in <li> when not already inside a MenuSubItem\n  if (!isInsideMenuSubItem) {\n    return (\n      <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n        {button}\n      </li>\n    );\n  }\n\n  return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n  HTMLHRElement,\n  ComponentPropsWithoutRef<\"hr\">\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    data-sidebar=\"separator\"\n    className={cn(\"mx-2 min-h-px h-px border-0 bg-sf-line\", className)}\n    {...props}\n  />\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Input\n// ============================================================================\n\nexport interface SidebarInputProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Placeholder text displayed inside the search trigger. @default \"Search...\" */\n  placeholder?: string;\n  /** Keyboard shortcut hint (e.g., \"⌘K\"). */\n  shortcut?: string;\n}\n\n/**\n * Search trigger button styled as an input. Typically opens a command palette.\n *\n * @example\n * ```tsx\n * <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" onClick={openSearch} />\n * ```\n */\nconst SidebarInput = forwardRef<HTMLButtonElement, SidebarInputProps>(\n  (\n    { className, placeholder = \"Search...\", shortcut, children, ...props },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm\",\n        \"bg-sf-base text-sf-subtle ring ring-sf-line\",\n        \"transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n        \"hover:bg-sf-overlay\",\n        // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition\n        \"group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0\",\n        className\n      )}\n      {...props}\n    >\n      <MagnifyingGlassIcon className=\"size-4 shrink-0 text-sf-subtle\" />\n      <span className=\"flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden\">\n        {children ?? placeholder}\n      </span>\n      {shortcut && (\n        <kbd className=\"ml-auto font-sans text-xs text-sf-subtle group-data-[state=collapsed]/sidebar:hidden\">\n          {shortcut}\n        </kbd>\n      )}\n    </button>\n  )\n);\n\nSidebarInput.displayName = \"Sidebar.Input\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to a `SidebarSimpleIcon`, left-aligned.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * <Sidebar.Trigger><PanelLeftIcon className=\"size-5\" /></Sidebar.Trigger>\n * ```\n */\nconst SidebarTrigger = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"trigger\"\n      aria-label=\"Toggle sidebar\"\n      className={cn(\n        \"flex items-center rounded-md p-1.5\",\n        \"text-sf-subtle hover:text-sf-strong hover:bg-sf-overlay\",\n        \"transition-colors duration-150\",\n        className\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      {children ?? <SidebarSimpleIcon className=\"size-5\" />}\n    </button>\n  );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle sidebar\"\n      tabIndex={-1}\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n        \"hover:after:bg-sf-brand/20\",\n        \"group-data-[side=left]/sidebar-wrapper:right-0\",\n        \"group-data-[side=right]/sidebar-wrapper:left-0\",\n        \"sm:flex\",\n        className\n      )}\n      onClick={toggleSidebar}\n      {...props}\n    />\n  );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n *   tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  const { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth } =\n    useSidebar();\n  const startX = useRef(0);\n  const startWidth = useRef(0);\n  const wasCollapsed = useRef(false);\n\n  if (!resizable) return null;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsResizing(true);\n    startX.current = e.clientX;\n    wasCollapsed.current = !open;\n\n    const wrapper = (e.currentTarget as HTMLElement).closest(\n      \"[data-sidebar-wrapper]\"\n    );\n    const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n    startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n    const cleanup = () => {\n      setIsResizing(false);\n      document.removeEventListener(\"pointermove\", handlePointerMove);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n\n    const handlePointerMove = (moveEvent: PointerEvent) => {\n      const delta =\n        side === \"left\"\n          ? moveEvent.clientX - startX.current\n          : startX.current - moveEvent.clientX;\n      const rawWidth = startWidth.current + delta;\n\n      if (wasCollapsed.current) {\n        // Dragging outward from collapsed — expand once past minWidth\n        if (rawWidth >= minWidth) {\n          wasCollapsed.current = false;\n          setOpen(true);\n          setWidth(rawWidth);\n        }\n        return;\n      }\n\n      // Dragging inward while expanded — collapse when below minWidth\n      if (rawWidth < minWidth) {\n        setOpen(false);\n        wasCollapsed.current = true;\n        return;\n      }\n\n      setWidth(rawWidth);\n    };\n\n    const handlePointerUp = () => {\n      cleanup();\n    };\n\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"resize-handle\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block\",\n        \"hover:bg-sf-brand/30 active:bg-sf-brand/50\",\n        side === \"left\" && \"right-0\",\n        side === \"right\" && \"left-0\",\n        className\n      )}\n      onPointerDown={handlePointerDown}\n      {...props}\n    />\n  );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. When the parent\n * `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets\n * `data-panel-open` on the trigger — the chevron rotates automatically via CSS.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>\n *   Compute\n *   <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n  return (\n    <CaretRightIcon\n      className={cn(\n        \"ml-auto size-4 shrink-0 text-sf-subtle transition-transform duration-200\",\n        // Auto-rotate when inside an open Collapsible trigger\n        \"group-data-[panel-open]/menu-button:rotate-90\",\n        // Hidden when collapsed\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className\n      )}\n    />\n  );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// Collapsible re-exports\n// ============================================================================\n\n/**\n * Base UI Collapsible.Root for sidebar sub-menu expand/collapse.\n * @see https://base-ui.com/react/components/collapsible\n */\nconst SidebarCollapsible = CollapsibleBase.Root;\n\n/**\n * Base UI Collapsible.Trigger for sidebar sub-menu toggle.\n * Use `render` prop to compose with `Sidebar.MenuButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>\n *   Compute\n *   <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nconst SidebarCollapsibleTrigger = CollapsibleBase.Trigger;\n\n/**\n * Animated collapsible panel for sidebar sub-menu content.\n * Wraps Base UI `Collapsible.Panel` with a height transition driven by the\n * `--collapsible-panel-height` CSS variable that Base UI measures automatically.\n *\n * Uses `keepMounted` by default so the exit animation plays before removal.\n *\n * Animation flow:\n * - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up\n * - **Closing**: `data-open` removed + `data-ending-style` (h=0) — transition down\n * - **Closed**: `data-closed` (h=0) — stays collapsed while mounted\n */\nconst SidebarCollapsibleContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>\n>(({ className, keepMounted = true, ...props }, ref) => (\n  <CollapsibleBase.Panel\n    ref={ref}\n    keepMounted={keepMounted}\n    className={cn(\n      \"overflow-hidden\",\n      // Default: show at measured height (when data-open, no override matches)\n      \"h-[var(--collapsible-panel-height)]\",\n      // Transition height — matches production NavGroup easing\n      \"transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n      \"motion-reduce:transition-none\",\n      // Closed / animating in / animating out: height 0\n      \"data-[closed]:h-0 data-[starting-style]:h-0 data-[ending-style]:h-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>\n *     <Sidebar.Content>\n *       <Sidebar.Group>\n *         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *         <Sidebar.Menu>\n *           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n *           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n *         </Sidebar.Menu>\n *       </Sidebar.Group>\n *     </Sidebar.Content>\n *     <Sidebar.Footer>\n *       <Sidebar.Trigger />\n *     </Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Provider: SidebarProvider,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Group: SidebarGroup,\n  GroupLabel: SidebarGroupLabel,\n  GroupContent: SidebarGroupContent,\n  Menu: SidebarMenu,\n  MenuItem: SidebarMenuItem,\n  MenuButton: SidebarMenuButton,\n  MenuAction: SidebarMenuAction,\n  MenuBadge: SidebarMenuBadge,\n  MenuSub: SidebarMenuSub,\n  MenuSubItem: SidebarMenuSubItem,\n  MenuSubButton: SidebarMenuSubButton,\n  Separator: SidebarSeparator,\n  Input: SidebarInput,\n  Trigger: SidebarTrigger,\n  Rail: SidebarRail,\n  ResizeHandle: SidebarResizeHandle,\n  MenuChevron: SidebarMenuChevron,\n  Collapsible: SidebarCollapsible,\n  CollapsibleTrigger: SidebarCollapsibleTrigger,\n  CollapsibleContent: SidebarCollapsibleContent,\n});\n\nexport {\n  SidebarProvider,\n  SidebarRoot,\n  SidebarHeader,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuSubButton,\n  SidebarSeparator,\n  SidebarInput,\n  SidebarTrigger,\n  SidebarRail,\n  SidebarResizeHandle,\n  SidebarMenuChevron,\n  SidebarCollapsible,\n  SidebarCollapsibleTrigger,\n  SidebarCollapsibleContent,\n};\n"],"mappings":"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"}

package/dist/stat-card-Ew-ofzEm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stat-card-Ew-ofzEm.js","names":[],"sources":["../src/components/stat-card/stat-card.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Text } from \"../text\";\n\n/** StatCard variant definitions (indexed by variant name) */\nexport const SF_STAT_CARD_VARIANTS = {\n  size: {\n    sm: {\n      root: \"gap-1 p-3\",\n      label: \"text-xs\",\n      value: \"text-xl\",\n      hint: \"text-xs\",\n    },\n    base: {\n      root: \"gap-2 p-4\",\n      label: \"text-sm\",\n      value: \"text-3xl\",\n      hint: \"text-xs\",\n    },\n  },\n} as const;\n\n/** Default variants applied when none are passed explicitly. */\nexport const SF_STAT_CARD_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport interface SFStatCardVariantsProps {\n  /** Size of the card. Defaults to `\"base\"`. */\n  size?: keyof typeof SF_STAT_CARD_VARIANTS.size;\n}\n\n/** Describes a change in the metric over a comparison period. */\nexport interface StatCardDelta {\n  /** Numeric delta (e.g. `0.12` for +12% or `-4` for a drop of 4). */\n  value: number;\n  /**\n   * Override the arrow direction. By default, direction is inferred from the\n   * sign of `value`.\n   */\n  direction?: \"up\" | \"down\" | \"flat\";\n  /** Optional context label shown after the delta (e.g. `\"vs last week\"`). */\n  label?: string;\n  /**\n   * Whether an \"up\" direction means \"good\" (green) or \"bad\" (red). For metrics\n   * like error rate, set this to `\"down\"` so downward movement is coloured\n   * green.\n   * @default \"up\"\n   */\n  positiveDirection?: \"up\" | \"down\";\n}\n\n/** Props for `StatCard` */\nexport interface StatCardProps extends SFStatCardVariantsProps {\n  /** Short descriptive label (e.g. `\"Active users\"`). */\n  label: ReactNode;\n  /** Primary value to emphasise (pre-formatted). */\n  value: ReactNode;\n  /** Optional secondary text displayed under the value. */\n  hint?: ReactNode;\n  /** Optional change indicator (arrow + number + label). */\n  delta?: StatCardDelta;\n  /**\n   * Optional content slot rendered on the right-hand side — typically a\n   * `Sparkline` showing the metric's trend.\n   */\n  trend?: ReactNode;\n  /** When `true`, renders a skeleton placeholder in place of value + delta. */\n  loading?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\nfunction inferDirection(\n  value: number,\n  override?: \"up\" | \"down\" | \"flat\"\n): \"up\" | \"down\" | \"flat\" {\n  if (override) return override;\n  if (value > 0) return \"up\";\n  if (value < 0) return \"down\";\n  return \"flat\";\n}\n\nfunction deltaColor(\n  direction: \"up\" | \"down\" | \"flat\",\n  positiveDirection: \"up\" | \"down\"\n): string {\n  if (direction === \"flat\") return \"text-sf-subtle\";\n  const isPositive = direction === positiveDirection;\n  return isPositive ? \"text-sf-success\" : \"text-sf-danger\";\n}\n\nfunction deltaArrow(direction: \"up\" | \"down\" | \"flat\"): string {\n  if (direction === \"up\") return \"↑\";\n  if (direction === \"down\") return \"↓\";\n  return \"→\";\n}\n\n/**\n * StatCard — compact KPI tile displaying a label, a primary value, and an\n * optional delta + trend sparkline.\n *\n * Uses pretext-driven `Text` for consistent spacing and wrapping:\n * - Labels use `wrap=\"balance\"` for even multiline breaks\n * - Values use `wrap=\"shrink\"` so sparklines tuck tight against numbers\n * - Hints use `wrap=\"natural\"` (numeric content rarely wraps)\n *\n * @example\n * ```tsx\n * <StatCard\n *   label=\"Active users\"\n *   value=\"12,384\"\n *   delta={{ value: 0.12, label: \"vs last week\" }}\n * />\n * ```\n */\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(\n  function StatCard(\n    {\n      label,\n      value,\n      hint,\n      delta,\n      trend,\n      loading,\n      size = SF_STAT_CARD_DEFAULT_VARIANTS.size,\n      className,\n    },\n    ref\n  ) {\n    const sizeClasses = SF_STAT_CARD_VARIANTS.size[size];\n    const direction = delta\n      ? inferDirection(delta.value, delta.direction)\n      : undefined;\n    const deltaClass =\n      delta && direction\n        ? deltaColor(direction, delta.positiveDirection ?? \"up\")\n        : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col rounded-lg bg-sf-elevated text-sf-default\",\n          sizeClasses.root,\n          className\n        )}\n      >\n        <Text\n          variant=\"secondary\"\n          size={size === \"sm\" ? \"xs\" : \"sm\"}\n          wrap=\"balance\"\n          as=\"div\"\n          DANGEROUS_className={sizeClasses.label}\n        >\n          {label}\n        </Text>\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            {loading ? (\n              <div\n                aria-busy=\"true\"\n                className={cn(\n                  \"h-8 w-24 animate-pulse rounded-md bg-sf-fill\",\n                  size === \"sm\" && \"h-6 w-20\"\n                )}\n              />\n            ) : (\n              <Text\n                wrap=\"shrink\"\n                as=\"div\"\n                DANGEROUS_className={cn(\n                  \"font-semibold tabular-nums text-sf-strong\",\n                  sizeClasses.value\n                )}\n              >\n                {value}\n              </Text>\n            )}\n            {delta && !loading ? (\n              <div\n                className={cn(\n                  \"flex items-baseline gap-1 tabular-nums\",\n                  sizeClasses.hint\n                )}\n              >\n                <span className={cn(\"font-medium\", deltaClass)}>\n                  {deltaArrow(direction!)}{\" \"}\n                  {Math.abs(delta.value).toLocaleString(undefined, {\n                    maximumFractionDigits: 2,\n                  })}\n                </span>\n                {delta.label ? (\n                  <Text wrap=\"natural\" as=\"span\" size=\"xs\" variant=\"secondary\">\n                    {delta.label}\n                  </Text>\n                ) : null}\n              </div>\n            ) : null}\n            {hint && !loading ? (\n              <Text\n                wrap=\"natural\"\n                as=\"div\"\n                size={size === \"sm\" ? \"xs\" : \"sm\"}\n                variant=\"secondary\"\n              >\n                {hint}\n              </Text>\n            ) : null}\n          </div>\n          {trend ? <div className=\"shrink-0\">{trend}</div> : null}\n        </div>\n      </div>\n    );\n  }\n);\n\nStatCard.displayName = \"StatCard\";\n"],"mappings":";;;;;;;AAMA,IAAa,wBAAwB,EACnC,MAAM;CACJ,IAAI;EACF,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACF,EACF;;AAGD,IAAa,gCAAgC,EAC3C,MAAM,QACP;AAgDD,SAAS,eACP,OACA,UACwB;AACxB,KAAI,SAAU,QAAO;AACrB,KAAI,QAAQ,EAAG,QAAO;AACtB,KAAI,QAAQ,EAAG,QAAO;AACtB,QAAO;;AAGT,SAAS,WACP,WACA,mBACQ;AACR,KAAI,cAAc,OAAQ,QAAO;AAEjC,QADmB,cAAc,oBACb,oBAAoB;;AAG1C,SAAS,WAAW,WAA2C;AAC7D,KAAI,cAAc,KAAM,QAAO;AAC/B,KAAI,cAAc,OAAQ,QAAO;AACjC,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,IAAa,WAAW,WACtB,SAAS,SACP,EACE,OACA,OACA,MACA,OACA,OACA,SACA,OAAO,8BAA8B,MACrC,aAEF,KACA;CACA,MAAM,cAAc,sBAAsB,KAAK;CAC/C,MAAM,YAAY,QACd,eAAe,MAAM,OAAO,MAAM,UAAU,GAC5C,KAAA;CACJ,MAAM,aACJ,SAAS,YACL,WAAW,WAAW,MAAM,qBAAqB,KAAK,GACtD,KAAA;AAEN,QACE,qBAAC,OAAD;EACO;EACL,WAAW,GACT,2DACA,YAAY,MACZ,UACD;YANH,CAQE,oBAAC,MAAD;GACE,SAAQ;GACR,MAAM,SAAS,OAAO,OAAO;GAC7B,MAAK;GACL,IAAG;GACH,qBAAqB,YAAY;aAEhC;GACI,CAAA,EACP,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACG,UACC,oBAAC,OAAD;MACE,aAAU;MACV,WAAW,GACT,gDACA,SAAS,QAAQ,WAClB;MACD,CAAA,GAEF,oBAAC,MAAD;MACE,MAAK;MACL,IAAG;MACH,qBAAqB,GACnB,6CACA,YAAY,MACb;gBAEA;MACI,CAAA;KAER,SAAS,CAAC,UACT,qBAAC,OAAD;MACE,WAAW,GACT,0CACA,YAAY,KACb;gBAJH,CAME,qBAAC,QAAD;OAAM,WAAW,GAAG,eAAe,WAAW;iBAA9C;QACG,WAAW,UAAW;QAAE;QACxB,KAAK,IAAI,MAAM,MAAM,CAAC,eAAe,KAAA,GAAW,EAC/C,uBAAuB,GACxB,CAAC;QACG;UACN,MAAM,QACL,oBAAC,MAAD;OAAM,MAAK;OAAU,IAAG;OAAO,MAAK;OAAK,SAAQ;iBAC9C,MAAM;OACF,CAAA,GACL,KACA;UACJ;KACH,QAAQ,CAAC,UACR,oBAAC,MAAD;MACE,MAAK;MACL,IAAG;MACH,MAAM,SAAS,OAAO,OAAO;MAC7B,SAAQ;gBAEP;MACI,CAAA,GACL;KACA;OACL,QAAQ,oBAAC,OAAD;IAAK,WAAU;cAAY;IAAY,CAAA,GAAG,KAC/C;KACF;;EAGX;AAED,SAAS,cAAc"}

package/dist/switch-BxAMfHdt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch-BxAMfHdt.js","names":[],"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field } from \"../field/field\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_SWITCH_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"h-5.5 w-8.5\",\n      description: \"Small switch for compact UIs\",\n    },\n    base: {\n      classes: \"h-6.5 w-10.5\",\n      description: \"Default switch size\",\n    },\n    lg: {\n      classes: \"h-7.5 w-12.5\",\n      description: \"Large switch for prominent toggles\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default switch appearance\",\n    },\n    error: {\n      classes: \"ring-sf-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_SWITCH_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_SWITCH_VARIANTS\nexport type SFSwitchSize = keyof typeof SF_SWITCH_VARIANTS.size;\nexport type SFSwitchVariant = keyof typeof SF_SWITCH_VARIANTS.variant;\n\nexport interface SFSwitchVariantsProps {\n  /**\n   * Switch size.\n   * - `\"sm\"` — Small for compact UIs\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent toggles\n   * @default \"base\"\n   */\n  size?: SFSwitchSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard switch appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFSwitchVariant;\n}\n\nexport function switchVariants({\n  size = SF_SWITCH_DEFAULT_VARIANTS.size,\n  variant = SF_SWITCH_DEFAULT_VARIANTS.variant,\n}: SFSwitchVariantsProps = {}) {\n  return cn(\n    SF_SWITCH_VARIANTS.size[size].classes,\n    SF_SWITCH_VARIANTS.variant[variant].classes\n  );\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = SFSwitchSize;\nexport type SwitchVariant = SFSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Error variant (visual only, no error text):\n * ```tsx\n * <Switch label=\"Required setting\" variant=\"error\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n  variant?: SwitchVariant;\n  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /**\n   * Whether the switch is required.\n   * When explicitly false, shows \"(optional)\" text after the label.\n   */\n  required?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  size?: SFSwitchSize;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n *   legend=\"Notification settings\"\n *   error=\"You must enable at least one notification type\"\n * >\n *   <Switch.Item label=\"Email notifications\" value=\"email\" />\n *   <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchGroupProps {\n  /** Legend text for the group */\n  legend: string;\n  /** Child Switch.Item components */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single switches) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Whether all switches in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: SwitchVariant;\n  /** Label text displayed next to switch */\n  label: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: SFSwitchSize;\n  transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      labelTooltip,\n      required,\n      controlFirst = true,\n      onCheckedChange,\n      transitioning,\n      ...props\n    },\n    ref\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n    const switchControl = (\n      <BaseSwitch.Root\n        ref={ref}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={onCheckedChange}\n        nativeButton\n        render={(rootProps, state) => {\n          const {\n            ref: rootRef,\n            className: baseClassName,\n            role: baseRole,\n            \"aria-checked\": _ariaChecked,\n            \"aria-pressed\": _ariaPressed,\n            ...restRootProps\n          } = rootProps as typeof rootProps & {\n            ref?: Ref<HTMLButtonElement>;\n            className?: string;\n            role?: string;\n            \"aria-checked\"?: boolean;\n            \"aria-pressed\"?: boolean;\n          };\n\n          const mergedClassName = cn(\n            \"interactive flex items-center gap-2 rounded-full border border-transparent bg-sf-recessed p-1 transition-colors\",\n            switchVariants({ size, variant }),\n            {\n              \"bg-sf-brand\": state.checked && !disabled && variant !== \"error\",\n              \"bg-sf-danger\": state.checked && !disabled && variant === \"error\",\n              \"hover:bg-sf-brand-hover\":\n                state.checked &&\n                !transitioning &&\n                !disabled &&\n                variant !== \"error\",\n              \"hover:bg-sf-danger/90\":\n                state.checked &&\n                !transitioning &&\n                !disabled &&\n                variant === \"error\",\n              \"hover:bg-sf-interact\":\n                !state.checked && !transitioning && !disabled,\n              \"cursor-not-allowed opacity-50\": disabled,\n            },\n            transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n            className,\n            baseClassName\n          );\n\n          const role =\n            (props.role as string | undefined) ?? baseRole ?? \"switch\";\n          const checkedA11yProps =\n            role === \"switch\"\n              ? { \"aria-checked\": state.checked }\n              : { \"aria-pressed\": state.checked };\n\n          return (\n            <button\n              {...restRootProps}\n              {...props}\n              ref={rootRef}\n              type=\"button\"\n              role={role}\n              {...checkedA11yProps}\n              aria-busy={transitioning || undefined}\n              aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n              className={mergedClassName}\n            >\n              <BaseSwitch.Thumb\n                className={cn(\n                  \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n                  {\n                    \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n                  }\n                )}\n              />\n            </button>\n          );\n        }}\n      />\n    );\n\n    // Wrap in Field (built-in) - no description for single switches\n    // If no label provided, return bare switch (for use in other components)\n    if (!label) {\n      return switchControl;\n    }\n\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        controlFirst={controlFirst}\n      >\n        {switchControl}\n      </Field>\n    );\n  }\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      onCheckedChange,\n      transitioning,\n    },\n    ref\n  ) => {\n    const { controlFirst } = useContext(SwitchGroupContext);\n\n    return (\n      <label\n        className={cn(\n          \"relative inline-flex items-center gap-2\",\n          // Control first (default): switch before label\n          // Label first: label before switch using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className\n        )}\n      >\n        <BaseSwitch.Root\n          ref={ref}\n          checked={checked}\n          disabled={disabled}\n          onCheckedChange={onCheckedChange}\n          nativeButton\n          render={(rootProps, state) => {\n            const {\n              ref: rootRef,\n              className: baseClassName,\n              role: baseRole,\n              \"aria-checked\": _ariaChecked,\n              \"aria-pressed\": _ariaPressed,\n              ...restRootProps\n            } = rootProps as typeof rootProps & {\n              ref?: Ref<HTMLButtonElement>;\n              className?: string;\n              role?: string;\n              \"aria-checked\"?: boolean;\n              \"aria-pressed\"?: boolean;\n            };\n\n            const mergedClassName = cn(\n              \"interactive flex items-center gap-2 rounded-full border border-transparent bg-sf-recessed p-1 transition-colors\",\n              switchVariants({ size, variant }),\n              {\n                \"bg-sf-brand\":\n                  state.checked && !disabled && variant !== \"error\",\n                \"bg-sf-danger\":\n                  state.checked && !disabled && variant === \"error\",\n                \"hover:bg-sf-brand-hover\":\n                  state.checked &&\n                  !transitioning &&\n                  !disabled &&\n                  variant !== \"error\",\n                \"hover:bg-sf-danger/90\":\n                  state.checked &&\n                  !transitioning &&\n                  !disabled &&\n                  variant === \"error\",\n                \"hover:bg-sf-interact\":\n                  !state.checked && !transitioning && !disabled,\n                \"cursor-not-allowed opacity-50\": disabled,\n              },\n              transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n              baseClassName\n            );\n\n            const role = baseRole ?? \"switch\";\n            const checkedA11yProps =\n              role === \"switch\"\n                ? { \"aria-checked\": state.checked }\n                : { \"aria-pressed\": state.checked };\n\n            return (\n              <button\n                {...restRootProps}\n                ref={rootRef}\n                type=\"button\"\n                role={role}\n                {...checkedA11yProps}\n                aria-busy={transitioning || undefined}\n                className={mergedClassName}\n              >\n                <BaseSwitch.Thumb\n                  className={cn(\n                    \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n                    {\n                      \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n                    }\n                  )}\n                />\n              </button>\n            );\n          }}\n        />\n        <span className=\"text-base font-medium text-sf-default\">{label}</span>\n      </label>\n    );\n  }\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n  legend,\n  children,\n  error,\n  description,\n  disabled,\n  controlFirst = true,\n  className,\n}: SwitchGroupProps) {\n  return (\n    <SwitchGroupContext.Provider value={{ controlFirst }}>\n      <Fieldset.Root\n        className={cn(\n          \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n          className\n        )}\n        disabled={disabled}\n      >\n        <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n          {legend}\n        </Fieldset.Legend>\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n        {description && <p className=\"text-sm text-sf-subtle\">{description}</p>}\n      </Fieldset.Root>\n    </SwitchGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n  Item: SwitchItem,\n  Group: SwitchGroup,\n});\n\nSwitch.displayName = \"Switch\";\n"],"mappings":"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"}

package/dist/text-roll-Ch52hcQj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-roll-Ch52hcQj.js","names":[],"sources":["../src/components/text-roll/text-roll.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  motion,\n  type Target,\n  type TargetAndTransition,\n  type Transition,\n  type VariantLabels,\n} from \"motion/react\";\n\nexport type TextRollVariants = {\n  enter: {\n    initial: Target | VariantLabels | boolean;\n    animate: TargetAndTransition | VariantLabels;\n  };\n  exit: {\n    initial: Target | VariantLabels | boolean;\n    animate: TargetAndTransition | VariantLabels;\n  };\n};\n\nexport type TextRollProps = {\n  /** Text to animate. Each character rolls in / out independently. */\n  children: string;\n  /** Duration (seconds) of each letter's enter and exit tween. */\n  duration?: number;\n  /** Per-letter delay for the enter animation. */\n  getEnterDelay?: (index: number) => number;\n  /** Per-letter delay for the exit animation. */\n  getExitDelay?: (index: number) => number;\n  /** Additional CSS classes merged via `cn()`. Use sf semantic tokens only. */\n  className?: string;\n  /** Shared transition for both enter and exit tweens. */\n  transition?: Transition;\n  /** Override the default rotate-X roll with custom enter/exit variants. */\n  variants?: TextRollVariants;\n  /** Fires once the last letter's exit animation finishes. */\n  onAnimationComplete?: () => void;\n};\n\nconst DEFAULT_VARIANTS: TextRollVariants = {\n  enter: {\n    initial: { rotateX: 0 },\n    animate: { rotateX: 90 },\n  },\n  exit: {\n    initial: { rotateX: 90 },\n    animate: { rotateX: 0 },\n  },\n};\n\n/**\n * Letter-by-letter roll animation. Each character flips on the X axis: the\n * current letter rolls up and out, the new letter rolls in from below.\n * Good for title changes (e.g. a streaming activity group swapping its\n * current-step label) where the text content is short and the change should\n * register visually.\n *\n * Wraps the string in an `aria-hidden` visual stack with a screen-reader-only\n * copy of the full text so a11y tools always read the real content.\n *\n * @example\n * ```tsx\n * <TextRoll key={title}>{title}</TextRoll>\n * ```\n */\nexport function TextRoll({\n  children,\n  duration = 0.5,\n  getEnterDelay = (i) => i * 0.1,\n  getExitDelay = (i) => i * 0.1 + 0.2,\n  className,\n  transition = { ease: \"easeIn\" },\n  variants,\n  onAnimationComplete,\n}: TextRollProps) {\n  const letters = children.split(\"\");\n\n  return (\n    <span className={className}>\n      {letters.map((letter, i) => {\n        const display = letter === \" \" ? \"\\u00A0\" : letter;\n        return (\n          <span\n            aria-hidden=\"true\"\n            className=\"relative inline-block [perspective:10000px] [transform-style:preserve-3d] [width:auto]\"\n            // Using index is intentional — letters are positional.\n            // biome-ignore lint/suspicious/noArrayIndexKey: positional char animation\n            key={i}\n          >\n            <motion.span\n              animate={\n                variants?.enter?.animate ?? DEFAULT_VARIANTS.enter.animate\n              }\n              className=\"absolute inline-block [backface-visibility:hidden] [transform-origin:50%_25%]\"\n              initial={\n                variants?.enter?.initial ?? DEFAULT_VARIANTS.enter.initial\n              }\n              transition={{\n                ...transition,\n                duration,\n                delay: getEnterDelay(i),\n              }}\n            >\n              {display}\n            </motion.span>\n            <motion.span\n              animate={variants?.exit?.animate ?? DEFAULT_VARIANTS.exit.animate}\n              className=\"absolute inline-block [backface-visibility:hidden] [transform-origin:50%_100%]\"\n              initial={variants?.exit?.initial ?? DEFAULT_VARIANTS.exit.initial}\n              onAnimationComplete={\n                letters.length === i + 1 ? onAnimationComplete : undefined\n              }\n              transition={{\n                ...transition,\n                duration,\n                delay: getExitDelay(i),\n              }}\n            >\n              {display}\n            </motion.span>\n            <span className=\"invisible\">{display}</span>\n          </span>\n        );\n      })}\n      <span className=\"sr-only\">{children}</span>\n    </span>\n  );\n}\n\nTextRoll.displayName = \"TextRoll\";\n"],"mappings":";;;;AAwCA,IAAM,mBAAqC;CACzC,OAAO;EACL,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,IAAI;EACzB;CACD,MAAM;EACJ,SAAS,EAAE,SAAS,IAAI;EACxB,SAAS,EAAE,SAAS,GAAG;EACxB;CACF;;;;;;;;;;;;;;;;AAiBD,SAAgB,SAAS,EACvB,UACA,WAAW,IACX,iBAAiB,MAAM,IAAI,IAC3B,gBAAgB,MAAM,IAAI,KAAM,IAChC,WACA,aAAa,EAAE,MAAM,UAAU,EAC/B,UACA,uBACgB;CAChB,MAAM,UAAU,SAAS,MAAM,GAAG;AAElC,QACE,qBAAC,QAAD;EAAiB;YAAjB,CACG,QAAQ,KAAK,QAAQ,MAAM;GAC1B,MAAM,UAAU,WAAW,MAAM,SAAW;AAC5C,UACE,qBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ;KAOE,oBAAC,OAAO,MAAR;MACE,SACE,UAAU,OAAO,WAAW,iBAAiB,MAAM;MAErD,WAAU;MACV,SACE,UAAU,OAAO,WAAW,iBAAiB,MAAM;MAErD,YAAY;OACV,GAAG;OACH;OACA,OAAO,cAAc,EAAE;OACxB;gBAEA;MACW,CAAA;KACd,oBAAC,OAAO,MAAR;MACE,SAAS,UAAU,MAAM,WAAW,iBAAiB,KAAK;MAC1D,WAAU;MACV,SAAS,UAAU,MAAM,WAAW,iBAAiB,KAAK;MAC1D,qBACE,QAAQ,WAAW,IAAI,IAAI,sBAAsB,KAAA;MAEnD,YAAY;OACV,GAAG;OACH;OACA,OAAO,aAAa,EAAE;OACvB;gBAEA;MACW,CAAA;KACd,oBAAC,QAAD;MAAM,WAAU;gBAAa;MAAe,CAAA;KACvC;MAlCA,EAkCA;IAET,EACF,oBAAC,QAAD;GAAM,WAAU;GAAW;GAAgB,CAAA,CACtC;;;AAIX,SAAS,cAAc"}

package/dist/theme-toggle-LDfIKEqx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-toggle-LDfIKEqx.js","names":[],"sources":["../src/components/theme-toggle/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { MoonIcon, SunIcon } from \"@phosphor-icons/react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type SFThemeMode = \"light\" | \"dark\" | \"system\";\n\nexport const SF_THEME_TOGGLE_VARIANTS = {\n  mode: {\n    light: { classes: \"\", description: \"Light mode\" },\n    dark: { classes: \"\", description: \"Dark mode\" },\n    system: { classes: \"\", description: \"Follow system preference\" },\n  },\n} as const;\n\nexport const SF_THEME_TOGGLE_DEFAULT_VARIANTS = {\n  mode: \"system\",\n} as const;\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst STORAGE_KEY = \"theme\";\n\nfunction getSystemTheme(): \"light\" | \"dark\" {\n  if (typeof window === \"undefined\") return \"light\";\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction resolveMode(mode: SFThemeMode): \"light\" | \"dark\" {\n  return mode === \"system\" ? getSystemTheme() : mode;\n}\n\nfunction applyTheme(mode: SFThemeMode) {\n  const resolved = resolveMode(mode);\n  document.documentElement.dataset.mode = resolved;\n  if (mode === \"system\") {\n    localStorage.removeItem(STORAGE_KEY);\n  } else {\n    localStorage.setItem(STORAGE_KEY, mode);\n  }\n}\n\n/**\n * Read the current persisted mode preference from localStorage.\n * Returns \"system\" if nothing is stored.\n */\nexport function getStoredThemeMode(): SFThemeMode {\n  if (typeof window === \"undefined\") return \"system\";\n  const stored = localStorage.getItem(STORAGE_KEY);\n  if (stored === \"light\" || stored === \"dark\") return stored;\n  return \"system\";\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface ThemeToggleProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /**\n   * Controlled mode. When provided the component acts as a controlled input —\n   * pair with `onModeChange`.\n   */\n  mode?: SFThemeMode;\n  /**\n   * Called when the user cycles to a new mode.\n   * Receives the new mode value.\n   */\n  onModeChange?: (mode: SFThemeMode) => void;\n  /**\n   * Cycle order for clicking. Defaults to `[\"light\", \"dark\", \"system\"]`.\n   * Remove `\"system\"` to limit to a simple light/dark toggle.\n   */\n  cycle?: SFThemeMode[];\n  /** Show a tooltip labelling the current action. Defaults to true. */\n  tooltip?: boolean;\n}\n\n/**\n * Theme toggle button. Cycles through light → dark → system (follows OS) modes.\n *\n * Reads from and writes to `localStorage` under the key `\"theme\"`. When set to\n * `\"system\"` the key is removed so the OS preference takes over automatically.\n * Applies the resolved mode to `document.documentElement.dataset.mode`.\n *\n * @example\n * ```tsx\n * // Simple uncontrolled — manages localStorage automatically\n * <ThemeToggle />\n *\n * // Controlled\n * const [mode, setMode] = useState<SFThemeMode>(\"system\");\n * <ThemeToggle mode={mode} onModeChange={setMode} />\n *\n * // Light/dark only (no system option)\n * <ThemeToggle cycle={[\"light\", \"dark\"]} />\n * ```\n */\nexport function ThemeToggle({\n  className,\n  mode: controlledMode,\n  onModeChange,\n  cycle = [\"light\", \"dark\", \"system\"],\n  tooltip = true,\n}: ThemeToggleProps) {\n  const isControlled = controlledMode !== undefined;\n\n  const [internalMode, setInternalMode] = useState<SFThemeMode>(\"system\");\n  const [mounted, setMounted] = useState(false);\n\n  // Hydrate from localStorage on mount\n  useEffect(() => {\n    setMounted(true);\n    if (!isControlled) {\n      setInternalMode(getStoredThemeMode());\n    }\n  }, [isControlled]);\n\n  // Keep in sync if system preference changes while in \"system\" mode\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const activeMode = isControlled ? controlledMode : internalMode;\n    if (activeMode !== \"system\") return;\n\n    const handler = () => applyTheme(\"system\");\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, [isControlled, controlledMode, internalMode]);\n\n  const activeMode = isControlled ? (controlledMode ?? \"system\") : internalMode;\n  const resolvedActive = resolveMode(activeMode);\n\n  const handleClick = () => {\n    const idx = cycle.indexOf(activeMode);\n    const next = cycle[(idx + 1) % cycle.length] ?? cycle[0] ?? \"system\";\n    applyTheme(next);\n    if (!isControlled) setInternalMode(next);\n    onModeChange?.(next);\n  };\n\n  const tooltipLabel =\n    activeMode === \"light\"\n      ? \"Switch to dark mode\"\n      : activeMode === \"dark\"\n        ? \"Use system theme\"\n        : \"Switch to light mode\";\n\n  // SSR / pre-mount: render a stable placeholder to avoid hydration mismatch\n  if (!mounted) {\n    return (\n      <Button\n        aria-label=\"Toggle theme\"\n        className={cn(\"text-sf-subtle\", className)}\n        shape=\"square\"\n        size=\"sm\"\n        type=\"button\"\n        variant=\"ghost\"\n      >\n        <SunIcon className=\"size-4\" />\n      </Button>\n    );\n  }\n\n  const button = (\n    <Button\n      aria-label={tooltipLabel}\n      className={cn(\"text-sf-subtle hover:text-sf-default\", className)}\n      onClick={handleClick}\n      shape=\"square\"\n      size=\"sm\"\n      type=\"button\"\n      variant=\"ghost\"\n    >\n      {resolvedActive === \"dark\" ? (\n        <MoonIcon className=\"size-4\" />\n      ) : (\n        <SunIcon className=\"size-4\" />\n      )}\n    </Button>\n  );\n\n  if (!tooltip) return button;\n\n  return <Tooltip content={tooltipLabel}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,2BAA2B,EACtC,MAAM;CACJ,OAAO;EAAE,SAAS;EAAI,aAAa;EAAc;CACjD,MAAM;EAAE,SAAS;EAAI,aAAa;EAAa;CAC/C,QAAQ;EAAE,SAAS;EAAI,aAAa;EAA4B;CACjE,EACF;AAED,IAAa,mCAAmC,EAC9C,MAAM,UACP;AAID,IAAM,cAAc;AAEpB,SAAS,iBAAmC;AAC1C,KAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAO,OAAO,WAAW,+BAA+B,CAAC,UACrD,SACA;;AAGN,SAAS,YAAY,MAAqC;AACxD,QAAO,SAAS,WAAW,gBAAgB,GAAG;;AAGhD,SAAS,WAAW,MAAmB;CACrC,MAAM,WAAW,YAAY,KAAK;AAClC,UAAS,gBAAgB,QAAQ,OAAO;AACxC,KAAI,SAAS,SACX,cAAa,WAAW,YAAY;KAEpC,cAAa,QAAQ,aAAa,KAAK;;;;;;AAQ3C,SAAgB,qBAAkC;AAChD,KAAI,OAAO,WAAW,YAAa,QAAO;CAC1C,MAAM,SAAS,aAAa,QAAQ,YAAY;AAChD,KAAI,WAAW,WAAW,WAAW,OAAQ,QAAO;AACpD,QAAO;;;;;;;;;;;;;;;;;;;;;;AA+CT,SAAgB,YAAY,EAC1B,WACA,MAAM,gBACN,cACA,QAAQ;CAAC;CAAS;CAAQ;CAAS,EACnC,UAAU,QACS;CACnB,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,CAAC,cAAc,mBAAmB,SAAsB,SAAS;CACvE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,iBAAgB;AACd,aAAW,KAAK;AAChB,MAAI,CAAC,aACH,iBAAgB,oBAAoB,CAAC;IAEtC,CAAC,aAAa,CAAC;AAGlB,iBAAgB;AACd,MAAI,OAAO,WAAW,YAAa;EACnC,MAAM,KAAK,OAAO,WAAW,+BAA+B;AAE5D,OADmB,eAAe,iBAAiB,kBAChC,SAAU;EAE7B,MAAM,gBAAgB,WAAW,SAAS;AAC1C,KAAG,iBAAiB,UAAU,QAAQ;AACtC,eAAa,GAAG,oBAAoB,UAAU,QAAQ;IACrD;EAAC;EAAc;EAAgB;EAAa,CAAC;CAEhD,MAAM,aAAa,eAAgB,kBAAkB,WAAY;CACjE,MAAM,iBAAiB,YAAY,WAAW;CAE9C,MAAM,oBAAoB;EAExB,MAAM,OAAO,OADD,MAAM,QAAQ,WAAW,GACX,KAAK,MAAM,WAAW,MAAM,MAAM;AAC5D,aAAW,KAAK;AAChB,MAAI,CAAC,aAAc,iBAAgB,KAAK;AACxC,iBAAe,KAAK;;CAGtB,MAAM,eACJ,eAAe,UACX,wBACA,eAAe,SACb,qBACA;AAGR,KAAI,CAAC,QACH,QACE,oBAAC,QAAD;EACE,cAAW;EACX,WAAW,GAAG,kBAAkB,UAAU;EAC1C,OAAM;EACN,MAAK;EACL,MAAK;EACL,SAAQ;YAER,oBAAC,SAAD,EAAS,WAAU,UAAW,CAAA;EACvB,CAAA;CAIb,MAAM,SACJ,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GAAG,wCAAwC,UAAU;EAChE,SAAS;EACT,OAAM;EACN,MAAK;EACL,MAAK;EACL,SAAQ;YAEP,mBAAmB,SAClB,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,GAE/B,oBAAC,SAAD,EAAS,WAAU,UAAW,CAAA;EAEzB,CAAA;AAGX,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,oBAAC,SAAD;EAAS,SAAS;YAAe;EAAiB,CAAA"}