eidos-ui 0.1.0

package/dist/chunk-CDV2OAS3.cjs

@@ -0,0 +1,235 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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/Input/Input.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var Input = _react.forwardRef.call(void 0, 
+  ({
+    variant = "filled",
+    color = "primary",
+    size = "md",
+    disabled = false,
+    loading = false,
+    className = "",
+    width,
+    label,
+    error,
+    disclaimerIcon,
+    disclaimerContent,
+    preIcon,
+    posIcon,
+    posIconButton = false,
+    onPosIconClick,
+    type = "text",
+    id,
+    name,
+    required,
+    isSelect = false,
+    clearable = true,
+    fullWidth = false,
+    ...inputProps
+  }, ref) => {
+    const { defaultValue, ...restInputProps } = inputProps;
+    const [showPassword, setShowPassword] = _react.useState.call(void 0, false);
+    const [localValue, setLocalValue] = _react.useState.call(void 0, defaultValue || "");
+    const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+    const generatedId = _react.useId.call(void 0, );
+    const inputId = id || `input-${generatedId}`;
+    const inputName = name || inputId;
+    const isControlled = restInputProps.value !== void 0;
+    const currentValue = isControlled ? restInputProps.value : localValue;
+    const shouldFloatLabel = isSelect ? false : currentValue || defaultValue;
+    const isRequired = required || Boolean("required" in restInputProps && restInputProps.required);
+    const handleNumberInput = (e) => {
+      if (type === "number") {
+        const allowedKeys = [
+          "Backspace",
+          "Delete",
+          "Tab",
+          "Escape",
+          "Enter",
+          "ArrowLeft",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowDown"
+        ];
+        const isNumber = /[0-9]/.test(e.key);
+        const isDecimal = /[.,]/.test(e.key);
+        const isMinus = e.key === "-";
+        const isAllowedKey = allowedKeys.includes(e.key);
+        const isControlKey = e.ctrlKey || e.metaKey;
+        if (isMinus) {
+          const selectionStart = e.currentTarget.selectionStart || 0;
+          const selectionEnd = e.currentTarget.selectionEnd || 0;
+          const hasSelection = selectionStart !== selectionEnd;
+          if (selectionStart !== 0 && !hasSelection) {
+            e.preventDefault();
+            return;
+          }
+        }
+        if (isDecimal) {
+          const currentValue2 = e.currentTarget.value;
+          const hasDecimal = /[.,]/.test(currentValue2);
+          if (hasDecimal) {
+            e.preventDefault();
+            return;
+          }
+        }
+        if (!isNumber && !isDecimal && !isMinus && !isAllowedKey && !isControlKey) {
+          e.preventDefault();
+        }
+      }
+    };
+    const handleInputChange = (e) => {
+      const value = e.target.value;
+      if (!isControlled && !isSelect) {
+        setLocalValue(value);
+      }
+      _optionalChain([restInputProps, 'access', _ => _.onChange, 'optionalCall', _2 => _2(e)]);
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setLocalValue("");
+      }
+      const syntheticEvent = {
+        target: {
+          value: "",
+          name: inputName,
+          id: inputId,
+          type: actualType
+        }
+      };
+      _optionalChain([restInputProps, 'access', _3 => _3.onChange, 'optionalCall', _4 => _4(syntheticEvent)]);
+      if (ref && typeof ref === "object" && ref.current) {
+        ref.current.value = "";
+      }
+    };
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const actualType = type === "password" ? showPassword ? "text" : "password" : type;
+    const inputClasses = [
+      "eidos-input",
+      `eidos-input--${variant}`,
+      `eidos-input--${color}`,
+      `eidos-input--${size}`,
+      fullWidth && `eidos-input--fullWidth`,
+      loading && `eidos-input--loading`,
+      error && `eidos-input--error`
+    ].filter(Boolean).join(" ");
+    const wrapperClasses = [
+      "eidos-input-wrapper",
+      `eidos-input-wrapper--${variant}`,
+      `eidos-input-wrapper--${color}`,
+      `eidos-input-wrapper--${size}`,
+      fullWidth && `eidos-input-wrapper--fullWidth`,
+      loading && `eidos-input-wrapper--loading`,
+      isFocused && `eidos-input-wrapper--focused`,
+      error && `eidos-input-wrapper--error`
+    ].filter(Boolean).join(" ");
+    const labelClasses = [
+      "eidos-input-label",
+      shouldFloatLabel && `eidos-input-label--floating`,
+      disclaimerIcon && `eidos-input-label--with-icon`,
+      error && `eidos-input-label--error`
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: `eidos-input-container ${fullWidth ? `eidos-input-container--fullWidth` : ""} ${className}`,
+        children: [
+          label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: inputId, className: labelClasses, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-label-text`, children: label }),
+            isRequired && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-required-asterisk`, children: "*" }),
+            disclaimerIcon && (disclaimerContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR5QPUQSIcjs.Tooltip, { message: disclaimerContent, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-disclaimer-icon`, children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, disclaimerIcon, `eidos-input-disclaimer-icon-svg`) }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-disclaimer-icon`, children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, disclaimerIcon, `eidos-input-disclaimer-icon-svg`) }))
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
+            preIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-pre-icon`, children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, preIcon, `eidos-input-pre-icon-svg`) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                ref,
+                id: inputId,
+                name: inputName,
+                type: actualType,
+                className: inputClasses,
+                style: width ? {
+                  width: typeof width === "number" ? `${width}px` : width,
+                  minWidth: typeof width === "number" ? `${width}px` : width,
+                  maxWidth: typeof width === "number" ? `${width}px` : width
+                } : void 0,
+                disabled: disabled || loading,
+                onKeyDown: handleNumberInput,
+                ...restInputProps,
+                value: currentValue,
+                onFocus: (e) => {
+                  handleFocus();
+                  _optionalChain([restInputProps, 'access', _5 => _5.onFocus, 'optionalCall', _6 => _6(e)]);
+                },
+                onBlur: (e) => {
+                  handleBlur();
+                  _optionalChain([restInputProps, 'access', _7 => _7.onBlur, 'optionalCall', _8 => _8(e)]);
+                },
+                onChange: handleInputChange
+              }
+            ),
+            type === "password" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: `eidos-input-password-toggle`,
+                onClick: () => setShowPassword(!showPassword),
+                disabled: disabled || loading,
+                tabIndex: -1,
+                children: showPassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.EyeOff, { className: `eidos-input-password-toggle-icon` }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Eye, { className: `eidos-input-password-toggle-icon` })
+              }
+            ),
+            currentValue && String(currentValue).trim().length > 0 && type !== "password" && !isSelect && clearable !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: `eidos-input-clear-button`,
+                onClick: handleClear,
+                disabled: disabled || loading,
+                tabIndex: -1,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: `eidos-input-clear-button-icon` })
+              }
+            ),
+            posIcon && !posIconButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-pos-icon`, children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, posIcon, `eidos-input-pos-icon-svg`) }),
+            posIcon && posIconButton && onPosIconClick && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: `eidos-input-pos-icon-button`,
+                onClick: onPosIconClick,
+                disabled: disabled || loading,
+                tabIndex: -1,
+                children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, posIcon, `eidos-input-pos-icon-svg`)
+              }
+            ),
+            isSelect && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-input-select-chevron`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { className: `eidos-input-pos-icon-svg` }) })
+          ] }),
+          error && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `eidos-input-error-message`, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleAlert, { className: `eidos-input-error-icon` }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+
+
+exports.Input = Input;
+//# sourceMappingURL=chunk-CDV2OAS3.cjs.map

package/dist/chunk-CDV2OAS3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-CDV2OAS3.cjs","../src/components/Input/Input.component.tsx"],"names":["currentValue"],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-CDV2OAS3.cjs","sourcesContent":[null,"import React, { forwardRef, useState, useId } from 'react';\r\nimport { Eye, EyeOff, CircleAlert, X, ChevronDown } from 'lucide-react';\r\nimport { renderIcon } from '../../utils';\r\nimport type { InputProps } from './Input.types';\r\nimport { Tooltip } from '../Tooltip/Tooltip.component';\r\n\r\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\r\n  (\r\n    {\r\n      variant = 'filled',\r\n      color = 'primary',\r\n      size = 'md',\r\n      disabled = false,\r\n      loading = false,\r\n      className = '',\r\n      width,\r\n      label,\r\n      error,\r\n      disclaimerIcon,\r\n      disclaimerContent,\r\n      preIcon,\r\n      posIcon,\r\n      posIconButton = false,\r\n      onPosIconClick,\r\n      type = 'text',\r\n      id,\r\n      name,\r\n      required,\r\n      isSelect = false,\r\n      clearable = true,\r\n      fullWidth = false,\r\n      ...inputProps\r\n    },\r\n    ref,\r\n  ) => {\r\n    // Extract defaultValue so it never reaches the native <input> alongside `value`.\r\n    // Passing both causes React's \"controlled/uncontrolled\" warning because we always\r\n    // set value={currentValue} below - defaultValue is only needed to seed local state.\r\n    const { defaultValue, ...restInputProps } = inputProps;\r\n\r\n    const [showPassword, setShowPassword] = useState(false);\r\n    const [localValue, setLocalValue] = useState(defaultValue || '');\r\n    const [isFocused, setIsFocused] = useState(false);\r\n\r\n    // Auto-generate id and name if not provided\r\n    const generatedId = useId();\r\n    const inputId = id || `input-${generatedId}`;\r\n    const inputName = name || inputId;\r\n\r\n    // Determine if using controlled or uncontrolled mode\r\n    const isControlled = restInputProps.value !== undefined;\r\n    const currentValue = isControlled ? restInputProps.value : localValue;\r\n\r\n    // For select inputs, don't manage localValue - let the select component handle it\r\n    // This prevents the Input's clear button from showing\r\n\r\n    // Determine if label should float (only when there's content - static behavior)\r\n    // For select inputs, keep label completely static (never float)\r\n    const shouldFloatLabel = isSelect ? false : currentValue || defaultValue;\r\n\r\n    // Check if field is required (from props or enhanced register function)\r\n    const isRequired = required || Boolean('required' in restInputProps && restInputProps.required);\r\n\r\n    // Handle number input to allow decimals and negative numbers\r\n    const handleNumberInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (type === 'number') {\r\n        const allowedKeys = [\r\n          'Backspace',\r\n          'Delete',\r\n          'Tab',\r\n          'Escape',\r\n          'Enter',\r\n          'ArrowLeft',\r\n          'ArrowRight',\r\n          'ArrowUp',\r\n          'ArrowDown',\r\n        ];\r\n        const isNumber = /[0-9]/.test(e.key);\r\n        const isDecimal = /[.,]/.test(e.key);\r\n        const isMinus = e.key === '-';\r\n        const isAllowedKey = allowedKeys.includes(e.key);\r\n        const isControlKey = e.ctrlKey || e.metaKey;\r\n\r\n        // Allow minus only at the beginning or when no text is selected\r\n        if (isMinus) {\r\n          const selectionStart = e.currentTarget.selectionStart || 0;\r\n          const selectionEnd = e.currentTarget.selectionEnd || 0;\r\n          const hasSelection = selectionStart !== selectionEnd;\r\n\r\n          // Allow if at beginning or if replacing selected text\r\n          if (selectionStart !== 0 && !hasSelection) {\r\n            e.preventDefault();\r\n            return;\r\n          }\r\n        }\r\n\r\n        // Allow decimal only once\r\n        if (isDecimal) {\r\n          const currentValue = e.currentTarget.value;\r\n          const hasDecimal = /[.,]/.test(currentValue);\r\n          if (hasDecimal) {\r\n            e.preventDefault();\r\n            return;\r\n          }\r\n        }\r\n\r\n        if (!isNumber && !isDecimal && !isMinus && !isAllowedKey && !isControlKey) {\r\n          e.preventDefault();\r\n        }\r\n      }\r\n    };\r\n\r\n    // Handle input change for number inputs\r\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      const value = e.target.value;\r\n      // Only update localValue if uncontrolled and not a select input\r\n      if (!isControlled && !isSelect) {\r\n        setLocalValue(value);\r\n      }\r\n      restInputProps.onChange?.(e);\r\n    };\r\n\r\n    // Handle clear button\r\n    const handleClear = () => {\r\n      // Update localValue if uncontrolled\r\n      if (!isControlled) {\r\n        setLocalValue('');\r\n      }\r\n\r\n      // Create a proper synthetic event for React Hook Form\r\n      const syntheticEvent = {\r\n        target: {\r\n          value: '',\r\n          name: inputName,\r\n          id: inputId,\r\n          type: actualType,\r\n        },\r\n      } as React.ChangeEvent<HTMLInputElement>;\r\n\r\n      // Call the form's onChange handler\r\n      restInputProps.onChange?.(syntheticEvent);\r\n\r\n      // Also try to update the input element directly\r\n      if (ref && typeof ref === 'object' && ref.current) {\r\n        ref.current.value = '';\r\n      }\r\n    };\r\n\r\n    // Handle focus and blur\r\n    const handleFocus = () => {\r\n      setIsFocused(true);\r\n    };\r\n\r\n    const handleBlur = () => {\r\n      setIsFocused(false);\r\n    };\r\n\r\n    // Determine actual input type (handle password visibility)\r\n    const actualType = type === 'password' ? (showPassword ? 'text' : 'password') : type;\r\n\r\n    // Generate CSS classes\r\n    const inputClasses = [\r\n      'eidos-input',\r\n      `eidos-input--${variant}`,\r\n      `eidos-input--${color}`,\r\n      `eidos-input--${size}`,\r\n      fullWidth && `eidos-input--fullWidth`,\r\n      loading && `eidos-input--loading`,\r\n      error && `eidos-input--error`,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const wrapperClasses = [\r\n      'eidos-input-wrapper',\r\n      `eidos-input-wrapper--${variant}`,\r\n      `eidos-input-wrapper--${color}`,\r\n      `eidos-input-wrapper--${size}`,\r\n      fullWidth && `eidos-input-wrapper--fullWidth`,\r\n      loading && `eidos-input-wrapper--loading`,\r\n      isFocused && `eidos-input-wrapper--focused`,\r\n      error && `eidos-input-wrapper--error`,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const labelClasses = [\r\n      'eidos-input-label',\r\n      shouldFloatLabel && `eidos-input-label--floating`,\r\n      disclaimerIcon && `eidos-input-label--with-icon`,\r\n      error && `eidos-input-label--error`,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <div\r\n        className={`eidos-input-container ${fullWidth ? `eidos-input-container--fullWidth` : ''} ${className}`}\r\n      >\r\n        {label && (\r\n          <label htmlFor={inputId} className={labelClasses}>\r\n            <span className={`eidos-input-label-text`}>{label}</span>\r\n            {isRequired && <span className={`eidos-input-required-asterisk`}>*</span>}\r\n            {disclaimerIcon &&\r\n              (disclaimerContent ? (\r\n                <Tooltip message={disclaimerContent}>\r\n                  <span className={`eidos-input-disclaimer-icon`}>\r\n                    {renderIcon(disclaimerIcon, `eidos-input-disclaimer-icon-svg`)}\r\n                  </span>\r\n                </Tooltip>\r\n              ) : (\r\n                <span className={`eidos-input-disclaimer-icon`}>\r\n                  {renderIcon(disclaimerIcon, `eidos-input-disclaimer-icon-svg`)}\r\n                </span>\r\n              ))}\r\n          </label>\r\n        )}\r\n\r\n        <div className={wrapperClasses}>\r\n          {preIcon && (\r\n            <span className={`eidos-input-pre-icon`}>\r\n              {renderIcon(preIcon, `eidos-input-pre-icon-svg`)}\r\n            </span>\r\n          )}\r\n\r\n          <input\r\n            ref={ref}\r\n            id={inputId}\r\n            name={inputName}\r\n            type={actualType}\r\n            className={inputClasses}\r\n            style={\r\n              width\r\n                ? {\r\n                    width: typeof width === 'number' ? `${width}px` : width,\r\n                    minWidth: typeof width === 'number' ? `${width}px` : width,\r\n                    maxWidth: typeof width === 'number' ? `${width}px` : width,\r\n                  }\r\n                : undefined\r\n            }\r\n            disabled={disabled || loading}\r\n            onKeyDown={handleNumberInput}\r\n            {...restInputProps}\r\n            value={currentValue}\r\n            onFocus={(e) => {\r\n              handleFocus();\r\n              restInputProps.onFocus?.(e);\r\n            }}\r\n            onBlur={(e) => {\r\n              handleBlur();\r\n              restInputProps.onBlur?.(e);\r\n            }}\r\n            onChange={handleInputChange}\r\n          />\r\n\r\n          {type === 'password' && (\r\n            <button\r\n              type=\"button\"\r\n              className={`eidos-input-password-toggle`}\r\n              onClick={() => setShowPassword(!showPassword)}\r\n              disabled={disabled || loading}\r\n              tabIndex={-1}\r\n            >\r\n              {showPassword ? (\r\n                <EyeOff className={`eidos-input-password-toggle-icon`} />\r\n              ) : (\r\n                <Eye className={`eidos-input-password-toggle-icon`} />\r\n              )}\r\n            </button>\r\n          )}\r\n\r\n          {/* Clear button - show when there's content and clearable is enabled (default: true) */}\r\n          {currentValue &&\r\n            String(currentValue).trim().length > 0 &&\r\n            type !== 'password' &&\r\n            !isSelect &&\r\n            clearable !== false && (\r\n              <button\r\n                type=\"button\"\r\n                className={`eidos-input-clear-button`}\r\n                onClick={handleClear}\r\n                disabled={disabled || loading}\r\n                tabIndex={-1}\r\n              >\r\n                <X className={`eidos-input-clear-button-icon`} />\r\n              </button>\r\n            )}\r\n\r\n          {posIcon && !posIconButton && (\r\n            <span className={`eidos-input-pos-icon`}>\r\n              {renderIcon(posIcon, `eidos-input-pos-icon-svg`)}\r\n            </span>\r\n          )}\r\n\r\n          {posIcon && posIconButton && onPosIconClick && (\r\n            <button\r\n              type=\"button\"\r\n              className={`eidos-input-pos-icon-button`}\r\n              onClick={onPosIconClick}\r\n              disabled={disabled || loading}\r\n              tabIndex={-1}\r\n            >\r\n              {renderIcon(posIcon, `eidos-input-pos-icon-svg`)}\r\n            </button>\r\n          )}\r\n\r\n          {/* Chevron for select inputs */}\r\n          {isSelect && (\r\n            <span className={`eidos-input-select-chevron`}>\r\n              <ChevronDown className={`eidos-input-pos-icon-svg`} />\r\n            </span>\r\n          )}\r\n        </div>\r\n\r\n        {error && (\r\n          <div className={`eidos-input-error-message`}>\r\n            <CircleAlert className={`eidos-input-error-icon`} />\r\n            <span>{error}</span>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nInput.displayName = 'Input';\r\n"]}

package/dist/chunk-CJUZDUXW.cjs

@@ -0,0 +1,79 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+// src/components/Alert/Alert.component.tsx
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var DEFAULT_ICONS = {
+  info: _lucidereact.Info,
+  success: _lucidereact.CircleCheck,
+  warning: _lucidereact.TriangleAlert,
+  danger: _lucidereact.CircleX
+};
+var VARIANT_TO_BUTTON_COLOR = {
+  info: "primary",
+  success: "success",
+  warning: "primary",
+  danger: "danger"
+};
+function isIconType(value) {
+  return typeof value !== "boolean";
+}
+var Alert = ({
+  variant = "info",
+  title,
+  children,
+  icon,
+  onDismiss,
+  action,
+  className = ""
+}) => {
+  const classes = ["eidos-alert", `eidos-alert--${variant}`, className].filter(Boolean).join(" ");
+  const showIcon = icon !== false;
+  let iconNode = null;
+  if (showIcon) {
+    if (icon === true || icon === void 0) {
+      const DefaultIcon = DEFAULT_ICONS[variant];
+      iconNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, { className: "eidos-alert-icon", "aria-hidden": "true" });
+    } else if (isIconType(icon)) {
+      iconNode = _chunkTBMVUI7Scjs.renderIcon.call(void 0, icon, "eidos-alert-icon");
+    }
+  }
+  const buttonColor = VARIANT_TO_BUTTON_COLOR[variant];
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classes, role: "alert", children: [
+    showIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-alert-icon-wrapper", children: iconNode }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-alert-body", children: [
+      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "eidos-alert-title", children: title }),
+      children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-alert-content", children }),
+      action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-alert-action", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkLTOHGCU4cjs.Button,
+        {
+          variant: action.variant === "filled" ? "filled" : "text",
+          size: "sm",
+          color: buttonColor,
+          onClick: action.onClick,
+          children: action.label
+        }
+      ) })
+    ] }),
+    onDismiss && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        className: "eidos-alert-dismiss",
+        onClick: onDismiss,
+        type: "button",
+        "aria-label": "Dismiss",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { "aria-hidden": "true" })
+      }
+    )
+  ] });
+};
+
+
+
+exports.Alert = Alert;
+//# sourceMappingURL=chunk-CJUZDUXW.cjs.map

package/dist/chunk-CJUZDUXW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-CJUZDUXW.cjs","../src/components/Alert/Alert.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACNA,2CAA6D;AA6D5C,+CAAA;AAhDjB,IAAM,cAAA,EAA8E;AAAA,EAClF,IAAA,EAAM,iBAAA;AAAA,EACN,OAAA,EAAS,wBAAA;AAAA,EACT,OAAA,EAAS,0BAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAMA,IAAM,wBAAA,EAA6E;AAAA,EACjF,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAMA,SAAS,UAAA,CAAW,KAAA,EAA8C;AAChE,EAAA,OAAO,OAAO,MAAA,IAAU,SAAA;AAC1B;AAMO,IAAM,MAAA,EAA8B,CAAC;AAAA,EAC1C,QAAA,EAAU,MAAA;AAAA,EACV,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,QAAA,EAAU,CAAC,aAAA,EAAe,CAAA,aAAA,EAAgB,OAAO,CAAA,CAAA;AAG7B,EAAA;AACM,EAAA;AAElB,EAAA;AAC6B,IAAA;AACE,MAAA;AACjB,MAAA;AACG,IAAA;AACmB,MAAA;AAChD,IAAA;AACF,EAAA;AAEmD,EAAA;AAGjC,EAAA;AACe,IAAA;AAEd,oBAAA;AACU,MAAA;AACK,MAAA;AAEX,MAAA;AACZ,QAAA;AAAA,QAAA;AACwC,UAAA;AAClC,UAAA;AACE,UAAA;AACS,UAAA;AAER,UAAA;AAAA,QAAA;AAEZ,MAAA;AAEJ,IAAA;AAGE,IAAA;AAAC,MAAA;AAAA,MAAA;AACW,QAAA;AACD,QAAA;AACJ,QAAA;AACM,QAAA;AAEI,QAAA;AAAO,MAAA;AACxB,IAAA;AAEJ,EAAA;AAEJ;AD7B0D;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-CJUZDUXW.cjs","sourcesContent":[null,"import React from 'react';\r\nimport { Info, CircleCheck, TriangleAlert, CircleX, X } from 'lucide-react';\r\nimport type { AlertProps } from './Alert.types';\r\nimport type { IconType } from '../../utils';\r\nimport { renderIcon } from '../../utils';\r\nimport { Button } from '../Button/Button.component';\r\nimport './Alert.scss';\r\n\r\n// ============================================================================\r\n// Constants\r\n// ============================================================================\r\n\r\ntype Variant = NonNullable<AlertProps['variant']>;\r\n\r\nconst DEFAULT_ICONS: Record<Variant, React.ComponentType<{ className?: string }>> = {\r\n  info: Info,\r\n  success: CircleCheck,\r\n  warning: TriangleAlert,\r\n  danger: CircleX,\r\n};\r\n\r\n/**\r\n * Button only ships primary | secondary | success | danger.\r\n * Warning maps to primary (closest neutral-positive colour available).\r\n */\r\nconst VARIANT_TO_BUTTON_COLOR: Record<Variant, 'primary' | 'success' | 'danger'> = {\r\n  info: 'primary',\r\n  success: 'success',\r\n  warning: 'primary',\r\n  danger: 'danger',\r\n};\r\n\r\n// ============================================================================\r\n// Type guard\r\n// ============================================================================\r\n\r\nfunction isIconType(value: boolean | IconType): value is IconType {\r\n  return typeof value !== 'boolean';\r\n}\r\n\r\n// ============================================================================\r\n// Component\r\n// ============================================================================\r\n\r\nexport const Alert: React.FC<AlertProps> = ({\r\n  variant = 'info',\r\n  title,\r\n  children,\r\n  icon,\r\n  onDismiss,\r\n  action,\r\n  className = '',\r\n}) => {\r\n  const classes = ['eidos-alert', `eidos-alert--${variant}`, className].filter(Boolean).join(' ');\r\n\r\n  // Determine icon rendering\r\n  const showIcon = icon !== false;\r\n  let iconNode: React.ReactNode = null;\r\n\r\n  if (showIcon) {\r\n    if (icon === true || icon === undefined) {\r\n      const DefaultIcon = DEFAULT_ICONS[variant];\r\n      iconNode = <DefaultIcon className=\"eidos-alert-icon\" aria-hidden=\"true\" />;\r\n    } else if (isIconType(icon)) {\r\n      iconNode = renderIcon(icon, 'eidos-alert-icon');\r\n    }\r\n  }\r\n\r\n  const buttonColor = VARIANT_TO_BUTTON_COLOR[variant];\r\n\r\n  return (\r\n    <div className={classes} role=\"alert\">\r\n      {showIcon && <span className=\"eidos-alert-icon-wrapper\">{iconNode}</span>}\r\n\r\n      <div className=\"eidos-alert-body\">\r\n        {title && <p className=\"eidos-alert-title\">{title}</p>}\r\n        {children && <div className=\"eidos-alert-content\">{children}</div>}\r\n        {action && (\r\n          <div className=\"eidos-alert-action\">\r\n            <Button\r\n              variant={action.variant === 'filled' ? 'filled' : 'text'}\r\n              size=\"sm\"\r\n              color={buttonColor}\r\n              onClick={action.onClick}\r\n            >\r\n              {action.label}\r\n            </Button>\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {onDismiss && (\r\n        <button\r\n          className=\"eidos-alert-dismiss\"\r\n          onClick={onDismiss}\r\n          type=\"button\"\r\n          aria-label=\"Dismiss\"\r\n        >\r\n          <X aria-hidden=\"true\" />\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"]}

package/dist/chunk-CKH36D7H.js

@@ -0,0 +1,28 @@
+// src/components/ButtonGroup/ButtonGroup.component.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var ButtonGroup = ({
+  children,
+  size,
+  variant,
+  color,
+  orientation = "horizontal",
+  className = ""
+}) => {
+  const clampedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const childProps = child.props;
+    return React.cloneElement(child, {
+      ...size !== void 0 && childProps.size === void 0 && { size },
+      ...variant !== void 0 && childProps.variant === void 0 && { variant },
+      ...color !== void 0 && childProps.color === void 0 && { color }
+    });
+  });
+  const classes = ["eidos-button-group", `eidos-button-group--${orientation}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children: clampedChildren });
+};
+
+export {
+  ButtonGroup
+};
+//# sourceMappingURL=chunk-CKH36D7H.js.map

