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

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

@@ -1,4 +1,19 @@
 import { CalendarState, RangeCalendarState } from 'react-aria-components';
 import { CalendarSelectionMode } from 'react-aria-components/Calendar';
+/**
+ * Accesses the active calendar state from the nearest enclosing `Calendar` or `RangeCalendar`.
+ *
+ * Checks both {@link CalendarStateContext} (single date) and {@link RangeCalendarStateContext} (range).
+ * Throws an error if invoked outside a valid calendar provider context.
+ *
+ * @returns The active {@link CalendarState} or {@link RangeCalendarState}.
+ * @throws {Error} If called outside of a `Calendar` or `RangeCalendar` component hierarchy.
+ */
 export declare function useCalendarState(): CalendarState<CalendarSelectionMode> | RangeCalendarState<import('react-stately/useCalendarState').DateValue>;
+/**
+ * Type guard function to determine whether a given calendar state is a {@link RangeCalendarState}.
+ *
+ * @param state - The calendar state instance to check.
+ * @returns `true` if `state` is a `RangeCalendarState` (containing an `anchorDate` property), otherwise `false`.
+ */
 export declare function isRangeCalendarState(state: CalendarState<CalendarSelectionMode> | RangeCalendarState): state is RangeCalendarState;

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

@@ -1,2 +1,3 @@
 export * from './Calendar';
+export * from './core';
 export * from './RangeCalendar';

package/dist/components/Calendar/index.js

@@ -1,3 +1,4 @@
-import { Calendar as e } from "./Calendar/index.js";
-import { RangeCalendar as t } from "./RangeCalendar/index.js";
-export { e as Calendar, t as RangeCalendar };
+import { a as e, i as t, n, r, t as i } from "../../chunks/core3";
+import { Calendar as a } from "./Calendar/index.js";
+import { RangeCalendar as o } from "./RangeCalendar/index.js";
+export { a as Calendar, r as CalendarBaseStyles, o as RangeCalendar, t as defaultMaxYearIncrement, e as defaultMinYear, i as isRangeCalendarState, n as useCalendarState };

package/dist/components/Card/Card/Card.d.ts

@@ -1,2 +1,22 @@
 import { CardProps } from './types';
+/**
+ * A card container component implementing Material Design 3 Card guidelines.
+ *
+ * Cards contain content and actions about a single subject. They present information
+ * in a structured format and support three visual variants (`"filled"`, `"elevated"`, `"outlined"`),
+ * interactive press states with touch ripple feedback via {@link Splash}, keyboard navigation,
+ * and accessible focus management built on top of React Aria's `GridListItem`.
+ *
+ * @example
+ * ```tsx
+ * import { Card, CardIcon } from '@adgytec/web-ui-components';
+ * import { Bell } from 'lucide-react';
+ *
+ * <Card variant="elevated" onPress={() => console.log('Card clicked')}>
+ *     <CardIcon icon={Bell} />
+ *     <h3>Notifications</h3>
+ *     <p>Manage your alert preferences.</p>
+ * </Card>
+ * ```
+ */
 export declare const Card: React.FC<CardProps>;

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

@@ -1,7 +1,30 @@
 import { GridListItem } from 'react-aria-components';
+/**
+ * Visual hierarchy and elevation variants for the {@link Card} component.
+ *
+ * - `"filled"`: Subtle contrast against a surface without elevation shadows (default).
+ * - `"elevated"`: Elevated surface with drop shadow, separating card content from the background.
+ * - `"outlined"`: Bordered surface with an outline stroke and no elevation shadow.
+ */
 export type CardVariant = "elevated" | "outlined" | "filled";
+/**
+ * Props for the {@link Card} component.
+ * Extends React Aria's `GridListItem` props, supporting interaction states,
+ * selection, and press handlers.
+ */
 export interface CardProps extends React.ComponentPropsWithRef<typeof GridListItem> {
+    /**
+     * The visual style and elevation variant of the card.
+     *
+     * @default "filled"
+     */
     variant?: CardVariant;
 }
+/**
+ * Recommended spacing (in pixels) between adjacent cards in a grid layout.
+ */
 export declare const PaddingBetweenCards = 12;
+/**
+ * Fixed icon size (in pixels) used by the {@link CardIcon} component.
+ */
 export declare const CardIconSize = 24;

