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

package/dist/components/AppBar/AppBarState/AppBarState.d.ts

@@ -1,5 +1,31 @@
 import { ReactNode } from 'react';
-export declare const AppBarState: React.FC<{
+/**
+ * Props for the {@link AppBarState} provider component.
+ */
+export interface AppBarStateProps {
+    /** The child components within the state context. */
     children?: ReactNode;
+    /** Initial scrolling state. Defaults to `false`. */
     initialScrolling?: boolean;
-}>;
+}
+/**
+ * Context provider that manages and shares the scrolling state of the {@link AppBar}.
+ *
+ * When `isScrolling` is true, the `AppBar` container adopts its elevated / scrolled visual style
+ * (using `--md-app-bar-on-scroll-background`).
+ *
+ * @example
+ * ```tsx
+ * import { AppBarState, AppBar, AppBarHeadline } from '@adgytec/web-ui-components';
+ *
+ * function App() {
+ *     return (
+ *         <AppBarState>
+ *             <AppBar headline={<AppBarHeadline>Title</AppBarHeadline>} />
+ *             <main>...</main>
+ *         </AppBarState>
+ *     );
+ * }
+ * ```
+ */
+export declare const AppBarState: React.FC<AppBarStateProps>;

package/dist/components/AppBar/AppBarState/context.d.ts

@@ -1,5 +1,42 @@
+/**
+ * Context value representing the scrolling state of the application for the {@link AppBar}.
+ */
 export type AppBarStateContextType = {
+    /** Whether the page or container is currently scrolled down. */
     isScrolling: boolean;
+    /** Callback to update the scrolling status. */
     updateScrolling: (isScrolling: boolean) => void;
 };
+/**
+ * React context for sharing scroll status with the {@link AppBar} to trigger scrolled styling.
+ */
 export declare const AppBarStateContext: import('react').Context<AppBarStateContextType | null>;
+/**
+ * Hook to access the current scrolling state and updater function for the {@link AppBar}.
+ *
+ * Can be used within scroll containers or event listeners to update the scrolling status
+ * of the enclosing `<AppBar>` (toggling elevated/scrolled styling).
+ *
+ * @returns The active {@link AppBarStateContextType}, or `null` if called outside an `<AppBarState>` provider.
+ *
+ * @example
+ * ```tsx
+ * import { useAppBarState } from '@adgytec/web-ui-components';
+ * import { useEffect } from 'react';
+ *
+ * function ScrollListener() {
+ *     const appBarState = useAppBarState();
+ *
+ *     useEffect(() => {
+ *         const handleScroll = () => {
+ *             appBarState?.updateScrolling(window.scrollY > 0);
+ *         };
+ *         window.addEventListener('scroll', handleScroll, { passive: true });
+ *         return () => window.removeEventListener('scroll', handleScroll);
+ *     }, [appBarState]);
+ *
+ *     return null;
+ * }
+ * ```
+ */
+export declare function useAppBarState(): AppBarStateContextType | null;

package/dist/components/AppBar/AppBarState/index.js

