entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/navigation/PathBar/PathBarSiblingMenu.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { Menu } from '../Menu/Menu.js';
+import '../../primitives/Avatar/Avatar.js';
+import '../../primitives/Avatar/AvatarGroup.js';
+import '../../primitives/Badge/Badge.js';
+import '../../primitives/Button/Button.js';
+import '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import '../../primitives/Code/Code.js';
+import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/HoverCard/HoverCard.js';
+import '../../primitives/Icon/Icon.js';
+import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import '../../primitives/Input/Input.js';
+import '../../primitives/Kbd/Kbd.js';
+import '../../primitives/Link/Link.js';
+import '../../primitives/Paper/Paper.js';
+import '../../primitives/Popover/Popover.js';
+import '../../primitives/Popover/PopoverClose.js';
+import '../../primitives/Popover/PopoverContent.js';
+import '../../primitives/Popover/PopoverTrigger.js';
+import '../../primitives/Radio/Radio.js';
+import '../../primitives/Radio/RadioGroup.js';
+import '../../primitives/Switch/Switch.js';
+import '../../primitives/Text/Text.js';
+import '../../primitives/TextArea/TextArea.js';
+import '../../primitives/Tooltip/Tooltip.js';
+import '../../primitives/VisuallyHidden/VisuallyHidden.js';
+import 'react';
+import '../../primitives/canvas/CanvasContainer.js';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { pathBarSiblingTriggerStyle } from './PathBar.css.js';
+import { resolveSiblings } from './pathUtils.js';
+
+/**
+ * Trailing caret + dropdown for a single crumb's siblings (the VS Code path-bar
+ * affordance). Rendered as a crumb's `endContent`, so it mounts only for crumbs
+ * Breadcrumbs actually renders — `getSiblings` runs lazily, never for segments
+ * hidden behind the overflow ellipsis. Renders nothing when the segment has no
+ * siblings.
+ */
+const PathBarSiblingMenu = ({ segment, index, getSiblings, onSelect, size, }) => {
+    const siblings = resolveSiblings(segment, getSiblings(segment, index));
+    if (siblings.length === 0) {
+        return null;
+    }
+    return (jsxs(Menu, { children: [jsx(Menu.Trigger, { render: jsx(IconButton, { "aria-label": `Browse ${segment.label} siblings`, size: size, radius: "sm", className: pathBarSiblingTriggerStyle, children: jsx(ChevronDownIcon, { size: size, decorative: true }) }) }), jsx(Menu.Content, { children: siblings.map((sibling, siblingIndex) => (jsx(Menu.Item, { icon: sibling.icon, onSelect: () => {
+                        onSelect(index, sibling);
+                    }, children: sibling.label }, `${sibling.value}-${siblingIndex}`))) })] }));
+};
+PathBarSiblingMenu.displayName = 'PathBarSiblingMenu';
+
+export { PathBarSiblingMenu };
+//# sourceMappingURL=PathBarSiblingMenu.js.map

package/dist/esm/components/navigation/PathBar/PathBarSiblingMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathBarSiblingMenu.js","sources":["src/components/navigation/PathBar/PathBarSiblingMenu.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons';\nimport { Menu } from '@/components/navigation/Menu';\nimport { IconButton } from '@/components/primitives';\n\nimport { pathBarSiblingTriggerStyle } from './PathBar.css';\nimport { resolveSiblings } from './pathUtils';\n\nimport type { PathBarSize, PathSegment } from './PathBar.types';\nimport type { ResolvedPathSegment } from './pathUtils';\n\ninterface PathBarSiblingMenuProps {\n  /** The resolved segment this dropdown hangs off — the sibling anchor. */\n  segment: ResolvedPathSegment;\n  /** Index of `segment` in the trail; forwarded to `onSelect`. */\n  index: number;\n  /** Returns the raw sibling entries for the segment. */\n  getSiblings: (\n    segment: PathSegment,\n    index: number\n  ) => ReadonlyArray<string | PathSegment>;\n  /** Called with the chosen sibling (already resolved to a concrete value). */\n  onSelect: (index: number, sibling: ResolvedPathSegment) => void;\n  /** Scale shared with the rest of the bar — sizes the caret button and icon. */\n  size: PathBarSize;\n}\n\n/**\n * Trailing caret + dropdown for a single crumb's siblings (the VS Code path-bar\n * affordance). Rendered as a crumb's `endContent`, so it mounts only for crumbs\n * Breadcrumbs actually renders — `getSiblings` runs lazily, never for segments\n * hidden behind the overflow ellipsis. Renders nothing when the segment has no\n * siblings.\n */\nexport const PathBarSiblingMenu = ({\n  segment,\n  index,\n  getSiblings,\n  onSelect,\n  size,\n}: PathBarSiblingMenuProps): React.ReactElement | null => {\n  const siblings = resolveSiblings(segment, getSiblings(segment, index));\n  if (siblings.length === 0) {\n    return null;\n  }\n\n  return (\n    <Menu>\n      <Menu.Trigger\n        render={\n          <IconButton\n            aria-label={`Browse ${segment.label} siblings`}\n            size={size}\n            radius=\"sm\"\n            className={pathBarSiblingTriggerStyle}\n          >\n            <ChevronDownIcon size={size} decorative />\n          </IconButton>\n        }\n      />\n      <Menu.Content>\n        {siblings.map((sibling, siblingIndex) => (\n          <Menu.Item\n            key={`${sibling.value}-${siblingIndex}`}\n            icon={sibling.icon}\n            onSelect={() => {\n              onSelect(index, sibling);\n            }}\n          >\n            {sibling.label}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nPathBarSiblingMenu.displayName = 'PathBarSiblingMenu';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;AAMG;AACI;AAOL;AACA;AACE;;AAGF;AAoBY;AACF;AAQZ;AAEA;;"}

package/dist/esm/components/navigation/PathBar/pathUtils.js

@@ -0,0 +1,118 @@
+/**
+ * Pure helpers for turning file-path-like input into breadcrumb segments.
+ *
+ * No React, no DOM — safe to unit test in isolation and import without a
+ * `'use client'` boundary.
+ */
+const DEFAULT_DELIMITER = '/';
+/** Split a raw string path into its non-empty label parts. */
+function splitLabels(path, delimiter) {
+    // An empty delimiter cannot split — treat the whole string as one label.
+    if (delimiter === '') {
+        return path.length > 0 ? [path] : [];
+    }
+    return path.split(delimiter).filter(part => part.length > 0);
+}
+/** True when a string path begins with the delimiter (an absolute path). */
+function isAbsolute(path, delimiter) {
+    return delimiter !== '' && path.startsWith(delimiter);
+}
+/**
+ * Build the cumulative navigation value for the segment at `index`: the path
+ * from the root up to and including that segment.
+ *
+ * @param labels   Ordered segment labels.
+ * @param index    Index of the segment whose value is wanted.
+ * @param delimiter Joiner placed between labels.
+ * @param absolute When true, the result keeps a leading delimiter.
+ */
+function joinPath(labels, index, delimiter = DEFAULT_DELIMITER, absolute = false) {
+    const prefix = absolute ? delimiter : '';
+    return prefix + labels.slice(0, index + 1).join(delimiter);
+}
+/**
+ * The path prefix of a resolved segment — its `value` with the trailing label
+ * removed. Useful for building a sibling's value: it shares this prefix and
+ * only swaps the final label. Works for absolute paths (the leading delimiter
+ * stays in the prefix) and relative ones alike.
+ *
+ * @example
+ * segmentPrefix({ label: 'src', value: '/src' })       // '/'
+ * segmentPrefix({ label: 'b', value: 'a/b' })           // 'a/'
+ * segmentPrefix({ label: 'src', value: 'src' })         // ''
+ *
+ * @remarks
+ * Assumes `value` ends with `label` — always true for parsed paths and for
+ * cumulative array values. If a consumer supplies a structured segment whose
+ * `value` is unrelated to its `label`, the derived prefix is meaningless; in
+ * that case provide explicit `value`s on that segment's siblings too so they
+ * don't fall back to this prefix.
+ */
+function segmentPrefix(segment) {
+    return segment.value.slice(0, segment.value.length - segment.label.length);
+}
+/**
+ * Parse a raw string path into resolved segments. Each segment carries the
+ * cumulative `value` (the path up to and including it).
+ *
+ * Normalization rules:
+ * - A leading delimiter marks the path absolute; resolved values keep it.
+ * - Trailing delimiters and doubled delimiters collapse (empty parts dropped).
+ * - An empty string (or a string of only delimiters) yields `[]`.
+ *
+ * Windows-style `\` separators are out of scope for v1 — pass
+ * `delimiter="\\"` explicitly if a consumer needs them.
+ */
+function parsePath(path, delimiter = DEFAULT_DELIMITER) {
+    const labels = splitLabels(path, delimiter);
+    const absolute = isAbsolute(path, delimiter);
+    return labels.map((label, index) => ({
+        label,
+        value: joinPath(labels, index, delimiter, absolute),
+    }));
+}
+/**
+ * Normalize the public path input (a delimited string, or an array of strings
+ * / `PathSegment` objects) into resolved segments with a guaranteed `value`.
+ *
+ * - String input is delegated to {@link parsePath}.
+ * - Array entries that already provide a `value` keep it; otherwise the
+ *   cumulative path is computed from the labels (relative — array input
+ *   carries no leading-delimiter information).
+ * - Per-segment `icon` is preserved.
+ */
+function normalizePath(input, delimiter = DEFAULT_DELIMITER) {
+    if (typeof input === 'string') {
+        return parsePath(input, delimiter);
+    }
+    const labels = input.map(entry => typeof entry === 'string' ? entry : entry.label);
+    return input.map((entry, index) => {
+        const segment = typeof entry === 'string' ? { label: entry } : entry;
+        return {
+            ...segment,
+            value: segment.value ?? joinPath(labels, index, delimiter),
+        };
+    });
+}
+/**
+ * Resolve a `getSiblings` result into segments with concrete navigation
+ * values. A sibling lives in the same parent as `anchor`, so it inherits that
+ * segment's prefix (see {@link segmentPrefix}) and only swaps the trailing
+ * label. Entries that already carry an explicit `value` keep it.
+ *
+ * @param anchor  The resolved segment the siblings sit beside.
+ * @param entries Raw sibling entries — plain labels or structured segments.
+ */
+function resolveSiblings(anchor, entries) {
+    const prefix = segmentPrefix(anchor);
+    return entries.map(entry => {
+        const segment = typeof entry === 'string' ? { label: entry } : entry;
+        return {
+            ...segment,
+            value: segment.value ?? prefix + segment.label,
+        };
+    });
+}
+
+export { DEFAULT_DELIMITER, joinPath, normalizePath, parsePath, resolveSiblings, segmentPrefix };
+//# sourceMappingURL=pathUtils.js.map

