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

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

@@ -1,2 +1,28 @@
 import { CheckboxProps } from './types';
+/**
+ * A checkbox control implementing Material Design 3 Checkbox guidelines.
+ *
+ * Supports unchecked, checked, and indeterminate states with animated SVG paths,
+ * accessible keyboard activation, state layers, and flexible label positioning.
+ * Built on React Aria's `CheckboxField` and `CheckboxButton` components.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from "@adgytec/web-ui-components";
+ *
+ * <Checkbox isSelected={agree} onChange={setAgree}>
+ *     I accept the terms and conditions
+ * </Checkbox>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Indeterminate checkbox with start label placement
+ * import { Checkbox } from "@adgytec/web-ui-components";
+ *
+ * <Checkbox isIndeterminate labelPlacement="start">
+ *     Select all items
+ * </Checkbox>
+ * ```
+ */
 export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/Input/Checkbox/CheckboxGroup.d.ts

@@ -1,2 +1,19 @@
 import { CheckboxGroupProps } from './types';
+/**
+ * A container managing a set of related [`Checkbox`](src/components/Input/Checkbox/Checkbox.tsx) controls.
+ *
+ * Coordinates group selection values, accessible group labels, helper descriptions,
+ * and error validation messages.
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, Checkbox } from "@adgytec/web-ui-components";
+ *
+ * <CheckboxGroup label="Notification Preferences">
+ *     <Checkbox value="email">Email</Checkbox>
+ *     <Checkbox value="sms">SMS</Checkbox>
+ *     <Checkbox value="push">Push notifications</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
 export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;

package/dist/components/Input/Checkbox/context.d.ts

@@ -1,6 +1,12 @@
 import { CheckboxLabelPlacement } from './types';
-export type CheckboxGroupContextValue = {
+/**
+ * Configuration context value passed down from [`CheckboxGroup`](src/components/Input/Checkbox/CheckboxGroup.tsx) to child [`Checkbox`](src/components/Input/Checkbox/Checkbox.tsx) components.
+ */
+export interface CheckboxGroupContextValue {
+    /** Inherited label placement for child checkbox items. */
     labelPlacement?: CheckboxLabelPlacement;
-    containerStateLayer?: boolean;
-};
+}
+/**
+ * Context communicating group-level styling configurations to nested checkboxes.
+ */
 export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue>;

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

@@ -1,14 +1,41 @@
 import { ReactNode } from 'react';
-import { Checkbox, CheckboxGroup } from 'react-aria-components';
+import { CheckboxField, CheckboxGroup } from 'react-aria-components';
 import { CoreInputProps } from '../core';
+/**
+ * Alignment of the checkbox label text relative to the indicator box.
+ *
+ * - `"start"`: Label precedes the checkbox indicator.
+ * - `"end"`: Label follows the checkbox indicator (default).
+ */
 export type CheckboxLabelPlacement = "start" | "end";
+/**
+ * Props for the [`CheckboxGroup`](src/components/Input/Checkbox/CheckboxGroup.tsx) component.
+ *
+ * Extends React Aria's `CheckboxGroup` props (excluding `children`) and [`CoreInputProps`](src/components/Input/core/types.ts).
+ */
 export interface CheckboxGroupProps extends Omit<React.ComponentPropsWithRef<typeof CheckboxGroup>, "children">, CoreInputProps {
+    /** The child checkboxes or custom content rendered inside the group. */
     children?: ReactNode;
-    checkboxItemsGap?: number;
+    /**
+     * Default label placement applied to all child checkboxes within the group.
+     * Can be overridden per individual [`Checkbox`](src/components/Input/Checkbox/Checkbox.tsx).
+     *
+     * @default "end"
+     */
     labelPlacement?: CheckboxLabelPlacement;
-    containerStateLayer?: boolean;
 }
-export interface CheckboxProps extends React.ComponentPropsWithRef<typeof Checkbox> {
+/**
+ * Props for the [`Checkbox`](src/components/Input/Checkbox/Checkbox.tsx) component.
+ *
+ * Extends all properties from React Aria's `CheckboxField`, including selection states,
+ * form submission, indeterminate state, validation, and accessibility.
+ */
+export interface CheckboxProps extends React.ComponentPropsWithRef<typeof CheckboxField> {
+    /**
+     * Alignment of the label text relative to the indicator box.
+     * Overrides the group-level setting if nested inside a [`CheckboxGroup`](src/components/Input/Checkbox/CheckboxGroup.tsx).
+     *
+     * @default "end"
+     */
     labelPlacement?: CheckboxLabelPlacement;
-    containerStateLayer?: boolean;
 }

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

@@ -1,3 +1,19 @@
 import { DateValue } from 'react-aria-components';
 import { DateFieldProps } from './types';
-export declare const DateField: <T extends DateValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, ...props }: DateFieldProps<T>) => import("react").JSX.Element;
+/**
+ * An accessible segmented date input field allowing users to enter dates by editing day, month, and year segments.
+ *
+ * Automatically handles locale-specific date formatting, keyboard increment/decrement,
+ * validation constraints, helper descriptions, and error feedback.
+ *
+ * @example
+ * ```tsx
+ * import { DateField } from '@adgytec/web-ui-components';
+ *
+ * <DateField
+ *     label="Birth date"
+ *     description="Enter in your local date format."
+ * />
+ * ```
+ */
+export declare const DateField: <T extends DateValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, ...props }: DateFieldProps<T>) => import('react').JSX.Element;

