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

package/eds-textarea/eds-textarea.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+export const EdsTextarea = React.forwardRef(function EdsTextarea({ e2eAttr = 'eds-textarea', disabled = false, readonly = false, invalid = false, autoResize = false, minRows = 1, maxRows = 0, value, defaultValue, onChange, onBlur, className, rows, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    // Internal ref to the textarea so the auto-resize logic can measure/mutate it; merged with the
+    // forwarded 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]);
+    // Track current value for auto-resize re-measurement in the uncontrolled case.
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const rootClass = useMemo(() => [
+        'eds-textarea',
+        invalid ? 'eds-textarea--invalid' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), [invalid, className]);
+    /**
+     * Recomputes the textarea height from its content, clamped to `maxRows` (mirrors the
+     * directive's `resize()`): reset height to `auto`, read `scrollHeight`, clamp to
+     * `lineHeight * maxRows`, and toggle `overflow` so it scrolls past the max.
+     */
+    const resize = useCallback(() => {
+        if (!autoResize)
+            return;
+        const el = innerRef.current;
+        if (!el)
+            return;
+        // A zero-width element cannot be measured reliably; the ResizeObserver re-runs once it gets
+        // a real width (matches the directive's offsetWidth === 0 guard).
+        if (el.offsetWidth === 0)
+            return;
+        el.style.height = 'auto';
+        let scrollHeight = el.scrollHeight;
+        if (maxRows > 0) {
+            const lineHeight = parseInt(getComputedStyle(el).lineHeight, 10) || 20;
+            const maxHeight = lineHeight * maxRows;
+            scrollHeight = Math.min(scrollHeight, maxHeight);
+            el.style.overflow = scrollHeight >= maxHeight ? '' : 'hidden';
+        }
+        el.style.height = scrollHeight <= 0 ? 'auto' : `${scrollHeight}px`;
+    }, [autoResize, maxRows]);
+    // Apply/clear the auto-resize inline styles and remeasure on value / config / readonly changes
+    // (mirrors the directive's constructor effect + valueChanges subscription).
+    useLayoutEffect(() => {
+        const el = innerRef.current;
+        if (!el)
+            return;
+        if (autoResize) {
+            el.style.overflow = 'hidden';
+            el.style.resize = 'none';
+            resize();
+        }
+        else {
+            el.style.overflow = '';
+            el.style.resize = '';
+            el.style.height = '';
+        }
+    }, [autoResize, resize, currentValue, readonly]);
+    // Re-measure on width changes the value/config triggers miss (matches the directive's
+    // ResizeObserver, coalesced through requestAnimationFrame).
+    useLayoutEffect(() => {
+        if (!autoResize || typeof ResizeObserver === 'undefined')
+            return;
+        const el = innerRef.current;
+        if (!el)
+            return;
+        let lastWidth = -1;
+        let pending = null;
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[entries.length - 1].contentRect.width;
+            if (width === lastWidth)
+                return;
+            lastWidth = width;
+            if (width === 0)
+                return;
+            if (pending !== null)
+                return;
+            pending = requestAnimationFrame(() => {
+                pending = null;
+                resize();
+            });
+        });
+        observer.observe(el);
+        return () => {
+            observer.disconnect();
+            if (pending !== null)
+                cancelAnimationFrame(pending);
+        };
+    }, [autoResize, resize]);
+    const handleChange = useCallback((event) => {
+        if (!isControlled) {
+            setUncontrolledValue(event.target.value);
+        }
+        onChange?.(event);
+    }, [isControlled, onChange]);
+    const controlledProps = isControlled ? { value } : { defaultValue };
+    // When auto-resize is active the directive sets rows to minRows; otherwise honor the rows prop.
+    const effectiveRows = autoResize ? minRows : rows;
+    return (_jsx("textarea", { ref: setRefs, className: rootClass, "data-e2e": e2eAttr, disabled: disabled, readOnly: readonly, rows: effectiveRows, "aria-invalid": invalid || undefined, onChange: handleChange, onBlur: onBlur, ...controlledProps, ...rest }));
+});
+//# sourceMappingURL=eds-textarea.js.map

