@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-input-button/eds-input-button.js

@@ -0,0 +1,36 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputButton = React.forwardRef(function EdsInputButton({ e2eAttr = 'eds-input-button', edsButtonPositionStart = false, edsButtonPositionEnd = true, children, className, ...rest }, ref) {
+    // Reproduce Angular `hostClasses()` verbatim (rule 9 — class-based source).
+    const hostClass = [
+        'eds-input-button',
+        edsButtonPositionEnd && !edsButtonPositionStart ? 'eds-input-button--end' : '',
+        edsButtonPositionStart ? 'eds-input-button--start' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // The Angular template projects two ordered slots — a bare `<ng-content/>` then a
+    // `<ng-content select="button"/>` — so the button is ALWAYS rendered after the non-button
+    // content in the DOM, regardless of author order; CSS `flex-direction` (row-reverse for
+    // `--start`) then places it left/right. Reproduce that by splitting children: non-button
+    // nodes first, `<button>` nodes last. This keeps the author markup order-agnostic (a sample
+    // may list the button first for readability) while matching the Angular visual placement.
+    const childArray = React.Children.toArray(children);
+    // Mirror the Angular `<ng-content select="button"/>` slot: a node is the "button" if it is a
+    // native <button> or the EdsButton component (a forwardRef whose inner fn is named EdsButton).
+    const isButton = (node) => {
+        if (!React.isValidElement(node))
+            return false;
+        const type = node.type;
+        if (type === 'button')
+            return true;
+        const named = type;
+        const name = named.displayName ?? named.render?.name ?? named.name;
+        return name === 'EdsButton';
+    };
+    const nonButtonChildren = childArray.filter((c) => !isButton(c));
+    const buttonChildren = childArray.filter((c) => isButton(c));
+    return (_jsxs("div", { ref: ref, className: hostClass, "data-e2e": e2eAttr, ...rest, children: [nonButtonChildren, buttonChildren] }));
+});
+//# sourceMappingURL=eds-input-button.js.map

package/eds-input-button/eds-input-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-button.js","sourceRoot":"","sources":["../../src/eds-input-button/eds-input-button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuD/B,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,cAAc,CACvG,EACI,OAAO,GAAG,kBAAkB,EAC5B,sBAAsB,GAAG,KAAK,EAC9B,oBAAoB,GAAG,IAAI,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,4EAA4E;IAC5E,MAAM,SAAS,GAAG;QACd,kBAAkB;QAClB,oBAAoB,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;QAC9E,sBAAsB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;QACvD,SAAS,IAAI,EAAE;KAClB;SACI,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEf,kFAAkF;IAClF,0FAA0F;IAC1F,wFAAwF;IACxF,yFAAyF;IACzF,4FAA4F;IAC5F,0FAA0F;IAC1F,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpD,6FAA6F;IAC7F,+FAA+F;IAC/F,MAAM,QAAQ,GAAG,CAAC,IAAqB,EAAW,EAAE;QAChD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;YAAE,OAAO,KAAK,CAAC;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,IAAI,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QACnC,MAAM,KAAK,GAAG,IAA2E,CAAC;QAC1F,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC;QACnE,OAAO,IAAI,KAAK,WAAW,CAAC;IAChC,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7D,OAAO,CACH,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,cAAY,OAAO,KAAM,IAAI,aAC3D,iBAAiB,EACjB,cAAc,IACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-input-button/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsInputButton } from './eds-input-button.js';
+export type { EdsInputButtonProps } from './eds-input-button.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-input-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/eds-input-button/index.js

@@ -0,0 +1,2 @@
+export { EdsInputButton } from './eds-input-button.js';
+//# sourceMappingURL=index.js.map

package/eds-input-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/eds-input-checkbox/eds-input-checkbox.css