package/dist/components/Card/CardIcon/CardIcon.d.ts

@@ -1,2 +1,26 @@
 import { Icon } from '../../Icon';
-export declare const CardIcon: React.FC<Omit<React.ComponentPropsWithRef<typeof Icon>, "size" | "withText">>;
+/**
+ * Props for the {@link CardIcon} component.
+ * Extends {@link Icon} props while omitting `size` and `withText`, which are pre-configured
+ * specifically for cards.
+ */
+export interface CardIconProps extends Omit<React.ComponentPropsWithRef<typeof Icon>, "size" | "withText"> {
+}
+/**
+ * A styled icon component designed specifically for placement inside a {@link Card}.
+ *
+ * Automatically standardizes the icon size to 24px ({@link CardIconSize}) and applies
+ * theme-aware icon coloring (`--_md-card-icon-color`).
+ *
+ * @example
+ * ```tsx
+ * import { Card, CardIcon } from '@adgytec/web-ui-components';
+ * import { Sparkles } from 'lucide-react';
+ *
+ * <Card>
+ *     <CardIcon icon={Sparkles} />
+ *     <span>Featured Content</span>
+ * </Card>
+ * ```
+ */
+export declare const CardIcon: React.FC<CardIconProps>;

package/dist/components/Decorators/GridBackgroundDecorator/GridBackgroundDecorator.d.ts

@@ -1,14 +1,53 @@
 import { default as React } from 'react';
+/**
+ * Visual pattern variants for the {@link GridBackgroundDecorator} component.
+ *
+ * - `"lines"`: Structured intersecting line grid pattern (default).
+ * - `"dots"`: Subtle dotted matrix pattern.
+ */
+export type GridBackgroundDecoratorVariant = "lines" | "dots";
+/**
+ * Props for the {@link GridBackgroundDecorator} component.
+ */
 export interface GridBackgroundDecoratorProps {
-    /** Custom z-index value. Defaults to 0 */
+    /**
+     * Z-index layer depth for the decorator container.
+     *
+     * @default 0
+     */
     zIndex?: number;
-    /** Additional CSS classes */
+    /** Additional CSS class names to apply to the decorator container. */
     className?: string;
-    /** Additional custom styles */
+    /** Custom inline styles to apply to the decorator container. */
     style?: React.CSSProperties;
-    /** Grid size in pixels. Defaults to 40 */
+    /**
+     * Grid cell spacing size in pixels.
+     *
+     * @default 40
+     */
     gridSize?: number;
-    /** Grid pattern variant. Defaults to 'lines' */
-    variant?: "lines" | "dots";
+    /**
+     * Visual grid style pattern.
+     *
+     * @default "lines"
+     */
+    variant?: GridBackgroundDecoratorVariant;
 }
-export declare const GridBackgroundDecorator: ({ zIndex, className, style, gridSize, variant, }: GridBackgroundDecoratorProps) => React.JSX.Element;
+/**
+ * A non-blocking background decorator that renders a structured grid of lines or dots.
+ *
+ * Spans the full page or parent container with `pointer-events: none` and `aria-hidden="true"`
+ * so it provides visual depth without interfering with pointer events or assistive technology.
+ *
+ * @example
+ * ```tsx
+ * import { GridBackgroundDecorator } from '@adgytec/web-ui-components';
+ *
+ * // Standard intersecting grid line pattern
+ * <GridBackgroundDecorator variant="lines" gridSize={40} />
+ *
+ * // Dot matrix grid pattern with custom z-index
+ * <GridBackgroundDecorator variant="dots" gridSize={24} zIndex={-5} />
+ * ```
+ */
+export declare const GridBackgroundDecorator: React.FC<GridBackgroundDecoratorProps>;

package/dist/components/Decorators/RadialGlowDecorator/RadialGlowDecorator.d.ts

@@ -1,12 +1,59 @@
 import { default as React } from 'react';