package/eds-textarea/eds-textarea.js.map

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

package/eds-textarea/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsTextarea } from './eds-textarea.js';
+export type { EdsTextareaProps } from './eds-textarea.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

package/eds-textarea/index.js

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

package/eds-textarea/index.js.map

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

package/eds-timeline/eds-timeline-item.css

@@ -0,0 +1,160 @@
+/* Color variant definitions */
+.eds-timeline-item.eds-timeline-item--neutral {
+    --_indicator-color: var(--eds-c-foreground-subtler);
+    --_title-color: var(--eds-c-foreground-default);
+}
+
+.eds-timeline-item.eds-timeline-item--info {
+    --_indicator-color: var(--eds-c-foreground-info);
+    --_title-color: var(--eds-c-foreground-info);
+}
+
+.eds-timeline-item.eds-timeline-item--success {
+    --_indicator-color: var(--eds-c-foreground-success);
+    --_title-color: var(--eds-c-foreground-success);
+}
+
+.eds-timeline-item.eds-timeline-item--warning {
+    --_indicator-color: var(--eds-c-foreground-warning);
+    --_title-color: var(--eds-c-foreground-warning);
+}
+
+.eds-timeline-item.eds-timeline-item--critical {
+    --_indicator-color: var(--eds-c-foreground-critical);
+    --_title-color: var(--eds-c-foreground-critical);
+}
+
+/* Component layout */
+.eds-timeline-item {
+    /* The first line height for label-m-semi-bold is ~20px.
+       We center the dot to that first line. */
+    --_dot-size: var(--eds-sp-s);
+    --_first-line-height: 1.25rem; /* 20px — matches eds-f-label-m-semi-bold line-height */
+
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    width: 100%;
+    padding-bottom: var(--eds-sp-m);
+}
+
+/* Left section (date/time in centered layout) */
+.eds-timeline-item .left-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    min-width: 8rem;
+    padding-right: var(--eds-sp-s);
+}
+
+/* Center indicator (dot + connecting line) */
+.eds-timeline-item .indicator {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    width: var(--eds-sp-l);
+    z-index: 2;
+}
+
+/* The dot — centered to the first line of text */
+.eds-timeline-item .indicator::after {
+    content: '';
+    width: var(--_dot-size);
+    height: var(--_dot-size);
+    border-radius: var(--eds-br-full);
+    border: var(--eds-bw-s) solid var(--_indicator-color);
+    background-color: var(--eds-c-surface-default);
+    margin-top: calc(var(--_first-line-height) / 2 - var(--_dot-size) / 2);
+    flex-shrink: 0;
+}
+
+/* Vertical connecting line */
+.eds-timeline-item .indicator::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--_first-line-height) / 2 + var(--_dot-size) / 2);
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--eds-bw-s);
+    height: calc(100% + var(--eds-sp-m) - var(--_first-line-height) / 2 - var(--_dot-size) / 2);
+    background-color: var(--eds-c-border-divider);
+}
+
+/* Group variant (dashed line, no dot) */
+.eds-timeline-item .indicator.indicator--group::after {
+    display: none;
+}
+
+.eds-timeline-item .indicator.indicator--group::before {
+    top: 0;
+    height: calc(100% + var(--eds-sp-m));
+    background-color: transparent;
+    border-left: var(--eds-bw-s) dashed var(--eds-c-border-divider);
+    width: 0;
+    transform: none;
+    left: calc(50% - 1px);
+}
+
+/* Right section (content) */
+.eds-timeline-item .content {
+    flex: 1;
+    padding-left: var(--eds-sp-s);
+    min-width: 0;
+}
+
+.eds-timeline-item .content .title {
+    font: var(--eds-f-label-m-semi-bold);
+    color: var(--_title-color);
+    line-height: var(--_first-line-height);
+}
+
+.eds-timeline-item .content .subtitle {
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground-subtler);
+    margin-top: var(--eds-sp-4xs);
+}
+
+.eds-timeline-item .content .date {
+    font: var(--eds-f-label-s-semi-bold);
+    color: var(--eds-c-foreground-default);
+    margin-top: var(--eds-sp-2xs);
+}
+
+.eds-timeline-item .content .time {
+    font: var(--eds-f-paragraph-xs);
+    color: var(--eds-c-foreground-subtler);
+    margin-top: var(--eds-sp-4xs);
+}
+
+.eds-timeline-item .date {
+    font: var(--eds-f-label-s-semi-bold);
+    color: var(--eds-c-foreground-default);
+    line-height: var(--_first-line-height);
+}
+
+.eds-timeline-item .time {
+    font: var(--eds-f-paragraph-xs);
+    color: var(--eds-c-foreground-subtler);
+    margin-top: var(--eds-sp-4xs);
+}
+
+/* Hide connector line for the last item */
+.eds-timeline-item:last-child .indicator::before {
+    display: none;
+}
+
+/* Group state */
+.eds-timeline-item.eds-timeline-item--group {
+    padding-bottom: var(--eds-sp-xs);
+}
+
+.eds-timeline-item.eds-timeline-item--group .content {
+    padding-bottom: var(--eds-sp-xs);
+}
+
+/* Left-aligned variant */
+.eds-timeline-item.eds-timeline-item--left-aligned .indicator {
+    margin-left: 0;
+}

