@accelint/design-toolkit 9.3.0 → 9.4.1

package/dist/components/divider/index.js

@@ -28,13 +28,23 @@ import styles from "./styles.module.css";
 * Provides a visual separator between content sections with support for both
 * horizontal and vertical orientations.
 *
+* @param props - The divider props.
+* @param props.ref - Reference to the hr element.
+* @param props.className - Additional CSS class name.
+* @param props.orientation - Orientation of the divider (horizontal or vertical).
+* @returns The divider component.
+*
 * @example
+* ```tsx
 * // Basic horizontal divider
 * <Divider />
+* ```
 *
 * @example
+* ```tsx
 * // Vertical divider
 * <Divider orientation="vertical" />
+* ```
 */
 function Divider({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, DividerContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/divider/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useLayoutEffect, useState } from 'react';\nimport { useContextProps } from 'react-aria-components';\nimport { DividerContext } from './context';\nimport styles from './styles.module.css';\nimport type { DividerProps } from './types';\n\n/**\n * Divider - A simple horizontal or vertical rule component\n *\n * Provides a visual separator between content sections with support for both\n * horizontal and vertical orientations.\n *\n * @example\n * // Basic horizontal divider\n * <Divider />\n *\n * @example\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n */\nexport function Divider({ ref, ...props }: DividerProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DividerContext);\n\n  const { className, orientation = 'horizontal', ...rest } = props;\n\n  const [stretch, setStretch] = useState(false);\n\n  /**\n   * CSS flexbox doesn't play nice with height. Unfortunately, there's no\n   * way to detect if a parent element is using CSS flexbox, so we have\n   * to detect it using JS\n   */\n  useLayoutEffect(() => {\n    const parent = ref.current?.parentElement;\n\n    if (\n      parent &&\n      window\n        .getComputedStyle(parent)\n        .getPropertyValue('display')\n        .includes('flex')\n    ) {\n      setStretch(true);\n    }\n  }, [ref.current]);\n\n  return (\n    <hr\n      {...rest}\n      ref={ref}\n      className={clsx(styles.divider, stretch && styles.stretch, className)}\n      data-orientation={orientation}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,QAAQ,EAAE,KAAK,GAAG,SAAuB;AACvD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,eAAe;CAElE,MAAM,EAAE,WAAW,cAAc,cAAc,GAAG,SAAS;CAE3D,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;;;;;;AAO7C,uBAAsB;EACpB,MAAM,SAAS,IAAI,SAAS;AAE5B,MACE,UACA,OACG,iBAAiB,OAAO,CACxB,iBAAiB,UAAU,CAC3B,SAAS,OAAO,CAEnB,YAAW,KAAK;IAEjB,CAAC,IAAI,QAAQ,CAAC;AAEjB,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,KAAK,OAAO,SAAS,WAAW,OAAO,SAAS,UAAU;EACrE,oBAAkB;GAClB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/divider/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useLayoutEffect, useState } from 'react';\nimport { useContextProps } from 'react-aria-components';\nimport { DividerContext } from './context';\nimport styles from './styles.module.css';\nimport type { DividerProps } from './types';\n\n/**\n * Divider - A simple horizontal or vertical rule component\n *\n * Provides a visual separator between content sections with support for both\n * horizontal and vertical orientations.\n *\n * @param props - The divider props.\n * @param props.ref - Reference to the hr element.\n * @param props.className - Additional CSS class name.\n * @param props.orientation - Orientation of the divider (horizontal or vertical).\n * @returns The divider component.\n *\n * @example\n * ```tsx\n * // Basic horizontal divider\n * <Divider />\n * ```\n *\n * @example\n * ```tsx\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n * ```\n */\nexport function Divider({ ref, ...props }: DividerProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DividerContext);\n\n  const { className, orientation = 'horizontal', ...rest } = props;\n\n  const [stretch, setStretch] = useState(false);\n\n  /**\n   * CSS flexbox doesn't play nice with height. Unfortunately, there's no\n   * way to detect if a parent element is using CSS flexbox, so we have\n   * to detect it using JS\n   */\n  useLayoutEffect(() => {\n    const parent = ref.current?.parentElement;\n\n    if (\n      parent &&\n      window\n        .getComputedStyle(parent)\n        .getPropertyValue('display')\n        .includes('flex')\n    ) {\n      setStretch(true);\n    }\n  }, [ref.current]);\n\n  return (\n    <hr\n      {...rest}\n      ref={ref}\n      className={clsx(styles.divider, stretch && styles.stretch, className)}\n      data-orientation={orientation}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,QAAQ,EAAE,KAAK,GAAG,SAAuB;AACvD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,eAAe;CAElE,MAAM,EAAE,WAAW,cAAc,cAAc,GAAG,SAAS;CAE3D,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;;;;;;AAO7C,uBAAsB;EACpB,MAAM,SAAS,IAAI,SAAS;AAE5B,MACE,UACA,OACG,iBAAiB,OAAO,CACxB,iBAAiB,UAAU,CAC3B,SAAS,OAAO,CAEnB,YAAW,KAAK;IAEjB,CAAC,IAAI,QAAQ,CAAC;AAEjB,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,KAAK,OAAO,SAAS,WAAW,OAAO,SAAS,UAAU;EACrE,oBAAkB;GAClB"}

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

@@ -13,11 +13,11 @@
 import { ComponentPropsWithRef } from "react";
 
 //#region src/components/divider/types.d.ts
+/**
+ * Props for the Divider component.
+ */
 type DividerProps = ComponentPropsWithRef<'hr'> & {
-  /**
-   * The orientation of the divider.
-   * @default 'horizontal'
-   */
+  /** The orientation of the divider (defaults to 'horizontal'). */
   orientation?: 'horizontal' | 'vertical';
 };
 //#endregion

package/dist/components/drawer/back.d.ts

@@ -11,10 +11,29 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime49 from "react/jsx-runtime";
+import * as react_jsx_runtime114 from "react/jsx-runtime";
 
 //#region src/components/drawer/back.d.ts
-declare function DrawerBack(): react_jsx_runtime49.JSX.Element | null;
+
+/**
+ * DrawerBack - Back navigation button for nested drawer views.
+ *
+ * Only renders when the view stack has more than one view.
+ * Triggers a 'back' action to pop the current view from the stack.
+ *
+ * @returns The rendered DrawerBack button, or null if at root view.
+ *
+ * @example
+ * ```tsx
+ * <DrawerView id={nestedViewId}>
+ *   <DrawerHeader>
+ *     <DrawerBack />
+ *     <DrawerHeaderTitle>Nested View</DrawerHeaderTitle>
+ *   </DrawerHeader>
+ * </DrawerView>
+ * ```
+ */
+declare function DrawerBack(): react_jsx_runtime114.JSX.Element | null;
 //#endregion
 export { DrawerBack };
 //# sourceMappingURL=back.d.ts.map

package/dist/components/drawer/back.js

@@ -20,9 +20,27 @@ import { DrawerTrigger } from "./trigger.js";
 import "client-only";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ChevronLeft } from "@accelint/icons";
+import ChevronLeft from "@accelint/icons/chevron-left";
 
 //#region src/components/drawer/back.tsx
+/**
+* DrawerBack - Back navigation button for nested drawer views.
+*
+* Only renders when the view stack has more than one view.
+* Triggers a 'back' action to pop the current view from the stack.
+*
+* @returns The rendered DrawerBack button, or null if at root view.
+*
+* @example
+* ```tsx
+* <DrawerView id={nestedViewId}>
+*   <DrawerHeader>
+*     <DrawerBack />
+*     <DrawerHeaderTitle>Nested View</DrawerHeaderTitle>
+*   </DrawerHeader>
+* </DrawerView>
+* ```
+*/
 function DrawerBack() {
 	const { stack } = useContext(ViewStackContext);
 	return stack.length > 1 ? /* @__PURE__ */ jsx(DrawerTrigger, {

package/dist/components/drawer/back.js.map

@@ -1 +1 @@
-{"version":3,"file":"back.js","names":[],"sources":["../../../src/components/drawer/back.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { ChevronLeft } from '@accelint/icons';\nimport { useContext } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ViewStackContext } from '../view-stack/context';\nimport { DrawerTrigger } from './trigger';\n\nexport function DrawerBack() {\n  const { stack } = useContext(ViewStackContext);\n\n  return stack.length > 1 ? (\n    <DrawerTrigger for='back'>\n      <Button variant='icon'>\n        <Icon>\n          <ChevronLeft />\n        </Icon>\n      </Button>\n    </DrawerTrigger>\n  ) : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,aAAa;CAC3B,MAAM,EAAE,UAAU,WAAW,iBAAiB;AAE9C,QAAO,MAAM,SAAS,IACpB,oBAAC;EAAc,KAAI;YACjB,oBAAC;GAAO,SAAQ;aACd,oBAAC,kBACC,oBAAC,gBAAc,GACV;IACA;GACK,GACd"}
+{"version":3,"file":"back.js","names":[],"sources":["../../../src/components/drawer/back.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport ChevronLeft from '@accelint/icons/chevron-left';\nimport { useContext } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ViewStackContext } from '../view-stack/context';\nimport { DrawerTrigger } from './trigger';\n\n/**\n * DrawerBack - Back navigation button for nested drawer views.\n *\n * Only renders when the view stack has more than one view.\n * Triggers a 'back' action to pop the current view from the stack.\n *\n * @returns The rendered DrawerBack button, or null if at root view.\n *\n * @example\n * ```tsx\n * <DrawerView id={nestedViewId}>\n *   <DrawerHeader>\n *     <DrawerBack />\n *     <DrawerHeaderTitle>Nested View</DrawerHeaderTitle>\n *   </DrawerHeader>\n * </DrawerView>\n * ```\n */\nexport function DrawerBack() {\n  const { stack } = useContext(ViewStackContext);\n\n  return stack.length > 1 ? (\n    <DrawerTrigger for='back'>\n      <Button variant='icon'>\n        <Icon>\n          <ChevronLeft />\n        </Icon>\n      </Button>\n    </DrawerTrigger>\n  ) : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAgB,aAAa;CAC3B,MAAM,EAAE,UAAU,WAAW,iBAAiB;AAE9C,QAAO,MAAM,SAAS,IACpB,oBAAC;EAAc,KAAI;YACjB,oBAAC;GAAO,SAAQ;aACd,oBAAC,kBACC,oBAAC,gBAAc,GACV;IACA;GACK,GACd"}

package/dist/components/drawer/close.d.ts

@@ -10,11 +10,34 @@
  * governing permissions and limitations under the License.
  */
 
+import { DrawerCloseProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime67 from "react/jsx-runtime";
+import * as react_jsx_runtime124 from "react/jsx-runtime";
 
 //#region src/components/drawer/close.d.ts
-declare function DrawerClose(): react_jsx_runtime67.JSX.Element;
+
+/**
+ * DrawerClose - Close button for the drawer.
+ *
+ * Triggers a 'close' action to close the entire drawer.
+ *
+ * @param props - {@link DrawerCloseProps}
+ * @param props.for - Optional drawer ID to close. Defaults to current drawer.
+ * @param props.aria-label - Optional accessible label for the button.
+ * @returns The rendered DrawerClose button.
+ *
+ * @example
+ * ```tsx
+ * <DrawerHeader>
+ *   <DrawerHeaderTitle>Settings</DrawerHeaderTitle>
+ *   <DrawerClose />
+ * </DrawerHeader>
+ * ```
+ */
+declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime124.JSX.Element;
+declare namespace DrawerClose {
+  var displayName: string;
+}
 //#endregion
 export { DrawerClose };
 //# sourceMappingURL=close.d.ts.map

package/dist/components/drawer/close.js

@@ -15,21 +15,46 @@
 
 import { Icon } from "../icon/index.js";
 import { Button } from "../button/index.js";
+import { ViewStackContext } from "../view-stack/context.js";
 import { DrawerTrigger } from "./trigger.js";
 import "client-only";
+import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Cancel } from "@accelint/icons";
+import Cancel from "@accelint/icons/cancel";
 
 //#region src/components/drawer/close.tsx
-function DrawerClose() {
+/**
+* DrawerClose - Close button for the drawer.
+*
+* Triggers a 'close' action to close the entire drawer.
+*
+* @param props - {@link DrawerCloseProps}
+* @param props.for - Optional drawer ID to close. Defaults to current drawer.
+* @param props.aria-label - Optional accessible label for the button.
+* @returns The rendered DrawerClose button.
+*
+* @example
+* ```tsx
+* <DrawerHeader>
+*   <DrawerHeaderTitle>Settings</DrawerHeaderTitle>
+*   <DrawerClose />
+* </DrawerHeader>
+* ```
+*/
+function DrawerClose(props) {
+	const context = useContext(ViewStackContext);
+	const id = props.for ?? context.parent ?? null;
+	const event = id ? `close:${id}` : "close";
 	return /* @__PURE__ */ jsx(DrawerTrigger, {
-		for: "close",
+		"aria-label": props["aria-label"],
+		for: event,
 		children: /* @__PURE__ */ jsx(Button, {
 			variant: "icon",
 			children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Cancel, {}) })
 		})
 	});
 }
+DrawerClose.displayName = "DrawerClose";
 
 //#endregion
 export { DrawerClose };

package/dist/components/drawer/close.js.map

@@ -1 +1 @@
-{"version":3,"file":"close.js","names":[],"sources":["../../../src/components/drawer/close.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { Cancel } from '@accelint/icons';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { DrawerTrigger } from './trigger';\n\nexport function DrawerClose() {\n  return (\n    <DrawerTrigger for='close'>\n      <Button variant='icon'>\n        <Icon>\n          <Cancel />\n        </Icon>\n      </Button>\n    </DrawerTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,cAAc;AAC5B,QACE,oBAAC;EAAc,KAAI;YACjB,oBAAC;GAAO,SAAQ;aACd,oBAAC,kBACC,oBAAC,WAAS,GACL;IACA;GACK"}
+{"version":3,"file":"close.js","names":["id: UniqueId | null"],"sources":["../../../src/components/drawer/close.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport Cancel from '@accelint/icons/cancel';\nimport type { UniqueId } from '@accelint/core';\nimport 'client-only';\nimport { useContext } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ViewStackContext } from '../view-stack/context';\nimport { DrawerTrigger } from './trigger';\nimport type { DrawerCloseProps, SimpleEvents, TargetedEvents } from './types';\n\n/**\n * DrawerClose - Close button for the drawer.\n *\n * Triggers a 'close' action to close the entire drawer.\n *\n * @param props - {@link DrawerCloseProps}\n * @param props.for - Optional drawer ID to close. Defaults to current drawer.\n * @param props.aria-label - Optional accessible label for the button.\n * @returns The rendered DrawerClose button.\n *\n * @example\n * ```tsx\n * <DrawerHeader>\n *   <DrawerHeaderTitle>Settings</DrawerHeaderTitle>\n *   <DrawerClose />\n * </DrawerHeader>\n * ```\n */\nexport function DrawerClose(props: DrawerCloseProps) {\n  const context = useContext(ViewStackContext);\n  const id: UniqueId | null = props.for ?? context.parent ?? null;\n\n  const event = id\n    ? (`close:${id}` as TargetedEvents)\n    : ('close' as SimpleEvents);\n\n  return (\n    // Note, not using ...rest due to possible memory leak within <Pressable />\n    // Still investigating.\n    <DrawerTrigger aria-label={props['aria-label']} for={event}>\n      <Button variant='icon'>\n        <Icon>\n          <Cancel />\n        </Icon>\n      </Button>\n    </DrawerTrigger>\n  );\n}\nDrawerClose.displayName = 'DrawerClose';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,YAAY,OAAyB;CACnD,MAAM,UAAU,WAAW,iBAAiB;CAC5C,MAAMA,KAAsB,MAAM,OAAO,QAAQ,UAAU;CAE3D,MAAM,QAAQ,KACT,SAAS,OACT;AAEL,QAGE,oBAAC;EAAc,cAAY,MAAM;EAAe,KAAK;YACnD,oBAAC;GAAO,SAAQ;aACd,oBAAC,kBACC,oBAAC,WAAS,GACL;IACA;GACK;;AAGpB,YAAY,cAAc"}

package/dist/components/drawer/content.d.ts

@@ -11,13 +11,33 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime68 from "react/jsx-runtime";
+import * as react_jsx_runtime122 from "react/jsx-runtime";
 
 //#region src/components/drawer/content.d.ts
+
+/**
+ * DrawerContent - Main content area within a DrawerView.
+ *
+ * Scrollable container for the view's primary content.
+ *
+ * @param props - ComponentPropsWithRef<'div'>
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered DrawerContent component.
+ *
+ * @example
+ * ```tsx
+ * <DrawerView id={viewId}>
+ *   <DrawerHeader title="Settings" />
+ *   <DrawerContent>
+ *     <p>Your content here</p>
+ *   </DrawerContent>
+ * </DrawerView>
+ * ```
+ */
 declare function DrawerContent({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime68.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime122.JSX.Element;
 //#endregion
 export { DrawerContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/drawer/content.js

@@ -16,6 +16,25 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/drawer/content.tsx
+/**
+* DrawerContent - Main content area within a DrawerView.
+*
+* Scrollable container for the view's primary content.
+*
+* @param props - ComponentPropsWithRef<'div'>
+* @param props.className - Optional CSS class name.
+* @returns The rendered DrawerContent component.
+*
+* @example
+* ```tsx
+* <DrawerView id={viewId}>
+*   <DrawerHeader title="Settings" />
+*   <DrawerContent>
+*     <p>Your content here</p>
+*   </DrawerContent>
+* </DrawerView>
+* ```
+*/
 function DrawerContent({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,

package/dist/components/drawer/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","names":[],"sources":["../../../src/components/drawer/content.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { ComponentPropsWithRef } from 'react';\n\nexport function DrawerContent({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'div'>) {\n  return <div {...rest} className={clsx(styles.content, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,SAAgB,cAAc,EAC5B,WACA,GAAG,QAC4B;AAC/B,QAAO,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,SAAS,UAAU;GAAI"}
+{"version":3,"file":"content.js","names":[],"sources":["../../../src/components/drawer/content.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { ComponentPropsWithRef } from 'react';\n\n/**\n * DrawerContent - Main content area within a DrawerView.\n *\n * Scrollable container for the view's primary content.\n *\n * @param props - ComponentPropsWithRef<'div'>\n * @param props.className - Optional CSS class name.\n * @returns The rendered DrawerContent component.\n *\n * @example\n * ```tsx\n * <DrawerView id={viewId}>\n *   <DrawerHeader title=\"Settings\" />\n *   <DrawerContent>\n *     <p>Your content here</p>\n *   </DrawerContent>\n * </DrawerView>\n * ```\n */\nexport function DrawerContent({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'div'>) {\n  return <div {...rest} className={clsx(styles.content, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,cAAc,EAC5B,WACA,GAAG,QAC4B;AAC/B,QAAO,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,SAAS,UAAU;GAAI"}

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

@@ -12,15 +12,44 @@
 
 import { DrawerContextValue, DrawerEvent } from "./types.js";
 import "client-only";
-import * as react25 from "react";
+import * as react33 from "react";
 import { Broadcast } from "@accelint/bus";
 import { UniqueId } from "@accelint/core";
 
 //#region src/components/drawer/context.d.ts
-declare const DrawerContext: react25.Context<DrawerContextValue>;
+/**
+ * Context for sharing Drawer state across child components.
+ *
+ * @example
+ * ```tsx
+ * const { register, unregister, placement } = useContext(DrawerContext);
+ * ```
+ */
+declare const DrawerContext: react33.Context<DrawerContextValue>;
+/**
+ * Event bus instance for drawer-related events.
+ *
+ * @example
+ * ```tsx
+ * import { bus } from './context';
+ * bus.on('Drawer:open', (event) => console.log(event));
+ * ```
+ */
 declare const bus: Broadcast<DrawerEvent>;
+/**
+ * Event handlers for controlling drawer state programmatically.
+ *
+ * @example
+ * ```tsx
+ * import { DrawerEventHandlers } from './context';
+ *
+ * DrawerEventHandlers.open(viewId);
+ * DrawerEventHandlers.toggle(viewId);
+ * DrawerEventHandlers.close(viewId);
+ * ```
+ */
 declare const DrawerEventHandlers: {
-  readonly close: (stack: UniqueId) => void;
+  readonly close: (view: UniqueId) => void;
   readonly open: (view: UniqueId) => void;
   readonly toggle: (view: UniqueId) => void;
   readonly back: (stack: UniqueId) => void;
@@ -28,8 +57,21 @@ declare const DrawerEventHandlers: {
   readonly push: (view: UniqueId) => void;
   readonly reset: (stack: UniqueId) => void;
 };
+/**
+ * Hook for emitting drawer events (open, close, toggle, push, pop, clear).
+ *
+ * @returns Object with methods to emit drawer events.
+ *
+ * @example
+ * ```tsx
+ * const emit = useDrawerEmit();
+ * emit.open(viewId);
+ * emit.toggle(viewId);
+ * emit.close();
+ * ```
+ */
 declare function useDrawerEmit(): {
-  readonly close: (stack: UniqueId) => void;
+  readonly close: (view: UniqueId) => void;
   readonly open: (view: UniqueId) => void;
   readonly toggle: (view: UniqueId) => void;
   readonly back: (stack: UniqueId) => void;

package/dist/components/drawer/context.js

@@ -21,25 +21,68 @@ import { Broadcast } from "@accelint/bus";
 import { useEmit } from "@accelint/bus/react";
 
 //#region src/components/drawer/context.tsx
+/**
+* Context for sharing Drawer state across child components.
+*
+* @example
+* ```tsx
+* const { register, unregister, placement } = useContext(DrawerContext);
+* ```
+*/
 const DrawerContext = createContext({
 	register: () => void 0,
 	unregister: () => void 0,
 	placement: "left"
 });
+/**
+* Event bus instance for drawer-related events.
+*
+* @example
+* ```tsx
+* import { bus } from './context';
+* bus.on('Drawer:open', (event) => console.log(event));
+* ```
+*/
 const bus = Broadcast.getInstance();
+/**
+* Event handlers for controlling drawer state programmatically.
+*
+* @example
+* ```tsx
+* import { DrawerEventHandlers } from './context';
+*
+* DrawerEventHandlers.open(viewId);
+* DrawerEventHandlers.toggle(viewId);
+* DrawerEventHandlers.close(viewId);
+* ```
+*/
 const DrawerEventHandlers = {
 	...ViewStackEventHandlers,
-	close: ViewStackEventHandlers.clear,
+	close: (view) => bus.emit(DrawerEventTypes.close, { view }),
 	open: (view) => bus.emit(DrawerEventTypes.open, { view }),
 	toggle: (view) => bus.emit(DrawerEventTypes.toggle, { view })
 };
+/**
+* Hook for emitting drawer events (open, close, toggle, push, pop, clear).
+*
+* @returns Object with methods to emit drawer events.
+*
+* @example
+* ```tsx
+* const emit = useDrawerEmit();
+* emit.open(viewId);
+* emit.toggle(viewId);
+* emit.close();
+* ```
+*/
 function useDrawerEmit() {
 	const viewStackEmit = useViewStackEmit();
+	const emitClose = useEmit(DrawerEventTypes.close);
 	const emitOpen = useEmit(DrawerEventTypes.open);
 	const emitToggle = useEmit(DrawerEventTypes.toggle);
 	return {
 		...viewStackEmit,
-		close: viewStackEmit.clear,
+		close: (view) => emitClose({ view }),
 		open: (view) => emitOpen({ view }),
 		toggle: (view) => emitToggle({ view })
 	};

package/dist/components/drawer/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/drawer/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport { Broadcast } from '@accelint/bus';\nimport { useEmit } from '@accelint/bus/react';\nimport type { UniqueId } from '@accelint/core';\nimport 'client-only';\nimport { createContext } from 'react';\nimport {\n  useViewStackEmit,\n  ViewStackEventHandlers,\n} from '../view-stack/context';\nimport { DrawerEventTypes } from './events';\nimport type { DrawerContextValue, DrawerEvent } from './types';\n\nexport const DrawerContext = createContext<DrawerContextValue>({\n  register: () => undefined,\n  unregister: () => undefined,\n  placement: 'left',\n});\n\nexport const bus = Broadcast.getInstance<DrawerEvent>();\n\nexport const DrawerEventHandlers = {\n  ...ViewStackEventHandlers,\n  close: ViewStackEventHandlers.clear,\n  open: (view: UniqueId) => bus.emit(DrawerEventTypes.open, { view }),\n  toggle: (view: UniqueId) => bus.emit(DrawerEventTypes.toggle, { view }),\n} as const;\n\nexport function useDrawerEmit() {\n  const viewStackEmit = useViewStackEmit();\n  const emitOpen = useEmit<DrawerEvent>(DrawerEventTypes.open);\n  const emitToggle = useEmit<DrawerEvent>(DrawerEventTypes.toggle);\n\n  return {\n    ...viewStackEmit,\n    close: viewStackEmit.clear,\n    open: (view: UniqueId) => emitOpen({ view }),\n    toggle: (view: UniqueId) => emitToggle({ view }),\n  } as const;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,gBAAgB,cAAkC;CAC7D,gBAAgB;CAChB,kBAAkB;CAClB,WAAW;CACZ,CAAC;AAEF,MAAa,MAAM,UAAU,aAA0B;AAEvD,MAAa,sBAAsB;CACjC,GAAG;CACH,OAAO,uBAAuB;CAC9B,OAAO,SAAmB,IAAI,KAAK,iBAAiB,MAAM,EAAE,MAAM,CAAC;CACnE,SAAS,SAAmB,IAAI,KAAK,iBAAiB,QAAQ,EAAE,MAAM,CAAC;CACxE;AAED,SAAgB,gBAAgB;CAC9B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,WAAW,QAAqB,iBAAiB,KAAK;CAC5D,MAAM,aAAa,QAAqB,iBAAiB,OAAO;AAEhE,QAAO;EACL,GAAG;EACH,OAAO,cAAc;EACrB,OAAO,SAAmB,SAAS,EAAE,MAAM,CAAC;EAC5C,SAAS,SAAmB,WAAW,EAAE,MAAM,CAAC;EACjD"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/drawer/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport { Broadcast } from '@accelint/bus';\nimport { useEmit } from '@accelint/bus/react';\nimport type { UniqueId } from '@accelint/core';\nimport 'client-only';\nimport { createContext } from 'react';\nimport {\n  useViewStackEmit,\n  ViewStackEventHandlers,\n} from '../view-stack/context';\nimport { DrawerEventTypes } from './events';\nimport type { DrawerContextValue, DrawerEvent } from './types';\n\n/**\n * Context for sharing Drawer state across child components.\n *\n * @example\n * ```tsx\n * const { register, unregister, placement } = useContext(DrawerContext);\n * ```\n */\nexport const DrawerContext = createContext<DrawerContextValue>({\n  register: () => undefined,\n  unregister: () => undefined,\n  placement: 'left',\n});\n\n/**\n * Event bus instance for drawer-related events.\n *\n * @example\n * ```tsx\n * import { bus } from './context';\n * bus.on('Drawer:open', (event) => console.log(event));\n * ```\n */\nexport const bus = Broadcast.getInstance<DrawerEvent>();\n\n/**\n * Event handlers for controlling drawer state programmatically.\n *\n * @example\n * ```tsx\n * import { DrawerEventHandlers } from './context';\n *\n * DrawerEventHandlers.open(viewId);\n * DrawerEventHandlers.toggle(viewId);\n * DrawerEventHandlers.close(viewId);\n * ```\n */\nexport const DrawerEventHandlers = {\n  ...ViewStackEventHandlers,\n  close: (view: UniqueId) => bus.emit(DrawerEventTypes.close, { view }),\n  open: (view: UniqueId) => bus.emit(DrawerEventTypes.open, { view }),\n  toggle: (view: UniqueId) => bus.emit(DrawerEventTypes.toggle, { view }),\n} as const;\n\n/**\n * Hook for emitting drawer events (open, close, toggle, push, pop, clear).\n *\n * @returns Object with methods to emit drawer events.\n *\n * @example\n * ```tsx\n * const emit = useDrawerEmit();\n * emit.open(viewId);\n * emit.toggle(viewId);\n * emit.close();\n * ```\n */\nexport function useDrawerEmit() {\n  const viewStackEmit = useViewStackEmit();\n  const emitClose = useEmit<DrawerEvent>(DrawerEventTypes.close);\n  const emitOpen = useEmit<DrawerEvent>(DrawerEventTypes.open);\n  const emitToggle = useEmit<DrawerEvent>(DrawerEventTypes.toggle);\n\n  return {\n    ...viewStackEmit,\n    close: (view: UniqueId) => emitClose({ view }),\n    open: (view: UniqueId) => emitOpen({ view }),\n    toggle: (view: UniqueId) => emitToggle({ view }),\n  } as const;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,gBAAgB,cAAkC;CAC7D,gBAAgB;CAChB,kBAAkB;CAClB,WAAW;CACZ,CAAC;;;;;;;;;;AAWF,MAAa,MAAM,UAAU,aAA0B;;;;;;;;;;;;;AAcvD,MAAa,sBAAsB;CACjC,GAAG;CACH,QAAQ,SAAmB,IAAI,KAAK,iBAAiB,OAAO,EAAE,MAAM,CAAC;CACrE,OAAO,SAAmB,IAAI,KAAK,iBAAiB,MAAM,EAAE,MAAM,CAAC;CACnE,SAAS,SAAmB,IAAI,KAAK,iBAAiB,QAAQ,EAAE,MAAM,CAAC;CACxE;;;;;;;;;;;;;;AAeD,SAAgB,gBAAgB;CAC9B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,YAAY,QAAqB,iBAAiB,MAAM;CAC9D,MAAM,WAAW,QAAqB,iBAAiB,KAAK;CAC5D,MAAM,aAAa,QAAqB,iBAAiB,OAAO;AAEhE,QAAO;EACL,GAAG;EACH,QAAQ,SAAmB,UAAU,EAAE,MAAM,CAAC;EAC9C,OAAO,SAAmB,SAAS,EAAE,MAAM,CAAC;EAC5C,SAAS,SAAmB,WAAW,EAAE,MAAM,CAAC;EACjD"}

package/dist/components/drawer/events.d.ts

@@ -1,5 +1,7 @@
 //#region src/components/drawer/events.d.ts
+/** Namespace for drawer-related events. */
 declare const DrawerEventNamespace = "Drawer";
+/** Event type constants for drawer actions. */
 declare const DrawerEventTypes: {
   readonly close: "Drawer:close";
   readonly open: "Drawer:open";

package/dist/components/drawer/events.js

@@ -12,7 +12,9 @@
 
 
 //#region src/components/drawer/events.ts
+/** Namespace for drawer-related events. */
 const DrawerEventNamespace = "Drawer";
+/** Event type constants for drawer actions. */
 const DrawerEventTypes = {
 	close: `${DrawerEventNamespace}:close`,
 	open: `${DrawerEventNamespace}:open`,

package/dist/components/drawer/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","names":[],"sources":["../../../src/components/drawer/events.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const DrawerEventNamespace = 'Drawer';\n\nexport const DrawerEventTypes = {\n  close: `${DrawerEventNamespace}:close`,\n  open: `${DrawerEventNamespace}:open`,\n  toggle: `${DrawerEventNamespace}:toggle`,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,uBAAuB;AAEpC,MAAa,mBAAmB;CAC9B,OAAO,GAAG,qBAAqB;CAC/B,MAAM,GAAG,qBAAqB;CAC9B,QAAQ,GAAG,qBAAqB;CACjC"}
+{"version":3,"file":"events.js","names":[],"sources":["../../../src/components/drawer/events.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/** Namespace for drawer-related events. */\nexport const DrawerEventNamespace = 'Drawer';\n\n/** Event type constants for drawer actions. */\nexport const DrawerEventTypes = {\n  close: `${DrawerEventNamespace}:close`,\n  open: `${DrawerEventNamespace}:open`,\n  toggle: `${DrawerEventNamespace}:toggle`,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,uBAAuB;;AAGpC,MAAa,mBAAmB;CAC9B,OAAO,GAAG,qBAAqB;CAC/B,MAAM,GAAG,qBAAqB;CAC9B,QAAQ,GAAG,qBAAqB;CACjC"}

package/dist/components/drawer/footer.d.ts

@@ -11,13 +11,35 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
 
 //#region src/components/drawer/footer.d.ts
+
+/**
+ * DrawerFooter - Footer region within a DrawerView.
+ *
+ * Typically used for action buttons or supplementary information.
+ * Renders as a semantic `<footer>` element.
+ *
+ * @param props - ComponentPropsWithRef<'footer'>
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered DrawerFooter component.
+ *
+ * @example
+ * ```tsx
+ * <DrawerView id={viewId}>
+ *   <DrawerHeader title="Settings" />
+ *   <DrawerContent>Content here</DrawerContent>
+ *   <DrawerFooter>
+ *     <Button>Save</Button>
+ *   </DrawerFooter>
+ * </DrawerView>
+ * ```
+ */
 declare function DrawerFooter({
   className,
   ...rest
-}: ComponentPropsWithRef<'footer'>): react_jsx_runtime70.JSX.Element;
+}: ComponentPropsWithRef<'footer'>): react_jsx_runtime35.JSX.Element;
 //#endregion
 export { DrawerFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/drawer/footer.js

@@ -16,6 +16,27 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/drawer/footer.tsx
+/**
+* DrawerFooter - Footer region within a DrawerView.
+*
+* Typically used for action buttons or supplementary information.
+* Renders as a semantic `<footer>` element.
+*
+* @param props - ComponentPropsWithRef<'footer'>
+* @param props.className - Optional CSS class name.
+* @returns The rendered DrawerFooter component.
+*
+* @example
+* ```tsx
+* <DrawerView id={viewId}>
+*   <DrawerHeader title="Settings" />
+*   <DrawerContent>Content here</DrawerContent>
+*   <DrawerFooter>
+*     <Button>Save</Button>
+*   </DrawerFooter>
+* </DrawerView>
+* ```
+*/
 function DrawerFooter({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("footer", {
 		...rest,

package/dist/components/drawer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","names":[],"sources":["../../../src/components/drawer/footer.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { ComponentPropsWithRef } from 'react';\n\nexport function DrawerFooter({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'footer'>) {\n  return <footer {...rest} className={clsx(styles.footer, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,SAAgB,aAAa,EAC3B,WACA,GAAG,QAC+B;AAClC,QAAO,oBAAC;EAAO,GAAI;EAAM,WAAW,KAAK,OAAO,QAAQ,UAAU;GAAI"}
+{"version":3,"file":"footer.js","names":[],"sources":["../../../src/components/drawer/footer.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { ComponentPropsWithRef } from 'react';\n\n/**\n * DrawerFooter - Footer region within a DrawerView.\n *\n * Typically used for action buttons or supplementary information.\n * Renders as a semantic `<footer>` element.\n *\n * @param props - ComponentPropsWithRef<'footer'>\n * @param props.className - Optional CSS class name.\n * @returns The rendered DrawerFooter component.\n *\n * @example\n * ```tsx\n * <DrawerView id={viewId}>\n *   <DrawerHeader title=\"Settings\" />\n *   <DrawerContent>Content here</DrawerContent>\n *   <DrawerFooter>\n *     <Button>Save</Button>\n *   </DrawerFooter>\n * </DrawerView>\n * ```\n */\nexport function DrawerFooter({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'footer'>) {\n  return <footer {...rest} className={clsx(styles.footer, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,aAAa,EAC3B,WACA,GAAG,QAC+B;AAClC,QAAO,oBAAC;EAAO,GAAI;EAAM,WAAW,KAAK,OAAO,QAAQ,UAAU;GAAI"}

package/dist/components/drawer/header-title.d.ts

@@ -11,19 +11,37 @@
  */
 
 import { DrawerTitleProps } from "./types.js";
-import * as react_jsx_runtime72 from "react/jsx-runtime";
+import * as react_jsx_runtime67 from "react/jsx-runtime";
 
 //#region src/components/drawer/header-title.d.ts
+
 /**
- * To change size of title, use the `level` prop: `1`-`3` (large), `4`-`6` (medium).
+ * DrawerHeaderTitle - Semantic heading for drawer headers.
+ *
+ * The `level` prop controls both visual size and semantic heading level:
+ * - Levels 1-3: Large text size (renders as h1-h3)
+ * - Levels 4-6: Medium text size (renders as h4-h6)
+ *
+ * @param props - {@link DrawerTitleProps}
+ * @param props.className - Optional CSS class name.
+ * @param props.level - Heading level (1-6).
+ * @returns The rendered DrawerHeaderTitle component.
+ *
+ * @default level 2
  *
- * `level` also changes the semantic heading tag number `h1`-`h6`
+ * @example
+ * ```tsx
+ * <DrawerHeader>
+ *   <DrawerHeaderTitle level={2}>Settings</DrawerHeaderTitle>
+ *   <DrawerClose />
+ * </DrawerHeader>
+ * ```
  */
 declare function DrawerHeaderTitle({
   className,
   level,
   ...rest
-}: DrawerTitleProps): react_jsx_runtime72.JSX.Element;
+}: DrawerTitleProps): react_jsx_runtime67.JSX.Element;
 //#endregion
 export { DrawerHeaderTitle };
 //# sourceMappingURL=header-title.d.ts.map

package/dist/components/drawer/header-title.js

@@ -18,9 +18,26 @@ import styles from "./styles.module.css";
 
 //#region src/components/drawer/header-title.tsx
 /**
-* To change size of title, use the `level` prop: `1`-`3` (large), `4`-`6` (medium).
+* DrawerHeaderTitle - Semantic heading for drawer headers.
 *
-* `level` also changes the semantic heading tag number `h1`-`h6`
+* The `level` prop controls both visual size and semantic heading level:
+* - Levels 1-3: Large text size (renders as h1-h3)
+* - Levels 4-6: Medium text size (renders as h4-h6)
+*
+* @param props - {@link DrawerTitleProps}
+* @param props.className - Optional CSS class name.
+* @param props.level - Heading level (1-6).
+* @returns The rendered DrawerHeaderTitle component.
+*
+* @default level 2
+*
+* @example
+* ```tsx
+* <DrawerHeader>
+*   <DrawerHeaderTitle level={2}>Settings</DrawerHeaderTitle>
+*   <DrawerClose />
+* </DrawerHeader>
+* ```
 */
 function DrawerHeaderTitle({ className, level = 2, ...rest }) {
 	return /* @__PURE__ */ jsx(Heading, {