@lidofinance/lido-app-ui 1.9.0 → 1.11.0

package/dist/cjs/tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type TooltipDataTestId = {\n  root?: string\n  content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n  content: ReactNode\n  position?: TooltipPosition\n  width?: number\n  dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Visual gap between the anchor and the content.\nconst MAIN_GAP = 8\nconst CORNER_GAP = 2\n// Extra buffer used only to decide whether a position still \"fits\" — bigger\n// than the visual gap so a flip triggers before the bubble visually crowds the edge.\nconst FIT_BUFFER = 15\n\ntype Adjustment = {\n  position: TooltipPosition\n  left: number\n  top: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n  `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the content, then picks a position that keeps the\n// bubble inside the viewport — flipping sides when there isn't room, sliding\n// along the cross axis otherwise — and resolves it to fixed-position coordinates.\nconst getAdjustment = (\n  position: TooltipPosition,\n  anchor: DOMRect,\n  contentWidth: number,\n  contentHeight: number,\n): Adjustment => {\n  const viewportWidth = document.documentElement.clientWidth\n  const viewportHeight = document.documentElement.clientHeight\n\n  const spaceTop = anchor.top - VIEWPORT_MARGIN\n  const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n  const spaceLeft = anchor.left - VIEWPORT_MARGIN\n  const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n  let [main, corner] = position.split('-') as [string, string | undefined]\n  const fitGap = corner ? 0 : FIT_BUFFER\n\n  // Side positions: flip to the other side, or fall back to a vertical\n  // position when the content doesn't fit horizontally on either side.\n  if (main === 'left' || main === 'right') {\n    const needed = contentWidth + fitGap\n    if (needed > spaceLeft && needed > spaceRight) {\n      main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n    } else if (main === 'right' && needed > spaceRight) {\n      main = 'left'\n    } else if (main === 'left' && needed > spaceLeft) {\n      main = 'right'\n    }\n  }\n\n  // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n  if (main === 'top' || main === 'bottom') {\n    const space = main === 'top' ? spaceTop : spaceBottom\n    const opposite = main === 'top' ? spaceBottom : spaceTop\n    if (contentHeight + fitGap > space && opposite > space) {\n      main = main === 'top' ? 'bottom' : 'top'\n    }\n  }\n\n  // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n  // join — so mirror to the other side first and only slide as a last resort.\n  if (corner) {\n    const space = corner === 'left' ? spaceLeft : spaceRight\n    const opposite = corner === 'left' ? spaceRight : spaceLeft\n    if (contentWidth > space && opposite > space) {\n      corner = corner === 'left' ? 'right' : 'left'\n    }\n  }\n\n  const resolvedPosition = (\n    corner ? `${main}-${corner}` : main\n  ) as TooltipPosition\n\n  let left: number\n  let top: number\n\n  if (main === 'left' || main === 'right') {\n    const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2\n    top = clampValue(\n      idealTop,\n      VIEWPORT_MARGIN,\n      viewportHeight - VIEWPORT_MARGIN - contentHeight,\n    )\n    left =\n      main === 'right'\n        ? anchor.right + MAIN_GAP\n        : anchor.left - MAIN_GAP - contentWidth\n  } else {\n    const idealLeft = !corner\n      ? anchor.left + anchor.width / 2 - contentWidth / 2\n      : corner === 'left'\n        ? anchor.left - contentWidth - CORNER_GAP\n        : anchor.right + CORNER_GAP\n    left = clampValue(\n      idealLeft,\n      VIEWPORT_MARGIN,\n      viewportWidth - VIEWPORT_MARGIN - contentWidth,\n    )\n    const gap = corner ? CORNER_GAP : MAIN_GAP\n    top =\n      main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap\n  }\n\n  return { position: resolvedPosition, left, top }\n}\n\n// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a\n// transform/filter/backdrop-filter that would otherwise capture position: fixed)\n// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.\nexport const Tooltip = ({\n  content,\n  position = 'top',\n  width = 320,\n  className,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  dataTestId,\n  ...rest\n}: TooltipProps) => {\n  const anchorRef = useRef<HTMLSpanElement>(null)\n  const contentRef = useRef<HTMLSpanElement>(null)\n  const [open, setOpen] = useState(false)\n  const tooltipId = useId()\n\n  const updatePosition = useCallback(() => {\n    const anchor = anchorRef.current\n    const contentEl = contentRef.current\n    if (!anchor || !contentEl) return\n    const {\n      left,\n      top,\n      position: resolved,\n    } = getAdjustment(\n      position,\n      anchor.getBoundingClientRect(),\n      contentEl.offsetWidth,\n      contentEl.offsetHeight,\n    )\n    contentEl.style.left = `${left}px`\n    contentEl.style.top = `${top}px`\n    contentEl.dataset.position = resolved\n    contentEl.dataset.placed = 'true'\n  }, [position])\n\n  useLayoutEffect(() => {\n    if (!open) return\n    updatePosition()\n    window.addEventListener('scroll', updatePosition, true)\n    window.addEventListener('resize', updatePosition)\n    return () => {\n      window.removeEventListener('scroll', updatePosition, true)\n      window.removeEventListener('resize', updatePosition)\n    }\n  }, [open, updatePosition])\n\n  // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.\n  useEffect(() => {\n    if (!open) return\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open])\n\n  const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n    onMouseEnter?.(event)\n    setOpen(true)\n  }\n\n  const handleMouseLeave = (event: MouseEvent<HTMLSpanElement>) => {\n    onMouseLeave?.(event)\n    setOpen(false)\n  }\n\n  const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n    onFocus?.(event)\n    setOpen(true)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLSpanElement>) => {\n    onBlur?.(event)\n    setOpen(false)\n  }\n\n  return (\n    <span\n      ref={anchorRef}\n      className={cn(styles.wrapper, className)}\n      aria-describedby={open ? tooltipId : undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n      {open\n        ? createPortal(\n            <span\n              ref={contentRef}\n              id={tooltipId}\n              role='tooltip'\n              className={styles.content}\n              style={\n                { '--local-tooltip-width': getMaxWidth(width) } as CSSProperties\n              }\n              data-testid={dataTestId?.content}\n            >\n              {content}\n            </span>,\n            document.body,\n          )\n        : null}\n    </span>\n  )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","MAIN_GAP","CORNER_GAP","FIT_BUFFER","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","contentWidth","contentHeight","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","fitGap","needed","space","opposite","resolvedPosition","idealTop","height","idealLeft","gap","Tooltip","_ref","content","className","children","onMouseEnter","onMouseLeave","onFocus","onBlur","dataTestId","rest","anchorRef","useRef","contentRef","open","setOpen","useState","tooltipId","useId","updatePosition","useCallback","current","contentEl","resolved","getBoundingClientRect","offsetWidth","offsetHeight","style","dataset","placed","useLayoutEffect","window","addEventListener","removeEventListener","useEffect","handleKeyDown","event","key","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","_jsxs","ref","cn","styles","wrapper","undefined","root","createPortal","_jsx","id","role","body","displayName"],"mappings":"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"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type TooltipDataTestId = {\n  root?: string\n  content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n  content: ReactNode\n  position?: TooltipPosition\n  width?: number\n  dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Visual gap between the anchor and the content.\nconst MAIN_GAP = 8\nconst CORNER_GAP = 2\n// Extra buffer used only to decide whether a position still \"fits\" — bigger\n// than the visual gap so a flip triggers before the bubble visually crowds the edge.\nconst FIT_BUFFER = 15\n\ntype Adjustment = {\n  position: TooltipPosition\n  left: number\n  top: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n  `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the content, then picks a position that keeps the\n// bubble inside the viewport — flipping sides when there isn't room, sliding\n// along the cross axis otherwise — and resolves it to fixed-position coordinates.\nconst getAdjustment = (\n  position: TooltipPosition,\n  anchor: DOMRect,\n  contentWidth: number,\n  contentHeight: number,\n): Adjustment => {\n  const viewportWidth = document.documentElement.clientWidth\n  const viewportHeight = document.documentElement.clientHeight\n\n  const spaceTop = anchor.top - VIEWPORT_MARGIN\n  const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n  const spaceLeft = anchor.left - VIEWPORT_MARGIN\n  const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n  let [main, corner] = position.split('-') as [string, string | undefined]\n  const fitGap = corner ? 0 : FIT_BUFFER\n\n  // Side positions: flip to the other side, or fall back to a vertical\n  // position when the content doesn't fit horizontally on either side.\n  if (main === 'left' || main === 'right') {\n    const needed = contentWidth + fitGap\n    if (needed > spaceLeft && needed > spaceRight) {\n      main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n    } else if (main === 'right' && needed > spaceRight) {\n      main = 'left'\n    } else if (main === 'left' && needed > spaceLeft) {\n      main = 'right'\n    }\n  }\n\n  // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n  if (main === 'top' || main === 'bottom') {\n    const space = main === 'top' ? spaceTop : spaceBottom\n    const opposite = main === 'top' ? spaceBottom : spaceTop\n    if (contentHeight + fitGap > space && opposite > space) {\n      main = main === 'top' ? 'bottom' : 'top'\n    }\n  }\n\n  // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n  // join — so mirror to the other side first and only slide as a last resort.\n  if (corner) {\n    const space = corner === 'left' ? spaceLeft : spaceRight\n    const opposite = corner === 'left' ? spaceRight : spaceLeft\n    if (contentWidth > space && opposite > space) {\n      corner = corner === 'left' ? 'right' : 'left'\n    }\n  }\n\n  const resolvedPosition = (\n    corner ? `${main}-${corner}` : main\n  ) as TooltipPosition\n\n  let left: number\n  let top: number\n\n  if (main === 'left' || main === 'right') {\n    const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2\n    top = clampValue(\n      idealTop,\n      VIEWPORT_MARGIN,\n      viewportHeight - VIEWPORT_MARGIN - contentHeight,\n    )\n    left =\n      main === 'right'\n        ? anchor.right + MAIN_GAP\n        : anchor.left - MAIN_GAP - contentWidth\n  } else {\n    const idealLeft = !corner\n      ? anchor.left + anchor.width / 2 - contentWidth / 2\n      : corner === 'left'\n        ? anchor.left - contentWidth - CORNER_GAP\n        : anchor.right + CORNER_GAP\n    left = clampValue(\n      idealLeft,\n      VIEWPORT_MARGIN,\n      viewportWidth - VIEWPORT_MARGIN - contentWidth,\n    )\n    const gap = corner ? CORNER_GAP : MAIN_GAP\n    top =\n      main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap\n  }\n\n  return { position: resolvedPosition, left, top }\n}\n\n// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a\n// transform/filter/backdrop-filter that would otherwise capture position: fixed)\n// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.\nexport const Tooltip = ({\n  content,\n  position = 'top',\n  width = 320,\n  className,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  dataTestId,\n  ...rest\n}: TooltipProps) => {\n  const anchorRef = useRef<HTMLSpanElement>(null)\n  const contentRef = useRef<HTMLSpanElement>(null)\n  const [open, setOpen] = useState(false)\n  const tooltipId = useId()\n\n  const updatePosition = useCallback(() => {\n    const anchor = anchorRef.current\n    const contentEl = contentRef.current\n    if (!anchor || !contentEl) return\n    const {\n      left,\n      top,\n      position: resolved,\n    } = getAdjustment(\n      position,\n      anchor.getBoundingClientRect(),\n      contentEl.offsetWidth,\n      contentEl.offsetHeight,\n    )\n    contentEl.style.left = `${left}px`\n    contentEl.style.top = `${top}px`\n    contentEl.dataset.position = resolved\n    contentEl.dataset.placed = 'true'\n  }, [position])\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) return\n    updatePosition()\n    window.addEventListener('scroll', updatePosition, true)\n    window.addEventListener('resize', updatePosition)\n    return () => {\n      window.removeEventListener('scroll', updatePosition, true)\n      window.removeEventListener('resize', updatePosition)\n    }\n  }, [open, updatePosition])\n\n  // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.\n  useEffect(() => {\n    if (!open) return\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open])\n\n  const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n    onMouseEnter?.(event)\n    setOpen(true)\n  }\n\n  const handleMouseLeave = (event: MouseEvent<HTMLSpanElement>) => {\n    onMouseLeave?.(event)\n    setOpen(false)\n  }\n\n  const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n    onFocus?.(event)\n    setOpen(true)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLSpanElement>) => {\n    onBlur?.(event)\n    setOpen(false)\n  }\n\n  return (\n    <span\n      ref={anchorRef}\n      className={cn(styles.wrapper, className)}\n      aria-describedby={open ? tooltipId : undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n      {open\n        ? createPortal(\n            <span\n              ref={contentRef}\n              id={tooltipId}\n              role='tooltip'\n              className={styles.content}\n              style={\n                { '--local-tooltip-width': getMaxWidth(width) } as CSSProperties\n              }\n              data-testid={dataTestId?.content}\n            >\n              {content}\n            </span>,\n            document.body,\n          )\n        : null}\n    </span>\n  )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","MAIN_GAP","CORNER_GAP","FIT_BUFFER","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","contentWidth","contentHeight","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","fitGap","needed","space","opposite","resolvedPosition","idealTop","height","idealLeft","gap","Tooltip","_ref","content","className","children","onMouseEnter","onMouseLeave","onFocus","onBlur","dataTestId","rest","anchorRef","useRef","contentRef","open","setOpen","useState","tooltipId","useId","updatePosition","useCallback","current","contentEl","resolved","getBoundingClientRect","offsetWidth","offsetHeight","style","dataset","placed","useIsomorphicLayoutEffect","window","addEventListener","removeEventListener","useEffect","handleKeyDown","event","key","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","_jsxs","ref","cn","styles","wrapper","undefined","root","createPortal","_jsx","id","role","body","displayName"],"mappings":"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"}

package/dist/cjs/utils/ActionElement.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const Anchor = require('../link-provider/Anchor.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+
+/** Renders `<a>` when `href` is set, otherwise `<button type='button'>`. */
+const ActionElement = /*#__PURE__*/react.forwardRef((props, ref) => {
+  if (props.href !== undefined) {
+    const {
+      href,
+      disabled,
+      onClick,
+      tabIndex,
+      ...rest
+    } = props;
+    return /*#__PURE__*/jsxRuntime.jsx(Anchor.Anchor, {
+      ref: ref,
+      ...rest,
+      href: disabled ? undefined : href,
+      "aria-disabled": disabled ? 'true' : rest['aria-disabled'],
+      tabIndex: disabled ? -1 : tabIndex,
+      onClick: disabled ? undefined : onClick
+    });
+  }
+  const {
+    type = 'button',
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    ref: ref,
+    type: type,
+    ...rest
+  });
+});
+ActionElement.displayName = 'ActionElement';
+
+exports.ActionElement = ActionElement;
+//# sourceMappingURL=ActionElement.cjs.map

package/dist/cjs/utils/ActionElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionElement.cjs","sources":["../../../src/utils/ActionElement.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n} from 'react'\n\nimport { Anchor } from '../link-provider/Anchor'\n\nexport type ActionElementProps =\n  | (AnchorHTMLAttributes<HTMLAnchorElement> & {\n      href: string\n      disabled?: boolean\n    })\n  | (ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined })\n\n/** Renders `<a>` when `href` is set, otherwise `<button type='button'>`. */\nexport const ActionElement = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  ActionElementProps\n>((props, ref) => {\n  if (props.href !== undefined) {\n    const { href, disabled, onClick, tabIndex, ...rest } = props\n    return (\n      <Anchor\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        {...rest}\n        href={disabled ? undefined : href}\n        aria-disabled={disabled ? 'true' : rest['aria-disabled']}\n        tabIndex={disabled ? -1 : tabIndex}\n        onClick={disabled ? undefined : onClick}\n      />\n    )\n  }\n\n  const { type = 'button', ...rest } = props\n  return (\n    <button\n      ref={ref as ForwardedRef<HTMLButtonElement>}\n      type={type}\n      {...rest}\n    />\n  )\n})\n\nActionElement.displayName = 'ActionElement'\n"],"names":["ActionElement","forwardRef","props","ref","href","undefined","disabled","onClick","tabIndex","rest","_jsx","Anchor","type","displayName"],"mappings":";;;;;;;;AAgBA;AACO,MAAMA,aAAa,gBAAGC,gBAAU,CAGrC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAChB,EAAA,IAAID,KAAK,CAACE,IAAI,KAAKC,SAAS,EAAE;IAC5B,MAAM;MAAED,IAAI;MAAEE,QAAQ;MAAEC,OAAO;MAAEC,QAAQ;MAAE,GAAGC,IAAAA;AAAK,KAAC,GAAGP,KAAK,CAAA;IAC5D,oBACEQ,cAAA,CAACC,aAAM,EAAA;AACLR,MAAAA,GAAG,EAAEA,GAAuC;AAAA,MAAA,GACxCM,IAAI;AACRL,MAAAA,IAAI,EAAEE,QAAQ,GAAGD,SAAS,GAAGD,IAAK;AAClC,MAAA,eAAA,EAAeE,QAAQ,GAAG,MAAM,GAAGG,IAAI,CAAC,eAAe,CAAE;AACzDD,MAAAA,QAAQ,EAAEF,QAAQ,GAAG,CAAC,CAAC,GAAGE,QAAS;AACnCD,MAAAA,OAAO,EAAED,QAAQ,GAAGD,SAAS,GAAGE,OAAAA;AAAQ,KACzC,CAAC,CAAA;AAEN,GAAA;EAEA,MAAM;AAAEK,IAAAA,IAAI,GAAG,QAAQ;IAAE,GAAGH,IAAAA;AAAK,GAAC,GAAGP,KAAK,CAAA;AAC1C,EAAA,oBACEQ,cAAA,CAAA,QAAA,EAAA;AACEP,IAAAA,GAAG,EAAEA,GAAuC;AAC5CS,IAAAA,IAAI,EAAEA,IAAK;IAAA,GACPH,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CAAC,EAAC;AAEFT,aAAa,CAACa,WAAW,GAAG,eAAe;;;;"}

