eidos-ui 0.1.0

package/dist/chunk-P74HNSNJ.cjs

@@ -0,0 +1,106 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkBFYSYUA6cjs = require('./chunk-BFYSYUA6.cjs');
+
+// src/components/ContextMenu/ContextMenu.component.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _jsxruntime = require('react/jsx-runtime');
+var ContextMenu = ({
+  items,
+  children,
+  disabled = false,
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [position, setPosition] = _react.useState.call(void 0, { x: 0, y: 0 });
+  const [isPositioned, setIsPositioned] = _react.useState.call(void 0, false);
+  const menuRef = _react.useRef.call(void 0, null);
+  const close = _react.useCallback.call(void 0, () => {
+    setIsOpen(false);
+    setIsPositioned(false);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (!isOpen || !menuRef.current) return;
+    const menu = menuRef.current;
+    const { width, height } = menu.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const GAP = 4;
+    const clampedX = Math.min(position.x, vw - width - GAP);
+    const clampedY = Math.min(position.y, vh - height - GAP);
+    menu.style.left = `${Math.max(GAP, clampedX)}px`;
+    menu.style.top = `${Math.max(GAP, clampedY)}px`;
+    setIsPositioned(true);
+  }, [isOpen, position]);
+  _react.useEffect.call(void 0, () => {
+    if (!isOpen) return;
+    const handleMouseDown = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen, close]);
+  _react.useEffect.call(void 0, () => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    const handleScroll = () => close();
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isOpen, close]);
+  const handleContextMenu = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsOpen(true);
+    setIsPositioned(false);
+    setPosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleItemClick = _react.useCallback.call(void 0, 
+    (_item) => {
+      close();
+    },
+    [close]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: ["eidos-context-menu-target", className].filter(Boolean).join(" "),
+        onContextMenu: handleContextMenu,
+        children
+      }
+    ),
+    isOpen && _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          ref: menuRef,
+          className: [
+            "eidos-context-menu-panel",
+            isPositioned && "eidos-context-menu-panel--positioned"
+          ].filter(Boolean).join(" "),
+          style: {
+            top: position.y,
+            left: position.x
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBFYSYUA6cjs.MenuPanel, { items, onItemClick: handleItemClick })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+
+
+exports.ContextMenu = ContextMenu;
+//# sourceMappingURL=chunk-P74HNSNJ.cjs.map

package/dist/chunk-P74HNSNJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-P74HNSNJ.cjs","../src/components/ContextMenu/ContextMenu.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACJA,8BAAgE;AAChE,qCAA6B;AAkHzB,+CAAA;AAnFG,IAAM,YAAA,EAA0C,CAAC;AAAA,EACtD,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,EAAW,KAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,EAAA,EAAI,6BAAA,KAAc,CAAA;AAC1C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,EAAA,EAAI,6BAAA,EAAyB,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,EAAE,CAAC,CAAA;AACrE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,EAAA,EAAI,6BAAA,KAAc,CAAA;AACtD,EAAA,MAAM,QAAA,EAAU,2BAAA,IAA2B,CAAA;AAE3C,EAAA,MAAM,MAAA,EAAQ,gCAAA,CAAY,EAAA,GAAM;AAC9B,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,EACvB,CAAA,EAAG,CAAC,CAAC,CAAA;AAGL,EAAA,8BAAA,CAAU,EAAA,GAAM;AACd,IAAA,GAAA,CAAI,CAAC,OAAA,GAAU,CAAC,OAAA,CAAQ,OAAA,EAAS,MAAA;AAEjC,IAAA,MAAM,KAAA,EAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,EAAE,KAAA,EAAO,OAAO,EAAA,EAAI,IAAA,CAAK,qBAAA,CAAsB,CAAA;AACrD,IAAA,MAAM,GAAA,EAAK,MAAA,CAAO,UAAA;AAClB,IAAA,MAAM,GAAA,EAAK,MAAA,CAAO,WAAA;AAClB,IAAA,MAAM,IAAA,EAAM,CAAA;AAEZ,IAAA,MAAM,SAAA,EAAW,IAAA,CAAK,GAAA,CAAI,QAAA,CAAS,CAAA,EAAG,GAAA,EAAK,MAAA,EAAQ,GAAG,CAAA;AACtD,IAAA,MAAM,SAAA,EAAW,IAAA,CAAK,GAAA,CAAI,QAAA,CAAS,CAAA,EAAG,GAAA,EAAK,OAAA,EAAS,GAAG,CAAA;AAEvD,IAAA,IAAA,CAAK,KAAA,CAAM,KAAA,EAAO,CAAA,EAAA;AACD,IAAA;AACD,IAAA;AACG,EAAA;AAGL,EAAA;AACD,IAAA;AAEP,IAAA;AACQ,MAAA;AACJ,QAAA;AACR,MAAA;AACF,IAAA;AAES,IAAA;AACI,IAAA;AACG,EAAA;AAGF,EAAA;AACD,IAAA;AAEP,IAAA;AACU,MAAA;AAChB,IAAA;AAEM,IAAA;AAEG,IAAA;AACF,IAAA;AACM,IAAA;AACF,MAAA;AACF,MAAA;AACT,IAAA;AACgB,EAAA;AAEZ,EAAA;AACU,IAAA;AACG,IAAA;AACC,IAAA;AACJ,IAAA;AACE,IAAA;AACG,IAAA;AACrB,EAAA;AAEM,EAAA;AACiB,IAAA;AACb,MAAA;AACR,IAAA;AACM,IAAA;AACR,EAAA;AAGE,EAAA;AACE,oBAAA;AAAC,MAAA;AAAA,MAAA;AACa,QAAA;AACG,QAAA;AAEd,QAAA;AAAA,MAAA;AACH,IAAA;AAGE,IAAA;AACE,sBAAA;AAAC,QAAA;AAAA,QAAA;AACM,UAAA;AACM,UAAA;AACT,YAAA;AACA,YAAA;AAEQ,UAAA;AAEH,UAAA;AACA,YAAA;AACC,YAAA;AACR,UAAA;AAEA,UAAA;AAAuD,QAAA;AACzD,MAAA;AACS,MAAA;AACX,IAAA;AACJ,EAAA;AAEJ;AD3CuB;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-P74HNSNJ.cjs","sourcesContent":[null,"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"]}

