eidos-ui 0.1.0

package/dist/chunk-A35Y5MRJ.js

@@ -0,0 +1,235 @@
+import {
+  renderIcon
+} from "./chunk-XSGUFMT4.js";
+import {
+  Tooltip
+} from "./chunk-H523JFY2.js";
+
+// src/components/Input/Input.component.tsx
+import { forwardRef, useState, useId } from "react";
+import { Eye, EyeOff, CircleAlert, X, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef(
+  ({
+    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] = useState(false);
+    const [localValue, setLocalValue] = useState(defaultValue || "");
+    const [isFocused, setIsFocused] = useState(false);
+    const generatedId = useId();
+    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);
+      }
+      restInputProps.onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setLocalValue("");
+      }
+      const syntheticEvent = {
+        target: {
+          value: "",
+          name: inputName,
+          id: inputId,
+          type: actualType
+        }
+      };
+      restInputProps.onChange?.(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__ */ jsxs(
+      "div",
+      {
+        className: `eidos-input-container ${fullWidth ? `eidos-input-container--fullWidth` : ""} ${className}`,
+        children: [
+          label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
+            /* @__PURE__ */ jsx("span", { className: `eidos-input-label-text`, children: label }),
+            isRequired && /* @__PURE__ */ jsx("span", { className: `eidos-input-required-asterisk`, children: "*" }),
+            disclaimerIcon && (disclaimerContent ? /* @__PURE__ */ jsx(Tooltip, { message: disclaimerContent, children: /* @__PURE__ */ jsx("span", { className: `eidos-input-disclaimer-icon`, children: renderIcon(disclaimerIcon, `eidos-input-disclaimer-icon-svg`) }) }) : /* @__PURE__ */ jsx("span", { className: `eidos-input-disclaimer-icon`, children: renderIcon(disclaimerIcon, `eidos-input-disclaimer-icon-svg`) }))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+            preIcon && /* @__PURE__ */ jsx("span", { className: `eidos-input-pre-icon`, children: renderIcon(preIcon, `eidos-input-pre-icon-svg`) }),
+            /* @__PURE__ */ jsx(
+              "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();
+                  restInputProps.onFocus?.(e);
+                },
+                onBlur: (e) => {
+                  handleBlur();
+                  restInputProps.onBlur?.(e);
+                },
+                onChange: handleInputChange
+              }
+            ),
+            type === "password" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `eidos-input-password-toggle`,
+                onClick: () => setShowPassword(!showPassword),
+                disabled: disabled || loading,
+                tabIndex: -1,
+                children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: `eidos-input-password-toggle-icon` }) : /* @__PURE__ */ jsx(Eye, { className: `eidos-input-password-toggle-icon` })
+              }
+            ),
+            currentValue && String(currentValue).trim().length > 0 && type !== "password" && !isSelect && clearable !== false && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `eidos-input-clear-button`,
+                onClick: handleClear,
+                disabled: disabled || loading,
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsx(X, { className: `eidos-input-clear-button-icon` })
+              }
+            ),
+            posIcon && !posIconButton && /* @__PURE__ */ jsx("span", { className: `eidos-input-pos-icon`, children: renderIcon(posIcon, `eidos-input-pos-icon-svg`) }),
+            posIcon && posIconButton && onPosIconClick && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `eidos-input-pos-icon-button`,
+                onClick: onPosIconClick,
+                disabled: disabled || loading,
+                tabIndex: -1,
+                children: renderIcon(posIcon, `eidos-input-pos-icon-svg`)
+              }
+            ),
+            isSelect && /* @__PURE__ */ jsx("span", { className: `eidos-input-select-chevron`, children: /* @__PURE__ */ jsx(ChevronDown, { className: `eidos-input-pos-icon-svg` }) })
+          ] }),
+          error && /* @__PURE__ */ jsxs("div", { className: `eidos-input-error-message`, children: [
+            /* @__PURE__ */ jsx(CircleAlert, { className: `eidos-input-error-icon` }),
+            /* @__PURE__ */ jsx("span", { children: error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  Input
+};
+//# sourceMappingURL=chunk-A35Y5MRJ.js.map

package/dist/chunk-A35Y5MRJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.component.tsx"],"sourcesContent":["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"],"mappings":"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","names":["currentValue"]}

package/dist/chunk-AOV32YBE.js

@@ -0,0 +1,113 @@
+// src/components/Radio/Radio.component.tsx
+import { forwardRef, useId, useState } from "react";
+import { CircleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef(
+  ({
+    label,
+    color = "primary",
+    size = "md",
+    className = "",
+    disabled = false,
+    id,
+    checked,
+    defaultChecked,
+    onChange,
+    ...inputProps
+  }, ref) => {
+    const generatedId = useId();
+    const radioId = id || `radio-${generatedId}`;
+    const isControlled = checked !== void 0;
+    const [localChecked, setLocalChecked] = useState(defaultChecked ?? false);
+    const isChecked = checked ?? localChecked;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setLocalChecked(e.target.checked);
+      }
+      onChange?.(e);
+    };
+    const wrapperClasses = [
+      "eidos-radio-wrapper",
+      `eidos-radio-wrapper--${color}`,
+      `eidos-radio-wrapper--${size}`,
+      disabled && "eidos-radio-wrapper--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const controlClasses = [
+      "eidos-radio-control",
+      isChecked && "eidos-radio-control--checked",
+      disabled && "eidos-radio-control--disabled"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("label", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "radio",
+          id: radioId,
+          className: "eidos-radio-input",
+          disabled,
+          onChange: handleChange,
+          ...isControlled ? { checked } : { defaultChecked },
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: controlClasses, children: /* @__PURE__ */ jsx("span", { className: "eidos-radio-dot" }) }),
+      label && /* @__PURE__ */ jsx("span", { className: "eidos-radio-label", children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = ({
+  name,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  options,
+  direction = "vertical",
+  color = "primary",
+  size = "md",
+  disabled = false,
+  error,
+  className = ""
+}) => {
+  const isControlled = valueProp !== void 0;
+  const [localValue, setLocalValue] = useState(defaultValue);
+  const currentValue = isControlled ? valueProp : localValue;
+  const handleOptionChange = (optionValue) => {
+    if (!isControlled) {
+      setLocalValue(optionValue);
+    }
+    onChange?.(optionValue);
+  };
+  const groupClasses = ["eidos-radio-group", `eidos-radio-group--${direction}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: groupClasses, children: options.map((option) => /* @__PURE__ */ jsx(
+      Radio,
+      {
+        name,
+        value: option.value,
+        checked: currentValue === option.value,
+        onChange: (e) => {
+          if (e.target.checked) handleOptionChange(option.value);
+        },
+        disabled: disabled || option.disabled,
+        label: option.label,
+        color,
+        size
+      },
+      option.value
+    )) }),
+    error && /* @__PURE__ */ jsxs("div", { className: "eidos-radio-error-message", children: [
+      /* @__PURE__ */ jsx(CircleAlert, {}),
+      /* @__PURE__ */ jsx("span", { children: error })
+    ] })
+  ] });
+};
+RadioGroup.displayName = "RadioGroup";
+
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=chunk-AOV32YBE.js.map

package/dist/chunk-AOV32YBE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/Radio.component.tsx"],"sourcesContent":["import React, { forwardRef, useId, useState } from 'react';\r\nimport { CircleAlert } from 'lucide-react';\r\nimport type { RadioProps, RadioGroupProps } from './Radio.types';\r\n\r\n// ============================================================================\r\n// Radio\r\n// ============================================================================\r\n\r\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\r\n  (\r\n    {\r\n      label,\r\n      color = 'primary',\r\n      size = 'md',\r\n      className = '',\r\n      disabled = false,\r\n      id,\r\n      checked,\r\n      defaultChecked,\r\n      onChange,\r\n      ...inputProps\r\n    },\r\n    ref,\r\n  ) => {\r\n    const generatedId = useId();\r\n    const radioId = id || `radio-${generatedId}`;\r\n\r\n    // Track checked state for the visual control:\r\n    //   - controlled mode: `checked` prop drives the visual\r\n    //   - uncontrolled mode (standalone Radio): local state mirrors the native input\r\n    const isControlled = checked !== undefined;\r\n    const [localChecked, setLocalChecked] = useState<boolean>(defaultChecked ?? false);\r\n\r\n    // `??` only falls back when `checked` is undefined – `false` is kept as-is\r\n    const isChecked = checked ?? localChecked;\r\n\r\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      if (!isControlled) {\r\n        setLocalChecked(e.target.checked);\r\n      }\r\n      onChange?.(e);\r\n    };\r\n\r\n    const wrapperClasses = [\r\n      'eidos-radio-wrapper',\r\n      `eidos-radio-wrapper--${color}`,\r\n      `eidos-radio-wrapper--${size}`,\r\n      disabled && 'eidos-radio-wrapper--disabled',\r\n      className,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const controlClasses = [\r\n      'eidos-radio-control',\r\n      isChecked && 'eidos-radio-control--checked',\r\n      disabled && 'eidos-radio-control--disabled',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <label className={wrapperClasses}>\r\n        <input\r\n          ref={ref}\r\n          type=\"radio\"\r\n          id={radioId}\r\n          className=\"eidos-radio-input\"\r\n          disabled={disabled}\r\n          onChange={handleChange}\r\n          {...(isControlled ? { checked } : { defaultChecked })}\r\n          {...inputProps}\r\n        />\r\n        <span className={controlClasses}>\r\n          <span className=\"eidos-radio-dot\" />\r\n        </span>\r\n        {label && <span className=\"eidos-radio-label\">{label}</span>}\r\n      </label>\r\n    );\r\n  },\r\n);\r\n\r\nRadio.displayName = 'Radio';\r\n\r\n// ============================================================================\r\n// RadioGroup\r\n//\r\n// Design note: RadioGroup always passes a controlled `checked` prop to every\r\n// Radio child so that the selection dot stays in sync across the full group.\r\n// For the \"uncontrolled\" case (defaultValue), RadioGroup owns the state\r\n// internally – individual Radios never need to manage it themselves.\r\n// ============================================================================\r\n\r\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\r\n  name,\r\n  value: valueProp,\r\n  defaultValue,\r\n  onChange,\r\n  options,\r\n  direction = 'vertical',\r\n  color = 'primary',\r\n  size = 'md',\r\n  disabled = false,\r\n  error,\r\n  className = '',\r\n}) => {\r\n  const isControlled = valueProp !== undefined;\r\n  const [localValue, setLocalValue] = useState<string | undefined>(defaultValue);\r\n\r\n  // currentValue is always defined when valueProp is provided (controlled)\r\n  const currentValue = isControlled ? valueProp : localValue;\r\n\r\n  const handleOptionChange = (optionValue: string) => {\r\n    if (!isControlled) {\r\n      setLocalValue(optionValue);\r\n    }\r\n    onChange?.(optionValue);\r\n  };\r\n\r\n  const groupClasses = ['eidos-radio-group', `eidos-radio-group--${direction}`, className]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div>\r\n      <div className={groupClasses}>\r\n        {options.map((option) => (\r\n          <Radio\r\n            key={option.value}\r\n            name={name}\r\n            value={option.value}\r\n            checked={currentValue === option.value}\r\n            onChange={(e) => {\r\n              if (e.target.checked) handleOptionChange(option.value);\r\n            }}\r\n            disabled={disabled || option.disabled}\r\n            label={option.label}\r\n            color={color}\r\n            size={size}\r\n          />\r\n        ))}\r\n      </div>\r\n\r\n      {error && (\r\n        <div className=\"eidos-radio-error-message\">\r\n          <CircleAlert />\r\n          <span>{error}</span>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nRadioGroup.displayName = 'RadioGroup';\r\n"],"mappings":";AAAA,SAAgB,YAAY,OAAO,gBAAgB;AACnD,SAAS,mBAAmB;AA6DtB,SACE,KADF;AAtDC,IAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,cAAc,MAAM;AAC1B,UAAM,UAAU,MAAM,SAAS,WAAW;AAK1C,UAAM,eAAe,YAAY;AACjC,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,kBAAkB,KAAK;AAGjF,UAAM,YAAY,WAAW;AAE7B,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,CAAC,cAAc;AACjB,wBAAgB,EAAE,OAAO,OAAO;AAAA,MAClC;AACA,iBAAW,CAAC;AAAA,IACd;AAEA,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA,wBAAwB,KAAK;AAAA,MAC7B,wBAAwB,IAAI;AAAA,MAC5B,YAAY;AAAA,MACZ;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,IACd,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,qBAAC,WAAM,WAAW,gBAChB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,WAAU;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACT,GAAI,eAAe,EAAE,QAAQ,IAAI,EAAE,eAAe;AAAA,UAClD,GAAG;AAAA;AAAA,MACN;AAAA,MACA,oBAAC,UAAK,WAAW,gBACf,8BAAC,UAAK,WAAU,mBAAkB,GACpC;AAAA,MACC,SAAS,oBAAC,UAAK,WAAU,qBAAqB,iBAAM;AAAA,OACvD;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AAWb,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,YAAY;AACd,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,YAAY;AAG7E,QAAM,eAAe,eAAe,YAAY;AAEhD,QAAM,qBAAqB,CAAC,gBAAwB;AAClD,QAAI,CAAC,cAAc;AACjB,oBAAc,WAAW;AAAA,IAC3B;AACA,eAAW,WAAW;AAAA,EACxB;AAEA,QAAM,eAAe,CAAC,qBAAqB,sBAAsB,SAAS,IAAI,SAAS,EACpF,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,qBAAC,SACC;AAAA,wBAAC,SAAI,WAAW,cACb,kBAAQ,IAAI,CAAC,WACZ;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO,OAAO;AAAA,QACd,SAAS,iBAAiB,OAAO;AAAA,QACjC,UAAU,CAAC,MAAM;AACf,cAAI,EAAE,OAAO,QAAS,oBAAmB,OAAO,KAAK;AAAA,QACvD;AAAA,QACA,UAAU,YAAY,OAAO;AAAA,QAC7B,OAAO,OAAO;AAAA,QACd;AAAA,QACA;AAAA;AAAA,MAVK,OAAO;AAAA,IAWd,CACD,GACH;AAAA,IAEC,SACC,qBAAC,SAAI,WAAU,6BACb;AAAA,0BAAC,eAAY;AAAA,MACb,oBAAC,UAAM,iBAAM;AAAA,OACf;AAAA,KAEJ;AAEJ;AAEA,WAAW,cAAc;","names":[]}