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

package/dist/components/ThemeSelector/ThemeProvider.d.ts

@@ -1,4 +1,31 @@
 import { ReactNode } from 'react';
-export declare const ThemeProvider: ({ children }: {
+/**
+ * Props for the {@link ThemeProvider} component.
+ */
+export interface ThemeProviderProps {
+    /**
+     * Application content to be rendered inside the provider.
+     */
     children?: ReactNode;
-}) => ReactNode;
+}
+/**
+ * Top-level provider component that synchronizes the application root with the current theme settings.
+ *
+ * Subscribes to the theme state via {@link useTheme} (mode, dark mode calculation,
+ * contrast level, and monochrome setting) and dynamically assigns the computed theme
+ * string to the `data-theme` attribute of `document.documentElement`.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from "@adgytec/web-ui-components";
+ *
+ * export function App() {
+ *     return (
+ *         <ThemeProvider>
+ *             <MainContent />
+ *         </ThemeProvider>
+ *     );
+ * }
+ * ```
+ */
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/components/ThemeSelector/ThemeSelector.d.ts

@@ -1,2 +1,26 @@
 import { ThemeSelectorProps } from './types';
+/**
+ * Settings UI component for managing application theme appearance.
+ *
+ * Provides user controls for:
+ * - **Theme Mode**: Connected button group with `"System"`, `"Light"`, and `"Dark"` options.
+ * - **Theme Contrast**: Connected button group with `"Standard"`, `"Medium"`, and `"High"` options (disabled when monochrome is active).
+ * - **Monochrome Mode**: An interactive {@link Switch} to toggle neutral grayscale styling.
+ *
+ * Directly connects to {@link useTheme} to read and update theme settings, which are
+ * persisted to local storage and applied to `document.documentElement` by {@link ThemeProvider}.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider, ThemeSelector } from "@adgytec/web-ui-components";
+ *
+ * export function SettingsMenu() {
+ *     return (
+ *         <ThemeProvider>
+ *             <ThemeSelector />
+ *         </ThemeProvider>
+ *     );
+ * }
+ * ```
+ */
 export declare const ThemeSelector: React.FC<ThemeSelectorProps>;

package/dist/components/ThemeSelector/core.d.ts

@@ -1,13 +1,71 @@
 import { Key } from 'react-aria-components';
 import { ThemeContrast, ThemeMode } from '../../utils';
 import { ThemeContrastTranslations, ThemeModeTranslations } from './types';
+/**
+ * Generates an array of theme mode options with translated labels.
+ *
+ * @param modeDetails - Translations for theme mode labels (`system`, `light`, `dark`).
+ * @returns Array of mode items with `id` and localized `value`.
+ *
+ * @example
+ * ```tsx
+ * const items = modeItems({
+ *     heading: "Theme Mode",
+ *     system: "System",
+ *     light: "Light",
+ *     dark: "Dark",
+ * });
+ * ```
+ */
 export declare const modeItems: (modeDetails: ThemeModeTranslations) => {
     id: ThemeMode;
     value: string;
 }[];
+/**
+ * Generates an array of theme contrast options with translated labels.
+ *
+ * @param contrastDetails - Translations for contrast level labels (`standard`, `medium`, `high`).
+ * @returns Array of contrast items with `id` and localized `value`.
+ *
+ * @example
+ * ```tsx
+ * const items = contrastItems({
+ *     heading: "Contrast",
+ *     standard: "Standard",
+ *     medium: "Medium",
+ *     high: "High",
+ * });
+ * ```
+ */
 export declare const contrastItems: (contrastDetails: ThemeContrastTranslations) => {
     id: ThemeContrast;
     value: string;
 }[];
+/**
+ * Type guard function to check if a React Aria `Key` is a valid {@link ThemeMode}.
+ *
+ * @param value - The key to test.
+ * @returns `true` if `value` is `"system"`, `"light"`, or `"dark"`.
+ *
+ * @example
+ * ```tsx
+ * if (isThemeMode(selectedKey)) {
+ *     setMode(selectedKey);
+ * }
+ * ```
+ */
 export declare function isThemeMode(value: Key): value is ThemeMode;