@@ -1,17 +1,23 @@
-import { createContext as e, useMemo as t, useState as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { createContext as e, useContext as t, useMemo as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/AppBar/AppBarState/context.ts
-var i = e(null), a = ({ children: e, initialScrolling: a = !1 }) => {
-	let [o, s] = n(a);
-	return /* @__PURE__ */ r(i, {
-		value: t(() => ({
-			isScrolling: o,
-			updateScrolling: s
-		}), [o]),
+var a = e(null);
+function o() {
+	return t(a);
+}
+//#endregion
+//#region src/components/AppBar/AppBarState/AppBarState.tsx
+var s = ({ children: e, initialScrolling: t = !1 }) => {
+	let [o, s] = r(t), c = n(() => ({
+		isScrolling: o,
+		updateScrolling: s
+	}), [o]);
+	return /* @__PURE__ */ i(a, {
+		value: c,
 		children: e
 	});
 };
 //#endregion
-export { a as AppBarState, i as AppBarStateContext };
+export { s as AppBarState, a as AppBarStateContext, o as useAppBarState };
 
 //# sourceMappingURL=index.js.map

package/dist/components/AppBar/AppBarState/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AppBar/AppBarState/context.ts","../../../../src/components/AppBar/AppBarState/AppBarState.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AppBarStateContextType = {\n    isScrolling: boolean;\n    updateScrolling: (isScrolling: boolean) => void;\n};\n\nexport const AppBarStateContext = createContext<AppBarStateContextType | null>(\n    null\n);\n","import { type ReactNode, useMemo, useState } from \"react\";\nimport { AppBarStateContext } from \"./context\";\n\nexport const AppBarState: React.FC<{\n    children?: ReactNode;\n    initialScrolling?: boolean;\n}> = ({ children, initialScrolling = false }) => {\n    const [scrolling, setScrolling] = useState(initialScrolling);\n    const contextValue = useMemo(\n        () => ({\n            isScrolling: scrolling,\n            updateScrolling: setScrolling,\n        }),\n        [scrolling]\n    );\n\n    return (\n        <AppBarStateContext value={contextValue}>{children}</AppBarStateContext>\n    );\n};\n"],"mappings":";;;AAOA,IAAa,IAAqB,EAC9B,IACJ,GCNa,KAGP,EAAE,aAAU,sBAAmB,SAAY;CAC7C,IAAM,CAAC,GAAW,KAAgB,EAAS,CAAgB;CAS3D,OACI,kBAAC,GAAD;EAAoB,OATH,SACV;GACH,aAAa;GACb,iBAAiB;EACrB,IACA,CAAC,CAAS,CAIiB;EAAe;CAA6B,CAAA;AAE/E"}
+{"version":3,"file":"index.js","names":["AppBarStateContext","createContext","useAppBarState","useContext","AppBarState","scrolling","setScrolling","useState","initialScrolling","contextValue","useMemo"],"sources":["../../../../src/components/AppBar/AppBarState/context.ts","../../../../src/components/AppBar/AppBarState/AppBarState.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Context value representing the scrolling state of the application for the {@link AppBar}.\n */\nexport type AppBarStateContextType = {\n    /** Whether the page or container is currently scrolled down. */\n    isScrolling: boolean;\n    /** Callback to update the scrolling status. */\n    updateScrolling: (isScrolling: boolean) => void;\n};\n\n/**\n * React context for sharing scroll status with the {@link AppBar} to trigger scrolled styling.\n */\nexport const AppBarStateContext = createContext<AppBarStateContextType | null>(\n    null\n);\n\n/**\n * Hook to access the current scrolling state and updater function for the {@link AppBar}.\n *\n * Can be used within scroll containers or event listeners to update the scrolling status\n * of the enclosing `<AppBar>` (toggling elevated/scrolled styling).\n *\n * @returns The active {@link AppBarStateContextType}, or `null` if called outside an `<AppBarState>` provider.\n *\n * @example\n * ```tsx\n * import { useAppBarState } from '@adgytec/web-ui-components';\n * import { useEffect } from 'react';\n *\n * function ScrollListener() {\n *     const appBarState = useAppBarState();\n *\n *     useEffect(() => {\n *         const handleScroll = () => {\n *             appBarState?.updateScrolling(window.scrollY > 0);\n *         };\n *         window.addEventListener('scroll', handleScroll, { passive: true });\n *         return () => window.removeEventListener('scroll', handleScroll);\n *     }, [appBarState]);\n *\n *     return null;\n * }\n * ```\n */\nexport function useAppBarState() {\n    return useContext(AppBarStateContext);\n}\n","import { type ReactNode, useMemo, useState } from \"react\";\nimport { AppBarStateContext } from \"./context\";\n\n/**\n * Props for the {@link AppBarState} provider component.\n */\nexport interface AppBarStateProps {\n    /** The child components within the state context. */\n    children?: ReactNode;\n    /** Initial scrolling state. Defaults to `false`. */\n    initialScrolling?: boolean;\n}\n\n/**\n * Context provider that manages and shares the scrolling state of the {@link AppBar}.\n *\n * When `isScrolling` is true, the `AppBar` container adopts its elevated / scrolled visual style\n * (using `--md-app-bar-on-scroll-background`).\n *\n * @example\n * ```tsx\n * import { AppBarState, AppBar, AppBarHeadline } from '@adgytec/web-ui-components';\n *\n * function App() {\n *     return (\n *         <AppBarState>\n *             <AppBar headline={<AppBarHeadline>Title</AppBarHeadline>} />\n *             <main>...</main>\n *         </AppBarState>\n *     );\n * }\n * ```\n */\nexport const AppBarState: React.FC<AppBarStateProps> = ({\n    children,\n    initialScrolling = false,\n}) => {\n    const [scrolling, setScrolling] = useState(initialScrolling);\n    const contextValue = useMemo(\n        () => ({\n            isScrolling: scrolling,\n            updateScrolling: setScrolling,\n        }),\n        [scrolling]\n    );\n\n    return (\n        <AppBarStateContext value={contextValue}>{children}</AppBarStateContext>\n    );\n};\n"],"mappings":";;;AAeA,IAAaA,IAAqBC,EAC9B,IACJ;AA8BA,SAAOC,IAAA;CAAA,OACIC,EAAWH,CAAkB;AAAC;;;ACfzC,IAAaI,KAA2C,EACpD,aACA,sBAAmB,SACjB;CACF,IAAM,CAACC,GAAWC,KAAgBC,EAASC,CAAgB,GACrDC,IAAeC,SACV;EACH,aAAaL;EACb,iBAAiBC;CACrB,IACA,CAACD,CAAS,CACd;CAEA,OACI,kBAACL,GAAD;EAAoB,OAAOS;EAAe;CAA6B,CAAA;AAE/E"}

package/dist/components/AppBar/core/alignment.d.ts

@@ -1 +1,7 @@
+/**
+ * Text and content alignment variant for the {@link AppBarHeadline} inside an {@link AppBar}.
+ *
+ * - `"default"`: Leading-aligned title following the leading navigation action.
+ * - `"centered"`: Horizontally centered title.
+ */
 export type AppBarAlignment = "default" | "centered";

package/dist/components/AppBar/core/context.d.ts

@@ -1,10 +1,26 @@
 import { AppBarAlignment } from './alignment';
 import { AppBarSize } from './size';
+/**
+ * Context value provided by the {@link AppBar} container to descendant components (such as {@link AppBarHeadline}).
+ */
 export type AppBarContextType = {
+    /** The active layout size variant of the AppBar. */
     size: AppBarSize;
+    /** The active headline alignment mode. */
     alignment: AppBarAlignment;
+    /** The headline container height in pixels. */
     headlineBlockSize: number;
+    /** The active typography CSS class name for the headline. */
     headlineTypography: string;
 };
+/**
+ * React context for sharing configuration between {@link AppBar} and its descendants.
+ */
 export declare const AppBarContext: import('react').Context<AppBarContextType | null>;
+/**
+ * Custom hook to access the active {@link AppBarContext}.
+ *
+ * @throws {Error} If called outside of an `<AppBar>` provider tree.
+ * @returns The active {@link AppBarContextType} values.
+ */
 export declare function useAppBarContext(): AppBarContextType;

package/dist/components/AppBar/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AppBar/core/context.ts","../../../../src/components/AppBar/core/size.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { AppBarAlignment } from \"./alignment\";\nimport type { AppBarSize } from \"./size\";\n\nexport type AppBarContextType = {\n    size: AppBarSize;\n    alignment: AppBarAlignment;\n    headlineBlockSize: number;\n    headlineTypography: string;\n};\n\nexport const AppBarContext = createContext<AppBarContextType | null>(null);\n\nexport function useAppBarContext() {\n    const context = useContext(AppBarContext);\n\n    if (!context) {\n        throw new Error(\n            \"useAppBarContext must be used within AppBar component\"\n        );\n    }\n\n    return context;\n}\n","import { typography } from \"@/utils\";\n\nexport type AppBarSize = \"small\" | \"medium\" | \"large\";\n\nexport const AppBarHeadlineTypography: Record<AppBarSize, string> = {\n    small: typography.titleLarge,\n    medium: typography.headlineMedium,\n    large: typography.displaySmall,\n} as const;\n\nexport const AppBarHeadlineBlockSize: Record<AppBarSize, number> = {\n    small: 28,\n    medium: 36,\n    large: 44,\n} as const;\n"],"mappings":";;;AAWA,IAAa,IAAgB,EAAwC,IAAI;AAEzE,SAAO,IAAA;CACH,IAAA,IAAgB,EAAW,CAAa;CAExC,IAAI,CAAC,GACD,MAAU,MACN,uDACJ;CACH,OAEM;AAAO;;;AClBlB,IAAa,IAAuD;CAChE,OAAO,EAAW;CAClB,QAAQ,EAAW;CACnB,OAAO,EAAW;AACtB,GAEa,IAAsD;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;AACX"}
+{"version":3,"file":"index.js","names":["typography","AppBarContext","createContext","useAppBarContext","context","useContext","AppBarHeadlineTypography","AppBarHeadlineBlockSize"],"sources":["../../../../src/components/AppBar/core/context.ts","../../../../src/components/AppBar/core/size.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { AppBarAlignment } from \"./alignment\";\nimport type { AppBarSize } from \"./size\";\n\n/**\n * Context value provided by the {@link AppBar} container to descendant components (such as {@link AppBarHeadline}).\n */\nexport type AppBarContextType = {\n    /** The active layout size variant of the AppBar. */\n    size: AppBarSize;\n    /** The active headline alignment mode. */\n    alignment: AppBarAlignment;\n    /** The headline container height in pixels. */\n    headlineBlockSize: number;\n    /** The active typography CSS class name for the headline. */\n    headlineTypography: string;\n};\n\n/**\n * React context for sharing configuration between {@link AppBar} and its descendants.\n */\nexport const AppBarContext = createContext<AppBarContextType | null>(null);\n\n/**\n * Custom hook to access the active {@link AppBarContext}.\n *\n * @throws {Error} If called outside of an `<AppBar>` provider tree.\n * @returns The active {@link AppBarContextType} values.\n */\nexport function useAppBarContext() {\n    const context = useContext(AppBarContext);\n\n    if (!context) {\n        throw new Error(\n            \"useAppBarContext must be used within AppBar component\"\n        );\n    }\n\n    return context;\n}\n","import { typography } from \"@/utils\";\n\n/**\n * Height and typography scale variant for the {@link AppBar}.\n *\n * - `\"small\"`: Standard 64px single-row header with inline headline and actions.\n * - `\"medium\"`: Two-row header with prominent 36px title in the bottom row.\n * - `\"large\"`: Expressive two-row header with prominent 44px display title in the bottom row.\n */\nexport type AppBarSize = \"small\" | \"medium\" | \"large\";\n\n/**\n * Mapping of each {@link AppBarSize} variant to its corresponding typography class name.\n */\nexport const AppBarHeadlineTypography: Record<AppBarSize, string> = {\n    small: typography.titleLarge,\n    medium: typography.headlineMedium,\n    large: typography.displaySmall,\n} as const;\n\n/**\n * Mapping of each {@link AppBarSize} variant to its headline container height (block-size in pixels).\n */\nexport const AppBarHeadlineBlockSize: Record<AppBarSize, number> = {\n    small: 28,\n    medium: 36,\n    large: 44,\n} as const;\n"],"mappings":";;;AAqBA,IAAaC,IAAgBC,EAAwC,IAAI;AAQzE,SAAOC,IAAA;CACH,IAAAC,IAAgBC,EAAWJ,CAAa;CAExC,IAAI,CAACG,GACD,MAAU,MACN,uDACJ;CACH,OAEMA;AAAO;;;ACxBlB,IAAaE,IAAuD;CAChE,OAAON,EAAW;CAClB,QAAQA,EAAW;CACnB,OAAOA,EAAW;AACtB,GAKaO,IAAsD;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;AACX"}

package/dist/components/AppBar/core/size.d.ts

@@ -1,3 +1,16 @@
+/**
+ * Height and typography scale variant for the {@link AppBar}.
+ *
+ * - `"small"`: Standard 64px single-row header with inline headline and actions.
+ * - `"medium"`: Two-row header with prominent 36px title in the bottom row.
+ * - `"large"`: Expressive two-row header with prominent 44px display title in the bottom row.
+ */
 export type AppBarSize = "small" | "medium" | "large";
+/**
+ * Mapping of each {@link AppBarSize} variant to its corresponding typography class name.
+ */
 export declare const AppBarHeadlineTypography: Record<AppBarSize, string>;
+/**
+ * Mapping of each {@link AppBarSize} variant to its headline container height (block-size in pixels).
+ */
 export declare const AppBarHeadlineBlockSize: Record<AppBarSize, number>;

package/dist/components/AppBar/index.js

@@ -1,7 +1,7 @@
-import { AppBarState as e, AppBarStateContext as t } from "./AppBarState/index.js";
-import { AppBarContext as n, AppBarHeadlineBlockSize as r, AppBarHeadlineTypography as i, useAppBarContext as a } from "./core/index.js";
-import { t as o } from "../../chunks/AppBar";
-import { t as s } from "../../chunks/AppBarAction";
-import { t as c } from "../../chunks/AppBarAvatar";
-import { t as l } from "../../chunks/AppBarHeadline";
-export { o as AppBar, s as AppBarAction, c as AppBarAvatar, n as AppBarContext, l as AppBarHeadline, r as AppBarHeadlineBlockSize, i as AppBarHeadlineTypography, e as AppBarState, t as AppBarStateContext, a as useAppBarContext };
+import { AppBarState as e, AppBarStateContext as t, useAppBarState as n } from "./AppBarState/index.js";
+import { AppBarContext as r, AppBarHeadlineBlockSize as i, AppBarHeadlineTypography as a, useAppBarContext as o } from "./core/index.js";
+import { t as s } from "../../chunks/AppBar";
+import { t as c } from "../../chunks/AppBarAction";
+import { t as l } from "../../chunks/AppBarAvatar";
+import { t as u } from "../../chunks/AppBarHeadline";
+export { s as AppBar, c as AppBarAction, l as AppBarAvatar, r as AppBarContext, u as AppBarHeadline, i as AppBarHeadlineBlockSize, a as AppBarHeadlineTypography, e as AppBarState, t as AppBarStateContext, o as useAppBarContext, n as useAppBarState };

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

@@ -1,2 +1,19 @@
 import { ButtonProps } from './types';
+/**
+ * A standard action button component implementing Material Design 3 guidelines.
+ *
+ * Supports filled, tonal, outlined, elevated, and text visual color schemes,
+ * flexible sizing presets from extra-small to extra-large, leading or trailing icons,
+ * loading spinner substitution when pending, ripple splash effects, and integrated tooltips.
+ *
+ * Built on top of React Aria's `Button` for accessible keyboard, screen reader,
+ * and touch interaction.
+ *
+ * @example
+ * ```tsx
+ * <Button color="tonal" icon={Save} onPress={() => handleSave()}>
+ *     Save
+ * </Button>
+ * ```
+ */
 export declare const Button: React.FC<ButtonProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["renderProps","iconSize","icon","handlePress"],"sources":["../../../../src/components/Button/Button/Button.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Loader } from \"@/components/Loader\";\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 { ButtonProps } from \"./types\";\n\nexport const Button: React.FC<ButtonProps> = ({\n    size,\n    shape,\n    color,\n    tooltip,\n    icon,\n    children,\n    onPress,\n    iconPlacement,\n    className,\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    return withTooltip(\n        <AriaButton\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            {...baseButtonDataAttrs}\n            data-button\n        >\n            {(renderProps) => {\n                const {\n                    isPending,\n                    isDisabled,\n                    isFocusVisible,\n                    isFocused,\n                    isPressed,\n                    isHovered,\n                } = renderProps;\n\n                const dataAttrs = {\n                    ...baseButtonDataAttrs,\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-visual-button\": true,\n                };\n\n                const iconSize = ButtonIconSizeMapping[buttonSize];\n                const iconComp = isPending ? (\n                    <Loader size={iconSize} />\n                ) : (\n                    icon && <Icon icon={icon} size={iconSize} />\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        </AriaButton>,\n        tooltip\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["renderProps","iconSize","icon","handlePress","_c","AriaButton","require_compiler_runtime","Icon","Loader","Splash","useSplash","ButtonLabelTextMapping","buttonSizeConfig","ButtonCore","ButtonReset","ButtonIconSizeMapping","buttonColorBase","useButtonConfig","ButtonSizeBase","newButtonBaseDataAttrs","withTooltip","buttonColorConfig","Button$1","import_compiler_runtime","Button","$","children","className","color","icon","iconPlacement","onPress","props","shape","size","tooltip","t0","t1","isChildFunc","t2","buttonColor","buttonShape","buttonSize","baseButtonDataAttrs","t3","clsx","TapTarget","renderProps","t4","buttonIconPlacement","splashInfo","renderProps_0","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","iconSize","iconComp","isPending","t5","handlePress","t6"],"sources":["../../../../src/components/Button/Button/Button.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Loader } from \"@/components/Loader\";\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 { ButtonProps } from \"./types\";\n\n/**\n * A standard action button component implementing Material Design 3 guidelines.\n *\n * Supports filled, tonal, outlined, elevated, and text visual color schemes,\n * flexible sizing presets from extra-small to extra-large, leading or trailing icons,\n * loading spinner substitution when pending, ripple splash effects, and integrated tooltips.\n *\n * Built on top of React Aria's `Button` for accessible keyboard, screen reader,\n * and touch interaction.\n *\n * @example\n * ```tsx\n * <Button color=\"tonal\" icon={Save} onPress={() => handleSave()}>\n *     Save\n * </Button>\n * ```\n */\nexport const Button: React.FC<ButtonProps> = ({\n    size,\n    shape,\n    color,\n    tooltip,\n    icon,\n    children,\n    onPress,\n    iconPlacement,\n    className,\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    return withTooltip(\n        <AriaButton\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            {...baseButtonDataAttrs}\n            data-button\n        >\n            {(renderProps) => {\n                const {\n                    isPending,\n                    isDisabled,\n                    isFocusVisible,\n                    isFocused,\n                    isPressed,\n                    isHovered,\n                } = renderProps;\n\n                const dataAttrs = {\n                    ...baseButtonDataAttrs,\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-visual-button\": true,\n                };\n\n                const iconSize = ButtonIconSizeMapping[buttonSize];\n                const iconComp = isPending ? (\n                    <Loader size={iconSize} />\n                ) : (\n                    icon && <Icon icon={icon} size={iconSize} />\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        </AriaButton>,\n        tooltip\n    );\n};\n"],"mappings":"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"}

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

