@adgytec/adgytec-web-ui-components 2.3.0 → 2.4.0

package/dist/components/Input/Switch/types.d.ts

@@ -1,9 +1,41 @@
 import { LucideIcon } from 'lucide-react';
-import { Switch } from 'react-aria-components';
-export interface SwitchProps extends React.ComponentPropsWithRef<typeof Switch> {
+import { SwitchField } from 'react-aria-components';
+/**
+ * Props for the [`Switch`](src/components/Input/Switch/Switch.tsx) component.
+ *
+ * Extends all properties from React Aria's `SwitchField`, including form submission (`name`, `value`),
+ * selection states (`isSelected`, `defaultSelected`, `onChange`), validation, and accessibility.
+ */
+export interface SwitchProps extends React.ComponentPropsWithRef<typeof SwitchField> {
+    /**
+     * Determines which icons to render within the switch handle.
+     *
+     * - `"none"`: No icons rendered.
+     * - `"selected"`: Icon rendered only when the switch is selected (default).
+     * - `"both"`: Render selected icon when on, and unselected icon when off.
+     *
+     * @default "selected"
+     */
     icon?: "none" | "selected" | "both";
+    /**
+     * Alignment of the label text relative to the switch track.
+     *
+     * - `"start"`: Label appears before (to the left of) the switch track.
+     * - `"end"`: Label appears after (to the right of) the switch track.
+     *
+     * @default "start"
+     */
     labelPlacement?: "start" | "end";
-    containerStateLayer?: boolean;
+    /**
+     * Custom icon rendered when the switch is unselected (used when `icon="both"`).
+     *
+     * @default X
+     */
     unselectedIcon?: LucideIcon;
+    /**
+     * Custom icon rendered when the switch is selected (used when `icon="selected"` or `"both"`).
+     *
+     * @default Check
+     */
     selectedIcon?: LucideIcon;
 }

package/dist/components/Input/TextArea/TextArea.d.ts

@@ -1,2 +1,21 @@
 import { TextAreaProps } from './types';
+/**
+ * A multiline text input component implementing Material Design 3 Text Area specifications.
+ *
+ * Supports accessible labels, helper descriptions, error messages, character counters,
+ * and customizable row heights.
+ *
+ * @example
+ * ```tsx
+ * import { TextArea } from '@adgytec/web-ui-components';
+ *
+ * <TextArea
+ *     label="Feedback"
+ *     placeholder="Describe your thoughts..."
+ *     rows={4}
+ *     maxLength={200}
+ *     showCharacterCount
+ * />
+ * ```
+ */
 export declare const TextArea: React.FC<TextAreaProps>;

package/dist/components/Input/TextArea/index.js

@@ -8,7 +8,7 @@ import { useControllableState as d } from "../hooks/index.js";
 import f from "clsx";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 import { TextArea as g, TextField as _ } from "react-aria-components";
-//#region src/components/Input/TextArea/TextArea.tsx
+// src/components/Input/TextArea/TextArea.tsx
 var v = ({ label: v, description: y, errorMessage: b, showDescriptionOnInvalid: x = !1, placeholder: S, showCharacterCount: C, rows: w, className: T, maxLength: E, value: D, defaultValue: O, onChange: k, ref: A, ...j }) => {
 	let { currentValue: M, setValue: N } = d({
 		value: D,
@@ -55,7 +55,6 @@ var v = ({ label: v, description: y, errorMessage: b, showDescriptionOnInvalid:
 		}
 	});
 };
-//#endregion
 export { v as TextArea };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Input/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/TextArea/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    TextArea as AriaTextArea,\n    TextField as AriaTextField,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { CharacterCount } from \"../CharacterCount\";\nimport {\n    Colors,\n    EditorInputStyles,\n    EditorStyles,\n    InputGroupStyles,\n    SupportingTextStyles,\n    UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { useControllableState } from \"../hooks\";\nimport { Label } from \"../Label\";\nimport type { TextAreaProps } from \"./types\";\n\nexport const TextArea: React.FC<TextAreaProps> = ({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    placeholder,\n    showCharacterCount: hasCharacterCount,\n    rows,\n    className,\n    maxLength,\n    value,\n    defaultValue,\n    onChange,\n    ref,\n    ...props\n}) => {\n    const { currentValue, setValue } = useControllableState({\n        value,\n        defaultValue,\n        onChange,\n    });\n\n    return (\n        <AriaTextField\n            className={(renderProps) =>\n                clsx(\n                    Colors,\n                    InputGroupStyles,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            maxLength={maxLength}\n            value={currentValue}\n            defaultValue={defaultValue}\n            onChange={setValue}\n            {...props}\n        >\n            {({ isInvalid }) => {\n                const hasDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <AriaTextArea\n                            ref={ref}\n                            rows={rows}\n                            placeholder={placeholder}\n                            className={clsx(\n                                UnsetStyles,\n                                EditorStyles,\n                                EditorInputStyles,\n                                typography.bodyLarge\n                            )}\n                            data-textarea={true}\n                        />\n\n                        {hasDescription && (\n                            <span className={clsx(SupportingTextStyles)}>\n                                <Description>{description}</Description>\n\n                                {hasCharacterCount && (\n                                    <CharacterCount\n                                        count={currentValue.length}\n                                        maxLength={maxLength}\n                                    />\n                                )}\n                            </span>\n                        )}\n\n                        {!hasDescription && hasCharacterCount && (\n                            <span className={clsx(SupportingTextStyles)}>\n                                <FieldError>{errorMessage}</FieldError>\n\n                                <CharacterCount\n                                    count={currentValue.length}\n                                    maxLength={maxLength}\n                                />\n                            </span>\n                        )}\n\n                        {/* Error placement */}\n                        {hasDescription || !hasCharacterCount ? (\n                            <FieldError className={clsx(SupportingTextStyles)}>\n                                {errorMessage}\n                            </FieldError>\n                        ) : null}\n                    </>\n                );\n            }}\n        </AriaTextField>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,KAAqC,EAC9C,UACA,gBACA,iBACA,8BAA2B,IAC3B,gBACA,oBAAoB,GACpB,SACA,cACA,cACA,UACA,iBACA,aACA,QACA,GAAG,QACD;CACF,IAAM,EAAE,iBAAc,gBAAa,EAAqB;EACpD;EACA;EACA;CACJ,CAAC;CAED,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,OAAO;EACO;EACd,UAAU;EACV,GAAI;aAEF,EAAE,mBAAgB;GAChB,IAAM,IACF,MACC,CAAC,KAAc,KAAa;GAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;IACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;IAE/B,kBAAC,GAAD;KACS;KACC;KACO;KACb,WAAW,EACP,GACA,GACA,GACA,EAAW,SACf;KACA,iBAAe;IAAK,CAAA;IAGvB,KACG,kBAAC,QAAD;KAAM,WAAW,EAAK,CAAoB;eAA1C,CACI,kBAAC,GAAD,EAAA,UAAc,EAAyB,CAAA,GAEtC,KACG,kBAAC,GAAD;MACI,OAAO,EAAa;MACT;KAAU,CAAA,CAG3B;;IAGT,CAAC,KAAkB,KAChB,kBAAC,QAAD;KAAM,WAAW,EAAK,CAAoB;eAA1C,CACI,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA,GAEtC,kBAAC,GAAD;MACI,OAAO,EAAa;MACT;KAAU,CAAA,CAEvB;;IAIT,KAAkB,CAAC,IAChB,kBAAC,GAAD;KAAY,WAAW,EAAK,CAAoB;eAC3C;IACO,CAAA,IACZ;GACR,EAAA,CAAA;EAER;CACW,CAAA;AAEvB"}
+{"version":3,"file":"index.js","names":["AriaTextField","clsx","_Fragment","Label","AriaTextArea","FieldError","typography","FieldError$1","Label$1","InputGroupStyles","UnsetStyles","SupportingTextStyles","Colors","EditorInputStyles","EditorStyles","clsx$1","TextArea$1","TextArea","hasCharacterCount","props","useControllableState","TextField","className","renderProps","currentValue","setValue","hasDescription","description","isInvalid","showDescriptionOnInvalid","Fragment","label","Description","CharacterCount","errorMessage"],"sources":["../../../../src/components/Input/TextArea/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    TextArea as AriaTextArea,\n    TextField as AriaTextField,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { CharacterCount } from \"../CharacterCount\";\nimport {\n    Colors,\n    EditorInputStyles,\n    EditorStyles,\n    InputGroupStyles,\n    SupportingTextStyles,\n    UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { useControllableState } from \"../hooks\";\nimport { Label } from \"../Label\";\nimport type { TextAreaProps } from \"./types\";\n\n/**\n * A multiline text input component implementing Material Design 3 Text Area specifications.\n *\n * Supports accessible labels, helper descriptions, error messages, character counters,\n * and customizable row heights.\n *\n * @example\n * ```tsx\n * import { TextArea } from '@adgytec/web-ui-components';\n *\n * <TextArea\n *     label=\"Feedback\"\n *     placeholder=\"Describe your thoughts...\"\n *     rows={4}\n *     maxLength={200}\n *     showCharacterCount\n * />\n * ```\n */\nexport const TextArea: React.FC<TextAreaProps> = ({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    placeholder,\n    showCharacterCount: hasCharacterCount,\n    rows,\n    className,\n    maxLength,\n    value,\n    defaultValue,\n    onChange,\n    ref,\n    ...props\n}) => {\n    const { currentValue, setValue } = useControllableState({\n        value,\n        defaultValue,\n        onChange,\n    });\n\n    return (\n        <AriaTextField\n            className={(renderProps) =>\n                clsx(\n                    Colors,\n                    InputGroupStyles,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            maxLength={maxLength}\n            value={currentValue}\n            defaultValue={defaultValue}\n            onChange={setValue}\n            {...props}\n        >\n            {({ isInvalid }) => {\n                const hasDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <AriaTextArea\n                            ref={ref}\n                            rows={rows}\n                            placeholder={placeholder}\n                            className={clsx(\n                                UnsetStyles,\n                                EditorStyles,\n                                EditorInputStyles,\n                                typography.bodyLarge\n                            )}\n                            data-textarea={true}\n                        />\n\n                        {hasDescription && (\n                            <span className={clsx(SupportingTextStyles)}>\n                                <Description>{description}</Description>\n\n                                {hasCharacterCount && (\n                                    <CharacterCount\n                                        count={currentValue.length}\n                                        maxLength={maxLength}\n                                    />\n                                )}\n                            </span>\n                        )}\n\n                        {!hasDescription && hasCharacterCount && (\n                            <span className={clsx(SupportingTextStyles)}>\n                                <FieldError>{errorMessage}</FieldError>\n\n                                <CharacterCount\n                                    count={currentValue.length}\n                                    maxLength={maxLength}\n                                />\n                            </span>\n                        )}\n\n                        {/* Error placement */}\n                        {hasDescription || !hasCharacterCount ? (\n                            <FieldError className={clsx(SupportingTextStyles)}>\n                                {errorMessage}\n                            </FieldError>\n                        ) : null}\n                    </>\n                );\n            }}\n        </AriaTextField>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAwCA,IAAaiB,KAAqC,EAC9C,UACA,gBACA,iBACA,8BAA2B,IAC3B,gBACA,oBAAoBC,GACpB,SACA,cACA,cACA,UACA,iBACA,aACA,QACA,GAAGC,QACD;CACF,IAAM,EAAE,iBAAc,gBAAaC,EAAqB;EACpD;EACA;EACA;CACJ,CAAC;CAED,OACI,kBAACpB,GAAD;EACI,YAAY,MACRC,EACIW,GACAH,GACA,OAAOa,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEO;EACX,OAAOE;EACO;EACd,UAAUC;EACV,GAAIN;EAEF,WAAA,EAAE,mBAAgB;GAChB,IAAMO,IACFC,MACC,CAACC,KAAcA,KAAaC;GAEjC,OACI,kBAAA3B,GAAA,EAAA,UAAA;IACK6B,KAAS,kBAAC5B,GAAD,EAAA,UAAQ4B,EAAa,CAAA;IAE/B,kBAAC3B,GAAD;KACS;KACC;KACO;KACb,WAAWH,EACPS,GACAI,GACAD,GACAP,EAAW,SACf;KACA,iBAAe;IAAK,CAAA;IAGvBoB,KACG,kBAAC,QAAD;KAAM,WAAWzB,EAAKU,CAAoB;KAA1C,UAAA,CACI,kBAACqB,GAAD,EAAA,UAAcL,EAAyB,CAAA,GAEtCT,KACG,kBAACe,GAAD;MACI,OAAOT,EAAa;MACT;KAAU,CAAA,CAG3B;;IAGT,CAACE,KAAkBR,KAChB,kBAAC,QAAD;KAAM,WAAWjB,EAAKU,CAAoB;KAA1C,UAAA,CACI,kBAACN,GAAD,EAAA,UAAa6B,EAAyB,CAAA,GAEtC,kBAACD,GAAD;MACI,OAAOT,EAAa;MACT;KAAU,CAAA,CAEvB;;IAITE,KAAkB,CAACR,IAChB,kBAACb,GAAD;KAAY,WAAWJ,EAAKU,CAAoB;KAC3C,UAAAuB;IACO,CAAA,IACZ;GACR,EAAA,CAAA;EAER;CACW,CAAA;AAEvB"}

package/dist/components/Input/TextArea/types.d.ts

@@ -1,8 +1,19 @@
 import { TextFieldProps as AriaTextFieldProps, TextArea } from 'react-aria-components';
 import { RefProp } from '../../../utils';
 import { CoreInputProps } from '../core';
+/**
+ * Props for the {@link TextArea} component.
+ * Extends React Aria's {@link AriaTextFieldProps}, {@link CoreInputProps}, and native textarea element ref.
+ */
 export interface TextAreaProps extends Omit<AriaTextFieldProps, "children" | "type">, CoreInputProps, RefProp<typeof TextArea> {
+    /** Placeholder text displayed when the multiline textarea is empty. */
     placeholder?: string;
+    /**
+     * Whether to display the character count below the textarea.
+     *
+     * @default false
+     */
     showCharacterCount?: boolean;
+    /** Number of visible text lines in the textarea. */
     rows?: number;
 }

package/dist/components/Input/TimeField/TimeField.d.ts

@@ -1,3 +1,19 @@
 import { TimeValue } from 'react-aria-components';
 import { TimeFieldProps } from './types';
-export declare const TimeField: <T extends TimeValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, ...props }: TimeFieldProps<T>) => import("react").JSX.Element;
+/**
+ * An accessible segmented time input field allowing users to enter time values by editing hour, minute, and AM/PM segments.
+ *
+ * Automatically formats time per locale and handles keyboard arrow adjustments,
+ * helper descriptions, and validation errors.
+ *
+ * @example
+ * ```tsx
+ * import { TimeField } from '@adgytec/web-ui-components';
+ *
+ * <TimeField
+ *     label="Meeting Time"
+ *     description="Select an hour and minute."
+ * />
+ * ```
+ */
+export declare const TimeField: <T extends TimeValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, ...props }: TimeFieldProps<T>) => import('react').JSX.Element;