package/dist/chunk-PEPYVWGY.cjs

@@ -0,0 +1,327 @@
+"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 _chunk5TGBNYZKcjs = require('./chunk-5TGBNYZK.cjs');
+
+// src/components/CommandPalette/CommandPalette.component.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var TRANSITION_MS = 200;
+function filterItems(items, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+  return items.filter(({ label, description, keywords }) => {
+    return label.toLowerCase().includes(q) || (_nullishCoalesce(_optionalChain([description, 'optionalAccess', _ => _.toLowerCase, 'call', _2 => _2(), 'access', _3 => _3.includes, 'call', _4 => _4(q)]), () => ( false))) || (_nullishCoalesce(_optionalChain([keywords, 'optionalAccess', _5 => _5.some, 'call', _6 => _6((k) => k.toLowerCase().includes(q))]), () => ( false)));
+  });
+}
+function buildGroups(items) {
+  const groups = [];
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = _nullishCoalesce(item.group, () => ( ""));
+    let group = groupMap.get(key);
+    if (!group) {
+      group = { label: _nullishCoalesce(item.group, () => ( null)), items: [] };
+      groups.push(group);
+      groupMap.set(key, group);
+    }
+    group.items.push(item);
+  }
+  return groups;
+}
+var CommandPalette = ({
+  open: openProp,
+  defaultOpen = false,
+  onClose,
+  onOpen,
+  shortcutKey = "k",
+  items,
+  onSelect,
+  placeholder = "Search commands\u2026",
+  emptyText = "No commands found",
+  maxHeight = 360,
+  className = "",
+  footer,
+  trigger,
+  triggerLabel = "Search"
+}) => {
+  const dialogId = _react.useId.call(void 0, );
+  const listId = `${dialogId}-list`;
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = _react.useState.call(void 0, defaultOpen);
+  const open = isControlled ? openProp : internalOpen;
+  const close = _react.useCallback.call(void 0, () => {
+    if (!isControlled) setInternalOpen(false);
+    _optionalChain([onClose, 'optionalCall', _7 => _7()]);
+  }, [isControlled, onClose]);
+  const openPalette = _react.useCallback.call(void 0, () => {
+    if (isControlled) {
+      _optionalChain([onOpen, 'optionalCall', _8 => _8()]);
+    } else {
+      setInternalOpen(true);
+    }
+  }, [isControlled, onOpen]);
+  _react.useEffect.call(void 0, () => {
+    if (!shortcutKey) return;
+    const handler = (e) => {
+      if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== shortcutKey.toLowerCase()) return;
+      e.preventDefault();
+      openPalette();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [shortcutKey, openPalette]);
+  const [isMounted, setIsMounted] = _react.useState.call(void 0, open);
+  const [isVisible, setIsVisible] = _react.useState.call(void 0, open);
+  _react.useEffect.call(void 0, () => {
+    let raf1 = 0;
+    let raf2 = 0;
+    let timerId;
+    if (open) {
+      setIsMounted(true);
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setIsVisible(true));
+      });
+    } else {
+      setIsVisible(false);
+      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);
+    }
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      clearTimeout(timerId);
+    };
+  }, [open]);
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, 0);
+  const inputRef = _react.useRef.call(void 0, null);
+  const itemRefs = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const filtered = _react.useMemo.call(void 0, () => filterItems(items, query), [items, query]);
+  const navigable = _react.useMemo.call(void 0, () => filtered.filter((item) => !item.disabled), [filtered]);
+  const groups = _react.useMemo.call(void 0, () => buildGroups(filtered), [filtered]);
+  _react.useEffect.call(void 0, () => {
+    if (open) {
+      setQuery("");
+      setFocusedIndex(0);
+    }
+  }, [open]);
+  _react.useEffect.call(void 0, () => {
+    if (isVisible) {
+      _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]);
+    }
+  }, [isVisible]);
+  _react.useEffect.call(void 0, () => {
+    setFocusedIndex(0);
+  }, [query]);
+  _react.useEffect.call(void 0, () => {
+    const focusedItem = navigable[focusedIndex];
+    if (!focusedItem) return;
+    _optionalChain([itemRefs, 'access', _12 => _12.current, 'access', _13 => _13.get, 'call', _14 => _14(focusedItem.id), 'optionalAccess', _15 => _15.scrollIntoView, 'call', _16 => _16({ block: "nearest" })]);
+  }, [focusedIndex, navigable]);
+  _react.useEffect.call(void 0, () => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  const selectItem = _react.useCallback.call(void 0, 
+    (item) => {
+      if (item.disabled) return;
+      _optionalChain([item, 'access', _17 => _17.action, 'optionalCall', _18 => _18()]);
+      _optionalChain([onSelect, 'optionalCall', _19 => _19(item)]);
+      close();
+    },
+    [close, onSelect]
+  );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (e) => {
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          if (navigable.length === 0) return;
+          setFocusedIndex((i) => (i + 1) % navigable.length);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          if (navigable.length === 0) return;
+          setFocusedIndex((i) => (i - 1 + navigable.length) % navigable.length);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          const item = navigable[focusedIndex];
+          if (item) selectItem(item);
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          close();
+          break;
+        }
+      }
+    },
+    [focusedIndex, navigable, close, selectItem]
+  );
+  const handleBackdropClick = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.target === e.currentTarget) {
+        close();
+      }
+    },
+    [close]
+  );
+  const triggerNode = trigger === true ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { type: "button", className: "eidos-cmd-trigger-default", onClick: openPalette, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: triggerLabel }),
+    shortcutKey && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk5TGBNYZKcjs.Kbd, { size: "sm", className: "eidos-cmd-trigger-kbd", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Command, { size: 10 }),
+      shortcutKey.toUpperCase()
+    ] })
+  ] }) : trigger ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-cmd-trigger", role: "button", tabIndex: 0, onClick: openPalette, children: trigger }) : null;
+  if (!isMounted) return triggerNode;
+  const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    triggerNode,
+    _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: ["eidos-cmd-backdrop", isVisible && "eidos-cmd-backdrop--visible"].filter(Boolean).join(" "),
+          onClick: handleBackdropClick,
+          "aria-hidden": !open,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": "Command palette",
+              id: dialogId,
+              className: ["eidos-cmd-dialog", isVisible && "eidos-cmd-dialog--visible", className].filter(Boolean).join(" "),
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-cmd-search", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Search, { className: "eidos-cmd-search-icon", size: 18, "aria-hidden": "true" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      role: "combobox",
+                      "aria-expanded": "true",
+                      "aria-controls": listId,
+                      "aria-autocomplete": "list",
+                      "aria-label": placeholder,
+                      className: "eidos-cmd-input",
+                      placeholder,
+                      value: query,
+                      onChange: (e) => setQuery(e.target.value),
+                      spellCheck: false,
+                      autoComplete: "off"
+                    }
+                  ),
+                  shortcutKey && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-cmd-search-badge", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Command, { size: 11 }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: shortcutKey.toUpperCase() })
+                  ] })
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    id: listId,
+                    role: "listbox",
+                    "aria-label": "Commands",
+                    className: "eidos-cmd-list",
+                    style: { maxHeight: maxHeightValue },
+                    children: filtered.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "eidos-cmd-empty", role: "status", children: emptyText }) : groups.map((group) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                      "div",
+                      {
+                        role: "group",
+                        "aria-label": _nullishCoalesce(group.label, () => ( void 0)),
+                        children: [
+                          group.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-cmd-group-label", "aria-hidden": "true", children: group.label }),
+                          group.items.map((item) => {
+                            const isFocused = _optionalChain([navigable, 'access', _20 => _20[focusedIndex], 'optionalAccess', _21 => _21.id]) === item.id;
+                            const Icon = item.icon;
+                            return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                              "div",
+                              {
+                                ref: (el) => {
+                                  if (el) {
+                                    itemRefs.current.set(item.id, el);
+                                  } else {
+                                    itemRefs.current.delete(item.id);
+                                  }
+                                },
+                                role: "option",
+                                "aria-selected": isFocused,
+                                "aria-disabled": item.disabled,
+                                className: [
+                                  "eidos-cmd-item",
+                                  isFocused && "eidos-cmd-item--focused",
+                                  item.disabled && "eidos-cmd-item--disabled"
+                                ].filter(Boolean).join(" "),
+                                onClick: () => selectItem(item),
+                                onMouseEnter: () => {
+                                  if (!item.disabled) {
+                                    const idx = navigable.findIndex((n) => n.id === item.id);
+                                    if (idx !== -1) setFocusedIndex(idx);
+                                  }
+                                },
+                                children: [
+                                  Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-cmd-item-icon", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { size: 16 }) }),
+                                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-cmd-item-body", children: [
+                                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-cmd-item-label", children: item.label }),
+                                    item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-cmd-item-description", children: item.description })
+                                  ] }),
+                                  item.shortcut && item.shortcut.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                                    "div",
+                                    {
+                                      className: "eidos-cmd-item-shortcut",
+                                      "aria-label": `Shortcut: ${item.shortcut.join(" ")}`,
+                                      children: item.shortcut.map((key, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "kbd", { className: "eidos-cmd-kbd", children: key }, i))
+                                    }
+                                  )
+                                ]
+                              },
+                              item.id
+                            );
+                          })
+                        ]
+                      },
+                      _nullishCoalesce(group.label, () => ( "__ungrouped__"))
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-cmd-footer", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-cmd-hints", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUp, { size: 11 }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { size: 11 }),
+                      " Navigate"
+                    ] }),
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CornerDownLeft, { size: 11 }),
+                      " Select"
+                    ] }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Esc Close" })
+                  ] }),
+                  footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-cmd-footer-slot", children: footer })
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+CommandPalette.displayName = "CommandPalette";
+
+
+
+exports.CommandPalette = CommandPalette;
+//# sourceMappingURL=chunk-PEPYVWGY.cjs.map

