@design-edito/tools 0.5.2 → 0.5.3

package/components/Drawer/index.js

@@ -1,54 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+import { useState } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { ResizeObserverComponent } from '../ResizeObserver/index.js';
+import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { drawer as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
-import { ResizeObserverComponent } from '../ResizeObserver/index.js';
 /**
- * Drawer component with optional controlled and uncontrolled behavior.
+ * Drawer component supporting controlled and uncontrolled usage.
  *
- * @remarks
- * - In controlled mode (`isOpened` defined), visibility is fully driven by the prop.
- * - In uncontrolled mode, internal state is initialized from `initialIsOpened`.
- * - The component measures its content using `ResizeObserverComponent`
- *   and exposes the dimensions:
- *   - As CSS custom properties:
- *     --{prefix}-content-height
- *     --{prefix}-content-height-px
- *     --{prefix}-content-width
- *     --{prefix}-content-width-px
- *   - As `data-content-width` and `data-content-height` attributes.
+ * The content is measured through a {@link ResizeObserverComponent} so its
+ * dimensions can drive the open/close transition from CSS alone.
+ *
+ * ### CSS modifiers
+ * - `opened` — the drawer is open.
+ * - `closed` — the drawer is closed.
+ *
+ * ### CSS elements
+ * - `opener`
+ * - `closer`
+ * - `content`
+ *
+ * ### CSS custom properties on the root element
+ * - `--lm-drawer-content-width` / `--lm-drawer-content-width-raw`
+ * - `--lm-drawer-content-height` / `--lm-drawer-content-height-raw`
+ * Absent until the first measurement lands.
  *
- * CSS modifier classes:
- * - `opened` when open
- * - `closed` when closed
+ * ### Data attributes on the root element
+ * - `data-content-width`, `data-content-height` — the measured content size.
+ * Absent until the first measurement lands.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` holding the opener, the closer and the measured content.
+ *
+ * @remarks
+ * - In controlled mode (`isOpened` defined), the open state is fully driven by
+ *   the parent and internal state is never updated.
+ * - `onOpenerClicked` and `onCloserClicked` fire in both modes — a controlled
+ *   parent needs them to know a click happened at all.
+ * - `onIsOpenedChanged` fires in both modes too, and never on mount.
  */
-export const Drawer = ({ openerContent, closerContent, initialIsOpened = false, isOpened: isOpenedProp, stateHandlers, className, children }) => {
-    // State & handlers
-    const [internalIsOpened, setInternalIsOpened] = useState(isOpenedProp ?? initialIsOpened);
+export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false, isOpened: isOpenedProp, onOpenerClicked, onCloserClicked, onIsOpenedChanged, className, children }) => {
+    // State
+    const [internalIsOpened, setInternalIsOpened] = useState(defaultIsOpened);
+    const [contentDimensions, setContentDimensions] = useState();
+    const isControlled = isOpenedProp !== undefined;
     const isOpened = isOpenedProp ?? internalIsOpened;
-    const pIsOpened = useRef(isOpened);
-    const [{ width, height }, setContentDimensions] = useState({});
-    // State change handlers
-    useEffect(() => {
-        if (pIsOpened.current === isOpened)
-            return;
-        pIsOpened.current = isOpened;
-        stateHandlers?.toggled?.(isOpened);
-    }, [isOpened]);
+    // State dispatch
+    useChangeDispatch(isOpened, onIsOpenedChanged);
     // User action handlers
     const handleOpenerClick = () => {
-        if (isOpenedProp !== undefined)
+        onOpenerClicked?.(isOpened);
+        if (isControlled)
             return;
         setInternalIsOpened(true);
     };
     const handleCloserClick = () => {
-        if (isOpenedProp !== undefined)
+        onCloserClicked?.(isOpened);
+        if (isControlled)
             return;
         setInternalIsOpened(false);
     };
-    const handleROCompResize = ({ entry }) => {
+    const handleContentResized = ({ entry }) => {
         const { width, height } = entry.contentRect;
         setContentDimensions({ width, height });
     };
@@ -61,24 +74,20 @@ export const Drawer = ({ openerContent, closerContent, initialIsOpened = false,
     const openerClss = c('opener');
     const closerClss = c('closer');
     const contentClss = c('content');
-    const dimensions = { width, height };
-    const customCssProps = Object
-        .entries(dimensions)
-        .reduce((acc, [key, val]) => {
-        if (val === undefined)
-            return acc;
-        return {
-            ...acc,
-            [`--${publicClassName}-content-${key}`]: `${val}`,
-            [`--${publicClassName}-content-${key}-px`]: `${val}px`
+    let dataAttributes = {};
+    let customCssProps = {};
+    if (contentDimensions !== undefined) {
+        const { width, height } = contentDimensions;
+        dataAttributes = {
+            'data-content-width': `${width}`,
+            'data-content-height': `${height}`
+        };
+        customCssProps = {
+            '--lm-drawer-content-width': `${width}px`,
+            '--lm-drawer-content-width-raw': `${width}`,
+            '--lm-drawer-content-height': `${height}px`,
+            '--lm-drawer-content-height-raw': `${height}`
         };
-    }, {});
-    const dataAttributes = Object
-        .entries(dimensions)
-        .reduce((acc, [key, val]) => {
-        if (val === undefined)
-            return acc;
-        return { ...acc, [`data-content-${key}`]: `${val}` };
-    }, {});
-    return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleROCompResize, children: children }) })] });
+    }
+    return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleContentResized, children: children }) })] });
 };