package/dist/components/Input/TimeField/index.js

@@ -6,7 +6,7 @@ import { c as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d } from "
 import f from "clsx";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 import { DateInput as g, DateSegment as _, TimeField as v } from "react-aria-components";
-//#region src/components/Input/TimeField/TimeField.tsx
+// src/components/Input/TimeField/TimeField.tsx
 var y = ({ label: y, description: b, errorMessage: x, showDescriptionOnInvalid: S = !1, className: C, ref: w, ...T }) => /* @__PURE__ */ m(v, {
 	className: (e) => f(c, i, typeof C == "function" ? C(e) : C),
 	...T,
@@ -34,7 +34,6 @@ var y = ({ label: y, description: b, errorMessage: x, showDescriptionOnInvalid:
 		] });
 	}
 });
-//#endregion
 export { y as TimeField };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Input/TimeField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/TimeField/TimeField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    TimeField as AriaTimeField,\n    DateInput,\n    DateSegment,\n    type TimeValue,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport {\n    Colors,\n    DateInputStyles,\n    DateSegmentStyles,\n    EditorInputStyles,\n    EditorStyles,\n    InputGroupStyles,\n    SupportingTextStyles,\n    UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport type { TimeFieldProps } from \"./types\";\n\nexport const TimeField = <T extends TimeValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    ...props\n}: TimeFieldProps<T>) => {\n    return (\n        <AriaTimeField\n            className={(renderProps) =>\n                clsx(\n                    Colors,\n                    InputGroupStyles,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        >\n            {({ isInvalid }) => {\n                const showDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <DateInput\n                            ref={ref}\n                            className={clsx(\n                                UnsetStyles,\n                                EditorStyles,\n                                EditorInputStyles,\n                                typography.bodyLarge,\n                                DateInputStyles\n                            )}\n                            data-date-input={true}\n                        >\n                            {(segment) => {\n                                return (\n                                    <DateSegment\n                                        className={clsx(\n                                            DateSegmentStyles,\n                                            typography.bodyLarge\n                                        )}\n                                        segment={segment}\n                                    />\n                                );\n                            }}\n                        </DateInput>\n\n                        {showDescription && (\n                            <Description className={clsx(SupportingTextStyles)}>\n                                {description}\n                            </Description>\n                        )}\n                        <FieldError className={clsx(SupportingTextStyles)}>\n                            {errorMessage}\n                        </FieldError>\n                    </>\n                );\n            }}\n        </AriaTimeField>\n    );\n};\n"],"mappings":";;;;;;;;;AAuBA,IAAa,KAAkC,EAC3C,UACA,gBACA,iBACA,8BAA2B,IAC3B,cACA,QACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,mBAAgB;EAChB,IAAM,IACF,MACC,CAAC,KAAc,KAAa;EAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;GAE/B,kBAAC,GAAD;IACS;IACL,WAAW,EACP,GACA,GACA,GACA,EAAW,WACX,CACJ;IACA,mBAAiB;eAEf,MAEM,kBAAC,GAAD;KACI,WAAW,EACP,GACA,EAAW,SACf;KACS;IAAQ,CAAA;GAItB,CAAA;GAEV,KACG,kBAAC,GAAD;IAAa,WAAW,EAAK,CAAoB;cAC5C;GACQ,CAAA;GAEjB,kBAAC,GAAD;IAAY,WAAW,EAAK,CAAoB;cAC3C;GACO,CAAA;EAChB,EAAA,CAAA;CAER;AACW,CAAA"}