package/dist/cjs/utils/responsive.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const breakpoints = ['lg', 'ml', 'md', 'sm', 'xs', 'xxs'];
+const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1);
+const spaceToCss = space => `${space}px`;
+const toKebab = value => value.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+
+/**
+ * Turns a responsive prop into inline `--local-<prop>[-<bp>]` vars plus the
+ * `<prop><Bp>` module classes that gate them; the base var is read by the root class.
+ */
+const getResponsiveProps = (prop, value, toCss, styles) => {
+  const style = {};
+  const className = [];
+  const values = typeof value === 'object' && value !== null ? value : {
+    base: value
+  };
+  const varName = `--local-${toKebab(prop)}`;
+  if (values.base !== undefined) style[varName] = toCss(values.base);
+  for (const bp of breakpoints) {
+    const item = values[bp];
+    if (item === undefined) continue;
+    style[`${varName}-${bp}`] = toCss(item);
+    const cls = styles[`${prop}${capitalize(bp)}`];
+    if (cls) className.push(cls);
+  }
+  return {
+    style: style,
+    className
+  };
+};
+const toObject = value => typeof value === 'object' && value !== null ? value : {
+  base: value
+};
+
+/** Merges per key; `b` wins over `a`. */
+const mergeResponsive = (a, b) => {
+  if (a === undefined && b === undefined) return undefined;
+  return {
+    ...(a === undefined ? {} : toObject(a)),
+    ...(b === undefined ? {} : toObject(b))
+  };
+};
+
+/** Turns a responsive prop into inline `--local-<prop>[-<bp>]` vars, for roots that declare a per-breakpoint fallback chain. */
+const responsiveVars = (prop, value, toCss) => {
+  if (value === undefined) return {};
+  const values = toObject(value);
+  const varName = `--local-${toKebab(prop)}`;
+  const style = {};
+  if (values.base !== undefined) style[varName] = toCss(values.base);
+  for (const bp of breakpoints) {
+    const item = values[bp];
+    if (item !== undefined) style[`${varName}-${bp}`] = toCss(item);
+  }
+  return style;
+};
+
+exports.breakpoints = breakpoints;
+exports.capitalize = capitalize;
+exports.getResponsiveProps = getResponsiveProps;
+exports.mergeResponsive = mergeResponsive;
+exports.responsiveVars = responsiveVars;
+exports.spaceToCss = spaceToCss;
+//# sourceMappingURL=responsive.cjs.map