package/dist/components/Input/DateField/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 { DateField as g, DateInput as _, DateSegment as v } from "react-aria-components";
-//#region src/components/Input/DateField/DateField.tsx
+// src/components/Input/DateField/DateField.tsx
 var y = ({ label: y, description: b, errorMessage: x, showDescriptionOnInvalid: S = !1, className: C, ref: w, ...T }) => /* @__PURE__ */ m(g, {
 	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 DateField };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/DateField/DateField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    DateField as AriaDateField,\n    DateInput,\n    DateSegment,\n    type DateValue,\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 { DateFieldProps } from \"./types\";\n\nexport const DateField = <T extends DateValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    ...props\n}: DateFieldProps<T>) => {\n    return (\n        <AriaDateField\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                                <DateSegment\n                                    className={clsx(\n                                        DateSegmentStyles,\n                                        typography.bodyLarge\n                                    )}\n                                    segment={segment}\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        </AriaDateField>\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,MACE,kBAAC,GAAD;KACI,WAAW,EACP,GACA,EAAW,SACf;KACS;IAAQ,CAAA;GAGlB,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":["AriaDateField","clsx","_Fragment","Label","FieldError","typography","FieldError$1","Label$1","InputGroupStyles","UnsetStyles","DateSegmentStyles","SupportingTextStyles","Colors","EditorInputStyles","DateInputStyles","EditorStyles","clsx$1","DateField$1","DateField","props","className","renderProps","showDescription","description","isInvalid","showDescriptionOnInvalid","Fragment","label","DateInput","DateSegment","Description","errorMessage"],"sources":["../../../../src/components/Input/DateField/DateField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    DateField as AriaDateField,\n    DateInput,\n    DateSegment,\n    type DateValue,\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 { DateFieldProps } from \"./types\";\n\n/**\n * An accessible segmented date input field allowing users to enter dates by editing day, month, and year segments.\n *\n * Automatically handles locale-specific date formatting, keyboard increment/decrement,\n * validation constraints, helper descriptions, and error feedback.\n *\n * @example\n * ```tsx\n * import { DateField } from '@adgytec/web-ui-components';\n *\n * <DateField\n *     label=\"Birth date\"\n *     description=\"Enter in your local date format.\"\n * />\n * ```\n */\nexport const DateField = <T extends DateValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    ...props\n}: DateFieldProps<T>) => {\n    return (\n        <AriaDateField\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                                <DateSegment\n                                    className={clsx(\n                                        DateSegmentStyles,\n                                        typography.bodyLarge\n                                    )}\n                                    segment={segment}\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        </AriaDateField>\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,MACE,kBAACe,GAAD;KACI,WAAW5B,EACPS,GACAL,EAAW,SACf;KACS;IAAQ,CAAA;GAGlB,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/DateField/types.d.ts

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

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

@@ -1,3 +1,19 @@
 import { DateValue } from 'react-aria-components';
 import { DatePickerProps } from './types';
-export declare const DatePicker: <T extends DateValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, weekdayStyle, ...props }: DatePickerProps<T>) => import("react").JSX.Element;
+/**
+ * A date picker component combining a segmented date input field with a dropdown {@link Calendar} popover.
+ *
+ * Implements Material Design 3 Date Picker guidelines, providing both typed manual input and interactive
+ * calendar date selection, with locale-sensitive formatting and validation.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker } from '@adgytec/web-ui-components';
+ *
+ * <DatePicker
+ *     label="Appointment Date"
+ *     description="Choose a date for your visit."
+ * />
+ * ```
+ */
+export declare const DatePicker: <T extends DateValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, weekdayStyle, ...props }: DatePickerProps<T>) => import('react').JSX.Element;

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

@@ -11,7 +11,7 @@ import _ from "clsx";
 import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
 import { DateInput as x, DatePicker as S, DateSegment as C, Group as w } from "react-aria-components";
 import { CalendarDays as T } from "lucide-react";
-//#region src/components/Input/DatePicker/DatePicker/DatePicker.tsx
+// src/components/Input/DatePicker/DatePicker/DatePicker.tsx
 var E = ({ label: E, description: D, errorMessage: O, showDescriptionOnInvalid: k = !1, className: A, ref: j, weekdayStyle: M, ...N }) => /* @__PURE__ */ y(S, {
 	className: (e) => _(l, a, typeof A == "function" ? A(e) : A),
 	...N,
@@ -53,7 +53,6 @@ var E = ({ label: E, description: D, errorMessage: O, showDescriptionOnInvalid:
 		] });
 	}
 });
-//#endregion
 export { E as DatePicker };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Input/DatePicker/DatePicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { CalendarDays } from \"lucide-react\";\nimport {\n    DatePicker as AriaDatePicker,\n    DateInput,\n    DateSegment,\n    type DateValue,\n    Group,\n} from \"react-aria-components\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { Popover } from \"@/components/Popover\";\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 { InputButton } from \"../../Input\";\nimport { Label } from \"../../Label\";\nimport { DatePickerGroupStyles, DatePickerPopoverStyles } from \"../core\";\nimport type { DatePickerProps } from \"./types\";\n\nexport const DatePicker = <T extends DateValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    weekdayStyle,\n    ...props\n}: DatePickerProps<T>) => {\n    return (\n        <AriaDatePicker\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, isDisabled, isOpen }) => {\n                const showDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <Group\n                            className={clsx(\n                                EditorStyles,\n                                DatePickerGroupStyles\n                            )}\n                            data-trailing={true}\n                            data-open={isOpen || undefined}\n                            data-date-input={true}\n                        >\n                            <DateInput\n                                ref={ref}\n                                className={clsx(\n                                    UnsetStyles,\n                                    EditorInputStyles,\n                                    typography.bodyLarge,\n                                    DateInputStyles\n                                )}\n                                data-date-input={true}\n                            >\n                                {(segment) => (\n                                    <DateSegment\n                                        className={clsx(\n                                            DateSegmentStyles,\n                                            typography.bodyLarge\n                                        )}\n                                        segment={segment}\n                                    />\n                                )}\n                            </DateInput>\n\n                            <InputButton\n                                icon={CalendarDays}\n                                isDisabled={isDisabled}\n                                data-invalid={isInvalid || undefined}\n                            />\n                        </Group>\n\n                        {showDescription && (\n                            <Description className={clsx(SupportingTextStyles)}>\n                                {description}\n                            </Description>\n                        )}\n                        <FieldError className={clsx(SupportingTextStyles)}>\n                            {errorMessage}\n                        </FieldError>\n\n                        <Popover className={clsx(DatePickerPopoverStyles)}>\n                            <Calendar weekdayStyle={weekdayStyle} />\n                        </Popover>\n                    </>\n                );\n            }}\n        </AriaDatePicker>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AA6BA,IAAa,KAAmC,EAC5C,UACA,gBACA,iBACA,8BAA2B,IAC3B,cACA,QACA,iBACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,cAAW,eAAY,gBAAa;EACpC,IAAM,IACF,MACC,CAAC,KAAc,KAAa;EAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;GAE/B,kBAAC,GAAD;IACI,WAAW,EACP,GACA,CACJ;IACA,iBAAe;IACf,aAAW,KAAU,KAAA;IACrB,mBAAiB;cAPrB,CASI,kBAAC,GAAD;KACS;KACL,WAAW,EACP,GACA,GACA,EAAW,WACX,CACJ;KACA,mBAAiB;gBAEf,MACE,kBAAC,GAAD;MACI,WAAW,EACP,GACA,EAAW,SACf;MACS;KAAQ,CAAA;IAGlB,CAAA,GAEX,kBAAC,GAAD;KACI,MAAM;KACM;KACZ,gBAAc,KAAa,KAAA;IAAU,CAAA,CAEtC;;GAEN,KACG,kBAAC,GAAD;IAAa,WAAW,EAAK,CAAoB;cAC5C;GACQ,CAAA;GAEjB,kBAAC,GAAD;IAAY,WAAW,EAAK,CAAoB;cAC3C;GACO,CAAA;GAEZ,kBAAC,GAAD;IAAS,WAAW,EAAK,CAAuB;cAC5C,kBAAC,GAAD,EAAwB,gBAAa,CAAA;GAChC,CAAA;EACb,EAAA,CAAA;CAER;AACY,CAAA"}