+{"version":3,"file":"index.js","names":["AriaTimeField","clsx","_Fragment","Label","FieldError","typography","FieldError$1","Label$1","InputGroupStyles","UnsetStyles","DateSegmentStyles","SupportingTextStyles","Colors","EditorInputStyles","DateInputStyles","EditorStyles","clsx$1","TimeField$1","TimeField","props","className","renderProps","showDescription","description","isInvalid","showDescriptionOnInvalid","Fragment","label","DateInput","DateSegment","Description","errorMessage"],"sources":["../../../../src/components/Input/TimeField/TimeField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    TimeField as AriaTimeField,\n    DateInput,\n    DateSegment,\n    type TimeValue,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport {\n    Colors,\n    DateInputStyles,\n    DateSegmentStyles,\n    EditorInputStyles,\n    EditorStyles,\n    InputGroupStyles,\n    SupportingTextStyles,\n    UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { Label } from \"../Label\";\nimport type { TimeFieldProps } from \"./types\";\n\n/**\n * An accessible segmented time input field allowing users to enter time values by editing hour, minute, and AM/PM segments.\n *\n * Automatically formats time per locale and handles keyboard arrow adjustments,\n * helper descriptions, and validation errors.\n *\n * @example\n * ```tsx\n * import { TimeField } from '@adgytec/web-ui-components';\n *\n * <TimeField\n *     label=\"Meeting Time\"\n *     description=\"Select an hour and minute.\"\n * />\n * ```\n */\nexport const TimeField = <T extends TimeValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    ...props\n}: TimeFieldProps<T>) => {\n    return (\n        <AriaTimeField\n            className={(renderProps) =>\n                clsx(\n                    Colors,\n                    InputGroupStyles,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n        >\n            {({ isInvalid }) => {\n                const showDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <DateInput\n                            ref={ref}\n                            className={clsx(\n                                UnsetStyles,\n                                EditorStyles,\n                                EditorInputStyles,\n                                typography.bodyLarge,\n                                DateInputStyles\n                            )}\n                            data-date-input={true}\n                        >\n                            {(segment) => {\n                                return (\n                                    <DateSegment\n                                        className={clsx(\n                                            DateSegmentStyles,\n                                            typography.bodyLarge\n                                        )}\n                                        segment={segment}\n                                    />\n                                );\n                            }}\n                        </DateInput>\n\n                        {showDescription && (\n                            <Description className={clsx(SupportingTextStyles)}>\n                                {description}\n                            </Description>\n                        )}\n                        <FieldError className={clsx(SupportingTextStyles)}>\n                            {errorMessage}\n                        </FieldError>\n                    </>\n                );\n            }}\n        </AriaTimeField>\n    );\n};\n"],"mappings":";;;;;;;;;AAuCA,IAAakB,KAAkC,EAC3C,UACA,gBACA,iBACA,8BAA2B,IAC3B,cACA,QACA,GAAGC,QAGC,kBAACnB,GAAD;CACI,YAAY,MACRC,EACIW,GACAJ,GACA,OAAOY,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAID;CAEF,WAAA,EAAE,mBAAgB;EAChB,IAAMG,IACFC,MACC,CAACC,KAAcA,KAAaC;EAEjC,OACI,kBAAAvB,GAAA,EAAA,UAAA;GACKyB,KAAS,kBAACxB,GAAD,EAAA,UAAQwB,EAAa,CAAA;GAE/B,kBAACC,GAAD;IACS;IACL,WAAW3B,EACPQ,GACAM,GACAF,GACAR,EAAW,WACXS,CACJ;IACA,mBAAiB;IAEf,WAAA,MAEM,kBAACe,GAAD;KACI,WAAW5B,EACPS,GACAL,EAAW,SACf;KACS;IAAQ,CAAA;GAItB,CAAA;GAEViB,KACG,kBAACQ,GAAD;IAAa,WAAW7B,EAAKU,CAAoB;IAC5C,UAAAY;GACQ,CAAA;GAEjB,kBAACnB,GAAD;IAAY,WAAWH,EAAKU,CAAoB;IAC3C,UAAAoB;GACO,CAAA;EAChB,EAAA,CAAA;CAER;AACW,CAAA"}