package/eds-timeline/eds-timeline-item.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+/** Local narrowed color union — the timeline item's color/status contract. */
+export type EdsTimelineItemColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+export interface EdsTimelineItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * Semantic color/status of the item indicator and title. Mirrors the Angular
+     * `EdsColorDirective` shorthands (`edsNeutral`/`edsInfo`/…). @default 'neutral'
+     */
+    color?: EdsTimelineItemColor;
+    /** Primary text content of the timeline item (used when no `children` are projected). */
+    label?: string;
+    /** Secondary text content displayed below the label. */
+    subLabel?: string;
+    /** Date to display for the timeline item. */
+    date?: string;
+    /** Time to display for the timeline item. */
+    time?: string;
+    /**
+     * Indicates if this item represents a group/collapsed set of events. Changes the visual
+     * appearance to a dashed connector with no dot. @default false
+     */
+    isGroup?: boolean;
+    /** Data attribute value for end-to-end testing identification. @default 'eds-timeline-item' */
+    e2eAttr?: string;
+    /**
+     * Custom item content, replacing the default label/subLabel/date/time block (the Angular
+     * `<ng-content>` default-slot fallback).
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsTimelineItem` — pure React port of the Angular `eds-timeline-item`.
+ *
+ * A single event/activity in a timeline: an optional left column (date/time in the centered
+ * layout), a center indicator (dot + connecting line, or a dashed group connector), and a
+ * content column. Reads the parent timeline's `leftAligned` layout from `EdsTimelineContext`.
+ * The class-based Angular source computes `eds-timeline-item` + `--{color}` (+ `--group`,
+ * `--left-aligned`) on its host; that BEM class logic is reproduced verbatim here (rule 9).
+ */
+export declare const EdsTimelineItem: React.ForwardRefExoticComponent<EdsTimelineItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-timeline-item.d.ts.map

package/eds-timeline/eds-timeline-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-timeline-item.d.ts","sourceRoot":"","sources":["../../src/eds-timeline/eds-timeline-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,8EAA8E;AAC9E,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE3F,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC7F;;;OAGG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,6FAuD3B,CAAC"}