package/components/EventListener/index.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode, type FunctionComponent } from 'react';
+import { type PropsWithChildren, type FunctionComponent } from 'react';
+import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the EventListenerComponent.
  *
@@ -10,13 +11,11 @@ import { type ReactNode, type FunctionComponent } from 'react';
  * Receives the native DOM Event object.
  * @property children - React children rendered inside the root element.
  */
-export type Props = {
-    className?: string;
+export type Props = PropsWithChildren<WithClassName<{
     type?: string | string[];
     targetSelector?: string;
     onEvent?: (e: Event) => void;
-    children?: ReactNode;
-};
+}>>;
 /**
  * Component that attaches one or multiple DOM event listeners to its root element
  * or to matching descendants.

package/components/Gallery/index.d.ts

@@ -18,17 +18,19 @@ import type { WithClassName } from '../utils/types.js';
  * - A ReactNode used for all pages,
  * - A function receiving the page index and returning a ReactNode,
  * - Undefined, in which case the page index is displayed.
- * @property initActive - Optional. When uncontrolled mode, sets the default active slot at mount
+ * @property defaultActive - Optional. When uncontrolled mode, sets the default active slot at mount
  * @property active - Optional controlled index. When provided, the active slot is driven by this
  * value instead of internal scroll-derived state. When omitted, the component manages its own
  * active index based on scroll position.
  * @property noSnap - Optional, defines if scroll is free in side the scroller or not (defaults to false)
- * @property stateHandlers - Callbacks called after the state changed
- * @property stateHandlers.slotChanged - Called when the active slot changes due to scrolling. Receives the new active index.
- * @property actionHandlers - Callbacks called after a user interaction
- * @property actionHandlers.prevClick - Called when the "previous" control is clicked. Receives the current active index before navigation occurs.
- * @property actionHandlers.nextClick - Called when the "next" control is clicked. Receives the current active index before navigation occurs.
- * @property actionHandlers.paginationClick - Called when a pagination item is clicked. Receives the current active index and the target index.
+ * @property onPrevClicked - Called when the "previous" control is clicked,
+ * before the gallery reacts, with the active index as it was.
+ * @property onNextClicked - Called when the "next" control is clicked, before
+ * the gallery reacts, with the active index as it was.
+ * @property onPaginationClicked - Called when a pagination item is clicked,
+ * before the gallery reacts, with the active index as it was and the target index.
+ * @property onActiveSlotChanged - Called after the active slot changed, with
+ * the new index.
  * @property className - Optional additional class name(s) applied to the root element.
  * @property children - Elements rendered as gallery slots. Each child is wrapped in a slot container.
  */