package/dist/components/Input/TimeField/types.d.ts

@@ -1,5 +1,9 @@
 import { TimeFieldProps as AriaTimeFieldProps, DateInput, TimeValue } from 'react-aria-components';
 import { RefProp } from '../../../utils';
 import { CoreInputProps } from '../core';
+/**
+ * Props for the {@link TimeField} component.
+ * Extends React Aria's {@link AriaTimeFieldProps}, {@link CoreInputProps}, and native time input ref.
+ */
 export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, "children">, CoreInputProps, RefProp<typeof DateInput> {
 }

package/dist/components/Input/core/index.js

@@ -1,2 +1 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../../chunks/core4";
-export { l as CharacterCountStyles, a as Colors, s as DateInputStyles, r as DateSegmentStyles, e as EditorInputGroupStyles, o as EditorInputStyles, c as EditorStyles, t as InputGroupStyles, i as SupportingTextStyles, u as TextFieldIconSize, n as UnsetStyles };
+export { t as CharacterCountStyles, n as Colors, r as DateInputStyles, i as DateSegmentStyles, a as EditorInputGroupStyles, o as EditorInputStyles, s as EditorStyles, c as InputGroupStyles, l as SupportingTextStyles, u as TextFieldIconSize, d as UnsetStyles } from "../../../chunks/core4";