package/eds-timeline/eds-timeline-item.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEdsTimeline } from './eds-timeline.js';
+/**
+ * `EdsTimelineItem` — pure React port of the Angular `eds-timeline-item`.
+ *
+ * A single event/activity in a timeline: an optional left column (date/time in the centered
+ * layout), a center indicator (dot + connecting line, or a dashed group connector), and a
+ * content column. Reads the parent timeline's `leftAligned` layout from `EdsTimelineContext`.
+ * The class-based Angular source computes `eds-timeline-item` + `--{color}` (+ `--group`,
+ * `--left-aligned`) on its host; that BEM class logic is reproduced verbatim here (rule 9).
+ */
+export const EdsTimelineItem = React.forwardRef(function EdsTimelineItem({ color = 'neutral', label, subLabel, date, time, isGroup = false, e2eAttr = 'eds-timeline-item', children, className, ...rest }, ref) {
+    const { leftAligned } = useEdsTimeline();
+    const hostClasses = [
+        'eds-timeline-item',
+        `eds-timeline-item--${color}`,
+        isGroup ? 'eds-timeline-item--group' : '',
+        leftAligned ? 'eds-timeline-item--left-aligned' : '',
+    ]
+        .join(' ')
+        .trim();
+    const defaultContent = (_jsxs(_Fragment, { children: [label && _jsx("div", { className: "title", children: label }), subLabel && _jsx("div", { className: "subtitle", children: subLabel }), leftAligned && date && _jsx("div", { className: "date", children: date }), leftAligned && time && _jsx("div", { className: "time", children: time })] }));
+    return (_jsxs("div", { ref: ref, className: className ? `${hostClasses} ${className}` : hostClasses, role: "listitem", "data-e2e": e2eAttr, ...rest, children: [!leftAligned && (_jsxs("div", { className: "left-content", children: [date && _jsx("div", { className: "date", children: date }), time && _jsx("div", { className: "time", children: time })] })), _jsx("div", { className: isGroup ? 'indicator indicator--group' : 'indicator' }), _jsx("div", { className: "content", children: children ?? defaultContent })] }));
+});
+//# sourceMappingURL=eds-timeline-item.js.map

package/eds-timeline/eds-timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-timeline-item.js","sourceRoot":"","sources":["../../src/eds-timeline/eds-timeline-item.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAiCnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC3C,SAAS,eAAe,CACpB,EACI,KAAK,GAAG,SAAS,EACjB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,mBAAmB,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAEzC,MAAM,WAAW,GAAG;QAChB,mBAAmB;QACnB,sBAAsB,KAAK,EAAE;QAC7B,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;QACzC,WAAW,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE;KACvD;SACI,IAAI,CAAC,GAAG,CAAC;SACT,IAAI,EAAE,CAAC;IAEZ,MAAM,cAAc,GAAG,CACnB,8BACK,KAAK,IAAI,cAAK,SAAS,EAAC,OAAO,YAAE,KAAK,GAAO,EAC7C,QAAQ,IAAI,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,EACtD,WAAW,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,IAAI,GAAO,EACzD,WAAW,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,IAAI,GAAO,IAC3D,CACN,CAAC;IAEF,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,EAClE,IAAI,EAAC,UAAU,cACL,OAAO,KACb,IAAI,aAEP,CAAC,WAAW,IAAI,CACb,eAAK,SAAS,EAAC,cAAc,aACxB,IAAI,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,IAAI,GAAO,EAC1C,IAAI,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,IAAI,GAAO,IACzC,CACT,EACD,cAAK,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,WAAW,GAAI,EACxE,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,IAAI,cAAc,GAAO,IACzD,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-timeline/eds-timeline.css

@@ -0,0 +1,8 @@
+.eds-timeline {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 100%;
+}

package/eds-timeline/eds-timeline.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+/**
+ * Context published by `EdsTimeline` so descendant `EdsTimelineItem`s can read the
+ * parent's `leftAligned` layout — the React analog of the Angular
+ * `inject(forwardRef(() => EdsTimeline))` + `timeline?.leftAligned()`.
+ */
+export interface EdsTimelineContextValue {
+    /** Whether the timeline uses left-aligned layout. */
+    leftAligned: boolean;
+}
+export declare const EdsTimelineContext: React.Context<EdsTimelineContextValue>;
+/** Hook for reading the enclosing timeline layout (defaults to non-left-aligned). */
+export declare function useEdsTimeline(): EdsTimelineContextValue;
+export interface EdsTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Accessible label for the timeline. Recommended to provide context for screen reader
+     * users (e.g. "Project milestones", "Event history"). @default 'Timeline'
+     */
+    ariaLabel?: string;
+    /**
+     * When true, aligns all timeline items to the left side instead of the center layout.
+     * @default false
+     */
+    leftAligned?: boolean;
+    /** Data attribute value for end-to-end testing identification. @default 'eds-timeline' */
+    e2eAttr?: string;
+    /** Timeline items — one or more `<EdsTimelineItem>`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsTimeline` — pure React port of the Angular `eds-timeline`.
+ *
+ * Displays a vertical list of events/activities in chronological order. When `leftAligned`
+ * is set, all items align to the left instead of the centered date/indicator/content layout.
+ * The class-based Angular source computes `eds-timeline` (+ `eds-timeline--left-aligned`) on
+ * its host; that BEM class logic is reproduced verbatim here (rule 9). Layout is provided to
+ * descendant items via `EdsTimelineContext`.
+ */
+export declare const EdsTimeline: React.ForwardRefExoticComponent<EdsTimelineProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-timeline.d.ts.map