@@ -39,17 +41,13 @@ export type Props = PropsWithChildren<WithClassName<{
     prevButtonContent?: ReactNode;
     nextButtonContent?: ReactNode;
     paginationContent?: ReactNode | ((page: number) => ReactNode);
-    initActive?: number;
+    defaultActive?: number;
     active?: number;
     noSnap?: boolean;
-    stateHandlers?: {
-        slotChanged?: (activePos: number) => void;
-    };
-    actionHandlers?: {
-        prevClick?: (activePos: number) => void;
-        nextClick?: (activePos: number) => void;
-        paginationClick?: (activePos: number, targetPos: number) => void;
-    };
+    onPrevClicked?: (activePos: number) => void;
+    onNextClicked?: (activePos: number) => void;
+    onPaginationClicked?: (activePos: number, targetPos: number) => void;
+    onActiveSlotChanged?: (activePos: number) => void;
 }>>;
 /**
  * Horizontally scrollable gallery component with navigation controls and pagination.

package/components/Gallery/index.js

@@ -1,10 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useEffect, useState, useRef } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { gallery as publicClassName } from '../public-classnames.js';
 import { forceActivateSlot } from './utils.js';
 import cssModule from './styles.module.css';
+/** Resolves one side's padding to a CSS length, falling back to the shorthand then to `0px`. */
+function resolvePadding(side, shorthand) {
+    const value = side ?? shorthand ?? 0;
+    return typeof value === 'number' ? `${value}px` : value;
+}
 /**
  * Horizontally scrollable gallery component with navigation controls and pagination.
  *
@@ -18,32 +23,34 @@ import cssModule from './styles.module.css';
  * - Previous/next navigation controls,
  * - Pagination controls allowing direct slot activation.
  */