package/dist/cjs/utils/responsive.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.cjs","sources":["../../../src/utils/responsive.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nexport const breakpoints = ['lg', 'ml', 'md', 'sm', 'xs', 'xxs'] as const\nexport type Breakpoint = (typeof breakpoints)[number]\n\ntype ResponsiveObject<T> = { base?: T } & Partial<Record<Breakpoint, T>>\n\n/** Desktop-first: `base` applies everywhere, breakpoint keys apply at that width and below. */\nexport type Responsive<T> = T | ResponsiveObject<T>\n\n/** Spacing scale in px. */\nexport const spaces = [0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 52] as const\nexport type Space = (typeof spaces)[number]\n\nexport const capitalize = (value: string) =>\n  value.charAt(0).toUpperCase() + value.slice(1)\n\nexport const spaceToCss = (space: Space) => `${space}px`\n\nconst toKebab = (value: string) =>\n  value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)\n\n/**\n * Turns a responsive prop into inline `--local-<prop>[-<bp>]` vars plus the\n * `<prop><Bp>` module classes that gate them; the base var is read by the root class.\n */\nexport const getResponsiveProps = <T>(\n  prop: string,\n  value: Responsive<T> | undefined,\n  toCss: (value: T) => string,\n  styles: Record<string, string>,\n) => {\n  const style: Record<string, string> = {}\n  const className: string[] = []\n\n  const values = (\n    typeof value === 'object' && value !== null ? value : { base: value }\n  ) as ResponsiveObject<T>\n  const varName = `--local-${toKebab(prop)}`\n\n  if (values.base !== undefined) style[varName] = toCss(values.base)\n\n  for (const bp of breakpoints) {\n    const item = values[bp]\n    if (item === undefined) continue\n    style[`${varName}-${bp}`] = toCss(item)\n    const cls = styles[`${prop}${capitalize(bp)}`]\n    if (cls) className.push(cls)\n  }\n\n  return { style: style as CSSProperties, className }\n}\n\nconst toObject = <T>(value: Responsive<T>) =>\n  (typeof value === 'object' && value !== null\n    ? value\n    : { base: value }) as ResponsiveObject<T>\n\n/** Merges per key; `b` wins over `a`. */\nexport const mergeResponsive = <T>(\n  a?: Responsive<T>,\n  b?: Responsive<T>,\n): Responsive<T> | undefined => {\n  if (a === undefined && b === undefined) return undefined\n  return {\n    ...(a === undefined ? {} : toObject(a)),\n    ...(b === undefined ? {} : toObject(b)),\n  }\n}\n\n/** Turns a responsive prop into inline `--local-<prop>[-<bp>]` vars, for roots that declare a per-breakpoint fallback chain. */\nexport const responsiveVars = <T>(\n  prop: string,\n  value: Responsive<T> | undefined,\n  toCss: (value: T) => string,\n): CSSProperties => {\n  if (value === undefined) return {}\n\n  const values = toObject(value)\n  const varName = `--local-${toKebab(prop)}`\n  const style: Record<string, string> = {}\n\n  if (values.base !== undefined) style[varName] = toCss(values.base)\n\n  for (const bp of breakpoints) {\n    const item = values[bp]\n    if (item !== undefined) style[`${varName}-${bp}`] = toCss(item)\n  }\n\n  return style as CSSProperties\n}\n"],"names":["breakpoints","capitalize","value","charAt","toUpperCase","slice","spaceToCss","space","toKebab","replace","char","toLowerCase","getResponsiveProps","prop","toCss","styles","style","className","values","base","varName","undefined","bp","item","cls","push","toObject","mergeResponsive","a","b","responsiveVars"],"mappings":"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"}