package/dist/chunk-PEPYVWGY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-PEPYVWGY.cjs","../src/components/CommandPalette/CommandPalette.component.tsx"],"names":[],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-PEPYVWGY.cjs","sourcesContent":[null,"import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { ArrowDown, ArrowUp, Command, CornerDownLeft, Search } from 'lucide-react';\r\nimport type { CommandItem, CommandPaletteProps } from './CommandPalette.types';\r\nimport { Kbd } from '../Kbd';\r\nimport './CommandPalette.scss';\r\n\r\n// ── Constants ──────────────────────────────────────────────────────────────────\r\n\r\n/** Must match the CSS transition duration in CommandPalette.scss */\r\nconst TRANSITION_MS = 200;\r\n\r\n// ── Pure helpers ───────────────────────────────────────────────────────────────\r\n\r\nfunction filterItems(items: CommandItem[], query: string): CommandItem[] {\r\n  const q = query.trim().toLowerCase();\r\n  if (!q) return items;\r\n  return items.filter(({ label, description, keywords }) => {\r\n    return (\r\n      label.toLowerCase().includes(q) ||\r\n      (description?.toLowerCase().includes(q) ?? false) ||\r\n      (keywords?.some((k) => k.toLowerCase().includes(q)) ?? false)\r\n    );\r\n  });\r\n}\r\n\r\ninterface Group {\r\n  label: string | null;\r\n  items: CommandItem[];\r\n}\r\n\r\n/**\r\n * Groups items while preserving the order in which groups first appear.\r\n * Items with no `group` property are placed in a leading implicit section\r\n * (label: null) so that labelled groups always follow them.\r\n */\r\nfunction buildGroups(items: CommandItem[]): Group[] {\r\n  const groups: Group[] = [];\r\n  const groupMap = new Map<string, Group>();\r\n\r\n  for (const item of items) {\r\n    const key = item.group ?? '';\r\n    let group = groupMap.get(key);\r\n    if (!group) {\r\n      group = { label: item.group ?? null, items: [] };\r\n      groups.push(group);\r\n      groupMap.set(key, group);\r\n    }\r\n    group.items.push(item);\r\n  }\r\n\r\n  return groups;\r\n}\r\n\r\n// ── Component ──────────────────────────────────────────────────────────────────\r\n\r\nexport const CommandPalette: React.FC<CommandPaletteProps> = ({\r\n  open: openProp,\r\n  defaultOpen = false,\r\n  onClose,\r\n  onOpen,\r\n  shortcutKey = 'k',\r\n  items,\r\n  onSelect,\r\n  placeholder = 'Search commands…',\r\n  emptyText = 'No commands found',\r\n  maxHeight = 360,\r\n  className = '',\r\n  footer,\r\n  trigger,\r\n  triggerLabel = 'Search',\r\n}) => {\r\n  const dialogId = useId();\r\n  const listId = `${dialogId}-list`;\r\n\r\n  // ── Controlled / uncontrolled open state ───────────────────────────────────\r\n  // Omitting `open` lets the palette own its state entirely, which combined\r\n  // with the shortcut listener below means it needs zero external\r\n  // useState/useEffect to work. Passing `open` (+ `onClose`, optionally\r\n  // `onOpen`) keeps full external control for consumers who need it (syncing\r\n  // with a URL, another piece of app state, etc).\r\n  const isControlled = openProp !== undefined;\r\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\r\n  const open = isControlled ? (openProp as boolean) : internalOpen;\r\n\r\n  const close = useCallback(() => {\r\n    if (!isControlled) setInternalOpen(false);\r\n    onClose?.();\r\n  }, [isControlled, onClose]);\r\n\r\n  // Shared \"open\" path - uncontrolled flips the internal state directly;\r\n  // controlled defers to `onOpen` since the palette can't change `open`\r\n  // itself. Used by both the keyboard shortcut below and the inline\r\n  // `trigger`'s click handler.\r\n  const openPalette = useCallback(() => {\r\n    if (isControlled) {\r\n      onOpen?.();\r\n    } else {\r\n      setInternalOpen(true);\r\n    }\r\n  }, [isControlled, onOpen]);\r\n\r\n  // Global keyboard shortcut - Cmd/Ctrl+<shortcutKey> opens the palette.\r\n  useEffect(() => {\r\n    if (!shortcutKey) return;\r\n\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== shortcutKey.toLowerCase()) return;\r\n      e.preventDefault();\r\n      openPalette();\r\n    };\r\n\r\n    window.addEventListener('keydown', handler);\r\n    return () => window.removeEventListener('keydown', handler);\r\n  }, [shortcutKey, openPalette]);\r\n\r\n  // ── Animation state machine (mirrors the Drawer pattern) ─────────────────\r\n  // isMounted → portal exists in the DOM (controls render/null)\r\n  // isVisible → CSS --visible modifier is applied (drives transitions)\r\n  //\r\n  // Opening:  isMounted=true → double rAF → isVisible=true  → CSS transitions fire\r\n  // Closing:  isVisible=false → CSS transitions reverse → after TRANSITION_MS → isMounted=false\r\n  const [isMounted, setIsMounted] = useState(open);\r\n  const [isVisible, setIsVisible] = useState(open);\r\n\r\n  useEffect(() => {\r\n    let raf1 = 0;\r\n    let raf2 = 0;\r\n    let timerId: ReturnType<typeof setTimeout>;\r\n\r\n    if (open) {\r\n      setIsMounted(true);\r\n      // Double rAF: ensures the browser has painted the initial off-screen\r\n      // state before the CSS transition begins (React 18 automatic batching\r\n      // means a single rAF is not always sufficient).\r\n      raf1 = requestAnimationFrame(() => {\r\n        raf2 = requestAnimationFrame(() => setIsVisible(true));\r\n      });\r\n    } else {\r\n      setIsVisible(false);\r\n      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);\r\n    }\r\n\r\n    return () => {\r\n      cancelAnimationFrame(raf1);\r\n      cancelAnimationFrame(raf2);\r\n      clearTimeout(timerId);\r\n    };\r\n  }, [open]);\r\n\r\n  // ── Search state ───────────────────────────────────────────────────────────\r\n  const [query, setQuery] = useState('');\r\n  const [focusedIndex, setFocusedIndex] = useState(0);\r\n\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());\r\n\r\n  // Derived lists - memoised to stabilise scroll-effect deps\r\n  const filtered = useMemo(() => filterItems(items, query), [items, query]);\r\n  const navigable = useMemo(() => filtered.filter((item) => !item.disabled), [filtered]);\r\n  const groups = useMemo(() => buildGroups(filtered), [filtered]);\r\n\r\n  // Reset search query and selection when the palette is opened\r\n  useEffect(() => {\r\n    if (open) {\r\n      setQuery('');\r\n      setFocusedIndex(0);\r\n    }\r\n  }, [open]);\r\n\r\n  // Auto-focus the search input after the entry animation begins\r\n  useEffect(() => {\r\n    if (isVisible) {\r\n      inputRef.current?.focus();\r\n    }\r\n  }, [isVisible]);\r\n\r\n  // Reset focused index to 0 whenever the filtered list changes\r\n  useEffect(() => {\r\n    setFocusedIndex(0);\r\n  }, [query]);\r\n\r\n  // Scroll the focused item into view during keyboard navigation\r\n  useEffect(() => {\r\n    const focusedItem = navigable[focusedIndex];\r\n    if (!focusedItem) return;\r\n    itemRefs.current.get(focusedItem.id)?.scrollIntoView({ block: 'nearest' });\r\n  }, [focusedIndex, navigable]);\r\n\r\n  // Body scroll lock (tied to open, not to isMounted, so it releases promptly\r\n  // when the consumer decides to close - even before the exit animation ends)\r\n  useEffect(() => {\r\n    if (open) {\r\n      document.body.style.overflow = 'hidden';\r\n    }\r\n    return () => {\r\n      document.body.style.overflow = '';\r\n    };\r\n  }, [open]);\r\n\r\n  // ── Interaction handlers ───────────────────────────────────────────────────\r\n\r\n  const selectItem = useCallback(\r\n    (item: CommandItem) => {\r\n      if (item.disabled) return;\r\n      item.action?.();\r\n      onSelect?.(item);\r\n      close();\r\n    },\r\n    [close, onSelect],\r\n  );\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: React.KeyboardEvent) => {\r\n      switch (e.key) {\r\n        case 'ArrowDown': {\r\n          e.preventDefault();\r\n          if (navigable.length === 0) return;\r\n          setFocusedIndex((i) => (i + 1) % navigable.length);\r\n          break;\r\n        }\r\n        case 'ArrowUp': {\r\n          e.preventDefault();\r\n          if (navigable.length === 0) return;\r\n          setFocusedIndex((i) => (i - 1 + navigable.length) % navigable.length);\r\n          break;\r\n        }\r\n        case 'Enter': {\r\n          e.preventDefault();\r\n          const item = navigable[focusedIndex];\r\n          if (item) selectItem(item);\r\n          break;\r\n        }\r\n        case 'Escape': {\r\n          e.preventDefault();\r\n          close();\r\n          break;\r\n        }\r\n      }\r\n    },\r\n    [focusedIndex, navigable, close, selectItem],\r\n  );\r\n\r\n  const handleBackdropClick = useCallback(\r\n    (e: React.MouseEvent<HTMLDivElement>) => {\r\n      // Only fire when the click lands directly on the backdrop element,\r\n      // not on any child (the dialog itself or its contents).\r\n      if (e.target === e.currentTarget) {\r\n        close();\r\n      }\r\n    },\r\n    [close],\r\n  );\r\n\r\n  // ── Render ─────────────────────────────────────────────────────────────────\r\n\r\n  // The inline trigger (if any) must render regardless of `isMounted` - it's\r\n  // what opens the palette in the first place, so it can't be gated behind\r\n  // the portal's own mount state.\r\n  const triggerNode =\r\n    trigger === true ? (\r\n      <button type=\"button\" className=\"eidos-cmd-trigger-default\" onClick={openPalette}>\r\n        <span>{triggerLabel}</span>\r\n        {shortcutKey && (\r\n          <Kbd size=\"sm\" className=\"eidos-cmd-trigger-kbd\">\r\n            <Command size={10} />\r\n            {shortcutKey.toUpperCase()}\r\n          </Kbd>\r\n        )}\r\n      </button>\r\n    ) : trigger ? (\r\n      <div className=\"eidos-cmd-trigger\" role=\"button\" tabIndex={0} onClick={openPalette}>\r\n        {trigger}\r\n      </div>\r\n    ) : null;\r\n\r\n  if (!isMounted) return triggerNode;\r\n\r\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\r\n\r\n  return (\r\n    <>\r\n      {triggerNode}\r\n      {createPortal(\r\n        <div\r\n          className={['eidos-cmd-backdrop', isVisible && 'eidos-cmd-backdrop--visible']\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          onClick={handleBackdropClick}\r\n          aria-hidden={!open}\r\n        >\r\n          <div\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-label=\"Command palette\"\r\n            id={dialogId}\r\n            className={['eidos-cmd-dialog', isVisible && 'eidos-cmd-dialog--visible', className]\r\n              .filter(Boolean)\r\n              .join(' ')}\r\n            onKeyDown={handleKeyDown}\r\n          >\r\n            {/* ── Search ──────────────────────────────────────────────────────── */}\r\n            <div className=\"eidos-cmd-search\">\r\n              <Search className=\"eidos-cmd-search-icon\" size={18} aria-hidden=\"true\" />\r\n\r\n              <input\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                role=\"combobox\"\r\n                aria-expanded=\"true\"\r\n                aria-controls={listId}\r\n                aria-autocomplete=\"list\"\r\n                aria-label={placeholder}\r\n                className=\"eidos-cmd-input\"\r\n                placeholder={placeholder}\r\n                value={query}\r\n                onChange={(e) => setQuery(e.target.value)}\r\n                spellCheck={false}\r\n                autoComplete=\"off\"\r\n              />\r\n\r\n              {/* Reminds users of the configured shortcut, if any */}\r\n              {shortcutKey && (\r\n                <div className=\"eidos-cmd-search-badge\" aria-hidden=\"true\">\r\n                  <Command size={11} />\r\n                  <span>{shortcutKey.toUpperCase()}</span>\r\n                </div>\r\n              )}\r\n            </div>\r\n\r\n            {/* ── Results list ─────────────────────────────────────────────────── */}\r\n            <div\r\n              id={listId}\r\n              role=\"listbox\"\r\n              aria-label=\"Commands\"\r\n              className=\"eidos-cmd-list\"\r\n              style={{ maxHeight: maxHeightValue }}\r\n            >\r\n              {filtered.length === 0 ? (\r\n                <p className=\"eidos-cmd-empty\" role=\"status\">\r\n                  {emptyText}\r\n                </p>\r\n              ) : (\r\n                groups.map((group) => (\r\n                  <div\r\n                    key={group.label ?? '__ungrouped__'}\r\n                    role=\"group\"\r\n                    aria-label={group.label ?? undefined}\r\n                  >\r\n                    {group.label && (\r\n                      <div className=\"eidos-cmd-group-label\" aria-hidden=\"true\">\r\n                        {group.label}\r\n                      </div>\r\n                    )}\r\n\r\n                    {group.items.map((item) => {\r\n                      const isFocused = navigable[focusedIndex]?.id === item.id;\r\n                      const Icon = item.icon;\r\n\r\n                      return (\r\n                        <div\r\n                          key={item.id}\r\n                          ref={(el) => {\r\n                            if (el) {\r\n                              itemRefs.current.set(item.id, el);\r\n                            } else {\r\n                              itemRefs.current.delete(item.id);\r\n                            }\r\n                          }}\r\n                          role=\"option\"\r\n                          aria-selected={isFocused}\r\n                          aria-disabled={item.disabled}\r\n                          className={[\r\n                            'eidos-cmd-item',\r\n                            isFocused && 'eidos-cmd-item--focused',\r\n                            item.disabled && 'eidos-cmd-item--disabled',\r\n                          ]\r\n                            .filter(Boolean)\r\n                            .join(' ')}\r\n                          onClick={() => selectItem(item)}\r\n                          onMouseEnter={() => {\r\n                            if (!item.disabled) {\r\n                              const idx = navigable.findIndex((n) => n.id === item.id);\r\n                              if (idx !== -1) setFocusedIndex(idx);\r\n                            }\r\n                          }}\r\n                        >\r\n                          {Icon && (\r\n                            <span className=\"eidos-cmd-item-icon\" aria-hidden=\"true\">\r\n                              <Icon size={16} />\r\n                            </span>\r\n                          )}\r\n\r\n                          <div className=\"eidos-cmd-item-body\">\r\n                            <div className=\"eidos-cmd-item-label\">{item.label}</div>\r\n                            {item.description && (\r\n                              <div className=\"eidos-cmd-item-description\">{item.description}</div>\r\n                            )}\r\n                          </div>\r\n\r\n                          {item.shortcut && item.shortcut.length > 0 && (\r\n                            <div\r\n                              className=\"eidos-cmd-item-shortcut\"\r\n                              aria-label={`Shortcut: ${item.shortcut.join(' ')}`}\r\n                            >\r\n                              {item.shortcut.map((key, i) => (\r\n                                <kbd key={i} className=\"eidos-cmd-kbd\">\r\n                                  {key}\r\n                                </kbd>\r\n                              ))}\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      );\r\n                    })}\r\n                  </div>\r\n                ))\r\n              )}\r\n            </div>\r\n\r\n            {/* ── Footer ───────────────────────────────────────────────────────── */}\r\n            <div className=\"eidos-cmd-footer\">\r\n              <div className=\"eidos-cmd-hints\" aria-hidden=\"true\">\r\n                <span>\r\n                  <ArrowUp size={11} />\r\n                  <ArrowDown size={11} /> Navigate\r\n                </span>\r\n                <span>\r\n                  <CornerDownLeft size={11} /> Select\r\n                </span>\r\n                <span>Esc Close</span>\r\n              </div>\r\n\r\n              {footer && <div className=\"eidos-cmd-footer-slot\">{footer}</div>}\r\n            </div>\r\n          </div>\r\n        </div>,\r\n        document.body,\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nCommandPalette.displayName = 'CommandPalette';\r\n"]}

