@chassis-ui/react 0.1.3 → 0.3.0

package/dist/chunks/nav-overflow-Ay5mM5Gc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-overflow-Ay5mM5Gc.js","names":["HIDDEN_CLASS"],"sources":["../../src/components/nav-overflow/more.tsx","../../src/components/nav-overflow/overflow.ts","../../src/components/nav-overflow/NavOverflow.tsx"],"sourcesContent":["import React, {\n  createContext,\n  CSSProperties,\n  FocusEvent,\n  ReactNode,\n  useContext,\n  useRef,\n  useState,\n  useSyncExternalStore\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport { NavOverflowLinkProps, NavOverflowMoreProps } from '../../utils/navOverflow'\nimport { Placement } from '../../utils/overlayPlacement'\nimport { Menu } from '../menu/Menu'\nimport { MenuItem } from '../menu/MenuItem'\nimport { MenuList } from '../menu/MenuList'\nimport { MenuToggle } from '../menu/MenuToggle'\n\n// From `NavOverflow` to the toggle item, which a list renders for it: the items in the menu, the\n// props their links registered, and how the toggle looks.\nexport interface NavOverflowMoreState {\n  getLink: (id: string) => NavOverflowLinkProps | null\n  getVersion: () => number\n  hidden: readonly string[]\n  iconPlacement: 'start' | 'end'\n  menuContainer: boolean | Element | undefined\n  menuPlacement: Placement\n  moreIcon: IconValue | undefined\n  moreLabel: string\n  moreText: ReactNode | false\n  subscribe: (listener: () => void) => () => void\n}\n\nexport const NavOverflowMoreContext = createContext<NavOverflowMoreState | null>(null)\n\n// The nearest item before `item` that is shown and can take focus: its link, or its tab.\nfunction lastShownStop(item: HTMLElement): HTMLElement | null {\n  for (let shown = item.previousElementSibling; shown; shown = shown.previousElementSibling) {\n    if (shown.hasAttribute('data-cx-nav-overflow')) continue\n    const stop = shown.querySelector<HTMLElement>('a[href], button:not(:disabled), [tabindex]')\n    if (stop) return stop\n  }\n  return null\n}\n\n// chassis-css's markup (`nav-overflow.js`): a `.nav-item.nav-overflow-item` holding the\n// `.nav-link.nav-overflow-toggle` button and the `.menu.nav-overflow-menu`. It is in the list at\n// all times, hidden while every item fits, so its width can be measured before it is needed.\nexport function NavOverflowMore({ tabs }: NavOverflowMoreProps) {\n  const state = useContext(NavOverflowMoreContext)\n  const [visible, setVisible] = useState(false)\n  const itemRef = useRef<HTMLLIElement>(null)\n  const focusWithinRef = useRef(false)\n  const hidden = state?.hidden\n  const empty = !hidden?.length\n\n  // A resize can take away what has focus here: the toggle, when the last item leaves the menu,\n  // or a menu item, when its item is back in the list. Neither blurs first, and focus would fall\n  // to the page. It goes to the toggle while there is one, and to the last item otherwise.\n  useIsomorphicLayoutEffect(() => {\n    const item = itemRef.current\n    if (!item || !focusWithinRef.current) return\n    const active = item.ownerDocument.activeElement\n    const lost = !active || active === item.ownerDocument.body || (empty && item.contains(active))\n    if (!lost) return\n    focusWithinRef.current = !empty\n    const stop = empty\n      ? lastShownStop(item)\n      : item.querySelector<HTMLElement>('.nav-overflow-toggle')\n    stop?.focus()\n  }, [hidden, empty])\n\n  const handleFocus = (event: FocusEvent) => {\n    focusWithinRef.current = true\n    // react-aria's tab list takes focus back to the selected tab when focus enters the list from\n    // outside, which a click on the toggle does. The toggle is reached with the arrow keys, from\n    // a tab (`TabList`), so the list doesn't need to hear of its focus.\n    if (tabs) event.stopPropagation()\n  }\n  const handleBlur = () => {\n    focusWithinRef.current = false\n  }\n  // A hidden item's link re-registers its props on each of its renders.\n  useSyncExternalStore(\n    state?.subscribe ?? subscribeToNothing,\n    state?.getVersion ?? zero,\n    state?.getVersion ?? zero\n  )\n\n  if (!state || !hidden) return null\n\n  const { getLink, iconPlacement, menuContainer, menuPlacement, moreIcon, moreLabel, moreText } =\n    state\n  // The toggle goes when the last item leaves the menu, and an open menu with it.\n  if (empty && visible) setVisible(false)\n\n  // Keyed, so `iconPlacement` moves the two spans instead of turning one into the other.\n  const icon = (\n    <span key=\"icon\" className=\"nav-overflow-icon\" style={ICON_STYLE}>\n      <IconSlot icon=\"more\" override={moreIcon} />\n    </span>\n  )\n  const text =\n    moreText === false ? null : (\n      <span key=\"text\" className=\"nav-overflow-text\">\n        {moreText}\n      </span>\n    )\n\n  return (\n    <Menu\n      component=\"li\"\n      className={classNames('nav-item nav-overflow-item', { [HIDDEN_CLASS]: empty })}\n      // A `tablist` owns tabs only. The toggle is one of them, and the menu is rendered outside.\n      // (No `instanceof Element`: a server has no `Element`.)\n      container={tabs ? (typeof menuContainer === 'object' ? menuContainer : true) : menuContainer}\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onVisibleChange={setVisible}\n      placement={menuPlacement}\n      visible={visible && !empty}\n      {...(tabs && { role: 'presentation' })}\n      ref={itemRef}\n    >\n      <MenuToggle\n        aria-label={moreText === false ? moreLabel : undefined}\n        caret={false}\n        className=\"nav-link nav-overflow-toggle\"\n        component=\"button\"\n        {...(tabs && { 'aria-selected': false, role: 'tab', tabIndex: -1 })}\n      >\n        {iconPlacement === 'end' ? [text, icon] : [icon, text]}\n      </MenuToggle>\n      <MenuList className=\"nav-overflow-menu\">\n        {hidden.map((id) => {\n          const link = getLink(id)\n          return link && <MenuItem key={id} {...link} />\n        })}\n      </MenuList>\n    </Menu>\n  )\n}\n\nconst HIDDEN_CLASS = 'd-none'\n// The icon as chassis-css's plugin draws its own: in the color of the toggle's text, and 1rem\n// wide. The default icon size is taller than a link's text, and would make the list a little\n// taller each time the toggle appeared.\nconst ICON_STYLE = { '--cx-icon-color': 'currentcolor', '--cx-icon-size': '1rem' } as CSSProperties\nconst subscribeToNothing = () => () => {}\nconst zero = () => 0\n","// Which items go into the menu, from widths `NavOverflow` has read with every item shown.\n\nexport interface MeasuredItem {\n  /**\n   * Unset for an item that registered nothing, which can't be moved.\n   */\n  id?: string\n  /**\n   * Stays in the list whatever the width: marked to keep, active, focused, or with no link for\n   * the menu to show.\n   */\n  keep: boolean\n  width: number\n}\n\nexport interface Measurement {\n  /**\n   * The width the items have to fit in.\n   */\n  available: number\n  /**\n   * The wrapper is narrower than `collapseBelow`.\n   */\n  collapseAll: boolean\n  gap: number\n  /**\n   * In document order, without the toggle item.\n   */\n  items: MeasuredItem[]\n  /**\n   * The width of the toggle item.\n   */\n  more: number\n  /**\n   * The fewest items to leave in the list.\n   */\n  threshold: number\n}\n\n// A pixel of slack for sub-pixel layout: `offsetWidth` is rounded.\nconst SLACK = 1\n\nexport function overflowingIds({\n  available,\n  collapseAll,\n  gap,\n  items,\n  more,\n  threshold\n}: Measurement): string[] {\n  const movable = items.filter((item) => !item.keep)\n  const ids = (overflowing: MeasuredItem[]) => overflowing.map((item) => item.id as string)\n\n  if (collapseAll) return ids(movable)\n\n  // Everything fits without the toggle, which then isn't shown. chassis-css's plugin always\n  // reserves the toggle's width, and so moves the last item of a list that fits exactly.\n  const total = items.reduce((sum, item) => sum + item.width, 0) + gap * (items.length - 1)\n  if (total <= available + SLACK) return []\n\n  // The toggle and the kept items are shown whatever happens, each with the gap to the next.\n  let used = more + items.reduce((sum, item) => (item.keep ? sum + item.width + gap : sum), 0)\n  let overflowing = movable.filter((item) => {\n    used += item.width + gap\n    return used > available + SLACK\n  })\n\n  if (items.length - overflowing.length < threshold && items.length > threshold) {\n    overflowing = items.slice(threshold).filter((item) => !item.keep)\n  }\n\n  return ids(overflowing)\n}\n","import React, {\n  CSSProperties,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport { flushSync } from 'react-dom'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useIsomorphicLayoutEffect } from '../../hooks'\nimport { Breakpoint } from '../../types'\nimport { devWarning } from '../../utils/devWarning'\nimport { IconValue } from '../../utils/iconConfig'\nimport {\n  NavOverflowContext,\n  NavOverflowController,\n  NavOverflowLinkProps\n} from '../../utils/navOverflow'\nimport { Placement } from '../../utils/overlayPlacement'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { useHydrated } from '../portal/Portal'\nimport { NavOverflowMore, NavOverflowMoreContext, NavOverflowMoreState } from './more'\nimport { MeasuredItem, overflowingIds } from './overflow'\n\nexport interface NavOverflowDetail {\n  /**\n   * How many items are in the menu.\n   */\n  overflowCount: number\n  /**\n   * How many items are left in the list.\n   */\n  visibleCount: number\n}\n\ntype NavOverflowOwnProps<C extends ElementType> = {\n  /**\n   * The list to collapse: a `Nav`, a `NavbarNav` or a `TabList`.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Moves every item into the menu while the component is narrower than this: a width in pixels,\n   * or the name of a breakpoint, read from `--cx-breakpoint-{name}`.\n   */\n  collapseBelow?: number | Breakpoint\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'div'\n   */\n  component?: C\n  /**\n   * Which side of the toggle's text its icon is on.\n   *\n   * @default 'start'\n   */\n  iconPlacement?: 'start' | 'end'\n  /**\n   * Renders the menu in a container element instead of inside the toggle's item, where an\n   * ancestor with `overflow` set would clip it: an element, or `true` for `document.body`. The\n   * menu of a `TabList` is always rendered outside it.\n   */\n  menuContainer?: boolean | Element\n  /**\n   * Where the menu opens, relative to the toggle. It flips to stay in view.\n   *\n   * @default 'bottom-end'\n   * @type 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'\n   */\n  menuPlacement?: Placement\n  /**\n   * The toggle's icon: an icon name, or an element of your own icon set. Defaults to\n   * `IconProvider`'s `more` icon.\n   */\n  moreIcon?: IconValue\n  /**\n   * The accessible name of a toggle without text (`moreText={false}`).\n   *\n   * @default 'More'\n   */\n  moreLabel?: string\n  /**\n   * The toggle's text. `false` leaves the icon alone, named by `moreLabel`.\n   *\n   * @default 'More'\n   */\n  moreText?: ReactNode | false\n  /**\n   * Callback fired when items move into the menu or back out of it, with the number of items in\n   * the menu and in the list.\n   */\n  onOverflow?: (detail: NavOverflowDetail) => void\n  /**\n   * The fewest items to leave in the list. They stay even when they don't fit.\n   *\n   * @default 0\n   */\n  threshold?: number\n}\n\nexport type NavOverflowProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  NavOverflowOwnProps<C>\n>\n\ntype NavOverflowComponent = (<C extends ElementType = 'div'>(\n  props: NavOverflowProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\ninterface Entry {\n  element: HTMLElement | null\n  link: NavOverflowLinkProps | null\n}\n\ninterface Observers {\n  frame: number\n  mutation: MutationObserver | null\n  nav: Element | null\n  observed: Set<Element>\n  resize: ResizeObserver | null\n  wrapper: HTMLElement\n  wrapperFrame: number\n}\n\n// What the items and links registered, and the listeners of the menu that renders from it. Kept\n// outside React state: a link registers new props on every one of its renders.\nfunction createRegistry() {\n  const entries = new Map<string, Entry>()\n  const listeners = new Set<() => void>()\n  let version = 0\n\n  const entry = (id: string) => {\n    let found = entries.get(id)\n    if (!found) {\n      found = { element: null, link: null }\n      entries.set(id, found)\n    }\n    return found\n  }\n\n  return {\n    entries,\n    getVersion: () => version,\n    notify: () => {\n      version += 1\n      listeners.forEach((listener) => listener())\n    },\n    set: (id: string, value: Partial<Entry>) => {\n      const next = Object.assign(entry(id), value)\n      if (!next.element && !next.link) entries.delete(id)\n    },\n    subscribe: (listener: () => void) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    }\n  }\n}\n\n// chassis-css hides an item with this attribute (`_nav-overflow.scss`) and the toggle item with\n// the display utility, as its plugin does.\nconst HIDDEN_ATTRIBUTE = 'data-cx-nav-overflow'\nconst HIDDEN_CLASS = 'd-none'\n\n// What keeps an item in the list by being inside it: the current link, and the tab that is the\n// list's Tab stop. react-aria gives that to the tab focused last, which needn't be the selected\n// one: hidden, it would leave the keyboard no way into the list.\nconst KEPT_CONTENT =\n  '.nav-link.active, .nav-link[aria-current]:not([aria-current=\"false\"]), [role=\"tab\"][tabindex=\"0\"]'\n\nconst EMPTY: readonly string[] = []\n\nconst pixels = (value: string) => Number.parseFloat(value) || 0\n\n// Not `instanceof HTMLElement`: a list rendered into another window has that window's classes.\nconst isHTMLElement = (element: Element): element is HTMLElement => 'offsetWidth' in element\n\nconst sameIds = (a: readonly string[], b: readonly string[]) =>\n  a.length === b.length && a.every((id, index) => id === b[index])\n\n// `collapseBelow` in pixels. A breakpoint is a custom property of chassis-css, in `rem`.\nfunction resolveCollapseBelow(value: number | Breakpoint | undefined, wrapper: HTMLElement) {\n  if (typeof value === 'number') return value\n  if (!value) return 0\n  const root = getComputedStyle(wrapper.ownerDocument.documentElement)\n  const width = root.getPropertyValue(`--cx-breakpoint-${value}`).trim()\n  return /r?em$/.test(width) ? pixels(width) * (pixels(root.fontSize) || 16) : pixels(width)\n}\n\n// Until the page has hydrated nothing has been measured, and the server's HTML holds every item\n// on one line (`.nav-overflow > .nav` doesn't wrap). The items that don't fit are clipped at the\n// wrapper's edge and can be scrolled to, instead of running over what is next to the list.\nconst UNMEASURED_STYLE: CSSProperties = { overflowX: 'auto', scrollbarWidth: 'none' }\n\nfunction NavOverflowRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    collapseBelow,\n    component,\n    iconPlacement = 'start',\n    menuContainer,\n    menuPlacement = 'bottom-end',\n    moreIcon,\n    moreLabel = 'More',\n    moreText = 'More',\n    onOverflow,\n    style,\n    threshold = 0,\n    ...rest\n  }: NavOverflowProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  // The wrapper, kept while React re-attaches a ref: a caller's ref that is a new function on\n  // each render makes it detach and attach this one too, and in between, where the list's\n  // effects run, there would be nothing to measure.\n  const wrapperRef = useRef<HTMLElement | null>(null)\n  const setWrapper = useCallback((element: HTMLElement | null) => {\n    if (element) wrapperRef.current = element\n  }, [])\n  const forkedRef = useForkedRef(ref, setWrapper)\n  const hydrated = useHydrated()\n\n  const [registry] = useState(createRegistry)\n  const [hidden, setHidden] = useState(EMPTY)\n  const hiddenRef = useRef(hidden)\n  const itemCountRef = useRef(0)\n  const optionsRef = useRef({ collapseBelow, threshold })\n  optionsRef.current = { collapseBelow, threshold }\n\n  const observersRef = useRef<Observers | null>(null)\n\n  // Which items don't fit, or `null` when there is nothing to measure.\n  //\n  // Widths are read with every item and the toggle shown, so they never depend on what the last\n  // pass hid. Showing and hiding again happens in one synchronous block, outside React: the browser\n  // paints neither, and the elements are back as React rendered them before it looks again.\n  const measure = useCallback((): string[] | null => {\n    const wrapper = wrapperRef.current?.isConnected ? wrapperRef.current : null\n    const nav = wrapper && Array.from(wrapper.children).find((child) => child.matches('.nav'))\n    devWarning(\n      !!wrapper && !nav,\n      'NavOverflow: expects a `Nav`, a `NavbarNav` or a `TabList` as its child; found no `.nav` ' +\n        'to collapse.'\n    )\n    if (!wrapper || !nav) return null\n\n    // Every child of the list takes room in the row, a title or a divider too; only registered\n    // items can leave it.\n    const children = Array.from(nav.children).filter(isHTMLElement)\n    const more = children.find((child) => child.classList.contains('nav-overflow-item'))\n    const elements = children.filter((child) => child !== more)\n    observe(wrapper, nav, children)\n    itemCountRef.current = elements.length\n    // No toggle: the list is not one that takes part, so nothing can move.\n    if (!more) return []\n\n    const ids = new Map<Element, string>()\n    registry.entries.forEach((entry, id) => {\n      if (entry.element) ids.set(entry.element, id)\n    })\n\n    const wereHidden = elements.filter((element) => element.hasAttribute(HIDDEN_ATTRIBUTE))\n    const moreWasHidden = more.classList.contains(HIDDEN_CLASS)\n    wereHidden.forEach((element) => element.removeAttribute(HIDDEN_ATTRIBUTE))\n    more.classList.remove(HIDDEN_CLASS)\n\n    try {\n      const wrapperStyle = getComputedStyle(wrapper)\n      const navStyle = getComputedStyle(nav)\n      // The wrapper's content box, as chassis-css's plugin takes it.\n      const width =\n        wrapper.clientWidth -\n        pixels(wrapperStyle.paddingInlineStart) -\n        pixels(wrapperStyle.paddingInlineEnd)\n      const focused = wrapper.ownerDocument.activeElement\n\n      const items = elements.map((element): MeasuredItem => {\n        const id = ids.get(element)\n        return {\n          id,\n          // An item stays in the list when the menu has nothing to show for it, when it is\n          // marked to stay, when it is the current one or the list's Tab stop, and while it has\n          // focus, which hiding it would drop.\n          keep:\n            !id ||\n            !registry.entries.get(id)?.link ||\n            element.classList.contains('nav-overflow-keep') ||\n            element.querySelector(KEPT_CONTENT) !== null ||\n            element.contains(focused),\n          width: element.offsetWidth\n        }\n      })\n\n      const { collapseBelow, threshold } = optionsRef.current\n      return overflowingIds({\n        available:\n          width -\n          pixels(navStyle.paddingInlineStart) -\n          pixels(navStyle.paddingInlineEnd) -\n          pixels(navStyle.borderInlineStartWidth) -\n          pixels(navStyle.borderInlineEndWidth),\n        collapseAll: width < resolveCollapseBelow(collapseBelow, wrapper),\n        gap: pixels(navStyle.columnGap),\n        items,\n        more: more.offsetWidth,\n        threshold\n      })\n    } finally {\n      wereHidden.forEach((element) => element.setAttribute(HIDDEN_ATTRIBUTE, 'true'))\n      if (moreWasHidden) more.classList.add(HIDDEN_CLASS)\n      // Lay the list out as it was. Without this the layout stays as measured, with everything\n      // shown, until the browser next needs it, and a ResizeObserver delivering in the meantime\n      // (react-aria's, on the toggle) is told of sizes that were never painted.\n      void wrapper.offsetWidth\n      // The mutations above are this function's own.\n      observersRef.current?.mutation?.takeRecords()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [registry])\n\n  const update = useCallback(() => {\n    const next = measure()\n    if (!next || sameIds(next, hiddenRef.current)) return\n    hiddenRef.current = next\n    setHidden(next)\n  }, [measure])\n\n  // What changes the result without a render of the list:\n  //\n  // - The wrapper's width. The wrapper and not the list, whose width the result itself changes.\n  // - An item's width: a font that loads, a label that changes.\n  // - A link that becomes the current one by itself, as a router's link does on navigation.\n  //\n  // An observer's callback runs before the browser paints, and `flushSync` commits the result\n  // there, so no frame shows the items of the old width.\n  //\n  // A ResizeObserver delivers sizes top down, and reports a loop error when a callback changes\n  // a size it has already passed. Two things here would: hiding an item's siblings from the\n  // callback for that item, so an item's own resize waits a frame; and a toggle taller than the\n  // links, which changes the wrapper's height from the wrapper's own callback, so the wrapper is\n  // observed again from the next frame once a pass has moved anything.\n  function observe(wrapper: HTMLElement, nav: Element, children: HTMLElement[]) {\n    let observers = observersRef.current\n    if (observers && observers.wrapper !== wrapper) {\n      disconnect()\n      observers = null\n    }\n    if (!observers) {\n      const flush = () => flushSync(update)\n      const created: Observers = {\n        frame: 0,\n        mutation: typeof MutationObserver === 'undefined' ? null : new MutationObserver(flush),\n        nav: null,\n        observed: new Set(),\n        resize:\n          typeof ResizeObserver === 'undefined'\n            ? null\n            : new ResizeObserver((entries) => {\n                if (!entries.some((entry) => entry.target === wrapper)) {\n                  cancelAnimationFrame(created.frame)\n                  created.frame = requestAnimationFrame(flush)\n                  return\n                }\n                const before = hiddenRef.current\n                flush()\n                // The pass can have replaced these observers, for a wrapper that is a new element.\n                if (hiddenRef.current === before || observersRef.current !== created) return\n                created.resize?.unobserve(wrapper)\n                cancelAnimationFrame(created.wrapperFrame)\n                created.wrapperFrame = requestAnimationFrame(() => created.resize?.observe(wrapper))\n              }),\n        wrapperFrame: 0,\n        wrapper\n      }\n      observers = observersRef.current = created\n      observers.resize?.observe(wrapper)\n    }\n    const { mutation, observed, resize } = observers\n\n    if (observers.nav !== nav) {\n      observers.nav = nav\n      mutation?.disconnect()\n      mutation?.observe(nav, {\n        attributeFilter: ['class', 'aria-current'],\n        attributes: true,\n        childList: true,\n        subtree: true\n      })\n    }\n\n    const current = new Set<Element>(children)\n    observed.forEach((element) => {\n      if (current.has(element)) return\n      resize?.unobserve(element)\n      observed.delete(element)\n    })\n    current.forEach((element) => {\n      if (observed.has(element)) return\n      resize?.observe(element)\n      observed.add(element)\n    })\n  }\n\n  function disconnect() {\n    const observers = observersRef.current\n    if (!observers) return\n    cancelAnimationFrame(observers.frame)\n    cancelAnimationFrame(observers.wrapperFrame)\n    observers.mutation?.disconnect()\n    observers.resize?.disconnect()\n    observersRef.current = null\n  }\n\n  useEffect(() => disconnect, [])\n\n  // The list measures after each of its commits (`NavOverflowItems`). This covers what it can't:\n  // the first commit and a wrapper that becomes another element, where React attaches the\n  // wrapper's ref after the list's effects have run, and the options, which can change without\n  // the list rendering.\n  useIsomorphicLayoutEffect(update, [update, Component, collapseBelow, threshold])\n\n  const reportedRef = useRef(hidden)\n  useEffect(() => {\n    if (reportedRef.current === hidden) return\n    reportedRef.current = hidden\n    onOverflow?.({\n      overflowCount: hidden.length,\n      visibleCount: itemCountRef.current - hidden.length\n    })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hidden])\n\n  const registerItem = useCallback(\n    (id: string, element: HTMLElement | null) => registry.set(id, { element }),\n    [registry]\n  )\n  const registerLink = useCallback(\n    (id: string, link: NavOverflowLinkProps | null) => {\n      registry.set(id, { link })\n      // The menu renders from these props, and only it needs to hear of new ones.\n      if (hiddenRef.current.includes(id)) registry.notify()\n    },\n    [registry]\n  )\n\n  const controller: NavOverflowController = useMemo(\n    () => ({ hidden, More: NavOverflowMore, registerItem, registerLink, update }),\n    [hidden, registerItem, registerLink, update]\n  )\n\n  const more: NavOverflowMoreState = useMemo(\n    () => ({\n      getLink: (id) => registry.entries.get(id)?.link ?? null,\n      getVersion: registry.getVersion,\n      hidden,\n      iconPlacement,\n      menuContainer,\n      menuPlacement,\n      moreIcon,\n      moreLabel,\n      moreText,\n      subscribe: registry.subscribe\n    }),\n    [hidden, iconPlacement, menuContainer, menuPlacement, moreIcon, moreLabel, moreText, registry]\n  )\n\n  return (\n    <NavOverflowContext.Provider value={controller}>\n      <NavOverflowMoreContext.Provider value={more}>\n        <Component\n          className={classNames('nav-overflow', className)}\n          style={hydrated ? style : { ...UNMEASURED_STYLE, ...style }}\n          {...rest}\n          ref={forkedRef}\n        >\n          {children}\n        </Component>\n      </NavOverflowMoreContext.Provider>\n    </NavOverflowContext.Provider>\n  )\n}\n\nexport const NavOverflow = createPolymorphicComponent<NavOverflowComponent>(\n  NavOverflowRender as ForwardRefRenderFunction<Element, NavOverflowProps<ElementType>>,\n  'NavOverflow'\n)\n"],"mappings":"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"}

package/dist/chunks/navOverflow-B5krZe6D.js

@@ -0,0 +1,2 @@
+import{a as e,s as t,v as n}from"./slot-CNhFZdHF.js";import{t as r}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import i,{cloneElement as a,createContext as o,useCallback as s,useContext as c,useId as l,useMemo as u}from"react";const d=o(null),f=o(null);function p({children:e}){return i.createElement(f.Provider,{value:null},e)}function m({children:e,tabs:t,tag:a}){let o=a===void 0||a===`ul`||a===`ol`,s=c(d);n(!!s&&!o,`NavOverflow: collapses the \`NavItem\`s of a list, and a <${a}> has none. Leave out \`component\` to render a <ul>.`);let l=o?s:null,p=u(()=>l?{controller:l}:null,[l]),m=l?.update;r(()=>{m?.()});let h=l?.More;return i.createElement(i.Fragment,null,i.createElement(d.Provider,{value:null},i.createElement(f.Provider,{value:p},e)),h&&i.createElement(h,{tabs:t}))}const h=f.Provider;function g(e){let t=c(f),n=l(),r=t&&t.itemId===void 0?t.controller:null,i=u(()=>r?{controller:r,itemId:n}:null,[r,n]),a=r?.registerItem,o=s(e=>a?.(n,e),[a,n]);return b(e?r?.registerLink:void 0,n,e),{hidden:!!r&&r.hidden.includes(n),ref:r?o:void 0,scope:i}}const _=()=>c(f)?.itemId!==void 0;function v({props:n}){let r=c(f),i=t(),{component:o,...s}=y(n);return b(r?.itemId===void 0?void 0:r.controller.registerLink,r?.itemId,e(o)&&i?{...s,asChild:!0,children:a(i,{id:void 0,ref:null})}:{...s,component:o}),null}function y(e){return Object.fromEntries(Object.entries(e).filter(([e])=>e!==`id`&&e!==`aria-describedby`&&(e===`onClick`||!/^on[A-Z]/.test(e))))}function b(e,t,n){r(()=>{e&&t!==void 0&&n&&e(t,n)}),r(()=>{if(e&&t!==void 0)return()=>e(t,null)},[e,t])}export{v as a,m as i,d as n,_ as o,h as r,g as s,p as t};
+//# sourceMappingURL=navOverflow-B5krZe6D.js.map

package/dist/chunks/navOverflow-B5krZe6D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navOverflow-B5krZe6D.js","names":[],"sources":["../../src/utils/navOverflow.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  ComponentType,\n  createContext,\n  ReactElement,\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useContext,\n  useId,\n  useMemo\n} from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect'\nimport { devWarning } from './devWarning'\nimport { isSlot, useSlotElement } from './slot'\n\n// How `NavOverflow` (`components/nav-overflow`) and the lists it collapses work together.\n//\n// chassis-css's plugin clones the links that don't fit into its menu. A clone has no React\n// behind it: no `onClick`, no router link. Here nothing is cloned. Three parts take a role each:\n//\n// - The list (`Nav`, `NavbarNav`, `TabList`) renders `NavOverflowItems` around its items, which\n//   adds the toggle item after them.\n// - An item (`NavItem`, a tab) registers its `<li>`, which is what `NavOverflow` measures and\n//   hides.\n// - The item's link (`NavLink`) registers the props it was rendered with, and the menu renders a\n//   `MenuItem` from them. An item with no link registered, such as one holding a dropdown, has\n//   nothing to show in the menu, so it is never moved.\n//\n// An item is known by an id of its own rather than by its position among the list's children, so\n// a component that renders several items, or a fragment of them, works like items written in\n// place. `NavOverflow` takes their order from the document.\n//\n// These live here, not in `components/nav-overflow`, so that `Nav` and `Tabs` import a context and\n// nothing else: the toggle and its `Menu` reach a list through the controller (`More`), and stay\n// out of the bundle of a page that only renders a `Nav`.\n\n/** The props a link hands to the `MenuItem` that stands in for it. */\nexport type NavOverflowLinkProps = Record<string, unknown>\n\nexport interface NavOverflowMoreProps {\n  /**\n   * The list is a `tablist`: the toggle is one of its tabs, and its menu is rendered outside it.\n   */\n  tabs?: boolean\n}\n\nexport interface NavOverflowController {\n  /**\n   * The ids of the items that are in the menu, in document order.\n   */\n  hidden: readonly string[]\n  /**\n   * The toggle item and its menu, rendered by the list after its items.\n   */\n  More: ComponentType<NavOverflowMoreProps>\n  registerItem: (id: string, element: HTMLElement | null) => void\n  registerLink: (id: string, props: NavOverflowLinkProps | null) => void\n  /**\n   * Measures again. A list calls it after each of its commits.\n   */\n  update: () => void\n}\n\n/**\n * From `NavOverflow` to the list directly inside it.\n */\nexport const NavOverflowContext = createContext<NavOverflowController | null>(null)\n\n// From the list to its items (`itemId` unset), and from an item to its link (`itemId` set). One\n// context, so an item nested in another item finds `itemId` set and knows it isn't the list's own.\ninterface NavOverflowScope {\n  controller: NavOverflowController\n  itemId?: string\n}\n\nconst NavOverflowScopeContext = createContext<NavOverflowScope | null>(null)\n\n/**\n * Closes the scope for everything inside: a `Menu` in an item isn't that item's link, and neither\n * is anything in its list.\n */\nexport function NavOverflowBoundary({ children }: { children?: ReactNode }): ReactElement {\n  return (\n    <NavOverflowScopeContext.Provider value={null}>{children}</NavOverflowScopeContext.Provider>\n  )\n}\n\n/**\n * A list's items. Inside a `NavOverflow` they are the items it collapses, followed by the toggle\n * item. Anywhere else they render as they are, and a list nested in a collapsing item takes no\n * part in it.\n */\nexport function NavOverflowItems({\n  children,\n  tabs,\n  tag\n}: NavOverflowMoreProps & {\n  children?: ReactNode\n  /**\n   * The tag the list renders, when it is known. The toggle item is an `<li>`, so only a `<ul>`\n   * or an `<ol>` takes part.\n   */\n  tag?: string\n}): ReactElement {\n  const collapses = tag === undefined || tag === 'ul' || tag === 'ol'\n  const inherited = useContext(NavOverflowContext)\n  devWarning(\n    !!inherited && !collapses,\n    `NavOverflow: collapses the \\`NavItem\\`s of a list, and a <${tag}> has none. Leave out ` +\n      `\\`component\\` to render a <ul>.`\n  )\n  const controller = collapses ? inherited : null\n  const scope = useMemo(() => (controller ? { controller } : null), [controller])\n  const update = controller?.update\n\n  // After every commit of the list: an item added, removed, renamed or made active changes what\n  // fits, and none of those resizes the wrapper.\n  useIsomorphicLayoutEffect(() => {\n    update?.()\n  })\n\n  const More = controller?.More\n\n  return (\n    <>\n      <NavOverflowContext.Provider value={null}>\n        <NavOverflowScopeContext.Provider value={scope}>\n          {children}\n        </NavOverflowScopeContext.Provider>\n      </NavOverflowContext.Provider>\n      {More && <More tabs={tabs} />}\n    </>\n  )\n}\n\nexport interface NavOverflowItem {\n  /**\n   * Whether the item is in the menu, and so hidden in the list.\n   */\n  hidden: boolean\n  /**\n   * For the item's `<li>`. `undefined` outside a collapsing list.\n   */\n  ref: RefCallback<HTMLElement> | undefined\n  /**\n   * For `NavOverflowItemScope`, around the item's children.\n   */\n  scope: NavOverflowScope | null\n}\n\nexport const NavOverflowItemScope = NavOverflowScopeContext.Provider\n\n/**\n * An item of a list. `link` is for an item that is its own link, as a tab is; an item that holds\n * a `NavLink` leaves it out, and the link registers itself.\n */\nexport function useNavOverflowItem(link?: NavOverflowLinkProps): NavOverflowItem {\n  const inherited = useContext(NavOverflowScopeContext)\n  const id = useId()\n  // The list's own items only: inside another item, `itemId` is that item's.\n  const controller = inherited && inherited.itemId === undefined ? inherited.controller : null\n  const scope = useMemo(() => (controller ? { controller, itemId: id } : null), [controller, id])\n  const registerItem = controller?.registerItem\n  const ref = useCallback(\n    (element: HTMLElement | null) => registerItem?.(id, element),\n    [registerItem, id]\n  )\n\n  useRegisteredLink(link ? controller?.registerLink : undefined, id, link)\n\n  return {\n    hidden: !!controller && controller.hidden.includes(id),\n    ref: controller ? ref : undefined,\n    scope\n  }\n}\n\n/**\n * Whether the caller is the link of an item that can move into the menu, and so should render a\n * `NavOverflowLink`.\n */\nexport const useIsNavOverflowLink = (): boolean =>\n  useContext(NavOverflowScopeContext)?.itemId !== undefined\n\n/**\n * Registers the props of an item's link, which the menu renders its `MenuItem` from. It renders\n * nothing. A component, not a hook, because a link rendered with `asChild` has to hand over the\n * element it was given, and only something rendered beside the `Slot` can read that.\n */\nexport function NavOverflowLink({ props }: { props: NavOverflowLinkProps }): null {\n  const scope = useContext(NavOverflowScopeContext)\n  const slotted = useSlotElement()\n  const { component, ...link } = menuProps(props)\n  useRegisteredLink(\n    scope?.itemId === undefined ? undefined : scope.controller.registerLink,\n    scope?.itemId,\n    isSlot(component) && slotted\n      ? // The caller's element, without what is its own in the list: its `ref` would be taken\n        // over by the copy in the menu, and dropped when that copy went.\n        { ...link, asChild: true, children: cloneElement(slotted, { id: undefined, ref: null }) }\n      : { ...link, component }\n  )\n  return null\n}\n\n// What a link hands to its menu item. Not its `id`: the two are in the document together. And of\n// its handlers, `onClick` only: the rest are for the link where it is, such as the hover and\n// focus handlers a `Tooltip` around it adds, which would open a tooltip anchored to a hidden\n// link. Its description goes with them.\nfunction menuProps(props: NavOverflowLinkProps): NavOverflowLinkProps {\n  return Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) =>\n        name !== 'id' &&\n        name !== 'aria-describedby' &&\n        (name === 'onClick' || !/^on[A-Z]/.test(name))\n    )\n  )\n}\n\nfunction useRegisteredLink(\n  register: NavOverflowController['registerLink'] | undefined,\n  id: string | undefined,\n  props: NavOverflowLinkProps | undefined\n) {\n  // On every commit: the props are new objects on each render, and the menu shows the latest.\n  useIsomorphicLayoutEffect(() => {\n    if (register && id !== undefined && props) register(id, props)\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!register || id === undefined) return undefined\n    return () => register(id, null)\n  }, [register, id])\n}\n"],"mappings":"qOAoEA,MAAa,EAAqB,EAA4C,IAAI,EAS5E,EAA0B,EAAuC,IAAI,EAM3E,SAAgB,EAAoB,CAAE,YAAoD,CACxF,OACE,EAAA,cAAC,EAAwB,SAAzB,CAAkC,MAAO,IAAkD,EAA3C,CAA2C,CAE/F,CAOA,SAAgB,EAAiB,CAC/B,WACA,OACA,OAQe,CACf,IAAM,EAAY,IAAQ,IAAA,IAAa,IAAQ,MAAQ,IAAQ,KACzD,EAAY,EAAW,CAAkB,EAC/C,EACE,CAAC,CAAC,GAAa,CAAC,EAChB,6DAA6D,EAAI,sDAEnE,EACA,IAAM,EAAa,EAAY,EAAY,KACrC,EAAQ,MAAe,EAAa,CAAE,YAAW,EAAI,KAAO,CAAC,CAAU,CAAC,EACxE,EAAS,GAAY,OAI3B,MAAgC,CAC9B,IAAS,CACX,CAAC,EAED,IAAM,EAAO,GAAY,KAEzB,OACE,EAAA,cAAA,EAAA,SAAA,KACE,EAAA,cAAC,EAAmB,SAApB,CAA6B,MAAO,IAIP,EAH3B,EAAA,cAAC,EAAwB,SAAzB,CAAkC,MAAO,CAEP,EAD/B,CAC+B,CACP,EAC5B,GAAQ,EAAA,cAAC,EAAD,CAAY,MAAO,CAAA,CAC5B,CAEN,CAiBA,MAAa,EAAuB,EAAwB,SAM5D,SAAgB,EAAmB,EAA8C,CAC/E,IAAM,EAAY,EAAW,CAAuB,EAC9C,EAAK,EAAM,EAEX,EAAa,GAAa,EAAU,SAAW,IAAA,GAAY,EAAU,WAAa,KAClF,EAAQ,MAAe,EAAa,CAAE,aAAY,OAAQ,CAAG,EAAI,KAAO,CAAC,EAAY,CAAE,CAAC,EACxF,EAAe,GAAY,aAC3B,EAAM,EACT,GAAgC,IAAe,EAAI,CAAO,EAC3D,CAAC,EAAc,CAAE,CACnB,EAIA,OAFA,EAAkB,EAAO,GAAY,aAAe,IAAA,GAAW,EAAI,CAAI,EAEhE,CACL,OAAQ,CAAC,CAAC,GAAc,EAAW,OAAO,SAAS,CAAE,EACrD,IAAK,EAAa,EAAM,IAAA,GACxB,OACF,CACF,CAMA,MAAa,MACX,EAAW,CAAuB,CAAC,EAAE,SAAW,IAAA,GAOlD,SAAgB,EAAgB,CAAE,SAAgD,CAChF,IAAM,EAAQ,EAAW,CAAuB,EAC1C,EAAU,EAAe,EACzB,CAAE,YAAW,GAAG,GAAS,EAAU,CAAK,EAU9C,OATA,EACE,GAAO,SAAW,IAAA,GAAY,IAAA,GAAY,EAAM,WAAW,aAC3D,GAAO,OACP,EAAO,CAAS,GAAK,EAGjB,CAAE,GAAG,EAAM,QAAS,GAAM,SAAU,EAAa,EAAS,CAAE,GAAI,IAAA,GAAW,IAAK,IAAK,CAAC,CAAE,EACxF,CAAE,GAAG,EAAM,WAAU,CAC3B,EACO,IACT,CAMA,SAAS,EAAU,EAAmD,CACpE,OAAO,OAAO,YACZ,OAAO,QAAQ,CAAK,CAAC,CAAC,QACnB,CAAC,KACA,IAAS,MACT,IAAS,qBACR,IAAS,WAAa,CAAC,WAAW,KAAK,CAAI,EAChD,CACF,CACF,CAEA,SAAS,EACP,EACA,EACA,EACA,CAEA,MAAgC,CAC1B,GAAY,IAAO,IAAA,IAAa,GAAO,EAAS,EAAI,CAAK,CAC/D,CAAC,EAED,MAAgC,CAC1B,GAAC,GAAY,IAAO,IAAA,GACxB,UAAa,EAAS,EAAI,IAAI,CAChC,EAAG,CAAC,EAAU,CAAE,CAAC,CACnB"}