package/dist/esm/breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,88 @@
+import { useRef, useLayoutEffect, useEffect } from 'react';
+import cn from 'classnames';
+import styles from './Breadcrumbs.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ActionElement } from '../utils/ActionElement.mjs';
+import { IconChevronRight } from '../icons/components/base/IconChevronRight.mjs';
+
+const syncFade = list => {
+  list.toggleAttribute('data-fade-start', list.scrollLeft > 0);
+  list.toggleAttribute('data-fade-end', list.scrollLeft < list.scrollWidth - list.clientWidth - 1);
+};
+const syncTitle = e => {
+  const el = e.target.closest('[data-label]');
+  if (!el) return;
+  if (el.scrollWidth > el.clientWidth) el.setAttribute('title', el.textContent ?? '');else el.removeAttribute('title');
+};
+const Breadcrumbs = _ref => {
+  let {
+    items,
+    className,
+    ...rest
+  } = _ref;
+  const listRef = useRef(null);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollLeft = list.scrollWidth;
+    syncFade(list);
+  }, [items]);
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => syncFade(list));
+    observer.observe(list);
+    return () => observer.disconnect();
+  }, []);
+  return /*#__PURE__*/jsx("nav", {
+    "aria-label": "Breadcrumb",
+    className: cn(styles.nav, className),
+    ...rest,
+    children: /*#__PURE__*/jsx("ol", {
+      ref: listRef,
+      className: styles.list,
+      onScroll: e => syncFade(e.currentTarget),
+      onPointerOver: syncTitle,
+      children: items.map((_ref2, index) => {
+        let {
+          label,
+          ...itemProps
+        } = _ref2;
+        const labelAttrs = itemProps.title === undefined ? {
+          'data-label': ''
+        } : {};
+        if (index === items.length - 1) {
+          return /*#__PURE__*/jsx("li", {
+            className: styles.item,
+            children: /*#__PURE__*/jsx("span", {
+              "aria-current": "page",
+              className: cn(styles.label, styles.current),
+              ...labelAttrs,
+              children: label
+            })
+          }, index);
+        }
+        const interactive = itemProps.href !== undefined || itemProps.onClick !== undefined;
+        return /*#__PURE__*/jsxs("li", {
+          className: styles.item,
+          children: [interactive ? /*#__PURE__*/jsx(ActionElement, {
+            ...itemProps,
+            ...labelAttrs,
+            className: cn(styles.label, styles.link, itemProps.className),
+            children: label
+          }) : /*#__PURE__*/jsx("span", {
+            className: styles.label,
+            ...labelAttrs,
+            children: label
+          }), /*#__PURE__*/jsx(IconChevronRight, {
+            className: styles.separator,
+            "aria-hidden": "true"
+          })]
+        }, index);
+      })
+    })
+  });
+};
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.mjs.map