@@ -1,4 +1,8 @@
 import { Button } from 'react-aria-components';
 import { ButtonBaseProps } from '../core';
+/**
+ * Props for the {@link Button} component.
+ * Combines React Aria's {@link Button} props with shared {@link ButtonBaseProps}.
+ */
 export interface ButtonProps extends React.ComponentPropsWithRef<typeof Button>, ButtonBaseProps {
 }

package/dist/components/Button/ButtonGroups/ButtonGroup/ButtonGroup.d.ts

@@ -1,2 +1,19 @@
 import { ButtonGroupProps } from './types';
+/**
+ * A group container for related toggle buttons implementing Material Design 3 Button Groups.
+ *
+ * Displays buttons with consistent spacing and dynamic morphing padding animations when pressed.
+ * Provides size, shape, color, and icon placement down to child buttons via context.
+ *
+ * Built on top of React Aria's `ToggleButtonGroup` supporting single or multiple selection modes.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup selectionMode="single" color="tonal">
+ *     <ToggleButton id="left" icon={AlignLeft} aria-label="Align Left" />
+ *     <ToggleButton id="center" icon={AlignCenter} aria-label="Align Center" />
+ *     <ToggleButton id="right" icon={AlignRight} aria-label="Align Right" />
+ * </ButtonGroup>
+ * ```
+ */
 export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/components/Button/ButtonGroups/ButtonGroup/types.d.ts

