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

package/dist/components/Navigation/SubNavigation/SubNavigationTrigger/SubNavigationTrigger.d.ts

@@ -1,6 +1,44 @@
 import { ReactNode } from 'react';
-export declare const SubNavigationTrigger: React.FC<{
+/**
+ * Props for the [`SubNavigationTrigger`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigationTrigger/SubNavigationTrigger.tsx) component.
+ */
+export interface SubNavigationTriggerProps {
+    /**
+     * Unique state key used for referencing and animating this sub-navigation level.
+     */
     stateID: string;
+    /**
+     * Child elements, typically an opening trigger button and a [`SubNavigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.
+     */
     children?: ReactNode;
+    /**
+     * Text or node label passed down to the trigger button and child sub-navigation header.
+     */
     label: ReactNode;
-}>;
+}
+/**
+ * Orchestrator component tying together an opening action button and its sliding
+ * [`SubNavigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.
+ *
+ * Configures button click handlers to slide the sub-navigation panel into view, increments the
+ * depth counter, and passes down the section label.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     SubNavigationTrigger,
+ *     NavigationButton,
+ *     SubNavigation,
+ *     NavigationLink,
+ * } from "@adgytec/web-ui-components";
+ * import { Settings } from "lucide-react";
+ *
+ * <SubNavigationTrigger stateID="settings" label="Settings">
+ *     <NavigationButton icon={Settings} />
+ *     <SubNavigation>
+ *         <NavigationLink href="/settings/profile" label="Profile" />
+ *     </SubNavigation>
+ * </SubNavigationTrigger>
+ * ```
+ */
+export declare const SubNavigationTrigger: React.FC<SubNavigationTriggerProps>;

package/dist/components/Navigation/SubNavigation/SubNavigationTrigger/index.js

@@ -1,14 +1,14 @@
 import { t as e } from "../../../../chunks/compiler-runtime";