package/dist/components/Input/core/input.d.ts

@@ -1,8 +1,23 @@
 import { ReactNode } from 'react';
 import { ValidationResult } from 'react-aria-components';
+/**
+ * Shared input wrapper props providing accessible labeling, descriptions, and error feedback.
+ */
 export interface CoreInputProps {
+    /** The accessible label displayed above or alongside the input control. */
     label?: ReactNode;
+    /** Informative supporting text displayed below the input. */
     description?: ReactNode;
+    /**
+     * Error message content displayed when the input fails validation.
+     * Can be static content or a render function receiving the current {@link ValidationResult}.
+     */
     errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);
+    /**
+     * Whether to continue displaying the {@link description} supporting text even when
+     * the input is invalid and rendering an error message.
+     *
+     * @default false
+     */
     showDescriptionOnInvalid?: boolean;
 }

package/dist/components/Input/core/textField.d.ts

@@ -1,11 +1,24 @@
+/**
+ * Standard icon size (in pixels) for leading and trailing icons in text fields.
+ */
 export declare const TextFieldIconSize = 24;
+/** CSS class resetting browser-default text field container styles. */
 export declare const UnsetStyles: string;
+/** CSS class providing color tokens for text fields. */
 export declare const Colors: string;
+/** CSS class for the composite input group container. */
 export declare const InputGroupStyles: string;
+/** CSS class for the editable input container. */
 export declare const EditorStyles: string;
+/** CSS class for the input element wrapper group. */
 export declare const EditorInputGroupStyles: string;
+/** CSS class for native `<input>` and `<textarea>` elements. */
 export declare const EditorInputStyles: string;
+/** CSS class for supporting text below text fields. */
 export declare const SupportingTextStyles: string;
+/** CSS class for the character count display. */
 export declare const CharacterCountStyles: string;
+/** CSS class for date field composite inputs. */
 export declare const DateInputStyles: string;
+/** CSS class for individual date segments within a date field. */
 export declare const DateSegmentStyles: string;

package/dist/components/Input/hooks/index.js

@@ -1,6 +1,6 @@
 import { t as e } from "../../../chunks/compiler-runtime";
 import { useState as t } from "react";
-//#region src/components/Input/hooks/useControllableState.ts
+// src/components/Input/hooks/useControllableState.ts
 var n = e();
 function r(e) {
 	let r = (0, n.c)(8), { value: i, defaultValue: a, onChange: o } = e, s = i !== void 0, c;
@@ -15,7 +15,6 @@ function r(e) {
 		setValue: p
 	}, r[5] = d, r[6] = p, r[7] = m) : m = r[7], m;
 }
-//#endregion
 export { r as useControllableState };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Input/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/hooks/useControllableState.ts"],"sourcesContent":["import { useState } from \"react\";\n\nexport function useControllableState({\n    value,\n    defaultValue,\n    onChange,\n}: {\n    value?: string;\n    defaultValue?: string;\n    onChange?: (value: string) => void;\n}) {\n    const isControlled = value !== undefined;\n\n    const [internalValue, setInternalValue] = useState(\n        () => defaultValue ?? \"\"\n    );\n\n    const currentValue = isControlled ? value : internalValue;\n\n    const setValue = (val: string) => {\n        onChange?.(val);\n\n        if (!isControlled) {\n            setInternalValue(val);\n        }\n    };\n\n    return {\n        currentValue,\n        setValue,\n    };\n}\n"],"mappings":";;;;AAEA,SAAO,EAAA,GAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAA8B,EAAA,UAAA,iBAAA,gBAAA,GASjC,IAAqB,MAAU,KAAA,GAAU;CAAA,AAAA,EAAA,OAAA,IAGb,IAAA,EAAA,MAAxB,UAAM,KAAA,IAAkB,EAAA,KAAA,GAAA,EAAA,KAAA;CAD5B,IAAA,CAAA,GAAA,KAA0C,EACtC,CACJ,GAEA,IAAqB,IAAA,IAAA,GAAqC;CAAA,AAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAEzC,KAAA,MAAA;EAGb,AAFA,IAAW,CAAG,GAET,KACD,EAAiB,CAAG;CACvB,GACJ,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA;CAND,IAAA,IAAiB,GAMf;CAKD,OALC,EAAA,OAAA,KAAA,EAAA,OAAA,KAEK,IAAA;EAAA;EAAA;CAGP,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAHM;AAGN"}