package/dist/esm/breadcrumbs/Breadcrumbs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.mjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n}\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[]\n}\n\nconst syncFade = (list: HTMLElement) => {\n  list.toggleAttribute('data-fade-start', list.scrollLeft > 0)\n  list.toggleAttribute(\n    'data-fade-end',\n    list.scrollLeft < list.scrollWidth - list.clientWidth - 1,\n  )\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\nexport const Breadcrumbs = ({\n  items,\n  className,\n  ...rest\n}: BreadcrumbsProps) => {\n  const listRef = useRef<HTMLOListElement>(null)\n\n  useLayoutEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    list.scrollLeft = list.scrollWidth\n    syncFade(list)\n  }, [items])\n\n  useEffect(() => {\n    const list = listRef.current\n    if (!list || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => syncFade(list))\n    observer.observe(list)\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <nav\n      aria-label='Breadcrumb'\n      className={cn(styles.nav, className)}\n      {...rest}\n    >\n      <ol\n        ref={listRef}\n        className={styles.list}\n        onScroll={(e) => syncFade(e.currentTarget)}\n        onPointerOver={syncTitle}\n      >\n        {items.map(({ label, ...itemProps }, index) => {\n          const labelAttrs =\n            itemProps.title === undefined ? { 'data-label': '' } : {}\n          if (index === items.length - 1) {\n            return (\n              <li key={index} className={styles.item}>\n                <span\n                  aria-current='page'\n                  className={cn(styles.label, styles.current)}\n                  {...labelAttrs}\n                >\n                  {label}\n                </span>\n              </li>\n            )\n          }\n          const interactive =\n            itemProps.href !== undefined || itemProps.onClick !== undefined\n          return (\n            <li key={index} className={styles.item}>\n              {interactive ? (\n                <ActionElement\n                  {...itemProps}\n                  {...labelAttrs}\n                  className={cn(styles.label, styles.link, itemProps.className)}\n                >\n                  {label}\n                </ActionElement>\n              ) : (\n                <span className={styles.label} {...labelAttrs}>\n                  {label}\n                </span>\n              )}\n              <IconChevronRight\n                className={styles.separator}\n                aria-hidden='true'\n              />\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"names":["syncFade","list","toggleAttribute","scrollLeft","scrollWidth","clientWidth","syncTitle","e","el","target","closest","setAttribute","textContent","removeAttribute","Breadcrumbs","_ref","items","className","rest","listRef","useRef","useLayoutEffect","current","useEffect","ResizeObserver","observer","observe","disconnect","_jsx","cn","styles","nav","children","ref","onScroll","currentTarget","onPointerOver","map","_ref2","index","label","itemProps","labelAttrs","title","undefined","length","item","interactive","href","onClick","_jsxs","ActionElement","link","IconChevronRight","separator"],"mappings":"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"}

package/dist/esm/breadcrumbs/Breadcrumbs.module.css.mjs

@@ -0,0 +1,4 @@
+const styles = {"nav":"Breadcrumbs-module_nav__cDuA5","list":"Breadcrumbs-module_list__A6dlB","item":"Breadcrumbs-module_item__3t-Zj","label":"Breadcrumbs-module_label__gVU35","link":"Breadcrumbs-module_link__KJ87-","current":"Breadcrumbs-module_current__XK0a2","separator":"Breadcrumbs-module_separator__k-Tmd"};
+
+export { styles as default };
+//# sourceMappingURL=Breadcrumbs.module.css.mjs.map

package/dist/esm/breadcrumbs/Breadcrumbs.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/divider/Divider.mjs

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import cn from 'classnames';
+import styles from './Divider.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+/** Visual-only 1px line in the default border color; stretches along the cross axis of a flex parent. Pass role='separator' for semantics. */
+const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    orientation = 'horizontal',
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: cn(styles.root, styles[orientation], className),
+    ...rest
+  });
+});
+Divider.displayName = 'Divider';
+
+export { Divider };
+//# sourceMappingURL=Divider.mjs.map

package/dist/esm/divider/Divider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.mjs","sources":["../../../src/divider/Divider.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Divider.module.css'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\n\nexport type DividerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  orientation?: DividerOrientation\n}\n\n/** Visual-only 1px line in the default border color; stretches along the cross axis of a flex parent. Pass role='separator' for semantics. */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  ({ orientation = 'horizontal', className, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={cn(styles.root, styles[orientation], className)}\n      {...rest}\n    />\n  ),\n)\n\nDivider.displayName = 'Divider'\n"],"names":["Divider","forwardRef","_ref","ref","orientation","className","rest","_jsx","cn","styles","root","displayName"],"mappings":";;;;;AAYA;AACO,MAAMA,OAAO,gBAAGC,UAAU,CAC/B,CAAAC,IAAA,EAAqDC,GAAG,KAAA;EAAA,IAAvD;AAAEC,IAAAA,WAAW,GAAG,YAAY;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBACjDK,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,SAAS,EAAEG,EAAE,CAACC,MAAM,CAACC,IAAI,EAAED,MAAM,CAACL,WAAW,CAAC,EAAEC,SAAS,CAAE;IAAA,GACvDC,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDN,OAAO,CAACW,WAAW,GAAG,SAAS;;;;"}

package/dist/esm/divider/Divider.module.css.mjs

@@ -0,0 +1,4 @@
+const styles = {"root":"Divider-module_root__SVXVb","horizontal":"Divider-module_horizontal__1RnR-","vertical":"Divider-module_vertical__pIPZy"};
+
+export { styles as default };
+//# sourceMappingURL=Divider.module.css.mjs.map

package/dist/esm/divider/Divider.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/grid/Grid.mjs

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import cn from 'classnames';
+import styles from './Grid.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { responsiveVars, mergeResponsive, capitalize, spaceToCss } from '../utils/responsive.mjs';
+
+const columnsToCss = columns => typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns;
+
+/** CSS grid container with equal, templated or auto-fit columns and a spacing scale. */
+const Grid = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    as: Component = 'div',
+    columns,
+    minItemWidth,
+    gap,
+    rowGap,
+    columnGap,
+    align,
+    className,
+    style,
+    ...rest
+  } = _ref;
+  const minWidth = typeof minItemWidth === 'number' ? `${minItemWidth}px` : minItemWidth;
+  const template = minItemWidth !== undefined ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : columns;
+  const vars = {
+    ...responsiveVars('columns', template, columnsToCss),
+    ...responsiveVars('rowGap', mergeResponsive(gap, rowGap), spaceToCss),
+    ...responsiveVars('columnGap', mergeResponsive(gap, columnGap), spaceToCss)
+  };
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    className: cn(styles.root, align && styles[`align${capitalize(align)}`], className),
+    style: {
+      ...vars,
+      ...style
+    },
+    ...rest
+  });
+});
+Grid.displayName = 'Grid';
+
+export { Grid };
+//# sourceMappingURL=Grid.mjs.map

