@accelint/design-toolkit 9.2.0 → 9.4.0

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

@@ -15,18 +15,51 @@ import { ComponentPropsWithRef, RefAttributes } from "react";
 import { ButtonRenderProps, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading } from "react-aria-components";
 
 //#region src/components/accordion/types.d.ts
+/**
+ * Style variant options for accordion components.
+ */
 type AccordionStyleVariants = {
+  /** Visual density variant: 'compact' for dense layouts, 'cozy' for spacious layouts. */
   variant?: 'compact' | 'cozy';
 };
+/**
+ * Props for the AccordionGroup component.
+ *
+ * Extends DisclosureGroup props with accordion-specific styling options.
+ */
 type AccordionGroupProps = DisclosureGroupProps & AccordionStyleVariants & RefAttributes<HTMLDivElement>;
+/**
+ * Props for the Accordion component.
+ *
+ * Extends Disclosure props with accordion-specific styling options.
+ */
 type AccordionProps = DisclosureProps & AccordionStyleVariants & RefAttributes<HTMLDivElement>;
+/**
+ * Props for the AccordionHeader component.
+ *
+ * Standard HTML header element props with ref support.
+ */
 type AccordionHeaderProps = ComponentPropsWithRef<'header'>;
+/**
+ * Props for the AccordionTrigger component.
+ *
+ * Extends Heading component props with custom className support for
+ * both the heading wrapper and the trigger button.
+ */
 type AccordionTriggerProps = Omit<ComponentPropsWithRef<typeof Heading>, 'className'> & {
+  /** Custom class names for sub-elements. */
   classNames?: {
+    /** Class name for the heading wrapper element. */
     heading?: string;
+    /** Class name or render props function for the trigger button. */
     trigger?: RenderPropsClassName<ButtonRenderProps>;
   };
 };
+/**
+ * Props for the AccordionPanel component.
+ *
+ * Extends DisclosurePanel props with ref support for the panel element.
+ */
 type AccordionPanelProps = DisclosurePanelProps & RefAttributes<HTMLDivElement>;
 //#endregion
 export { AccordionGroupProps, AccordionHeaderProps, AccordionPanelProps, AccordionProps, AccordionStyleVariants, AccordionTriggerProps };

package/dist/components/action-bar/index.d.ts

@@ -12,25 +12,54 @@
 
 import { ActionBarProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime99 from "react/jsx-runtime";
+import * as react_jsx_runtime154 from "react/jsx-runtime";
 
 //#region src/components/action-bar/index.d.ts
+
 /**
- * ActionBar - Container for icon action buttons
+ * Container for icon action buttons with consistent spacing and alignment.
+ * Commonly used in toolbars, editors, or command interfaces.
+ *
+ * Renders as a `<nav>` element and provides `variant="icon"` context to child buttons.
  *
- * A container component that displays a collection of action buttons (typically icon-only)
- * and provides consistent spacing and alignment for toolbar-style actions.
+ * @param props - The action bar props.
+ * @param props.className - Additional CSS class names for styling.
+ * @param props.elevation - Visual elevation style ('flat', 'overlay', or 'raised').
+ * @param props.size - Size of action buttons within the bar ('medium' or 'small').
+ * @param props.children - Action buttons to render within the bar.
+ * @returns The action bar navigation element.
  *
  * @example
+ * ```tsx
  * <ActionBar>
- *   <Button><Icon><Copy/></Icon></Button>
+ *   <Button><Icon><Copy /></Icon></Button>
+ *   <Button><Icon><Delete /></Icon></Button>
+ * </ActionBar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With ToggleButton
+ * <ActionBar>
+ *   <ToggleButton><Icon><Bold /></Icon></ToggleButton>
+ *   <ToggleButton><Icon><Italic /></Icon></ToggleButton>
+ * </ActionBar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Flat elevation for embedded contexts
+ * <ActionBar elevation="flat">
+ *   <Button><Icon><Copy /></Icon></Button>
  * </ActionBar>
+ * ```
  */
 declare function ActionBar({
   className,
+  elevation,
   size,
   ...rest
-}: ActionBarProps): react_jsx_runtime99.JSX.Element;
+}: ActionBarProps): react_jsx_runtime154.JSX.Element;
 //#endregion
 export { ActionBar };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/action-bar/index.js

