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

package/dist/components/Button/ToggleButton/index.js

@@ -6,7 +6,7 @@ import { a, c as o, d as s, f as c, i as l, l as u, n as d, o as f, p, t as m, u
 import { clsx as g } from "clsx";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import { ToggleButton as y } from "react-aria-components";
-//#region src/components/Button/ToggleButton/ToggleButton.tsx
+// src/components/Button/ToggleButton/ToggleButton.tsx
 var b = e(), x = (e) => {
 	let x = (0, b.c)(45), S, C, w, T, E, D, O, k, A, j, M;
 	x[0] === e ? (S = x[1], C = x[2], w = x[3], T = x[4], E = x[5], D = x[6], O = x[7], k = x[8], A = x[9], j = x[10], M = x[11]) : ({size: j, shape: A, color: w, tooltip: M, selectedIcon: k, icon: T, children: S, onPress: D, className: C, iconPlacement: E, ...O} = e, x[0] = e, x[1] = S, x[2] = C, x[3] = w, x[4] = T, x[5] = E, x[6] = D, x[7] = O, x[8] = k, x[9] = A, x[10] = j, x[11] = M);
@@ -70,7 +70,6 @@ var b = e(), x = (e) => {
 	let J;
 	return x[42] !== q || x[43] !== M ? (J = m(q, M), x[42] = q, x[43] = M, x[44] = J) : J = x[44], J;
 };
-//#endregion
 export { x as ToggleButton };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Button/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["renderProps","iconToRender","iconSize","handlePress"],"sources":["../../../../src/components/Button/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n    ButtonCore,\n    ButtonIconSizeMapping,\n    ButtonLabelTextMapping,\n    ButtonReset,\n    ButtonSizeBase,\n    buttonColorBase,\n    buttonColorConfig,\n    buttonSizeConfig,\n    newButtonBaseDataAttrs,\n    useButtonConfig,\n    withTooltip,\n} from \"../core\";\nimport type { ToggleButtonProps } from \"./types\";\n\nexport const ToggleButton: React.FC<ToggleButtonProps> = ({\n    size,\n    shape,\n    color,\n    tooltip,\n    selectedIcon,\n    icon,\n    children,\n    onPress,\n    className,\n    iconPlacement,\n    ...props\n}) => {\n    const { buttonColor, buttonShape, buttonSize, buttonIconPlacement } =\n        useButtonConfig({\n            size,\n            shape,\n            color,\n            iconPlacement,\n        });\n\n    const { splashInfo, handlePress } = useSplash(onPress);\n    const isChildFunc = typeof children === \"function\";\n\n    const baseButtonDataAttrs = newButtonBaseDataAttrs({\n        shape: buttonShape,\n        size: buttonSize,\n        color: buttonColor,\n    });\n\n    const toggleButtonDataAttrs = {\n        ...baseButtonDataAttrs,\n        \"data-toggle-button\": true,\n    };\n\n    return withTooltip(\n        <AriaToggleButton\n            onPress={handlePress}\n            className={(renderProps) =>\n                clsx(\n                    ButtonReset,\n                    TapTarget,\n                    buttonSizeConfig(buttonSize),\n                    buttonColorConfig(buttonColor),\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            {...toggleButtonDataAttrs}\n            data-button\n        >\n            {(renderProps) => {\n                const {\n                    isSelected,\n                    isDisabled,\n                    isFocusVisible,\n                    isFocused,\n                    isPressed,\n                    isHovered,\n                } = renderProps;\n\n                const dataAttrs = {\n                    ...toggleButtonDataAttrs,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-selected\": isSelected || undefined,\n                    \"data-visual-button\": true,\n                };\n\n                let iconToRender = icon;\n                if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n                const iconSize = ButtonIconSizeMapping[buttonSize];\n\n                const iconComp = iconToRender && (\n                    <Icon icon={iconToRender} size={iconSize} />\n                );\n\n                return (\n                    <span\n                        className={clsx(\n                            ButtonCore,\n                            buttonColorBase,\n                            ButtonSizeBase,\n                            ButtonLabelTextMapping[buttonSize]\n                        )}\n                        {...dataAttrs}\n                    >\n                        {splashInfo && <Splash {...splashInfo} />}\n\n                        {buttonIconPlacement === \"start\" && iconComp}\n\n                        {isChildFunc ? children(renderProps) : children}\n\n                        {buttonIconPlacement === \"end\" && iconComp}\n                    </span>\n                );\n            }}\n        </AriaToggleButton>,\n        tooltip\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["renderProps","iconToRender","iconSize","handlePress","_c","AriaToggleButton","require_compiler_runtime","Icon","Splash","useSplash","buttonSizeConfig","ButtonCore","ButtonReset","ButtonIconSizeMapping","buttonColorBase","useButtonConfig","ButtonSizeBase","withTooltip","buttonColorConfig","ToggleButton$1","import_compiler_runtime","ToggleButton","$","children","className","color","icon","iconPlacement","onPress","props","selectedIcon","shape","size","tooltip","t0","t1","isChildFunc","t2","buttonColor","buttonShape","buttonSize","newButtonBaseDataAttrs","baseButtonDataAttrs","t3","toggleButtonDataAttrs","t4","clsx","TapTarget","renderProps","t5","buttonIconPlacement","splashInfo","renderProps_0","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isSelected","iconToRender","iconSize","iconComp","ButtonLabelTextMapping","t6","handlePress","t7"],"sources":["../../../../src/components/Button/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n    ButtonCore,\n    ButtonIconSizeMapping,\n    ButtonLabelTextMapping,\n    ButtonReset,\n    ButtonSizeBase,\n    buttonColorBase,\n    buttonColorConfig,\n    buttonSizeConfig,\n    newButtonBaseDataAttrs,\n    useButtonConfig,\n    withTooltip,\n} from \"../core\";\nimport type { ToggleButtonProps } from \"./types\";\n\n/**\n * A two-state toggle button implementing Material Design 3 Toggle Button guidelines.\n *\n * Allows users to toggle between active/selected and inactive/unselected states.\n * Supports swapping between `icon` and `selectedIcon` based on current selection state,\n * flexible sizing, shapes, and Material 3 toggle button color variants.\n *\n * Built on top of React Aria's `ToggleButton`.\n *\n * @example\n * ```tsx\n * <ToggleButton\n *     icon={Bookmark}\n *     selectedIcon={BookmarkCheck}\n *     isSelected={isBookmarked}\n *     onChange={setIsBookmarked}\n * >\n *     Bookmark\n * </ToggleButton>\n * ```\n */\nexport const ToggleButton: React.FC<ToggleButtonProps> = ({\n    size,\n    shape,\n    color,\n    tooltip,\n    selectedIcon,\n    icon,\n    children,\n    onPress,\n    className,\n    iconPlacement,\n    ...props\n}) => {\n    const { buttonColor, buttonShape, buttonSize, buttonIconPlacement } =\n        useButtonConfig({\n            size,\n            shape,\n            color,\n            iconPlacement,\n        });\n\n    const { splashInfo, handlePress } = useSplash(onPress);\n    const isChildFunc = typeof children === \"function\";\n\n    const baseButtonDataAttrs = newButtonBaseDataAttrs({\n        shape: buttonShape,\n        size: buttonSize,\n        color: buttonColor,\n    });\n\n    const toggleButtonDataAttrs = {\n        ...baseButtonDataAttrs,\n        \"data-toggle-button\": true,\n    };\n\n    return withTooltip(\n        <AriaToggleButton\n            onPress={handlePress}\n            className={(renderProps) =>\n                clsx(\n                    ButtonReset,\n                    TapTarget,\n                    buttonSizeConfig(buttonSize),\n                    buttonColorConfig(buttonColor),\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            {...toggleButtonDataAttrs}\n            data-button\n        >\n            {(renderProps) => {\n                const {\n                    isSelected,\n                    isDisabled,\n                    isFocusVisible,\n                    isFocused,\n                    isPressed,\n                    isHovered,\n                } = renderProps;\n\n                const dataAttrs = {\n                    ...toggleButtonDataAttrs,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-selected\": isSelected || undefined,\n                    \"data-visual-button\": true,\n                };\n\n                let iconToRender = icon;\n                if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n                const iconSize = ButtonIconSizeMapping[buttonSize];\n\n                const iconComp = iconToRender && (\n                    <Icon icon={iconToRender} size={iconSize} />\n                );\n\n                return (\n                    <span\n                        className={clsx(\n                            ButtonCore,\n                            buttonColorBase,\n                            ButtonSizeBase,\n                            ButtonLabelTextMapping[buttonSize]\n                        )}\n                        {...dataAttrs}\n                    >\n                        {splashInfo && <Splash {...splashInfo} />}\n\n                        {buttonIconPlacement === \"start\" && iconComp}\n\n                        {isChildFunc ? children(renderProps) : children}\n\n                        {buttonIconPlacement === \"end\" && iconComp}\n                    </span>\n                );\n            }}\n        </AriaToggleButton>,\n        tooltip\n    );\n};\n"],"mappings":"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"}