package/dist/esm/grid/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.mjs","sources":["../../../src/grid/Grid.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport {\n  capitalize,\n  mergeResponsive,\n  responsiveVars,\n  spaceToCss,\n  type Responsive,\n  type Space,\n} from '../utils'\nimport styles from './Grid.module.css'\n\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch'\n\nexport type GridProps = HTMLAttributes<HTMLElement> & {\n  as?: ElementType\n  /** A number makes equal columns; a string is used as raw `grid-template-columns`. */\n  columns?: Responsive<number | string>\n  /** Auto-fit columns of at least this width (number = px). Takes precedence over `columns`. */\n  minItemWidth?: number | string\n  gap?: Responsive<Space>\n  /** Overrides `gap` for rows, per breakpoint. */\n  rowGap?: Responsive<Space>\n  /** Overrides `gap` for columns, per breakpoint. */\n  columnGap?: Responsive<Space>\n  align?: GridAlign\n}\n\nconst columnsToCss = (columns: number | string) =>\n  typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns\n\n/** CSS grid container with equal, templated or auto-fit columns and a spacing scale. */\nexport const Grid = forwardRef<HTMLElement, GridProps>(\n  (\n    {\n      as: Component = 'div',\n      columns,\n      minItemWidth,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const minWidth =\n      typeof minItemWidth === 'number' ? `${minItemWidth}px` : minItemWidth\n    const template =\n      minItemWidth !== undefined\n        ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`\n        : columns\n\n    const vars = {\n      ...responsiveVars('columns', template, columnsToCss),\n      ...responsiveVars('rowGap', mergeResponsive(gap, rowGap), spaceToCss),\n      ...responsiveVars(\n        'columnGap',\n        mergeResponsive(gap, columnGap),\n        spaceToCss,\n      ),\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          styles.root,\n          align && styles[`align${capitalize(align)}`],\n          className,\n        )}\n        style={{ ...vars, ...style }}\n        {...rest}\n      />\n    )\n  },\n)\n\nGrid.displayName = 'Grid'\n"],"names":["columnsToCss","columns","Grid","forwardRef","_ref","ref","as","Component","minItemWidth","gap","rowGap","columnGap","align","className","style","rest","minWidth","template","undefined","vars","responsiveVars","mergeResponsive","spaceToCss","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;AA8BA,MAAMA,YAAY,GAAIC,OAAwB,IAC5C,OAAOA,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAUA,OAAO,CAAA,iBAAA,CAAmB,GAAGA,OAAO,CAAA;;AAE9E;AACO,MAAMC,IAAI,gBAAGC,UAAU,CAC5B,CAAAC,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBN,OAAO;IACPO,YAAY;IACZC,GAAG;IACHC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,KAAK;IACL,GAAGC,IAAAA;AACL,GAAC,GAAAX,IAAA,CAAA;EAGD,MAAMY,QAAQ,GACZ,OAAOR,YAAY,KAAK,QAAQ,GAAG,CAAGA,EAAAA,YAAY,CAAI,EAAA,CAAA,GAAGA,YAAY,CAAA;EACvE,MAAMS,QAAQ,GACZT,YAAY,KAAKU,SAAS,GACtB,CAA+BF,4BAAAA,EAAAA,QAAQ,CAAgB,cAAA,CAAA,GACvDf,OAAO,CAAA;AAEb,EAAA,MAAMkB,IAAI,GAAG;AACX,IAAA,GAAGC,cAAc,CAAC,SAAS,EAAEH,QAAQ,EAAEjB,YAAY,CAAC;AACpD,IAAA,GAAGoB,cAAc,CAAC,QAAQ,EAAEC,eAAe,CAACZ,GAAG,EAAEC,MAAM,CAAC,EAAEY,UAAU,CAAC;IACrE,GAAGF,cAAc,CACf,WAAW,EACXC,eAAe,CAACZ,GAAG,EAAEE,SAAS,CAAC,EAC/BW,UACF,CAAA;GACD,CAAA;EAED,oBACEC,GAAA,CAAChB,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTQ,SAAS,EAAEW,EAAE,CACXC,MAAM,CAACC,IAAI,EACXd,KAAK,IAAIa,MAAM,CAAC,CAAQE,KAAAA,EAAAA,UAAU,CAACf,KAAK,CAAC,EAAE,CAAC,EAC5CC,SACF,CAAE;AACFC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGK,IAAI;MAAE,GAAGL,KAAAA;KAAQ;IAAA,GACzBC,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAC;AAEDb,IAAI,CAAC0B,WAAW,GAAG,MAAM;;;;"}