+{"version":3,"file":"index.js","names":["AriaDatePicker","clsx","_Fragment","Label","FieldError","Popover","Calendar","typography","Calendar$1","FieldError$1","Label$1","InputGroupStyles","UnsetStyles","DateSegmentStyles","SupportingTextStyles","Colors","EditorInputStyles","DateInputStyles","EditorStyles","Popover$1","InputButton","DatePickerPopoverStyles","DatePickerGroupStyles","clsx$1","DatePicker$1","DatePicker","props","className","renderProps","showDescription","description","isInvalid","showDescriptionOnInvalid","Fragment","label","Group","isOpen","DateInput","DateSegment","CalendarDays","Description","errorMessage"],"sources":["../../../../../src/components/Input/DatePicker/DatePicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { CalendarDays } from \"lucide-react\";\nimport {\n    DatePicker as AriaDatePicker,\n    DateInput,\n    DateSegment,\n    type DateValue,\n    Group,\n} from \"react-aria-components\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { Popover } from \"@/components/Popover\";\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 { InputButton } from \"../../Input\";\nimport { Label } from \"../../Label\";\nimport { DatePickerGroupStyles, DatePickerPopoverStyles } from \"../core\";\nimport type { DatePickerProps } from \"./types\";\n\n/**\n * A date picker component combining a segmented date input field with a dropdown {@link Calendar} popover.\n *\n * Implements Material Design 3 Date Picker guidelines, providing both typed manual input and interactive\n * calendar date selection, with locale-sensitive formatting and validation.\n *\n * @example\n * ```tsx\n * import { DatePicker } from '@adgytec/web-ui-components';\n *\n * <DatePicker\n *     label=\"Appointment Date\"\n *     description=\"Choose a date for your visit.\"\n * />\n * ```\n */\nexport const DatePicker = <T extends DateValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    weekdayStyle,\n    ...props\n}: DatePickerProps<T>) => {\n    return (\n        <AriaDatePicker\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, isDisabled, isOpen }) => {\n                const showDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <Group\n                            className={clsx(\n                                EditorStyles,\n                                DatePickerGroupStyles\n                            )}\n                            data-trailing={true}\n                            data-open={isOpen || undefined}\n                            data-date-input={true}\n                        >\n                            <DateInput\n                                ref={ref}\n                                className={clsx(\n                                    UnsetStyles,\n                                    EditorInputStyles,\n                                    typography.bodyLarge,\n                                    DateInputStyles\n                                )}\n                                data-date-input={true}\n                            >\n                                {(segment) => (\n                                    <DateSegment\n                                        className={clsx(\n                                            DateSegmentStyles,\n                                            typography.bodyLarge\n                                        )}\n                                        segment={segment}\n                                    />\n                                )}\n                            </DateInput>\n\n                            <InputButton\n                                icon={CalendarDays}\n                                isDisabled={isDisabled}\n                                data-invalid={isInvalid || undefined}\n                            />\n                        </Group>\n\n                        {showDescription && (\n                            <Description className={clsx(SupportingTextStyles)}>\n                                {description}\n                            </Description>\n                        )}\n                        <FieldError className={clsx(SupportingTextStyles)}>\n                            {errorMessage}\n                        </FieldError>\n\n                        <Popover className={clsx(DatePickerPopoverStyles)}>\n                            <Calendar weekdayStyle={weekdayStyle} />\n                        </Popover>\n                    </>\n                );\n            }}\n        </AriaDatePicker>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AA6CA,IAAayB,KAAmC,EAC5C,UACA,gBACA,iBACA,8BAA2B,IAC3B,cACA,QACA,iBACA,GAAGC,QAGC,kBAAC1B,GAAD;CACI,YAAY,MACRC,EACIc,GACAJ,GACA,OAAOgB,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAID;CAEF,WAAA,EAAE,cAAW,eAAY,gBAAa;EACpC,IAAMG,IACFC,MACC,CAACC,KAAcA,KAAaC;EAEjC,OACI,kBAAA9B,GAAA,EAAA,UAAA;GACKgC,KAAS,kBAAC/B,GAAD,EAAA,UAAQ+B,EAAa,CAAA;GAE/B,kBAACC,GAAD;IACI,WAAWlC,EACPiB,GACAI,CACJ;IACA,iBAAe;IACf,aAAWc,KAAU,KAAA;IACrB,mBAAiB;IAPrB,UAAA,CASI,kBAACC,GAAD;KACS;KACL,WAAWpC,EACPW,GACAI,GACAT,EAAW,WACXU,CACJ;KACA,mBAAiB;KAEf,WAAA,MACE,kBAACqB,GAAD;MACI,WAAWrC,EACPY,GACAN,EAAW,SACf;MACS;KAAQ,CAAA;IAGlB,CAAA,GAEX,kBAACa,GAAD;KACI,MAAMmB;KACM;KACZ,gBAAcR,KAAa,KAAA;IAAU,CAAA,CAEtC;;GAENF,KACG,kBAACW,GAAD;IAAa,WAAWvC,EAAKa,CAAoB;IAC5C,UAAAgB;GACQ,CAAA;GAEjB,kBAAC1B,GAAD;IAAY,WAAWH,EAAKa,CAAoB;IAC3C,UAAA2B;GACO,CAAA;GAEZ,kBAACpC,GAAD;IAAS,WAAWJ,EAAKoB,CAAuB;IAC5C,UAAA,kBAACf,GAAD,EAAwB,gBAAa,CAAA;GAChC,CAAA;EACb,EAAA,CAAA;CAER;AACY,CAAA"}

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

@@ -2,6 +2,16 @@ import { DatePickerProps as AriaDatePickerProps, DateInput, DateValue } from 're
 import { WeekdayStyle } from '../../../Calendar/core';
 import { RefProp } from '../../../../utils';
 import { CoreInputProps } from '../../core';
+/**
+ * Props for the {@link DatePicker} component.
+ * Extends React Aria's {@link AriaDatePickerProps}, {@link CoreInputProps}, and native date input ref.
+ */
 export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, "children">, CoreInputProps, RefProp<typeof DateInput> {
+    /**
+     * Formatting style for weekday column headers in the calendar popover.
+     *
+     * - `"narrow"`: Typically a single character (e.g. "S", "M", "T").
+     * - `"short"`: Abbreviated weekday name (e.g. "Sun", "Mon", "Tue").
+     */
     weekdayStyle?: WeekdayStyle;
 }

package/dist/components/Input/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -1,3 +1,19 @@
 import { DateValue } from 'react-aria-components';
 import { DateRangePickerProps } from './types';
-export declare const DateRangePicker: <T extends DateValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, weekdayStyle, ...props }: DateRangePickerProps<T>) => import("react").JSX.Element;
+/**
+ * A date range picker component allowing users to select a start and end date using dual segmented date inputs or a dropdown {@link RangeCalendar} popover.
+ *
+ * Implements Material Design 3 Date Range Picker guidelines, providing accessible keyboard navigation,
+ * custom range highlighting, and validation feedback.
+ *
+ * @example
+ * ```tsx
+ * import { DateRangePicker } from '@adgytec/web-ui-components';
+ *
+ * <DateRangePicker
+ *     label="Travel Dates"
+ *     description="Select departure and return dates."
+ * />
+ * ```
+ */
+export declare const DateRangePicker: <T extends DateValue>({ label, description, errorMessage, showDescriptionOnInvalid, className, ref, weekdayStyle, ...props }: DateRangePickerProps<T>) => import('react').JSX.Element;