package/eds-timeline/eds-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-timeline.d.ts","sourceRoot":"","sources":["../../src/eds-timeline/eds-timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACpC,qDAAqD;IACrD,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,wCAAiE,CAAC;AAEjG,qFAAqF;AACrF,wBAAgB,cAAc,IAAI,uBAAuB,CAExD;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,yFAsBtB,CAAC"}

package/eds-timeline/eds-timeline.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+export const EdsTimelineContext = createContext({ leftAligned: false });
+/** Hook for reading the enclosing timeline layout (defaults to non-left-aligned). */
+export function useEdsTimeline() {
+    return useContext(EdsTimelineContext);
+}
+/**
+ * `EdsTimeline` — pure React port of the Angular `eds-timeline`.
+ *
+ * Displays a vertical list of events/activities in chronological order. When `leftAligned`
+ * is set, all items align to the left instead of the centered date/indicator/content layout.
+ * The class-based Angular source computes `eds-timeline` (+ `eds-timeline--left-aligned`) on
+ * its host; that BEM class logic is reproduced verbatim here (rule 9). Layout is provided to
+ * descendant items via `EdsTimelineContext`.
+ */
+export const EdsTimeline = React.forwardRef(function EdsTimeline({ ariaLabel = 'Timeline', leftAligned = false, e2eAttr = 'eds-timeline', children, className, ...rest }, ref) {
+    const hostClasses = ['eds-timeline', leftAligned ? 'eds-timeline--left-aligned' : '']
+        .join(' ')
+        .trim();
+    return (_jsx(EdsTimelineContext.Provider, { value: { leftAligned }, children: _jsx("div", { ref: ref, className: className ? `${hostClasses} ${className}` : hostClasses, role: "list", "aria-label": ariaLabel ?? undefined, "data-e2e": e2eAttr, ...rest, children: children }) }));
+});
+//# sourceMappingURL=eds-timeline.js.map

package/eds-timeline/eds-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-timeline.js","sourceRoot":"","sources":["../../src/eds-timeline/eds-timeline.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYlD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAA0B,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;AAEjG,qFAAqF;AACrF,MAAM,UAAU,cAAc;IAC1B,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC1C,CAAC;AAmBD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,SAAS,WAAW,CAC9F,EAAE,SAAS,GAAG,UAAU,EAAE,WAAW,GAAG,KAAK,EAAE,OAAO,GAAG,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACvG,GAAG;IAEH,MAAM,WAAW,GAAG,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC;SAChF,IAAI,CAAC,GAAG,CAAC;SACT,IAAI,EAAE,CAAC;IAEZ,OAAO,CACH,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,YAC/C,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,EAClE,IAAI,EAAC,MAAM,gBACC,SAAS,IAAI,SAAS,cACxB,OAAO,KACb,IAAI,YAEP,QAAQ,GACP,GACoB,CACjC,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-timeline/index.d.ts

@@ -0,0 +1,5 @@
+export { EdsTimeline, EdsTimelineContext, useEdsTimeline } from './eds-timeline.js';
+export type { EdsTimelineProps, EdsTimelineContextValue } from './eds-timeline.js';
+export { EdsTimelineItem } from './eds-timeline-item.js';
+export type { EdsTimelineItemProps, EdsTimelineItemColor } from './eds-timeline-item.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/eds-timeline/index.js