package/dist/chunks/navVariant-CnD21GBS.d.ts

@@ -0,0 +1,5 @@
+//#region src/utils/navVariant.d.ts
+type NavVariant = 'tabs' | 'segments' | 'underline' | 'pills';
+//#endregion
+export { NavVariant as t };
+//# sourceMappingURL=navVariant-CnD21GBS.d.ts.map

package/dist/chunks/navVariant-DeGTk9B7.js

@@ -0,0 +1,2 @@
+import{v as e}from"./slot-CNhFZdHF.js";function t(t,n){return e(t===`pills`,`${n}: variant="pills" is deprecated, use variant="segments" instead. It will be removed in a future major version.`),t&&`nav-${t===`pills`?`segments`:t}`}export{t};
+//# sourceMappingURL=navVariant-DeGTk9B7.js.map

package/dist/chunks/navVariant-DeGTk9B7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navVariant-DeGTk9B7.js","names":[],"sources":["../../src/utils/navVariant.ts"],"sourcesContent":["import { devWarning } from './devWarning'\n\n// The looks of a `.nav` that `Nav` and `TabList` share. `'pills'` is what `'segments'` was called\n// until chassis-css 0.6 renamed `.nav-pills` to `.nav-segments`: still accepted, deprecated.\nexport type NavVariant = 'tabs' | 'segments' | 'underline' | 'pills'\n\nexport function navVariantClassName(\n  variant: NavVariant | undefined,\n  displayName: string\n): string | undefined {\n  devWarning(\n    variant === 'pills',\n    `${displayName}: variant=\"pills\" is deprecated, use variant=\"segments\" instead. It will be ` +\n      'removed in a future major version.'\n  )\n\n  return variant && `nav-${variant === 'pills' ? 'segments' : variant}`\n}\n"],"mappings":"uCAMA,SAAgB,EACd,EACA,EACoB,CAOpB,OANA,EACE,IAAY,QACZ,GAAG,EAAY,+GAEjB,EAEO,GAAW,OAAO,IAAY,QAAU,WAAa,GAC9D"}

