@equinor/eds-core-react 2.3.0 → 2.3.1

package/dist/esm/components/next/Input/Input.js

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { error_filled } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/Icon.js';
+
+const Input = /*#__PURE__*/forwardRef(function Input({
+  invalid = false,
+  disabled,
+  readOnly,
+  type = 'text',
+  startText,
+  startAdornment,
+  endText,
+  endAdornment,
+  containerClassName,
+  className,
+  as: Component = 'input',
+  ...inputProps
+}, ref) {
+  const tone = invalid && !disabled ? 'danger' : 'neutral';
+  const showErrorIcon = invalid && !disabled;
+  const hasStartAdornment = startText || startAdornment;
+  const hasEndAdornment = endText || endAdornment;
+  const containerClasses = ['eds-input-container', containerClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/jsxs("div", {
+    className: containerClasses,
+    "data-color-appearance": tone,
+    "data-font-size": "md",
+    "data-selectable-space": "sm",
+    "data-space-proportions": "squished",
+    "data-disabled": disabled || undefined,
+    "data-readonly": readOnly || undefined,
+    "data-invalid": invalid || undefined,
+    children: [showErrorIcon && /*#__PURE__*/jsx("span", {
+      className: "eds-error-icon",
+      "data-font-size": "xs",
+      "data-font-family": "ui",
+      "data-baseline": "center",
+      children: /*#__PURE__*/jsx(Icon, {
+        data: error_filled
+      })
+    }), hasStartAdornment && /*#__PURE__*/jsxs("div", {
+      className: "eds-adornment",
+      "data-font-size": "xs",
+      children: [startText && /*#__PURE__*/jsx("span", {
+        className: "eds-adornment__text",
+        "data-color-appearance": "neutral",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "data-baseline": "center",
+        children: startText
+      }), startAdornment && /*#__PURE__*/jsx("span", {
+        className: "eds-adornment__adornment",
+        "data-font-size": "xs",
+        "data-font-family": "ui",
+        "data-baseline": "center",
+        children: startAdornment
+      })]
+    }), /*#__PURE__*/jsx(Component, {
+      ref: ref,
+      type: type,
+      disabled: disabled,
+      readOnly: readOnly,
+      className: ['eds-input', className].filter(Boolean).join(' '),
+      "data-color-appearance": "neutral",
+      "data-font-family": "ui",
+      "data-font-size": "md",
+      "data-line-height": "default",
+      ...inputProps,
+      "aria-invalid": invalid || undefined
+    }), hasEndAdornment && /*#__PURE__*/jsxs("div", {
+      className: "eds-adornment",
+      "data-font-size": "xs",
+      children: [endText && /*#__PURE__*/jsx("span", {
+        className: "eds-adornment__text",
+        "data-color-appearance": "neutral",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "data-baseline": "center",
+        children: endText
+      }), endAdornment && /*#__PURE__*/jsx("span", {
+        className: "eds-adornment__adornment",
+        "data-font-size": "xs",
+        "data-font-family": "ui",
+        "data-baseline": "center",
+        children: endAdornment
+      })]
+    })]
+  });
+});
+
+export { Input };

package/dist/esm/components/next/Radio/Radio.js

@@ -0,0 +1,63 @@
+import { forwardRef, useId } from 'react';
+import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/Icon.js';
+import { Field } from '../Field/Field.js';
+
+/* eslint camelcase: "off" */
+const classNames = (...classes) => classes.filter(Boolean).join(' ');
+const Radio = /*#__PURE__*/forwardRef(function Radio({
+  label,
+  disabled = false,
+  id: providedId,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = providedId ?? generatedId;
+  const radioInput = /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("input", {
+      type: "radio",
+      id: inputId,
+      className: "eds-radio__input",
+      disabled: disabled,
+      ref: ref,
+      ...rest
+    }), /*#__PURE__*/jsxs("span", {
+      className: "eds-radio__icon-wrapper",
+      children: [/*#__PURE__*/jsx(Icon, {
+        data: radio_button_selected,
+        size: "lg",
+        className: "eds-radio__icon eds-radio__icon--checked"
+      }), /*#__PURE__*/jsx(Icon, {
+        data: radio_button_unselected,
+        size: "lg",
+        className: "eds-radio__icon eds-radio__icon--unchecked"
+      })]
+    })]
+  });
+
+  // Use Field for layout when label is provided
+  if (label) {
+    return /*#__PURE__*/jsxs(Field, {
+      position: "start",
+      disabled: disabled,
+      className: "eds-radio",
+      "data-color-appearance": disabled ? 'neutral' : 'accent',
+      "data-selectable-space": "md",
+      "data-space-proportions": "squished",
+      children: [radioInput, /*#__PURE__*/jsx(Field.Label, {
+        htmlFor: inputId,
+        children: label
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx("span", {
+    className: classNames('eds-radio', 'eds-radio--standalone'),
+    "data-color-appearance": disabled ? 'neutral' : 'accent',
+    "data-disabled": disabled || undefined,
+    children: radioInput
+  });
+});
+Radio.displayName = 'Radio';
+
+export { Radio };

package/dist/esm/components/next/Switch/Switch.js

@@ -0,0 +1,64 @@
+import { forwardRef, useId, useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field } from '../Field/Field.js';
+
+const Switch = /*#__PURE__*/forwardRef(function Switch({
+  label,
+  disabled,
+  className,
+  id,
+  checked: controlledChecked,
+  defaultChecked,
+  onChange,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+
+  // Track checked state for dynamic color appearance
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleChange = useCallback(event => {
+    if (!isControlled) {
+      setInternalChecked(event.target.checked);
+    }
+    onChange?.(event);
+  }, [isControlled, onChange]);
+  return /*#__PURE__*/jsxs(Field, {
+    position: "start",
+    disabled: disabled,
+    className: ['eds-switch', className].filter(Boolean).join(' '),
+    "data-font-size": "md",
+    "data-selectable-space": "md",
+    "data-space-proportions": "squished",
+    "data-color-appearance": disabled ? 'neutral' : 'accent',
+    children: [/*#__PURE__*/jsxs("span", {
+      className: "eds-switch__control",
+      "data-color-appearance": !disabled && isChecked ? 'accent' : 'neutral',
+      children: [/*#__PURE__*/jsx("input", {
+        type: "checkbox",
+        role: "switch",
+        id: inputId,
+        className: "eds-switch__input",
+        disabled: disabled,
+        ref: ref,
+        checked: isControlled ? controlledChecked : undefined,
+        defaultChecked: !isControlled ? defaultChecked : undefined,
+        onChange: handleChange,
+        ...rest
+      }), /*#__PURE__*/jsx("span", {
+        className: "eds-switch__track",
+        children: /*#__PURE__*/jsx("span", {
+          className: "eds-switch__handle"
+        })
+      })]
+    }), /*#__PURE__*/jsx(Field.Label, {
+      htmlFor: inputId,
+      children: label
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

package/dist/esm/components/next/TextField/TextField.js

@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+import { info_circle } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFieldIds } from '../Field/useFieldIds.js';
+import { Field } from '../Field/Field.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Icon } from '../Icon/Icon.js';
+import { Input } from '../Input/Input.js';
+
+const TextField = /*#__PURE__*/forwardRef(function TextField({
+  label,
+  labelInfo,
+  indicator,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid = false,
+  disabled = false,
+  ...inputProps
+}, ref) {
+  const {
+    inputId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  return /*#__PURE__*/jsxs(Field, {
+    disabled: disabled,
+    children: [label && /*#__PURE__*/jsxs("div", {
+      className: "eds-text-field__header",
+      children: [/*#__PURE__*/jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), labelInfo && /*#__PURE__*/jsx(Tooltip, {
+        title: labelInfo,
+        placement: "top",
+        children: /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "eds-text-field__info",
+          "aria-label": "More information",
+          children: /*#__PURE__*/jsx(Icon, {
+            data: info_circle,
+            size: "xs"
+          })
+        })
+      })]
+    }), description && /*#__PURE__*/jsx(Field.Description, {
+      id: descriptionId,
+      children: description
+    }), /*#__PURE__*/jsx(Input, {
+      ref: ref,
+      id: inputId,
+      disabled: disabled,
+      invalid: invalid,
+      "aria-describedby": getDescribedBy({
+        hasDescription: !!description,
+        hasHelperMessage: !!helperMessage
+      }),
+      ...inputProps
+    }), helperMessage && /*#__PURE__*/jsx(Field.HelperMessage, {
+      id: helperMessageId,
+      role: invalid ? 'alert' : undefined,
+      children: helperMessage
+    })]
+  });
+});
+
+export { TextField };

package/dist/esm/index.next.js

@@ -1,2 +1,9 @@
-export { Placeholder } from './components/next/Placeholder/Placeholder.js';
+export { Button } from './components/next/Button/Button.js';
 export { Icon } from './components/next/Icon/Icon.js';
+export { Field } from './components/next/Field/Field.js';
+export { useFieldIds } from './components/next/Field/useFieldIds.js';
+export { Checkbox } from './components/next/Checkbox/Checkbox.js';
+export { Radio } from './components/next/Radio/Radio.js';
+export { Switch } from './components/next/Switch/Switch.js';
+export { Input } from './components/next/Input/Input.js';
+export { TextField } from './components/next/TextField/TextField.js';