@keboola/design 11.6.1 → 11.9.0

package/dist/Sidebar-CLEbBtNY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar-CLEbBtNY.js","names":[],"sources":["../src/components/Sidebar/SidebarProvider/useTransitionPresence.ts","../src/components/Sidebar/SidebarContent.tsx","../src/hooks/useMediaQuery.ts","../src/components/Sidebar/utils.ts","../src/components/Sidebar/SidebarProvider/context.ts","../src/components/Sidebar/SidebarProvider/useHoverTracking.ts","../src/components/Sidebar/SidebarProvider/useSidebarState.ts","../src/components/Sidebar/SidebarProvider/SidebarProvider.tsx","../src/components/Sidebar/SidebarFillTrigger.tsx","../src/components/Sidebar/SidebarFooter.tsx","../src/components/Sidebar/SidebarGroup/SidebarGroup.tsx","../src/components/Sidebar/SidebarGroup/SidebarGroupContent.tsx","../src/components/Sidebar/SidebarGroup/SidebarGroupAction.tsx","../src/components/Sidebar/SidebarGroup/SidebarGroupLabel.tsx","../src/components/Sidebar/SidebarInstanceContext.ts","../src/components/Sidebar/SidebarHeader.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenu.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx","../src/components/Sidebar/SidebarMenu/useDestinationDismiss.ts","../src/components/Sidebar/SidebarMenu/SidebarMenuButton.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuItem.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuAction.tsx","../src/components/Sidebar/SidebarMenu/SidebarSearchInput.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuCard.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuBadge.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuSub.tsx","../src/components/Sidebar/SidebarMenu/SidebarMenuSubItem.tsx","../src/components/Sidebar/useResizeSidebar.ts","../src/components/Sidebar/SidebarResizeHandle.tsx","../src/components/Sidebar/SidebarSeparator.tsx","../src/components/Sidebar/SidebarTrigger.tsx","../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useReducer } from 'react';\n\ntype MountState = 'mounted' | 'enterSuspended' | 'unmountSuspended' | 'unmounted';\ntype MountEvent = 'MOUNT' | 'ENTER' | 'TRANSITION_OUT' | 'TRANSITION_END';\n\ntype UseTransitionPresenceOptions = {\n  mounted: boolean;\n  keepMounted?: boolean;\n  /** Hold the subtree back until the enter transition ends — a heavy mount in the same commit blocks every frame of it. */\n  mountAfterEnter?: boolean;\n};\n\nconst FALLBACK_TIMEOUT_MS = 500;\n\n/** Under reduced motion there is no `transitionend` to wait for, so the mount is not deferred. */\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' &&\n  (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);\n\nconst reducer = (state: MountState, event: MountEvent): MountState => {\n  switch (event) {\n    case 'MOUNT':\n      return 'mounted';\n    case 'ENTER':\n      // Already-mounted content stays put; only a cold open waits.\n      return state === 'unmounted' ? 'enterSuspended' : 'mounted';\n    case 'TRANSITION_OUT':\n      // Closed before the content arrived: nothing to animate out.\n      if (state === 'enterSuspended') return 'unmounted';\n      return state === 'mounted' ? 'unmountSuspended' : state;\n    case 'TRANSITION_END':\n      if (state === 'unmountSuspended') return 'unmounted';\n      if (state === 'enterSuspended') return 'mounted';\n      return state;\n    default:\n      return state;\n  }\n};\n\nexport const useTransitionPresence = ({\n  mounted,\n  keepMounted = false,\n  mountAfterEnter = false,\n}: UseTransitionPresenceOptions) => {\n  const [state, send] = useReducer(reducer, mounted ? 'mounted' : 'unmounted');\n\n  useLayoutEffect(() => {\n    if (keepMounted) return;\n    if (!mounted) {\n      send('TRANSITION_OUT');\n      return;\n    }\n    send(mountAfterEnter && !prefersReducedMotion() ? 'ENTER' : 'MOUNT');\n  }, [mounted, keepMounted, mountAfterEnter]);\n\n  // Fallback for both suspensions when `onTransitionEnd` never fires.\n  useEffect(() => {\n    if (state !== 'unmountSuspended' && state !== 'enterSuspended') return;\n\n    const id = setTimeout(() => send('TRANSITION_END'), FALLBACK_TIMEOUT_MS);\n    return () => clearTimeout(id);\n  }, [state]);\n\n  return useMemo(\n    () => ({\n      isMounted: keepMounted || state === 'mounted' || state === 'unmountSuspended',\n      /** Resolves whichever transition the subtree is waiting on. */\n      completeUnmount: () => send('TRANSITION_END'),\n    }),\n    [state, keepMounted],\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { useScrollbarPosition } from '../../hooks/useScrollbarPosition';\nimport { cn, mergeRefs } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n  contentRef?: ComponentProps<'div'>['ref'];\n  ref?: ComponentProps<'div'>['ref'];\n};\n\nexport const SidebarContent = ({ ref, className, children, contentRef }: Props) => {\n  const { setElement, isBottom, isTop, isMiddle } = useScrollbarPosition();\n  const mergedRefs = mergeRefs(ref ?? null, (ref) => setElement(ref));\n\n  return (\n    <ScrollArea\n      ref={mergedRefs}\n      type=\"scroll\"\n      className=\"tw:group/sidebar-content tw:flex-1\"\n      data-slot=\"sidebar-content\"\n      scrollBarClassName=\"tw:w-1.5\"\n      viewPortClassName={cn(\n        'tw:overflow-x-hidden',\n        'tw:overscroll-contain',\n        'tw:[&>div]:!flex', // overflow fix for scrollbar\n        // Hide scroll-position-based borders (top/bottom) if SidebarHeader or SidebarFooter is omitted.\n        'tw:group-first/sidebar-content:before:hidden',\n        'tw:group-last/sidebar-content:after:hidden',\n        'tw:!box-border',\n        {\n          'tw:before:absolute tw:before:top-0 tw:before:left-0 tw:before:right-0 tw:before:h-px tw:before:bg-sidebar-border tw:before:z-10 tw:before:content-[\"\"]':\n            isBottom || isMiddle,\n          'tw:after:absolute tw:after:bottom-0 tw:after:left-0 tw:after:right-0 tw:after:h-px tw:after:bg-sidebar-border tw:after:z-10 tw:after:content-[\"\"]':\n            isTop || isMiddle,\n        },\n      )}\n    >\n      <div\n        ref={contentRef}\n        className={cn(\n          'tw:flex',\n          'tw:flex-1',\n          'tw:flex-col',\n          'tw:gap-1',\n          'tw:overflow-x-hidden',\n          'tw:p-2',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </ScrollArea>\n  );\n};\n","import { useCallback, useSyncExternalStore } from 'react';\n\n/**\n * Whether a CSS media query currently matches, re-rendering when it flips.\n *\n * - `false` wherever `matchMedia` is absent (SSR, a stubbed test environment), so the\n *   caller renders its desktop branch rather than crashing.\n * - The subscription is the query's own `change` event — no resize listener, no polling.\n */\nexport const useMediaQuery = (query: string) => {\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      const list = globalThis.matchMedia?.(query);\n      list?.addEventListener?.('change', onStoreChange);\n\n      return () => list?.removeEventListener?.('change', onStoreChange);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(() => globalThis.matchMedia?.(query).matches ?? false, [query]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, () => false);\n};\n","import type { SidebarCollapsible, SidebarMode, SidebarState, SidebarVariant } from './types';\n\nexport const SidebarWidthInPx = {\n  MIN_DEFAULT: 256,\n\n  // 8 px / 36 px / 8 px = 52 px\n  // left padding / icon width / right padding\n  COLLAPSED_ICON: 52,\n\n  // padding from every side for floating variant (see --sidebar-floating-padding)\n  FLOATING_VARIANT_PADDING: 8,\n} as const;\n\n/**\n * The default viewport width under which a rail stops being a column and opens as a sheet.\n *\n * - Matches Tailwind's `md`, so a call site's own `tw:md:*` breakpoint utilities flip\n *   in the same frame as the rail.\n */\nexport const SIDEBAR_MOBILE_BREAKPOINT_PX = 768;\n\n/**\n * The query a rail watches to know whether it is a sheet.\n *\n * - `max-width`, so it is exclusive of the breakpoint itself — the width passed in is the\n *   first one at which the rail is a column again.\n * - Per side, because the width at which a rail stops fitting is the rail's own: a 320px\n *   panel beside a capped reading column runs out of room long before a navigation rail does.\n */\nexport const sidebarMobileMediaQuery = (breakpointPx: number) =>\n  `(max-width: ${breakpointPx - 0.02}px)`;\n\nconst floatingSideCount: Record<SidebarVariant, number> = {\n  'sided-floating': 1,\n  floating: 2,\n  inset: 0,\n  none: 0,\n};\n\ntype Input = {\n  variant: SidebarVariant;\n  width?: number;\n  collapsible: SidebarCollapsible;\n  mode: SidebarMode;\n  state: SidebarState;\n  /** Below the breakpoint the rail is a sheet, so it occupies no column. */\n  isMobile?: boolean;\n};\n\ntype EffectiveWidths = {\n  sidebar: number;\n  gap: number;\n  fill: number;\n};\n\nexport const calcEffectiveWidths = ({\n  variant,\n  width: customWidth,\n  collapsible,\n  state,\n  mode,\n  isMobile = false,\n}: Input) => {\n  if (variant === 'none' || isMobile) return { sidebar: 0, gap: 0, fill: 0 };\n\n  const padding = floatingSideCount[variant] * SidebarWidthInPx.FLOATING_VARIANT_PADDING;\n  const width = Math.max(customWidth ?? 0, SidebarWidthInPx.MIN_DEFAULT) + padding;\n  const iconWidth = SidebarWidthInPx.COLLAPSED_ICON + padding;\n  const isExpanded = state === 'expanded';\n\n  // Only compensate for floating padding when this sidebar itself has padding,\n  // so the opposite filled sidebar doesn't double-count the gap.\n  const reduction = variant === 'inset' ? 0 : SidebarWidthInPx.FLOATING_VARIANT_PADDING;\n\n  const iconWidths = ((): EffectiveWidths => {\n    const sidebar = isExpanded ? width : iconWidth;\n    const gap = mode === 'expand-on-hover' ? iconWidth : sidebar;\n    // Use gap (not sidebar) so the opposite filled sidebar stays stable\n    // during expand-on-hover — gap stays at iconWidth while sidebar grows\n    const fill = gap - reduction;\n    return { sidebar, gap, fill };\n  })();\n\n  const offCanvasWidths = ((): EffectiveWidths => {\n    const sidebar = width; //We use CSS translate to hide elements because it allows for transitions without shrinking the width.\n    const gap = isExpanded ? width : SidebarWidthInPx.FLOATING_VARIANT_PADDING; // The gap is invisible and needs to be shrunk to move the content to its place.\n    const fill = gap - reduction;\n    return { sidebar, gap, fill };\n  })();\n\n  return collapsible === 'icon' ? iconWidths : offCanvasWidths;\n};\n","import { createContext, use } from 'react';\n\nimport type { SidebarCollapsible, SidebarSide, SidebarVariant } from '../types';\nimport type { calcEffectiveWidths } from '../utils';\n\nimport type { useSidebarState } from './useSidebarState';\n\ntype SidebarWidths = ReturnType<typeof calcEffectiveWidths>;\ntype SidebarState = ReturnType<typeof useSidebarState>;\n\ntype SidebarSideValue = SidebarState & {\n  /**\n   * The viewport is under the mobile breakpoint, so this rail renders as a sheet rather\n   * than a grid column.\n   *\n   * - `mode` and `state` both report `expanded` here — the collapse axis has nothing to\n   *   act on, and the call site's own `mode` prop is left untouched.\n   * - `toggle` opens and closes the sheet instead of writing that prop.\n   */\n  isMobile: boolean;\n  /** Whether this side's mobile sheet is open. Always `false` above the breakpoint. */\n  isMobileOpen: boolean;\n  /** Opens or closes this side's mobile sheet; opening one closes the other. */\n  setMobileOpen: (open: boolean) => void;\n  isFill: boolean;\n  toggleFill: () => void;\n  /** Idempotent counterpart to `toggleFill` — safe to call twice, or when already in that state. */\n  setFill: (fill: boolean) => void;\n  widths: SidebarWidths;\n  collapsible: SidebarCollapsible;\n  variant: SidebarVariant;\n  baseWidth: number | undefined;\n  onWidthChange: ((width: number) => void) | undefined;\n  setDragWidth: (width: number | null) => void;\n  isDragging: boolean;\n  setIsDragging: (dragging: boolean) => void;\n};\n\nexport type SidebarContextValue = {\n  left: SidebarSideValue;\n  right: SidebarSideValue;\n};\n\nexport const SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * The sidebar if there is one, `null` otherwise — for code that ENHANCES a page when the app shell is\n * around it (borrowing width, collapsing a panel) and must still render without one, in a test, a\n * story, or an embedded surface. Anything that genuinely requires a sidebar keeps `useSidebar`.\n */\nexport const useOptionalSidebar = (side: SidebarSide = 'left'): SidebarSideValue | null =>\n  use(SidebarContext)?.[side] ?? null;\n\nexport const useSidebar = (side: SidebarSide = 'left'): SidebarSideValue => {\n  const context = use(SidebarContext);\n  if (context === null) throw new Error('useSidebar must be used within a SidebarProvider.');\n  return context[side];\n};\n","import { useEffect, useRef, useState } from 'react';\n\n/**\n * CSS selectors matching portal-based overlay triggers in their open state.\n *\n * The sidebar's hover tracking ignores `mouseleave` while any of these selectors\n * match inside the sidebar DOM — preventing the sidebar from collapsing while the\n * user interacts with portal content rendered outside the sidebar tree.\n *\n * Update this list when changing or adding new components:\n */\nconst PORTAL_OPEN_SELECTORS = [\n  '[aria-haspopup=\"menu\"][aria-expanded=true]', // DropdownMenu\n  '[aria-haspopup=\"dialog\"][aria-expanded=true]', // Popover, Dialogs (Modal, Sheet)\n];\n\nconst PORTAL_OPEN_SELECTORS_STRING = PORTAL_OPEN_SELECTORS.join(',');\n\nexport const useHoverTracking = (sidebarElement: HTMLElement | null) => {\n  // Which element the pointer is over, rather than a bare boolean. The tracked element is\n  // replaced when the rail changes branch — crossing the mobile breakpoint does it — and a\n  // boolean would carry the old element's hover onto the new one, leaving an\n  // `expand-on-hover` rail expanded with the pointer somewhere else entirely.\n  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);\n  const isLockedRef = useRef(false);\n\n  // Release an element the pointer can no longer be over: the rail swapped branch, or it\n  // became a sheet and there is no rail to track at all. Holding the detached node would\n  // keep its subtree alive for as long as the provider is mounted, and hand the hover\n  // straight back if the same rail is mounted again.\n  //\n  // - Done during render rather than in an effect: it converges (the value it clears is the\n  //   one that no longer matches) and lands before the listeners below are re-bound.\n  if (hoveredElement !== null && hoveredElement !== sidebarElement) setHoveredElement(null);\n\n  const isHovered = hoveredElement !== null;\n\n  useEffect(() => {\n    if (!sidebarElement) return;\n\n    const handleMouseEnter = () => setHoveredElement(sidebarElement);\n    const handleMouseLeave = () => {\n      if (isLockedRef.current) return;\n      setHoveredElement(null);\n    };\n\n    sidebarElement.addEventListener('mouseenter', handleMouseEnter);\n    sidebarElement.addEventListener('mouseleave', handleMouseLeave);\n\n    return () => {\n      sidebarElement.removeEventListener('mouseenter', handleMouseEnter);\n      sidebarElement.removeEventListener('mouseleave', handleMouseLeave);\n    };\n  }, [sidebarElement]);\n\n  useEffect(() => {\n    if (!sidebarElement) return;\n    let animationFrameId: number;\n\n    const observer = new MutationObserver(() => {\n      const hasOpenPortal = sidebarElement.querySelector(PORTAL_OPEN_SELECTORS_STRING) !== null;\n      isLockedRef.current = hasOpenPortal;\n\n      if (hasOpenPortal) return;\n\n      animationFrameId = requestAnimationFrame(() => {\n        setHoveredElement(sidebarElement.matches(':hover') ? sidebarElement : null);\n      });\n    });\n\n    // Sync lock state immediately in case a portal trigger is already open on mount.\n    isLockedRef.current = sidebarElement.querySelector(PORTAL_OPEN_SELECTORS_STRING) !== null;\n\n    observer.observe(sidebarElement, {\n      attributes: true,\n      attributeFilter: ['aria-expanded'],\n      subtree: true,\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n      observer.disconnect();\n    };\n  }, [sidebarElement]);\n\n  return isHovered;\n};\n","import { useCallback, useMemo, useState } from 'react';\n\nimport { useElement } from '../../../hooks/useElement';\nimport type { SidebarMode, SidebarState } from '../types';\n\nimport { useHoverTracking } from './useHoverTracking';\n\ntype Props = {\n  defaultMode?: SidebarMode;\n  mode?: SidebarMode;\n  onModeChange?: (state: SidebarMode) => void;\n};\n\nexport const useSidebarState = ({ defaultMode, mode: modeProp, onModeChange }: Props) => {\n  const [sidebarElement, setSidebarElement] = useElement();\n  const isHovered = useHoverTracking(sidebarElement);\n  const [_mode, _setMode] = useState(defaultMode ?? 'expanded');\n  const mode = modeProp ?? _mode;\n\n  const setMode = useCallback(\n    (dispatch: Parameters<typeof _setMode>[0]) => {\n      const newState = typeof dispatch === 'function' ? dispatch(mode) : dispatch;\n      const set = onModeChange ?? _setMode;\n      set(newState);\n    },\n    [onModeChange, mode],\n  );\n\n  const toggle = useCallback(() => {\n    setMode((currState) => (currState === 'expanded' ? 'collapsed' : 'expanded'));\n  }, [setMode]);\n\n  const state: SidebarState = (() => {\n    if (mode === 'expand-on-hover') return isHovered ? 'expanded' : 'collapsed';\n    return mode;\n  })();\n\n  return useMemo(\n    () => ({\n      isHovered,\n      toggle,\n      setMode,\n      mode,\n      state,\n      sidebarElement,\n      setSidebarElement,\n    }),\n    [isHovered, toggle, setMode, mode, state, sidebarElement, setSidebarElement],\n  );\n};\n","import { type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { useMediaQuery } from '../../../hooks/useMediaQuery';\nimport type { SidebarCollapsible, SidebarMode, SidebarSide, SidebarVariant } from '../types';\nimport {\n  calcEffectiveWidths,\n  SIDEBAR_MOBILE_BREAKPOINT_PX,\n  sidebarMobileMediaQuery,\n} from '../utils';\n\nimport type { SidebarContextValue } from './context';\nimport { SidebarContext } from './context';\nimport { useSidebarState } from './useSidebarState';\n\nconst DEFAULT_SIDEBAR_VARIANT: SidebarVariant = 'none';\nconst DEFAULT_SIDEBAR_MODE: SidebarMode = 'expanded';\nconst DEFAULT_SIDEBAR_COLLAPSIBLE: SidebarCollapsible = 'off-canvas';\n\n/**\n * What `setMode` becomes for a rail that is currently a sheet.\n *\n * - The collapse axis has nothing to act on there, and the call site's own `mode` prop is a\n *   stored desktop preference — `Sidebar.SearchInput` expands the rail on focus, which would\n *   otherwise overwrite a stored `collapsed` the first time someone searches on a phone.\n */\nconst ignoreModeChange = () => {};\n\n/** The width a side watches: its own when it named one, the default when it just opted in. */\nconst mobileBreakpointOf = (mobileSheet: boolean | number) =>\n  typeof mobileSheet === 'number' ? mobileSheet : SIDEBAR_MOBILE_BREAKPOINT_PX;\n\ntype Props = {\n  children?: ReactNode;\n  // left state\n  defaultLeftMode?: SidebarMode;\n  leftMode?: SidebarMode;\n  onLeftModeChange?: (mode: SidebarMode) => void;\n\n  // right state\n  defaultRightMode?: SidebarMode;\n  rightMode?: SidebarMode;\n  onRightModeChange?: (mode: SidebarMode) => void;\n\n  /**\n   * The left rail becomes a `Sheet` under a breakpoint instead of a grid column.\n   *\n   * - Opt-in, and per side: a `Sidebar` is also the shape of a container rail nested in a\n   *   modal or a builder canvas, where a full-screen phone sheet means nothing.\n   * - `true` uses the default breakpoint (768px, Tailwind's `md`); a number is the width in\n   *   px under which this side is a sheet, for a rail that runs out of room at its own width.\n   * - An app that opts in owes the sheet a way in — a `Sidebar.Trigger` in its header, which\n   *   routes to whichever of the two the rail currently is.\n   * - `keepMounted` and `mountAfterEnter` do not apply while this side is a sheet: the sheet\n   *   mounts its content on open and unmounts it on close. A side whose panel holds state\n   *   worth surviving a close should keep that state above the panel.\n   */\n  leftMobileSheet?: boolean | number;\n  /** The right-side twin of `leftMobileSheet`. */\n  rightMobileSheet?: boolean | number;\n\n  // left\n  leftVariant?: SidebarVariant;\n  leftWidth?: number;\n  leftCollapsible?: SidebarCollapsible;\n\n  // right\n  rightVariant?: SidebarVariant;\n  rightWidth?: number;\n  rightCollapsible?: SidebarCollapsible;\n\n  // width change callbacks\n  onLeftWidthChange?: (width: number) => void;\n  onRightWidthChange?: (width: number) => void;\n\n  // fill\n  defaultFilledSide?: SidebarSide | null;\n};\n\nexport const SidebarProvider = ({\n  children,\n  // left state\n  defaultLeftMode = DEFAULT_SIDEBAR_MODE,\n  leftMode,\n  onLeftModeChange,\n\n  // right state\n  defaultRightMode = DEFAULT_SIDEBAR_MODE,\n  rightMode,\n  onRightModeChange,\n\n  // mobile\n  leftMobileSheet = false,\n  rightMobileSheet = false,\n\n  // left\n  leftCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE,\n  leftVariant = DEFAULT_SIDEBAR_VARIANT,\n  leftWidth,\n\n  // right\n  rightCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE,\n  rightVariant = DEFAULT_SIDEBAR_VARIANT,\n  rightWidth,\n\n  // width change callbacks\n  onLeftWidthChange,\n  onRightWidthChange,\n\n  // fill\n  defaultFilledSide = null,\n}: Props) => {\n  // One query per side: the widths differ, and a hook cannot be skipped for the side that\n  // opted out — an unwatched side reads its own default query and is gated by the flag below.\n  const isLeftNarrow = useMediaQuery(sidebarMobileMediaQuery(mobileBreakpointOf(leftMobileSheet)));\n  const isRightNarrow = useMediaQuery(\n    sidebarMobileMediaQuery(mobileBreakpointOf(rightMobileSheet)),\n  );\n  // A side with no rail is not a mobile side: `Sidebar` renders nothing for `variant: 'none'`,\n  // while `Sidebar.Trigger` would still advertise a dialog and toggle an open state nothing\n  // reads. Failing the test here also clears that state below, so a variant switched back on\n  // does not arrive with a stale sheet already open.\n  const isLeftMobile = isLeftNarrow && leftMobileSheet !== false && leftVariant !== 'none';\n  const isRightMobile = isRightNarrow && rightMobileSheet !== false && rightVariant !== 'none';\n  const [filledSide, setFilledSide] = useState<SidebarSide | null>(defaultFilledSide);\n  // One slot, not a flag per side: a phone shows one sheet at a time, and opening the\n  // other rail has to close the first rather than stack two overlays.\n  const [openMobileSide, setOpenMobileSide] = useState<SidebarSide | null>(null);\n  const [isLeftDragging, setIsLeftDragging] = useState(false);\n  const [isRightDragging, setIsRightDragging] = useState(false);\n  const [leftDragWidth, setLeftDragWidth] = useState<number | null>(null);\n  const [rightDragWidth, setRightDragWidth] = useState<number | null>(null);\n\n  // Clear the local drag override the moment it matches the controlled width, so a\n  // later width prop change isn't masked by a stale override (`baseWidth` is\n  // `dragWidth ?? width`). Done during render rather than in an effect: it\n  // converges (the override becomes null, so it can't loop) and triggers on a\n  // change to either the prop or the drag width — matching the original effect,\n  // whose dependency array also watched the drag width.\n  if (leftDragWidth !== null && leftWidth === leftDragWidth) setLeftDragWidth(null);\n  if (rightDragWidth !== null && rightWidth === rightDragWidth) setRightDragWidth(null);\n\n  // Growing past the breakpoint hands the rail back to the grid; a sheet left open\n  // would otherwise sit over a page that already shows the same navigation.\n  if (openMobileSide === 'left' && !isLeftMobile) setOpenMobileSide(null);\n  if (openMobileSide === 'right' && !isRightMobile) setOpenMobileSide(null);\n\n  const leftState = useSidebarState({\n    defaultMode: defaultLeftMode,\n    mode: leftMode,\n    onModeChange: onLeftModeChange,\n  });\n\n  const rightState = useSidebarState({\n    defaultMode: defaultRightMode,\n    mode: rightMode,\n    onModeChange: onRightModeChange,\n  });\n\n  const toggleLeftMobile = useCallback(\n    () => setOpenMobileSide((prev) => (prev === 'left' ? null : 'left')),\n    [],\n  );\n  const toggleRightMobile = useCallback(\n    () => setOpenMobileSide((prev) => (prev === 'right' ? null : 'right')),\n    [],\n  );\n  const setLeftMobileOpen = useCallback(\n    (open: boolean) => setOpenMobileSide((prev) => (open ? 'left' : prev === 'left' ? null : prev)),\n    [],\n  );\n  const setRightMobileOpen = useCallback(\n    (open: boolean) =>\n      setOpenMobileSide((prev) => (open ? 'right' : prev === 'right' ? null : prev)),\n    [],\n  );\n\n  const toggleLeftFill = useCallback(\n    () => setFilledSide((prev) => (prev === 'left' ? null : 'left')),\n    [],\n  );\n  const toggleRightFill = useCallback(\n    () => setFilledSide((prev) => (prev === 'right' ? null : 'right')),\n    [],\n  );\n\n  // Idempotent per side: unlike `toggleFill`, these need no knowledge of the current value, so\n  // repeated calls for one side land on the value they ask for. Fill is a single slot, so two\n  // sides asking at once still race — the last write wins.\n  const setLeftFill = useCallback(\n    (fill: boolean) => setFilledSide((prev) => (fill ? 'left' : prev === 'left' ? null : prev)),\n    [],\n  );\n  const setRightFill = useCallback(\n    (fill: boolean) => setFilledSide((prev) => (fill ? 'right' : prev === 'right' ? null : prev)),\n    [],\n  );\n\n  const value = useMemo<SidebarContextValue>(\n    () => ({\n      left: {\n        ...leftState,\n        // On a phone the rail is a sheet, so the collapse axis has nothing to act on:\n        // the panel is either open at full width or not rendered. Reporting `expanded`\n        // is what gives the children their labels and withholds the collapsed-rail\n        // tooltips; the call site's own `mode` prop is left untouched, so the desktop\n        // preference survives the trip through a narrow viewport.\n        ...(isLeftMobile\n          ? {\n              mode: 'expanded' as const,\n              state: 'expanded' as const,\n              toggle: toggleLeftMobile,\n              setMode: ignoreModeChange,\n            }\n          : null),\n        isMobile: isLeftMobile,\n        isMobileOpen: openMobileSide === 'left',\n        setMobileOpen: setLeftMobileOpen,\n        isFill: filledSide === 'left',\n        toggleFill: toggleLeftFill,\n        setFill: setLeftFill,\n        widths: calcEffectiveWidths({\n          variant: leftVariant,\n          width: leftDragWidth ?? leftWidth,\n          collapsible: leftCollapsible,\n          state: leftState.state,\n          mode: leftState.mode,\n          isMobile: isLeftMobile,\n        }),\n        collapsible: leftCollapsible,\n        variant: leftVariant,\n        baseWidth: leftDragWidth ?? leftWidth,\n        onWidthChange: onLeftWidthChange,\n        setDragWidth: setLeftDragWidth,\n        isDragging: isLeftDragging,\n        setIsDragging: setIsLeftDragging,\n      },\n      right: {\n        ...rightState,\n        ...(isRightMobile\n          ? {\n              mode: 'expanded' as const,\n              state: 'expanded' as const,\n              toggle: toggleRightMobile,\n              setMode: ignoreModeChange,\n            }\n          : null),\n        isMobile: isRightMobile,\n        isMobileOpen: openMobileSide === 'right',\n        setMobileOpen: setRightMobileOpen,\n        isFill: filledSide === 'right',\n        toggleFill: toggleRightFill,\n        setFill: setRightFill,\n        widths: calcEffectiveWidths({\n          variant: rightVariant,\n          width: rightDragWidth ?? rightWidth,\n          collapsible: rightCollapsible,\n          state: rightState.state,\n          mode: rightState.mode,\n          isMobile: isRightMobile,\n        }),\n        collapsible: rightCollapsible,\n        variant: rightVariant,\n        baseWidth: rightDragWidth ?? rightWidth,\n        onWidthChange: onRightWidthChange,\n        setDragWidth: setRightDragWidth,\n        isDragging: isRightDragging,\n        setIsDragging: setIsRightDragging,\n      },\n    }),\n    [\n      isLeftMobile,\n      isRightMobile,\n      openMobileSide,\n      toggleLeftMobile,\n      setLeftMobileOpen,\n      toggleRightMobile,\n      setRightMobileOpen,\n      leftState,\n      filledSide,\n      toggleLeftFill,\n      setLeftFill,\n      leftVariant,\n      leftWidth,\n      leftDragWidth,\n      leftCollapsible,\n      onLeftWidthChange,\n      isLeftDragging,\n      rightState,\n      toggleRightFill,\n      setRightFill,\n      rightVariant,\n      rightWidth,\n      rightDragWidth,\n      rightCollapsible,\n      onRightWidthChange,\n      isRightDragging,\n    ],\n  );\n\n  return <SidebarContext value={value}>{children}</SidebarContext>;\n};\n","import type { ComponentProps, MouseEventHandler } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useSidebar } from './SidebarProvider';\nimport type { SidebarSide } from './types';\n\ntype Props = ComponentProps<typeof Slot> & {\n  side?: SidebarSide;\n};\n\nexport const SidebarFillTrigger = ({ ref, side = 'left', onClick, ...rest }: Props) => {\n  const { toggleFill, isFill } = useSidebar(side);\n\n  const handleOnClick: MouseEventHandler<HTMLElement> = (event) => {\n    toggleFill();\n    onClick?.(event);\n  };\n\n  return <Slot {...rest} ref={ref} onClick={handleOnClick} aria-selected={isFill} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SidebarFooter = ({ className, ...props }: Props) => (\n  <div\n    data-slot=\"sidebar-footer\"\n    className={cn('tw:flex', 'tw:flex-col', 'tw:gap-2', 'tw:p-2', className)}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SidebarGroup = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:group/sidebar-group',\n      'tw:relative',\n      'tw:w-full',\n\n      // positioning\n      'tw:flex',\n      'tw:flex-col',\n      'tw:min-w-0',\n      'tw:rounded-lg',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SidebarGroupContent = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      // positioning\n      'tw:flex',\n      'tw:flex-col',\n      'tw:gap-2',\n\n      'tw:w-full',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const SidebarGroupAction = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  ...props\n}: Props) => (\n  <button\n    {...props}\n    type={type}\n    ref={ref}\n    className={cn(\n      'tw:group-data-[state=collapsed]/sidebar:hidden',\n\n      // positioning\n      'tw:absolute',\n      'tw:right-1.5',\n      'tw:top-2',\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n\n      // sizing\n      'tw:size-5',\n\n      // styles\n      'tw:text-neutral-800',\n      'tw:rounded-full',\n\n      // svg defaults: size + colour\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n      'tw:[&_svg]:text-neutral-400',\n      'tw:hover:[&_svg]:text-secondary-600',\n\n      'tw:hover:bg-neutral-100',\n\n      'tw:focus-visible:ring-4',\n      'tw:focus-visible:ring-ring/30',\n      'tw:focus-visible:outline',\n      'tw:focus-visible:outline-1',\n      'tw:focus-visible:outline-ring',\n      className,\n    )}\n  >\n    {children}\n  </button>\n);\n","import type { ComponentProps, Ref } from 'react';\n\nimport { cn } from '../../../utils';\nimport { Separator } from '../../Separator';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SidebarGroupLabel = ({\n  ref,\n  className,\n  children,\n  ...props\n}: Props & { ref?: Ref<HTMLDivElement> }) => (\n  <div\n    ref={ref}\n    className={cn(\n      'tw:relative',\n      // positioning\n      'tw:flex',\n      'tw:flex-col',\n      'tw:shrink-0',\n\n      // styling\n      'tw:h-8',\n      'tw:px-2',\n      'tw:-mb-1',\n      'tw:rounded-lg',\n\n      // text\n      'tw:uppercase',\n      'tw:font-sans',\n      'tw:text-xs',\n      'tw:tracking-[1px]',\n      className,\n    )}\n    {...props}\n  >\n    <Separator\n      orientation=\"horizontal\"\n      size=\"3/4\"\n      className={cn(\n        'tw:opacity-0',\n        'tw:group-data-[state=collapsed]/sidebar:opacity-100',\n\n        // positioning\n        'tw:absolute',\n        'tw:w-full',\n        'tw:left-0',\n        'tw:top-1/2 tw:-translate-y-1/2',\n\n        'tw:transition-opacity',\n        'tw:duration-(--sidebar-motion-duration)',\n        'tw:ease-(--sidebar-motion-easing)',\n        'tw:motion-reduce:transition-none',\n      )}\n    />\n\n    <span\n      className={cn(\n        'tw:flex',\n        'tw:group-data-[state=collapsed]/sidebar:opacity-0',\n\n        'tw:items-center',\n        'tw:flex-1',\n        'tw:text-muted-foreground',\n        'tw:whitespace-nowrap',\n\n        // transition\n        'tw:transition-opacity',\n        'tw:duration-(--sidebar-motion-duration)',\n        'tw:ease-(--sidebar-motion-easing)',\n        'tw:motion-reduce:transition-none',\n      )}\n    >\n      {children}\n    </span>\n  </div>\n);\n","import { createContext, use } from 'react';\n\nimport type { SidebarMode, SidebarSide, SidebarState } from './types';\n\ntype SidebarInstanceContextValue = {\n  state: SidebarState;\n  mode: SidebarMode;\n  side: SidebarSide;\n};\n\nexport const SidebarInstanceContext = createContext<SidebarInstanceContextValue | null>(null);\n\nexport const useSidebarInstance = () => {\n  const context = use(SidebarInstanceContext);\n  if (context === null)\n    throw new Error('useSidebarInstance must be used within a SidebarInstanceContext.');\n  return context;\n};\n","import { type ComponentProps, use } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\nimport { SidebarInstanceContext } from './SidebarInstanceContext';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SidebarHeader = ({ className, children, ...props }: Props) => {\n  const instance = use(SidebarInstanceContext);\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and renders\n  // null when the active brand ships no logo, so no provider gate is needed.\n  const variant = instance?.state === 'collapsed' ? 'mark' : 'wordmark';\n  const fallback = <BrandLogo variant={variant} className=\"tw:h-7\" />;\n\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      className={cn(\n        'tw:peer/sidebar-header',\n        'tw:flex',\n        'tw:flex-col',\n        'tw:gap-2',\n        'tw:p-2',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? fallback}\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const SidebarMenu = ({ className, ...props }: Props) => (\n  <ul\n    data-sidebar=\"menu\"\n    className={cn(\n      'tw:flex',\n      'tw:w-full',\n      'tw:min-w-0',\n      'tw:flex-col',\n      'tw:gap-1',\n\n      // transition\n      'tw:transition-[margin,opacity]',\n      'tw:duration-(--sidebar-motion-duration)',\n      'tw:ease-(--sidebar-motion-easing)',\n      'tw:motion-reduce:transition-none',\n\n      // TODO: remove when boostrap is gone\n      'tw:pl-0',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const SidebarMenuIcon = ({ ref, className, children, ...rest }: Props) => (\n  <span\n    {...rest}\n    ref={ref}\n    className={cn(\n      'tw:inline-flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:aspect-square',\n      'tw:shrink-0',\n      'tw:p-0.5',\n      'tw:text-sidebar-primary',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n  >\n    {children}\n  </span>\n);\n","import type { AriaAttributes, MouseEvent, MouseEventHandler } from 'react';\n\nimport { useSidebarInstance } from '../SidebarInstanceContext';\nimport { useSidebar } from '../SidebarProvider';\n\n/**\n * The props a click has to be measured against before it counts as a destination.\n *\n * - Each is injected by a wrapper, not written by the call site: a Radix `Slot` merges them\n *   into the item's own props, and `cloneElement` reaches a component child, so they arrive\n *   here as ordinary props.\n */\ntype Props = Pick<AriaAttributes, 'aria-haspopup' | 'aria-expanded'> & {\n  'data-sidebar-trigger'?: string;\n};\n\n/**\n * The click handler a sidebar menu item runs: the caller's own, then the sheet's dismissal.\n *\n * - On a phone the rail is a sheet over the page, so a chosen destination has to dismiss it —\n *   otherwise the page it navigated to sits behind the overlay.\n * - Two kinds of click are not a destination:\n *   - Opening a popup. `DropdownMenu.Trigger` and `Sidebar.SubMenu` both hand their child an\n *     `aria-haspopup` / `aria-expanded`, and closing the sheet under their popup would take\n *     the popup with it.\n *   - Acting on the rail itself. `Sidebar.Trigger` marks its child `data-sidebar-trigger`; its\n *     own `toggle` runs after this handler, so dismissing here would hand `toggle` a closed\n *     sheet and it would open it straight back up.\n * - Above the breakpoint the caller's `onClick` is all that runs.\n */\nexport const useDestinationDismiss = <T extends HTMLElement>(\n  props: Props,\n  onClick: MouseEventHandler<T> | undefined,\n): MouseEventHandler<T> => {\n  const { side } = useSidebarInstance();\n  const { isMobile, setMobileOpen } = useSidebar(side);\n\n  const isDestination =\n    props['aria-haspopup'] === undefined &&\n    props['aria-expanded'] === undefined &&\n    props['data-sidebar-trigger'] === undefined;\n\n  return (event: MouseEvent<T>) => {\n    onClick?.(event);\n    if (isMobile && isDestination) setMobileOpen(false);\n  };\n};\n","import type { ComponentProps, ReactNode, Ref } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\n\nimport { cn } from '../../../utils';\nimport { Tooltip } from '../../Tooltip';\nimport { useSidebarInstance } from '../SidebarInstanceContext';\n\nimport { SidebarMenuIcon } from './SidebarMenuIcon';\nimport { useDestinationDismiss } from './useDestinationDismiss';\n\ntype Props = ComponentProps<'button'> & {\n  asChild?: boolean;\n  tooltip?: ReactNode;\n  icon?: ReactNode;\n  /** Set by `Sidebar.Trigger` on the child it wraps — not part of a call site's API. */\n  'data-sidebar-trigger'?: string;\n};\n\nexport const SidebarMenuButton = ({\n  ref,\n  'aria-selected': selected,\n  className,\n  children,\n  asChild = false,\n  icon,\n  tooltip,\n  onClick,\n  ...props\n}: Props & { ref?: Ref<HTMLButtonElement> }) => {\n  const Component = asChild ? Root : 'button';\n  const { state, mode, side } = useSidebarInstance();\n  const handleClick = useDestinationDismiss<HTMLButtonElement>(props, onClick);\n\n  const button = (\n    <Component\n      {...props}\n      onClick={handleClick}\n      ref={ref}\n      data-slot=\"sidebar-menu-button\"\n      // `type` and `aria-selected` belong to a real <button>. With `asChild` the slot is\n      // usually an <a> (the canonical nav item), where both are invalid — axe flags\n      // `aria-selected` on a link as a critical violation. Mark the active link with\n      // `aria-current=\"page\"` instead; it is styled identically below. `aria-selected`\n      // is still forwarded when a caller passes it explicitly.\n      {...(asChild ? {} : { type: 'button' as const })}\n      {...(selected === undefined ? {} : { 'aria-selected': selected })}\n      className={cn(\n        'tw:peer/sidebar-menu-button',\n        'tw:group/sidebar-menu-button',\n\n        // if <SidebarMenuAction /> visible, prevent the text from being under the action button.\n        'tw:group-data-[state=expanded]/sidebar:group-has-[[data-slot=sidebar-menu-action][data-hover-only=false]]/sidebar-menu-item:pr-8',\n        'tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"])]:group-hover/sidebar-menu-item:pr-8',\n        'tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"])]:group-focus-within/sidebar-menu-item:pr-8',\n        'tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"][data-hover-only=true][data-state=open])]:pr-8',\n\n        'tw:flex',\n        'tw:w-full',\n        'tw:gap-2',\n        'tw:items-center',\n        'tw:z-10',\n        'tw:font-normal',\n        'tw:text-sidebar-foreground',\n        'tw:p-2',\n        'tw:whitespace-nowrap',\n        'tw:overflow-hidden',\n        'tw:rounded-lg',\n        'tw:text-start',\n        'tw:no-underline',\n        'tw:select-none',\n\n        // hover\n        'tw:hover:not-disabled:bg-sidebar-accent',\n        'tw:hover:text-sidebar-accent-foreground',\n        'tw:focus:text-sidebar-accent-foreground', // anchor override\n        'tw:data-[slot=dropdown-menu-trigger]:data-[state=open]:bg-sidebar-accent',\n\n        // disabled\n        'tw:disabled:opacity-50',\n        'tw:disabled:cursor-not-allowed',\n\n        // active\n        'tw:aria-selected:font-medium',\n        'tw:aria-selected:bg-sidebar-accent',\n        'tw:aria-selected:cursor-default',\n        // active for links https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current\n        'tw:aria-[current=page]:bg-sidebar-accent',\n        'tw:aria-[current=page]:font-medium',\n        'tw:aria-[current=page]:focus:text-sidebar-accent-foreground',\n\n        // focus-visible\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:z-10',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        'tw:focus-visible:text-sidebar-foreground', // anchor override\n        className,\n      )}\n      // Explicitly set the tabIndex to 0 to ensure the button is focusable; in Safari, anchors are not focusable by default.\n      tabIndex={0}\n    >\n      {icon && <SidebarMenuIcon>{icon}</SidebarMenuIcon>}\n      <Slottable>{children}</Slottable>\n    </Component>\n  );\n\n  const shouldShowTooltip = state === 'collapsed' && mode !== 'expand-on-hover' && tooltip;\n\n  if (shouldShowTooltip) {\n    const tooltipPlacement = side === 'right' ? 'left' : 'right';\n\n    return (\n      <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild>\n        {button}\n      </Tooltip>\n    );\n  }\n\n  return button;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const SidebarMenuItem = ({ className, ...props }: Props) => (\n  <li className={cn('tw:group/sidebar-menu-item', 'tw:relative', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n};\n\nexport const SidebarMenuAction = ({\n  ref,\n  className,\n  asChild = false,\n  showOnHover = false,\n  children,\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'button';\n  return (\n    <Comp\n      {...props}\n      data-slot=\"sidebar-menu-action\"\n      data-hover-only={showOnHover}\n      ref={ref}\n      className={cn(\n        'tw:absolute',\n        'tw:top-1/2',\n        'tw:-translate-y-1/2',\n        'tw:right-3',\n        'tw:z-10',\n        'tw:p-0.5',\n\n        // display\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:aspect-square',\n\n        // hiding\n        'tw:data-[hover-only=true]:opacity-0',\n        'tw:group-data-[state=collapsed]/sidebar:hidden',\n\n        'tw:group-data-[state=expanded]/sidebar:group-hover/sidebar-menu-item:opacity-100',\n        'tw:group-data-[state=expanded]/sidebar:group-focus-within/sidebar-menu-item:opacity-100', // keyboard navigation\n\n        'tw:group-data-[state=expanded]/sidebar:data-[hover-only=true]:data-[state=open]:opacity-100', // for triggers (dropdown, tooltip, popover)\n\n        'tw:size-4',\n        'tw:rounded',\n\n        // icon styling\n        'tw:[&_svg]:shrink-0',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5',\n        'tw:[&_svg]:text-sidebar-accent-foreground',\n\n        // focus visible\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:z-10',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        'tw:focus-visible:text-sidebar-foreground',\n        className,\n      )}\n    >\n      {children}\n    </Comp>\n  );\n};\n","import { useRef } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Search } from '../../../icons';\nimport { cn, mergeRefs } from '../../../utils';\nimport { useSidebarInstance } from '../SidebarInstanceContext';\nimport { useSidebar } from '../SidebarProvider';\n\nconst wrapperClassnames = cn(\n  'tw:group/search-input',\n  'tw:relative',\n  'tw:flex',\n  'tw:items-center',\n  'tw:min-h-9',\n  'tw:rounded-lg',\n  'tw:border',\n  'tw:transition-all',\n\n  // collapsed state - transparent border/bg, hover like search button\n  'tw:group-data-[state=collapsed]/sidebar:cursor-pointer',\n  'tw:group-data-[state=collapsed]/sidebar:border-transparent',\n  'tw:group-data-[state=collapsed]/sidebar:hover:bg-sidebar-accent',\n\n  // expanded state - visible border/bg, padding for input, text cursor\n  'tw:group-data-[state=expanded]/sidebar:cursor-text',\n  'tw:group-data-[state=expanded]/sidebar:px-2',\n  'tw:group-data-[state=expanded]/sidebar:border-neutral-200',\n\n  // focus styles (only relevant when expanded)\n  'tw:focus-within:ring-2',\n  'tw:focus-within:ring-sidebar-ring/50',\n  'tw:focus-within:text-sidebar-foreground',\n);\n\ntype Props = Omit<ComponentProps<'input'>, 'prefix'>;\n\nexport const SidebarSearchInput = ({ ref: forwardedRef, className, ...inputProps }: Props) => {\n  const { side } = useSidebarInstance();\n  const { setMode } = useSidebar(side);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleFocus = () => {\n    setMode('expanded');\n  };\n\n  return (\n    <div className={cn(wrapperClassnames, className)}>\n      <Search\n        className={cn(\n          'tw:pointer-events-none',\n          'tw:absolute',\n          'tw:left-2',\n          'tw:size-4',\n\n          'tw:text-sidebar-primary',\n          'tw:group-data-[state=expanded]/sidebar:text-neutral-400',\n        )}\n      />\n      <input\n        ref={mergeRefs(forwardedRef ?? null, inputRef)}\n        {...inputProps}\n        onFocus={(e) => {\n          handleFocus();\n          inputProps.onFocus?.(e);\n        }}\n        className={cn(\n          'tw:w-full',\n          'tw:bg-transparent',\n          'tw:text-sm',\n          'tw:font-sans',\n          'tw:outline-hidden',\n          'tw:placeholder:text-neutral-400',\n\n          // collapsed state - visually hidden but still focusable for a11y\n          'tw:group-data-[state=collapsed]/sidebar:opacity-0',\n          'tw:group-data-[state=collapsed]/sidebar:cursor-pointer',\n\n          // expanded state\n          'tw:group-data-[state=expanded]/sidebar:pl-6',\n        )}\n      />\n    </div>\n  );\n};\n","import { useCallback, useState } from 'react';\nimport type { ComponentProps, HTMLAttributes, ReactNode } from 'react';\n\nimport { cn } from '../../../utils';\nimport { HoverCard } from '../../HoverCard';\nimport { useSidebarInstance } from '../SidebarInstanceContext';\nimport { useSidebar } from '../SidebarProvider';\n\nimport { SidebarMenuIcon } from './SidebarMenuIcon';\n\nconst Title = ({ children }: { children: ReactNode }) => (\n  <div className=\"tw:flex tw:select-none tw:gap-2 tw:text-sm tw:font-semibold\">{children}</div>\n);\n\nconst Content = ({ children, className }: { children: ReactNode; className?: string }) => (\n  <div\n    className={cn(\n      'tw:whitespace-pre-line',\n      'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:invisible',\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  icon: ReactNode;\n  title: ReactNode;\n};\n\nexport const SidebarMenuCard = ({ children, className, icon, title, ...rest }: Props) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const { side = 'left' } = useSidebarInstance();\n  const { state, isFill } = useSidebar(side);\n  const isExpanded = state === 'expanded' || isFill;\n\n  const handleOnOpenChange: ComponentProps<typeof HoverCard>['onOpenChange'] = useCallback(\n    (open: boolean) => {\n      setIsOpen(isExpanded || document.hidden ? false : open);\n    },\n    [isExpanded],\n  );\n\n  return (\n    <HoverCard open={isOpen} onOpenChange={handleOnOpenChange}>\n      <HoverCard.Trigger asChild>\n        <div\n          {...rest}\n          data-slot=\"sidebar-menu-card\"\n          tabIndex={isExpanded ? -1 : 0}\n          className={cn(\n            'tw:group/sidebar-menu-card',\n            'tw:peer/sidebar-menu-card',\n\n            'tw:overflow-hidden',\n\n            'tw:border',\n            'tw:border-sidebar-border',\n            'tw:rounded-2xl',\n\n            // layout\n            'tw:grid',\n            'tw:grid-rows-[1fr]',\n            'tw:flex-1',\n            'tw:p-4',\n\n            // icon collapsed\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:p-2',\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:border-transparent',\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:grid-rows-[18px]',\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:rounded-md',\n\n            // focus-visible\n            'tw:outline-hidden',\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:hover:bg-sidebar-accent',\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-2',\n            'tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-sidebar-ring/50',\n\n            // transition\n            'tw:transition-[padding,border]',\n            'tw:duration-(--sidebar-motion-duration)',\n            'tw:ease-(--sidebar-motion-easing)',\n            'tw:motion-reduce:transition-none',\n          )}\n        >\n          <div className=\"tw:flex tw:flex-col tw:gap-2\">\n            <Title>\n              <SidebarMenuIcon className=\"tw:p-px\">{icon}</SidebarMenuIcon>\n              {title}\n            </Title>\n            <Content className={className}>{children}</Content>\n          </div>\n        </div>\n      </HoverCard.Trigger>\n\n      <HoverCard.Content\n        sideOffset={10}\n        align=\"center\"\n        side={side === 'left' ? 'right' : 'left'}\n        className=\"tw:flex tw:flex-col tw:gap-2\"\n      >\n        <Title>{title}</Title>\n        <Content className={className}>{children}</Content>\n      </HoverCard.Content>\n    </HoverCard>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SidebarMenuBadge = ({ ref, className, ...props }: Props) => {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        // layout\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:z-20',\n\n        'tw:absolute',\n\n        // menu button position\n        'tw:peer-[]/sidebar-menu-button:right-2',\n        // menu card position\n        'tw:peer-[]/sidebar-menu-card:right-4',\n        'tw:peer-[]/sidebar-menu-card:top-4',\n\n        // icon collapsed position\n        'tw:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:right-0',\n        'tw:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:-top-1',\n\n        'tw:text-xs',\n        'tw:text-sidebar-primary-foreground',\n        'tw:bg-sidebar-primary',\n        'tw:px-1',\n        'tw:min-w-5',\n        'tw:h-5',\n        'tw:rounded-full',\n        'tw:pointer-events-none',\n        'tw:font-medium',\n        'tw:tabular-nums',\n        'tw:select-none',\n\n        'tw:transition-[top,right]',\n        'tw:delay-50',\n        'tw:duration-(--sidebar-motion-duration)',\n        'tw:ease-(--sidebar-motion-easing)',\n        'tw:motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { ChevronDown } from '../../../icons';\nimport { cn } from '../../../utils';\nimport { Collapsible } from '../../Collapsible';\nimport { DropdownMenu } from '../../DropdownMenu';\nimport { Tooltip } from '../../Tooltip';\nimport { useSidebarInstance } from '../SidebarInstanceContext';\n\nimport { SidebarMenuButton } from './SidebarMenuButton';\n\ntype Props = {\n  children: ReactNode;\n  icon: ReactNode;\n  isActive?: boolean;\n  label: string;\n} & Pick<ComponentProps<typeof Collapsible>, 'defaultOpen' | 'open' | 'onOpenChange'>;\n\nexport const SidebarMenuSub = ({\n  children,\n  icon,\n  isActive = false,\n  label,\n\n  // collapsible props\n  defaultOpen = false,\n  open: openProp,\n  onOpenChange,\n}: Props) => {\n  const { state, side, mode } = useSidebarInstance();\n  const [open, setOpen] = useState<'open-tooltip' | 'open-dropdown-menu' | null>(null);\n  const [innerCollapsibleOpen, setInnerCollapsibleOpen] = useState(defaultOpen);\n\n  const isCollapsibleOpen = (() => {\n    // In the collapsed sidebar state, it is always closed.\n    if (state === 'collapsed') return false;\n    return openProp ?? innerCollapsibleOpen;\n  })();\n\n  const isDropdownMenu = mode === 'expand-on-hover' || mode === 'collapsed';\n\n  const handleCollapsibleOpenChange = (open: boolean) => {\n    if (openProp === undefined) setInnerCollapsibleOpen(open);\n\n    onOpenChange?.(open);\n  };\n\n  const handleDropdownOpenChange = (open: boolean) => {\n    setOpen(open ? 'open-dropdown-menu' : null);\n  };\n\n  const handleTooltipOpenChange = (open: boolean) => {\n    setOpen((currentOpen) => {\n      // dropdown menu has higher priority than tooltip, if it's open, keep it open\n      if (currentOpen === 'open-dropdown-menu') return 'open-dropdown-menu';\n      // no need to show tooltip in expanded state, so return null\n      if (state === 'expanded') return null;\n      return open ? 'open-tooltip' : null;\n    });\n  };\n\n  if (isDropdownMenu) {\n    return (\n      <DropdownMenu open={open === 'open-dropdown-menu'} onOpenChange={handleDropdownOpenChange}>\n        <Tooltip.Root open={open === 'open-tooltip'} onOpenChange={handleTooltipOpenChange}>\n          <Tooltip.Trigger asChild>\n            <DropdownMenu.Trigger asChild>\n              <SidebarMenuButton\n                icon={icon}\n                data-active={isActive}\n                className={cn(\n                  'tw:data-[active=true]:bg-sidebar-accent',\n                  'tw:data-[active=true]:font-medium',\n                )}\n              >\n                {label}\n              </SidebarMenuButton>\n            </DropdownMenu.Trigger>\n          </Tooltip.Trigger>\n          <Tooltip.Content variant=\"action\" placement={side}>\n            {label}\n          </Tooltip.Content>\n        </Tooltip.Root>\n\n        <DropdownMenu.Content side={side} align=\"start\">\n          <DropdownMenu.Label>{label}</DropdownMenu.Label>\n          {children}\n        </DropdownMenu.Content>\n      </DropdownMenu>\n    );\n  }\n\n  return (\n    <Collapsible open={isCollapsibleOpen} onOpenChange={handleCollapsibleOpenChange}>\n      <Collapsible.Trigger asChild>\n        <SidebarMenuButton\n          icon={icon}\n          data-active={isActive && !isCollapsibleOpen}\n          className={cn(\n            'tw:group',\n            'tw:data-[active=true]:bg-sidebar-accent',\n            'tw:data-[active=true]:font-medium',\n          )}\n        >\n          {label}\n          <ChevronDown className=\"tw:ml-auto tw:size-5 tw:transition-transform tw:duration-200 tw:group-data-[state=open]:rotate-180\" />\n        </SidebarMenuButton>\n      </Collapsible.Trigger>\n      <Collapsible.Content>\n        <ul\n          data-sidebar=\"menu-sub\"\n          className={cn(\n            'tw:ml-3.5',\n            'tw:flex',\n            'tw:min-w-0',\n            'tw:translate-x-px',\n            'tw:flex-col',\n            'tw:gap-1',\n            'tw:border-l',\n            'tw:border-sidebar-border',\n            'tw:py-0.5',\n            'tw:pl-2.5',\n            'tw:pr-0',\n\n            // TODO: remove when bootstrap is gone\n            'tw:list-none',\n          )}\n        >\n          {children}\n        </ul>\n      </Collapsible.Content>\n    </Collapsible>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\n\nimport { cn } from '../../../utils';\nimport { DropdownMenu } from '../../DropdownMenu';\nimport { useSidebarInstance } from '../SidebarInstanceContext';\n\nimport { useDestinationDismiss } from './useDestinationDismiss';\n\ntype Props = ComponentProps<'button'> & {\n  asChild?: boolean;\n  /** Set by `Sidebar.Trigger` on the child it wraps — not part of a call site's API. */\n  'data-sidebar-trigger'?: string;\n};\n\nexport const SidebarMenuSubItem = ({\n  ref,\n  className,\n  asChild = false,\n  children,\n  disabled,\n  onClick,\n  'aria-current': ariaCurrent,\n  ...props\n}: Props) => {\n  const { mode } = useSidebarInstance();\n  // A nested destination is a destination: an expanded `Sidebar.SubMenu` renders its children\n  // here, and choosing one navigates the page the sheet is sitting on top of.\n  const handleClick = useDestinationDismiss<HTMLButtonElement>(props, onClick);\n  const isDropdownMenu = mode === 'collapsed' || mode === 'expand-on-hover';\n\n  if (isDropdownMenu) {\n    return (\n      <DropdownMenu.Item\n        aria-current={ariaCurrent}\n        asChild={asChild}\n        disabled={disabled}\n        className={cn(\n          // use sidebar colors for active and focus states\n          'tw:focus:!bg-sidebar-accent',\n          'tw:aria-[current=page]:bg-sidebar-accent',\n          'tw:aria-[current=page]:focus:text-sidebar-accent-foreground',\n          className,\n        )}\n      >\n        {children}\n      </DropdownMenu.Item>\n    );\n  }\n\n  const Component = asChild ? Root : 'button';\n\n  return (\n    <li className=\"tw:group/sidebar-menu-sub-item tw:relative\">\n      <Component\n        {...props}\n        onClick={handleClick}\n        ref={ref}\n        aria-current={ariaCurrent}\n        data-slot=\"sidebar-menu-sub-button\"\n        type=\"button\"\n        disabled={disabled}\n        className={cn(\n          // layout\n          'tw:flex',\n          'tw:items-center',\n          'tw:gap-2',\n\n          // sizing\n          'tw:h-7',\n          'tw:w-full',\n          'tw:min-w-0',\n          'tw:px-2',\n\n          //font\n          'tw:text-sidebar-foreground',\n          'tw:text-sm',\n          'tw:font-normal',\n          'tw:text-start',\n          'tw:whitespace-nowrap',\n\n          'tw:overflow-hidden',\n          'tw:rounded-md',\n          'tw:no-underline',\n\n          'tw:select-none',\n          'tw:outline-hidden',\n\n          // hover\n          'tw:hover:not-disabled:bg-sidebar-accent',\n          'tw:hover:text-sidebar-accent-foreground',\n          'tw:focus:text-sidebar-accent-foreground',\n\n          // active\n          'tw:aria-selected:font-medium',\n          'tw:aria-selected:bg-sidebar-accent',\n          'tw:aria-[current=page]:bg-sidebar-accent',\n          'tw:aria-[current=page]:font-medium',\n\n          // disabled\n          'tw:disabled:opacity-50',\n          'tw:disabled:cursor-not-allowed',\n\n          // focus-visible\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-sidebar-ring/50',\n          className,\n        )}\n      >\n        <Slottable>{children}</Slottable>\n      </Component>\n    </li>\n  );\n};\n","import { type MouseEventHandler, useCallback, useEffect, useRef } from 'react';\n\nimport { useSidebar } from './SidebarProvider';\nimport type { SidebarSide } from './types';\nimport { SidebarWidthInPx } from './utils';\n\nconst DEFAULT_MIN_WIDTH = 384;\nconst DEFAULT_MAX_WIDTH = 800;\n\ntype UseResizeSidebarInput = {\n  side: SidebarSide;\n  minWidth?: number;\n  maxWidth?: number;\n};\n\nexport const useResizeSidebar = ({\n  side,\n  minWidth = DEFAULT_MIN_WIDTH,\n  maxWidth = DEFAULT_MAX_WIDTH,\n}: UseResizeSidebarInput) => {\n  const { onWidthChange, baseWidth, isFill, state, isDragging, setIsDragging, setDragWidth } =\n    useSidebar(side);\n  const isResizable = state === 'expanded' && !isFill && onWidthChange !== undefined;\n  const startXRef = useRef(0);\n  const startWidthRef = useRef(0);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  useEffect(() => {\n    return () => {\n      cleanupRef.current?.();\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n    };\n  }, []);\n\n  const clampToRange = useCallback(\n    (width: number) => {\n      const effectiveMax = Math.max(minWidth, Math.min(maxWidth, window.innerWidth * 0.5));\n      return Math.round(Math.min(effectiveMax, Math.max(minWidth, width)));\n    },\n    [minWidth, maxWidth],\n  );\n\n  const handleMouseDown: MouseEventHandler = useCallback(\n    (e) => {\n      if (!isResizable || isDragging) return;\n\n      cleanupRef.current?.();\n      setIsDragging(true);\n\n      startWidthRef.current = baseWidth ?? SidebarWidthInPx.MIN_DEFAULT;\n      startXRef.current = e.clientX;\n\n      const handleMouseMove = (moveEvent: MouseEvent) => {\n        const delta =\n          side === 'right'\n            ? startXRef.current - moveEvent.clientX\n            : moveEvent.clientX - startXRef.current;\n        setDragWidth(clampToRange(startWidthRef.current + delta));\n      };\n\n      const handleMouseUp = (upEvent: MouseEvent) => {\n        const delta =\n          side === 'right'\n            ? startXRef.current - upEvent.clientX\n            : upEvent.clientX - startXRef.current;\n        onWidthChange?.(clampToRange(startWidthRef.current + delta));\n        setIsDragging(false);\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n        cleanupRef.current = null;\n      };\n\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n\n      cleanupRef.current = () => {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n        setIsDragging(false);\n        setDragWidth(null);\n      };\n    },\n    [\n      isResizable,\n      isDragging,\n      side,\n      onWidthChange,\n      baseWidth,\n      setIsDragging,\n      setDragWidth,\n      clampToRange,\n    ],\n  );\n\n  const handleDoubleClick = useCallback(() => {\n    onWidthChange?.(minWidth);\n  }, [onWidthChange, minWidth]);\n\n  return {\n    handleProps: {\n      onMouseDown: handleMouseDown,\n      onDoubleClick: handleDoubleClick,\n    },\n    isDragging,\n    isResizable,\n  };\n};\n","import { cn } from '../../utils';\n\nimport type { SidebarSide } from './types';\nimport { useResizeSidebar } from './useResizeSidebar';\n\ntype Props = {\n  side: SidebarSide;\n  minWidth?: number;\n  maxWidth?: number;\n};\n\nexport const SidebarResizeHandle = ({ side, minWidth, maxWidth }: Props) => {\n  const { handleProps, isResizable } = useResizeSidebar({ side, minWidth, maxWidth });\n\n  if (!isResizable) return null;\n\n  return (\n    <div\n      {...handleProps}\n      aria-hidden\n      className={cn(\n        'tw:absolute tw:inset-y-0 tw:z-10 tw:w-3',\n        side === 'right' ? 'tw:left-0' : 'tw:right-0',\n        'tw:cursor-col-resize',\n      )}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Separator } from '../Separator';\n\ntype Props = Omit<ComponentProps<typeof Separator>, 'orientation' | 'size'>;\n\nexport const SidebarSeparator = ({ className, ...props }: Props) => (\n  <Separator\n    {...props}\n    orientation=\"horizontal\"\n    size=\"full\"\n    className={cn('tw:before:bg-sidebar-border tw:p-2', className)}\n  />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\nimport { useSidebar } from './SidebarProvider';\nimport type { SidebarSide } from './types';\n\ntype Props = ComponentProps<typeof Slot> & {\n  side?: SidebarSide;\n  hideWhenCollapsed?: boolean;\n};\n\nexport const SidebarTrigger = ({\n  side = 'left',\n  onClick,\n  hideWhenCollapsed = false,\n  className,\n  ...rest\n}: Props) => {\n  const { toggle, state, isMobile, isMobileOpen } = useSidebar(side);\n\n  const handleOnClick: MouseEventHandler<HTMLElement> = (event) => {\n    toggle();\n    onClick?.(event);\n  };\n\n  return (\n    <Slot\n      {...rest}\n      // What this button does to the rail, for anyone who cannot see it.\n      //\n      // - Stating `aria-expanded` is this primitive's job, on both axes, and the two axes\n      //   answer different questions: a sheet is open or closed, a column expanded or collapsed.\n      //   A call site supplying its own would win the slot merge — a child's non-event prop\n      //   beats the one passed here — and announce the column's mode while the rail is a sheet.\n      // - `aria-haspopup` is the one that does not carry over: a column is not a dialog, and\n      //   on a phone the sheet has no `Sheet.Trigger` of its own to say that it is.\n      aria-expanded={isMobile ? isMobileOpen : state === 'expanded'}\n      {...(isMobile ? { 'aria-haspopup': 'dialog' as const } : null)}\n      // Tells a `Sidebar.MenuButton` underneath that this click is about the rail itself, not a\n      // destination in it. Without it the button's own mobile dismissal runs first (a slot\n      // composes the child's handler before its own) and `toggle` then reopens the sheet it\n      // just closed. Lands on the DOM node when the child is a plain element; harmless there.\n      data-sidebar-trigger=\"\"\n      onClick={handleOnClick}\n      className={cn(\n        {\n          'tw:group-data-[state=collapsed]/sidebar:hidden': hideWhenCollapsed,\n        },\n        className,\n      )}\n    />\n  );\n};\n","import { useEffect, useMemo, useRef } from 'react';\nimport type { ComponentProps, CSSProperties, ReactNode, TransitionEventHandler } from 'react';\n\nimport { cn } from '../../utils';\nimport { Sheet } from '../Sheet';\nimport { useThemeScopeContainer } from '../ThemeProvider/ThemeScope';\nimport { TooltipProvider } from '../Tooltip';\n\nimport { useTransitionPresence } from './SidebarProvider/useTransitionPresence';\nimport { SidebarContent } from './SidebarContent';\nimport { SidebarFillTrigger } from './SidebarFillTrigger';\nimport { SidebarFooter } from './SidebarFooter';\nimport {\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n} from './SidebarGroup';\nimport { SidebarHeader } from './SidebarHeader';\nimport { SidebarInstanceContext } from './SidebarInstanceContext';\nimport {\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuCard,\n  SidebarMenuIcon,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarSearchInput,\n} from './SidebarMenu';\nimport { useSidebar } from './SidebarProvider';\nimport { SidebarResizeHandle } from './SidebarResizeHandle';\nimport { SidebarSeparator } from './SidebarSeparator';\nimport { SidebarTrigger } from './SidebarTrigger';\nimport type { SidebarSide } from './types';\nimport { SidebarWidthInPx } from './utils';\n\n/**\n * `className` and `style` land on the inner wrapper (the rail's own box); everything else\n * (`data-*`, `aria-*`, handlers) lands on the outer element, so a `ThemeScope` around the\n * sidebar reaches it.\n */\ntype Props = Omit<ComponentProps<'div'>, 'children' | 'className' | 'style' | 'id'> & {\n  children: ReactNode;\n  className?: string;\n  id?: string;\n  side?: SidebarSide;\n  style?: CSSProperties;\n  container?: boolean;\n  keepMounted?: boolean;\n  /** Hold the panel's content back until it has finished sliding in. */\n  mountAfterEnter?: boolean;\n  resizable?: boolean;\n  /**\n   * Accessible name for the sheet the rail becomes under the mobile breakpoint.\n   *\n   * - Defaults to `Navigation` on the left and `Side panel` on the right.\n   * - Rendered visually hidden — the sheet is a dialog and needs a name, but the rail's\n   *   own header is already the visible one.\n   */\n  mobileTitle?: string;\n};\n\nexport const Sidebar = ({\n  children,\n  className,\n  id,\n  side = 'left',\n  style,\n  container = false,\n  keepMounted,\n  mountAfterEnter,\n  resizable = false,\n  mobileTitle,\n  ...rest\n}: Props) => {\n  const oppositeSide = side === 'left' ? 'right' : 'left';\n  const {\n    setSidebarElement,\n    state,\n    mode,\n    isFill,\n    widths,\n    collapsible,\n    variant,\n    isDragging,\n    isMobile,\n    isMobileOpen,\n    setMobileOpen,\n  } = useSidebar(side);\n\n  // Where the sheet is portalled.\n  //\n  // - A `ThemeScope` publishes a body-level container carrying its scheme and its tokens;\n  //   `Sheet.Content` mounts at the end of <body>, so without it the sheet's own chrome\n  //   would paint in the page's scheme around a rail rendered in the scope's.\n  // - `null` outside a scope, which is Radix's own default.\n  const themeScopeContainer = useThemeScopeContainer();\n\n  const { isMounted, completeUnmount } = useTransitionPresence({\n    mounted: collapsible !== 'off-canvas' || mode !== 'collapsed',\n    keepMounted,\n    mountAfterEnter,\n  });\n  const { widths: oppositeWidths } = useSidebar(oppositeSide);\n  const sidebarInstanceContextValue = useMemo(() => ({ state, mode, side }), [state, mode, side]);\n\n  // Where focus goes when the sheet closes.\n  //\n  // - Radix returns focus to a `Dialog.Trigger`, and this sheet has none: it is opened from a\n  //   `Sidebar.Trigger` that may sit anywhere in the page chrome. Without this, closing drops\n  //   focus onto <body> and a keyboard user restarts at the top of the document.\n  // - Recorded only while the sheet is closed, so the opener is the last element tracked and\n  //   focus moving inside the sheet does not overwrite it.\n  // - The node is re-checked on close: a trigger that unmounted with the page it belonged to\n  //   would otherwise take focus into a detached tree.\n  const focusOriginRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!isMobile || isMobileOpen) return;\n\n    const remember = (event: FocusEvent) => {\n      if (event.target instanceof HTMLElement) focusOriginRef.current = event.target;\n    };\n\n    document.addEventListener('focusin', remember);\n\n    return () => document.removeEventListener('focusin', remember);\n  }, [isMobile, isMobileOpen]);\n\n  // Where focus goes when the viewport grows out from under an open sheet.\n  //\n  // - The rail is handed back to the grid by unmounting the sheet, not by closing it, so\n  //   Radix's `onCloseAutoFocus` never runs and whatever was focused inside the portal goes\n  //   with it — a keyboard user restarts at the top of the document.\n  // - The opener is the target here too. A page that only shows its trigger below the\n  //   breakpoint has just hidden it, and `.focus()` on a hidden element is a no-op — the\n  //   same place focus would have landed anyway.\n  const wasSheetUpRef = useRef(false);\n\n  useEffect(() => {\n    const wasSheetUp = wasSheetUpRef.current;\n    wasSheetUpRef.current = isMobile && isMobileOpen;\n\n    if (!wasSheetUp || isMobile) return;\n\n    const origin = focusOriginRef.current;\n    if (origin?.isConnected) origin.focus();\n  }, [isMobile, isMobileOpen]);\n\n  const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (event) => {\n    // Ignore bubbled transitions from child elements\n    if (event.target !== event.currentTarget) return;\n    completeUnmount();\n  };\n\n  const styles = {\n    // The caller's vars ride on this element too (a `ThemeScope`'s tokens must reach the\n    // gap and the wrapper alike); the sidebar's own geometry vars are listed after, so they win here.\n    ...style,\n    '--sidebar-floating-padding': `${SidebarWidthInPx.FLOATING_VARIANT_PADDING}px`,\n    '--sidebar-width': `${widths.sidebar}px`,\n    '--sidebar-width-gap': `${widths.gap}px`,\n    '--opposite-sidebar-width': `${oppositeWidths.fill}px`,\n  } as CSSProperties;\n\n  if (variant === 'none') return null;\n\n  // The rail's own data attributes and `group/sidebar` scope, minus the geometry: every\n  // child selector (`group-data-[state=expanded]/sidebar:…`) has to keep resolving inside\n  // the sheet, while the column, the gap and the fixed wrapper have no meaning there.\n  const railAttributes = {\n    'data-state': state,\n    'data-side': side,\n    'data-mode': mode,\n    'data-collapsible': collapsible,\n    'data-variant': variant,\n    'data-fill': isFill,\n  } as const;\n\n  // `keepMounted` and `mountAfterEnter` are deliberately not honoured here: both exist to\n  // control when the panel's content mounts relative to the column's slide, and the sheet\n  // mounts its content on open and unmounts it on close — the guarantee `mountAfterEnter`\n  // asks for, without a transition to wait on.\n  if (isMobile) {\n    return (\n      <TooltipProvider>\n        <SidebarInstanceContext value={sidebarInstanceContextValue}>\n          <Sheet open={isMobileOpen} onOpenChange={setMobileOpen}>\n            <Sheet.Content\n              side={side}\n              container={themeScopeContainer ?? undefined}\n              // The sheet's own chrome, and nothing of the caller's: its width, its ground,\n              // and the tokens it paints them with. Those reach it through the container\n              // above — a `ThemeScope` carries its scheme and its vars on the node it\n              // portals into — so the caller's `style` stays on the rail, where a `width`\n              // or a `position` meant for a column cannot fight the sheet's geometry.\n              className=\"tw:w-[min(20rem,85vw)] tw:bg-sidebar tw:text-sidebar-foreground tw:p-0\"\n              onCloseAutoFocus={(event) => {\n                const origin = focusOriginRef.current;\n                if (!origin?.isConnected) return;\n                event.preventDefault();\n                origin.focus();\n              }}\n            >\n              <Sheet.Title visuallyHidden>\n                {mobileTitle ?? (side === 'left' ? 'Navigation' : 'Side panel')}\n              </Sheet.Title>\n              {/* No `ref={setSidebarElement}`: that element only drives `expand-on-hover`, which\n                  a sheet has no state to expand from, and a phone has no hover to track. */}\n              <div\n                {...rest}\n                {...railAttributes}\n                id={id}\n                // The rail's own box, so `className` and `style` land together here the way\n                // they land on the wrapper above the breakpoint. A class written against the\n                // column's geometry has nothing to act on in a sheet, but dropping the prop\n                // would drop a `ThemeScope`'s class and every rail-level style with it.\n                style={style}\n                className={cn(\n                  'tw:flex tw:min-h-0 tw:flex-1 tw:flex-col',\n                  { 'tw:group/sidebar tw:peer/sidebar': !container },\n                  className,\n                )}\n              >\n                <div\n                  data-slot=\"sidebar\"\n                  className={cn(\n                    'tw:bg-sidebar',\n                    'tw:relative',\n                    'tw:flex',\n                    'tw:flex-col',\n                    'tw:size-full',\n                    'tw:overflow-hidden',\n                    'tw:border-sidebar-border',\n                    'tw:group-[]/sidebar:pt-2',\n                  )}\n                >\n                  {children}\n                </div>\n              </div>\n            </Sheet.Content>\n          </Sheet>\n        </SidebarInstanceContext>\n      </TooltipProvider>\n    );\n  }\n\n  return (\n    <TooltipProvider>\n      <SidebarInstanceContext value={sidebarInstanceContextValue}>\n        <div\n          {...rest}\n          {...railAttributes}\n          id={id}\n          ref={setSidebarElement}\n          style={styles}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:flex',\n            'tw:relative',\n            // expand-on-hover needs a higher z-index so the expanding sidebar\n            // overlaps the opposite filled sidebar instead of sliding behind it\n            mode === 'expand-on-hover' ? 'tw:z-[51]' : 'tw:z-50',\n            {\n              // group/peer scoping is only for page-level sidebars — container\n              // sidebars are nested inside other components and must not leak\n              // group/peer selectors to avoid clashing with the outer sidebar\n              'tw:group/sidebar tw:peer/sidebar': !container,\n            },\n\n            // ── GAP DIV ──\n            'tw:[&>[data-slot=gap]]:w-(--sidebar-width-gap)',\n            'tw:[&[data-side=right]>[data-slot=gap]]:rotate-180',\n\n            // ── SIDEBAR-WRAPPER DIV ──\n            'tw:[&>[data-slot=sidebar-wrapper]]:w-(--sidebar-width)',\n            'tw:[&[data-side=left]>[data-slot=sidebar-wrapper]]:left-0',\n            'tw:[&[data-side=right]>[data-slot=sidebar-wrapper]]:right-0',\n            // Off-canvas hiding.\n            // - `translate-x-*` sets the standalone `translate` property, not `transform`.\n            // - The wrapper's transition list must therefore name `translate`, or the rail\n            //   teleports instead of sliding.\n            'tw:[&[data-state=collapsed][data-collapsible=off-canvas][data-side=left]>[data-slot=sidebar-wrapper]]:-translate-x-full',\n            'tw:[&[data-state=collapsed][data-collapsible=off-canvas][data-side=right]>[data-slot=sidebar-wrapper]]:translate-x-full',\n\n            // floating variants styles\n            'tw:[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]]:pt-(--sidebar-floating-padding)',\n            'tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]]:pr-(--sidebar-floating-padding)',\n            'tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]]:pl-(--sidebar-floating-padding)',\n\n            'tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]]:p-(--sidebar-floating-padding)',\n\n            // fill state\n            'tw:[&[data-fill=true]>[data-slot=sidebar-wrapper]]:!w-[calc(100svw-var(--opposite-sidebar-width))]',\n            'tw:[&[data-fill=true][data-variant=floating]>[data-slot=sidebar-wrapper]]:!p-(--sidebar-floating-padding)',\n            'tw:[&[data-fill=true][data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!rounded-tr-xl',\n            'tw:[&[data-fill=true][data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!rounded-tl-xl',\n\n            // ── SIDEBAR DIV (INNERMOST) ──\n            'tw:[&[data-variant=inset][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-r',\n            'tw:[&[data-variant=inset][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-l',\n            'tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:shadow',\n            'tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-xl',\n            'tw:[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:shadow',\n            'tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-tr-xl',\n            'tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-tl-xl',\n            // The rail's inner edge, mirroring `inset`. The shadow above cannot carry\n            // this alone: a shadow needs a lighter ground to fall on, and on the dark\n            // scheme `--sidebar` is darker than `--background`, so the rail's edge\n            // dissolves into the page beside it.\n            'tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-r',\n            'tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-l',\n\n            // Ease-out (linear reads as choppy). The page reflowing beside the rail is layout every frame;\n            // `motion-reduce` is the lever for weak machines.\n            isDragging\n              ? 'tw:transition-none'\n              : 'tw:transition-[width,translate,transform] tw:duration-(--sidebar-motion-duration) tw:ease-(--sidebar-motion-easing) tw:motion-reduce:transition-none',\n          )}\n        >\n          <div\n            data-slot=\"gap\"\n            className={cn(\n              'tw:bg-transparent',\n              isDragging\n                ? ''\n                : 'tw:transition-[width] tw:duration-(--sidebar-motion-duration) tw:ease-(--sidebar-motion-easing) tw:motion-reduce:transition-none',\n            )}\n          />\n\n          <div\n            data-slot=\"sidebar-wrapper\"\n            onTransitionEnd={handleTransitionEnd}\n            className={cn(\n              'tw:fixed',\n              'tw:inset-y-0',\n              'tw:border-border',\n\n              // transition\n              isDragging\n                ? 'tw:transition-none'\n                : 'tw:transition-[width,translate,transform] tw:duration-(--sidebar-motion-duration) tw:ease-(--sidebar-motion-easing) tw:motion-reduce:transition-none',\n              // Composite the slide.\n              'tw:transform-gpu',\n              className,\n            )}\n            style={style}\n          >\n            {resizable && <SidebarResizeHandle side={side} />}\n            <div\n              data-slot=\"sidebar\"\n              className={cn(\n                'tw:bg-sidebar',\n                'tw:overflow-hidden',\n                'tw:relative',\n                'tw:flex',\n                'tw:flex-col',\n                'tw:size-full',\n                'tw:border-sidebar-border',\n                'tw:group-[]/sidebar:pt-2',\n              )}\n            >\n              {isMounted ? children : null}\n            </div>\n          </div>\n        </div>\n      </SidebarInstanceContext>\n    </TooltipProvider>\n  );\n};\n\n// main layout\nSidebar.Header = SidebarHeader;\nSidebar.Content = SidebarContent;\nSidebar.Footer = SidebarFooter;\nSidebar.Trigger = SidebarTrigger;\nSidebar.FillTrigger = SidebarFillTrigger;\nSidebar.Separator = SidebarSeparator;\nSidebar.MenuIcon = SidebarMenuIcon;\n\n// group features\nSidebar.Group = SidebarGroup;\nSidebar.GroupLabel = SidebarGroupLabel;\nSidebar.GroupContent = SidebarGroupContent;\nSidebar.GroupAction = SidebarGroupAction;\n\n// menu features\nSidebar.Menu = SidebarMenu;\nSidebar.MenuItem = SidebarMenuItem;\nSidebar.MenuButton = SidebarMenuButton;\nSidebar.MenuAction = SidebarMenuAction;\nSidebar.SearchInput = SidebarSearchInput;\nSidebar.MenuCard = SidebarMenuCard;\nSidebar.MenuBadge = SidebarMenuBadge;\n\n// sub-menu features\nSidebar.SubMenu = SidebarMenuSub;\nSidebar.SubItem = SidebarMenuSubItem;\n"],"mappings":"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"}