-export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent, nextButtonContent, paginationContent, initActive, active, noSnap, stateHandlers, actionHandlers, children, className }) => {
+export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent, nextButtonContent, paginationContent, defaultActive, active, noSnap, onPrevClicked, onNextClicked, onPaginationClicked, onActiveSlotChanged, children, className }) => {
     // State & refs
     const scrollerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(0);
     const [canGoLeft, setCanGoLeft] = useState(false);
     const [canGoRight, setCanGoRight] = useState(false);
     const childrenCount = Children.count(children);
-    // State change handlers
-    useEffect(() => {
-        stateHandlers?.slotChanged?.(activeIndex);
-    }, [activeIndex]);
+    const isControlled = active !== undefined;
+    // State dispatch
+    useChangeDispatch(activeIndex, onActiveSlotChanged);
     // User actions handlers
     const handlePrevClick = () => {
-        actionHandlers?.prevClick?.(activeIndex);
-        if (active === undefined)
-            forceActivateSlot(scrollerRef.current, activeIndex - 1);
+        onPrevClicked?.(activeIndex);
+        if (isControlled)
+            return;
+        forceActivateSlot(scrollerRef.current, activeIndex - 1);
     };
     const handleNextClick = () => {
-        actionHandlers?.nextClick?.(activeIndex);
-        if (active === undefined)
-            forceActivateSlot(scrollerRef.current, activeIndex + 1);
+        onNextClicked?.(activeIndex);
+        if (isControlled)
+            return;
+        forceActivateSlot(scrollerRef.current, activeIndex + 1);
     };
     const handlePaginationClick = (pos) => {
-        actionHandlers?.paginationClick?.(activeIndex, pos);
-        if (active === undefined)
-            forceActivateSlot(scrollerRef.current, pos);
+        onPaginationClicked?.(activeIndex, pos);
+        if (isControlled)
+            return;
+        forceActivateSlot(scrollerRef.current, pos);
     };
     // Scroll position calculation
     useEffect(() => {
@@ -87,7 +94,7 @@ export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent,
     }, []);
     // Sync scroll position to 'active' prop at mount time
     useEffect(() => {
-        const toActivate = active ?? initActive;
+        const toActivate = active ?? defaultActive;
         if (toActivate === undefined)
             return;
         const id = setTimeout(() => forceActivateSlot(scrollerRef.current, toActivate, false), 50);
@@ -115,20 +122,8 @@ export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent,
     const nextBtnClss = c('next');
     const paginationClss = c('pagination');
     const dataAttributes = { 'data-active': `${activeIndex}` };
-    const actualPaddingLeft = typeof paddingLeft === 'number'
-        ? `${paddingLeft}px`
-        : typeof paddingLeft === 'string'
-            ? paddingLeft
-            : typeof padding === 'number'
-                ? `${padding}px`
-                : padding ?? '0px';
-    const actualPaddingRight = typeof paddingRight === 'number'
-        ? `${paddingRight}px`
-        : typeof paddingRight === 'string'
-            ? paddingRight
-            : typeof padding === 'number'
-                ? `${padding}px`
-                : padding ?? '0px';
+    const actualPaddingLeft = resolvePadding(paddingLeft, padding);
+    const actualPaddingRight = resolvePadding(paddingRight, padding);
     return _jsxs("div", { className: rootClss, ...dataAttributes, children: [_jsx("div", { className: scrollerClss, ref: scrollerRef, children: Children.map(children, (child, pos) => {
                     const slotClss = c('slot', { active: pos === activeIndex });
                     const style = {

package/components/Iframe/index.js

@@ -5,7 +5,7 @@ import { randomHash } from '../../agnostic/random/uuid/index.js';
 import { mergeClassNames } from '../utils/index.js';
 import { iframe as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
-const innerAutoHeightNitifier = (messageType) => `<script>
+const innerAutoHeightNotifier = (messageType) => `<script>
   (() => {
     const notify = () => {
       const height = Math.max(
@@ -71,7 +71,7 @@ export const Iframe = ({ autoHeight = false, className, srcDoc, style, ...iframe
     const rootClss = mergeClassNames(c(), className);
     const html = useMemo(() => {
         const autoHeightScript = autoHeight
-            ? innerAutoHeightNitifier(innerMessageType)
+            ? innerAutoHeightNotifier(innerMessageType)
             : '';
         return `<!doctype html>
       <html>

package/components/Image/index.d.ts

@@ -1,5 +1,4 @@
 import { type FunctionComponent, type ImgHTMLAttributes } from 'react';
-import { type Props as DisclaimerProps } from '../Disclaimer/index.js';
 import { type Props as TheatreProps } from '../Theatre/index.js';
 import type { WithClassName } from '../utils/types.js';
 /**
@@ -28,31 +27,25 @@ type SourceData = {
  * - a single srcSet string,
  * - an array of srcSet strings,
  * - an array of {@link SourceData} objects for full `<source>` control.
- * @property disclaimer - Props forwarded to the internal {@link Disclaimer} component.
- * While the disclaimer is active the `<img>` is hidden.
  * @property theatre - Props forwarded to the internal {@link Theatre} component.
  * @property className - Optional additional class name(s) applied to the root element.
  */
 export type Props = WithClassName<{
     sources?: string | string[] | SourceData[];
-    disclaimer?: DisclaimerProps;
     theatre?: TheatreProps;
 }> & ImgHTMLAttributes<HTMLImageElement>;
 /**
  * Image component. Wraps a native `<img>` (or `<picture>`) element with
- * optional responsive sources, an optional disclaimer gate, and
- * viewport-driven visibility tracking.
+ * optional responsive sources and an optional theatre mode.
  *
- *
- * ### Child elements
- * - `__picture` — wrapping `<picture>` element, always rendered. Contains the
+ * ### CSS elements
+ * - `picture` — wrapping `<picture>` element, always rendered. Contains the
  * `<source>` elements (if any) and the `<img>`.
- * - `__img` — the native `<img>` element.
+ * - `image` — the native `<img>` element.
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A `<figure>` element containing a `<picture>` with the image,
- * and an optional disclaimer overlay.
+ * @returns A `<figure>` element containing a `<picture>` with the image.
  */
 export declare const Image: FunctionComponent<Props>;
 export {};

package/components/Image/index.js

@@ -1,37 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { Disclaimer } from '../Disclaimer/index.js';
 import { Theatre } from '../Theatre/index.js';
 import { mergeClassNames } from '../utils/index.js';
 import { image as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
  * Image component. Wraps a native `<img>` (or `<picture>`) element with
- * optional responsive sources, an optional disclaimer gate, and
- * viewport-driven visibility tracking.
+ * optional responsive sources and an optional theatre mode.
  *
- *
- * ### Child elements
- * - `__picture` — wrapping `<picture>` element, always rendered. Contains the
+ * ### CSS elements
+ * - `picture` — wrapping `<picture>` element, always rendered. Contains the
  * `<source>` elements (if any) and the `<img>`.
- * - `__img` — the native `<img>` element.
+ * - `image` — the native `<img>` element.
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A `<figure>` element containing a `<picture>` with the image,
- * and an optional disclaimer overlay.
+ * @returns A `<figure>` element containing a `<picture>` with the image.
  */
-export const Image = ({ sources, disclaimer, theatre, className, ...intrinsicImgAttributes }) => {
+export const Image = ({ sources, theatre, className, ...intrinsicImgAttributes }) => {
     // State
-    const [isDisclaimerOn, setIsDisclaimerOn] = useState(disclaimer?.isOn === true
-        || disclaimer?.defaultIsOn === true
-        || (disclaimer !== undefined && disclaimer.defaultIsOn === undefined));
-    let shouldDisclaimerBeOn = isDisclaimerOn;
-    if (disclaimer?.isOn === true)
-        shouldDisclaimerBeOn = true;
-    if (disclaimer?.isOn === false)
-        shouldDisclaimerBeOn = false;
     const parsedSources = useMemo(() => {
         if (sources === undefined)
             return [];
@@ -48,23 +36,14 @@ export const Image = ({ sources, disclaimer, theatre, className, ...intrinsicImg
         }
         return [];
     }, [sources]);
-    // User actions handlers
-    const handleDisclaimerDismissClick = useCallback(() => {
-        disclaimer?.actionHandlers?.dismissClick?.(isDisclaimerOn);
-        setIsDisclaimerOn(false);
-    }, []);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(), className);
-    const rootAttributes = {};
     const pictureClss = c('picture');
     const imgClss = c('image');
-    const sensitiveContent = _jsxs("picture", { className: pictureClss, children: [parsedSources.map((source, index) => _jsx("source", { srcSet: typeof source === 'string' ? source : source.srcSet, type: typeof source === 'string' ? undefined : source.type, media: typeof source === 'string' ? undefined : source.media, sizes: typeof source === 'string' ? undefined : source.sizes }, index)), _jsx("img", { className: imgClss, ...intrinsicImgAttributes })] });
+    const pictureContent = _jsxs("picture", { className: pictureClss, children: [parsedSources.map((source, index) => _jsx("source", { srcSet: typeof source === 'string' ? source : source.srcSet, type: typeof source === 'string' ? undefined : source.type, media: typeof source === 'string' ? undefined : source.media, sizes: typeof source === 'string' ? undefined : source.sizes }, index)), _jsx("img", { className: imgClss, ...intrinsicImgAttributes })] });
     const theatricalContent = theatre !== undefined
-        ? _jsx(Theatre, { defaultIsOn: false, ...theatre, children: sensitiveContent })
-        : sensitiveContent;
-    const disclaimedContent = disclaimer !== undefined
-        ? _jsx(Disclaimer, { ...disclaimer, isOn: shouldDisclaimerBeOn, actionHandlers: { dismissClick: handleDisclaimerDismissClick }, children: theatricalContent })
-        : theatricalContent;
-    return _jsx("figure", { className: rootClss, ...rootAttributes, children: disclaimedContent });
+        ? _jsx(Theatre, { defaultIsOn: false, ...theatre, children: pictureContent })
+        : pictureContent;
+    return _jsx("figure", { className: rootClss, children: theatricalContent });
 };

package/components/Input/index.d.ts

@@ -1,20 +1,27 @@
-import { type FunctionComponent } from 'react';
-import { type Props as ControlledProps } from './index.controlled.js';
+import { type FunctionComponent, type InputHTMLAttributes, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Input} component.
  *
- * Alias of {@link ControlledProps}.
+ * Extends all native {@link InputHTMLAttributes} and {@link WithClassName}
+ * with optional label and error content.
  *
- * All native input attributes remain available, including `value`
- * and `onChange`, allowing the component to operate in either
- * controlled or hybrid mode.
+ * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
+ * @property error - Content rendered as an error message below the input. When omitted, no error is rendered.
+ * @property className - Additional class name(s) applied to the input element.
  */
-export type Props = ControlledProps;
+export type Props = InputHTMLAttributes<HTMLInputElement> & WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>;
 /**
- * Input field component supporting controlled and hybrid usage.
+ * Input field supporting controlled and uncontrolled usage.
  *
- * Wraps {@link ControlledInput} and automatically manages the input value
- * when no `value` prop is provided.
+ * Renders a native `<input>` with optional label and error feedback. All
+ * standard input attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
  *
  * ### CSS elements
  * - `label`
@@ -22,16 +29,13 @@ export type Props = ControlledProps;
  *
  * @param props - Component properties.
  * @see {@link Props}
- *
- * @returns A labelled input with optional internal value management.
+ * @returns A labelled input with optional error feedback.
  *
  * @remarks
- * - When `value` is defined, the component behaves as a controlled component:
- *   displayed value updates are entirely driven by the parent component.
- * - When `value` is omitted, the component behaves in hybrid mode:
- *   it initializes an internal state from the initial `value` prop and
- *   subsequently manages value updates itself.
- * - In hybrid mode, the internal value is updated before forwarding
- *   the `onChange` callback.
+ * - In controlled mode (`value` defined), the displayed value is fully driven
+ *   by the parent and internal state is never updated.
+ * - In uncontrolled mode, internal state is initialized from `defaultValue` and
+ *   updated before `onChange` is forwarded.
+ * - `onChange` fires in both modes.
  */
 export declare const Input: FunctionComponent<Props>;

package/components/Input/index.js

@@ -1,11 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ControlledInput } from './index.controlled.js';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { input as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
 /**
- * Input field component supporting controlled and hybrid usage.
+ * Input field supporting controlled and uncontrolled usage.
  *
- * Wraps {@link ControlledInput} and automatically manages the input value
- * when no `value` prop is provided.
+ * Renders a native `<input>` with optional label and error feedback. All
+ * standard input attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
  *
  * ### CSS elements
  * - `label`
@@ -13,27 +21,29 @@ import { ControlledInput } from './index.controlled.js';
  *
  * @param props - Component properties.
  * @see {@link Props}
- *
- * @returns A labelled input with optional internal value management.
+ * @returns A labelled input with optional error feedback.
  *
  * @remarks
- * - When `value` is defined, the component behaves as a controlled component:
- *   displayed value updates are entirely driven by the parent component.
- * - When `value` is omitted, the component behaves in hybrid mode:
- *   it initializes an internal state from the initial `value` prop and
- *   subsequently manages value updates itself.
- * - In hybrid mode, the internal value is updated before forwarding
- *   the `onChange` callback.
+ * - In controlled mode (`value` defined), the displayed value is fully driven
+ *   by the parent and internal state is never updated.
+ * - In uncontrolled mode, internal state is initialized from `defaultValue` and
+ *   updated before `onChange` is forwarded.
+ * - `onChange` fires in both modes.
  */
-export const Input = (props) => {
-    const { value, defaultValue, onChange, ...rest } = props;
+export const Input = ({ label, error, value, defaultValue, onChange, className, ...rest }) => {
+    // State
+    const [id] = useState(`_${randomHash(12)}`);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
     const isControlled = value !== undefined;
-    const [internal, setInternal] = useState(defaultValue ?? '');
-    const currentValue = isControlled ? value : internal;
+    const currentValue = isControlled ? value : internalValue;
+    // User action handlers
     const handleChange = (e) => {
         if (!isControlled)
-            setInternal(e.target.value);
+            setInternalValue(e.target.value);
         onChange?.(e);
     };
-    return _jsx(ControlledInput, { ...rest, value: currentValue, onChange: handleChange });
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("input", { ...rest, id: id, className: rootClss, value: currentValue, onChange: handleChange }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
 };