@accelint/design-toolkit 9.2.0 → 9.4.0

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_runtime187 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_runtime187.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_runtime186 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_runtime186.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_runtime20 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_runtime20.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"}

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

@@ -12,7 +12,7 @@
 
 import { DrawerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/drawer/index.d.ts
 
@@ -22,7 +22,18 @@ import * as react_jsx_runtime7 from "react/jsx-runtime";
  * A flexible panel that slides in from the viewport edge and supports
  * stacked views, headers, footers, and programmatic triggers.
  *
+ * @param props - {@link DrawerProps}
+ * @param props.id - Unique identifier for the drawer.
+ * @param props.children - Content to render inside the drawer.
+ * @param props.className - Optional CSS class name.
+ * @param props.defaultView - ID of the view to display initially.
+ * @param props.placement - Edge of the viewport the drawer slides from.
+ * @param props.size - Size of the drawer panel.
+ * @param props.onChange - Callback when the active view changes.
+ * @returns The rendered Drawer component.
+ *
  * @example
+ * ```tsx
  * const ids = { drawer: uuid(), a: uuid() };
  *
  * <DrawerLayout push="left">
@@ -41,6 +52,7 @@ import * as react_jsx_runtime7 from "react/jsx-runtime";
  *     </DrawerPanel>
  *   </Drawer>
  * </DrawerLayout>
+ * ```
  */
 declare function Drawer({
   id,
@@ -51,7 +63,7 @@ declare function Drawer({
   size,
   onChange,
   ...rest
-}: DrawerProps): react_jsx_runtime7.JSX.Element;
+}: DrawerProps): react_jsx_runtime51.JSX.Element;
 //#endregion
 export { Drawer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/index.js

@@ -31,7 +31,18 @@ import styles from "./styles.module.css";
 * A flexible panel that slides in from the viewport edge and supports
 * stacked views, headers, footers, and programmatic triggers.
 *
+* @param props - {@link DrawerProps}
+* @param props.id - Unique identifier for the drawer.
+* @param props.children - Content to render inside the drawer.
+* @param props.className - Optional CSS class name.
+* @param props.defaultView - ID of the view to display initially.
+* @param props.placement - Edge of the viewport the drawer slides from.
+* @param props.size - Size of the drawer panel.
+* @param props.onChange - Callback when the active view changes.
+* @returns The rendered Drawer component.
+*
 * @example
+* ```tsx
 * const ids = { drawer: uuid(), a: uuid() };
 *
 * <DrawerLayout push="left">
@@ -50,11 +61,15 @@ import styles from "./styles.module.css";
 *     </DrawerPanel>
 *   </Drawer>
 * </DrawerLayout>
+* ```
 */
 function Drawer({ id, children, className, defaultView, placement = "left", size = "medium", onChange, ...rest }) {
 	const views = useRef(/* @__PURE__ */ new Set());
 	const [activeView, setActiveView] = useState(defaultView || null);
 	const viewStackEmit = useViewStackEmit();
+	const handleClose = useCallback((data) => {
+		if (views.current.has(data?.payload?.view) || data?.payload?.view === id) viewStackEmit.clear(id);
+	}, [viewStackEmit.clear, id]);
 	const handleOpen = useCallback((data) => {
 		if (views.current.has(data?.payload?.view)) {
 			viewStackEmit.clear(id);
@@ -76,6 +91,7 @@ function Drawer({ id, children, className, defaultView, placement = "left", size
 		viewStackEmit.clear,
 		viewStackEmit.push
 	]);
+	useOn(DrawerEventTypes.close, handleClose);
 	useOn(DrawerEventTypes.open, handleOpen);
 	useOn(DrawerEventTypes.toggle, handleToggle);
 	return /* @__PURE__ */ jsx(DrawerContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/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'use client';\n\nimport { useOn } from '@accelint/bus/react';\nimport type { UniqueId } from '@accelint/core';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useCallback, useRef, useState } from 'react';\nimport { ViewStack } from '../view-stack';\nimport { useViewStackEmit } from '../view-stack/context';\nimport { DrawerContext } from './context';\nimport { DrawerEventTypes } from './events';\nimport styles from './styles.module.css';\nimport type { DrawerOpenEvent, DrawerProps, DrawerToggleEvent } from './types';\n\n/**\n * Drawer - Slide-in panel for navigation or contextual content\n *\n * A flexible panel that slides in from the viewport edge and supports\n * stacked views, headers, footers, and programmatic triggers.\n *\n * @example\n * const ids = { drawer: uuid(), a: uuid() };\n *\n * <DrawerLayout push=\"left\">\n *   <DrawerLayoutMain>\n *     <DrawerTrigger for={`open:${ids.a}`}>\n *       <Button variant=\"icon\">Open</Button>\n *     </DrawerTrigger>\n *   </DrawerLayoutMain>\n *\n *   <Drawer id={ids.drawer} defaultView={ids.a}>\n *     <DrawerPanel>\n *       <DrawerView id={ids.a}>\n *         <DrawerHeader title=\"Title A\" />\n *         <DrawerContent>Content for View A</DrawerContent>\n *       </DrawerView>\n *     </DrawerPanel>\n *   </Drawer>\n * </DrawerLayout>\n */\nexport function Drawer({\n  id,\n  children,\n  className,\n  defaultView,\n  placement = 'left',\n  size = 'medium',\n  onChange,\n  ...rest\n}: DrawerProps) {\n  const views = useRef(new Set<UniqueId>());\n  const [activeView, setActiveView] = useState<UniqueId | null>(\n    defaultView || null,\n  );\n\n  const viewStackEmit = useViewStackEmit();\n\n  const handleOpen = useCallback(\n    (data: DrawerOpenEvent) => {\n      if (views.current.has(data?.payload?.view)) {\n        viewStackEmit.clear(id);\n        viewStackEmit.push(data.payload.view);\n      }\n    },\n    [id, viewStackEmit.clear, viewStackEmit.push],\n  );\n  const handleToggle = useCallback(\n    (data: DrawerToggleEvent) => {\n      if (views.current.has(data?.payload?.view)) {\n        viewStackEmit.clear(id);\n        if (activeView !== data?.payload?.view) {\n          viewStackEmit.push(data.payload.view);\n        }\n      }\n    },\n    [id, activeView, viewStackEmit.clear, viewStackEmit.push],\n  );\n\n  useOn(DrawerEventTypes.open, handleOpen);\n  useOn(DrawerEventTypes.toggle, handleToggle);\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        register: (view: UniqueId) => views.current.add(view),\n        unregister: (view: UniqueId) => views.current.delete(view),\n        placement,\n      }}\n    >\n      <ViewStack\n        id={id}\n        defaultView={defaultView}\n        onChange={(view) => {\n          setActiveView(view);\n          onChange?.(view);\n        }}\n      >\n        <div\n          {...rest}\n          className={clsx('group/drawer', styles.drawer, className)}\n          data-open={!!activeView || null}\n          data-placement={placement}\n          data-size={size}\n        >\n          {children}\n        </div>\n      </ViewStack>\n    </DrawerContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,SAAgB,OAAO,EACrB,IACA,UACA,WACA,aACA,YAAY,QACZ,OAAO,UACP,UACA,GAAG,QACW;CACd,MAAM,QAAQ,uBAAO,IAAI,KAAe,CAAC;CACzC,MAAM,CAAC,YAAY,iBAAiB,SAClC,eAAe,KAChB;CAED,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,aAAa,aAChB,SAA0B;AACzB,MAAI,MAAM,QAAQ,IAAI,MAAM,SAAS,KAAK,EAAE;AAC1C,iBAAc,MAAM,GAAG;AACvB,iBAAc,KAAK,KAAK,QAAQ,KAAK;;IAGzC;EAAC;EAAI,cAAc;EAAO,cAAc;EAAK,CAC9C;CACD,MAAM,eAAe,aAClB,SAA4B;AAC3B,MAAI,MAAM,QAAQ,IAAI,MAAM,SAAS,KAAK,EAAE;AAC1C,iBAAc,MAAM,GAAG;AACvB,OAAI,eAAe,MAAM,SAAS,KAChC,eAAc,KAAK,KAAK,QAAQ,KAAK;;IAI3C;EAAC;EAAI;EAAY,cAAc;EAAO,cAAc;EAAK,CAC1D;AAED,OAAM,iBAAiB,MAAM,WAAW;AACxC,OAAM,iBAAiB,QAAQ,aAAa;AAE5C,QACE,oBAAC,cAAc;EACb,OAAO;GACL,WAAW,SAAmB,MAAM,QAAQ,IAAI,KAAK;GACrD,aAAa,SAAmB,MAAM,QAAQ,OAAO,KAAK;GAC1D;GACD;YAED,oBAAC;GACK;GACS;GACb,WAAW,SAAS;AAClB,kBAAc,KAAK;AACnB,eAAW,KAAK;;aAGlB,oBAAC;IACC,GAAI;IACJ,WAAW,KAAK,gBAAgB,OAAO,QAAQ,UAAU;IACzD,aAAW,CAAC,CAAC,cAAc;IAC3B,kBAAgB;IAChB,aAAW;IAEV;KACG;IACI;GACW"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/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'use client';\n\nimport { useOn } from '@accelint/bus/react';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport type { UniqueId } from '@accelint/core';\nimport 'client-only';\nimport { useCallback, useRef, useState } from 'react';\nimport { ViewStack } from '../view-stack';\nimport { useViewStackEmit } from '../view-stack/context';\nimport { DrawerContext } from './context';\nimport { DrawerEventTypes } from './events';\nimport styles from './styles.module.css';\nimport type {\n  DrawerCloseEvent,\n  DrawerOpenEvent,\n  DrawerProps,\n  DrawerToggleEvent,\n} from './types';\n\n/**\n * Drawer - Slide-in panel for navigation or contextual content\n *\n * A flexible panel that slides in from the viewport edge and supports\n * stacked views, headers, footers, and programmatic triggers.\n *\n * @param props - {@link DrawerProps}\n * @param props.id - Unique identifier for the drawer.\n * @param props.children - Content to render inside the drawer.\n * @param props.className - Optional CSS class name.\n * @param props.defaultView - ID of the view to display initially.\n * @param props.placement - Edge of the viewport the drawer slides from.\n * @param props.size - Size of the drawer panel.\n * @param props.onChange - Callback when the active view changes.\n * @returns The rendered Drawer component.\n *\n * @example\n * ```tsx\n * const ids = { drawer: uuid(), a: uuid() };\n *\n * <DrawerLayout push=\"left\">\n *   <DrawerLayoutMain>\n *     <DrawerTrigger for={`open:${ids.a}`}>\n *       <Button variant=\"icon\">Open</Button>\n *     </DrawerTrigger>\n *   </DrawerLayoutMain>\n *\n *   <Drawer id={ids.drawer} defaultView={ids.a}>\n *     <DrawerPanel>\n *       <DrawerView id={ids.a}>\n *         <DrawerHeader title=\"Title A\" />\n *         <DrawerContent>Content for View A</DrawerContent>\n *       </DrawerView>\n *     </DrawerPanel>\n *   </Drawer>\n * </DrawerLayout>\n * ```\n */\nexport function Drawer({\n  id,\n  children,\n  className,\n  defaultView,\n  placement = 'left',\n  size = 'medium',\n  onChange,\n  ...rest\n}: DrawerProps) {\n  const views = useRef(new Set<UniqueId>());\n  const [activeView, setActiveView] = useState<UniqueId | null>(\n    defaultView || null,\n  );\n\n  const viewStackEmit = useViewStackEmit();\n\n  const handleClose = useCallback(\n    (data: DrawerCloseEvent) => {\n      if (\n        views.current.has(data?.payload?.view) ||\n        data?.payload?.view === id\n      ) {\n        viewStackEmit.clear(id);\n      }\n    },\n    [viewStackEmit.clear, id],\n  );\n  const handleOpen = useCallback(\n    (data: DrawerOpenEvent) => {\n      if (views.current.has(data?.payload?.view)) {\n        viewStackEmit.clear(id);\n        viewStackEmit.push(data.payload.view);\n      }\n    },\n    [id, viewStackEmit.clear, viewStackEmit.push],\n  );\n  const handleToggle = useCallback(\n    (data: DrawerToggleEvent) => {\n      if (views.current.has(data?.payload?.view)) {\n        viewStackEmit.clear(id);\n        if (activeView !== data?.payload?.view) {\n          viewStackEmit.push(data.payload.view);\n        }\n      }\n    },\n    [id, activeView, viewStackEmit.clear, viewStackEmit.push],\n  );\n\n  useOn(DrawerEventTypes.close, handleClose);\n  useOn(DrawerEventTypes.open, handleOpen);\n  useOn(DrawerEventTypes.toggle, handleToggle);\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        register: (view: UniqueId) => views.current.add(view),\n        unregister: (view: UniqueId) => views.current.delete(view),\n        placement,\n      }}\n    >\n      <ViewStack\n        id={id}\n        defaultView={defaultView}\n        onChange={(view) => {\n          setActiveView(view);\n          onChange?.(view);\n        }}\n      >\n        <div\n          {...rest}\n          className={clsx('group/drawer', styles.drawer, className)}\n          data-open={!!activeView || null}\n          data-placement={placement}\n          data-size={size}\n        >\n          {children}\n        </div>\n      </ViewStack>\n    </DrawerContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,OAAO,EACrB,IACA,UACA,WACA,aACA,YAAY,QACZ,OAAO,UACP,UACA,GAAG,QACW;CACd,MAAM,QAAQ,uBAAO,IAAI,KAAe,CAAC;CACzC,MAAM,CAAC,YAAY,iBAAiB,SAClC,eAAe,KAChB;CAED,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,cAAc,aACjB,SAA2B;AAC1B,MACE,MAAM,QAAQ,IAAI,MAAM,SAAS,KAAK,IACtC,MAAM,SAAS,SAAS,GAExB,eAAc,MAAM,GAAG;IAG3B,CAAC,cAAc,OAAO,GAAG,CAC1B;CACD,MAAM,aAAa,aAChB,SAA0B;AACzB,MAAI,MAAM,QAAQ,IAAI,MAAM,SAAS,KAAK,EAAE;AAC1C,iBAAc,MAAM,GAAG;AACvB,iBAAc,KAAK,KAAK,QAAQ,KAAK;;IAGzC;EAAC;EAAI,cAAc;EAAO,cAAc;EAAK,CAC9C;CACD,MAAM,eAAe,aAClB,SAA4B;AAC3B,MAAI,MAAM,QAAQ,IAAI,MAAM,SAAS,KAAK,EAAE;AAC1C,iBAAc,MAAM,GAAG;AACvB,OAAI,eAAe,MAAM,SAAS,KAChC,eAAc,KAAK,KAAK,QAAQ,KAAK;;IAI3C;EAAC;EAAI;EAAY,cAAc;EAAO,cAAc;EAAK,CAC1D;AAED,OAAM,iBAAiB,OAAO,YAAY;AAC1C,OAAM,iBAAiB,MAAM,WAAW;AACxC,OAAM,iBAAiB,QAAQ,aAAa;AAE5C,QACE,oBAAC,cAAc;EACb,OAAO;GACL,WAAW,SAAmB,MAAM,QAAQ,IAAI,KAAK;GACrD,aAAa,SAAmB,MAAM,QAAQ,OAAO,KAAK;GAC1D;GACD;YAED,oBAAC;GACK;GACS;GACb,WAAW,SAAS;AAClB,kBAAc,KAAK;AACnB,eAAW,KAAK;;aAGlB,oBAAC;IACC,GAAI;IACJ,WAAW,KAAK,gBAAgB,OAAO,QAAQ,UAAU;IACzD,aAAW,CAAC,CAAC,cAAc;IAC3B,kBAAgB;IAChB,aAAW;IAEV;KACG;IACI;GACW"}

package/dist/components/drawer/layout-main.d.ts

@@ -11,13 +11,34 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout-main.d.ts
+
+/**
+ * DrawerLayoutMain - Main content area within DrawerLayout.
+ *
+ * Responds to panel open/close states, adjusting layout based on
+ * the parent DrawerLayout's `push` configuration.
+ *
+ * @param props - ComponentPropsWithRef<'main'>
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered DrawerLayoutMain component.
+ *
+ * @example
+ * ```tsx
+ * <DrawerLayout push="left">
+ *   <DrawerLayoutMain>
+ *     Main content here
+ *   </DrawerLayoutMain>
+ *   <Drawer placement="left">...</Drawer>
+ * </DrawerLayout>
+ * ```
+ */
 declare function DrawerLayoutMain({
   className,
   ...rest
-}: ComponentPropsWithRef<'main'>): react_jsx_runtime9.JSX.Element;
+}: ComponentPropsWithRef<'main'>): react_jsx_runtime54.JSX.Element;
 //#endregion
 export { DrawerLayoutMain };
 //# sourceMappingURL=layout-main.d.ts.map

package/dist/components/drawer/layout-main.js

@@ -16,6 +16,26 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/drawer/layout-main.tsx
+/**
+* DrawerLayoutMain - Main content area within DrawerLayout.
+*
+* Responds to panel open/close states, adjusting layout based on
+* the parent DrawerLayout's `push` configuration.
+*
+* @param props - ComponentPropsWithRef<'main'>
+* @param props.className - Optional CSS class name.
+* @returns The rendered DrawerLayoutMain component.
+*
+* @example
+* ```tsx
+* <DrawerLayout push="left">
+*   <DrawerLayoutMain>
+*     Main content here
+*   </DrawerLayoutMain>
+*   <Drawer placement="left">...</Drawer>
+* </DrawerLayout>
+* ```
+*/
 function DrawerLayoutMain({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("main", {
 		...rest,

package/dist/components/drawer/layout-main.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-main.js","names":[],"sources":["../../../src/components/drawer/layout-main.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 DrawerLayoutMain({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'main'>) {\n  return <main {...rest} className={clsx(styles.main, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,QAC6B;AAChC,QAAO,oBAAC;EAAK,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;GAAI"}
+{"version":3,"file":"layout-main.js","names":[],"sources":["../../../src/components/drawer/layout-main.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 * DrawerLayoutMain - Main content area within DrawerLayout.\n *\n * Responds to panel open/close states, adjusting layout based on\n * the parent DrawerLayout's `push` configuration.\n *\n * @param props - ComponentPropsWithRef<'main'>\n * @param props.className - Optional CSS class name.\n * @returns The rendered DrawerLayoutMain component.\n *\n * @example\n * ```tsx\n * <DrawerLayout push=\"left\">\n *   <DrawerLayoutMain>\n *     Main content here\n *   </DrawerLayoutMain>\n *   <Drawer placement=\"left\">...</Drawer>\n * </DrawerLayout>\n * ```\n */\nexport function DrawerLayoutMain({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'main'>) {\n  return <main {...rest} className={clsx(styles.main, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,QAC6B;AAChC,QAAO,oBAAC;EAAK,GAAI;EAAM,WAAW,KAAK,OAAO,MAAM,UAAU;GAAI"}