@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/layout/Overflow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.mjs","names":["React","NO_IDS","useForceRender","n","hasResizeObserver","documentOrder","a","b","REORDER_OBSERVER_OPTIONS","sameIds","id","i","warnDuplicateItemId","itemId","noop","readContainer","paddingInline","gap","view","container","style","OverflowStore","listener","el","onResize","node","order","isDev","counts","count","remaining","elements","entries","widths","total","sum","width","next","pinned","available","limit","used","cut","end","hiddenChanged","OverflowContext","INERT_CONTEXT","useOverflowContext","reportMissingContext","componentName","useOverflowMenu","hiddenIds","useIsOverflowItemVisible","hiddenSet","isElement","followDirectChildren","record","records","parent","observer","OverflowingStore","element","check","cleanups","resizeObserver","child","mutationObserver","cleanup","isRefObject","target","useIsOverflowing","store","isOverflowing","forceRender","unsubscribe","OverflowRoot","rest","setContainer","setButton","containerRef","useMergedRefs","ref","disconnect","buttonIds","ctx","hiddenCount","cn","className","children","overflowButton","OverflowItem","ariaHidden","isHidden","registerRef","mergedRef","inert","Overflow"],"sources":["../../../src/components/layout/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { isDev, reportMissingContext, warnOnce } from '../../lib/dev';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\n/** Properties for the Overflow component. */\nexport interface OverflowProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders the overflow button (for example a \"+3\" menu trigger) while at least one item is\n   * hidden. Receives the number of hidden items and their `itemId`s in DOM order, so the button\n   * can open a menu of the hidden items. `hiddenIds` is the button's own array (sorting it in\n   * place affects nobody else). Its width is measured and reserved when items overflow.\n   * Components rendered by it can also read the hidden items with {@link useOverflowMenu}.\n   */\n  overflowButton?: (count: number, hiddenIds: string[]) => React.ReactNode;\n  /**\n   * The {@link OverflowItem}s to lay out in one row. Only items and the overflow button are\n   * measured: the container's whole content box is the room for them, so other content placed in\n   * the row is not accounted for and could clip items that still count as visible. Keep fixed\n   * content outside the Overflow (for example in a surrounding flex row), or wrap it in an\n   * `OverflowItem` (the first item is never hidden).\n   */\n  children: React.ReactNode;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the OverflowItem sub-component. */\nexport interface OverflowItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Identifier for tracking this item's overflow visibility, unique within the Overflow (a\n   * duplicate warns in development: items that share one are hidden and shown together).\n   */\n  itemId: string;\n  /** Content of the overflow item. */\n  children: React.ReactNode;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Result of {@link useOverflowMenu}. */\nexport interface UseOverflowMenuResult {\n  /** `itemId`s of the hidden items, in DOM order (the caller's own array). */\n  hiddenIds: string[];\n  /** Number of hidden items. */\n  count: number;\n}\n\n// ---------------------------------------------------------------------------\n// Measurement store\n// ---------------------------------------------------------------------------\n\n/**\n * The empty snapshot. Snapshots are internal: they are compared by identity and never handed to\n * consumers, who receive their own copies (see `useOverflowMenu` and `overflowButton`).\n */\nconst NO_IDS: string[] = [];\n\n/** A stable function that re-renders the calling component. */\nfunction useForceRender(): () => void {\n  return React.useReducer((n: number) => n + 1, 0)[1];\n}\n\nfunction hasResizeObserver(): boolean {\n  return typeof ResizeObserver !== 'undefined';\n}\n\nfunction documentOrder(a: Element, b: Element): number {\n  if (a === b) return 0;\n  return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n}\n\n/** Moves anywhere in the row: items reordered directly or inside wrappers. */\nconst REORDER_OBSERVER_OPTIONS: MutationObserverInit = { childList: true, subtree: true };\n\nfunction sameIds(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((id, i) => id === b[i]);\n}\n\nfunction warnDuplicateItemId(itemId: string): void {\n  warnOnce(\n    `Overflow:duplicate:${itemId}`,\n    `Overflow: several items share the itemId \"${itemId}\". Item ids must be unique within an ` +\n      'Overflow; items with the same itemId are hidden and shown together.',\n  );\n}\n\nconst noop = () => {};\n\n/** Width available to items: the content box of the container, and the flex gap between items. */\nfunction readContainer(container: HTMLElement): { available: number; gap: number } {\n  let paddingInline = 0;\n  let gap = 0;\n  const view = container.ownerDocument.defaultView;\n  if (view) {\n    const style = view.getComputedStyle(container);\n    paddingInline = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);\n    gap = parseFloat(style.columnGap) || 0;\n  }\n  return { available: container.clientWidth - paddingInline, gap };\n}\n\n/**\n * Tracks the container, the items and the overflow button of one `Overflow` and publishes the ids\n * of the hidden items (DOM order), and whether the button covers the first item, to\n * `useSyncExternalStore`.\n *\n * - **Measurement never writes styles.** An item's width is read (`offsetWidth`) only while it is\n *   visible and cached; a hidden item (`data-overflow-hidden` and an inline `display: none`, both\n *   rendered by React) keeps its last visible width. All reads happen before React applies the\n *   result.\n * - **Membership-only updates.** A new snapshot is published only when the hidden set (or whether\n *   the button covers the first item) changes, so a resize that hides the same items renders\n *   nothing.\n * - **One observer.** A single `ResizeObserver` (created when the root mounts) watches the\n *   container, every item and the overflow button. Without `ResizeObserver` the store measures\n *   whenever something registers and on window `resize`.\n * - **Reorders.** A keyed reorder moves item elements without registering them again or changing\n *   a size. The order of the last measurement is re-checked (n − 1 `compareDocumentPosition`\n *   calls, no layout reads) after every commit of the root and, through a `MutationObserver`\n *   (`childList`, `subtree`) on the container, after moves that do not render the root (a list\n *   component inside the row that owns its order); only an inversion re-measures.\n */\nclass OverflowStore {\n  private container: HTMLElement | null = null;\n  private button: HTMLElement | null = null;\n  private buttonWidth = 0;\n  private readonly items = new Map<HTMLElement, string>();\n  /** How many mounted items use each `itemId` (development only: a repeated one warns). */\n  private readonly itemIdCounts = new Map<string, number>();\n  private readonly widths = new WeakMap<HTMLElement, number>();\n  private readonly listeners = new Set<() => void>();\n  private hidden: string[] = NO_IDS;\n  /** The first item is wider than the room beside the button, so the button covers its end. */\n  private pinned = false;\n  /** The item elements of the last measurement, in the DOM order they had then. */\n  private order: HTMLElement[] = [];\n  private connected = false;\n  private observer: ResizeObserver | null = null;\n  private reorderObserver: MutationObserver | null = null;\n  private removeResizeListener: (() => void) | null = null;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): string[] => this.hidden;\n\n  getServerSnapshot = (): string[] => NO_IDS;\n\n  getPinned = (): boolean => this.pinned;\n\n  getServerPinned = (): boolean => false;\n\n  /** Starts observing (root layout effect); returns the teardown. */\n  connect = (): (() => void) => {\n    this.connected = true;\n    if (hasResizeObserver()) {\n      this.observer = new ResizeObserver(() => this.measure());\n      for (const el of this.observedElements()) this.observer.observe(el);\n    } else if (typeof window !== 'undefined') {\n      const onResize = () => this.measure();\n      window.addEventListener('resize', onResize);\n      this.removeResizeListener = () => window.removeEventListener('resize', onResize);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.reorderObserver = new MutationObserver(() => this.checkOrder());\n      if (this.container) this.reorderObserver.observe(this.container, REORDER_OBSERVER_OPTIONS);\n    }\n    this.measure();\n    return () => {\n      this.connected = false;\n      this.observer?.disconnect();\n      this.observer = null;\n      this.reorderObserver?.disconnect();\n      this.reorderObserver = null;\n      this.removeResizeListener?.();\n      this.removeResizeListener = null;\n    };\n  };\n\n  /** Ref callback of the container. */\n  setContainer = (node: HTMLDivElement | null): void => {\n    if (node === this.container) return;\n    if (this.container) this.observer?.unobserve(this.container);\n    this.container = node;\n    if (node) this.observer?.observe(node);\n    if (this.reorderObserver) {\n      this.reorderObserver.disconnect();\n      if (node) this.reorderObserver.observe(node, REORDER_OBSERVER_OPTIONS);\n    }\n    this.measure();\n  };\n\n  /**\n   * Re-measures when the items of the last measurement are no longer in DOM order (a keyed\n   * reorder). Cheap: neighbour comparisons only, no layout reads.\n   */\n  checkOrder = (): void => {\n    const order = this.order;\n    for (let i = 1; i < order.length; i++) {\n      if (documentOrder(order[i - 1], order[i]) > 0) {\n        this.measure();\n        return;\n      }\n    }\n  };\n\n  /** Ref callback of the overflow button wrapper. The last measured width outlives it. */\n  setButton = (node: HTMLDivElement | null): void => {\n    if (node === this.button) return;\n    if (this.button) this.observer?.unobserve(this.button);\n    this.button = node;\n    if (node) this.observer?.observe(node);\n    this.measure();\n  };\n\n  /** Registers an item element; returns its unregistration. */\n  registerItem(el: HTMLElement, id: string): () => void {\n    this.items.set(el, id);\n    this.observer?.observe(el);\n    this.measure();\n    return () => {\n      if (this.items.get(el) !== id) return;\n      this.items.delete(el);\n      this.observer?.unobserve(el);\n      this.measure();\n    };\n  }\n\n  /**\n   * Counts the `itemId` of a mounted item (called from the item's effect, C-DEV); a second item\n   * with an id already in use warns once per id. Returns the cleanup.\n   */\n  registerItemId = (itemId: string): (() => void) => {\n    if (!isDev) return noop;\n    const counts = this.itemIdCounts;\n    const count = (counts.get(itemId) ?? 0) + 1;\n    counts.set(itemId, count);\n    if (count > 1) warnDuplicateItemId(itemId);\n    return () => {\n      const remaining = (counts.get(itemId) ?? 1) - 1;\n      if (remaining > 0) counts.set(itemId, remaining);\n      else counts.delete(itemId);\n    };\n  };\n\n  private observedElements(): HTMLElement[] {\n    const elements = Array.from(this.items.keys());\n    if (this.container) elements.push(this.container);\n    if (this.button) elements.push(this.button);\n    return elements;\n  }\n\n  private measure(): void {\n    const container = this.container;\n    if (!this.connected || !container) return;\n\n    // Reads first: widths of the visible items, the button and the container.\n    const entries = Array.from(this.items)\n      .filter(([el]) => el.isConnected && container.contains(el))\n      .sort(([a], [b]) => documentOrder(a, b));\n    this.order = entries.map(([el]) => el);\n    for (const [el] of entries) {\n      if (!el.hasAttribute('data-overflow-hidden')) this.widths.set(el, el.offsetWidth);\n    }\n    if (this.button?.isConnected) this.buttonWidth = this.button.offsetWidth;\n    const { available, gap } = readContainer(container);\n\n    const widths = entries.map(([el]) => this.widths.get(el) ?? 0);\n    const total = widths.reduce((sum, width, i) => sum + width + (i > 0 ? gap : 0), 0);\n\n    let next: string[] = NO_IDS;\n    let pinned = false;\n    if (total > available) {\n      // Items that fit next to the overflow button stay; the first item always stays.\n      const limit = available - (this.buttonWidth > 0 ? this.buttonWidth + gap : 0);\n      let used = 0;\n      let cut = entries.length;\n      for (let i = 0; i < entries.length; i++) {\n        const end = used + widths[i] + (i > 0 ? gap : 0);\n        if (i > 0 && end > limit) {\n          cut = i;\n          break;\n        }\n        used = end;\n      }\n      next = entries.slice(cut).map(([, id]) => id);\n      // The sticky button eats the gap before it first; it covers the first item only when the\n      // two do not fit side by side.\n      pinned = next.length > 0 && widths[0] + this.buttonWidth > available;\n    }\n\n    const hiddenChanged = !sameIds(next, this.hidden);\n    if (!hiddenChanged && pinned === this.pinned) return;\n    // The same hidden set keeps its array, so the items and useOverflowMenu() do not update.\n    if (hiddenChanged) this.hidden = next.length > 0 ? next : NO_IDS;\n    this.pinned = pinned;\n    for (const listener of Array.from(this.listeners)) listener();\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Context (C-CONTEXT)\n// ---------------------------------------------------------------------------\n\ninterface OverflowContextValue {\n  store: OverflowStore;\n  hiddenIds: string[];\n  hiddenSet: ReadonlySet<string>;\n}\n\nconst OverflowContext = React.createContext<OverflowContextValue | null>(null);\n\n/** Production fallback for a misplaced sub-component: a store that is never connected. */\nconst INERT_CONTEXT: OverflowContextValue = {\n  store: /* @__PURE__ */ new OverflowStore(),\n  hiddenIds: NO_IDS,\n  hiddenSet: /* @__PURE__ */ new Set<string>(),\n};\n\n/**\n * The enclosing Overflow's context. Outside an Overflow it throws in development and, in\n * production, logs an error once and returns an inert value (C-CONTEXT).\n */\nfunction useOverflowContext(componentName: string): OverflowContextValue {\n  const ctx = React.useContext(OverflowContext);\n  if (ctx) return ctx;\n  reportMissingContext(componentName, 'Overflow');\n  return INERT_CONTEXT;\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\n/**\n * The items an {@link Overflow} currently hides: their `itemId`s in DOM order and their count. Use\n * it in the component that `overflowButton` renders to list the hidden items in a menu. Must be\n * called inside `Overflow`.\n */\nexport function useOverflowMenu(): UseOverflowMenuResult {\n  const { hiddenIds } = useOverflowContext('useOverflowMenu');\n  // A copy per caller and snapshot: sorting or reversing it cannot affect other consumers.\n  return React.useMemo(() => ({ hiddenIds: [...hiddenIds], count: hiddenIds.length }), [hiddenIds]);\n}\n\n/**\n * Whether the {@link OverflowItem} with `itemId` is currently shown (`false` while it overflows).\n * Must be called inside `Overflow`.\n */\nexport function useIsOverflowItemVisible(itemId: string): boolean {\n  const { hiddenSet } = useOverflowContext('useIsOverflowItemVisible');\n  return !hiddenSet.has(itemId);\n}\n\nfunction isElement(node: Node): node is Element {\n  return node.nodeType === Node.ELEMENT_NODE;\n}\n\n/**\n * Keeps `observer` on the element children of `parent`: unobserves the removed ones and observes\n * the added ones that are still attached to `parent` (records are replayed in order, so a child\n * moved or re-added within one batch ends up observed exactly when it is present).\n */\nfunction followDirectChildren(\n  observer: ResizeObserver,\n  parent: Element,\n  records: readonly MutationRecord[],\n): void {\n  for (const record of records) {\n    if (record.type !== 'childList' || record.target !== parent) continue;\n    record.removedNodes.forEach((node) => {\n      if (isElement(node)) observer.unobserve(node);\n    });\n    record.addedNodes.forEach((node) => {\n      if (isElement(node) && node.parentNode === parent) observer.observe(node);\n    });\n  }\n}\n\n/** Tracks `scrollWidth > clientWidth` of one element. */\nclass OverflowingStore {\n  private element: HTMLElement | null = null;\n  private value = false;\n  private readonly listeners = new Set<() => void>();\n  private teardown: (() => void) | null = null;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): boolean => this.value;\n\n  getServerSnapshot = (): boolean => false;\n\n  /** Follows `element` (layout effect of every render); re-subscribes when it changes. */\n  setElement(element: HTMLElement | null): void {\n    if (element === this.element) return;\n    this.disconnect();\n    this.element = element;\n    if (element) this.teardown = this.observe(element);\n    this.check();\n  }\n\n  disconnect(): void {\n    this.teardown?.();\n    this.teardown = null;\n    this.element = null;\n  }\n\n  private observe(element: HTMLElement): () => void {\n    const check = () => this.check();\n    const cleanups: Array<() => void> = [];\n\n    // Resizes of the element and of its direct children (content that grows or shrinks).\n    const resizeObserver = hasResizeObserver() ? new ResizeObserver(check) : null;\n    if (resizeObserver) {\n      resizeObserver.observe(element);\n      for (const child of Array.from(element.children)) resizeObserver.observe(child);\n      cleanups.push(() => resizeObserver.disconnect());\n    } else if (typeof window !== 'undefined') {\n      window.addEventListener('resize', check);\n      cleanups.push(() => window.removeEventListener('resize', check));\n    }\n\n    // Content added, removed or edited. Only a change of the direct children changes what the\n    // ResizeObserver watches, and only those children are (un)observed; text edits and deeper\n    // changes just re-check.\n    if (typeof MutationObserver !== 'undefined') {\n      const mutationObserver = new MutationObserver((records) => {\n        if (resizeObserver) followDirectChildren(resizeObserver, element, records);\n        check();\n      });\n      mutationObserver.observe(element, { childList: true, subtree: true, characterData: true });\n      cleanups.push(() => mutationObserver.disconnect());\n    }\n\n    return () => cleanups.forEach((cleanup) => cleanup());\n  }\n\n  private check(): void {\n    const el = this.element;\n    const next = el !== null && el.scrollWidth > el.clientWidth;\n    if (next === this.value) return;\n    this.value = next;\n    for (const listener of Array.from(this.listeners)) listener();\n  }\n}\n\nfunction isRefObject(\n  target: React.RefObject<HTMLElement | null> | HTMLElement | null | undefined,\n): target is React.RefObject<HTMLElement | null> {\n  return target != null && typeof target === 'object' && 'current' in target;\n}\n\n/**\n * Whether `target`'s content is wider than the element (`scrollWidth > clientWidth`).\n *\n * `target` is a ref object or the element itself (for example from callback-ref state:\n * `const [el, setEl] = useState(null)` + `ref={setEl}`). The hook re-checks when the element\n * resizes, when its direct children resize, and when content is added, removed or edited; an\n * element that mounts later (a ref attached conditionally) is picked up after the render that\n * mounts it. Without `ResizeObserver` it re-checks on window `resize` and content changes. Returns\n * `false` on the server.\n */\nexport function useIsOverflowing(\n  target: React.RefObject<HTMLElement | null> | HTMLElement | null,\n): boolean {\n  const [store] = React.useState(() => new OverflowingStore());\n  const isOverflowing = React.useSyncExternalStore(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n  const forceRender = useForceRender();\n\n  // Every render: follow the element the ref points to now (cheap identity check). A change found\n  // here re-renders from the layout phase, before paint: useSyncExternalStore only subscribes in a\n  // passive effect, so on mount it would pick the first value up after the browser painted.\n  React.useLayoutEffect(() => {\n    const unsubscribe = store.subscribe(forceRender);\n    store.setElement(isRefObject(target) ? target.current : target);\n    unsubscribe();\n  });\n\n  React.useLayoutEffect(() => () => store.disconnect(), [store]);\n\n  return isOverflowing;\n}\n\n// ---------------------------------------------------------------------------\n// Components\n// ---------------------------------------------------------------------------\n\nconst OverflowRoot = ({ overflowButton, children, className, ref, ...rest }: OverflowProps) => {\n  const [store] = React.useState(() => new OverflowStore());\n  const hiddenIds = React.useSyncExternalStore(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n  const pinned = React.useSyncExternalStore(\n    store.subscribe,\n    store.getPinned,\n    store.getServerPinned,\n  );\n  const setContainer = React.useCallback(\n    (node: HTMLDivElement | null) => store.setContainer(node),\n    [store],\n  );\n  const setButton = React.useCallback(\n    (node: HTMLDivElement | null) => store.setButton(node),\n    [store],\n  );\n  const containerRef = useMergedRefs<HTMLDivElement>(ref, setContainer);\n  const forceRender = useForceRender();\n\n  // Observers are created once per instance (not per render or per children change). The first\n  // measurement (in connect) re-renders from this layout effect, before paint: useSyncExternalStore\n  // only subscribes in a passive effect, which can run after the browser painted every item.\n  React.useLayoutEffect(() => {\n    const unsubscribe = store.subscribe(forceRender);\n    const disconnect = store.connect();\n    unsubscribe();\n    return disconnect;\n  }, [store, forceRender]);\n\n  // After every commit of the root (new children, a keyed reorder): items moved without any size\n  // change or registration are re-measured before paint. Cheap when nothing moved.\n  React.useLayoutEffect(() => {\n    store.checkOrder();\n  });\n\n  const hiddenSet = React.useMemo(() => new Set(hiddenIds), [hiddenIds]);\n  // The overflowButton's own copy (consumers may sort it in place).\n  const buttonIds = React.useMemo(() => [...hiddenIds], [hiddenIds]);\n  const ctx = React.useMemo<OverflowContextValue>(\n    () => ({ store, hiddenIds, hiddenSet }),\n    [store, hiddenIds, hiddenSet],\n  );\n\n  const hiddenCount = hiddenIds.length;\n\n  return (\n    <OverflowContext.Provider value={ctx}>\n      <div\n        ref={containerRef}\n        // The row clips its content at its padding edge: the 4px padding leaves room for the focus\n        // indicator a focused item draws 4px around itself. No negative margin offsets it: the\n        // row's box would then reach past its container, which a scroll container around an\n        // edge-to-edge row (or the page) counts as overflow. The store measures the room without\n        // the padding.\n        className={cn('flex items-center overflow-hidden p-1', className)}\n        {...rest}\n      >\n        {children}\n        {hiddenCount > 0 && overflowButton && (\n          // In the row's flow (it adds to the row height and follows justify-*), sticking to the\n          // inline end when the first item is wider than the room beside it. Browsers stop a\n          // sticky element at the scroll container's padding, so -end-1 lets it reach the\n          // clipping edge, and while pinned it keeps 4px inside for its own focus indicator.\n          // (WebKit stops a sticky element short of the inline end of a right-to-left row; it\n          // stays in the row.)\n          <div\n            ref={setButton}\n            data-overflow-button=\"\"\n            data-overflow-pinned={pinned ? '' : undefined}\n            className=\"sticky -end-1 flex shrink-0 items-center self-stretch ps-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1\"\n          >\n            {overflowButton(hiddenCount, buttonIds)}\n          </div>\n        )}\n      </div>\n    </OverflowContext.Provider>\n  );\n};\nOverflowRoot.displayName = 'Overflow';\n\n/**\n * One entry of an {@link Overflow}. While it does not fit it stays mounted but is hidden\n * (`data-overflow-hidden` and an inline `display: none` placed after the consumer's own `style`),\n * `aria-hidden` and `inert`. The inline style wins over the consumer's `style.display` and over\n * display utilities in any cascade layer (a prefixed Tailwind app's `tw:flex` included), so a\n * hidden item is never shown while it is counted in \"+N\". Must be rendered inside `Overflow`.\n */\nexport const OverflowItem = ({\n  itemId,\n  children,\n  className,\n  style,\n  ref,\n  'aria-hidden': ariaHidden,\n  inert,\n  ...rest\n}: OverflowItemProps) => {\n  const { store, hiddenSet } = useOverflowContext('OverflowItem');\n  const isHidden = hiddenSet.has(itemId);\n  React.useEffect(() => store.registerItemId(itemId), [store, itemId]);\n\n  const registerRef = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? store.registerItem(node, itemId) : undefined),\n    [store, itemId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, registerRef);\n\n  return (\n    <div\n      ref={mergedRef}\n      className={cn('shrink-0', className)}\n      {...rest}\n      style={isHidden ? { ...style, display: 'none' } : style}\n      aria-hidden={isHidden ? true : ariaHidden}\n      inert={isHidden ? true : inert}\n      data-overflow-hidden={isHidden ? '' : undefined}\n    >\n      {children}\n    </div>\n  );\n};\nOverflowItem.displayName = 'OverflowItem';\n\n/**\n * A single row that hides the items which do not fit and shows an overflow button instead.\n *\n * Wrap each entry in {@link OverflowItem} with a unique `itemId`; the row holds only items (other\n * content is not measured, see `children`). Items are measured while visible, hidden from the end\n * (in DOM order; the first item always stays) and hidden items get `data-overflow-hidden`, an\n * inline `display: none`, `aria-hidden` and `inert`. Reordered items (for example a keyed sort) are\n * re-measured in their new order. `overflowButton(count, hiddenIds)` renders the button after the\n * visible items (its measured width is reserved); components inside it can use\n * {@link useOverflowMenu} to list the hidden items (e.g. in a Menu), and\n * {@link useIsOverflowItemVisible} reports a single item. The button sticks to the inline end of\n * the row, so a first item wider than the room beside it cannot push it out of view: it then covers\n * the end of that item and gets `data-overflow-pinned`, with the `background` token behind it. (In\n * a right-to-left row, WebKit stops the pinned button short of the end, still inside the row.)\n *\n * The row clips what does not fit. So that the focus indicators of its items are not cut off, it\n * has a 4px padding: the items sit 4px in from its edges, and the row is 8px taller than they are.\n * An explicit width (such as `w-full` or a style width) includes that padding. The row never\n * reaches past its own box, so an edge-to-edge row adds no scrollbar to the page or to a scroll\n * container around it. A negative margin of 4px lines the items up with the content around the\n * row; add it only where nothing within 4px of the row scrolls (the row's box then reaches 4px past\n * its container on every side). `p-0` removes the room (focus indicators at the row's edges are\n * then clipped).\n *\n * Works without `ResizeObserver` (jsdom, old browsers): it then re-measures on window resize and\n * when items mount, unmount or move.\n *\n * The item is also `Overflow.Item`. The same component is exported as `OverflowItem`; React Server\n * Components import that flat name (dotted access needs a client file).\n */\nexport const Overflow = /* @__PURE__ */ Object.assign(OverflowRoot, {\n  Item: OverflowItem,\n});\n"],"mappings":"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"}

