@weasel-js/ui 0.5.1 → 0.6.0

package/dist/chunks/ActionBar-CiKvEvXi.js

@@ -0,0 +1,63 @@
+import { n as e, t } from "./Tooltip-Clgn4trm.js";
+import { useSyncExternalStore as n } from "react";
+import { Focusable as r } from "react-aria-components";
+import { evaluateEnabled as i, useActionsRegistry as a, useOptionalDepRegistry as o } from "@weasel-js/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var l = {
+	bar: "_bar_11z5i_7",
+	vertical: "_vertical_11z5i_18",
+	button: "_button_11z5i_22"
+}, u = Object.freeze([]), d = () => () => {};
+function f(e, t) {
+	if (t !== void 0) return t;
+	let n = e.icon;
+	return typeof n == "function" ? n() : n;
+}
+function p(e, t) {
+	return t ? `${e} (${t})` : e;
+}
+function m(m) {
+	let { group: h, orientation: g = "horizontal", icons: _, labels: v, className: y } = m, b = a(), x = o(), S = n(b ? b.subscribe : d, b ? b.list : () => u, b ? b.list : () => u).filter((e) => e.group === h), C = x ? {
+		selection: x.get("selection"),
+		scene: x.get("scene"),
+		history: x.get("history"),
+		view: x.get("view"),
+		pointer: x.get("pointer"),
+		activeTool: x.get("activeTool"),
+		booleansAdapter: x.get("booleansAdapter")
+	} : void 0;
+	return /* @__PURE__ */ s("div", {
+		className: [
+			l.bar,
+			g === "vertical" && l.vertical,
+			y
+		].filter(Boolean).join(" "),
+		role: "toolbar",
+		"aria-label": `${h} actions`,
+		children: S.map((n) => {
+			let a = v?.[n.id] ?? n.label, o = f(n, _?.[n.id]), { enabled: u } = i(n, C), d = !u, m = p(a, n.shortcut);
+			return /* @__PURE__ */ c(e, {
+				isDisabled: d,
+				children: [/* @__PURE__ */ s(r, {
+					isDisabled: d,
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						"data-testid": `action-bar-item-${n.id}`,
+						"aria-label": a,
+						"aria-disabled": d || void 0,
+						disabled: d,
+						className: l.button,
+						onClick: () => {
+							d || b?.trigger(n.id);
+						},
+						children: o
+					})
+				}), /* @__PURE__ */ s(t, { children: m })]
+			}, n.id);
+		})
+	});
+}
+//#endregion
+export { m as t };
+
+//# sourceMappingURL=ActionBar-CiKvEvXi.js.map