@@ -1,8 +1,32 @@
 import { ToggleButtonGroup } from 'react-aria-components';
 import { ButtonIconPlacement, ButtonShape, ButtonSize, CoreButtonColor } from '../../core';
+/**
+ * Props for the {@link ButtonGroup} component.
+ * Extends React Aria's {@link ToggleButtonGroup} (excluding orientation) with button styling presets.
+ */
 export interface ButtonGroupProps extends Omit<React.ComponentPropsWithRef<typeof ToggleButtonGroup>, "orientation"> {
+    /**
+     * Size preset inherited by buttons within the group.
+     *
+     * @default "small"
+     */
     size?: ButtonSize;
+    /**
+     * Corner rounding shape inherited by buttons within the group.
+     *
+     * @default "round"
+     */
     shape?: ButtonShape;
+    /**
+     * Visual color style variant inherited by buttons within the group.
+     *
+     * @default "filled"
+     */
     color?: CoreButtonColor;
+    /**
+     * Default icon placement relative to label for buttons within the group.
+     *
+     * @default "start"
+     */
     iconPlacement?: ButtonIconPlacement;
 }

package/dist/components/Button/ButtonGroups/ButtonGroupContext/context.d.ts

@@ -1,15 +1,37 @@
 import { ButtonIconPlacement, ButtonShape, ButtonSize, ConnectedButtonGroupColor, CoreButtonColor } from '../../core';
