eidos-ui 3.1.0 → 3.2.0

package/dist/chunk-O3LG7B2J.cjs

@@ -0,0 +1,186 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkZ5U4NJTWcjs = require('./chunk-Z5U4NJTW.cjs');
+
+
+var _chunkCUJBNRJJcjs = require('./chunk-CUJBNRJJ.cjs');
+
+// src/components/SegmentedControl/SegmentedControl.component.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var SegmentedControl = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  color = "primary",
+  disabled = false,
+  fullWidth = false,
+  scrollButtons = "auto",
+  className = ""
+}) => {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = _react.useState.call(void 0, 
+    _nullishCoalesce(_nullishCoalesce(defaultValue, () => ( _optionalChain([options, 'access', _ => _[0], 'optionalAccess', _2 => _2.value]))), () => ( ""))
+  );
+  const activeValue = isControlled ? value : internalValue;
+  const handleSelect = (optValue) => {
+    if (disabled) return;
+    if (optValue === activeValue) return;
+    if (!isControlled) setInternalValue(optValue);
+    _optionalChain([onChange, 'optionalCall', _3 => _3(optValue)]);
+  };
+  const trackRef = _react.useRef.call(void 0, null);
+  const selectableValues = options.filter((opt) => !opt.disabled).map((opt) => opt.value);
+  const hasSelection = selectableValues.includes(activeValue);
+  const fallbackTabbableValue = selectableValues[0];
+  const isTabbable = (optValue) => hasSelection ? optValue === activeValue : optValue === fallbackTabbableValue;
+  const handleKeyDown = (event) => {
+    if (disabled || selectableValues.length === 0) return;
+    const currentIndex = selectableValues.indexOf(activeValue);
+    const from = currentIndex === -1 ? 0 : currentIndex;
+    let targetIndex = -1;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      targetIndex = (from + 1) % selectableValues.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      targetIndex = (from - 1 + selectableValues.length) % selectableValues.length;
+    } else if (event.key === "Home") {
+      targetIndex = 0;
+    } else if (event.key === "End") {
+      targetIndex = selectableValues.length - 1;
+    }
+    if (targetIndex === -1) return;
+    event.preventDefault();
+    const targetValue = selectableValues[targetIndex];
+    handleSelect(targetValue);
+    const target = _optionalChain([trackRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.querySelector, 'call', _6 => _6(
+      `[data-value="${CSS.escape(targetValue)}"]`
+    )]);
+    _optionalChain([target, 'optionalAccess', _7 => _7.focus, 'call', _8 => _8()]);
+  };
+  _react.useLayoutEffect.call(void 0, () => {
+    const track2 = trackRef.current;
+    if (!track2) return;
+    const activeItem = track2.querySelector('[aria-checked="true"]');
+    if (!activeItem) return;
+    const left = activeItem.offsetLeft;
+    const right = left + activeItem.offsetWidth;
+    if (left < track2.scrollLeft) {
+      track2.scrollLeft = left;
+    } else if (right > track2.scrollLeft + track2.clientWidth) {
+      track2.scrollLeft = right - track2.clientWidth;
+    }
+  }, [activeValue]);
+  const [scrollState, setScrollState] = _react.useState.call(void 0, { canScrollPrev: false, canScrollNext: false });
+  const hasScrollButtons = scrollButtons !== "none";
+  _react.useEffect.call(void 0, () => {
+    if (!hasScrollButtons) return;
+    const track2 = trackRef.current;
+    if (!track2) return;
+    const update = () => {
+      const maxScroll = track2.scrollWidth - track2.clientWidth;
+      const canScrollPrev = track2.scrollLeft > 1;
+      const canScrollNext = track2.scrollLeft < maxScroll - 1;
+      setScrollState(
+        (previous) => previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext ? previous : { canScrollPrev, canScrollNext }
+      );
+    };
+    update();
+    track2.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(track2);
+    Array.from(track2.children).forEach((child) => observer.observe(child));
+    return () => {
+      track2.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [hasScrollButtons, options.length, size, fullWidth]);
+  const scrollByStep = (direction) => {
+    const track2 = trackRef.current;
+    if (!track2) return;
+    const step = track2.clientWidth * 0.8;
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    track2.scrollBy({ left: direction * step, behavior: reducedMotion ? "auto" : "smooth" });
+  };
+  const barClasses = [
+    "eidos-segmented-bar",
+    fullWidth && "eidos-segmented-bar--full-width",
+    disabled && "eidos-segmented-bar--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const containerClasses = [
+    "eidos-segmented",
+    `eidos-segmented--${size}`,
+    `eidos-segmented--${color}`,
+    disabled && "eidos-segmented--disabled",
+    fullWidth && "eidos-segmented--full-width",
+    // With buttons, they are the affordance - a native scrollbar under a
+    // compact pill control is redundant and would break its shape.
+    hasScrollButtons && "eidos-segmented--hide-scrollbar"
+  ].filter(Boolean).join(" ");
+  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;
+  const showNextButton = hasScrollButtons && scrollState.canScrollNext;
+  const scrollButtonClasses = (direction) => [
+    "eidos-segmented-scroll-button",
+    `eidos-segmented-scroll-button--${direction}`,
+    `eidos-segmented-scroll-button--${size}`
+  ].join(" ");
+  const track = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: trackRef, className: containerClasses, role: "radiogroup", children: options.map((opt) => {
+    const isActive = activeValue === opt.value;
+    const isDisabled = disabled || !!opt.disabled;
+    const segment = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": isActive,
+        disabled: isDisabled,
+        "data-value": opt.value,
+        tabIndex: isTabbable(opt.value) ? 0 : -1,
+        className: ["eidos-segmented-item", isActive && "eidos-segmented-item--active"].filter(Boolean).join(" "),
+        onClick: () => !isDisabled && handleSelect(opt.value),
+        onKeyDown: handleKeyDown,
+        children: [
+          opt.icon && _chunkCUJBNRJJcjs.renderIcon.call(void 0, opt.icon, "eidos-segmented-icon"),
+          opt.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-segmented-label", children: opt.label })
+        ]
+      },
+      opt.value
+    );
+    return opt.tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ5U4NJTWcjs.Tooltip, { message: opt.tooltip, children: segment }, opt.value) : _react2.default.cloneElement(segment, { key: opt.value });
+  }) });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: barClasses, children: [
+    showPrevButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: scrollButtonClasses("prev"),
+        onClick: () => scrollByStep(-1),
+        onMouseDown: (event) => event.preventDefault(),
+        tabIndex: -1,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { className: "eidos-segmented-scroll-button-icon" })
+      }
+    ),
+    track,
+    showNextButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: scrollButtonClasses("next"),
+        onClick: () => scrollByStep(1),
+        onMouseDown: (event) => event.preventDefault(),
+        tabIndex: -1,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "eidos-segmented-scroll-button-icon" })
+      }
+    )
+  ] });
+};
+
+
+
+exports.SegmentedControl = SegmentedControl;
+//# sourceMappingURL=chunk-O3LG7B2J.cjs.map