package/dist/esm/components/navigation/PathBar/pathUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pathUtils.js","sources":["src/components/navigation/PathBar/pathUtils.ts"],"sourcesContent":["import type { PathInput, PathSegment } from './PathBar.types';\n\n/**\n * Pure helpers for turning file-path-like input into breadcrumb segments.\n *\n * No React, no DOM — safe to unit test in isolation and import without a\n * `'use client'` boundary.\n */\n\nexport const DEFAULT_DELIMITER = '/';\n\n/**\n * A segment whose navigation `value` has been resolved. PathBar works with\n * these internally so every crumb is guaranteed a stable path to navigate to.\n */\nexport interface ResolvedPathSegment extends PathSegment {\n  value: string;\n}\n\n/** Split a raw string path into its non-empty label parts. */\nfunction splitLabels(path: string, delimiter: string): string[] {\n  // An empty delimiter cannot split — treat the whole string as one label.\n  if (delimiter === '') {\n    return path.length > 0 ? [path] : [];\n  }\n  return path.split(delimiter).filter(part => part.length > 0);\n}\n\n/** True when a string path begins with the delimiter (an absolute path). */\nfunction isAbsolute(path: string, delimiter: string): boolean {\n  return delimiter !== '' && path.startsWith(delimiter);\n}\n\n/**\n * Build the cumulative navigation value for the segment at `index`: the path\n * from the root up to and including that segment.\n *\n * @param labels   Ordered segment labels.\n * @param index    Index of the segment whose value is wanted.\n * @param delimiter Joiner placed between labels.\n * @param absolute When true, the result keeps a leading delimiter.\n */\nexport function joinPath(\n  labels: readonly string[],\n  index: number,\n  delimiter: string = DEFAULT_DELIMITER,\n  absolute = false\n): string {\n  const prefix = absolute ? delimiter : '';\n  return prefix + labels.slice(0, index + 1).join(delimiter);\n}\n\n/**\n * The path prefix of a resolved segment — its `value` with the trailing label\n * removed. Useful for building a sibling's value: it shares this prefix and\n * only swaps the final label. Works for absolute paths (the leading delimiter\n * stays in the prefix) and relative ones alike.\n *\n * @example\n * segmentPrefix({ label: 'src', value: '/src' })       // '/'\n * segmentPrefix({ label: 'b', value: 'a/b' })           // 'a/'\n * segmentPrefix({ label: 'src', value: 'src' })         // ''\n *\n * @remarks\n * Assumes `value` ends with `label` — always true for parsed paths and for\n * cumulative array values. If a consumer supplies a structured segment whose\n * `value` is unrelated to its `label`, the derived prefix is meaningless; in\n * that case provide explicit `value`s on that segment's siblings too so they\n * don't fall back to this prefix.\n */\nexport function segmentPrefix(segment: ResolvedPathSegment): string {\n  return segment.value.slice(0, segment.value.length - segment.label.length);\n}\n\n/**\n * Parse a raw string path into resolved segments. Each segment carries the\n * cumulative `value` (the path up to and including it).\n *\n * Normalization rules:\n * - A leading delimiter marks the path absolute; resolved values keep it.\n * - Trailing delimiters and doubled delimiters collapse (empty parts dropped).\n * - An empty string (or a string of only delimiters) yields `[]`.\n *\n * Windows-style `\\` separators are out of scope for v1 — pass\n * `delimiter=\"\\\\\"` explicitly if a consumer needs them.\n */\nexport function parsePath(\n  path: string,\n  delimiter: string = DEFAULT_DELIMITER\n): ResolvedPathSegment[] {\n  const labels = splitLabels(path, delimiter);\n  const absolute = isAbsolute(path, delimiter);\n  return labels.map((label, index) => ({\n    label,\n    value: joinPath(labels, index, delimiter, absolute),\n  }));\n}\n\n/**\n * Normalize the public path input (a delimited string, or an array of strings\n * / `PathSegment` objects) into resolved segments with a guaranteed `value`.\n *\n * - String input is delegated to {@link parsePath}.\n * - Array entries that already provide a `value` keep it; otherwise the\n *   cumulative path is computed from the labels (relative — array input\n *   carries no leading-delimiter information).\n * - Per-segment `icon` is preserved.\n */\nexport function normalizePath(\n  input: PathInput,\n  delimiter: string = DEFAULT_DELIMITER\n): ResolvedPathSegment[] {\n  if (typeof input === 'string') {\n    return parsePath(input, delimiter);\n  }\n\n  const labels = input.map(entry =>\n    typeof entry === 'string' ? entry : entry.label\n  );\n\n  return input.map((entry, index) => {\n    const segment: PathSegment =\n      typeof entry === 'string' ? { label: entry } : entry;\n    return {\n      ...segment,\n      value: segment.value ?? joinPath(labels, index, delimiter),\n    };\n  });\n}\n\n/**\n * Resolve a `getSiblings` result into segments with concrete navigation\n * values. A sibling lives in the same parent as `anchor`, so it inherits that\n * segment's prefix (see {@link segmentPrefix}) and only swaps the trailing\n * label. Entries that already carry an explicit `value` keep it.\n *\n * @param anchor  The resolved segment the siblings sit beside.\n * @param entries Raw sibling entries — plain labels or structured segments.\n */\nexport function resolveSiblings(\n  anchor: ResolvedPathSegment,\n  entries: ReadonlyArray<string | PathSegment>\n): ResolvedPathSegment[] {\n  const prefix = segmentPrefix(anchor);\n  return entries.map(entry => {\n    const segment: PathSegment =\n      typeof entry === 'string' ? { label: entry } : entry;\n    return {\n      ...segment,\n      value: segment.value ?? prefix + segment.label,\n    };\n  });\n}\n"],"names":[],"mappings":"AAEA;;;;;AAKG;AAEI,MAAM,iBAAiB,GAAG;AAUjC;AACA,SAAS,WAAW,CAAC,IAAY,EAAE,SAAiB,EAAA;;AAElD,IAAA,IAAI,SAAS,KAAK,EAAE,EAAE;AACpB,QAAA,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE;IACtC;AACA,IAAA,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;AAC9D;AAEA;AACA,SAAS,UAAU,CAAC,IAAY,EAAE,SAAiB,EAAA;IACjD,OAAO,SAAS,KAAK,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;AACvD;AAEA;;;;;;;;AAQG;AACG,SAAU,QAAQ,CACtB,MAAyB,EACzB,KAAa,EACb,SAAA,GAAoB,iBAAiB,EACrC,QAAQ,GAAG,KAAK,EAAA;IAEhB,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,EAAE;AACxC,IAAA,OAAO,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;AAC5D;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACG,SAAU,aAAa,CAAC,OAA4B,EAAA;IACxD,OAAO,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;AAC5E;AAEA;;;;;;;;;;;AAWG;SACa,SAAS,CACvB,IAAY,EACZ,YAAoB,iBAAiB,EAAA;IAErC,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC;IAC5C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAAM;QACnC,KAAK;QACL,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC;AACpD,KAAA,CAAC,CAAC;AACL;AAEA;;;;;;;;;AASG;SACa,aAAa,CAC3B,KAAgB,EAChB,YAAoB,iBAAiB,EAAA;AAErC,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAO,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC;IACpC;IAEA,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,IAC5B,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CAChD;IAED,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAChC,QAAA,MAAM,OAAO,GACX,OAAO,KAAK,KAAK,QAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK;QACtD,OAAO;AACL,YAAA,GAAG,OAAO;AACV,YAAA,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC;SAC3D;AACH,IAAA,CAAC,CAAC;AACJ;AAEA;;;;;;;;AAQG;AACG,SAAU,eAAe,CAC7B,MAA2B,EAC3B,OAA4C,EAAA;AAE5C,IAAA,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;AACpC,IAAA,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,IAAG;AACzB,QAAA,MAAM,OAAO,GACX,OAAO,KAAK,KAAK,QAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK;QACtD,OAAO;AACL,YAAA,GAAG,OAAO;YACV,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,MAAM,GAAG,OAAO,CAAC,KAAK;SAC/C;AACH,IAAA,CAAC,CAAC;AACJ;;;;"}

package/dist/esm/components/navigation/SegmentedControl/SegmentedControl.js

@@ -148,14 +148,24 @@ const SegmentedControl = ({ value: valueProp, defaultValue, size = 'md', orienta
         if (!root)
             return;
         if (typeof ResizeObserver === 'undefined') {
-            const onResize = () => updateIndicator();
+            const onResize = () => {
+                updateIndicator();
+            };
             window.addEventListener('resize', onResize);
-            return () => window.removeEventListener('resize', onResize);
+            return () => {
+                window.removeEventListener('resize', onResize);
+            };
         }
-        const ro = new ResizeObserver(() => updateIndicator());
+        const ro = new ResizeObserver(() => {
+            updateIndicator();
+        });
         ro.observe(root);
-        itemsRef.current.forEach(node => ro.observe(node));
-        return () => ro.disconnect();
+        itemsRef.current.forEach(node => {
+            ro.observe(node);
+        });
+        return () => {
+            ro.disconnect();
+        };
     }, [updateIndicator]);
     // --- Keyboard navigation (roving) ---
     const handleKeyDown = useCallback((e) => {
@@ -227,7 +237,7 @@ const SegmentedControl = ({ value: valueProp, defaultValue, size = 'md', orienta
         registerItem,
     ]);
     const indicatorClass = segmentedIndicatorRecipe({ variant, orientation });
-    return (jsx(SegmentedControlContext.Provider, { value: contextValue, children: jsxs("div", { ref: setRootRef, role: "group", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "aria-orientation": orientation, className: cx(segmentedControlRecipe({ orientation, variant, fullWidth }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [indicator && (jsx("span", { "aria-hidden": "true", className: indicatorClass, style: {
+    return (jsx(SegmentedControlContext.Provider, { value: contextValue, children: jsxs("div", { ref: setRootRef, role: "toolbar", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "aria-orientation": orientation, className: cx(segmentedControlRecipe({ orientation, variant, fullWidth }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [indicator && (jsx("span", { "aria-hidden": "true", className: indicatorClass, style: {
                         transform: `translate(${indicator.x}px, ${indicator.y}px)`,
                         width: `${indicator.width}px`,
                         height: `${indicator.height}px`,

package/dist/esm/components/navigation/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../../../src/components/navigation/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAwBA;AAEA;AACE;;AAGA;;AAEE;;AAIF;AACF;AAWA;;;AAOE;AACA;AACA;AACA;AAEA;AACE;;;;AAII;;AAEA;;;;;;;AAOF;;;;;;AAON;AAEA;AAEA;AAGA;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAoBL;;AAGA;;;;AAKI;AACE;;;;AAQN;;AAGA;AAEI;AACA;;;;AAGG;;AAEL;;;;;;AASI;;;;;;AAWN;AACE;;;;;;;;;;;;AAaA;;;;;;AAMF;;;;;;;;;AASC;;;;;AAMC;AACA;;AACA;AAKA;;AAIE;;AAEJ;;;;;AAKE;AACA;;AAEA;AACE;AACA;;;;AAKF;AACA;AACA;AACF;;AAIA;AAEI;AACA;;AAEA;;;AAIA;;;AAIE;AACF;;AAEA;AAKA;;AAEA;;AAGA;AACA;AACE;;;AAGM;AACA;;AAEN;AACE;;AAEF;;;AAGA;AACE;;AAEF;;;;AAKF;;;;AAIE;;;;AAIJ;;AAMF;AAEI;;;;;;AAMA;;AAED;;;;;;;;;AAUA;;AAKH;;AAuBY;AACA;;AAED;AAOb;AAEA;;"}
+{"version":3,"file":"SegmentedControl.js","sources":["src/components/navigation/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  segmentedControlRecipe,\n  segmentedIndicatorRecipe,\n} from './SegmentedControl.css';\n\nimport type {\n  SegmentedControlContextValue,\n  SegmentedControlOrientation,\n  SegmentedControlProps,\n  SegmentedControlVariant,\n} from './SegmentedControl.types';\n\n// --- Context ---\n\nconst SegmentedControlContext =\n  /*#__PURE__*/ createContext<SegmentedControlContextValue | null>(null);\n\nexport function useSegmentedControlContext(): SegmentedControlContextValue {\n  const ctx = useContext(SegmentedControlContext);\n  if (!ctx) {\n    throw new Error(\n      'SegmentedControlItem must be used within <SegmentedControl>'\n    );\n  }\n  return ctx;\n}\n\n// --- Indicator geometry helpers ---\n\ninterface IndicatorRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nfunction computeIndicatorRect(\n  itemEl: HTMLElement,\n  variant: SegmentedControlVariant,\n  orientation: SegmentedControlOrientation\n): IndicatorRect {\n  // Use offsetLeft/offsetTop (padding-box-relative) so the indicator\n  // aligns with the absolutely-positioned reference frame inside the root.\n  const x = itemEl.offsetLeft;\n  const y = itemEl.offsetTop;\n  const width = itemEl.offsetWidth;\n  const height = itemEl.offsetHeight;\n\n  if (variant === 'outline') {\n    if (orientation === 'horizontal') {\n      // 2px bar at the bottom of the item\n      return {\n        x,\n        y: y + height - 2,\n        width,\n        height: 2,\n      };\n    }\n    // vertical: 2px bar at the left of the item\n    return {\n      x,\n      y,\n      width: 2,\n      height,\n    };\n  }\n\n  // subtle / solid: full-segment background\n  return { x, y, width, height };\n}\n\n// --- Use isomorphic layout effect for SSR safety ---\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// --- Component ---\n\n/**\n * SegmentedControl — toolbar-density mutually exclusive selector.\n *\n * Use when you have 2-5 mutually exclusive states without separate panels\n * (viewport mode, list/grid toggle, alignment). For content panels use Tabs;\n * for form-style selection use RadioGroup.\n *\n * Compound API: pair `SegmentedControl` with `SegmentedControlItem`.\n *\n * @example\n * ```tsx\n * <SegmentedControl defaultValue=\"day\">\n *   <SegmentedControlItem value=\"day\">Day</SegmentedControlItem>\n *   <SegmentedControlItem value=\"week\">Week</SegmentedControlItem>\n *   <SegmentedControlItem value=\"month\">Month</SegmentedControlItem>\n * </SegmentedControl>\n * ```\n */\nexport const SegmentedControl: React.FC<SegmentedControlProps> = ({\n  value: valueProp,\n  defaultValue,\n  size = 'md',\n  orientation = 'horizontal',\n  variant = 'subtle',\n  fullWidth = false,\n  disabled = false,\n  onChange,\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  'aria-label': ariaLabel = 'Segmented control',\n  ...rest\n}) => {\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const isControlled = valueProp !== undefined;\n  const activeValue = isControlled ? valueProp : internalValue;\n\n  const setActiveValue = useCallback(\n    (next: string) => {\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      if (next !== activeValue) {\n        onChange?.(next);\n      }\n    },\n    [isControlled, onChange, activeValue]\n  );\n\n  // --- Item registry for sliding indicator ---\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const itemsRef = useRef<Map<string, HTMLElement>>(new Map());\n\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  const registerItem = useCallback(\n    (itemValue: string, node: HTMLElement | null) => {\n      if (node) {\n        itemsRef.current.set(itemValue, node);\n      } else {\n        itemsRef.current.delete(itemValue);\n      }\n    },\n    []\n  );\n\n  // --- Sliding indicator state ---\n\n  const [indicator, setIndicator] = useState<IndicatorRect | null>(null);\n  const [hasMeasured, setHasMeasured] = useState(false);\n\n  const updateIndicator = useCallback(() => {\n    if (activeValue === undefined) {\n      setIndicator(null);\n      return;\n    }\n    const item = itemsRef.current.get(activeValue);\n    if (!item) {\n      setIndicator(null);\n      return;\n    }\n    setIndicator(computeIndicatorRect(item, variant, orientation));\n  }, [activeValue, variant, orientation]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateIndicator();\n    // After first measure flip the flag so the indicator can transition on\n    // subsequent updates instead of animating from (0,0).\n    if (!hasMeasured) {\n      setHasMeasured(true);\n    }\n  }, [\n    updateIndicator,\n    activeValue,\n    variant,\n    orientation,\n    size,\n    fullWidth,\n    children,\n    hasMeasured,\n  ]);\n\n  // Roving-tabindex fallback: when no item matches activeValue, the group\n  // is otherwise unreachable via Tab. Promote the first non-disabled item\n  // to tabIndex=0 so users can enter the group with the keyboard.\n  useIsomorphicLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    const items = Array.from(\n      root.querySelectorAll<HTMLButtonElement>(\n        '[data-segmented-item=\"true\"]:not([data-disabled=\"true\"])'\n      )\n    );\n    const hasSelected = items.some(\n      el => el.getAttribute('aria-pressed') === 'true'\n    );\n    if (!hasSelected && items[0]) {\n      items[0].tabIndex = 0;\n    }\n  }, [activeValue, children]);\n\n  // Re-measure on resize\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const root = rootRef.current;\n    if (!root) return;\n\n    if (typeof ResizeObserver === 'undefined') {\n      const onResize = () => {\n        updateIndicator();\n      };\n      window.addEventListener('resize', onResize);\n      return () => {\n        window.removeEventListener('resize', onResize);\n      };\n    }\n\n    const ro = new ResizeObserver(() => {\n      updateIndicator();\n    });\n    ro.observe(root);\n    itemsRef.current.forEach(node => {\n      ro.observe(node);\n    });\n    return () => {\n      ro.disconnect();\n    };\n  }, [updateIndicator]);\n\n  // --- Keyboard navigation (roving) ---\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const root = rootRef.current;\n      if (!root) return;\n\n      const isHorizontal = orientation === 'horizontal';\n      const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n      const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n      const isNavKey =\n        e.key === nextKey ||\n        e.key === prevKey ||\n        e.key === 'Home' ||\n        e.key === 'End';\n      if (!isNavKey) return;\n\n      const items = Array.from(\n        root.querySelectorAll<HTMLButtonElement>(\n          '[data-segmented-item=\"true\"]:not([data-disabled=\"true\"])'\n        )\n      );\n      if (items.length === 0) return;\n\n      const current = e.target as HTMLButtonElement;\n      const currentIndex = items.indexOf(current);\n\n      let nextIndex: number;\n      switch (e.key) {\n        case nextKey:\n          nextIndex =\n            currentIndex === -1 || currentIndex === items.length - 1\n              ? 0\n              : currentIndex + 1;\n          break;\n        case prevKey:\n          nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = items.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      const target = items[nextIndex];\n      if (target) {\n        target.focus();\n        const nextValue = target.dataset['value'];\n        if (nextValue !== undefined) {\n          setActiveValue(nextValue);\n        }\n      }\n    },\n    [orientation, setActiveValue]\n  );\n\n  // --- Context value ---\n\n  const contextValue = useMemo<SegmentedControlContextValue>(\n    () => ({\n      value: activeValue,\n      size,\n      variant,\n      orientation,\n      disabled,\n      fullWidth,\n      onChange: setActiveValue,\n      registerItem,\n    }),\n    [\n      activeValue,\n      size,\n      variant,\n      orientation,\n      disabled,\n      fullWidth,\n      setActiveValue,\n      registerItem,\n    ]\n  );\n\n  const indicatorClass = segmentedIndicatorRecipe({ variant, orientation });\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <div\n        ref={setRootRef}\n        role=\"toolbar\"\n        aria-label={ariaLabel}\n        aria-disabled={disabled || undefined}\n        aria-orientation={orientation}\n        className={cx(\n          segmentedControlRecipe({ orientation, variant, fullWidth }),\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {indicator && (\n          <span\n            aria-hidden=\"true\"\n            className={indicatorClass}\n            style={{\n              transform: `translate(${indicator.x}px, ${indicator.y}px)`,\n              width: `${indicator.width}px`,\n              height: `${indicator.height}px`,\n              opacity: hasMeasured ? 1 : 0,\n            }}\n          />\n        )}\n        {children}\n      </div>\n    </SegmentedControlContext.Provider>\n  );\n};\n\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":[],"mappings":";;;;;;AA2BA;AAEA;AACE;;AAGA;;AAEE;;AAIF;AACF;AAWA;;;AAOE;AACA;AACA;AACA;AAEA;AACE;;;;AAII;;AAEA;;;;;;;AAOF;;;;;;AAON;AAEA;AAEA;AAGA;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAoBL;;AAGA;;;;AAKI;AACE;;;;AAQN;;AAGA;AAEI;AACA;;;;AAGE;;AAEJ;;;;;;AASI;;;;;;AAWN;AACE;;;;;;;;;;;;AAaA;;;;;;AAMF;;;;;;;;;AASC;;;;;AAMC;AACA;;AACA;AAKA;;AAIE;;AAEJ;;;;;AAKE;AACA;;AAEA;;AAEI;AACF;AACA;AACA;AACE;AACF;;AAGF;AACE;AACF;AACA;AACA;AACE;AACF;AACA;;AAEA;AACF;;AAIA;AAEI;AACA;;AAEA;;;AAIA;;;AAIE;AACF;;AAEA;AAKA;;AAEA;;AAGA;AACA;AACE;;;AAGM;AACA;;AAEN;AACE;;AAEF;;;AAGA;AACE;;AAEF;;;;AAKF;;;;AAIE;;;;AAIJ;;AAMF;AAEI;;;;;;AAMA;;AAED;;;;;;;;;AAUA;;AAKH;;AAuBY;AACA;;AAED;AAOb;AAEA;;"}

package/dist/esm/components/navigation/SegmentedControl/SegmentedControlItem.js

@@ -65,7 +65,7 @@ const SegmentedControlItem = ({ value, children, icon, tooltip, disabled: itemDi
     // Resolve aria-label fallback for icon-only segments
     const tooltipString = typeof tooltip === 'string' ? tooltip : undefined;
     const resolvedAriaLabel = ariaLabelProp ?? (isIconOnly ? tooltipString : undefined);
-    const button = (jsxs("button", { ref: ref, type: "button", role: "button", "data-segmented-item": "true", "data-value": value, "data-disabled": isDisabled || undefined, "aria-pressed": isSelected, "aria-disabled": isDisabled || undefined, "aria-label": resolvedAriaLabel, tabIndex: isSelected && !isDisabled ? 0 : -1, disabled: isDisabled, onClick: handleClick, onFocus: onFocus, className: cx(segmentedItemBaseStyle, segmentedItemRecipe({
+    const button = (jsxs("button", { ref: ref, type: "button", "data-segmented-item": "true", "data-value": value, "data-disabled": isDisabled || undefined, "aria-pressed": isSelected, "aria-disabled": isDisabled || undefined, "aria-label": resolvedAriaLabel, tabIndex: isSelected && !isDisabled ? 0 : -1, disabled: isDisabled, onClick: handleClick, onFocus: onFocus, className: cx(segmentedItemBaseStyle, segmentedItemRecipe({
             size,
             iconOnly: isIconOnly,
             orientation,

package/dist/esm/components/navigation/SegmentedControl/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../../../../../../src/components/navigation/SegmentedControl/SegmentedControlItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAkBA;;AAEI;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;AAKG;AACI;;AAyBL;AACA;AACA;;AAIA;AACA;;;;;;;AASQ;;AAGR;;;;;;AAOA;AACA;AAEI;AACA;AACF;;AAKA;AACE;AACF;AACF;AAEA;AAEI;;;AAEA;;;AAMJ;AACA;AAGA;;AAmBQ;;AAED;;;;AAoBD;;;AAOR;AAEA;;"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["src/components/navigation/SegmentedControl/SegmentedControlItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { Tooltip } from '@/components/primitives/Tooltip/Tooltip';\nimport { cx } from '@/utils/cx';\nimport { devWarn } from '@/utils/devWarn';\n\nimport { useSegmentedControlContext } from './SegmentedControl';\nimport {\n  itemOutlineStyle,\n  itemSolidStyle,\n  itemSubtleStyle,\n  segmentedItemBaseStyle,\n  segmentedItemIconStyle,\n  segmentedItemRecipe,\n  segmentedItemWrapperRecipe,\n} from './SegmentedControl.css';\n\nimport type { SegmentedControlItemProps } from './SegmentedControl.types';\n\nfunction getVariantClass(variant: 'subtle' | 'solid' | 'outline'): string {\n  switch (variant) {\n    case 'solid':\n      return itemSolidStyle;\n    case 'outline':\n      return itemOutlineStyle;\n    case 'subtle':\n    default:\n      return itemSubtleStyle;\n  }\n}\n\n/**\n * Individual segment inside a `SegmentedControl`.\n *\n * Supports text, icon-only, or icon + label segments. Pair icon-only\n * segments with a `tooltip` so the action remains discoverable.\n */\nexport const SegmentedControlItem: React.FC<SegmentedControlItemProps> = ({\n  value,\n  children,\n  icon,\n  tooltip,\n  disabled: itemDisabled = false,\n  className,\n  style,\n  testId,\n  onClick,\n  onFocus,\n  ref,\n  ...rest\n}) => {\n  const {\n    value: activeValue,\n    size,\n    variant,\n    orientation,\n    disabled: groupDisabled,\n    fullWidth,\n    onChange,\n    registerItem,\n  } = useSegmentedControlContext();\n\n  const isSelected = activeValue === value;\n  const isDisabled = groupDisabled || itemDisabled;\n  const hasLabel =\n    children !== undefined && children !== null && children !== '';\n  const isIconOnly = !hasLabel && Boolean(icon);\n\n  const ariaLabelProp = rest['aria-label'];\n  const ariaLabelledByProp = rest['aria-labelledby'];\n\n  // Warn when an icon-only segment has no accessible name. Runs in an\n  // effect so it does not fire from the render path (which would double in\n  // StrictMode and on every rerender).\n  useEffect(() => {\n    if (isIconOnly && !tooltip && !ariaLabelProp && !ariaLabelledByProp) {\n      devWarn(\n        `[SegmentedControl] Icon-only segment \"${value}\" has no tooltip or aria-label. ` +\n          'Add a tooltip prop or aria-label so the segment is accessible.'\n      );\n    }\n  }, [isIconOnly, tooltip, ariaLabelProp, ariaLabelledByProp, value]);\n\n  // Wrapper ref: this is the direct child of the SegmentedControl root and\n  // the measurement target for the sliding indicator. When `tooltip` is set\n  // the Tooltip introduces its own positioned wrapper between us and the\n  // button, which is why measuring the button itself would yield (0, 0)\n  // relative to that intermediate wrapper.\n  const wrapperRef = useRef<HTMLSpanElement | null>(null);\n  const setWrapperRef = useCallback(\n    (node: HTMLSpanElement | null) => {\n      wrapperRef.current = node;\n      registerItem(value, node);\n    },\n    [registerItem, value]\n  );\n\n  useEffect(() => {\n    return () => {\n      registerItem(value, null);\n    };\n  }, [registerItem, value]);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (isDisabled) return;\n      onChange(value);\n      onClick?.(e);\n    },\n    [isDisabled, onChange, value, onClick]\n  );\n\n  // Resolve aria-label fallback for icon-only segments\n  const tooltipString = typeof tooltip === 'string' ? tooltip : undefined;\n  const resolvedAriaLabel =\n    ariaLabelProp ?? (isIconOnly ? tooltipString : undefined);\n\n  const button = (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-segmented-item=\"true\"\n      data-value={value}\n      data-disabled={isDisabled || undefined}\n      aria-pressed={isSelected}\n      aria-disabled={isDisabled || undefined}\n      aria-label={resolvedAriaLabel}\n      tabIndex={isSelected && !isDisabled ? 0 : -1}\n      disabled={isDisabled}\n      onClick={handleClick}\n      onFocus={onFocus}\n      className={cx(\n        segmentedItemBaseStyle,\n        segmentedItemRecipe({\n          size,\n          iconOnly: isIconOnly,\n          orientation,\n        }),\n        getVariantClass(variant),\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {icon && <span className={segmentedItemIconStyle}>{icon}</span>}\n      {hasLabel && <span>{children}</span>}\n    </button>\n  );\n\n  return (\n    <span\n      ref={setWrapperRef}\n      data-segmented-item-wrapper=\"true\"\n      className={segmentedItemWrapperRecipe({\n        fullWidth,\n        orientation,\n        iconOnly: isIconOnly,\n        size,\n      })}\n    >\n      {tooltip ? <Tooltip title={tooltip}>{button}</Tooltip> : button}\n    </span>\n  );\n};\n\nSegmentedControlItem.displayName = 'SegmentedControlItem';\n"],"names":[],"mappings":";;;;;;;;;AAqBA;;AAEI;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;AAKG;AACI;;AAyBL;AACA;AACA;;AAIA;AACA;;;;;;;AASQ;;AAGR;;;;;;AAOA;AACA;AAEI;AACA;AACF;;AAKA;AACE;AACF;AACF;AAEA;AAEI;;;AAEA;;;AAMJ;AACA;AAGA;;AAkBQ;;AAED;;;;AAoBD;;;AAOR;AAEA;;"}

package/dist/esm/components/navigation/Tabs/Tab.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import { useTabsContext } from './Tabs.js';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
-import { cx } from '../../../utils/cx.js';
 import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { useTabsContext } from './Tabs.js';
 import { tabIconStyle, tabCloseButtonStyle, tabRecipe, tabBaseStyle, tabEnclosedActiveVerticalStyle, tabEnclosedActiveHorizontalStyle, tabEnclosedInactiveStyle, tabEnclosedStyle, tabPillsActiveStyle, tabPillsInactiveStyle, tabPillsStyle, tabUnderlineActiveVerticalStyle, tabUnderlineActiveHorizontalStyle, tabUnderlineInactiveIndicatorStyle, tabUnderlineActiveStyle, tabUnderlineInactiveStyle, tabUnderlineStyle } from './Tabs.css.js';
 
 const TAB_SIZE_MAP = {
@@ -62,6 +62,13 @@ const Tab = ({ value, children, icon, disabled = false, closable = false, onClos
         e.stopPropagation();
         onClose?.(value);
     }, [onClose, value]);
+    const handleCloseKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose?.(value);
+        }
+    }, [onClose, value]);
     const variantClasses = getVariantClasses(variant, isActive, orientation);
     return (jsxs("button", { ref: ref, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": panelId, "aria-disabled": disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, className: cx(tabBaseStyle, tabRecipe({ size, disabled, fullWidth }), variantClasses, className), style: {
             gap: vars.spacing.xs,
@@ -69,7 +76,7 @@ const Tab = ({ value, children, icon, disabled = false, closable = false, onClos
         }, "data-testid": testId, ...rest, children: [icon && (jsx("span", { className: tabIconStyle, style: {
                     width: `${sizeConfig.iconSize}px`,
                     height: `${sizeConfig.iconSize}px`,
-                }, children: icon })), children, closable && (jsx("span", { className: tabCloseButtonStyle, role: "button", "aria-label": `Close ${typeof children === 'string' ? children : value}`, onClick: handleClose, children: jsx(CloseIcon, { size: closeIconSize, decorative: true }) }))] }));
+                }, children: icon })), children, closable && (jsx("span", { className: tabCloseButtonStyle, role: "button", tabIndex: 0, "aria-label": `Close ${typeof children === 'string' ? children : value}`, onClick: handleClose, onKeyDown: handleCloseKeyDown, children: jsx(CloseIcon, { size: closeIconSize, decorative: true }) }))] }));
 };
 Tab.displayName = 'Tab';
 

package/dist/esm/components/navigation/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAkCA;AACE;AACA;AACA;;AAGF;AAEA;;AAMI;AACE;;AAKM;AACA;;AAGR;AACE;AAIF;AACE;;AAIM;AACA;;AAGR;AACE;;AAEN;AAEA;AAEO;AAaL;AASA;AACA;AACA;AAEA;AACA;AAEA;;;;;AAMA;AAEI;;;;;;;;;;AAUF;AAIF;;AAGI;AACF;;AAMF;AAmBM;AACA;AACD;AAQK;AACA;;AAmBZ;AAEA;;"}
+{"version":3,"file":"Tab.js","sources":["src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport { useTabsContext } from './Tabs';\nimport {\n  tabBaseStyle,\n  tabRecipe,\n  tabUnderlineStyle,\n  tabUnderlineActiveStyle,\n  tabUnderlineInactiveStyle,\n  tabUnderlineActiveHorizontalStyle,\n  tabUnderlineActiveVerticalStyle,\n  tabUnderlineInactiveIndicatorStyle,\n  tabPillsStyle,\n  tabPillsActiveStyle,\n  tabPillsInactiveStyle,\n  tabEnclosedStyle,\n  tabEnclosedActiveHorizontalStyle,\n  tabEnclosedActiveVerticalStyle,\n  tabEnclosedInactiveStyle,\n  tabIconStyle,\n  tabCloseButtonStyle,\n} from './Tabs.css';\n\nimport type { TabProps, TabsSize } from './Tabs.types';\n\n// --- Size maps ---\n\ninterface TabSizeConfig {\n  iconSize: number;\n}\n\nconst TAB_SIZE_MAP: Record<TabsSize, TabSizeConfig> = {\n  sm: { iconSize: 11 },\n  md: { iconSize: 13 },\n  lg: { iconSize: 15 },\n};\n\n// --- Helper to compute variant classes ---\n\nfunction getVariantClasses(\n  variant: string,\n  isActive: boolean,\n  orientation: 'horizontal' | 'vertical'\n): string {\n  switch (variant) {\n    case 'underline':\n      return cx(\n        tabUnderlineStyle,\n        isActive ? tabUnderlineActiveStyle : tabUnderlineInactiveStyle,\n        isActive\n          ? orientation === 'vertical'\n            ? tabUnderlineActiveVerticalStyle\n            : tabUnderlineActiveHorizontalStyle\n          : tabUnderlineInactiveIndicatorStyle\n      );\n    case 'pills':\n      return cx(\n        tabPillsStyle,\n        isActive ? tabPillsActiveStyle : tabPillsInactiveStyle\n      );\n    case 'enclosed':\n      return cx(\n        tabEnclosedStyle,\n        isActive\n          ? orientation === 'vertical'\n            ? tabEnclosedActiveVerticalStyle\n            : tabEnclosedActiveHorizontalStyle\n          : tabEnclosedInactiveStyle\n      );\n    default:\n      return '';\n  }\n}\n\n// --- Component ---\n\nexport const Tab: React.FC<TabProps> = ({\n  value,\n  children,\n  icon,\n  disabled = false,\n  closable = false,\n  onClose,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const {\n    activeValue,\n    setActiveValue,\n    variant,\n    size,\n    orientation,\n    fullWidth,\n    tabsId,\n  } = useTabsContext();\n  const isActive = activeValue === value;\n  const sizeConfig = TAB_SIZE_MAP[size];\n  const closeIconSize = size === 'lg' ? 'md' : 'sm';\n\n  const tabId = `tabs-${tabsId}-tab-${value}`;\n  const panelId = `tabs-${tabsId}-panel-${value}`;\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      setActiveValue(value);\n    }\n  }, [disabled, setActiveValue, value]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        if (!disabled) {\n          setActiveValue(value);\n        }\n      }\n      if (e.key === 'Delete' && closable && onClose) {\n        e.preventDefault();\n        onClose(value);\n      }\n    },\n    [disabled, setActiveValue, value, closable, onClose]\n  );\n\n  const handleClose = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onClose?.(value);\n    },\n    [onClose, value]\n  );\n\n  const handleCloseKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.(value);\n      }\n    },\n    [onClose, value]\n  );\n\n  const variantClasses = getVariantClasses(variant, isActive, orientation);\n\n  return (\n    <button\n      ref={ref}\n      role=\"tab\"\n      id={tabId}\n      aria-selected={isActive}\n      aria-controls={panelId}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={cx(\n        tabBaseStyle,\n        tabRecipe({ size, disabled, fullWidth }),\n        variantClasses,\n        className\n      )}\n      style={{\n        gap: vars.spacing.xs,\n        ...style,\n      }}\n      data-testid={testId}\n      {...rest}\n    >\n      {icon && (\n        <span\n          className={tabIconStyle}\n          style={{\n            width: `${sizeConfig.iconSize}px`,\n            height: `${sizeConfig.iconSize}px`,\n          }}\n        >\n          {icon}\n        </span>\n      )}\n      {children}\n      {closable && (\n        <span\n          className={tabCloseButtonStyle}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Close ${typeof children === 'string' ? children : value}`}\n          onClick={handleClose}\n          onKeyDown={handleCloseKeyDown}\n        >\n          <CloseIcon size={closeIconSize} decorative />\n        </span>\n      )}\n    </button>\n  );\n};\n\nTab.displayName = 'Tab';\n"],"names":[],"mappings":";;;;;;;;;AAqCA;AACE;AACA;AACA;;AAGF;AAEA;;AAMI;AACE;;AAKM;AACA;;AAGR;AACE;AAIF;AACE;;AAIM;AACA;;AAGR;AACE;;AAEN;AAEA;AAEO;AAaL;AASA;AACA;AACA;AAEA;AACA;AAEA;;;;;AAMA;AAEI;;;;;;;;;;AAUF;AAIF;;AAGI;AACF;AAIF;AAEI;;;AAGE;;AAEJ;;AAMF;AAmBM;AACA;AACD;AAQK;AACA;;AAqBZ;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabList.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
-import { useTabsContext } from './Tabs.js';
 import { cx } from '../../../utils/cx.js';
+import { useTabsContext } from './Tabs.js';
 import { tabListRecipe } from './Tabs.css.js';
 
 // --- Component ---
@@ -56,7 +56,10 @@ const TabList = ({ children, className, style, testId, ref, ...rest }) => {
             tabs[nextIndex]?.focus();
         }
     }, [orientation]);
-    return (jsx("div", { ref: setListRef, role: "tablist", "aria-orientation": orientation, className: cx(tabListRecipe({ orientation, variant, pillsFrame }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: children }));
+    return (jsx("div", { ref: setListRef, role: "tablist", 
+        // Roving tabindex lives on the individual tabs; the list itself is only
+        // focusable programmatically while it manages arrow-key navigation.
+        tabIndex: -1, "aria-orientation": orientation, className: cx(tabListRecipe({ orientation, variant, pillsFrame }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: children }));
 };
 TabList.displayName = 'TabList';
 

package/dist/esm/components/navigation/Tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/navigation/Tabs/TabList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA;;;AAWE;AAEA;AAEI;AACA;;;;AAGG;;AAEL;AAIF;AAEI;AACA;;AAEA;;;;AAMA;;;;AAMA;AACE;;AAEE;AACA;;;AAEF;;AAEE;;AACmB;;AAErB;;;;AAIA;;AAEE;;;AAIJ;AACE;;AAEJ;;AAqBJ;AAEA;;"}
+{"version":3,"file":"TabList.js","sources":["src/components/navigation/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useRef } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { useTabsContext } from './Tabs';\nimport { tabListRecipe } from './Tabs.css';\n\nimport type { TabListProps } from './Tabs.types';\n\n// --- Component ---\n\nexport const TabList: React.FC<TabListProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { orientation, variant, pillsFrame } = useTabsContext();\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const setListRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const list = listRef.current;\n      if (!list) return;\n\n      const tabs = Array.from(\n        list.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n      );\n      const currentIndex = tabs.indexOf(e.target as HTMLButtonElement);\n      if (currentIndex === -1) return;\n\n      const isHorizontal = orientation === 'horizontal';\n      const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n      const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n      let nextIndex: number | null = null;\n\n      switch (e.key) {\n        case nextKey:\n          e.preventDefault();\n          nextIndex = currentIndex + 1;\n          if (nextIndex >= tabs.length) nextIndex = 0;\n          break;\n        case prevKey:\n          e.preventDefault();\n          nextIndex = currentIndex - 1;\n          if (nextIndex < 0) nextIndex = tabs.length - 1;\n          break;\n        case 'Home':\n          e.preventDefault();\n          nextIndex = 0;\n          break;\n        case 'End':\n          e.preventDefault();\n          nextIndex = tabs.length - 1;\n          break;\n      }\n\n      if (nextIndex !== null) {\n        tabs[nextIndex]?.focus();\n      }\n    },\n    [orientation]\n  );\n\n  return (\n    <div\n      ref={setListRef}\n      role=\"tablist\"\n      // Roving tabindex lives on the individual tabs; the list itself is only\n      // focusable programmatically while it manages arrow-key navigation.\n      tabIndex={-1}\n      aria-orientation={orientation}\n      className={cx(\n        tabListRecipe({ orientation, variant, pillsFrame }),\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabList.displayName = 'TabList';\n"],"names":[],"mappings":";;;;;;;AAWA;;;AAWE;AAEA;AAEI;AACA;;;;AAGE;;AAEJ;AAIF;AAEI;AACA;;AAEA;;;;AAMA;;;;AAMA;AACE;;AAEE;AACA;;;AAEF;;AAEE;;AACmB;;AAErB;;;;AAIA;;AAEE;;;AAIJ;AACE;;AAEJ;;;;AAUE;AAcN;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabPanel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useTabsContext } from './Tabs.js';
 import { cx } from '../../../utils/cx.js';
+import { useTabsContext } from './Tabs.js';
 import { tabPanelStyle } from './Tabs.css.js';
 
 // --- Component ---

package/dist/esm/components/navigation/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AAEO;AAUL;AACA;AACA;;AAGA;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}
+{"version":3,"file":"TabPanel.js","sources":["src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { useTabsContext } from './Tabs';\nimport { tabPanelStyle } from './Tabs.css';\n\nimport type { TabPanelProps } from './Tabs.types';\n\n// --- Component ---\n\nexport const TabPanel: React.FC<TabPanelProps> = ({\n  value,\n  children,\n  keepMounted,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const ctx = useTabsContext();\n  const { activeValue, tabsId } = ctx;\n  const isActive = activeValue === value;\n\n  // Explicit child prop wins over the parent cascade. Undefined = inherit.\n  const effectiveKeepMounted = keepMounted ?? ctx.keepMounted;\n\n  const tabId = `tabs-${tabsId}-tab-${value}`;\n  const panelId = `tabs-${tabsId}-panel-${value}`;\n\n  if (!isActive && !effectiveKeepMounted) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tabpanel\"\n      id={panelId}\n      aria-labelledby={tabId}\n      tabIndex={isActive ? 0 : -1}\n      hidden={!isActive || undefined}\n      className={cx(tabPanelStyle, className)}\n      style={{\n        ...style,\n        ...(isActive ? undefined : { display: 'none' }),\n      }}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\n"],"names":[],"mappings":";;;;;;AAWA;AAEO;AAUL;AACA;AACA;;AAGA;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}

package/dist/esm/components/navigation/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;;AAWG;;;;;;;;;;AAWA;AAGH;AAaF;AAEA;;"}
+{"version":3,"file":"Tabs.js","sources":["src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { tabsRootRecipe } from './Tabs.css';\n\nimport type { TabsContextValue, TabsProps } from './Tabs.types';\n\n// --- Context ---\n\nconst TabsContext = /*#__PURE__*/ createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n  const ctx = useContext(TabsContext);\n  if (!ctx) {\n    throw new Error('Tabs compound components must be used within <Tabs>');\n  }\n  return ctx;\n}\n\n// --- Component ---\n\n/**\n * Tabs component for switching between views within a panel.\n *\n * Compound component pattern: use with TabList, Tab, and TabPanel.\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"properties\">\n *   <TabList>\n *     <Tab value=\"properties\">Properties</Tab>\n *     <Tab value=\"materials\">Materials</Tab>\n *   </TabList>\n *   <TabPanel value=\"properties\">Properties content</TabPanel>\n *   <TabPanel value=\"materials\">Materials content</TabPanel>\n * </Tabs>\n * ```\n */\nexport const Tabs: React.FC<TabsProps> = ({\n  value: valueProp,\n  defaultValue,\n  variant = 'underline',\n  size = 'md',\n  orientation = 'horizontal',\n  fullWidth = false,\n  pillsFrame = true,\n  keepMounted = false,\n  children,\n  onChange,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const autoId = useId();\n  const tabsId = autoId;\n\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const isControlled = valueProp !== undefined;\n  const activeValue = isControlled ? valueProp : internalValue;\n\n  const setActiveValue = useCallback(\n    (val: string) => {\n      if (!isControlled) {\n        setInternalValue(val);\n      }\n      onChange?.(val);\n    },\n    [isControlled, onChange]\n  );\n\n  const contextValue = useMemo<TabsContextValue>(\n    () => ({\n      activeValue,\n      setActiveValue,\n      variant,\n      size,\n      orientation,\n      fullWidth,\n      pillsFrame,\n      keepMounted,\n      tabsId,\n    }),\n    [\n      activeValue,\n      setActiveValue,\n      variant,\n      size,\n      orientation,\n      fullWidth,\n      pillsFrame,\n      keepMounted,\n      tabsId,\n    ]\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cx(tabsRootRecipe({ orientation }), className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nTabs.displayName = 'Tabs';\n"],"names":[],"mappings":";;;;;;AAiBA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;;AAWG;;;;;;;;;;AAWA;AAGH;AAaF;AAEA;;"}

package/dist/esm/components/primitives/Avatar/Avatar.js

@@ -1,9 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { vars } from '../../../theme/contract.css.js';
-import { cx } from '../../../utils/cx.js';
+import React, { useState, useCallback } from 'react';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -35,6 +33,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -90,6 +89,14 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
 import { avatarFallbackStyle, avatarImageInheritRadius, avatarImageStyle, avatarStatusRecipe, avatarRecipe, avatarBgVar, avatarStatusVar } from './Avatar.css.js';
 
 const NAMED_COLOR_MAP = {
@@ -195,7 +202,7 @@ const Avatar = /*#__PURE__*/ React.memo(({ src, alt, name, initials, fallbackIco
             onClick(event);
         }
     }, [onClick]);
-    const resolvedInitials = initials !== undefined && initials !== null && initials !== ''
+    const resolvedInitials = initials !== undefined && initials !== ''
         ? initials.slice(0, 2).toUpperCase()
         : name
             ? getAvatarInitials(name)

package/dist/esm/components/primitives/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../../src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACE;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;;AAEE;AACE;;AAEF;AACF;AAEA;;;;;AAKG;AACG;AACJ;AACA;AAAc;;;AAGd;;;AAGA;;;;AAIF;AAEA;AAIE;AACE;AACE;;;AAGF;;AAEF;AACA;AAAW;AACX;AACF;AAEA;AAIA;;;;;;;;;;;;;;;;;;AAkBG;AACI;;AAsBH;;;AAIA;;;AAIA;AAEI;;AACA;;;;AAIF;AAIF;;AAGI;AACE;;AAGN;;;AAIA;AAEA;;;;;;AAOA;;;;;;AAWO;AA8CT;AAGF;;"}
+{"version":3,"file":"Avatar.js","sources":["src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useState } from 'react';\n\nimport { UserIcon } from '@/components/Icons';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  avatarBgVar,\n  avatarFallbackStyle,\n  avatarImageInheritRadius,\n  avatarImageStyle,\n  avatarRecipe,\n  avatarStatusRecipe,\n  avatarStatusVar,\n} from './Avatar.css';\n\nimport type { AvatarColor, AvatarProps, AvatarStatus } from './Avatar.types';\n\nconst NAMED_COLOR_MAP: Record<string, string> = {\n  neutral: vars.colors.text.muted,\n  primary: vars.colors.accent.primary,\n  info: vars.colors.accent.primary,\n  success: vars.colors.accent.success,\n  warning: vars.colors.accent.warning,\n  error: vars.colors.accent.error,\n};\n\nconst AUTO_PALETTE: readonly string[] = [\n  vars.colors.accent.primary,\n  vars.colors.accent.secondary,\n  vars.colors.accent.success,\n  vars.colors.accent.warning,\n  vars.colors.accent.error,\n];\n\nconst STATUS_COLOR_MAP: Record<AvatarStatus, string> = {\n  online: vars.colors.accent.success,\n  away: vars.colors.accent.warning,\n  busy: vars.colors.accent.error,\n  offline: vars.colors.text.muted,\n};\n\nconst STATUS_LABEL_MAP: Record<AvatarStatus, string> = {\n  online: 'Online',\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n};\n\nfunction hashString(str: string): number {\n  let hash = 0;\n  for (let i = 0; i < str.length; i += 1) {\n    hash = (hash * 31 + str.charCodeAt(i)) | 0;\n  }\n  return Math.abs(hash);\n}\n\n/**\n * Derive 1- or 2-letter initials from a display name.\n *\n * Single-word names contribute their first two characters; multi-word names\n * contribute the first character of the first and last word.\n */\nexport function getAvatarInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const parts = trimmed.split(/\\s+/);\n  const firstWord = parts[0] ?? '';\n  if (parts.length === 1) {\n    return firstWord.slice(0, 2).toUpperCase();\n  }\n  const lastWord = parts[parts.length - 1] ?? '';\n  const first = firstWord[0] ?? '';\n  const last = lastWord[0] ?? '';\n  return (first + last).toUpperCase();\n}\n\nfunction resolveBackgroundColor(\n  color: AvatarColor,\n  name: string | undefined\n): string {\n  if (color === 'auto') {\n    if (!name?.trim()) {\n      return vars.colors.text.muted;\n    }\n    const index = hashString(name) % AUTO_PALETTE.length;\n    return AUTO_PALETTE[index] ?? vars.colors.text.muted;\n  }\n  const named = NAMED_COLOR_MAP[color];\n  if (named) return named;\n  return color;\n}\n\nconst DefaultUserIcon: React.FC = () => (\n  <UserIcon size=\"60%\" color=\"currentColor\" decorative />\n);\n\n/**\n * Display a person, agent, or named entity.\n *\n * Renders an image when `src` is provided; if it fails to load (or no `src`\n * was given) falls back to initials derived from `name`, then to a generic\n * user icon. A deterministic auto color keeps a given `name` looking the\n * same across renders while different names look distinct.\n *\n * Provide `onClick` to render the avatar as an interactive button (focusable,\n * Enter/Space-activatable, hover affordance).\n *\n * @example\n * ```tsx\n * <Avatar src=\"/users/alice.png\" name=\"Alice Wong\" />\n * <Avatar name=\"Sebastian Kowalski\" status=\"online\" />\n * <Avatar name=\"Bot\" color=\"primary\" shape=\"rounded\" />\n * <Avatar name=\"Owner\" size=\"xl\" onClick={openProfile} />\n * ```\n */\nexport const Avatar = /*#__PURE__*/ React.memo<AvatarProps>(\n  ({\n    src,\n    alt,\n    name,\n    initials,\n    fallbackIcon,\n    size = 'md',\n    shape = 'circle',\n    color = 'auto',\n    status,\n    onClick,\n    bordered = false,\n    className,\n    style,\n    testId,\n    'aria-label': ariaLabelProp,\n    ref,\n    ...rest\n  }) => {\n    const [imageOk, setImageOk] = useState<boolean>(true);\n\n    const handleImageError = useCallback(() => {\n      setImageOk(false);\n    }, []);\n\n    const handleImageLoad = useCallback(() => {\n      setImageOk(true);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLSpanElement>) => {\n        if (!onClick) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick(event);\n        }\n      },\n      [onClick]\n    );\n\n    const resolvedInitials =\n      initials !== undefined && initials !== ''\n        ? initials.slice(0, 2).toUpperCase()\n        : name\n          ? getAvatarInitials(name)\n          : '';\n\n    const hasInitials = resolvedInitials.length > 0;\n    const showImage = Boolean(src) && imageOk;\n\n    const bg = resolveBackgroundColor(color, name);\n    const accessibleName = ariaLabelProp ?? name ?? alt;\n\n    const inlineVars: Record<string, string> = {\n      [avatarBgVar]: bg,\n    };\n    if (status) {\n      inlineVars[avatarStatusVar] = STATUS_COLOR_MAP[status];\n    }\n\n    const interactive = Boolean(onClick);\n\n    return (\n      <span\n        ref={ref}\n        className={cx(\n          avatarRecipe({\n            size,\n            shape,\n            bordered: bordered || undefined,\n            interactive: interactive || undefined,\n          }),\n          className\n        )}\n        style={{ ...assignInlineVars(inlineVars), ...style }}\n        data-testid={testId}\n        data-size={size}\n        data-shape={shape}\n        role={interactive ? 'button' : 'img'}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={onClick}\n        onKeyDown={interactive ? handleKeyDown : undefined}\n        aria-label={accessibleName}\n        {...rest}\n      >\n        <span className={avatarFallbackStyle} aria-hidden={showImage}>\n          {hasInitials ? (\n            resolvedInitials\n          ) : fallbackIcon !== undefined ? (\n            fallbackIcon\n          ) : (\n            <DefaultUserIcon />\n          )}\n        </span>\n\n        {src && (\n          <img\n            src={src}\n            alt={alt ?? name ?? ''}\n            className={cx(avatarImageStyle, avatarImageInheritRadius)}\n            data-loaded={imageOk ? 'true' : 'false'}\n            onError={handleImageError}\n            onLoad={handleImageLoad}\n            draggable={false}\n          />\n        )}\n\n        {status && (\n          <span\n            className={avatarStatusRecipe({ size })}\n            data-status={status}\n            role=\"status\"\n            aria-label={`Status: ${STATUS_LABEL_MAP[status]}`}\n          />\n        )}\n      </span>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;;AAEE;AACE;;AAEF;AACF;AAEA;;;;;AAKG;AACG;AACJ;AACA;AAAc;;;AAGd;;;AAGA;;;;AAIF;AAEA;AAIE;AACE;AACE;;;AAGF;;AAEF;AACA;AAAW;AACX;AACF;AAEA;AAIA;;;;;;;;;;;;;;;;;;AAkBG;AACI;;AAsBH;;;AAIA;;;AAIA;AAEI;;AACA;;;;AAIF;;;AAOE;AACE;;AAGN;;;AAIA;AAEA;;;;;;AAOA;;;;;;AAWO;AA8CT;AAGF;;"}

package/dist/esm/components/primitives/Avatar/AvatarGroup.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { useMemo } from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Avatar } from './Avatar.js';
 import { avatarGroupSpacingVar, avatarGroupItemStyle, avatarGroupRootStyle, avatarBgVar, avatarRecipe } from './Avatar.css.js';
 

package/dist/esm/components/primitives/Avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../../../src/components/primitives/Avatar/AvatarGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAiBA;AACA;AAEA;AACE;AACF;AAEA;AAGE;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;AAoBC;;;AAGA;;AAGE;AACD;AAED;AAGO;AACA;;;AAKmB;AAExB;;AAIM;;AAED;;AAGA;AAQL;;;;AAYA;AAKF;AAEA;AASM;AACA;AACA;;;AASK;AAGP;AAIN;AAGF;;"}
+{"version":3,"file":"AvatarGroup.js","sources":["src/components/primitives/Avatar/AvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useMemo } from 'react';\n\nimport { Tooltip } from '@/components/primitives/Tooltip';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport { Avatar } from './Avatar';\nimport {\n  avatarBgVar,\n  avatarGroupItemStyle,\n  avatarGroupRootStyle,\n  avatarGroupSpacingVar,\n  avatarRecipe,\n} from './Avatar.css';\n\nimport type { AvatarGroupProps, AvatarProps } from './Avatar.types';\n\nconst DEFAULT_MAX = 4;\nconst DEFAULT_SPACING = -8;\n\nfunction resolveSpacing(spacing: number | string): string {\n  return typeof spacing === 'number' ? `${spacing}px` : spacing;\n}\n\nfunction isAvatarElement(\n  node: React.ReactNode\n): node is React.ReactElement<AvatarProps> {\n  return React.isValidElement(node) && node.type === Avatar;\n}\n\n/**\n * Display a row of `Avatar`s with optional overlap and overflow handling.\n *\n * Children are rendered in order, with negative margin (controlled via the\n * `spacing` prop) creating the classic overlapping cluster. When the number\n * of children exceeds `max`, the remainder collapses into a `+N` indicator;\n * hovering it reveals the names of the hidden avatars.\n *\n * `size` and `bordered` are applied to every child — the group always wins\n * over per-avatar values to keep the visual treatment uniform.\n *\n * @example\n * ```tsx\n * <AvatarGroup max={4}>\n *   <Avatar name=\"Alice\" />\n *   <Avatar name=\"Bob\" />\n *   <Avatar name=\"Carol\" />\n *   <Avatar name=\"Dave\" />\n *   <Avatar name=\"Eve\" />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = /*#__PURE__*/ React.memo<AvatarGroupProps>(\n  ({\n    max = DEFAULT_MAX,\n    spacing = DEFAULT_SPACING,\n    size = 'md',\n    bordered = true,\n    showOverflowTooltip = true,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const items = useMemo(\n      () => React.Children.toArray(children).filter(isAvatarElement),\n      [children]\n    );\n\n    const visibleCount = Math.min(items.length, max);\n    const visibleItems = items.slice(0, visibleCount);\n    const hiddenItems = items.slice(visibleCount);\n    const overflowCount = hiddenItems.length;\n\n    const spacingStyle = assignInlineVars({\n      [avatarGroupSpacingVar]: resolveSpacing(spacing),\n    });\n\n    const hiddenNames = useMemo(\n      () =>\n        hiddenItems\n          .map(child => child.props.name ?? child.props.alt)\n          .filter((value): value is string => Boolean(value)),\n      [hiddenItems]\n    );\n\n    const renderOverflow = () => {\n      if (overflowCount <= 0) return null;\n\n      const overflowEl = (\n        <span\n          className={avatarRecipe({\n            size,\n            shape: 'circle',\n            bordered: bordered || undefined,\n          })}\n          style={assignInlineVars({\n            [avatarBgVar]: vars.colors.surface.active,\n          })}\n          data-overflow=\"true\"\n          aria-label={`${overflowCount} more`}\n        >\n          {`+${overflowCount}`}\n        </span>\n      );\n\n      const wrapped =\n        showOverflowTooltip && hiddenNames.length > 0 ? (\n          <Tooltip title={hiddenNames.join(', ')} placement=\"top\">\n            {overflowEl}\n          </Tooltip>\n        ) : (\n          overflowEl\n        );\n\n      // The wrapper span owns the spacing rule (`:not(:first-child)`), so the\n      // overlap stays correct whether or not Tooltip injects its own trigger\n      // div between this wrapper and the +N span.\n      return (\n        <span className={avatarGroupItemStyle} style={{ zIndex: 0 }}>\n          {wrapped}\n        </span>\n      );\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cx(avatarGroupRootStyle, className)}\n        style={{ ...spacingStyle, ...style }}\n        data-testid={testId}\n        {...rest}\n      >\n        {visibleItems.map((child, index) => {\n          const childKey = child.key ?? index;\n          const itemZIndex = visibleItems.length - index;\n          return (\n            <span\n              key={childKey}\n              className={avatarGroupItemStyle}\n              style={{ zIndex: itemZIndex }}\n            >\n              {React.cloneElement(child, {\n                size,\n                bordered,\n              })}\n            </span>\n          );\n        })}\n        {renderOverflow()}\n      </div>\n    );\n  }\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"names":[],"mappings":";;;;;;;;;;AAoBA;AACA;AAEA;AACE;AACF;AAEA;AAGE;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;AAoBC;;;AAGA;;AAGE;AACD;AAED;AAGO;AACA;;;AAKmB;AAExB;;AAIM;;AAED;;AAGA;AAQL;;;;AAYA;AAKF;AAEA;AASM;AACA;AACA;;;AASK;AAGP;AAIN;AAGF;;"}