@@ -22,17 +22,44 @@ import styles from "./styles.module.css";
 
 //#region src/components/action-bar/index.tsx
 /**
-* ActionBar - Container for icon action buttons
+* Container for icon action buttons with consistent spacing and alignment.
+* Commonly used in toolbars, editors, or command interfaces.
 *
-* A container component that displays a collection of action buttons (typically icon-only)
-* and provides consistent spacing and alignment for toolbar-style actions.
+* Renders as a `<nav>` element and provides `variant="icon"` context to child buttons.
+*
+* @param props - The action bar props.
+* @param props.className - Additional CSS class names for styling.
+* @param props.elevation - Visual elevation style ('flat', 'overlay', or 'raised').
+* @param props.size - Size of action buttons within the bar ('medium' or 'small').
+* @param props.children - Action buttons to render within the bar.
+* @returns The action bar navigation element.
+*
+* @example
+* ```tsx
+* <ActionBar>
+*   <Button><Icon><Copy /></Icon></Button>
+*   <Button><Icon><Delete /></Icon></Button>
+* </ActionBar>
+* ```
 *
 * @example
+* ```tsx
+* // With ToggleButton
 * <ActionBar>
-*   <Button><Icon><Copy/></Icon></Button>
+*   <ToggleButton><Icon><Bold /></Icon></ToggleButton>
+*   <ToggleButton><Icon><Italic /></Icon></ToggleButton>
+* </ActionBar>
+* ```
+*
+* @example
+* ```tsx
+* // Flat elevation for embedded contexts
+* <ActionBar elevation="flat">
+*   <Button><Icon><Copy /></Icon></Button>
 * </ActionBar>
+* ```
 */