-import { r as t } from "../../../../chunks/NavigationState";
-import { n, r, t as i } from "../../../../chunks/core8";
+import { n as t, r as n, t as r } from "../../../../chunks/core8";
+import { useNavigationState as i } from "../../NavigationState/index.js";
 import { jsx as a } from "react/jsx-runtime";
 import { ButtonContext as o, DEFAULT_SLOT as s, Provider as c } from "react-aria-components";
 //#region src/components/Navigation/SubNavigation/SubNavigationTrigger/SubNavigationTrigger.tsx
 var l = e(), u = (e) => {
-	let u = (0, l.c)(29), { stateID: d, children: f, label: p } = e, m = r(), { openSubNavigation: h, closeSubNavigation: g, isSubNavigationOpen: _ } = t(), v = `${m.id}--${d}`, y = m.depth + 1, b;
-	u[0] === p ? b = u[1] : (b = [i, p], u[0] = p, u[1] = b);
+	let u = (0, l.c)(29), { stateID: d, children: f, label: p } = e, m = n(), { openSubNavigation: h, closeSubNavigation: g, isSubNavigationOpen: _ } = i(), v = `${m.id}--${d}`, y = m.depth + 1, b;
+	u[0] === p ? b = u[1] : (b = [r, p], u[0] = p, u[1] = b);
 	let x;
-	u[2] !== y || u[3] !== v ? (x = [n, {
+	u[2] !== y || u[3] !== v ? (x = [t, {
 		id: v,
 		depth: y
 	}], u[2] = y, u[3] = v, u[4] = x) : x = u[4];

package/dist/components/Navigation/SubNavigation/SubNavigationTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children"],"sources":["../../../../../src/components/Navigation/SubNavigation/SubNavigationTrigger/SubNavigationTrigger.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { ButtonContext, DEFAULT_SLOT, Provider } from \"react-aria-components\";\nimport {\n    NavigationInfoContext,\n    NavLabelContext,\n    useNavigationInfo,\n} from \"../../core\";\nimport { useNavigationState } from \"../../NavigationState\";\n\nexport const SubNavigationTrigger: React.FC<{\n    stateID: string;\n    children?: ReactNode;\n    label: ReactNode;\n}> = ({ stateID, children, label }) => {\n    const parentInfo = useNavigationInfo();\n    const { openSubNavigation, closeSubNavigation, isSubNavigationOpen } =\n        useNavigationState();\n\n    const subNavID = `${parentInfo.id}--${stateID}`;\n    const depth = parentInfo.depth + 1;\n\n    return (\n        <Provider\n            values={[\n                [NavLabelContext, label],\n                [NavigationInfoContext, { id: subNavID, depth }],\n                [\n                    ButtonContext,\n                    {\n                        slots: {\n                            [DEFAULT_SLOT]: {},\n                            open: {\n                                onPress: () => {\n                                    openSubNavigation(subNavID, depth);\n                                },\n                                isPressed: isSubNavigationOpen(subNavID),\n                            },\n                            close: {\n                                onPress: () => {\n                                    closeSubNavigation(subNavID);\n                                },\n                            },\n                        },\n                    },\n                ],\n            ]}\n        >\n            {children}\n        </Provider>\n    );\n};\n"],"mappings":";;;;;;aASa,KAIR,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,EAAA,GAAC,EAAA,YAAA,aAAA,aAAA,GACF,IAAmB,EAAkB,GACrC,EAAA,sBAAA,uBAAA,2BACI,EAAmB,GAEvB,IAAiB,GAAG,EAAU,GAAG,IAAK,KACtC,IAAc,EAAU,QAAS,GAAE;CAAA,AAAA,EAAA,OAAA,IAKC,IAAA,EAAA,MAAxB,IAAA,CAAC,GAAiB,CAAK,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KACxB,IAAA,CAAC,GAAuB;EAAA,IAAM;EAAQ;CAAQ,CAAC,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,KAKpB,IAAA,CAAC,GAAC,EAAA,KAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAEL,UAAA;EACL,EAAkB,GAAU,CAAK;CAAC,GACrC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KACU,IAAA,EAAoB,CAAQ,GAAC,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAJtC,IAAA;EAAA,SACO;EAER,WACU;CACf,GAAC,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KACM,IAAA,EAAA,eACM;EACL,EAAmB,CAAQ;CAAC,EAEpC,GAAC,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAfb,IAAA,CACI,GACA,EAAA,OACW;GACF,IAAe;EAAE,MACZ;EAKL,OACM;CAKX,EACJ,CAAC,GACJ,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAAA,AAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KAAA,EAAA,QAAA,KArBG,IAAA;EACJ;EACA;EACA;CAkBC,GACJ,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA;CAAA,IAAA;CAGM,OAHN,EAAA,QAAA,KAAA,EAAA,QAAA,KAvBL,IAAA,kBAAC,GAAD;EACY,QAAA;EAwBP;CAzBI,CAAA,GA0BE,EAAA,MAAA,GAAA,EAAA,MAAA,GAAA,EAAA,MAAA,KAAA,IAAA,EAAA,KA1BX;AA0BW"}
+{"version":3,"file":"index.js","names":["children","_c","require_compiler_runtime","NavigationInfoContext","useNavigationInfo","NavLabelContext","import_compiler_runtime","SubNavigationTrigger","$","t0","parentInfo","useNavigationState","subNavID","stateID","depth","t1","label","t2","t3","t4","openSubNavigation","t5","isSubNavigationOpen","t6","t7","closeSubNavigation","t8","ButtonContext","DEFAULT_SLOT","t9","t10","children","Provider"],"sources":["../../../../../src/components/Navigation/SubNavigation/SubNavigationTrigger/SubNavigationTrigger.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { ButtonContext, DEFAULT_SLOT, Provider } from \"react-aria-components\";\nimport {\n    NavigationInfoContext,\n    NavLabelContext,\n    useNavigationInfo,\n} from \"../../core\";\nimport { useNavigationState } from \"../../NavigationState\";\n\n/**\n * Props for the [`SubNavigationTrigger`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigationTrigger/SubNavigationTrigger.tsx) component.\n */\nexport interface SubNavigationTriggerProps {\n    /**\n     * Unique state key used for referencing and animating this sub-navigation level.\n     */\n    stateID: string;\n\n    /**\n     * Child elements, typically an opening trigger button and a [`SubNavigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.\n     */\n    children?: ReactNode;\n\n    /**\n     * Text or node label passed down to the trigger button and child sub-navigation header.\n     */\n    label: ReactNode;\n}\n\n/**\n * Orchestrator component tying together an opening action button and its sliding\n * [`SubNavigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.\n *\n * Configures button click handlers to slide the sub-navigation panel into view, increments the\n * depth counter, and passes down the section label.\n *\n * @example\n * ```tsx\n * import {\n *     SubNavigationTrigger,\n *     NavigationButton,\n *     SubNavigation,\n *     NavigationLink,\n * } from \"@adgytec/web-ui-components\";\n * import { Settings } from \"lucide-react\";\n *\n * <SubNavigationTrigger stateID=\"settings\" label=\"Settings\">\n *     <NavigationButton icon={Settings} />\n *     <SubNavigation>\n *         <NavigationLink href=\"/settings/profile\" label=\"Profile\" />\n *     </SubNavigation>\n * </SubNavigationTrigger>\n * ```\n */\nexport const SubNavigationTrigger: React.FC<SubNavigationTriggerProps> = ({\n    stateID,\n    children,\n    label,\n}) => {\n    const parentInfo = useNavigationInfo();\n    const { openSubNavigation, closeSubNavigation, isSubNavigationOpen } =\n        useNavigationState();\n\n    const subNavID = `${parentInfo.id}--${stateID}`;\n    const depth = parentInfo.depth + 1;\n\n    return (\n        <Provider\n            values={[\n                [NavLabelContext, label],\n                [NavigationInfoContext, { id: subNavID, depth }],\n                [\n                    ButtonContext,\n                    {\n                        slots: {\n                            [DEFAULT_SLOT]: {},\n                            open: {\n                                onPress: () => {\n                                    openSubNavigation(subNavID, depth);\n                                },\n                                isPressed: isSubNavigationOpen(subNavID),\n                            },\n                            close: {\n                                onPress: () => {\n                                    closeSubNavigation(subNavID);\n                                },\n                            },\n                        },\n                    },\n                ],\n            ]}\n        >\n            {children}\n        </Provider>\n    );\n};\n"],"mappings":";;;;;;aAsDaO,KAA4D,MAAA;CAAA,IAAAC,KAAA,GAAAP,EAAAA,EAAAA,CAAA,EAAA,GAAC,EAAA,YAAA,aAAA,aAAAQ,GAKtEC,IAAmBN,EAAkB,GACrC,EAAA,sBAAA,uBAAA,2BACIO,EAAmB,GAEvBC,IAAiB,GAAGF,EAAU,GAAG,IAAKG,KACtCC,IAAcJ,EAAU,QAAS,GAAEK;CAAA,AAAAP,EAAA,OAAAQ,IAKC,IAAAR,EAAA,MAAxB,IAAA,CAACH,GAAiBW,CAAK,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAD;CAAA,IAAAE;CAAA,AAAAT,EAAA,OAAAM,KAAAN,EAAA,OAAAI,KACxB,IAAA,CAACT,GAAuB;EAAA,IAAMS;EAAQ;CAAQ,CAAC,GAAC,EAAA,KAAAE,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAK,KAAA,IAAAT,EAAA;CAAA,IAAAU;CAAA,AAAAV,EAAA,OAAA,OAAA,IAAA,2BAAA,KAKpB,IAAA,CAAC,GAAC,EAAA,KAAAU,KAAA,IAAAV,EAAA;CAAA,IAAAW;CAAA,AAAAX,EAAA,OAAAM,KAAAN,EAAA,OAAAY,KAAAZ,EAAA,OAAAI,KAEL,UAAA;EACL,EAAkBA,GAAUE,CAAK;CAAC,GACrC,EAAA,KAAAA,GAAA,EAAA,KAAAM,GAAA,EAAA,KAAAR,GAAA,EAAA,KAAAO,KAAA,IAAAX,EAAA;CAAA,IAAAa;CAAA,AAAAb,EAAA,QAAAc,KAAAd,EAAA,QAAAI,KACU,IAAAU,EAAoBV,CAAQ,GAAC,EAAA,MAAAU,GAAA,EAAA,MAAAV,GAAA,EAAA,MAAAS,KAAA,IAAAb,EAAA;CAAA,IAAAe;CAAA,AAAAf,EAAA,QAAAW,KAAAX,EAAA,QAAAa,KAJtC,IAAA;EAAA,SACOF;EAER,WACUE;CACf,GAAC,EAAA,MAAAF,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAE,KAAA,IAAAf,EAAA;CAAA,IAAAgB;CAAA,AAAAhB,EAAA,QAAAiB,KAAAjB,EAAA,QAAAI,KACM,IAAA,EAAA,eACM;EACL,EAAmBA,CAAQ;CAAC,EAEpC,GAAC,EAAA,MAAAa,GAAA,EAAA,MAAAb,GAAA,EAAA,MAAAY,KAAA,IAAAhB,EAAA;CAAA,IAAAkB;CAAA,AAAAlB,EAAA,QAAAe,KAAAf,EAAA,QAAAgB,KAfb,IAAA,CACIG,GACA,EAAA,OACW;GACFC,IAAeV;EAAE,MACZK;EAKL,OACMC;CAKX,EACJ,CAAC,GACJ,EAAA,MAAAD,GAAA,EAAA,MAAAC,GAAA,EAAA,MAAAE,KAAA,IAAAlB,EAAA;CAAA,IAAAqB;CAAA,AAAArB,EAAA,QAAAO,KAAAP,EAAA,QAAAS,KAAAT,EAAA,QAAAkB,KArBG,IAAA;EACJX;EACAE;EACAS;CAkBC,GACJ,EAAA,MAAAX,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAS,GAAA,EAAA,MAAAG,KAAA,IAAArB,EAAA;CAAA,IAAAsB;CAGM,OAHNtB,EAAA,QAAAuB,KAAAvB,EAAA,QAAAqB,KAvBL,IAAA,kBAACG,GAAD;EACY,QAAAH;EAwBP;CAzBI,CAAA,GA0BE,EAAA,MAAAE,GAAA,EAAA,MAAAF,GAAA,EAAA,MAAAC,KAAA,IAAAtB,EAAA,KA1BXsB;AA0BW"}

package/dist/components/Navigation/core/navLabelContext.d.ts

@@ -1,3 +1,9 @@
 import { ReactNode } from 'react';
+/**
+ * Context value representing the label inherited from a parent navigation trigger.
+ */
 export type NavLabelContextType = ReactNode;
+/**
+ * React context providing the trigger label to descendant navigation items or sub-navigation panels.
+ */
 export declare const NavLabelContext: import('react').Context<ReactNode>;

package/dist/components/Navigation/core/navigation.d.ts

@@ -1,3 +1,12 @@
+/**
+ * CSS class for the root navigation container layout and surface styling.
+ */
 export declare const NavigationStyles: string;
+/**
+ * CSS class for the header area of a root [`Navigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/Navigation/Navigation.tsx) container.
+ */
 export declare const NavigationHeaderStyles: string;
+/**
+ * CSS class for the header area of a sliding [`SubNavigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.
+ */
 export declare const SubNavigationHeaderStyles: string;

package/dist/components/Navigation/core/navigationInfo.d.ts

@@ -1,6 +1,25 @@
+/**
+ * Identifier and nesting depth information for the current navigation level.
+ */
 export type NavigationInfoContextType = {
+    /**
+     * Unique identifier for this navigation level/panel.
+     */
     id: string;
+    /**
+     * Current nesting hierarchy depth (root is 0, sub-navigations increment from 1).
+     */
     depth: number;
 };
+/**
+ * React context providing the current navigation level's ID and hierarchy depth.
+ */
 export declare const NavigationInfoContext: import('react').Context<NavigationInfoContextType | null>;
+/**
+ * Hook to access the current navigation level's unique ID and nesting depth.
+ *
+ * @throws If rendered outside of a [`Navigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/Navigation/Navigation.tsx)
+ * or [`SubNavigation`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) component.
+ * @returns The current {@link NavigationInfoContextType}.
+ */
 export declare function useNavigationInfo(): NavigationInfoContextType;

package/dist/components/Navigation/index.js

@@ -1,4 +1,4 @@
-import { n as e, r as t, t as n } from "../../chunks/NavigationState";
+import { NavigationState as e, NavigationStateContext as t, useNavigationState as n } from "./NavigationState/index.js";
 import { n as r, t as i } from "../../chunks/navContext";
 import { n as a, r as o, t as s } from "../../chunks/Navigation";
 import { NavigationButton as c } from "./NavigationItem/NavigationButton/index.js";
@@ -7,4 +7,4 @@ import { t as u } from "../../chunks/NavigationSection";
 import { t as d } from "../../chunks/NavigationSectionLabel";
 import { SubNavigation as f } from "./SubNavigation/SubNavigation/index.js";
 import { SubNavigationTrigger as p } from "./SubNavigation/SubNavigationTrigger/index.js";
-export { s as Navigation, c as NavigationButton, i as NavigationContext, l as NavigationLink, a as NavigationRenderingContext, u as NavigationSection, d as NavigationSectionLabel, n as NavigationState, e as NavigationStateContext, f as SubNavigation, p as SubNavigationTrigger, o as useNavigationContainer, r as useNavigationContext, t as useNavigationState };
+export { s as Navigation, c as NavigationButton, i as NavigationContext, l as NavigationLink, a as NavigationRenderingContext, u as NavigationSection, d as NavigationSectionLabel, e as NavigationState, t as NavigationStateContext, f as SubNavigation, p as SubNavigationTrigger, o as useNavigationContainer, r as useNavigationContext, n as useNavigationState };

package/dist/components/Popover/Popover.d.ts

@@ -1,2 +1,35 @@
 import { Popover as AriaPopover } from 'react-aria-components';
-export declare const Popover: React.FC<React.ComponentPropsWithRef<typeof AriaPopover>>;
+/**
+ * Props for the [`Popover`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Popover/Popover.tsx) component.
+ *
+ * Extends all properties from React Aria's `Popover`, including positioning (`placement`, `offset`, `crossOffset`),
+ * portal containers, and entry/exit transition states.
+ */
+export interface PopoverProps extends React.ComponentPropsWithRef<typeof AriaPopover> {
+}
+/**
+ * Overlay surface container that presents content anchored to a trigger element.
+ *
+ * Built on React Aria's `Popover` with Material Design 3 surface colors, shadow elevation,
+ * and built-in entry/exit animations responsive to placement directions.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     Popover,
+ *     Button,
+ *     DialogTrigger,
+ *     Dialog,
+ * } from "@adgytec/web-ui-components";
+ *
+ * <DialogTrigger>
+ *     <Button label="Open Popover" />
+ *     <Popover>
+ *         <Dialog>
+ *             <p>This is the content inside the popover.</p>
+ *         </Dialog>
+ *     </Popover>
+ * </DialogTrigger>
+ * ```
+ */
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/Sheets/BottomSheet/BottomSheet.d.ts

@@ -1,2 +1,40 @@
-import { Dialog } from 'react-aria-components';
-export declare const BottomSheet: React.FC<React.ComponentPropsWithRef<typeof Dialog>>;
+import { BottomSheetProps } from './types';
+/**
+ * Content container for bottom sheets, conforming to
+ * [Material 3 Bottom Sheets](https://m3.material.io/components/bottom-sheets/overview).
+ *
+ * Renders inside a React Aria `Dialog` within `DialogContext` (value: `true`), anchoring
+ * content to the bottom of the viewport with responsive maximum width and height.
+ * Consumes {@link BottomSheetContext} to apply `data-layout` for standard or detached layouts.
+ *
+ * Configurable CSS tokens:
+ * - `--md-bottom-sheet-background`: Background color of the bottom sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-bottom-sheet-color`: Text color of the bottom sheet (`var(--md-sys-color-on-surface)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Bottom Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>This is the bottom sheet content.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
+export declare const BottomSheet: React.FC<BottomSheetProps>;

package/dist/components/Sheets/BottomSheet/index.d.ts

@@ -1 +1,2 @@
 export * from './BottomSheet';
+export type * from './types';

package/dist/components/Sheets/BottomSheet/types.d.ts

@@ -0,0 +1,37 @@
+import { Dialog } from 'react-aria-components';
+/**
+ * Props for the {@link BottomSheet} component.
+ * Extends React Aria Components `Dialog` props for bottom sheet content containers.
+ *
+ * Configurable CSS tokens:
+ * - `--md-bottom-sheet-background`: Background color of the bottom sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-bottom-sheet-color`: Text color of the bottom sheet (`var(--md-sys-color-on-surface)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>Bottom sheet content goes here.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
+export interface BottomSheetProps extends React.ComponentPropsWithRef<typeof Dialog> {
+}

package/dist/components/Sheets/BottomSheetModal/BottomSheetModal.d.ts

@@ -1,2 +1,36 @@
 import { BottomSheetModalProps } from './types';
+/**
+ * Modal container for a bottom sheet ({@link BottomSheet}).
+ *
+ * Implements [Material 3 Bottom Sheets](https://m3.material.io/components/bottom-sheets/overview)
+ * positioning and animations using React Aria Components `Modal`. Sets `data-layout` attribute
+ * to control slide-up entrance/exit animations and viewport margin styling, and provides layout
+ * configuration to children through {@link BottomSheetContext}.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Bottom Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>This is the bottom sheet content.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const BottomSheetModal: React.FC<BottomSheetModalProps>;

package/dist/components/Sheets/BottomSheetModal/context.d.ts

@@ -1,5 +1,15 @@
 import { SheetLayout } from '../core';
+/**
+ * Context value passed from {@link BottomSheetModal} to descendant {@link BottomSheet} components.
+ */
 export type BottomSheetContextValue = {
+    /**
+     * Current layout style (`"standard"` or `"detached"`).
+     */
     layout: SheetLayout;
 };
+/**
+ * React context providing layout configuration for bottom sheets.
+ * Default value is `layout: "standard"`.
+ */
 export declare const BottomSheetContext: import('react').Context<BottomSheetContextValue>;

package/dist/components/Sheets/BottomSheetModal/types.d.ts

@@ -1,5 +1,43 @@
 import { Modal } from 'react-aria-components';
 import { SheetLayout } from '../core';
+/**
+ * Props for the {@link BottomSheetModal} component.
+ * Extends React Aria Components `Modal` props with bottom-sheet layout configurations.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     BottomSheet,
+ *     BottomSheetModal,
+ *     Button,
+ *     ModalOverlay,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <BottomSheetModal layout="standard">
+ *                     <BottomSheet>
+ *                         <p>Bottom sheet content.</p>
+ *                     </BottomSheet>
+ *                 </BottomSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface BottomSheetModalProps extends React.ComponentPropsWithRef<typeof Modal> {
+    /**
+     * Layout style of the bottom sheet.
+     *
+     * - `"standard"`: Attached to the bottom edge of the viewport.
+     * - `"detached"`: Floating with margin and rounded corners on all edges.
+     *
+     * @default "standard"
+     */
     layout?: SheetLayout;
 }

package/dist/components/Sheets/SideSheet/SideSheet.d.ts

@@ -1,2 +1,48 @@
 import { SideSheetProps } from './types';
+/**
+ * High-level content container for side sheets, conforming to
+ * [Material 3 Side Sheets](https://m3.material.io/components/side-sheets/overview).
+ *
+ * Provides a standard structured side sheet layout containing:
+ * - A top header with an optional `headline` (`typography.titleLarge`) and a built-in close `IconButton` (`X`).
+ * - A scrollable `main` content area.
+ * - An optional bottom `actions` footer, automatically aligned with the sheet's alignment setting.
+ *
+ * Configurable CSS tokens:
+ * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).
+ * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Side Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet
+ *                         headline="Side Sheet Title"
+ *                         actions={[
+ *                             <Button key="save" label="Save" onPress={() => {}} />,
+ *                             <Button key="cancel" label="Cancel" variant="outline" onPress={() => {}} />,
+ *                         ]}
+ *                     >
+ *                         <p>This is the side sheet content.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const SideSheet: React.FC<SideSheetProps>;

package/dist/components/Sheets/SideSheet/SideSheetDialog.d.ts

@@ -1,2 +1,45 @@
 import { SideSheetDialogProps } from './types';
+/**
+ * Low-level dialog container for side sheets, useful for custom layout structures.
+ *
+ * Consumes {@link SideSheetContext} to apply appropriate `data-alignment` and `data-layout`
+ * attributes for responsive positioning, border radiuses, and size constraints.
+ * Also provides `DialogContext` with `true` for modal integration.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger, Header, Heading } from "react-aria-components";
+ * import {
+ *     Button,
+ *     IconButton,
+ *     ModalOverlay,
+ *     SideSheetDialog,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ * import { X } from "lucide-react";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Custom Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheetDialog>
+ *                         {({ close }) => (
+ *                             <>
+ *                                 <Header>
+ *                                     <Heading slot="title">Custom Title</Heading>
+ *                                     <IconButton icon={X} onPress={close} aria-label="Close" />
+ *                                 </Header>
+ *                                 <div>Custom content goes here.</div>
+ *                             </>
+ *                         )}
+ *                     </SideSheetDialog>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const SideSheetDialog: React.FC<SideSheetDialogProps>;

package/dist/components/Sheets/SideSheet/types.d.ts

@@ -1,8 +1,102 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Dialog, DialogRenderProps } from 'react-aria-components';
+/**
+ * Props for the {@link SideSheetDialog} component.
+ * Extends React Aria Components `Dialog` props for low-level custom side sheet layouts.
+ *
+ * Configurable CSS tokens:
+ * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).
+ * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger, Header, Heading } from "react-aria-components";
+ * import {
+ *     Button,
+ *     IconButton,
+ *     ModalOverlay,
+ *     SideSheetDialog,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ * import { X } from "lucide-react";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Sheet" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end">
+ *                     <SideSheetDialog>
+ *                         {({ close }) => (
+ *                             <>
+ *                                 <Header>
+ *                                     <Heading slot="title">Custom Layout</Heading>
+ *                                     <IconButton icon={X} onPress={close} aria-label="Close" />
+ *                                 </Header>
+ *                                 <div>Content goes here</div>
+ *                             </>
+ *                         )}
+ *                     </SideSheetDialog>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface SideSheetDialogProps extends React.ComponentPropsWithRef<typeof Dialog> {
 }
+/**
+ * Props for the {@link SideSheet} component.
+ * Extends React Aria Components `Dialog` props with optional headline and footer action buttons.
+ *
+ * Configurable CSS tokens:
+ * - `--md-side-sheet-background`: Background color of the side sheet (`var(--md-sys-color-surface-container-low)`).
+ * - `--md-side-sheet-color`: Text color of the side sheet (`var(--md-sys-color-on-surface)`).
+ * - `--md-side-sheet-headline-color`: Color of the side sheet headline (`var(--md-sys-color-on-surface-variant)`).
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Filters" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet
+ *                         headline="Filter Items"
+ *                         actions={[
+ *                             <Button key="apply" label="Apply" onPress={() => {}} />,
+ *                             <Button key="reset" label="Reset" variant="outline" onPress={() => {}} />,
+ *                         ]}
+ *                     >
+ *                         <p>Filter options go here.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export interface SideSheetProps extends React.ComponentPropsWithRef<typeof Dialog> {
+    /**
+     * Optional headline text or element displayed in the side sheet header.
+     * Rendered inside a React Aria `Heading` using `typography.titleLarge`.
+     */
     headline?: ReactNode;
-    actions?: ReactElement[] | ((renderProps: DialogRenderProps) => ReactElement[]);
+    /**
+     * Optional action buttons rendered in the bottom action bar.
+     * Can be an array of React nodes or a render function receiving React Aria `DialogRenderProps` (such as `close`).
+     */
+    actions?: ReactNode[] | ((renderProps: DialogRenderProps) => ReactNode[]);
 }