package/dist/components/Button/ToggleButton/types.d.ts

@@ -1,7 +1,21 @@
 import { LucideIcon } from 'lucide-react';
 import { ToggleButton } from 'react-aria-components';
 import { ButtonBaseProps, ToggleButtonColor } from '../core';
+/**
+ * Props for the {@link ToggleButton} component.
+ * Extends React Aria's {@link ToggleButton} props with customized color options and toggle state icon support.
+ */
 export interface ToggleButtonProps extends React.ComponentPropsWithRef<typeof ToggleButton>, Omit<ButtonBaseProps, "color"> {
+    /**
+     * Optional icon to render when the toggle button is in the selected (`isSelected = true`) state.
+     * If omitted, {@link ButtonBaseProps.icon} is used for both selected and unselected states.
+     */
     selectedIcon?: LucideIcon;
+    /**
+     * Visual color style variant for the toggle button.
+     * Note: Does not include `"text"` since toggle buttons require visual container state changes.
+     *
+     * @default "filled"
+     */
     color?: ToggleButtonColor;
 }

package/dist/components/Button/ToggleIconButton/ToggleIconButton.d.ts

@@ -1,2 +1,23 @@
 import { ToggleIconButtonProps } from './types';
+/**
+ * A compact, icon-only toggle button implementing Material Design 3 Toggle Icon Buttons.
+ *
+ * Allows users to toggle between two states using a single icon button (e.g. mute/unmute, bookmark/unbookmark).
+ * Switches between `icon` and `selectedIcon` based on the current selection state.
+ *
+ * Built on top of React Aria's `ToggleButton`. Always provide an accessible `aria-label`
+ * or `aria-labelledby` attribute for screen reader accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ToggleIconButton
+ *     icon={Volume2}
+ *     selectedIcon={VolumeX}
+ *     isSelected={isMuted}
+ *     onChange={setIsMuted}
+ *     tooltip={isMuted ? "Unmute" : "Mute"}
+ *     aria-label={isMuted ? "Unmute" : "Mute"}
+ * />
+ * ```
+ */
 export declare const ToggleIconButton: React.FC<ToggleIconButtonProps>;

package/dist/components/Button/ToggleIconButton/index.js

