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

package/eds-icon-toggle/eds-icon-toggle.js.map

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

package/eds-icon-toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsIconToggle } from './eds-icon-toggle.js';
+export type { EdsIconToggleProps, EdsIconToggleColor } from './eds-icon-toggle.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-icon-toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-icon-toggle/index.js

@@ -0,0 +1,2 @@
+export { EdsIconToggle } from './eds-icon-toggle.js';
+//# sourceMappingURL=index.js.map

package/eds-icon-toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-input-button/eds-input-button.css

@@ -0,0 +1,63 @@
+/* Pure-React port of eds-input-button.scss (1:1). */
+
+.eds-input-button {
+    display: flex;
+    width: 100%;
+    border-radius: var(--eds-br-s);
+}
+
+.eds-input-button .eds-button {
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    background-color: var(--eds-c-surface-elevation);
+    position: relative;
+}
+
+.eds-input-button.eds-input-button--start {
+    flex-direction: row-reverse;
+}
+
+.eds-input-button.eds-input-button--start .eds-button {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.eds-input-button.eds-input-button--start .eds-button::after {
+    background-color: var(--eds-c-border-divider);
+    content: "";
+    display: block;
+    height: 1.75rem;
+    right: -1px;
+    position: absolute;
+    top: var(--eds-sp-2xs);
+    width: 1px;
+}
+
+.eds-input-button.eds-input-button--start .eds-input-text {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.eds-input-button.eds-input-button--end .eds-button {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.eds-input-button.eds-input-button--end .eds-button::before {
+    background-color: var(--eds-c-border-divider);
+    content: "";
+    display: block;
+    height: 1.75rem;
+    left: -1px;
+    position: absolute;
+    top: var(--eds-sp-2xs);
+    width: 1px;
+}
+
+.eds-input-button.eds-input-button--end .eds-input-text {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+/**
+ * `EdsInputButton` — pure React port of the Angular `eds-input-button`.
+ *
+ * A layout component that positions button elements relative to input fields. Enables the creation
+ * of input groups with leading or trailing action buttons, commonly used for search inputs,
+ * password visibility toggles, or clear actions.
+ *
+ * The rendered element IS the component (a flex row). The Angular source is **class-based**
+ * (`host: { '[class]': 'hostClasses()' }`), so per the pure-React guide rule 9 the BEM modifier
+ * classes (`eds-input-button--start` / `eds-input-button--end`) are reproduced verbatim on the root
+ * `className` rather than reflected as `data-*`, and the ported CSS keeps the same class selectors.
+ *
+ * The Angular template projects two content slots — a bare `<ng-content/>` and a
+ * `<ng-content select="button"/>`; both merely project the group's children (input + button) into
+ * the host in document order, and CSS ordering (`flex-direction`) handles the visual placement. In
+ * React both collapse to a single `{children}` render.
+ *
+ * @example Button at end of input (default)
+ * ```tsx
+ * <EdsInputButton>
+ *   <input className="eds-input-text" placeholder="Search..." />
+ *   <button className="eds-button">Search</button>
+ * </EdsInputButton>
+ * ```
+ *
+ * @example Button at start of input
+ * ```tsx
+ * <EdsInputButton edsButtonPositionStart>
+ *   <button className="eds-icon-button" aria-label="Filter">…</button>
+ *   <input className="eds-input-text" placeholder="Filter results..." />
+ * </EdsInputButton>
+ * ```
+ */
+export interface EdsInputButtonProps 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-button'
+     */
+    e2eAttr?: string;
+    /**
+     * Positions the button at the start (left in LTR, right in RTL) of the input field. When true,
+     * overrides `edsButtonPositionEnd`. @default false
+     */
+    edsButtonPositionStart?: boolean;
+    /**
+     * Positions the button at the end (right in LTR, left in RTL) of the input field. Ignored when
+     * `edsButtonPositionStart` is true. @default true
+     */
+    edsButtonPositionEnd?: boolean;
+    /** The input + button elements projected into the group. */
+    children?: React.ReactNode;
+}
+export declare const EdsInputButton: React.ForwardRefExoticComponent<EdsInputButtonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-input-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-button.d.ts","sourceRoot":"","sources":["../../src/eds-input-button/eds-input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,4FA0BzB,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } 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(' ');
+    return (_jsx("div", { ref: ref, className: hostClass, "data-e2e": e2eAttr, ...rest, children: children }));
+});
+//# 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,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,cAAY,OAAO,KAAM,IAAI,YAC3D,QAAQ,GACP,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"}