-function ActionBar({ className, size = "medium", ...rest }) {
+function ActionBar({ className, elevation = "overlay", size = "medium", ...rest }) {
 	return /* @__PURE__ */ jsx(Provider, {
 		values: [[ButtonContext, {
 			size,
@@ -44,6 +71,7 @@ function ActionBar({ className, size = "medium", ...rest }) {
 		children: /* @__PURE__ */ jsx("nav", {
 			...rest,
 			className: clsx(styles.bar, className),
+			"data-elevation": elevation,
 			"data-size": size
 		})
 	});

package/dist/components/action-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/action-bar/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 { Provider } from 'react-aria-components';\nimport { ButtonContext, ToggleButtonContext } from '../button/context';\nimport styles from './styles.module.css';\nimport type { ActionBarProps } from './types';\n\n/**\n * ActionBar - Container for icon action buttons\n *\n * A container component that displays a collection of action buttons (typically icon-only)\n * and provides consistent spacing and alignment for toolbar-style actions.\n *\n * @example\n * <ActionBar>\n *   <Button><Icon><Copy/></Icon></Button>\n * </ActionBar>\n */\nexport function ActionBar({\n  className,\n  size = 'medium',\n  ...rest\n}: ActionBarProps) {\n  return (\n    <Provider\n      values={[\n        [ButtonContext, { size, variant: 'icon' }],\n        [ToggleButtonContext, { size, variant: 'icon' }],\n      ]}\n    >\n      <nav {...rest} className={clsx(styles.bar, className)} data-size={size} />\n    </Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,UAAU,EACxB,WACA,OAAO,UACP,GAAG,QACc;AACjB,QACE,oBAAC;EACC,QAAQ,CACN,CAAC,eAAe;GAAE;GAAM,SAAS;GAAQ,CAAC,EAC1C,CAAC,qBAAqB;GAAE;GAAM,SAAS;GAAQ,CAAC,CACjD;YAED,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,KAAK,UAAU;GAAE,aAAW;IAAQ;GACjE"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/action-bar/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 { Provider } from 'react-aria-components';\nimport { ButtonContext, ToggleButtonContext } from '../button/context';\nimport styles from './styles.module.css';\nimport type { ActionBarProps } from './types';\n\n/**\n * Container for icon action buttons with consistent spacing and alignment.\n * Commonly used in toolbars, editors, or command interfaces.\n *\n * Renders as a `<nav>` element and provides `variant=\"icon\"` context to child buttons.\n *\n * @param props - The action bar props.\n * @param props.className - Additional CSS class names for styling.\n * @param props.elevation - Visual elevation style ('flat', 'overlay', or 'raised').\n * @param props.size - Size of action buttons within the bar ('medium' or 'small').\n * @param props.children - Action buttons to render within the bar.\n * @returns The action bar navigation element.\n *\n * @example\n * ```tsx\n * <ActionBar>\n *   <Button><Icon><Copy /></Icon></Button>\n *   <Button><Icon><Delete /></Icon></Button>\n * </ActionBar>\n * ```\n *\n * @example\n * ```tsx\n * // With ToggleButton\n * <ActionBar>\n *   <ToggleButton><Icon><Bold /></Icon></ToggleButton>\n *   <ToggleButton><Icon><Italic /></Icon></ToggleButton>\n * </ActionBar>\n * ```\n *\n * @example\n * ```tsx\n * // Flat elevation for embedded contexts\n * <ActionBar elevation=\"flat\">\n *   <Button><Icon><Copy /></Icon></Button>\n * </ActionBar>\n * ```\n */\nexport function ActionBar({\n  className,\n  elevation = 'overlay',\n  size = 'medium',\n  ...rest\n}: ActionBarProps) {\n  return (\n    <Provider\n      values={[\n        [ButtonContext, { size, variant: 'icon' }],\n        [ToggleButtonContext, { size, variant: 'icon' }],\n      ]}\n    >\n      <nav\n        {...rest}\n        className={clsx(styles.bar, className)}\n        data-elevation={elevation}\n        data-size={size}\n      />\n    </Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,UAAU,EACxB,WACA,YAAY,WACZ,OAAO,UACP,GAAG,QACc;AACjB,QACE,oBAAC;EACC,QAAQ,CACN,CAAC,eAAe;GAAE;GAAM,SAAS;GAAQ,CAAC,EAC1C,CAAC,qBAAqB;GAAE;GAAM,SAAS;GAAQ,CAAC,CACjD;YAED,oBAAC;GACC,GAAI;GACJ,WAAW,KAAK,OAAO,KAAK,UAAU;GACtC,kBAAgB;GAChB,aAAW;IACX;GACO"}

package/dist/components/action-bar/styles.module.css

@@ -14,7 +14,15 @@
 
 @layer components.l1 {
   .bar {
-    @apply rounded-medium bg-surface-default shadow-elevation-overlay flex w-fit;
+    @apply rounded-medium bg-surface-default flex w-fit;
+
+    @variant elevation-overlay {
+      @apply shadow-elevation-overlay;
+    }
+
+    @variant elevation-raised {
+      @apply shadow-elevation-raised;
+    }
 
     @variant size-medium {
       @apply gap-s px-m py-s;

package/dist/components/action-bar/types.d.ts

@@ -13,7 +13,15 @@
 import { HTMLAttributes, PropsWithChildren } from "react";
 
 //#region src/components/action-bar/types.d.ts
+/**
+ * Props for the ActionBar component.
+ *
+ * Extends standard HTML div attributes with action bar-specific options.
+ */
 type ActionBarProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+  /** Visual elevation style: 'flat' for embedded, 'overlay' for floating, 'raised' for prominent. */
+  elevation?: 'flat' | 'overlay' | 'raised';
+  /** Size of action buttons within the bar. */
   size?: 'medium' | 'small';
 };
 //#endregion

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

@@ -13,16 +13,34 @@
 import { ProviderProps } from "../../lib/types.js";
 import { AvatarProps } from "./types.js";
 import "client-only";
-import * as react22 from "react";
+import * as react1 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime91 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/avatar/context.d.ts
-declare const AvatarContext: react22.Context<ContextValue<AvatarProps, HTMLSpanElement>>;
+/**
+ * React context for sharing avatar configuration across components.
+ */
+declare const AvatarContext: react1.Context<ContextValue<AvatarProps, HTMLSpanElement>>;
+/**
+ * Context provider for setting default props across multiple Avatar components.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the avatar context.
+ * @returns The avatar context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <AvatarProvider size="small">
+ *   <Avatar imageProps={{ alt: "User 1", src: "avatar1.jpg" }} />
+ *   <Avatar imageProps={{ alt: "User 2", src: "avatar2.jpg" }} />
+ * </AvatarProvider>
+ * ```
+ */
 declare function AvatarProvider({
   children,
   ...props
-}: ProviderProps<AvatarProps>): react_jsx_runtime91.JSX.Element;
+}: ProviderProps<AvatarProps>): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { AvatarContext, AvatarProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/avatar/context.js

@@ -18,7 +18,25 @@ import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/avatar/context.tsx
+/**
+* React context for sharing avatar configuration across components.
+*/
 const AvatarContext = createContext(null);
+/**
+* Context provider for setting default props across multiple Avatar components.
+*
+* @param props - The provider props.
+* @param props.children - Child components that will receive the avatar context.
+* @returns The avatar context provider wrapping children.
+*
+* @example
+* ```tsx
+* <AvatarProvider size="small">
+*   <Avatar imageProps={{ alt: "User 1", src: "avatar1.jpg" }} />
+*   <Avatar imageProps={{ alt: "User 2", src: "avatar2.jpg" }} />
+* </AvatarProvider>
+* ```
+*/
 function AvatarProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(AvatarContext.Provider, {
 		value: props,

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/avatar/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 type { ProviderProps } from '@/lib/types';\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { AvatarProps } from './types';\n\nexport const AvatarContext =\n  createContext<ContextValue<AvatarProps, HTMLSpanElement>>(null);\n\nexport function AvatarProvider({\n  children,\n  ...props\n}: ProviderProps<AvatarProps>) {\n  return (\n    <AvatarContext.Provider value={props}>{children}</AvatarContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,gBACX,cAA0D,KAAK;AAEjE,SAAgB,eAAe,EAC7B,UACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,cAAc;EAAS,OAAO;EAAQ;GAAkC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/avatar/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 type { ProviderProps } from '@/lib/types';\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { AvatarProps } from './types';\n\n/**\n * React context for sharing avatar configuration across components.\n */\nexport const AvatarContext =\n  createContext<ContextValue<AvatarProps, HTMLSpanElement>>(null);\n\n/**\n * Context provider for setting default props across multiple Avatar components.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the avatar context.\n * @returns The avatar context provider wrapping children.\n *\n * @example\n * ```tsx\n * <AvatarProvider size=\"small\">\n *   <Avatar imageProps={{ alt: \"User 1\", src: \"avatar1.jpg\" }} />\n *   <Avatar imageProps={{ alt: \"User 2\", src: \"avatar2.jpg\" }} />\n * </AvatarProvider>\n * ```\n */\nexport function AvatarProvider({\n  children,\n  ...props\n}: ProviderProps<AvatarProps>) {\n  return (\n    <AvatarContext.Provider value={props}>{children}</AvatarContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,gBACX,cAA0D,KAAK;;;;;;;;;;;;;;;;AAiBjE,SAAgB,eAAe,EAC7B,UACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,cAAc;EAAS,OAAO;EAAQ;GAAkC"}

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

@@ -12,43 +12,50 @@
 
 import { AvatarProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime54 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/components/avatar/index.d.ts
 
 /**
- * Avatar - A user profile image component with fallback support
+ * Displays a user's profile image with automatic fallback support.
+ * Built on Radix UI Avatar.
  *
- * Displays a user's profile image with automatic fallback to a default person icon
- * when the image fails to load. Supports multiple sizes and can include status badges.
- * Built on Radix UI Avatar for accessibility and reliability.
+ * @param props - The avatar props.
+ * @param props.ref - Reference to the root span element.
+ * @param props.children - Optional content such as a Badge to overlay on the avatar.
+ * @param props.classNames - Custom class names for avatar sub-elements.
+ * @param props.fallbackProps - Props passed to the fallback element.
+ * @param props.imageProps - Props passed to the image element.
+ * @param props.size - Size variant ('medium' or 'small').
+ * @returns The avatar component.
  *
  * @example
- * // Basic avatar with image
+ * ```tsx
  * <Avatar imageProps={{ src: "/user.jpg", alt: "User Name" }} />
+ * ```
  *
  * @example
- * // Avatar with fallback and custom size
+ * ```tsx
+ * // With initials fallback
  * <Avatar
- *   size="large"
+ *   size="small"
  *   imageProps={{ src: "/user.jpg", alt: "User Name" }}
  *   fallbackProps={{ children: "UN" }}
  * />
+ * ```
  *
  * @example
- * // Avatar with status badge
+ * ```tsx
+ * // With status badge
  * <Avatar imageProps={{ src: "/user.jpg", alt: "User Name" }}>
- *   <Badge variant="success" />
+ *   <Badge color="critical">3</Badge>
  * </Avatar>
- *
- * @example
- * // Avatar with only initials fallback
- * <Avatar fallbackProps={{ children: "JD" }} />
+ * ```
  */
 declare function Avatar({
   ref,
   ...props
-}: AvatarProps): react_jsx_runtime54.JSX.Element;
+}: AvatarProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { Avatar };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.js

@@ -21,40 +21,47 @@ import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { useContextProps } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Person } from "@accelint/icons";
 import { designTokens } from "@accelint/design-foundation/tokens";
+import Person from "@accelint/icons/person";
 import { Fallback, Image, Root } from "@radix-ui/react-avatar";
 import styles from "./styles.module.css";
 
 //#region src/components/avatar/index.tsx
 /**
-* Avatar - A user profile image component with fallback support
+* Displays a user's profile image with automatic fallback support.
+* Built on Radix UI Avatar.
 *
-* Displays a user's profile image with automatic fallback to a default person icon
-* when the image fails to load. Supports multiple sizes and can include status badges.
-* Built on Radix UI Avatar for accessibility and reliability.
+* @param props - The avatar props.
+* @param props.ref - Reference to the root span element.
+* @param props.children - Optional content such as a Badge to overlay on the avatar.
+* @param props.classNames - Custom class names for avatar sub-elements.
+* @param props.fallbackProps - Props passed to the fallback element.
+* @param props.imageProps - Props passed to the image element.
+* @param props.size - Size variant ('medium' or 'small').
+* @returns The avatar component.
 *
 * @example
-* // Basic avatar with image
+* ```tsx
 * <Avatar imageProps={{ src: "/user.jpg", alt: "User Name" }} />
+* ```
 *
 * @example
-* // Avatar with fallback and custom size
+* ```tsx
+* // With initials fallback
 * <Avatar
-*   size="large"
+*   size="small"
 *   imageProps={{ src: "/user.jpg", alt: "User Name" }}
 *   fallbackProps={{ children: "UN" }}
 * />
+* ```
 *
 * @example
-* // Avatar with status badge
+* ```tsx
+* // With status badge
 * <Avatar imageProps={{ src: "/user.jpg", alt: "User Name" }}>
-*   <Badge variant="success" />
+*   <Badge color="critical">3</Badge>
 * </Avatar>
-*
-* @example
-* // Avatar with only initials fallback
-* <Avatar fallbackProps={{ children: "JD" }} />
+* ```
 */
 function Avatar({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, AvatarContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/avatar/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 { designTokens } from '@accelint/design-foundation/tokens';\nimport { Person } from '@accelint/icons';\nimport { Fallback, Image, Root } from '@radix-ui/react-avatar';\nimport { useContextProps } from 'react-aria-components';\nimport { BadgeProvider } from '../badge/context';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { AvatarContext } from './context';\nimport styles from './styles.module.css';\nimport type { AvatarProps } from './types';\n\n/**\n * Avatar - A user profile image component with fallback support\n *\n * Displays a user's profile image with automatic fallback to a default person icon\n * when the image fails to load. Supports multiple sizes and can include status badges.\n * Built on Radix UI Avatar for accessibility and reliability.\n *\n * @example\n * // Basic avatar with image\n * <Avatar imageProps={{ src: \"/user.jpg\", alt: \"User Name\" }} />\n *\n * @example\n * // Avatar with fallback and custom size\n * <Avatar\n *   size=\"large\"\n *   imageProps={{ src: \"/user.jpg\", alt: \"User Name\" }}\n *   fallbackProps={{ children: \"UN\" }}\n * />\n *\n * @example\n * // Avatar with status badge\n * <Avatar imageProps={{ src: \"/user.jpg\", alt: \"User Name\" }}>\n *   <Badge variant=\"success\" />\n * </Avatar>\n *\n * @example\n * // Avatar with only initials fallback\n * <Avatar fallbackProps={{ children: \"JD\" }} />\n */\nexport function Avatar({ ref, ...props }: AvatarProps) {\n  [props, ref] = useContextProps(props, ref ?? null, AvatarContext);\n\n  const {\n    children,\n    classNames,\n    fallbackProps,\n    imageProps,\n    size = 'medium',\n    ...rest\n  } = props;\n\n  return (\n    <IconProvider size={size === 'medium' ? 'large' : 'medium'}>\n      <Root\n        {...rest}\n        ref={ref}\n        className={clsx('group/avatar', styles.avatar, classNames?.avatar)}\n        role='img'\n        data-size={size}\n      >\n        <Image\n          {...imageProps}\n          className={clsx(styles.image, classNames?.image)}\n        />\n        <Fallback\n          {...fallbackProps}\n          className={clsx(styles.fallback, classNames?.fallback)}\n        >\n          {fallbackProps?.children || (\n            <Icon>\n              <Person />\n            </Icon>\n          )}\n        </Fallback>\n        <BadgeProvider offset={designTokens.spacing.xs} placement='top right'>\n          <span className={clsx(styles.content, classNames?.content)}>\n            {children}\n          </span>\n        </BadgeProvider>\n      </Root>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,OAAO,EAAE,KAAK,GAAG,SAAsB;AACrD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,cAAc;CAEjE,MAAM,EACJ,UACA,YACA,eACA,YACA,OAAO,UACP,GAAG,SACD;AAEJ,QACE,oBAAC;EAAa,MAAM,SAAS,WAAW,UAAU;YAChD,qBAAC;GACC,GAAI;GACC;GACL,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;GAClE,MAAK;GACL,aAAW;;IAEX,oBAAC;KACC,GAAI;KACJ,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;MAChD;IACF,oBAAC;KACC,GAAI;KACJ,WAAW,KAAK,OAAO,UAAU,YAAY,SAAS;eAErD,eAAe,YACd,oBAAC,kBACC,oBAAC,WAAS,GACL;MAEA;IACX,oBAAC;KAAc,QAAQ,aAAa,QAAQ;KAAI,WAAU;eACxD,oBAAC;MAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;MACvD;OACI;MACO;;IACX;GACM"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/avatar/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 { designTokens } from '@accelint/design-foundation/tokens';\nimport Person from '@accelint/icons/person';\nimport { Fallback, Image, Root } from '@radix-ui/react-avatar';\nimport { useContextProps } from 'react-aria-components';\nimport { BadgeProvider } from '../badge/context';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { AvatarContext } from './context';\nimport styles from './styles.module.css';\nimport type { AvatarProps } from './types';\n\n/**\n * Displays a user's profile image with automatic fallback support.\n * Built on Radix UI Avatar.\n *\n * @param props - The avatar props.\n * @param props.ref - Reference to the root span element.\n * @param props.children - Optional content such as a Badge to overlay on the avatar.\n * @param props.classNames - Custom class names for avatar sub-elements.\n * @param props.fallbackProps - Props passed to the fallback element.\n * @param props.imageProps - Props passed to the image element.\n * @param props.size - Size variant ('medium' or 'small').\n * @returns The avatar component.\n *\n * @example\n * ```tsx\n * <Avatar imageProps={{ src: \"/user.jpg\", alt: \"User Name\" }} />\n * ```\n *\n * @example\n * ```tsx\n * // With initials fallback\n * <Avatar\n *   size=\"small\"\n *   imageProps={{ src: \"/user.jpg\", alt: \"User Name\" }}\n *   fallbackProps={{ children: \"UN\" }}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // With status badge\n * <Avatar imageProps={{ src: \"/user.jpg\", alt: \"User Name\" }}>\n *   <Badge color=\"critical\">3</Badge>\n * </Avatar>\n * ```\n */\nexport function Avatar({ ref, ...props }: AvatarProps) {\n  [props, ref] = useContextProps(props, ref ?? null, AvatarContext);\n\n  const {\n    children,\n    classNames,\n    fallbackProps,\n    imageProps,\n    size = 'medium',\n    ...rest\n  } = props;\n\n  return (\n    <IconProvider size={size === 'medium' ? 'large' : 'medium'}>\n      <Root\n        {...rest}\n        ref={ref}\n        className={clsx('group/avatar', styles.avatar, classNames?.avatar)}\n        role='img'\n        data-size={size}\n      >\n        <Image\n          {...imageProps}\n          className={clsx(styles.image, classNames?.image)}\n        />\n        <Fallback\n          {...fallbackProps}\n          className={clsx(styles.fallback, classNames?.fallback)}\n        >\n          {fallbackProps?.children || (\n            <Icon>\n              <Person />\n            </Icon>\n          )}\n        </Fallback>\n        <BadgeProvider offset={designTokens.spacing.xs} placement='top right'>\n          <span className={clsx(styles.content, classNames?.content)}>\n            {children}\n          </span>\n        </BadgeProvider>\n      </Root>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,OAAO,EAAE,KAAK,GAAG,SAAsB;AACrD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,cAAc;CAEjE,MAAM,EACJ,UACA,YACA,eACA,YACA,OAAO,UACP,GAAG,SACD;AAEJ,QACE,oBAAC;EAAa,MAAM,SAAS,WAAW,UAAU;YAChD,qBAAC;GACC,GAAI;GACC;GACL,WAAW,KAAK,gBAAgB,OAAO,QAAQ,YAAY,OAAO;GAClE,MAAK;GACL,aAAW;;IAEX,oBAAC;KACC,GAAI;KACJ,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;MAChD;IACF,oBAAC;KACC,GAAI;KACJ,WAAW,KAAK,OAAO,UAAU,YAAY,SAAS;eAErD,eAAe,YACd,oBAAC,kBACC,oBAAC,WAAS,GACL;MAEA;IACX,oBAAC;KAAc,QAAQ,aAAa,QAAQ;KAAI,WAAU;eACxD,oBAAC;MAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;MACvD;OACI;MACO;;IACX;GACM"}

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

@@ -14,15 +14,28 @@ import { ComponentPropsWithRef } from "react";
 import { Avatar, Fallback, Image } from "@radix-ui/react-avatar";
 
 //#region src/components/avatar/types.d.ts
+/**
+ * Props for the Avatar component.
+ *
+ * Extends span and Radix Avatar props with image, fallback, and sizing options.
+ */
 type AvatarProps = Omit<ComponentPropsWithRef<'span'>, 'className'> & Omit<ComponentPropsWithRef<typeof Avatar>, 'className' | 'asChild'> & {
+  /** Custom class names for avatar sub-elements. */
   classNames?: {
+    /** Class name for the root avatar element. */
     avatar?: string;
+    /** Class name for the image element. */
     image?: string;
+    /** Class name for the fallback element. */
     fallback?: string;
+    /** Class name for the content wrapper. */
     content?: string;
   };
+  /** Props passed to the Radix Fallback component. */
   fallbackProps?: Omit<ComponentPropsWithRef<typeof Fallback>, 'className'>;
+  /** Props passed to the Radix Image component. */
   imageProps?: Omit<ComponentPropsWithRef<typeof Image>, 'className'>;
+  /** Size variant for the avatar. */
   size?: 'medium' | 'small';
 };
 //#endregion

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

@@ -13,16 +13,34 @@
 import { ProviderProps } from "../../lib/types.js";
 import { BadgeProps } from "./types.js";
 import "client-only";
-import * as react12 from "react";
+import * as react2 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime48 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/badge/context.d.ts
-declare const BadgeContext: react12.Context<ContextValue<BadgeProps, HTMLSpanElement>>;
+/**
+ * React context for sharing badge configuration across components.
+ */
+declare const BadgeContext: react2.Context<ContextValue<BadgeProps, HTMLSpanElement>>;
+/**
+ * Context provider for setting default props across multiple Badge components.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the badge context.
+ * @returns The badge context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <BadgeProvider color="critical" placement="top right">
+ *   <Badge>1</Badge>
+ *   <Badge>2</Badge>
+ * </BadgeProvider>
+ * ```
+ */
 declare function BadgeProvider({
   children,
   ...props
-}: ProviderProps<BadgeProps>): react_jsx_runtime48.JSX.Element;
+}: ProviderProps<BadgeProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { BadgeContext, BadgeProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/badge/context.js

@@ -18,7 +18,25 @@ import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/badge/context.tsx
+/**
+* React context for sharing badge configuration across components.
+*/
 const BadgeContext = createContext(null);
+/**
+* Context provider for setting default props across multiple Badge components.
+*
+* @param props - The provider props.
+* @param props.children - Child components that will receive the badge context.
+* @returns The badge context provider wrapping children.
+*
+* @example
+* ```tsx
+* <BadgeProvider color="critical" placement="top right">
+*   <Badge>1</Badge>
+*   <Badge>2</Badge>
+* </BadgeProvider>
+* ```
+*/
 function BadgeProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(BadgeContext.Provider, {
 		value: props,

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/badge/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 type { ProviderProps } from '@/lib/types';\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { BadgeProps } from './types';\n\nexport const BadgeContext =\n  createContext<ContextValue<BadgeProps, HTMLSpanElement>>(null);\n\nexport function BadgeProvider({\n  children,\n  ...props\n}: ProviderProps<BadgeProps>) {\n  return (\n    <BadgeContext.Provider value={props}>{children}</BadgeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,eACX,cAAyD,KAAK;AAEhE,SAAgB,cAAc,EAC5B,UACA,GAAG,SACyB;AAC5B,QACE,oBAAC,aAAa;EAAS,OAAO;EAAQ;GAAiC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/badge/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 type { ProviderProps } from '@/lib/types';\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { BadgeProps } from './types';\n\n/**\n * React context for sharing badge configuration across components.\n */\nexport const BadgeContext =\n  createContext<ContextValue<BadgeProps, HTMLSpanElement>>(null);\n\n/**\n * Context provider for setting default props across multiple Badge components.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the badge context.\n * @returns The badge context provider wrapping children.\n *\n * @example\n * ```tsx\n * <BadgeProvider color=\"critical\" placement=\"top right\">\n *   <Badge>1</Badge>\n *   <Badge>2</Badge>\n * </BadgeProvider>\n * ```\n */\nexport function BadgeProvider({\n  children,\n  ...props\n}: ProviderProps<BadgeProps>) {\n  return (\n    <BadgeContext.Provider value={props}>{children}</BadgeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,eACX,cAAyD,KAAK;;;;;;;;;;;;;;;;AAiBhE,SAAgB,cAAc,EAC5B,UACA,GAAG,SACyB;AAC5B,QACE,oBAAC,aAAa;EAAS,OAAO;EAAQ;GAAiC"}

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

@@ -12,38 +12,52 @@
 
 import { BadgeProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime44 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/badge/index.d.ts
 
 /**
- * Badge - A small status indicator component for labeling and notifications
+ * Small status indicator for labels, counts, and notifications.
+ * Empty badges render as dot indicators.
  *
- * Displays contextual information like status, counts, or labels. Supports various
- * visual variants and can be positioned relative to other elements. Useful for
- * indicating notifications, statuses, or providing supplementary information.
+ * @param props - The badge props.
+ * @param props.ref - Reference to the span element.
+ * @param props.className - Additional CSS class names for styling.
+ * @param props.color - Semantic color variant.
+ * @param props.offset - Offset from positioned edge in pixels.
+ * @param props.placement - Position relative to container.
+ * @param props.children - Badge content (text, number, or empty for dot).
+ * @returns The badge span element.
  *
  * @example
- * // Basic badge
+ * ```tsx
  * <Badge>New</Badge>
+ * ```
  *
  * @example
- * // Status badges with different variants
- * <Badge variant="success">Active</Badge>
- * <Badge variant="warning">Pending</Badge>
- * <Badge variant="serious">Error</Badge>
+ * ```tsx
+ * // Color variants
+ * <Badge color="normal">Active</Badge>
+ * <Badge color="advisory">Pending</Badge>
+ * <Badge color="critical">Error</Badge>
+ * ```
  *
  * @example
- * // Positioned badge (typically used with other components)
- * <div className="relative">
- *   <Button>Messages</Button>
- *   <Badge placement='top right' offset={-spacingS}>3</Badge>
- * </div>
+ * ```tsx
+ * // Dot indicator (no children)
+ * <Badge color="normal" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Positioned badge
+ * <Badge placement="top right" offset={designTokens.spacing.xs}>3</Badge>
+ * ```
  */
 declare function Badge({
   ref,
   ...props
-}: BadgeProps): react_jsx_runtime44.JSX.Element;
+}: BadgeProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { Badge };
 //# sourceMappingURL=index.d.ts.map