package/dist/chunk-CKH36D7H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.component.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { ButtonGroupProps } from './ButtonGroup.types';\r\n\r\n/**\r\n * ButtonGroup - wraps adjacent Button components into a single visual unit.\r\n *\r\n * - Collapses inner border-radii so only the two outer ends are rounded.\r\n * - Collapses the shared border between adjacent outlined buttons into one line.\r\n * - Optionally propagates `size`, `variant`, and `color` down to children that\r\n *   don't already specify those props (each child can still override individually).\r\n *\r\n * @example\r\n * ```tsx\r\n * <ButtonGroup variant=\"outlined\" color=\"primary\">\r\n *   <Button>Left</Button>\r\n *   <Button>Center</Button>\r\n *   <Button>Right</Button>\r\n * </ButtonGroup>\r\n * ```\r\n */\r\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\r\n  children,\r\n  size,\r\n  variant,\r\n  color,\r\n  orientation = 'horizontal',\r\n  className = '',\r\n}) => {\r\n  const clampedChildren = React.Children.map(children, (child) => {\r\n    if (!React.isValidElement(child)) return child;\r\n    // Child's own explicitly-set props win; group-level props are fallbacks.\r\n    const childProps = child.props as Record<string, unknown>;\r\n    return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\r\n      ...(size !== undefined && childProps.size === undefined && { size }),\r\n      ...(variant !== undefined && childProps.variant === undefined && { variant }),\r\n      ...(color !== undefined && childProps.color === undefined && { color }),\r\n    });\r\n  });\r\n\r\n  const classes = ['eidos-button-group', `eidos-button-group--${orientation}`, className]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return <div className={classes}>{clampedChildren}</div>;\r\n};\r\n"],"mappings":";AAAA,OAAO,WAAW;AA2CT;AAvBF,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AACd,MAAM;AACJ,QAAM,kBAAkB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC9D,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AAEzC,UAAM,aAAa,MAAM;AACzB,WAAO,MAAM,aAAa,OAAsD;AAAA,MAC9E,GAAI,SAAS,UAAa,WAAW,SAAS,UAAa,EAAE,KAAK;AAAA,MAClE,GAAI,YAAY,UAAa,WAAW,YAAY,UAAa,EAAE,QAAQ;AAAA,MAC3E,GAAI,UAAU,UAAa,WAAW,UAAU,UAAa,EAAE,MAAM;AAAA,IACvE,CAAC;AAAA,EACH,CAAC;AAED,QAAM,UAAU,CAAC,sBAAsB,uBAAuB,WAAW,IAAI,SAAS,EACnF,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SAAO,oBAAC,SAAI,WAAW,SAAU,2BAAgB;AACnD;","names":[]}

package/dist/chunk-D7PGZ3M3.cjs

@@ -0,0 +1,117 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+// src/components/Modal/Modal.component.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _jsxruntime = require('react/jsx-runtime');
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  icon,
+  type,
+  children,
+  actions = [],
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  size = "md",
+  className = ""
+}) => {
+  const titleId = _react.useId.call(void 0, );
+  const bodyId = _react.useId.call(void 0, );
+  const TRANSITION_MS = 200;
+  const [isMounted, setIsMounted] = _react.useState.call(void 0, isOpen);
+  const [isVisible, setIsVisible] = _react.useState.call(void 0, isOpen);
+  _react.useEffect.call(void 0, () => {
+    let raf1 = 0;
+    let raf2 = 0;
+    let timerId;
+    if (isOpen) {
+      setIsMounted(true);
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setIsVisible(true));
+      });
+    } else {
+      setIsVisible(false);
+      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);
+    }
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      clearTimeout(timerId);
+    };
+  }, [isOpen]);
+  const handleEscapeKey = _react.useCallback.call(void 0, 
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    },
+    [closeOnEscape, isOpen, onClose]
+  );
+  const handleBackdropClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (closeOnBackdropClick && event.target === event.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnBackdropClick, onClose]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, handleEscapeKey]);
+  if (!isMounted) return null;
+  const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `eidos-modal ${isVisible ? "eidos-modal--is-open" : ""} ${className}`, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-modal-backdrop", onClick: handleBackdropClick, "aria-hidden": "true" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-describedby": bodyId,
+        className: `eidos-modal-content eidos-modal-content--${size}`,
+        children: [
+          title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `eidos-modal-header ${type ? `eidos-modal-header--${type}` : ""}`, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "h4", { id: titleId, children: [
+            icon && _chunkTBMVUI7Scjs.renderIcon.call(void 0, icon, "eidos-modal-icon"),
+            " ",
+            title
+          ] }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: bodyId, className: "eidos-modal-body", children }),
+          actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `eidos-modal-footer`, children: actions.map((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkLTOHGCU4cjs.Button,
+            {
+              variant: action.variant || "outlined",
+              size: action.size || "md",
+              color: action.color,
+              disabled: action.disabled,
+              loading: action.loading,
+              onClick: action.onClick,
+              children: action.label
+            },
+            action.id
+          )) })
+        ]
+      }
+    )
+  ] });
+  return _reactdom.createPortal.call(void 0, modalContent, document.body);
+};
+Modal.displayName = "Modal";
+
+
+
+exports.Modal = Modal;
+//# sourceMappingURL=chunk-D7PGZ3M3.cjs.map