package/dist/components/layout/Stack.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={none:`gap-0`,xs:`gap-1`,sm:`gap-2`,md:`gap-3`,lg:`gap-4`,xl:`gap-6`},o={start:`items-start`,center:`items-center`,end:`items-end`,stretch:`items-stretch`},s={start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`},c=e=>{let{as:r,orientation:c,direction:l,gap:u=`md`,align:d,justify:f,wrap:p,inline:m,className:h,children:g,ref:_,...v}=e,y=r??`div`,b=n.resolveDeprecatedProp(`Stack`,c,l,`direction`,`orientation`)??`vertical`;return(0,i.jsx)(y,{ref:_,className:t.cn(m?`inline-flex`:`flex`,b===`horizontal`?`flex-row`:`flex-col`,a[u],d&&o[d],f&&s[f],p&&`flex-wrap`,h),...v,children:g})};c.displayName=`Stack`,exports.Stack=c;
+//# sourceMappingURL=Stack.cjs.map

package/dist/components/layout/Stack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.cjs","names":["resolveDeprecatedProp","cn","require_runtime","require_cn","require_dev","react","react_jsx_runtime","gapMap","alignMap","justifyMap","Stack","orientationProp","rest","props","Component","as","orientation","direction","inline","gap","align","justify","wrap","className"],"sources":["../../../src/components/layout/Stack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Orientation } from '../../lib/types';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/**\n * The Stack's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface StackOwnProps {\n  /**\n   * Layout axis of the stack.\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * @deprecated Use `orientation` (same values). Still works, warns once in development, and\n   * `orientation` wins when both are given.\n   */\n  direction?: Orientation;\n  /**\n   * Gap size between stack items.\n   * @default 'md'\n   */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Whether items should wrap to the next line. */\n  wrap?: boolean;\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n}\n\n/**\n * Props of {@link Stack} rendered as `C` (default `'div'`). `StackProps` without a type argument\n * is the 0.4 name: the props of a Stack rendered as a `<div>`, including `ref`.\n */\nexport type StackProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, StackOwnProps>;\n\ntype StackImplProps = StackOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A one-dimensional layout: items stacked vertically (default) or horizontally with a token gap.\n *\n * @example\n * <Stack orientation=\"horizontal\" gap=\"sm\" align=\"center\">\n *   <Avatar name=\"Ada\" />\n *   <Text>Ada Lovelace</Text>\n * </Stack>\n */\nexport const Stack: PolymorphicComponent<'div', StackOwnProps> = (props) => {\n  const {\n    as,\n    orientation: orientationProp,\n    direction,\n    gap = 'md',\n    align,\n    justify,\n    wrap,\n    inline,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as StackImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const orientation =\n    resolveDeprecatedProp('Stack', orientationProp, direction, 'direction', 'orientation') ??\n    'vertical';\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        inline ? 'inline-flex' : 'flex',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        gapMap[gap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        wrap && 'flex-wrap',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nStack.displayName = 'Stack';\n"],"mappings":"6MAMA,IAAMO,EAAS,CACb,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,EAEMC,EAAW,CACf,MAAO,cACP,OAAQ,eACR,IAAK,YACL,QAAS,eACX,EAEMC,EAAa,CACjB,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,gBACV,EAqDaC,EAAqD,GAAU,CAC1E,GAAM,CACJ,KACA,YAAaC,EACb,YACA,MAAM,KACN,QACA,UACA,OACA,SACA,YACA,WACA,MACA,GAAGC,GACDC,EACEC,EAA+BC,GAAM,MACrCC,EACJhB,EAAAA,sBAAsB,QAASW,EAAiBM,EAAW,YAAa,aAAa,GACrF,WAEF,OACE,EAAAX,EAAA,IAAA,CAACQ,EAAD,CACO,MACL,UAAWb,EAAAA,GACTiB,EAAS,cAAgB,OACzBF,IAAgB,aAAe,WAAa,WAC5CT,EAAOY,GACPC,GAASZ,EAASY,GAClBC,GAAWZ,EAAWY,GACtBC,GAAQ,YACRC,CACF,EACA,GAAIX,EAEH,UACQ,CAAA,CAEf,EACA,EAAM,YAAc"}

package/dist/components/layout/Stack.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { resolveDeprecatedProp as t } from "../../lib/dev.mjs";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/layout/Stack.tsx
+var r = {
+	none: "gap-0",
+	xs: "gap-1",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+	xl: "gap-6"
+}, i = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch"
+}, a = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between",
+	around: "justify-around",
+	evenly: "justify-evenly"
+}, o = (o) => {
+	let { as: s, orientation: c, direction: l, gap: u = "md", align: d, justify: f, wrap: p, inline: m, className: h, children: g, ref: _, ...v } = o, y = s ?? "div", b = t("Stack", c, l, "direction", "orientation") ?? "vertical";
+	return /* @__PURE__ */ n(y, {
+		ref: _,
+		className: e(m ? "inline-flex" : "flex", b === "horizontal" ? "flex-row" : "flex-col", r[u], d && i[d], f && a[f], p && "flex-wrap", h),
+		...v,
+		children: g
+	});
+};
+o.displayName = "Stack";
+//#endregion
+export { o as Stack };
+
+//# sourceMappingURL=Stack.mjs.map

package/dist/components/layout/Stack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.mjs","names":["gapMap","alignMap","justifyMap","Stack","orientationProp","rest","props","Component","as","orientation","resolveDeprecatedProp","direction","cn","inline","gap","align","justify","wrap","className"],"sources":["../../../src/components/layout/Stack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Orientation } from '../../lib/types';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/**\n * The Stack's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface StackOwnProps {\n  /**\n   * Layout axis of the stack.\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * @deprecated Use `orientation` (same values). Still works, warns once in development, and\n   * `orientation` wins when both are given.\n   */\n  direction?: Orientation;\n  /**\n   * Gap size between stack items.\n   * @default 'md'\n   */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Whether items should wrap to the next line. */\n  wrap?: boolean;\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n}\n\n/**\n * Props of {@link Stack} rendered as `C` (default `'div'`). `StackProps` without a type argument\n * is the 0.4 name: the props of a Stack rendered as a `<div>`, including `ref`.\n */\nexport type StackProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, StackOwnProps>;\n\ntype StackImplProps = StackOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A one-dimensional layout: items stacked vertically (default) or horizontally with a token gap.\n *\n * @example\n * <Stack orientation=\"horizontal\" gap=\"sm\" align=\"center\">\n *   <Avatar name=\"Ada\" />\n *   <Text>Ada Lovelace</Text>\n * </Stack>\n */\nexport const Stack: PolymorphicComponent<'div', StackOwnProps> = (props) => {\n  const {\n    as,\n    orientation: orientationProp,\n    direction,\n    gap = 'md',\n    align,\n    justify,\n    wrap,\n    inline,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as StackImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const orientation =\n    resolveDeprecatedProp('Stack', orientationProp, direction, 'direction', 'orientation') ??\n    'vertical';\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        inline ? 'inline-flex' : 'flex',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        gapMap[gap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        wrap && 'flex-wrap',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nStack.displayName = 'Stack';\n"],"mappings":";;;;;;AAMA,IAAMA,IAAS;CACb,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX,GAEMC,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV,GAqDaC,KAAqD,MAAU;CAC1E,IAAM,EACJ,OACA,aAAaC,GACb,cACA,SAAM,MACN,UACA,YACA,SACA,WACA,cACA,aACA,QACA,GAAGC,MACDC,GACEC,IAA+BC,KAAM,OACrCC,IACJC,EAAsB,SAASN,GAAiBO,GAAW,aAAa,aAAa,KACrF;CAEF,OACE,kBAACJ,GAAD;EACO;EACL,WAAWK,EACTC,IAAS,gBAAgB,QACzBJ,MAAgB,eAAe,aAAa,YAC5CT,EAAOc,IACPC,KAASd,EAASc,IAClBC,KAAWd,EAAWc,IACtBC,KAAQ,aACRC,CACF;EACA,GAAIb;EAEH;CACQ,CAAA;AAEf;AACA,EAAM,cAAc"}

package/dist/components/layout/TabList.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../hooks/useControllable.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../hooks/useRovingTabIndex.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("./disclosureIds.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m(e){r.warnOnce(`TabList:duplicate:${e}`,`TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`)}function h(){let e={tab:new Map,panel:new Map},t=new Set,n=!1,r=()=>{t.forEach(e=>e())};return{register(t,n,i){let a=e[t],o=a.get(n)??[];return t===`tab`&&o.length>0&&m(n),a.set(n,[...o,i]),r(),()=>{let e=[...a.get(n)??[]],t=e.indexOf(i);t!==-1&&e.splice(t,1),e.length>0?a.set(n,e):a.delete(n),r()}},get:(t,r)=>n?e[t].get(r)?.[0]??null:void 0,markReady(){n||(n=!0,r())},subscribe(e){return t.add(e),()=>{t.delete(e)}}}}var g={register:()=>()=>{},get:()=>void 0,markReady:()=>{},subscribe:()=>()=>{}},_=f.createContext(null),v={orientation:`horizontal`,isSelected:()=>!1,select:()=>{},getTabIndex:()=>-1,getGeneratedId:(e,t)=>`wave-tablist-inert-${e}-${t}`,getStaticTabId:e=>`wave-tablist-inert-tab-${e}`,getStaticPanelId:()=>void 0,registry:g};function y(e){return f.useContext(_)||(r.reportMissingContext(e,`<TabList>`),v)}function b(e){let t=e[`aria-disabled`];return e.disabled===!0||t===!0||t===`true`}function x(e){return typeof e==`string`&&e!==``?e:null}function S(e,t){if(Array.isArray(e))return e.forEach(e=>S(e,t)),t;if(!f.isValidElement(e))return t;let{props:r}=e,i=n.getElementType(e,{suspend:!1}),a=typeof r.value==`string`?r.value:void 0;if(i===O){if(a!==void 0){t.firstEnabled===void 0&&!b(r)&&(t.firstEnabled=a);let e=x(r.id);e!==null&&t.tabIds.push([a,e])}return t}return i===k?(a!==void 0&&t.panels.push([a,x(r.id)]),t):i===D?t:S(r.children,t)}function C(e,t){if(Array.isArray(e))return e.some(e=>C(e,t));if(!f.isValidElement(e))return!1;let r=n.getElementType(e,{suspend:!1});return r===O?t===`tab`:r===k||r===A?t===`panel`:r!==D&&C(e.props.children,t)}function w(e){return C(e,`panel`)&&!C(e,`tab`)}var T=f.createContext(null),E=`TabList.Panel was rendered inside the role="tablist" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.`,D=({value:e,defaultValue:u,onValueChange:m,orientation:g,selectTabOnFocus:v=!0,selectedValue:y,defaultSelectedValue:b,onTabSelect:x,vertical:C,className:E,children:D,onKeyDown:O,onFocus:k,ref:A,...j})=>{let M=r.resolveDeprecatedProp(`TabList`,e,y,`selectedValue`,`value`),N=r.resolveDeprecatedProp(`TabList`,u,b,`defaultSelectedValue`,`defaultValue`),P=r.resolveDeprecatedProp(`TabList`,g,C===void 0?void 0:C?`vertical`:`horizontal`,`vertical`,`orientation`)??`horizontal`;x&&r.warnDeprecated(`TabList`,`onTabSelect`,`onValueChange`,"`onValueChange` is called only when the selected tab changes.");let[F,I,L]=o.useControllable(M,N??``,m),R=JSON.stringify(S(D,{tabIds:[],panels:[]})),z=f.useMemo(()=>{let e=JSON.parse(R);return{firstEnabled:e.firstEnabled,tabIds:new Map(e.tabIds),panels:new Map(e.panels)}},[R]),B=!L&&F===``,{containerProps:V,getTabIndex:H}=c.useRovingTabIndex({activeValue:B?z.firstEnabled??null:F,orientation:P,loop:!0,onFocusMove:v?e=>W(e):void 0}),U=f.useCallback(e=>B?H(e)===0:F===e,[B,H,F]),W=a.useEventCallback(e=>{x?.(e),U(e)||I(e)}),G=s.useId(`tablist`),[K]=f.useState(h);f.useLayoutEffect(()=>K.markReady(),[K]);let q=f.useMemo(()=>({orientation:P,isSelected:U,select:W,getTabIndex:H,getGeneratedId:(e,t)=>d.getPartId(G,e,t),getStaticTabId:e=>z.tabIds.get(e)??d.getPartId(G,`tab`,e),getStaticPanelId:e=>{let t=z.panels.get(e);if(t!==void 0)return t??d.getPartId(G,`panel`,e)},registry:K}),[P,U,W,H,G,z,K]),J=l.useMergedRefs(A,V.ref),Y=[],X=[];n.flattenChildren(D).forEach(({key:e,node:t})=>{let n=(0,p.jsx)(f.Fragment,{children:t},e);(w(t)?X:Y).push(n)});let Z=P===`vertical`;return(0,p.jsx)(_.Provider,{value:q,children:(0,p.jsxs)(`div`,{className:t.cn(Z&&`flex`),children:[(0,p.jsx)(`div`,{role:`tablist`,"aria-orientation":P,className:t.cn(Z?`flex w-40 flex-col border-e border-border`:`flex border-b border-border`,E),...j,"data-roving-container":``,onKeyDown:i.composeEventHandlers(O,V.onKeyDown),onFocus:i.composeEventHandlers(k,V.onFocus,{checkDefaultPrevented:!1}),ref:J,children:(0,p.jsx)(T.Provider,{value:`tabs`,children:Y})}),(0,p.jsx)(T.Provider,{value:`panels`,children:X})]})})};D.displayName=`TabList`;var O=({value:e,id:n,className:r,children:a,onClick:o,ref:s,...c})=>{let l=y(`TabList.Tab`),d=l.isSelected(e),m=l.orientation===`vertical`,h=b(c),{registry:g}=l,_=x(n)??l.getGeneratedId(`tab`,e);f.useLayoutEffect(()=>g.register(`tab`,e,_),[g,e,_]);let v=f.useSyncExternalStore(g.subscribe,()=>g.get(`panel`,e),()=>void 0),S=v===void 0?l.getStaticPanelId(e):v??void 0;return(0,p.jsx)(`button`,{type:`button`,role:`tab`,className:t.cn(`px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none`,m&&`text-start`,d?t.cn(`text-primary`,m?`border-s-2 border-s-primary`:`border-b-2 border-b-primary`):`text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground`,u.disabledStyles,u.focusRingInset,r),...c,id:_,"aria-selected":d,"aria-controls":d?S:void 0,tabIndex:l.getTabIndex(e),"data-roving-value":e,"data-selected":d?``:void 0,onClick:i.composeEventHandlers(o,()=>{h||l.select(e)}),ref:s,children:a})};O.displayName=`Tab`;var k=({value:e,id:n,children:i,className:a,ref:o,...s})=>{let c=y(`TabList.Panel`),l=f.useContext(T)===`tabs`;f.useEffect(()=>{l&&r.warnOnce(`TabList.Panel:inside-tablist`,E)},[l]);let{registry:d}=c,m=x(n)??c.getGeneratedId(`panel`,e);f.useLayoutEffect(()=>d.register(`panel`,e,m),[d,e,m]);let h=f.useSyncExternalStore(d.subscribe,()=>d.get(`tab`,e),()=>void 0);if(!c.isSelected(e))return null;let g=h===void 0?c.getStaticTabId(e):h??void 0;return(0,p.jsx)(`div`,{role:`tabpanel`,tabIndex:0,className:t.cn(`p-4`,u.focusRing,a),...s,id:m,"aria-labelledby":g,ref:o,children:i})};k.displayName=`TabPanel`;var A=({className:e,children:n,ref:r,...i})=>(0,p.jsx)(`div`,{ref:r,className:t.cn(`min-w-0 flex-1`,e),...i,children:n});A.displayName=`TabPanels`;var j=Object.assign(D,{Tab:O,Panel:k,Panels:A});exports.TabList=j,exports.TabListPanel=k,exports.TabListPanels=A,exports.TabListTab=O;
+//# sourceMappingURL=TabList.cjs.map

package/dist/components/layout/TabList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.cjs","names":["React","getElementType","resolveDeprecatedProp","useControllable","useRovingTabIndex","useEventCallback","useId","getPartId","useMergedRefs","cn","composeEventHandlers","disabledStyles","focusRingInset","focusRing","require_runtime","require_cn","require_children","require_dev","require_composeEventHandlers","require_useEventCallback","require_useControllable","require_useId","require_useRovingTabIndex","require_useMergedRefs","require_styles","require_disclosureIds","react","react_jsx_runtime","warnDuplicateTabValue","value","createRegistry","entries","listeners","ready","emit","listener","map","part","ids","id","index","INERT_REGISTRY","TabListContext","INERT_CONTEXT","useTabListContext","component","isUnavailable","ariaDisabled","props","consumerId","collectStructure","node","child","into","type","Tab","TabPanel","TabListRoot","containsPart","TabPanels","rendersAfterTablist","TabListAreaContext","PANEL_IN_TABLIST_MESSAGE","valueProp","defaultValueProp","orientationProp","rest","selectedValue","defaultValue","defaultSelectedValue","orientation","vertical","onTabSelect","selected","setSelected","isControlled","onValueChange","structureKey","children","structure","parsed","derivesSelection","selectTabOnFocus","select","next","isSelected","getTabIndex","tabValue","baseId","registry","context","itemValue","panel","mergedRef","ref","containerProps","tabs","panels","keyed","key","isVertical","className","onKeyDown","onFocus","idProp","ctx","unavailable","mountedPanelId","panelId","onClick","insideTablist","mountedTabId","tabId","TabList"],"sources":["../../../src/components/layout/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, getElementType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport {\n  reportMissingContext,\n  resolveDeprecatedProp,\n  warnDeprecated,\n  warnOnce,\n} from '../../lib/dev';\nimport { disabledStyles, focusRing, focusRingInset } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { getPartId } from './disclosureIds';\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ntype TabListPart = 'tab' | 'panel';\n\n/**\n * The ids of the mounted Tabs and Panels by value. A Tab references a panel only while one with\n * its value is mounted (a TabList used as a filter bar has none), and each side references the\n * other's actual id, a consumer `id` included. Read with `useSyncExternalStore`.\n *\n * Before the TabList has mounted (server HTML, hydration and the first client render) the\n * registry is not ready and the static structure of the children stands in for it; once it is\n * ready, it alone decides, so a Panel that is in the element tree but never mounts (inside a\n * wrapper that renders nothing) is not referenced.\n */\ninterface TabListRegistry {\n  /** Registers a mounted Tab or Panel; returns the unregister function. */\n  register: (part: TabListPart, value: string, id: string) => () => void;\n  /**\n   * Id of the first mounted Tab or Panel with this value, `null` when none is mounted, or\n   * `undefined` while the registry is not ready (use the static structure then).\n   */\n  get: (part: TabListPart, value: string) => string | null | undefined;\n  /** Called by the TabList once it (and so every Tab and Panel mounted with it) has mounted. */\n  markReady: () => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\n/** Tabs that share a value share one id, and are selected and tab stops together. */\nfunction warnDuplicateTabValue(value: string): void {\n  warnOnce(\n    `TabList:duplicate:${value}`,\n    `TabList: several tabs share the value \"${value}\". Tab values must be unique within a ` +\n      'TabList; tabs with the same value share one id and are selected (and tab stops) together.',\n  );\n}\n\nfunction createRegistry(): TabListRegistry {\n  const entries: Record<TabListPart, Map<string, string[]>> = { tab: new Map(), panel: new Map() };\n  const listeners = new Set<() => void>();\n  let ready = false;\n  const emit = () => {\n    listeners.forEach((listener) => listener());\n  };\n  return {\n    register(part, value, id) {\n      const map = entries[part];\n      const ids = map.get(value) ?? [];\n      // Called from the part's layout effect (C-DEV). Two Panels may share a value (the Tab links\n      // to the first mounted one); two Tabs may not.\n      if (part === 'tab' && ids.length > 0) warnDuplicateTabValue(value);\n      map.set(value, [...ids, id]);\n      emit();\n      return () => {\n        const ids = [...(map.get(value) ?? [])];\n        const index = ids.indexOf(id);\n        if (index !== -1) ids.splice(index, 1);\n        if (ids.length > 0) map.set(value, ids);\n        else map.delete(value);\n        emit();\n      };\n    },\n    get: (part, value) => (ready ? (entries[part].get(value)?.[0] ?? null) : undefined),\n    markReady() {\n      if (ready) return;\n      ready = true;\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n}\n\nconst INERT_REGISTRY: TabListRegistry = {\n  register: () => () => {},\n  get: () => undefined,\n  markReady: () => {},\n  subscribe: () => () => {},\n};\n\n/**\n * What the TabList's children show before anything mounts (server HTML and the first render):\n * found in the element tree through Fragments and the `children` of wrapper elements, but not\n * inside a component that renders a Tab or Panel itself (the registry covers those once mounted).\n */\ninterface TabListStructure {\n  /** Value of the first Tab without `disabled`/`aria-disabled`: the uncontrolled default. */\n  firstEnabled?: string;\n  /** Consumer `id`s of Tabs, by value. */\n  tabIds: Array<[string, string]>;\n  /** Values of the Panels, each with its consumer `id` or `null`. */\n  panels: Array<[string, string | null]>;\n}\n\ninterface TabListContextValue {\n  orientation: Orientation;\n  /** Whether the tab with this value is the selected one (explicit value, else the tab stop). */\n  isSelected: (value: string) => boolean;\n  /**\n   * Activates a tab: a click (Enter and Space click the tab button), or with automatic activation\n   * focus moved by the keys.\n   */\n  select: (value: string) => void;\n  getTabIndex: (value: string) => 0 | -1;\n  /** The generated id of a Tab or Panel (used when it has no consumer `id`). */\n  getGeneratedId: (part: TabListPart, value: string) => string;\n  /**\n   * Id of the Tab with this value before the TabList mounts: its consumer `id`, else the\n   * generated one.\n   */\n  getStaticTabId: (value: string) => string;\n  /**\n   * Id of the Panel with this value before the TabList mounts, or `undefined` when the children\n   * have none.\n   */\n  getStaticPanelId: (value: string) => string | undefined;\n  registry: TabListRegistry;\n}\n\nconst TabListContext = React.createContext<TabListContextValue | null>(null);\n\nconst INERT_CONTEXT: TabListContextValue = {\n  orientation: 'horizontal',\n  isSelected: () => false,\n  select: () => {},\n  getTabIndex: () => -1,\n  getGeneratedId: (part, value) => `wave-tablist-inert-${part}-${value}`,\n  getStaticTabId: (value) => `wave-tablist-inert-tab-${value}`,\n  getStaticPanelId: () => undefined,\n  registry: INERT_REGISTRY,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useTabListContext(component: string): TabListContextValue {\n  const context = React.useContext(TabListContext);\n  if (context) return context;\n  reportMissingContext(component, '<TabList>');\n  return INERT_CONTEXT;\n}\n\ninterface StructureProps {\n  value?: unknown;\n  id?: unknown;\n  disabled?: unknown;\n  'aria-disabled'?: unknown;\n  children?: unknown;\n}\n\n/** Whether a Tab's props make it unavailable (it cannot be selected and is skipped by keys). */\nfunction isUnavailable(props: StructureProps): boolean {\n  const ariaDisabled = props['aria-disabled'];\n  return props.disabled === true || ariaDisabled === true || ariaDisabled === 'true';\n}\n\n/** A consumer `id` that replaces the generated one: a non-empty string (`''` counts as none). */\nfunction consumerId(id: unknown): string | null {\n  return typeof id === 'string' && id !== '' ? id : null;\n}\n\n/**\n * Walks the element tree of the TabList's children (see {@link TabListStructure}). Parts are\n * identified through their element type, so parts written in a Server Component (lazy\n * references) count too. A `React.lazy` still loading (inside the consumer's own `<Suspense>`,\n * such as code-split panels in `TabList.Panels`) is no part and never suspends the TabList: its\n * children are walked instead. Runs during render only.\n */\nfunction collectStructure(node: unknown, into: TabListStructure): TabListStructure {\n  if (Array.isArray(node)) {\n    node.forEach((child) => collectStructure(child, into));\n    return into;\n  }\n  if (!React.isValidElement<StructureProps>(node)) return into;\n  const { props } = node;\n  const type = getElementType(node, { suspend: false });\n  const value = typeof props.value === 'string' ? props.value : undefined;\n  if (type === Tab) {\n    if (value !== undefined) {\n      if (into.firstEnabled === undefined && !isUnavailable(props)) into.firstEnabled = value;\n      const id = consumerId(props.id);\n      if (id !== null) into.tabIds.push([value, id]);\n    }\n    return into;\n  }\n  if (type === TabPanel) {\n    if (value !== undefined) into.panels.push([value, consumerId(props.id)]);\n    return into;\n  }\n  if (type === TabListRoot) return into;\n  return collectStructure(props.children, into);\n}\n\n/**\n * Whether an element tree shows a Tab, or a Panel (`TabList.Panel` or `TabList.Panels`), found as\n * in {@link collectStructure}: through Fragments and the `children` of wrapper elements, not inside\n * a nested TabList or a component that renders the part itself.\n */\nfunction containsPart(node: unknown, part: TabListPart): boolean {\n  if (Array.isArray(node)) return node.some((child) => containsPart(child, part));\n  if (!React.isValidElement<StructureProps>(node)) return false;\n  const type = getElementType(node, { suspend: false });\n  if (type === Tab) return part === 'tab';\n  if (type === TabPanel || type === TabPanels) return part === 'panel';\n  if (type === TabListRoot) return false;\n  return containsPart(node.props.children, part);\n}\n\n/**\n * Whether a child of the TabList renders after the tablist: a Panel, `TabList.Panels`, or a\n * wrapper (an element, `Suspense`, an error boundary) that holds panels and no tab.\n */\nfunction rendersAfterTablist(child: React.ReactNode): boolean {\n  return containsPart(child, 'panel') && !containsPart(child, 'tab');\n}\n\n/**\n * Where the TabList renders its children: inside the `role=\"tablist\"` element (`'tabs'`) or after\n * it (`'panels'`). A Panel that ends up inside the tablist warns in development.\n */\nconst TabListAreaContext = React.createContext<'tabs' | 'panels' | null>(null);\n\nconst PANEL_IN_TABLIST_MESSAGE =\n  'TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe ' +\n  'aria-required-children). The TabList moves a Panel after the tablist when it is its child, or ' +\n  'in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or ' +\n  \"separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which \" +\n  'renders after the tablist.';\n\n/* ------------------------------------------------------------------ */\n/*  TabList                                                            */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabList component. */\nexport interface TabListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  /**\n   * Controlled value of the selected tab (`''`: no tab selected). A controlled value that becomes\n   * `undefined` also selects no tab: the TabList stays controlled.\n   */\n  value?: string;\n  /**\n   * Selected tab for uncontrolled usage. When it is omitted (or `''`), the first enabled tab\n   * written in the TabList's children is selected, from the first render (and in server-rendered\n   * HTML) on. Tabs written directly in the children, in Fragments or in wrapper elements that\n   * pass them as `children` (such as a Tooltip) count; a tab rendered by a custom component that\n   * renders `TabList.Tab` itself does not, even when it comes first in the DOM, so that server\n   * and client pick the same tab. When every tab comes from such a component, the first enabled\n   * tab in the DOM is selected once the tabs mount. To select a tab that a custom component\n   * renders, pass `defaultValue`.\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selected tab changes (not when it is activated again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Layout and arrow-key axis: `'horizontal'` (Left/Right, mirrored in RTL) or `'vertical'`\n   * (Up/Down).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic\n   * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click\n   * selects the focused tab (manual activation, for panels that are slow to show). Fluent's\n   * default is `false`.\n   * @default true\n   */\n  selectTabOnFocus?: boolean;\n  /** @deprecated Use `value`. */\n  selectedValue?: string;\n  /** @deprecated Use `defaultValue`. */\n  defaultSelectedValue?: string;\n  /**\n   * @deprecated Use `onValueChange`. Unlike `onValueChange`, it is called on every activation,\n   * including a click on the tab that is already selected.\n   */\n  onTabSelect?: (value: string) => void;\n  /** @deprecated Use `orientation=\"vertical\"`. */\n  vertical?: boolean;\n  /** Ref to the `role=\"tablist\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst TabListRoot = ({\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  onValueChange,\n  orientation: orientationProp,\n  selectTabOnFocus = true,\n  selectedValue,\n  defaultSelectedValue,\n  onTabSelect,\n  vertical,\n  className,\n  children,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: TabListProps) => {\n  const value = resolveDeprecatedProp(\n    'TabList',\n    valueProp,\n    selectedValue,\n    'selectedValue',\n    'value',\n  );\n  const defaultValue = resolveDeprecatedProp(\n    'TabList',\n    defaultValueProp,\n    defaultSelectedValue,\n    'defaultSelectedValue',\n    'defaultValue',\n  );\n  const orientation =\n    resolveDeprecatedProp<Orientation>(\n      'TabList',\n      orientationProp,\n      vertical === undefined ? undefined : vertical ? 'vertical' : 'horizontal',\n      'vertical',\n      'orientation',\n    ) ?? 'horizontal';\n  if (onTabSelect) {\n    warnDeprecated(\n      'TabList',\n      'onTabSelect',\n      'onValueChange',\n      '`onValueChange` is called only when the selected tab changes.',\n    );\n  }\n\n  // The sticky mode: a controlled value that becomes `undefined` clears the selection (`''`).\n  const [selected, setSelected, isControlled] = useControllable(\n    value,\n    defaultValue ?? '',\n    onValueChange,\n  );\n\n  // The children are a new element tree on every parent render: memoized by content, so the\n  // context value stays stable while the tabs and panels stay the same.\n  const structureKey = JSON.stringify(collectStructure(children, { tabIds: [], panels: [] }));\n  const structure = React.useMemo(() => {\n    const parsed = JSON.parse(structureKey) as TabListStructure;\n    return {\n      firstEnabled: parsed.firstEnabled,\n      tabIds: new Map(parsed.tabIds),\n      panels: new Map(parsed.panels),\n    };\n  }, [structureKey]);\n\n  // Uncontrolled without a selection: the first enabled tab is selected. It is the tab stop the\n  // roving store resolves from `activeValue` (the first enabled tab of the children, replaced by\n  // the first enabled tab in the DOM once the store sees it disabled), so the selection is\n  // derived during render, present from the first render on, and follows tabs that disable\n  // themselves.\n  const derivesSelection = !isControlled && selected === '';\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: derivesSelection ? (structure.firstEnabled ?? null) : selected,\n    orientation,\n    loop: true,\n    // Automatic activation (APG Tabs): moving focus selects the tab. With manual activation the\n    // keys only move focus; the tab stop stays on the selected tab (`tabStop: 'active'`), and Enter\n    // or Space selects the focused tab through its native click.\n    onFocusMove: selectTabOnFocus ? (next) => select(next) : undefined,\n  });\n\n  const isSelected = React.useCallback(\n    (tabValue: string) => (derivesSelection ? getTabIndex(tabValue) === 0 : selected === tabValue),\n    [derivesSelection, getTabIndex, selected],\n  );\n\n  const select = useEventCallback((next: string) => {\n    onTabSelect?.(next);\n    if (!isSelected(next)) setSelected(next);\n  });\n\n  const baseId = useId('tablist');\n  const [registry] = React.useState(createRegistry);\n  // Runs after the layout effects of the Tabs and Panels mounted with the TabList, which have\n  // registered by then: from here on the registry, not the static structure, decides the links.\n  React.useLayoutEffect(() => registry.markReady(), [registry]);\n  const context = React.useMemo<TabListContextValue>(\n    () => ({\n      orientation,\n      isSelected,\n      select,\n      getTabIndex,\n      getGeneratedId: (part, itemValue) => getPartId(baseId, part, itemValue),\n      getStaticTabId: (tabValue) =>\n        structure.tabIds.get(tabValue) ?? getPartId(baseId, 'tab', tabValue),\n      getStaticPanelId: (tabValue) => {\n        const panel = structure.panels.get(tabValue);\n        if (panel === undefined) return undefined;\n        return panel ?? getPartId(baseId, 'panel', tabValue);\n      },\n      registry,\n    }),\n    [orientation, isSelected, select, getTabIndex, baseId, structure, registry],\n  );\n\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref);\n\n  const tabs: React.ReactNode[] = [];\n  const panels: React.ReactNode[] = [];\n  flattenChildren(children).forEach(({ key, node: child }) => {\n    const keyed = <React.Fragment key={key}>{child}</React.Fragment>;\n    (rendersAfterTablist(child) ? panels : tabs).push(keyed);\n  });\n\n  const isVertical = orientation === 'vertical';\n  return (\n    <TabListContext.Provider value={context}>\n      <div className={cn(isVertical && 'flex')}>\n        <div\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className={cn(\n            isVertical\n              ? 'flex w-40 flex-col border-e border-border'\n              : 'flex border-b border-border',\n            className,\n          )}\n          {...rest}\n          data-roving-container=\"\"\n          onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n          onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n            checkDefaultPrevented: false,\n          })}\n          ref={mergedRef}\n        >\n          <TabListAreaContext.Provider value=\"tabs\">{tabs}</TabListAreaContext.Provider>\n        </div>\n        <TabListAreaContext.Provider value=\"panels\">{panels}</TabListAreaContext.Provider>\n      </div>\n    </TabListContext.Provider>\n  );\n};\nTabListRoot.displayName = 'TabList';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Tab                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Tab sub-component. */\nexport interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Unique value identifying this tab (and its panel). */\n  value: string;\n  /** Ref to the tab `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A tab button. `onClick` runs before the selection (call `event.preventDefault()` to keep the\n * current tab). A `disabled` (or `aria-disabled=\"true\"`) tab is skipped by the keyboard and cannot\n * be selected. A non-empty `id` replaces the generated one (its panel's `aria-labelledby` follows\n * it). The selected tab references its panel with `aria-controls` only while a `TabList.Panel`\n * with its value is mounted.\n */\nconst Tab = ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps) => {\n  const ctx = useTabListContext('TabList.Tab');\n  const selected = ctx.isSelected(value);\n  const isVertical = ctx.orientation === 'vertical';\n  const unavailable = isUnavailable(rest);\n\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('tab', value);\n  React.useLayoutEffect(() => registry.register('tab', value, id), [registry, value, id]);\n  const mountedPanelId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('panel', value),\n    () => undefined,\n  );\n  // Before the TabList mounts the static structure stands in; after that only a mounted panel is\n  // referenced (`null`: none).\n  const panelId =\n    mountedPanelId === undefined ? ctx.getStaticPanelId(value) : (mountedPanelId ?? undefined);\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      className={cn(\n        'px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none',\n        isVertical && 'text-start',\n        selected\n          ? cn(\n              'text-primary',\n              isVertical ? 'border-s-2 border-s-primary' : 'border-b-2 border-b-primary',\n            )\n          : 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground',\n        disabledStyles,\n        focusRingInset,\n        className,\n      )}\n      {...rest}\n      id={id}\n      aria-selected={selected}\n      aria-controls={selected ? panelId : undefined}\n      tabIndex={ctx.getTabIndex(value)}\n      data-roving-value={value}\n      data-selected={selected ? '' : undefined}\n      onClick={composeEventHandlers(onClick, () => {\n        if (!unavailable) ctx.select(value);\n      })}\n      ref={ref}\n    >\n      {children}\n    </button>\n  );\n};\nTab.displayName = 'Tab';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panel                                                      */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanel sub-component. */\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value of the Tab that shows this panel. */\n  value: string;\n  /** Ref to the `role=\"tabpanel\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * The content of one tab, rendered only while its tab is selected and labelled by it (while a Tab\n * with its value is mounted). A non-empty `id` replaces the generated one (the tab's\n * `aria-controls` follows it).\n */\nconst TabPanel = ({ value, id: idProp, children, className, ref, ...rest }: TabPanelProps) => {\n  const ctx = useTabListContext('TabList.Panel');\n  const insideTablist = React.useContext(TabListAreaContext) === 'tabs';\n  React.useEffect(() => {\n    if (insideTablist) warnOnce('TabList.Panel:inside-tablist', PANEL_IN_TABLIST_MESSAGE);\n  }, [insideTablist]);\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('panel', value);\n  // Registered while mounted, also while hidden: the tab that selects it links to it.\n  React.useLayoutEffect(() => registry.register('panel', value, id), [registry, value, id]);\n  const mountedTabId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('tab', value),\n    () => undefined,\n  );\n  if (!ctx.isSelected(value)) return null;\n  // As for the Tab's aria-controls: the static structure only before the TabList mounts.\n  const tabId =\n    mountedTabId === undefined ? ctx.getStaticTabId(value) : (mountedTabId ?? undefined);\n  return (\n    <div\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cn('p-4', focusRing, className)}\n      {...rest}\n      id={id}\n      aria-labelledby={tabId}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n};\nTabPanel.displayName = 'TabPanel';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panels                                                     */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanels sub-component. */\nexport interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the container `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Optional container for the panels, rendered after the tablist. Use it to style the panel area,\n * and for panels that components render themselves: the TabList finds a Panel in its children, in\n * a Fragment or in a wrapper that holds no Tab, but a component that renders a Panel itself\n * renders inside the tablist unless it is placed in `TabList.Panels`.\n */\nconst TabPanels = ({ className, children, ref, ...rest }: TabPanelsProps) => (\n  <div ref={ref} className={cn('min-w-0 flex-1', className)} {...rest}>\n    {children}\n  </div>\n);\nTabPanels.displayName = 'TabPanels';\n\n/* ------------------------------------------------------------------ */\n/*  Export                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * A set of tabs with their panels (WAI-ARIA Tabs pattern): the arrow keys (Left/Right, mirrored\n * in RTL; Up/Down when vertical), Home and End move focus and select (automatic activation); with\n * `selectTabOnFocus={false}` they only move focus, and Enter, Space or a click selects the focused\n * tab (manual activation). The selected tab is the only tab stop; disabled tabs are skipped. Every\n * tab needs a `value` that is unique within the TabList (a development warning names a value that\n * several tabs share).\n *\n * Tabs register through context and are found in DOM order, so they may be wrapped (a Fragment,\n * a Tooltip). The children render inside the `role=\"tablist\"` element, except panels, which render\n * after it: a `TabList.Panel` or `TabList.Panels` child, or a wrapper (an element, `Suspense`, an\n * error boundary) that holds panels and no Tab. A Panel that a component renders itself cannot be\n * seen from the children: put that component inside `TabList.Panels` (a development warning names\n * a Panel that ends up inside the tablist). Content that is not a tab, such as a button next to\n * the tabs, does not belong in a tablist either: render it outside the TabList.\n *\n * Sub-components are also exported under flat names (`TabListTab`, `TabListPanel`,\n * `TabListPanels`) for React Server Components, which cannot use the dotted form.\n */\nexport const TabList = /* @__PURE__ */ Object.assign(TabListRoot, {\n  Tab,\n  Panel: TabPanel,\n  Panels: TabPanels,\n});\n\nexport { Tab as TabListTab, TabPanel as TabListPanel, TabPanels as TabListPanels };\n"],"mappings":"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"}