package/dist/chunk-POX6JZLO.cjs

@@ -0,0 +1,67 @@
+"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 _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+
+var _chunkR5QPUQSIcjs = require('./chunk-R5QPUQSI.cjs');
+
+// src/components/SegmentedControl/SegmentedControl.component.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _jsxruntime = require('react/jsx-runtime');
+var SegmentedControl = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  color = "primary",
+  disabled = false,
+  fullWidth = false,
+  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 containerClasses = [
+    "eidos-segmented",
+    `eidos-segmented--${size}`,
+    `eidos-segmented--${color}`,
+    disabled && "eidos-segmented--disabled",
+    fullWidth && "eidos-segmented--full-width",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { 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,
+        className: ["eidos-segmented-item", isActive && "eidos-segmented-item--active"].filter(Boolean).join(" "),
+        onClick: () => !isDisabled && handleSelect(opt.value),
+        children: [
+          opt.icon && _chunkTBMVUI7Scjs.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, _chunkR5QPUQSIcjs.Tooltip, { message: opt.tooltip, children: segment }, opt.value) : _react2.default.cloneElement(segment, { key: opt.value });
+  }) });
+};
+
+
+
+exports.SegmentedControl = SegmentedControl;
+//# sourceMappingURL=chunk-POX6JZLO.cjs.map

