@accelint/design-toolkit 9.2.0 → 9.4.0

package/dist/components/badge/index.js

@@ -22,28 +22,42 @@ import styles from "./styles.module.css";
 
 //#region src/components/badge/index.tsx
 /**
-* 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>
+* ```
 */
 function Badge({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, BadgeContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/badge/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 { useContextProps } from 'react-aria-components';\nimport { BadgeContext } from './context';\nimport styles from './styles.module.css';\nimport type { BadgeProps } from './types';\n\n/**\n * Badge - A small status indicator component for labeling and notifications\n *\n * Displays contextual information like status, counts, or labels. Supports various\n * visual variants and can be positioned relative to other elements. Useful for\n * indicating notifications, statuses, or providing supplementary information.\n *\n * @example\n * // Basic badge\n * <Badge>New</Badge>\n *\n * @example\n * // Status badges with different variants\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"warning\">Pending</Badge>\n * <Badge variant=\"serious\">Error</Badge>\n *\n * @example\n * // Positioned badge (typically used with other components)\n * <div className=\"relative\">\n *   <Button>Messages</Button>\n *   <Badge placement='top right' offset={-spacingS}>3</Badge>\n * </div>\n */\nexport function Badge({ ref, ...props }: BadgeProps) {\n  [props, ref] = useContextProps(props, ref ?? null, BadgeContext);\n\n  const { className, color = 'info', offset, placement, ...rest } = props;\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={clsx('group/badge', styles.badge, className)}\n      data-color={color}\n      data-offset-x={typeof offset === 'number' ? offset : offset?.x}\n      data-offset-y={typeof offset === 'number' ? offset : offset?.y}\n      data-placement={placement || null}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,MAAM,EAAE,KAAK,GAAG,SAAqB;AACnD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,aAAa;CAEhE,MAAM,EAAE,WAAW,QAAQ,QAAQ,QAAQ,WAAW,GAAG,SAAS;AAElE,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,KAAK,eAAe,OAAO,OAAO,UAAU;EACvD,cAAY;EACZ,iBAAe,OAAO,WAAW,WAAW,SAAS,QAAQ;EAC7D,iBAAe,OAAO,WAAW,WAAW,SAAS,QAAQ;EAC7D,kBAAgB,aAAa;GAC7B"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/badge/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 { useContextProps } from 'react-aria-components';\nimport { BadgeContext } from './context';\nimport styles from './styles.module.css';\nimport type { BadgeProps } from './types';\n\n/**\n * Small status indicator for labels, counts, and notifications.\n * Empty badges render as dot indicators.\n *\n * @param props - The badge props.\n * @param props.ref - Reference to the span element.\n * @param props.className - Additional CSS class names for styling.\n * @param props.color - Semantic color variant.\n * @param props.offset - Offset from positioned edge in pixels.\n * @param props.placement - Position relative to container.\n * @param props.children - Badge content (text, number, or empty for dot).\n * @returns The badge span element.\n *\n * @example\n * ```tsx\n * <Badge>New</Badge>\n * ```\n *\n * @example\n * ```tsx\n * // Color variants\n * <Badge color=\"normal\">Active</Badge>\n * <Badge color=\"advisory\">Pending</Badge>\n * <Badge color=\"critical\">Error</Badge>\n * ```\n *\n * @example\n * ```tsx\n * // Dot indicator (no children)\n * <Badge color=\"normal\" />\n * ```\n *\n * @example\n * ```tsx\n * // Positioned badge\n * <Badge placement=\"top right\" offset={designTokens.spacing.xs}>3</Badge>\n * ```\n */\nexport function Badge({ ref, ...props }: BadgeProps) {\n  [props, ref] = useContextProps(props, ref ?? null, BadgeContext);\n\n  const { className, color = 'info', offset, placement, ...rest } = props;\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={clsx('group/badge', styles.badge, className)}\n      data-color={color}\n      data-offset-x={typeof offset === 'number' ? offset : offset?.x}\n      data-offset-y={typeof offset === 'number' ? offset : offset?.y}\n      data-placement={placement || null}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,MAAM,EAAE,KAAK,GAAG,SAAqB;AACnD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,aAAa;CAEhE,MAAM,EAAE,WAAW,QAAQ,QAAQ,QAAQ,WAAW,GAAG,SAAS;AAElE,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,KAAK,eAAe,OAAO,OAAO,UAAU;EACvD,cAAY;EACZ,iBAAe,OAAO,WAAW,WAAW,SAAS,QAAQ;EAC7D,iBAAe,OAAO,WAAW,WAAW,SAAS,QAAQ;EAC7D,kBAAgB,aAAa;GAC7B"}

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

@@ -14,13 +14,22 @@ import { ComponentPropsWithRef } from "react";
 import { Axis } from "@react-types/overlays";
 
 //#region src/components/badge/types.d.ts
+/**
+ * Props for the Badge component.
+ *
+ * Extends span props with color, positioning, and offset options.
+ */
 type BadgeProps = ComponentPropsWithRef<'span'> & {
+  /** Badge content. Empty renders as a dot indicator. */
   children?: boolean | null | number | string;
+  /** Semantic color variant for the badge. */
   color?: 'info' | 'advisory' | 'normal' | 'serious' | 'critical';
+  /** Offset from the positioned edge in pixels. */
   offset?: number | {
     x?: number;
     y?: number;
   };
+  /** Position of the badge relative to its container. */
   placement?: Axis | `${'top' | 'bottom'} ${'left' | 'right'}`;
 };
 //#endregion

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

@@ -12,25 +12,33 @@
 
 import "client-only";
 import { BreadcrumbProps, BreadcrumbsProps } from "react-aria-components";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/components/breadcrumbs/index.d.ts
+
 /**
  * Breadcrumbs - Accessible breadcrumb navigation
  *
  * Displays the user's location within an application hierarchy and provides
  * links back to parent pages. The final item represents the current page.
  *
+ * @param props - The breadcrumbs props.
+ * @param props.children - BreadcrumbItem components representing the navigation path.
+ * @param props.className - Additional CSS class names for styling.
+ * @returns The breadcrumbs navigation component.
+ *
  * @example
+ * ```tsx
  * <Breadcrumbs>
  *   <BreadcrumbItem linkProps={{ href: '/' }}>Home</BreadcrumbItem>
  *   <BreadcrumbItem>Current</BreadcrumbItem>
  * </Breadcrumbs>
+ * ```
  */
 declare function Breadcrumbs({
   children,
   className
-}: BreadcrumbsProps<BreadcrumbProps>): react_jsx_runtime23.JSX.Element;
+}: BreadcrumbsProps<BreadcrumbProps>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Breadcrumbs };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumbs/index.js