+/**
+ * Predefined layout, blob placement, and motion variants for the {@link RadialGlowDecorator} component.
+ *
+ * - `"default"`: 3 static blobs (primary, secondary, tertiary) spread across the viewport.
+ * - `"split"`: 2 static blobs separated left and right, ideal for two-column or split layouts.
+ * - `"top-bar"`: 3 horizontal blobs aligned across the top fold or header area.
+ * - `"corners"`: 4 static blobs anchored in each of the four screen corners.
+ * - `"aurora"`: 4 organic floating blobs with continuous drift animation for atmospheric ambiance.
+ * - `"spotlight"`: 3 centered, layered blobs with an organic pulsating scale animation.
+ * - `"nebula"`: 4 orbiting and drifting blobs creating an immersive, fluid cosmic look.
+ * - `"horizon"`: 3 bottom-anchored blobs with rising and pulsating motion for footers and page bottoms.
+ * - `"spiral"`: 3 blobs following a circular orbiting path for dynamic centerpiece effects.
+ */
+export type RadialGlowDecoratorVariant = "default" | "split" | "top-bar" | "corners" | "aurora" | "spotlight" | "nebula" | "horizon" | "spiral";
+/**
+ * Props for the {@link RadialGlowDecorator} component.
+ */
 export interface RadialGlowDecoratorProps {
-    /** Custom z-index value. Defaults to -10 */
+    /**
+     * Z-index layer depth for the decorator container.
+     *
+     * @default -10
+     */
     zIndex?: number;
-    /** Additional CSS classes */
+    /** Additional CSS class names to apply to the decorator container. */
     className?: string;
-    /** Additional custom styles */
+    /** Custom inline styles to apply to the decorator container. */
     style?: React.CSSProperties;
-    /** Blob arrangement variant. Defaults to 'default' */
-    variant?: "default" | "split" | "top-bar" | "corners" | "aurora" | "spotlight" | "nebula" | "horizon" | "spiral";
+    /**
+     * Predefined layout, blob placement, and animation variant.
+     *
+     * @default "default"
+     */
+    variant?: RadialGlowDecoratorVariant;
 }
-export declare const RadialGlowDecorator: ({ zIndex, className, style, variant, }: RadialGlowDecoratorProps) => React.JSX.Element;
+/**
+ * A non-blocking decorative background component that renders smooth, theme-aware radial glow gradients.
+ *
+ * Layers multiple blurred color blobs to produce premium ambient lighting and background washes.
+ * Automatically scales opacities between light and dark modes to ensure visual balance.
+ * Spans the full page with `pointer-events: none` and `aria-hidden="true"`, ensuring no interference
+ * with user interactions or accessibility trees.
+ *
+ * @example
+ * ```tsx
+ * import { RadialGlowDecorator } from '@adgytec/web-ui-components';
+ *
+ * // Static multi-color radial gradient
+ * <RadialGlowDecorator variant="default" />
+ *
+ * // Continuous floating aurora animation with custom z-index
+ * <RadialGlowDecorator variant="aurora" zIndex={-20} />
+ *
+ * // Centered pulsating spotlight for hero sections
+ * <RadialGlowDecorator variant="spotlight" />
+ * ```
+ */
+export declare const RadialGlowDecorator: React.FC<RadialGlowDecoratorProps>;

package/dist/components/Dialog/ActionDialog/ActionDialog.d.ts

@@ -1,2 +1,35 @@
 import { ActionDialogProps } from './types';
+/**
+ * A specialized dialog component pre-configured for standard alert, confirmation, and prompt patterns.
+ *
+ * Features an optional icon, title heading, scrollable body content area, and customizable action buttons.
+ * Implements Material Design 3 guidelines for dialog layout alignment (such as centering the header when
+ * an icon is provided) and configurable divider placements.
+ *
+ * @example
+ * ```tsx
+ * import { ActionDialog, Modal, ModalOverlay, Button } from '@adgytec/web-ui-components';
+ * import { DialogTrigger } from 'react-aria-components';
+ * import { AlertTriangle } from 'lucide-react';
+ *
+ * <DialogTrigger>
+ *     <Button color="outlined">Delete Account</Button>
+ *     <ModalOverlay isDismissable>
+ *         <Modal>
+ *             <ActionDialog
+ *                 icon={AlertTriangle}
+ *                 heading="Delete Account"
+ *                 divider="before-actions"
+ *                 actions={[
+ *                     <Button key="cancel" color="text">Cancel</Button>,
+ *                     <Button key="delete">Delete</Button>,
+ *                 ]}
+ *             >
+ *                 Are you sure you want to delete your account? This action cannot be undone.
+ *             </ActionDialog>
+ *         </Modal>
+ *     </ModalOverlay>
+ * </DialogTrigger>
+ * ```
+ */
 export declare const ActionDialog: React.FC<ActionDialogProps>;