package/dist/chunks/ActionBar-CiKvEvXi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar-CiKvEvXi.js","names":[],"sources":["../../src/components/ActionBar/ActionBar.module.css","../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["/* `<ActionBar>` shares the segmented widget look of the WeaselDraw\n * pathfinder panel — small chrome on the panel surface so a bar of\n * Action buttons reads as a single control. Tokens are theme-driven\n * via `--wzl-*`. Visual parity with `PathfinderPanel.module.css` is\n * intentional; this is the generic version. */\n\n.bar {\n  display: flex;\n  flex-direction: row;\n  gap: 1px;\n  background: var(--wzl-panel-bg);\n  border: 1px solid var(--wzl-panel-border);\n  border-radius: 4px;\n  padding: 2px;\n  user-select: none;\n}\n\n.bar.vertical {\n  flex-direction: column;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  border: 0;\n  border-radius: 2px;\n  color: var(--wzl-text);\n  cursor: default;\n}\n\n.button:hover:not([disabled]) {\n  background: var(--wzl-panel-border);\n}\n\n.button:active:not([disabled]) {\n  background: color-mix(in srgb, var(--wzl-panel-border) 70%, transparent);\n}\n\n.button[disabled] {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.button > svg {\n  display: block;\n}\n","import { useSyncExternalStore, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport {\n  useActionsRegistry,\n  useOptionalDepRegistry,\n  evaluateEnabled,\n  type Action,\n} from '@weasel-js/core';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './ActionBar.module.css';\n\nconst EMPTY_LIST: readonly Action[] = Object.freeze([]);\nconst noopSubscribe = (): (() => void) => () => {};\n\nexport interface ActionBarProps {\n  /** Group key — only actions with `action.group === group` are rendered. */\n  group: string;\n  /** Layout direction. Defaults to `'horizontal'`. */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Per-id icon overrides — keyed by `action.id`. When an entry is provided\n   * it replaces the action's own `icon` for this bar only. Mirrors\n   * `PathfinderPanelProps.icons` so call sites that ship custom glyph sets\n   * can swap them in without re-registering actions.\n   */\n  icons?: Record<string, ReactNode>;\n  /**\n   * Per-id label overrides — keyed by `action.id`. Drives both `aria-label`\n   * and `title`. When omitted, the action's own `label` is used.\n   */\n  labels?: Record<string, string>;\n  /** Additional class for the toolbar root. */\n  className?: string;\n}\n\nfunction resolveIcon(action: Action, override: ReactNode | undefined): ReactNode {\n  if (override !== undefined) return override;\n  const i = action.icon;\n  if (typeof i === 'function') return i();\n  return i;\n}\n\nfunction resolveTitle(label: string, shortcut: string | undefined): string {\n  return shortcut ? `${label} (${shortcut})` : label;\n}\n\n/**\n * Generic group-keyed action toolbar. Reads the parent `ActionsRegistry`,\n * filters to actions whose `group` matches `props.group`, and renders one\n * icon button per match. Disabled state is derived from each action's\n * `enabled` predicate via `evaluateEnabled` (so the button greys out and\n * swallows clicks while the keybinding — if any — still fires through the\n * registry's keydown listener; that's the registry's contract, not ours).\n *\n * Visual parity with the WeaselDraw `<PathfinderPanel>` is intentional;\n * this is the generic, registry-driven version. No keyboard navigation\n * (roving tabindex) yet — bar consumers today are short flat strips. Add\n * if/when a long bar lands.\n */\nexport function ActionBar(props: ActionBarProps) {\n  const { group, orientation = 'horizontal', icons, labels, className } = props;\n  const registry = useActionsRegistry();\n  const depReg = useOptionalDepRegistry();\n  const all = useSyncExternalStore(\n    registry ? registry.subscribe : noopSubscribe,\n    registry ? registry.list : () => EMPTY_LIST,\n    registry ? registry.list : () => EMPTY_LIST,\n  );\n  const actions = all.filter((a) => a.group === group);\n\n  // Build the deps bag fresh each render — predicates read selection / etc.\n  // from these. ActionBar relies on its parent re-rendering when the\n  // underlying state changes (e.g. the consumer reads `selection.current`\n  // somewhere above us) for `enabled` to reflect the latest values.\n  const deps = depReg\n    ? {\n        selection: depReg.get('selection'),\n        scene: depReg.get('scene'),\n        history: depReg.get('history'),\n        view: depReg.get('view'),\n        pointer: depReg.get('pointer'),\n        activeTool: depReg.get('activeTool'),\n        booleansAdapter: depReg.get('booleansAdapter'),\n      }\n    : undefined;\n\n  const cls = [s.bar, orientation === 'vertical' && s.vertical, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={`${group} actions`}>\n      {actions.map((action) => {\n        const label = labels?.[action.id] ?? action.label;\n        const icon = resolveIcon(action, icons?.[action.id]);\n        const { enabled } = evaluateEnabled(action, deps);\n        const disabled = !enabled;\n        const title = resolveTitle(label, action.shortcut);\n        return (\n          <TooltipTrigger key={action.id} isDisabled={disabled}>\n            <Focusable isDisabled={disabled}>\n              <button\n                type=\"button\"\n                data-testid={`action-bar-item-${action.id}`}\n                aria-label={label}\n                aria-disabled={disabled || undefined}\n                disabled={disabled}\n                className={s.button}\n                onClick={() => {\n                  if (disabled) return;\n                  // Dispatch through the registry so the enabled() guard runs.\n                  // If no registry is in scope the click is a no-op — ActionBar\n                  // is expected to render under an `ActionsProvider`.\n                  registry?.trigger(action.id);\n                }}\n              >\n                {icon}\n              </button>\n            </Focusable>\n            <Tooltip>{title}</Tooltip>\n          </TooltipTrigger>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;GCWM,IAAgC,OAAO,OAAO,EAAE,CAAC,EACjD,gBAA0C;AAuBhD,SAAS,EAAY,GAAgB,GAA4C;CAC/E,IAAI,MAAa,KAAA,GAAW,OAAO;CACnC,IAAM,IAAI,EAAO;CAEjB,OADI,OAAO,KAAM,aAAmB,GAAG,GAChC;;AAGT,SAAS,EAAa,GAAe,GAAsC;CACzE,OAAO,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK;;AAgB/C,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,UAAO,iBAAc,cAAc,UAAO,WAAQ,iBAAc,GAClE,IAAW,GAAoB,EAC/B,IAAS,GAAwB,EAMjC,IALM,EACV,IAAW,EAAS,YAAY,GAChC,IAAW,EAAS,aAAa,GACjC,IAAW,EAAS,aAAa,EAEnB,CAAI,QAAQ,MAAM,EAAE,UAAU,EAAM,EAM9C,IAAO,IACT;EACE,WAAW,EAAO,IAAI,YAAY;EAClC,OAAO,EAAO,IAAI,QAAQ;EAC1B,SAAS,EAAO,IAAI,UAAU;EAC9B,MAAM,EAAO,IAAI,OAAO;EACxB,SAAS,EAAO,IAAI,UAAU;EAC9B,YAAY,EAAO,IAAI,aAAa;EACpC,iBAAiB,EAAO,IAAI,kBAAkB;EAC/C,GACD,KAAA;CAMJ,OACE,kBAAC,OAAD;EAAK,WALK;GAAC,EAAE;GAAK,MAAgB,cAAc,EAAE;GAAU;GAAU,CACrE,OAAO,QAAQ,CACf,KAAK,IAGU;EAAK,MAAK;EAAU,cAAY,GAAG,EAAM;YACtD,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAQ,IAAS,EAAO,OAAO,EAAO,OACtC,IAAO,EAAY,GAAQ,IAAQ,EAAO,IAAI,EAC9C,EAAE,eAAY,EAAgB,GAAQ,EAAK,EAC3C,IAAW,CAAC,GACZ,IAAQ,EAAa,GAAO,EAAO,SAAS;GAClD,OACE,kBAAC,GAAD;IAAgC,YAAY;cAA5C,CACE,kBAAC,GAAD;KAAW,YAAY;eACrB,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,mBAAmB,EAAO;MACvC,cAAY;MACZ,iBAAe,KAAY,KAAA;MACjB;MACV,WAAW,EAAE;MACb,eAAe;OACT,KAIJ,GAAU,QAAQ,EAAO,GAAG;;gBAG7B;MACM,CAAA;KACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAgB,CAAA,CACX;MArBI,EAAO,GAqBX;IAEnB;EACE,CAAA"}

