eidos-ui 0.1.0

package/dist/chunk-YCUT6NQ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ContextMenu/ContextMenu.component.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { MenuPanel } from '../Menu';\r\nimport type { MenuItem } from '../Menu';\r\nimport type { ContextMenuProps } from './ContextMenu.types';\r\n\r\ninterface MenuPosition {\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\n/**\r\n * ContextMenu - wraps any content and attaches a right-click (or long-press)\r\n * triggered menu positioned at the cursor.\r\n *\r\n * The browser's native context menu is suppressed when `disabled` is false.\r\n * The menu closes on: click outside, item selection, Escape, and scroll.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ContextMenu\r\n *   items={[\r\n *     { type: 'item', id: 'copy',   label: 'Copy',   icon: Copy,   onClick: () => copy() },\r\n *     { type: 'item', id: 'cut',    label: 'Cut',    icon: Scissors, onClick: () => cut() },\r\n *     { type: 'separator', id: 'sep1' },\r\n *     { type: 'item', id: 'delete', label: 'Delete', icon: Trash2, onClick: () => remove(), disabled: true },\r\n *   ]}\r\n * >\r\n *   <div className=\"canvas-area\">...</div>\r\n * </ContextMenu>\r\n * ```\r\n */\r\nexport const ContextMenu: React.FC<ContextMenuProps> = ({\r\n  items,\r\n  children,\r\n  disabled = false,\r\n  className = '',\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [position, setPosition] = useState<MenuPosition>({ x: 0, y: 0 });\r\n  const [isPositioned, setIsPositioned] = useState(false);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n  const close = useCallback(() => {\r\n    setIsOpen(false);\r\n    setIsPositioned(false);\r\n  }, []);\r\n\r\n  // Measure the menu panel after it renders and clamp to viewport edges.\r\n  useEffect(() => {\r\n    if (!isOpen || !menuRef.current) return;\r\n\r\n    const menu = menuRef.current;\r\n    const { width, height } = menu.getBoundingClientRect();\r\n    const vw = window.innerWidth;\r\n    const vh = window.innerHeight;\r\n    const GAP = 4; // px clearance from viewport edge\r\n\r\n    const clampedX = Math.min(position.x, vw - width - GAP);\r\n    const clampedY = Math.min(position.y, vh - height - GAP);\r\n\r\n    menu.style.left = `${Math.max(GAP, clampedX)}px`;\r\n    menu.style.top = `${Math.max(GAP, clampedY)}px`;\r\n    setIsPositioned(true);\r\n  }, [isOpen, position]);\r\n\r\n  // Close on click outside.\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    const handleMouseDown = (e: MouseEvent) => {\r\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\r\n        close();\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', handleMouseDown);\r\n    return () => document.removeEventListener('mousedown', handleMouseDown);\r\n  }, [isOpen, close]);\r\n\r\n  // Close on Escape or scroll.\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') close();\r\n    };\r\n\r\n    const handleScroll = () => close();\r\n\r\n    document.addEventListener('keydown', handleKeyDown);\r\n    window.addEventListener('scroll', handleScroll, true); // capture: catches nested scrollers\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown);\r\n      window.removeEventListener('scroll', handleScroll, true);\r\n    };\r\n  }, [isOpen, close]);\r\n\r\n  const handleContextMenu = (e: React.MouseEvent) => {\r\n    if (disabled) return;\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    setIsOpen(true);\r\n    setIsPositioned(false);\r\n    setPosition({ x: e.clientX, y: e.clientY });\r\n  };\r\n\r\n  const handleItemClick = useCallback(\r\n    (_item: MenuItem) => {\r\n      close();\r\n    },\r\n    [close],\r\n  );\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={['eidos-context-menu-target', className].filter(Boolean).join(' ')}\r\n        onContextMenu={handleContextMenu}\r\n      >\r\n        {children}\r\n      </div>\r\n\r\n      {isOpen &&\r\n        createPortal(\r\n          <div\r\n            ref={menuRef}\r\n            className={[\r\n              'eidos-context-menu-panel',\r\n              isPositioned && 'eidos-context-menu-panel--positioned',\r\n            ]\r\n              .filter(Boolean)\r\n              .join(' ')}\r\n            style={{\r\n              top: position.y,\r\n              left: position.x,\r\n            }}\r\n          >\r\n            <MenuPanel items={items} onItemClick={handleItemClick} />\r\n          </div>,\r\n          document.body,\r\n        )}\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","names":[]}

package/dist/chunk-YLKESEHQ.cjs

@@ -0,0 +1,199 @@
+"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
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var NumberInput = _react.forwardRef.call(void 0, 
+  ({
+    value,
+    defaultValue = 0,
+    onChange,
+    min,
+    max,
+    step = 1,
+    precision = 0,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    label,
+    helperText,
+    error = false,
+    errorMessage,
+    size = "md",
+    fullWidth = false,
+    allowTyping = true,
+    className = "",
+    id,
+    name
+  }, ref) => {
+    const generatedId = _react.useId.call(void 0, );
+    const inputId = id || `number-input-${generatedId}`;
+    const isControlled = value !== void 0;
+    const [localValue, setLocalValue] = _react.useState.call(void 0, defaultValue);
+    const [inputText, setInputText] = _react.useState.call(void 0, defaultValue.toFixed(precision));
+    const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+    const currentValue = isControlled ? value : localValue;
+    _react.useEffect.call(void 0, () => {
+      if (isControlled) return;
+      setLocalValue((prev) => {
+        let result = prev;
+        if (min !== void 0) result = Math.max(min, result);
+        if (max !== void 0) result = Math.min(max, result);
+        return parseFloat(result.toFixed(precision));
+      });
+    }, [min, max, precision, isControlled]);
+    const clampValue = (raw) => {
+      let result = raw;
+      if (min !== void 0) result = Math.max(min, result);
+      if (max !== void 0) result = Math.min(max, result);
+      return parseFloat(result.toFixed(precision));
+    };
+    const commitValue = (newVal) => {
+      const clamped = clampValue(newVal);
+      if (!isControlled) setLocalValue(clamped);
+      _optionalChain([onChange, 'optionalCall', _ => _(clamped)]);
+    };
+    const handleDecrement = () => {
+      if (disabled || readOnly) return;
+      commitValue(currentValue - step);
+    };
+    const handleIncrement = () => {
+      if (disabled || readOnly) return;
+      commitValue(currentValue + step);
+    };
+    const handleTextFocus = () => {
+      setInputText(currentValue.toFixed(precision));
+      setIsFocused(true);
+    };
+    const handleTextChange = (e) => {
+      setInputText(e.target.value);
+    };
+    const handleTextBlur = () => {
+      setIsFocused(false);
+      const parsed = parseFloat(inputText);
+      if (!isNaN(parsed)) {
+        const clamped = clampValue(parsed);
+        if (!isControlled) setLocalValue(clamped);
+        _optionalChain([onChange, 'optionalCall', _2 => _2(clamped)]);
+        setInputText(clamped.toFixed(precision));
+      } else {
+        setInputText(currentValue.toFixed(precision));
+      }
+    };
+    const handleDisplayKeyDown = (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleIncrement();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleDecrement();
+      }
+    };
+    const formattedValue = currentValue.toFixed(precision);
+    const displayedText = allowTyping && isFocused ? inputText : formattedValue;
+    const isDecrementDisabled = disabled || readOnly || min !== void 0 && currentValue <= min;
+    const isIncrementDisabled = disabled || readOnly || max !== void 0 && currentValue >= max;
+    const rootClasses = [
+      "eidos-number-input",
+      `eidos-number-input--${size}`,
+      fullWidth && "eidos-number-input--fullWidth",
+      error && "eidos-number-input--error",
+      className
+    ].filter(Boolean).join(" ");
+    const controlClasses = [
+      "eidos-number-input-control",
+      disabled && "eidos-number-input-control--disabled"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: rootClasses, children: [
+      label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: allowTyping ? inputId : void 0, className: "eidos-number-input-label", children: label }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: controlClasses,
+          role: allowTyping ? void 0 : "spinbutton",
+          "aria-valuemin": allowTyping ? void 0 : min,
+          "aria-valuemax": allowTyping ? void 0 : max,
+          "aria-valuenow": allowTyping ? void 0 : currentValue,
+          "aria-label": allowTyping ? void 0 : _nullishCoalesce(label, () => ( "Number input")),
+          "aria-disabled": disabled || void 0,
+          tabIndex: !allowTyping && !disabled ? 0 : void 0,
+          onKeyDown: !allowTyping ? handleDisplayKeyDown : void 0,
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: "eidos-number-input-btn",
+                onClick: handleDecrement,
+                disabled: isDecrementDisabled,
+                "aria-label": "Decrease",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Minus, {})
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-number-input-divider", "aria-hidden": "true" }),
+            allowTyping ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                id: inputId,
+                type: "text",
+                className: "eidos-number-input-display",
+                value: displayedText,
+                onChange: handleTextChange,
+                onFocus: handleTextFocus,
+                onBlur: handleTextBlur,
+                onKeyDown: handleDisplayKeyDown,
+                placeholder,
+                disabled,
+                readOnly,
+                inputMode: "decimal",
+                role: "spinbutton",
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": currentValue,
+                "aria-label": _nullishCoalesce(label, () => ( "Number input"))
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-number-input-display", "aria-hidden": "true", children: placeholder && formattedValue === 0 .toFixed(precision) && !isFocused ? placeholder : formattedValue }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-number-input-divider", "aria-hidden": "true" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: "eidos-number-input-btn",
+                onClick: handleIncrement,
+                disabled: isIncrementDisabled,
+                "aria-label": "Increase",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, {})
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          ref,
+          type: "number",
+          name,
+          value: currentValue,
+          onChange: () => {
+          },
+          className: "eidos-number-input-hidden",
+          tabIndex: -1,
+          "aria-hidden": "true",
+          disabled,
+          readOnly,
+          min,
+          max,
+          step
+        }
+      ),
+      helperText && !error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-number-input-helper", children: helperText }),
+      error && errorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-number-input-error", role: "alert", children: errorMessage })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+
+
+exports.NumberInput = NumberInput;
+//# sourceMappingURL=chunk-YLKESEHQ.cjs.map

package/dist/chunk-YLKESEHQ.cjs.map

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

package/dist/chunk-YPK7RV3Y.js

@@ -0,0 +1,62 @@
+import {
+  Toolbar
+} from "./chunk-VTAABT55.js";
+import {
+  Navigation
+} from "./chunk-MOX6LYGC.js";
+import {
+  Footer
+} from "./chunk-GOVOQZYN.js";
+import {
+  Header
+} from "./chunk-HUNMRKGE.js";
+
+// src/components/PageLayout/PageLayout.component.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultFooter = { copyright: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Eidos UI` };
+var PageLayout = ({
+  toolbar,
+  navigation,
+  header,
+  footer,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const classes = ["eidos-pagelayout", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        breadcrumbs: toolbar?.breadcrumbs || { items: [], separator: /* @__PURE__ */ jsx(Fragment, {}) },
+        cmdPaletteItems: toolbar?.cmdPaletteItems || [],
+        actions: toolbar?.actions || [],
+        userMenu: toolbar?.userMenu || [],
+        className: "eidos-pagelayout__toolbar"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "eidos-pagelayout__navigation", children: navigation && /* @__PURE__ */ jsx(Navigation, { ...navigation }) }),
+    /* @__PURE__ */ jsxs("main", { className: "eidos-pagelayout__content", children: [
+      header && /* @__PURE__ */ jsx(
+        Header,
+        {
+          ...header,
+          className: ["eidos-pagelayout__header", header.className].filter(Boolean).join(" ")
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "eidos-pagelayout__body", children }),
+      /* @__PURE__ */ jsx(
+        Footer,
+        {
+          ...footer ?? defaultFooter,
+          className: ["eidos-pagelayout__footer", footer?.className].filter(Boolean).join(" ")
+        }
+      )
+    ] })
+  ] });
+};
+
+export {
+  PageLayout
+};
+//# sourceMappingURL=chunk-YPK7RV3Y.js.map