+/**
+ * Type guard function to check if a React Aria `Key` is a valid {@link ThemeContrast}.
+ *
+ * @param value - The key to test.
+ * @returns `true` if `value` is `"standard"`, `"medium"`, or `"high"`.
+ *
+ * @example
+ * ```tsx
+ * if (isThemeContrast(selectedKey)) {
+ *     setContrast(selectedKey);
+ * }
+ * ```
+ */
 export declare function isThemeContrast(value: Key): value is ThemeContrast;

package/dist/components/ThemeSelector/index.d.ts

@@ -1,3 +1,5 @@
+export * from './core';
+export * from './ThemeItem';
 export * from './ThemeProvider';
 export * from './ThemeSelector';
 export type * from './types';

package/dist/components/ThemeSelector/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/ThemeSelector";
-export { e as ThemeProvider, t as ThemeSelector };
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../../chunks/ThemeSelector";
+export { i as ThemeItem, n as ThemeProvider, o as ThemeSelector, t as contrastItems, e as isThemeContrast, r as isThemeMode, a as modeItems };

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

@@ -1,22 +1,89 @@
-interface ThemeBaseTranslations {
+/**
+ * Base translation interface providing a section heading and optional description.
+ */
+export interface ThemeBaseTranslations {
+    /**
+     * Section title heading text.
+     */
     heading: string;
+    /**
+     * Optional explanatory text describing the setting.
+     */
     description?: string;
 }
+/**
+ * Translations for the Theme Mode section of {@link ThemeSelector}.
+ */
 export interface ThemeModeTranslations extends ThemeBaseTranslations {
+    /**
+     * Label for the system preference mode.
+     */
     system: string;
+    /**
+     * Label for the light theme mode.
+     */
     light: string;
+    /**
+     * Label for the dark theme mode.
+     */
     dark: string;
 }
+/**
+ * Translations for the Theme Contrast section of {@link ThemeSelector}.
+ */
 export interface ThemeContrastTranslations extends ThemeBaseTranslations {
+    /**
+     * Label for the standard contrast option.
+     */
     standard: string;
+    /**
+     * Label for the medium contrast option.
+     */
     medium: string;
+    /**
+     * Label for the high contrast option.
+     */
     high: string;
 }
+/**
+ * Translations for the Monochrome toggle section of {@link ThemeSelector}.
+ */
 export interface ThemeMonochromeTranslations extends ThemeBaseTranslations {
 }
+/**
+ * Props for the {@link ThemeSelector} component.
+ * Allows customization and localization of headings, descriptions, and button labels.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeSelector } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <ThemeSelector
+ *             modeDetails={{
+ *                 heading: "Appearance",
+ *                 description: "Customize how the app looks.",
+ *                 system: "Auto",
+ *                 light: "Day",
+ *                 dark: "Night",
+ *             }}
+ *         />
+ *     );
+ * }
+ * ```
+ */
 export type ThemeSelectorProps = {
+    /**
+     * Custom text and translations for the Theme Mode section.
+     */
     modeDetails?: ThemeModeTranslations;
+    /**
+     * Custom text and translations for the Theme Contrast section.
+     */
     contrastDetails?: ThemeContrastTranslations;
+    /**
+     * Custom text and translations for the Monochrome toggle section.
+     */
     monochromeDetails?: ThemeMonochromeTranslations;
 };
-export {};

package/dist/components/Toolbar/Toolbar.d.ts

@@ -1,2 +1,49 @@
 import { ToolbarProps } from './types';
+/**
+ * Container for a set of related action buttons, toggle buttons, and dividers, following
+ * [Material 3 Toolbar](https://m3.material.io/) design patterns.
+ *
+ * Extends React Aria Components `Toolbar` with Material 3 styling and interactive behaviors:
+ * - Manages single-tab-stop keyboard navigation across action items using arrow keys.
+ * - Supports horizontal and vertical orientations via the `orientation` prop.
+ * - Supports docked and elevated floating display variants via `variant`.
+ * - Provides `"standard"` (surface container) and `"vibrant"` (primary container) color themes via `color`.
+ * - Automatically adjusts button borders, shadows, and colors to seamlessly fit the toolbar surface.
+ *
+ * Configurable CSS tokens:
+ * - `--md-toolbar-background`: Background color of the toolbar.
+ * - `--md-toolbar-button-background`: Background color for buttons within the toolbar.
+ * - `--md-toolbar-toggle-button-background`: Background color for toggle buttons.
+ * - `--md-toolbar-toggle-button-selected-background`: Background color for selected toggle buttons.
+ * - `--md-toolbar-button-color`: Text and icon color for buttons within the toolbar.
+ * - `--md-toolbar-toggle-button-color`: Text and icon color for toggle buttons within the toolbar.
+ * - `--md-toolbar-toggle-button-selected-color`: Text and icon color for selected toggle buttons.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     Divider,
+ *     IconButton,
+ *     ToggleIconButton,
+ *     Toolbar,
+ *     ToolbarToggleButtonGroup,
+ * } from "@adgytec/web-ui-components";
+ * import { AlignCenter, AlignLeft, AlignRight, Bold, Italic } from "lucide-react";
+ *
+ * export function EditorToolbar() {
+ *     return (
+ *         <Toolbar aria-label="Editor actions" variant="floating">
+ *             <ToolbarToggleButtonGroup selectionMode="single">
+ *                 <ToggleIconButton id="left" icon={AlignLeft} aria-label="Align left" />
+ *                 <ToggleIconButton id="center" icon={AlignCenter} aria-label="Align center" />
+ *                 <ToggleIconButton id="right" icon={AlignRight} aria-label="Align right" />
+ *             </ToolbarToggleButtonGroup>
+ *             <Divider orientation="vertical" />
+ *             <IconButton icon={Bold} aria-label="Bold" />
+ *             <IconButton icon={Italic} aria-label="Italic" />
+ *         </Toolbar>
+ *     );
+ * }
+ * ```
+ */
 export declare const Toolbar: React.FC<ToolbarProps>;

package/dist/components/Toolbar/ToolbarToggleButtonGroup.d.ts

@@ -1,2 +1,36 @@
 import { ToggleButtonGroup } from 'react-aria-components';
-export declare const ToolbarToggleButtonGroup: React.FC<React.ComponentPropsWithRef<typeof ToggleButtonGroup>>;
+/**
+ * Props for the {@link ToolbarToggleButtonGroup} component.
+ * Extends React Aria Components `ToggleButtonGroup` props.
+ */
+export interface ToolbarToggleButtonGroupProps extends React.ComponentPropsWithRef<typeof ToggleButtonGroup> {
+}
+/**
+ * Section wrapper for grouping toggle buttons inside a {@link Toolbar}.
+ *
+ * Extends React Aria Components `ToggleButtonGroup` to arrange grouped toggle buttons
+ * (e.g. alignment choices, text format styles) with appropriate toolbar spacing,
+ * selection handling, and orientation alignment.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     ToggleIconButton,
+ *     Toolbar,
+ *     ToolbarToggleButtonGroup,
+ * } from "@adgytec/web-ui-components";
+ * import { Bold, Italic } from "lucide-react";
+ *
+ * export function Example() {
+ *     return (
+ *         <Toolbar aria-label="Text styles">
+ *             <ToolbarToggleButtonGroup selectionMode="multiple" aria-label="Format">
+ *                 <ToggleIconButton id="bold" icon={Bold} aria-label="Bold" />
+ *                 <ToggleIconButton id="italic" icon={Italic} aria-label="Italic" />
+ *             </ToolbarToggleButtonGroup>
+ *         </Toolbar>
+ *     );
+ * }
+ * ```
+ */
+export declare const ToolbarToggleButtonGroup: React.FC<ToolbarToggleButtonGroupProps>;

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

@@ -1,7 +1,67 @@
 import { Toolbar } from 'react-aria-components';
+/**
+ * Visual variant of the toolbar container.
+ *
+ * - `"docked"`: Standard toolbar attached or positioned flush without drop shadow.
+ * - `"floating"`: Floating toolbar elevated with an elevation shadow (`--md-sys-elevation-shadow-3`).
+ */
 export type ToolbarVariant = "docked" | "floating";
+/**
+ * Color scheme applied to the toolbar and its contained controls.
+ *
+ * - `"standard"`: Neutral theme using surface container tones.
+ * - `"vibrant"`: Accent theme using primary container tones.
+ */
 export type ToolbarColor = "standard" | "vibrant";
+/**
+ * Props for the {@link Toolbar} component.
+ * Extends React Aria Components `Toolbar` props with variant and color options.
+ *
+ * Usage recommendations:
+ * - Use small-sized buttons (e.g. `size="small"` or `IconButton` / `ToggleIconButton`).
+ * - For vertical orientation, use `IconButton` or `ToggleIconButton`.
+ * - To group toggle buttons, use `ToolbarToggleButtonGroup` instead of standard button groups.
+ * - For dividers within horizontal toolbars, use `<Divider orientation="vertical" />`.
+ *
+ * Configurable CSS tokens:
+ * - `--md-toolbar-background`: Background color of the toolbar.
+ * - `--md-toolbar-button-background`: Background color for buttons within the toolbar.
+ * - `--md-toolbar-toggle-button-background`: Background color for toggle buttons.
+ * - `--md-toolbar-toggle-button-selected-background`: Background color for selected toggle buttons.
+ * - `--md-toolbar-button-color`: Text and icon color for buttons within the toolbar.
+ * - `--md-toolbar-toggle-button-color`: Text and icon color for toggle buttons within the toolbar.
+ * - `--md-toolbar-toggle-button-selected-color`: Text and icon color for selected toggle buttons.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     IconButton,
+ *     Toolbar,
+ * } from "@adgytec/web-ui-components";
+ * import { Bold, Italic, Underline } from "lucide-react";
+ *
+ * export function Example() {
+ *     return (
+ *         <Toolbar aria-label="Text formatting" variant="floating" color="standard">
+ *             <IconButton icon={Bold} aria-label="Bold" />
+ *             <IconButton icon={Italic} aria-label="Italic" />
+ *             <IconButton icon={Underline} aria-label="Underline" />
+ *         </Toolbar>
+ *     );
+ * }
+ * ```
+ */
 export interface ToolbarProps extends React.ComponentPropsWithRef<typeof Toolbar> {
+    /**
+     * Visual variant of the toolbar.
+     *
+     * @default "docked"
+     */
     variant?: ToolbarVariant;
+    /**
+     * Color scheme applied to the toolbar and its child actions.
+     *
+     * @default "standard"
+     */
     color?: ToolbarColor;
 }

package/dist/components/Tooltip/RichTooltip/RichTooltip/RichTooltip.d.ts

@@ -1 +1,56 @@
-export declare const RichTooltip: React.FC<React.ComponentPropsWithRef<"div">>;
+/**
+ * Props for the {@link RichTooltip} component.
+ * Extends standard `HTMLDivElement` attributes.
+ *
+ * Configurable CSS tokens:
+ * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).
+ * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).
+ */
+export interface RichTooltipProps extends React.ComponentPropsWithRef<"div"> {
+}
+/**
+ * Container component implementing [Material 3 Rich Tooltips](https://m3.material.io/components/tooltips/overview#89f33800-4f51-4043-9884-219159f427f7).
+ *
+ * Rich tooltips provide contextual information, descriptive subheads, body copy, and optional actions.
+ * Typically rendered inside a `Popover` component triggered by a `DialogTrigger`.
+ *
+ * Configurable CSS tokens:
+ * - `--md-rich-tooltip-background`: Background color of the rich tooltip (`var(--md-sys-color-surface-container)`).
+ * - `--md-rich-tooltip-color`: Text color of the rich tooltip (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     Button,
+ *     Popover,
+ *     RichTooltip,
+ *     RichTooltipActions,
+ *     RichTooltipInfo,
+ *     RichTooltipSubhead,
+ *     RichTooltipText,
+ * } from "@adgytec/web-ui-components";
+ * import { DialogTrigger } from "react-aria-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="More Info" />
+ *             <Popover>
+ *                 <RichTooltip>
+ *                     <RichTooltipInfo>
+ *                         <RichTooltipSubhead>Feature Overview</RichTooltipSubhead>
+ *                         <RichTooltipText>
+ *                             Detailed explanation of this feature and its benefits.
+ *                         </RichTooltipText>
+ *                     </RichTooltipInfo>
+ *                     <RichTooltipActions>
+ *                         <Button label="Learn More" size="small" color="text" />
+ *                     </RichTooltipActions>
+ *                 </RichTooltip>
+ *             </Popover>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
+export declare const RichTooltip: React.FC<RichTooltipProps>;

package/dist/components/Tooltip/RichTooltip/RichTooltipActions/RichTooltipActions.d.ts

@@ -1 +1,27 @@
-export declare const RichTooltipActions: React.FC<React.ComponentPropsWithRef<"div">>;
+/**
+ * Props for the {@link RichTooltipActions} component.
+ * Extends standard `HTMLDivElement` attributes.
+ */
+export interface RichTooltipActionsProps extends React.ComponentPropsWithRef<"div"> {
+}
+/**
+ * Action button container for a {@link RichTooltip}.
+ *
+ * Renders action elements at the bottom of the rich tooltip with proper horizontal alignment and spacing.
+ * Recommended to contain buttons with `size="small"` and `color="text"`.
+ *
+ * @example
+ * ```tsx
+ * import { Button, RichTooltipActions } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <RichTooltipActions>
+ *             <Button label="Dismiss" size="small" color="text" />
+ *             <Button label="Learn More" size="small" color="text" />
+ *         </RichTooltipActions>
+ *     );
+ * }
+ * ```
+ */
+export declare const RichTooltipActions: React.FC<RichTooltipActionsProps>;

package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipInfo/RichTooltipInfo.d.ts

@@ -1 +1,31 @@
-export declare const RichTooltipInfo: React.FC<React.ComponentPropsWithRef<"div">>;
+/**
+ * Props for the {@link RichTooltipInfo} component.
+ * Extends standard `HTMLDivElement` attributes.
+ */
+export interface RichTooltipInfoProps extends React.ComponentPropsWithRef<"div"> {
+}
+/**
+ * Text content container for a {@link RichTooltip}.
+ *
+ * Houses the {@link RichTooltipSubhead} title and {@link RichTooltipText} description
+ * with proper Material 3 padding and spacing.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     RichTooltipInfo,
+ *     RichTooltipSubhead,
+ *     RichTooltipText,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <RichTooltipInfo>
+ *             <RichTooltipSubhead>Header Title</RichTooltipSubhead>
+ *             <RichTooltipText>Informative description goes here.</RichTooltipText>
+ *         </RichTooltipInfo>
+ *     );
+ * }
+ * ```
+ */
+export declare const RichTooltipInfo: React.FC<RichTooltipInfoProps>;

package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipSubhead/RichTooltipSubhead.d.ts

@@ -1,2 +1,23 @@
 import { Heading } from 'react-aria-components';
-export declare const RichTooltipSubhead: React.FC<React.ComponentPropsWithRef<typeof Heading>>;
+/**
+ * Props for the {@link RichTooltipSubhead} component.
+ * Extends React Aria Components `Heading` props.
+ */
+export interface RichTooltipSubheadProps extends React.ComponentPropsWithRef<typeof Heading> {
+}
+/**
+ * Heading title component for a {@link RichTooltip}.
+ *
+ * Extends React Aria Components `Heading` and styles the title text using
+ * Material 3 `typography.titleSmall`.
+ *
+ * @example
+ * ```tsx
+ * import { RichTooltipSubhead } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return <RichTooltipSubhead>New Feature Available</RichTooltipSubhead>;
+ * }
+ * ```
+ */
+export declare const RichTooltipSubhead: React.FC<RichTooltipSubheadProps>;

package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipSubhead/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipSubhead/RichTooltipSubhead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Heading } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\n\nexport const RichTooltipSubhead: React.FC<\n    React.ComponentPropsWithRef<typeof Heading>\n> = ({ className, ...props }) => {\n    return (\n        <Heading\n            className={clsx(typography.titleSmall, className)}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;aAIa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAGiC,IAAA,EAAA,MAAtC,IAAA,EAAK,EAAU,YAAa,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAEnD,OAFmD,EAAA,OAAA,KAAA,EAAA,OAAA,KADrD,IAAA,kBAAC,GAAD;EACe,WAAA;EAAsC,GAC7C;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAHF;AAGE"}
+{"version":3,"file":"index.js","names":["_c","clsx","require_compiler_runtime","clsx$1","import_compiler_runtime","RichTooltipSubhead","$","className","props","t0","t1","typography","t2","Heading"],"sources":["../../../../../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipSubhead/RichTooltipSubhead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Heading } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\n\n/**\n * Props for the {@link RichTooltipSubhead} component.\n * Extends React Aria Components `Heading` props.\n */\nexport interface RichTooltipSubheadProps\n    extends React.ComponentPropsWithRef<typeof Heading> {}\n\n/**\n * Heading title component for a {@link RichTooltip}.\n *\n * Extends React Aria Components `Heading` and styles the title text using\n * Material 3 `typography.titleSmall`.\n *\n * @example\n * ```tsx\n * import { RichTooltipSubhead } from \"@adgytec/web-ui-components\";\n *\n * export function Example() {\n *     return <RichTooltipSubhead>New Feature Available</RichTooltipSubhead>;\n * }\n * ```\n */\nexport const RichTooltipSubhead: React.FC<RichTooltipSubheadProps> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <Heading\n            className={clsx(typography.titleSmall, className)}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;aA0BaK,KAAwD,MAAA;CAAA,IAAAC,KAAA,GAAAN,EAAAA,EAAAA,CAAA,CAAA,GAAAO,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGpE,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHqE,eAAA,GAAAE,KAAAC,GAGrE,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAG4D,IAAAD,EAAA,MAAtC,IAAAL,EAAKU,EAAU,YAAaJ,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAEnD,OAFmDN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADrD,IAAA,kBAACG,GAAD;EACe,WAAAH;EAAsC,GAC7CF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAHFM;AAGE"}

package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipText/RichTooltipText.d.ts

@@ -1,2 +1,27 @@
 import { Text } from 'react-aria-components';
-export declare const RichTooltipText: React.FC<React.ComponentPropsWithRef<typeof Text>>;
+/**
+ * Props for the {@link RichTooltipText} component.
+ * Extends React Aria Components `Text` props.
+ */
+export interface RichTooltipTextProps extends React.ComponentPropsWithRef<typeof Text> {
+}
+/**
+ * Body text component for a {@link RichTooltip}.
+ *
+ * Extends React Aria Components `Text` and styles the body copy using
+ * Material 3 `typography.bodyMedium`.
+ *
+ * @example
+ * ```tsx
+ * import { RichTooltipText } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <RichTooltipText>
+ *             Rich tooltips provide additional context and details.
+ *         </RichTooltipText>
+ *     );
+ * }
+ * ```
+ */
+export declare const RichTooltipText: React.FC<RichTooltipTextProps>;

package/dist/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipText/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipText/RichTooltipText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Text } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\n\nexport const RichTooltipText: React.FC<\n    React.ComponentPropsWithRef<typeof Text>\n> = ({ className, ...props }) => {\n    return (\n        <Text className={clsx(typography.bodyMedium, className)} {...props} />\n    );\n};\n"],"mappings":";;;;;;aAIa,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IAEmC,IAAA,EAAA,MAAtC,IAAA,EAAK,EAAU,YAAa,CAAS,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAe,OAAf,EAAA,OAAA,KAAA,EAAA,OAAA,KAAvD,IAAA,kBAAC,GAAD;EAAiB,WAAA;EAAsC,GAAM;CAAK,CAAA,GAAI,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAAtE;AAAsE"}
+{"version":3,"file":"index.js","names":["_c","clsx","require_compiler_runtime","clsx$1","import_compiler_runtime","RichTooltipText","$","className","props","t0","t1","typography","t2","Text"],"sources":["../../../../../../src/components/Tooltip/RichTooltip/RichTooltipInfo/RichTooltipText/RichTooltipText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Text } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\n\n/**\n * Props for the {@link RichTooltipText} component.\n * Extends React Aria Components `Text` props.\n */\nexport interface RichTooltipTextProps\n    extends React.ComponentPropsWithRef<typeof Text> {}\n\n/**\n * Body text component for a {@link RichTooltip}.\n *\n * Extends React Aria Components `Text` and styles the body copy using\n * Material 3 `typography.bodyMedium`.\n *\n * @example\n * ```tsx\n * import { RichTooltipText } from \"@adgytec/web-ui-components\";\n *\n * export function Example() {\n *     return (\n *         <RichTooltipText>\n *             Rich tooltips provide additional context and details.\n *         </RichTooltipText>\n *     );\n * }\n * ```\n */\nexport const RichTooltipText: React.FC<RichTooltipTextProps> = ({\n    className,\n    ...props\n}) => {\n    return (\n        <Text className={clsx(typography.bodyMedium, className)} {...props} />\n    );\n};\n"],"mappings":";;;;;;aA8BaK,KAAkD,MAAA;CAAA,IAAAC,KAAA,GAAAN,EAAAA,EAAAA,CAAA,CAAA,GAAAO,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAG9D,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAH+D,eAAA,GAAAE,KAAAC,GAG/D,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAE8D,IAAAD,EAAA,MAAtC,IAAAL,EAAKU,EAAU,YAAaJ,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAAe,OAAfN,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAAvD,IAAA,kBAACG,GAAD;EAAiB,WAAAH;EAAsC,GAAMF;CAAK,CAAA,GAAI,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAAtEM;AAAsE"}

package/dist/components/Tooltip/Tooltip/Tooltip.d.ts

@@ -1,2 +1,36 @@
 import { Tooltip as AriaTooltip } from 'react-aria-components';
-export declare const Tooltip: React.FC<React.ComponentPropsWithRef<typeof AriaTooltip>>;
+/**
+ * Props for the {@link Tooltip} component.
+ * Extends React Aria Components `Tooltip` props.
+ *
+ * Configurable CSS tokens:
+ * - `--md-tooltip-background`: Background color of the tooltip (`var(--md-sys-color-inverse-surface)`).
+ * - `--md-tooltip-color`: Text color of the tooltip (`var(--md-sys-color-inverse-on-surface)`).
+ */
+export interface TooltipProps extends React.ComponentPropsWithRef<typeof AriaTooltip> {
+}
+/**
+ * Plain tooltip component implementing [Material 3 Tooltips](https://m3.material.io/components/tooltips/overview).
+ *
+ * Provides brief, informative text messages when hovering, focusing, or long-pressing an element.
+ * Supports smooth directional entrance/exit slide transitions and opacity fading based on `data-placement`.
+ *
+ * Configurable CSS tokens:
+ * - `--md-tooltip-background`: Background color of the tooltip (`var(--md-sys-color-inverse-surface)`).
+ * - `--md-tooltip-color`: Text color of the tooltip (`var(--md-sys-color-inverse-on-surface)`).
+ *
+ * @example
+ * ```tsx
+ * import { Button, Tooltip, TooltipTrigger } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <TooltipTrigger>
+ *             <Button label="Save Changes" />
+ *             <Tooltip placement="top">Saves the current document</Tooltip>
+ *         </TooltipTrigger>
+ *     );
+ * }
+ * ```
+ */
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/Tooltip/TooltipTrigger/TooltipTrigger.d.ts

@@ -1,2 +1,30 @@
 import { TooltipTrigger as AriaTooltipTrigger } from 'react-aria-components';
-export declare const TooltipTrigger: React.FC<React.ComponentPropsWithRef<typeof AriaTooltipTrigger>>;
+/**
+ * Props for the {@link TooltipTrigger} component.
+ * Extends React Aria Components `TooltipTrigger` props.
+ */
+export interface TooltipTriggerProps extends React.ComponentPropsWithRef<typeof AriaTooltipTrigger> {
+}
+/**
+ * Wraps an interactive trigger element (such as a button) and a {@link Tooltip}
+ * to manage hover, focus, and long-press display states.
+ *
+ * Extends React Aria Components `TooltipTrigger` with default Material 3 delays:
+ * - `delay = 250` (milliseconds before opening on hover/focus)
+ * - `closeDelay = 150` (milliseconds before closing after pointer leaves)
+ *
+ * @example
+ * ```tsx
+ * import { Button, Tooltip, TooltipTrigger } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <TooltipTrigger>
+ *             <Button label="Hover me" />
+ *             <Tooltip>Helpful information</Tooltip>
+ *         </TooltipTrigger>
+ *     );
+ * }
+ * ```
+ */
+export declare const TooltipTrigger: React.FC<TooltipTriggerProps>;