package/dist/components/Input/DatePicker/DateRangePicker/index.js

@@ -11,7 +11,7 @@ import v from "clsx";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 import { DateInput as S, DateRangePicker as C, DateSegment as w, Group as T } from "react-aria-components";
 import { CalendarDays as E } from "lucide-react";
-//#region src/components/Input/DatePicker/DateRangePicker/DateRangePicker.tsx
+// src/components/Input/DatePicker/DateRangePicker/DateRangePicker.tsx
 var D = ({ label: D, description: O, errorMessage: k, showDescriptionOnInvalid: A = !1, className: j, ref: M, weekdayStyle: N, ...P }) => /* @__PURE__ */ b(C, {
 	className: (e) => v(l, a, typeof j == "function" ? j(e) : j),
 	...P,
@@ -72,7 +72,6 @@ var D = ({ label: D, description: O, errorMessage: k, showDescriptionOnInvalid:
 		] });
 	}
 });
-//#endregion
 export { D as DateRangePicker };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Input/DatePicker/DateRangePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["segment"],"sources":["../../../../../src/components/Input/DatePicker/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { CalendarDays } from \"lucide-react\";\nimport {\n    DateRangePicker as AriaRangeDatePicker,\n    DateInput,\n    DateSegment,\n    type DateValue,\n    Group,\n} from \"react-aria-components\";\nimport { RangeCalendar } from \"@/components/Calendar\";\nimport { Popover } from \"@/components/Popover\";\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 { InputButton } from \"../../Input\";\nimport { Label } from \"../../Label\";\nimport {\n    DatePickerGroupStyles,\n    DatePickerPopoverStyles,\n    DateRangePickerDateInputGroupStyles,\n} from \"../core\";\nimport type { DateRangePickerProps } from \"./types\";\n\nexport const DateRangePicker = <T extends DateValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    weekdayStyle,\n    ...props\n}: DateRangePickerProps<T>) => {\n    return (\n        <AriaRangeDatePicker\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, isDisabled, isOpen }) => {\n                const showDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <Group\n                            className={clsx(\n                                EditorStyles,\n                                DatePickerGroupStyles\n                            )}\n                            data-trailing={true}\n                            data-open={isOpen || undefined}\n                            data-date-input={true}\n                        >\n                            <div\n                                className={clsx(\n                                    DateRangePickerDateInputGroupStyles\n                                )}\n                            >\n                                <DateInput\n                                    slot=\"start\"\n                                    ref={ref}\n                                    className={clsx(\n                                        UnsetStyles,\n                                        EditorInputStyles,\n                                        typography.bodyLarge,\n                                        DateInputStyles\n                                    )}\n                                    data-date-input={true}\n                                >\n                                    {(segment) => (\n                                        <DateSegment\n                                            className={clsx(\n                                                DateSegmentStyles,\n                                                typography.bodyLarge\n                                            )}\n                                            segment={segment}\n                                        />\n                                    )}\n                                </DateInput>\n\n                                <span aria-hidden=\"true\">–</span>\n\n                                <DateInput\n                                    slot=\"end\"\n                                    className={clsx(\n                                        UnsetStyles,\n                                        EditorInputStyles,\n                                        typography.bodyLarge,\n                                        DateInputStyles\n                                    )}\n                                    data-date-input={true}\n                                >\n                                    {(segment) => (\n                                        <DateSegment\n                                            className={clsx(\n                                                DateSegmentStyles,\n                                                typography.bodyLarge\n                                            )}\n                                            segment={segment}\n                                        />\n                                    )}\n                                </DateInput>\n                            </div>\n\n                            <InputButton\n                                icon={CalendarDays}\n                                isDisabled={isDisabled}\n                                data-invalid={isInvalid || undefined}\n                            />\n                        </Group>\n\n                        {showDescription && (\n                            <Description className={clsx(SupportingTextStyles)}>\n                                {description}\n                            </Description>\n                        )}\n                        <FieldError className={clsx(SupportingTextStyles)}>\n                            {errorMessage}\n                        </FieldError>\n\n                        <Popover className={clsx(DatePickerPopoverStyles)}>\n                            <RangeCalendar weekdayStyle={weekdayStyle} />\n                        </Popover>\n                    </>\n                );\n            }}\n        </AriaRangeDatePicker>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,KAAwC,EACjD,UACA,gBACA,iBACA,8BAA2B,IAC3B,cACA,QACA,iBACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;YAEF,EAAE,cAAW,eAAY,gBAAa;EACpC,IAAM,IACF,MACC,CAAC,KAAc,KAAa;EAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;GAE/B,kBAAC,GAAD;IACI,WAAW,EACP,GACA,CACJ;IACA,iBAAe;IACf,aAAW,KAAU,KAAA;IACrB,mBAAiB;cAPrB,CASI,kBAAC,OAAD;KACI,WAAW,EACP,CACJ;eAHJ;MAKI,kBAAC,GAAD;OACI,MAAK;OACA;OACL,WAAW,EACP,GACA,GACA,EAAW,WACX,CACJ;OACA,mBAAiB;kBAEf,MACE,kBAAC,GAAD;QACI,WAAW,EACP,GACA,EAAW,SACf;QACS;OAAQ,CAAA;MAGlB,CAAA;MAEX,kBAAC,QAAD;OAAM,eAAY;iBAAO;MAAO,CAAA;MAEhC,kBAAC,GAAD;OACI,MAAK;OACL,WAAW,EACP,GACA,GACA,EAAW,WACX,CACJ;OACA,mBAAiB;kBAEfA,MACE,kBAAC,GAAD;QACI,WAAW,EACP,GACA,EAAW,SACf;QACA,SAASA;OAAQ,CAAA;MAGlB,CAAA;KACV;QAEL,kBAAC,GAAD;KACI,MAAM;KACM;KACZ,gBAAc,KAAa,KAAA;IAAU,CAAA,CAEtC;;GAEN,KACG,kBAAC,GAAD;IAAa,WAAW,EAAK,CAAoB;cAC5C;GACQ,CAAA;GAEjB,kBAAC,GAAD;IAAY,WAAW,EAAK,CAAoB;cAC3C;GACO,CAAA;GAEZ,kBAAC,GAAD;IAAS,WAAW,EAAK,CAAuB;cAC5C,kBAAC,GAAD,EAA6B,gBAAa,CAAA;GACrC,CAAA;EACb,EAAA,CAAA;CAER;AACiB,CAAA"}