package/dist/chunk-YPK7RV3Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PageLayout/PageLayout.component.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { PageLayoutProps } from './PageLayout.types';\r\nimport './PageLayout.scss';\r\nimport { Toolbar } from '../Toolbar';\r\nimport { Header } from '../Header';\r\nimport { Footer } from '../Footer';\r\nimport type { FooterProps } from '../Footer';\r\nimport { Navigation } from '../Navigation';\r\n\r\nconst defaultFooter: FooterProps = { copyright: `© ${new Date().getFullYear()} Eidos UI` };\r\n\r\nexport const PageLayout: React.FC<PageLayoutProps> = ({\r\n  toolbar,\r\n  navigation,\r\n  header,\r\n  footer,\r\n  children,\r\n  className = '',\r\n  ...rest\r\n}) => {\r\n  const classes = ['eidos-pagelayout', className].filter(Boolean).join(' ');\r\n\r\n  return (\r\n    <div className={classes} {...rest}>\r\n      <Toolbar\r\n        breadcrumbs={toolbar?.breadcrumbs || { items: [], separator: <></> }}\r\n        cmdPaletteItems={toolbar?.cmdPaletteItems || []}\r\n        actions={toolbar?.actions || []}\r\n        userMenu={toolbar?.userMenu || []}\r\n        className=\"eidos-pagelayout__toolbar\"\r\n      />\r\n      <div className=\"eidos-pagelayout__navigation\">\r\n        {navigation && <Navigation {...navigation} />}\r\n      </div>\r\n      <main className=\"eidos-pagelayout__content\">\r\n        {header && (\r\n          <Header\r\n            {...header}\r\n            className={['eidos-pagelayout__header', header.className].filter(Boolean).join(' ')}\r\n          />\r\n        )}\r\n        <div className=\"eidos-pagelayout__body\">{children}</div>\r\n        <Footer\r\n          {...(footer ?? defaultFooter)}\r\n          className={['eidos-pagelayout__footer', footer?.className].filter(Boolean).join(' ')}\r\n        />\r\n      </main>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;AAyBqE,wBAS/D,YAT+D;AAhBrE,IAAM,gBAA6B,EAAE,WAAW,SAAK,oBAAI,KAAK,GAAE,YAAY,CAAC,YAAY;AAElF,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,CAAC,oBAAoB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAExE,SACE,qBAAC,SAAI,WAAW,SAAU,GAAG,MAC3B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,SAAS,eAAe,EAAE,OAAO,CAAC,GAAG,WAAW,gCAAE,EAAI;AAAA,QACnE,iBAAiB,SAAS,mBAAmB,CAAC;AAAA,QAC9C,SAAS,SAAS,WAAW,CAAC;AAAA,QAC9B,UAAU,SAAS,YAAY,CAAC;AAAA,QAChC,WAAU;AAAA;AAAA,IACZ;AAAA,IACA,oBAAC,SAAI,WAAU,gCACZ,wBAAc,oBAAC,cAAY,GAAG,YAAY,GAC7C;AAAA,IACA,qBAAC,UAAK,WAAU,6BACb;AAAA,gBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,CAAC,4BAA4B,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA;AAAA,MACpF;AAAA,MAEF,oBAAC,SAAI,WAAU,0BAA0B,UAAS;AAAA,MAClD;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,UAAU;AAAA,UACf,WAAW,CAAC,4BAA4B,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA;AAAA,MACrF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-Z7S4UQKY.js

@@ -0,0 +1,125 @@
+import {
+  Input
+} from "./chunk-A35Y5MRJ.js";
+
+// src/components/InlineEdit/InlineEdit.component.tsx
+import { useState, useRef, useCallback } from "react";
+import { Pencil } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InlineEdit = ({
+  value,
+  onChange,
+  onConfirm,
+  onCancel,
+  editing: editingProp,
+  onEditingChange,
+  type = "text",
+  placeholder,
+  trigger = "click",
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  confirmOnBlur = true,
+  renderDisplay,
+  showEditIcon = true,
+  inputVariant = "outlined",
+  className = ""
+}) => {
+  const isControlled = editingProp !== void 0;
+  const [internalEditing, setInternalEditing] = useState(false);
+  const editing = isControlled ? editingProp : internalEditing;
+  const valueAtEditStart = useRef(value);
+  const [draft, setDraft] = useState(value);
+  const openEdit = useCallback(() => {
+    if (disabled) return;
+    valueAtEditStart.current = value;
+    setDraft(value);
+    if (!isControlled) setInternalEditing(true);
+    onEditingChange?.(true);
+  }, [disabled, isControlled, onEditingChange, value]);
+  const closeEdit = useCallback(() => {
+    if (!isControlled) setInternalEditing(false);
+    onEditingChange?.(false);
+  }, [isControlled, onEditingChange]);
+  const confirm = useCallback(() => {
+    closeEdit();
+    onConfirm?.(draft);
+  }, [closeEdit, draft, onConfirm]);
+  const cancel = useCallback(() => {
+    setDraft(valueAtEditStart.current);
+    onChange?.(valueAtEditStart.current);
+    closeEdit();
+    onCancel?.();
+  }, [closeEdit, onChange, onCancel]);
+  const handleChange = (e) => {
+    setDraft(e.target.value);
+    onChange?.(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      confirm();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      cancel();
+    }
+  };
+  const handleBlur = () => {
+    if (confirmOnBlur) confirm();
+  };
+  const displayTriggerProps = trigger === "doubleClick" ? { onDoubleClick: openEdit } : { onClick: openEdit };
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        type,
+        variant: inputVariant,
+        size,
+        value: draft,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        placeholder,
+        fullWidth,
+        clearable: false,
+        autoFocus: true,
+        className: `eidos-inline-edit eidos-inline-edit--editing ${className}`
+      }
+    );
+  }
+  const isEmpty = !value;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "button",
+      tabIndex: disabled ? void 0 : 0,
+      "aria-label": disabled ? void 0 : "Click to edit",
+      className: [
+        "eidos-inline-edit",
+        `eidos-inline-edit--${size}`,
+        fullWidth ? "eidos-inline-edit--full-width" : "",
+        disabled ? "eidos-inline-edit--disabled" : "",
+        isEmpty ? "eidos-inline-edit--empty" : "",
+        className
+      ].filter(Boolean).join(" "),
+      ...disabled ? {} : displayTriggerProps,
+      onKeyDown: disabled ? void 0 : (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openEdit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "eidos-inline-edit__text", children: renderDisplay ? renderDisplay(value) : value || /* @__PURE__ */ jsx("span", { className: "eidos-inline-edit__placeholder", children: placeholder }) }),
+        !disabled && showEditIcon && /* @__PURE__ */ jsx("span", { className: "eidos-inline-edit__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(Pencil, {}) })
+      ]
+    }
+  );
+};
+
+export {
+  InlineEdit
+};
+//# sourceMappingURL=chunk-Z7S4UQKY.js.map