+/**
+ * Configuration options provided by a standard {@link ButtonGroup} to its descendant buttons.
+ */
 export type ButtonGroupContextValue = {
+    /** Preset size inherited by child buttons. */
     size?: ButtonSize;
+    /** Corner rounding shape inherited by child buttons. */
     shape?: ButtonShape;
+    /** Visual color style variant inherited by child buttons. */
     color?: CoreButtonColor;
+    /** Icon placement relative to label inherited by child buttons. */
     iconPlacement?: ButtonIconPlacement;
 };
+/**
+ * React Context providing styling and layout configuration from an ancestor `ButtonGroup`
+ * to child buttons.
+ */
 export declare const ButtonGroupContext: import('react').Context<ButtonGroupContextValue>;
+/**
+ * Configuration options provided by a {@link ConnectedButtonGroup} to nested {@link ConnectedButton}s.
+ */
 export type ConnectedButtonGroupContextValue = {
+    /** Uniform size preset for connected buttons. */
     size: ButtonSize;
+    /** Uniform corner shape preset for the connected group boundary. */
     shape: ButtonShape;
+    /** Visual color style variant applied across connected buttons. */
     color: ConnectedButtonGroupColor;
+    /** Default icon placement relative to label for connected buttons. */
     iconPlacement?: ButtonIconPlacement;
 };
+/**
+ * React Context providing required size, shape, and color styling from an ancestor
+ * `ConnectedButtonGroup` to its child `ConnectedButton` elements.
+ */
 export declare const ConnectedButtonGroupContext: import('react').Context<ConnectedButtonGroupContextValue>;