package/dist/esm/grid/Grid.module.css.mjs

@@ -0,0 +1,4 @@
+const styles = {"root":"Grid-module_root__WQ5eA","alignStart":"Grid-module_alignStart__tJzED","alignCenter":"Grid-module_alignCenter__Br-nr","alignEnd":"Grid-module_alignEnd__oWTV-","alignStretch":"Grid-module_alignStretch__v1rgi"};
+
+export { styles as default };
+//# sourceMappingURL=Grid.module.css.mjs.map

package/dist/esm/grid/Grid.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/grid/GridItem.mjs

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+import cn from 'classnames';
+import styles from './GridItem.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { responsiveVars } from '../utils/responsive.mjs';
+
+const spanToCss = span => span === 'full' ? '1 / -1' : `span ${span} / span ${span}`;
+
+/** Grid child that can span columns or sit in a named area. */
+const GridItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    as: Component = 'div',
+    span,
+    area,
+    className,
+    style,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    className: cn(styles.root, className),
+    style: {
+      ...responsiveVars('span', span, spanToCss),
+      ...(area !== undefined && {
+        gridArea: area
+      }),
+      ...style
+    },
+    ...rest
+  });
+});
+GridItem.displayName = 'GridItem';
+
+export { GridItem };
+//# sourceMappingURL=GridItem.mjs.map

package/dist/esm/grid/GridItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.mjs","sources":["../../../src/grid/GridItem.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { responsiveVars, type Responsive } from '../utils'\nimport styles from './GridItem.module.css'\n\nexport type GridItemProps = HTMLAttributes<HTMLElement> & {\n  as?: ElementType\n  /** Number of columns to span; `'full'` spans every column. */\n  span?: Responsive<number | 'full'>\n  area?: string\n}\n\nconst spanToCss = (span: number | 'full') =>\n  span === 'full' ? '1 / -1' : `span ${span} / span ${span}`\n\n/** Grid child that can span columns or sit in a named area. */\nexport const GridItem = forwardRef<HTMLElement, GridItemProps>(\n  ({ as: Component = 'div', span, area, className, style, ...rest }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(styles.root, className)}\n        style={{\n          ...responsiveVars('span', span, spanToCss),\n          ...(area !== undefined && { gridArea: area }),\n          ...style,\n        }}\n        {...rest}\n      />\n    )\n  },\n)\n\nGridItem.displayName = 'GridItem'\n"],"names":["spanToCss","span","GridItem","forwardRef","_ref","ref","as","Component","area","className","style","rest","_jsx","cn","styles","root","responsiveVars","undefined","gridArea","displayName"],"mappings":";;;;;;AAcA,MAAMA,SAAS,GAAIC,IAAqB,IACtCA,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,CAAA,KAAA,EAAQA,IAAI,CAAA,QAAA,EAAWA,IAAI,CAAE,CAAA,CAAA;;AAE5D;AACO,MAAMC,QAAQ,gBAAGC,UAAU,CAChC,CAAAC,IAAA,EAAmEC,GAAG,KAAK;EAAA,IAA1E;IAAEC,EAAE,EAAEC,SAAS,GAAG,KAAK;IAAEN,IAAI;IAAEO,IAAI;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAP,IAAA,CAAA;EAC/D,oBACEQ,GAAA,CAACL,SAAS,EAAA;AACRF,IAAAA,GAAG,EAAEA,GAAI;IACTI,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEN,SAAS,CAAE;AACtCC,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGM,cAAc,CAAC,MAAM,EAAEf,IAAI,EAAED,SAAS,CAAC;MAC1C,IAAIQ,IAAI,KAAKS,SAAS,IAAI;AAAEC,QAAAA,QAAQ,EAAEV,IAAAA;AAAK,OAAC,CAAC;MAC7C,GAAGE,KAAAA;KACH;IAAA,GACEC,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAC;AAEDT,QAAQ,CAACiB,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/grid/GridItem.module.css.mjs

@@ -0,0 +1,4 @@
+const styles = {"root":"GridItem-module_root__Jj7cu"};
+
+export { styles as default };
+//# sourceMappingURL=GridItem.module.css.mjs.map

package/dist/esm/grid/GridItem.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/header/Header.mjs

@@ -0,0 +1,27 @@
+import cn from 'classnames';
+import styles from './Header.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Header = _ref => {
+  let {
+    children,
+    actions,
+    sticky,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxs("header", {
+    className: cn(styles.header, sticky && styles.sticky, className),
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles.content,
+      children: children
+    }), actions != null ? /*#__PURE__*/jsx("div", {
+      className: styles.actions,
+      children: actions
+    }) : null]
+  });
+};
+
+export { Header };
+//# sourceMappingURL=Header.mjs.map