+{"version":3,"file":"index.js","names":["_c","require_compiler_runtime","import_compiler_runtime","useControllableState","$","t0","isControlled","value","t1","defaultValue","internalValue","setInternalValue","useState","currentValue","t2","onChange","val","setValue","t3"],"sources":["../../../../src/components/Input/hooks/useControllableState.ts"],"sourcesContent":["import { useState } from \"react\";\n\n/**\n * Options for the {@link useControllableState} hook.\n */\nexport interface UseControllableStateProps {\n    /** Controlled value from props. */\n    value?: string;\n    /** Uncontrolled default value fallback. */\n    defaultValue?: string;\n    /** Change callback invoked when value updates. */\n    onChange?: (value: string) => void;\n}\n\n/**\n * Custom hook to manage state that can operate in either controlled or uncontrolled mode.\n *\n * If `value` is passed, the hook operates in controlled mode; otherwise, it manages internal state.\n *\n * @param options - Controlled state options including `value`, `defaultValue`, and `onChange`.\n * @returns An object containing `currentValue` and `setValue`.\n */\nexport function useControllableState({\n    value,\n    defaultValue,\n    onChange,\n}: UseControllableStateProps) {\n    const isControlled = value !== undefined;\n\n    const [internalValue, setInternalValue] = useState(\n        () => defaultValue ?? \"\"\n    );\n\n    const currentValue = isControlled ? value : internalValue;\n\n    const setValue = (val: string) => {\n        onChange?.(val);\n\n        if (!isControlled) {\n            setInternalValue(val);\n        }\n    };\n\n    return {\n        currentValue,\n        setValue,\n    };\n}\n"],"mappings":";;;;AAsBA,SAAOG,EAAA,GAAA;CAAA,IAAAC,KAAA,GAAAJ,EAAAA,EAAAA,CAAA,CAAA,GAA8B,EAAA,UAAA,iBAAA,gBAAAK,GAKjCC,IAAqBC,MAAU,KAAA,GAAUC;CAAA,AAAAJ,EAAA,OAAAK,IAGb,IAAAL,EAAA,MAAxB,UAAMK,KAAA,IAAkB,EAAA,KAAAA,GAAA,EAAA,KAAAD;CAD5B,IAAA,CAAAE,GAAAC,KAA0CC,EACtCJ,CACJ,GAEAK,IAAqBP,IAAAC,IAAAG,GAAqCI;CAAA,AAAAV,EAAA,OAAAE,KAAAF,EAAA,OAAAW,KAEzC,KAAA,MAAA;EAGb,AAFAA,IAAWC,CAAG,GAETV,KACDK,EAAiBK,CAAG;CACvB,GACJ,EAAA,KAAAV,GAAA,EAAA,KAAAS,GAAA,EAAA,KAAAD,KAAA,IAAAV,EAAA;CAND,IAAAa,IAAiBH,GAMfI;CAKD,OALCd,EAAA,OAAAS,KAAAT,EAAA,OAAAa,KAEK,IAAA;EAAA;EAAA;CAGP,GAAC,EAAA,KAAAJ,GAAA,EAAA,KAAAI,GAAA,EAAA,KAAAC,KAAA,IAAAd,EAAA,IAHMc;AAGN"}

package/dist/components/Input/hooks/useControllableState.d.ts

