@techzyapp/ui-library 1.0.20 → 1.0.21

package/dist/{SpeedDial-DbvOJ4no.js.map → SpeedDial-Bb0ioXaO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SpeedDial-DbvOJ4no.js","sources":["../src/components/SpeedDial/speedDialContext.ts","../src/components/SpeedDial/SpeedDialAction.tsx","../src/components/SpeedDial/SpeedDial.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { TooltipPlacement } from '../Tooltip'\n\n/** Action button size — one step smaller than the dial's FAB. */\nexport type SpeedDialActionSize = 'sm' | 'md' | 'lg'\n\n/** Shared state a `<SpeedDial>` hands down to its `<SpeedDialAction>` children via context. */\nexport interface SpeedDialContextValue {\n  /** Size for the action FABs. */\n  size: SpeedDialActionSize\n  /** Where each action's tooltip label sits (derived from the dial `direction`). */\n  placement: TooltipPlacement\n  /** Close the dial after an action is clicked. */\n  closeOnClick: boolean\n  /** Show every action's label persistently (no hover needed) while the dial is open. */\n  persistentLabels: boolean\n  /** Request the dial to close (called by an action on click). */\n  requestClose: () => void\n}\n\nexport const SpeedDialContext = createContext<SpeedDialContextValue | null>(null)\n\n/** Read the surrounding `<SpeedDial>` (or `null` when an action is rendered standalone). */\nexport function useSpeedDial(): SpeedDialContextValue | null {\n  return useContext(SpeedDialContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Tooltip } from '../Tooltip'\nimport { useSpeedDial } from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface SpeedDialActionProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color'\n> {\n  /** Action icon — a known `IconName` or any node. */\n  icon: IconName | ReactNode\n  /** Label shown as a tooltip beside the action (also its `aria-label` when a string). */\n  label?: ReactNode\n  /** Show the label persistently (no hover) while the dial is open — overrides the dial's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Hide the tooltip / persistent label (still used for `aria-label`). */\n  hideTooltip?: boolean\n}\n\n/**\n * One action inside a `<SpeedDial>` — a small circular `IconButton` (surface-tinted) with a tooltip\n * `label`. It reads the dial via context for its size, tooltip placement and close-on-click; clicking\n * runs `onClick` then closes the dial. The ref points at the `<button>`.\n */\nexport const SpeedDialAction = forwardRef<HTMLButtonElement, SpeedDialActionProps>(\n  function SpeedDialAction(\n    { icon, label, tooltipOpen, hideTooltip = false, onClick, disabled, className, ...props },\n    ref,\n  ) {\n    const dial = useSpeedDial()\n    const iconNode =\n      typeof icon === 'string' && ICON_NAME_SET.has(icon) ? <Icon name={icon as IconName} /> : icon\n\n    const button = (\n      <IconButton\n        ref={ref}\n        rounded\n        variant=\"contained\"\n        color=\"surface\"\n        size={dial?.size ?? 'sm'}\n        disabled={disabled}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={clsx(styles.action, className)}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (dial?.closeOnClick) dial.requestClose()\n        }}\n        {...props}\n      >\n        {iconNode}\n      </IconButton>\n    )\n\n    if (label == null || hideTooltip) return button\n\n    const placement = dial?.placement ?? 'left'\n    // persistent label: render a static label beside the button (no hover) — like MUI's tooltipOpen\n    const persistent = tooltipOpen ?? dial?.persistentLabels ?? false\n    if (persistent) {\n      return (\n        <span\n          className={clsx(\n            styles.actionWrap,\n            placement === 'top' ? styles.labelTop : styles.labelLeft,\n          )}\n        >\n          {button}\n          <span className={styles.actionLabel}>{label}</span>\n        </span>\n      )\n    }\n\n    return (\n      <Tooltip content={label} placement={placement}>\n        {button}\n      </Tooltip>\n    )\n  },\n)\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport type { ThemeColor } from '../../theme'\nimport type { TooltipPlacement } from '../Tooltip'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { SpeedDialAction } from './SpeedDialAction'\nimport {\n  SpeedDialContext,\n  type SpeedDialActionSize,\n  type SpeedDialContextValue,\n} from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type SpeedDialSize = 'sm' | 'md' | 'lg'\nexport type SpeedDialDirection = 'up' | 'down' | 'left' | 'right'\n\n/** The FAB size → the (smaller) action-button size. */\nconst ACTION_SIZE: Record<SpeedDialSize, SpeedDialActionSize> = { sm: 'sm', md: 'sm', lg: 'md' }\n/** Tooltip side per direction — labels sit left of a vertical dial, above a horizontal one. */\nconst TOOLTIP_PLACEMENT: Record<SpeedDialDirection, TooltipPlacement> = {\n  up: 'left',\n  down: 'left',\n  left: 'top',\n  right: 'top',\n}\n\n/** A data-driven action for the `actions` prop. */\nexport interface SpeedDialActionItem {\n  /** Stable key (falls back to the index). */\n  key?: string\n  icon: IconName | ReactNode\n  label?: ReactNode\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n}\n\nexport interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {\n  /** Accessible label for the FAB (required — it's icon-only). */\n  ariaLabel: string\n  /** FAB icon. Defaults to `Add` (a `+`). */\n  icon?: IconName | ReactNode\n  /** Icon shown while open. Omit to rotate the `icon` 45° instead (a `+` becomes a `×`). */\n  openIcon?: IconName | ReactNode\n  /** Which way the actions fan out. Defaults to `up`. */\n  direction?: SpeedDialDirection\n  /** Theme palette token tinting the FAB. Defaults to `primary`. */\n  color?: ThemeColor\n  /** FAB size (actions render one step smaller). Defaults to `md`. */\n  size?: SpeedDialSize\n  /** Controlled open state. */\n  open?: boolean\n  /** Initial open state for uncontrolled use. Defaults to `false`. */\n  defaultOpen?: boolean\n  /** Fires with the next open state. */\n  onOpenChange?: (open: boolean) => void\n  /** Open on hover (also opens on click). Defaults to `true`. */\n  openOnHover?: boolean\n  /** Close the dial after an action is clicked. Defaults to `true`. */\n  closeOnActionClick?: boolean\n  /** Show every action's label persistently while open (no hover needed) — like MUI's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Data-driven actions — an alternative to `<SpeedDialAction>` children. */\n  actions?: SpeedDialActionItem[]\n  /** Disables the FAB (and hover-opening). */\n  disabled?: boolean\n  /** `<SpeedDialAction>` children (used when `actions` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A floating action button that reveals a set of related actions on hover / click — fanning out in\n * `direction` (`up` default). The FAB icon rotates 45° when open (a `+` → `×`) unless an `openIcon` is\n * given. Each `<SpeedDialAction>` is a small circular button with a tooltip label; supply them via the\n * data-driven `actions` prop or as children. Opens on hover (`openOnHover`) and click; closes on\n * outside-pointerdown, Escape (refocusing the FAB), or selecting an action. Controlled (`open` +\n * `onOpenChange`) or uncontrolled (`defaultOpen`). The ref points at the root; position it (e.g.\n * `fixed` bottom-right) via `style`/`className`. The FAB carries `aria-expanded`/`aria-controls`.\n */\nexport const SpeedDial = forwardRef<HTMLDivElement, SpeedDialProps>(function SpeedDial(\n  {\n    ariaLabel,\n    icon = 'Add',\n    openIcon,\n    direction = 'up',\n    color = 'primary',\n    size = 'md',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnHover = true,\n    closeOnActionClick = true,\n    tooltipOpen = false,\n    actions,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const fabRef = useRef<HTMLButtonElement | null>(null)\n  const actionsId = useId()\n\n  const isControlled = open !== undefined\n  const [internal, setInternal] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internal\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n  // keep a stable reference for the document listeners below\n  const setOpenRef = useRef(setOpen)\n  setOpenRef.current = setOpen\n\n  // while open: close on outside pointerdown / Escape (Escape refocuses the FAB)\n  useEffect(() => {\n    if (!isOpen) return\n    const onPointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n        setOpenRef.current(false)\n      }\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false)\n        fabRef.current?.focus()\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  }, [isOpen])\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  const renderIcon = (value: IconName | ReactNode) =>\n    typeof value === 'string' && ICON_NAME_SET.has(value) ? (\n      <Icon name={value as IconName} />\n    ) : (\n      value\n    )\n\n  const ctx: SpeedDialContextValue = {\n    size: ACTION_SIZE[size],\n    placement: TOOLTIP_PLACEMENT[direction],\n    closeOnClick: closeOnActionClick,\n    persistentLabels: tooltipOpen,\n    requestClose: () => setOpen(false),\n  }\n\n  const hoverProps =\n    openOnHover && !disabled\n      ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }\n      : {}\n\n  return (\n    <div\n      ref={setRootRef}\n      className={clsx(styles.speedDial, className)}\n      style={style as CSSProperties}\n      {...hoverProps}\n      {...props}\n    >\n      <div\n        id={actionsId}\n        className={clsx(styles.actions, styles[direction])}\n        data-open={isOpen ? 'true' : 'false'}\n      >\n        <SpeedDialContext.Provider value={ctx}>\n          {actions\n            ? actions.map((action, index) => (\n                <SpeedDialAction\n                  key={action.key ?? index}\n                  icon={action.icon}\n                  label={action.label}\n                  onClick={action.onClick}\n                  disabled={action.disabled}\n                />\n              ))\n            : children}\n        </SpeedDialContext.Provider>\n      </div>\n\n      <IconButton\n        ref={fabRef}\n        rounded\n        variant=\"contained\"\n        color={color}\n        size={size}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={actionsId}\n        className={styles.fab}\n        onClick={() => setOpen(!isOpen)}\n      >\n        <span className={clsx(styles.fabIcon, !openIcon && isOpen && styles.fabIconOpen)}>\n          {isOpen && openIcon != null ? renderIcon(openIcon) : renderIcon(icon)}\n        </span>\n      </IconButton>\n    </div>\n  )\n})\n"],"names":["SpeedDialContext","createContext","useSpeedDial","useContext","ICON_NAME_SET","ICON_NAMES","SpeedDialAction","forwardRef","icon","label","tooltipOpen","hideTooltip","onClick","disabled","className","props","ref","dial","iconNode","jsx","Icon","button","IconButton","clsx","styles","event","placement","jsxs","Tooltip","ACTION_SIZE","TOOLTIP_PLACEMENT","SpeedDial","ariaLabel","openIcon","direction","color","size","open","defaultOpen","onOpenChange","openOnHover","closeOnActionClick","actions","children","style","forwardedRef","rootRef","useRef","fabRef","actionsId","useId","isControlled","internal","setInternal","useState","isOpen","setOpen","next","setOpenRef","useEffect","onPointerDown","onKeyDown","_a","setRootRef","node","renderIcon","value","ctx","hoverProps","action","index"],"mappings":"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"}
+{"version":3,"file":"SpeedDial-Bb0ioXaO.js","sources":["../src/components/SpeedDial/speedDialContext.ts","../src/components/SpeedDial/SpeedDialAction.tsx","../src/components/SpeedDial/SpeedDial.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { TooltipPlacement } from '../Tooltip'\n\n/** Action button size — one step smaller than the dial's FAB. */\nexport type SpeedDialActionSize = 'sm' | 'md' | 'lg'\n\n/** Shared state a `<SpeedDial>` hands down to its `<SpeedDialAction>` children via context. */\nexport interface SpeedDialContextValue {\n  /** Size for the action FABs. */\n  size: SpeedDialActionSize\n  /** Where each action's tooltip label sits (derived from the dial `direction`). */\n  placement: TooltipPlacement\n  /** Close the dial after an action is clicked. */\n  closeOnClick: boolean\n  /** Show every action's label persistently (no hover needed) while the dial is open. */\n  persistentLabels: boolean\n  /** Request the dial to close (called by an action on click). */\n  requestClose: () => void\n}\n\nexport const SpeedDialContext = createContext<SpeedDialContextValue | null>(null)\n\n/** Read the surrounding `<SpeedDial>` (or `null` when an action is rendered standalone). */\nexport function useSpeedDial(): SpeedDialContextValue | null {\n  return useContext(SpeedDialContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Tooltip } from '../Tooltip'\nimport { useSpeedDial } from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface SpeedDialActionProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color'\n> {\n  /** Action icon — a known `IconName` or any node. */\n  icon: IconName | ReactNode\n  /** Label shown as a tooltip beside the action (also its `aria-label` when a string). */\n  label?: ReactNode\n  /** Show the label persistently (no hover) while the dial is open — overrides the dial's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Hide the tooltip / persistent label (still used for `aria-label`). */\n  hideTooltip?: boolean\n}\n\n/**\n * One action inside a `<SpeedDial>` — a small circular `IconButton` (surface-tinted) with a tooltip\n * `label`. It reads the dial via context for its size, tooltip placement and close-on-click; clicking\n * runs `onClick` then closes the dial. The ref points at the `<button>`.\n */\nexport const SpeedDialAction = forwardRef<HTMLButtonElement, SpeedDialActionProps>(\n  function SpeedDialAction(\n    { icon, label, tooltipOpen, hideTooltip = false, onClick, disabled, className, ...props },\n    ref,\n  ) {\n    const dial = useSpeedDial()\n    const iconNode =\n      typeof icon === 'string' && ICON_NAME_SET.has(icon) ? <Icon name={icon as IconName} /> : icon\n\n    const button = (\n      <IconButton\n        ref={ref}\n        rounded\n        variant=\"contained\"\n        color=\"surface\"\n        size={dial?.size ?? 'sm'}\n        disabled={disabled}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={clsx(styles.action, className)}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (dial?.closeOnClick) dial.requestClose()\n        }}\n        {...props}\n      >\n        {iconNode}\n      </IconButton>\n    )\n\n    if (label == null || hideTooltip) return button\n\n    const placement = dial?.placement ?? 'left'\n    // persistent label: render a static label beside the button (no hover) — like MUI's tooltipOpen\n    const persistent = tooltipOpen ?? dial?.persistentLabels ?? false\n    if (persistent) {\n      return (\n        <span\n          className={clsx(\n            styles.actionWrap,\n            placement === 'top' ? styles.labelTop : styles.labelLeft,\n          )}\n        >\n          {button}\n          <span className={styles.actionLabel}>{label}</span>\n        </span>\n      )\n    }\n\n    return (\n      <Tooltip content={label} placement={placement}>\n        {button}\n      </Tooltip>\n    )\n  },\n)\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport type { ThemeColor } from '../../theme'\nimport type { TooltipPlacement } from '../Tooltip'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { SpeedDialAction } from './SpeedDialAction'\nimport {\n  SpeedDialContext,\n  type SpeedDialActionSize,\n  type SpeedDialContextValue,\n} from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type SpeedDialSize = 'sm' | 'md' | 'lg'\nexport type SpeedDialDirection = 'up' | 'down' | 'left' | 'right'\n\n/** The FAB size → the (smaller) action-button size. */\nconst ACTION_SIZE: Record<SpeedDialSize, SpeedDialActionSize> = { sm: 'sm', md: 'sm', lg: 'md' }\n/** Tooltip side per direction — labels sit left of a vertical dial, above a horizontal one. */\nconst TOOLTIP_PLACEMENT: Record<SpeedDialDirection, TooltipPlacement> = {\n  up: 'left',\n  down: 'left',\n  left: 'top',\n  right: 'top',\n}\n\n/** A data-driven action for the `actions` prop. */\nexport interface SpeedDialActionItem {\n  /** Stable key (falls back to the index). */\n  key?: string\n  icon: IconName | ReactNode\n  label?: ReactNode\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n}\n\nexport interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {\n  /** Accessible label for the FAB (required — it's icon-only). */\n  ariaLabel: string\n  /** FAB icon. Defaults to `Add` (a `+`). */\n  icon?: IconName | ReactNode\n  /** Icon shown while open. Omit to rotate the `icon` 45° instead (a `+` becomes a `×`). */\n  openIcon?: IconName | ReactNode\n  /** Which way the actions fan out. Defaults to `up`. */\n  direction?: SpeedDialDirection\n  /** Theme palette token tinting the FAB. Defaults to `primary`. */\n  color?: ThemeColor\n  /** FAB size (actions render one step smaller). Defaults to `md`. */\n  size?: SpeedDialSize\n  /** Controlled open state. */\n  open?: boolean\n  /** Initial open state for uncontrolled use. Defaults to `false`. */\n  defaultOpen?: boolean\n  /** Fires with the next open state. */\n  onOpenChange?: (open: boolean) => void\n  /** Open on hover (also opens on click). Defaults to `true`. */\n  openOnHover?: boolean\n  /** Close the dial after an action is clicked. Defaults to `true`. */\n  closeOnActionClick?: boolean\n  /** Show every action's label persistently while open (no hover needed) — like MUI's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Data-driven actions — an alternative to `<SpeedDialAction>` children. */\n  actions?: SpeedDialActionItem[]\n  /** Disables the FAB (and hover-opening). */\n  disabled?: boolean\n  /** `<SpeedDialAction>` children (used when `actions` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A floating action button that reveals a set of related actions on hover / click — fanning out in\n * `direction` (`up` default). The FAB icon rotates 45° when open (a `+` → `×`) unless an `openIcon` is\n * given. Each `<SpeedDialAction>` is a small circular button with a tooltip label; supply them via the\n * data-driven `actions` prop or as children. Opens on hover (`openOnHover`) and click; closes on\n * outside-pointerdown, Escape (refocusing the FAB), or selecting an action. Controlled (`open` +\n * `onOpenChange`) or uncontrolled (`defaultOpen`). The ref points at the root; position it (e.g.\n * `fixed` bottom-right) via `style`/`className`. The FAB carries `aria-expanded`/`aria-controls`.\n */\nexport const SpeedDial = forwardRef<HTMLDivElement, SpeedDialProps>(function SpeedDial(\n  {\n    ariaLabel,\n    icon = 'Add',\n    openIcon,\n    direction = 'up',\n    color = 'primary',\n    size = 'md',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnHover = true,\n    closeOnActionClick = true,\n    tooltipOpen = false,\n    actions,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const fabRef = useRef<HTMLButtonElement | null>(null)\n  const actionsId = useId()\n\n  const isControlled = open !== undefined\n  const [internal, setInternal] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internal\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n  // keep a stable reference for the document listeners below\n  const setOpenRef = useRef(setOpen)\n  setOpenRef.current = setOpen\n\n  // while open: close on outside pointerdown / Escape (Escape refocuses the FAB)\n  useEffect(() => {\n    if (!isOpen) return\n    const onPointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n        setOpenRef.current(false)\n      }\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false)\n        fabRef.current?.focus()\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  }, [isOpen])\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  const renderIcon = (value: IconName | ReactNode) =>\n    typeof value === 'string' && ICON_NAME_SET.has(value) ? (\n      <Icon name={value as IconName} />\n    ) : (\n      value\n    )\n\n  const ctx: SpeedDialContextValue = {\n    size: ACTION_SIZE[size],\n    placement: TOOLTIP_PLACEMENT[direction],\n    closeOnClick: closeOnActionClick,\n    persistentLabels: tooltipOpen,\n    requestClose: () => setOpen(false),\n  }\n\n  const hoverProps =\n    openOnHover && !disabled\n      ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }\n      : {}\n\n  return (\n    <div\n      ref={setRootRef}\n      className={clsx(styles.speedDial, className)}\n      style={style as CSSProperties}\n      {...hoverProps}\n      {...props}\n    >\n      <div\n        id={actionsId}\n        className={clsx(styles.actions, styles[direction])}\n        data-open={isOpen ? 'true' : 'false'}\n      >\n        <SpeedDialContext.Provider value={ctx}>\n          {actions\n            ? actions.map((action, index) => (\n                <SpeedDialAction\n                  key={action.key ?? index}\n                  icon={action.icon}\n                  label={action.label}\n                  onClick={action.onClick}\n                  disabled={action.disabled}\n                />\n              ))\n            : children}\n        </SpeedDialContext.Provider>\n      </div>\n\n      <IconButton\n        ref={fabRef}\n        rounded\n        variant=\"contained\"\n        color={color}\n        size={size}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={actionsId}\n        className={styles.fab}\n        onClick={() => setOpen(!isOpen)}\n      >\n        <span className={clsx(styles.fabIcon, !openIcon && isOpen && styles.fabIconOpen)}>\n          {isOpen && openIcon != null ? renderIcon(openIcon) : renderIcon(icon)}\n        </span>\n      </IconButton>\n    </div>\n  )\n})\n"],"names":["SpeedDialContext","createContext","useSpeedDial","useContext","ICON_NAME_SET","ICON_NAMES","SpeedDialAction","forwardRef","icon","label","tooltipOpen","hideTooltip","onClick","disabled","className","props","ref","dial","iconNode","jsx","Icon","button","IconButton","clsx","styles","event","placement","jsxs","Tooltip","ACTION_SIZE","TOOLTIP_PLACEMENT","SpeedDial","ariaLabel","openIcon","direction","color","size","open","defaultOpen","onOpenChange","openOnHover","closeOnActionClick","actions","children","style","forwardedRef","rootRef","useRef","fabRef","actionsId","useId","isControlled","internal","setInternal","useState","isOpen","setOpen","next","setOpenRef","useEffect","onPointerDown","onKeyDown","_a","setRootRef","node","renderIcon","value","ctx","hoverProps","action","index"],"mappings":";;;;;;;AAoBO,MAAMA,IAAmBC,EAA4C,IAAI;AAGzE,SAASC,IAA6C;AAC3D,SAAOC,EAAWH,CAAgB;AACpC;;;;;;;;;;;;;;;;GChBMI,KAAgB,IAAI,IAAYC,CAAU,GAqBnCC,KAAkBC;AAAA,EAC7B,SACE,EAAE,MAAAC,GAAM,OAAAC,GAAO,aAAAC,GAAa,aAAAC,IAAc,IAAO,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAClFC,GACA;AACA,UAAMC,IAAOf,EAAA,GACPgB,IACJ,OAAOV,KAAS,YAAYJ,GAAc,IAAII,CAAI,IAAI,gBAAAW,EAACC,GAAA,EAAK,MAAMZ,EAAA,CAAkB,IAAKA,GAErFa,IACJ,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,SAAO;AAAA,QACP,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,OAAMC,KAAA,gBAAAA,EAAM,SAAQ;AAAA,QACpB,UAAAJ;AAAA,QACA,cAAY,OAAOJ,KAAU,WAAWA,IAAQ;AAAA,QAChD,WAAWc,EAAKC,EAAO,QAAQV,CAAS;AAAA,QACxC,SAAS,CAACW,MAAyC;AACjD,UAAAb,KAAA,QAAAA,EAAUa,IACNR,KAAA,QAAAA,EAAM,gBAAcA,EAAK,aAAA;AAAA,QAC/B;AAAA,QACC,GAAGF;AAAA,QAEH,UAAAG;AAAA,MAAA;AAAA,IAAA;AAIL,QAAIT,KAAS,QAAQE,EAAa,QAAOU;AAEzC,UAAMK,KAAYT,KAAA,gBAAAA,EAAM,cAAa;AAGrC,WADmBP,MAAeO,KAAA,gBAAAA,EAAM,qBAAoB,KAGxD,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ;AAAA,UACTC,EAAO;AAAA,UACPE,MAAc,QAAQF,EAAO,WAAWA,EAAO;AAAA,QAAA;AAAA,QAGhD,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAF,EAAC,QAAA,EAAK,WAAWK,EAAO,aAAc,UAAAf,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAMhD,gBAAAU,EAACS,GAAA,EAAQ,SAASnB,GAAO,WAAAiB,GACtB,UAAAL,GACH;AAAA,EAEJ;AACF,GC3DMjB,KAAgB,IAAI,IAAYC,CAAU,GAM1CwB,KAA0D,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAA,GAEpFC,KAAkE;AAAA,EACtE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT,GAsDaC,KAAYxB,EAA2C,SAClE;AAAA,EACE,WAAAyB;AAAA,EACA,MAAAxB,IAAO;AAAA,EACP,UAAAyB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,oBAAAC,IAAqB;AAAA,EACrB,aAAA/B,IAAc;AAAA,EACd,SAAAgC;AAAA,EACA,UAAA7B,IAAW;AAAA,EACX,UAAA8B;AAAA,EACA,WAAA7B;AAAA,EACA,OAAA8B;AAAA,EACA,GAAG7B;AACL,GACA8B,GACA;AACA,QAAMC,IAAUC,EAA8B,IAAI,GAC5CC,IAASD,EAAiC,IAAI,GAC9CE,IAAYC,EAAA,GAEZC,IAAed,MAAS,QACxB,CAACe,GAAUC,CAAW,IAAIC,EAAShB,CAAW,GAC9CiB,IAASJ,IAAed,IAAOe,GAE/BI,IAAU,CAACC,MAAkB;AACjC,IAAKN,KAAcE,EAAYI,CAAI,GACnClB,KAAA,QAAAA,EAAekB;AAAA,EACjB,GAEMC,IAAaX,EAAOS,CAAO;AACjC,EAAAE,EAAW,UAAUF,GAGrBG,EAAU,MAAM;AACd,QAAI,CAACJ,EAAQ;AACb,UAAMK,IAAgB,CAACnC,MAAwB;AAC7C,MAAIqB,EAAQ,WAAW,CAACA,EAAQ,QAAQ,SAASrB,EAAM,MAAc,KACnEiC,EAAW,QAAQ,EAAK;AAAA,IAE5B,GACMG,IAAY,CAACpC,MAAyB;;AAC1C,MAAIA,EAAM,QAAQ,aAChBiC,EAAW,QAAQ,EAAK,IACxBI,IAAAd,EAAO,YAAP,QAAAc,EAAgB;AAAA,IAEpB;AACA,oBAAS,iBAAiB,eAAeF,CAAa,GACtD,SAAS,iBAAiB,WAAWC,CAAS,GACvC,MAAM;AACX,eAAS,oBAAoB,eAAeD,CAAa,GACzD,SAAS,oBAAoB,WAAWC,CAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAACN,CAAM,CAAC;AAEX,QAAMQ,IAAa,CAACC,MAAgC;AAClD,IAAAlB,EAAQ,UAAUkB,GACd,OAAOnB,KAAiB,aAAYA,EAAamB,CAAI,IAChDnB,QAA2B,UAAUmB;AAAA,EAChD,GAEMC,IAAa,CAACC,MAClB,OAAOA,KAAU,YAAY9D,GAAc,IAAI8D,CAAK,IAClD,gBAAA/C,EAACC,GAAA,EAAK,MAAM8C,GAAmB,IAE/BA,GAGEC,IAA6B;AAAA,IACjC,MAAMtC,GAAYO,CAAI;AAAA,IACtB,WAAWN,GAAkBI,CAAS;AAAA,IACtC,cAAcO;AAAA,IACd,kBAAkB/B;AAAA,IAClB,cAAc,MAAM8C,EAAQ,EAAK;AAAA,EAAA,GAG7BY,IACJ5B,KAAe,CAAC3B,IACZ,EAAE,cAAc,MAAM2C,EAAQ,EAAI,GAAG,cAAc,MAAMA,EAAQ,EAAK,EAAA,IACtE,CAAA;AAEN,SACE,gBAAA7B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKoC;AAAA,MACL,WAAWxC,EAAKC,EAAO,WAAWV,CAAS;AAAA,MAC3C,OAAA8B;AAAA,MACC,GAAGwB;AAAA,MACH,GAAGrD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI8B;AAAA,YACJ,WAAW1B,EAAKC,EAAO,SAASA,EAAOU,CAAS,CAAC;AAAA,YACjD,aAAWqB,IAAS,SAAS;AAAA,YAE7B,UAAA,gBAAApC,EAACnB,EAAiB,UAAjB,EAA0B,OAAOmE,GAC/B,UAAAzB,IACGA,EAAQ,IAAI,CAAC2B,GAAQC,MACnB,gBAAAnD;AAAA,cAACb;AAAA,cAAA;AAAA,gBAEC,MAAM+D,EAAO;AAAA,gBACb,OAAOA,EAAO;AAAA,gBACd,SAASA,EAAO;AAAA,gBAChB,UAAUA,EAAO;AAAA,cAAA;AAAA,cAJZA,EAAO,OAAOC;AAAA,YAAA,CAMtB,IACD3B,EAAA,CACN;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAxB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAK0B;AAAA,YACL,SAAO;AAAA,YACP,SAAQ;AAAA,YACR,OAAAb;AAAA,YACA,MAAAC;AAAA,YACA,UAAAvB;AAAA,YACA,cAAYmB;AAAA,YACZ,iBAAc;AAAA,YACd,iBAAeuB;AAAA,YACf,iBAAeN;AAAA,YACf,WAAWzB,EAAO;AAAA,YAClB,SAAS,MAAMgC,EAAQ,CAACD,CAAM;AAAA,YAE9B,UAAA,gBAAApC,EAAC,UAAK,WAAWI,EAAKC,EAAO,SAAS,CAACS,KAAYsB,KAAU/B,EAAO,WAAW,GAC5E,UAAA+B,KAAUtB,KAAY,OAAOgC,EAAWhC,CAAQ,IAAIgC,EAAWzD,CAAI,EAAA,CACtE;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/{SpeedDial-cKvuSMuk.cjs → SpeedDial-D6sO-9ES.cjs}

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),o=require("react"),_=require("clsx"),A=require("./names-C2Yj1p3u.cjs"),C=require("./Icon-CXTl_QAP.cjs"),R=require("./IconButton-DyRC514t.cjs"),G=require("./Tooltip-Ao7az09p.cjs"),M=o.createContext(null);function H(){return o.useContext(M)}const J="_speedDial_1qwl9_4",Q="_fab_1qwl9_9",U="_fabIcon_1qwl9_17",V="_fabIconOpen_1qwl9_21",X="_actions_1qwl9_26",Y="_up_1qwl9_47",ee="_down_1qwl9_53",te="_left_1qwl9_59",ne="_right_1qwl9_65",se="_action_1qwl9_26",oe="_actionWrap_1qwl9_91",ce="_actionLabel_1qwl9_95",re="_labelLeft_1qwl9_110",ae="_labelTop_1qwl9_117",s={speedDial:J,fab:Q,fabIcon:U,fabIconOpen:V,actions:X,up:Y,down:ee,left:te,right:ne,action:se,actionWrap:oe,actionLabel:ce,labelLeft:re,labelTop:ae},le=new Set(A.ICON_NAMES),k=o.forwardRef(function({icon:a,label:c,tooltipOpen:i,hideTooltip:b=!1,onClick:u,disabled:m,className:w,...I},f){const t=H(),N=typeof a=="string"&&le.has(a)?n.jsx(C.Icon,{name:a}):a,p=n.jsx(R.IconButton,{ref:f,rounded:!0,variant:"contained",color:"surface",size:(t==null?void 0:t.size)??"sm",disabled:m,"aria-label":typeof c=="string"?c:void 0,className:_.clsx(s.action,w),onClick:E=>{u==null||u(E),t!=null&&t.closeOnClick&&t.requestClose()},...I,children:N});if(c==null||b)return p;const d=(t==null?void 0:t.placement)??"left";return i??(t==null?void 0:t.persistentLabels)??!1?n.jsxs("span",{className:_.clsx(s.actionWrap,d==="top"?s.labelTop:s.labelLeft),children:[p,n.jsx("span",{className:s.actionLabel,children:c})]}):n.jsx(G.Tooltip,{content:c,placement:d,children:p})}),ie=new Set(A.ICON_NAMES),ue={sm:"sm",md:"sm",lg:"md"},fe={up:"left",down:"left",left:"top",right:"top"},pe=o.forwardRef(function({ariaLabel:a,icon:c="Add",openIcon:i,direction:b="up",color:u="primary",size:m="md",open:w,defaultOpen:I=!1,onOpenChange:f,openOnHover:t=!0,closeOnActionClick:N=!0,tooltipOpen:p=!1,actions:d,disabled:L=!1,children:E,className:P,style:W,...B},q){const S=o.useRef(null),j=o.useRef(null),v=o.useId(),O=w!==void 0,[z,K]=o.useState(I),r=O?w:z,l=e=>{O||K(e),f==null||f(e)},D=o.useRef(l);D.current=l,o.useEffect(()=>{if(!r)return;const e=h=>{S.current&&!S.current.contains(h.target)&&D.current(!1)},x=h=>{var y;h.key==="Escape"&&(D.current(!1),(y=j.current)==null||y.focus())};return document.addEventListener("pointerdown",e),document.addEventListener("keydown",x),()=>{document.removeEventListener("pointerdown",e),document.removeEventListener("keydown",x)}},[r]);const Z=e=>{S.current=e,typeof q=="function"?q(e):q&&(q.current=e)},T=e=>typeof e=="string"&&ie.has(e)?n.jsx(C.Icon,{name:e}):e,$={size:ue[m],placement:fe[b],closeOnClick:N,persistentLabels:p,requestClose:()=>l(!1)},F=t&&!L?{onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1)}:{};return n.jsxs("div",{ref:Z,className:_.clsx(s.speedDial,P),style:W,...F,...B,children:[n.jsx("div",{id:v,className:_.clsx(s.actions,s[b]),"data-open":r?"true":"false",children:n.jsx(M.Provider,{value:$,children:d?d.map((e,x)=>n.jsx(k,{icon:e.icon,label:e.label,onClick:e.onClick,disabled:e.disabled},e.key??x)):E})}),n.jsx(R.IconButton,{ref:j,rounded:!0,variant:"contained",color:u,size:m,disabled:L,"aria-label":a,"aria-haspopup":"true","aria-expanded":r,"aria-controls":v,className:s.fab,onClick:()=>l(!r),children:n.jsx("span",{className:_.clsx(s.fabIcon,!i&&r&&s.fabIconOpen),children:r&&i!=null?T(i):T(c)})})]})});exports.SpeedDial=pe;exports.SpeedDialAction=k;
-//# sourceMappingURL=SpeedDial-cKvuSMuk.cjs.map
+"use strict";const n=require("react/jsx-runtime"),o=require("react"),_=require("clsx"),A=require("./names-BJnFU_5m.cjs"),C=require("./Icon-BVULqOJD.cjs"),R=require("./IconButton-Lv0sDDR9.cjs"),G=require("./Tooltip-Ao7az09p.cjs"),M=o.createContext(null);function H(){return o.useContext(M)}const J="_speedDial_1qwl9_4",Q="_fab_1qwl9_9",U="_fabIcon_1qwl9_17",V="_fabIconOpen_1qwl9_21",X="_actions_1qwl9_26",Y="_up_1qwl9_47",ee="_down_1qwl9_53",te="_left_1qwl9_59",ne="_right_1qwl9_65",se="_action_1qwl9_26",oe="_actionWrap_1qwl9_91",ce="_actionLabel_1qwl9_95",re="_labelLeft_1qwl9_110",ae="_labelTop_1qwl9_117",s={speedDial:J,fab:Q,fabIcon:U,fabIconOpen:V,actions:X,up:Y,down:ee,left:te,right:ne,action:se,actionWrap:oe,actionLabel:ce,labelLeft:re,labelTop:ae},le=new Set(A.ICON_NAMES),k=o.forwardRef(function({icon:a,label:c,tooltipOpen:i,hideTooltip:b=!1,onClick:u,disabled:m,className:w,...I},f){const t=H(),N=typeof a=="string"&&le.has(a)?n.jsx(C.Icon,{name:a}):a,p=n.jsx(R.IconButton,{ref:f,rounded:!0,variant:"contained",color:"surface",size:(t==null?void 0:t.size)??"sm",disabled:m,"aria-label":typeof c=="string"?c:void 0,className:_.clsx(s.action,w),onClick:E=>{u==null||u(E),t!=null&&t.closeOnClick&&t.requestClose()},...I,children:N});if(c==null||b)return p;const d=(t==null?void 0:t.placement)??"left";return i??(t==null?void 0:t.persistentLabels)??!1?n.jsxs("span",{className:_.clsx(s.actionWrap,d==="top"?s.labelTop:s.labelLeft),children:[p,n.jsx("span",{className:s.actionLabel,children:c})]}):n.jsx(G.Tooltip,{content:c,placement:d,children:p})}),ie=new Set(A.ICON_NAMES),ue={sm:"sm",md:"sm",lg:"md"},fe={up:"left",down:"left",left:"top",right:"top"},pe=o.forwardRef(function({ariaLabel:a,icon:c="Add",openIcon:i,direction:b="up",color:u="primary",size:m="md",open:w,defaultOpen:I=!1,onOpenChange:f,openOnHover:t=!0,closeOnActionClick:N=!0,tooltipOpen:p=!1,actions:d,disabled:L=!1,children:E,className:P,style:W,...B},q){const S=o.useRef(null),j=o.useRef(null),v=o.useId(),O=w!==void 0,[z,K]=o.useState(I),r=O?w:z,l=e=>{O||K(e),f==null||f(e)},D=o.useRef(l);D.current=l,o.useEffect(()=>{if(!r)return;const e=h=>{S.current&&!S.current.contains(h.target)&&D.current(!1)},x=h=>{var y;h.key==="Escape"&&(D.current(!1),(y=j.current)==null||y.focus())};return document.addEventListener("pointerdown",e),document.addEventListener("keydown",x),()=>{document.removeEventListener("pointerdown",e),document.removeEventListener("keydown",x)}},[r]);const Z=e=>{S.current=e,typeof q=="function"?q(e):q&&(q.current=e)},T=e=>typeof e=="string"&&ie.has(e)?n.jsx(C.Icon,{name:e}):e,$={size:ue[m],placement:fe[b],closeOnClick:N,persistentLabels:p,requestClose:()=>l(!1)},F=t&&!L?{onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1)}:{};return n.jsxs("div",{ref:Z,className:_.clsx(s.speedDial,P),style:W,...F,...B,children:[n.jsx("div",{id:v,className:_.clsx(s.actions,s[b]),"data-open":r?"true":"false",children:n.jsx(M.Provider,{value:$,children:d?d.map((e,x)=>n.jsx(k,{icon:e.icon,label:e.label,onClick:e.onClick,disabled:e.disabled},e.key??x)):E})}),n.jsx(R.IconButton,{ref:j,rounded:!0,variant:"contained",color:u,size:m,disabled:L,"aria-label":a,"aria-haspopup":"true","aria-expanded":r,"aria-controls":v,className:s.fab,onClick:()=>l(!r),children:n.jsx("span",{className:_.clsx(s.fabIcon,!i&&r&&s.fabIconOpen),children:r&&i!=null?T(i):T(c)})})]})});exports.SpeedDial=pe;exports.SpeedDialAction=k;
+//# sourceMappingURL=SpeedDial-D6sO-9ES.cjs.map