package/dist/chunks/navbar-DxIwt0sc.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{d as e,g as t,m as n,p as r}from"./slot-CNhFZdHF.js";import{t as i}from"./polymorphic-BhGNZQja.js";import{t as a}from"./iconSlot-BNu2MrFI.js";import{t as o}from"./VisuallyHidden-C2dM7HhC.js";import{i as s,n as c}from"./navOverflow-B5krZe6D.js";import l,{forwardRef as u,useContext as d}from"react";import f from"classnames";function p({children:e,className:t,color:n,component:r,container:i,expand:a,placement:o,translucent:s,variant:c,...u},d){let p=r??`nav`,m=f(`navbar`,n,{context:!!n,solid:c===`solid`,smooth:c===`smooth`,outline:c===`outline`,translucent:s,[typeof a==`boolean`?`navbar-expand`:`${a}:navbar-expand`]:a},o,t),h;return h=i?l.createElement(`div`,{className:`container${i===!0?``:`-`+i}`},e):e,l.createElement(p,{className:m,...u,ref:d},h)}const m=i(p,`Navbar`);function h({children:n,component:i,className:a,href:o,...s},c){let u=r(i,o,`span`),d=f(`navbar-brand`,a);return l.createElement(u,{className:d,...e(t(u,o,s),o,`NavbarBrand`),...s,ref:c},n)}const g=i(h,`NavbarBrand`);function _({children:e,component:t,className:r,...i},a){let o=t??`ul`,u=d(c)!==null,p=f({nav:u},`navbar-nav`,r);return l.createElement(o,{className:p,...i,ref:a},l.createElement(s,{tag:n(o)},e))}const v=i(_,`NavbarNav`);function y({children:e,className:t,component:n,...r},i){let a=n??`span`,o=f(`navbar-text`,t);return l.createElement(a,{className:o,...r,ref:i},e)}const b=i(y,`NavbarText`),x=u(({children:e,className:t,icon:n,label:r=`Toggle navigation`,...i},s)=>{let c=f(`button icon-only navbar-toggler`,t);return l.createElement(`button`,{type:`button`,className:c,...i,ref:s},e??l.createElement(l.Fragment,null,l.createElement(a,{icon:`menu`,override:n,className:`navbar-toggler-icon`}),l.createElement(o,null,r)))});x.displayName=`NavbarToggler`;export{m as a,g as i,b as n,v as r,x as t};
+//# sourceMappingURL=navbar-DxIwt0sc.js.map