package/dist/components/Sheets/SideSheetModal/SideSheetModal.d.ts

@@ -1,2 +1,36 @@
 import { SideSheetModalProps } from './types';
+/**
+ * Modal container for a side sheet ({@link SideSheet} or {@link SideSheetDialog}).
+ *
+ * Implements [Material 3 Side Sheets](https://m3.material.io/components/side-sheets/overview)
+ * positioning and animations using React Aria Components `Modal`. Sets `data-alignment` and
+ * `data-layout` attributes to control entry/exit slide animations and viewport anchoring,
+ * and provides layout and alignment configurations to children through {@link SideSheetContext}.
+ *
+ * @example
+ * ```tsx
+ * import { DialogTrigger } from "react-aria-components";
+ * import {
+ *     Button,
+ *     ModalOverlay,
+ *     SideSheet,
+ *     SideSheetModal,
+ * } from "@adgytec/web-ui-components";
+ *
+ * export function Example() {
+ *     return (
+ *         <DialogTrigger>
+ *             <Button label="Open Details" />
+ *             <ModalOverlay>
+ *                 <SideSheetModal alignment="end" layout="standard">
+ *                     <SideSheet headline="Details">
+ *                         <p>Side sheet content goes here.</p>
+ *                     </SideSheet>
+ *                 </SideSheetModal>
+ *             </ModalOverlay>
+ *         </DialogTrigger>
+ *     );
+ * }
+ * ```
+ */
 export declare const SideSheetModal: React.FC<SideSheetModalProps>;

package/dist/components/Sheets/SideSheetModal/context.d.ts

@@ -1,7 +1,20 @@
 import { SheetLayout } from '../core';
 import { SideSheetAlignment } from './types';
+/**
+ * Context value passed from {@link SideSheetModal} to descendant side sheet components like {@link SideSheetDialog} and {@link SideSheet}.
+ */
 export type SideSheetContextValue = {
+    /**
+     * Current layout style (`"standard"` or `"detached"`).
+     */
     layout: SheetLayout;
+    /**
+     * Current alignment edge (`"start"` or `"end"`).
+     */
     alignment: SideSheetAlignment;
 };
+/**
+ * React context providing layout and alignment properties for side sheets.
+ * Default values are `layout: "standard"` and `alignment: "end"`.
+ */
 export declare const SideSheetContext: import('react').Context<SideSheetContextValue>;