package/dist/chunk-POX6JZLO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-POX6JZLO.cjs","../src/components/SegmentedControl/SegmentedControl.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACPA,4EAAgC;AAgFtB,+CAAA;AA3CH,IAAM,iBAAA,EAAoD,CAAC;AAAA,EAChE,OAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,IAAA;AAAA,EACP,MAAA,EAAQ,SAAA;AAAA,EACR,SAAA,EAAW,KAAA;AAAA,EACX,UAAA,EAAY,KAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,aAAA,EAAe,MAAA,IAAU,KAAA,CAAA;AAC/B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,EAAA,EAAI,6BAAA;AAAA,sCACxC,YAAA,0BAAgB,OAAA,mBAAQ,CAAC,CAAA,6BAAG,SAAA,UAAS;AAAA,EACvC,CAAA;AAEA,EAAA,MAAM,YAAA,EAAc,aAAA,EAAe,MAAA,EAAQ,aAAA;AAE3C,EAAA,MAAM,aAAA,EAAe,CAAC,QAAA,EAAA,GAAqB;AACzC,IAAA,GAAA,CAAI,QAAA,EAAU,MAAA;AACd,IAAA,GAAA,CAAI,SAAA,IAAa,WAAA,EAAa,MAAA;AAC9B,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,gBAAA,CAAiB,QAAQ,CAAA;AAC5C,oBAAA,QAAA,0BAAA,CAAW,QAAQ,GAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,iBAAA,EAAmB;AAAA,IACvB,iBAAA;AAAA,IACA,CAAA,iBAAA,EAAoB,IAAI,CAAA,CAAA;AACC,IAAA;AACb,IAAA;AACC,IAAA;AACb,IAAA;AAGS,EAAA;AAGR,EAAA;AAEoB,IAAA;AACE,IAAA;AAGjB,IAAA;AAAC,MAAA;AAAA,MAAA;AAEM,QAAA;AACA,QAAA;AACS,QAAA;AACJ,QAAA;AACE,QAAA;AAGI,QAAA;AAEf,QAAA;AAAY,UAAA;AACC,UAAA;AAAmD,QAAA;AAAA,MAAA;AAXxD,MAAA;AAYX,IAAA;AAIA,IAAA;AAON,EAAA;AAEJ;AD5C6B;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-POX6JZLO.cjs","sourcesContent":[null,"import React, { useState } from 'react';\r\nimport { Tooltip } from '../Tooltip';\r\nimport { renderIcon } from '../../utils';\r\nimport type { SegmentedControlProps } from './SegmentedControl.types';\r\n\r\n/**\r\n * SegmentedControl - a compact, single-select toggle group rendered as a pill.\r\n *\r\n * Semantics: `role=\"radiogroup\"` on the container, `role=\"radio\"` on each\r\n * segment. Supports controlled and uncontrolled usage.\r\n *\r\n * @example\r\n * ```tsx\r\n * // Controlled\r\n * const [view, setView] = useState('list');\r\n * <SegmentedControl\r\n *   options={[\r\n *     { value: 'list',  icon: List,       tooltip: 'List view' },\r\n *     { value: 'grid',  icon: LayoutGrid, tooltip: 'Grid view' },\r\n *     { value: 'table', icon: Table2,     tooltip: 'Table view' },\r\n *   ]}\r\n *   value={view}\r\n *   onChange={setView}\r\n * />\r\n *\r\n * // With labels\r\n * <SegmentedControl\r\n *   options={[\r\n *     { value: 'day',   label: 'Day' },\r\n *     { value: 'week',  label: 'Week' },\r\n *     { value: 'month', label: 'Month' },\r\n *   ]}\r\n *   defaultValue=\"week\"\r\n *   onChange={console.log}\r\n * />\r\n * ```\r\n */\r\nexport const SegmentedControl: React.FC<SegmentedControlProps> = ({\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  size = 'md',\r\n  color = 'primary',\r\n  disabled = false,\r\n  fullWidth = false,\r\n  className = '',\r\n}) => {\r\n  const isControlled = value !== undefined;\r\n  const [internalValue, setInternalValue] = useState<string>(\r\n    defaultValue ?? options[0]?.value ?? '',\r\n  );\r\n\r\n  const activeValue = isControlled ? value : internalValue;\r\n\r\n  const handleSelect = (optValue: string) => {\r\n    if (disabled) return;\r\n    if (optValue === activeValue) return; // already selected\r\n    if (!isControlled) setInternalValue(optValue);\r\n    onChange?.(optValue);\r\n  };\r\n\r\n  const containerClasses = [\r\n    'eidos-segmented',\r\n    `eidos-segmented--${size}`,\r\n    `eidos-segmented--${color}`,\r\n    disabled && 'eidos-segmented--disabled',\r\n    fullWidth && 'eidos-segmented--full-width',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div className={containerClasses} role=\"radiogroup\">\r\n      {options.map((opt) => {\r\n        const isActive = activeValue === opt.value;\r\n        const isDisabled = disabled || !!opt.disabled;\r\n\r\n        const segment = (\r\n          <button\r\n            key={opt.value}\r\n            type=\"button\"\r\n            role=\"radio\"\r\n            aria-checked={isActive}\r\n            disabled={isDisabled}\r\n            className={['eidos-segmented-item', isActive && 'eidos-segmented-item--active']\r\n              .filter(Boolean)\r\n              .join(' ')}\r\n            onClick={() => !isDisabled && handleSelect(opt.value)}\r\n          >\r\n            {opt.icon && renderIcon(opt.icon, 'eidos-segmented-icon')}\r\n            {opt.label && <span className=\"eidos-segmented-label\">{opt.label}</span>}\r\n          </button>\r\n        );\r\n\r\n        return opt.tooltip ? (\r\n          <Tooltip key={opt.value} message={opt.tooltip}>\r\n            {segment}\r\n          </Tooltip>\r\n        ) : (\r\n          React.cloneElement(segment, { key: opt.value })\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n"]}