package/dist/components/layout/TabList.mjs

@@ -0,0 +1,238 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { flattenChildren as t, getElementType as n } from "../../lib/children.mjs";
+import { reportMissingContext as r, resolveDeprecatedProp as i, warnDeprecated as a, warnOnce as o } from "../../lib/dev.mjs";
+import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
+import { useEventCallback as c } from "../../hooks/useEventCallback.mjs";
+import { useControllable as l } from "../../hooks/useControllable.mjs";
+import { useId as u } from "../../hooks/useId.mjs";
+import { useRovingTabIndex as d } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as f } from "../../hooks/useMergedRefs.mjs";
+import { disabledStyles as p, focusRing as m, focusRingInset as h } from "../../lib/styles.mjs";
+import { getPartId as g } from "./disclosureIds.mjs";
+import * as _ from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/layout/TabList.tsx
+function b(e) {
+	o(`TabList:duplicate:${e}`, `TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`);
+}
+function x() {
+	let e = {
+		tab: /* @__PURE__ */ new Map(),
+		panel: /* @__PURE__ */ new Map()
+	}, t = /* @__PURE__ */ new Set(), n = !1, r = () => {
+		t.forEach((e) => e());
+	};
+	return {
+		register(t, n, i) {
+			let a = e[t], o = a.get(n) ?? [];
+			return t === "tab" && o.length > 0 && b(n), a.set(n, [...o, i]), r(), () => {
+				let e = [...a.get(n) ?? []], t = e.indexOf(i);
+				t !== -1 && e.splice(t, 1), e.length > 0 ? a.set(n, e) : a.delete(n), r();
+			};
+		},
+		get: (t, r) => n ? e[t].get(r)?.[0] ?? null : void 0,
+		markReady() {
+			n || (n = !0, r());
+		},
+		subscribe(e) {
+			return t.add(e), () => {
+				t.delete(e);
+			};
+		}
+	};
+}
+var S = {
+	register: () => () => {},
+	get: () => void 0,
+	markReady: () => {},
+	subscribe: () => () => {}
+}, C = _.createContext(null), w = {
+	orientation: "horizontal",
+	isSelected: () => !1,
+	select: () => {},
+	getTabIndex: () => -1,
+	getGeneratedId: (e, t) => `wave-tablist-inert-${e}-${t}`,
+	getStaticTabId: (e) => `wave-tablist-inert-tab-${e}`,
+	getStaticPanelId: () => void 0,
+	registry: S
+};
+function T(e) {
+	return _.useContext(C) || (r(e, "<TabList>"), w);
+}
+function E(e) {
+	let t = e["aria-disabled"];
+	return e.disabled === !0 || t === !0 || t === "true";
+}
+function D(e) {
+	return typeof e == "string" && e !== "" ? e : null;
+}
+function O(e, t) {
+	if (Array.isArray(e)) return e.forEach((e) => O(e, t)), t;
+	if (!_.isValidElement(e)) return t;
+	let { props: r } = e, i = n(e, { suspend: !1 }), a = typeof r.value == "string" ? r.value : void 0;
+	if (i === P) {
+		if (a !== void 0) {
+			t.firstEnabled === void 0 && !E(r) && (t.firstEnabled = a);
+			let e = D(r.id);
+			e !== null && t.tabIds.push([a, e]);
+		}
+		return t;
+	}
+	return i === F ? (a !== void 0 && t.panels.push([a, D(r.id)]), t) : i === N ? t : O(r.children, t);
+}
+function k(e, t) {
+	if (Array.isArray(e)) return e.some((e) => k(e, t));
+	if (!_.isValidElement(e)) return !1;
+	let r = n(e, { suspend: !1 });
+	return r === P ? t === "tab" : r === F || r === I ? t === "panel" : r !== N && k(e.props.children, t);
+}
+function A(e) {
+	return k(e, "panel") && !k(e, "tab");
+}
+var j = _.createContext(null), M = "TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.", N = ({ value: n, defaultValue: r, onValueChange: o, orientation: p, selectTabOnFocus: m = !0, selectedValue: h, defaultSelectedValue: b, onTabSelect: S, vertical: w, className: T, children: E, onKeyDown: D, onFocus: k, ref: M, ...N }) => {
+	let P = i("TabList", n, h, "selectedValue", "value"), F = i("TabList", r, b, "defaultSelectedValue", "defaultValue"), I = i("TabList", p, w === void 0 ? void 0 : w ? "vertical" : "horizontal", "vertical", "orientation") ?? "horizontal";
+	S && a("TabList", "onTabSelect", "onValueChange", "`onValueChange` is called only when the selected tab changes.");
+	let [L, R, z] = l(P, F ?? "", o), B = JSON.stringify(O(E, {
+		tabIds: [],
+		panels: []
+	})), V = _.useMemo(() => {
+		let e = JSON.parse(B);
+		return {
+			firstEnabled: e.firstEnabled,
+			tabIds: new Map(e.tabIds),
+			panels: new Map(e.panels)
+		};
+	}, [B]), H = !z && L === "", { containerProps: U, getTabIndex: W } = d({
+		activeValue: H ? V.firstEnabled ?? null : L,
+		orientation: I,
+		loop: !0,
+		onFocusMove: m ? (e) => K(e) : void 0
+	}), G = _.useCallback((e) => H ? W(e) === 0 : L === e, [
+		H,
+		W,
+		L
+	]), K = c((e) => {
+		S?.(e), G(e) || R(e);
+	}), q = u("tablist"), [J] = _.useState(x);
+	_.useLayoutEffect(() => J.markReady(), [J]);
+	let Y = _.useMemo(() => ({
+		orientation: I,
+		isSelected: G,
+		select: K,
+		getTabIndex: W,
+		getGeneratedId: (e, t) => g(q, e, t),
+		getStaticTabId: (e) => V.tabIds.get(e) ?? g(q, "tab", e),
+		getStaticPanelId: (e) => {
+			let t = V.panels.get(e);
+			if (t !== void 0) return t ?? g(q, "panel", e);
+		},
+		registry: J
+	}), [
+		I,
+		G,
+		K,
+		W,
+		q,
+		V,
+		J
+	]), X = f(M, U.ref), Z = [], Q = [];
+	t(E).forEach(({ key: e, node: t }) => {
+		let n = /* @__PURE__ */ v(_.Fragment, { children: t }, e);
+		(A(t) ? Q : Z).push(n);
+	});
+	let $ = I === "vertical";
+	return /* @__PURE__ */ v(C.Provider, {
+		value: Y,
+		children: /* @__PURE__ */ y("div", {
+			className: e($ && "flex"),
+			children: [/* @__PURE__ */ v("div", {
+				role: "tablist",
+				"aria-orientation": I,
+				className: e($ ? "flex w-40 flex-col border-e border-border" : "flex border-b border-border", T),
+				...N,
+				"data-roving-container": "",
+				onKeyDown: s(D, U.onKeyDown),
+				onFocus: s(k, U.onFocus, { checkDefaultPrevented: !1 }),
+				ref: X,
+				children: /* @__PURE__ */ v(j.Provider, {
+					value: "tabs",
+					children: Z
+				})
+			}), /* @__PURE__ */ v(j.Provider, {
+				value: "panels",
+				children: Q
+			})]
+		})
+	});
+};
+N.displayName = "TabList";
+var P = ({ value: t, id: n, className: r, children: i, onClick: a, ref: o, ...c }) => {
+	let l = T("TabList.Tab"), u = l.isSelected(t), d = l.orientation === "vertical", f = E(c), { registry: m } = l, g = D(n) ?? l.getGeneratedId("tab", t);
+	_.useLayoutEffect(() => m.register("tab", t, g), [
+		m,
+		t,
+		g
+	]);
+	let y = _.useSyncExternalStore(m.subscribe, () => m.get("panel", t), () => void 0), b = y === void 0 ? l.getStaticPanelId(t) : y ?? void 0;
+	return /* @__PURE__ */ v("button", {
+		type: "button",
+		role: "tab",
+		className: e("px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none", d && "text-start", u ? e("text-primary", d ? "border-s-2 border-s-primary" : "border-b-2 border-b-primary") : "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground", p, h, r),
+		...c,
+		id: g,
+		"aria-selected": u,
+		"aria-controls": u ? b : void 0,
+		tabIndex: l.getTabIndex(t),
+		"data-roving-value": t,
+		"data-selected": u ? "" : void 0,
+		onClick: s(a, () => {
+			f || l.select(t);
+		}),
+		ref: o,
+		children: i
+	});
+};
+P.displayName = "Tab";
+var F = ({ value: t, id: n, children: r, className: i, ref: a, ...s }) => {
+	let c = T("TabList.Panel"), l = _.useContext(j) === "tabs";
+	_.useEffect(() => {
+		l && o("TabList.Panel:inside-tablist", M);
+	}, [l]);
+	let { registry: u } = c, d = D(n) ?? c.getGeneratedId("panel", t);
+	_.useLayoutEffect(() => u.register("panel", t, d), [
+		u,
+		t,
+		d
+	]);
+	let f = _.useSyncExternalStore(u.subscribe, () => u.get("tab", t), () => void 0);
+	if (!c.isSelected(t)) return null;
+	let p = f === void 0 ? c.getStaticTabId(t) : f ?? void 0;
+	return /* @__PURE__ */ v("div", {
+		role: "tabpanel",
+		tabIndex: 0,
+		className: e("p-4", m, i),
+		...s,
+		id: d,
+		"aria-labelledby": p,
+		ref: a,
+		children: r
+	});
+};
+F.displayName = "TabPanel";
+var I = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ v("div", {
+	ref: r,
+	className: e("min-w-0 flex-1", t),
+	...i,
+	children: n
+});
+I.displayName = "TabPanels";
+var L = /* @__PURE__ */ Object.assign(N, {
+	Tab: P,
+	Panel: F,
+	Panels: I
+});
+//#endregion
+export { L as TabList, F as TabListPanel, I as TabListPanels, P as TabListTab };
+
+//# sourceMappingURL=TabList.mjs.map