package/dist/chunks/navbar-DxIwt0sc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-DxIwt0sc.js","names":[],"sources":["../../src/components/navbar/Navbar.tsx","../../src/components/navbar/NavbarBrand.tsx","../../src/components/navbar/NavbarNav.tsx","../../src/components/navbar/NavbarText.tsx","../../src/components/navbar/NavbarToggler.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { Breakpoint, ContextColor, ContextStyle } from '../../types'\n\ntype NavbarOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Defines optional container wrapping children elements.\n   */\n  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid'\n  /**\n   * Opts this navbar into the framework's dark or light theming, independent of the page's own\n   * theme.\n   */\n  'data-cx-theme'?: 'dark' | 'light'\n  /**\n   * Renders inline at and above this breakpoint, as a drawer below it. `true` renders inline at\n   * every width; omit to keep the drawer at every width.\n   */\n  expand?: boolean | Breakpoint\n  /**\n   * Place component in non-static positions.\n   */\n  placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top' | 'sticky-bottom'\n  /**\n   * Blurs and saturates whatever sits behind the navbar — useful when it's positioned over a\n   * hero image, video, or scrollable content.\n   */\n  translucent?: boolean\n  /**\n   * Sets the context style of the component. `basic` (the default) renders with no extra class.\n   */\n  variant?: ContextStyle\n}\n\nexport type NavbarProps<C extends ElementType = 'nav'> = PolymorphicComponentProps<\n  C,\n  NavbarOwnProps<C>\n>\n\ntype NavbarComponent = (<C extends ElementType = 'nav'>(\n  props: NavbarProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavbarRender<C extends ElementType = 'nav'>(\n  {\n    children,\n    className,\n    color,\n    component,\n    container,\n    expand,\n    placement,\n    translucent,\n    variant,\n    ...rest\n  }: NavbarProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'nav'\n  const _className = classNames(\n    'navbar',\n    color,\n    {\n      context: !!color,\n      solid: variant === 'solid',\n      smooth: variant === 'smooth',\n      outline: variant === 'outline',\n      translucent,\n      [typeof expand === 'boolean' ? 'navbar-expand' : `${expand}:navbar-expand`]: expand\n    },\n    placement,\n    className\n  )\n\n  let content\n  if (container) {\n    content = (\n      <div className={`container${container !== true ? '-' + container : ''}`}>{children}</div>\n    )\n  } else {\n    content = children\n  }\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {content}\n    </Component>\n  )\n}\n\nexport const Navbar = createPolymorphicComponent<NavbarComponent>(\n  NavbarRender as ForwardRefRenderFunction<Element, NavbarProps<ElementType>>,\n  'Navbar'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { hrefProps, linkElement, resolveLinkKind } from '../../utils/elementKind'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype NavbarBrandOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `span`, or `a` when `href` is set.\n   */\n  component?: C\n  /**\n   * The href attribute specifies the URL of the page the link goes to. Defaults `component` to\n   * `a`.\n   */\n  href?: string\n}\n\nexport type NavbarBrandProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  NavbarBrandOwnProps<C>\n>\n\ntype NavbarBrandComponent = (<C extends ElementType = 'span'>(\n  props: NavbarBrandProps<C> & {\n    ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>\n  }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavbarBrandRender<C extends ElementType = 'span'>(\n  { children, component, className, href, ...rest }: NavbarBrandProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // `href` makes it an `<a>`, unless `component` or `asChild` chose the element (see\n  // `linkElement`).\n  const Component = linkElement(component, href, 'span')\n  const _className = classNames('navbar-brand', className)\n\n  return (\n    <Component\n      className={_className}\n      {...hrefProps(resolveLinkKind(Component, href, rest), href, 'NavbarBrand')}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </Component>\n  )\n}\n\nexport const NavbarBrand = createPolymorphicComponent<NavbarBrandComponent>(\n  NavbarBrandRender as ForwardRefRenderFunction<Element, NavbarBrandProps<ElementType>>,\n  'NavbarBrand'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, useContext } from 'react'\nimport classNames from 'classnames'\n\nimport { resolveElementTag } from '../../utils/elementKind'\nimport { NavOverflowContext, NavOverflowItems } from '../../utils/navOverflow'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype NavbarNavOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type NavbarNavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<\n  C,\n  NavbarNavOwnProps<C>\n>\n\ntype NavbarNavComponent = (<C extends ElementType = 'ul'>(\n  props: NavbarNavProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavbarNavRender<C extends ElementType = 'ul'>(\n  { children, component, className, ...rest }: NavbarNavProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'ul'\n  // Inside a `NavOverflow` the list is also a `.nav`, which is what chassis-css keeps on one line\n  // there (`.nav-overflow > .nav`).\n  const overflows = useContext(NavOverflowContext) !== null\n  const _className = classNames({ nav: overflows }, 'navbar-nav', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      <NavOverflowItems tag={resolveElementTag(Component)}>{children}</NavOverflowItems>\n    </Component>\n  )\n}\n\nexport const NavbarNav = createPolymorphicComponent<NavbarNavComponent>(\n  NavbarNavRender as ForwardRefRenderFunction<Element, NavbarNavProps<ElementType>>,\n  'NavbarNav'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype NavbarTextOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type NavbarTextProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  NavbarTextOwnProps<C>\n>\n\ntype NavbarTextComponent = (<C extends ElementType = 'span'>(\n  props: NavbarTextProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavbarTextRender<C extends ElementType = 'span'>(\n  { children, className, component, ...rest }: NavbarTextProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames('navbar-text', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const NavbarText = createPolymorphicComponent<NavbarTextComponent>(\n  NavbarTextRender as ForwardRefRenderFunction<Element, NavbarTextProps<ElementType>>,\n  'NavbarText'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\nexport interface NavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The toggler icon: an icon name, or an element of your own icon set. Defaults to\n   * `IconProvider`'s `menu` icon.\n   */\n  icon?: IconValue\n  /**\n   * The accessible label announced by assistive technology when no children are provided.\n   */\n  label?: string\n}\n\nexport const NavbarToggler = forwardRef<HTMLButtonElement, NavbarTogglerProps>(\n  ({ children, className, icon, label = 'Toggle navigation', ...rest }, ref) => {\n    const _className = classNames('button icon-only navbar-toggler', className)\n\n    return (\n      <button type=\"button\" className={_className} {...rest} ref={ref}>\n        {children ?? (\n          <>\n            <IconSlot icon=\"menu\" override={icon} className=\"navbar-toggler-icon\" />\n            <VisuallyHidden>{label}</VisuallyHidden>\n          </>\n        )}\n      </button>\n    )\n  }\n)\n\nNavbarToggler.displayName = 'NavbarToggler'\n"],"mappings":"4WA6DA,SAAS,EACP,CACE,WACA,YACA,QACA,YACA,YACA,SACA,YACA,cACA,UACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,SACA,EACA,CACE,QAAS,CAAC,CAAC,EACX,MAAO,IAAY,QACnB,OAAQ,IAAY,SACpB,QAAS,IAAY,UACrB,eACC,OAAO,GAAW,UAAY,gBAAkB,GAAG,EAAO,iBAAkB,CAC/E,EACA,EACA,CACF,EAEI,EASJ,MARA,CAKE,EALE,EAEA,EAAA,cAAC,MAAD,CAAK,UAAW,YAAY,IAAc,GAAyB,GAAlB,IAAM,GAAiC,EAAd,CAAc,EAGhF,EAIV,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAS,EACpB,EACA,QACF,ECvEA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,OAAM,GAAG,GAC3C,EACA,CAGA,IAAM,EAAY,EAAY,EAAW,EAAM,MAAM,EAC/C,EAAa,EAAW,eAAgB,CAAS,EAEvD,OACE,EAAA,cAAC,EAAD,CACE,UAAW,EACX,GAAI,EAAU,EAAgB,EAAW,EAAM,CAAI,EAAG,EAAM,aAAa,EACzE,GAAI,EACC,KAGI,EADR,CACQ,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF,ECjCA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,KAGzB,EAAY,EAAW,CAAkB,IAAM,KAC/C,EAAa,EAAW,CAAE,IAAK,CAAU,EAAG,aAAc,CAAS,EAEzE,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADT,EAAA,cAAC,EAAD,CAAkB,IAAK,EAAkB,CAAS,CAA+B,EAA3B,CAA2B,CACxE,CAEf,CAEA,MAAa,EAAY,EACvB,EACA,WACF,ECtBA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EAAW,cAAe,CAAS,EAEtD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAa,EACxB,EACA,YACF,ECvBa,EAAgB,GAC1B,CAAE,WAAU,YAAW,OAAM,QAAQ,oBAAqB,GAAG,GAAQ,IAAQ,CAC5E,IAAM,EAAa,EAAW,kCAAmC,CAAS,EAE1E,OACE,EAAA,cAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAY,GAAI,EAAW,KAOpD,EANL,GACC,EAAA,cAAA,EAAA,SAAA,KACE,EAAA,cAAC,EAAD,CAAU,KAAK,OAAO,SAAU,EAAM,UAAU,qBAAuB,CAAA,EACvE,EAAA,cAAC,EAAA,KAAgB,CAAsB,CACvC,CAEE,CAEZ,CACF,EAEA,EAAc,YAAc"}

package/dist/chunks/notification-Ds24wnPq.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{n as t,r as n,t as r}from"./useToastRegionQueue-CIV5SdiE.js";import{t as i}from"./Icon-DLB1f88W.js";import{n as a}from"./iconSlot-BNu2MrFI.js";import{t as o}from"./CloseButton-DPgQztE0.js";import{t as s}from"./stack-CsMiQbpq.js";import c,{createContext as l,forwardRef as u,useContext as d}from"react";import f from"classnames";import{mergeProps as p}from"react-aria";import{ToastQueue as m}from"react-stately";const h=l({close:()=>{}}),g=()=>d(h);function _({children:e,component:t,className:n,...r},i){let a=t??`div`,o=f(`notification-text`,n);return c.createElement(a,{className:o,...r,ref:i},e)}const v=e(_,`NotificationText`);function y({children:e,className:t,component:n,...r},i){let a=n??`h4`,o=f(`notification-title`,t);return c.createElement(a,{className:o,...r,ref:i},e)}const b=e(y,`NotificationTitle`),x=u(({actions:e,autohide:r=!1,children:i,className:s,closeLabel:l=`Close`,color:u=`primary`,defaultVisible:d=!0,delay:m=5e3,dismissible:g,icon:_,solid:y,text:x,title:S,titleComponent:C=`h4`,role:w=`status`,visible:T,onClose:E,onShow:D,onVisibleChange:O,...k},A)=>{let{close:j,entered:M,forkedRef:N,isMounted:P,textId:F,titleId:I,transitionClass:L,visible:R}=t({defaultVisible:d,displayName:`Notification`,onClose:E,onShow:D,onVisibleChange:O,ref:A,visible:T}),z=n({enabled:r,delay:m,visible:R&&M,onHide:j}),B=f(`notification`,`fade`,u,{solid:y},s);return P?c.createElement(h.Provider,{value:{visible:R,close:j}},c.createElement(`div`,{className:f(B,L),role:w,"aria-labelledby":S?I:void 0,"aria-describedby":S&&x?F:void 0,...p(k,z),ref:N},_&&(typeof _==`string`?c.createElement(a,{value:_,className:f(`notification-icon`,{"align-self-start":!!S})}):_),S&&c.createElement(b,{id:I,component:C},S),x&&c.createElement(v,{id:F},x),i,e,g&&c.createElement(o,{label:l,onClick:j}))):null});x.displayName=`Notification`;const S=u(({className:e,...t},n)=>{let r=f(`notification-icon`,e);return c.createElement(i,{className:r,...t,ref:n})});S.displayName=`NotificationIcon`;const C=new m;function w(e,t={}){return C.add({children:e,...t})}function T(e){C.close(e)}const E=u(({children:e,className:t,reverse:n,...i},a)=>{let{forkedRef:o,regionProps:l,state:u}=r(C,a);if(u.visibleToasts.length===0&&!e)return null;let d=n?[...u.visibleToasts].reverse():u.visibleToasts;return c.createElement(s,{direction:`vertical`,gap:`sm`,className:t,...l,...i,ref:o},e,d.map(e=>{let{children:t,...n}=e.content;return c.createElement(x,{key:e.key,...n,onClose:()=>u.close(e.key)},t)}))});E.displayName=`NotificationStack`;export{S as a,v as c,C as i,g as l,w as n,x as o,T as r,b as s,E as t};
+//# sourceMappingURL=notification-Ds24wnPq.js.map

package/dist/chunks/notification-Ds24wnPq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-Ds24wnPq.js","names":[],"sources":["../../src/components/notification/context.ts","../../src/hooks/useNotification.ts","../../src/components/notification/NotificationText.tsx","../../src/components/notification/NotificationTitle.tsx","../../src/components/notification/Notification.tsx","../../src/components/notification/NotificationIcon.tsx","../../src/components/notification/notificationQueue.ts","../../src/components/notification/NotificationStack.tsx"],"sourcesContent":["import { createContext } from 'react'\n\nexport interface NotificationContextProps {\n  /**\n   * Whether the notification is currently visible.\n   */\n  visible?: boolean\n  /**\n   * Dismisses the notification. Wire this to any element's `onClick` — see `useNotification`.\n   */\n  close: () => void\n}\n\nexport const NotificationContext = createContext<NotificationContextProps>({ close: () => {} })\n","import { useContext } from 'react'\nimport { NotificationContext, NotificationContextProps } from '../components/notification/context'\n\nexport type UseNotificationResult = NotificationContextProps\n\n// Reach the enclosing `Notification`'s dismiss handler from anywhere in its composed markup —\n// e.g. to close it from a plain `Button` placed alongside other `actions`, instead of the\n// built-in `dismissible` close button. Only meaningful inside a `Notification`; outside one it\n// returns a no-op `close`.\nexport const useNotification = (): UseNotificationResult => useContext(NotificationContext)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype NotificationTextOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type NotificationTextProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  NotificationTextOwnProps<C>\n>\n\ntype NotificationTextComponent = (<C extends ElementType = 'div'>(\n  props: NotificationTextProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NotificationTextRender<C extends ElementType = 'div'>(\n  { children, component, className, ...rest }: NotificationTextProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('notification-text', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const NotificationText = createPolymorphicComponent<NotificationTextComponent>(\n  NotificationTextRender as ForwardRefRenderFunction<Element, NotificationTextProps<ElementType>>,\n  'NotificationText'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype NotificationTitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type NotificationTitleProps<C extends ElementType = 'h4'> = PolymorphicComponentProps<\n  C,\n  NotificationTitleOwnProps<C>\n>\n\ntype NotificationTitleComponent = (<C extends ElementType = 'h4'>(\n  props: NotificationTitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NotificationTitleRender<C extends ElementType = 'h4'>(\n  { children, className, component, ...rest }: NotificationTitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'h4'\n  const _className = classNames('notification-title', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const NotificationTitle = createPolymorphicComponent<NotificationTitleComponent>(\n  NotificationTitleRender as ForwardRefRenderFunction<Element, NotificationTitleProps<ElementType>>,\n  'NotificationTitle'\n)\n","import React, { ElementType, forwardRef, HTMLAttributes, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { mergeProps } from 'react-aria'\n\nimport { ContextColor } from '../../types'\nimport { CloseButton } from '../close-button/CloseButton'\nimport { useAutoDismiss, useDismissibleTransition } from '../../hooks'\nimport { NotificationContext } from './context'\nimport { ResolvedIcon } from '../../utils/iconSlot'\nimport { NotificationText } from './NotificationText'\nimport { NotificationTitle } from './NotificationTitle'\nimport './Notification.scss'\n\nexport interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Optional trailing content — e.g. a row of `Button`s — rendered after `text`/`children`.\n   */\n  actions?: ReactNode\n  /**\n   * Automatically dismiss the notification after `delay`. The timer pauses while the pointer\n   * or focus is on the notification, and only starts once the notification is visible.\n   * Defaults to `false` — unlike `Toast`, notifications are persistent banners by default.\n   */\n  autohide?: boolean\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Overrides the dismiss button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs.\n   */\n  closeLabel?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Whether the notification is shown when it first renders. Such a notification is\n   * uncontrolled: its close button and the `autohide` timer hide it. Use `visible` to show and\n   * hide it from outside.\n   *\n   * @default true\n   */\n  defaultVisible?: boolean\n  /**\n   * Delay in ms before an `autohide` notification dismisses itself.\n   */\n  delay?: number\n  /**\n   * Optionally add a close button to the notification and allow it to self dismiss.\n   */\n  dismissible?: boolean\n  /**\n   * Leading icon. A string is an icon name, rendered like `<NotificationIcon name={icon} />` (or\n   * by `IconProvider`'s `component`); pass any other\n   * node for a fully custom icon. Automatically top-aligns with `title` when both are set —\n   * a custom icon node is responsible for its own alignment.\n   */\n  icon?: string | ReactNode\n  /**\n   * Applies the solid context style to the notification.\n   */\n  solid?: boolean\n  /**\n   * Message body, rendered via a single `<NotificationText>`. For multi-block content, compose\n   * `children` manually instead — `text` wraps everything in one element.\n   */\n  text?: ReactNode\n  /**\n   * Heading, rendered via `<NotificationTitle>`.\n   */\n  title?: ReactNode\n  /**\n   * Element or component used for the `title` heading. Passed through to `NotificationTitle`'s\n   * own `component` prop. Defaults to `'h4'`.\n   */\n  titleComponent?: ElementType\n  /**\n   * Callback fired once the notification has hidden: after its exit transition.\n   */\n  onClose?: () => void\n  /**\n   * Callback fired when the notification starts to show.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired with `false` when the notification asks to hide: its close button, `close`\n   * from `useNotification`, or the `autohide` timer. With `visible` set, the notification hides\n   * only when `visible` becomes `false`.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * ARIA live-region role. Use `status` (the default) for confirmation, progress, and\n   * informational messages, which announce politely. Use `alert` for messages that need\n   * immediate attention — validation errors, failed operations — which interrupt speech.\n   */\n  role?: 'status' | 'alert'\n  /**\n   * Whether the notification is shown. Setting it makes the notification controlled: it hides\n   * only when this becomes `false`, so pair it with `onVisibleChange`. Left unset, the\n   * notification is shown and hides itself (see `defaultVisible`).\n   */\n  visible?: boolean\n}\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      actions,\n      autohide = false,\n      children,\n      className,\n      closeLabel = 'Close',\n      color = 'primary',\n      defaultVisible = true,\n      delay = 5000,\n      dismissible,\n      icon,\n      solid,\n      text,\n      title,\n      titleComponent = 'h4',\n      role = 'status',\n      visible,\n      onClose,\n      onShow,\n      onVisibleChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const {\n      close,\n      entered,\n      forkedRef,\n      isMounted,\n      textId,\n      titleId,\n      transitionClass,\n      visible: _visible\n    } = useDismissibleTransition({\n      defaultVisible,\n      displayName: 'Notification',\n      onClose,\n      onShow,\n      onVisibleChange,\n      ref,\n      visible\n    })\n\n    // Gated on `entered`, not just `_visible` (see `Toast`'s identical comment) — the entrance\n    // transition finishing is what `autohide`'s JSDoc means by \"the timer starts once the\n    // notification is visible\".\n    const autoDismissProps = useAutoDismiss({\n      enabled: autohide,\n      delay,\n      visible: _visible && entered,\n      onHide: close\n    })\n\n    const _className = classNames(\n      'notification',\n      'fade',\n      color,\n      {\n        solid\n      },\n      className\n    )\n\n    if (!isMounted) return null\n\n    return (\n      <NotificationContext.Provider value={{ visible: _visible, close }}>\n        <div\n          className={classNames(_className, transitionClass)}\n          role={role}\n          aria-labelledby={title ? titleId : undefined}\n          aria-describedby={title && text ? textId : undefined}\n          {...mergeProps(rest, autoDismissProps)}\n          ref={forkedRef}\n        >\n          {icon &&\n            (typeof icon === 'string' ? (\n              <ResolvedIcon\n                value={icon}\n                className={classNames('notification-icon', { 'align-self-start': !!title })}\n              />\n            ) : (\n              icon\n            ))}\n          {title && (\n            <NotificationTitle id={titleId} component={titleComponent}>\n              {title}\n            </NotificationTitle>\n          )}\n          {text && <NotificationText id={textId}>{text}</NotificationText>}\n          {children}\n          {actions}\n          {dismissible && <CloseButton label={closeLabel} onClick={close} />}\n        </div>\n      </NotificationContext.Provider>\n    )\n  }\n)\n\nNotification.displayName = 'Notification'\n","import React, { forwardRef } from 'react'\nimport classNames from 'classnames'\n\nimport { Icon, IconProps } from '../icon/Icon'\n\nexport type NotificationIconProps = IconProps & {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n}\n\nexport const NotificationIcon = forwardRef<HTMLSpanElement | SVGSVGElement, NotificationIconProps>(\n  ({ className, ...rest }, ref) => {\n    const _className = classNames('notification-icon', className)\n\n    return <Icon className={_className} {...rest} ref={ref} />\n  }\n)\n\nNotificationIcon.displayName = 'NotificationIcon'\n","import { ReactNode } from 'react'\nimport { ToastQueue } from 'react-stately'\n\nimport { NotificationProps } from './Notification'\n\nexport interface NotificationContent extends Pick<\n  NotificationProps,\n  | 'actions'\n  | 'autohide'\n  | 'closeLabel'\n  | 'color'\n  | 'delay'\n  | 'dismissible'\n  | 'icon'\n  | 'role'\n  | 'solid'\n  | 'text'\n  | 'title'\n  | 'titleComponent'\n> {\n  /**\n   * Content of the notification. Compose manually (typically a `NotificationIcon`/\n   * `NotificationTitle`/`NotificationText`), or leave empty and use the `icon`/`title`/`text`\n   * shorthand options instead.\n   */\n  children?: ReactNode\n}\n\n// The queue backing `NotificationStack` — a module-level singleton so `addNotification()` is\n// callable from anywhere (an event handler, an async callback) without threading a `push` prop\n// through render. `NotificationStack` subscribes to it via `useToastQueue`; nothing renders\n// until a `<NotificationStack />` is actually mounted somewhere to display the queue's contents.\nexport const notificationQueue = new ToastQueue<NotificationContent>()\n\n// Adds a notification to the queue. Returns the notification's key, which can be passed to\n// `closeNotification` to dismiss it programmatically. `children` is optional — omit it for a\n// notification composed entirely from the `icon`/`title`/`text` shorthand options.\nexport function addNotification(\n  children?: ReactNode,\n  options: Omit<NotificationContent, 'children'> = {}\n): string {\n  return notificationQueue.add({ children, ...options })\n}\n\n// Removes a queued notification immediately, bypassing its own exit animation.\nexport function closeNotification(key: string): void {\n  notificationQueue.close(key)\n}\n","import React, { forwardRef, HTMLAttributes } from 'react'\n\nimport { useToastRegionQueue } from '../../hooks'\nimport { Stack } from '../stack'\nimport { Notification } from './Notification'\nimport { notificationQueue } from './notificationQueue'\n\nexport interface NotificationStackProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Queued notifications show newest-first by default — the typical toast pattern. Set\n   * `reverse` for a chronological transcript instead, oldest-first.\n   */\n  reverse?: boolean\n}\n\n// Renders the shared `notificationQueue` (see `notificationQueue.ts` — `addNotification()` is\n// how notifications get added to it from anywhere in the app) plus any statically-passed\n// `children`, e.g. a permanently pinned notification alongside dynamic ones — the same static\n// children still render with nothing queued, so this doubles as a plain grouping/spacing\n// wrapper for hand-placed notifications. Unlike `Toaster`, this always renders in normal\n// document flow rather than a fixed/portaled overlay — Chassis notifications are in-page\n// banners, not floating toasts.\nexport const NotificationStack = forwardRef<HTMLDivElement, NotificationStackProps>(\n  ({ children, className, reverse, ...rest }, ref) => {\n    const { forkedRef, regionProps, state } = useToastRegionQueue(notificationQueue, ref)\n\n    if (state.visibleToasts.length === 0 && !children) {\n      return null\n    }\n\n    // The queue is already newest-first (each add unshifts); `reverse` opts into chronological\n    // order instead.\n    const queued = reverse ? [...state.visibleToasts].reverse() : state.visibleToasts\n\n    return (\n      <Stack\n        direction=\"vertical\"\n        gap=\"sm\"\n        className={className}\n        {...regionProps}\n        {...rest}\n        ref={forkedRef}\n      >\n        {children}\n        {queued.map((item) => {\n          const { children: notificationChildren, ...notificationProps } = item.content\n          return (\n            <Notification\n              key={item.key}\n              {...notificationProps}\n              onClose={() => state.close(item.key)}\n            >\n              {notificationChildren}\n            </Notification>\n          )\n        })}\n      </Stack>\n    )\n  }\n)\n\nNotificationStack.displayName = 'NotificationStack'\n"],"mappings":"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"}

package/dist/chunks/number-field-IBIX2IWH.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./useForkedRef-DVEfT-KI.js";import{n as t}from"./Portal-CgeR1WXV.js";import{t as n}from"./useFormField-BOqmBTC4.js";import{t as r}from"./iconSlot-BNu2MrFI.js";import{t as i}from"./renderFormField-Brkw1yA6.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{r as o,t as ee}from"./unhandledProps-9Kdj7WVf.js";import s,{forwardRef as c,useRef as l}from"react";import u from"classnames";import{mergeProps as te,useButton as d,useLocale as f,useNumberField as ne}from"react-aria";import{useNumberFieldState as p}from"react-stately";function m({buttonProps:e,className:t,icon:n,iconKey:i}){let a=l(null),{buttonProps:o}=d(e,a);return s.createElement(`button`,{...o,className:t,ref:a},s.createElement(r,{icon:i,override:n}))}const h=c(({adornEnd:r,adornStart:c,className:d,decrementAriaLabel:h,decrementIcon:g,defaultValue:_,disabled:v,form:y,formatOptions:re,help:b,id:x,incrementAriaLabel:S,incrementIcon:C,invalid:w,invalidFeedback:T,label:E,max:D,min:O,name:k,onChange:ie,readOnly:ae,required:oe,size:A,step:se,stepButtons:j=!0,style:M,valid:N,validFeedback:P,value:F,...I},L)=>{let R=l(null),z=e(L,R),B=t(),{locale:V}=f(),{describedBy:H,feedbackId:U,helpId:W,inputId:G,labelId:ce,labelledBy:le}=n({ariaDescribedBy:I[`aria-describedby`],ariaLabelledBy:I[`aria-labelledby`],help:b,id:x,invalid:w,invalidFeedback:T,label:E,valid:N,validFeedback:P}),K={...I,"aria-describedby":H,"aria-labelledby":le,decrementAriaLabel:h,defaultValue:_,formatOptions:re,id:G,incrementAriaLabel:S,isDisabled:v,isInvalid:w,isReadOnly:ae,isRequired:oe,maxValue:D,minValue:O,onChange:ie,step:se,value:F},q=p({...K,locale:V}),{decrementButtonProps:ue,groupProps:J,incrementButtonProps:de,inputProps:Y}=ne(K,q,R),X=j||c!=null||r!=null,Z={onBlur:J.onBlur,onFocus:J.onFocus},Q=s.createElement(`input`,{...o(X?Y:te(Y,Z),I,ee),"aria-describedby":H,"aria-disabled":void 0,"aria-readonly":void 0,"aria-roledescription":B?Y[`aria-roledescription`]:void 0,className:u(X?`ghost-input`:`form-input`,!X&&A,a(w,N),!X&&d),form:y,inputMode:B?Y.inputMode:`numeric`,ref:z,style:X?void 0:M}),$=X?s.createElement(`div`,{className:u(`form-input`,`number-field`,A,d),style:M,...Z},c,Q,r,j&&s.createElement(`div`,{className:`number-field-buttons`},s.createElement(m,{buttonProps:de,className:`number-field-increment`,icon:C,iconKey:`increment`}),s.createElement(m,{buttonProps:ue,className:`number-field-decrement`,icon:g,iconKey:`decrement`}))):Q,fe=k?s.createElement(s.Fragment,null,$,s.createElement(`input`,{disabled:v||void 0,form:y,name:k,type:`hidden`,value:isNaN(q.numberValue)?``:q.numberValue})):$;return i({children:fe,help:b,ids:{feedback:U,help:W,input:G,label:ce},invalid:w,invalidFeedback:T,label:E,valid:N,validFeedback:P})});h.displayName=`NumberField`;export{h as t};
+//# sourceMappingURL=number-field-IBIX2IWH.js.map

package/dist/chunks/number-field-IBIX2IWH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-IBIX2IWH.js","names":[],"sources":["../../src/components/number-field/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, RefObject, useRef } from 'react'\nimport classNames from 'classnames'\nimport {\n  AriaButtonProps,\n  AriaNumberFieldProps,\n  mergeProps,\n  useButton,\n  useLocale,\n  useNumberField\n} from 'react-aria'\nimport { useNumberFieldState } from 'react-stately'\n\nimport './NumberField.scss'\nimport { useForkedRef, useFormField } from '../../hooks'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { useHydrated } from '../portal/Portal'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface NumberFieldProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'inputMode' | 'max' | 'min' | 'onChange' | 'size' | 'step' | 'type' | 'value'\n> {\n  /**\n   * Content rendered at the input's trailing edge, before the step buttons, e.g. a unit as an\n   * `InputAdorn`.\n   */\n  adornEnd?: ReactNode\n  /**\n   * Content rendered at the input's leading edge, e.g. an `InputAdorn` icon or text.\n   */\n  adornStart?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The name of the decrement button for screen readers. Defaults to \"Decrease\" and the field's\n   * label, in the locale's language.\n   */\n  decrementAriaLabel?: string\n  /**\n   * The decrement button's icon, in place of `IconProvider`'s `decrement`.\n   */\n  decrementIcon?: IconValue\n  /**\n   * The value of the field, uncontrolled.\n   */\n  defaultValue?: number\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * How the value is shown and typed: decimals, a percent, a currency or a unit, with the\n   * locale's separators. `Intl.NumberFormat`'s options.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /**\n   * A description for the field, rendered below the input.\n   */\n  help?: ReactNode\n  /**\n   * The name of the increment button for screen readers. Defaults to \"Increase\" and the field's\n   * label, in the locale's language.\n   */\n  incrementAriaLabel?: string\n  /**\n   * The increment button's icon, in place of `IconProvider`'s `increment`.\n   */\n  incrementIcon?: IconValue\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the input when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this input.\n   */\n  label?: ReactNode\n  /**\n   * The largest value. A larger one typed in is clamped to it when the field loses focus.\n   */\n  max?: number\n  /**\n   * The smallest value. A smaller one typed in is clamped to it when the field loses focus.\n   */\n  min?: number\n  /**\n   * Handler that is called when the value is committed: on a step (a button, an arrow key, Home,\n   * End, the mouse wheel), on Enter or when the field loses focus after typing, on a paste that\n   * replaces the whole text, and on a form reset. `NaN` when the field is empty.\n   */\n  onChange?: (value: number) => void\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * Toggle the required state for the component.\n   */\n  required?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * The amount the buttons and the arrow keys add or take away. A typed value snaps to it,\n   * counted from `min`.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * Show the increment and decrement buttons. Without them the arrow keys still step the value.\n   *\n   * @default true\n   */\n  stepButtons?: boolean\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the field, controlled. `NaN` for an empty field.\n   */\n  value?: number\n}\n\n// One step button. A `<button>` react-aria keeps out of the tab order: the input's arrow keys do\n// the same. A mouse press leaves focus on the input; a touch focuses the button, so no software\n// keyboard opens.\nfunction StepButton({\n  buttonProps,\n  className,\n  icon,\n  iconKey\n}: {\n  buttonProps: AriaButtonProps\n  className: string\n  icon?: IconValue\n  iconKey: 'increment' | 'decrement'\n}) {\n  const ref = useRef<HTMLButtonElement>(null)\n  const { buttonProps: props } = useButton(buttonProps, ref as RefObject<HTMLButtonElement | null>)\n  return (\n    <button {...props} className={className} ref={ref}>\n      <IconSlot icon={iconKey} override={icon} />\n    </button>\n  )\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      adornEnd,\n      adornStart,\n      className,\n      decrementAriaLabel,\n      decrementIcon,\n      defaultValue,\n      disabled,\n      form,\n      formatOptions,\n      help,\n      id,\n      incrementAriaLabel,\n      incrementIcon,\n      invalid,\n      invalidFeedback,\n      label,\n      max,\n      min,\n      name,\n      onChange,\n      readOnly,\n      required,\n      size,\n      step,\n      stepButtons = true,\n      style,\n      valid,\n      validFeedback,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    const hydrated = useHydrated()\n    const { locale } = useLocale()\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    // `label` stays out: react-aria would label the input and the buttons with a label element of\n    // its own, which this component doesn't render. The buttons are named from `aria-labelledby`,\n    // which names the `FormLabel` (FORMS.md, gotcha 5).\n    const fieldProps = {\n      ...rest,\n      'aria-describedby': describedBy,\n      'aria-labelledby': labelledBy,\n      decrementAriaLabel,\n      defaultValue,\n      formatOptions,\n      id: inputId,\n      incrementAriaLabel,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isReadOnly: readOnly,\n      isRequired: required,\n      maxValue: max,\n      minValue: min,\n      onChange,\n      step,\n      value\n    } as AriaNumberFieldProps\n    const state = useNumberFieldState({ ...fieldProps, locale })\n    const { decrementButtonProps, groupProps, incrementButtonProps, inputProps } = useNumberField(\n      fieldProps,\n      state,\n      inputRef\n    )\n\n    const hasWrapper = stepButtons || adornStart != null || adornEnd != null\n\n    // react-aria picks the keyboard (`inputMode`) and drops `aria-roledescription` by platform\n    // (iPhone, Android, iOS), which the server can't know, and a hydrating render doesn't patch an\n    // attribute. Until the page has hydrated, both are what the server renders: `numeric`, which\n    // any platform but those picks, and no role description, whose text iOS doesn't get.\n    // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n    // gotcha 6).\n    // react-aria's focus-within handlers let the mouse wheel step the value while the field has\n    // focus: on the wrapper when there is one, else on the input. The wrapper isn't a named group.\n    const focusWithin = { onBlur: groupProps.onBlur, onFocus: groupProps.onFocus }\n    // `form` reaches the visible input too, which has no `name`: react-aria resets the field on\n    // the reset of the input's own form, and a form linked by id is the input's form only then.\n    const input = (\n      <input\n        {...mergeUnhandledProps(\n          hasWrapper ? inputProps : mergeProps(inputProps, focusWithin),\n          rest,\n          TEXT_FIELD_PROPS\n        )}\n        aria-describedby={describedBy}\n        // react-aria's spin button props repeat the native `disabled` and `readOnly` the text\n        // field sets; the Nu Html Checker flags the copies.\n        aria-disabled={undefined}\n        aria-readonly={undefined}\n        aria-roledescription={hydrated ? inputProps['aria-roledescription'] : undefined}\n        className={classNames(\n          hasWrapper ? 'ghost-input' : 'form-input',\n          !hasWrapper && size,\n          validationClassName(invalid, valid),\n          !hasWrapper && className\n        )}\n        form={form}\n        inputMode={hydrated ? inputProps.inputMode : 'numeric'}\n        ref={forkedRef}\n        style={hasWrapper ? undefined : style}\n      />\n    )\n\n    // The step buttons sit in their own element: chassis-css styles `.form-input` as disabled when\n    // one of its direct children is, and a step button is disabled at `min` or `max`.\n    const field = hasWrapper ? (\n      <div\n        className={classNames('form-input', 'number-field', size, className)}\n        style={style}\n        {...focusWithin}\n      >\n        {adornStart}\n        {input}\n        {adornEnd}\n        {stepButtons && (\n          <div className=\"number-field-buttons\">\n            <StepButton\n              buttonProps={incrementButtonProps}\n              className=\"number-field-increment\"\n              icon={incrementIcon}\n              iconKey=\"increment\"\n            />\n            <StepButton\n              buttonProps={decrementButtonProps}\n              className=\"number-field-decrement\"\n              icon={decrementIcon}\n              iconKey=\"decrement\"\n            />\n          </div>\n        )}\n      </div>\n    ) : (\n      input\n    )\n\n    // The input shows the formatted text; a form receives the number, from a hidden input as\n    // react-aria-components' `NumberField` renders it.\n    const children = name ? (\n      <>\n        {field}\n        <input\n          disabled={disabled || undefined}\n          form={form}\n          name={name}\n          type=\"hidden\"\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      </>\n    ) : (\n      field\n    )\n\n    return renderFormField({\n      children,\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nNumberField.displayName = 'NumberField'\n"],"mappings":"glBA6IA,SAAS,EAAW,CAClB,cACA,YACA,OACA,WAMC,CACD,IAAM,EAAM,EAA0B,IAAI,EACpC,CAAE,YAAa,GAAU,EAAU,EAAa,CAA0C,EAChG,OACE,EAAA,cAAC,SAAD,CAAQ,GAAI,EAAkB,YAAgB,KAEtC,EADN,EAAA,cAAC,EAAD,CAAU,KAAM,EAAS,SAAU,CAAO,CAAA,CACpC,CAEZ,CAEA,MAAa,EAAc,GAEvB,CACE,WACA,aACA,YACA,qBACA,gBACA,eACA,WACA,OACA,iBACA,OACA,KACA,qBACA,gBACA,UACA,kBACA,QACA,MACA,MACA,OACA,YACA,YACA,YACA,OACA,QACA,cAAc,GACd,QACA,QACA,gBACA,QACA,GAAG,GAEL,IACG,CACH,IAAM,EAAW,EAAyB,IAAI,EACxC,EAAY,EAAa,EAAK,CAAQ,EACtC,EAAW,EAAY,EACvB,CAAE,UAAW,EAAU,EAEvB,CAAE,cAAa,aAAY,SAAQ,UAAS,WAAS,eAAe,EAAa,CACrF,gBAAiB,EAAK,oBACtB,eAAgB,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAKK,EAAa,CACjB,GAAG,EACH,mBAAoB,EACpB,kBAAmB,GACnB,qBACA,eACA,iBACA,GAAI,EACJ,qBACA,WAAY,EACZ,UAAW,EACX,WAAY,GACZ,WAAY,GACZ,SAAU,EACV,SAAU,EACV,YACA,QACA,OACF,EACM,EAAQ,EAAoB,CAAE,GAAG,EAAY,QAAO,CAAC,EACrD,CAAE,wBAAsB,aAAY,wBAAsB,cAAe,GAC7E,EACA,EACA,CACF,EAEM,EAAa,GAAe,GAAc,MAAQ,GAAY,KAU9D,EAAc,CAAE,OAAQ,EAAW,OAAQ,QAAS,EAAW,OAAQ,EAGvE,EACJ,EAAA,cAAC,QAAD,CACE,GAAI,EACF,EAAa,EAAa,GAAW,EAAY,CAAW,EAC5D,EACA,EACF,EACA,mBAAkB,EAGlB,gBAAe,IAAA,GACf,gBAAe,IAAA,GACf,uBAAsB,EAAW,EAAW,wBAA0B,IAAA,GACtE,UAAW,EACT,EAAa,cAAgB,aAC7B,CAAC,GAAc,EACf,EAAoB,EAAS,CAAK,EAClC,CAAC,GAAc,CACjB,EACM,OACN,UAAW,EAAW,EAAW,UAAY,UAC7C,IAAK,EACL,MAAO,EAAa,IAAA,GAAY,CACjC,CAAA,EAKG,EAAQ,EACZ,EAAA,cAAC,MAAD,CACE,UAAW,EAAW,aAAc,eAAgB,EAAM,CAAS,EAC5D,QACP,GAAI,CAqBD,EAnBF,EACA,EACA,EACA,GACC,EAAA,cAAC,MAAD,CAAK,UAAU,sBAaV,EAZH,EAAA,cAAC,EAAD,CACE,YAAa,GACb,UAAU,yBACV,KAAM,EACN,QAAQ,WACT,CAAA,EACD,EAAA,cAAC,EAAD,CACE,YAAa,GACb,UAAU,yBACV,KAAM,EACN,QAAQ,WACT,CAAA,CACE,CAEJ,EAEL,EAKI,GAAW,EACf,EAAA,cAAA,EAAA,SAAA,KACG,EACD,EAAA,cAAC,QAAD,CACE,SAAU,GAAY,IAAA,GAChB,OACA,OACN,KAAK,SACL,MAAO,MAAM,EAAM,WAAW,EAAI,GAAK,EAAM,WAC9C,CAAA,CACD,EAEF,EAGF,OAAO,EAAgB,CACrB,YACA,OACA,IAAK,CAAE,SAAU,EAAY,KAAM,EAAQ,MAAO,EAAS,MAAO,EAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAY,YAAc"}

package/dist/chunks/otp-input-ws393uPB.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./useForkedRef-DVEfT-KI.js";import{t}from"./useControllableState-CPUJxfKW.js";import{t as n}from"./useFormField-BOqmBTC4.js";import{t as r}from"./renderFormField-Brkw1yA6.js";import{t as i}from"./direction-LN6uwsK5.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import o,{Fragment as s,forwardRef as c,useMemo as l,useRef as u}from"react";import d from"classnames";import{mergeProps as f,useFocusRing as p,useObjectRef as m,useTextField as h}from"react-aria";const g=c(({disabled:e,index:t,invalid:n,mask:r,onChangeValue:i,onKeyDownBox:s,onPasteBox:c,size:l,valid:u,value:g},_)=>{let v=m(_),{focusProps:y,isFocusVisible:b}=p(),{inputProps:x}=h({"aria-label":`Digit ${t+1}`,autoComplete:t===0||r?`one-time-code`:`off`,isDisabled:e,isInvalid:n,maxLength:1,onChange:i,onFocus:e=>e.target.select(),onKeyDown:s,type:r?`password`:`text`,value:g},v);return o.createElement(`input`,{...f(x,y),"aria-describedby":void 0,className:d(`form-input`,l,a(n,u)),"data-focus-visible":b||void 0,inputMode:`numeric`,onPaste:c,pattern:`\\d*`,ref:v})});g.displayName=`OtpBox`;const _=e=>e.replace(/\D/g,``),v=(e,t)=>{let n=[..._(e)].slice(0,t);return Array.from({length:t},(e,t)=>n[t]??``)},y=c(({className:c,defaultValue:f,disabled:p,groupSizes:m,help:h,id:y,inputGroup:b,invalid:x,invalidFeedback:S,label:C,length:w=6,mask:T,name:E,onChange:D,onComplete:O,separator:k=`–`,size:A,valid:j,validFeedback:M,value:N,...P},F)=>{let I=m&&m.length>0?m.reduce((e,t)=>e+t,0):w,[L,R]=t(N,f??``,D),z=l(()=>v(L,I),[L,I]),B=u([]),V=e=>B.current[e]?.focus(),H=u(null),U=e(F,H),W=e=>{let t=e.join(``);R(t),e.length===I&&e.every(e=>e!==``)&&O?.(t)},G=(e,t)=>{let n=_(t);if(n.length>1){let t=[...n],r=[...z];for(let n=0;n<t.length&&e+n<I;n++)r[e+n]=t[n];W(r),V(Math.min(e+t.length,I-1));return}let r=[...z];r[e]=n,W(r),n&&e<I-1&&V(e+1)},K=(e,t)=>{if(!p)switch(t.key){case`Backspace`:if(!z[e]&&e>0){t.preventDefault();let n=[...z];n[e-1]=``,W(n),V(e-1)}break;case`Delete`:{t.preventDefault();let n=[...z];for(let t=e;t<I-1;t++)n[t]=n[t+1];n[I-1]=``,W(n);break}case`ArrowLeft`:case`ArrowRight`:{let n=t.key===`ArrowRight`===i(t.currentTarget)?e-1:e+1;n>=0&&n<I&&(t.preventDefault(),V(n));break}}},q=e=>{if(e.preventDefault(),p)return;let t=_(e.clipboardData.getData(`text`)).slice(0,I);t&&(W(v(t,I)),V(Math.min(t.length,I)-1))},J=(e,t)=>Array.from({length:t},(t,n)=>e+n).map(e=>o.createElement(g,{disabled:p,index:e,invalid:x,key:e,mask:T,onChangeValue:t=>G(e,t),onKeyDownBox:t=>K(e,t),onPasteBox:q,ref:t=>{B.current[e]=t},size:A,valid:j,value:z[e]??``})),Y;if(m&&m.length>0){let e=0;Y=m.map((t,n)=>{let r=e;return e+=t,o.createElement(s,{key:n},n>0&&o.createElement(`span`,{className:`form-otp-separator`},k),b?o.createElement(`div`,{className:`input-group`},J(r,t)):J(r,t))})}else Y=J(0,I);let{describedBy:X,feedbackId:Z,helpId:Q,inputId:$,labelId:ee,labelledBy:te}=n({ariaDescribedBy:P[`aria-describedby`],ariaLabelledBy:P[`aria-labelledby`],help:h,id:y,invalid:x,invalidFeedback:S,label:C,valid:j,validFeedback:M});return r({children:o.createElement(`div`,{...P,"aria-describedby":X,"aria-labelledby":te,className:d(`form-otp`,{"input-group":b&&!(m&&m.length>0)},a(x,j),c),id:$,ref:U,role:`group`},Y,E&&o.createElement(`input`,{disabled:p,name:E,type:`hidden`,value:z.join(``)})),help:h,ids:{feedback:Z,help:Q,label:ee},invalid:x,invalidFeedback:S,label:C,valid:j,validFeedback:M})});y.displayName=`OtpInput`;export{y as t};
+//# sourceMappingURL=otp-input-ws393uPB.js.map

package/dist/chunks/otp-input-ws393uPB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-ws393uPB.js","names":[],"sources":["../../src/components/otp-input/OtpBox.tsx","../../src/components/otp-input/OtpInput.tsx"],"sourcesContent":["import React, { ClipboardEvent, ForwardedRef, forwardRef, KeyboardEvent } from 'react'\nimport classNames from 'classnames'\nimport { mergeProps, useFocusRing, useObjectRef, useTextField } from 'react-aria'\n\nimport { validationClassName } from '../../utils/validationClassName'\n\ninterface OtpBoxProps {\n  disabled?: boolean\n  index: number\n  invalid?: boolean\n  mask?: boolean\n  onChangeValue: (value: string) => void\n  onKeyDownBox: (event: KeyboardEvent<HTMLInputElement>) => void\n  onPasteBox: (event: ClipboardEvent<HTMLInputElement>) => void\n  size?: 'sm' | 'lg'\n  valid?: boolean\n  value: string\n}\n\nexport const OtpBox = forwardRef(\n  (\n    {\n      disabled,\n      index,\n      invalid,\n      mask,\n      onChangeValue,\n      onKeyDownBox,\n      onPasteBox,\n      size,\n      valid,\n      value\n    }: OtpBoxProps,\n    forwardedRef: ForwardedRef<HTMLInputElement>\n  ) => {\n    const ref = useObjectRef(forwardedRef)\n    const { focusProps, isFocusVisible } = useFocusRing()\n    const { inputProps } = useTextField(\n      {\n        'aria-label': `Digit ${index + 1}`,\n        // Only the first box takes the whole code; the others turn autofill off. Browsers ignore\n        // `off` on a password field, though, so a masked box would be offered saved passwords:\n        // every masked box says it takes a one-time code instead, the one other value that fits.\n        autoComplete: index === 0 || mask ? 'one-time-code' : 'off',\n        isDisabled: disabled,\n        isInvalid: invalid,\n        maxLength: 1,\n        onChange: onChangeValue,\n        onFocus: (event) => (event.target as HTMLInputElement).select(),\n        onKeyDown: onKeyDownBox,\n        type: mask ? 'password' : 'text',\n        value\n      },\n      ref\n    )\n\n    return (\n      <input\n        {...mergeProps(inputProps, focusProps)}\n        // The group describes the boxes. react-aria's own ids here are never rendered (FORMS.md,\n        // gotcha 6).\n        aria-describedby={undefined}\n        className={classNames('form-input', size, validationClassName(invalid, valid))}\n        data-focus-visible={isFocusVisible || undefined}\n        inputMode=\"numeric\"\n        onPaste={onPasteBox}\n        pattern=\"\\d*\"\n        ref={ref}\n      />\n    )\n  }\n)\n\nOtpBox.displayName = 'OtpBox'\n","import React, {\n  ClipboardEvent,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useMemo,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useControllableState, useForkedRef, useFormField } from '../../hooks'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { OtpBox } from './OtpBox'\nimport { isRTL } from '../../utils/direction'\n\nexport interface OtpInputProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Identifies the element that describes the group, e.g. a `FormHelp` help element.\n   */\n  'aria-describedby'?: string\n  /**\n   * An accessible label for the group, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the group.\n   */\n  'aria-labelledby'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The initial code (uncontrolled), e.g. `\"123\"` for a partially filled code.\n   */\n  defaultValue?: string\n  /**\n   * Prevents input and makes every box non-interactive.\n   */\n  disabled?: boolean\n  /**\n   * Splits the boxes into groups (e.g. `[3, 3]` for a \"123-456\" layout), rendering a\n   * `.form-otp-separator` between each group. The total number of boxes becomes the sum of\n   * `groupSizes`, overriding `length`.\n   */\n  groupSizes?: number[]\n  /**\n   * A description for the field, rendered below the boxes.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the group container.\n   */\n  id?: string\n  /**\n   * Visually connects the boxes into a single bordered control. When `groupSizes` is set, each\n   * group is connected separately.\n   */\n  inputGroup?: boolean\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the boxes when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the group via\n   * `aria-labelledby` (there's no single input to target with `htmlFor`).\n   */\n  label?: ReactNode\n  /**\n   * Number of digit boxes. Ignored when `groupSizes` is set. Defaults to `6`.\n   */\n  length?: number\n  /**\n   * Mask entered digits using `type=\"password\"` boxes.\n   */\n  mask?: boolean\n  /**\n   * `name` of an auto-created hidden input kept in sync with the code, for native form\n   * submission. Omit to skip creating it.\n   */\n  name?: string\n  /**\n   * Callback fired whenever the code changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Callback fired once every box is filled.\n   */\n  onComplete?: (value: string) => void\n  /**\n   * Content of the separator rendered between groups when `groupSizes` is set. Defaults to `–`.\n   */\n  separator?: ReactNode\n  /**\n   * Size the boxes sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the boxes when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The code (controlled), digits only, e.g. `\"123456\"`.\n   */\n  value?: string\n}\n\nconst onlyDigits = (raw: string) => raw.replace(/\\D/g, '')\n\nconst toBoxes = (raw: string, total: number): string[] => {\n  const digits = [...onlyDigits(raw)].slice(0, total)\n  return Array.from({ length: total }, (_, i) => digits[i] ?? '')\n}\n\nexport const OtpInput = forwardRef<HTMLDivElement, OtpInputProps>(\n  (\n    {\n      className,\n      defaultValue,\n      disabled,\n      groupSizes,\n      help,\n      id,\n      inputGroup,\n      invalid,\n      invalidFeedback,\n      label,\n      length = 6,\n      mask,\n      name,\n      onChange,\n      onComplete,\n      separator = '–',\n      size,\n      valid,\n      validFeedback,\n      value,\n      ...rest\n    }: OtpInputProps,\n    ref\n  ): ReactNode => {\n    const total =\n      groupSizes && groupSizes.length > 0 ? groupSizes.reduce((a, b) => a + b, 0) : length\n\n    const [rawValue, setRawValue] = useControllableState(value, defaultValue ?? '', onChange)\n    const boxes = useMemo(() => toBoxes(rawValue, total), [rawValue, total])\n\n    const boxRefs = useRef<Array<HTMLInputElement | null>>([])\n    const focusBox = (index: number) => boxRefs.current[index]?.focus()\n    const containerRef = useRef<HTMLDivElement>(null)\n    const forkedRef = useForkedRef(ref, containerRef)\n\n    const commit = (nextBoxes: string[]) => {\n      const next = nextBoxes.join('')\n      setRawValue(next)\n      if (nextBoxes.length === total && nextBoxes.every((box) => box !== '')) {\n        onComplete?.(next)\n      }\n    }\n\n    const handleChange = (index: number, raw: string) => {\n      const digits = onlyDigits(raw)\n\n      if (digits.length > 1) {\n        // Multi-character value landing in a single box (autofill, or a fast typist outrunning\n        // the auto-advance) — distribute across this and subsequent boxes, matching chassis-css's\n        // vanilla otp-input.js `_handleInput`.\n        const chars = [...digits]\n        const nextBoxes = [...boxes]\n        for (let i = 0; i < chars.length && index + i < total; i++) {\n          nextBoxes[index + i] = chars[i]!\n        }\n        commit(nextBoxes)\n        focusBox(Math.min(index + chars.length, total - 1))\n        return\n      }\n\n      const nextBoxes = [...boxes]\n      nextBoxes[index] = digits\n      commit(nextBoxes)\n      if (digits && index < total - 1) focusBox(index + 1)\n    }\n\n    const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n\n      switch (event.key) {\n        case 'Backspace': {\n          if (!boxes[index] && index > 0) {\n            event.preventDefault()\n            const nextBoxes = [...boxes]\n            nextBoxes[index - 1] = ''\n            commit(nextBoxes)\n            focusBox(index - 1)\n          }\n          break\n        }\n        case 'Delete': {\n          event.preventDefault()\n          // `boxes` (and every copy derived from it) is always exactly `total` entries long — see\n          // `toBoxes` — so `i + 1` (bounded by `i < total - 1`) never reads past the end.\n          const nextBoxes = [...boxes]\n          for (let i = index; i < total - 1; i++) nextBoxes[i] = nextBoxes[i + 1]!\n          nextBoxes[total - 1] = ''\n          commit(nextBoxes)\n          break\n        }\n        // Arrow keys move by *visual* direction, so they mirror under RTL: the box to the left of\n        // the focused one is the next box, not the previous. `Carousel` and `MenuSubmenu` already\n        // mirror their own arrow handling this way; this used to hardcode the LTR mapping and sent\n        // an RTL user backwards through the field.\n        case 'ArrowLeft':\n        case 'ArrowRight': {\n          const movesForward = (event.key === 'ArrowRight') !== isRTL(event.currentTarget)\n          const nextIndex = movesForward ? index + 1 : index - 1\n          if (nextIndex >= 0 && nextIndex < total) {\n            event.preventDefault()\n            focusBox(nextIndex)\n          }\n          break\n        }\n        default:\n          break\n      }\n    }\n\n    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n      event.preventDefault()\n      if (disabled) return\n      const digits = onlyDigits(event.clipboardData.getData('text')).slice(0, total)\n      if (!digits) return\n      commit(toBoxes(digits, total))\n      focusBox(Math.min(digits.length, total) - 1)\n    }\n\n    const renderBoxes = (start: number, count: number) =>\n      Array.from({ length: count }, (_, i) => start + i).map((i) => (\n        <OtpBox\n          disabled={disabled}\n          index={i}\n          invalid={invalid}\n          key={i}\n          mask={mask}\n          onChangeValue={(next) => handleChange(i, next)}\n          onKeyDownBox={(event) => handleKeyDown(i, event)}\n          onPasteBox={handlePaste}\n          ref={(el) => {\n            boxRefs.current[i] = el\n          }}\n          size={size}\n          valid={valid}\n          value={boxes[i] ?? ''}\n        />\n      ))\n\n    let content: ReactNode\n    if (groupSizes && groupSizes.length > 0) {\n      let cursor = 0\n      content = groupSizes.map((groupSize, groupIndex) => {\n        const start = cursor\n        cursor += groupSize\n        return (\n          // eslint-disable-next-line react/no-array-index-key\n          <Fragment key={groupIndex}>\n            {groupIndex > 0 && <span className=\"form-otp-separator\">{separator}</span>}\n            {inputGroup ? (\n              <div className=\"input-group\">{renderBoxes(start, groupSize)}</div>\n            ) : (\n              renderBoxes(start, groupSize)\n            )}\n          </Fragment>\n        )\n      })\n    } else {\n      content = renderBoxes(0, total)\n    }\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    return renderFormField({\n      children: (\n        <div\n          {...rest}\n          aria-describedby={describedBy}\n          aria-labelledby={labelledBy}\n          className={classNames(\n            'form-otp',\n            { 'input-group': inputGroup && !(groupSizes && groupSizes.length > 0) },\n            validationClassName(invalid, valid),\n            className\n          )}\n          id={groupId}\n          ref={forkedRef}\n          role=\"group\"\n        >\n          {content}\n          {name && <input disabled={disabled} name={name} type=\"hidden\" value={boxes.join('')} />}\n        </div>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nOtpInput.displayName = 'OtpInput'\n"],"mappings":"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"}

package/dist/chunks/overlayPlacement-BtS90IVf.js

@@ -0,0 +1,2 @@
+const e={top:`top`,"top-start":`top start`,"top-end":`top end`,bottom:`bottom`,"bottom-start":`bottom start`,"bottom-end":`bottom end`,left:`left`,"left-start":`left top`,"left-end":`left bottom`,right:`right`,"right-start":`right top`,"right-end":`right bottom`},t=t=>e[t],n=(e,t)=>{if(!t||t===`center`)return e;let n=e.split(`-`)[1];return n?`${t}-${n}`:t},r=(e,t,r)=>({menuStyle:{position:e?.position,top:e?.top,left:e?.left},placementAttr:n(t,r)}),i={"--menu-max-height":`320px`,"--menu-overflow-y":`auto`};export{t as i,n,r,i as t};
+//# sourceMappingURL=overlayPlacement-BtS90IVf.js.map

package/dist/chunks/overlayPlacement-BtS90IVf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPlacement-BtS90IVf.js","names":[],"sources":["../../src/utils/overlayPlacement.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Placement as AriaPlacement, PlacementAxis } from 'react-aria'\n\n// Chassis CSS's floating components (`.menu`, `.tooltip`, `.popover`) read a `data-cx-placement`\n// attribute in this hyphenated, compound form (`\"bottom-end\"`, `\"top-start\"`, ...) to pick the\n// right transform-origin for the open/close animation. React Aria's `useOverlayPosition` speaks a\n// different, space-separated placement vocabulary (`\"bottom end\"`) and only reports back the\n// resolved main axis after flipping, not the full compound value — this module bridges the two.\nexport type Placement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\nconst ARIA_PLACEMENT: Record<Placement, AriaPlacement> = {\n  top: 'top',\n  'top-start': 'top start',\n  'top-end': 'top end',\n  bottom: 'bottom',\n  'bottom-start': 'bottom start',\n  'bottom-end': 'bottom end',\n  left: 'left',\n  'left-start': 'left top',\n  'left-end': 'left bottom',\n  right: 'right',\n  'right-start': 'right top',\n  'right-end': 'right bottom'\n}\n\n// Translates chassis-react's public `placement` prop values into the strings\n// `useOverlayPosition` expects.\nexport const toAriaPlacement = (placement: Placement): AriaPlacement => ARIA_PLACEMENT[placement]\n\n// `useOverlayPosition`'s own `shouldFlip` only ever swaps the main axis (top<->bottom or\n// left<->right) — it never changes the requested cross-axis alignment — so the resolved compound\n// value is always the requested cross-axis suffix reattached to the (possibly flipped) main axis\n// `useOverlayPosition` reports back.\nexport const resolveDataPlacement = (\n  requested: Placement,\n  resolvedMain: PlacementAxis | null\n): string => {\n  if (!resolvedMain || resolvedMain === 'center') return requested\n  const cross = requested.split('-')[1]\n  return cross ? `${resolvedMain}-${cross}` : resolvedMain\n}\n\n// Shared between `Menu`/`MenuSubmenu` and `Combobox`/`Autocomplete`, whose floating panels all\n// position via `useOverlayPosition` the same way: only `position`/`top`/`left` are taken from the\n// hook's computed style (`zIndex`/`maxHeight` stay owned by chassis-css's own `--zindex`/\n// `--max-height` tokens, see `_menu.scss`), and `data-cx-placement` needs the resolved main axis\n// reattached to the originally-requested cross-axis alignment. Lives here (rather than\n// `components/menu/`) for the same reason `renderMenuItemContent` does — `Combobox.tsx`/\n// `Autocomplete.tsx` need it too, and importing across that folder boundary from three call sites\n// is worse than housing it where none of the four has to reach into a sibling's folder.\nexport interface MenuOverlayPositioning {\n  menuStyle: CSSProperties\n  placementAttr: string\n}\n\nexport const resolveMenuOverlayPositioning = (\n  overlayStyle: CSSProperties | undefined,\n  requestedPlacement: Placement,\n  resolvedPlacement: PlacementAxis | null\n): MenuOverlayPositioning => ({\n  menuStyle: {\n    position: overlayStyle?.position,\n    top: overlayStyle?.top,\n    left: overlayStyle?.left\n  },\n  placementAttr: resolveDataPlacement(requestedPlacement, resolvedPlacement)\n})\n\n// chassis-css's `.combobox + .menu` sibling-selector rule (`_combobox.scss`) sets\n// `--menu-max-height`/`--menu-overflow-y` from `$combobox-menu-max-height`/\n// `$combobox-menu-overflow-y` (320px/auto by default) — but only while the panel is an adjacent\n// DOM sibling of `.combobox`. `Autocomplete`/`Combobox` portal their panel to `document.body` (or\n// an enclosing open `<dialog>`, via `useFloatingOverlay`), breaking that adjacency, so both inline\n// this as a fallback matching the shipped Sass defaults instead of the generic, uncapped `.menu`\n// fallback (`max-height: none`). A consumer who customized either Sass variable needs to\n// re-override `--menu-max-height`/`--menu-overflow-y` on `.menu` directly, since the\n// sibling-selector auto-application can no longer reach a portaled panel.\nexport const COMBOBOX_MENU_OVERLAY_STYLE: CSSProperties = {\n  '--menu-max-height': '320px',\n  '--menu-overflow-y': 'auto'\n} as CSSProperties\n"],"mappings":"AAsBA,MAAM,EAAmD,CACvD,IAAK,MACL,YAAa,YACb,UAAW,UACX,OAAQ,SACR,eAAgB,eAChB,aAAc,aACd,KAAM,OACN,aAAc,WACd,WAAY,cACZ,MAAO,QACP,cAAe,YACf,YAAa,cACf,EAIa,EAAmB,GAAwC,EAAe,GAM1E,GACX,EACA,IACW,CACX,GAAI,CAAC,GAAgB,IAAiB,SAAU,OAAO,EACvD,IAAM,EAAQ,EAAU,MAAM,GAAG,CAAC,CAAC,GACnC,OAAO,EAAQ,GAAG,EAAa,GAAG,IAAU,CAC9C,EAea,GACX,EACA,EACA,KAC4B,CAC5B,UAAW,CACT,SAAU,GAAc,SACxB,IAAK,GAAc,IACnB,KAAM,GAAc,IACtB,EACA,cAAe,EAAqB,EAAoB,CAAiB,CAC3E,GAWa,EAA6C,CACxD,oBAAqB,QACrB,oBAAqB,MACvB"}

package/dist/chunks/overlayPlacement-CIsLpycT.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from "react";
+import "react-aria";
+//#region src/utils/overlayPlacement.d.ts
+type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+//#endregion
+export { Placement as t };
+//# sourceMappingURL=overlayPlacement-CIsLpycT.d.ts.map

package/dist/chunks/pagination-BkOquk-x.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{d as e,g as t,p as n}from"./slot-CNhFZdHF.js";import{t as r}from"./polymorphic-BhGNZQja.js";import{t as i}from"./useButtonSemantics-CILM_lhi.js";import{t as a}from"./focusRedirect-BrvK3U_o.js";import{t as o}from"./iconSlot-BNu2MrFI.js";import s,{forwardRef as c,useEffect as l,useRef as u}from"react";import d from"classnames";import{mergeProps as f}from"react-aria";function p({prevDisabled:e,nextDisabled:t,onPrev:n,onNext:r}){let i=u(null),o=u(null),s=u(null);return l(()=>{let n=s.current;s.current=null,n&&(n.from===`prev`&&e?a(o.current,n.viaPointer):n.from===`next`&&t&&a(i.current,n.viaPointer))}),{prevRef:i,nextRef:o,handlePrevClick:e=>{s.current={from:`prev`,viaPointer:e.detail!==0},n()},handleNextClick:e=>{s.current={from:`next`,viaPointer:e.detail!==0},r()}}}function m({active:r,children:a,className:o,component:c,disabled:l,href:u,onClick:p,...m},h){let g=d(`pagination-item`,{active:r,disabled:l},o),_=n(c,u,`button`),v=t(_,u,m),y=e(v,u,`PaginationItem`),b=_,x=_,S=e=>{if(v===`anchor`&&l){e.preventDefault();return}p?.(e)},C=v!==`button`&&v!==`anchor`&&!!p,{buttonProps:w,forkedRef:T}=i(h,{disabled:l,onClick:p}),E=r?{"aria-current":`page`}:{};return s.createElement(`li`,{className:g},v===`button`?s.createElement(b,{...m,className:`pagination-link`,type:`button`,disabled:l,onClick:S,...E,ref:h},a):v===`anchor`?s.createElement(x,{...m,className:`pagination-link`,...y,onClick:S,...l&&{"aria-disabled":!0,tabIndex:-1},...E,ref:h},a):s.createElement(_,{className:`pagination-link`,...f(m,C?w:{}),...!C&&{onClick:S},...y,...E,ref:C?T:h},a))}const h=r(m,`PaginationItem`);function g(e,t,n){let r=Math.max(1,n);if(t<=r)return Array.from({length:t},(e,t)=>t+1);let i=Math.floor(r/2),a=Math.max(1,e-i),o=Math.min(t,a+r-1);o-a<r-1&&(a=Math.max(1,o-r+1));let s=[];a>1&&(s.push(1),a>2&&s.push(`...`));for(let e=a;e<=o;e++)s.push(e);return o<t&&(o<t-1&&s.push(`...`),s.push(t)),s}const _=c(({activePage:e=1,align:t,"aria-label":n=`Pagination`,children:r,className:i,maxVisiblePages:a=5,nextIcon:c,nextLabel:l=`Next`,onActivePageChange:u,pages:f,previousIcon:m,previousLabel:_=`Previous`,showPageNumbers:v=!0,showPrevNext:y=!0,size:b,...x},S)=>{let C=d(`pagination`,b,{[`justify-content-${t}`]:t},i),w=f?Math.min(Math.max(e,1),f):e,T=f?w<=1:!1,E=f?w>=f:!1,{prevRef:D,nextRef:O,handlePrevClick:k,handleNextClick:A}=p({prevDisabled:T,nextDisabled:E,onPrev:()=>u&&u(w-1),onNext:()=>u&&u(w+1)}),j=f?s.createElement(s.Fragment,null,y&&s.createElement(h,{ref:D,disabled:T,onClick:k,"aria-label":_},s.createElement(o,{icon:`previous`,override:m,className:`directional-icon`})),v&&g(w,f,a).map((e,t)=>e===`...`?s.createElement(h,{key:`ellipsis-${t}`,disabled:!0,component:`span`,"aria-hidden":`true`},`…`):s.createElement(h,{key:e,active:e===w,onClick:()=>u&&u(e)},e)),y&&s.createElement(h,{ref:O,disabled:E,onClick:A,"aria-label":l},s.createElement(o,{icon:`next`,override:c,className:`directional-icon`}))):null;return s.createElement(`nav`,{"aria-label":n,ref:S,...x},s.createElement(`ul`,{className:C},j??r))});_.displayName=`Pagination`;export{h as n,p as r,_ as t};
+//# sourceMappingURL=pagination-BkOquk-x.js.map

package/dist/chunks/pagination-BkOquk-x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-BkOquk-x.js","names":[],"sources":["../../src/hooks/usePagination.ts","../../src/components/pagination/PaginationItem.tsx","../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { MouseEvent, RefObject, useEffect, useRef } from 'react'\n\nimport { focusRedirect } from '../utils/focusRedirect'\n\nexport interface UsePaginationOptions {\n  /**\n   * Whether the Previous control is currently disabled.\n   */\n  prevDisabled: boolean\n  /**\n   * Whether the Next control is currently disabled.\n   */\n  nextDisabled: boolean\n  /**\n   * Called when Previous is clicked, before the state change that may disable it.\n   */\n  onPrev: () => void\n  /**\n   * Called when Next is clicked, before the state change that may disable it.\n   */\n  onNext: () => void\n}\n\nexport interface UsePaginationResult<T extends HTMLElement = HTMLButtonElement> {\n  // `RefObject<T | null>`, not `RefObject<T>`: these come from `useRef<T>(null)`, so `.current`\n  // really is null before mount (and whenever the control isn't rendered — a hand-composed\n  // pagination may omit Prev/Next entirely). Declaring the non-null form let a consumer write\n  // `prevRef.current.focus()` with no type error and crash at runtime.\n  prevRef: RefObject<T | null>\n  nextRef: RefObject<T | null>\n  handlePrevClick: (event: MouseEvent<T>) => void\n  handleNextClick: (event: MouseEvent<T>) => void\n}\n\ninterface Pending {\n  from: 'prev' | 'next'\n  // A `click` fired by real pointer activation has `detail >= 1`; one fired by keyboard\n  // activation (Enter/Space on a focused button) has `detail === 0`.\n  viaPointer: boolean\n}\n\n// Native `disabled` buttons are blurred by the browser the instant they're disabled. Clicking a\n// Prev/Next control into the first/last page disables that very control, silently dropping focus\n// to `<body>`. Wire `handlePrevClick`/`handleNextClick` up as each control's `onClick` — they call\n// `onPrev`/`onNext` and redirect focus to the still-enabled sibling in one step, so callers don't\n// hand-wrap their own click handler around a separate mark-then-focus call.\n// Works for `Pagination`'s built-in smart mode and for hand-composed Prev/Next controls alike —\n// pass the element type of whatever you're attaching the refs to (`PaginationItem` defaults to\n// an `HTMLButtonElement`, but renders an `HTMLAnchorElement` when given `href` or `component`).\nexport function usePagination<T extends HTMLElement = HTMLButtonElement>({\n  prevDisabled,\n  nextDisabled,\n  onPrev,\n  onNext\n}: UsePaginationOptions): UsePaginationResult<T> {\n  const prevRef = useRef<T>(null)\n  const nextRef = useRef<T>(null)\n  const pending = useRef<Pending | null>(null)\n\n  // Deliberately no dependency array: this must run after every render, not just ones where\n  // prevDisabled/nextDisabled change value. A Prev/Next click that doesn't cross a boundary\n  // (e.g. moving between two enabled middle pages) leaves both booleans unchanged, so a\n  // dependency-gated effect would skip and leave `pending` stale — a later, unrelated render\n  // that does flip one of the booleans (e.g. jumping straight to the first/last page via a\n  // page-number click) would then wrongly consume that stale mark and redirect focus.\n  useEffect(() => {\n    const from = pending.current\n    pending.current = null\n    if (!from) return\n    if (from.from === 'prev' && prevDisabled) {\n      focusRedirect(nextRef.current, from.viaPointer)\n    } else if (from.from === 'next' && nextDisabled) {\n      focusRedirect(prevRef.current, from.viaPointer)\n    }\n  })\n\n  return {\n    prevRef,\n    nextRef,\n    handlePrevClick: (event) => {\n      pending.current = { from: 'prev', viaPointer: event.detail !== 0 }\n      onPrev()\n    },\n    handleNextClick: (event) => {\n      pending.current = { from: 'next', viaPointer: event.detail !== 0 }\n      onNext()\n    }\n  }\n}\n","import React, {\n  ElementType,\n  ForwardRefRenderFunction,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  Ref\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps } from 'react-aria'\n\nimport { useButtonSemantics } from '../../hooks'\nimport { hrefProps, linkElement, resolveLinkKind } from '../../utils/elementKind'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype PaginationItemOwnProps<C extends ElementType> = {\n  /**\n   * Toggle the active state for the component.\n   */\n  active?: boolean\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * The href attribute. When provided the item renders as an `<a>` tag; otherwise as a `<button>`.\n   */\n  href?: string\n}\n\nexport type PaginationItemProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n  C,\n  PaginationItemOwnProps<C>\n>\n\ntype PaginationItemComponent = (<C extends ElementType = 'button'>(\n  props: PaginationItemProps<C> & {\n    ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>\n  }\n) => ReactElement | null) & { displayName?: string }\n\nfunction PaginationItemRender<C extends ElementType = 'button'>(\n  {\n    active,\n    children,\n    className,\n    component,\n    disabled,\n    href,\n    onClick,\n    ...rest\n  }: PaginationItemProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const _className = classNames(\n    'pagination-item',\n    {\n      active,\n      disabled\n    },\n    className\n  )\n\n  // The active page keeps whatever element it would render anyway (`<button>`, or `<a>` when\n  // given `href`) rather than collapsing to a `<span>`. Swapping the tag on activation made React\n  // unmount the focused control and mount a different element in its place, so a keyboard user who\n  // activated a page was dropped to `<body>` and had to tab in from the top of the document again\n  // (WCAG 2.4.3). The `<span>` wasn't even inert: `Pagination`'s smart mode passes an `onClick`,\n  // so `useButtonSemantics` gave it `role=\"button\"` and `tabIndex={0}` — a synthetic button,\n  // strictly worse than the real one it replaced. Styling is unaffected either way: chassis-css\n  // matches `.pagination-link { &.active, .active > & }`, and `active` still lands on the `<li>`.\n  const Component = linkElement(component, href, 'button')\n  // The kind rather than the tag, counting a router link with `href` or `to` as an anchor: under `asChild`, `Component` is a `Slot` standing in for the\n  // caller's element, and a slotted `<a>` needs what `component=\"a\"` gets. Each branch below\n  // renders `Component` typed as its tag, which is the tag itself or that `Slot`.\n  const kind = resolveLinkKind(Component, href, rest)\n  // A router link as `component` takes `href` too; it used to get none.\n  const linkProps = hrefProps(kind, href, 'PaginationItem')\n  const NativeButton = Component as 'button'\n  const Anchor = Component as 'a'\n\n  // `<a>` has no real `disabled` attribute, so a disabled anchor pagination item still fires\n  // click (and still navigates) unless it's blocked here, same guard `Button` applies.\n  const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n    if (kind === 'anchor' && disabled) {\n      event.preventDefault()\n      return\n    }\n    onClick?.(event as never)\n  }\n\n  // A custom `component`/default (non-`button`/`a`) branch gets a raw `onClick` with no keyboard\n  // semantics otherwise — the same gap `Link` fills via `useButtonSemantics`.\n  const needsButtonSemantics = kind !== 'button' && kind !== 'anchor' && !!onClick\n  const { buttonProps, forkedRef } = useButtonSemantics<HTMLElement>(ref as Ref<HTMLElement>, {\n    disabled,\n    onClick: onClick as MouseEventHandler<HTMLElement> | undefined\n  })\n\n  // `aria-current=\"page\"` goes on the control itself, not the wrapping `<li>` — that's where the\n  // WAI-ARIA pagination pattern puts it, and it's what a screen reader conveys when focus lands on\n  // the control. On the `<li>` it was attached to a presentational list item nothing focuses.\n  const currentProps = active ? { 'aria-current': 'page' as const } : {}\n\n  return (\n    <li className={_className}>\n      {kind === 'button' ? (\n        <NativeButton\n          {...(rest as Record<string, unknown>)}\n          className=\"pagination-link\"\n          type=\"button\"\n          disabled={disabled}\n          onClick={handleClick}\n          {...currentProps}\n          ref={ref as Ref<HTMLButtonElement>}\n        >\n          {children}\n        </NativeButton>\n      ) : kind === 'anchor' ? (\n        <Anchor\n          {...(rest as Record<string, unknown>)}\n          className=\"pagination-link\"\n          {...linkProps}\n          onClick={handleClick}\n          {...(disabled && { 'aria-disabled': true, tabIndex: -1 })}\n          {...currentProps}\n          ref={ref as Ref<HTMLAnchorElement>}\n        >\n          {children}\n        </Anchor>\n      ) : (\n        <Component\n          className=\"pagination-link\"\n          {...(mergeProps(rest, needsButtonSemantics ? buttonProps : {}) as Record<\n            string,\n            unknown\n          >)}\n          {...(!needsButtonSemantics && { onClick: handleClick })}\n          {...linkProps}\n          {...currentProps}\n          ref={needsButtonSemantics ? forkedRef : ref}\n        >\n          {children}\n        </Component>\n      )}\n    </li>\n  )\n}\n\nexport const PaginationItem = createPolymorphicComponent<PaginationItemComponent>(\n  PaginationItemRender as ForwardRefRenderFunction<Element, PaginationItemProps<ElementType>>,\n  'PaginationItem'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport classNames from 'classnames'\n\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from '../../hooks'\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Current active page (1-indexed). Used with `pages` for data-driven mode.\n   */\n  activePage?: number\n  /**\n   * Set the alignment of pagination components.\n   */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Accessible label for the pagination `<nav>` landmark. Override for non-English locales,\n   * or when multiple paginators appear on the same page.\n   *\n   * @default 'Pagination'\n   */\n  'aria-label'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Maximum number of visible page buttons (default: 5). Flanking pages are collapsed to ellipsis.\n   */\n  maxVisiblePages?: number\n  /**\n   * The \"next page\" control's icon in smart pagination mode: an icon name, or an element of your\n   * own icon set. Defaults to `IconProvider`'s `next` icon.\n   */\n  nextIcon?: IconValue\n  /**\n   * Accessible label for the \"next page\" control, used in smart pagination mode. Override for\n   * non-English locales.\n   *\n   * @default 'Next'\n   */\n  nextLabel?: string\n  /**\n   * Callback fired when the active page changes.\n   */\n  onActivePageChange?: (page: number) => void\n  /**\n   * Total number of pages. When provided alongside `activePage` and `onActivePageChange`,\n   * the component renders a fully-controlled smart paginator with Prev/Next and ellipsis.\n   */\n  pages?: number\n  /**\n   * The \"previous page\" control's icon in smart pagination mode: an icon name, or an element of\n   * your own icon set. Defaults to `IconProvider`'s `previous` icon.\n   */\n  previousIcon?: IconValue\n  /**\n   * Accessible label for the \"previous page\" control, used in smart pagination mode. Override\n   * for non-English locales.\n   *\n   * @default 'Previous'\n   */\n  previousLabel?: string\n  /**\n   * Show the numbered page buttons in smart pagination mode. Set `false` alongside\n   * `showPrevNext` to build a Prev/Next-only paginator.\n   *\n   * @default true\n   */\n  showPageNumbers?: boolean\n  /**\n   * Show the Prev/Next controls in smart pagination mode. Set `false` alongside\n   * `showPageNumbers` to build a page-numbers-only paginator.\n   *\n   * @default true\n   */\n  showPrevNext?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n}\n\nfunction getPageRange(activePage: number, pages: number, maxVisible: number): (number | '...')[] {\n  const safeMaxVisible = Math.max(1, maxVisible)\n\n  if (pages <= safeMaxVisible) {\n    return Array.from({ length: pages }, (_, i) => i + 1)\n  }\n\n  const half = Math.floor(safeMaxVisible / 2)\n  let start = Math.max(1, activePage - half)\n  const end = Math.min(pages, start + safeMaxVisible - 1)\n\n  if (end - start < safeMaxVisible - 1) {\n    start = Math.max(1, end - safeMaxVisible + 1)\n  }\n\n  const result: (number | '...')[] = []\n\n  if (start > 1) {\n    result.push(1)\n    if (start > 2) result.push('...')\n  }\n\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n\n  if (end < pages) {\n    if (end < pages - 1) result.push('...')\n    result.push(pages)\n  }\n\n  return result\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      activePage = 1,\n      align,\n      'aria-label': ariaLabel = 'Pagination',\n      children,\n      className,\n      maxVisiblePages = 5,\n      nextIcon,\n      nextLabel = 'Next',\n      onActivePageChange,\n      pages,\n      previousIcon,\n      previousLabel = 'Previous',\n      showPageNumbers = true,\n      showPrevNext = true,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const _className = classNames(\n      'pagination',\n      size,\n      {\n        [`justify-content-${align}`]: align\n      },\n      className\n    )\n\n    const clampedActivePage = pages ? Math.min(Math.max(activePage, 1), pages) : activePage\n    const prevDisabled = pages ? clampedActivePage <= 1 : false\n    const nextDisabled = pages ? clampedActivePage >= pages : false\n\n    const { prevRef, nextRef, handlePrevClick, handleNextClick } = usePagination({\n      prevDisabled,\n      nextDisabled,\n      onPrev: () => onActivePageChange && onActivePageChange(clampedActivePage - 1),\n      onNext: () => onActivePageChange && onActivePageChange(clampedActivePage + 1)\n    })\n\n    const smartContent = pages ? (\n      <>\n        {showPrevNext && (\n          <PaginationItem\n            ref={prevRef}\n            disabled={prevDisabled}\n            onClick={handlePrevClick}\n            aria-label={previousLabel}\n          >\n            <IconSlot icon=\"previous\" override={previousIcon} className=\"directional-icon\" />\n          </PaginationItem>\n        )}\n        {showPageNumbers &&\n          getPageRange(clampedActivePage, pages, maxVisiblePages).map((page, idx) =>\n            page === '...' ? (\n              // eslint-disable-next-line react/no-array-index-key\n              <PaginationItem key={`ellipsis-${idx}`} disabled component=\"span\" aria-hidden=\"true\">\n                &hellip;\n              </PaginationItem>\n            ) : (\n              <PaginationItem\n                key={page}\n                active={page === clampedActivePage}\n                onClick={() => onActivePageChange && onActivePageChange(page)}\n              >\n                {page}\n              </PaginationItem>\n            )\n          )}\n        {showPrevNext && (\n          <PaginationItem\n            ref={nextRef}\n            disabled={nextDisabled}\n            onClick={handleNextClick}\n            aria-label={nextLabel}\n          >\n            <IconSlot icon=\"next\" override={nextIcon} className=\"directional-icon\" />\n          </PaginationItem>\n        )}\n      </>\n    ) : null\n\n    return (\n      <nav aria-label={ariaLabel} ref={ref} {...rest}>\n        <ul className={_className}>{smartContent ?? children}</ul>\n      </nav>\n    )\n  }\n)\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}

package/dist/chunks/password-strength-DDK8pHRq.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import e,{Fragment as t,forwardRef as n,useEffect as r,useMemo as i,useRef as a}from"react";import o from"classnames";import{useMeter as s}from"react-aria";const c=[`weak`,`fair`,`good`,`strong`],l={extraLength:1,lowercase:1,longPassword:1,minLength:1,multipleSpecial:1,numbers:1,special:1,uppercase:1},u={fair:`Fair`,good:`Good`,strong:`Strong`,weak:`Weak`},d=[2,4,6],f=/[!"#$%&()*,.:<>?@^{|}]/,p=/[!"#$%&()*,.:<>?@^{|}].*[!"#$%&()*,.:<>?@^{|}]/,m=(e,{minLength:t,scorer:n,weights:r})=>{if(!e)return 0;if(n)return n(e);let i=0;return e.length>=t&&(i+=r.minLength),e.length>=t+4&&(i+=r.extraLength),/[a-z]/.test(e)&&(i+=r.lowercase),/[A-Z]/.test(e)&&(i+=r.uppercase),/\d/.test(e)&&(i+=r.numbers),f.test(e)&&(i+=r.special),p.test(e)&&(i+=r.multipleSpecial),e.length>=16&&(i+=r.longPassword),i},h=(e,t)=>{if(e===0)return null;let[n,r,i]=t;return e<=n?`weak`:e<=r?`fair`:e<=i?`good`:`strong`},g=n(function({"aria-label":n=`Password strength`,className:f,id:p,maxScore:g,messages:_,minLength:v=8,onStrengthChange:y,scorer:b,showText:x=!0,thresholds:S=d,value:C,variant:w=`segmented`,weights:T,...E},D){let O=i(()=>({...l,...T}),[T]),k=i(()=>({...u,..._}),[_]),A=i(()=>m(C,{minLength:v,scorer:b,weights:O}),[C,v,b,O]),j=i(()=>h(A,S),[A,S]),M=i(()=>g??Object.values(O).reduce((e,t)=>e+t,0),[g,O]),N=a(void 0);r(()=>{N.current!==j&&(N.current=j,y?.({score:A,strength:j}))},[j,A,y]);let{meterProps:P}=s({"aria-label":n,maxValue:M,minValue:0,value:A,valueLabel:j?k[j]:void 0}),F=j?c.indexOf(j):-1;return e.createElement(t,null,e.createElement(`div`,{...P,className:o(w===`bar`?`strength-bar`:`strength`,f),"data-cx-strength":j??void 0,id:p,...E,ref:D},w===`segmented`&&c.map((t,n)=>e.createElement(`div`,{className:o(`strength-segment`,{active:n<=F}),key:t}))),x&&e.createElement(`span`,{"aria-live":`polite`,className:`strength-text`,"data-cx-strength":j??void 0},j?k[j]:``))});g.displayName=`PasswordStrength`;export{g as t};
+//# sourceMappingURL=password-strength-DDK8pHRq.js.map

package/dist/chunks/password-strength-DDK8pHRq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength-DDK8pHRq.js","names":[],"sources":["../../src/components/password-strength/strengthScore.ts","../../src/components/password-strength/PasswordStrength.tsx"],"sourcesContent":["export type StrengthLevel = 'weak' | 'fair' | 'good' | 'strong'\n\nexport const STRENGTH_LEVELS: StrengthLevel[] = ['weak', 'fair', 'good', 'strong']\n\nexport interface StrengthWeights {\n  extraLength: number\n  lowercase: number\n  longPassword: number\n  minLength: number\n  multipleSpecial: number\n  numbers: number\n  special: number\n  uppercase: number\n}\n\nexport const defaultWeights: StrengthWeights = {\n  extraLength: 1,\n  lowercase: 1,\n  longPassword: 1,\n  minLength: 1,\n  multipleSpecial: 1,\n  numbers: 1,\n  special: 1,\n  uppercase: 1\n}\n\nexport const defaultMessages: Record<StrengthLevel, string> = {\n  fair: 'Fair',\n  good: 'Good',\n  strong: 'Strong',\n  weak: 'Weak'\n}\n\nexport const defaultThresholds: [number, number, number] = [2, 4, 6]\n\nconst SPECIAL_CHARS = /[!\"#$%&()*,.:<>?@^{|}]/\nconst MULTIPLE_SPECIAL_CHARS = /[!\"#$%&()*,.:<>?@^{|}].*[!\"#$%&()*,.:<>?@^{|}]/\n\ninterface CalculateScoreOptions {\n  minLength: number\n  scorer?: (password: string) => number\n  weights: StrengthWeights\n}\n\n// Ported from chassis-css's vanilla strength.js `_calculateScore` — kept in lockstep with it so\n// a password scores identically whether evaluated by the vanilla JS or this component.\nexport const calculateScore = (\n  password: string,\n  { minLength, scorer, weights }: CalculateScoreOptions\n): number => {\n  if (!password) return 0\n  if (scorer) return scorer(password)\n\n  let score = 0\n\n  if (password.length >= minLength) score += weights.minLength\n  if (password.length >= minLength + 4) score += weights.extraLength\n  if (/[a-z]/.test(password)) score += weights.lowercase\n  if (/[A-Z]/.test(password)) score += weights.uppercase\n  if (/\\d/.test(password)) score += weights.numbers\n  if (SPECIAL_CHARS.test(password)) score += weights.special\n  if (MULTIPLE_SPECIAL_CHARS.test(password)) score += weights.multipleSpecial\n  if (password.length >= 16) score += weights.longPassword\n\n  return score\n}\n\nexport const scoreToStrength = (\n  score: number,\n  thresholds: [number, number, number]\n): StrengthLevel | null => {\n  if (score === 0) return null\n\n  const [weak, fair, good] = thresholds\n  if (score <= weak) return 'weak'\n  if (score <= fair) return 'fair'\n  if (score <= good) return 'good'\n  return 'strong'\n}\n","import React, { forwardRef, Fragment, HTMLAttributes, useEffect, useMemo, useRef } from 'react'\nimport classNames from 'classnames'\nimport { useMeter } from 'react-aria'\n\nimport {\n  calculateScore,\n  defaultMessages,\n  defaultThresholds,\n  defaultWeights,\n  scoreToStrength,\n  STRENGTH_LEVELS,\n  StrengthLevel,\n  StrengthWeights\n} from './strengthScore'\n\nexport interface PasswordStrengthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * An accessible label for the meter. Defaults to `\"Password strength\"`.\n   */\n  'aria-label'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * `id` forwarded to the meter element.\n   */\n  id?: string\n  /**\n   * The maximum possible score, used to compute the meter's `aria-valuemax`. Defaults to the sum\n   * of `weights`' values — set this explicitly when pairing a custom `scorer` whose scale doesn't\n   * match the built-in criteria weights, otherwise `aria-valuenow`/`aria-valuemax` get silently\n   * clamped to the built-in max.\n   */\n  maxScore?: number\n  /**\n   * Minimum password length required to earn the first strength point. Defaults to `8`.\n   */\n  minLength?: number\n  /**\n   * Feedback message shown for each strength level, when `showText` is `true`.\n   */\n  messages?: Partial<Record<StrengthLevel, string>>\n  /**\n   * Callback fired whenever the strength level changes, including once on mount with the\n   * initial `value`'s strength.\n   */\n  onStrengthChange?: (result: { score: number; strength: StrengthLevel | null }) => void\n  /**\n   * Custom scoring function overriding the built-in criteria. Receives the password and returns\n   * a numeric score.\n   */\n  scorer?: (password: string) => number\n  /**\n   * Renders a `.strength-text` element below the meter with the current level's message.\n   * Defaults to `true`.\n   */\n  showText?: boolean\n  /**\n   * Score boundaries `[weak, fair, good]` — scores above the last value are `\"strong\"`. Defaults\n   * to `[2, 4, 6]`.\n   */\n  thresholds?: [number, number, number]\n  /**\n   * The current password value to evaluate.\n   */\n  value: string\n  /**\n   * Render as four discrete segments, or a single growing bar. Defaults to `\"segmented\"`.\n   */\n  variant?: 'bar' | 'segmented'\n  /**\n   * Point values for each scoring criterion. Set a criterion to `0` to disable it. Merged with\n   * the built-in defaults.\n   */\n  weights?: Partial<StrengthWeights>\n}\n\n// The ref goes to the meter, the element the other attributes go to.\nexport const PasswordStrength = forwardRef<HTMLDivElement, PasswordStrengthProps>(\n  function PasswordStrength(\n    {\n      'aria-label': ariaLabel = 'Password strength',\n      className,\n      id,\n      maxScore,\n      messages,\n      minLength = 8,\n      onStrengthChange,\n      scorer,\n      showText = true,\n      thresholds = defaultThresholds,\n      value,\n      variant = 'segmented',\n      weights,\n      ...rest\n    },\n    ref\n  ) {\n    const mergedWeights = useMemo(() => ({ ...defaultWeights, ...weights }), [weights])\n    const mergedMessages = useMemo(() => ({ ...defaultMessages, ...messages }), [messages])\n\n    const score = useMemo(\n      () => calculateScore(value, { minLength, scorer, weights: mergedWeights }),\n      [value, minLength, scorer, mergedWeights]\n    )\n    const strength = useMemo(() => scoreToStrength(score, thresholds), [score, thresholds])\n    const resolvedMaxScore = useMemo(\n      () => maxScore ?? Object.values(mergedWeights).reduce((total, weight) => total + weight, 0),\n      [maxScore, mergedWeights]\n    )\n\n    // Deliberately not initialized to `strength` — that would make the effect below skip firing\n    // for the mount-time value, and a consumer using this to gate e.g. a submit button needs the\n    // real initial state, not just subsequent changes.\n    const previousStrength = useRef<StrengthLevel | null | undefined>(undefined)\n    useEffect(() => {\n      if (previousStrength.current !== strength) {\n        previousStrength.current = strength\n        onStrengthChange?.({ score, strength })\n      }\n    }, [strength, score, onStrengthChange])\n\n    const { meterProps } = useMeter({\n      'aria-label': ariaLabel,\n      maxValue: resolvedMaxScore,\n      minValue: 0,\n      value: score,\n      valueLabel: strength ? mergedMessages[strength] : undefined\n    })\n\n    const strengthIndex = strength ? STRENGTH_LEVELS.indexOf(strength) : -1\n\n    return (\n      <Fragment>\n        <div\n          {...meterProps}\n          className={classNames(variant === 'bar' ? 'strength-bar' : 'strength', className)}\n          data-cx-strength={strength ?? undefined}\n          id={id}\n          {...rest}\n          ref={ref}\n        >\n          {variant === 'segmented' &&\n            STRENGTH_LEVELS.map((level, index) => (\n              <div\n                className={classNames('strength-segment', { active: index <= strengthIndex })}\n                key={level}\n              />\n            ))}\n        </div>\n        {showText && (\n          <span\n            aria-live=\"polite\"\n            className=\"strength-text\"\n            data-cx-strength={strength ?? undefined}\n          >\n            {strength ? mergedMessages[strength] : ''}\n          </span>\n        )}\n      </Fragment>\n    )\n  }\n)\n\nPasswordStrength.displayName = 'PasswordStrength'\n"],"mappings":"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"}

package/dist/chunks/placeholder-BCr83sUn.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{a as e}from"./slot-CNhFZdHF.js";import{t}from"./polymorphic-BhGNZQja.js";import n from"react";import r from"classnames";const i=e=>[e===`start`||e===`end`?`float-${e}`:null,e===`center`?`d-block mx-auto`:null];function a({align:t,alt:a,className:o,color:s,component:c,fluid:l,height:u,rounded:d,src:f,text:p,thumbnail:m,title:h=`Placeholder`,variant:g,width:_,...v},y){let b=h!==!1,x=p===!1?void 0:p??(_!==void 0&&u!==void 0?`${_}x${u}`:void 0),S=x!==void 0,C=[b&&h,S&&x].filter(Boolean).join(`: `)||void 0;if(f||e(c)){let e=c??`img`,s=r({image:l||m,fluid:l,rounded:d,thumbnail:m},i(t),o);return n.createElement(e,{src:f,width:_,height:u,alt:a??C??``,className:s,...v,ref:y})}let w=r(`image`,{context:!!(s||g)},s,g||`bg-evident`,`fg-subtle`,o);return n.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:_,height:u,"aria-label":C,"aria-hidden":!C||void 0,className:w,preserveAspectRatio:`xMidYMid slice`,role:C?`img`:void 0,...v,ref:y},b&&n.createElement(`title`,null,h),S&&n.createElement(`text`,{dy:`.3em`,fill:`currentColor`,textAnchor:`middle`,x:`50%`,y:`50%`},x))}const o=t(a,`Placeholder`);export{o as t};
+//# sourceMappingURL=placeholder-BCr83sUn.js.map

package/dist/chunks/placeholder-BCr83sUn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder-BCr83sUn.js","names":[],"sources":["../../src/components/placeholder/Placeholder.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ContextStyle } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { isSlot } from '../../utils/slot'\n\ntype PlaceholderAlign = 'start' | 'center' | 'end'\n\ntype PlaceholderOwnProps<C extends ElementType> = {\n  /**\n   * Set the horizontal alignment. Only applies when `src` is set.\n   */\n  align?: PlaceholderAlign\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the generated placeholder graphic to one of Chassis context colors. Has no\n   * effect when `src` is set.\n   */\n  color?: ContextColor\n  /**\n   * Sets the variant of the generated placeholder graphic to one of Chassis context styles. Has no\n   * effect when `src` is set.\n   */\n  variant?: Exclude<ContextStyle, 'basic' | 'outline'>\n  /**\n   * Component used for the root node when `src` is set. Either a string to use an HTML element\n   * or a component — e.g. a framework's own `Image` component. Its own props (`src`, `fill`,\n   * `priority`, etc.) are type-checked at the call site once passed here. With `asChild`, the\n   * child element is the image and carries its own `src`.\n   */\n  component?: C\n  /**\n   * Make the image responsive, so it never grows larger than its parent. Only applies when `src`\n   * is set.\n   */\n  fluid?: boolean\n  /**\n   * Placeholder height.\n   */\n  height?: number | string\n  /**\n   * Give the image a rounded border-radius. Only applies when `src` is set.\n   */\n  rounded?: boolean\n  /**\n   * Renders a real image instead of the generated placeholder graphic, e.g. a default asset or a\n   * `placehold.co` URL.\n   */\n  src?: string\n  /**\n   * Text shown in the generated placeholder graphic. Defaults to `{width}x{height}`. Pass `false`\n   * to hide it. Has no effect when `src` is set.\n   */\n  text?: string | false\n  /**\n   * Give the image a thumbnail appearance (padding, background, border, box-shadow). Only\n   * applies when `src` is set.\n   */\n  thumbnail?: boolean\n  /**\n   * Accessible title for the generated placeholder graphic, rendered as an SVG `<title>`. Pass\n   * `false` to hide it. Has no effect when `src` is set.\n   *\n   * @default 'Placeholder'\n   */\n  title?: string | false\n  /**\n   * Placeholder width.\n   */\n  width?: number | string\n}\n\nexport type PlaceholderProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n  C,\n  PlaceholderOwnProps<C>\n>\n\ntype PlaceholderComponent = (<C extends ElementType = 'img'>(\n  props: PlaceholderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nconst alignClassNames = (align: PlaceholderAlign | undefined) => [\n  align === 'start' || align === 'end' ? `float-${align}` : null,\n  align === 'center' ? 'd-block mx-auto' : null\n]\n\nfunction PlaceholderRender<C extends ElementType = 'img'>(\n  {\n    align,\n    alt,\n    className,\n    color,\n    component,\n    fluid,\n    height,\n    rounded,\n    src,\n    text,\n    thumbnail,\n    title = 'Placeholder',\n    variant,\n    width,\n    ...rest\n  }: PlaceholderProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const showTitle = title !== false\n  const displayText =\n    text === false\n      ? undefined\n      : (text ?? (width !== undefined && height !== undefined ? `${width}x${height}` : undefined))\n  const showText = displayText !== undefined\n  const label =\n    [showTitle && title, showText && displayText].filter(Boolean).join(': ') || undefined\n\n  // Under `asChild` the caller's element is the image and holds the `src`, so there is none here\n  // to choose the branch by.\n  if (src || isSlot(component)) {\n    const Component = component ?? 'img'\n    const _className = classNames(\n      { image: fluid || thumbnail, fluid, rounded, thumbnail },\n      alignClassNames(align),\n      className\n    )\n\n    return (\n      <Component\n        src={src}\n        width={width}\n        height={height}\n        alt={alt ?? label ?? ''}\n        className={_className}\n        {...rest}\n        ref={ref}\n      />\n    )\n  }\n\n  const _className = classNames(\n    'image',\n    { context: Boolean(color || variant) },\n    color,\n    variant ? variant : 'bg-evident',\n    'fg-subtle',\n    className\n  )\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={_className}\n      preserveAspectRatio=\"xMidYMid slice\"\n      role={label ? 'img' : undefined}\n      {...rest}\n      ref={ref as PolymorphicRef<'svg'>}\n    >\n      {showTitle && <title>{title}</title>}\n      {showText && (\n        <text dy=\".3em\" fill=\"currentColor\" textAnchor=\"middle\" x=\"50%\" y=\"50%\">\n          {displayText}\n        </text>\n      )}\n    </svg>\n  )\n}\n\nexport const Placeholder = createPolymorphicComponent<PlaceholderComponent>(\n  PlaceholderRender as ForwardRefRenderFunction<Element, PlaceholderProps<ElementType>>,\n  'Placeholder'\n)\n"],"mappings":"gKAyFA,MAAM,EAAmB,GAAwC,CAC/D,IAAU,SAAW,IAAU,MAAQ,SAAS,IAAU,KAC1D,IAAU,SAAW,kBAAoB,IAC3C,EAEA,SAAS,EACP,CACE,QACA,MACA,YACA,QACA,YACA,QACA,SACA,UACA,MACA,OACA,YACA,QAAQ,cACR,UACA,QACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,IAAU,GACtB,EACJ,IAAS,GACL,IAAA,GACC,IAAS,IAAU,IAAA,IAAa,IAAW,IAAA,GAAY,GAAG,EAAM,GAAG,IAAW,IAAA,IAC/E,EAAW,IAAgB,IAAA,GAC3B,EACJ,CAAC,GAAa,EAAO,GAAY,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,IAAI,GAAK,IAAA,GAI9E,GAAI,GAAO,EAAO,CAAS,EAAG,CAC5B,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,CAAE,MAAO,GAAS,EAAW,QAAO,UAAS,WAAU,EACvD,EAAgB,CAAK,EACrB,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CACO,MACE,QACC,SACR,IAAK,GAAO,GAAS,GACrB,UAAW,EACX,GAAI,EACC,KACN,CAAA,CAEL,CAEA,IAAM,EAAa,EACjB,QACA,CAAE,QAAS,GAAQ,GAAS,EAAS,EACrC,EACA,GAAoB,aACpB,YACA,CACF,EAEA,OACE,EAAA,cAAC,MAAD,CACE,MAAM,6BACC,QACC,SACR,aAAY,EACZ,cAAa,IAAQ,IAAA,GACrB,UAAW,EACX,oBAAoB,iBACpB,KAAM,EAAQ,MAAQ,IAAA,GACtB,GAAI,EACC,KAQF,EANF,GAAa,EAAA,cAAC,QAAA,KAAO,CAAa,EAClC,GACC,EAAA,cAAC,OAAD,CAAM,GAAG,OAAO,KAAK,eAAe,WAAW,SAAS,EAAE,MAAM,EAAE,KAE5D,EADH,CACG,CAEL,CAET,CAEA,MAAa,EAAc,EACzB,EACA,aACF"}

package/dist/chunks/polymorphic-BhGNZQja.js

@@ -0,0 +1,2 @@
+import{n as e,r as t,t as n,v as r}from"./slot-CNhFZdHF.js";import{createElement as i,forwardRef as a}from"react";function o(o,s){let c=a(({asChild:a,...c},l)=>{let u=a?t(c.children,s):null;return u?(r(c.component!==void 0,`${s}: both \`asChild\` and \`component\` were passed; \`asChild\` wins and \`component\` is ignored.`),i(n,{value:u},o({...c,component:e(u),children:u.props.children},l))):o(c,l)});return c.displayName=s,c}export{o as t};
+//# sourceMappingURL=polymorphic-BhGNZQja.js.map

package/dist/chunks/polymorphic-BhGNZQja.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic-BhGNZQja.js","names":[],"sources":["../../src/utils/polymorphic.ts"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  createElement,\n  ElementType,\n  ForwardRefRenderFunction,\n  forwardRef,\n  Ref\n} from 'react'\n\nimport { devWarning } from './devWarning'\nimport { getSlot, getSlotChild, SlotProvider } from './slot'\n\n// Ref type inferred from a polymorphic component's currently-selected `component` element type.\nexport type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref']\n\n/**\n * Ref type for a polymorphic component that can also pick its element from a prop *other* than\n * `component` — `Button`, `Chip`, `Avatar`, `NavbarBrand` and `PaginationItem` all render an\n * `<a>` when given `href`, and `PaginationItem` a `<span>` when `active`, none of which moves `C`\n * off its default. A plain `PolymorphicRef<C>` describes only the `component` branch, so a caller\n * holding a ref for the element that actually gets rendered (`<Button href=\"/x\" ref={anchorRef}>`)\n * got a spurious type error while the runtime happily populated it.\n *\n * `Ref` over the *union* rather than a union of `Ref`s is what makes a\n * `createRef<HTMLButtonElement | HTMLAnchorElement>()` assignable here: `RefObject` is invariant\n * in its type argument, so `RefObject<A | B>` satisfies `Ref<A | B>` but neither `Ref<A>` nor\n * `Ref<B>` on its own.\n */\nexport type PolymorphicRefWithFallback<C extends ElementType, Fallback extends HTMLElement> =\n  PolymorphicRef<C> | Ref<Fallback>\n\n/**\n * The `asChild` prop every polymorphic component accepts alongside `component` — see\n * `createPolymorphicComponent` below for how it's implemented once for all of them.\n */\nexport interface AsChildProps {\n  /**\n   * Render the single child element in place of this component's own element, with this\n   * component's classes, props and ref merged onto it: `<Button asChild><Link href=\"/login\">Log\n   * in</Link></Button>`. The alternative to `component` for React Server Components — an element\n   * can be passed from the server to this package's client components, a component reference\n   * (`component={Link}`) can't.\n   */\n  asChild?: boolean\n}\n\n/**\n * Props for a polymorphic component: `OwnProps` (which must declare `component?: C`) plus\n * whatever props `C` itself accepts, minus any name already claimed by `OwnProps` so the two\n * don't conflict. Lets consumers swap `component` for e.g. a framework's `Image` and get full\n * type-checking/autocomplete for that component's own props at the call site.\n */\nexport type PolymorphicComponentProps<C extends ElementType, OwnProps extends object> = OwnProps &\n  AsChildProps &\n  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | keyof AsChildProps>\n\n/**\n * Wraps a polymorphic component's render function in `forwardRef` and stamps `displayName` — the\n * two-step wiring every polymorphic component in this library repeats identically. `T` is the\n * fully generic component type (e.g. `ButtonComponent`) that `forwardRef`'s own return type can't\n * express, since `forwardRef` only accepts a non-generic render function — the caller still casts\n * the render function to a concrete `Element`-typed instance before passing it in here.\n *\n * Also implements `asChild` for every polymorphic component at once (#23): the render function\n * gets a `Slot` as its `component` and the child element's own children, so it computes its\n * classes, props and ref as it would for `component` — the `Slot` then clones the caller's child\n * element with all of that merged on (see `./slot`). No render function needs to know `asChild`\n * exists. One that treats elements differently (`disabled` on a `<button>` versus an `<a>`) asks\n * `resolveElementKind(Component)`, which answers for a tag and for a `Slot` alike.\n */\nexport function createPolymorphicComponent<T>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  render: ForwardRefRenderFunction<Element, any>,\n  displayName: string\n): T {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const Component = forwardRef<Element, any>(({ asChild, ...props }, ref) => {\n    const child = asChild ? getSlotChild(props.children, displayName) : null\n    if (!child) return render(props, ref)\n\n    devWarning(\n      props.component !== undefined,\n      `${displayName}: both \\`asChild\\` and \\`component\\` were passed; \\`asChild\\` wins and ` +\n        `\\`component\\` is ignored.`\n    )\n\n    return createElement(\n      SlotProvider,\n      { value: child },\n      render(\n        {\n          ...props,\n          component: getSlot(child),\n          children: (child.props as PropsWithChildren).children\n        },\n        ref\n      )\n    )\n  }) as unknown as T & { displayName?: string }\n  Component.displayName = displayName\n  return Component\n}\n\ntype PropsWithChildren = { children?: unknown }\n"],"mappings":"kHAuEA,SAAgB,EAEd,EACA,EACG,CAEH,IAAM,EAAY,GAA0B,CAAE,UAAS,GAAG,GAAS,IAAQ,CACzE,IAAM,EAAQ,EAAU,EAAa,EAAM,SAAU,CAAW,EAAI,KASpE,OARK,GAEL,EACE,EAAM,YAAc,IAAA,GACpB,GAAG,EAAY,iGAEjB,EAEO,EACL,EACA,CAAE,MAAO,CAAM,EACf,EACE,CACE,GAAG,EACH,UAAW,EAAQ,CAAK,EACxB,SAAW,EAAM,MAA4B,QAC/C,EACA,CACF,CACF,GAnBmB,EAAO,EAAO,CAAG,CAoBtC,CAAC,EAED,MADA,GAAU,YAAc,EACjB,CACT"}

package/dist/chunks/polymorphic-CVHbTHSN.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, Ref } from "react";
+//#region src/utils/polymorphic.d.ts
+type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+/**
+ * Ref type for a polymorphic component that can also pick its element from a prop *other* than
+ * `component` — `Button`, `Chip`, `Avatar`, `NavbarBrand` and `PaginationItem` all render an
+ * `<a>` when given `href`, and `PaginationItem` a `<span>` when `active`, none of which moves `C`
+ * off its default. A plain `PolymorphicRef<C>` describes only the `component` branch, so a caller
+ * holding a ref for the element that actually gets rendered (`<Button href="/x" ref={anchorRef}>`)
+ * got a spurious type error while the runtime happily populated it.
+ *
+ * `Ref` over the *union* rather than a union of `Ref`s is what makes a
+ * `createRef<HTMLButtonElement | HTMLAnchorElement>()` assignable here: `RefObject` is invariant
+ * in its type argument, so `RefObject<A | B>` satisfies `Ref<A | B>` but neither `Ref<A>` nor
+ * `Ref<B>` on its own.
+ */
+type PolymorphicRefWithFallback<C extends ElementType, Fallback extends HTMLElement> = PolymorphicRef<C> | Ref<Fallback>;
+/**
+ * The `asChild` prop every polymorphic component accepts alongside `component` — see
+ * `createPolymorphicComponent` below for how it's implemented once for all of them.
+ */
+interface AsChildProps {
+  /**
+   * Render the single child element in place of this component's own element, with this
+   * component's classes, props and ref merged onto it: `<Button asChild><Link href="/login">Log
+   * in</Link></Button>`. The alternative to `component` for React Server Components — an element
+   * can be passed from the server to this package's client components, a component reference
+   * (`component={Link}`) can't.
+   */
+  asChild?: boolean;
+}
+/**
+ * Props for a polymorphic component: `OwnProps` (which must declare `component?: C`) plus
+ * whatever props `C` itself accepts, minus any name already claimed by `OwnProps` so the two
+ * don't conflict. Lets consumers swap `component` for e.g. a framework's `Image` and get full
+ * type-checking/autocomplete for that component's own props at the call site.
+ */
+type PolymorphicComponentProps<C extends ElementType, OwnProps extends object> = OwnProps & AsChildProps & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | keyof AsChildProps>;
+//#endregion
+export { PolymorphicRef as n, PolymorphicRefWithFallback as r, PolymorphicComponentProps as t };
+//# sourceMappingURL=polymorphic-CVHbTHSN.d.ts.map

package/dist/chunks/popover-Bdg8D4sm.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{i as e,o as t}from"./slot-CNhFZdHF.js";import{t as n}from"./useForkedRef-DVEfT-KI.js";import{n as r,t as i}from"./Portal-CgeR1WXV.js";import{t as a}from"./useTransitionState-e5ToY7eX.js";import{n as o,r as s,t as c}from"./useFloatingOverlay-DLIvwx-8.js";import{t as l}from"./useOpenStateProps-DykUbnPJ.js";import{i as u,n as d}from"./overlayPlacement-BtS90IVf.js";import f,{forwardRef as p,useEffect as m,useRef as h}from"react";import g from"classnames";import{mergeProps as _,useDialog as v,useOverlayPosition as y,useOverlayTrigger as b}from"react-aria";import{useOverlayTriggerState as x}from"react-stately";const S=({arrowProps:e,content:t,overlayRef:r,overlayTriggerProps:i,title:a,...o})=>{let s=h(null),l=n(r,s),{dialogProps:u,titleProps:d}=v({},s);return f.createElement(`div`,{..._(i,u,o),ref:l},f.createElement(`div`,{className:`popover-arrow`,...e,style:c(e)}),a&&f.createElement(`div`,{className:`popover-header`,...d},a),f.createElement(`div`,{className:`popover-body`},t))},C=p(function({children:c,className:p,content:_,defaultVisible:v,placement:C=`right`,offset:w=[0,8],onHide:T,onShow:E,onVisibleChange:D,style:O,title:k,visible:A,...j},M){let N=h(null),P=h(null),F=h(null),I=n(M,F),L=e(c,`Popover`),R=x(l({defaultVisible:v,onVisibleChange:D,visible:A},`Popover`)),{triggerProps:{onPress:z,...B},overlayProps:V}=b({type:`dialog`},R,P),H=s({close:R.close,isOpen:R.isOpen,onHide:T,onShow:E,triggerRef:P});m(()=>{if(!R.isOpen)return;let e=e=>{e.key===`Escape`&&R.close()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[R.isOpen,R.close]),m(()=>{if(!R.isOpen)return;let e=e=>{let t=e.target;P.current?.contains(t)||F.current?.contains(t)||R.close()},t=window.setTimeout(()=>{window.addEventListener(`click`,e)});return()=>{window.clearTimeout(t),window.removeEventListener(`click`,e)}},[R.isOpen,R.close]);let{overlayProps:U,arrowProps:W,placement:G}=y({targetRef:P,overlayRef:F,placement:u(C),offset:w[1],crossOffset:w[0],arrowSize:8,arrowRef:N,isOpen:R.isOpen,onClose:null}),K={...O,position:U.style?.position,top:U.style?.top,left:U.style?.left},q=d(C,G),{isMounted:J,phase:Y}=a({in:R.isOpen,mountOnEnter:!0,nodeRef:F,onExited:()=>{let e=P.current;if(!e||!document.contains(e))return;let t=document.activeElement,n=!t||t===document.body,r=!!t&&!!F.current?.contains(t);(n||r)&&e.focus()},unmountOnExit:!0}),X=r();return f.createElement(f.Fragment,null,L?t(L,{onClick:()=>R.toggle()},P,X?B:{...B,"aria-controls":void 0}):c,f.createElement(i,{container:H},J&&f.createElement(S,{className:g(`popover cx-popover-auto`,o(Y),p),"data-cx-placement":q,style:K,overlayTriggerProps:V,overlayRef:I,arrowProps:W,title:k,content:_,...j})))});C.displayName=`Popover`;export{C as t};
+//# sourceMappingURL=popover-Bdg8D4sm.js.map