@@ -0,0 +1,133 @@
+/**
+ * eds-input-checkbox.css — 1:1 pure-React port of eds-input-checkbox.scss.
+ *
+ * The Angular file styles `:host.eds-input-checkbox` (a native `input[type=checkbox]`) with a base
+ * reset, a `::before` pseudo-element holding the check / minus mark (inline SVG data URIs), and
+ * checked / indeterminate / disabled / readonly / invalid / focus states. The `.eui-21` wrapper and
+ * `:host` are dropped (share-ready, Part 2) — authored against the bare `.eds-input-checkbox` root
+ * class.
+ *
+ * The Angular component is class-based (`host: { '[class]': 'hostClasses()' }`), so the invalid
+ * variant stays a BEM class (`.eds-input-checkbox--invalid`), NOT `data-*` (guide rule 9). The SVG
+ * mark data URIs are copied verbatim from the SCSS `$svg-*` variables (fills: white / %23333 dark /
+ * %23a0a0b1 disabled). `--eds-*` tokens are copied verbatim (including the `--eds-c-suface-disabled`
+ * name as it appears in the source).
+ */
+
+/* --- base --- */
+.eds-input-checkbox {
+    /* Reset & base layout */
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    vertical-align: middle;
+    cursor: pointer;
+
+    /* Dimensions */
+    width: var(--eds-si-xl);
+    height: var(--eds-si-xl);
+    border-radius: var(--eds-br-xs);
+
+    /* Unchecked default */
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-s) solid var(--eds-c-border-neutral);
+}
+
+/* Pseudo-element for icon */
+.eds-input-checkbox::before {
+    content: '';
+    display: block;
+    width: var(--eds-si-xl);
+    height: var(--eds-si-xl);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+/* Checked */
+.eds-input-checkbox:checked {
+    background-color: var(--eds-c-surface-primary);
+    border-color: var(--eds-c-border-primary);
+}
+
+.eds-input-checkbox:checked::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27white%27 d=%27M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z%27/%3E%3C/svg%3E');
+}
+
+/* Indeterminate */
+.eds-input-checkbox:indeterminate {
+    background-color: var(--eds-c-surface-primary);
+    border-color: var(--eds-c-border-primary);
+}
+
+.eds-input-checkbox:indeterminate::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27white%27 d=%27M6 11h12v2H6z%27/%3E%3C/svg%3E');
+}
+
+/* Disabled */
+.eds-input-checkbox:disabled {
+    background-color: var(--eds-c-suface-disabled);
+    border-color: var(--eds-c-border-disabled);
+    pointer-events: none;
+    cursor: default;
+}
+
+.eds-input-checkbox:disabled:checked::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23a0a0b1%27 d=%27M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z%27/%3E%3C/svg%3E');
+}
+
+/* Readonly */
+.eds-input-checkbox[readonly] {
+    pointer-events: none;
+    cursor: default;
+}
+
+.eds-input-checkbox[readonly]:checked {
+    background-color: var(--eds-c-surface-neutral-subtle);
+    border-color: var(--eds-c-border-neutral);
+}
+
+.eds-input-checkbox[readonly]:checked::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23333%27 d=%27M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z%27/%3E%3C/svg%3E');
+}
+
+/*
+ * Indeterminate + readonly — match the readonly-checked neutral treatment so the mixed-state
+ * checkbox no longer stays primary.
+ */
+.eds-input-checkbox[readonly]:indeterminate {
+    background-color: var(--eds-c-surface-neutral-subtle);
+    border-color: var(--eds-c-border-neutral);
+}
+
+.eds-input-checkbox[readonly]:indeterminate::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23333%27 d=%27M6 11h12v2H6z%27/%3E%3C/svg%3E');
+}
+
+/* Invalid */
+.eds-input-checkbox--invalid:not(:disabled):not([readonly]) {
+    border-color: var(--eds-c-border-critical);
+}
+
+.eds-input-checkbox--invalid:not(:disabled):not([readonly]):checked {
+    background-color: var(--eds-c-surface-critical);
+    border-color: var(--eds-c-border-critical);
+}
+
+.eds-input-checkbox--invalid:not(:disabled):not([readonly]):checked::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27white%27 d=%27M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z%27/%3E%3C/svg%3E');
+}
+
+/* Focus */
+.eds-input-checkbox:focus-visible {
+    outline: 2px solid var(--eds-c-focus-default, #0e47cb);
+    outline-offset: 2px;
+}
+
+/* Invalid focus */
+.eds-input-checkbox--invalid:focus-visible {
+    outline-color: var(--eds-c-border-critical, #d32f2f);
+}

package/eds-input-checkbox/eds-input-checkbox.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+/**
+ * `EdsInputCheckbox` — pure React port of the Angular `eds-input-checkbox`.
+ *
+ * The Angular source is a directive on a native `<input type="checkbox">`
+ * (`selector: 'input[edsInputCheckbox]'`, empty `template`) — so the rendered **root element IS an
+ * `<input type="checkbox">`**. It is a `ControlValueAccessor` (Angular forms): `writeValue` sets the
+ * `checked` model, and the host `(change)` handler pushes `target.checked` through the CVA
+ * `onChange`. React has no CVA, so this exposes the standard React checkbox form API — **controlled**
+ * via `checked` + `onChange`, or **uncontrolled** via `defaultChecked`. CVA is flagged for React
+ * forms-API design review.
+ *
+ * The Angular `checked` and `indeterminate` are `model()` (two-way bindable). In React they map to:
+ *   - `checked` / `defaultChecked` — controlled or uncontrolled checked state (native radio/checkbox
+ *     idiom).
+ *   - `indeterminate` — the native `HTMLInputElement.indeterminate` property has no HTML attribute,
+ *     so (as in the Angular `effect()` that writes `nativeElement.indeterminate`) it is synced imperatively
+ *     via a ref + `useLayoutEffect`.
+ *
+ * The Angular component is **class-based** (`host: { '[class]': 'hostClasses()' }`), so per the
+ * pure-React guide rule 9 the BEM classes are reproduced verbatim on the root `className`
+ * (`eds-input-checkbox`, `eds-input-checkbox--invalid`) and the ported CSS keeps those class
+ * selectors — NOT `data-*`. State inputs map to native attributes: `disabled` → native `disabled`,
+ * `readonly` → the reflected `readonly` attribute (`readonly() || null`), `isInvalid` → the
+ * `eds-input-checkbox--invalid` class.
+ *
+ * Behavior ported from the host listeners:
+ *   - `(click)` → `onClick`: when `readonly`, `preventDefault()` so the checked state can't change.
+ *   - `(change)` → `onChange`: the CVA write path; forwarded to the React `onChange` prop. On user
+ *     interaction the Angular component clears `indeterminate`; here that is the consumer's job in a
+ *     controlled setup — the `onIndeterminateChange` callback fires so a controlled parent can reset it.
+ *   - `(blur)` → `onBlur`: the CVA `onTouched`; forwarded to the React `onBlur` prop.
+ *   - `(keydown.space)` → `onKeyDown`: when `readonly`, `preventDefault()` + `stopPropagation()` on
+ *     the Space key so it can't toggle the checkbox.
+ *
+ * @example Controlled
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ * <EdsInputCheckbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />
+ * ```
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <EdsInputCheckbox defaultChecked />
+ * ```
+ *
+ * @example Indeterminate (mixed)
+ * ```tsx
+ * <EdsInputCheckbox indeterminate onIndeterminateChange={() => {}} onChange={() => {}} />
+ * ```
+ *
+ * @example Disabled / readonly / invalid
+ * ```tsx
+ * <EdsInputCheckbox disabled />
+ * <EdsInputCheckbox readonly checked />
+ * <EdsInputCheckbox invalid />
+ * ```
+ */
+export interface EdsInputCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as `data-e2e`.
+     * @default 'eds-input-checkbox'
+     */
+    e2eAttr?: string;
+    /**
+     * Controls whether the checkbox is disabled. Reflected as the native `disabled` attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the checkbox is readonly. Reflected as the `readonly` attribute; while
+     * readonly, click and Space are prevented so the checked state can't change.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Controls whether the checkbox shows an invalid/error state. Reflected as the
+     * `eds-input-checkbox--invalid` class (mirrors the Angular `isInvalid` input).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Controls the indeterminate (mixed) state. There is no HTML attribute for it, so it is synced
+     * imperatively onto `HTMLInputElement.indeterminate` (mirrors the Angular `effect()`).
+     * @default false
+     */
+    indeterminate?: boolean;
+    /** Controlled checked state. When provided the checkbox is controlled (React semantics). */
+    checked?: boolean;
+    /** Initial checked state for an uncontrolled checkbox. */
+    defaultChecked?: boolean;
+    /** Fired when the checked state changes (mirrors the Angular host `(change)` → CVA `onChange`). */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Fired on user interaction while `indeterminate` is set, so a controlled parent can clear it
+     * (mirrors the Angular `onHostChange` clearing `indeterminate` on change).
+     */
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+    /** Fired when the checkbox loses focus (mirrors the Angular host `(blur)` → CVA `onTouched`). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export declare const EdsInputCheckbox: React.ForwardRefExoticComponent<EdsInputCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=eds-input-checkbox.d.ts.map

package/eds-input-checkbox/eds-input-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-checkbox.d.ts","sourceRoot":"","sources":["../../src/eds-input-checkbox/eds-input-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,WAAW,qBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,iGAAiG;IACjG,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,gGA2G5B,CAAC"}

package/eds-input-checkbox/eds-input-checkbox.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+export const EdsInputCheckbox = React.forwardRef(function EdsInputCheckbox({ e2eAttr = 'eds-input-checkbox', disabled = false, readonly = false, invalid = false, indeterminate = false, checked, defaultChecked, onChange, onIndeterminateChange, onBlur, onClick, onKeyDown, className, ...rest }, ref) {
+    const innerRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // Angular effect(): sync `indeterminate` onto the native element (no HTML attribute for it).
+    useLayoutEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked, defaultChecked]);
+    const rootClass = useMemo(() => [
+        'eds-input-checkbox',
+        invalid ? 'eds-input-checkbox--invalid' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), [invalid, className]);
+    // Angular onHostClick: prevent the checked change while readonly.
+    const handleClick = useCallback((event) => {
+        if (readonly) {
+            event.preventDefault();
+        }
+        onClick?.(event);
+    }, [readonly, onClick]);
+    // Angular onHostChange: clear indeterminate on user interaction, then forward the change.
+    const handleChange = useCallback((event) => {
+        if (indeterminate) {
+            onIndeterminateChange?.(false);
+        }
+        onChange?.(event);
+    }, [indeterminate, onIndeterminateChange, onChange]);
+    // Angular onSpacePressed: block Space toggling while readonly.
+    const handleKeyDown = useCallback((event) => {
+        if (readonly && (event.key === ' ' || event.key === 'Spacebar')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        onKeyDown?.(event);
+    }, [readonly, onKeyDown]);
+    const isControlled = checked !== undefined;
+    const controlledProps = isControlled ? { checked } : { defaultChecked };
+    return (_jsx("input", { ref: setRefs, type: "checkbox", className: rootClass, "data-e2e": e2eAttr, disabled: disabled, readOnly: readonly, "aria-invalid": invalid || undefined, onChange: handleChange, onBlur: onBlur, onClick: handleClick, onKeyDown: handleKeyDown, ...controlledProps, ...rest }));
+});
+//# sourceMappingURL=eds-input-checkbox.js.map

package/eds-input-checkbox/eds-input-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-checkbox.js","sourceRoot":"","sources":["../../src/eds-input-checkbox/eds-input-checkbox.tsx"],"names":[],"mappings":"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"}

package/eds-input-checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsInputCheckbox } from './eds-input-checkbox.js';
+export type { EdsInputCheckboxProps } from './eds-input-checkbox.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-input-checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/eds-input-checkbox/index.js

@@ -0,0 +1,2 @@
+export { EdsInputCheckbox } from './eds-input-checkbox.js';
+//# sourceMappingURL=index.js.map

package/eds-input-checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/eds-input-group/eds-input-group-addon-item.css

@@ -0,0 +1,19 @@
+/* Pure-React 1:1 port of eds-input-group-addon-item.scss (`.eui-21` wrapper dropped). */
+
+.eds-input-group-addon-item {
+    align-items: center;
+    align-self: stretch;
+    background-color: var(--eds-c-surface-neutral-subtler);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    display: flex;
+    flex-shrink: 0;
+    font: var(--eds-f-paragraph-m);
+    height: auto;
+    justify-content: center;
+    min-height: var(--eds-si-3xl);
+    min-width: var(--eds-si-3xl);
+    padding: 0 var(--eds-sp-xs);
+    position: relative;
+}

package/eds-input-group/eds-input-group-addon-item.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+/**
+ * `EdsInputGroupAddonItem` — pure React port of the Angular `eds-input-group-addon-item`.
+ *
+ * A single addon cell (icon, text prefix/suffix, unit label…) placed alongside a control inside an
+ * `EdsInputGroupAddon`. The rendered element IS the component (a `<div>` centered flex box) — no
+ * extra wrapper. Its outer-corner rounding is driven by the parent addon's CSS based on position.
+ *
+ * The Angular source sets a static host class (`eds-input-group-addon-item`) and reflects only a
+ * `data-e2e` attribute; there are no variant axes. The template is a bare `<ng-content/>`.
+ *
+ * @example
+ * ```tsx
+ * <EdsInputGroupAddonItem>@</EdsInputGroupAddonItem>
+ * ```
+ */
+export interface EdsInputGroupAddonItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as the `data-e2e`
+     * attribute on the host element. @default 'eds-input-group-addon-item'
+     */
+    e2eAttr?: string;
+    /** The addon content (icon, text, unit label…) projected into the cell. */
+    children?: React.ReactNode;
+}
+export declare const EdsInputGroupAddonItem: React.ForwardRefExoticComponent<EdsInputGroupAddonItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-input-group-addon-item.d.ts.map

package/eds-input-group/eds-input-group-addon-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group-addon-item.d.ts","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group-addon-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrF;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,oGAalC,CAAC"}

package/eds-input-group/eds-input-group-addon-item.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputGroupAddonItem = React.forwardRef(function EdsInputGroupAddonItem({ e2eAttr = 'eds-input-group-addon-item', children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-input-group-addon-item ${className}` : 'eds-input-group-addon-item', "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-input-group-addon-item.js.map

package/eds-input-group/eds-input-group-addon-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group-addon-item.js","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group-addon-item.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CAClD,SAAS,sBAAsB,CAAC,EAAE,OAAO,GAAG,4BAA4B,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACzG,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,8BAA8B,SAAS,EAAE,CAAC,CAAC,CAAC,4BAA4B,cACrF,OAAO,KACb,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-input-group/eds-input-group-addon.css

@@ -0,0 +1,87 @@
+/* Pure-React 1:1 port of eds-input-group-addon.scss.
+   `.eui-21` wrapper dropped; `::ng-deep` collapses to plain descendant/child combinators
+   (React is light DOM, so no encapsulation boundary to pierce). */
+
+.eds-input-group-addon {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+    width: 100%;
+}
+
+/* Border merging: collapse double borders between adjacent children */
+.eds-input-group-addon > :not(:first-child) {
+    margin-left: calc(-1 * var(--eds-bw-xs));
+}
+
+/* --- Addon items --- */
+.eds-input-group-addon > .eds-input-group-addon-item:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--eds-br-s);
+    border-bottom-left-radius: var(--eds-br-s);
+}
+
+.eds-input-group-addon > .eds-input-group-addon-item:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--eds-br-s);
+    border-bottom-right-radius: var(--eds-br-s);
+}
+
+.eds-input-group-addon > .eds-input-group-addon-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+}
+
+/* --- Inputs/selects (direct or nested in clearable wrapper) --- */
+/* First child */
+.eds-input-group-addon > :first-child:not(.eds-input-group-addon-item):not(.eds-button) input,
+.eds-input-group-addon > :first-child:not(.eds-input-group-addon-item):not(.eds-button) select,
+.eds-input-group-addon > :first-child.eds-input-text {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: var(--eds-br-s) !important;
+    border-bottom-left-radius: var(--eds-br-s) !important;
+}
+
+/* Last child */
+.eds-input-group-addon > :last-child:not(.eds-input-group-addon-item):not(.eds-button) input,
+.eds-input-group-addon > :last-child:not(.eds-input-group-addon-item):not(.eds-button) select,
+.eds-input-group-addon > :last-child.eds-input-text {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: var(--eds-br-s) !important;
+    border-bottom-right-radius: var(--eds-br-s) !important;
+}
+
+/* Middle child */
+.eds-input-group-addon > :not(:first-child):not(:last-child):not(.eds-input-group-addon-item):not(.eds-button) input,
+.eds-input-group-addon > :not(:first-child):not(:last-child):not(.eds-input-group-addon-item):not(.eds-button) select,
+.eds-input-group-addon > :not(:first-child):not(:last-child).eds-input-text {
+    border-radius: 0 !important;
+}
+
+/* --- Buttons (direct children, e.g. datepicker calendar button) --- */
+.eds-input-group-addon > .eds-button:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: var(--eds-br-s) !important;
+    border-bottom-left-radius: var(--eds-br-s) !important;
+}
+
+.eds-input-group-addon > .eds-button:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: var(--eds-br-s) !important;
+    border-bottom-right-radius: var(--eds-br-s) !important;
+}
+
+.eds-input-group-addon > .eds-button:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+}
+
+/* Ensure focused element appears above adjacent items */
+.eds-input-group-addon > :focus-within,
+.eds-input-group-addon > :focus {
+    z-index: 1;
+}

package/eds-input-group/eds-input-group-addon.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * `EdsInputGroupAddon` — pure React port of the Angular `eds-input-group-addon`.
+ *
+ * A horizontal row that groups a control with leading/trailing addon items (icons, prefixes,
+ * buttons, selects), collapsing the double borders between adjacent children and rounding only the
+ * outer corners. The rendered element IS the component (a `<div>` flex row) — no extra wrapper.
+ *
+ * The Angular source sets a static host class (`eds-input-group-addon`) and reflects only a
+ * `data-e2e` attribute; there are no variant axes. The template is a bare `<ng-content/>`, so the
+ * projected children (addon items, inputs, selects, buttons) render directly into the host and the
+ * CSS keys its border-merging rules off their position and class.
+ *
+ * @example
+ * ```tsx
+ * <EdsInputGroupAddon>
+ *   <EdsInputGroupAddonItem>@</EdsInputGroupAddonItem>
+ *   <EdsInputText placeholder="username" />
+ * </EdsInputGroupAddon>
+ * ```
+ */
+export interface EdsInputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as the `data-e2e`
+     * attribute on the host element. @default 'eds-input-group-addon'
+     */
+    e2eAttr?: string;
+    /** The addon items and control elements projected into the row. */
+    children?: React.ReactNode;
+}
+export declare const EdsInputGroupAddon: React.ForwardRefExoticComponent<EdsInputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-input-group-addon.d.ts.map

package/eds-input-group/eds-input-group-addon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group-addon.d.ts","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group-addon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,gGAa9B,CAAC"}

package/eds-input-group/eds-input-group-addon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputGroupAddon = React.forwardRef(function EdsInputGroupAddon({ e2eAttr = 'eds-input-group-addon', children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-input-group-addon ${className}` : 'eds-input-group-addon', "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-input-group-addon.js.map

package/eds-input-group/eds-input-group-addon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group-addon.js","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group-addon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgC/B,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAC9C,SAAS,kBAAkB,CAAC,EAAE,OAAO,GAAG,uBAAuB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAChG,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,yBAAyB,SAAS,EAAE,CAAC,CAAC,CAAC,uBAAuB,cAC3E,OAAO,KACb,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-input-group/eds-input-group.css

@@ -0,0 +1,18 @@
+/* Pure-React 1:1 port of eds-input-group.scss (`.eui-21` wrapper dropped, share-ready). */
+
+.eds-input-group {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--eds-sp-3xs);
+    margin-bottom: var(--eds-sp-m);
+    position: relative;
+    width: 100%;
+}
+
+/* base.media(base.$eds-bkp-mobile) — mobile range (< 768px) */
+@media (max-width: 767px) {
+    .eds-input-group.row {
+        flex-direction: column;
+    }
+}

package/eds-input-group/eds-input-group.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+/**
+ * `EdsInputGroup` — pure React port of the Angular `eds-input-group`.
+ *
+ * A vertical layout container for a form field: it stacks a label, control (input/select/addon
+ * row), hints and error/validation messages with consistent spacing. The rendered element IS the
+ * component (a `<div>` flex column) — no extra wrapper.
+ *
+ * The Angular source computes a static host class (`hostClasses()` always returns
+ * `'eds-input-group'`) and reflects only a `data-e2e` attribute; there are no variant axes. The
+ * template is a bare `<ng-content/>`, so all children project directly into the host.
+ *
+ * @example
+ * ```tsx
+ * <EdsInputGroup>
+ *   <label className="eds-label">Email</label>
+ *   <EdsInputText placeholder="you@example.com" />
+ * </EdsInputGroup>
+ * ```
+ */
+export interface EdsInputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as the `data-e2e`
+     * attribute on the host element. @default 'eds-input-group'
+     */
+    e2eAttr?: string;
+    /** The label, control and message elements projected into the group. */
+    children?: React.ReactNode;
+}
+export declare const EdsInputGroup: React.ForwardRefExoticComponent<EdsInputGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-input-group.d.ts.map

package/eds-input-group/eds-input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-group.d.ts","sourceRoot":"","sources":["../../src/eds-input-group/eds-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,2FAcxB,CAAC"}

package/eds-input-group/eds-input-group.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsInputGroup = React.forwardRef(function EdsInputGroup({ e2eAttr = 'eds-input-group', children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-input-group ${className}` : 'eds-input-group', "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-input-group.js.map