@@ -5,7 +5,7 @@ import { c as i, d as a, f as o, l as s, n as c, o as l, p as u, s as d, t as f,
 import { clsx as m } from "clsx";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { ToggleButton as _ } from "react-aria-components";
-//#region src/components/Button/ToggleIconButton/ToggleIconButton.tsx
+// src/components/Button/ToggleIconButton/ToggleIconButton.tsx
 var v = ({ size: v, shape: y, color: b, width: x = "default", tooltip: S, selectedIcon: C, icon: w, onPress: T, className: E, ...D }) => {
 	let { buttonColor: O, buttonShape: k, buttonSize: A } = c({
 		size: v,
@@ -51,7 +51,6 @@ var v = ({ size: v, shape: y, color: b, width: x = "default", tooltip: S, select
 		}
 	}), S);
 };
-//#endregion
 export { v as ToggleIconButton };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Button/ToggleIconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Button/ToggleIconButton/ToggleIconButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n    ButtonCore,\n    ButtonReset,\n    ButtonSizeBase,\n    buttonColorBase,\n    buttonColorConfig,\n    buttonSizeConfig,\n    IconButtonIconSizeMapping,\n    newButtonBaseDataAttrs,\n    useButtonConfig,\n    withTooltip,\n} from \"../core\";\nimport type { ToggleIconButtonProps } from \"./types\";\n\nexport const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({\n    size,\n    shape,\n    color,\n    width = \"default\",\n    tooltip,\n    selectedIcon,\n    icon,\n    onPress,\n    className,\n    ...props\n}) => {\n    const { buttonColor, buttonShape, buttonSize } = useButtonConfig({\n        size,\n        shape,\n        color,\n    });\n\n    const { splashInfo, handlePress } = useSplash(onPress);\n\n    const baseButtonDataAttrs = newButtonBaseDataAttrs({\n        shape: buttonShape,\n        size: buttonSize,\n        color: buttonColor,\n    });\n\n    const iconButtonDataAttrs = {\n        ...baseButtonDataAttrs,\n        \"data-width\": width,\n        \"data-icon-button\": true,\n        \"data-toggle-button\": true,\n    };\n\n    return withTooltip(\n        <AriaToggleButton\n            onPress={handlePress}\n            className={(renderProps) =>\n                clsx(\n                    ButtonReset,\n                    TapTarget,\n                    buttonSizeConfig(buttonSize),\n                    buttonColorConfig(buttonColor),\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            {...iconButtonDataAttrs}\n            data-button\n        >\n            {({\n                isSelected,\n                isDisabled,\n                isFocusVisible,\n                isFocused,\n                isPressed,\n                isHovered,\n            }) => {\n                const dataAttrs = {\n                    ...iconButtonDataAttrs,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-selected\": isSelected || undefined,\n                    \"data-visual-button\": true,\n                };\n\n                let iconToRender = icon;\n                if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n                const iconSize = IconButtonIconSizeMapping[buttonSize];\n                return (\n                    <span\n                        className={clsx(\n                            ButtonCore,\n                            buttonColorBase,\n                            ButtonSizeBase\n                        )}\n                        {...dataAttrs}\n                    >\n                        {splashInfo && <Splash {...splashInfo} />}\n\n                        {iconToRender && (\n                            <Icon icon={iconToRender} size={iconSize} />\n                        )}\n                    </span>\n                );\n            }}\n        </AriaToggleButton>,\n        tooltip\n    );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAAqD,EAC9D,SACA,UACA,UACA,WAAQ,WACR,YACA,iBACA,SACA,YACA,cACA,GAAG,QACD;CACF,IAAM,EAAE,gBAAa,gBAAa,kBAAe,EAAgB;EAC7D;EACA;EACA;CACJ,CAAC,GAEK,EAAE,eAAY,mBAAgB,EAAU,CAAO,GAQ/C,IAAsB;EACxB,GAPwB,EAAuB;GAC/C,OAAO;GACP,MAAM;GACN,OAAO;EACX,CAGO;EACH,cAAc;EACd,oBAAoB;EACpB,sBAAsB;CAC1B;CAEA,OAAO,EACH,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,GACA,GACA,EAAiB,CAAU,GAC3B,EAAkB,CAAW,GAC7B,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,GAAI;EACJ,eAAA;aAEE,EACE,eACA,eACA,mBACA,cACA,cACA,mBACE;GACF,IAAM,IAAY;IACd,GAAG;IACH,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,sBAAsB;GAC1B,GAEI,IAAe;GACnB,AAAI,KAAc,MAAc,IAAe;GAE/C,IAAM,IAAW,EAA0B;GAC3C,OACI,kBAAC,QAAD;IACI,WAAW,EACP,GACA,GACA,CACJ;IACA,GAAI;cANR,CAQK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAW,CAAA,GAErC,KACG,kBAAC,GAAD;KAAM,MAAM;KAAc,MAAM;IAAS,CAAA,CAE3C;;EAEd;CACc,CAAA,GAClB,CACJ;AACJ"}