package/dist/chunk-D7PGZ3M3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-D7PGZ3M3.cjs","../src/components/Modal/Modal.component.tsx"],"names":[],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-D7PGZ3M3.cjs","sourcesContent":[null,"import React, { useEffect, useCallback, useId, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { Button } from '../Button/Button.component';\r\nimport type { ModalProps } from './Modal.types';\r\nimport { renderIcon } from '../../utils';\r\n\r\nexport const Modal: React.FC<ModalProps> = ({\r\n  isOpen,\r\n  onClose,\r\n  title,\r\n  icon,\r\n  type,\r\n  children,\r\n  actions = [],\r\n  closeOnBackdropClick = true,\r\n  closeOnEscape = true,\r\n  size = 'md',\r\n  className = '',\r\n}) => {\r\n  const titleId = useId();\r\n  const bodyId = useId();\r\n\r\n  // ── Animation state ────────────────────────────────────────────────────────\r\n  // isMounted: whether the portal DOM node exists at all.\r\n  // isVisible: whether the '--is-open' CSS class is applied (drives the transition).\r\n  //\r\n  // On open:  mount first → one rAF → apply --is-open (browser sees the\r\n  //           initial faded/scaled-down state before transitioning, so the\r\n  //           animation fires instead of just painting straight into \"open\").\r\n  // On close: remove --is-open (CSS transition plays) → after 200 ms unmount.\r\n  //           200 ms matches the CSS `transition: 0.2s` in Modal.scss.\r\n  const TRANSITION_MS = 200;\r\n  const [isMounted, setIsMounted] = useState(isOpen);\r\n  const [isVisible, setIsVisible] = useState(isOpen);\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 (isOpen) {\r\n      setIsMounted(true);\r\n      // Double rAF: React 18 automatic batching means setIsMounted(true) may\r\n      // not produce a committed browser paint before the first rAF fires.\r\n      // The second frame guarantees the modal is rendered in its closed\r\n      // (faded/scaled-down) state before the CSS transition begins.\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  }, [isOpen]);\r\n\r\n  // Handle escape key\r\n  const handleEscapeKey = useCallback(\r\n    (event: KeyboardEvent) => {\r\n      if (closeOnEscape && event.key === 'Escape' && isOpen) {\r\n        onClose();\r\n      }\r\n    },\r\n    [closeOnEscape, isOpen, onClose],\r\n  );\r\n\r\n  // Handle backdrop click\r\n  const handleBackdropClick = useCallback(\r\n    (event: React.MouseEvent) => {\r\n      if (closeOnBackdropClick && event.target === event.currentTarget) {\r\n        onClose();\r\n      }\r\n    },\r\n    [closeOnBackdropClick, onClose],\r\n  );\r\n\r\n  // Add/remove escape key listener (tied to isOpen, not isMounted)\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      document.addEventListener('keydown', handleEscapeKey);\r\n      // Prevent body scroll when modal is open\r\n      document.body.style.overflow = 'hidden';\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleEscapeKey);\r\n      document.body.style.overflow = '';\r\n    };\r\n  }, [isOpen, handleEscapeKey]);\r\n\r\n  if (!isMounted) return null;\r\n\r\n  const modalContent = (\r\n    <div className={`eidos-modal ${isVisible ? 'eidos-modal--is-open' : ''} ${className}`}>\r\n      <div className=\"eidos-modal-backdrop\" onClick={handleBackdropClick} aria-hidden=\"true\" />\r\n      <div\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={title ? titleId : undefined}\r\n        aria-describedby={bodyId}\r\n        className={`eidos-modal-content eidos-modal-content--${size}`}\r\n      >\r\n        {title && (\r\n          <div className={`eidos-modal-header ${type ? `eidos-modal-header--${type}` : ''}`}>\r\n            <h4 id={titleId}>\r\n              {icon && renderIcon(icon, 'eidos-modal-icon')} {title}\r\n            </h4>\r\n          </div>\r\n        )}\r\n\r\n        <div id={bodyId} className=\"eidos-modal-body\">\r\n          {children}\r\n        </div>\r\n\r\n        {actions.length > 0 && (\r\n          <div className={`eidos-modal-footer`}>\r\n            {actions.map((action) => (\r\n              <Button\r\n                key={action.id}\r\n                variant={action.variant || 'outlined'}\r\n                size={action.size || 'md'}\r\n                color={action.color}\r\n                disabled={action.disabled}\r\n                loading={action.loading}\r\n                onClick={action.onClick}\r\n              >\r\n                {action.label}\r\n              </Button>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  return createPortal(modalContent, document.body);\r\n};\r\n\r\nModal.displayName = 'Modal';\r\n"]}