package/dist/components/Button/ButtonGroups/ButtonGroupContext/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Button/ButtonGroups/ButtonGroupContext/context.ts","../../../../../src/components/Button/ButtonGroups/ButtonGroupContext/useButtonGroupContext.ts","../../../../../src/components/Button/ButtonGroups/ButtonGroupContext/useConnectedButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type {\n    ButtonIconPlacement,\n    ButtonShape,\n    ButtonSize,\n    ConnectedButtonGroupColor,\n    CoreButtonColor,\n} from \"../../core\";\n\nexport type ButtonGroupContextValue = {\n    size?: ButtonSize;\n    shape?: ButtonShape;\n    color?: CoreButtonColor;\n    iconPlacement?: ButtonIconPlacement;\n};\n\nexport const ButtonGroupContext = createContext<ButtonGroupContextValue>({});\n\nexport type ConnectedButtonGroupContextValue = {\n    size: ButtonSize;\n    shape: ButtonShape;\n    color: ConnectedButtonGroupColor;\n    iconPlacement?: ButtonIconPlacement;\n};\n\nexport const ConnectedButtonGroupContext =\n    createContext<ConnectedButtonGroupContextValue>({\n        size: \"small\",\n        shape: \"round\",\n        color: \"filled\",\n    });\n","import { useContext } from \"react\";\nimport { ButtonGroupContext } from \"./context\";\n\nexport function useButtonGroupContext() {\n    return useContext(ButtonGroupContext);\n}\n","import { useContext } from \"react\";\nimport { ConnectedButtonGroupContext } from \"./context\";\n\nexport function useConnectedButtonGroupContext() {\n    return useContext(ConnectedButtonGroupContext);\n}\n"],"mappings":";;AAgBA,IAAa,IAAqB,EAAuC,CAAC,CAAC,GAS9D,IACT,EAAgD;CAC5C,MAAM;CACN,OAAO;CACP,OAAO;AACX,CAAC;;;AC3BL,SAAO,IAAA;CAAA,OACI,EAAW,CAAkB;AAAC;;;ACDzC,SAAO,IAAA;CAAA,OACI,EAAW,CAA2B;AAAC"}
+{"version":3,"file":"index.js","names":["ButtonGroupContext","createContext","ConnectedButtonGroupContext","useButtonGroupContext","useContext","useConnectedButtonGroupContext"],"sources":["../../../../../src/components/Button/ButtonGroups/ButtonGroupContext/context.ts","../../../../../src/components/Button/ButtonGroups/ButtonGroupContext/useButtonGroupContext.ts","../../../../../src/components/Button/ButtonGroups/ButtonGroupContext/useConnectedButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type {\n    ButtonIconPlacement,\n    ButtonShape,\n    ButtonSize,\n    ConnectedButtonGroupColor,\n    CoreButtonColor,\n} from \"../../core\";\n\n/**\n * Configuration options provided by a standard {@link ButtonGroup} to its descendant buttons.\n */\nexport type ButtonGroupContextValue = {\n    /** Preset size inherited by child buttons. */\n    size?: ButtonSize;\n    /** Corner rounding shape inherited by child buttons. */\n    shape?: ButtonShape;\n    /** Visual color style variant inherited by child buttons. */\n    color?: CoreButtonColor;\n    /** Icon placement relative to label inherited by child buttons. */\n    iconPlacement?: ButtonIconPlacement;\n};\n\n/**\n * React Context providing styling and layout configuration from an ancestor `ButtonGroup`\n * to child buttons.\n */\nexport const ButtonGroupContext = createContext<ButtonGroupContextValue>({});\n\n/**\n * Configuration options provided by a {@link ConnectedButtonGroup} to nested {@link ConnectedButton}s.\n */\nexport type ConnectedButtonGroupContextValue = {\n    /** Uniform size preset for connected buttons. */\n    size: ButtonSize;\n    /** Uniform corner shape preset for the connected group boundary. */\n    shape: ButtonShape;\n    /** Visual color style variant applied across connected buttons. */\n    color: ConnectedButtonGroupColor;\n    /** Default icon placement relative to label for connected buttons. */\n    iconPlacement?: ButtonIconPlacement;\n};\n\n/**\n * React Context providing required size, shape, and color styling from an ancestor\n * `ConnectedButtonGroup` to its child `ConnectedButton` elements.\n */\nexport const ConnectedButtonGroupContext =\n    createContext<ConnectedButtonGroupContextValue>({\n        size: \"small\",\n        shape: \"round\",\n        color: \"filled\",\n    });\n","import { useContext } from \"react\";\nimport { ButtonGroupContext } from \"./context\";\n\n/**\n * Accesses the enclosing {@link ButtonGroupContext} values.\n *\n * @returns The inherited configuration from the nearest ancestor `ButtonGroup`, or an empty object if unnested.\n */\nexport function useButtonGroupContext() {\n    return useContext(ButtonGroupContext);\n}\n","import { useContext } from \"react\";\nimport { ConnectedButtonGroupContext } from \"./context\";\n\n/**\n * Accesses the enclosing {@link ConnectedButtonGroupContext} values.\n *\n * @returns The configuration provided by the enclosing `ConnectedButtonGroup`. Defaults to small/round/filled if unnested.\n */\nexport function useConnectedButtonGroupContext() {\n    return useContext(ConnectedButtonGroupContext);\n}\n"],"mappings":";;AA2BA,IAAaA,IAAqBC,EAAuC,CAAC,CAAC,GAoB9DC,IACTD,EAAgD;CAC5C,MAAM;CACN,OAAO;CACP,OAAO;AACX,CAAC;;;AC5CL,SAAOE,IAAA;CAAA,OACIC,EAAWJ,CAAkB;AAAC;;;ACDzC,SAAOK,IAAA;CAAA,OACID,EAAWF,CAA2B;AAAC"}

package/dist/components/Button/ButtonGroups/ButtonGroupContext/useButtonGroupContext.d.ts

@@ -1 +1,6 @@
+/**
+ * Accesses the enclosing {@link ButtonGroupContext} values.
+ *
+ * @returns The inherited configuration from the nearest ancestor `ButtonGroup`, or an empty object if unnested.
+ */
 export declare function useButtonGroupContext(): import('./context').ButtonGroupContextValue;

package/dist/components/Button/ButtonGroups/ButtonGroupContext/useConnectedButtonGroupContext.d.ts

