@accelint/design-toolkit 9.2.0 → 9.4.0

package/dist/components/menu/separator.js

@@ -20,6 +20,20 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/menu/separator.tsx
+/**
+* MenuSeparator - Visual divider between menu items or sections
+*
+* @example
+* ```tsx
+* <MenuItem>Copy</MenuItem>
+* <MenuSeparator />
+* <MenuItem>Delete</MenuItem>
+* ```
+*
+* @param props - SeparatorProps from react-aria-components.
+* @param props.className - Optional CSS class name.
+* @returns The rendered MenuSeparator component.
+*/
 function MenuSeparator({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		...rest,

package/dist/components/menu/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../../../src/components/menu/separator.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Separator, type SeparatorProps } from 'react-aria-components';\nimport styles from './styles.module.css';\n\nexport function MenuSeparator({ className, ...rest }: SeparatorProps) {\n  return <Separator {...rest} className={clsx(styles.separator, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,WAAW,GAAG,QAAwB;AACpE,QAAO,oBAAC;EAAU,GAAI;EAAM,WAAW,KAAK,OAAO,WAAW,UAAU;GAAI"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../../src/components/menu/separator.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Separator, type SeparatorProps } from 'react-aria-components';\nimport styles from './styles.module.css';\n\n/**\n * MenuSeparator - Visual divider between menu items or sections\n *\n * @example\n * ```tsx\n * <MenuItem>Copy</MenuItem>\n * <MenuSeparator />\n * <MenuItem>Delete</MenuItem>\n * ```\n *\n * @param props - SeparatorProps from react-aria-components.\n * @param props.className - Optional CSS class name.\n * @returns The rendered MenuSeparator component.\n */\nexport function MenuSeparator({ className, ...rest }: SeparatorProps) {\n  return <Separator {...rest} className={clsx(styles.separator, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,cAAc,EAAE,WAAW,GAAG,QAAwB;AACpE,QAAO,oBAAC;EAAU,GAAI;EAAM,WAAW,KAAK,OAAO,WAAW,UAAU;GAAI"}

package/dist/components/menu/styles.module.css

@@ -14,7 +14,7 @@
 
 @layer components.l1 {
   .menu {
-    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto outline;
+    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto p-px outline;
   }
 
   .item {
@@ -27,6 +27,11 @@
       content: '';
     }
 
+    &:after {
+      content: '';
+      @apply pointer-events-none absolute inset-0 -z-1 bg-inherit;
+    }
+
     &.cozy {
       @apply pt-s pb-s;
     }
@@ -35,6 +40,55 @@
       @apply pt-xs pb-xs;
     }
 
+    /* Extend ::after to cover separator on interactive states */
+    @variant focus-visible {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
+    @variant hover {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
+    @variant open {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
+    @variant pressed {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
     @variant color-info {
       @variant focus-visible {
         @apply bg-accent-primary-muted;
@@ -55,32 +109,16 @@
       @variant selected {
         @apply bg-accent-primary-muted;
 
-        &:before {
-          @apply bg-accent-primary-bold;
-        }
-
         @variant hover {
           @apply fg-a11y-on-accent bg-accent-primary-bold;
-
-          &:before {
-            @apply bg-(--outline-accent-primary-hover);
-          }
         }
 
         @variant focus-visible {
           @apply fg-a11y-on-accent bg-accent-primary-bold;
-
-          &:before {
-            @apply bg-(--outline-accent-primary-hover);
-          }
         }
 
         @variant pressed {
           @apply fg-accent-primary-bold bg-accent-primary-pressed;
-
-          &:before {
-            @apply bg-accent-primary-pressed;
-          }
         }
       }
     }
@@ -107,31 +145,16 @@
       @variant selected {
         @apply fg-primary-bold bg-serious-muted;
 
-        &:before {
-          @apply bg-serious-bold;
-        }
-
         @variant hover {
           @apply fg-a11y-on-accent bg-serious-bold;
-          &:before {
-            @apply bg-(--outline-serious-hover);
-          }
         }
 
         @variant focus-visible {
           @apply fg-a11y-on-accent bg-serious-bold;
-
-          &:before {
-            @apply bg-(--outline-serious-hover);
-          }
         }
 
         @variant pressed {
           @apply fg-serious-bold bg-serious-pressed;
-
-          &:before {
-            @apply bg-(--outline-serious-pressed);
-          }
         }
       }
     }
@@ -158,10 +181,6 @@
       @variant selected {
         @apply fg-primary-bold bg-critical-muted;
 
-        &:before {
-          @apply bg-(--outline-critical-bold);
-        }
-
         @variant hover {
           @apply bg-critical-bold fg-a11y-on-accent;
         }
@@ -172,10 +191,6 @@
 
         @variant pressed {
           @apply fg-critical-bold bg-critical-pressed;
-
-          &:before {
-            @apply bg-(--outline-critical-pressed);
-          }
         }
       }
     }
@@ -185,10 +200,6 @@
 
       @variant selected {
         @apply bg-interactive-disabled;
-
-        &:before {
-          @apply bg-(--outline-interactive);
-        }
       }
     }
   }
@@ -306,11 +317,16 @@
   }
 
   .header {
-    @apply fg-primary-muted px-s py-xs text-header-xs;
+    @apply fg-primary-muted px-xs py-s text-header-xs;
   }
 
   .separator {
-    @apply outline-static mx-m my-xs outline;
+    /*
+     * Use border-top instead of background-color + height for the 1px line.
+     * Border rendering is more consistent across platforms (Linux/Windows/Mac)
+     * and display scaling settings than background-color with sub-pixel heights.
+     */
+    @apply h-0 border-t border-(--outline-static);
   }
 
   .hotkey {

package/dist/components/menu/submenu.d.ts

@@ -11,11 +11,27 @@
  */
 
 import "client-only";
-import * as react24 from "react";
+import * as react44 from "react";
 import * as react_aria_components1 from "react-aria-components";
 
 //#region src/components/menu/submenu.d.ts
-declare const MenuSubmenu: (props: react_aria_components1.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react24.ReactElement | null;
+/**
+ * MenuSubmenu - Trigger for nested submenu flyouts
+ *
+ * Wraps a MenuItem and nested Menu to create hierarchical navigation.
+ *
+ * @example
+ * ```tsx
+ * <MenuSubmenu>
+ *   <MenuItem>Export</MenuItem>
+ *   <Menu>
+ *     <MenuItem>Export as PDF</MenuItem>
+ *     <MenuItem>Export as CSV</MenuItem>
+ *   </Menu>
+ * </MenuSubmenu>
+ * ```
+ */
+declare const MenuSubmenu: (props: react_aria_components1.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react44.ReactElement | null;
 //#endregion
 export { MenuSubmenu };
 //# sourceMappingURL=submenu.d.ts.map

package/dist/components/menu/submenu.js

@@ -17,6 +17,22 @@ import "client-only";
 import { SubmenuTrigger } from "react-aria-components";
 
 //#region src/components/menu/submenu.tsx
+/**
+* MenuSubmenu - Trigger for nested submenu flyouts
+*
+* Wraps a MenuItem and nested Menu to create hierarchical navigation.
+*
+* @example
+* ```tsx
+* <MenuSubmenu>
+*   <MenuItem>Export</MenuItem>
+*   <Menu>
+*     <MenuItem>Export as PDF</MenuItem>
+*     <MenuItem>Export as CSV</MenuItem>
+*   </Menu>
+* </MenuSubmenu>
+* ```
+*/
 const MenuSubmenu = SubmenuTrigger;
 
 //#endregion

package/dist/components/menu/submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"submenu.js","names":[],"sources":["../../../src/components/menu/submenu.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 { SubmenuTrigger } from 'react-aria-components';\n\nexport const MenuSubmenu = SubmenuTrigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAa,cAAc"}
+{"version":3,"file":"submenu.js","names":[],"sources":["../../../src/components/menu/submenu.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 { SubmenuTrigger } from 'react-aria-components';\n\n/**\n * MenuSubmenu - Trigger for nested submenu flyouts\n *\n * Wraps a MenuItem and nested Menu to create hierarchical navigation.\n *\n * @example\n * ```tsx\n * <MenuSubmenu>\n *   <MenuItem>Export</MenuItem>\n *   <Menu>\n *     <MenuItem>Export as PDF</MenuItem>\n *     <MenuItem>Export as CSV</MenuItem>\n *   </Menu>\n * </MenuSubmenu>\n * ```\n */\nexport const MenuSubmenu = SubmenuTrigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,cAAc"}

package/dist/components/menu/trigger.d.ts

@@ -14,6 +14,21 @@ import "client-only";
 import { MenuTrigger as MenuTrigger$1 } from "react-aria-components";
 
 //#region src/components/menu/trigger.d.ts
+/**
+ * MenuTrigger - Manages open/close state and anchors menu position
+ *
+ * Wraps a trigger element (typically a Button) and the Menu component.
+ *
+ * @example
+ * ```tsx
+ * <MenuTrigger>
+ *   <Button>Open Menu</Button>
+ *   <Menu>
+ *     <MenuItem>Item 1</MenuItem>
+ *   </Menu>
+ * </MenuTrigger>
+ * ```
+ */
 declare const MenuTrigger: typeof MenuTrigger$1;
 //#endregion
 export { MenuTrigger };

package/dist/components/menu/trigger.js

@@ -17,6 +17,21 @@ import "client-only";
 import { MenuTrigger as MenuTrigger$1 } from "react-aria-components";
 
 //#region src/components/menu/trigger.tsx
+/**
+* MenuTrigger - Manages open/close state and anchors menu position
+*
+* Wraps a trigger element (typically a Button) and the Menu component.
+*
+* @example
+* ```tsx
+* <MenuTrigger>
+*   <Button>Open Menu</Button>
+*   <Menu>
+*     <MenuItem>Item 1</MenuItem>
+*   </Menu>
+* </MenuTrigger>
+* ```
+*/
 const MenuTrigger = MenuTrigger$1;
 
 //#endregion

package/dist/components/menu/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","names":["AriaMenuTrigger"],"sources":["../../../src/components/menu/trigger.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 { MenuTrigger as AriaMenuTrigger } from 'react-aria-components';\n\nexport const MenuTrigger = AriaMenuTrigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAa,cAAcA"}
+{"version":3,"file":"trigger.js","names":["AriaMenuTrigger"],"sources":["../../../src/components/menu/trigger.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 { MenuTrigger as AriaMenuTrigger } from 'react-aria-components';\n\n/**\n * MenuTrigger - Manages open/close state and anchors menu position\n *\n * Wraps a trigger element (typically a Button) and the Menu component.\n *\n * @example\n * ```tsx\n * <MenuTrigger>\n *   <Button>Open Menu</Button>\n *   <Menu>\n *     <MenuItem>Item 1</MenuItem>\n *   </Menu>\n * </MenuTrigger>\n * ```\n */\nexport const MenuTrigger = AriaMenuTrigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,cAAcA"}

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

@@ -15,29 +15,54 @@ import { ReactElement, RefAttributes } from "react";
 import { MenuItemProps as MenuItemProps$1, MenuProps as MenuProps$1, MenuSectionProps as MenuSectionProps$1, PopoverProps, TextProps } from "react-aria-components";
 
 //#region src/components/menu/types.d.ts
+/**
+ * Props for the Menu component.
+ */
 type MenuProps<T> = Omit<MenuProps$1<T>, 'className'> & RefAttributes<HTMLDivElement> & {
+  /** CSS class names for menu elements. */
   classNames?: {
+    /** Class name for the menu container. */
     menu?: MenuProps$1<T>['className'];
+    /** Class name for the popover wrapper. */
     popover?: PopoverProps['className'];
   };
+  /** Props passed to the internal Popover component. */
   popoverProps?: Omit<PopoverProps, 'children' | 'className'>;
+  /** Visual density variant for the menu. */
   variant?: 'compact' | 'cozy';
 };
+/**
+ * Props for the MenuItem component.
+ */
 type MenuItemProps = Omit<MenuItemProps$1, 'className'> & {
+  /** CSS class names for menu item elements. */
   classNames?: {
+    /** Class name for the menu item container. */
     item?: MenuItemProps$1['className'];
+    /** Class name for the text label. */
     text?: TextProps['className'];
+    /** Class name for the submenu indicator icon. */
     more?: IconProps['className'];
+    /** Class name for the item icon. */
     icon?: IconProps['className'];
+    /** Class name for the hotkey display. */
     hotkey?: string;
   };
+  /** Color variant for the menu item. */
   color?: 'info' | 'serious' | 'critical';
 };
+/**
+ * Props for the MenuSection component.
+ */
 type MenuSectionProps<T> = Omit<MenuSectionProps$1<T>, 'className'> & {
+  /** CSS class names for section elements. */
   classNames?: {
+    /** Class name for the section container. */
     section?: MenuSectionProps$1<T>['className'];
+    /** Class name for the section header. */
     header?: string;
   };
+  /** Title displayed in the section header. */
   title?: string | ReactElement;
 };
 //#endregion

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

@@ -1,5 +1,14 @@
 //#region src/components/notice/events.d.ts
+/** Event namespace for Notice-related bus events */
 declare const NoticeEventNamespace = "Notice";
+/**
+ * Event types for Notice queue management via the bus system.
+ * - queue: Add a notice to the queue
+ * - dequeue: Remove notices matching criteria
+ * - actionPrimary: Primary button was pressed
+ * - actionSecondary: Secondary button was pressed
+ * - close: Notice was closed/dismissed
+ */
 declare const NoticeEventTypes: {
   readonly queue: "Notice:queue";
   readonly dequeue: "Notice:dequeue";

package/dist/components/notice/events.js

@@ -12,7 +12,16 @@
 
 
 //#region src/components/notice/events.ts
+/** Event namespace for Notice-related bus events */
 const NoticeEventNamespace = "Notice";
+/**
+* Event types for Notice queue management via the bus system.
+* - queue: Add a notice to the queue
+* - dequeue: Remove notices matching criteria
+* - actionPrimary: Primary button was pressed
+* - actionSecondary: Secondary button was pressed
+* - close: Notice was closed/dismissed
+*/
 const NoticeEventTypes = {
 	queue: `${NoticeEventNamespace}:queue`,
 	dequeue: `${NoticeEventNamespace}:dequeue`,

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

@@ -1 +1 @@
-{"version":3,"file":"events.js","names":[],"sources":["../../../src/components/notice/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 NoticeEventNamespace = 'Notice';\n\nexport const NoticeEventTypes = {\n  queue: `${NoticeEventNamespace}:queue`,\n  dequeue: `${NoticeEventNamespace}:dequeue`,\n  actionPrimary: `${NoticeEventNamespace}:action:primary`,\n  actionSecondary: `${NoticeEventNamespace}:action:secondary`,\n  close: `${NoticeEventNamespace}:close`,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,uBAAuB;AAEpC,MAAa,mBAAmB;CAC9B,OAAO,GAAG,qBAAqB;CAC/B,SAAS,GAAG,qBAAqB;CACjC,eAAe,GAAG,qBAAqB;CACvC,iBAAiB,GAAG,qBAAqB;CACzC,OAAO,GAAG,qBAAqB;CAChC"}
+{"version":3,"file":"events.js","names":[],"sources":["../../../src/components/notice/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/** Event namespace for Notice-related bus events */\nexport const NoticeEventNamespace = 'Notice';\n\n/**\n * Event types for Notice queue management via the bus system.\n * - queue: Add a notice to the queue\n * - dequeue: Remove notices matching criteria\n * - actionPrimary: Primary button was pressed\n * - actionSecondary: Secondary button was pressed\n * - close: Notice was closed/dismissed\n */\nexport const NoticeEventTypes = {\n  queue: `${NoticeEventNamespace}:queue`,\n  dequeue: `${NoticeEventNamespace}:dequeue`,\n  actionPrimary: `${NoticeEventNamespace}:action:primary`,\n  actionSecondary: `${NoticeEventNamespace}:action:secondary`,\n  close: `${NoticeEventNamespace}:close`,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,uBAAuB;;;;;;;;;AAUpC,MAAa,mBAAmB;CAC9B,OAAO,GAAG,qBAAqB;CAC/B,SAAS,GAAG,qBAAqB;CACjC,eAAe,GAAG,qBAAqB;CACvC,iBAAiB,GAAG,qBAAqB;CACzC,OAAO,GAAG,qBAAqB;CAChC"}

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

@@ -12,9 +12,41 @@
 
 import { NoticeProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime100 from "react/jsx-runtime";
+import * as react_jsx_runtime186 from "react/jsx-runtime";
 
 //#region src/components/notice/index.d.ts
+
+/**
+ * Notice - Notification component for temporary messages and alerts
+ *
+ * Displays messages with optional action buttons and close functionality.
+ * Icons are automatically displayed based on the color variant.
+ *
+ * @example
+ * ```tsx
+ * <Notice
+ *   id="notice-1"
+ *   message="Operation completed"
+ *   color="normal"
+ * />
+ * ```
+ *
+ * @param props - {@link NoticeProps}
+ * @param props.id - Unique identifier for the notice.
+ * @param props.classNames - CSS class names for notice elements.
+ * @param props.color - Color variant indicating severity.
+ * @param props.message - Message text to display.
+ * @param props.primary - Primary action button configuration.
+ * @param props.secondary - Secondary action button configuration.
+ * @param props.hideIcon - Whether to hide the status icon.
+ * @param props.showClose - Whether to show the close button.
+ * @param props.shouldCloseOnAction - Whether to close the notice when an action button is pressed.
+ * @param props.size - Size variant for the notice.
+ * @param props.onPrimaryAction - Callback when primary action button is pressed.
+ * @param props.onSecondaryAction - Callback when secondary action button is pressed.
+ * @param props.onClose - Callback when the notice is closed.
+ * @returns The rendered Notice component.
+ */
 declare function Notice({
   id,
   classNames,
@@ -29,7 +61,7 @@ declare function Notice({
   onPrimaryAction,
   onSecondaryAction,
   onClose
-}: NoticeProps): react_jsx_runtime100.JSX.Element;
+}: NoticeProps): react_jsx_runtime186.JSX.Element;
 //#endregion
 export { Notice };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/notice/index.js

@@ -20,7 +20,7 @@ import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Text, UNSTABLE_Toast, UNSTABLE_ToastContent } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Cancel } from "@accelint/icons";
+import Cancel from "@accelint/icons/cancel";
 import styles from "./styles.module.css";
 
 //#region src/components/notice/index.tsx
@@ -31,6 +31,37 @@ const ButtonColorMap = {
 	serious: "serious",
 	critical: "critical"
 };
+/**
+* Notice - Notification component for temporary messages and alerts
+*
+* Displays messages with optional action buttons and close functionality.
+* Icons are automatically displayed based on the color variant.
+*
+* @example
+* ```tsx
+* <Notice
+*   id="notice-1"
+*   message="Operation completed"
+*   color="normal"
+* />
+* ```
+*
+* @param props - {@link NoticeProps}
+* @param props.id - Unique identifier for the notice.
+* @param props.classNames - CSS class names for notice elements.
+* @param props.color - Color variant indicating severity.
+* @param props.message - Message text to display.
+* @param props.primary - Primary action button configuration.
+* @param props.secondary - Secondary action button configuration.
+* @param props.hideIcon - Whether to hide the status icon.
+* @param props.showClose - Whether to show the close button.
+* @param props.shouldCloseOnAction - Whether to close the notice when an action button is pressed.
+* @param props.size - Size variant for the notice.
+* @param props.onPrimaryAction - Callback when primary action button is pressed.
+* @param props.onSecondaryAction - Callback when secondary action button is pressed.
+* @param props.onClose - Callback when the notice is closed.
+* @returns The rendered Notice component.
+*/
 function Notice({ id, classNames, color = "info", message, primary, secondary, hideIcon, showClose, shouldCloseOnAction, size = "medium", onPrimaryAction, onSecondaryAction, onClose }) {
 	return /* @__PURE__ */ jsx(UNSTABLE_Toast, {
 		className: clsx("group/notice", styles.notice, classNames?.notice),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ButtonColorMap: Record<NoticeColor, ButtonProps['color']>","Toast","ToastContent","Button"],"sources":["../../../src/components/notice/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport { Cancel } from '@accelint/icons';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  Text,\n  UNSTABLE_Toast as Toast,\n  UNSTABLE_ToastContent as ToastContent,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { NoticeIcon } from './notice-icon';\nimport styles from './styles.module.css';\nimport type { ButtonProps } from '../button/types';\nimport type { NoticeColor, NoticeProps } from './types';\n\nconst ButtonColorMap: Record<NoticeColor, ButtonProps['color']> = {\n  normal: 'mono-bold',\n  advisory: 'mono-bold',\n  info: 'mono-bold',\n  serious: 'serious',\n  critical: 'critical',\n};\n\nexport function Notice({\n  id,\n  classNames,\n  color = 'info',\n  message,\n  primary,\n  secondary,\n  hideIcon,\n  showClose,\n  shouldCloseOnAction,\n  size = 'medium',\n  onPrimaryAction,\n  onSecondaryAction,\n  onClose,\n}: NoticeProps) {\n  return (\n    <Toast\n      className={clsx('group/notice', styles.notice, classNames?.notice)}\n      toast={{ key: id, content: message, onClose }}\n      data-color={color}\n      data-size={size}\n    >\n      <ToastContent className={clsx(styles.content, classNames?.content)}>\n        {!hideIcon && size === 'medium' && (\n          <NoticeIcon color={color} size={size} />\n        )}\n        <Text\n          slot='description'\n          className={clsx(styles.message, classNames?.message)}\n        >\n          {message}\n        </Text>\n        {(primary || secondary) && (\n          <div className={clsx(styles.actions, classNames?.actions)}>\n            {primary && (\n              <Button\n                color={ButtonColorMap[color]}\n                variant='filled'\n                {...primary}\n                size={size}\n                onPress={() => {\n                  onPrimaryAction?.();\n\n                  if (shouldCloseOnAction) {\n                    onClose?.();\n                  }\n                }}\n              />\n            )}\n            {secondary && (\n              <Button\n                color={ButtonColorMap[color]}\n                variant='outline'\n                {...secondary}\n                size={size}\n                onPress={() => {\n                  onSecondaryAction?.();\n\n                  if (shouldCloseOnAction) {\n                    onClose?.();\n                  }\n                }}\n              />\n            )}\n          </div>\n        )}\n        {showClose && (\n          <Button\n            color={ButtonColorMap[color]}\n            variant='icon'\n            onPress={onClose}\n          >\n            <Icon>\n              <Cancel />\n            </Icon>\n          </Button>\n        )}\n      </ToastContent>\n    </Toast>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,iBAA4D;CAChE,QAAQ;CACR,UAAU;CACV,MAAM;CACN,SAAS;CACT,UAAU;CACX;AAED,SAAgB,OAAO,EACrB,IACA,YACA,QAAQ,QACR,SACA,SACA,WACA,UACA,WACA,qBACA,OAAO,UACP,iBACA,mBACA,WACc;AACd,QACE,oBAACC;EACC,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;EAClE,OAAO;GAAE,KAAK;GAAI,SAAS;GAAS;GAAS;EAC7C,cAAY;EACZ,aAAW;YAEX,qBAACC;GAAa,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;;IAC/D,CAAC,YAAY,SAAS,YACrB,oBAAC;KAAkB;KAAa;MAAQ;IAE1C,oBAAC;KACC,MAAK;KACL,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;eAEnD;MACI;KACL,WAAW,cACX,qBAAC;KAAI,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;gBACtD,WACC,oBAACC;MACC,OAAO,eAAe;MACtB,SAAQ;MACR,GAAI;MACE;MACN,eAAe;AACb,0BAAmB;AAEnB,WAAI,oBACF,YAAW;;OAGf,EAEH,aACC,oBAACA;MACC,OAAO,eAAe;MACtB,SAAQ;MACR,GAAI;MACE;MACN,eAAe;AACb,4BAAqB;AAErB,WAAI,oBACF,YAAW;;OAGf;MAEA;IAEP,aACC,oBAACA;KACC,OAAO,eAAe;KACtB,SAAQ;KACR,SAAS;eAET,oBAAC,kBACC,oBAAC,WAAS,GACL;MACA;;IAEE;GACT"}
+{"version":3,"file":"index.js","names":["ButtonColorMap: Record<NoticeColor, ButtonProps['color']>","Toast","ToastContent","Button"],"sources":["../../../src/components/notice/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport Cancel from '@accelint/icons/cancel';\nimport {\n  Text,\n  UNSTABLE_Toast as Toast,\n  UNSTABLE_ToastContent as ToastContent,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { NoticeIcon } from './notice-icon';\nimport styles from './styles.module.css';\nimport type { ButtonProps } from '../button/types';\nimport type { NoticeColor, NoticeProps } from './types';\n\nconst ButtonColorMap: Record<NoticeColor, ButtonProps['color']> = {\n  normal: 'mono-bold',\n  advisory: 'mono-bold',\n  info: 'mono-bold',\n  serious: 'serious',\n  critical: 'critical',\n};\n\n/**\n * Notice - Notification component for temporary messages and alerts\n *\n * Displays messages with optional action buttons and close functionality.\n * Icons are automatically displayed based on the color variant.\n *\n * @example\n * ```tsx\n * <Notice\n *   id=\"notice-1\"\n *   message=\"Operation completed\"\n *   color=\"normal\"\n * />\n * ```\n *\n * @param props - {@link NoticeProps}\n * @param props.id - Unique identifier for the notice.\n * @param props.classNames - CSS class names for notice elements.\n * @param props.color - Color variant indicating severity.\n * @param props.message - Message text to display.\n * @param props.primary - Primary action button configuration.\n * @param props.secondary - Secondary action button configuration.\n * @param props.hideIcon - Whether to hide the status icon.\n * @param props.showClose - Whether to show the close button.\n * @param props.shouldCloseOnAction - Whether to close the notice when an action button is pressed.\n * @param props.size - Size variant for the notice.\n * @param props.onPrimaryAction - Callback when primary action button is pressed.\n * @param props.onSecondaryAction - Callback when secondary action button is pressed.\n * @param props.onClose - Callback when the notice is closed.\n * @returns The rendered Notice component.\n */\nexport function Notice({\n  id,\n  classNames,\n  color = 'info',\n  message,\n  primary,\n  secondary,\n  hideIcon,\n  showClose,\n  shouldCloseOnAction,\n  size = 'medium',\n  onPrimaryAction,\n  onSecondaryAction,\n  onClose,\n}: NoticeProps) {\n  return (\n    <Toast\n      className={clsx('group/notice', styles.notice, classNames?.notice)}\n      toast={{ key: id, content: message, onClose }}\n      data-color={color}\n      data-size={size}\n    >\n      <ToastContent className={clsx(styles.content, classNames?.content)}>\n        {!hideIcon && size === 'medium' && (\n          <NoticeIcon color={color} size={size} />\n        )}\n        <Text\n          slot='description'\n          className={clsx(styles.message, classNames?.message)}\n        >\n          {message}\n        </Text>\n        {(primary || secondary) && (\n          <div className={clsx(styles.actions, classNames?.actions)}>\n            {primary && (\n              <Button\n                color={ButtonColorMap[color]}\n                variant='filled'\n                {...primary}\n                size={size}\n                onPress={() => {\n                  onPrimaryAction?.();\n\n                  if (shouldCloseOnAction) {\n                    onClose?.();\n                  }\n                }}\n              />\n            )}\n            {secondary && (\n              <Button\n                color={ButtonColorMap[color]}\n                variant='outline'\n                {...secondary}\n                size={size}\n                onPress={() => {\n                  onSecondaryAction?.();\n\n                  if (shouldCloseOnAction) {\n                    onClose?.();\n                  }\n                }}\n              />\n            )}\n          </div>\n        )}\n        {showClose && (\n          <Button\n            color={ButtonColorMap[color]}\n            variant='icon'\n            onPress={onClose}\n          >\n            <Icon>\n              <Cancel />\n            </Icon>\n          </Button>\n        )}\n      </ToastContent>\n    </Toast>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,iBAA4D;CAChE,QAAQ;CACR,UAAU;CACV,MAAM;CACN,SAAS;CACT,UAAU;CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCD,SAAgB,OAAO,EACrB,IACA,YACA,QAAQ,QACR,SACA,SACA,WACA,UACA,WACA,qBACA,OAAO,UACP,iBACA,mBACA,WACc;AACd,QACE,oBAACC;EACC,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;EAClE,OAAO;GAAE,KAAK;GAAI,SAAS;GAAS;GAAS;EAC7C,cAAY;EACZ,aAAW;YAEX,qBAACC;GAAa,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;;IAC/D,CAAC,YAAY,SAAS,YACrB,oBAAC;KAAkB;KAAa;MAAQ;IAE1C,oBAAC;KACC,MAAK;KACL,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;eAEnD;MACI;KACL,WAAW,cACX,qBAAC;KAAI,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;gBACtD,WACC,oBAACC;MACC,OAAO,eAAe;MACtB,SAAQ;MACR,GAAI;MACE;MACN,eAAe;AACb,0BAAmB;AAEnB,WAAI,oBACF,YAAW;;OAGf,EAEH,aACC,oBAACA;MACC,OAAO,eAAe;MACtB,SAAQ;MACR,GAAI;MACE;MACN,eAAe;AACb,4BAAqB;AAErB,WAAI,oBACF,YAAW;;OAGf;MAEA;IAEP,aACC,oBAACA;KACC,OAAO,eAAe;KACtB,SAAQ;KACR,SAAS;eAET,oBAAC,kBACC,oBAAC,WAAS,GACL;MACA;;IAEE;GACT"}

package/dist/components/notice/list.d.ts

@@ -12,9 +12,38 @@
 
 import { NoticeListProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime101 from "react/jsx-runtime";
+import * as react_jsx_runtime187 from "react/jsx-runtime";
 
 //#region src/components/notice/list.d.ts
+
+/**
+ * NoticeList - Queue manager for displaying multiple notices
+ *
+ * Manages a FIFO queue of notices with automatic timeout and dismissal.
+ * New notices push out older ones when the limit is reached.
+ * Uses event-driven communication via the bus system.
+ *
+ * @example
+ * ```tsx
+ * <NoticeList
+ *   aria-label="notifications"
+ *   placement="top right"
+ *   limit={3}
+ * />
+ * ```
+ *
+ * @param props - {@link NoticeListProps}
+ * @param props.id - Unique identifier for targeting notices to this list.
+ * @param props.classNames - CSS class names for list elements.
+ * @param props.defaultColor - Default color for notices without explicit color.
+ * @param props.defaultTimeout - Default timeout for notices without explicit timeout.
+ * @param props.hideClearAll - Whether to hide the "Clear All" button.
+ * @param props.limit - Maximum number of visible notices.
+ * @param props.global - Whether to use global ToastRegion for portal rendering.
+ * @param props.placement - Position of the notice list on screen.
+ * @param props.size - Size variant for notices in the list.
+ * @returns The rendered NoticeList component.
+ */
 declare function NoticeList({
   id,
   classNames,
@@ -26,7 +55,7 @@ declare function NoticeList({
   placement,
   size,
   ...rest
-}: NoticeListProps): react_jsx_runtime101.JSX.Element;
+}: NoticeListProps): react_jsx_runtime187.JSX.Element;
 //#endregion
 export { NoticeList };
 //# sourceMappingURL=list.d.ts.map

package/dist/components/notice/list.js

@@ -29,6 +29,34 @@ import { useToastRegion } from "@react-aria/toast";
 import { useToastQueue } from "@react-stately/toast";
 
 //#region src/components/notice/list.tsx
+/**
+* NoticeList - Queue manager for displaying multiple notices
+*
+* Manages a FIFO queue of notices with automatic timeout and dismissal.
+* New notices push out older ones when the limit is reached.
+* Uses event-driven communication via the bus system.
+*
+* @example
+* ```tsx
+* <NoticeList
+*   aria-label="notifications"
+*   placement="top right"
+*   limit={3}
+* />
+* ```
+*
+* @param props - {@link NoticeListProps}
+* @param props.id - Unique identifier for targeting notices to this list.
+* @param props.classNames - CSS class names for list elements.
+* @param props.defaultColor - Default color for notices without explicit color.
+* @param props.defaultTimeout - Default timeout for notices without explicit timeout.
+* @param props.hideClearAll - Whether to hide the "Clear All" button.
+* @param props.limit - Maximum number of visible notices.
+* @param props.global - Whether to use global ToastRegion for portal rendering.
+* @param props.placement - Position of the notice list on screen.
+* @param props.size - Size variant for notices in the list.
+* @returns The rendered NoticeList component.
+*/
 function NoticeList({ id, classNames, defaultColor, defaultTimeout, hideClearAll, limit = 3, global, placement, size = "medium", ...rest }) {
 	const queue = useMemo(() => new UNSTABLE_ToastQueue({ maxVisibleToasts: limit }), [limit]);
 	const state = useToastQueue(queue);