package/dist/components/Dialog/ActionDialog/types.d.ts

@@ -1,10 +1,36 @@
 import { LucideIcon } from 'lucide-react';
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import { Dialog, DialogRenderProps } from 'react-aria-components';
+/**
+ * Visual divider placement options for {@link ActionDialog}.
+ *
+ * - `"none"`: No dividing borders (default).
+ * - `"all"`: Dividing borders both below the heading and above the action buttons.
+ * - `"after-heading"`: Border directly below the heading.
+ * - `"before-actions"`: Border directly above the action buttons.
+ */
 export type ActionDialogDividerPlacement = "none" | "all" | "after-heading" | "before-actions";
+/**
+ * Props for the {@link ActionDialog} component.
+ * Extends React Aria's `Dialog` props (excluding `className`).
+ */
 export interface ActionDialogProps extends Omit<React.ComponentPropsWithRef<typeof Dialog>, "className"> {
+    /** The title text displayed in the dialog header. */
     heading?: string;
+    /**
+     * An optional icon displayed within the dialog header.
+     * When present, header content is centered per Material Design 3 guidelines.
+     */
     icon?: LucideIcon;
-    actions?: ReactElement[] | ((renderProps: DialogRenderProps) => ReactElement[]);
+    /**
+     * Action elements (typically `Button` components) rendered at the bottom of the dialog.
+     * Can be an array of nodes or a render function receiving {@link DialogRenderProps}.
+     */
+    actions?: ReactNode[] | ((renderProps: DialogRenderProps) => ReactNode[]);
+    /**
+     * Placement of dividing borders between header, scrollable body, and action footer.
+     *
+     * @default "none"
+     */
     divider?: ActionDialogDividerPlacement;
 }

package/dist/components/Dialog/Dialog/Dialog.d.ts

@@ -1,2 +1,33 @@
 import { Dialog as AriaDialog } from 'react-aria-components';
-export declare const Dialog: React.FC<React.ComponentPropsWithRef<typeof AriaDialog>>;
+/**
+ * Props for the {@link Dialog} component.
+ * Extends React Aria's {@link AriaDialog} props.
+ */
+export interface DialogProps extends React.ComponentPropsWithRef<typeof AriaDialog> {
+}
+/**
+ * A dialog container component implementing Material Design 3 Dialog specifications.
+ *
+ * Appears in front of application content to present critical alerts, information, or request
+ * user confirmation. Provides context to nested elements via {@link DialogContext} and manages
+ * focus trapping, accessible labeling (`slot="title"`), and keyboard escape behavior.
+ *
+ * @example
+ * ```tsx
+ * import { Dialog, Modal, ModalOverlay, Button } from '@adgytec/web-ui-components';
+ * import { DialogTrigger, Heading } from 'react-aria-components';
+ *
+ * <DialogTrigger>
+ *     <Button>Open Dialog</Button>
+ *     <ModalOverlay>
+ *         <Modal>
+ *             <Dialog>
+ *                 <Heading slot="title">Discard draft?</Heading>
+ *                 <p>Draft will be permanently removed.</p>
+ *             </Dialog>
+ *         </Modal>
+ *     </ModalOverlay>
+ * </DialogTrigger>
+ * ```
+ */
+export declare const Dialog: React.FC<DialogProps>;

package/dist/components/Dialog/Modal/Modal.d.ts

@@ -1,2 +1,25 @@
 import { Modal as AriaModal } from 'react-aria-components';