+{"version":3,"file":"index.js","names":["AriaToggleButton","TapTarget","useSplash","buttonSizeConfig","ButtonCore","ButtonReset","buttonColorBase","useButtonConfig","ButtonSizeBase","newButtonBaseDataAttrs","IconButtonIconSizeMapping","withTooltip","buttonColorConfig","ToggleIconButton","props","onPress","iconButtonDataAttrs","buttonShape","buttonSize","buttonColor","width","ToggleButton","handlePress","clsx","className","renderProps","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isSelected","iconToRender","icon","selectedIcon","iconSize","splashInfo","Splash","Icon","tooltip"],"sources":["../../../../src/components/Button/ToggleIconButton/ToggleIconButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n    ButtonCore,\n    ButtonReset,\n    ButtonSizeBase,\n    buttonColorBase,\n    buttonColorConfig,\n    buttonSizeConfig,\n    IconButtonIconSizeMapping,\n    newButtonBaseDataAttrs,\n    useButtonConfig,\n    withTooltip,\n} from \"../core\";\nimport type { ToggleIconButtonProps } from \"./types\";\n\n/**\n * A compact, icon-only toggle button implementing Material Design 3 Toggle Icon Buttons.\n *\n * Allows users to toggle between two states using a single icon button (e.g. mute/unmute, bookmark/unbookmark).\n * Switches between `icon` and `selectedIcon` based on the current selection state.\n *\n * Built on top of React Aria's `ToggleButton`. Always provide an accessible `aria-label`\n * or `aria-labelledby` attribute for screen reader accessibility.\n *\n * @example\n * ```tsx\n * <ToggleIconButton\n *     icon={Volume2}\n *     selectedIcon={VolumeX}\n *     isSelected={isMuted}\n *     onChange={setIsMuted}\n *     tooltip={isMuted ? \"Unmute\" : \"Mute\"}\n *     aria-label={isMuted ? \"Unmute\" : \"Mute\"}\n * />\n * ```\n */\nexport const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({\n    size,\n    shape,\n    color,\n    width = \"default\",\n    tooltip,\n    selectedIcon,\n    icon,\n    onPress,\n    className,\n    ...props\n}) => {\n    const { buttonColor, buttonShape, buttonSize } = useButtonConfig({\n        size,\n        shape,\n        color,\n    });\n\n    const { splashInfo, handlePress } = useSplash(onPress);\n\n    const baseButtonDataAttrs = newButtonBaseDataAttrs({\n        shape: buttonShape,\n        size: buttonSize,\n        color: buttonColor,\n    });\n\n    const iconButtonDataAttrs = {\n        ...baseButtonDataAttrs,\n        \"data-width\": width,\n        \"data-icon-button\": true,\n        \"data-toggle-button\": true,\n    };\n\n    return withTooltip(\n        <AriaToggleButton\n            onPress={handlePress}\n            className={(renderProps) =>\n                clsx(\n                    ButtonReset,\n                    TapTarget,\n                    buttonSizeConfig(buttonSize),\n                    buttonColorConfig(buttonColor),\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            {...iconButtonDataAttrs}\n            data-button\n        >\n            {({\n                isSelected,\n                isDisabled,\n                isFocusVisible,\n                isFocused,\n                isPressed,\n                isHovered,\n            }) => {\n                const dataAttrs = {\n                    ...iconButtonDataAttrs,\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-selected\": isSelected || undefined,\n                    \"data-visual-button\": true,\n                };\n\n                let iconToRender = icon;\n                if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n                const iconSize = IconButtonIconSizeMapping[buttonSize];\n                return (\n                    <span\n                        className={clsx(\n                            ButtonCore,\n                            buttonColorBase,\n                            ButtonSizeBase\n                        )}\n                        {...dataAttrs}\n                    >\n                        {splashInfo && <Splash {...splashInfo} />}\n\n                        {iconToRender && (\n                            <Icon icon={iconToRender} size={iconSize} />\n                        )}\n                    </span>\n                );\n            }}\n        </AriaToggleButton>,\n        tooltip\n    );\n};\n"],"mappings":";;;;;;;;AAyCA,IAAaa,KAAqD,EAC9D,SACA,UACA,UACA,WAAQ,WACR,YACA,iBACA,SACA,YACA,cACA,GAAGC,QACD;CACF,IAAM,EAAE,gBAAa,gBAAa,kBAAeP,EAAgB;EAC7D;EACA;EACA;CACJ,CAAC,GAEK,EAAE,eAAY,mBAAgBL,EAAUa,CAAO,GAQ/CC,IAAsB;EACxB,GAPwBP,EAAuB;GAC/C,OAAOQ;GACP,MAAMC;GACN,OAAOC;EACX,CAGO;EACH,cAAcC;EACd,oBAAoB;EACpB,sBAAsB;CAC1B;CAEA,OAAOT,EACH,kBAACX,GAAD;EACI,SAASsB;EACT,YAAY,MACRC,EACIlB,GACAJ,GACAE,EAAiBe,CAAU,GAC3BN,EAAkBO,CAAW,GAC7B,OAAOK,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEJ,GAAIV;EACJ,GAAIE;EACJ,eAAA;EAEE,WAAA,EACE,eACA,eACA,mBACA,cACA,cACA,mBACE;GACF,IAAMU,IAAY;IACd,GAAGV;IACH,gBAAgBW,KAAa,KAAA;IAC7B,iBAAiBC,KAAc,KAAA;IAC/B,gBAAgBC,KAAa,KAAA;IAC7B,sBAAsBC,KAAkB,KAAA;IACxC,gBAAgBC,KAAa,KAAA;IAC7B,iBAAiBC,KAAc,KAAA;IAC/B,sBAAsB;GAC1B,GAEIC,IAAeC;GACnB,AAAIF,KAAcG,MAAc,IAAeA;GAE/C,IAAMC,IAAW1B,EAA0BQ;GAC3C,OACI,kBAAC,QAAD;IACI,WAAWK,EACPnB,GACAE,GACAE,CACJ;IACA,GAAIkB;IANR,UAAA,CAQKW,KAAc,kBAACC,GAAD,EAAQ,GAAID,EAAW,CAAA,GAErCJ,KACG,kBAACM,GAAD;KAAM,MAAMN;KAAc,MAAMG;IAAS,CAAA,CAE3C;;EAEd;CACc,CAAA,GAClBI,CACJ;AACJ"}

package/dist/components/Button/ToggleIconButton/types.d.ts

@@ -1,6 +1,15 @@
 import { LucideIcon } from 'lucide-react';
 import { ToggleButton } from 'react-aria-components';
 import { IconButtonBaseProps } from '../core';
+/**
+ * Props for the {@link ToggleIconButton} component.
+ * Extends React Aria's {@link ToggleButton} props (omitting `children`) with {@link IconButtonBaseProps}
+ * and support for a distinct icon in the selected state.
+ */
 export interface ToggleIconButtonProps extends Omit<React.ComponentPropsWithRef<typeof ToggleButton>, "children">, IconButtonBaseProps {
+    /**
+     * Optional icon to render when the toggle button is in the selected (`isSelected = true`) state.
+     * If omitted, {@link IconButtonBaseProps.icon} is used for both selected and unselected states.
+     */
     selectedIcon?: LucideIcon;
 }

package/dist/components/Button/core/button.d.ts

@@ -3,25 +3,58 @@ import { AllButtonColor, ButtonColor, IconButtonColor } from './color';
 import { ButtonShape } from './shape';
 import { ButtonSize } from './sizes';
 import { IconButtonWidth } from './width';
+/**
+ * Determines whether an icon inside a button is rendered before or after the text label.
+ *
+ * - `"start"`: Renders icon at the leading edge (before text).
+ * - `"end"`: Renders icon at the trailing edge (after text).
+ */
 export type ButtonIconPlacement = "start" | "end";
+/**
+ * Core props shared across standard text/label button components (e.g. `Button`, `LinkButton`).
+ */
 export interface ButtonBaseProps {
+    /** Visual style and color scheme of the button. Defaults to `"filled"`. */
     color?: ButtonColor;
+    /** Size scale of the button. Defaults to `"small"`. */
     size?: ButtonSize;
+    /** Corner rounding style (`"round"` or `"square"`). Defaults to `"round"`. */
     shape?: ButtonShape;
+    /** Optional tooltip text displayed on hover/focus. */
     tooltip?: string;
+    /** Optional Lucide icon component displayed alongside label text. */
     icon?: LucideIcon;
+    /** Icon placement relative to label text (`"start"` or `"end"`). Defaults to `"start"`. */
     iconPlacement?: ButtonIconPlacement;
 }
+/**
+ * Core props shared across icon-only button components (e.g. `IconButton`, `LinkIconButton`).
+ */
 export interface IconButtonBaseProps {
+    /** Visual style and color scheme of the icon button. Defaults to `"standard"`. */
     color?: IconButtonColor;
+    /** Size scale of the icon button. Defaults to `"small"`. */
     size?: ButtonSize;
+    /** Corner rounding style (`"round"` or `"square"`). Defaults to `"round"`. */
     shape?: ButtonShape;
+    /** Width variation (`"narrow"`, `"default"`, or `"wide"`). Defaults to `"default"`. */
     width?: IconButtonWidth;
+    /** Optional tooltip text displayed on hover/focus. */
     tooltip?: string;
+    /** Required Lucide icon component rendered inside the button. */
     icon: LucideIcon;
 }