package/dist/chunks/ActionsBar-CzU6Of3B.js

@@ -0,0 +1,94 @@
+import { useRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+var n = {
+	root: "_root_13y7a_6",
+	segment: "_segment_13y7a_28",
+	segmentSelected: "_segmentSelected_13y7a_75",
+	size_sm: "_size_sm_13y7a_133",
+	variant_minimal: "_variant_minimal_13y7a_146"
+};
+//#endregion
+//#region src/components/ActionsBar/ActionsBar.tsx
+function r(e) {
+	for (let t = 0; t < e.length; t++) if (!e[t].disabled) return t;
+	return -1;
+}
+function i(e) {
+	for (let t = e.length - 1; t >= 0; t--) if (!e[t].disabled) return t;
+	return -1;
+}
+function a(e, t) {
+	let n = e.length;
+	for (let r = 1; r <= n; r++) {
+		let i = (t + r + n) % n;
+		if (!e[i].disabled) return i;
+	}
+	return t;
+}
+function o(e, t) {
+	let n = e.length;
+	for (let r = 1; r <= n; r++) {
+		let i = (t - r + n) % n;
+		if (!e[i].disabled) return i;
+	}
+	return t;
+}
+function s(s) {
+	let { items: c, ariaLabel: l, className: u, height: d, size: f, variant: p } = s, m = e(null), h = r(c), g = (e) => {
+		let t = c[e];
+		t.disabled || t.onAction();
+	}, _ = (e) => {
+		let t = m.current;
+		t && t.querySelectorAll(`.${n.segment}`)[e]?.focus();
+	}, v = (e) => (t) => {
+		let n = -1;
+		switch (t.key) {
+			case "ArrowLeft":
+			case "ArrowUp":
+				n = o(c, e);
+				break;
+			case "ArrowRight":
+			case "ArrowDown":
+				n = a(c, e);
+				break;
+			case "Home":
+				n = r(c);
+				break;
+			case "End":
+				n = i(c);
+				break;
+			case " ":
+			case "Enter":
+				t.preventDefault(), g(e);
+				return;
+			default: return;
+		}
+		n < 0 || n === e || (t.preventDefault(), _(n));
+	}, y = d === void 0 ? void 0 : { "--wzl-tb-height": `${d}px` };
+	return /* @__PURE__ */ t("div", {
+		ref: m,
+		className: [
+			n.root,
+			f && n[`size_${f}`],
+			p && n[`variant_${p}`],
+			u
+		].filter(Boolean).join(" "),
+		role: "toolbar",
+		"aria-label": l,
+		style: y,
+		children: c.map((e, r) => /* @__PURE__ */ t("button", {
+			type: "button",
+			"aria-label": e.ariaLabel,
+			disabled: e.disabled,
+			tabIndex: r === h ? 0 : -1,
+			className: n.segment,
+			onClick: () => g(r),
+			onKeyDown: v(r),
+			children: e.label
+		}, e.value))
+	});
+}
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=ActionsBar-CzU6Of3B.js.map

package/dist/chunks/ActionsBar-CzU6Of3B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsBar-CzU6Of3B.js","names":[],"sources":["../../src/components/ActionsBar/ActionsBar.module.css","../../src/components/ActionsBar/ActionsBar.tsx"],"sourcesContent":["/* Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--wzl-tb-height, 28px);\n  padding: 2px;\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: 999px;\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 12px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: 300;\n  font-size: var(--btn-fontsize, 14px);\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n.segment:first-child {\n  border-radius: 999px 0 0 999px;\n}\n\n.segment:last-child {\n  border-radius: 0 999px 999px 0;\n}\n\n.segment:only-child {\n  border-radius: 999px;\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 8px;\n  font-size: 11px;\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border-radius: 0;\n  box-shadow: none;\n  gap: 2px;\n}\n\n.variant_minimal .segment {\n  padding: 0 4px;\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 1.4;\n  border-radius: 2px;\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n.variant_minimal .segment:first-child,\n.variant_minimal .segment:last-child,\n.variant_minimal .segment:only-child {\n  border-radius: 2px;\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg, var(--wzl-accent));\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: 500;\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n","import { useRef, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport s from './ActionsBar.module.css';\n\nexport type ActionsBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  onAction: () => void;\n};\n\nexport type ActionsBarSize = 'sm' | 'md';\nexport type ActionsBarVariant = 'default' | 'minimal';\n\nexport type ActionsBarProps<V extends string | number = string> = {\n  items: readonly ActionsBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  size?: ActionsBarSize;\n  variant?: ActionsBarVariant;\n};\n\nfunction firstEnabledIndex(items: readonly ActionsBarItem<string | number>[]): number {\n  for (let i = 0; i < items.length; i++) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction lastEnabledIndex(items: readonly ActionsBarItem<string | number>[]): number {\n  for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction nextEnabledIndex(items: readonly ActionsBarItem<string | number>[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from + k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nfunction prevEnabledIndex(items: readonly ActionsBarItem<string | number>[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from - k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nexport function ActionsBar<V extends string | number = string>(props: ActionsBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const tabStopIndex = firstEnabledIndex(items);\n\n  const fire = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onAction();\n  };\n\n  const focusSegment = (index: number) => {\n    const root = rootRef.current;\n    if (!root) return;\n    const buttons = root.querySelectorAll<HTMLButtonElement>(`.${s.segment}`);\n    buttons[index]?.focus();\n  };\n\n  const handleKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    let nextIndex = -1;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        nextIndex = prevEnabledIndex(items, index);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        nextIndex = nextEnabledIndex(items, index);\n        break;\n      case 'Home':\n        nextIndex = firstEnabledIndex(items);\n        break;\n      case 'End':\n        nextIndex = lastEnabledIndex(items);\n        break;\n      case ' ':\n      case 'Enter':\n        e.preventDefault();\n        fire(index);\n        return;\n      default:\n        return;\n    }\n    if (nextIndex < 0 || nextIndex === index) return;\n    e.preventDefault();\n    focusSegment(nextIndex);\n  };\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={rootRef}\n      className={rootCls}\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.value}\n          type=\"button\"\n          aria-label={item.ariaLabel}\n          disabled={item.disabled}\n          tabIndex={i === tabStopIndex ? 0 : -1}\n          className={s.segment}\n          onClick={() => fire(i)}\n          onKeyDown={handleKeyDown(i)}\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;ACuBA,SAAS,EAAkB,GAA2D;CACpF,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK,IAAI,CAAC,EAAM,GAAG,UAAU,OAAO;CACtE,OAAO;;AAGT,SAAS,EAAiB,GAA2D;CACnF,KAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,EAAM,GAAG,UAAU,OAAO;CAC3E,OAAO;;AAGT,SAAS,EAAiB,GAAmD,GAAsB;CACjG,IAAM,IAAI,EAAM;CAChB,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;EAC3B,IAAI,CAAC,EAAM,GAAG,UAAU,OAAO;;CAEjC,OAAO;;AAGT,SAAS,EAAiB,GAAmD,GAAsB;CACjG,IAAM,IAAI,EAAM;CAChB,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;EAC3B,IAAI,CAAC,EAAM,GAAG,UAAU,OAAO;;CAEjC,OAAO;;AAGT,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GACzD,IAAU,EAA8B,KAAK,EAE7C,IAAe,EAAkB,EAAM,EAEvC,KAAQ,MAAkB;EAC9B,IAAM,IAAO,EAAM;EACf,EAAK,YACT,EAAK,UAAU;IAGX,KAAgB,MAAkB;EACtC,IAAM,IAAO,EAAQ;EAChB,KAEL,EADqB,iBAAoC,IAAI,EAAE,UAC/D,CAAQ,IAAQ,OAAO;IAGnB,KAAiB,OAAmB,MAA6C;EACrF,IAAI,IAAY;EAChB,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,IAAY,EAAiB,GAAO,EAAM;IAC1C;GACF,KAAK;GACL,KAAK;IACH,IAAY,EAAiB,GAAO,EAAM;IAC1C;GACF,KAAK;IACH,IAAY,EAAkB,EAAM;IACpC;GACF,KAAK;IACH,IAAY,EAAiB,EAAM;IACnC;GACF,KAAK;GACL,KAAK;IAEH,AADA,EAAE,gBAAgB,EAClB,EAAK,EAAM;IACX;GACF,SACE;;EAEA,IAAY,KAAK,MAAc,MACnC,EAAE,gBAAgB,EAClB,EAAa,EAAU;IAGnB,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK;CAUrD,OACE,kBAAC,OAAD;EACE,KAAK;EACL,WAVY;GACd,EAAE;GACF,KAAQ,EAAE,QAAQ;GAClB,KAAW,EAAE,WAAW;GACxB;GACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAKR;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAChB,kBAAC,UAAD;GAEE,MAAK;GACL,cAAY,EAAK;GACjB,UAAU,EAAK;GACf,UAAU,MAAM,IAAe,IAAI;GACnC,WAAW,EAAE;GACb,eAAe,EAAK,EAAE;GACtB,WAAW,EAAc,EAAE;aAE1B,EAAK;GACC,EAVF,EAAK,MAUH,CACT;EACE,CAAA"}