-export declare const Modal: React.FC<React.ComponentPropsWithRef<typeof AriaModal>>;
+/**
+ * Props for the {@link Modal} component.
+ * Extends React Aria's {@link AriaModal} props.
+ */
+export interface ModalProps extends React.ComponentPropsWithRef<typeof AriaModal> {
+}
+/**
+ * A modal positioning and transition wrapper for dialogs.
+ *
+ * Controls entrance and exit animations (such as zoom-in scaling) and centers
+ * the enclosed dialog within the viewport or containing overlay.
+ *
+ * @example
+ * ```tsx
+ * import { Modal, ModalOverlay, Dialog } from '@adgytec/web-ui-components';
+ *
+ * <ModalOverlay isDismissable>
+ *     <Modal>
+ *         <Dialog>Modal content goes here</Dialog>
+ *     </Modal>
+ * </ModalOverlay>
+ * ```
+ */
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/Dialog/ModalOverlay/ModalOverlay.d.ts

@@ -1,2 +1,26 @@
 import { ModalOverlay as AriaModalOverlay } from 'react-aria-components';
-export declare const ModalOverlay: React.FC<React.ComponentPropsWithRef<typeof AriaModalOverlay>>;
+/**
+ * Props for the {@link ModalOverlay} component.
+ * Extends React Aria's {@link AriaModalOverlay} props.
+ */
+export interface ModalOverlayProps extends React.ComponentPropsWithRef<typeof AriaModalOverlay> {
+}
+/**
+ * A scrim backdrop overlay rendered behind modal dialogs.
+ *
+ * Applies the Material Design 3 backdrop scrim tint (`--md-dialog-overlay`),
+ * handles entry/exit fade animations, locks background body scrolling, and can dismiss
+ * the dialog on outside click when configured with `isDismissable`.
+ *
+ * @example
+ * ```tsx
+ * import { ModalOverlay, Modal, Dialog } from '@adgytec/web-ui-components';
+ *
+ * <ModalOverlay isDismissable>
+ *     <Modal>
+ *         <Dialog>Dialog Content</Dialog>
+ *     </Modal>
+ * </ModalOverlay>
+ * ```
+ */
+export declare const ModalOverlay: React.FC<ModalOverlayProps>;

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

@@ -1,2 +1,10 @@
+/**
+ * Context provided by the {@link Dialog} component to indicate whether children are rendered inside a dialog.
+ */
 export declare const DialogContext: import('react').Context<boolean | null>;
+/**
+ * Hook that returns whether the calling component is currently rendered within a {@link Dialog}.
+ *
+ * @returns `true` if within a Dialog context, otherwise `false`.
+ */
 export declare function useInDialog(): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Dialog/core/context.ts","../../../../src/components/Dialog/core/typography.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext<boolean | null>(null);\n\nexport function useInDialog() {\n    return useContext(DialogContext) === true;\n}\n","import { typography } from \"@/utils/typography\";\n\nexport const DialogIconSize = 24;\nexport const DialogHeadlineTypography = typography.headlineSmall;\nexport const DialogBodyTypography = typography.bodyMedium;\n"],"mappings":";;;AAEA,IAAa,IAAgB,EAA8B,IAAI;AAE/D,SAAO,IAAA;CAAA,OACI,EAAW,CAAa,MAAM;AAAI;;;ACH7C,IAAa,IAAiB,IACjB,IAA2B,EAAW,eACtC,IAAuB,EAAW"}
+{"version":3,"file":"index.js","names":["typography","DialogContext","createContext","useInDialog","useContext","DialogIconSize","DialogHeadlineTypography","DialogBodyTypography"],"sources":["../../../../src/components/Dialog/core/context.ts","../../../../src/components/Dialog/core/typography.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Context provided by the {@link Dialog} component to indicate whether children are rendered inside a dialog.\n */\nexport const DialogContext = createContext<boolean | null>(null);\n\n/**\n * Hook that returns whether the calling component is currently rendered within a {@link Dialog}.\n *\n * @returns `true` if within a Dialog context, otherwise `false`.\n */\nexport function useInDialog() {\n    return useContext(DialogContext) === true;\n}\n","import { typography } from \"@/utils/typography\";\n\n/**\n * Standard icon size (in pixels) for icons rendered in a dialog header.\n */\nexport const DialogIconSize = 24;\n\n/**\n * Material Design 3 headline typography class for dialog titles (`headlineSmall`).\n */\nexport const DialogHeadlineTypography = typography.headlineSmall;\n\n/**\n * Material Design 3 body typography class for dialog content (`bodyMedium`).\n */\nexport const DialogBodyTypography = typography.bodyMedium;\n"],"mappings":";;;AAKA,IAAaC,IAAgBC,EAA8B,IAAI;AAO/D,SAAOC,IAAA;CAAA,OACIC,EAAWH,CAAa,MAAM;AAAI;;;ACR7C,IAAaI,IAAiB,IAKjBC,IAA2BN,EAAW,eAKtCO,IAAuBP,EAAW"}