@@ -26,11 +26,18 @@ import styles from "./styles.module.css";
 * Displays the user's location within an application hierarchy and provides
 * links back to parent pages. The final item represents the current page.
 *
+* @param props - The breadcrumbs props.
+* @param props.children - BreadcrumbItem components representing the navigation path.
+* @param props.className - Additional CSS class names for styling.
+* @returns The breadcrumbs navigation component.
+*
 * @example
+* ```tsx
 * <Breadcrumbs>
 *   <BreadcrumbItem linkProps={{ href: '/' }}>Home</BreadcrumbItem>
 *   <BreadcrumbItem>Current</BreadcrumbItem>
 * </Breadcrumbs>
+* ```
 */
 function Breadcrumbs({ children, className }) {
 	return /* @__PURE__ */ jsx(Breadcrumbs$1, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaBreadcrumbs"],"sources":["../../../src/components/breadcrumbs/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  Breadcrumbs as AriaBreadcrumbs,\n  type BreadcrumbProps,\n  type BreadcrumbsProps,\n} from 'react-aria-components';\nimport styles from './styles.module.css';\n\n/**\n * Breadcrumbs - Accessible breadcrumb navigation\n *\n * Displays the user's location within an application hierarchy and provides\n * links back to parent pages. The final item represents the current page.\n *\n * @example\n * <Breadcrumbs>\n *   <BreadcrumbItem linkProps={{ href: '/' }}>Home</BreadcrumbItem>\n *   <BreadcrumbItem>Current</BreadcrumbItem>\n * </Breadcrumbs>\n */\nexport function Breadcrumbs({\n  children,\n  className,\n}: BreadcrumbsProps<BreadcrumbProps>) {\n  return (\n    <AriaBreadcrumbs className={clsx(styles.list, className)}>\n      {children}\n    </AriaBreadcrumbs>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,YAAY,EAC1B,UACA,aACoC;AACpC,QACE,oBAACA;EAAgB,WAAW,KAAK,OAAO,MAAM,UAAU;EACrD;GACe"}
+{"version":3,"file":"index.js","names":["AriaBreadcrumbs"],"sources":["../../../src/components/breadcrumbs/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  Breadcrumbs as AriaBreadcrumbs,\n  type BreadcrumbProps,\n  type BreadcrumbsProps,\n} from 'react-aria-components';\nimport styles from './styles.module.css';\n\n/**\n * Breadcrumbs - Accessible breadcrumb navigation\n *\n * Displays the user's location within an application hierarchy and provides\n * links back to parent pages. The final item represents the current page.\n *\n * @param props - The breadcrumbs props.\n * @param props.children - BreadcrumbItem components representing the navigation path.\n * @param props.className - Additional CSS class names for styling.\n * @returns The breadcrumbs navigation component.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <BreadcrumbItem linkProps={{ href: '/' }}>Home</BreadcrumbItem>\n *   <BreadcrumbItem>Current</BreadcrumbItem>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumbs({\n  children,\n  className,\n}: BreadcrumbsProps<BreadcrumbProps>) {\n  return (\n    <AriaBreadcrumbs className={clsx(styles.list, className)}>\n      {children}\n    </AriaBreadcrumbs>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,YAAY,EAC1B,UACA,aACoC;AACpC,QACE,oBAACA;EAAgB,WAAW,KAAK,OAAO,MAAM,UAAU;EACrD;GACe"}

package/dist/components/breadcrumbs/item.d.ts

@@ -12,15 +12,38 @@
 
 import { BreadcrumbItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/components/breadcrumbs/item.d.ts
+
+/**
+ * Individual breadcrumb item. Renders as a link when `linkProps` is provided,
+ * or as plain text for the current page.
+ *
+ * @param props - The breadcrumb item props.
+ * @param props.children - Content to display in the breadcrumb.
+ * @param props.classNames - Custom class names for sub-elements.
+ * @param props.linkProps - Props for the Link component (omit for current page).
+ * @returns The breadcrumb item component.
+ *
+ * @example
+ * ```tsx
+ * // Link item
+ * <BreadcrumbItem linkProps={{ href: '/home' }}>Home</BreadcrumbItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Current page (no link)
+ * <BreadcrumbItem>Current Page</BreadcrumbItem>
+ * ```
+ */
 declare function BreadcrumbItem({
   children,
   classNames,
   linkProps,
   ...rest
-}: BreadcrumbItemProps): react_jsx_runtime24.JSX.Element;
+}: BreadcrumbItemProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { BreadcrumbItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/breadcrumbs/item.js

@@ -18,10 +18,32 @@ import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Breadcrumb, Link, composeRenderProps } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "@accelint/icons";
 import styles from "./styles.module.css";
+import ChevronRight from "@accelint/icons/chevron-right";
 
 //#region src/components/breadcrumbs/item.tsx
+/**
+* Individual breadcrumb item. Renders as a link when `linkProps` is provided,
+* or as plain text for the current page.
+*
+* @param props - The breadcrumb item props.
+* @param props.children - Content to display in the breadcrumb.
+* @param props.classNames - Custom class names for sub-elements.
+* @param props.linkProps - Props for the Link component (omit for current page).
+* @returns The breadcrumb item component.
+*
+* @example
+* ```tsx
+* // Link item
+* <BreadcrumbItem linkProps={{ href: '/home' }}>Home</BreadcrumbItem>
+* ```
+*
+* @example
+* ```tsx
+* // Current page (no link)
+* <BreadcrumbItem>Current Page</BreadcrumbItem>
+* ```
+*/
 function BreadcrumbItem({ children, classNames, linkProps, ...rest }) {
 	return /* @__PURE__ */ jsx(Breadcrumb, {
 		...rest,

package/dist/components/breadcrumbs/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":[],"sources":["../../../src/components/breadcrumbs/item.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 { ChevronRight } from '@accelint/icons';\nimport { Breadcrumb, composeRenderProps, Link } from 'react-aria-components';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\nimport type { BreadcrumbItemProps } from './types';\n\nexport function BreadcrumbItem({\n  children,\n  classNames,\n  linkProps,\n  ...rest\n}: BreadcrumbItemProps) {\n  return (\n    <Breadcrumb\n      {...rest}\n      className={composeRenderProps(classNames?.item, (className) =>\n        clsx('group/breadcrumb', styles.item, className),\n      )}\n    >\n      {composeRenderProps(linkProps ? null : children, (itemChildren) => (\n        <>\n          {linkProps ? (\n            <Link\n              {...linkProps}\n              className={composeRenderProps(classNames?.link, (className) =>\n                clsx(styles.link, className),\n              )}\n            >\n              {children}\n            </Link>\n          ) : (\n            itemChildren\n          )}\n          <Icon\n            aria-hidden='true'\n            className={clsx(styles.separator, classNames?.separator)}\n          >\n            <ChevronRight />\n          </Icon>\n        </>\n      ))}\n    </Breadcrumb>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,eAAe,EAC7B,UACA,YACA,WACA,GAAG,QACmB;AACtB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,oBAAoB,OAAO,MAAM,UAAU,CACjD;YAEA,mBAAmB,YAAY,OAAO,WAAW,iBAChD,4CACG,YACC,oBAAC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,OAAO,MAAM,UAAU,CAC7B;GAEA;IACI,GAEP,cAEF,oBAAC;GACC,eAAY;GACZ,WAAW,KAAK,OAAO,WAAW,YAAY,UAAU;aAExD,oBAAC,iBAAe;IACX,IACN,CACH;GACS"}
+{"version":3,"file":"item.js","names":[],"sources":["../../../src/components/breadcrumbs/item.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 ChevronRight from '@accelint/icons/chevron-right';\nimport { Breadcrumb, composeRenderProps, Link } from 'react-aria-components';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\nimport type { BreadcrumbItemProps } from './types';\n\n/**\n * Individual breadcrumb item. Renders as a link when `linkProps` is provided,\n * or as plain text for the current page.\n *\n * @param props - The breadcrumb item props.\n * @param props.children - Content to display in the breadcrumb.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.linkProps - Props for the Link component (omit for current page).\n * @returns The breadcrumb item component.\n *\n * @example\n * ```tsx\n * // Link item\n * <BreadcrumbItem linkProps={{ href: '/home' }}>Home</BreadcrumbItem>\n * ```\n *\n * @example\n * ```tsx\n * // Current page (no link)\n * <BreadcrumbItem>Current Page</BreadcrumbItem>\n * ```\n */\nexport function BreadcrumbItem({\n  children,\n  classNames,\n  linkProps,\n  ...rest\n}: BreadcrumbItemProps) {\n  return (\n    <Breadcrumb\n      {...rest}\n      className={composeRenderProps(classNames?.item, (className) =>\n        clsx('group/breadcrumb', styles.item, className),\n      )}\n    >\n      {composeRenderProps(linkProps ? null : children, (itemChildren) => (\n        <>\n          {linkProps ? (\n            <Link\n              {...linkProps}\n              className={composeRenderProps(classNames?.link, (className) =>\n                clsx(styles.link, className),\n              )}\n            >\n              {children}\n            </Link>\n          ) : (\n            itemChildren\n          )}\n          <Icon\n            aria-hidden='true'\n            className={clsx(styles.separator, classNames?.separator)}\n          >\n            <ChevronRight />\n          </Icon>\n        </>\n      ))}\n    </Breadcrumb>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,eAAe,EAC7B,UACA,YACA,WACA,GAAG,QACmB;AACtB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,oBAAoB,OAAO,MAAM,UAAU,CACjD;YAEA,mBAAmB,YAAY,OAAO,WAAW,iBAChD,4CACG,YACC,oBAAC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,OAAO,MAAM,UAAU,CAC7B;GAEA;IACI,GAEP,cAEF,oBAAC;GACC,eAAY;GACZ,WAAW,KAAK,OAAO,WAAW,YAAY,UAAU;aAExD,oBAAC,iBAAe;IACX,IACN,CACH;GACS"}

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

@@ -13,20 +13,37 @@
 import { BreadcrumbProps, LinkProps } from "react-aria-components";
 
 //#region src/components/breadcrumbs/types.d.ts
+/**
+ * Props for the BreadcrumbItem component.
+ *
+ * Discriminated union: when `linkProps` is provided, renders as a navigable link;
+ * otherwise renders as plain text representing the current page.
+ */
 type BreadcrumbItemProps = Omit<BreadcrumbProps, 'children' | 'className'> & ({
+  /** Custom class names for breadcrumb sub-elements. */
   classNames?: {
+    /** Class name for the breadcrumb item wrapper. */
     item?: BreadcrumbProps['className'];
+    /** Class name for the link element. */
     link?: LinkProps['className'];
+    /** Class name for the separator icon. */
     separator?: string;
   };
+  /** Props for the Link component. When provided, item renders as a link. */
   linkProps: Omit<LinkProps, 'className'>;
+  /** Content to display in the link. */
   children?: LinkProps['children'];
 } | {
+  /** Custom class names for breadcrumb sub-elements. */
   classNames?: {
+    /** Class name for the breadcrumb item wrapper. */
     item?: BreadcrumbProps['className'];
+    /** Class name for the separator icon. */
     separator?: string;
   };
+  /** Must be omitted for current page items. */
   linkProps?: never;
+  /** Content to display for the current page. */
   children?: BreadcrumbProps['children'];
 });
 //#endregion

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

@@ -13,26 +13,80 @@
 import { ProviderProps } from "../../lib/types.js";
 import { ButtonProps as ButtonProps$1, LinkButtonProps, ToggleButtonProps as ToggleButtonProps$1 } from "./types.js";
 import "client-only";
-import * as react5 from "react";
+import * as react3 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/components/button/context.d.ts
-declare const ButtonContext: react5.Context<ContextValue<ButtonProps$1, HTMLButtonElement>>;
+/**
+ * React context for sharing Button configuration across components.
+ */
+declare const ButtonContext: react3.Context<ContextValue<ButtonProps$1, HTMLButtonElement>>;
+/**
+ * Context provider for setting default props across multiple Button components.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the button context.
+ * @returns The button context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <ButtonProvider size="small" variant="outline">
+ *   <Button>Button 1</Button>
+ *   <Button>Button 2</Button>
+ * </ButtonProvider>
+ * ```
+ */
 declare function ButtonProvider({
   children,
   ...props
-}: ProviderProps<ButtonProps$1>): react_jsx_runtime25.JSX.Element;
-declare const LinkButtonContext: react5.Context<ContextValue<LinkButtonProps, HTMLAnchorElement>>;
+}: ProviderProps<ButtonProps$1>): react_jsx_runtime10.JSX.Element;
+/**
+ * React context for sharing LinkButton configuration across components.
+ */
+declare const LinkButtonContext: react3.Context<ContextValue<LinkButtonProps, HTMLAnchorElement>>;
+/**
+ * Context provider for setting default props across multiple LinkButton components.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the link button context.
+ * @returns The link button context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <LinkButtonProvider size="small" variant="outline">
+ *   <LinkButton href="/page1">Link 1</LinkButton>
+ *   <LinkButton href="/page2">Link 2</LinkButton>
+ * </LinkButtonProvider>
+ * ```
+ */
 declare function LinkButtonProvider({
   children,
   ...props
-}: ProviderProps<LinkButtonProps>): react_jsx_runtime25.JSX.Element;
-declare const ToggleButtonContext: react5.Context<ContextValue<ToggleButtonProps$1, HTMLButtonElement>>;
+}: ProviderProps<LinkButtonProps>): react_jsx_runtime10.JSX.Element;
+/**
+ * React context for sharing ToggleButton configuration across components.
+ */
+declare const ToggleButtonContext: react3.Context<ContextValue<ToggleButtonProps$1, HTMLButtonElement>>;
+/**
+ * Context provider for setting default props across multiple ToggleButton components.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the toggle button context.
+ * @returns The toggle button context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <ToggleButtonProvider size="small" variant="flat">
+ *   <ToggleButton>Toggle 1</ToggleButton>
+ *   <ToggleButton>Toggle 2</ToggleButton>
+ * </ToggleButtonProvider>
+ * ```
+ */
 declare function ToggleButtonProvider({
   children,
   ...props
-}: ProviderProps<ToggleButtonProps$1>): react_jsx_runtime25.JSX.Element;
+}: ProviderProps<ToggleButtonProps$1>): react_jsx_runtime10.JSX.Element;
 //#endregion
 export { ButtonContext, ButtonProvider, LinkButtonContext, LinkButtonProvider, ToggleButtonContext, ToggleButtonProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/button/context.js

@@ -18,21 +18,75 @@ import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/button/context.tsx
+/**
+* React context for sharing Button configuration across components.
+*/
 const ButtonContext = createContext(null);
+/**
+* Context provider for setting default props across multiple Button components.
+*
+* @param props - The provider props.
+* @param props.children - Child components that will receive the button context.
+* @returns The button context provider wrapping children.
+*
+* @example
+* ```tsx
+* <ButtonProvider size="small" variant="outline">
+*   <Button>Button 1</Button>
+*   <Button>Button 2</Button>
+* </ButtonProvider>
+* ```
+*/
 function ButtonProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(ButtonContext.Provider, {
 		value: props,
 		children
 	});
 }
+/**
+* React context for sharing LinkButton configuration across components.
+*/
 const LinkButtonContext = createContext(null);
+/**
+* Context provider for setting default props across multiple LinkButton components.
+*
+* @param props - The provider props.
+* @param props.children - Child components that will receive the link button context.
+* @returns The link button context provider wrapping children.
+*
+* @example
+* ```tsx
+* <LinkButtonProvider size="small" variant="outline">
+*   <LinkButton href="/page1">Link 1</LinkButton>
+*   <LinkButton href="/page2">Link 2</LinkButton>
+* </LinkButtonProvider>
+* ```
+*/
 function LinkButtonProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(LinkButtonContext.Provider, {
 		value: props,
 		children
 	});
 }
+/**
+* React context for sharing ToggleButton configuration across components.
+*/
 const ToggleButtonContext = createContext(null);
+/**
+* Context provider for setting default props across multiple ToggleButton components.
+*
+* @param props - The provider props.
+* @param props.children - Child components that will receive the toggle button context.
+* @returns The toggle button context provider wrapping children.
+*
+* @example
+* ```tsx
+* <ToggleButtonProvider size="small" variant="flat">
+*   <ToggleButton>Toggle 1</ToggleButton>
+*   <ToggleButton>Toggle 2</ToggleButton>
+* </ToggleButtonProvider>
+* ```
+*/
 function ToggleButtonProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(ToggleButtonContext.Provider, {
 		value: props,

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/button/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 { ButtonProps, LinkButtonProps, ToggleButtonProps } from './types';\n\nexport const ButtonContext =\n  createContext<ContextValue<ButtonProps, HTMLButtonElement>>(null);\n\nexport function ButtonProvider({\n  children,\n  ...props\n}: ProviderProps<ButtonProps>) {\n  return (\n    <ButtonContext.Provider value={props}>{children}</ButtonContext.Provider>\n  );\n}\n\nexport const LinkButtonContext =\n  createContext<ContextValue<LinkButtonProps, HTMLAnchorElement>>(null);\n\nexport function LinkButtonProvider({\n  children,\n  ...props\n}: ProviderProps<LinkButtonProps>) {\n  return (\n    <LinkButtonContext.Provider value={props}>\n      {children}\n    </LinkButtonContext.Provider>\n  );\n}\n\nexport const ToggleButtonContext =\n  createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>(null);\n\nexport function ToggleButtonProvider({\n  children,\n  ...props\n}: ProviderProps<ToggleButtonProps>) {\n  return (\n    <ToggleButtonContext.Provider value={props}>\n      {children}\n    </ToggleButtonContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,gBACX,cAA4D,KAAK;AAEnE,SAAgB,eAAe,EAC7B,UACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,cAAc;EAAS,OAAO;EAAQ;GAAkC;;AAI7E,MAAa,oBACX,cAAgE,KAAK;AAEvE,SAAgB,mBAAmB,EACjC,UACA,GAAG,SAC8B;AACjC,QACE,oBAAC,kBAAkB;EAAS,OAAO;EAChC;GAC0B;;AAIjC,MAAa,sBACX,cAAkE,KAAK;AAEzE,SAAgB,qBAAqB,EACnC,UACA,GAAG,SACgC;AACnC,QACE,oBAAC,oBAAoB;EAAS,OAAO;EAClC;GAC4B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/button/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 { ButtonProps, LinkButtonProps, ToggleButtonProps } from './types';\n\n/**\n * React context for sharing Button configuration across components.\n */\nexport const ButtonContext =\n  createContext<ContextValue<ButtonProps, HTMLButtonElement>>(null);\n\n/**\n * Context provider for setting default props across multiple Button components.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the button context.\n * @returns The button context provider wrapping children.\n *\n * @example\n * ```tsx\n * <ButtonProvider size=\"small\" variant=\"outline\">\n *   <Button>Button 1</Button>\n *   <Button>Button 2</Button>\n * </ButtonProvider>\n * ```\n */\nexport function ButtonProvider({\n  children,\n  ...props\n}: ProviderProps<ButtonProps>) {\n  return (\n    <ButtonContext.Provider value={props}>{children}</ButtonContext.Provider>\n  );\n}\n\n/**\n * React context for sharing LinkButton configuration across components.\n */\nexport const LinkButtonContext =\n  createContext<ContextValue<LinkButtonProps, HTMLAnchorElement>>(null);\n\n/**\n * Context provider for setting default props across multiple LinkButton components.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the link button context.\n * @returns The link button context provider wrapping children.\n *\n * @example\n * ```tsx\n * <LinkButtonProvider size=\"small\" variant=\"outline\">\n *   <LinkButton href=\"/page1\">Link 1</LinkButton>\n *   <LinkButton href=\"/page2\">Link 2</LinkButton>\n * </LinkButtonProvider>\n * ```\n */\nexport function LinkButtonProvider({\n  children,\n  ...props\n}: ProviderProps<LinkButtonProps>) {\n  return (\n    <LinkButtonContext.Provider value={props}>\n      {children}\n    </LinkButtonContext.Provider>\n  );\n}\n\n/**\n * React context for sharing ToggleButton configuration across components.\n */\nexport const ToggleButtonContext =\n  createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>(null);\n\n/**\n * Context provider for setting default props across multiple ToggleButton components.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the toggle button context.\n * @returns The toggle button context provider wrapping children.\n *\n * @example\n * ```tsx\n * <ToggleButtonProvider size=\"small\" variant=\"flat\">\n *   <ToggleButton>Toggle 1</ToggleButton>\n *   <ToggleButton>Toggle 2</ToggleButton>\n * </ToggleButtonProvider>\n * ```\n */\nexport function ToggleButtonProvider({\n  children,\n  ...props\n}: ProviderProps<ToggleButtonProps>) {\n  return (\n    <ToggleButtonContext.Provider value={props}>\n      {children}\n    </ToggleButtonContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,gBACX,cAA4D,KAAK;;;;;;;;;;;;;;;;AAiBnE,SAAgB,eAAe,EAC7B,UACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,cAAc;EAAS,OAAO;EAAQ;GAAkC;;;;;AAO7E,MAAa,oBACX,cAAgE,KAAK;;;;;;;;;;;;;;;;AAiBvE,SAAgB,mBAAmB,EACjC,UACA,GAAG,SAC8B;AACjC,QACE,oBAAC,kBAAkB;EAAS,OAAO;EAChC;GAC0B;;;;;AAOjC,MAAa,sBACX,cAAkE,KAAK;;;;;;;;;;;;;;;;AAiBzE,SAAgB,qBAAqB,EACnC,UACA,GAAG,SACgC;AACnC,QACE,oBAAC,oBAAoB;EAAS,OAAO;EAClC;GAC4B"}

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

@@ -12,7 +12,7 @@
 
 import { ButtonProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime28 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/button/index.d.ts
 
@@ -23,37 +23,56 @@ import * as react_jsx_runtime28 from "react/jsx-runtime";
  * sizes, and interactive states. Includes icon support and integrates with React Aria
  * for keyboard navigation and accessibility features.
  *
+ * @param props - The button props.
+ * @param props.ref - Reference to the button element.
+ * @param props.children - Button content (text, icons, or both).
+ * @param props.className - Additional CSS class names for styling.
+ * @param props.color - Semantic color variant.
+ * @param props.size - Size of the button.
+ * @param props.variant - Visual style variant.
+ * @returns The button component.
+ *
  * @example
+ * ```tsx
  * // Basic button
  * <Button>Click me</Button>
+ * ```
  *
  * @example
+ * ```tsx
  * // Primary button with different sizes
  * <Button variant="filled" size="large">Large Filled</Button>
  * <Button variant="outline" size="small">Small Outline</Button>
+ * ```
  *
  * @example
+ * ```tsx
  * // Button with icon
  * <Button variant="flat">
  *   <Icon><Plus /></Icon>
  *   Add Item
  * </Button>
+ * ```
  *
  * @example
+ * ```tsx
  * // Icon-only button
  * <Button variant="icon">
  *   <Icon><Settings /></Icon>
  * </Button>
+ * ```
  *
  * @example
+ * ```tsx
  * // Button with different colors
  * <Button color="critical">Critical Button</Button>
  * <Button color="serious">Delete</Button>
+ * ```
  */
 declare function Button({
   ref,
   ...props
-}: ButtonProps): react_jsx_runtime28.JSX.Element;
+}: ButtonProps): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { Button };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -29,32 +29,51 @@ import styles from "./styles.module.css";
 * sizes, and interactive states. Includes icon support and integrates with React Aria
 * for keyboard navigation and accessibility features.
 *
+* @param props - The button props.
+* @param props.ref - Reference to the button element.
+* @param props.children - Button content (text, icons, or both).
+* @param props.className - Additional CSS class names for styling.
+* @param props.color - Semantic color variant.
+* @param props.size - Size of the button.
+* @param props.variant - Visual style variant.
+* @returns The button component.
+*
 * @example
+* ```tsx
 * // Basic button
 * <Button>Click me</Button>
+* ```
 *
 * @example
+* ```tsx
 * // Primary button with different sizes
 * <Button variant="filled" size="large">Large Filled</Button>
 * <Button variant="outline" size="small">Small Outline</Button>
+* ```
 *
 * @example
+* ```tsx
 * // Button with icon
 * <Button variant="flat">
 *   <Icon><Plus /></Icon>
 *   Add Item
 * </Button>
+* ```
 *
 * @example
+* ```tsx
 * // Icon-only button
 * <Button variant="icon">
 *   <Icon><Settings /></Icon>
 * </Button>
+* ```
 *
 * @example
+* ```tsx
 * // Button with different colors
 * <Button color="critical">Critical Button</Button>
 * <Button color="serious">Delete</Button>
+* ```
 */
 function Button({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, ButtonContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaButton","className"],"sources":["../../../src/components/button/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  Button as AriaButton,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { IconProvider } from '../icon/context';\nimport { ButtonContext } from './context';\nimport styles from './styles.module.css';\nimport type { ButtonProps } from './types';\n\n/**\n * Button - A versatile interactive button component with multiple variants\n *\n * Provides accessible button functionality with support for different visual styles,\n * sizes, and interactive states. Includes icon support and integrates with React Aria\n * for keyboard navigation and accessibility features.\n *\n * @example\n * // Basic button\n * <Button>Click me</Button>\n *\n * @example\n * // Primary button with different sizes\n * <Button variant=\"filled\" size=\"large\">Large Filled</Button>\n * <Button variant=\"outline\" size=\"small\">Small Outline</Button>\n *\n * @example\n * // Button with icon\n * <Button variant=\"flat\">\n *   <Icon><Plus /></Icon>\n *   Add Item\n * </Button>\n *\n * @example\n * // Icon-only button\n * <Button variant=\"icon\">\n *   <Icon><Settings /></Icon>\n * </Button>\n *\n * @example\n * // Button with different colors\n * <Button color=\"critical\">Critical Button</Button>\n * <Button color=\"serious\">Delete</Button>\n */\nexport function Button({ ref, ...props }: ButtonProps) {\n  [props, ref] = useContextProps(props, ref ?? null, ButtonContext);\n\n  const {\n    children,\n    className,\n    color = 'mono-muted',\n    size = 'medium',\n    variant = 'filled',\n    ...rest\n  } = props;\n\n  return (\n    <IconProvider size={size}>\n      <AriaButton\n        {...rest}\n        ref={ref}\n        className={composeRenderProps(className, (className) =>\n          clsx('group/button', styles.button, styles[variant], className),\n        )}\n        data-color={color}\n        data-size={size}\n      >\n        {children}\n      </AriaButton>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,SAAgB,OAAO,EAAE,KAAK,GAAG,SAAsB;AACrD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,cAAc;CAEjE,MAAM,EACJ,UACA,WACA,QAAQ,cACR,OAAO,UACP,UAAU,UACV,GAAG,SACD;AAEJ,QACE,oBAAC;EAAmB;YAClB,oBAACA;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,gBAAgB,OAAO,QAAQ,OAAO,UAAUC,YAAU,CAChE;GACD,cAAY;GACZ,aAAW;GAEV;IACU;GACA"}
+{"version":3,"file":"index.js","names":["AriaButton","className"],"sources":["../../../src/components/button/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  Button as AriaButton,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { IconProvider } from '../icon/context';\nimport { ButtonContext } from './context';\nimport styles from './styles.module.css';\nimport type { ButtonProps } from './types';\n\n/**\n * Button - A versatile interactive button component with multiple variants\n *\n * Provides accessible button functionality with support for different visual styles,\n * sizes, and interactive states. Includes icon support and integrates with React Aria\n * for keyboard navigation and accessibility features.\n *\n * @param props - The button props.\n * @param props.ref - Reference to the button element.\n * @param props.children - Button content (text, icons, or both).\n * @param props.className - Additional CSS class names for styling.\n * @param props.color - Semantic color variant.\n * @param props.size - Size of the button.\n * @param props.variant - Visual style variant.\n * @returns The button component.\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button>Click me</Button>\n * ```\n *\n * @example\n * ```tsx\n * // Primary button with different sizes\n * <Button variant=\"filled\" size=\"large\">Large Filled</Button>\n * <Button variant=\"outline\" size=\"small\">Small Outline</Button>\n * ```\n *\n * @example\n * ```tsx\n * // Button with icon\n * <Button variant=\"flat\">\n *   <Icon><Plus /></Icon>\n *   Add Item\n * </Button>\n * ```\n *\n * @example\n * ```tsx\n * // Icon-only button\n * <Button variant=\"icon\">\n *   <Icon><Settings /></Icon>\n * </Button>\n * ```\n *\n * @example\n * ```tsx\n * // Button with different colors\n * <Button color=\"critical\">Critical Button</Button>\n * <Button color=\"serious\">Delete</Button>\n * ```\n */\nexport function Button({ ref, ...props }: ButtonProps) {\n  [props, ref] = useContextProps(props, ref ?? null, ButtonContext);\n\n  const {\n    children,\n    className,\n    color = 'mono-muted',\n    size = 'medium',\n    variant = 'filled',\n    ...rest\n  } = props;\n\n  return (\n    <IconProvider size={size}>\n      <AriaButton\n        {...rest}\n        ref={ref}\n        className={composeRenderProps(className, (className) =>\n          clsx('group/button', styles.button, styles[variant], className),\n        )}\n        data-color={color}\n        data-size={size}\n      >\n        {children}\n      </AriaButton>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,SAAgB,OAAO,EAAE,KAAK,GAAG,SAAsB;AACrD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,cAAc;CAEjE,MAAM,EACJ,UACA,WACA,QAAQ,cACR,OAAO,UACP,UAAU,UACV,GAAG,SACD;AAEJ,QACE,oBAAC;EAAmB;YAClB,oBAACA;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,gBAAgB,OAAO,QAAQ,OAAO,UAAUC,YAAU,CAChE;GACD,cAAY;GACZ,aAAW;GAEV;IACU;GACA"}