package/dist/chunk-O3LG7B2J.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-O3LG7B2J.cjs","../src/components/SegmentedControl/SegmentedControl.component.tsx"],"names":["track"],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-O3LG7B2J.cjs","sourcesContent":[null,"import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Tooltip } from '../Tooltip';\nimport { renderIcon } from '../../utils';\nimport type { SegmentedControlProps } from './SegmentedControl.types';\n\n/**\n * SegmentedControl - a compact, single-select toggle group rendered as a pill.\n *\n * Semantics: `role=\"radiogroup\"` on the container, `role=\"radio\"` on each\n * segment. Supports controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * // Controlled\n * const [view, setView] = useState('list');\n * <SegmentedControl\n *   options={[\n *     { value: 'list',  icon: List,       tooltip: 'List view' },\n *     { value: 'grid',  icon: LayoutGrid, tooltip: 'Grid view' },\n *     { value: 'table', icon: Table2,     tooltip: 'Table view' },\n *   ]}\n *   value={view}\n *   onChange={setView}\n * />\n *\n * // With labels\n * <SegmentedControl\n *   options={[\n *     { value: 'day',   label: 'Day' },\n *     { value: 'week',  label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]}\n *   defaultValue=\"week\"\n *   onChange={console.log}\n * />\n * ```\n */\nexport const SegmentedControl: React.FC<SegmentedControlProps> = ({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  size = 'md',\n  color = 'primary',\n  disabled = false,\n  fullWidth = false,\n  scrollButtons = 'auto',\n  className = '',\n}) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? options[0]?.value ?? '',\n  );\n\n  const activeValue = isControlled ? value : internalValue;\n\n  const handleSelect = (optValue: string) => {\n    if (disabled) return;\n    if (optValue === activeValue) return; // already selected\n    if (!isControlled) setInternalValue(optValue);\n    onChange?.(optValue);\n  };\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  // Roving tabindex: the group is a single tab stop, and arrow keys move\n  // within it - the WAI-ARIA radiogroup pattern, which this had none of.\n  // Every segment used to be its own tab stop, so a six-option control cost\n  // six presses to skip past.\n  //\n  // The tabbable segment is the selected one; if nothing is selected (a\n  // controlled `value` matching no option), the first enabled segment takes\n  // the stop so the group can still be reached at all.\n  const selectableValues = options.filter((opt) => !opt.disabled).map((opt) => opt.value);\n  const hasSelection = selectableValues.includes(activeValue);\n  const fallbackTabbableValue = selectableValues[0];\n\n  const isTabbable = (optValue: string) =>\n    hasSelection ? optValue === activeValue : optValue === fallbackTabbableValue;\n\n  // Selection follows focus, which is what the radio pattern specifies -\n  // unlike `Tabs`, where arrow keys only move focus. Disabled segments are\n  // skipped rather than selected-and-ignored, and both ends wrap.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || selectableValues.length === 0) return;\n\n    const currentIndex = selectableValues.indexOf(activeValue);\n    const from = currentIndex === -1 ? 0 : currentIndex;\n    let targetIndex = -1;\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      targetIndex = (from + 1) % selectableValues.length;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      targetIndex = (from - 1 + selectableValues.length) % selectableValues.length;\n    } else if (event.key === 'Home') {\n      targetIndex = 0;\n    } else if (event.key === 'End') {\n      targetIndex = selectableValues.length - 1;\n    }\n\n    if (targetIndex === -1) return;\n\n    event.preventDefault();\n    const targetValue = selectableValues[targetIndex];\n    handleSelect(targetValue);\n\n    // Focus has to follow the selection explicitly: the segment that was\n    // focused is about to lose its `tabIndex={0}` to the newly selected one,\n    // and focus does not move on its own.\n    const target = trackRef.current?.querySelector<HTMLElement>(\n      `[data-value=\"${CSS.escape(targetValue)}\"]`,\n    );\n    target?.focus();\n  };\n\n  // The selected segment can sit outside the scrollport - after a controlled\n  // `value` change, or once focus moves to a segment off screen. `scrollLeft`\n  // is set directly rather than through `scrollIntoView`, which walks the\n  // whole ancestor chain and would scroll the page vertically when the\n  // control is below the fold.\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const activeItem = track.querySelector('[aria-checked=\"true\"]') as HTMLElement | null;\n    if (!activeItem) return;\n\n    const left = activeItem.offsetLeft;\n    const right = left + activeItem.offsetWidth;\n\n    if (left < track.scrollLeft) {\n      track.scrollLeft = left;\n    } else if (right > track.scrollLeft + track.clientWidth) {\n      track.scrollLeft = right - track.clientWidth;\n    }\n  }, [activeValue]);\n\n  // Whether either end has segments hidden past it. Drives the presence of\n  // each button: none at all when the track fits, and none at the end already\n  // reached, since a button there would point at nothing.\n  const [scrollState, setScrollState] = useState({ canScrollPrev: false, canScrollNext: false });\n  const hasScrollButtons = scrollButtons !== 'none';\n\n  useEffect(() => {\n    if (!hasScrollButtons) return;\n    const track = trackRef.current;\n    if (!track) return;\n\n    const update = () => {\n      const maxScroll = track.scrollWidth - track.clientWidth;\n      // 1px of tolerance: fractional layout widths leave a sub-pixel\n      // remainder at either end that would otherwise keep a button enabled\n      // for a scroll that can no longer move anything.\n      const canScrollPrev = track.scrollLeft > 1;\n      const canScrollNext = track.scrollLeft < maxScroll - 1;\n      setScrollState((previous) =>\n        previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext\n          ? previous\n          : { canScrollPrev, canScrollNext },\n      );\n    };\n\n    update();\n    track.addEventListener('scroll', update, { passive: true });\n\n    // The track's own box stays the same width when a label reflows or a font\n    // finishes loading, so the segments have to be observed as well as the\n    // container - only their sizes tell us the track started overflowing.\n    const observer = new ResizeObserver(update);\n    observer.observe(track);\n    Array.from(track.children).forEach((child) => observer.observe(child));\n\n    return () => {\n      track.removeEventListener('scroll', update);\n      observer.disconnect();\n    };\n  }, [hasScrollButtons, options.length, size, fullWidth]);\n\n  const scrollByStep = (direction: -1 | 1) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    // A step just short of a full page keeps a segment of context on screen,\n    // the same way a paged scrollbar click does.\n    const step = track.clientWidth * 0.8;\n    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    track.scrollBy({ left: direction * step, behavior: reducedMotion ? 'auto' : 'smooth' });\n  };\n\n  const barClasses = [\n    'eidos-segmented-bar',\n    fullWidth && 'eidos-segmented-bar--full-width',\n    disabled && 'eidos-segmented-bar--disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const containerClasses = [\n    'eidos-segmented',\n    `eidos-segmented--${size}`,\n    `eidos-segmented--${color}`,\n    disabled && 'eidos-segmented--disabled',\n    fullWidth && 'eidos-segmented--full-width',\n    // With buttons, they are the affordance - a native scrollbar under a\n    // compact pill control is redundant and would break its shape.\n    hasScrollButtons && 'eidos-segmented--hide-scrollbar',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;\n  const showNextButton = hasScrollButtons && scrollState.canScrollNext;\n\n  const scrollButtonClasses = (direction: 'prev' | 'next') =>\n    [\n      'eidos-segmented-scroll-button',\n      `eidos-segmented-scroll-button--${direction}`,\n      `eidos-segmented-scroll-button--${size}`,\n    ].join(' ');\n\n  const track = (\n    <div ref={trackRef} className={containerClasses} role=\"radiogroup\">\n      {options.map((opt) => {\n        const isActive = activeValue === opt.value;\n        const isDisabled = disabled || !!opt.disabled;\n\n        const segment = (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            disabled={isDisabled}\n            // Read back by the keyboard handler to move focus onto the newly\n            // selected segment, which `value` alone can't identify in the DOM.\n            data-value={opt.value}\n            tabIndex={isTabbable(opt.value) ? 0 : -1}\n            className={['eidos-segmented-item', isActive && 'eidos-segmented-item--active']\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => !isDisabled && handleSelect(opt.value)}\n            onKeyDown={handleKeyDown}\n          >\n            {opt.icon && renderIcon(opt.icon, 'eidos-segmented-icon')}\n            {opt.label && <span className=\"eidos-segmented-label\">{opt.label}</span>}\n          </button>\n        );\n\n        return opt.tooltip ? (\n          <Tooltip key={opt.value} message={opt.tooltip}>\n            {segment}\n          </Tooltip>\n        ) : (\n          React.cloneElement(segment, { key: opt.value })\n        );\n      })}\n    </div>\n  );\n\n  // The buttons are siblings of the track, never children of it:\n  // `role=\"radiogroup\"` only accepts radios. They are also hidden from\n  // assistive tech and skipped by Tab, because they are a pointer affordance\n  // for something the keyboard already does - tabbing to a segment scrolls it\n  // into view. Same arrangement as `Tabs`.\n  return (\n    <div className={barClasses}>\n      {showPrevButton && (\n        <button\n          type=\"button\"\n          className={scrollButtonClasses('prev')}\n          onClick={() => scrollByStep(-1)}\n          // `tabIndex={-1}` keeps these out of the tab order, but it does not\n          // stop a *click* from focusing them - and focus landing inside an\n          // `aria-hidden` subtree is an error the browser reports (\"Blocked\n          // aria-hidden on an element because its descendant retained\n          // focus\"). Suppressing the default mousedown behaviour keeps the\n          // button unfocusable by pointer as well, while the click still\n          // fires. `inert` would also prevent the click, so it is not an\n          // option here.\n          onMouseDown={(event) => event.preventDefault()}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        >\n          <ChevronLeft className=\"eidos-segmented-scroll-button-icon\" />\n        </button>\n      )}\n\n      {track}\n\n      {showNextButton && (\n        <button\n          type=\"button\"\n          className={scrollButtonClasses('next')}\n          onClick={() => scrollByStep(1)}\n          onMouseDown={(event) => event.preventDefault()} // see the prev button\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        >\n          <ChevronRight className=\"eidos-segmented-scroll-button-icon\" />\n        </button>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/{chunk-SHYSLWQG.js → chunk-OAK7HFOJ.js}

@@ -1,9 +1,9 @@
-import {
-  renderIcon
-} from "./chunk-KBG77JHC.js";
 import {
   Tooltip
 } from "./chunk-YV57RSPD.js";
+import {
+  renderIcon
+} from "./chunk-EAJHEYZM.js";
 
 // src/components/Chip/Chip.component.tsx
 import { X } from "lucide-react";
@@ -85,4 +85,4 @@ var Chip = ({
 export {
   Chip
 };
-//# sourceMappingURL=chunk-SHYSLWQG.js.map
+//# sourceMappingURL=chunk-OAK7HFOJ.js.map

package/dist/{chunk-QF2RAUPB.cjs → chunk-OAPOGYA5.cjs}

@@ -1,4 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/NumberInput/NumberInput.component.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkCUJBNRJJcjs = require('./chunk-CUJBNRJJ.cjs');
+
+// src/components/NumberInput/NumberInput.component.tsx
 var _react = require('react');
 var _lucidereact = require('lucide-react');
 var _jsxruntime = require('react/jsx-runtime');
@@ -95,7 +99,7 @@ var NumberInput = _react.forwardRef.call(void 0,
     const rootClasses = [
       "eidos-number-input",
       `eidos-number-input--${size}`,
-      fullWidth && "eidos-number-input--fullWidth",
+      fullWidth && _chunkCUJBNRJJcjs.fullWidthModifier.call(void 0, "eidos-number-input"),
       error && "eidos-number-input--error",
       className
     ].filter(Boolean).join(" ");
@@ -196,4 +200,4 @@ NumberInput.displayName = "NumberInput";
 
 
 exports.NumberInput = NumberInput;
-//# sourceMappingURL=chunk-QF2RAUPB.cjs.map
+//# sourceMappingURL=chunk-OAPOGYA5.cjs.map

package/dist/chunk-OAPOGYA5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-OAPOGYA5.cjs","../src/components/NumberInput/NumberInput.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-OAPOGYA5.cjs","sourcesContent":[null,"import React, { forwardRef, useState, useEffect, useId } from 'react';\nimport { Minus, Plus } from 'lucide-react';\nimport { fullWidthModifier } from '../../utils';\nimport type { NumberInputProps } from './NumberInput.types';\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onChange,\n      min,\n      max,\n      step = 1,\n      precision = 0,\n      placeholder,\n      disabled = false,\n      readOnly = false,\n      label,\n      helperText,\n      error = false,\n      errorMessage,\n      size = 'md',\n      fullWidth = false,\n      allowTyping = true,\n      className = '',\n      id,\n      name,\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const inputId = id || `number-input-${generatedId}`;\n\n    // Controlled / uncontrolled bridge\n    const isControlled = value !== undefined;\n    const [localValue, setLocalValue] = useState<number>(defaultValue);\n\n    // Intermediate text while the user is actively typing\n    const [inputText, setInputText] = useState<string>(defaultValue.toFixed(precision));\n    const [isFocused, setIsFocused] = useState(false);\n\n    const currentValue = isControlled ? value! : localValue;\n\n    // When min/max props change (e.g. via Storybook controls), clamp the\n    // uncontrolled localValue so the display never shows an out-of-range value.\n    useEffect(() => {\n      if (isControlled) return;\n      setLocalValue((prev) => {\n        let result = prev;\n        if (min !== undefined) result = Math.max(min, result);\n        if (max !== undefined) result = Math.min(max, result);\n        return parseFloat(result.toFixed(precision));\n      });\n    }, [min, max, precision, isControlled]);\n\n    // Clamp to [min, max] and apply precision rounding\n    const clampValue = (raw: number): number => {\n      let result = raw;\n      if (min !== undefined) result = Math.max(min, result);\n      if (max !== undefined) result = Math.min(max, result);\n      return parseFloat(result.toFixed(precision));\n    };\n\n    const commitValue = (newVal: number) => {\n      const clamped = clampValue(newVal);\n      if (!isControlled) setLocalValue(clamped);\n      onChange?.(clamped);\n    };\n\n    // ── Stepper buttons ────────────────────────────────────────────────────\n    const handleDecrement = () => {\n      if (disabled || readOnly) return;\n      commitValue(currentValue - step);\n    };\n\n    const handleIncrement = () => {\n      if (disabled || readOnly) return;\n      commitValue(currentValue + step);\n    };\n\n    // ── Typing mode handlers ───────────────────────────────────────────────\n    const handleTextFocus = () => {\n      setInputText(currentValue.toFixed(precision));\n      setIsFocused(true);\n    };\n\n    const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setInputText(e.target.value);\n    };\n\n    const handleTextBlur = () => {\n      setIsFocused(false);\n      const parsed = parseFloat(inputText);\n      if (!isNaN(parsed)) {\n        const clamped = clampValue(parsed);\n        if (!isControlled) setLocalValue(clamped);\n        onChange?.(clamped);\n        setInputText(clamped.toFixed(precision));\n      } else {\n        // Revert to the last known-good value\n        setInputText(currentValue.toFixed(precision));\n      }\n    };\n\n    // ArrowUp / ArrowDown keyboard support for both display modes\n    const handleDisplayKeyDown = (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleIncrement();\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleDecrement();\n      }\n    };\n\n    // ── Display value ──────────────────────────────────────────────────────\n    // Show intermediate inputText while focused in typing mode;\n    // otherwise always derive from the real (controlled/uncontrolled) value.\n    const formattedValue = currentValue.toFixed(precision);\n    const displayedText = allowTyping && isFocused ? inputText : formattedValue;\n\n    // ── Disabled states for buttons ────────────────────────────────────────\n    const isDecrementDisabled = disabled || readOnly || (min !== undefined && currentValue <= min);\n    const isIncrementDisabled = disabled || readOnly || (max !== undefined && currentValue >= max);\n\n    // ── CSS classes ────────────────────────────────────────────────────────\n    const rootClasses = [\n      'eidos-number-input',\n      `eidos-number-input--${size}`,\n      fullWidth && fullWidthModifier('eidos-number-input'),\n      error && 'eidos-number-input--error',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const controlClasses = [\n      'eidos-number-input-control',\n      disabled && 'eidos-number-input-control--disabled',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClasses}>\n        {label && (\n          <label htmlFor={allowTyping ? inputId : undefined} className=\"eidos-number-input-label\">\n            {label}\n          </label>\n        )}\n\n        <div\n          className={controlClasses}\n          role={allowTyping ? undefined : 'spinbutton'}\n          aria-valuemin={allowTyping ? undefined : min}\n          aria-valuemax={allowTyping ? undefined : max}\n          aria-valuenow={allowTyping ? undefined : currentValue}\n          aria-label={allowTyping ? undefined : (label ?? 'Number input')}\n          aria-disabled={disabled || undefined}\n          tabIndex={!allowTyping && !disabled ? 0 : undefined}\n          onKeyDown={!allowTyping ? handleDisplayKeyDown : undefined}\n        >\n          <button\n            type=\"button\"\n            className=\"eidos-number-input-btn\"\n            onClick={handleDecrement}\n            disabled={isDecrementDisabled}\n            aria-label=\"Decrease\"\n          >\n            <Minus />\n          </button>\n\n          <div className=\"eidos-number-input-divider\" aria-hidden=\"true\" />\n\n          {allowTyping ? (\n            <input\n              id={inputId}\n              type=\"text\"\n              className=\"eidos-number-input-display\"\n              value={displayedText}\n              onChange={handleTextChange}\n              onFocus={handleTextFocus}\n              onBlur={handleTextBlur}\n              onKeyDown={handleDisplayKeyDown}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly={readOnly}\n              inputMode=\"decimal\"\n              role=\"spinbutton\"\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={currentValue}\n              aria-label={label ?? 'Number input'}\n            />\n          ) : (\n            <span className=\"eidos-number-input-display\" aria-hidden=\"true\">\n              {placeholder && formattedValue === (0).toFixed(precision) && !isFocused\n                ? placeholder\n                : formattedValue}\n            </span>\n          )}\n\n          <div className=\"eidos-number-input-divider\" aria-hidden=\"true\" />\n\n          <button\n            type=\"button\"\n            className=\"eidos-number-input-btn\"\n            onClick={handleIncrement}\n            disabled={isIncrementDisabled}\n            aria-label=\"Increase\"\n          >\n            <Plus />\n          </button>\n        </div>\n\n        {/* Hidden native <input type=\"number\"> for form integration */}\n        <input\n          ref={ref}\n          type=\"number\"\n          name={name}\n          value={currentValue}\n          onChange={() => {}}\n          className=\"eidos-number-input-hidden\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled}\n          readOnly={readOnly}\n          min={min}\n          max={max}\n          step={step}\n        />\n\n        {helperText && !error && <span className=\"eidos-number-input-helper\">{helperText}</span>}\n\n        {error && errorMessage && (\n          <span className=\"eidos-number-input-error\" role=\"alert\">\n            {errorMessage}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nNumberInput.displayName = 'NumberInput';\n"]}

package/dist/{chunk-SKEWTQJ7.cjs → chunk-OMLXP2CK.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkDAXZRNNOcjs = require('./chunk-DAXZRNNO.cjs');
+var _chunkD2SKXRKPcjs = require('./chunk-D2SKXRKP.cjs');
 
 
-var _chunkFRUOA2QUcjs = require('./chunk-FRUOA2QU.cjs');
+var _chunk75VXB3H2cjs = require('./chunk-75VXB3H2.cjs');
 
 
-var _chunkGEHL4LKKcjs = require('./chunk-GEHL4LKK.cjs');
+var _chunkCUJBNRJJcjs = require('./chunk-CUJBNRJJ.cjs');
 
 // src/components/SplitButton/SplitButton.component.tsx
 var _react = require('react');
@@ -71,16 +71,16 @@ var SplitButton = ({
             disabled: disabledOrLoading,
             onClick,
             children: [
-              loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { className: "eidos-split-button__spinner", "aria-hidden": "true" }) : preIcon && _chunkGEHL4LKKcjs.renderIcon.call(void 0, preIcon, "eidos-split-button__pre-icon"),
+              loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { className: "eidos-split-button__spinner", "aria-hidden": "true" }) : preIcon && _chunkCUJBNRJJcjs.renderIcon.call(void 0, preIcon, "eidos-split-button__pre-icon"),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-split-button__label", children: label })
             ]
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkFRUOA2QUcjs.Dropdown,
+          _chunk75VXB3H2cjs.Dropdown,
           {
             trigger: chevronTrigger,
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDAXZRNNOcjs.MenuPanel, { items: menuItems, onItemClick: handleItemClick }),
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2SKXRKPcjs.MenuPanel, { items: menuItems, onItemClick: handleItemClick }),
             placement: "bottom",
             align: "end",
             disabled: disabledOrLoading
@@ -94,4 +94,4 @@ var SplitButton = ({
 
 
 exports.SplitButton = SplitButton;
-//# sourceMappingURL=chunk-SKEWTQJ7.cjs.map
+//# sourceMappingURL=chunk-OMLXP2CK.cjs.map

package/dist/{chunk-SKEWTQJ7.cjs.map → chunk-OMLXP2CK.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-SKEWTQJ7.cjs","../src/components/SplitButton/SplitButton.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACVA,8BAAmC;AACnC,2CAA0C;AAmEpC,+CAAA;AAzCC,IAAM,YAAA,EAA0C,CAAC;AAAA,EACtD,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,EAAU,QAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,QAAA,EAAU,KAAA;AAAA,EACV,OAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AAEJ,EAAA,MAAM,UAAA,EAAwB,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,EAAA,GAAA,CAAS;AAAA,IAClD,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,GAAA,CAAI,EAAA;AAAA,IACR,KAAA,EAAO,GAAA,CAAI,KAAA;AAAA,IACX,IAAA,EAAM,GAAA,CAAI,IAAA;AAAA,IACV,QAAA,EAAU,GAAA,CAAI,QAAA;AAAA,IACd,OAAA,EAAS,GAAA,CAAI;AAAA,EACf,CAAA,CAAE,CAAA;AAEF,EAAA,MAAM,gBAAA,EAAkB,gCAAA,CAAY,EAAA,GAAM;AAExC,IAAA,UAAA,CAAW,CAAA,EAAA,GAAM;AACf,MAAA,QAAA,CAAS,aAAA;AAAA,QACP,IAAI,UAAA,CAAW,WAAA,EAAa,EAAE,OAAA,EAAS,IAAA,EAAM,UAAA,EAAY,IAAA,EAAM,IAAA,EAAM,OAAO,CAAC;AAAA,MAC/E,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAAA,EACP,CAAA,EAAG,CAAC,CAAC,CAAA;AAEL,EAAA,MAAM,UAAA,EAAY,CAAA,2BAAA,EAA8B,OAAO,CAAA,eAAA,EAAkB,KAAK,CAAA,eAAA,EAAkB,IAAI,CAAA,CAAA;AAC9D,EAAA;AAGpC,EAAA;AAAC,IAAA;AAAA,IAAA;AACM,MAAA;AACkB,MAAA;AACb,MAAA;AACC,MAAA;AAE+C,MAAA;AAAmB,IAAA;AAC/E,EAAA;AAIA,EAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACT,QAAA;AAC8B,QAAA;AACF,QAAA;AACD,QAAA;AACN,QAAA;AACrB,QAAA;AAGS,MAAA;AAGX,MAAA;AAAA,wBAAA;AAAC,UAAA;AAAA,UAAA;AACM,YAAA;AACkB,YAAA;AACb,YAAA;AACV,YAAA;AAEC,YAAA;AACuD,cAAA;AAIL,8BAAA;AAAA,YAAA;AAAA,UAAA;AACrD,QAAA;AAGA,wBAAA;AAAC,UAAA;AAAA,UAAA;AACU,YAAA;AAC2D,YAAA;AAC1D,YAAA;AACJ,YAAA;AACI,YAAA;AAAA,UAAA;AACZ,QAAA;AAAA,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;ADlBuG;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-SKEWTQJ7.cjs","sourcesContent":[null,"import React, { useCallback } from 'react';\nimport { ChevronDown, LoaderCircle } from 'lucide-react';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport { MenuPanel } from '../Menu';\nimport type { MenuItem } from '../Menu';\nimport { renderIcon } from '../../utils';\nimport type { SplitButtonProps } from './SplitButton.types';\n\n/**\n * SplitButton - a two-part control with a primary action button on the left\n * and a chevron that opens a dropdown of secondary actions on the right.\n *\n * The primary button fires `onClick` directly; clicking the chevron opens the\n * dropdown. Visually the two parts share a single bordered unit.\n *\n * @example\n * ```tsx\n * <SplitButton\n *   label=\"Save\"\n *   onClick={() => save()}\n *   options={[\n *     { id: 'draft',    label: 'Save as draft',    onClick: saveDraft },\n *     { id: 'template', label: 'Save as template', onClick: saveTemplate },\n *   ]}\n * />\n * ```\n */\nexport const SplitButton: React.FC<SplitButtonProps> = ({\n  label,\n  onClick,\n  options,\n  variant = 'filled',\n  color = 'primary',\n  size = 'md',\n  disabled = false,\n  loading = false,\n  preIcon,\n  className = '',\n}) => {\n  // Convert SplitButtonOption → MenuItemType so MenuPanel can render them.\n  const menuItems: MenuItem[] = options.map((opt) => ({\n    type: 'item' as const,\n    id: opt.id,\n    label: opt.label,\n    icon: opt.icon,\n    disabled: opt.disabled,\n    onClick: opt.onClick,\n  }));\n\n  const handleItemClick = useCallback(() => {\n    // Close the dropdown by dispatching a mousedown outside it.\n    setTimeout(() => {\n      document.dispatchEvent(\n        new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window }),\n      );\n    }, 10);\n  }, []);\n\n  const baseClass = `eidos-button eidos-button--${variant} eidos-button--${color} eidos-button--${size}`;\n  const disabledOrLoading = disabled || loading;\n\n  const chevronTrigger = (\n    <button\n      type=\"button\"\n      className={`${baseClass} eidos-split-button__chevron`}\n      disabled={disabledOrLoading}\n      aria-label=\"More options\"\n    >\n      <ChevronDown className=\"eidos-split-button__chevron-icon\" aria-hidden=\"true\" />\n    </button>\n  );\n\n  return (\n    <div\n      className={[\n        'eidos-split-button',\n        `eidos-split-button--${variant}`,\n        `eidos-split-button--${color}`,\n        `eidos-split-button--${size}`,\n        disabledOrLoading && 'eidos-split-button--disabled',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Primary action */}\n      <button\n        type=\"button\"\n        className={`${baseClass} eidos-split-button__primary`}\n        disabled={disabledOrLoading}\n        onClick={onClick}\n      >\n        {loading ? (\n          <LoaderCircle className=\"eidos-split-button__spinner\" aria-hidden=\"true\" />\n        ) : (\n          preIcon && renderIcon(preIcon, 'eidos-split-button__pre-icon')\n        )}\n        <span className=\"eidos-split-button__label\">{label}</span>\n      </button>\n\n      {/* Secondary actions dropdown */}\n      <Dropdown\n        trigger={chevronTrigger}\n        content={<MenuPanel items={menuItems} onItemClick={handleItemClick} />}\n        placement=\"bottom\"\n        align=\"end\"\n        disabled={disabledOrLoading}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-OMLXP2CK.cjs","../src/components/SplitButton/SplitButton.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACVA,8BAAmC;AACnC,2CAA0C;AAmEpC,+CAAA;AAzCC,IAAM,YAAA,EAA0C,CAAC;AAAA,EACtD,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,EAAU,QAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,QAAA,EAAU,KAAA;AAAA,EACV,OAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AAEJ,EAAA,MAAM,UAAA,EAAwB,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,EAAA,GAAA,CAAS;AAAA,IAClD,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,GAAA,CAAI,EAAA;AAAA,IACR,KAAA,EAAO,GAAA,CAAI,KAAA;AAAA,IACX,IAAA,EAAM,GAAA,CAAI,IAAA;AAAA,IACV,QAAA,EAAU,GAAA,CAAI,QAAA;AAAA,IACd,OAAA,EAAS,GAAA,CAAI;AAAA,EACf,CAAA,CAAE,CAAA;AAEF,EAAA,MAAM,gBAAA,EAAkB,gCAAA,CAAY,EAAA,GAAM;AAExC,IAAA,UAAA,CAAW,CAAA,EAAA,GAAM;AACf,MAAA,QAAA,CAAS,aAAA;AAAA,QACP,IAAI,UAAA,CAAW,WAAA,EAAa,EAAE,OAAA,EAAS,IAAA,EAAM,UAAA,EAAY,IAAA,EAAM,IAAA,EAAM,OAAO,CAAC;AAAA,MAC/E,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAAA,EACP,CAAA,EAAG,CAAC,CAAC,CAAA;AAEL,EAAA,MAAM,UAAA,EAAY,CAAA,2BAAA,EAA8B,OAAO,CAAA,eAAA,EAAkB,KAAK,CAAA,eAAA,EAAkB,IAAI,CAAA,CAAA;AAC9D,EAAA;AAGpC,EAAA;AAAC,IAAA;AAAA,IAAA;AACM,MAAA;AACkB,MAAA;AACb,MAAA;AACC,MAAA;AAE+C,MAAA;AAAmB,IAAA;AAC/E,EAAA;AAIA,EAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACT,QAAA;AAC8B,QAAA;AACF,QAAA;AACD,QAAA;AACN,QAAA;AACrB,QAAA;AAGS,MAAA;AAGX,MAAA;AAAA,wBAAA;AAAC,UAAA;AAAA,UAAA;AACM,YAAA;AACkB,YAAA;AACb,YAAA;AACV,YAAA;AAEC,YAAA;AACuD,cAAA;AAIL,8BAAA;AAAA,YAAA;AAAA,UAAA;AACrD,QAAA;AAGA,wBAAA;AAAC,UAAA;AAAA,UAAA;AACU,YAAA;AAC2D,YAAA;AAC1D,YAAA;AACJ,YAAA;AACI,YAAA;AAAA,UAAA;AACZ,QAAA;AAAA,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;ADlBuG;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-OMLXP2CK.cjs","sourcesContent":[null,"import React, { useCallback } from 'react';\nimport { ChevronDown, LoaderCircle } from 'lucide-react';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport { MenuPanel } from '../Menu';\nimport type { MenuItem } from '../Menu';\nimport { renderIcon } from '../../utils';\nimport type { SplitButtonProps } from './SplitButton.types';\n\n/**\n * SplitButton - a two-part control with a primary action button on the left\n * and a chevron that opens a dropdown of secondary actions on the right.\n *\n * The primary button fires `onClick` directly; clicking the chevron opens the\n * dropdown. Visually the two parts share a single bordered unit.\n *\n * @example\n * ```tsx\n * <SplitButton\n *   label=\"Save\"\n *   onClick={() => save()}\n *   options={[\n *     { id: 'draft',    label: 'Save as draft',    onClick: saveDraft },\n *     { id: 'template', label: 'Save as template', onClick: saveTemplate },\n *   ]}\n * />\n * ```\n */\nexport const SplitButton: React.FC<SplitButtonProps> = ({\n  label,\n  onClick,\n  options,\n  variant = 'filled',\n  color = 'primary',\n  size = 'md',\n  disabled = false,\n  loading = false,\n  preIcon,\n  className = '',\n}) => {\n  // Convert SplitButtonOption → MenuItemType so MenuPanel can render them.\n  const menuItems: MenuItem[] = options.map((opt) => ({\n    type: 'item' as const,\n    id: opt.id,\n    label: opt.label,\n    icon: opt.icon,\n    disabled: opt.disabled,\n    onClick: opt.onClick,\n  }));\n\n  const handleItemClick = useCallback(() => {\n    // Close the dropdown by dispatching a mousedown outside it.\n    setTimeout(() => {\n      document.dispatchEvent(\n        new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window }),\n      );\n    }, 10);\n  }, []);\n\n  const baseClass = `eidos-button eidos-button--${variant} eidos-button--${color} eidos-button--${size}`;\n  const disabledOrLoading = disabled || loading;\n\n  const chevronTrigger = (\n    <button\n      type=\"button\"\n      className={`${baseClass} eidos-split-button__chevron`}\n      disabled={disabledOrLoading}\n      aria-label=\"More options\"\n    >\n      <ChevronDown className=\"eidos-split-button__chevron-icon\" aria-hidden=\"true\" />\n    </button>\n  );\n\n  return (\n    <div\n      className={[\n        'eidos-split-button',\n        `eidos-split-button--${variant}`,\n        `eidos-split-button--${color}`,\n        `eidos-split-button--${size}`,\n        disabledOrLoading && 'eidos-split-button--disabled',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Primary action */}\n      <button\n        type=\"button\"\n        className={`${baseClass} eidos-split-button__primary`}\n        disabled={disabledOrLoading}\n        onClick={onClick}\n      >\n        {loading ? (\n          <LoaderCircle className=\"eidos-split-button__spinner\" aria-hidden=\"true\" />\n        ) : (\n          preIcon && renderIcon(preIcon, 'eidos-split-button__pre-icon')\n        )}\n        <span className=\"eidos-split-button__label\">{label}</span>\n      </button>\n\n      {/* Secondary actions dropdown */}\n      <Dropdown\n        trigger={chevronTrigger}\n        content={<MenuPanel items={menuItems} onItemClick={handleItemClick} />}\n        placement=\"bottom\"\n        align=\"end\"\n        disabled={disabledOrLoading}\n      />\n    </div>\n  );\n};\n"]}

package/dist/{chunk-VSTQEHVZ.js → chunk-PR7CVQ4R.js}

@@ -1,15 +1,18 @@
 import {
   Select
-} from "./chunk-A7WQINIG.js";
+} from "./chunk-X3U7SDOZ.js";
 import {
   Input
-} from "./chunk-VHMOKXUT.js";
+} from "./chunk-JRLUZDKA.js";
 import {
   Dropdown
-} from "./chunk-4BKTBV2I.js";
+} from "./chunk-2R77XZEP.js";
 import {
   Button
-} from "./chunk-YJXZR7RL.js";
+} from "./chunk-L5Q6UDY3.js";
+import {
+  fullWidthModifier
+} from "./chunk-EAJHEYZM.js";
 import {
   __commonJS,
   __toESM
@@ -1133,7 +1136,7 @@ var DatePicker = ({
     "div",
     {
       ref: triggerRef,
-      className: `eidos-date-picker-trigger${fullWidth ? " eidos-date-picker-trigger--fullWidth" : ""}`,
+      className: `eidos-date-picker-trigger${fullWidth ? ` ${fullWidthModifier("eidos-date-picker-trigger")}` : ""}`,
       children: /* @__PURE__ */ jsx3(
         Input,
         {
@@ -1288,7 +1291,7 @@ var DatePicker = ({
   return /* @__PURE__ */ jsx3(
     "div",
     {
-      className: `eidos-date-picker-container${fullWidth ? " eidos-date-picker-container--fullWidth" : ""} ${className}`.trim(),
+      className: `eidos-date-picker-container${fullWidth ? ` ${fullWidthModifier("eidos-date-picker-container")}` : ""} ${className}`.trim(),
       children: /* @__PURE__ */ jsx3(
         Dropdown,
         {
@@ -1315,4 +1318,4 @@ export {
   TimeInput,
   DatePicker
 };
-//# sourceMappingURL=chunk-VSTQEHVZ.js.map
+//# sourceMappingURL=chunk-PR7CVQ4R.js.map