package/dist/components/Dialog/core/typography.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Standard icon size (in pixels) for icons rendered in a dialog header.
+ */
 export declare const DialogIconSize = 24;
+/**
+ * Material Design 3 headline typography class for dialog titles (`headlineSmall`).
+ */
 export declare const DialogHeadlineTypography: "typography-headline-small";
+/**
+ * Material Design 3 body typography class for dialog content (`bodyMedium`).
+ */
 export declare const DialogBodyTypography: "typography-body-medium";

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

@@ -1,2 +1,26 @@
 import { Disclosure as AriaDisclosure } from 'react-aria-components';
-export declare const Disclosure: React.FC<React.ComponentPropsWithRef<typeof AriaDisclosure>>;
+/**
+ * Props for the {@link Disclosure} component.
+ * Extends React Aria's {@link AriaDisclosure} props.
+ */
+export interface DisclosureProps extends React.ComponentPropsWithRef<typeof AriaDisclosure> {
+}
+/**
+ * An expandable section component implementing Material Design 3 disclosure/accordion item behavior.
+ *
+ * Controls showing and hiding associated content based on user interaction with its {@link DisclosureHeader}.
+ * Manages open/collapsed state, accessible ARIA attributes (`aria-expanded`, `aria-controls`), and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * import { Disclosure, DisclosureHeader, DisclosurePanel } from '@adgytec/web-ui-components';
+ *
+ * <Disclosure>
+ *     <DisclosureHeader>Collapsible Section</DisclosureHeader>
+ *     <DisclosurePanel>
+ *         Detailed information displayed when expanded.
+ *     </DisclosurePanel>
+ * </Disclosure>
+ * ```
+ */
+export declare const Disclosure: React.FC<DisclosureProps>;

package/dist/components/Disclosure/DisclosureGroup/DisclosureGroup.d.ts

@@ -1,6 +1,54 @@
 import { DisclosureGroup as AriaDisclosureGroup } from 'react-aria-components';
 import { Typography } from '../../../utils';
-export declare const DisclosureGroup: React.FC<React.ComponentPropsWithRef<typeof AriaDisclosureGroup> & {
+/**
+ * Props for the {@link DisclosureGroup} component.
+ * Extends React Aria's {@link AriaDisclosureGroup} props.
+ */
+export interface DisclosureGroupProps extends React.ComponentPropsWithRef<typeof AriaDisclosureGroup> {
+    /**
+     * Default typography style applied to all {@link DisclosureHeader} labels within the group.
+     *
+     * @default typography.titleMediumEmphasized
+     */
     labelTypography?: Typography;
+    /**
+     * Default typography style applied to all {@link DisclosurePanel} bodies within the group.
+     *
+     * @default typography.bodyLarge
+     */
     panelTypography?: Typography;
-}>;
+}
+/**
+ * An accordion grouping container for managing multiple related {@link Disclosure} sections.
+ *
+ * Supports single or multi-expansion modes via React Aria props (`allowsMultipleExpanded`),
+ * coordinates keyboard navigation between items, and provides shared typography tokens
+ * to all descendant disclosure headers and panels.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     DisclosureGroup,
+ *     Disclosure,
+ *     DisclosureHeader,
+ *     DisclosurePanel,
+ *     typography
+ * } from '@adgytec/web-ui-components';
+ *
+ * <DisclosureGroup
+ *     allowsMultipleExpanded
+ *     labelTypography={typography.titleMedium}
+ *     panelTypography={typography.bodyMedium}
+ * >
+ *     <Disclosure id="step-1">
+ *         <DisclosureHeader>Step 1: Account Info</DisclosureHeader>
+ *         <DisclosurePanel>Enter your username and password.</DisclosurePanel>
+ *     </Disclosure>
+ *     <Disclosure id="step-2">
+ *         <DisclosureHeader>Step 2: Profile Details</DisclosureHeader>
+ *         <DisclosurePanel>Upload an avatar and bio.</DisclosurePanel>
+ *     </Disclosure>
+ * </DisclosureGroup>
+ * ```
+ */
+export declare const DisclosureGroup: React.FC<DisclosureGroupProps>;