@@ -1,8 +1,23 @@
-export declare function useControllableState({ value, defaultValue, onChange, }: {
+/**
+ * Options for the {@link useControllableState} hook.
+ */
+export interface UseControllableStateProps {
+    /** Controlled value from props. */
     value?: string;
+    /** Uncontrolled default value fallback. */
     defaultValue?: string;
+    /** Change callback invoked when value updates. */
     onChange?: (value: string) => void;
-}): {
+}
+/**
+ * Custom hook to manage state that can operate in either controlled or uncontrolled mode.
+ *
+ * If `value` is passed, the hook operates in controlled mode; otherwise, it manages internal state.
+ *
+ * @param options - Controlled state options including `value`, `defaultValue`, and `onChange`.
+ * @returns An object containing `currentValue` and `setValue`.
+ */
+export declare function useControllableState({ value, defaultValue, onChange, }: UseControllableStateProps): {
     currentValue: string;
     setValue: (val: string) => void;
 };

package/dist/components/List/ListAction/ListAction.d.ts

@@ -1,2 +1,24 @@
 import { IconButtonProps } from '../../Button';
-export declare const ListAction: React.FC<Omit<IconButtonProps, "size">>;
+/**
+ * Props for the [`ListAction`](src/components/List/ListAction/ListAction.tsx) component.
+ */
+export interface ListActionProps extends Omit<IconButtonProps, "size"> {
+}
+/**
+ * Pre-configured trailing action icon button for a [`ListItem`](src/components/List/ListItem/ListItem.tsx).
+ *
+ * Hardcodes `size="small"` while ensuring a full 48px touch target area for accessibility,
+ * defaulting to the `"standard"` icon button color style.
+ *
+ * @example
+ * ```tsx
+ * import { MoreVertical } from "lucide-react";
+ *
+ * <ListAction
+ *     icon={MoreVertical}
+ *     aria-label="More options"
+ *     onPress={() => handleOpenMenu()}
+ * />
+ * ```
+ */
+export declare const ListAction: React.FC<ListActionProps>;

package/dist/components/List/ListAction/index.d.ts

@@ -1 +1 @@
-export {};
+export * from './ListAction';

package/dist/components/List/ListAction/index.js

@@ -0,0 +1 @@
+export { t as ListAction } from "../../../chunks/ListAction";

package/dist/components/List/ListAvatar/ListAvatar.d.ts

@@ -1 +1,23 @@
-export declare const ListAvatar: React.FC<React.ComponentPropsWithRef<"div">>;
+/**
+ * Props for the [`ListAvatar`](src/components/List/ListAvatar/ListAvatar.tsx) component.
+ */
+export interface ListAvatarProps extends React.ComponentPropsWithRef<"div"> {
+}
+/**
+ * Circular 40px avatar container for user initials or profile images inside a [`ListItem`](src/components/List/ListItem/ListItem.tsx).
+ *
+ * Automatically styles text content with Material Design 3 `titleMedium` typography,
+ * and scales nested `<img>` elements with `object-fit: cover`.
+ *
+ * @example
+ * ```tsx
+ * // Initials avatar
+ * <ListAvatar>JD</ListAvatar>
+ *
+ * // Image avatar
+ * <ListAvatar>
+ *     <img src="/avatars/user.jpg" alt="Jane Doe" />
+ * </ListAvatar>
+ * ```
+ */
+export declare const ListAvatar: React.FC<ListAvatarProps>;

package/dist/components/List/ListAvatar/index.js

@@ -1,2 +1 @@
-import { t as e } from "../../../chunks/ListAvatar";
-export { e as ListAvatar };
+export { t as ListAvatar } from "../../../chunks/ListAvatar";

package/dist/components/List/ListBox/ListBox.d.ts

@@ -1,2 +1,29 @@
 import { ListBoxProps } from './types';
-export declare const ListBox: <T extends object>({ alignY, className, ...props }: ListBoxProps<T>) => import("react").JSX.Element;
+/**
+ * Material Design 3 List container component.
+ *
+ * Coordinates vertical indexing of items, keyboard navigation, single/multiple selection,
+ * unified vertical alignment of elements (`alignY`), and contextual selection indicator placement (`selectionIndicator`).
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     ListBox,
+ *     ListItem,
+ *     ListIcon,
+ *     ListLabelText,
+ *     ListSupportingText,
+ * } from "@adgytec/web-ui-components";
+ * import { Mail } from "lucide-react";
+ *
+ * <ListBox selectionMode="single" selectionIndicator="leading">
+ *     <ListItem
+ *         id="inbox"
+ *         leading={<ListIcon icon={Mail} />}
+ *         label={<ListLabelText>Inbox</ListLabelText>}
+ *         supporting={<ListSupportingText>2 unread messages</ListSupportingText>}
+ *     />
+ * </ListBox>
+ * ```
+ */
+export declare const ListBox: <T extends object>({ alignY, className, selectionIndicator, ...props }: ListBoxProps<T>) => import('react').JSX.Element;

package/dist/components/List/ListBox/index.js

@@ -1,2 +1 @@
-import { t as e } from "../../../chunks/ListBox";
-export { e as ListBox };
+export { t as ListBox } from "../../../chunks/ListBox";

package/dist/components/List/ListBox/types.d.ts

@@ -1,5 +1,32 @@
 import { ListBox } from 'react-aria-components';
+import { SelectionIndicator } from '../core';
+/**
+ * Vertical alignment options for elements (leading media, text content, and trailing actions)
+ * across list items in a [`ListBox`](src/components/List/ListBox/ListBox.tsx).
+ */
 export type ListAlignY = "start" | "center" | "end";
+/**
+ * Props for the [`ListBox`](src/components/List/ListBox/ListBox.tsx) container component.
+ *
+ * Extends all properties from React Aria's `ListBox`, including selection modes, keyboard navigation,
+ * and collection props.
+ */
 export interface ListBoxProps<T extends object> extends React.ComponentPropsWithRef<typeof ListBox<T>> {
+    /**
+     * Vertical alignment of leading, text, and trailing elements across list items.
+     *
+     * @default "center"
+     */
     alignY?: ListAlignY;
+    /**
+     * Placement of the checkmark indicator when a list item is selected.
+     * Can be overridden per individual [`ListItem`](src/components/List/ListItem/ListItem.tsx).
+     *
+     * - `"leading"`: Replaces the leading element with a check icon when selected.
+     * - `"trailing"`: Replaces the trailing element with a check icon when selected.
+     * - `"none"`: Disables automatic checkmark icon replacement (default).
+     *
+     * @default "none"
+     */
+    selectionIndicator?: SelectionIndicator;
 }

package/dist/components/List/ListIcon/ListIcon.d.ts

@@ -1,2 +1,20 @@
 import { Icon } from '../../Icon';
-export declare const ListIcon: React.FC<Omit<React.ComponentPropsWithRef<typeof Icon>, "size" | "withText">>;
+/**
+ * Props for the [`ListIcon`](src/components/List/ListIcon/ListIcon.tsx) component.
+ */
+export interface ListIconProps extends Omit<React.ComponentPropsWithRef<typeof Icon>, "size" | "withText"> {
+}
+/**
+ * Standardized leading icon component for a [`ListItem`](src/components/List/ListItem/ListItem.tsx).
+ *
+ * Hardcodes a standard 20px dimension while dynamically inheriting the list item's
+ * text and interaction state colors.
+ *
+ * @example
+ * ```tsx
+ * import { Mail } from "lucide-react";
+ *
+ * <ListIcon icon={Mail} />
+ * ```
+ */
+export declare const ListIcon: React.FC<ListIconProps>;

package/dist/components/List/ListIcon/index.js

@@ -1,2 +1 @@
-import { t as e } from "../../../chunks/ListIcon";
-export { e as ListIcon };
+export { t as ListIcon } from "../../../chunks/ListIcon";

package/dist/components/List/ListItem/ListItem.d.ts

@@ -1,2 +1,37 @@
 import { ListItemProps } from './types';
+/**
+ * Material Design 3 interactive list item component.
+ *
+ * Supports structured slot composition (`leading`, `overline`, `label`, `supporting`, `trailing`),
+ * dynamic corner radius morphing on hover/focus/selection, touch ripple splash feedback,
+ * contextual checkmark replacement on selection (`selectionIndicator`),
+ * and automatic synchronization with nested selection controls (`Checkbox` with `slot="selection"`).
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     ListItem,
+ *     ListIcon,
+ *     ListLabelText,
+ *     ListSupportingText,
+ *     ListAction,
+ * } from "@adgytec/web-ui-components";
+ * import { Star, Trash2 } from "lucide-react";
+ *
+ * <ListItem
+ *     id="starred-email"
+ *     leading={<ListIcon icon={Star} />}
+ *     label={<ListLabelText>Project Roadmap</ListLabelText>}
+ *     supporting={<ListSupportingText>Updated yesterday by Alex</ListSupportingText>}
+ *     trailing={[
+ *         <ListAction
+ *             key="delete"
+ *             icon={Trash2}
+ *             aria-label="Delete item"
+ *             onPress={() => handleDelete()}
+ *         />,
+ *     ]}
+ * />
+ * ```
+ */
 export declare const ListItem: React.FC<ListItemProps>;

package/dist/components/List/ListItem/index.js

@@ -1,2 +1 @@
-import { t as e } from "../../../chunks/ListItem";
-export { e as ListItem };
+export { t as ListItem } from "../../../chunks/ListItem";

package/dist/components/List/ListItem/types.d.ts

@@ -1,9 +1,43 @@
 import { ReactNode } from 'react';
 import { ListBoxItem } from 'react-aria-components';
+import { SelectionIndicator } from '../core';
+/**
+ * Props for the [`ListItem`](src/components/List/ListItem/ListItem.tsx) component.
+ *
+ * Utilizes a structured slot-based API (`leading`, `overline`, `label`, `supporting`, `trailing`)
+ * to lay out content following Material Design 3 List specifications.
+ */
 export interface ListItemProps extends Omit<React.ComponentPropsWithRef<typeof ListBoxItem>, "children"> {
+    /**
+     * Element rendered at the start of the list item (e.g. icon, avatar, thumbnail media, or selection checkbox).
+     */
     leading?: ReactNode;
+    /**
+     * Eyebrow or overline text rendered above the primary label, typically [`ListOverlineText`](src/components/List/ListOverlineText/ListOverlineText.tsx).
+     */
     overline?: ReactNode;
+    /**
+     * The primary label element of the list item, typically [`ListLabelText`](src/components/List/ListLabelText/ListLabelText.tsx).
+     */
     label: ReactNode;
+    /**
+     * Secondary descriptive text rendered beneath the label, typically [`ListSupportingText`](src/components/List/ListSupportingText/ListSupportingText.tsx).
+     */
     supporting?: ReactNode;
+    /**
+     * Array of elements rendered at the end of the list item (e.g. trailing metadata text, action buttons, or selection switches).
+     */
     trailing?: ReactNode[];
+    /**
+     * Placement of the checkmark indicator when this item is selected.
+     * When set, replaces the corresponding `leading` or `trailing` element with a check icon when selected.
+     * If omitted, inherits from the parent [`ListBox`](src/components/List/ListBox/ListBox.tsx) `selectionIndicator`, defaulting to `"none"`.
+     *
+     * - `"leading"`: Replaces the `leading` element with a check icon when selected.
+     * - `"trailing"`: Replaces the `trailing` element with a check icon when selected.
+     * - `"none"`: Disables checkmark icon replacement.
+     *
+     * @default "none"
+     */
+    selectionIndicator?: SelectionIndicator;
 }

package/dist/components/List/ListLabelText/ListLabelText.d.ts

@@ -1,2 +1,17 @@
 import { Text } from 'react-aria-components';
-export declare const ListLabelText: React.FC<Omit<React.ComponentPropsWithRef<typeof Text>, "slot">>;
+/**
+ * Props for the [`ListLabelText`](src/components/List/ListLabelText/ListLabelText.tsx) component.
+ */
+export interface ListLabelTextProps extends Omit<React.ComponentPropsWithRef<typeof Text>, "slot"> {
+}
+/**
+ * Primary headline/label text component for a [`ListItem`](src/components/List/ListItem/ListItem.tsx).
+ *
+ * Automatically binds to `slot="label"` with Material Design 3 `bodyLarge` typography.
+ *
+ * @example
+ * ```tsx
+ * <ListLabelText>Notification Settings</ListLabelText>
+ * ```
+ */
+export declare const ListLabelText: React.FC<ListLabelTextProps>;

package/dist/components/List/ListLabelText/index.js

@@ -1,2 +1 @@
-import { t as e } from "../../../chunks/ListLabelText";
-export { e as ListLabelText };
+export { t as ListLabelText } from "../../../chunks/ListLabelText";

package/dist/components/List/ListMedia/ListMedia.d.ts

@@ -1,2 +1,22 @@
 import { ListMediaProps } from './types';
+/**
+ * Styled media container for thumbnail images and video previews within a [`ListItem`](src/components/List/ListItem/ListItem.tsx).
+ *
+ * Automatically applies rounded corners and `object-fit: cover` to nested `<img>` or `<video>` elements.
+ * Supports dimension presets: `"image"` (56×56), `"video"` (100×56), and `"large-video"` (114×64).
+ *
+ * @example
+ * ```tsx
+ * import { ListMedia, ListMediaImageWidth, ListMediaImageHeight } from "@adgytec/web-ui-components";
+ *
+ * <ListMedia variant="image">
+ *     <img
+ *         src="https://picsum.photos/56/56"
+ *         alt="Thumbnail"
+ *         width={ListMediaImageWidth}
+ *         height={ListMediaImageHeight}
+ *     />
+ * </ListMedia>
+ * ```
+ */
 export declare const ListMedia: React.FC<ListMediaProps>;