@accelint/design-toolkit 9.2.0 → 9.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["ToastQueue","useEmit","Button","ToastList","ToastRegion","ToastStateContext"],"sources":["../../../src/components/notice/list.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 { useBus } from '@accelint/bus/react';\nimport { uuid } from '@accelint/core';\nimport { useToastRegion } from '@react-aria/toast';\nimport { useToastQueue } from '@react-stately/toast';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  composeRenderProps,\n  type QueuedToast,\n  UNSTABLE_ToastList as ToastList,\n  UNSTABLE_ToastQueue as ToastQueue,\n  UNSTABLE_ToastRegion as ToastRegion,\n  UNSTABLE_ToastStateContext as ToastStateContext,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Notice } from './';\nimport { NoticeEventTypes } from './events';\nimport styles from './styles.module.css';\nimport { matchesMetadata } from './utils';\nimport type {\n  NoticeActionEvent,\n  NoticeContent,\n  NoticeDequeueEvent,\n  NoticeListProps,\n  NoticeQueueEvent,\n} from './types';\n\nexport function NoticeList({\n  id,\n  classNames,\n  defaultColor,\n  defaultTimeout,\n  hideClearAll,\n  limit = 3,\n  global,\n  placement,\n  size = 'medium',\n  ...rest\n}: NoticeListProps) {\n  const queue = useMemo(\n    () => new ToastQueue<NoticeContent>({ maxVisibleToasts: limit }),\n    [limit],\n  );\n  const state = useToastQueue(queue);\n\n  const [hasNotices, setHasNotices] = useState(false);\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(rest, queue, ref);\n\n  const { useEmit, useOn } = useBus<\n    NoticeQueueEvent | NoticeDequeueEvent | NoticeActionEvent\n  >();\n  const emitActionPrimary = useEmit(NoticeEventTypes.actionPrimary);\n  const emitActionSecondary = useEmit(NoticeEventTypes.actionSecondary);\n  const emitClose = useEmit(NoticeEventTypes.close);\n\n  useOn(NoticeEventTypes.queue, (data) => {\n    if ((id && data.payload.target === id) || !id) {\n      const timeout = defaultTimeout ?? data.payload.timeout;\n      queue.add(\n        {\n          ...data.payload,\n          id: data.payload.id || uuid(),\n          color: defaultColor || data.payload.color,\n        },\n        {\n          timeout,\n        },\n      );\n      if (timeout) {\n        queue.resumeAll();\n      }\n    }\n  });\n\n  useOn(NoticeEventTypes.dequeue, (data) => {\n    // @ts-expect-error : queue.queue exists, but is not currently documented\n    const queuedNotices = queue.queue;\n\n    const dequeue = queuedNotices.filter((toast: QueuedToast<NoticeContent>) =>\n      matchesMetadata(data.payload, toast.content),\n    );\n\n    if (dequeue.length && dequeue.length === queuedNotices.length) {\n      queue.clear();\n    } else {\n      for (const toast of dequeue) {\n        queue.close(toast.key);\n      }\n    }\n  });\n\n  useEffect(() => {\n    queue.subscribe(() => {\n      setHasNotices(queue.visibleToasts.length > 0);\n    });\n  });\n\n  const children = (\n    <>\n      {!hideClearAll && hasNotices && (\n        <Button\n          className={composeRenderProps(\n            classNames?.button,\n            (className) => className ?? '',\n          )}\n          variant='outline'\n          onPress={queue.clear}\n        >\n          Clear All\n        </Button>\n      )}\n      <ToastList\n        className={composeRenderProps(classNames?.list, (className) =>\n          clsx(styles.list, className),\n        )}\n      >\n        {({ toast }: { toast: QueuedToast<NoticeContent> }) => (\n          <Notice\n            {...toast.content}\n            key={toast.key}\n            showClose={\n              !(\n                toast.timeout &&\n                toast.content.primary &&\n                toast.content.secondary\n              )\n            }\n            classNames={classNames?.notice}\n            size={size}\n            onPrimaryAction={() => emitActionPrimary({ id: toast.content.id })}\n            onSecondaryAction={() =>\n              emitActionSecondary({ id: toast.content.id })\n            }\n            onClose={() => {\n              toast.onClose?.();\n              queue.close(toast.key);\n              emitClose({ id: toast.content.id });\n            }}\n          />\n        )}\n      </ToastList>\n    </>\n  );\n\n  return global ? (\n    <ToastRegion\n      className={clsx('group/region', styles.region, classNames?.region)}\n      data-placement={placement}\n      queue={queue}\n    >\n      {children}\n    </ToastRegion>\n  ) : (\n    <div\n      {...regionProps}\n      className={clsx('group/region', styles.region, classNames?.region)}\n      data-placement={placement}\n      ref={ref}\n    >\n      <ToastStateContext.Provider value={state}>\n        {children}\n      </ToastStateContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,WAAW,EACzB,IACA,YACA,cACA,gBACA,cACA,QAAQ,GACR,QACA,WACA,OAAO,UACP,GAAG,QACe;CAClB,MAAM,QAAQ,cACN,IAAIA,oBAA0B,EAAE,kBAAkB,OAAO,CAAC,EAChE,CAAC,MAAM,CACR;CACD,MAAM,QAAQ,cAAc,MAAM;CAElC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,MAAM,OAAO,KAAK;CACxB,MAAM,EAAE,gBAAgB,eAAe,MAAM,OAAO,IAAI;CAExD,MAAM,EAAE,oBAAS,mBAAU,QAExB;CACH,MAAM,oBAAoBC,UAAQ,iBAAiB,cAAc;CACjE,MAAM,sBAAsBA,UAAQ,iBAAiB,gBAAgB;CACrE,MAAM,YAAYA,UAAQ,iBAAiB,MAAM;AAEjD,SAAM,iBAAiB,QAAQ,SAAS;AACtC,MAAK,MAAM,KAAK,QAAQ,WAAW,MAAO,CAAC,IAAI;GAC7C,MAAM,UAAU,kBAAkB,KAAK,QAAQ;AAC/C,SAAM,IACJ;IACE,GAAG,KAAK;IACR,IAAI,KAAK,QAAQ,MAAM,MAAM;IAC7B,OAAO,gBAAgB,KAAK,QAAQ;IACrC,EACD,EACE,SACD,CACF;AACD,OAAI,QACF,OAAM,WAAW;;GAGrB;AAEF,SAAM,iBAAiB,UAAU,SAAS;EAExC,MAAM,gBAAgB,MAAM;EAE5B,MAAM,UAAU,cAAc,QAAQ,UACpC,gBAAgB,KAAK,SAAS,MAAM,QAAQ,CAC7C;AAED,MAAI,QAAQ,UAAU,QAAQ,WAAW,cAAc,OACrD,OAAM,OAAO;MAEb,MAAK,MAAM,SAAS,QAClB,OAAM,MAAM,MAAM,IAAI;GAG1B;AAEF,iBAAgB;AACd,QAAM,gBAAgB;AACpB,iBAAc,MAAM,cAAc,SAAS,EAAE;IAC7C;GACF;CAEF,MAAM,WACJ,8CACG,CAAC,gBAAgB,cAChB,oBAACC;EACC,WAAW,mBACT,YAAY,SACX,cAAc,aAAa,GAC7B;EACD,SAAQ;EACR,SAAS,MAAM;YAChB;GAEQ,EAEX,oBAACC;EACC,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,OAAO,MAAM,UAAU,CAC7B;aAEC,EAAE,YACF,8BAAC;GACC,GAAI,MAAM;GACV,KAAK,MAAM;GACX,WACE,EACE,MAAM,WACN,MAAM,QAAQ,WACd,MAAM,QAAQ;GAGlB,YAAY,YAAY;GAClB;GACN,uBAAuB,kBAAkB,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;GAClE,yBACE,oBAAoB,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;GAE/C,eAAe;AACb,UAAM,WAAW;AACjB,UAAM,MAAM,MAAM,IAAI;AACtB,cAAU,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;;IAErC;GAEM,IACX;AAGL,QAAO,SACL,oBAACC;EACC,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;EAClE,kBAAgB;EACT;EAEN;GACW,GAEd,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;EAClE,kBAAgB;EACX;YAEL,oBAACC,2BAAkB;GAAS,OAAO;GAChC;IAC0B;GACzB"}
+{"version":3,"file":"list.js","names":["ToastQueue","useEmit","Button","ToastList","ToastRegion","ToastStateContext"],"sources":["../../../src/components/notice/list.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 { useBus } from '@accelint/bus/react';\nimport { uuid } from '@accelint/core';\nimport { useToastRegion } from '@react-aria/toast';\nimport { useToastQueue } from '@react-stately/toast';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  composeRenderProps,\n  type QueuedToast,\n  UNSTABLE_ToastList as ToastList,\n  UNSTABLE_ToastQueue as ToastQueue,\n  UNSTABLE_ToastRegion as ToastRegion,\n  UNSTABLE_ToastStateContext as ToastStateContext,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Notice } from './';\nimport { NoticeEventTypes } from './events';\nimport styles from './styles.module.css';\nimport { matchesMetadata } from './utils';\nimport type {\n  NoticeActionEvent,\n  NoticeContent,\n  NoticeDequeueEvent,\n  NoticeListProps,\n  NoticeQueueEvent,\n} from './types';\n\n/**\n * NoticeList - Queue manager for displaying multiple notices\n *\n * Manages a FIFO queue of notices with automatic timeout and dismissal.\n * New notices push out older ones when the limit is reached.\n * Uses event-driven communication via the bus system.\n *\n * @example\n * ```tsx\n * <NoticeList\n *   aria-label=\"notifications\"\n *   placement=\"top right\"\n *   limit={3}\n * />\n * ```\n *\n * @param props - {@link NoticeListProps}\n * @param props.id - Unique identifier for targeting notices to this list.\n * @param props.classNames - CSS class names for list elements.\n * @param props.defaultColor - Default color for notices without explicit color.\n * @param props.defaultTimeout - Default timeout for notices without explicit timeout.\n * @param props.hideClearAll - Whether to hide the \"Clear All\" button.\n * @param props.limit - Maximum number of visible notices.\n * @param props.global - Whether to use global ToastRegion for portal rendering.\n * @param props.placement - Position of the notice list on screen.\n * @param props.size - Size variant for notices in the list.\n * @returns The rendered NoticeList component.\n */\nexport function NoticeList({\n  id,\n  classNames,\n  defaultColor,\n  defaultTimeout,\n  hideClearAll,\n  limit = 3,\n  global,\n  placement,\n  size = 'medium',\n  ...rest\n}: NoticeListProps) {\n  const queue = useMemo(\n    () => new ToastQueue<NoticeContent>({ maxVisibleToasts: limit }),\n    [limit],\n  );\n  const state = useToastQueue(queue);\n\n  const [hasNotices, setHasNotices] = useState(false);\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(rest, queue, ref);\n\n  const { useEmit, useOn } = useBus<\n    NoticeQueueEvent | NoticeDequeueEvent | NoticeActionEvent\n  >();\n  const emitActionPrimary = useEmit(NoticeEventTypes.actionPrimary);\n  const emitActionSecondary = useEmit(NoticeEventTypes.actionSecondary);\n  const emitClose = useEmit(NoticeEventTypes.close);\n\n  useOn(NoticeEventTypes.queue, (data) => {\n    if ((id && data.payload.target === id) || !id) {\n      const timeout = defaultTimeout ?? data.payload.timeout;\n      queue.add(\n        {\n          ...data.payload,\n          id: data.payload.id || uuid(),\n          color: defaultColor || data.payload.color,\n        },\n        {\n          timeout,\n        },\n      );\n      if (timeout) {\n        queue.resumeAll();\n      }\n    }\n  });\n\n  useOn(NoticeEventTypes.dequeue, (data) => {\n    // @ts-expect-error : queue.queue exists, but is not currently documented\n    const queuedNotices = queue.queue;\n\n    const dequeue = queuedNotices.filter((toast: QueuedToast<NoticeContent>) =>\n      matchesMetadata(data.payload, toast.content),\n    );\n\n    if (dequeue.length && dequeue.length === queuedNotices.length) {\n      queue.clear();\n    } else {\n      for (const toast of dequeue) {\n        queue.close(toast.key);\n      }\n    }\n  });\n\n  useEffect(() => {\n    queue.subscribe(() => {\n      setHasNotices(queue.visibleToasts.length > 0);\n    });\n  });\n\n  const children = (\n    <>\n      {!hideClearAll && hasNotices && (\n        <Button\n          className={composeRenderProps(\n            classNames?.button,\n            (className) => className ?? '',\n          )}\n          variant='outline'\n          onPress={queue.clear}\n        >\n          Clear All\n        </Button>\n      )}\n      <ToastList\n        className={composeRenderProps(classNames?.list, (className) =>\n          clsx(styles.list, className),\n        )}\n      >\n        {({ toast }: { toast: QueuedToast<NoticeContent> }) => (\n          <Notice\n            {...toast.content}\n            key={toast.key}\n            showClose={\n              !(\n                toast.timeout &&\n                toast.content.primary &&\n                toast.content.secondary\n              )\n            }\n            classNames={classNames?.notice}\n            size={size}\n            onPrimaryAction={() => emitActionPrimary({ id: toast.content.id })}\n            onSecondaryAction={() =>\n              emitActionSecondary({ id: toast.content.id })\n            }\n            onClose={() => {\n              toast.onClose?.();\n              queue.close(toast.key);\n              emitClose({ id: toast.content.id });\n            }}\n          />\n        )}\n      </ToastList>\n    </>\n  );\n\n  return global ? (\n    <ToastRegion\n      className={clsx('group/region', styles.region, classNames?.region)}\n      data-placement={placement}\n      queue={queue}\n    >\n      {children}\n    </ToastRegion>\n  ) : (\n    <div\n      {...regionProps}\n      className={clsx('group/region', styles.region, classNames?.region)}\n      data-placement={placement}\n      ref={ref}\n    >\n      <ToastStateContext.Provider value={state}>\n        {children}\n      </ToastStateContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,SAAgB,WAAW,EACzB,IACA,YACA,cACA,gBACA,cACA,QAAQ,GACR,QACA,WACA,OAAO,UACP,GAAG,QACe;CAClB,MAAM,QAAQ,cACN,IAAIA,oBAA0B,EAAE,kBAAkB,OAAO,CAAC,EAChE,CAAC,MAAM,CACR;CACD,MAAM,QAAQ,cAAc,MAAM;CAElC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,MAAM,OAAO,KAAK;CACxB,MAAM,EAAE,gBAAgB,eAAe,MAAM,OAAO,IAAI;CAExD,MAAM,EAAE,oBAAS,mBAAU,QAExB;CACH,MAAM,oBAAoBC,UAAQ,iBAAiB,cAAc;CACjE,MAAM,sBAAsBA,UAAQ,iBAAiB,gBAAgB;CACrE,MAAM,YAAYA,UAAQ,iBAAiB,MAAM;AAEjD,SAAM,iBAAiB,QAAQ,SAAS;AACtC,MAAK,MAAM,KAAK,QAAQ,WAAW,MAAO,CAAC,IAAI;GAC7C,MAAM,UAAU,kBAAkB,KAAK,QAAQ;AAC/C,SAAM,IACJ;IACE,GAAG,KAAK;IACR,IAAI,KAAK,QAAQ,MAAM,MAAM;IAC7B,OAAO,gBAAgB,KAAK,QAAQ;IACrC,EACD,EACE,SACD,CACF;AACD,OAAI,QACF,OAAM,WAAW;;GAGrB;AAEF,SAAM,iBAAiB,UAAU,SAAS;EAExC,MAAM,gBAAgB,MAAM;EAE5B,MAAM,UAAU,cAAc,QAAQ,UACpC,gBAAgB,KAAK,SAAS,MAAM,QAAQ,CAC7C;AAED,MAAI,QAAQ,UAAU,QAAQ,WAAW,cAAc,OACrD,OAAM,OAAO;MAEb,MAAK,MAAM,SAAS,QAClB,OAAM,MAAM,MAAM,IAAI;GAG1B;AAEF,iBAAgB;AACd,QAAM,gBAAgB;AACpB,iBAAc,MAAM,cAAc,SAAS,EAAE;IAC7C;GACF;CAEF,MAAM,WACJ,8CACG,CAAC,gBAAgB,cAChB,oBAACC;EACC,WAAW,mBACT,YAAY,SACX,cAAc,aAAa,GAC7B;EACD,SAAQ;EACR,SAAS,MAAM;YAChB;GAEQ,EAEX,oBAACC;EACC,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,OAAO,MAAM,UAAU,CAC7B;aAEC,EAAE,YACF,8BAAC;GACC,GAAI,MAAM;GACV,KAAK,MAAM;GACX,WACE,EACE,MAAM,WACN,MAAM,QAAQ,WACd,MAAM,QAAQ;GAGlB,YAAY,YAAY;GAClB;GACN,uBAAuB,kBAAkB,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;GAClE,yBACE,oBAAoB,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;GAE/C,eAAe;AACb,UAAM,WAAW;AACjB,UAAM,MAAM,MAAM,IAAI;AACtB,cAAU,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;;IAErC;GAEM,IACX;AAGL,QAAO,SACL,oBAACC;EACC,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;EAClE,kBAAgB;EACT;EAEN;GACW,GAEd,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;EAClE,kBAAgB;EACX;YAEL,oBAACC,2BAAkB;GAAS,OAAO;GAChC;IAC0B;GACzB"}

package/dist/components/notice/notice-icon.d.ts

@@ -12,13 +12,33 @@
 
 import { NoticeIconProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime188 from "react/jsx-runtime";
 
 //#region src/components/notice/notice-icon.d.ts
+
+/**
+ * NoticeIcon - Color-mapped icon for Notice components
+ *
+ * Automatically renders the appropriate icon based on color variant:
+ * - info/advisory: Information icon
+ * - normal: Success icon
+ * - serious: Warning icon
+ * - critical: Problem icon
+ *
+ * @example
+ * ```tsx
+ * <NoticeIcon color="serious" size="small" />
+ * ```
+ *
+ * @param props - {@link NoticeIconProps}
+ * @param props.color - Color variant determining which icon to display.
+ * @param props.size - Size of the icon.
+ * @returns The rendered NoticeIcon component.
+ */
 declare function NoticeIcon({
   color,
   size
-}: NoticeIconProps): react_jsx_runtime70.JSX.Element;
+}: NoticeIconProps): react_jsx_runtime188.JSX.Element;
 //#endregion
 export { NoticeIcon };
 //# sourceMappingURL=notice-icon.d.ts.map