package/dist/{SpeedDial-cKvuSMuk.cjs.map → SpeedDial-D6sO-9ES.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SpeedDial-cKvuSMuk.cjs","sources":["../src/components/SpeedDial/speedDialContext.ts","../src/components/SpeedDial/SpeedDialAction.tsx","../src/components/SpeedDial/SpeedDial.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { TooltipPlacement } from '../Tooltip'\n\n/** Action button size — one step smaller than the dial's FAB. */\nexport type SpeedDialActionSize = 'sm' | 'md' | 'lg'\n\n/** Shared state a `<SpeedDial>` hands down to its `<SpeedDialAction>` children via context. */\nexport interface SpeedDialContextValue {\n  /** Size for the action FABs. */\n  size: SpeedDialActionSize\n  /** Where each action's tooltip label sits (derived from the dial `direction`). */\n  placement: TooltipPlacement\n  /** Close the dial after an action is clicked. */\n  closeOnClick: boolean\n  /** Show every action's label persistently (no hover needed) while the dial is open. */\n  persistentLabels: boolean\n  /** Request the dial to close (called by an action on click). */\n  requestClose: () => void\n}\n\nexport const SpeedDialContext = createContext<SpeedDialContextValue | null>(null)\n\n/** Read the surrounding `<SpeedDial>` (or `null` when an action is rendered standalone). */\nexport function useSpeedDial(): SpeedDialContextValue | null {\n  return useContext(SpeedDialContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Tooltip } from '../Tooltip'\nimport { useSpeedDial } from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface SpeedDialActionProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color'\n> {\n  /** Action icon — a known `IconName` or any node. */\n  icon: IconName | ReactNode\n  /** Label shown as a tooltip beside the action (also its `aria-label` when a string). */\n  label?: ReactNode\n  /** Show the label persistently (no hover) while the dial is open — overrides the dial's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Hide the tooltip / persistent label (still used for `aria-label`). */\n  hideTooltip?: boolean\n}\n\n/**\n * One action inside a `<SpeedDial>` — a small circular `IconButton` (surface-tinted) with a tooltip\n * `label`. It reads the dial via context for its size, tooltip placement and close-on-click; clicking\n * runs `onClick` then closes the dial. The ref points at the `<button>`.\n */\nexport const SpeedDialAction = forwardRef<HTMLButtonElement, SpeedDialActionProps>(\n  function SpeedDialAction(\n    { icon, label, tooltipOpen, hideTooltip = false, onClick, disabled, className, ...props },\n    ref,\n  ) {\n    const dial = useSpeedDial()\n    const iconNode =\n      typeof icon === 'string' && ICON_NAME_SET.has(icon) ? <Icon name={icon as IconName} /> : icon\n\n    const button = (\n      <IconButton\n        ref={ref}\n        rounded\n        variant=\"contained\"\n        color=\"surface\"\n        size={dial?.size ?? 'sm'}\n        disabled={disabled}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={clsx(styles.action, className)}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (dial?.closeOnClick) dial.requestClose()\n        }}\n        {...props}\n      >\n        {iconNode}\n      </IconButton>\n    )\n\n    if (label == null || hideTooltip) return button\n\n    const placement = dial?.placement ?? 'left'\n    // persistent label: render a static label beside the button (no hover) — like MUI's tooltipOpen\n    const persistent = tooltipOpen ?? dial?.persistentLabels ?? false\n    if (persistent) {\n      return (\n        <span\n          className={clsx(\n            styles.actionWrap,\n            placement === 'top' ? styles.labelTop : styles.labelLeft,\n          )}\n        >\n          {button}\n          <span className={styles.actionLabel}>{label}</span>\n        </span>\n      )\n    }\n\n    return (\n      <Tooltip content={label} placement={placement}>\n        {button}\n      </Tooltip>\n    )\n  },\n)\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport type { ThemeColor } from '../../theme'\nimport type { TooltipPlacement } from '../Tooltip'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { SpeedDialAction } from './SpeedDialAction'\nimport {\n  SpeedDialContext,\n  type SpeedDialActionSize,\n  type SpeedDialContextValue,\n} from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type SpeedDialSize = 'sm' | 'md' | 'lg'\nexport type SpeedDialDirection = 'up' | 'down' | 'left' | 'right'\n\n/** The FAB size → the (smaller) action-button size. */\nconst ACTION_SIZE: Record<SpeedDialSize, SpeedDialActionSize> = { sm: 'sm', md: 'sm', lg: 'md' }\n/** Tooltip side per direction — labels sit left of a vertical dial, above a horizontal one. */\nconst TOOLTIP_PLACEMENT: Record<SpeedDialDirection, TooltipPlacement> = {\n  up: 'left',\n  down: 'left',\n  left: 'top',\n  right: 'top',\n}\n\n/** A data-driven action for the `actions` prop. */\nexport interface SpeedDialActionItem {\n  /** Stable key (falls back to the index). */\n  key?: string\n  icon: IconName | ReactNode\n  label?: ReactNode\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n}\n\nexport interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {\n  /** Accessible label for the FAB (required — it's icon-only). */\n  ariaLabel: string\n  /** FAB icon. Defaults to `Add` (a `+`). */\n  icon?: IconName | ReactNode\n  /** Icon shown while open. Omit to rotate the `icon` 45° instead (a `+` becomes a `×`). */\n  openIcon?: IconName | ReactNode\n  /** Which way the actions fan out. Defaults to `up`. */\n  direction?: SpeedDialDirection\n  /** Theme palette token tinting the FAB. Defaults to `primary`. */\n  color?: ThemeColor\n  /** FAB size (actions render one step smaller). Defaults to `md`. */\n  size?: SpeedDialSize\n  /** Controlled open state. */\n  open?: boolean\n  /** Initial open state for uncontrolled use. Defaults to `false`. */\n  defaultOpen?: boolean\n  /** Fires with the next open state. */\n  onOpenChange?: (open: boolean) => void\n  /** Open on hover (also opens on click). Defaults to `true`. */\n  openOnHover?: boolean\n  /** Close the dial after an action is clicked. Defaults to `true`. */\n  closeOnActionClick?: boolean\n  /** Show every action's label persistently while open (no hover needed) — like MUI's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Data-driven actions — an alternative to `<SpeedDialAction>` children. */\n  actions?: SpeedDialActionItem[]\n  /** Disables the FAB (and hover-opening). */\n  disabled?: boolean\n  /** `<SpeedDialAction>` children (used when `actions` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A floating action button that reveals a set of related actions on hover / click — fanning out in\n * `direction` (`up` default). The FAB icon rotates 45° when open (a `+` → `×`) unless an `openIcon` is\n * given. Each `<SpeedDialAction>` is a small circular button with a tooltip label; supply them via the\n * data-driven `actions` prop or as children. Opens on hover (`openOnHover`) and click; closes on\n * outside-pointerdown, Escape (refocusing the FAB), or selecting an action. Controlled (`open` +\n * `onOpenChange`) or uncontrolled (`defaultOpen`). The ref points at the root; position it (e.g.\n * `fixed` bottom-right) via `style`/`className`. The FAB carries `aria-expanded`/`aria-controls`.\n */\nexport const SpeedDial = forwardRef<HTMLDivElement, SpeedDialProps>(function SpeedDial(\n  {\n    ariaLabel,\n    icon = 'Add',\n    openIcon,\n    direction = 'up',\n    color = 'primary',\n    size = 'md',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnHover = true,\n    closeOnActionClick = true,\n    tooltipOpen = false,\n    actions,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const fabRef = useRef<HTMLButtonElement | null>(null)\n  const actionsId = useId()\n\n  const isControlled = open !== undefined\n  const [internal, setInternal] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internal\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n  // keep a stable reference for the document listeners below\n  const setOpenRef = useRef(setOpen)\n  setOpenRef.current = setOpen\n\n  // while open: close on outside pointerdown / Escape (Escape refocuses the FAB)\n  useEffect(() => {\n    if (!isOpen) return\n    const onPointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n        setOpenRef.current(false)\n      }\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false)\n        fabRef.current?.focus()\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  }, [isOpen])\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  const renderIcon = (value: IconName | ReactNode) =>\n    typeof value === 'string' && ICON_NAME_SET.has(value) ? (\n      <Icon name={value as IconName} />\n    ) : (\n      value\n    )\n\n  const ctx: SpeedDialContextValue = {\n    size: ACTION_SIZE[size],\n    placement: TOOLTIP_PLACEMENT[direction],\n    closeOnClick: closeOnActionClick,\n    persistentLabels: tooltipOpen,\n    requestClose: () => setOpen(false),\n  }\n\n  const hoverProps =\n    openOnHover && !disabled\n      ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }\n      : {}\n\n  return (\n    <div\n      ref={setRootRef}\n      className={clsx(styles.speedDial, className)}\n      style={style as CSSProperties}\n      {...hoverProps}\n      {...props}\n    >\n      <div\n        id={actionsId}\n        className={clsx(styles.actions, styles[direction])}\n        data-open={isOpen ? 'true' : 'false'}\n      >\n        <SpeedDialContext.Provider value={ctx}>\n          {actions\n            ? actions.map((action, index) => (\n                <SpeedDialAction\n                  key={action.key ?? index}\n                  icon={action.icon}\n                  label={action.label}\n                  onClick={action.onClick}\n                  disabled={action.disabled}\n                />\n              ))\n            : children}\n        </SpeedDialContext.Provider>\n      </div>\n\n      <IconButton\n        ref={fabRef}\n        rounded\n        variant=\"contained\"\n        color={color}\n        size={size}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={actionsId}\n        className={styles.fab}\n        onClick={() => setOpen(!isOpen)}\n      >\n        <span className={clsx(styles.fabIcon, !openIcon && isOpen && styles.fabIconOpen)}>\n          {isOpen && openIcon != null ? renderIcon(openIcon) : renderIcon(icon)}\n        </span>\n      </IconButton>\n    </div>\n  )\n})\n"],"names":["SpeedDialContext","createContext","useSpeedDial","useContext","ICON_NAME_SET","ICON_NAMES","SpeedDialAction","forwardRef","icon","label","tooltipOpen","hideTooltip","onClick","disabled","className","props","ref","dial","iconNode","jsx","Icon","button","IconButton","clsx","styles","event","placement","jsxs","Tooltip","ACTION_SIZE","TOOLTIP_PLACEMENT","SpeedDial","ariaLabel","openIcon","direction","color","size","open","defaultOpen","onOpenChange","openOnHover","closeOnActionClick","actions","children","style","forwardedRef","rootRef","useRef","fabRef","actionsId","useId","isControlled","internal","setInternal","useState","isOpen","setOpen","next","setOpenRef","useEffect","onPointerDown","onKeyDown","_a","setRootRef","node","renderIcon","value","ctx","hoverProps","action","index"],"mappings":"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"}
+{"version":3,"file":"SpeedDial-D6sO-9ES.cjs","sources":["../src/components/SpeedDial/speedDialContext.ts","../src/components/SpeedDial/SpeedDialAction.tsx","../src/components/SpeedDial/SpeedDial.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { TooltipPlacement } from '../Tooltip'\n\n/** Action button size — one step smaller than the dial's FAB. */\nexport type SpeedDialActionSize = 'sm' | 'md' | 'lg'\n\n/** Shared state a `<SpeedDial>` hands down to its `<SpeedDialAction>` children via context. */\nexport interface SpeedDialContextValue {\n  /** Size for the action FABs. */\n  size: SpeedDialActionSize\n  /** Where each action's tooltip label sits (derived from the dial `direction`). */\n  placement: TooltipPlacement\n  /** Close the dial after an action is clicked. */\n  closeOnClick: boolean\n  /** Show every action's label persistently (no hover needed) while the dial is open. */\n  persistentLabels: boolean\n  /** Request the dial to close (called by an action on click). */\n  requestClose: () => void\n}\n\nexport const SpeedDialContext = createContext<SpeedDialContextValue | null>(null)\n\n/** Read the surrounding `<SpeedDial>` (or `null` when an action is rendered standalone). */\nexport function useSpeedDial(): SpeedDialContextValue | null {\n  return useContext(SpeedDialContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Tooltip } from '../Tooltip'\nimport { useSpeedDial } from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface SpeedDialActionProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color'\n> {\n  /** Action icon — a known `IconName` or any node. */\n  icon: IconName | ReactNode\n  /** Label shown as a tooltip beside the action (also its `aria-label` when a string). */\n  label?: ReactNode\n  /** Show the label persistently (no hover) while the dial is open — overrides the dial's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Hide the tooltip / persistent label (still used for `aria-label`). */\n  hideTooltip?: boolean\n}\n\n/**\n * One action inside a `<SpeedDial>` — a small circular `IconButton` (surface-tinted) with a tooltip\n * `label`. It reads the dial via context for its size, tooltip placement and close-on-click; clicking\n * runs `onClick` then closes the dial. The ref points at the `<button>`.\n */\nexport const SpeedDialAction = forwardRef<HTMLButtonElement, SpeedDialActionProps>(\n  function SpeedDialAction(\n    { icon, label, tooltipOpen, hideTooltip = false, onClick, disabled, className, ...props },\n    ref,\n  ) {\n    const dial = useSpeedDial()\n    const iconNode =\n      typeof icon === 'string' && ICON_NAME_SET.has(icon) ? <Icon name={icon as IconName} /> : icon\n\n    const button = (\n      <IconButton\n        ref={ref}\n        rounded\n        variant=\"contained\"\n        color=\"surface\"\n        size={dial?.size ?? 'sm'}\n        disabled={disabled}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={clsx(styles.action, className)}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (dial?.closeOnClick) dial.requestClose()\n        }}\n        {...props}\n      >\n        {iconNode}\n      </IconButton>\n    )\n\n    if (label == null || hideTooltip) return button\n\n    const placement = dial?.placement ?? 'left'\n    // persistent label: render a static label beside the button (no hover) — like MUI's tooltipOpen\n    const persistent = tooltipOpen ?? dial?.persistentLabels ?? false\n    if (persistent) {\n      return (\n        <span\n          className={clsx(\n            styles.actionWrap,\n            placement === 'top' ? styles.labelTop : styles.labelLeft,\n          )}\n        >\n          {button}\n          <span className={styles.actionLabel}>{label}</span>\n        </span>\n      )\n    }\n\n    return (\n      <Tooltip content={label} placement={placement}>\n        {button}\n      </Tooltip>\n    )\n  },\n)\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport type { ThemeColor } from '../../theme'\nimport type { TooltipPlacement } from '../Tooltip'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { SpeedDialAction } from './SpeedDialAction'\nimport {\n  SpeedDialContext,\n  type SpeedDialActionSize,\n  type SpeedDialContextValue,\n} from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type SpeedDialSize = 'sm' | 'md' | 'lg'\nexport type SpeedDialDirection = 'up' | 'down' | 'left' | 'right'\n\n/** The FAB size → the (smaller) action-button size. */\nconst ACTION_SIZE: Record<SpeedDialSize, SpeedDialActionSize> = { sm: 'sm', md: 'sm', lg: 'md' }\n/** Tooltip side per direction — labels sit left of a vertical dial, above a horizontal one. */\nconst TOOLTIP_PLACEMENT: Record<SpeedDialDirection, TooltipPlacement> = {\n  up: 'left',\n  down: 'left',\n  left: 'top',\n  right: 'top',\n}\n\n/** A data-driven action for the `actions` prop. */\nexport interface SpeedDialActionItem {\n  /** Stable key (falls back to the index). */\n  key?: string\n  icon: IconName | ReactNode\n  label?: ReactNode\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n}\n\nexport interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {\n  /** Accessible label for the FAB (required — it's icon-only). */\n  ariaLabel: string\n  /** FAB icon. Defaults to `Add` (a `+`). */\n  icon?: IconName | ReactNode\n  /** Icon shown while open. Omit to rotate the `icon` 45° instead (a `+` becomes a `×`). */\n  openIcon?: IconName | ReactNode\n  /** Which way the actions fan out. Defaults to `up`. */\n  direction?: SpeedDialDirection\n  /** Theme palette token tinting the FAB. Defaults to `primary`. */\n  color?: ThemeColor\n  /** FAB size (actions render one step smaller). Defaults to `md`. */\n  size?: SpeedDialSize\n  /** Controlled open state. */\n  open?: boolean\n  /** Initial open state for uncontrolled use. Defaults to `false`. */\n  defaultOpen?: boolean\n  /** Fires with the next open state. */\n  onOpenChange?: (open: boolean) => void\n  /** Open on hover (also opens on click). Defaults to `true`. */\n  openOnHover?: boolean\n  /** Close the dial after an action is clicked. Defaults to `true`. */\n  closeOnActionClick?: boolean\n  /** Show every action's label persistently while open (no hover needed) — like MUI's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Data-driven actions — an alternative to `<SpeedDialAction>` children. */\n  actions?: SpeedDialActionItem[]\n  /** Disables the FAB (and hover-opening). */\n  disabled?: boolean\n  /** `<SpeedDialAction>` children (used when `actions` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A floating action button that reveals a set of related actions on hover / click — fanning out in\n * `direction` (`up` default). The FAB icon rotates 45° when open (a `+` → `×`) unless an `openIcon` is\n * given. Each `<SpeedDialAction>` is a small circular button with a tooltip label; supply them via the\n * data-driven `actions` prop or as children. Opens on hover (`openOnHover`) and click; closes on\n * outside-pointerdown, Escape (refocusing the FAB), or selecting an action. Controlled (`open` +\n * `onOpenChange`) or uncontrolled (`defaultOpen`). The ref points at the root; position it (e.g.\n * `fixed` bottom-right) via `style`/`className`. The FAB carries `aria-expanded`/`aria-controls`.\n */\nexport const SpeedDial = forwardRef<HTMLDivElement, SpeedDialProps>(function SpeedDial(\n  {\n    ariaLabel,\n    icon = 'Add',\n    openIcon,\n    direction = 'up',\n    color = 'primary',\n    size = 'md',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnHover = true,\n    closeOnActionClick = true,\n    tooltipOpen = false,\n    actions,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const fabRef = useRef<HTMLButtonElement | null>(null)\n  const actionsId = useId()\n\n  const isControlled = open !== undefined\n  const [internal, setInternal] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internal\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n  // keep a stable reference for the document listeners below\n  const setOpenRef = useRef(setOpen)\n  setOpenRef.current = setOpen\n\n  // while open: close on outside pointerdown / Escape (Escape refocuses the FAB)\n  useEffect(() => {\n    if (!isOpen) return\n    const onPointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n        setOpenRef.current(false)\n      }\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false)\n        fabRef.current?.focus()\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  }, [isOpen])\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  const renderIcon = (value: IconName | ReactNode) =>\n    typeof value === 'string' && ICON_NAME_SET.has(value) ? (\n      <Icon name={value as IconName} />\n    ) : (\n      value\n    )\n\n  const ctx: SpeedDialContextValue = {\n    size: ACTION_SIZE[size],\n    placement: TOOLTIP_PLACEMENT[direction],\n    closeOnClick: closeOnActionClick,\n    persistentLabels: tooltipOpen,\n    requestClose: () => setOpen(false),\n  }\n\n  const hoverProps =\n    openOnHover && !disabled\n      ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }\n      : {}\n\n  return (\n    <div\n      ref={setRootRef}\n      className={clsx(styles.speedDial, className)}\n      style={style as CSSProperties}\n      {...hoverProps}\n      {...props}\n    >\n      <div\n        id={actionsId}\n        className={clsx(styles.actions, styles[direction])}\n        data-open={isOpen ? 'true' : 'false'}\n      >\n        <SpeedDialContext.Provider value={ctx}>\n          {actions\n            ? actions.map((action, index) => (\n                <SpeedDialAction\n                  key={action.key ?? index}\n                  icon={action.icon}\n                  label={action.label}\n                  onClick={action.onClick}\n                  disabled={action.disabled}\n                />\n              ))\n            : children}\n        </SpeedDialContext.Provider>\n      </div>\n\n      <IconButton\n        ref={fabRef}\n        rounded\n        variant=\"contained\"\n        color={color}\n        size={size}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={actionsId}\n        className={styles.fab}\n        onClick={() => setOpen(!isOpen)}\n      >\n        <span className={clsx(styles.fabIcon, !openIcon && isOpen && styles.fabIconOpen)}>\n          {isOpen && openIcon != null ? renderIcon(openIcon) : renderIcon(icon)}\n        </span>\n      </IconButton>\n    </div>\n  )\n})\n"],"names":["SpeedDialContext","createContext","useSpeedDial","useContext","ICON_NAME_SET","ICON_NAMES","SpeedDialAction","forwardRef","icon","label","tooltipOpen","hideTooltip","onClick","disabled","className","props","ref","dial","iconNode","jsx","Icon","button","IconButton","clsx","styles","event","placement","jsxs","Tooltip","ACTION_SIZE","TOOLTIP_PLACEMENT","SpeedDial","ariaLabel","openIcon","direction","color","size","open","defaultOpen","onOpenChange","openOnHover","closeOnActionClick","actions","children","style","forwardedRef","rootRef","useRef","fabRef","actionsId","useId","isControlled","internal","setInternal","useState","isOpen","setOpen","next","setOpenRef","useEffect","onPointerDown","onKeyDown","_a","setRootRef","node","renderIcon","value","ctx","hoverProps","action","index"],"mappings":"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"}

package/dist/{Stepper-BxGrP6JZ.js → Stepper-BaEOUnYe.js}

@@ -1,9 +1,9 @@
 import { jsxs as b, jsx as r, Fragment as H } from "react/jsx-runtime";
 import { forwardRef as tt, useCallback as y, useState as nt, useRef as p, useEffect as I } from "react";
 import { clsx as L } from "clsx";
-import { a as et } from "./names-D8ABK2Wk.js";
-import { I as O } from "./Icon-CophpkHo.js";
-import { j as ot } from "./ConfigProvider-DDuIJSM7.js";
+import { a as et } from "./names-r21QPjcU.js";
+import { I as O } from "./Icon-DaTvzLBu.js";
+import { j as ot } from "./ConfigProvider-DT0yrgmd.js";
 const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", st = "_vertical_1xfvk_24", at = "_sm_1xfvk_29", it = "_md_1xfvk_34", dt = "_lg_1xfvk_39", ft = "_step_1xfvk_47", ut = "_disabled_1xfvk_64", _t = "_main_1xfvk_69", mt = "_indicator_1xfvk_99", vt = "_number_1xfvk_125", ht = "_completed_1xfvk_130", bt = "_active_1xfvk_136", pt = "_error_1xfvk_144", xt = "_text_1xfvk_151", wt = "_label_1xfvk_167", kt = "_description_1xfvk_181", Nt = "_optional_1xfvk_186", gt = "_connector_1xfvk_193", yt = "_done_1xfvk_198", It = "_panel_1xfvk_224", Lt = "_stepContent_1xfvk_228", e = {
   root: rt,
   list: ct,
@@ -162,4 +162,4 @@ const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", s
 export {
   Pt as S
 };
-//# sourceMappingURL=Stepper-BxGrP6JZ.js.map
+//# sourceMappingURL=Stepper-BaEOUnYe.js.map

package/dist/{Stepper-BxGrP6JZ.js.map → Stepper-BaEOUnYe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Stepper-BxGrP6JZ.js","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}
+{"version":3,"file":"Stepper-BaEOUnYe.js","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}

package/dist/{Stepper-Db_ALAc4.cjs → Stepper-CVY8NJEI.cjs}

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),o=require("react"),j=require("clsx"),X=require("./names-C2Yj1p3u.cjs"),A=require("./Icon-CXTl_QAP.cjs"),Y=require("./ConfigProvider-h1WoGC3R.cjs"),Z="_root_1xfvk_2",H="_list_1xfvk_5",ee="_horizontal_1xfvk_11",ne="_vertical_1xfvk_24",te="_sm_1xfvk_29",se="_md_1xfvk_34",re="_lg_1xfvk_39",ce="_step_1xfvk_47",oe="_disabled_1xfvk_64",le="_main_1xfvk_69",ie="_indicator_1xfvk_99",ae="_number_1xfvk_125",de="_completed_1xfvk_130",ue="_active_1xfvk_136",fe="_error_1xfvk_144",_e="_text_1xfvk_151",me="_label_1xfvk_167",ve="_description_1xfvk_181",xe="_optional_1xfvk_186",he="_connector_1xfvk_193",be="_done_1xfvk_198",we="_panel_1xfvk_224",pe="_stepContent_1xfvk_228",t={root:Z,list:H,horizontal:ee,vertical:ne,sm:te,md:se,lg:re,step:ce,disabled:oe,main:le,indicator:ie,number:ae,completed:de,active:ue,error:fe,text:_e,label:me,description:ve,optional:xe,connector:he,done:be,panel:we,stepContent:pe},ke=new Set(X.ICON_NAMES),Ne=o.forwardRef(function({steps:a,activeStep:f,defaultStep:g,onStepChange:u,queryKey:y,pushHistory:R=!1,orientation:_="horizontal",size:b="md",color:I="primary",onStepClick:m,"aria-label":M,className:B,style:K},O){var P;const E=_==="vertical",T=m!=null,U=Y.useStepQueryKey(),l=y===!0?U:y||void 0,v=o.useCallback(e=>e!=null&&Number.isInteger(e)&&e>=0&&e<a.length&&!a[e].disabled,[a]),w=o.useCallback(()=>{if(!l||typeof window>"u")return null;const e=new URLSearchParams(window.location.search).get(l);return e!=null&&/^\d+$/.test(e)?Number(e)-1:null},[l]),W=Math.max(a.findIndex(e=>!e.disabled),0),[F,L]=o.useState(()=>{const e=w();return v(e)?e:v(g)?g:W}),q=f!==void 0,r=q?f:F,p=o.useRef(r);p.current=r;const x=o.useRef(u);x.current=u;const k=o.useRef(!1),z=o.useCallback((e,n)=>{if(!l||typeof window>"u")return;const c=new URLSearchParams(window.location.search),i=String(e+1);if(c.get(l)===i)return;c.set(l,i);const d=`${window.location.pathname}?${c.toString()}${window.location.hash}`;window.history[n?"pushState":"replaceState"](window.history.state,"",d)},[l]),D=e=>{e!==p.current&&(k.current=!0,q||L(e),u==null||u(e))};o.useEffect(()=>{if(!l||typeof window>"u"||!Number.isInteger(r)||r<0||r>=a.length)return;const e=k.current&&R;k.current=!1,z(r,e)},[l,r,R,z,a.length]),o.useEffect(()=>{if(!l||typeof window>"u")return;const e=()=>{var c;const n=w();v(n)&&n!==p.current&&(f===void 0&&L(n),(c=x.current)==null||c.call(x,n))};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[l,w,v,f]);const $=(P=a[r])==null?void 0:P.content,C=o.useRef(null);o.useEffect(()=>{if(_==="vertical")return;const e=C.current,n=e==null?void 0:e.children[r];if(!e||!n)return;const c=e.getBoundingClientRect(),i=n.getBoundingClientRect(),d=i.left-c.left+e.scrollLeft,h=d+i.width;d<e.scrollLeft?e.scrollLeft=d:h>e.scrollLeft+e.clientWidth&&(e.scrollLeft=h-e.clientWidth)},[r,_]);const G=e=>typeof e=="string"&&ke.has(e)?s.jsx(A.Icon,{name:e,size:b}):e;return s.jsxs("div",{ref:O,className:j.clsx(t.root,t[_],t[b],B),style:{"--tz-btn-rgb":`var(--tz-color-${I}-rgb)`,"--tz-btn-on":`var(--tz-color-${I}-contrast, #fff)`,...K},children:[s.jsx("ol",{ref:C,"aria-label":M,className:t.list,children:a.map((e,n)=>{const c=!!e.error,i=!c&&(e.completed||n<r),d=!c&&!i&&n===r,h=c?"error":i?"completed":d?"active":"upcoming",J=n===a.length-1,N=G(e.icon),S=N??(i?s.jsx(A.Icon,{name:"Check",size:b}):s.jsx("span",{className:t.number,children:n+1})),V=e.label!=null||e.description!=null||e.optional!=null,Q=s.jsxs(s.Fragment,{children:[s.jsx("span",{className:t.indicator,"aria-hidden":N==null&&!i?void 0:!0,children:S}),V&&s.jsxs("span",{className:t.text,children:[e.label!=null&&s.jsx("span",{className:t.label,children:e.label}),e.description!=null&&s.jsx("span",{className:t.description,children:e.description}),e.optional!=null&&s.jsx("span",{className:t.optional,children:e.optional})]})]});return s.jsxs("li",{className:j.clsx(t.step,t[h],e.disabled&&t.disabled),children:[T?s.jsx("button",{type:"button",className:t.main,disabled:e.disabled,"aria-current":d?"step":void 0,onClick:()=>{m==null||m(n),D(n)},children:Q}):s.jsx("div",{className:t.main,"aria-current":d?"step":void 0,children:Q}),!J&&s.jsx("span",{className:j.clsx(t.connector,n<r&&t.done),"aria-hidden":"true"}),E&&n===r&&e.content!=null&&s.jsx("div",{className:t.stepContent,children:e.content})]},n)})}),!E&&$!=null&&s.jsx("div",{className:t.panel,children:$})]})});exports.Stepper=Ne;
-//# sourceMappingURL=Stepper-Db_ALAc4.cjs.map
+"use strict";const s=require("react/jsx-runtime"),o=require("react"),j=require("clsx"),X=require("./names-BJnFU_5m.cjs"),A=require("./Icon-BVULqOJD.cjs"),Y=require("./ConfigProvider-C7DUWHrb.cjs"),Z="_root_1xfvk_2",H="_list_1xfvk_5",ee="_horizontal_1xfvk_11",ne="_vertical_1xfvk_24",te="_sm_1xfvk_29",se="_md_1xfvk_34",re="_lg_1xfvk_39",ce="_step_1xfvk_47",oe="_disabled_1xfvk_64",le="_main_1xfvk_69",ie="_indicator_1xfvk_99",ae="_number_1xfvk_125",de="_completed_1xfvk_130",ue="_active_1xfvk_136",fe="_error_1xfvk_144",_e="_text_1xfvk_151",me="_label_1xfvk_167",ve="_description_1xfvk_181",xe="_optional_1xfvk_186",he="_connector_1xfvk_193",be="_done_1xfvk_198",we="_panel_1xfvk_224",pe="_stepContent_1xfvk_228",t={root:Z,list:H,horizontal:ee,vertical:ne,sm:te,md:se,lg:re,step:ce,disabled:oe,main:le,indicator:ie,number:ae,completed:de,active:ue,error:fe,text:_e,label:me,description:ve,optional:xe,connector:he,done:be,panel:we,stepContent:pe},ke=new Set(X.ICON_NAMES),Ne=o.forwardRef(function({steps:a,activeStep:f,defaultStep:g,onStepChange:u,queryKey:y,pushHistory:R=!1,orientation:_="horizontal",size:b="md",color:I="primary",onStepClick:m,"aria-label":M,className:B,style:K},O){var P;const E=_==="vertical",T=m!=null,U=Y.useStepQueryKey(),l=y===!0?U:y||void 0,v=o.useCallback(e=>e!=null&&Number.isInteger(e)&&e>=0&&e<a.length&&!a[e].disabled,[a]),w=o.useCallback(()=>{if(!l||typeof window>"u")return null;const e=new URLSearchParams(window.location.search).get(l);return e!=null&&/^\d+$/.test(e)?Number(e)-1:null},[l]),W=Math.max(a.findIndex(e=>!e.disabled),0),[F,L]=o.useState(()=>{const e=w();return v(e)?e:v(g)?g:W}),q=f!==void 0,r=q?f:F,p=o.useRef(r);p.current=r;const x=o.useRef(u);x.current=u;const k=o.useRef(!1),z=o.useCallback((e,n)=>{if(!l||typeof window>"u")return;const c=new URLSearchParams(window.location.search),i=String(e+1);if(c.get(l)===i)return;c.set(l,i);const d=`${window.location.pathname}?${c.toString()}${window.location.hash}`;window.history[n?"pushState":"replaceState"](window.history.state,"",d)},[l]),D=e=>{e!==p.current&&(k.current=!0,q||L(e),u==null||u(e))};o.useEffect(()=>{if(!l||typeof window>"u"||!Number.isInteger(r)||r<0||r>=a.length)return;const e=k.current&&R;k.current=!1,z(r,e)},[l,r,R,z,a.length]),o.useEffect(()=>{if(!l||typeof window>"u")return;const e=()=>{var c;const n=w();v(n)&&n!==p.current&&(f===void 0&&L(n),(c=x.current)==null||c.call(x,n))};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[l,w,v,f]);const $=(P=a[r])==null?void 0:P.content,C=o.useRef(null);o.useEffect(()=>{if(_==="vertical")return;const e=C.current,n=e==null?void 0:e.children[r];if(!e||!n)return;const c=e.getBoundingClientRect(),i=n.getBoundingClientRect(),d=i.left-c.left+e.scrollLeft,h=d+i.width;d<e.scrollLeft?e.scrollLeft=d:h>e.scrollLeft+e.clientWidth&&(e.scrollLeft=h-e.clientWidth)},[r,_]);const G=e=>typeof e=="string"&&ke.has(e)?s.jsx(A.Icon,{name:e,size:b}):e;return s.jsxs("div",{ref:O,className:j.clsx(t.root,t[_],t[b],B),style:{"--tz-btn-rgb":`var(--tz-color-${I}-rgb)`,"--tz-btn-on":`var(--tz-color-${I}-contrast, #fff)`,...K},children:[s.jsx("ol",{ref:C,"aria-label":M,className:t.list,children:a.map((e,n)=>{const c=!!e.error,i=!c&&(e.completed||n<r),d=!c&&!i&&n===r,h=c?"error":i?"completed":d?"active":"upcoming",J=n===a.length-1,N=G(e.icon),S=N??(i?s.jsx(A.Icon,{name:"Check",size:b}):s.jsx("span",{className:t.number,children:n+1})),V=e.label!=null||e.description!=null||e.optional!=null,Q=s.jsxs(s.Fragment,{children:[s.jsx("span",{className:t.indicator,"aria-hidden":N==null&&!i?void 0:!0,children:S}),V&&s.jsxs("span",{className:t.text,children:[e.label!=null&&s.jsx("span",{className:t.label,children:e.label}),e.description!=null&&s.jsx("span",{className:t.description,children:e.description}),e.optional!=null&&s.jsx("span",{className:t.optional,children:e.optional})]})]});return s.jsxs("li",{className:j.clsx(t.step,t[h],e.disabled&&t.disabled),children:[T?s.jsx("button",{type:"button",className:t.main,disabled:e.disabled,"aria-current":d?"step":void 0,onClick:()=>{m==null||m(n),D(n)},children:Q}):s.jsx("div",{className:t.main,"aria-current":d?"step":void 0,children:Q}),!J&&s.jsx("span",{className:j.clsx(t.connector,n<r&&t.done),"aria-hidden":"true"}),E&&n===r&&e.content!=null&&s.jsx("div",{className:t.stepContent,children:e.content})]},n)})}),!E&&$!=null&&s.jsx("div",{className:t.panel,children:$})]})});exports.Stepper=Ne;
+//# sourceMappingURL=Stepper-CVY8NJEI.cjs.map

package/dist/{Stepper-Db_ALAc4.cjs.map → Stepper-CVY8NJEI.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Stepper-Db_ALAc4.cjs","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}
+{"version":3,"file":"Stepper-CVY8NJEI.cjs","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}

package/dist/{SwatchPicker-DbAU9-ux.cjs → SwatchPicker-CCJltwHI.cjs}

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),u=require("react"),N=require("clsx"),U=require("./formContext-bTWrqdEV.cjs"),G=require("./Icon-CXTl_QAP.cjs"),R=require("./Typography-BFatE1_A.cjs"),i=require("./TextField.module-m-UllwzG.cjs"),J="_swatches_1kbcs_3",M="_sm_1kbcs_13",O="_md_1kbcs_18",Q="_lg_1kbcs_23",W="_swatch_1kbcs_3",m={swatches:J,sm:M,md:O,lg:Q,swatch:W},X=u.forwardRef(function({colors:r,value:p,defaultValue:A=null,onChange:h,size:b="md",labels:w,label:d,error:C,helperText:L,required:D=!1,name:c,className:F,"aria-label":P,...B},E){const x=u.useId(),v=`${x}-label`,k=`${x}-helper`,o=U.useFormContext(),_=!!(o&&c),l=o&&c?o.field(c):void 0,S=p!==void 0?p:_?o.values[c]??null:void 0,I=S!==void 0,[H,K]=u.useState(A),g=((I?S:H)??"").toLowerCase(),f=C??(l==null?void 0:l.error)??!1,y=L??(l==null?void 0:l.helperText),j=e=>{I||K(e),_&&o.setValue(c,e),h==null||h(e)},q=u.useRef([]),T=r.findIndex(e=>e.toLowerCase()===g),V=T>=0?T:0,$=(e,a)=>{var n;let s=a;switch(e.key){case"ArrowRight":case"ArrowDown":s=(a+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(a-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),j(r[s]),(n=q.current[s])==null||n.focus()};return t.jsxs("div",{ref:E,className:N.clsx(i.fieldStyles.field,i.fieldStyles[b],f&&i.fieldStyles.error,F),...B,children:[d!=null&&t.jsxs("label",{id:v,className:i.fieldStyles.label,children:[t.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),D&&t.jsx("span",{className:i.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{role:"radiogroup","aria-labelledby":d!=null?v:void 0,"aria-label":d==null?P:void 0,"aria-invalid":f||void 0,"aria-describedby":y!=null?k:void 0,className:N.clsx(m.swatches,m[b]),...c?{name:c,tabIndex:-1}:{},children:r.map((e,a)=>{const s=e.toLowerCase()===g;return t.jsx("button",{ref:n=>{q.current[a]=n},type:"button",role:"radio","aria-checked":s,"aria-label":(w==null?void 0:w[e])??e,tabIndex:a===V?0:-1,className:m.swatch,style:{"--sw":e},onClick:()=>j(e),onKeyDown:n=>$(n,a),children:s?t.jsx(G.Icon,{name:"TickCircle",style:{width:"var(--sw-icon)",height:"var(--sw-icon)"}}):null},e)})}),y!=null&&t.jsx(R.Typography,{as:"span",id:k,variant:"bodySmall",color:f?"error":"muted",className:i.fieldStyles.helper,children:y})]})});exports.SwatchPicker=X;
-//# sourceMappingURL=SwatchPicker-DbAU9-ux.cjs.map
+"use strict";const t=require("react/jsx-runtime"),u=require("react"),N=require("clsx"),U=require("./formContext-bTWrqdEV.cjs"),G=require("./Icon-BVULqOJD.cjs"),R=require("./Typography-BFatE1_A.cjs"),i=require("./TextField.module-m-UllwzG.cjs"),J="_swatches_1kbcs_3",M="_sm_1kbcs_13",O="_md_1kbcs_18",Q="_lg_1kbcs_23",W="_swatch_1kbcs_3",m={swatches:J,sm:M,md:O,lg:Q,swatch:W},X=u.forwardRef(function({colors:r,value:p,defaultValue:A=null,onChange:h,size:b="md",labels:w,label:d,error:C,helperText:L,required:D=!1,name:c,className:F,"aria-label":P,...B},E){const x=u.useId(),v=`${x}-label`,k=`${x}-helper`,o=U.useFormContext(),_=!!(o&&c),l=o&&c?o.field(c):void 0,S=p!==void 0?p:_?o.values[c]??null:void 0,I=S!==void 0,[H,K]=u.useState(A),g=((I?S:H)??"").toLowerCase(),f=C??(l==null?void 0:l.error)??!1,y=L??(l==null?void 0:l.helperText),j=e=>{I||K(e),_&&o.setValue(c,e),h==null||h(e)},q=u.useRef([]),T=r.findIndex(e=>e.toLowerCase()===g),V=T>=0?T:0,$=(e,a)=>{var n;let s=a;switch(e.key){case"ArrowRight":case"ArrowDown":s=(a+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(a-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),j(r[s]),(n=q.current[s])==null||n.focus()};return t.jsxs("div",{ref:E,className:N.clsx(i.fieldStyles.field,i.fieldStyles[b],f&&i.fieldStyles.error,F),...B,children:[d!=null&&t.jsxs("label",{id:v,className:i.fieldStyles.label,children:[t.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),D&&t.jsx("span",{className:i.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{role:"radiogroup","aria-labelledby":d!=null?v:void 0,"aria-label":d==null?P:void 0,"aria-invalid":f||void 0,"aria-describedby":y!=null?k:void 0,className:N.clsx(m.swatches,m[b]),...c?{name:c,tabIndex:-1}:{},children:r.map((e,a)=>{const s=e.toLowerCase()===g;return t.jsx("button",{ref:n=>{q.current[a]=n},type:"button",role:"radio","aria-checked":s,"aria-label":(w==null?void 0:w[e])??e,tabIndex:a===V?0:-1,className:m.swatch,style:{"--sw":e},onClick:()=>j(e),onKeyDown:n=>$(n,a),children:s?t.jsx(G.Icon,{name:"TickCircle",style:{width:"var(--sw-icon)",height:"var(--sw-icon)"}}):null},e)})}),y!=null&&t.jsx(R.Typography,{as:"span",id:k,variant:"bodySmall",color:f?"error":"muted",className:i.fieldStyles.helper,children:y})]})});exports.SwatchPicker=X;
+//# sourceMappingURL=SwatchPicker-CCJltwHI.cjs.map

package/dist/{SwatchPicker-DbAU9-ux.cjs.map → SwatchPicker-CCJltwHI.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SwatchPicker-DbAU9-ux.cjs","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}
+{"version":3,"file":"SwatchPicker-CCJltwHI.cjs","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}

package/dist/{SwatchPicker-D30aSrbY.js → SwatchPicker-CqyWngFJ.js}

@@ -2,7 +2,7 @@ import { jsxs as A, jsx as o } from "react/jsx-runtime";
 import { forwardRef as U, useId as G, useState as J, useRef as M } from "react";
 import { clsx as L } from "clsx";
 import { u as O } from "./formContext-B7ln1Miy.js";
-import { I as Q } from "./Icon-CophpkHo.js";
+import { I as Q } from "./Icon-DaTvzLBu.js";
 import { T as R } from "./Typography-Cta6Rg4L.js";
 import { f as n } from "./TextField.module-QePvGeJ3.js";
 const W = "_swatches_1kbcs_3", X = "_sm_1kbcs_13", Y = "_md_1kbcs_18", Z = "_lg_1kbcs_23", z = "_swatch_1kbcs_3", w = {
@@ -126,4 +126,4 @@ const W = "_swatches_1kbcs_3", X = "_sm_1kbcs_13", Y = "_md_1kbcs_18", Z = "_lg_
 export {
   ie as S
 };
-//# sourceMappingURL=SwatchPicker-D30aSrbY.js.map
+//# sourceMappingURL=SwatchPicker-CqyWngFJ.js.map