@adgytec/adgytec-web-ui-components 2.2.0 → 2.3.1

package/dist/components/Disclosure/context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Disclosure/context/context.ts","../../../../src/components/Disclosure/context/useDisclosureTypographyContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { Typography } from \"@/utils\";\n\nexport type DisclosureTypographyContextValue = {\n    label?: Typography;\n    panel?: Typography;\n};\n\nexport const DisclosureTypographyContext =\n    createContext<DisclosureTypographyContextValue>({});\n","import { useContext } from \"react\";\nimport { type Typography, typography } from \"@/utils\";\nimport { DisclosureTypographyContext } from \"./context\";\n\nexport function useDisclosureTypographyContext({\n    label,\n    panel,\n}: {\n    label?: Typography;\n    panel?: Typography;\n}) {\n    const { label: groupLabel, panel: groupPanel } = useContext(\n        DisclosureTypographyContext\n    );\n\n    const labelTypography =\n        label ?? groupLabel ?? typography.titleMediumEmphasized;\n    const panelTypography = panel ?? groupPanel ?? typography.bodyLarge;\n\n    return { label: labelTypography, panel: panelTypography };\n}\n"],"mappings":";;;;AAQA,IAAa,IACT,EAAgD,CAAC,CAAC;ACLtD,SAAO,EAAA,GAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAwC,EAAA,UAAA,aAAA,GAO3C,EAAA,OAAA,GAAA,OAAA,MAAiD,EAC7C,CACJ,GAEA,IACI,KAAA,KAAuB,EAAU,uBACrC,IAAwB,KAAA,KAAuB,EAAU,WAAW;CAEX,OAFW,EAAA,OAAA,KAAA,EAAA,OAAA,KAE7D,IAAA;EAAA,OAAS;EAAe,OAAS;CAAgB,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAAlD;AAAkD"}
+{"version":3,"file":"index.js","names":["_c","require_compiler_runtime","DisclosureTypographyContext","createContext","import_compiler_runtime","useDisclosureTypographyContext","$","t0","groupLabel","groupPanel","useContext","labelTypography","label","typography","panelTypography","panel","t1"],"sources":["../../../../src/components/Disclosure/context/context.ts","../../../../src/components/Disclosure/context/useDisclosureTypographyContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { Typography } from \"@/utils\";\n\n/**\n * Context value providing inherited typography styles for disclosure components within a group.\n */\nexport interface DisclosureTypographyContextValue {\n    /** Typography applied to {@link DisclosureHeader} labels. */\n    label?: Typography;\n    /** Typography applied to {@link DisclosurePanel} content. */\n    panel?: Typography;\n}\n\n/**\n * React Context used by {@link DisclosureGroup} to pass typography settings down to nested\n * {@link DisclosureHeader} and {@link DisclosurePanel} components.\n */\nexport const DisclosureTypographyContext =\n    createContext<DisclosureTypographyContextValue>({});\n","import { useContext } from \"react\";\nimport { type Typography, typography } from \"@/utils\";\nimport { DisclosureTypographyContext } from \"./context\";\n\n/**\n * Parameters for the {@link useDisclosureTypographyContext} hook.\n */\nexport interface UseDisclosureTypographyContextProps {\n    /** Optional label typography override passed directly to the component. */\n    label?: Typography;\n    /** Optional panel typography override passed directly to the component. */\n    panel?: Typography;\n}\n\n/**\n * Resolves the active typography styles for disclosure headers and panels.\n *\n * Checks explicit component props first, then falls back to inherited values from\n * an enclosing {@link DisclosureGroup}, and finally defaults to Material 3 standard\n * typography (`typography.titleMediumEmphasized` for labels, `typography.bodyLarge` for panels).\n *\n * @param props - Explicit typography overrides from component props.\n * @returns An object containing resolved `label` and `panel` typography classes.\n */\nexport function useDisclosureTypographyContext({\n    label,\n    panel,\n}: UseDisclosureTypographyContextProps) {\n    const { label: groupLabel, panel: groupPanel } = useContext(\n        DisclosureTypographyContext\n    );\n\n    const labelTypography =\n        label ?? groupLabel ?? typography.titleMediumEmphasized;\n    const panelTypography = panel ?? groupPanel ?? typography.bodyLarge;\n\n    return { label: labelTypography, panel: panelTypography };\n}\n"],"mappings":";;;;AAiBA,IAAaE,IACTC,EAAgD,CAAC,CAAC;ACMtD,SAAOE,EAAA,GAAA;CAAA,IAAAC,KAAA,GAAAN,EAAAA,EAAAA,CAAA,CAAA,GAAwC,EAAA,UAAA,aAAAO,GAI3C,EAAA,OAAAC,GAAA,OAAAC,MAAiDC,EAC7CR,CACJ,GAEAS,IACIC,KAAAJ,KAAuBK,EAAU,uBACrCC,IAAwBC,KAAAN,KAAuBI,EAAU,WAAWG;CAEX,OAFWV,EAAA,OAAAK,KAAAL,EAAA,OAAAQ,KAE7D,IAAA;EAAA,OAASH;EAAe,OAASG;CAAgB,GAAC,EAAA,KAAAH,GAAA,EAAA,KAAAG,GAAA,EAAA,KAAAE,KAAA,IAAAV,EAAA,IAAlDU;AAAkD"}

