@accelint/design-toolkit 9.3.0 → 9.4.0

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_runtime94 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_runtime94.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 react28 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: react28.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_runtime100 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_runtime100.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_runtime47 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_runtime47.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, {

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

@@ -1 +1 @@
-{"version":3,"file":"header-title.js","names":[],"sources":["../../../src/components/drawer/header-title.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\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Heading } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { DrawerTitleProps } from './types';\n\n/**\n * To change size of title, use the `level` prop: `1`-`3` (large), `4`-`6` (medium).\n *\n * `level` also changes the semantic heading tag number `h1`-`h6`\n */\nexport function DrawerHeaderTitle({\n  className,\n  level = 2,\n  ...rest\n}: DrawerTitleProps) {\n  return (\n    <Heading\n      {...rest}\n      className={clsx(\n        styles.title,\n        level <= 3 ? styles.large : styles.medium,\n        className,\n      )}\n      level={level}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,kBAAkB,EAChC,WACA,QAAQ,GACR,GAAG,QACgB;AACnB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KACT,OAAO,OACP,SAAS,IAAI,OAAO,QAAQ,OAAO,QACnC,UACD;EACM;GACP"}
+{"version":3,"file":"header-title.js","names":[],"sources":["../../../src/components/drawer/header-title.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\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Heading } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { DrawerTitleProps } from './types';\n\n/**\n * DrawerHeaderTitle - Semantic heading for drawer headers.\n *\n * The `level` prop controls both visual size and semantic heading level:\n * - Levels 1-3: Large text size (renders as h1-h3)\n * - Levels 4-6: Medium text size (renders as h4-h6)\n *\n * @param props - {@link DrawerTitleProps}\n * @param props.className - Optional CSS class name.\n * @param props.level - Heading level (1-6).\n * @returns The rendered DrawerHeaderTitle component.\n *\n * @default level 2\n *\n * @example\n * ```tsx\n * <DrawerHeader>\n *   <DrawerHeaderTitle level={2}>Settings</DrawerHeaderTitle>\n *   <DrawerClose />\n * </DrawerHeader>\n * ```\n */\nexport function DrawerHeaderTitle({\n  className,\n  level = 2,\n  ...rest\n}: DrawerTitleProps) {\n  return (\n    <Heading\n      {...rest}\n      className={clsx(\n        styles.title,\n        level <= 3 ? styles.large : styles.medium,\n        className,\n      )}\n      level={level}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,kBAAkB,EAChC,WACA,QAAQ,GACR,GAAG,QACgB;AACnB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KACT,OAAO,OACP,SAAS,IAAI,OAAO,QAAQ,OAAO,QACnC,UACD;EACM;GACP"}

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

@@ -12,15 +12,47 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime73 from "react/jsx-runtime";
+import * as react_jsx_runtime50 from "react/jsx-runtime";
 
 //#region src/components/drawer/header.d.ts
+
+/**
+ * DrawerHeader - Header region within a DrawerView.
+ *
+ * Supports two usage patterns:
+ * - Use `title` prop for automatic layout with back/close buttons
+ * - Use `children` for custom header content
+ *
+ * Heading level automatically adjusts based on view stack depth
+ * (h2 for root view, h4 for nested views).
+ *
+ * @param props - ComponentPropsWithRef<'header'>
+ * @param props.className - Optional CSS class name.
+ * @param props.title - Title text for the header.
+ * @param props.children - Custom header content (overrides title).
+ * @returns The rendered DrawerHeader component.
+ *
+ * @example
+ * ```tsx
+ * // Simplified with title prop
+ * <DrawerHeader title="Settings" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom layout
+ * <DrawerHeader>
+ *   <DrawerHeaderTitle level={2}>Settings</DrawerHeaderTitle>
+ *   <DrawerClose />
+ * </DrawerHeader>
+ *```
+ */
 declare function DrawerHeader({
   className,
   title,
   children,
   ...rest
-}: ComponentPropsWithRef<'header'>): react_jsx_runtime73.JSX.Element;
+}: ComponentPropsWithRef<'header'>): react_jsx_runtime50.JSX.Element;
 //#endregion
 export { DrawerHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/drawer/header.js

@@ -13,9 +13,11 @@
 
 'use client';
 
+import { Icon } from "../icon/index.js";
+import { Button as Button$1 } from "../button/index.js";
 import { ViewStackContext } from "../view-stack/context.js";
+import { DrawerTrigger } from "./trigger.js";
 import { DrawerBack } from "./back.js";
-import { DrawerClose } from "./close.js";
 import { DrawerHeaderTitle } from "./header-title.js";
 import "client-only";
 import { useContext } from "react";
@@ -23,8 +25,40 @@ import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Header } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.css";
+import { Cancel } from "@accelint/icons";
 
 //#region src/components/drawer/header.tsx
+/**
+* DrawerHeader - Header region within a DrawerView.
+*
+* Supports two usage patterns:
+* - Use `title` prop for automatic layout with back/close buttons
+* - Use `children` for custom header content
+*
+* Heading level automatically adjusts based on view stack depth
+* (h2 for root view, h4 for nested views).
+*
+* @param props - ComponentPropsWithRef<'header'>
+* @param props.className - Optional CSS class name.
+* @param props.title - Title text for the header.
+* @param props.children - Custom header content (overrides title).
+* @returns The rendered DrawerHeader component.
+*
+* @example
+* ```tsx
+* // Simplified with title prop
+* <DrawerHeader title="Settings" />
+* ```
+*
+* @example
+* ```tsx
+* // Custom layout
+* <DrawerHeader>
+*   <DrawerHeaderTitle level={2}>Settings</DrawerHeaderTitle>
+*   <DrawerClose />
+* </DrawerHeader>
+*```
+*/
 function DrawerHeader({ className, title, children, ...rest }) {
 	const { stack } = useContext(ViewStackContext);
 	const level = stack.length > 1 ? 4 : 2;
@@ -37,7 +71,13 @@ function DrawerHeader({ className, title, children, ...rest }) {
 				level,
 				children: title
 			}),
-			/* @__PURE__ */ jsx(DrawerClose, {})
+			/* @__PURE__ */ jsx(DrawerTrigger, {
+				for: "clear",
+				children: /* @__PURE__ */ jsx(Button$1, {
+					variant: "icon",
+					children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Cancel, {}) })
+				})
+			})
 		] }) : children
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","names":[],"sources":["../../../src/components/drawer/header.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 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { type ComponentPropsWithRef, useContext } from 'react';\nimport { Header } from 'react-aria-components';\nimport { ViewStackContext } from '../view-stack/context';\nimport { DrawerBack } from './back';\nimport { DrawerClose } from './close';\nimport { DrawerHeaderTitle } from './header-title';\nimport styles from './styles.module.css';\n\nexport function DrawerHeader({\n  className,\n  title,\n  children,\n  ...rest\n}: ComponentPropsWithRef<'header'>) {\n  const { stack } = useContext(ViewStackContext);\n  const level = stack.length > 1 ? 4 : 2;\n\n  return (\n    <Header {...rest} className={clsx(styles.header, className)}>\n      {children == null ? (\n        <>\n          <DrawerBack />\n          <DrawerHeaderTitle level={level}>{title}</DrawerHeaderTitle>\n          <DrawerClose />\n        </>\n      ) : (\n        children\n      )}\n    </Header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,aAAa,EAC3B,WACA,OACA,UACA,GAAG,QAC+B;CAClC,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAC9C,MAAM,QAAQ,MAAM,SAAS,IAAI,IAAI;AAErC,QACE,oBAAC;EAAO,GAAI;EAAM,WAAW,KAAK,OAAO,QAAQ,UAAU;YACxD,YAAY,OACX;GACE,oBAAC,eAAa;GACd,oBAAC;IAAyB;cAAQ;KAA0B;GAC5D,oBAAC,gBAAc;MACd,GAEH;GAEK"}
+{"version":3,"file":"header.js","names":["Button"],"sources":["../../../src/components/drawer/header.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Cancel } from '@accelint/icons';\nimport 'client-only';\nimport { type ComponentPropsWithRef, useContext } from 'react';\nimport { Header } from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ViewStackContext } from '../view-stack/context';\nimport { DrawerBack } from './back';\nimport { DrawerHeaderTitle } from './header-title';\nimport styles from './styles.module.css';\nimport { DrawerTrigger } from './trigger';\n\n/**\n * DrawerHeader - Header region within a DrawerView.\n *\n * Supports two usage patterns:\n * - Use `title` prop for automatic layout with back/close buttons\n * - Use `children` for custom header content\n *\n * Heading level automatically adjusts based on view stack depth\n * (h2 for root view, h4 for nested views).\n *\n * @param props - ComponentPropsWithRef<'header'>\n * @param props.className - Optional CSS class name.\n * @param props.title - Title text for the header.\n * @param props.children - Custom header content (overrides title).\n * @returns The rendered DrawerHeader component.\n *\n * @example\n * ```tsx\n * // Simplified with title prop\n * <DrawerHeader title=\"Settings\" />\n * ```\n *\n * @example\n * ```tsx\n * // Custom layout\n * <DrawerHeader>\n *   <DrawerHeaderTitle level={2}>Settings</DrawerHeaderTitle>\n *   <DrawerClose />\n * </DrawerHeader>\n *```\n */\nexport function DrawerHeader({\n  className,\n  title,\n  children,\n  ...rest\n}: ComponentPropsWithRef<'header'>) {\n  const { stack } = useContext(ViewStackContext);\n  const level = stack.length > 1 ? 4 : 2;\n\n  return (\n    <Header {...rest} className={clsx(styles.header, className)}>\n      {children == null ? (\n        <>\n          <DrawerBack />\n          <DrawerHeaderTitle level={level}>{title}</DrawerHeaderTitle>\n          <DrawerTrigger for='clear'>\n            <Button variant='icon'>\n              <Icon>\n                <Cancel />\n              </Icon>\n            </Button>\n          </DrawerTrigger>\n        </>\n      ) : (\n        children\n      )}\n    </Header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,aAAa,EAC3B,WACA,OACA,UACA,GAAG,QAC+B;CAClC,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAC9C,MAAM,QAAQ,MAAM,SAAS,IAAI,IAAI;AAErC,QACE,oBAAC;EAAO,GAAI;EAAM,WAAW,KAAK,OAAO,QAAQ,UAAU;YACxD,YAAY,OACX;GACE,oBAAC,eAAa;GACd,oBAAC;IAAyB;cAAQ;KAA0B;GAC5D,oBAAC;IAAc,KAAI;cACjB,oBAACA;KAAO,SAAQ;eACd,oBAAC,kBACC,oBAAC,WAAS,GACL;MACA;KACK;MACf,GAEH;GAEK"}