@@ -1 +1,6 @@
+/**
+ * Accesses the enclosing {@link ConnectedButtonGroupContext} values.
+ *
+ * @returns The configuration provided by the enclosing `ConnectedButtonGroup`. Defaults to small/round/filled if unnested.
+ */
 export declare function useConnectedButtonGroupContext(): import('./context').ConnectedButtonGroupContextValue;

package/dist/components/Button/ButtonGroups/ConnectedButton/ConnectedButton.d.ts

@@ -1,2 +1,15 @@
 import { ConnectedButtonProps } from './types';
+/**
+ * An individual toggle button designed for use inside a {@link ConnectedButtonGroup}.
+ *
+ * Inherits size, shape, and color styling from the parent `ConnectedButtonGroupContext`,
+ * rendering border lines and corner radii coordinated with its neighboring buttons in the segment.
+ *
+ * Built on top of React Aria's `ToggleButton`.
+ *
+ * @example
+ * ```tsx
+ * <ConnectedButton id="bold" icon={Bold} aria-label="Bold text" />
+ * ```
+ */
 export declare const ConnectedButton: React.FC<ConnectedButtonProps>;

package/dist/components/Button/ButtonGroups/ConnectedButton/types.d.ts

@@ -1,8 +1,26 @@
 import { LucideIcon } from 'lucide-react';
 import { ToggleButton } from 'react-aria-components';
 import { ButtonIconPlacement } from '../../core';
-export interface ConnectedButtonProps extends Omit<React.ComponentPropsWithRef<typeof ToggleButton>, "className"> {
+/**
+ * Props for the {@link ConnectedButton} component.
+ * Extends React Aria's {@link ToggleButton} props with toggle icon, placement, and tooltip support.
+ */
+export interface ConnectedButtonProps extends React.ComponentPropsWithRef<typeof ToggleButton> {
+    /**
+     * An optional icon to display within the button.
+     */
     icon?: LucideIcon;
+    /**
+     * An optional icon to display when the button is in the selected (`isSelected = true`) state.
+     * If omitted, {@link icon} is used for both states.
+     */
     selectedIcon?: LucideIcon;
+    /**
+     * Overrides the group's default icon placement relative to label.
+     */
     iconPlacement?: ButtonIconPlacement;
+    /**
+     * Optional tooltip text displayed on hover/focus.
+     */
+    tooltip?: string;
 }

package/dist/components/Button/ButtonGroups/ConnectedButtonGroup/ConnectedButtonGroup.d.ts

@@ -1,2 +1,20 @@
 import { ConnectedButtonGroupProps } from './types';
+/**
+ * A container that visually connects toggle buttons into a single segmented control.
+ *
+ * Implements connected Material Design 3 Button Groups, merging borders between adjacent buttons
+ * and shaping the outer corners to form a unified segmented unit.
+ *
+ * Built on top of React Aria's `ToggleButtonGroup` supporting single or multiple selection modes.
+ * Must be used in conjunction with {@link ConnectedButton}.
+ *
+ * @example
+ * ```tsx
+ * <ConnectedButtonGroup selectionMode="multiple" color="outlined">
+ *     <ConnectedButton id="bold" icon={Bold} aria-label="Bold" />
+ *     <ConnectedButton id="italic" icon={Italic} aria-label="Italic" />
+ *     <ConnectedButton id="underline" icon={Underline} aria-label="Underline" />
+ * </ConnectedButtonGroup>
+ * ```
+ */
 export declare const ConnectedButtonGroup: React.FC<ConnectedButtonGroupProps>;

package/dist/components/Button/ButtonGroups/ConnectedButtonGroup/types.d.ts

@@ -1,8 +1,32 @@
 import { ToggleButtonGroup } from 'react-aria-components';
 import { ButtonIconPlacement, ButtonShape, ButtonSize, ConnectedButtonGroupColor } from '../../core';
+/**
+ * Props for the {@link ConnectedButtonGroup} component.
+ * Extends React Aria's {@link ToggleButtonGroup} (excluding orientation) with connected button styling presets.
+ */
 export interface ConnectedButtonGroupProps extends Omit<React.ComponentPropsWithRef<typeof ToggleButtonGroup>, "orientation"> {
+    /**
+     * Size preset applied across all connected buttons in the group.
+     *
+     * @default "small"
+     */
     size?: ButtonSize;
+    /**
+     * Corner rounding shape for the outer boundaries of the connected group.
+     *
+     * @default "round"
+     */
     shape?: ButtonShape;
+    /**
+     * Visual color style variant applied to buttons in the connected group.
+     *
+     * @default "filled"
+     */
     color?: ConnectedButtonGroupColor;
+    /**
+     * Default icon placement relative to label for connected buttons.
+     *
+     * @default "start"
+     */
     iconPlacement?: ButtonIconPlacement;
 }

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

@@ -1,2 +1,23 @@
 import { IconButtonProps } from './types';
+/**
+ * A compact, icon-only button implementing Material Design 3 Icon Buttons.
+ *
+ * Designed for space-constrained UI elements, actions, toolbars, and controls that can
+ * be clearly represented by an icon alone. Automatically swaps the icon with a `Loader`
+ * spinner when `isPending` is active.
+ *
+ * Extends React Aria's `Button`. Always provide an accessible `aria-label` or `aria-labelledby`
+ * attribute for screen reader accessibility.
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *     icon={Settings}
+ *     color="tonal"
+ *     tooltip="Settings"
+ *     aria-label="Settings"
+ *     onPress={() => openSettings()}
+ * />
+ * ```
+ */
 export declare const IconButton: React.FC<IconButtonProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Loader } from \"@/components/Loader\";\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 { IconButtonProps } from \"./types\";\n\nexport const IconButton: React.FC<IconButtonProps> = ({\n    size,\n    shape,\n    color,\n    width = \"default\",\n    tooltip,\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    };\n\n    return withTooltip(\n        <AriaButton\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                isPending,\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-visual-button\": true,\n                };\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                        {isPending ? (\n                            <Loader size={iconSize} />\n                        ) : (\n                            icon && <Icon icon={icon} size={iconSize} />\n                        )}\n                    </span>\n                );\n            }}\n        </AriaButton>,\n        tooltip\n    );\n};\n"],"mappings":";;;;;;;;;AAqBA,IAAa,KAAyC,EAClD,SACA,UACA,UACA,WAAQ,WACR,YACA,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;CACxB;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,cACA,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,sBAAsB;GAC1B,GAEM,IAAW,EAA0B;GAC3C,OACI,kBAAC,QAAD;IACI,WAAW,EACP,GACA,GACA,CACJ;IACA,GAAI;cANR,CAQK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAW,CAAA,GACrC,IACG,kBAAC,GAAD,EAAQ,MAAM,EAAS,CAAA,IAEvB,KAAQ,kBAAC,GAAD;KAAY;KAAM,MAAM;IAAS,CAAA,CAE3C;;EAEd;CACQ,CAAA,GACZ,CACJ;AACJ"}