package/dist/components/Disclosure/context/useDisclosureTypographyContext.d.ts

@@ -1,8 +1,24 @@
 import { Typography } from '../../../utils';
-export declare function useDisclosureTypographyContext({ label, panel, }: {
+/**
+ * Parameters for the {@link useDisclosureTypographyContext} hook.
+ */
+export interface UseDisclosureTypographyContextProps {
+    /** Optional label typography override passed directly to the component. */
     label?: Typography;
+    /** Optional panel typography override passed directly to the component. */
     panel?: Typography;
-}): {
+}
+/**
+ * Resolves the active typography styles for disclosure headers and panels.
+ *
+ * Checks explicit component props first, then falls back to inherited values from
+ * an enclosing {@link DisclosureGroup}, and finally defaults to Material 3 standard
+ * typography (`typography.titleMediumEmphasized` for labels, `typography.bodyLarge` for panels).
+ *
+ * @param props - Explicit typography overrides from component props.
+ * @returns An object containing resolved `label` and `panel` typography classes.
+ */
+export declare function useDisclosureTypographyContext({ label, panel, }: UseDisclosureTypographyContextProps): {
     label: Typography;
     panel: Typography;
 };

package/dist/components/Divider/Divider.d.ts

@@ -1,2 +1,31 @@
 import { Separator } from 'react-aria-components';
-export declare const Divider: React.FC<React.ComponentPropsWithRef<typeof Separator>>;
+/**
+ * Props for the {@link Divider} component.
+ * Extends React Aria's {@link Separator} props, supporting orientation (`"horizontal"` or `"vertical"`),
+ * element tag selection (`elementType`), and standard HTML attributes.
+ */
+export interface DividerProps extends React.ComponentPropsWithRef<typeof Separator> {
+}
+/**
+ * A thin horizontal or vertical line component implementing Material Design 3 Divider guidelines.
+ *
+ * Dividers separate, group, and structure content within lists and layouts. Built on top of
+ * React Aria's {@link Separator}, it ensures correct accessibility roles (`role="separator"`,
+ * `aria-orientation`) and adapts dynamically to configurable CSS tokens (`--md-divider-color`).
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@adgytec/web-ui-components';
+ *
+ * // Standard horizontal divider
+ * <Divider />
+ *
+ * // Vertical separator between inline elements
+ * <div style={{ display: 'flex', height: '24px', alignItems: 'center' }}>
+ *     <span>Left Item</span>
+ *     <Divider orientation="vertical" />
+ *     <span>Right Item</span>
+ * </div>
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/Icon/Icon.d.ts

@@ -1,2 +1,31 @@
 import { IconProps } from './types';
+/**
+ * A standardized icon wrapper component implementing Material Design 3 icon sizing guidelines.
+ *
+ * Wraps `lucide-react` icons to enforce consistent sizing via predefined size tokens
+ * (`"dense"`, `"standard"`, `"medium"`, `"large"`, `"extra-large"`), custom numeric pixel values,
+ * or proportional `1em` inline text scaling via `withText`.
+ *
+ * @see https://m3.material.io/styles/icons/applying-icons
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@adgytec/web-ui-components';
+ * import { Settings, AlertTriangle } from 'lucide-react';
+ *
+ * // Standard 24px icon (default)
+ * <Icon icon={Settings} />
+ *
+ * // Large preset icon
+ * <Icon icon={Settings} size="large" />
+ *
+ * // Explicit numeric pixel dimension
+ * <Icon icon={AlertTriangle} size={36} />
+ *
+ * // Inline with typography (scales to 1em)
+ * <h2>
+ *     <Icon icon={Settings} withText /> Account Settings
+ * </h2>
+ * ```
+ */
 export declare const Icon: React.FC<IconProps>;

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

@@ -1,7 +1,35 @@
 import { LucideIcon } from 'lucide-react';
+/**
+ * Predefined icon size presets aligning with Material Design 3 icon specifications.
+ *
+ * - `"dense"`: Compact size (`--md-sys-icon-dense`, typically 18px).
+ * - `"standard"`: Default body icon size (`--md-sys-icon-standard`, typically 24px).
+ * - `"medium"`: Medium accent size (`--md-sys-icon-medium`, typically 32px).
+ * - `"large"`: Large hero or feature size (`--md-sys-icon-large`, typically 40px).
+ * - `"extra-large"`: Extra large display size (`--md-sys-icon-extra-large`, typically 48px).
+ */
 export type IconSize = "dense" | "standard" | "medium" | "large" | "extra-large";
+/**
+ * Props for the {@link Icon} component.
+ * Extends Lucide SVG props while overriding `size` to support design system presets or pixel values.
+ */
 export interface IconProps extends Omit<React.ComponentPropsWithRef<LucideIcon>, "size"> {
+    /**
+     * The Lucide icon component to render.
+     */
     icon: LucideIcon;
+    /**
+     * The size of the icon. Accepts a predefined design system preset or an exact numeric pixel value.
+     * Note: Ignored when {@link withText} is `true`.
+     *
+     * @default "standard"
+     */
     size?: IconSize | number;
+    /**
+     * When `true`, dimensions are set to `1em` by `1em`, allowing the icon to scale dynamically
+     * with the font size of the surrounding text or typography element.
+     *
+     * @default false
+     */
     withText?: boolean;
 }

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

@@ -1,5 +1,14 @@
 import { RefProp } from '../../../utils';
-export declare const CharacterCount: React.FC<{
+/**
+ * Props for the {@link CharacterCount} component.
+ */
+export interface CharacterCountProps extends RefProp<"span"> {
+    /** Current character count. */
     count: number;
+    /** Optional maximum allowed character limit. */
     maxLength?: number;
-} & RefProp<"span">>;
+}
+/**
+ * Displays the current character count and optional maximum character limit below text inputs.
+ */
+export declare const CharacterCount: React.FC<CharacterCountProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["count"],"sources":["../../../../src/components/Input/CharacterCount/CharacterCount.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type RefProp, typography } from \"@/utils\";\nimport { CharacterCountStyles } from \"../core\";\n\nexport const CharacterCount: React.FC<\n    {\n        count: number;\n        maxLength?: number;\n    } & RefProp<\"span\">\n> = ({ count, maxLength, ...props }) => {\n    return (\n        <span\n            className={clsx(CharacterCountStyles, typography.labelMedium)}\n            {...props}\n        >\n            {count}\n            {maxLength !== undefined && `/${maxLength}`}\n        </span>\n    );\n};\n"],"mappings":";;;;;;aAIa,KAKT,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAA+B,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,OAA9B,4BAAA,KAAA,GAA8B,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,KAGZ,IAAA,EAAK,GAAsB,EAAU,WAAY,GAAC,EAAA,KAAA,KAAA,IAAA,EAAA;CAI5D,IAAA,IAAA,MAAc,KAAA,KAAd,IAA+B,KAAW;CACxC,OADwC,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAL/C,IAAA,kBAAA,QAAA;EACe,WAAA;EAAkD,GACzD;YAFR,CAIK,GACA,CACE;KAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IANP;AAMO"}
+{"version":3,"file":"index.js","names":["count","_c","clsx","require_compiler_runtime","CharacterCountStyles","clsx$1","import_compiler_runtime","CharacterCount","$","count","maxLength","props","t0","t1","typography","t2","t3"],"sources":["../../../../src/components/Input/CharacterCount/CharacterCount.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type RefProp, typography } from \"@/utils\";\nimport { CharacterCountStyles } from \"../core\";\n\n/**\n * Props for the {@link CharacterCount} component.\n */\nexport interface CharacterCountProps extends RefProp<\"span\"> {\n    /** Current character count. */\n    count: number;\n    /** Optional maximum allowed character limit. */\n    maxLength?: number;\n}\n\n/**\n * Displays the current character count and optional maximum character limit below text inputs.\n */\nexport const CharacterCount: React.FC<CharacterCountProps> = ({\n    count,\n    maxLength,\n    ...props\n}) => {\n    return (\n        <span\n            className={clsx(CharacterCountStyles, typography.labelMedium)}\n            {...props}\n        >\n            {count}\n            {maxLength !== undefined && `/${maxLength}`}\n        </span>\n    );\n};\n"],"mappings":";;;;;;aAiBaO,KAAgD,MAAA;CAAA,IAAAC,KAAA,GAAAP,EAAAA,EAAAA,CAAA,CAAA,GAAAQ,GAAAC,GAAAC;CAAA,AAAAH,EAAA,OAAAI,KAI5D,IAAAJ,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OAJ6D,yBAAA,GAAAG,KAAAC,GAI7D,EAAA,KAAAA,GAAA,EAAA,KAAAH,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAL,EAAA,OAAA,OAAA,IAAA,2BAAA,KAGsB,IAAAN,EAAKE,GAAsBU,EAAU,WAAY,GAAC,EAAA,KAAAD,KAAA,IAAAL,EAAA;CAI5D,IAAAO,IAAAL,MAAc,KAAA,KAAd,IAA+BA,KAAWM;CACxC,OADwCR,EAAA,OAAAC,KAAAD,EAAA,OAAAG,KAAAH,EAAA,OAAAO,KAL/C,IAAA,kBAAA,QAAA;EACe,WAAAF;EAAkD,GACzDF;EAFR,UAAA,CAIKF,GACAM,CACE;KAAA,EAAA,KAAAN,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAI,GAAA,EAAA,KAAAC,KAAA,IAAAR,EAAA,IANPQ;AAMO"}

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