+{"version":3,"file":"index.js","names":["segment","AriaRangeDatePicker","clsx","_Fragment","Label","FieldError","Popover","RangeCalendar","typography","RangeCalendar$1","FieldError$1","Label$1","InputGroupStyles","UnsetStyles","DateSegmentStyles","SupportingTextStyles","Colors","EditorInputStyles","DateInputStyles","EditorStyles","Popover$1","InputButton","DatePickerPopoverStyles","DateRangePickerDateInputGroupStyles","DatePickerGroupStyles","clsx$1","DateRangePicker$1","DateRangePicker","props","className","renderProps","showDescription","description","isInvalid","showDescriptionOnInvalid","Fragment","label","Group","isOpen","DateInput","DateSegment","segment_0","CalendarDays","Description","errorMessage"],"sources":["../../../../../src/components/Input/DatePicker/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { CalendarDays } from \"lucide-react\";\nimport {\n    DateRangePicker as AriaRangeDatePicker,\n    DateInput,\n    DateSegment,\n    type DateValue,\n    Group,\n} from \"react-aria-components\";\nimport { RangeCalendar } from \"@/components/Calendar\";\nimport { Popover } from \"@/components/Popover\";\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 { InputButton } from \"../../Input\";\nimport { Label } from \"../../Label\";\nimport {\n    DatePickerGroupStyles,\n    DatePickerPopoverStyles,\n    DateRangePickerDateInputGroupStyles,\n} from \"../core\";\nimport type { DateRangePickerProps } from \"./types\";\n\n/**\n * A date range picker component allowing users to select a start and end date using dual segmented date inputs or a dropdown {@link RangeCalendar} popover.\n *\n * Implements Material Design 3 Date Range Picker guidelines, providing accessible keyboard navigation,\n * custom range highlighting, and validation feedback.\n *\n * @example\n * ```tsx\n * import { DateRangePicker } from '@adgytec/web-ui-components';\n *\n * <DateRangePicker\n *     label=\"Travel Dates\"\n *     description=\"Select departure and return dates.\"\n * />\n * ```\n */\nexport const DateRangePicker = <T extends DateValue>({\n    label,\n    description,\n    errorMessage,\n    showDescriptionOnInvalid = false,\n    className,\n    ref,\n    weekdayStyle,\n    ...props\n}: DateRangePickerProps<T>) => {\n    return (\n        <AriaRangeDatePicker\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, isDisabled, isOpen }) => {\n                const showDescription =\n                    description &&\n                    (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n                return (\n                    <>\n                        {label && <Label>{label}</Label>}\n\n                        <Group\n                            className={clsx(\n                                EditorStyles,\n                                DatePickerGroupStyles\n                            )}\n                            data-trailing={true}\n                            data-open={isOpen || undefined}\n                            data-date-input={true}\n                        >\n                            <div\n                                className={clsx(\n                                    DateRangePickerDateInputGroupStyles\n                                )}\n                            >\n                                <DateInput\n                                    slot=\"start\"\n                                    ref={ref}\n                                    className={clsx(\n                                        UnsetStyles,\n                                        EditorInputStyles,\n                                        typography.bodyLarge,\n                                        DateInputStyles\n                                    )}\n                                    data-date-input={true}\n                                >\n                                    {(segment) => (\n                                        <DateSegment\n                                            className={clsx(\n                                                DateSegmentStyles,\n                                                typography.bodyLarge\n                                            )}\n                                            segment={segment}\n                                        />\n                                    )}\n                                </DateInput>\n\n                                <span aria-hidden=\"true\">–</span>\n\n                                <DateInput\n                                    slot=\"end\"\n                                    className={clsx(\n                                        UnsetStyles,\n                                        EditorInputStyles,\n                                        typography.bodyLarge,\n                                        DateInputStyles\n                                    )}\n                                    data-date-input={true}\n                                >\n                                    {(segment) => (\n                                        <DateSegment\n                                            className={clsx(\n                                                DateSegmentStyles,\n                                                typography.bodyLarge\n                                            )}\n                                            segment={segment}\n                                        />\n                                    )}\n                                </DateInput>\n                            </div>\n\n                            <InputButton\n                                icon={CalendarDays}\n                                isDisabled={isDisabled}\n                                data-invalid={isInvalid || undefined}\n                            />\n                        </Group>\n\n                        {showDescription && (\n                            <Description className={clsx(SupportingTextStyles)}>\n                                {description}\n                            </Description>\n                        )}\n                        <FieldError className={clsx(SupportingTextStyles)}>\n                            {errorMessage}\n                        </FieldError>\n\n                        <Popover className={clsx(DatePickerPopoverStyles)}>\n                            <RangeCalendar weekdayStyle={weekdayStyle} />\n                        </Popover>\n                    </>\n                );\n            }}\n        </AriaRangeDatePicker>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AAiDA,IAAa2B,KAAwC,EACjD,UACA,gBACA,iBACA,8BAA2B,IAC3B,cACA,QACA,iBACA,GAAGC,QAGC,kBAAC3B,GAAD;CACI,YAAY,MACRC,EACIc,GACAJ,GACA,OAAOiB,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAID;CAEF,WAAA,EAAE,cAAW,eAAY,gBAAa;EACpC,IAAMG,IACFC,MACC,CAACC,KAAcA,KAAaC;EAEjC,OACI,kBAAA/B,GAAA,EAAA,UAAA;GACKiC,KAAS,kBAAChC,GAAD,EAAA,UAAQgC,EAAa,CAAA;GAE/B,kBAACC,GAAD;IACI,WAAWnC,EACPiB,GACAK,CACJ;IACA,iBAAe;IACf,aAAWc,KAAU,KAAA;IACrB,mBAAiB;IAPrB,UAAA,CASI,kBAAC,OAAD;KACI,WAAWpC,EACPqB,CACJ;KAHJ,UAAA;MAKI,kBAACgB,GAAD;OACI,MAAK;OACA;OACL,WAAWrC,EACPW,GACAI,GACAT,EAAW,WACXU,CACJ;OACA,mBAAiB;OAEf,WAAA,MACE,kBAACsB,GAAD;QACI,WAAWtC,EACPY,GACAN,EAAW,SACf;QACS;OAAQ,CAAA;MAGlB,CAAA;MAEX,kBAAC,QAAD;OAAM,eAAY;OAAO,UAAA;MAAO,CAAA;MAEhC,kBAAC+B,GAAD;OACI,MAAK;OACL,WAAWrC,EACPW,GACAI,GACAT,EAAW,WACXU,CACJ;OACA,mBAAiB;OAEflB,WAAAA,MACE,kBAACwC,GAAD;QACI,WAAWtC,EACPY,GACAN,EAAW,SACf;QACA,SAASR;OAAQ,CAAA;MAGlB,CAAA;KACV;IAEL,CAAA,GAAA,kBAACqB,GAAD;KACI,MAAMqB;KACM;KACZ,gBAAcT,KAAa,KAAA;IAAU,CAAA,CAEtC;;GAENF,KACG,kBAACY,GAAD;IAAa,WAAWzC,EAAKa,CAAoB;IAC5C,UAAAiB;GACQ,CAAA;GAEjB,kBAAC3B,GAAD;IAAY,WAAWH,EAAKa,CAAoB;IAC3C,UAAA6B;GACO,CAAA;GAEZ,kBAACtC,GAAD;IAAS,WAAWJ,EAAKoB,CAAuB;IAC5C,UAAA,kBAACf,GAAD,EAA6B,gBAAa,CAAA;GACrC,CAAA;EACb,EAAA,CAAA;CAER;AACiB,CAAA"}

package/dist/components/Input/DatePicker/DateRangePicker/types.d.ts

@@ -2,6 +2,16 @@ import { DateRangePickerProps as AriaDateRangePickerProps, DateInput, DateValue
 import { WeekdayStyle } from '../../../Calendar/core';
 import { RefProp } from '../../../../utils';
 import { CoreInputProps } from '../../core';
+/**
+ * Props for the {@link DateRangePicker} component.
+ * Extends React Aria's {@link AriaDateRangePickerProps}, {@link CoreInputProps}, and native start date input ref.
+ */
 export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, "children">, CoreInputProps, RefProp<typeof DateInput> {
+    /**
+     * Formatting style for weekday column headers in the range calendar popover.
+     *
+     * - `"narrow"`: Typically a single character (e.g. "S", "M", "T").
+     * - `"short"`: Abbreviated weekday name (e.g. "Sun", "Mon", "Tue").
+     */
     weekdayStyle?: WeekdayStyle;
 }

package/dist/components/Input/DatePicker/core/datePicker.d.ts

@@ -1,3 +1,6 @@
+/** CSS class for the date picker popover container. */
 export declare const DatePickerPopoverStyles: string;
+/** CSS class for the date picker input group container. */
 export declare const DatePickerGroupStyles: string;
+/** CSS class for the date range picker input group container. */
 export declare const DateRangePickerDateInputGroupStyles: string;

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

@@ -1,2 +1 @@
-import { n as e, r as t, t as n } from "../../../../chunks/core5";
-export { n as DatePickerGroupStyles, e as DatePickerPopoverStyles, t as DateRangePickerDateInputGroupStyles };
+export { t as DatePickerGroupStyles, n as DatePickerPopoverStyles, r as DateRangePickerDateInputGroupStyles } from "../../../../chunks/core5";

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

@@ -1,2 +1,13 @@
 import { Text } from 'react-aria-components';
-export declare const Description: React.FC<React.ComponentPropsWithRef<typeof Text>>;
+/**
+ * Props for the {@link Description} component.
+ * Extends React Aria's {@link Text} props.
+ */
+export interface DescriptionProps extends React.ComponentPropsWithRef<typeof Text> {
+}
+/**
+ * Informative supporting text placed beneath an input field.
+ *
+ * Automatically bound via `slot="description"` for accessibility screen reader announcements.
+ */
+export declare const Description: React.FC<DescriptionProps>;

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

@@ -3,7 +3,7 @@ import { t } from "../../../chunks/base";
 import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
 import { Text as i } from "react-aria-components";
-//#region src/components/Input/Description/Description.tsx
+// src/components/Input/Description/Description.tsx
 var a = e(), o = (e) => {
 	let o = (0, a.c)(8), s, c;
 	if (o[0] !== e) {
@@ -19,7 +19,6 @@ var a = e(), o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as Description };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/Description/Description.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Text } from \"react-aria-components\";\nimport { typography } from \"@/utils/typography\";\n\nexport const Description: React.FC<\n    React.ComponentPropsWithRef<typeof Text>\n> = ({ className, slot: _, ...props }) => {\n    return (\n        <Text\n            slot=\"description\"\n            className={clsx(typography.labelMedium, className)}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;aAIa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,IAAA,EAAA,OAAA,GAAA;EAAC,IAAA,EAAA,WAAA,GAAA,MAAA,GAAA,GAAA,MAAA;EAAgC,AAAhC,IAAA,GAAA,IAAA,GAAgC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,OAAA,AAAA,IAAA,EAAA,IAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAIyB,IAAA,EAAA,MAAvC,IAAA,EAAK,EAAU,aAAc,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAEpD,OAFoD,EAAA,OAAA,KAAA,EAAA,OAAA,KAFtD,IAAA,kBAAC,GAAD;EACS,MAAA;EACM,WAAA;EAAuC,GAC9C;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAJF;AAIE"}
+{"version":3,"file":"index.js","names":["_c","clsx","require_compiler_runtime","clsx$1","import_compiler_runtime","Description","$","className","props","t0","t1","_","t2","typography","Text"],"sources":["../../../../src/components/Input/Description/Description.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Text } from \"react-aria-components\";\nimport { typography } from \"@/utils/typography\";\n\n/**\n * Props for the {@link Description} component.\n * Extends React Aria's {@link Text} props.\n */\nexport interface DescriptionProps\n    extends React.ComponentPropsWithRef<typeof Text> {}\n\n/**\n * Informative supporting text placed beneath an input field.\n *\n * Automatically bound via `slot=\"description\"` for accessibility screen reader announcements.\n */\nexport const Description: React.FC<DescriptionProps> = ({\n    className,\n    slot: _,\n    ...props\n}) => {\n    return (\n        <Text\n            slot=\"description\"\n            className={clsx(typography.labelMedium, className)}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;A,aAgBaK,KAA0C,MAAA;CAAA,IAAAC,KAAA,GAAAN,EAAAA,EAAAA,CAAA,CAAA,GAAAO,GAAAC;CAAA,IAAAF,EAAA,OAAAG,GAAA;EAAC,IAAA,EAAA,WAAAC,GAAA,MAAAC,GAAA,GAAAC,MAAAH;EAIvD,AAJuD,IAAAC,GAAA,IAAAE,GAIvD,EAAA,KAAAH,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,OAAA,AAAA,IAAAF,EAAA,IAAA,IAAAA,EAAA;CAAA,IAAAI;CAAA,AAAAJ,EAAA,OAAAC,IAI6D,IAAAD,EAAA,MAAvC,IAAAL,EAAKY,EAAU,aAAcN,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEpD,OAFoDN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAFtD,IAAA,kBAACI,GAAD;EACS,MAAA;EACM,WAAAJ;EAAuC,GAC9CF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAJFM;AAIE"}

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

@@ -1,2 +1,13 @@
 import { FieldError as AriaFieldError } from 'react-aria-components';
-export declare const FieldError: React.FC<React.ComponentPropsWithRef<typeof AriaFieldError>>;
+/**
+ * Props for the {@link FieldError} component.
+ * Extends React Aria's {@link AriaFieldError} props.
+ */
+export interface FieldErrorProps extends React.ComponentPropsWithRef<typeof AriaFieldError> {
+}
+/**
+ * Renders error messages when an input component fails validation.
+ *
+ * Automatically displays validation feedback according to Material Design 3 error styles.
+ */
+export declare const FieldError: React.FC<FieldErrorProps>;

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

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

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

@@ -1,2 +1,29 @@
 import { InputProps } from './types';
+/**
+ * A single-line text input field implementing Material Design 3 Text Field guidelines.
+ *
+ * Supports accessible labels, helper descriptions, error messages, prefix/suffix text,
+ * leading icons, trailing actions via {@link InputButton}, and character counter indicators.
+ *
+ * @example
+ * ```tsx
+ * import { Input, InputButton } from '@adgytec/web-ui-components';
+ * import { Eye, Mail } from 'lucide-react';
+ *
+ * // Basic text input with label and helper text
+ * <Input
+ *     label="Email Address"
+ *     placeholder="user@example.com"
+ *     leadingIcon={Mail}
+ *     description="We'll never share your email."
+ * />
+ *
+ * // Password field with trailing visibility button
+ * <Input
+ *     label="Password"
+ *     type="password"
+ *     trailing={<InputButton icon={Eye} onPress={() => {}} />}
+ * />
+ * ```
+ */
 export declare const Input: React.FC<InputProps>;

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

@@ -1,2 +1,11 @@
 import { IconButtonProps } from '../../Button';
-export declare const InputButton: React.FC<Omit<IconButtonProps, "color" | "size" | "width">>;
+/**
+ * Props for the {@link InputButton} component.
+ * Extends {@link IconButtonProps} omitting fixed size, color, and width configurations.
+ */
+export interface InputButtonProps extends Omit<IconButtonProps, "color" | "size" | "width"> {
+}
+/**
+ * An action button tailored for placement within an {@link Input} container (e.g. password visibility toggle, clear button).
+ */
+export declare const InputButton: React.FC<InputButtonProps>;

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

@@ -1,4 +1,10 @@
 import { ReactNode } from 'react';
+/**
+ * Injects input validation and disabled states into child {@link InputButton} elements.
+ *
+ * @param params - Configuration containing `node`, `isInvalid`, and `isDisabled`.
+ * @returns Cloned element with attached state data attributes, or the original node if not an InputButton.
+ */
 export declare function addStateAttrsToInputButton({ node, isInvalid, isDisabled, }: {
     node: ReactNode;
     isInvalid: boolean;

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

@@ -1,2 +1 @@
-import { n as e, t } from "../../../chunks/Input2";
-export { t as Input, e as InputButton };
+export { t as Input, n as InputButton } from "../../../chunks/Input2";

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

@@ -3,16 +3,36 @@ import { ReactNode } from 'react';
 import { TextFieldProps as AriaTextFieldProps, Input } from 'react-aria-components';
 import { RefProp } from '../../../utils';
 import { CoreInputProps } from '../core';
+/**
+ * Render prop type for input adornments such as prefix, suffix, and trailing elements.
+ * Can be static React nodes or a render function providing current interaction states.
+ */
 export type InputRenderProp = ReactNode | (({ isDisabled, isInvalid, }: {
     isDisabled: boolean;
     isInvalid: boolean;
 }) => ReactNode);
+/**
+ * Props for the {@link Input} component.
+ * Extends React Aria's {@link AriaTextFieldProps}, {@link CoreInputProps}, and native input element ref.
+ */
 export interface InputProps extends Omit<AriaTextFieldProps, "children">, CoreInputProps, RefProp<typeof Input> {
+    /** Placeholder text displayed when the input field is empty. */
     placeholder?: string;
+    /** Text direction for the editable input area (e.g. `"ltr"`, `"rtl"`). */
     editorDir?: string;
+    /** Content or render prop displayed immediately before the editable text input. */
     prefix?: InputRenderProp;
+    /** Content or render prop displayed immediately after the editable text input. */
     suffix?: InputRenderProp;
+    /** Leading Lucide icon displayed at the far start of the input container. */
     leadingIcon?: LucideIcon;
+    /** Trailing content, such as action buttons or status indicators, displayed at the far end of the input container. */
     trailing?: InputRenderProp;
+    /**
+     * Whether to display the current character count below the field.
+     * Requires `maxLength` to display the limit ratio.
+     *
+     * @default false
+     */
     showCharacterCount?: boolean;
 }

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

@@ -1,2 +1,13 @@
 import { Label as AriaLabel } from 'react-aria-components';
-export declare const Label: React.FC<React.ComponentPropsWithRef<typeof AriaLabel>>;
+/**
+ * Props for the {@link Label} component.
+ * Extends React Aria's {@link AriaLabel} props.
+ */
+export interface LabelProps extends React.ComponentPropsWithRef<typeof AriaLabel> {
+}
+/**
+ * Accessible field label rendered above or adjacent to an input component.
+ *
+ * Implements Material Design 3 `labelLarge` typography.
+ */
+export declare const Label: React.FC<LabelProps>;

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

@@ -3,7 +3,7 @@ import { t } from "../../../chunks/base";
 import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
 import { Label as i } from "react-aria-components";
-//#region src/components/Input/Label/Label.tsx
+// src/components/Input/Label/Label.tsx
 var a = e(), o = (e) => {
 	let o = (0, a.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -16,7 +16,6 @@ var a = e(), o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as Label };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/Label/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Label as AriaLabel } from \"react-aria-components\";\nimport { typography } from \"@/utils/typography\";\n\nexport const Label: React.FC<React.ComponentPropsWithRef<typeof AriaLabel>> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <AriaLabel\n            slot=\"label\"\n            className={clsx(typography.labelLarge, className)}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;aAIa,KAAiE,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAG7E,IAAA,EAAA,IAAA,IAAA,EAAA,OAH8E,kBAAA,KAAA,GAG9E,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAI4D,IAAA,EAAA,MAAtC,IAAA,EAAK,EAAU,YAAa,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAEnD,OAFmD,EAAA,OAAA,KAAA,EAAA,OAAA,KAFrD,IAAA,kBAAC,GAAD;EACS,MAAA;EACM,WAAA;EAAsC,GAC7C;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAJF;AAIE"}
+{"version":3,"file":"index.js","names":["_c","clsx","AriaLabel","require_compiler_runtime","clsx$1","Label$1","import_compiler_runtime","Label","$","className","props","t0","t1","typography","t2"],"sources":["../../../../src/components/Input/Label/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Label as AriaLabel } from \"react-aria-components\";\nimport { typography } from \"@/utils/typography\";\n\n/**\n * Props for the {@link Label} component.\n * Extends React Aria's {@link AriaLabel} props.\n */\nexport interface LabelProps\n    extends React.ComponentPropsWithRef<typeof AriaLabel> {}\n\n/**\n * Accessible field label rendered above or adjacent to an input component.\n *\n * Implements Material Design 3 `labelLarge` typography.\n */\nexport const Label: React.FC<LabelProps> = ({ className, ...props }) => {\n    return (\n        <AriaLabel\n            slot=\"label\"\n            className={clsx(typography.labelLarge, className)}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;A,aAgBaO,KAA8B,MAAA;CAAA,IAAAC,KAAA,GAAAR,EAAAA,EAAAA,CAAA,CAAA,GAAAS,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAAwB,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAAvB,eAAA,GAAAE,KAAAC,GAAuB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAIN,IAAAD,EAAA,MAAtC,IAAAP,EAAKY,EAAU,YAAaJ,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEnD,OAFmDN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAFrD,IAAA,kBAACV,GAAD;EACS,MAAA;EACM,WAAAU;EAAsC,GAC7CF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAJFM;AAIE"}