+/** CSS class resetting default button/link styling (outlines, borders, backgrounds). */
 export declare const ButtonReset: string;
+/** CSS class providing the core layout and flex alignment for button internals. */
 export declare const ButtonCore: string;
+/**
+ * Generates standard data attributes (`data-shape`, `data-size`, `data-color`)
+ * applied to button DOM nodes for CSS attribute styling.
+ *
+ * @param options - Shape, size, and color configuration.
+ * @returns Object with data attributes for spreading onto elements.
+ */
 export declare function newButtonBaseDataAttrs({ shape, size, color, }: {
     shape: ButtonShape;
     color: AllButtonColor;

package/dist/components/Button/core/color.d.ts

@@ -1,9 +1,47 @@
+/**
+ * Fundamental Material 3 button color styles shared across all button variants:
+ * - `"filled"`: High-emphasis solid surface with inverted text.
+ * - `"tonal"`: Medium-high emphasis filled container with primary-tonal background.
+ * - `"outlined"`: Medium-emphasis button with container outline and transparent background.
+ */
 export type CoreButtonColor = "filled" | "tonal" | "outlined";
+/**
+ * Color variants supported by standard buttons (`Button`, `LinkButton`):
+ * - Includes {@link CoreButtonColor} (`"filled"`, `"tonal"`, `"outlined"`).
+ * - `"elevated"`: Low-emphasis surface container with shadow elevation.
+ * - `"text"`: Lowest-emphasis flat text button with transparent background.
+ */
 export type ButtonColor = CoreButtonColor | "elevated" | "text";
+/**
+ * Color variants supported by toggle buttons (`ToggleButton`):
+ * - Includes {@link CoreButtonColor} plus `"elevated"`.
+ */
 export type ToggleButtonColor = CoreButtonColor | "elevated";
+/**
+ * Color variants supported by icon buttons (`IconButton`, `LinkIconButton`):
+ * - Includes {@link CoreButtonColor} plus `"standard"` (unfilled, frameless icon).
+ */
 export type IconButtonColor = CoreButtonColor | "standard";
+/**
+ * Color variants supported by split buttons (`SplitButton`):
+ * - Includes {@link CoreButtonColor} plus `"elevated"`.
+ */
 export type SplitButtonColor = CoreButtonColor | "elevated";
+/**
+ * Color variants supported by connected button groups (`ConnectedButtonGroup`):
+ * - Includes {@link CoreButtonColor} plus `"elevated"`.
+ */
 export type ConnectedButtonGroupColor = CoreButtonColor | "elevated";
+/**
+ * Union of all valid button color style names across all button components.
+ */
 export type AllButtonColor = ButtonColor | IconButtonColor | SplitButtonColor | ConnectedButtonGroupColor;
+/**
+ * Resolves a button color style name to its CSS module class name.
+ *
+ * @param color - The button color identifier.
+ * @returns CSS class name applying the color styling rules.
+ */
 export declare const buttonColorConfig: (color: AllButtonColor) => string;
+/** CSS class providing base color custom properties and transition states. */
 export declare const buttonColorBase: string;

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

@@ -1,2 +1 @@
-import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, p as c, s as l, t as u, u as d } from "../../../chunks/core";
-export { n as ButtonCore, i as ButtonIconSizeMapping, e as ButtonLabelTextMapping, r as ButtonReset, s as ButtonSizeBase, l as IconButtonIconSizeMapping, a as buttonColorBase, d as buttonColorConfig, t as buttonSizeConfig, c as newButtonBaseDataAttrs, o as useButtonConfig, u as withTooltip };
+export { d as ButtonCore, i as ButtonIconSizeMapping, a as ButtonLabelTextMapping, f as ButtonReset, o as ButtonSizeBase, s as IconButtonIconSizeMapping, l as buttonColorBase, u as buttonColorConfig, c as buttonSizeConfig, p as newButtonBaseDataAttrs, n as useButtonConfig, t as withTooltip } from "../../../chunks/core";

package/dist/components/Button/core/shape.d.ts

@@ -1 +1,7 @@
+/**
+ * Supported corner rounding styles for button components.
+ *
+ * - `"round"`: Full border-radius (pill shape for labeled buttons, circular for icon buttons).
+ * - `"square"`: Slightly rounded rectangular corners.
+ */
 export type ButtonShape = "round" | "square";

package/dist/components/Button/core/sizes.d.ts

@@ -1,6 +1,32 @@
+/**
+ * Supported size presets for button and button group components.
+ * Controls dimensions, typography, icon scale, and internal padding.
+ */
 export type ButtonSize = "extra-small" | "small" | "medium" | "large" | "extra-large";
+/**
+ * Maps each {@link ButtonSize} preset to its recommended icon size in pixels
+ * for standard labeled buttons (with leading or trailing icons).
+ */
 export declare const ButtonIconSizeMapping: Record<ButtonSize, number>;
+/**
+ * Maps each {@link ButtonSize} preset to its recommended icon size in pixels
+ * for icon-only buttons (e.g. `IconButton`, `ToggleIconButton`, `LinkIconButton`).
+ * Note that the `"small"` preset uses 24px for icon buttons compared to 20px in labeled buttons.
+ */
 export declare const IconButtonIconSizeMapping: Record<ButtonSize, number>;
+/**
+ * Maps each {@link ButtonSize} preset to its typography token class name
+ * for button label text.
+ */
 export declare const ButtonLabelTextMapping: Record<ButtonSize, string>;
+/**
+ * Resolves the CSS module class name for a given button size preset.
+ *
+ * @param size - The button size preset to retrieve styling for.
+ * @returns The CSS module class name corresponding to the specified size.
+ */
 export declare const buttonSizeConfig: (size: ButtonSize) => string;
+/**
+ * Base CSS module class name applying common layout and sizing structure across buttons.
+ */
 export declare const ButtonSizeBase: string;

package/dist/components/Button/core/useButtonConfig.d.ts

@@ -1,12 +1,37 @@
 import { ButtonIconPlacement } from './button';
 import { ButtonShape } from './shape';
 import { ButtonSize } from './sizes';
+/**
+ * Configuration options passed to {@link useButtonConfig} to resolve button styles.
+ */
 type ButtonConfigOptions<C extends string> = {
+    /** Explicit button size preset override. */
     size?: ButtonSize;
+    /** Explicit button corner shape override. */
     shape?: ButtonShape;
+    /** Explicit button color style override. */
     color?: C;
+    /** Explicit icon placement override relative to label. */
     iconPlacement?: ButtonIconPlacement;
 };
+/**
+ * Resolves button configuration by prioritizing component-level props and falling back
+ * to contextual values from an ancestor `ButtonGroupContext` (or system defaults).
+ *
+ * @template C - String union of allowed color variant values for the button type.
+ * @param options - Component-level prop overrides.
+ * @returns Resolved visual configuration: `buttonSize`, `buttonShape`, `buttonColor`, and `buttonIconPlacement`.
+ *
+ * @example
+ * ```tsx
+ * const { buttonSize, buttonShape, buttonColor, buttonIconPlacement } = useButtonConfig({
+ *     size,
+ *     shape,
+ *     color,
+ *     iconPlacement,
+ * });
+ * ```
+ */
 export declare function useButtonConfig<C extends string>({ size, shape, color, iconPlacement, }: ButtonConfigOptions<C>): {
     buttonSize: ButtonSize;
     buttonShape: ButtonShape;

package/dist/components/Button/core/variant.d.ts

@@ -1 +1,7 @@
+/**
+ * Base button style variant distinguishing standard push buttons from toggle state buttons.
+ *
+ * - `"default"`: Standard interactive push button styling.
+ * - `"toggle"`: Stateful button styling supporting active/pressed selection states.
+ */
 export type ButtonVariant = "default" | "toggle";

package/dist/components/Button/core/width.d.ts

@@ -1 +1,8 @@
+/**
+ * Width sizing options for icon buttons.
+ *
+ * - `"narrow"`: Compact width variant for tighter layouts.
+ * - `"default"`: Standard square/circular aspect ratio matching button height.
+ * - `"wide"`: Expanded horizontal padding for larger tap targets or elongated pill buttons.
+ */
 export type IconButtonWidth = "narrow" | "default" | "wide";

package/dist/components/Button/core/withTooltip.d.ts

@@ -1,2 +1,9 @@
-import { ReactElement } from 'react';
-export declare const withTooltip: (element: ReactElement, tooltip?: string) => import("react").JSX.Element;
+import { ReactNode } from 'react';
+/**
+ * Conditionally wraps a React node in a tooltip trigger when tooltip text is provided.
+ *
+ * @param node - The React element to display (e.g. button or icon button).
+ * @param tooltip - The optional tooltip text to show on hover/focus. If omitted or empty, `node` is returned unwrapped.
+ * @returns The wrapped element with tooltip, or the original node if no tooltip was supplied.
+ */
+export declare const withTooltip: (node: ReactNode, tooltip?: string) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;

package/dist/components/Calendar/BaseCalendar/BaseCalendar.d.ts

@@ -1,5 +1,26 @@
 import { WeekdayStyle } from '../core';
-export declare const BaseCalendar: React.FC<{
+/**
+ * Props for the {@link BaseCalendar} component.
+ */
+export interface BaseCalendarProps {
+    /** Whether the calendar is operating in range selection mode. */
     isRangeCalendar?: boolean;
+    /** Formatting style for weekday column headers. */
     weekdayStyle?: WeekdayStyle;
-}>;
+    /** Accessible label for the previous month button. */
+    previousMonthAriaLabel?: string;
+    /** Accessible label for the next month button. */
+    nextMonthAriaLabel?: string;
+    /** Accessible label for the previous year button. */
+    previousYearAriaLabel?: string;
+    /** Accessible label for the next year button. */
+    nextYearAriaLabel?: string;
+}
+/**
+ * Core calendar layout and view orchestrator.
+ *
+ * Manages the calendar header with navigation controls (prev/next month, prev/next year,
+ * month/year dropdown buttons), animated transitions between grid, month, and year views,
+ * and maintains anchor date state during view changes in range selection mode.
+ */
+export declare const BaseCalendar: React.FC<BaseCalendarProps>;

package/dist/components/Calendar/BaseCalendar/index.js

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

package/dist/components/Calendar/Calendar/Calendar.d.ts

@@ -1,5 +1,42 @@
 import { Calendar as AriaCalendar } from 'react-aria-components';
 import { WeekdayStyle } from '../core';
-export declare const Calendar: React.FC<Omit<React.ComponentPropsWithRef<typeof AriaCalendar>, "children" | "visibleDuration" | "pageBehavior"> & {
+/**
+ * Props for the {@link Calendar} component.
+ * Extends React Aria's `Calendar` props (excluding `children`, `visibleDuration`, and `pageBehavior`).
+ */
+export interface CalendarProps extends Omit<React.ComponentPropsWithRef<typeof AriaCalendar>, "children" | "visibleDuration" | "pageBehavior"> {
+    /**
+     * Formatting style for weekday column headers in the calendar grid.
+     *
+     * - `"narrow"`: Typically a single character (e.g. "S", "M", "T").
+     * - `"short"`: Abbreviated weekday name (e.g. "Sun", "Mon", "Tue").
+     */
     weekdayStyle?: WeekdayStyle;
-}>;
+    /** Accessible label for the previous month button. */
+    previousMonthAriaLabel?: string;
+    /** Accessible label for the next month button. */
+    nextMonthAriaLabel?: string;
+    /** Accessible label for the previous year button. */
+    previousYearAriaLabel?: string;
+    /** Accessible label for the next year button. */
+    nextYearAriaLabel?: string;
+}
+/**
+ * A single date selection calendar component implementing Material Design 3 Date Picker guidelines.
+ *
+ * Features an interactive date grid, fast month and year selector menus, localized date formatting,
+ * keyboard accessibility, and touch-responsive ripple effects. Built on top of React Aria's `Calendar`.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from '@adgytec/web-ui-components';
+ * import { today, getLocalTimeZone } from '@internationalized/date';
+ *
+ * <Calendar
+ *     aria-label="Appointment date"
+ *     minValue={today(getLocalTimeZone())}
+ *     onChange={(date) => console.log('Selected date:', date)}
+ * />
+ * ```
+ */
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/Calendar/Calendar/index.js

@@ -4,23 +4,28 @@ import { t as n } from "../../../chunks/BaseCalendar";
 import r from "clsx";
 import { jsx as i } from "react/jsx-runtime";
 import { Calendar as a } from "react-aria-components";
-//#region src/components/Calendar/Calendar/Calendar.tsx
+// src/components/Calendar/Calendar/Calendar.tsx
 var o = e(), s = (e) => {
-	let s = (0, o.c)(12), c, l, u;
-	s[0] === e ? (c = s[1], l = s[2], u = s[3]) : ({weekdayStyle: u, className: c, ...l} = e, s[0] = e, s[1] = c, s[2] = l, s[3] = u);
-	let d;
-	s[4] === c ? d = s[5] : (d = (e) => r(t, typeof c == "function" ? c(e) : c), s[4] = c, s[5] = d);
-	let f;
-	s[6] === u ? f = s[7] : (f = /* @__PURE__ */ i(n, { weekdayStyle: u }), s[6] = u, s[7] = f);
-	let p;
-	return s[8] !== l || s[9] !== d || s[10] !== f ? (p = /* @__PURE__ */ i(a, {
-		className: d,
-		...l,
+	let s = (0, o.c)(20), c, l, u, d, f, p, m;
+	s[0] === e ? (c = s[1], l = s[2], u = s[3], d = s[4], f = s[5], p = s[6], m = s[7]) : ({weekdayStyle: m, className: c, previousMonthAriaLabel: d, nextMonthAriaLabel: l, previousYearAriaLabel: f, nextYearAriaLabel: u, ...p} = e, s[0] = e, s[1] = c, s[2] = l, s[3] = u, s[4] = d, s[5] = f, s[6] = p, s[7] = m);
+	let h;
+	s[8] === c ? h = s[9] : (h = (e) => r(t, typeof c == "function" ? c(e) : c), s[8] = c, s[9] = h);
+	let g;
+	s[10] !== l || s[11] !== u || s[12] !== d || s[13] !== f || s[14] !== m ? (g = /* @__PURE__ */ i(n, {
+		weekdayStyle: m,
+		previousMonthAriaLabel: d,
+		nextMonthAriaLabel: l,
+		previousYearAriaLabel: f,
+		nextYearAriaLabel: u
+	}), s[10] = l, s[11] = u, s[12] = d, s[13] = f, s[14] = m, s[15] = g) : g = s[15];
+	let _;
+	return s[16] !== p || s[17] !== h || s[18] !== g ? (_ = /* @__PURE__ */ i(a, {
+		className: h,
+		...p,
 		"data-calendar": !0,
-		children: f
-	}), s[8] = l, s[9] = d, s[10] = f, s[11] = p) : p = s[11], p;
+		children: g
+	}), s[16] = p, s[17] = h, s[18] = g, s[19] = _) : _ = s[19], _;
 };
-//#endregion
 export { s as Calendar };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Calendar/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["weekdayStyle"],"sources":["../../../../src/components/Calendar/Calendar/Calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Calendar as AriaCalendar } from \"react-aria-components\";\nimport { BaseCalendar } from \"../BaseCalendar\";\nimport { CalendarBaseStyles, type WeekdayStyle } from \"../core\";\n\nexport const Calendar: React.FC<\n    Omit<\n        React.ComponentPropsWithRef<typeof AriaCalendar>,\n        \"children\" | \"visibleDuration\" | \"pageBehavior\"\n    > & {\n        weekdayStyle?: WeekdayStyle;\n    }\n> = ({ weekdayStyle, className, ...props }) => {\n    return (\n        <AriaCalendar\n            className={(renderProps) =>\n                clsx(\n                    CalendarBaseStyles,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-calendar\n        >\n            <BaseCalendar weekdayStyle={weekdayStyle} />\n        </AriaCalendar>\n    );\n};\n"],"mappings":";;;;;;;aAKa,KAOT,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,EAAA,GAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAsC,IAAA,EAAA,IAAA,IAAA,EAAA,IAAA,IAAA,EAAA,OAArC,mCAAA,KAAA,GAAqC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASzB,IAAA,EAAA,MANM,KAAA,MACP,EACI,GACA,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAKuC,IAAA,EAAA,MAA5C,IAAA,kBAAC,GAAD,EAA4B,gBAAY,CAAA,GAAI,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CACjC,OADiC,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,QAAA,KAZhD,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;EACJ,iBAAA;YAEA;CAZS,CAAA,GAaE,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA,KAbf;AAae"}
+{"version":3,"file":"index.js","names":["weekdayStyle","previousMonthAriaLabel","nextMonthAriaLabel","previousYearAriaLabel","nextYearAriaLabel","_c","clsx","AriaCalendar","require_compiler_runtime","CalendarBaseStyles","BaseCalendar","clsx$1","Calendar$1","import_compiler_runtime","Calendar","$","className","nextMonthAriaLabel","nextYearAriaLabel","previousMonthAriaLabel","previousYearAriaLabel","props","weekdayStyle","t0","t1","renderProps","t2","t3"],"sources":["../../../../src/components/Calendar/Calendar/Calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Calendar as AriaCalendar } from \"react-aria-components\";\nimport { BaseCalendar } from \"../BaseCalendar\";\nimport { CalendarBaseStyles, type WeekdayStyle } from \"../core\";\n\n/**\n * Props for the {@link Calendar} component.\n * Extends React Aria's `Calendar` props (excluding `children`, `visibleDuration`, and `pageBehavior`).\n */\nexport interface CalendarProps\n    extends Omit<\n        React.ComponentPropsWithRef<typeof AriaCalendar>,\n        \"children\" | \"visibleDuration\" | \"pageBehavior\"\n    > {\n    /**\n     * Formatting style for weekday column headers in the calendar grid.\n     *\n     * - `\"narrow\"`: Typically a single character (e.g. \"S\", \"M\", \"T\").\n     * - `\"short\"`: Abbreviated weekday name (e.g. \"Sun\", \"Mon\", \"Tue\").\n     */\n    weekdayStyle?: WeekdayStyle;\n\n    /** Accessible label for the previous month button. */\n    previousMonthAriaLabel?: string;\n\n    /** Accessible label for the next month button. */\n    nextMonthAriaLabel?: string;\n\n    /** Accessible label for the previous year button. */\n    previousYearAriaLabel?: string;\n\n    /** Accessible label for the next year button. */\n    nextYearAriaLabel?: string;\n}\n\n/**\n * A single date selection calendar component implementing Material Design 3 Date Picker guidelines.\n *\n * Features an interactive date grid, fast month and year selector menus, localized date formatting,\n * keyboard accessibility, and touch-responsive ripple effects. Built on top of React Aria's `Calendar`.\n *\n * @example\n * ```tsx\n * import { Calendar } from '@adgytec/web-ui-components';\n * import { today, getLocalTimeZone } from '@internationalized/date';\n *\n * <Calendar\n *     aria-label=\"Appointment date\"\n *     minValue={today(getLocalTimeZone())}\n *     onChange={(date) => console.log('Selected date:', date)}\n * />\n * ```\n */\nexport const Calendar: React.FC<CalendarProps> = ({\n    weekdayStyle,\n    className,\n    previousMonthAriaLabel,\n    nextMonthAriaLabel,\n    previousYearAriaLabel,\n    nextYearAriaLabel,\n    ...props\n}) => {\n    return (\n        <AriaCalendar\n            className={(renderProps) =>\n                clsx(\n                    CalendarBaseStyles,\n                    typeof className === \"function\"\n                        ? className(renderProps)\n                        : className\n                )\n            }\n            {...props}\n            data-calendar\n        >\n            <BaseCalendar\n                weekdayStyle={weekdayStyle}\n                previousMonthAriaLabel={previousMonthAriaLabel}\n                nextMonthAriaLabel={nextMonthAriaLabel}\n                previousYearAriaLabel={previousYearAriaLabel}\n                nextYearAriaLabel={nextYearAriaLabel}\n            />\n        </AriaCalendar>\n    );\n};\n"],"mappings":";;;;;;;A,aAqDac,KAAoC,MAAA;CAAA,IAAAC,KAAA,GAAAV,EAAAA,EAAAA,CAAA,EAAA,GAAAW,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC;CAAA,AAAAP,EAAA,OAAAQ,KAQhD,IAAAR,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OARiD,kIAAA,GAAAM,KAAAE,GAQjD,EAAA,KAAAA,GAAA,EAAA,KAAAP,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAT,EAAA,OAAAC,IASgB,IAAAD,EAAA,MANM,KAAA,MACPT,EACIG,GACA,OAAOO,KAAc,aACfA,EAAUS,CACF,IAFdT,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAQ;CAAA,IAAAE;CAAA,AAAAX,EAAA,QAAAE,KAAAF,EAAA,QAAAG,KAAAH,EAAA,QAAAI,KAAAJ,EAAA,QAAAK,KAAAL,EAAA,QAAAO,KAKL,IAAA,kBAACZ,GAAD;EACkB;EACU;EACJ;EACG;EACJ;CAAiB,CAAA,GACtC,EAAA,MAAAO,GAAA,EAAA,MAAAC,GAAA,EAAA,MAAAC,GAAA,EAAA,MAAAC,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAI,KAAA,IAAAX,EAAA;CAAA,IAAAY;CACS,OADTZ,EAAA,QAAAM,KAAAN,EAAA,QAAAS,KAAAT,EAAA,QAAAW,KAlBN,IAAA,kBAACnB,GAAD;EACe,WAAAiB;EAMN,GAEDH;EACJ,iBAAA;EAEA,UAAAK;CAZS,CAAA,GAmBE,EAAA,MAAAL,GAAA,EAAA,MAAAG,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAC,KAAA,IAAAZ,EAAA,KAnBfY;AAmBe"}

package/dist/components/Calendar/CalendarCell/CalendarCell.d.ts

@@ -1,4 +1,16 @@
 import { CalendarCell as AriaCalendarCell } from 'react-aria-components';
-export declare const CalendarCell: React.FC<Omit<React.ComponentPropsWithRef<typeof AriaCalendarCell>, "children"> & {
+/**
+ * Props for the {@link CalendarCell} component.
+ * Extends React Aria's `CalendarCell` props (excluding `children`).
+ */
+export interface CalendarCellProps extends Omit<React.ComponentPropsWithRef<typeof AriaCalendarCell>, "children"> {
+    /** Whether the cell is being rendered within a range calendar. */
     isRangeCalendar?: boolean;
-}>;
+}
+/**
+ * An individual date cell within the calendar grid.
+ *
+ * Handles day number rendering, selection indicators, range highlight backgrounds
+ * (selection start, in-between range, selection end), and disabled and outside-month styling.
+ */
+export declare const CalendarCell: React.FC<CalendarCellProps>;

package/dist/components/Calendar/CalendarCell/index.js

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

package/dist/components/Calendar/CalendarGrid/CalendarGrid.d.ts

@@ -1,4 +1,14 @@
 import { CalendarGrid as AriaCalendarGrid } from 'react-aria-components';
-export declare const CalendarGrid: React.FC<Omit<React.ComponentPropsWithRef<typeof AriaCalendarGrid>, "children" | "className"> & {
+/**
+ * Props for the {@link CalendarGrid} component.
+ * Extends React Aria's `CalendarGrid` props (excluding `children` and `className`).
+ */
+export interface CalendarGridProps extends Omit<React.ComponentPropsWithRef<typeof AriaCalendarGrid>, "children" | "className"> {
+    /** Whether the calendar is operating in range selection mode. */
     isRangeCalendar?: boolean;
-}>;
+}
+/**
+ * Renders the 7-column calendar date grid, including weekday column headers
+ * and day date cells.
+ */
+export declare const CalendarGrid: React.FC<CalendarGridProps>;

package/dist/components/Calendar/CalendarGrid/index.js

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

package/dist/components/Calendar/CalendarMenuItem/CalendarMenuItem.d.ts

@@ -1,2 +1,13 @@
 import { ListBoxItem } from 'react-aria-components';
-export declare const CalendarMenuItem: React.FC<React.ComponentPropsWithRef<typeof ListBoxItem>>;
+/**
+ * Props for the {@link CalendarMenuItem} component.
+ * Extends React Aria's {@link ListBoxItem} props.
+ */
+export interface CalendarMenuItemProps extends React.ComponentPropsWithRef<typeof ListBoxItem> {
+}
+/**
+ * An individual selectable item within the calendar month and year picker menus.
+ *
+ * Implements Material Design 3 selection styles, focus outlines, and typography.
+ */
+export declare const CalendarMenuItem: React.FC<CalendarMenuItemProps>;