package/dist/{Slider-Bv0B6lI0.js → Slider-DLclvRws.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-DnkrFYqY.js";
+import { Tooltip, TooltipProvider } from "./utils-BW4AE8VP.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
 import { argoVariants } from "./Button-DsRrU5F1.js";
 import { useCallback, useRef, useState } from "react";
@@ -124,4 +124,4 @@ const Slider = ({ ref, className, value, defaultValue, min = 0, max = 100, onVal
 //#endregion
 export { Slider };
 
-//# sourceMappingURL=Slider-Bv0B6lI0.js.map
+//# sourceMappingURL=Slider-DLclvRws.js.map

package/dist/{Slider-Bv0B6lI0.js.map → Slider-DLclvRws.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Slider-Bv0B6lI0.js","names":["RadixThumb","RadixTrack","RadixRange"],"sources":["../src/components/Slider/useInteracting.ts","../src/components/Slider/SliderThumb.tsx","../src/components/Slider/SliderTrack.tsx","../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ntype InteractingRef = (element: HTMLElement | null) => void;\n\nexport const useInteracting = (): readonly [boolean, InteractingRef] => {\n  const [isInteracting, setIsInteracting] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  const setRef = useCallback<InteractingRef>((element) => {\n    cleanupRef.current?.();\n    cleanupRef.current = null;\n    if (!element) return;\n\n    let hover = false;\n    let focus = false;\n    let press = false;\n    const recompute = () => setIsInteracting(hover || focus || press);\n\n    const handleEnter = () => {\n      hover = true;\n      recompute();\n    };\n    const handleLeave = () => {\n      hover = false;\n      recompute();\n    };\n    const handleFocus = () => {\n      focus = true;\n      recompute();\n    };\n    const handleBlur = () => {\n      focus = false;\n      recompute();\n    };\n    const handleDown = () => {\n      press = true;\n      recompute();\n    };\n    const handleRelease = () => {\n      press = false;\n      recompute();\n    };\n\n    element.addEventListener('pointerenter', handleEnter);\n    element.addEventListener('pointerleave', handleLeave);\n    element.addEventListener('focus', handleFocus);\n    element.addEventListener('blur', handleBlur);\n    element.addEventListener('pointerdown', handleDown);\n    element.addEventListener('pointerup', handleRelease);\n    element.addEventListener('pointercancel', handleRelease);\n\n    cleanupRef.current = () => {\n      element.removeEventListener('pointerenter', handleEnter);\n      element.removeEventListener('pointerleave', handleLeave);\n      element.removeEventListener('focus', handleFocus);\n      element.removeEventListener('blur', handleBlur);\n      element.removeEventListener('pointerdown', handleDown);\n      element.removeEventListener('pointerup', handleRelease);\n      element.removeEventListener('pointercancel', handleRelease);\n    };\n  }, []);\n\n  return [isInteracting, setRef] as const;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Thumb as RadixThumb } from '@radix-ui/react-slider';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { argoVariants } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nimport { useInteracting } from './useInteracting';\n\ntype Props = ComponentProps<typeof RadixThumb> & {\n  tooltip?: ReactNode;\n  tooltipSide?: ComponentProps<typeof Tooltip.Content>['placement'];\n};\n\nexport const SliderThumb = ({\n  ref: forwardedRef,\n  className,\n  tooltip,\n  tooltipSide = 'top',\n  ...props\n}: Props) => {\n  const [isInteracting, interactingRef] = useInteracting();\n\n  const thumb = (\n    <RadixThumb\n      ref={mergeRefs(forwardedRef ?? null, interactingRef)}\n      className={cn(\n        argoVariants({ variant: 'outline', size: 'icon-sm' }),\n\n        // layout\n        'tw:p-0',\n        'tw:active:opacity-100',\n        'tw:block',\n        'tw:size-4',\n        'tw:rounded-full',\n\n        // cursors\n        'tw:data-[disabled]:cursor-not-allowed',\n        'tw:[&:not([data-disabled])]:cursor-pointer',\n\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (tooltip == null) return thumb;\n\n  return (\n    <Tooltip.Root open={isInteracting}>\n      <Tooltip.Trigger asChild>{thumb}</Tooltip.Trigger>\n      <Tooltip.Content variant=\"action\" placement={tooltipSide}>\n        {tooltip}\n      </Tooltip.Content>\n    </Tooltip.Root>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Range as RadixRange, Track as RadixTrack } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof RadixTrack> & { rangeClassName?: string };\n\nexport const SliderTrack = ({ ref, className, ...props }: Props) => (\n  <RadixTrack\n    ref={ref}\n    className={cn(\n      // layout\n      'tw:relative',\n      'tw:grow',\n      'tw:w-full',\n      'tw:h-1.5',\n      'tw:overflow-hidden',\n\n      // style\n      'tw:rounded-full',\n      'tw:bg-muted',\n\n      // vertical orientation\n      'tw:data-[orientation=vertical]:h-full',\n      'tw:data-[orientation=vertical]:w-1.5',\n    )}\n    {...props}\n  >\n    <RadixRange\n      className={cn(\n        // layout\n        'tw:absolute',\n        'tw:h-full',\n\n        // style\n        'tw:bg-primary',\n\n        // vertical orientation\n        'tw:data-[orientation=vertical]:w-full',\n\n        className,\n      )}\n    />\n  </RadixTrack>\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\nimport { TooltipProvider } from '../Tooltip';\n\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nexport type ThumbTooltipFn = (value: number, index: number) => ReactNode;\n\ntype Props = ComponentProps<typeof Root> & {\n  thumbTooltip?: ThumbTooltipFn;\n  thumbTooltipSide?: ComponentProps<typeof SliderThumb>['tooltipSide'];\n  rangeClassName?: string;\n};\n\nexport const Slider = ({\n  ref,\n  className,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  onValueChange,\n  thumbTooltip,\n  thumbTooltipSide,\n  rangeClassName,\n  ...rest\n}: Props) => {\n  const isControlled = Array.isArray(value);\n\n  const [internalValues, setInternalValues] = useState<number[]>(() => {\n    if (isControlled) return value;\n    if (Array.isArray(defaultValue)) return defaultValue;\n    return [min];\n  });\n\n  const liveValues = isControlled ? value : internalValues;\n\n  const handleValueChange = (next: number[]) => {\n    if (!isControlled) setInternalValues(next);\n    onValueChange?.(next);\n  };\n\n  const body = (\n    <Root\n      ref={ref}\n      value={liveValues}\n      min={min}\n      max={max}\n      onValueChange={handleValueChange}\n      className={cn(\n        'tw:relative',\n        'tw:flex',\n        'tw:items-center',\n        'tw:w-full',\n\n        'tw:touch-none',\n        'tw:select-none',\n\n        'tw:data-[orientation=vertical]:h-full',\n        'tw:data-[orientation=vertical]:w-auto',\n        'tw:data-[orientation=vertical]:flex-col',\n\n        'tw:data-[disabled]:opacity-50',\n        className,\n      )}\n      {...rest}\n    >\n      <SliderTrack className={rangeClassName} />\n      {liveValues.map((thumbValue, index) => (\n        <SliderThumb\n          // oxlint-disable-next-line react/no-array-index-key\n          key={index}\n          tooltip={thumbTooltip?.(thumbValue, index)}\n          tooltipSide={thumbTooltipSide}\n        />\n      ))}\n    </Root>\n  );\n\n  return thumbTooltip ? <TooltipProvider>{body}</TooltipProvider> : body;\n};\n"],"mappings":"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"}
+{"version":3,"file":"Slider-DLclvRws.js","names":["RadixThumb","RadixTrack","RadixRange"],"sources":["../src/components/Slider/useInteracting.ts","../src/components/Slider/SliderThumb.tsx","../src/components/Slider/SliderTrack.tsx","../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ntype InteractingRef = (element: HTMLElement | null) => void;\n\nexport const useInteracting = (): readonly [boolean, InteractingRef] => {\n  const [isInteracting, setIsInteracting] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  const setRef = useCallback<InteractingRef>((element) => {\n    cleanupRef.current?.();\n    cleanupRef.current = null;\n    if (!element) return;\n\n    let hover = false;\n    let focus = false;\n    let press = false;\n    const recompute = () => setIsInteracting(hover || focus || press);\n\n    const handleEnter = () => {\n      hover = true;\n      recompute();\n    };\n    const handleLeave = () => {\n      hover = false;\n      recompute();\n    };\n    const handleFocus = () => {\n      focus = true;\n      recompute();\n    };\n    const handleBlur = () => {\n      focus = false;\n      recompute();\n    };\n    const handleDown = () => {\n      press = true;\n      recompute();\n    };\n    const handleRelease = () => {\n      press = false;\n      recompute();\n    };\n\n    element.addEventListener('pointerenter', handleEnter);\n    element.addEventListener('pointerleave', handleLeave);\n    element.addEventListener('focus', handleFocus);\n    element.addEventListener('blur', handleBlur);\n    element.addEventListener('pointerdown', handleDown);\n    element.addEventListener('pointerup', handleRelease);\n    element.addEventListener('pointercancel', handleRelease);\n\n    cleanupRef.current = () => {\n      element.removeEventListener('pointerenter', handleEnter);\n      element.removeEventListener('pointerleave', handleLeave);\n      element.removeEventListener('focus', handleFocus);\n      element.removeEventListener('blur', handleBlur);\n      element.removeEventListener('pointerdown', handleDown);\n      element.removeEventListener('pointerup', handleRelease);\n      element.removeEventListener('pointercancel', handleRelease);\n    };\n  }, []);\n\n  return [isInteracting, setRef] as const;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Thumb as RadixThumb } from '@radix-ui/react-slider';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { argoVariants } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nimport { useInteracting } from './useInteracting';\n\ntype Props = ComponentProps<typeof RadixThumb> & {\n  tooltip?: ReactNode;\n  tooltipSide?: ComponentProps<typeof Tooltip.Content>['placement'];\n};\n\nexport const SliderThumb = ({\n  ref: forwardedRef,\n  className,\n  tooltip,\n  tooltipSide = 'top',\n  ...props\n}: Props) => {\n  const [isInteracting, interactingRef] = useInteracting();\n\n  const thumb = (\n    <RadixThumb\n      ref={mergeRefs(forwardedRef ?? null, interactingRef)}\n      className={cn(\n        argoVariants({ variant: 'outline', size: 'icon-sm' }),\n\n        // layout\n        'tw:p-0',\n        'tw:active:opacity-100',\n        'tw:block',\n        'tw:size-4',\n        'tw:rounded-full',\n\n        // cursors\n        'tw:data-[disabled]:cursor-not-allowed',\n        'tw:[&:not([data-disabled])]:cursor-pointer',\n\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (tooltip == null) return thumb;\n\n  return (\n    <Tooltip.Root open={isInteracting}>\n      <Tooltip.Trigger asChild>{thumb}</Tooltip.Trigger>\n      <Tooltip.Content variant=\"action\" placement={tooltipSide}>\n        {tooltip}\n      </Tooltip.Content>\n    </Tooltip.Root>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Range as RadixRange, Track as RadixTrack } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof RadixTrack> & { rangeClassName?: string };\n\nexport const SliderTrack = ({ ref, className, ...props }: Props) => (\n  <RadixTrack\n    ref={ref}\n    className={cn(\n      // layout\n      'tw:relative',\n      'tw:grow',\n      'tw:w-full',\n      'tw:h-1.5',\n      'tw:overflow-hidden',\n\n      // style\n      'tw:rounded-full',\n      'tw:bg-muted',\n\n      // vertical orientation\n      'tw:data-[orientation=vertical]:h-full',\n      'tw:data-[orientation=vertical]:w-1.5',\n    )}\n    {...props}\n  >\n    <RadixRange\n      className={cn(\n        // layout\n        'tw:absolute',\n        'tw:h-full',\n\n        // style\n        'tw:bg-primary',\n\n        // vertical orientation\n        'tw:data-[orientation=vertical]:w-full',\n\n        className,\n      )}\n    />\n  </RadixTrack>\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\nimport { TooltipProvider } from '../Tooltip';\n\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nexport type ThumbTooltipFn = (value: number, index: number) => ReactNode;\n\ntype Props = ComponentProps<typeof Root> & {\n  thumbTooltip?: ThumbTooltipFn;\n  thumbTooltipSide?: ComponentProps<typeof SliderThumb>['tooltipSide'];\n  rangeClassName?: string;\n};\n\nexport const Slider = ({\n  ref,\n  className,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  onValueChange,\n  thumbTooltip,\n  thumbTooltipSide,\n  rangeClassName,\n  ...rest\n}: Props) => {\n  const isControlled = Array.isArray(value);\n\n  const [internalValues, setInternalValues] = useState<number[]>(() => {\n    if (isControlled) return value;\n    if (Array.isArray(defaultValue)) return defaultValue;\n    return [min];\n  });\n\n  const liveValues = isControlled ? value : internalValues;\n\n  const handleValueChange = (next: number[]) => {\n    if (!isControlled) setInternalValues(next);\n    onValueChange?.(next);\n  };\n\n  const body = (\n    <Root\n      ref={ref}\n      value={liveValues}\n      min={min}\n      max={max}\n      onValueChange={handleValueChange}\n      className={cn(\n        'tw:relative',\n        'tw:flex',\n        'tw:items-center',\n        'tw:w-full',\n\n        'tw:touch-none',\n        'tw:select-none',\n\n        'tw:data-[orientation=vertical]:h-full',\n        'tw:data-[orientation=vertical]:w-auto',\n        'tw:data-[orientation=vertical]:flex-col',\n\n        'tw:data-[disabled]:opacity-50',\n        className,\n      )}\n      {...rest}\n    >\n      <SliderTrack className={rangeClassName} />\n      {liveValues.map((thumbValue, index) => (\n        <SliderThumb\n          // oxlint-disable-next-line react/no-array-index-key\n          key={index}\n          tooltip={thumbTooltip?.(thumbValue, index)}\n          tooltipSide={thumbTooltipSide}\n        />\n      ))}\n    </Root>\n  );\n\n  return thumbTooltip ? <TooltipProvider>{body}</TooltipProvider> : body;\n};\n"],"mappings":"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"}

package/dist/{TextInput-DiEMxVF6.js → TextInput-CFTf4Cz1.js}

@@ -1,8 +1,8 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { createChangeInputEvent, createPrefixedString } from "./utils-DnkrFYqY.js";
+import { createChangeInputEvent, createPrefixedString } from "./utils-BW4AE8VP.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
 import { X } from "./icons-Cek151jC.js";
-import { InputGroup } from "./InputGroup-DcZRlVnN.js";
+import { InputGroup } from "./InputGroup-Do8K2hvD.js";
 import { useControllableState } from "./useControllableState-M6494mCT.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -86,6 +86,7 @@ const TextInput = ({ ref: forwardedRef, state = "default", sizing = "default", c
 			}),
 			(leftSuffix || allowClear || rightSuffix) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
 				align: "inline-end",
+				className: cn({ "tw:min-w-0 tw:shrink": rightSuffixVariant === "addon" }),
 				children: [
 					leftSuffix,
 					allowClear && isClearButtonVisible && /* @__PURE__ */ jsx(InputGroup.Button, {
@@ -96,7 +97,7 @@ const TextInput = ({ ref: forwardedRef, state = "default", sizing = "default", c
 						children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
 					}),
 					rightSuffix && /* @__PURE__ */ jsx("div", {
-						className: cn({ "tw:whitespace-nowrap tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5": rightSuffixVariant === "addon" }),
+						className: cn({ "tw:truncate tw:min-w-0 tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5": rightSuffixVariant === "addon" }),
 						children: rightSuffix
 					})
 				]
@@ -107,4 +108,4 @@ const TextInput = ({ ref: forwardedRef, state = "default", sizing = "default", c
 //#endregion
 export { TextInput };
 
-//# sourceMappingURL=TextInput-DiEMxVF6.js.map
+//# sourceMappingURL=TextInput-CFTf4Cz1.js.map

package/dist/TextInput-CFTf4Cz1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput-CFTf4Cz1.js","names":[],"sources":["../src/blocks/TextInput/utils.ts","../src/blocks/TextInput/TextInput.tsx"],"sourcesContent":["import { createPrefixedString } from '../../utils';\n\nexport const genInputTestId = (prefix: string = '') => {\n  const ps = createPrefixedString(prefix);\n  return {\n    toString: () => prefix,\n    inputWrapper: ps`input-wrapper`,\n    input: ps`input`,\n    clearButton: ps`clear-button`,\n  };\n};\n","import { useRef } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { X } from '../../icons';\nimport { cn, createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { genInputTestId } from './utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'sizing' | 'state'\n>;\n\ntype OwnProps = {\n  prefix?: ReactNode;\n  /**\n   * Content after the input.\n   *\n   * - `rightSuffixVariant=\"addon\"` truncates it with an ellipsis when the group is narrower than its content.\n   * - The ellipsis only renders for inline content — pass text or a `<span>`, not a block element.\n   */\n  rightSuffix?: ReactNode;\n  rightSuffixVariant?: 'addon' | 'default';\n  leftSuffix?: ReactNode;\n  allowClear?: boolean;\n  onClear?: () => void;\n  testId?: string;\n  value?: string | null;\n  defaultValue?: string | null;\n  /** Called with the unwrapped string value on every change. For the raw event use `onChange`. */\n  onValueChange?: (value: string) => void;\n  /** Called with the unwrapped string value on blur. For the raw event use `onBlur`. */\n  onValueBlur?: (value: string) => void;\n  type?: 'text' | 'email' | 'password' | 'datetime-local' | 'date';\n};\n\n/**\n * Props for `TextInput`. Combines `InputGroup` chrome (variant / sizing / state / focusVariant) with\n * input-specific slots (`prefix`, `leftSuffix`, `rightSuffix`, `allowClear`) and a string-typed\n * `value` / `defaultValue` plus convenience `onValueChange` / `onValueBlur` callbacks. `null` /\n * `undefined` are coerced to empty strings.\n */\nexport type Props = InputGroupProps &\n  OwnProps &\n  Omit<ComponentProps<'input'>, 'prefix' | 'value' | 'defaultValue' | 'type' | 'accept' | 'step'>;\n\nconst sanitizeTextInputValue = (value: string | null | undefined) => {\n  if (typeof value === 'string' && value.trim() === '') return '';\n  return value;\n};\n\n/**\n * Standard text input with a string-only API, built on `InputGroup` chrome — addons, clear button,\n * sizing, focus variants. The default choice for a bare text input.\n *\n * **When to use:** any plain text / email / password / date-input field outside `useAppForm`. Pair with\n * `onValueChange` instead of unwrapping `event.target.value` from `onChange`.\n * **When NOT to use:** for fields inside a labelled group use `FormGroup.TextInput`; for forms with\n * validation use `useAppForm` + `field.TextField`; for search use `SearchInput`.\n * **Composition:** wrap in a `FormGroup` for shared error / help-text state, or render directly inside\n * page layouts. Chrome resolves from the active brand automatically: a modern brand always renders argo\n * (any `variant` is ignored), while `variant` only tunes the legacy-brand chrome.\n */\nexport const TextInput = ({\n  ref: forwardedRef,\n  state = 'default',\n  sizing = 'default',\n  className,\n  prefix = null,\n  rightSuffix = null,\n  rightSuffixVariant = 'default',\n  leftSuffix = null,\n  allowClear = false,\n  onClear,\n  disabled = false,\n  testId: prefixTestId = '',\n  autoFocus = false,\n  id,\n  name,\n  variant,\n  readOnly,\n  type = 'text',\n  focusVariant = 'default',\n  onChange,\n  onBlur,\n  onValueChange,\n  onValueBlur,\n  value: valueProp,\n  defaultValue,\n  ...inputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled and coerced\n    // to a string. Whitespace-only input collapses to '' via `sanitizeTextInputValue`.\n    prop: valueProp === undefined ? undefined : (sanitizeTextInputValue(valueProp) ?? ''),\n    defaultProp: sanitizeTextInputValue(defaultValue) ?? '',\n    onChange: onValueChange,\n  });\n\n  const testId = genInputTestId(prefixTestId);\n  const isClearButtonVisible = (!!value && !disabled && !readOnly) || !!onClear;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (inputRef.current === null) return;\n    inputRef.current.value = ''; // keep the DOM node in sync before firing the synthetic change\n    inputRef.current.focus();\n    onClear?.();\n    handleChange(createChangeInputEvent(inputRef.current));\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n      data-testid={testId.inputWrapper}\n    >\n      {prefix && <InputGroup.Addon align=\"inline-start\">{prefix}</InputGroup.Addon>}\n\n      <InputGroup.Input\n        {...inputProps}\n        value={value}\n        autoFocus={autoFocus}\n        type={type}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        ref={mergeRefs(forwardedRef ?? null, inputRef)}\n        disabled={disabled}\n        id={id}\n        name={name}\n        readOnly={readOnly}\n        data-testid={testId.input}\n      />\n\n      {(leftSuffix || allowClear || rightSuffix) && (\n        <InputGroup.Addon\n          align=\"inline-end\"\n          className={cn({ 'tw:min-w-0 tw:shrink': rightSuffixVariant === 'addon' })}\n        >\n          {leftSuffix}\n          {allowClear && isClearButtonVisible && (\n            <InputGroup.Button\n              aria-label=\"Clear\"\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={handleClear}\n              data-testid={testId.clearButton}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {rightSuffix && (\n            <div\n              className={cn({\n                'tw:truncate tw:min-w-0 tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5':\n                  rightSuffixVariant === 'addon',\n              })}\n            >\n              {rightSuffix}\n            </div>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;;AAEA,MAAa,kBAAkB,SAAiB,OAAO;CACrD,MAAM,KAAK,qBAAqB,MAAM;CACtC,OAAO;EACL,gBAAgB;EAChB,cAAc,EAAE;EAChB,OAAO,EAAE;EACT,aAAa,EAAE;CACjB;AACF;;;AC6CA,MAAM,0BAA0B,UAAqC;CACnE,IAAI,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM,IAAI,OAAO;CAC7D,OAAO;AACT;;;;;;;;;;;;;AAcA,MAAa,aAAa,EACxB,KAAK,cACL,QAAQ,WACR,SAAS,WACT,WACA,SAAS,MACT,cAAc,MACd,qBAAqB,WACrB,aAAa,MACb,aAAa,OACb,SACA,WAAW,OACX,QAAQ,eAAe,IACvB,YAAY,OACZ,IACA,MACA,SACA,UACA,OAAO,QACP,eAAe,WACf,UACA,QACA,eACA,aACA,OAAO,WACP,cACA,GAAG,iBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,OAAO,YAAY,qBAA6B;EAGrD,MAAM,cAAc,KAAA,IAAY,KAAA,IAAa,uBAAuB,SAAS,KAAK;EAClF,aAAa,uBAAuB,YAAY,KAAK;EACrD,UAAU;CACZ,CAAC;CAED,MAAM,SAAS,eAAe,YAAY;CAC1C,MAAM,uBAAwB,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,YAAa,CAAC,CAAC;CAEtE,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,KAAK;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAA0D;EAC9D,IAAI,SAAS,YAAY,MAAM;EAC/B,SAAS,QAAQ,QAAQ;EACzB,SAAS,QAAQ,MAAM;EACvB,UAAU;EACV,aAAa,uBAAuB,SAAS,OAAO,CAAC;CACvD;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EACX,eAAa,OAAO;EANtB,UAAA;GAQG,UAAU,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IAAgB,UAAA;GAAyB,CAAA;GAE5E,oBAAC,WAAW,OAAZ;IACE,GAAI;IACG;IACI;IACL;IACN,UAAU;IACV,QAAQ;IACR,KAAK,UAAU,gBAAgB,MAAM,QAAQ;IACnC;IACN;IACE;IACI;IACV,eAAa,OAAO;GACrB,CAAA;IAEC,cAAc,cAAc,gBAC5B,qBAAC,WAAW,OAAZ;IACE,OAAM;IACN,WAAW,GAAG,EAAE,wBAAwB,uBAAuB,QAAQ,CAAC;IAF1E,UAAA;KAIG;KACA,cAAc,wBACb,oBAAC,WAAW,QAAZ;MACE,cAAW;MACX,cAAc,MAAM,EAAE,eAAe;MACrC,SAAS;MACT,eAAa,OAAO;MAEpB,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;KACT,CAAA;KAEpB,eACC,oBAAC,OAAD;MACE,WAAW,GAAG,EACZ,iEACE,uBAAuB,QAC3B,CAAC;MAEA,UAAA;KACE,CAAA;IAES;;EAEV;;AAEhB"}

package/dist/{ThemeProvider-BI6JWBdJ.js → ThemeProvider-DAmNn9Sd.js}

@@ -1,4 +1,4 @@
-import { TooltipProvider } from "./utils-DnkrFYqY.js";
+import { TooltipProvider } from "./utils-BW4AE8VP.js";
 import { DEFAULT_BRANDS, createCssVars, createTheme, defaultBrand } from "./defaults-i_xG2F_1.js";
 import { ThemeContext, useTheme } from "./context-D7X470dy.js";
 import { ThemeScopeContainerContext, ThemeScopeSchemeContext, useBrandState, useColorSchemeState } from "./themeScopeContext-D7fSyb06.js";
@@ -281,4 +281,4 @@ const ThemeScope = ({ scheme, className, children }) => {
 //#endregion
 export { ThemeProvider, ThemeScope, brandSchema, exampleCustomer, keboola$1 as keboola, keboolaLegacySidebar$1 as keboolaLegacySidebar, keboolaLegacyTopnav$1 as keboolaLegacyTopnav, useThemeScopeContainer };
 
-//# sourceMappingURL=ThemeProvider-BI6JWBdJ.js.map
+//# sourceMappingURL=ThemeProvider-DAmNn9Sd.js.map

package/dist/{ThemeProvider-BI6JWBdJ.js.map → ThemeProvider-DAmNn9Sd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider-BI6JWBdJ.js","names":[],"sources":["../src/components/ThemeProvider/AIGradientSvg.tsx","../src/components/ThemeProvider/useThemeTokens.ts","../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeScope.tsx"],"sourcesContent":["export const AIGradientsSvg = () => (\n  <svg width=\"0\" height=\"0\" style={{ position: 'absolute', visibility: 'hidden' }}>\n    <defs>\n      {/*aigradient-600*/}\n      <linearGradient id=\"aigradient-600\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#61E4FF\" />\n        <stop offset=\"50%\" stopColor=\"#1F8FFF\" />\n        <stop offset=\"100%\" stopColor=\"#7C5CFF\" />\n      </linearGradient>\n\n      {/*aigradient-700*/}\n      <linearGradient id=\"aigradient-700\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#075fb8\" />\n        <stop offset=\"100%\" stopColor=\"#5b2cb8\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n","import { useInsertionEffect } from 'react';\n\nimport type {\n  BrandTheme,\n  Colors,\n  Gradient,\n  Motion,\n  Radii,\n  Shadows,\n  Spacing,\n  Typography,\n} from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createCssVars } from './utils';\n\nexport type ThemeTokens = {\n  colors?: Colors;\n  typography?: Typography;\n  radii?: Radii;\n  shadows?: Shadows;\n  spacing?: Spacing;\n  motion?: Motion;\n  gradient?: Gradient;\n};\n\nexport const brandThemeToTokens = (\n  theme: BrandTheme,\n  scheme: ResolvedColorScheme,\n): ThemeTokens => ({\n  colors: scheme === 'dark' ? theme.colorsDark : theme.colors,\n  typography: theme.typography,\n  radii: theme.radii,\n  // Scheme-independent — the same values apply in light and dark.\n  shadows: theme.shadows,\n  spacing: theme.spacing,\n  motion: theme.motion,\n  gradient: theme.gradient,\n});\n\nexport const tokensToCssVars = ({\n  colors,\n  typography,\n  radii,\n  shadows,\n  spacing,\n  motion,\n  gradient,\n}: ThemeTokens): Record<string, string> => {\n  const vars = createCssVars();\n\n  vars.set('--background', colors?.background);\n  vars.set('--foreground', colors?.foreground);\n  vars.set('--muted', colors?.muted);\n  vars.set('--muted-foreground', colors?.mutedForeground);\n  vars.set('--border', colors?.border);\n  vars.set('--input', colors?.input);\n  vars.set('--input-background', colors?.inputBackground);\n  vars.set('--ring', colors?.ring);\n  vars.set('--ring-offset', colors?.ringOffset);\n  vars.set('--primary', colors?.primary);\n  vars.set('--primary-foreground', colors?.primaryForeground);\n  vars.set('--secondary', colors?.secondary);\n  vars.set('--secondary-foreground', colors?.secondaryForeground);\n  vars.set('--accent', colors?.accent);\n  vars.set('--accent-foreground', colors?.accentForeground);\n  vars.set('--card', colors?.card);\n  vars.set('--card-foreground', colors?.cardForeground);\n  vars.set('--popover', colors?.popover);\n  vars.set('--popover-foreground', colors?.popoverForeground);\n  vars.set('--destructive', colors?.destructive);\n  vars.set('--destructive-foreground', colors?.destructiveForeground);\n  vars.set('--success', colors?.success);\n  vars.set('--success-foreground', colors?.successForeground);\n  vars.set('--warning', colors?.warning);\n  vars.set('--warning-foreground', colors?.warningForeground);\n  vars.set('--info', colors?.info);\n  vars.set('--info-foreground', colors?.infoForeground);\n\n  vars.set('--chart-1', colors?.chart?.chart1);\n  vars.set('--chart-2', colors?.chart?.chart2);\n  vars.set('--chart-3', colors?.chart?.chart3);\n  vars.set('--chart-4', colors?.chart?.chart4);\n  vars.set('--chart-5', colors?.chart?.chart5);\n\n  vars.set('--sidebar', colors?.sidebar?.sidebar);\n  vars.set('--sidebar-foreground', colors?.sidebar?.sidebarForeground);\n  vars.set('--sidebar-primary', colors?.sidebar?.sidebarPrimary);\n  vars.set('--sidebar-primary-foreground', colors?.sidebar?.sidebarPrimaryForeground);\n  vars.set('--sidebar-accent', colors?.sidebar?.sidebarAccent);\n  vars.set('--sidebar-accent-foreground', colors?.sidebar?.sidebarAccentForeground);\n  vars.set('--sidebar-border', colors?.sidebar?.sidebarBorder);\n  vars.set('--sidebar-ring', colors?.sidebar?.sidebarRing);\n\n  /**\n   * TYPOGRAPHY\n   */\n  vars.set('--font-sans', typography?.fontFamily?.trim() || undefined);\n  vars.set('--font-display', typography?.fontDisplay?.trim() || undefined);\n  vars.set('--font-mono', typography?.fontMono?.trim() || undefined);\n\n  // Chrome font-weight slots — read by Tailwind's `fontWeight` scale.\n  vars.set('--font-weight-normal', typography?.weight?.normal);\n  vars.set('--font-weight-medium', typography?.weight?.medium);\n  vars.set('--font-weight-semibold', typography?.weight?.semibold);\n  vars.set('--font-weight-bold', typography?.weight?.bold);\n\n  // Chrome tracking — behind Button/Badge `tracking-chrome`.\n  vars.set('--letter-spacing-chrome', typography?.letterSpacing?.chrome);\n\n  // Type scale — display/heading/body steps read by `text-display/heading/body`.\n  vars.set('--type-display-size', typography?.typeScale?.display?.size);\n  vars.set('--type-display-weight', typography?.typeScale?.display?.weight);\n  vars.set('--type-display-leading', typography?.typeScale?.display?.leading);\n  vars.set('--type-display-tracking', typography?.typeScale?.display?.tracking);\n  vars.set('--type-heading-size', typography?.typeScale?.heading?.size);\n  vars.set('--type-heading-weight', typography?.typeScale?.heading?.weight);\n  vars.set('--type-heading-leading', typography?.typeScale?.heading?.leading);\n  vars.set('--type-heading-tracking', typography?.typeScale?.heading?.tracking);\n  vars.set('--type-body-size', typography?.typeScale?.body?.size);\n  vars.set('--type-body-weight', typography?.typeScale?.body?.weight);\n  vars.set('--type-body-leading', typography?.typeScale?.body?.leading);\n  vars.set('--type-body-tracking', typography?.typeScale?.body?.tracking);\n\n  vars.set('--radius-sm', radii?.sm);\n  vars.set('--radius-md', radii?.md);\n  vars.set('--radius-lg', radii?.lg);\n\n  /**\n   * ELEVATION / DENSITY / MOTION / GRADIENT\n   */\n  vars.set('--shadow-sm', shadows?.sm);\n  vars.set('--shadow-md', shadows?.md);\n  vars.set('--shadow-lg', shadows?.lg);\n  vars.set('--shadow-lift', shadows?.lift);\n\n  vars.set('--space-gutter', spacing?.gutter);\n  vars.set('--space-inset', spacing?.inset);\n\n  vars.set('--motion-duration', motion?.duration);\n  vars.set('--motion-easing', motion?.easing);\n\n  vars.set('--gradient-brand', gradient?.brand);\n\n  return vars.expose();\n};\n\nconst setTokens = (node: HTMLElement, vars: Record<string, string>) => {\n  for (const [name, value] of Object.entries(vars)) {\n    node.style.setProperty(name, value);\n  }\n};\n\nconst removeTokens = (node: HTMLElement, vars: Record<string, string>) => {\n  for (const name of Object.keys(vars)) {\n    node.style.removeProperty(name);\n  }\n};\n\n/**\n * Writes a brand's token overrides as inline custom properties.\n *\n * `target` defaults to `<html>` (the app-wide provider). Pass an element to\n * scope the overrides to that subtree instead — `ThemeScope` uses this so a\n * panel can run its own colour scheme: the stylesheet's `[data-theme='dark']`\n * block only re-points the *raw* tokens, while a brand injects the resolved\n * `--color-*` aliases, so a nested scheme must re-inject the brand's values for\n * its own scheme or the brand's light colours leak into a dark subtree.\n */\nexport const useThemeTokens = (tokens: ThemeTokens, target?: HTMLElement | null) => {\n  // Insertion effect: runs before the DOM mutates and before any (descendant)\n  // layout effect measures token-dependent geometry. Write-only, so it fits the\n  // hook's constraints. Only the brand's overrides are set; unset slots fall\n  // through to the stylesheet's `:root` / `[data-theme='dark']` defaults.\n  useInsertionEffect(() => {\n    if (typeof document === 'undefined') return;\n    // `undefined` means \"app-wide\"; `null` means \"a scope whose node has not\n    // mounted yet\" — nothing to write until the ref lands.\n    const node = target === undefined ? document.documentElement : target;\n    if (!node) return;\n\n    const vars = tokensToCssVars(tokens);\n\n    setTokens(node, vars);\n\n    return () => removeTokens(node, vars);\n  }, [tokens, target]);\n};\n","import { type ReactNode, useMemo } from 'react';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { TooltipProvider } from '../Tooltip';\n\nimport { AIGradientsSvg } from './AIGradientSvg';\nimport { ThemeContext, type ThemeContextValue } from './context';\nimport { DEFAULT_BRANDS, defaultBrand } from './defaults';\nimport { type UseBrandOptions, useBrandState } from './useBrandState';\nimport { type UseColorSchemeOptions, useColorSchemeState } from './useColorSchemeState';\nimport { brandThemeToTokens, useThemeTokens } from './useThemeTokens';\nimport { createTheme } from './utils';\n\ntype Props = UseColorSchemeOptions &\n  UseBrandOptions & {\n    /** Brands this provider knows about; the active brand id resolves against these. */\n    brands?: readonly Brand[];\n    children: ReactNode;\n  };\n\nexport const ThemeProvider = ({\n  defaultScheme,\n  scheme,\n  onSchemeChange,\n  defaultBrandId,\n  brandId,\n  onBrandIdChange,\n  brands = DEFAULT_BRANDS,\n  children,\n}: Props) => {\n  const colorSchemeState = useColorSchemeState({\n    defaultScheme,\n    scheme,\n    onSchemeChange,\n  });\n\n  const brandState = useBrandState({\n    defaultBrandId,\n    brandId,\n    onBrandIdChange,\n  });\n\n  // Resolve the active brand; an unknown id (incl. the default sentinel) falls\n  // back to `defaultBrand`, whose empty theme injects nothing so the stylesheet\n  // defaults apply.\n  const brand = useMemo(\n    () => brands.find((item) => item.id === brandState.brandId) ?? defaultBrand,\n    [brands, brandState.brandId],\n  );\n  const themes = useMemo(() => brands.map(createTheme), [brands]);\n  const currentTheme = useMemo(() => createTheme(brand), [brand]);\n\n  // Only the brand's overrides for the resolved scheme are injected; every slot\n  // it omits (including a missing dark palette) falls through to the stylesheet's\n  // `:root` / `[data-theme='dark']` defaults — so dark mode works for any brand.\n  const themeTokens = useMemo(\n    () => brandThemeToTokens(brand.theme, colorSchemeState.resolvedScheme),\n    [brand, colorSchemeState.resolvedScheme],\n  );\n\n  useThemeTokens(themeTokens);\n\n  const { scheme: activeScheme, resolvedScheme, setScheme } = colorSchemeState;\n  const { brandId: activeBrandId, setBrand } = brandState;\n  const context = useMemo<ThemeContextValue>(\n    () => ({\n      scheme: activeScheme,\n      resolvedScheme,\n      setScheme,\n      brandId: activeBrandId,\n      setBrand,\n      themes,\n      currentTheme,\n      brandTheme: brand.theme,\n    }),\n    [activeScheme, resolvedScheme, setScheme, activeBrandId, setBrand, themes, currentTheme, brand],\n  );\n\n  return (\n    <ThemeContext value={context}>\n      <AIGradientsSvg />\n      <TooltipProvider>{children}</TooltipProvider>\n    </ThemeContext>\n  );\n};\n","import { type ReactNode, use, useEffect, useMemo, useRef, useState } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useTheme } from './context';\nimport { ThemeScopeContainerContext, ThemeScopeSchemeContext } from './themeScopeContext';\nimport type { ColorScheme, ResolvedColorScheme } from './types';\nimport { brandThemeToTokens, tokensToCssVars, useThemeTokens } from './useThemeTokens';\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n// Portalled overlays (menus, popovers) mount at the end of <body>, outside the\n// scope, so they would render in the app's scheme. The scope keeps a body-level\n// container carrying the same tokens and hands it to consumers, which pass it to\n// a `container` prop — themed, and without the clipping that portalling back\n// into the panel would cause.\n/** The scope's themed portal container, or `null` outside a `ThemeScope`. */\nexport const useThemeScopeContainer = () => use(ThemeScopeContainerContext);\n\nconst useResolvedScheme = (scheme: ColorScheme): ResolvedColorScheme => {\n  const [systemPrefersDark, setSystemPrefersDark] = useState(\n    () => globalThis.matchMedia?.(DARK_QUERY).matches ?? false,\n  );\n\n  useEffect(() => {\n    const query = globalThis.matchMedia?.(DARK_QUERY);\n    if (!query) return;\n\n    const onChange = (event: MediaQueryListEvent) => setSystemPrefersDark(event.matches);\n    query.addEventListener('change', onChange);\n\n    return () => query.removeEventListener('change', onChange);\n  }, []);\n\n  if (scheme === 'system') return systemPrefersDark ? 'dark' : 'light';\n\n  return scheme;\n};\n\ntype Props = {\n  /** Colour scheme for this subtree. `system` follows the OS preference. */\n  scheme: ColorScheme;\n  /** Merged onto the child element. */\n  className?: string;\n  /** A single element to theme. Its props are merged — no wrapper is rendered. */\n  children: ReactNode;\n};\n\n/**\n * Runs one subtree in its own colour scheme while the rest of the app keeps the\n * provider's.\n *\n * Two things have to happen for that to look right, and doing only the first is\n * why a bare `data-theme` attribute produces a half-themed panel: the\n * stylesheet's `[data-theme='dark']` block re-points the *raw* tokens\n * (`--foreground`), but a brand injects the resolved aliases as inline vars on\n * `<html>`, which the subtree inherits. So the scope also re-injects the active\n * brand's tokens **for its own scheme**, where they beat the inherited ones.\n *\n * It renders **no element of its own** — the attribute, vars and className are\n * merged onto the child. An extra wrapper (even `display: contents`, which\n * layout ignores but selectors do not) silently breaks direct-child selectors\n * like `[data-fill=true] > &` in the element it wraps.\n */\nexport const ThemeScope = ({ scheme, className, children }: Props) => {\n  const { brandTheme } = useTheme();\n  const resolvedScheme = useResolvedScheme(scheme);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n\n  const tokens = useMemo(\n    () => brandThemeToTokens(brandTheme, resolvedScheme),\n    [brandTheme, resolvedScheme],\n  );\n  const style = useMemo(() => tokensToCssVars(tokens), [tokens]);\n\n  useThemeTokens(tokens, portalContainer);\n\n  // Read at creation without making the container depend on the scheme, which would rebuild it\n  // on every flip.\n  const schemeRef = useRef(resolvedScheme);\n  schemeRef.current = resolvedScheme;\n\n  useEffect(() => {\n    const container = document.createElement('div');\n    container.dataset.themeScopePortal = '';\n    // Scoped before it is published: a consumer resolving tokens off this node in the very commit\n    // it arrives would otherwise read the page's palette — and cache it under this scope's key.\n    container.dataset.theme = schemeRef.current;\n    document.body.append(container);\n    setPortalContainer(container);\n\n    return () => container.remove();\n  }, []);\n\n  // Keeps an existing container in step; the creation above covers the first commit.\n  useEffect(() => {\n    portalContainer?.setAttribute('data-theme', resolvedScheme);\n  }, [portalContainer, resolvedScheme]);\n\n  return (\n    <ThemeScopeContainerContext value={portalContainer}>\n      {/* The scheme is published as well as painted: a canvas (chart, diagram, editor) builds its\n          own palette from the tokens and has to resolve this scope's, not the page's. */}\n      <ThemeScopeSchemeContext value={resolvedScheme}>\n        <Slot data-theme={resolvedScheme} className={className} style={style}>\n          {children}\n        </Slot>\n      </ThemeScopeSchemeContext>\n    </ThemeScopeContainerContext>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ThemeProvider-DAmNn9Sd.js","names":[],"sources":["../src/components/ThemeProvider/AIGradientSvg.tsx","../src/components/ThemeProvider/useThemeTokens.ts","../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeScope.tsx"],"sourcesContent":["export const AIGradientsSvg = () => (\n  <svg width=\"0\" height=\"0\" style={{ position: 'absolute', visibility: 'hidden' }}>\n    <defs>\n      {/*aigradient-600*/}\n      <linearGradient id=\"aigradient-600\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#61E4FF\" />\n        <stop offset=\"50%\" stopColor=\"#1F8FFF\" />\n        <stop offset=\"100%\" stopColor=\"#7C5CFF\" />\n      </linearGradient>\n\n      {/*aigradient-700*/}\n      <linearGradient id=\"aigradient-700\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stopColor=\"#075fb8\" />\n        <stop offset=\"100%\" stopColor=\"#5b2cb8\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n","import { useInsertionEffect } from 'react';\n\nimport type {\n  BrandTheme,\n  Colors,\n  Gradient,\n  Motion,\n  Radii,\n  Shadows,\n  Spacing,\n  Typography,\n} from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createCssVars } from './utils';\n\nexport type ThemeTokens = {\n  colors?: Colors;\n  typography?: Typography;\n  radii?: Radii;\n  shadows?: Shadows;\n  spacing?: Spacing;\n  motion?: Motion;\n  gradient?: Gradient;\n};\n\nexport const brandThemeToTokens = (\n  theme: BrandTheme,\n  scheme: ResolvedColorScheme,\n): ThemeTokens => ({\n  colors: scheme === 'dark' ? theme.colorsDark : theme.colors,\n  typography: theme.typography,\n  radii: theme.radii,\n  // Scheme-independent — the same values apply in light and dark.\n  shadows: theme.shadows,\n  spacing: theme.spacing,\n  motion: theme.motion,\n  gradient: theme.gradient,\n});\n\nexport const tokensToCssVars = ({\n  colors,\n  typography,\n  radii,\n  shadows,\n  spacing,\n  motion,\n  gradient,\n}: ThemeTokens): Record<string, string> => {\n  const vars = createCssVars();\n\n  vars.set('--background', colors?.background);\n  vars.set('--foreground', colors?.foreground);\n  vars.set('--muted', colors?.muted);\n  vars.set('--muted-foreground', colors?.mutedForeground);\n  vars.set('--border', colors?.border);\n  vars.set('--input', colors?.input);\n  vars.set('--input-background', colors?.inputBackground);\n  vars.set('--ring', colors?.ring);\n  vars.set('--ring-offset', colors?.ringOffset);\n  vars.set('--primary', colors?.primary);\n  vars.set('--primary-foreground', colors?.primaryForeground);\n  vars.set('--secondary', colors?.secondary);\n  vars.set('--secondary-foreground', colors?.secondaryForeground);\n  vars.set('--accent', colors?.accent);\n  vars.set('--accent-foreground', colors?.accentForeground);\n  vars.set('--card', colors?.card);\n  vars.set('--card-foreground', colors?.cardForeground);\n  vars.set('--popover', colors?.popover);\n  vars.set('--popover-foreground', colors?.popoverForeground);\n  vars.set('--destructive', colors?.destructive);\n  vars.set('--destructive-foreground', colors?.destructiveForeground);\n  vars.set('--success', colors?.success);\n  vars.set('--success-foreground', colors?.successForeground);\n  vars.set('--warning', colors?.warning);\n  vars.set('--warning-foreground', colors?.warningForeground);\n  vars.set('--info', colors?.info);\n  vars.set('--info-foreground', colors?.infoForeground);\n\n  vars.set('--chart-1', colors?.chart?.chart1);\n  vars.set('--chart-2', colors?.chart?.chart2);\n  vars.set('--chart-3', colors?.chart?.chart3);\n  vars.set('--chart-4', colors?.chart?.chart4);\n  vars.set('--chart-5', colors?.chart?.chart5);\n\n  vars.set('--sidebar', colors?.sidebar?.sidebar);\n  vars.set('--sidebar-foreground', colors?.sidebar?.sidebarForeground);\n  vars.set('--sidebar-primary', colors?.sidebar?.sidebarPrimary);\n  vars.set('--sidebar-primary-foreground', colors?.sidebar?.sidebarPrimaryForeground);\n  vars.set('--sidebar-accent', colors?.sidebar?.sidebarAccent);\n  vars.set('--sidebar-accent-foreground', colors?.sidebar?.sidebarAccentForeground);\n  vars.set('--sidebar-border', colors?.sidebar?.sidebarBorder);\n  vars.set('--sidebar-ring', colors?.sidebar?.sidebarRing);\n\n  /**\n   * TYPOGRAPHY\n   */\n  vars.set('--font-sans', typography?.fontFamily?.trim() || undefined);\n  vars.set('--font-display', typography?.fontDisplay?.trim() || undefined);\n  vars.set('--font-mono', typography?.fontMono?.trim() || undefined);\n\n  // Chrome font-weight slots — read by Tailwind's `fontWeight` scale.\n  vars.set('--font-weight-normal', typography?.weight?.normal);\n  vars.set('--font-weight-medium', typography?.weight?.medium);\n  vars.set('--font-weight-semibold', typography?.weight?.semibold);\n  vars.set('--font-weight-bold', typography?.weight?.bold);\n\n  // Chrome tracking — behind Button/Badge `tracking-chrome`.\n  vars.set('--letter-spacing-chrome', typography?.letterSpacing?.chrome);\n\n  // Type scale — display/heading/body steps read by `text-display/heading/body`.\n  vars.set('--type-display-size', typography?.typeScale?.display?.size);\n  vars.set('--type-display-weight', typography?.typeScale?.display?.weight);\n  vars.set('--type-display-leading', typography?.typeScale?.display?.leading);\n  vars.set('--type-display-tracking', typography?.typeScale?.display?.tracking);\n  vars.set('--type-heading-size', typography?.typeScale?.heading?.size);\n  vars.set('--type-heading-weight', typography?.typeScale?.heading?.weight);\n  vars.set('--type-heading-leading', typography?.typeScale?.heading?.leading);\n  vars.set('--type-heading-tracking', typography?.typeScale?.heading?.tracking);\n  vars.set('--type-body-size', typography?.typeScale?.body?.size);\n  vars.set('--type-body-weight', typography?.typeScale?.body?.weight);\n  vars.set('--type-body-leading', typography?.typeScale?.body?.leading);\n  vars.set('--type-body-tracking', typography?.typeScale?.body?.tracking);\n\n  vars.set('--radius-sm', radii?.sm);\n  vars.set('--radius-md', radii?.md);\n  vars.set('--radius-lg', radii?.lg);\n\n  /**\n   * ELEVATION / DENSITY / MOTION / GRADIENT\n   */\n  vars.set('--shadow-sm', shadows?.sm);\n  vars.set('--shadow-md', shadows?.md);\n  vars.set('--shadow-lg', shadows?.lg);\n  vars.set('--shadow-lift', shadows?.lift);\n\n  vars.set('--space-gutter', spacing?.gutter);\n  vars.set('--space-inset', spacing?.inset);\n\n  vars.set('--motion-duration', motion?.duration);\n  vars.set('--motion-easing', motion?.easing);\n\n  vars.set('--gradient-brand', gradient?.brand);\n\n  return vars.expose();\n};\n\nconst setTokens = (node: HTMLElement, vars: Record<string, string>) => {\n  for (const [name, value] of Object.entries(vars)) {\n    node.style.setProperty(name, value);\n  }\n};\n\nconst removeTokens = (node: HTMLElement, vars: Record<string, string>) => {\n  for (const name of Object.keys(vars)) {\n    node.style.removeProperty(name);\n  }\n};\n\n/**\n * Writes a brand's token overrides as inline custom properties.\n *\n * `target` defaults to `<html>` (the app-wide provider). Pass an element to\n * scope the overrides to that subtree instead — `ThemeScope` uses this so a\n * panel can run its own colour scheme: the stylesheet's `[data-theme='dark']`\n * block only re-points the *raw* tokens, while a brand injects the resolved\n * `--color-*` aliases, so a nested scheme must re-inject the brand's values for\n * its own scheme or the brand's light colours leak into a dark subtree.\n */\nexport const useThemeTokens = (tokens: ThemeTokens, target?: HTMLElement | null) => {\n  // Insertion effect: runs before the DOM mutates and before any (descendant)\n  // layout effect measures token-dependent geometry. Write-only, so it fits the\n  // hook's constraints. Only the brand's overrides are set; unset slots fall\n  // through to the stylesheet's `:root` / `[data-theme='dark']` defaults.\n  useInsertionEffect(() => {\n    if (typeof document === 'undefined') return;\n    // `undefined` means \"app-wide\"; `null` means \"a scope whose node has not\n    // mounted yet\" — nothing to write until the ref lands.\n    const node = target === undefined ? document.documentElement : target;\n    if (!node) return;\n\n    const vars = tokensToCssVars(tokens);\n\n    setTokens(node, vars);\n\n    return () => removeTokens(node, vars);\n  }, [tokens, target]);\n};\n","import { type ReactNode, useMemo } from 'react';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { TooltipProvider } from '../Tooltip';\n\nimport { AIGradientsSvg } from './AIGradientSvg';\nimport { ThemeContext, type ThemeContextValue } from './context';\nimport { DEFAULT_BRANDS, defaultBrand } from './defaults';\nimport { type UseBrandOptions, useBrandState } from './useBrandState';\nimport { type UseColorSchemeOptions, useColorSchemeState } from './useColorSchemeState';\nimport { brandThemeToTokens, useThemeTokens } from './useThemeTokens';\nimport { createTheme } from './utils';\n\ntype Props = UseColorSchemeOptions &\n  UseBrandOptions & {\n    /** Brands this provider knows about; the active brand id resolves against these. */\n    brands?: readonly Brand[];\n    children: ReactNode;\n  };\n\nexport const ThemeProvider = ({\n  defaultScheme,\n  scheme,\n  onSchemeChange,\n  defaultBrandId,\n  brandId,\n  onBrandIdChange,\n  brands = DEFAULT_BRANDS,\n  children,\n}: Props) => {\n  const colorSchemeState = useColorSchemeState({\n    defaultScheme,\n    scheme,\n    onSchemeChange,\n  });\n\n  const brandState = useBrandState({\n    defaultBrandId,\n    brandId,\n    onBrandIdChange,\n  });\n\n  // Resolve the active brand; an unknown id (incl. the default sentinel) falls\n  // back to `defaultBrand`, whose empty theme injects nothing so the stylesheet\n  // defaults apply.\n  const brand = useMemo(\n    () => brands.find((item) => item.id === brandState.brandId) ?? defaultBrand,\n    [brands, brandState.brandId],\n  );\n  const themes = useMemo(() => brands.map(createTheme), [brands]);\n  const currentTheme = useMemo(() => createTheme(brand), [brand]);\n\n  // Only the brand's overrides for the resolved scheme are injected; every slot\n  // it omits (including a missing dark palette) falls through to the stylesheet's\n  // `:root` / `[data-theme='dark']` defaults — so dark mode works for any brand.\n  const themeTokens = useMemo(\n    () => brandThemeToTokens(brand.theme, colorSchemeState.resolvedScheme),\n    [brand, colorSchemeState.resolvedScheme],\n  );\n\n  useThemeTokens(themeTokens);\n\n  const { scheme: activeScheme, resolvedScheme, setScheme } = colorSchemeState;\n  const { brandId: activeBrandId, setBrand } = brandState;\n  const context = useMemo<ThemeContextValue>(\n    () => ({\n      scheme: activeScheme,\n      resolvedScheme,\n      setScheme,\n      brandId: activeBrandId,\n      setBrand,\n      themes,\n      currentTheme,\n      brandTheme: brand.theme,\n    }),\n    [activeScheme, resolvedScheme, setScheme, activeBrandId, setBrand, themes, currentTheme, brand],\n  );\n\n  return (\n    <ThemeContext value={context}>\n      <AIGradientsSvg />\n      <TooltipProvider>{children}</TooltipProvider>\n    </ThemeContext>\n  );\n};\n","import { type ReactNode, use, useEffect, useMemo, useRef, useState } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useTheme } from './context';\nimport { ThemeScopeContainerContext, ThemeScopeSchemeContext } from './themeScopeContext';\nimport type { ColorScheme, ResolvedColorScheme } from './types';\nimport { brandThemeToTokens, tokensToCssVars, useThemeTokens } from './useThemeTokens';\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n// Portalled overlays (menus, popovers) mount at the end of <body>, outside the\n// scope, so they would render in the app's scheme. The scope keeps a body-level\n// container carrying the same tokens and hands it to consumers, which pass it to\n// a `container` prop — themed, and without the clipping that portalling back\n// into the panel would cause.\n/** The scope's themed portal container, or `null` outside a `ThemeScope`. */\nexport const useThemeScopeContainer = () => use(ThemeScopeContainerContext);\n\nconst useResolvedScheme = (scheme: ColorScheme): ResolvedColorScheme => {\n  const [systemPrefersDark, setSystemPrefersDark] = useState(\n    () => globalThis.matchMedia?.(DARK_QUERY).matches ?? false,\n  );\n\n  useEffect(() => {\n    const query = globalThis.matchMedia?.(DARK_QUERY);\n    if (!query) return;\n\n    const onChange = (event: MediaQueryListEvent) => setSystemPrefersDark(event.matches);\n    query.addEventListener('change', onChange);\n\n    return () => query.removeEventListener('change', onChange);\n  }, []);\n\n  if (scheme === 'system') return systemPrefersDark ? 'dark' : 'light';\n\n  return scheme;\n};\n\ntype Props = {\n  /** Colour scheme for this subtree. `system` follows the OS preference. */\n  scheme: ColorScheme;\n  /** Merged onto the child element. */\n  className?: string;\n  /** A single element to theme. Its props are merged — no wrapper is rendered. */\n  children: ReactNode;\n};\n\n/**\n * Runs one subtree in its own colour scheme while the rest of the app keeps the\n * provider's.\n *\n * Two things have to happen for that to look right, and doing only the first is\n * why a bare `data-theme` attribute produces a half-themed panel: the\n * stylesheet's `[data-theme='dark']` block re-points the *raw* tokens\n * (`--foreground`), but a brand injects the resolved aliases as inline vars on\n * `<html>`, which the subtree inherits. So the scope also re-injects the active\n * brand's tokens **for its own scheme**, where they beat the inherited ones.\n *\n * It renders **no element of its own** — the attribute, vars and className are\n * merged onto the child. An extra wrapper (even `display: contents`, which\n * layout ignores but selectors do not) silently breaks direct-child selectors\n * like `[data-fill=true] > &` in the element it wraps.\n */\nexport const ThemeScope = ({ scheme, className, children }: Props) => {\n  const { brandTheme } = useTheme();\n  const resolvedScheme = useResolvedScheme(scheme);\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n\n  const tokens = useMemo(\n    () => brandThemeToTokens(brandTheme, resolvedScheme),\n    [brandTheme, resolvedScheme],\n  );\n  const style = useMemo(() => tokensToCssVars(tokens), [tokens]);\n\n  useThemeTokens(tokens, portalContainer);\n\n  // Read at creation without making the container depend on the scheme, which would rebuild it\n  // on every flip.\n  const schemeRef = useRef(resolvedScheme);\n  schemeRef.current = resolvedScheme;\n\n  useEffect(() => {\n    const container = document.createElement('div');\n    container.dataset.themeScopePortal = '';\n    // Scoped before it is published: a consumer resolving tokens off this node in the very commit\n    // it arrives would otherwise read the page's palette — and cache it under this scope's key.\n    container.dataset.theme = schemeRef.current;\n    document.body.append(container);\n    setPortalContainer(container);\n\n    return () => container.remove();\n  }, []);\n\n  // Keeps an existing container in step; the creation above covers the first commit.\n  useEffect(() => {\n    portalContainer?.setAttribute('data-theme', resolvedScheme);\n  }, [portalContainer, resolvedScheme]);\n\n  return (\n    <ThemeScopeContainerContext value={portalContainer}>\n      {/* The scheme is published as well as painted: a canvas (chart, diagram, editor) builds its\n          own palette from the tokens and has to resolve this scope's, not the page's. */}\n      <ThemeScopeSchemeContext value={resolvedScheme}>\n        <Slot data-theme={resolvedScheme} className={className} style={style}>\n          {children}\n        </Slot>\n      </ThemeScopeSchemeContext>\n    </ThemeScopeContainerContext>\n  );\n};\n"],"mappings":"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"}

package/dist/{Timeline-BG5Xogxh.js → Timeline-C8-wnRRr.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useElement } from "./useElement-DkF6esWL.js";
+import { useElement } from "./useElement-BK3AAiIf.js";
 import { Root } from "@radix-ui/react-slot";
 import { useEffect, useState } from "react";
 import { cva } from "class-variance-authority";
@@ -151,4 +151,4 @@ Timeline.Connector = TimelineConnector;
 //#endregion
 export { Timeline };
 
-//# sourceMappingURL=Timeline-BG5Xogxh.js.map
+//# sourceMappingURL=Timeline-C8-wnRRr.js.map

package/dist/{Timeline-BG5Xogxh.js.map → Timeline-C8-wnRRr.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Timeline-BG5Xogxh.js","names":[],"sources":["../src/components/Timeline/useLastLineHeight.ts","../src/components/Timeline/TimelineConnector.tsx","../src/components/Timeline/TimelineContent.tsx","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useElement } from '../../hooks/useElement';\n\nconst CONNECTOR_MARGIN_TOP = 8;\n\nexport const useLastLineHeight = () => {\n  const [wrapper, setWrapper] = useElement();\n  const [connector, setConnector] = useElement();\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    if (wrapper === null) return;\n    if (connector === null) return;\n\n    const updateHeight = () => {\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const connectorRect = connector.getBoundingClientRect();\n      const distance = connectorRect.top - wrapperRect.top - CONNECTOR_MARGIN_TOP;\n      setHeight(distance);\n    };\n\n    // Initial check.\n    const rafId = requestAnimationFrame(updateHeight);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, [wrapper, connector]);\n\n  return {\n    height,\n    setWrapper,\n    setConnector,\n  };\n};\n","import type { ComponentProps, CSSProperties } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useLastLineHeight } from './useLastLineHeight';\n\nconst connectorWrapper = cva(\n  [\n    'tw:grow',\n    'tw:min-h-8',\n    'tw:py-2',\n\n    // layout\n    'tw:flex',\n    'tw:justify-center',\n\n    // CONNECTOR LINE\n    'tw:relative',\n    'tw:before:absolute',\n    'tw:before:self-start',\n\n    // Centered on x-axis\n    'tw:before:left-1/2',\n    'tw:before:-translate-x-1/2',\n    'tw:before:w-px',\n    'tw:before:h-full',\n    'tw:group-last/timeline-item:before:h-(--connector-line-height)',\n\n    // Solid line\n    'tw:group-data-[variant=solid]/timeline:before:bg-border',\n\n    // Dashed line using gradient\n    'tw:group-data-[variant=dashed]/timeline:before:bg-gradient-to-b',\n    'tw:group-data-[variant=dashed]/timeline:before:from-border',\n    'tw:group-data-[variant=dashed]/timeline:before:from-50%',\n    'tw:group-data-[variant=dashed]/timeline:before:to-transparent',\n    'tw:group-data-[variant=dashed]/timeline:before:to-50%',\n    'tw:group-data-[variant=dashed]/timeline:before:bg-[length:1px_4px]',\n  ],\n  {\n    defaultVariants: {\n      align: 'start',\n    },\n    variants: {\n      align: {\n        start: ['tw:items-start'],\n        center: ['tw:items-center'],\n        end: ['tw:items-end'],\n        baseline: ['tw:items-baseline'],\n      },\n    },\n  },\n);\n\nconst connector = cva(\n  [\n    // ensure that it is always above the connector line.\n    'tw:z-10',\n    'tw:relative',\n  ],\n  {\n    defaultVariants: {\n      variant: 'label',\n    },\n    variants: {\n      variant: {\n        none: [],\n        label: [\n          'tw:bg-muted',\n          'tw:text-muted-foreground',\n          'tw:rounded',\n          'tw:p-1.5',\n          'tw:text-nowrap',\n          'tw:text-xs',\n        ],\n        icon: [\n          'tw:bg-background',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n          'tw:[&_svg]:text-muted-foreground',\n        ],\n        line: [\n          'tw:min-w-8',\n          'tw:overflow-hidden',\n          'tw:w-full',\n          // height of the curved corner\n          'tw:h-1',\n\n          // small offset from top and bottom\n          'tw:my-1.5',\n          // positioning\n          'tw:relative',\n          'tw:before:absolute',\n          'tw:before:left-1/2',\n          'tw:before:bottom-0',\n\n          // sizing\n          'tw:before:w-full',\n          'tw:before:h-full',\n\n          // l-shape\n          'tw:before:border-l',\n          'tw:before:border-b',\n          'tw:before:border-border',\n\n          'tw:before:rounded-bl',\n          // Solid or dashed\n          'tw:group-data-[variant=dashed]/timeline:before:border-dashed',\n          'tw:group-data-[variant=solid]/timeline:before:!border-solid',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean; offset?: number } & ComponentProps<'div'> &\n  VariantProps<typeof connectorWrapper> &\n  VariantProps<typeof connector>;\n\nexport const TimelineConnector = ({\n  className,\n  children,\n  asChild,\n  variant,\n  align,\n  offset = 0,\n  style,\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'div';\n  const { setConnector, setWrapper, height } = useLastLineHeight();\n\n  return (\n    <div\n      ref={setWrapper}\n      style={\n        {\n          '--connector-line-height': `${height}px`,\n        } as CSSProperties\n      }\n      className={connectorWrapper({\n        align,\n      })}\n    >\n      <Comp\n        {...rest}\n        ref={setConnector}\n        style={{\n          top: align === 'end' ? -offset : offset,\n          ...style,\n        }}\n        className={connector({ variant, className })}\n      >\n        {children}\n      </Comp>\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const TimelineContent = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    data-slot=\"timeline-content\"\n    className={cn(\n      'tw:flex',\n      // spacing in between timeline items\n      'tw:py-2',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const TimelineItem = ({ className, ...rest }: Props) => {\n  return (\n    <li\n      {...rest}\n      className={cn('tw:contents', 'tw:relative', 'tw:group/timeline-item', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { TimelineConnector } from './TimelineConnector';\nimport { TimelineContent } from './TimelineContent';\nimport { TimelineItem } from './TimelineItem';\n\ntype Props = ComponentProps<'ul'> & {\n  variant?: 'solid' | 'dashed';\n};\n\nexport const Timeline = ({ className, variant = 'dashed', ...rest }: Props) => {\n  return (\n    <ul\n      {...rest}\n      data-variant={variant}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:overflow-y-hidden',\n        // reset default styling\n        'tw:p-0',\n        'tw:grid',\n        'tw:grid-cols-[auto_minmax(0,1fr)]',\n        'tw:group/timeline',\n        'tw:gap-x-4',\n        className,\n      )}\n    />\n  );\n};\n\nTimeline.Item = TimelineItem;\nTimeline.Content = TimelineContent;\nTimeline.Connector = TimelineConnector;\n"],"mappings":";;;;;;;AAIA,MAAM,uBAAuB;AAE7B,MAAa,0BAA0B;CACrC,MAAM,CAAC,SAAS,cAAc,WAAW;CACzC,MAAM,CAAC,WAAW,gBAAgB,WAAW;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CAEtC,gBAAgB;EACd,IAAI,YAAY,MAAM;EACtB,IAAI,cAAc,MAAM;EAExB,MAAM,qBAAqB;GACzB,MAAM,cAAc,QAAQ,sBAAsB;GAElD,MAAM,WADgB,UAAU,sBACH,CAAC,CAAC,MAAM,YAAY,MAAM;GACvD,UAAU,QAAQ;EACpB;EAGA,MAAM,QAAQ,sBAAsB,YAAY;EAEhD,aAAa;GACX,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,OAAO;EACL;EACA;EACA;CACF;AACF;;;AC5BA,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,QACT;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,gBAAgB;EACxB,QAAQ,CAAC,iBAAiB;EAC1B,KAAK,CAAC,cAAc;EACpB,UAAU,CAAC,mBAAmB;CAChC,EACF;AACF,CACF;AAEA,MAAM,YAAY,IAChB,CAEE,WACA,aACF,GACA;CACE,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GAEA;GAGA;GAEA;GACA;GACA;GACA;GAGA;GACA;GAGA;GACA;GACA;GAEA;GAEA;GACA;EACF;CACF,EACF;AACF,CACF;AAMA,MAAa,qBAAqB,EAChC,WACA,UACA,SACA,SACA,OACA,SAAS,GACT,OACA,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,EAAE,cAAc,YAAY,WAAW,kBAAkB;CAE/D,OACE,oBAAC,OAAD;EACE,KAAK;EACL,OACE,EACE,2BAA2B,GAAG,OAAO,IACvC;EAEF,WAAW,iBAAiB,EAC1B,MACF,CAAC;EAED,UAAA,oBAAC,MAAD;GACE,GAAI;GACJ,KAAK;GACL,OAAO;IACL,KAAK,UAAU,QAAQ,CAAC,SAAS;IACjC,GAAG;GACL;GACA,WAAW,UAAU;IAAE;IAAS;GAAU,CAAC;GAE1C;EACG,CAAA;CACH,CAAA;AAET;;;ACvJA,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAC9C,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,WAEA,WACA,SACF;AACD,CAAA;;;ACVH,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAAkB;CAC7D,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,GAAG,eAAe,eAAe,0BAA0B,SAAS;CAChF,CAAA;AAEL;;;ACDA,MAAa,YAAY,EAAE,WAAW,UAAU,UAAU,GAAG,WAAkB;CAC7E,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,gBAAc;EACd,WAAW,GACT,yBACA,wBAEA,UACA,WACA,qCACA,qBACA,cACA,SACF;CACD,CAAA;AAEL;AAEA,SAAS,OAAO;AAChB,SAAS,UAAU;AACnB,SAAS,YAAY"}
+{"version":3,"file":"Timeline-C8-wnRRr.js","names":[],"sources":["../src/components/Timeline/useLastLineHeight.ts","../src/components/Timeline/TimelineConnector.tsx","../src/components/Timeline/TimelineContent.tsx","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useElement } from '../../hooks/useElement';\n\nconst CONNECTOR_MARGIN_TOP = 8;\n\nexport const useLastLineHeight = () => {\n  const [wrapper, setWrapper] = useElement();\n  const [connector, setConnector] = useElement();\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    if (wrapper === null) return;\n    if (connector === null) return;\n\n    const updateHeight = () => {\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const connectorRect = connector.getBoundingClientRect();\n      const distance = connectorRect.top - wrapperRect.top - CONNECTOR_MARGIN_TOP;\n      setHeight(distance);\n    };\n\n    // Initial check.\n    const rafId = requestAnimationFrame(updateHeight);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, [wrapper, connector]);\n\n  return {\n    height,\n    setWrapper,\n    setConnector,\n  };\n};\n","import type { ComponentProps, CSSProperties } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useLastLineHeight } from './useLastLineHeight';\n\nconst connectorWrapper = cva(\n  [\n    'tw:grow',\n    'tw:min-h-8',\n    'tw:py-2',\n\n    // layout\n    'tw:flex',\n    'tw:justify-center',\n\n    // CONNECTOR LINE\n    'tw:relative',\n    'tw:before:absolute',\n    'tw:before:self-start',\n\n    // Centered on x-axis\n    'tw:before:left-1/2',\n    'tw:before:-translate-x-1/2',\n    'tw:before:w-px',\n    'tw:before:h-full',\n    'tw:group-last/timeline-item:before:h-(--connector-line-height)',\n\n    // Solid line\n    'tw:group-data-[variant=solid]/timeline:before:bg-border',\n\n    // Dashed line using gradient\n    'tw:group-data-[variant=dashed]/timeline:before:bg-gradient-to-b',\n    'tw:group-data-[variant=dashed]/timeline:before:from-border',\n    'tw:group-data-[variant=dashed]/timeline:before:from-50%',\n    'tw:group-data-[variant=dashed]/timeline:before:to-transparent',\n    'tw:group-data-[variant=dashed]/timeline:before:to-50%',\n    'tw:group-data-[variant=dashed]/timeline:before:bg-[length:1px_4px]',\n  ],\n  {\n    defaultVariants: {\n      align: 'start',\n    },\n    variants: {\n      align: {\n        start: ['tw:items-start'],\n        center: ['tw:items-center'],\n        end: ['tw:items-end'],\n        baseline: ['tw:items-baseline'],\n      },\n    },\n  },\n);\n\nconst connector = cva(\n  [\n    // ensure that it is always above the connector line.\n    'tw:z-10',\n    'tw:relative',\n  ],\n  {\n    defaultVariants: {\n      variant: 'label',\n    },\n    variants: {\n      variant: {\n        none: [],\n        label: [\n          'tw:bg-muted',\n          'tw:text-muted-foreground',\n          'tw:rounded',\n          'tw:p-1.5',\n          'tw:text-nowrap',\n          'tw:text-xs',\n        ],\n        icon: [\n          'tw:bg-background',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n          'tw:[&_svg]:text-muted-foreground',\n        ],\n        line: [\n          'tw:min-w-8',\n          'tw:overflow-hidden',\n          'tw:w-full',\n          // height of the curved corner\n          'tw:h-1',\n\n          // small offset from top and bottom\n          'tw:my-1.5',\n          // positioning\n          'tw:relative',\n          'tw:before:absolute',\n          'tw:before:left-1/2',\n          'tw:before:bottom-0',\n\n          // sizing\n          'tw:before:w-full',\n          'tw:before:h-full',\n\n          // l-shape\n          'tw:before:border-l',\n          'tw:before:border-b',\n          'tw:before:border-border',\n\n          'tw:before:rounded-bl',\n          // Solid or dashed\n          'tw:group-data-[variant=dashed]/timeline:before:border-dashed',\n          'tw:group-data-[variant=solid]/timeline:before:!border-solid',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean; offset?: number } & ComponentProps<'div'> &\n  VariantProps<typeof connectorWrapper> &\n  VariantProps<typeof connector>;\n\nexport const TimelineConnector = ({\n  className,\n  children,\n  asChild,\n  variant,\n  align,\n  offset = 0,\n  style,\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'div';\n  const { setConnector, setWrapper, height } = useLastLineHeight();\n\n  return (\n    <div\n      ref={setWrapper}\n      style={\n        {\n          '--connector-line-height': `${height}px`,\n        } as CSSProperties\n      }\n      className={connectorWrapper({\n        align,\n      })}\n    >\n      <Comp\n        {...rest}\n        ref={setConnector}\n        style={{\n          top: align === 'end' ? -offset : offset,\n          ...style,\n        }}\n        className={connector({ variant, className })}\n      >\n        {children}\n      </Comp>\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const TimelineContent = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    data-slot=\"timeline-content\"\n    className={cn(\n      'tw:flex',\n      // spacing in between timeline items\n      'tw:py-2',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const TimelineItem = ({ className, ...rest }: Props) => {\n  return (\n    <li\n      {...rest}\n      className={cn('tw:contents', 'tw:relative', 'tw:group/timeline-item', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { TimelineConnector } from './TimelineConnector';\nimport { TimelineContent } from './TimelineContent';\nimport { TimelineItem } from './TimelineItem';\n\ntype Props = ComponentProps<'ul'> & {\n  variant?: 'solid' | 'dashed';\n};\n\nexport const Timeline = ({ className, variant = 'dashed', ...rest }: Props) => {\n  return (\n    <ul\n      {...rest}\n      data-variant={variant}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:overflow-y-hidden',\n        // reset default styling\n        'tw:p-0',\n        'tw:grid',\n        'tw:grid-cols-[auto_minmax(0,1fr)]',\n        'tw:group/timeline',\n        'tw:gap-x-4',\n        className,\n      )}\n    />\n  );\n};\n\nTimeline.Item = TimelineItem;\nTimeline.Content = TimelineContent;\nTimeline.Connector = TimelineConnector;\n"],"mappings":";;;;;;;AAIA,MAAM,uBAAuB;AAE7B,MAAa,0BAA0B;CACrC,MAAM,CAAC,SAAS,cAAc,WAAW;CACzC,MAAM,CAAC,WAAW,gBAAgB,WAAW;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CAEtC,gBAAgB;EACd,IAAI,YAAY,MAAM;EACtB,IAAI,cAAc,MAAM;EAExB,MAAM,qBAAqB;GACzB,MAAM,cAAc,QAAQ,sBAAsB;GAElD,MAAM,WADgB,UAAU,sBACH,CAAC,CAAC,MAAM,YAAY,MAAM;GACvD,UAAU,QAAQ;EACpB;EAGA,MAAM,QAAQ,sBAAsB,YAAY;EAEhD,aAAa;GACX,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,OAAO;EACL;EACA;EACA;CACF;AACF;;;AC5BA,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,QACT;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,gBAAgB;EACxB,QAAQ,CAAC,iBAAiB;EAC1B,KAAK,CAAC,cAAc;EACpB,UAAU,CAAC,mBAAmB;CAChC,EACF;AACF,CACF;AAEA,MAAM,YAAY,IAChB,CAEE,WACA,aACF,GACA;CACE,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GAEA;GAGA;GAEA;GACA;GACA;GACA;GAGA;GACA;GAGA;GACA;GACA;GAEA;GAEA;GACA;EACF;CACF,EACF;AACF,CACF;AAMA,MAAa,qBAAqB,EAChC,WACA,UACA,SACA,SACA,OACA,SAAS,GACT,OACA,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,EAAE,cAAc,YAAY,WAAW,kBAAkB;CAE/D,OACE,oBAAC,OAAD;EACE,KAAK;EACL,OACE,EACE,2BAA2B,GAAG,OAAO,IACvC;EAEF,WAAW,iBAAiB,EAC1B,MACF,CAAC;EAED,UAAA,oBAAC,MAAD;GACE,GAAI;GACJ,KAAK;GACL,OAAO;IACL,KAAK,UAAU,QAAQ,CAAC,SAAS;IACjC,GAAG;GACL;GACA,WAAW,UAAU;IAAE;IAAS;GAAU,CAAC;GAE1C;EACG,CAAA;CACH,CAAA;AAET;;;ACvJA,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAC9C,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,WAEA,WACA,SACF;AACD,CAAA;;;ACVH,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAAkB;CAC7D,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,GAAG,eAAe,eAAe,0BAA0B,SAAS;CAChF,CAAA;AAEL;;;ACDA,MAAa,YAAY,EAAE,WAAW,UAAU,UAAU,GAAG,WAAkB;CAC7E,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,gBAAc;EACd,WAAW,GACT,yBACA,wBAEA,UACA,WACA,qCACA,qBACA,cACA,SACF;CACD,CAAA;AAEL;AAEA,SAAS,OAAO;AAChB,SAAS,UAAU;AACnB,SAAS,YAAY"}