@@ -0,0 +1,3 @@
+export { EdsTimeline, EdsTimelineContext, useEdsTimeline } from './eds-timeline.js';
+export { EdsTimelineItem } from './eds-timeline-item.js';
+//# sourceMappingURL=index.js.map

package/eds-timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGpF,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/eds-toggle/eds-toggle.css

@@ -0,0 +1,104 @@
+/*
+ * eds-toggle.css — 1:1 port of eds-toggle.scss (pure-React light-DOM CSS).
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host.eds-toggle            -> .eds-toggle (root class on the rendered element)
+ *   :host.eds-toggle--checked   -> .eds-toggle.eds-toggle--checked
+ *   :host.eds-toggle--disabled  -> .eds-toggle.eds-toggle--disabled
+ *   :host.eds-toggle--size-s/-l -> .eds-toggle.eds-toggle--size-s / .eds-toggle--size-l
+ *   :host:focus-visible + base.eds-focus-visible-ring-rounded() -> inlined below
+ * The component is class-based (BEM modifiers), so selectors keep `.eds-toggle--*` (guide rule 9).
+ * The `.eui-21` wrapper is dropped (share-ready); the --_ privates and --eds-* tokens are verbatim.
+ */
+
+.eds-toggle {
+    --_toggle-width: 2.75rem;
+    --_toggle-height: 1.5rem;
+    --_handle-size: 1.25rem;
+    --_handle-offset: 0.125rem;
+    --_track-color: var(--eds-c-surface-neutral-subtle);
+    --_track-color-checked: var(--eds-c-surface-primary);
+    --_handle-color: var(--eds-c-surface-elevation);
+    --_handle-border-color: var(--eds-c-border-neutral);
+    --_icon-color: var(--eds-c-foreground-subtler);
+
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+}
+
+.eds-toggle .eds-toggle__input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: inherit;
+    z-index: 1;
+    margin: 0;
+}
+
+.eds-toggle .eds-toggle__track {
+    display: flex;
+    align-items: center;
+    width: var(--_toggle-width);
+    height: var(--_toggle-height);
+    background-color: var(--_track-color);
+    border-radius: var(--eds-br-full);
+    padding: var(--_handle-offset);
+    transition: background-color 150ms ease-in-out;
+}
+
+.eds-toggle .eds-toggle__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_handle-size);
+    height: var(--_handle-size);
+    background-color: var(--_handle-color);
+    border: 1px solid var(--_handle-border-color);
+    border-radius: var(--eds-br-full);
+    box-shadow: var(--eds-sh-1);
+    transition: transform 150ms ease-in-out;
+    color: var(--_icon-color);
+}
+
+/* base.eds-focus-visible-ring-rounded() inlined (:host:focus-visible → .eds-toggle:focus-visible) */
+.eds-toggle:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-full) !important;
+}
+
+.eds-toggle.eds-toggle--checked .eds-toggle__track {
+    background-color: var(--_track-color-checked);
+}
+
+.eds-toggle.eds-toggle--checked .eds-toggle__handle {
+    transform: translateX(calc(var(--_toggle-width) - var(--_handle-size) - var(--_handle-offset) * 2));
+    border-color: var(--_track-color-checked);
+}
+
+/* Disabled state */
+.eds-toggle.eds-toggle--disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+.eds-toggle.eds-toggle--disabled .eds-toggle__input {
+    cursor: not-allowed;
+}
+
+/* Size variants */
+.eds-toggle.eds-toggle--size-s {
+    --_toggle-width: 2.25rem;
+    --_toggle-height: 1.25rem;
+    --_handle-size: 1rem;
+    --_handle-offset: 0.125rem;
+}
+
+.eds-toggle.eds-toggle--size-l {
+    --_toggle-width: 3.25rem;
+    --_toggle-height: 1.75rem;
+    --_handle-size: 1.5rem;
+    --_handle-offset: 0.125rem;
+}