@@ -1,2 +1,17 @@
 import { CheckboxProps } from './types';
+/**
+ * A checkbox control implementing Material Design 3 Checkbox guidelines.
+ *
+ * Supports unchecked, checked, and indeterminate states with smooth animated SVG paths,
+ * accessible keyboard activation, and flexible label positioning.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@adgytec/web-ui-components';
+ *
+ * <Checkbox isSelected={agree} onChange={setAgree}>
+ *     I accept the terms and conditions
+ * </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 {@link Checkbox} controls.
+ *
+ * Coordinates group selection values, accessible group labels, helper descriptions,
+ * error validation messages, and consistent item spacing.
+ *
+ * @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,14 @@
 import { CheckboxLabelPlacement } from './types';
-export type CheckboxGroupContextValue = {
+/**
+ * Shared context value provided by {@link CheckboxGroup} to child {@link Checkbox} components.
+ */
+export interface CheckboxGroupContextValue {
+    /** Inherited label placement. */
     labelPlacement?: CheckboxLabelPlacement;
+    /** Inherited container state layer flag. */
     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,56 @@
 import { ReactNode } from 'react';
 import { Checkbox, 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 {@link CheckboxGroup} component.
+ * Extends React Aria's `CheckboxGroup` props and {@link CoreInputProps}.
+ */
 export interface CheckboxGroupProps extends Omit<React.ComponentPropsWithRef<typeof CheckboxGroup>, "children">, CoreInputProps {
+    /** The child checkboxes or custom content rendered inside the group. */
     children?: ReactNode;
+    /**
+     * Vertical spacing (in pixels) between child checkbox items.
+     *
+     * @default 24
+     */
     checkboxItemsGap?: number;
+    /**
+     * Default label placement applied to all child checkboxes within the group.
+     *
+     * @default "end"
+     */
     labelPlacement?: CheckboxLabelPlacement;
+    /**
+     * When `true`, displays the state layer (hover, press, focus) across the entire checkbox container
+     * rather than only on the indicator box.
+     *
+     * @default false
+     */
     containerStateLayer?: boolean;
 }
+/**
+ * Props for the {@link Checkbox} component.
+ * Extends React Aria's `Checkbox` props.
+ */
 export interface CheckboxProps extends React.ComponentPropsWithRef<typeof Checkbox> {
+    /**
+     * Alignment of the label text relative to the indicator box.
+     * Overrides the group-level setting if nested inside a {@link CheckboxGroup}.
+     *
+     * @default "end"
+     */
     labelPlacement?: CheckboxLabelPlacement;
+    /**
+     * When `true`, displays the state layer (hover, press, focus) across the entire checkbox container.
+     *
+     * @default false
+     */
     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.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.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.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/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.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":";;;;;;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/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;