package/dist/chunk-Z7S4UQKY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineEdit/InlineEdit.component.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from 'react';\r\nimport { Pencil } from 'lucide-react';\r\nimport { Input } from '../Input/Input.component';\r\nimport type { InlineEditProps } from './InlineEdit.types';\r\nimport './InlineEdit.scss';\r\n\r\nexport const InlineEdit: React.FC<InlineEditProps> = ({\r\n  value,\r\n  onChange,\r\n  onConfirm,\r\n  onCancel,\r\n  editing: editingProp,\r\n  onEditingChange,\r\n  type = 'text',\r\n  placeholder,\r\n  trigger = 'click',\r\n  size = 'md',\r\n  fullWidth = false,\r\n  disabled = false,\r\n  confirmOnBlur = true,\r\n  renderDisplay,\r\n  showEditIcon = true,\r\n  inputVariant = 'outlined',\r\n  className = '',\r\n}) => {\r\n  const isControlled = editingProp !== undefined;\r\n  const [internalEditing, setInternalEditing] = useState(false);\r\n  const editing = isControlled ? editingProp : internalEditing;\r\n\r\n  // Track the value at the moment editing begins so Esc can revert to it.\r\n  const valueAtEditStart = useRef(value);\r\n\r\n  // Local draft while editing - keeps Input value in sync without forcing the\r\n  // parent to wire `onChange` just to see live keystrokes.\r\n  const [draft, setDraft] = useState(value);\r\n\r\n  // ------------------------------------------------------------------\r\n  // Editing state helpers\r\n  // ------------------------------------------------------------------\r\n\r\n  const openEdit = useCallback(() => {\r\n    if (disabled) return;\r\n    valueAtEditStart.current = value;\r\n    setDraft(value);\r\n    if (!isControlled) setInternalEditing(true);\r\n    onEditingChange?.(true);\r\n  }, [disabled, isControlled, onEditingChange, value]);\r\n\r\n  const closeEdit = useCallback(() => {\r\n    if (!isControlled) setInternalEditing(false);\r\n    onEditingChange?.(false);\r\n  }, [isControlled, onEditingChange]);\r\n\r\n  const confirm = useCallback(() => {\r\n    closeEdit();\r\n    onConfirm?.(draft);\r\n  }, [closeEdit, draft, onConfirm]);\r\n\r\n  const cancel = useCallback(() => {\r\n    // Revert the draft AND propagate the original value so the parent stays in\r\n    // sync when `onChange` is used to maintain external state.\r\n    setDraft(valueAtEditStart.current);\r\n    onChange?.(valueAtEditStart.current);\r\n    closeEdit();\r\n    onCancel?.();\r\n  }, [closeEdit, onChange, onCancel]);\r\n\r\n  // ------------------------------------------------------------------\r\n  // Input handlers\r\n  // ------------------------------------------------------------------\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setDraft(e.target.value);\r\n    onChange?.(e.target.value);\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      // Stop propagation so parent grids/tables don't double-handle Enter.\r\n      e.stopPropagation();\r\n      confirm();\r\n    } else if (e.key === 'Escape') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      cancel();\r\n    }\r\n    // Tab and Arrow keys intentionally bubble - consumers like DataGrid own\r\n    // Tab-to-next-cell and arrow-key navigation at the container level.\r\n  };\r\n\r\n  const handleBlur = () => {\r\n    if (confirmOnBlur) confirm();\r\n  };\r\n\r\n  // ------------------------------------------------------------------\r\n  // Trigger props for display mode\r\n  // ------------------------------------------------------------------\r\n\r\n  const displayTriggerProps =\r\n    trigger === 'doubleClick' ? { onDoubleClick: openEdit } : { onClick: openEdit };\r\n\r\n  // ------------------------------------------------------------------\r\n  // Render: edit mode\r\n  // ------------------------------------------------------------------\r\n\r\n  if (editing) {\r\n    return (\r\n      <Input\r\n        type={type}\r\n        variant={inputVariant}\r\n        size={size}\r\n        value={draft}\r\n        onChange={handleChange}\r\n        onKeyDown={handleKeyDown}\r\n        onBlur={handleBlur}\r\n        placeholder={placeholder}\r\n        fullWidth={fullWidth}\r\n        clearable={false}\r\n        autoFocus\r\n        className={`eidos-inline-edit eidos-inline-edit--editing ${className}`}\r\n      />\r\n    );\r\n  }\r\n\r\n  // ------------------------------------------------------------------\r\n  // Render: display mode\r\n  // ------------------------------------------------------------------\r\n\r\n  const isEmpty = !value;\r\n\r\n  return (\r\n    <span\r\n      role=\"button\"\r\n      tabIndex={disabled ? undefined : 0}\r\n      aria-label={disabled ? undefined : 'Click to edit'}\r\n      className={[\r\n        'eidos-inline-edit',\r\n        `eidos-inline-edit--${size}`,\r\n        fullWidth ? 'eidos-inline-edit--full-width' : '',\r\n        disabled ? 'eidos-inline-edit--disabled' : '',\r\n        isEmpty ? 'eidos-inline-edit--empty' : '',\r\n        className,\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ')}\r\n      {...(disabled ? {} : displayTriggerProps)}\r\n      onKeyDown={\r\n        disabled\r\n          ? undefined\r\n          : (e) => {\r\n              if (e.key === 'Enter' || e.key === ' ') {\r\n                e.preventDefault();\r\n                openEdit();\r\n              }\r\n            }\r\n      }\r\n    >\r\n      <span className=\"eidos-inline-edit__text\">\r\n        {renderDisplay\r\n          ? renderDisplay(value)\r\n          : value || <span className=\"eidos-inline-edit__placeholder\">{placeholder}</span>}\r\n      </span>\r\n      {!disabled && showEditIcon && (\r\n        <span className=\"eidos-inline-edit__icon\" aria-hidden>\r\n          <Pencil />\r\n        </span>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"mappings":"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","names":[]}

package/dist/chunk-ZBGTVTQJ.js

@@ -0,0 +1,112 @@
+// src/components/Accordion/Accordion.component.tsx
+import React, { useState, useRef, useContext, useId, useEffect, useCallback } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toArray = (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v];
+var AccordionContext = React.createContext(null);
+var useAccordion = () => {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error("AccordionItem must be used inside <Accordion>");
+  return ctx;
+};
+var Accordion = ({
+  multiple = false,
+  value,
+  defaultValue,
+  onChange,
+  variant = "default",
+  size = "md",
+  color = "primary",
+  className = "",
+  children
+}) => {
+  const isControlled = value !== void 0;
+  const [localOpen, setLocalOpen] = useState(() => toArray(defaultValue));
+  const openValues = isControlled ? toArray(value) : localOpen;
+  const toggle = useCallback(
+    (itemValue) => {
+      const isOpen = openValues.includes(itemValue);
+      let next;
+      if (multiple) {
+        next = isOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];
+      } else {
+        next = isOpen ? [] : [itemValue];
+      }
+      if (!isControlled) setLocalOpen(next);
+      onChange?.(multiple ? next : next[0] ?? "");
+    },
+    [openValues, multiple, isControlled, onChange]
+  );
+  const rootClasses = ["eidos-accordion", `eidos-accordion--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openValues, toggle, variant, size, color }, children: /* @__PURE__ */ jsx("div", { className: rootClasses, children }) });
+};
+Accordion.displayName = "Accordion";
+var AccordionItem = ({
+  value,
+  label,
+  icon,
+  disabled = false,
+  className = "",
+  children
+}) => {
+  const { openValues, toggle, size, color } = useAccordion();
+  const isOpen = openValues.includes(value);
+  const contentRef = useRef(null);
+  const triggerId = useId();
+  const panelId = useId();
+  const [maxHeight, setMaxHeight] = useState(0);
+  useEffect(() => {
+    if (!contentRef.current) return;
+    setMaxHeight(isOpen ? contentRef.current.scrollHeight : 0);
+  }, [isOpen]);
+  const itemClasses = [
+    "eidos-accordion-item",
+    isOpen && "eidos-accordion-item--open",
+    disabled && "eidos-accordion-item--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const triggerClasses = [
+    "eidos-accordion-trigger",
+    `eidos-accordion-trigger--${size}`,
+    isOpen && "eidos-accordion-trigger--open",
+    isOpen && `eidos-accordion-trigger--${color}`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: itemClasses, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: triggerId,
+        type: "button",
+        "aria-expanded": isOpen,
+        "aria-controls": panelId,
+        disabled,
+        onClick: () => !disabled && toggle(value),
+        className: triggerClasses,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "eidos-accordion-trigger-icon", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "eidos-accordion-trigger-label", children: label }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "eidos-accordion-chevron", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: panelId,
+        role: "region",
+        "aria-labelledby": triggerId,
+        ref: contentRef,
+        className: "eidos-accordion-content-wrapper",
+        style: { maxHeight: `${maxHeight}px` },
+        children: /* @__PURE__ */ jsx("div", { className: "eidos-accordion-content", children })
+      }
+    )
+  ] });
+};
+AccordionItem.displayName = "AccordionItem";
+
+export {
+  Accordion,
+  AccordionItem
+};
+//# sourceMappingURL=chunk-ZBGTVTQJ.js.map

package/dist/chunk-ZBGTVTQJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Accordion/Accordion.component.tsx"],"sourcesContent":["import React, { useState, useRef, useContext, useId, useEffect, useCallback } from 'react';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport type { AccordionProps, AccordionItemProps, AccordionContextValue } from './Accordion.types';\r\n\r\n// ============================================================================\r\n// HELPERS\r\n// ============================================================================\r\n\r\n/** Normalise a controlled/default value (string | string[] | undefined) to string[]. */\r\nconst toArray = (v: string | string[] | undefined): string[] =>\r\n  v === undefined ? [] : Array.isArray(v) ? v : [v];\r\n\r\n// ============================================================================\r\n// CONTEXT\r\n// ============================================================================\r\n\r\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\r\n\r\nconst useAccordion = (): AccordionContextValue => {\r\n  const ctx = useContext(AccordionContext);\r\n  if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');\r\n  return ctx;\r\n};\r\n\r\n// ============================================================================\r\n// ACCORDION - root container; owns open state; provides context\r\n// ============================================================================\r\n\r\nexport const Accordion: React.FC<AccordionProps> = ({\r\n  multiple = false,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  variant = 'default',\r\n  size = 'md',\r\n  color = 'primary',\r\n  className = '',\r\n  children,\r\n}) => {\r\n  const isControlled = value !== undefined;\r\n\r\n  const [localOpen, setLocalOpen] = useState<string[]>(() => toArray(defaultValue));\r\n  const openValues = isControlled ? toArray(value) : localOpen;\r\n\r\n  const toggle = useCallback(\r\n    (itemValue: string) => {\r\n      const isOpen = openValues.includes(itemValue);\r\n      let next: string[];\r\n\r\n      if (multiple) {\r\n        next = isOpen ? openValues.filter((v) => v !== itemValue) : [...openValues, itemValue];\r\n      } else {\r\n        next = isOpen ? [] : [itemValue];\r\n      }\r\n\r\n      if (!isControlled) setLocalOpen(next);\r\n      onChange?.(multiple ? next : (next[0] ?? ''));\r\n    },\r\n    [openValues, multiple, isControlled, onChange],\r\n  );\r\n\r\n  const rootClasses = ['eidos-accordion', `eidos-accordion--${variant}`, className]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <AccordionContext.Provider value={{ openValues, toggle, variant, size, color }}>\r\n      <div className={rootClasses}>{children}</div>\r\n    </AccordionContext.Provider>\r\n  );\r\n};\r\n\r\nAccordion.displayName = 'Accordion';\r\n\r\n// ============================================================================\r\n// ACCORDION ITEM - individual item; reads context; renders trigger + animated panel\r\n// ============================================================================\r\n\r\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\r\n  value,\r\n  label,\r\n  icon,\r\n  disabled = false,\r\n  className = '',\r\n  children,\r\n}) => {\r\n  const { openValues, toggle, size, color } = useAccordion();\r\n  const isOpen = openValues.includes(value);\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const triggerId = useId();\r\n  const panelId = useId();\r\n\r\n  // Drives the max-height CSS transition.\r\n  // On open: set to scrollHeight so the wrapper animates to its natural height.\r\n  // On close: set to 0 so the wrapper animates shut.\r\n  // The CSS transition on .eidos-accordion-content-wrapper handles the animation.\r\n  const [maxHeight, setMaxHeight] = useState<number>(0);\r\n\r\n  useEffect(() => {\r\n    if (!contentRef.current) return;\r\n    setMaxHeight(isOpen ? contentRef.current.scrollHeight : 0);\r\n  }, [isOpen]);\r\n\r\n  const itemClasses = [\r\n    'eidos-accordion-item',\r\n    isOpen && 'eidos-accordion-item--open',\r\n    disabled && 'eidos-accordion-item--disabled',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const triggerClasses = [\r\n    'eidos-accordion-trigger',\r\n    `eidos-accordion-trigger--${size}`,\r\n    isOpen && 'eidos-accordion-trigger--open',\r\n    isOpen && `eidos-accordion-trigger--${color}`,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div className={itemClasses}>\r\n      <button\r\n        id={triggerId}\r\n        type=\"button\"\r\n        aria-expanded={isOpen}\r\n        aria-controls={panelId}\r\n        disabled={disabled}\r\n        onClick={() => !disabled && toggle(value)}\r\n        className={triggerClasses}\r\n      >\r\n        {icon && <span className=\"eidos-accordion-trigger-icon\">{icon}</span>}\r\n        <span className=\"eidos-accordion-trigger-label\">{label}</span>\r\n        <ChevronDown className=\"eidos-accordion-chevron\" aria-hidden=\"true\" />\r\n      </button>\r\n\r\n      <div\r\n        id={panelId}\r\n        role=\"region\"\r\n        aria-labelledby={triggerId}\r\n        ref={contentRef}\r\n        className=\"eidos-accordion-content-wrapper\"\r\n        style={{ maxHeight: `${maxHeight}px` }}\r\n      >\r\n        <div className=\"eidos-accordion-content\">{children}</div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nAccordionItem.displayName = 'AccordionItem';\r\n"],"mappings":"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","names":[]}

package/dist/color-picker/index.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkAUFCW7QUcjs = require('../chunk-AUFCW7QU.cjs');
+require('../chunk-KV2FG7AN.cjs');
+require('../chunk-DZUJEN5N.cjs');
+
+
+exports.ColorPicker = _chunkAUFCW7QUcjs.ColorPicker;
+//# sourceMappingURL=index.cjs.map

package/dist/color-picker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/color-picker/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,oDAAC","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/color-picker/index.cjs"}

package/dist/color-picker/index.d.cts

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { C as ComponentSizeProps } from '../sizes-DM6Rrrgq.cjs';
+
+type ColorFormat = 'hex' | 'rgb' | 'hsl';
+interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+}
+interface HSLColor {
+    h: number;
+    s: number;
+    l: number;
+}
+interface ColorPickerProps {
+    /** Controlled hex value, e.g. '#6366f1' */
+    value?: string;
+    /** Initial hex value for uncontrolled usage */
+    defaultValue?: string;
+    /** Fires on every color change with the new hex string */
+    onChange?: (hex: string) => void;
+    /** Which text-input format to show initially. Default: 'hex' */
+    format?: ColorFormat;
+    /** Show the alpha (opacity) slider. Default: false */
+    showAlpha?: boolean;
+    /** Show preset colour swatches. Default: true */
+    showSwatches?: boolean;
+    /** Override the default swatch palette with custom hex strings */
+    swatches?: string[];
+    disabled?: boolean;
+    size?: ComponentSizeProps;
+    /** Render the picker panel inline - no popover trigger. Default: false */
+    inline?: boolean;
+    label?: string;
+    className?: string;
+}
+
+declare const ColorPicker: React__default.FC<ColorPickerProps>;
+
+export { type ColorFormat, ColorPicker, type ColorPickerProps, type HSLColor, type RGBColor };