package/dist/components/Disclosure/DisclosureHeader/DisclosureHeader.d.ts

@@ -1,5 +1,34 @@
 import { Heading } from 'react-aria-components';
 import { Typography } from '../../../utils';
-export declare const DisclosureHeader: React.FC<React.ComponentPropsWithRef<typeof Heading> & {
+/**
+ * Props for the {@link DisclosureHeader} component.
+ * Extends React Aria's {@link Heading} props.
+ */
+export interface DisclosureHeaderProps extends React.ComponentPropsWithRef<typeof Heading> {
+    /**
+     * Custom typography style for the disclosure header label.
+     * Overrides the default or group-level typography.
+     *
+     * @default typography.titleMediumEmphasized
+     */
     labelTypography?: Typography;
-}>;
+}
+/**
+ * The interactive header that toggles expansion of a {@link Disclosure} component.
+ *
+ * Renders a semantic heading enclosing an accessible button trigger equipped with an expanding
+ * chevron indicator icon and Material Design touch ripple feedback.
+ *
+ * @example
+ * ```tsx
+ * import { Disclosure, DisclosureHeader, DisclosurePanel, typography } from '@adgytec/web-ui-components';
+ *
+ * <Disclosure>
+ *     <DisclosureHeader labelTypography={typography.titleLarge}>
+ *         Section Title
+ *     </DisclosureHeader>
+ *     <DisclosurePanel>Section Content</DisclosurePanel>
+ * </Disclosure>
+ * ```
+ */
+export declare const DisclosureHeader: React.FC<DisclosureHeaderProps>;

package/dist/components/Disclosure/DisclosurePanel/DisclosurePanel.d.ts

@@ -1,5 +1,34 @@
 import { DisclosurePanel as AriaDisclosurePanel } from 'react-aria-components';
 import { Typography } from '../../../utils';
-export declare const DisclosurePanel: React.FC<React.ComponentPropsWithRef<typeof AriaDisclosurePanel> & {
+/**
+ * Props for the {@link DisclosurePanel} component.
+ * Extends React Aria's {@link AriaDisclosurePanel} props.
+ */
+export interface DisclosurePanelProps extends React.ComponentPropsWithRef<typeof AriaDisclosurePanel> {
+    /**
+     * Custom typography style for the disclosure panel content.
+     * Overrides the default or group-level typography.
+     *
+     * @default typography.bodyLarge
+     */
     panelTypography?: Typography;
-}>;
+}
+/**
+ * The collapsible content container displayed when a {@link Disclosure} is expanded.
+ *
+ * Automatically manages visibility, smooth collapse/expand layout transitions,
+ * and inherited or customized typography.
+ *
+ * @example
+ * ```tsx
+ * import { Disclosure, DisclosureHeader, DisclosurePanel, typography } from '@adgytec/web-ui-components';
+ *
+ * <Disclosure>
+ *     <DisclosureHeader>FAQ Question</DisclosureHeader>
+ *     <DisclosurePanel panelTypography={typography.bodyMedium}>
+ *         Answer text explaining details in depth.
+ *     </DisclosurePanel>
+ * </Disclosure>
+ * ```
+ */
+export declare const DisclosurePanel: React.FC<DisclosurePanelProps>;

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

@@ -1,6 +1,15 @@
 import { Typography } from '../../../utils';
-export type DisclosureTypographyContextValue = {
+/**
+ * Context value providing inherited typography styles for disclosure components within a group.
+ */
+export interface DisclosureTypographyContextValue {
+    /** Typography applied to {@link DisclosureHeader} labels. */
     label?: Typography;
+    /** Typography applied to {@link DisclosurePanel} content. */
     panel?: Typography;
-};
+}
+/**
+ * React Context used by {@link DisclosureGroup} to pass typography settings down to nested
+ * {@link DisclosureHeader} and {@link DisclosurePanel} components.
+ */
 export declare const DisclosureTypographyContext: import('react').Context<DisclosureTypographyContextValue>;

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

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