package/dist/components/notice/notice-icon.js

@@ -16,9 +16,31 @@
 import { Icon } from "../icon/index.js";
 import "client-only";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Information, Problem, Success, Warning } from "@accelint/icons";
+import Information from "@accelint/icons/information";
+import Problem from "@accelint/icons/problem";
+import Success from "@accelint/icons/success";
+import Warning from "@accelint/icons/warning";
 
 //#region src/components/notice/notice-icon.tsx
+/**
+* NoticeIcon - Color-mapped icon for Notice components
+*
+* Automatically renders the appropriate icon based on color variant:
+* - info/advisory: Information icon
+* - normal: Success icon
+* - serious: Warning icon
+* - critical: Problem icon
+*
+* @example
+* ```tsx
+* <NoticeIcon color="serious" size="small" />
+* ```
+*
+* @param props - {@link NoticeIconProps}
+* @param props.color - Color variant determining which icon to display.
+* @param props.size - Size of the icon.
+* @returns The rendered NoticeIcon component.
+*/
 function NoticeIcon({ color = "info", size }) {
 	return /* @__PURE__ */ jsxs(Icon, {
 		size: size === "small" ? "medium" : "large",

package/dist/components/notice/notice-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice-icon.js","names":[],"sources":["../../../src/components/notice/notice-icon.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 { Information, Problem, Success, Warning } from '@accelint/icons';\nimport { Icon } from '../icon';\nimport type { NoticeIconProps } from './types';\n\nexport function NoticeIcon({ color = 'info', size }: NoticeIconProps) {\n  return (\n    <Icon size={size === 'small' ? 'medium' : 'large'}>\n      {color === 'info' && <Information />}\n      {color === 'advisory' && <Information />}\n      {color === 'normal' && <Success />}\n      {color === 'serious' && <Warning />}\n      {color === 'critical' && <Problem />}\n    </Icon>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,WAAW,EAAE,QAAQ,QAAQ,QAAyB;AACpE,QACE,qBAAC;EAAK,MAAM,SAAS,UAAU,WAAW;;GACvC,UAAU,UAAU,oBAAC,gBAAc;GACnC,UAAU,cAAc,oBAAC,gBAAc;GACvC,UAAU,YAAY,oBAAC,YAAU;GACjC,UAAU,aAAa,oBAAC,YAAU;GAClC,UAAU,cAAc,oBAAC,YAAU;;GAC/B"}
+{"version":3,"file":"notice-icon.js","names":[],"sources":["../../../src/components/notice/notice-icon.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';\n\nimport Information from '@accelint/icons/information';\nimport Problem from '@accelint/icons/problem';\nimport Success from '@accelint/icons/success';\nimport Warning from '@accelint/icons/warning';\nimport { Icon } from '../icon';\nimport type { NoticeIconProps } from './types';\n\n/**\n * NoticeIcon - Color-mapped icon for Notice components\n *\n * Automatically renders the appropriate icon based on color variant:\n * - info/advisory: Information icon\n * - normal: Success icon\n * - serious: Warning icon\n * - critical: Problem icon\n *\n * @example\n * ```tsx\n * <NoticeIcon color=\"serious\" size=\"small\" />\n * ```\n *\n * @param props - {@link NoticeIconProps}\n * @param props.color - Color variant determining which icon to display.\n * @param props.size - Size of the icon.\n * @returns The rendered NoticeIcon component.\n */\nexport function NoticeIcon({ color = 'info', size }: NoticeIconProps) {\n  return (\n    <Icon size={size === 'small' ? 'medium' : 'large'}>\n      {color === 'info' && <Information />}\n      {color === 'advisory' && <Information />}\n      {color === 'normal' && <Success />}\n      {color === 'serious' && <Warning />}\n      {color === 'critical' && <Problem />}\n    </Icon>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,WAAW,EAAE,QAAQ,QAAQ,QAAyB;AACpE,QACE,qBAAC;EAAK,MAAM,SAAS,UAAU,WAAW;;GACvC,UAAU,UAAU,oBAAC,gBAAc;GACnC,UAAU,cAAc,oBAAC,gBAAc;GACvC,UAAU,YAAY,oBAAC,YAAU;GACjC,UAAU,aAAa,oBAAC,YAAU;GAClC,UAAU,cAAc,oBAAC,YAAU;;GAC/B"}

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

@@ -17,65 +17,125 @@ import { Payload, StructuredCloneableData } from "@accelint/bus";
 import { UniqueId } from "@accelint/core";
 
 //#region src/components/notice/types.d.ts
+/**
+ * Color variant for notices indicating severity level.
+ */
 type NoticeColor = 'info' | 'advisory' | 'normal' | 'serious' | 'critical';
 type ActionButtonProps = Pick<ButtonProps$1, 'color' | 'variant'> & {
   children: string;
 };
+/**
+ * Data structure for notice content in the queue.
+ */
 type NoticeContent = {
+  /** Unique identifier for the notice. */
   id: UniqueId;
+  /** Message text to display. */
   message: string;
+  /** Color variant indicating severity. */
   color?: NoticeColor;
+  /** Primary action button configuration. */
   primary?: ActionButtonProps;
+  /** Secondary action button configuration. */
   secondary?: ActionButtonProps;
+  /** Auto-dismiss timeout in milliseconds. */
   timeout?: number;
+  /** Target NoticeList ID for routing. */
   target?: UniqueId;
+  /** Custom metadata for filtering and matching. */
   metadata?: Record<string, StructuredCloneableData>;
 };
+/**
+ * Props for the NoticeIcon component.
+ */
 type NoticeIconProps = {
+  /** Color variant determining which icon to display. */
   color?: NoticeColor;
+  /** Size of the icon. */
   size: 'small' | 'medium';
 };
+/**
+ * Props for the NoticeList component.
+ */
 type NoticeListProps = {
+  /** Unique identifier for targeting notices to this list. */
   id?: UniqueId;
+  /** Position of the notice list on screen. */
   placement?: 'top left' | 'top' | 'top right' | 'right' | 'bottom right' | 'bottom' | 'bottom left' | 'left';
+  /** Maximum number of visible notices. */
   limit?: number;
+  /** Default color for notices without explicit color. */
   defaultColor?: NoticeColor;
+  /** Default timeout for notices without explicit timeout. */
   defaultTimeout?: number;
+  /** Whether to hide the "Clear All" button. */
   hideClearAll?: boolean;
+  /** Size variant for notices in the list. */
   size?: 'small' | 'medium';
+  /** Whether to use global ToastRegion for portal rendering. */
   global?: boolean;
+  /** CSS class names for list elements. */
   classNames?: {
+    /** Class name for the region container. */
     region?: string;
+    /** Class name for the toast list. */
     list?: ToastListProps<NoticeContent>['className'];
+    /** Class name for the clear all button. */
     button?: ButtonProps$1['className'];
+    /** Class names for individual notices. */
     notice?: NoticeProps['classNames'];
   };
 };
+/**
+ * Props for the Notice component.
+ */
 type NoticeProps = Omit<NoticeContent, 'metadata' | 'timeout' | 'target'> & {
+  /** Unique identifier for the notice. */
   id: UniqueId;
+  /** CSS class names for notice elements. */
   classNames?: {
+    /** Class name for the notice container. */
     notice?: string;
+    /** Class name for the content wrapper. */
     content?: string;
+    /** Class name for the message text. */
     message?: string;
+    /** Class name for the actions container. */
     actions?: string;
   };
+  /** Whether to hide the status icon. */
   hideIcon?: boolean;
+  /** Whether to show the close button. */
   showClose?: boolean;
+  /** Whether to close the notice when an action button is pressed. */
   shouldCloseOnAction?: boolean;
+  /** Size variant for the notice. */
   size?: 'small' | 'medium';
+  /** Callback when primary action button is pressed. */
   onPrimaryAction?: () => void;
+  /** Callback when secondary action button is pressed. */
   onSecondaryAction?: () => void;
+  /** Callback when the notice is closed. */
   onClose?: () => void;
 };
+/**
+ * Event payload for queuing a new notice via the bus.
+ */
 type NoticeQueueEvent = Payload<typeof NoticeEventTypes.queue, Omit<NoticeContent, 'id'> & {
   id?: UniqueId;
 }>;
+/**
+ * Event payload for removing notices from the queue via the bus.
+ */
 type NoticeDequeueEvent = Payload<typeof NoticeEventTypes.dequeue, {
   id?: UniqueId;
   target?: UniqueId;
   color?: NoticeColor;
   metadata?: Record<string, StructuredCloneableData>;
 }>;
+/**
+ * Event payload for notice action events via the bus.
+ */
 type NoticeActionEvent = Payload<typeof NoticeEventTypes.actionPrimary | typeof NoticeEventTypes.actionSecondary | typeof NoticeEventTypes.close, {
   id: UniqueId;
 }>;

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

@@ -13,6 +13,14 @@
 import "client-only";
 
 //#region src/components/notice/utils.d.ts
+/**
+ * Checks if a payload matches metadata on a notice.
+ * Used for filtering notices during dequeue operations.
+ *
+ * @param payload - Object with key-value pairs to match against.
+ * @param metadata - Metadata object from a notice to check.
+ * @returns True if all payload entries match corresponding metadata entries.
+ */
 declare function matchesMetadata(payload: Record<string, unknown>, metadata?: Record<string, unknown>): boolean;
 //#endregion
 export { matchesMetadata };

package/dist/components/notice/utils.js

@@ -17,6 +17,14 @@ import "client-only";
 import { isEqual } from "radashi";
 
 //#region src/components/notice/utils.ts
+/**
+* Checks if a payload matches metadata on a notice.
+* Used for filtering notices during dequeue operations.
+*
+* @param payload - Object with key-value pairs to match against.
+* @param metadata - Metadata object from a notice to check.
+* @returns True if all payload entries match corresponding metadata entries.
+*/
 function matchesMetadata(payload, metadata) {
 	if (!metadata) return false;
 	return Object.entries(payload).every(([key, value]) => key in metadata && isEqual(metadata[key], value));

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/notice/utils.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'use client';\n\nimport 'client-only';\nimport { isEqual } from 'radashi';\n\nexport function matchesMetadata(\n  payload: Record<string, unknown>,\n  metadata?: Record<string, unknown>,\n) {\n  if (!metadata) {\n    return false;\n  }\n\n  return Object.entries(payload).every(\n    ([key, value]) => key in metadata && isEqual(metadata[key], value),\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,gBACd,SACA,UACA;AACA,KAAI,CAAC,SACH,QAAO;AAGT,QAAO,OAAO,QAAQ,QAAQ,CAAC,OAC5B,CAAC,KAAK,WAAW,OAAO,YAAY,QAAQ,SAAS,MAAM,MAAM,CACnE"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/notice/utils.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'use client';\n\nimport 'client-only';\nimport { isEqual } from 'radashi';\n\n/**\n * Checks if a payload matches metadata on a notice.\n * Used for filtering notices during dequeue operations.\n *\n * @param payload - Object with key-value pairs to match against.\n * @param metadata - Metadata object from a notice to check.\n * @returns True if all payload entries match corresponding metadata entries.\n */\nexport function matchesMetadata(\n  payload: Record<string, unknown>,\n  metadata?: Record<string, unknown>,\n) {\n  if (!metadata) {\n    return false;\n  }\n\n  return Object.entries(payload).every(\n    ([key, value]) => key in metadata && isEqual(metadata[key], value),\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,gBACd,SACA,UACA;AACA,KAAI,CAAC,SACH,QAAO;AAGT,QAAO,OAAO,QAAQ,QAAQ,CAAC,OAC5B,CAAC,KAAK,WAAW,OAAO,YAAY,QAAQ,SAAS,MAAM,MAAM,CACnE"}

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

@@ -12,11 +12,12 @@
 
 import { OptionsDataItem, OptionsProps } from "./types.js";
 import "client-only";
-import * as react28 from "react";
+import * as react47 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/options/context.d.ts
-declare const OptionsContext: react28.Context<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>;
+/** Context for sharing Options props with nested components */
+declare const OptionsContext: react47.Context<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>;
 //#endregion
 export { OptionsContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/options/context.js

@@ -17,6 +17,7 @@ import "client-only";
 import { createContext } from "react";
 
 //#region src/components/options/context.tsx
+/** Context for sharing Options props with nested components */
 const OptionsContext = createContext(null);
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/options/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 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { OptionsDataItem, OptionsProps } from './types';\n\nexport const OptionsContext =\n  createContext<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>(\n    null,\n  );\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,iBACX,cACE,KACD"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/options/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 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { OptionsDataItem, OptionsProps } from './types';\n\n/** Context for sharing Options props with nested components */\nexport const OptionsContext =\n  createContext<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>(\n    null,\n  );\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,iBACX,cACE,KACD"}

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

@@ -12,7 +12,7 @@
 
 import { OptionsDataItem, OptionsProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime117 from "react/jsx-runtime";
+import * as react_jsx_runtime101 from "react/jsx-runtime";
 
 //#region src/components/options/index.d.ts
 
@@ -24,6 +24,7 @@ import * as react_jsx_runtime117 from "react/jsx-runtime";
  * dropdown lists, menu items, or any selectable list interface.
  *
  * @example
+ * ```tsx
  * // Basic options list
  * <Options>
  *   <OptionsItem>
@@ -33,8 +34,10 @@ import * as react_jsx_runtime117 from "react/jsx-runtime";
  *     <OptionsItemLabel>Option 2</OptionsItemLabel>
  *   </OptionsItem>
  * </Options>
+ * ```
  *
  * @example
+ * ```tsx
  * // Options with descriptions and icons
  * <Options>
  *   <OptionsItem>
@@ -45,8 +48,10 @@ import * as react_jsx_runtime117 from "react/jsx-runtime";
  *     </OptionsItemContent>
  *   </OptionsItem>
  * </Options>
+ * ```
  *
  * @example
+ * ```tsx
  * // Sectioned options
  * <Options>
  *   <OptionsSection header="Recent">
@@ -56,11 +61,19 @@ import * as react_jsx_runtime117 from "react/jsx-runtime";
  *     <OptionsItem>All Items 1</OptionsItem>
  *   </OptionsSection>
  * </Options>
+ * ```
+ *
+ * @param props - {@link OptionsProps}
+ * @param props.ref - Forwarded ref to the underlying ListBox element.
+ * @param props.children - Options items and sections to render.
+ * @param props.className - Optional CSS class name.
+ * @param props.size - Size variant for the options list.
+ * @returns The rendered Options component.
  */
 declare function Options<T extends OptionsDataItem>({
   ref,
   ...props
-}: OptionsProps<T>): react_jsx_runtime117.JSX.Element;
+}: OptionsProps<T>): react_jsx_runtime101.JSX.Element;
 //#endregion
 export { Options };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/options/index.js

@@ -29,6 +29,7 @@ import styles from "./styles.module.css";
 * dropdown lists, menu items, or any selectable list interface.
 *
 * @example
+* ```tsx
 * // Basic options list
 * <Options>
 *   <OptionsItem>
@@ -38,8 +39,10 @@ import styles from "./styles.module.css";
 *     <OptionsItemLabel>Option 2</OptionsItemLabel>
 *   </OptionsItem>
 * </Options>
+* ```
 *
 * @example
+* ```tsx
 * // Options with descriptions and icons
 * <Options>
 *   <OptionsItem>
@@ -50,8 +53,10 @@ import styles from "./styles.module.css";
 *     </OptionsItemContent>
 *   </OptionsItem>
 * </Options>
+* ```
 *
 * @example
+* ```tsx
 * // Sectioned options
 * <Options>
 *   <OptionsSection header="Recent">
@@ -61,6 +66,14 @@ import styles from "./styles.module.css";
 *     <OptionsItem>All Items 1</OptionsItem>
 *   </OptionsSection>
 * </Options>
+* ```
+*
+* @param props - {@link OptionsProps}
+* @param props.ref - Forwarded ref to the underlying ListBox element.
+* @param props.children - Options items and sections to render.
+* @param props.className - Optional CSS class name.
+* @param props.size - Size variant for the options list.
+* @returns The rendered Options component.
 */
 function Options({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, OptionsContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["className"],"sources":["../../../src/components/options/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 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  composeRenderProps,\n  ListBox,\n  useContextProps,\n} from 'react-aria-components';\nimport { OptionsContext } from './context';\nimport styles from './styles.module.css';\nimport type { OptionsDataItem, OptionsProps } from './types';\n\n/**\n * Options - A flexible list component for selectable items with rich content\n *\n * Provides accessible list functionality with support for selection, sections,\n * and rich item content including labels, descriptions, and icons. Perfect for\n * dropdown lists, menu items, or any selectable list interface.\n *\n * @example\n * // Basic options list\n * <Options>\n *   <OptionsItem>\n *     <OptionsItemLabel>Option 1</OptionsItemLabel>\n *   </OptionsItem>\n *   <OptionsItem>\n *     <OptionsItemLabel>Option 2</OptionsItemLabel>\n *   </OptionsItem>\n * </Options>\n *\n * @example\n * // Options with descriptions and icons\n * <Options>\n *   <OptionsItem>\n *     <Icon><User /></Icon>\n *     <OptionsItemContent>\n *       <OptionsItemLabel>John Doe</OptionsItemLabel>\n *       <OptionsItemDescription>Senior Developer</OptionsItemDescription>\n *     </OptionsItemContent>\n *   </OptionsItem>\n * </Options>\n *\n * @example\n * // Sectioned options\n * <Options>\n *   <OptionsSection header=\"Recent\">\n *     <OptionsItem>Recent Item 1</OptionsItem>\n *   </OptionsSection>\n *   <OptionsSection header=\"All Items\">\n *     <OptionsItem>All Items 1</OptionsItem>\n *   </OptionsSection>\n * </Options>\n */\nexport function Options<T extends OptionsDataItem>({\n  ref,\n  ...props\n}: OptionsProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, OptionsContext);\n\n  const { children, className, size, ...rest } = props;\n\n  return (\n    <ListBox<T>\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(className, (className) =>\n        clsx('group/options', styles.list, className),\n      )}\n      data-size={size}\n    >\n      {children}\n    </ListBox>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,QAAmC,EACjD,KACA,GAAG,SACe;AAClB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,eAAe;CAElE,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,SAAS;AAE/C,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,iBAAiB,OAAO,MAAMA,YAAU,CAC9C;EACD,aAAW;EAEV;GACO"}
+{"version":3,"file":"index.js","names":["className"],"sources":["../../../src/components/options/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 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  composeRenderProps,\n  ListBox,\n  useContextProps,\n} from 'react-aria-components';\nimport { OptionsContext } from './context';\nimport styles from './styles.module.css';\nimport type { OptionsDataItem, OptionsProps } from './types';\n\n/**\n * Options - A flexible list component for selectable items with rich content\n *\n * Provides accessible list functionality with support for selection, sections,\n * and rich item content including labels, descriptions, and icons. Perfect for\n * dropdown lists, menu items, or any selectable list interface.\n *\n * @example\n * ```tsx\n * // Basic options list\n * <Options>\n *   <OptionsItem>\n *     <OptionsItemLabel>Option 1</OptionsItemLabel>\n *   </OptionsItem>\n *   <OptionsItem>\n *     <OptionsItemLabel>Option 2</OptionsItemLabel>\n *   </OptionsItem>\n * </Options>\n * ```\n *\n * @example\n * ```tsx\n * // Options with descriptions and icons\n * <Options>\n *   <OptionsItem>\n *     <Icon><User /></Icon>\n *     <OptionsItemContent>\n *       <OptionsItemLabel>John Doe</OptionsItemLabel>\n *       <OptionsItemDescription>Senior Developer</OptionsItemDescription>\n *     </OptionsItemContent>\n *   </OptionsItem>\n * </Options>\n * ```\n *\n * @example\n * ```tsx\n * // Sectioned options\n * <Options>\n *   <OptionsSection header=\"Recent\">\n *     <OptionsItem>Recent Item 1</OptionsItem>\n *   </OptionsSection>\n *   <OptionsSection header=\"All Items\">\n *     <OptionsItem>All Items 1</OptionsItem>\n *   </OptionsSection>\n * </Options>\n * ```\n *\n * @param props - {@link OptionsProps}\n * @param props.ref - Forwarded ref to the underlying ListBox element.\n * @param props.children - Options items and sections to render.\n * @param props.className - Optional CSS class name.\n * @param props.size - Size variant for the options list.\n * @returns The rendered Options component.\n */\nexport function Options<T extends OptionsDataItem>({\n  ref,\n  ...props\n}: OptionsProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, OptionsContext);\n\n  const { children, className, size, ...rest } = props;\n\n  return (\n    <ListBox<T>\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(className, (className) =>\n        clsx('group/options', styles.list, className),\n      )}\n      data-size={size}\n    >\n      {children}\n    </ListBox>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,SAAgB,QAAmC,EACjD,KACA,GAAG,SACe;AAClB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,eAAe;CAElE,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,SAAS;AAE/C,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,iBAAiB,OAAO,MAAMA,YAAU,CAC9C;EACD,aAAW;EAEV;GACO"}

package/dist/components/options/item-content.d.ts

@@ -11,13 +11,33 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime118 from "react/jsx-runtime";
+import * as react_jsx_runtime102 from "react/jsx-runtime";
 
 //#region src/components/options/item-content.d.ts
+
+/**
+ * OptionsItemContent - Container for label and description within an item
+ *
+ * Use when an item needs both a label and description.
+ *
+ * @example
+ * ```tsx
+ * <OptionsItem>
+ *   <OptionsItemContent>
+ *     <OptionsItemLabel>Option Name</OptionsItemLabel>
+ *     <OptionsItemDescription>Description text</OptionsItemDescription>
+ *   </OptionsItemContent>
+ * </OptionsItem>
+ * ```
+ *
+ * @param props - TextProps from react-aria-components.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered OptionsItemContent component.
+ */
 declare function OptionsItemContent({
   className,
   ...rest
-}: TextProps): react_jsx_runtime118.JSX.Element;
+}: TextProps): react_jsx_runtime102.JSX.Element;
 //#endregion
 export { OptionsItemContent };
 //# sourceMappingURL=item-content.d.ts.map

package/dist/components/options/item-content.js

@@ -16,6 +16,25 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/options/item-content.tsx
+/**
+* OptionsItemContent - Container for label and description within an item
+*
+* Use when an item needs both a label and description.
+*
+* @example
+* ```tsx
+* <OptionsItem>
+*   <OptionsItemContent>
+*     <OptionsItemLabel>Option Name</OptionsItemLabel>
+*     <OptionsItemDescription>Description text</OptionsItemDescription>
+*   </OptionsItemContent>
+* </OptionsItem>
+* ```
+*
+* @param props - TextProps from react-aria-components.
+* @param props.className - Optional CSS class name.
+* @returns The rendered OptionsItemContent component.
+*/
 function OptionsItemContent({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,

package/dist/components/options/item-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-content.js","names":[],"sources":["../../../src/components/options/item-content.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { TextProps } from 'react-aria-components';\n\nexport function OptionsItemContent({ className, ...rest }: TextProps) {\n  return <div {...rest} className={clsx(styles.content, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,QAAmB;AACpE,QAAO,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,SAAS,UAAU;GAAI"}
+{"version":3,"file":"item-content.js","names":[],"sources":["../../../src/components/options/item-content.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { TextProps } from 'react-aria-components';\n\n/**\n * OptionsItemContent - Container for label and description within an item\n *\n * Use when an item needs both a label and description.\n *\n * @example\n * ```tsx\n * <OptionsItem>\n *   <OptionsItemContent>\n *     <OptionsItemLabel>Option Name</OptionsItemLabel>\n *     <OptionsItemDescription>Description text</OptionsItemDescription>\n *   </OptionsItemContent>\n * </OptionsItem>\n * ```\n *\n * @param props - TextProps from react-aria-components.\n * @param props.className - Optional CSS class name.\n * @returns The rendered OptionsItemContent component.\n */\nexport function OptionsItemContent({ className, ...rest }: TextProps) {\n  return <div {...rest} className={clsx(styles.content, className)} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,QAAmB;AACpE,QAAO,oBAAC;EAAI,GAAI;EAAM,WAAW,KAAK,OAAO,SAAS,UAAU;GAAI"}

package/dist/components/options/item-description.d.ts

@@ -11,13 +11,25 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime102 from "react/jsx-runtime";
+import * as react_jsx_runtime104 from "react/jsx-runtime";
 
 //#region src/components/options/item-description.d.ts
+/**
+ * OptionsItemDescription - Secondary text description for an options item
+ *
+ * @example
+ * ```tsx
+ * <OptionsItemDescription>Additional details about this option</OptionsItemDescription>
+ * ```
+ *
+ * @param props - TextProps from react-aria-components.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered OptionsItemDescription component.
+ */
 declare function OptionsItemDescription({
   className,
   ...rest
-}: TextProps): react_jsx_runtime102.JSX.Element;
+}: TextProps): react_jsx_runtime104.JSX.Element;
 //#endregion
 export { OptionsItemDescription };
 //# sourceMappingURL=item-description.d.ts.map

package/dist/components/options/item-description.js

@@ -17,6 +17,18 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/options/item-description.tsx
+/**
+* OptionsItemDescription - Secondary text description for an options item
+*
+* @example
+* ```tsx
+* <OptionsItemDescription>Additional details about this option</OptionsItemDescription>
+* ```
+*
+* @param props - TextProps from react-aria-components.
+* @param props.className - Optional CSS class name.
+* @returns The rendered OptionsItemDescription component.
+*/
 function OptionsItemDescription({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Text, {
 		...rest,

package/dist/components/options/item-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-description.js","names":[],"sources":["../../../src/components/options/item-description.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 { Text } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { TextProps } from 'react-aria-components';\n\nexport function OptionsItemDescription({ className, ...rest }: TextProps) {\n  return (\n    <Text\n      {...rest}\n      slot='description'\n      className={clsx(styles.description, className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,uBAAuB,EAAE,WAAW,GAAG,QAAmB;AACxE,QACE,oBAAC;EACC,GAAI;EACJ,MAAK;EACL,WAAW,KAAK,OAAO,aAAa,UAAU;GAC9C"}
+{"version":3,"file":"item-description.js","names":[],"sources":["../../../src/components/options/item-description.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 { Text } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { TextProps } from 'react-aria-components';\n\n/**\n * OptionsItemDescription - Secondary text description for an options item\n *\n * @example\n * ```tsx\n * <OptionsItemDescription>Additional details about this option</OptionsItemDescription>\n * ```\n *\n * @param props - TextProps from react-aria-components.\n * @param props.className - Optional CSS class name.\n * @returns The rendered OptionsItemDescription component.\n */\nexport function OptionsItemDescription({ className, ...rest }: TextProps) {\n  return (\n    <Text\n      {...rest}\n      slot='description'\n      className={clsx(styles.description, className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,uBAAuB,EAAE,WAAW,GAAG,QAAmB;AACxE,QACE,oBAAC;EACC,GAAI;EACJ,MAAK;EACL,WAAW,KAAK,OAAO,aAAa,UAAU;GAC9C"}

package/dist/components/options/item-label.d.ts

@@ -11,13 +11,25 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime104 from "react/jsx-runtime";
+import * as react_jsx_runtime103 from "react/jsx-runtime";
 
 //#region src/components/options/item-label.d.ts
+/**
+ * OptionsItemLabel - Primary text label for an options item
+ *
+ * @example
+ * ```tsx
+ * <OptionsItemLabel>Option Name</OptionsItemLabel>
+ * ```
+ *
+ * @param props - TextProps from react-aria-components.
+ * @param props.className - Optional CSS class name.
+ * @returns The rendered OptionsItemLabel component.
+ */
 declare function OptionsItemLabel({
   className,
   ...rest
-}: TextProps): react_jsx_runtime104.JSX.Element;
+}: TextProps): react_jsx_runtime103.JSX.Element;
 //#endregion
 export { OptionsItemLabel };
 //# sourceMappingURL=item-label.d.ts.map

package/dist/components/options/item-label.js

@@ -17,6 +17,18 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/options/item-label.tsx
+/**
+* OptionsItemLabel - Primary text label for an options item
+*
+* @example
+* ```tsx
+* <OptionsItemLabel>Option Name</OptionsItemLabel>
+* ```
+*
+* @param props - TextProps from react-aria-components.
+* @param props.className - Optional CSS class name.
+* @returns The rendered OptionsItemLabel component.
+*/
 function OptionsItemLabel({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Text, {
 		...rest,