package/dist/components/layout/TabList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.mjs","names":["useId","useId$1","React","warnDuplicateTabValue","value","createRegistry","entries","listeners","ready","emit","listener","map","part","ids","id","index","INERT_REGISTRY","TabListContext","INERT_CONTEXT","useTabListContext","reportMissingContext","component","isUnavailable","ariaDisabled","props","consumerId","collectStructure","node","child","into","type","getElementType","Tab","TabPanel","TabListRoot","containsPart","TabPanels","rendersAfterTablist","TabListAreaContext","PANEL_IN_TABLIST_MESSAGE","valueProp","defaultValueProp","orientationProp","rest","resolveDeprecatedProp","selectedValue","defaultValue","defaultSelectedValue","orientation","vertical","onTabSelect","warnDeprecated","selected","setSelected","isControlled","useControllable","onValueChange","structureKey","children","structure","parsed","derivesSelection","useRovingTabIndex","selectTabOnFocus","select","next","isSelected","getTabIndex","tabValue","useEventCallback","baseId","registry","context","getPartId","itemValue","panel","mergedRef","useMergedRefs","ref","containerProps","tabs","panels","keyed","key","isVertical","cn","className","composeEventHandlers","onKeyDown","onFocus","idProp","ctx","unavailable","mountedPanelId","panelId","disabledStyles","focusRingInset","onClick","insideTablist","warnOnce","mountedTabId","tabId","focusRing","TabList"],"sources":["../../../src/components/layout/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, getElementType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport {\n  reportMissingContext,\n  resolveDeprecatedProp,\n  warnDeprecated,\n  warnOnce,\n} from '../../lib/dev';\nimport { disabledStyles, focusRing, focusRingInset } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { getPartId } from './disclosureIds';\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ntype TabListPart = 'tab' | 'panel';\n\n/**\n * The ids of the mounted Tabs and Panels by value. A Tab references a panel only while one with\n * its value is mounted (a TabList used as a filter bar has none), and each side references the\n * other's actual id, a consumer `id` included. Read with `useSyncExternalStore`.\n *\n * Before the TabList has mounted (server HTML, hydration and the first client render) the\n * registry is not ready and the static structure of the children stands in for it; once it is\n * ready, it alone decides, so a Panel that is in the element tree but never mounts (inside a\n * wrapper that renders nothing) is not referenced.\n */\ninterface TabListRegistry {\n  /** Registers a mounted Tab or Panel; returns the unregister function. */\n  register: (part: TabListPart, value: string, id: string) => () => void;\n  /**\n   * Id of the first mounted Tab or Panel with this value, `null` when none is mounted, or\n   * `undefined` while the registry is not ready (use the static structure then).\n   */\n  get: (part: TabListPart, value: string) => string | null | undefined;\n  /** Called by the TabList once it (and so every Tab and Panel mounted with it) has mounted. */\n  markReady: () => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\n/** Tabs that share a value share one id, and are selected and tab stops together. */\nfunction warnDuplicateTabValue(value: string): void {\n  warnOnce(\n    `TabList:duplicate:${value}`,\n    `TabList: several tabs share the value \"${value}\". Tab values must be unique within a ` +\n      'TabList; tabs with the same value share one id and are selected (and tab stops) together.',\n  );\n}\n\nfunction createRegistry(): TabListRegistry {\n  const entries: Record<TabListPart, Map<string, string[]>> = { tab: new Map(), panel: new Map() };\n  const listeners = new Set<() => void>();\n  let ready = false;\n  const emit = () => {\n    listeners.forEach((listener) => listener());\n  };\n  return {\n    register(part, value, id) {\n      const map = entries[part];\n      const ids = map.get(value) ?? [];\n      // Called from the part's layout effect (C-DEV). Two Panels may share a value (the Tab links\n      // to the first mounted one); two Tabs may not.\n      if (part === 'tab' && ids.length > 0) warnDuplicateTabValue(value);\n      map.set(value, [...ids, id]);\n      emit();\n      return () => {\n        const ids = [...(map.get(value) ?? [])];\n        const index = ids.indexOf(id);\n        if (index !== -1) ids.splice(index, 1);\n        if (ids.length > 0) map.set(value, ids);\n        else map.delete(value);\n        emit();\n      };\n    },\n    get: (part, value) => (ready ? (entries[part].get(value)?.[0] ?? null) : undefined),\n    markReady() {\n      if (ready) return;\n      ready = true;\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n}\n\nconst INERT_REGISTRY: TabListRegistry = {\n  register: () => () => {},\n  get: () => undefined,\n  markReady: () => {},\n  subscribe: () => () => {},\n};\n\n/**\n * What the TabList's children show before anything mounts (server HTML and the first render):\n * found in the element tree through Fragments and the `children` of wrapper elements, but not\n * inside a component that renders a Tab or Panel itself (the registry covers those once mounted).\n */\ninterface TabListStructure {\n  /** Value of the first Tab without `disabled`/`aria-disabled`: the uncontrolled default. */\n  firstEnabled?: string;\n  /** Consumer `id`s of Tabs, by value. */\n  tabIds: Array<[string, string]>;\n  /** Values of the Panels, each with its consumer `id` or `null`. */\n  panels: Array<[string, string | null]>;\n}\n\ninterface TabListContextValue {\n  orientation: Orientation;\n  /** Whether the tab with this value is the selected one (explicit value, else the tab stop). */\n  isSelected: (value: string) => boolean;\n  /**\n   * Activates a tab: a click (Enter and Space click the tab button), or with automatic activation\n   * focus moved by the keys.\n   */\n  select: (value: string) => void;\n  getTabIndex: (value: string) => 0 | -1;\n  /** The generated id of a Tab or Panel (used when it has no consumer `id`). */\n  getGeneratedId: (part: TabListPart, value: string) => string;\n  /**\n   * Id of the Tab with this value before the TabList mounts: its consumer `id`, else the\n   * generated one.\n   */\n  getStaticTabId: (value: string) => string;\n  /**\n   * Id of the Panel with this value before the TabList mounts, or `undefined` when the children\n   * have none.\n   */\n  getStaticPanelId: (value: string) => string | undefined;\n  registry: TabListRegistry;\n}\n\nconst TabListContext = React.createContext<TabListContextValue | null>(null);\n\nconst INERT_CONTEXT: TabListContextValue = {\n  orientation: 'horizontal',\n  isSelected: () => false,\n  select: () => {},\n  getTabIndex: () => -1,\n  getGeneratedId: (part, value) => `wave-tablist-inert-${part}-${value}`,\n  getStaticTabId: (value) => `wave-tablist-inert-tab-${value}`,\n  getStaticPanelId: () => undefined,\n  registry: INERT_REGISTRY,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useTabListContext(component: string): TabListContextValue {\n  const context = React.useContext(TabListContext);\n  if (context) return context;\n  reportMissingContext(component, '<TabList>');\n  return INERT_CONTEXT;\n}\n\ninterface StructureProps {\n  value?: unknown;\n  id?: unknown;\n  disabled?: unknown;\n  'aria-disabled'?: unknown;\n  children?: unknown;\n}\n\n/** Whether a Tab's props make it unavailable (it cannot be selected and is skipped by keys). */\nfunction isUnavailable(props: StructureProps): boolean {\n  const ariaDisabled = props['aria-disabled'];\n  return props.disabled === true || ariaDisabled === true || ariaDisabled === 'true';\n}\n\n/** A consumer `id` that replaces the generated one: a non-empty string (`''` counts as none). */\nfunction consumerId(id: unknown): string | null {\n  return typeof id === 'string' && id !== '' ? id : null;\n}\n\n/**\n * Walks the element tree of the TabList's children (see {@link TabListStructure}). Parts are\n * identified through their element type, so parts written in a Server Component (lazy\n * references) count too. A `React.lazy` still loading (inside the consumer's own `<Suspense>`,\n * such as code-split panels in `TabList.Panels`) is no part and never suspends the TabList: its\n * children are walked instead. Runs during render only.\n */\nfunction collectStructure(node: unknown, into: TabListStructure): TabListStructure {\n  if (Array.isArray(node)) {\n    node.forEach((child) => collectStructure(child, into));\n    return into;\n  }\n  if (!React.isValidElement<StructureProps>(node)) return into;\n  const { props } = node;\n  const type = getElementType(node, { suspend: false });\n  const value = typeof props.value === 'string' ? props.value : undefined;\n  if (type === Tab) {\n    if (value !== undefined) {\n      if (into.firstEnabled === undefined && !isUnavailable(props)) into.firstEnabled = value;\n      const id = consumerId(props.id);\n      if (id !== null) into.tabIds.push([value, id]);\n    }\n    return into;\n  }\n  if (type === TabPanel) {\n    if (value !== undefined) into.panels.push([value, consumerId(props.id)]);\n    return into;\n  }\n  if (type === TabListRoot) return into;\n  return collectStructure(props.children, into);\n}\n\n/**\n * Whether an element tree shows a Tab, or a Panel (`TabList.Panel` or `TabList.Panels`), found as\n * in {@link collectStructure}: through Fragments and the `children` of wrapper elements, not inside\n * a nested TabList or a component that renders the part itself.\n */\nfunction containsPart(node: unknown, part: TabListPart): boolean {\n  if (Array.isArray(node)) return node.some((child) => containsPart(child, part));\n  if (!React.isValidElement<StructureProps>(node)) return false;\n  const type = getElementType(node, { suspend: false });\n  if (type === Tab) return part === 'tab';\n  if (type === TabPanel || type === TabPanels) return part === 'panel';\n  if (type === TabListRoot) return false;\n  return containsPart(node.props.children, part);\n}\n\n/**\n * Whether a child of the TabList renders after the tablist: a Panel, `TabList.Panels`, or a\n * wrapper (an element, `Suspense`, an error boundary) that holds panels and no tab.\n */\nfunction rendersAfterTablist(child: React.ReactNode): boolean {\n  return containsPart(child, 'panel') && !containsPart(child, 'tab');\n}\n\n/**\n * Where the TabList renders its children: inside the `role=\"tablist\"` element (`'tabs'`) or after\n * it (`'panels'`). A Panel that ends up inside the tablist warns in development.\n */\nconst TabListAreaContext = React.createContext<'tabs' | 'panels' | null>(null);\n\nconst PANEL_IN_TABLIST_MESSAGE =\n  'TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe ' +\n  'aria-required-children). The TabList moves a Panel after the tablist when it is its child, or ' +\n  'in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or ' +\n  \"separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which \" +\n  'renders after the tablist.';\n\n/* ------------------------------------------------------------------ */\n/*  TabList                                                            */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabList component. */\nexport interface TabListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  /**\n   * Controlled value of the selected tab (`''`: no tab selected). A controlled value that becomes\n   * `undefined` also selects no tab: the TabList stays controlled.\n   */\n  value?: string;\n  /**\n   * Selected tab for uncontrolled usage. When it is omitted (or `''`), the first enabled tab\n   * written in the TabList's children is selected, from the first render (and in server-rendered\n   * HTML) on. Tabs written directly in the children, in Fragments or in wrapper elements that\n   * pass them as `children` (such as a Tooltip) count; a tab rendered by a custom component that\n   * renders `TabList.Tab` itself does not, even when it comes first in the DOM, so that server\n   * and client pick the same tab. When every tab comes from such a component, the first enabled\n   * tab in the DOM is selected once the tabs mount. To select a tab that a custom component\n   * renders, pass `defaultValue`.\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selected tab changes (not when it is activated again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Layout and arrow-key axis: `'horizontal'` (Left/Right, mirrored in RTL) or `'vertical'`\n   * (Up/Down).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic\n   * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click\n   * selects the focused tab (manual activation, for panels that are slow to show). Fluent's\n   * default is `false`.\n   * @default true\n   */\n  selectTabOnFocus?: boolean;\n  /** @deprecated Use `value`. */\n  selectedValue?: string;\n  /** @deprecated Use `defaultValue`. */\n  defaultSelectedValue?: string;\n  /**\n   * @deprecated Use `onValueChange`. Unlike `onValueChange`, it is called on every activation,\n   * including a click on the tab that is already selected.\n   */\n  onTabSelect?: (value: string) => void;\n  /** @deprecated Use `orientation=\"vertical\"`. */\n  vertical?: boolean;\n  /** Ref to the `role=\"tablist\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst TabListRoot = ({\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  onValueChange,\n  orientation: orientationProp,\n  selectTabOnFocus = true,\n  selectedValue,\n  defaultSelectedValue,\n  onTabSelect,\n  vertical,\n  className,\n  children,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: TabListProps) => {\n  const value = resolveDeprecatedProp(\n    'TabList',\n    valueProp,\n    selectedValue,\n    'selectedValue',\n    'value',\n  );\n  const defaultValue = resolveDeprecatedProp(\n    'TabList',\n    defaultValueProp,\n    defaultSelectedValue,\n    'defaultSelectedValue',\n    'defaultValue',\n  );\n  const orientation =\n    resolveDeprecatedProp<Orientation>(\n      'TabList',\n      orientationProp,\n      vertical === undefined ? undefined : vertical ? 'vertical' : 'horizontal',\n      'vertical',\n      'orientation',\n    ) ?? 'horizontal';\n  if (onTabSelect) {\n    warnDeprecated(\n      'TabList',\n      'onTabSelect',\n      'onValueChange',\n      '`onValueChange` is called only when the selected tab changes.',\n    );\n  }\n\n  // The sticky mode: a controlled value that becomes `undefined` clears the selection (`''`).\n  const [selected, setSelected, isControlled] = useControllable(\n    value,\n    defaultValue ?? '',\n    onValueChange,\n  );\n\n  // The children are a new element tree on every parent render: memoized by content, so the\n  // context value stays stable while the tabs and panels stay the same.\n  const structureKey = JSON.stringify(collectStructure(children, { tabIds: [], panels: [] }));\n  const structure = React.useMemo(() => {\n    const parsed = JSON.parse(structureKey) as TabListStructure;\n    return {\n      firstEnabled: parsed.firstEnabled,\n      tabIds: new Map(parsed.tabIds),\n      panels: new Map(parsed.panels),\n    };\n  }, [structureKey]);\n\n  // Uncontrolled without a selection: the first enabled tab is selected. It is the tab stop the\n  // roving store resolves from `activeValue` (the first enabled tab of the children, replaced by\n  // the first enabled tab in the DOM once the store sees it disabled), so the selection is\n  // derived during render, present from the first render on, and follows tabs that disable\n  // themselves.\n  const derivesSelection = !isControlled && selected === '';\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: derivesSelection ? (structure.firstEnabled ?? null) : selected,\n    orientation,\n    loop: true,\n    // Automatic activation (APG Tabs): moving focus selects the tab. With manual activation the\n    // keys only move focus; the tab stop stays on the selected tab (`tabStop: 'active'`), and Enter\n    // or Space selects the focused tab through its native click.\n    onFocusMove: selectTabOnFocus ? (next) => select(next) : undefined,\n  });\n\n  const isSelected = React.useCallback(\n    (tabValue: string) => (derivesSelection ? getTabIndex(tabValue) === 0 : selected === tabValue),\n    [derivesSelection, getTabIndex, selected],\n  );\n\n  const select = useEventCallback((next: string) => {\n    onTabSelect?.(next);\n    if (!isSelected(next)) setSelected(next);\n  });\n\n  const baseId = useId('tablist');\n  const [registry] = React.useState(createRegistry);\n  // Runs after the layout effects of the Tabs and Panels mounted with the TabList, which have\n  // registered by then: from here on the registry, not the static structure, decides the links.\n  React.useLayoutEffect(() => registry.markReady(), [registry]);\n  const context = React.useMemo<TabListContextValue>(\n    () => ({\n      orientation,\n      isSelected,\n      select,\n      getTabIndex,\n      getGeneratedId: (part, itemValue) => getPartId(baseId, part, itemValue),\n      getStaticTabId: (tabValue) =>\n        structure.tabIds.get(tabValue) ?? getPartId(baseId, 'tab', tabValue),\n      getStaticPanelId: (tabValue) => {\n        const panel = structure.panels.get(tabValue);\n        if (panel === undefined) return undefined;\n        return panel ?? getPartId(baseId, 'panel', tabValue);\n      },\n      registry,\n    }),\n    [orientation, isSelected, select, getTabIndex, baseId, structure, registry],\n  );\n\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref);\n\n  const tabs: React.ReactNode[] = [];\n  const panels: React.ReactNode[] = [];\n  flattenChildren(children).forEach(({ key, node: child }) => {\n    const keyed = <React.Fragment key={key}>{child}</React.Fragment>;\n    (rendersAfterTablist(child) ? panels : tabs).push(keyed);\n  });\n\n  const isVertical = orientation === 'vertical';\n  return (\n    <TabListContext.Provider value={context}>\n      <div className={cn(isVertical && 'flex')}>\n        <div\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className={cn(\n            isVertical\n              ? 'flex w-40 flex-col border-e border-border'\n              : 'flex border-b border-border',\n            className,\n          )}\n          {...rest}\n          data-roving-container=\"\"\n          onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n          onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n            checkDefaultPrevented: false,\n          })}\n          ref={mergedRef}\n        >\n          <TabListAreaContext.Provider value=\"tabs\">{tabs}</TabListAreaContext.Provider>\n        </div>\n        <TabListAreaContext.Provider value=\"panels\">{panels}</TabListAreaContext.Provider>\n      </div>\n    </TabListContext.Provider>\n  );\n};\nTabListRoot.displayName = 'TabList';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Tab                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Tab sub-component. */\nexport interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Unique value identifying this tab (and its panel). */\n  value: string;\n  /** Ref to the tab `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A tab button. `onClick` runs before the selection (call `event.preventDefault()` to keep the\n * current tab). A `disabled` (or `aria-disabled=\"true\"`) tab is skipped by the keyboard and cannot\n * be selected. A non-empty `id` replaces the generated one (its panel's `aria-labelledby` follows\n * it). The selected tab references its panel with `aria-controls` only while a `TabList.Panel`\n * with its value is mounted.\n */\nconst Tab = ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps) => {\n  const ctx = useTabListContext('TabList.Tab');\n  const selected = ctx.isSelected(value);\n  const isVertical = ctx.orientation === 'vertical';\n  const unavailable = isUnavailable(rest);\n\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('tab', value);\n  React.useLayoutEffect(() => registry.register('tab', value, id), [registry, value, id]);\n  const mountedPanelId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('panel', value),\n    () => undefined,\n  );\n  // Before the TabList mounts the static structure stands in; after that only a mounted panel is\n  // referenced (`null`: none).\n  const panelId =\n    mountedPanelId === undefined ? ctx.getStaticPanelId(value) : (mountedPanelId ?? undefined);\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      className={cn(\n        'px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none',\n        isVertical && 'text-start',\n        selected\n          ? cn(\n              'text-primary',\n              isVertical ? 'border-s-2 border-s-primary' : 'border-b-2 border-b-primary',\n            )\n          : 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground',\n        disabledStyles,\n        focusRingInset,\n        className,\n      )}\n      {...rest}\n      id={id}\n      aria-selected={selected}\n      aria-controls={selected ? panelId : undefined}\n      tabIndex={ctx.getTabIndex(value)}\n      data-roving-value={value}\n      data-selected={selected ? '' : undefined}\n      onClick={composeEventHandlers(onClick, () => {\n        if (!unavailable) ctx.select(value);\n      })}\n      ref={ref}\n    >\n      {children}\n    </button>\n  );\n};\nTab.displayName = 'Tab';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panel                                                      */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanel sub-component. */\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value of the Tab that shows this panel. */\n  value: string;\n  /** Ref to the `role=\"tabpanel\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * The content of one tab, rendered only while its tab is selected and labelled by it (while a Tab\n * with its value is mounted). A non-empty `id` replaces the generated one (the tab's\n * `aria-controls` follows it).\n */\nconst TabPanel = ({ value, id: idProp, children, className, ref, ...rest }: TabPanelProps) => {\n  const ctx = useTabListContext('TabList.Panel');\n  const insideTablist = React.useContext(TabListAreaContext) === 'tabs';\n  React.useEffect(() => {\n    if (insideTablist) warnOnce('TabList.Panel:inside-tablist', PANEL_IN_TABLIST_MESSAGE);\n  }, [insideTablist]);\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('panel', value);\n  // Registered while mounted, also while hidden: the tab that selects it links to it.\n  React.useLayoutEffect(() => registry.register('panel', value, id), [registry, value, id]);\n  const mountedTabId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('tab', value),\n    () => undefined,\n  );\n  if (!ctx.isSelected(value)) return null;\n  // As for the Tab's aria-controls: the static structure only before the TabList mounts.\n  const tabId =\n    mountedTabId === undefined ? ctx.getStaticTabId(value) : (mountedTabId ?? undefined);\n  return (\n    <div\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cn('p-4', focusRing, className)}\n      {...rest}\n      id={id}\n      aria-labelledby={tabId}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n};\nTabPanel.displayName = 'TabPanel';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panels                                                     */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanels sub-component. */\nexport interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the container `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Optional container for the panels, rendered after the tablist. Use it to style the panel area,\n * and for panels that components render themselves: the TabList finds a Panel in its children, in\n * a Fragment or in a wrapper that holds no Tab, but a component that renders a Panel itself\n * renders inside the tablist unless it is placed in `TabList.Panels`.\n */\nconst TabPanels = ({ className, children, ref, ...rest }: TabPanelsProps) => (\n  <div ref={ref} className={cn('min-w-0 flex-1', className)} {...rest}>\n    {children}\n  </div>\n);\nTabPanels.displayName = 'TabPanels';\n\n/* ------------------------------------------------------------------ */\n/*  Export                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * A set of tabs with their panels (WAI-ARIA Tabs pattern): the arrow keys (Left/Right, mirrored\n * in RTL; Up/Down when vertical), Home and End move focus and select (automatic activation); with\n * `selectTabOnFocus={false}` they only move focus, and Enter, Space or a click selects the focused\n * tab (manual activation). The selected tab is the only tab stop; disabled tabs are skipped. Every\n * tab needs a `value` that is unique within the TabList (a development warning names a value that\n * several tabs share).\n *\n * Tabs register through context and are found in DOM order, so they may be wrapped (a Fragment,\n * a Tooltip). The children render inside the `role=\"tablist\"` element, except panels, which render\n * after it: a `TabList.Panel` or `TabList.Panels` child, or a wrapper (an element, `Suspense`, an\n * error boundary) that holds panels and no Tab. A Panel that a component renders itself cannot be\n * seen from the children: put that component inside `TabList.Panels` (a development warning names\n * a Panel that ends up inside the tablist). Content that is not a tab, such as a button next to\n * the tabs, does not belong in a tablist either: render it outside the TabList.\n *\n * Sub-components are also exported under flat names (`TabListTab`, `TabListPanel`,\n * `TabListPanels`) for React Server Components, which cannot use the dotted form.\n */\nexport const TabList = /* @__PURE__ */ Object.assign(TabListRoot, {\n  Tab,\n  Panel: TabPanel,\n  Panels: TabPanels,\n});\n\nexport { Tab as TabListTab, TabPanel as TabListPanel, TabPanels as TabListPanels };\n"],"mappings":"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"}