+{"version":3,"file":"index.js","names":["AriaButton","TapTarget","Loader","Splash","useSplash","buttonSizeConfig","ButtonCore","ButtonReset","buttonColorBase","useButtonConfig","ButtonSizeBase","newButtonBaseDataAttrs","IconButtonIconSizeMapping","withTooltip","buttonColorConfig","IconButton","props","onPress","iconButtonDataAttrs","buttonShape","buttonSize","buttonColor","width","Button","handlePress","clsx","className","renderProps","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","iconSize","splashInfo","isPending","icon","Icon","tooltip"],"sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Loader } from \"@/components/Loader\";\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 { IconButtonProps } from \"./types\";\n\n/**\n * A compact, icon-only button implementing Material Design 3 Icon Buttons.\n *\n * Designed for space-constrained UI elements, actions, toolbars, and controls that can\n * be clearly represented by an icon alone. Automatically swaps the icon with a `Loader`\n * spinner when `isPending` is active.\n *\n * Extends React Aria's `Button`. Always provide an accessible `aria-label` or `aria-labelledby`\n * attribute for screen reader accessibility.\n *\n * @example\n * ```tsx\n * <IconButton\n *     icon={Settings}\n *     color=\"tonal\"\n *     tooltip=\"Settings\"\n *     aria-label=\"Settings\"\n *     onPress={() => openSettings()}\n * />\n * ```\n */\nexport const IconButton: React.FC<IconButtonProps> = ({\n    size,\n    shape,\n    color,\n    width = \"default\",\n    tooltip,\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    };\n\n    return withTooltip(\n        <AriaButton\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                isPending,\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-visual-button\": true,\n                };\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                        {isPending ? (\n                            <Loader size={iconSize} />\n                        ) : (\n                            icon && <Icon icon={icon} size={iconSize} />\n                        )}\n                    </span>\n                );\n            }}\n        </AriaButton>,\n        tooltip\n    );\n};\n"],"mappings":";;;;;;;;;AA0CA,IAAae,KAAyC,EAClD,SACA,UACA,UACA,WAAQ,WACR,YACA,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;CACxB;CAEA,OAAOT,EACH,kBAACb,GAAD;EACI,SAASwB;EACT,YAAY,MACRC,EACIlB,GACAN,GACAI,EAAiBe,CAAU,GAC3BN,EAAkBO,CAAW,GAC7B,OAAOK,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEJ,GAAIV;EACJ,GAAIE;EACJ,eAAA;EAEE,WAAA,EACE,cACA,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,sBAAsB;GAC1B,GAEMC,IAAWtB,EAA0BQ;GAC3C,OACI,kBAAC,QAAD;IACI,WAAWK,EACPnB,GACAE,GACAE,CACJ;IACA,GAAIkB;IANR,UAAA,CAQKO,KAAc,kBAAChC,GAAD,EAAQ,GAAIgC,EAAW,CAAA,GACrCC,IACG,kBAAClC,GAAD,EAAQ,MAAMgC,EAAS,CAAA,IAEvBG,KAAQ,kBAACC,GAAD;KAAY;KAAM,MAAMJ;IAAS,CAAA,CAE3C;;EAEd;CACQ,CAAA,GACZK,CACJ;AACJ"}

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

@@ -1,4 +1,8 @@
 import { Button } from 'react-aria-components';
 import { IconButtonBaseProps } from '../core';
+/**
+ * Props for the {@link IconButton} component.
+ * Combines React Aria's {@link Button} props (omitting `children`) with {@link IconButtonBaseProps}.
+ */
 export interface IconButtonProps extends Omit<React.ComponentPropsWithRef<typeof Button>, "children">, IconButtonBaseProps {
 }

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

@@ -1,2 +1,17 @@
 import { LinkButtonProps } from './types';
+/**
+ * A link component styled to look and behave like a Material Design 3 button.
+ *
+ * Used for navigation actions that should visually appear as standard buttons.
+ * Renders an accessible anchor element underneath via React Aria's `Link`,
+ * supporting native link behaviors (`href`, `target`, `rel`), keyboard activation,
+ * ripple splash animations, icons, and tooltips.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="https://example.com" target="_blank" icon={ExternalLink} iconPlacement="end">
+ *     Visit Website
+ * </LinkButton>
+ * ```
+ */
 export declare const LinkButton: React.FC<LinkButtonProps>;