package/dist/esm/header/Header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","sources":["../../../src/header/Header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Header.module.css'\n\nexport type HeaderProps = ComponentPropsWithoutRef<'header'> & {\n  /** Right control group. */\n  actions?: ReactNode\n  /** Sticks to the top of the viewport while scrolling. */\n  sticky?: boolean\n}\n\nexport const Header = ({\n  children,\n  actions,\n  sticky,\n  className,\n  ...rest\n}: HeaderProps) => (\n  <header\n    className={cn(styles.header, sticky && styles.sticky, className)}\n    {...rest}\n  >\n    <div className={styles.content}>{children}</div>\n    {actions != null ? <div className={styles.actions}>{actions}</div> : null}\n  </header>\n)\n"],"names":["Header","_ref","children","actions","sticky","className","rest","_jsxs","cn","styles","header","_jsx","content"],"mappings":";;;;AAaO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,SAAS;IACT,GAAGC,IAAAA;AACQ,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACZM,IAAA,CAAA,QAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,EAAE,CAACC,MAAM,CAACC,MAAM,EAAEN,MAAM,IAAIK,MAAM,CAACL,MAAM,EAAEC,SAAS,CAAE;AAAA,IAAA,GAC7DC,IAAI;AAAAJ,IAAAA,QAAA,gBAERS,GAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEI,MAAM,CAACG,OAAQ;AAAAV,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,EAC/CC,OAAO,IAAI,IAAI,gBAAGQ,GAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEI,MAAM,CAACN,OAAQ;AAAAD,MAAAA,QAAA,EAAEC,OAAAA;KAAa,CAAC,GAAG,IAAI,CAAA;AAAA,GACnE,CAAC,CAAA;AAAA;;;;"}

package/dist/esm/header/Header.module.css.mjs

@@ -0,0 +1,4 @@
+const styles = {"header":"Header-module_header__BlKE6","sticky":"Header-module_sticky__ftIiS","content":"Header-module_content__P2dip","actions":"Header-module_actions__iRAGS"};
+
+export { styles as default };
+//# sourceMappingURL=Header.module.css.mjs.map

package/dist/esm/header/Header.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/header/HeaderNav.mjs

@@ -0,0 +1,65 @@
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import styles from './HeaderNav.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const syncFade = nav => {
+  nav.toggleAttribute('data-fade-start', nav.scrollLeft > 0);
+  nav.toggleAttribute('data-fade-end', nav.scrollLeft < nav.scrollWidth - nav.clientWidth - 1);
+};
+const scrollActiveIntoView = nav => {
+  const active = nav.querySelector("[aria-current='page']");
+  if (!active) return;
+  const navRect = nav.getBoundingClientRect();
+  const activeRect = active.getBoundingClientRect();
+  nav.scrollLeft += activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2;
+};
+const HeaderNav = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    'aria-label': ariaLabel = 'Main',
+    className,
+    onScroll,
+    ...rest
+  } = _ref;
+  const navRef = useRef(null);
+  const setRef = useCallback(node => {
+    navRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  }, [ref]);
+  useEffect(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const sync = () => {
+      scrollActiveIntoView(nav);
+      syncFade(nav);
+    };
+    sync();
+    const mutations = typeof MutationObserver === 'undefined' ? null : new MutationObserver(sync);
+    mutations?.observe(nav, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-current']
+    });
+    const resizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => syncFade(nav));
+    resizes?.observe(nav);
+    return () => {
+      mutations?.disconnect();
+      resizes?.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/jsx("nav", {
+    ref: setRef,
+    "aria-label": ariaLabel,
+    className: cn(styles.nav, className),
+    onScroll: e => {
+      syncFade(e.currentTarget);
+      onScroll?.(e);
+    },
+    ...rest
+  });
+});
+HeaderNav.displayName = 'HeaderNav';
+
+export { HeaderNav };
+//# sourceMappingURL=HeaderNav.mjs.map

package/dist/esm/header/HeaderNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderNav.mjs","sources":["../../../src/header/HeaderNav.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport type { ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './HeaderNav.module.css'\n\nexport type HeaderNavProps = ComponentPropsWithoutRef<'nav'>\n\nconst syncFade = (nav: HTMLElement) => {\n  nav.toggleAttribute('data-fade-start', nav.scrollLeft > 0)\n  nav.toggleAttribute(\n    'data-fade-end',\n    nav.scrollLeft < nav.scrollWidth - nav.clientWidth - 1,\n  )\n}\n\nconst scrollActiveIntoView = (nav: HTMLElement) => {\n  const active = nav.querySelector<HTMLElement>(\"[aria-current='page']\")\n  if (!active) return\n  const navRect = nav.getBoundingClientRect()\n  const activeRect = active.getBoundingClientRect()\n  nav.scrollLeft +=\n    activeRect.left - navRect.left - (nav.clientWidth - activeRect.width) / 2\n}\n\nexport const HeaderNav = forwardRef<HTMLElement, HeaderNavProps>(\n  ({ 'aria-label': ariaLabel = 'Main', className, onScroll, ...rest }, ref) => {\n    const navRef = useRef<HTMLElement | null>(null)\n\n    const setRef = useCallback(\n      (node: HTMLElement | null) => {\n        navRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    useEffect(() => {\n      const nav = navRef.current\n      if (!nav) return\n      const sync = () => {\n        scrollActiveIntoView(nav)\n        syncFade(nav)\n      }\n      sync()\n      const mutations =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(sync)\n      mutations?.observe(nav, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['aria-current'],\n      })\n      const resizes =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(() => syncFade(nav))\n      resizes?.observe(nav)\n      return () => {\n        mutations?.disconnect()\n        resizes?.disconnect()\n      }\n    }, [])\n\n    return (\n      <nav\n        ref={setRef}\n        aria-label={ariaLabel}\n        className={cn(styles.nav, className)}\n        onScroll={(e) => {\n          syncFade(e.currentTarget)\n          onScroll?.(e)\n        }}\n        {...rest}\n      />\n    )\n  },\n)\n\nHeaderNav.displayName = 'HeaderNav'\n"],"names":["syncFade","nav","toggleAttribute","scrollLeft","scrollWidth","clientWidth","scrollActiveIntoView","active","querySelector","navRect","getBoundingClientRect","activeRect","left","width","HeaderNav","forwardRef","_ref","ref","ariaLabel","className","onScroll","rest","navRef","useRef","setRef","useCallback","node","current","useEffect","sync","mutations","MutationObserver","observe","childList","subtree","attributes","attributeFilter","resizes","ResizeObserver","disconnect","_jsx","cn","styles","e","currentTarget","displayName"],"mappings":"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"}

package/dist/esm/header/HeaderNav.module.css.mjs

@@ -0,0 +1,4 @@
+const styles = {"nav":"HeaderNav-module_nav__YxWpA"};
+
+export { styles as default };
+//# sourceMappingURL=HeaderNav.module.css.mjs.map

package/dist/esm/header/HeaderNav.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderNav.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}