@accelint/design-toolkit 9.2.0 → 9.4.0

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

@@ -16,18 +16,37 @@ import { CheckboxGroupProps as CheckboxGroupProps$1, CheckboxProps as CheckboxPr
 import { Orientation } from "@react-types/shared";
 
 //#region src/components/checkbox/types.d.ts
+/**
+ * Props for the CheckboxGroup component.
+ *
+ * Extends React Aria CheckboxGroup with label, orientation, and custom class names.
+ */
 type CheckboxGroupProps = Omit<CheckboxGroupProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
+  /** Custom class names for checkbox group sub-elements. */
   classNames?: {
+    /** Class name for the group container. */
     group?: CheckboxGroupProps$1['className'];
+    /** Class name for the group label. */
     label?: LabelProps$1['className'];
   };
+  /** Label text displayed above the checkbox group. */
   label?: string;
+  /** Layout orientation for the checkboxes. */
   orientation?: Orientation;
 };
+/**
+ * Props for the Checkbox component.
+ *
+ * Extends React Aria Checkbox with custom class names for sub-elements.
+ */
 type CheckboxProps = Omit<CheckboxProps$1, 'className'> & RefAttributes<HTMLLabelElement> & {
+  /** Custom class names for checkbox sub-elements. */
   classNames?: {
+    /** Class name for the checkbox wrapper. */
     checkbox?: CheckboxProps$1['className'];
+    /** Class name for the checkbox control indicator. */
     control?: string;
+    /** Class name for the label text. */
     label?: string;
   };
 };

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

@@ -13,16 +13,34 @@
 import { ProviderProps } from "../../lib/types.js";
 import { ChipContextValue } from "./types.js";
 import "client-only";
-import * as react15 from "react";
+import * as react8 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime56 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/chip/context.d.ts
-declare const ChipContext: react15.Context<ContextValue<ChipContextValue, HTMLDivElement>>;
+/**
+ * React context for sharing Chip configuration across components.
+ */
+declare const ChipContext: react8.Context<ContextValue<ChipContextValue, HTMLDivElement>>;
+/**
+ * Context provider for setting default props across multiple Chip components.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the chip context.
+ * @returns The chip context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <ChipProvider size="small" color="info">
+ *   <Chip>Chip 1</Chip>
+ *   <Chip>Chip 2</Chip>
+ * </ChipProvider>
+ * ```
+ */
 declare function ChipProvider({
   children,
   ...props
-}: ProviderProps<ChipContextValue>): react_jsx_runtime56.JSX.Element;
+}: ProviderProps<ChipContextValue>): react_jsx_runtime18.JSX.Element;
 //#endregion
 export { ChipContext, ChipProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/chip/context.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/chip/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 { ChipContextValue } from './types';\n\nexport const ChipContext =\n  createContext<ContextValue<ChipContextValue, HTMLDivElement>>(null);\n\nexport function ChipProvider({\n  children,\n  ...props\n}: ProviderProps<ChipContextValue>) {\n  return <ChipContext.Provider value={props}>{children}</ChipContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,cACX,cAA8D,KAAK;AAErE,SAAgB,aAAa,EAC3B,UACA,GAAG,SAC+B;AAClC,QAAO,oBAAC,YAAY;EAAS,OAAO;EAAQ;GAAgC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/chip/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 { ChipContextValue } from './types';\n\n/**\n * React context for sharing Chip configuration across components.\n */\nexport const ChipContext =\n  createContext<ContextValue<ChipContextValue, HTMLDivElement>>(null);\n\n/**\n * Context provider for setting default props across multiple Chip components.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the chip context.\n * @returns The chip context provider wrapping children.\n *\n * @example\n * ```tsx\n * <ChipProvider size=\"small\" color=\"info\">\n *   <Chip>Chip 1</Chip>\n *   <Chip>Chip 2</Chip>\n * </ChipProvider>\n * ```\n */\nexport function ChipProvider({\n  children,\n  ...props\n}: ProviderProps<ChipContextValue>) {\n  return <ChipContext.Provider value={props}>{children}</ChipContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,cACX,cAA8D,KAAK;;;;;;;;;;;;;;;;AAiBrE,SAAgB,aAAa,EAC3B,UACA,GAAG,SAC+B;AAClC,QAAO,oBAAC,YAAY;EAAS,OAAO;EAAQ;GAAgC"}

package/dist/components/chip/deletable.d.ts

@@ -12,13 +12,49 @@
 
 import { DeletableChipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime57 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/components/chip/deletable.d.ts
+
+/**
+ * DeletableChip - Chip with built-in remove button for dynamic content management.
+ *
+ * Must be used inside a ChipList with an onRemove handler.
+ *
+ * @param props - The deletable chip props.
+ * @param props.ref - Reference to the chip element.
+ * @param props.id - Unique identifier for removal tracking.
+ * @param props.children - Chip content.
+ * @param props.classNames - Custom class names for sub-elements.
+ * @param props.size - Size of the chip.
+ * @param props.textValue - Accessible text value for the chip.
+ * @returns The deletable chip component.
+ *
+ * @example
+ * ```tsx
+ * <ChipList onRemove={(keys) => console.log('Removed:', keys)}>
+ *   <DeletableChip id="tag1">JavaScript</DeletableChip>
+ *   <DeletableChip id="tag2">Python</DeletableChip>
+ * </ChipList>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom classNames
+ * <ChipList onRemove={handleRemove}>
+ *   <DeletableChip
+ *     id="tag1"
+ *     classNames={{ chip: 'custom-chip', remove: 'custom-remove' }}
+ *   >
+ *     Styled Tag
+ *   </DeletableChip>
+ * </ChipList>
+ * ```
+ */
 declare function DeletableChip({
   ref,
   ...props
-}: DeletableChipProps): react_jsx_runtime57.JSX.Element;
+}: DeletableChipProps): react_jsx_runtime19.JSX.Element;
 //#endregion
 export { DeletableChip };
 //# sourceMappingURL=deletable.d.ts.map

package/dist/components/chip/deletable.js

@@ -20,10 +20,45 @@ import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Tag, composeRenderProps, useContextProps } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CancelFill } from "@accelint/icons";
+import CancelFill from "@accelint/icons/cancel-fill";
 import styles from "./styles.module.css";
 
 //#region src/components/chip/deletable.tsx
+/**
+* DeletableChip - Chip with built-in remove button for dynamic content management.
+*
+* Must be used inside a ChipList with an onRemove handler.
+*
+* @param props - The deletable chip props.
+* @param props.ref - Reference to the chip element.
+* @param props.id - Unique identifier for removal tracking.
+* @param props.children - Chip content.
+* @param props.classNames - Custom class names for sub-elements.
+* @param props.size - Size of the chip.
+* @param props.textValue - Accessible text value for the chip.
+* @returns The deletable chip component.
+*
+* @example
+* ```tsx
+* <ChipList onRemove={(keys) => console.log('Removed:', keys)}>
+*   <DeletableChip id="tag1">JavaScript</DeletableChip>
+*   <DeletableChip id="tag2">Python</DeletableChip>
+* </ChipList>
+* ```
+*
+* @example
+* ```tsx
+* // With custom classNames
+* <ChipList onRemove={handleRemove}>
+*   <DeletableChip
+*     id="tag1"
+*     classNames={{ chip: 'custom-chip', remove: 'custom-remove' }}
+*   >
+*     Styled Tag
+*   </DeletableChip>
+* </ChipList>
+* ```
+*/
 function DeletableChip({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, ChipContext);
 	const { children, classNames, size = "medium", textValue = typeof children === "string" ? children : void 0, ...rest } = props;

package/dist/components/chip/deletable.js.map

@@ -1 +1 @@
-{"version":3,"file":"deletable.js","names":["AriaTag","children","Button"],"sources":["../../../src/components/chip/deletable.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 { CancelFill } from '@accelint/icons';\nimport {\n  Tag as AriaTag,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ChipContext } from './context';\nimport styles from './styles.module.css';\nimport type { DeletableChipProps } from './types';\n\nexport function DeletableChip({ ref, ...props }: DeletableChipProps) {\n  [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n  const {\n    children,\n    classNames,\n    size = 'medium',\n    textValue = typeof children === 'string' ? children : undefined,\n    ...rest\n  } = props;\n\n  const iconSize = size === 'small' ? 'xsmall' : 'small';\n\n  return (\n    <AriaTag\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.chip, (className) =>\n        clsx('group/chip', styles.chip, styles.deletable, className),\n      )}\n      textValue={textValue}\n      data-size={size}\n    >\n      {composeRenderProps(children, (children, { allowsRemoving }) => {\n        if (!allowsRemoving) {\n          throw new Error(\n            'You have a <DeletableChip> in a <ChipList> that does not specify an onRemove handler.',\n          );\n        }\n\n        return (\n          <>\n            {children}\n            <Button\n              slot='remove'\n              color='mono-muted'\n              size={size}\n              variant='icon'\n              className={composeRenderProps(classNames?.remove, (className) =>\n                clsx(styles.remove, className),\n              )}\n            >\n              <Icon size={iconSize}>\n                <CancelFill />\n              </Icon>\n            </Button>\n          </>\n        );\n      })}\n    </AriaTag>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,cAAc,EAAE,KAAK,GAAG,SAA6B;AACnE,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EACJ,UACA,YACA,OAAO,UACP,YAAY,OAAO,aAAa,WAAW,WAAW,QACtD,GAAG,SACD;CAEJ,MAAM,WAAW,SAAS,UAAU,WAAW;AAE/C,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,cAAc,OAAO,MAAM,OAAO,WAAW,UAAU,CAC7D;EACU;EACX,aAAW;YAEV,mBAAmB,WAAW,YAAU,EAAE,qBAAqB;AAC9D,OAAI,CAAC,eACH,OAAM,IAAI,MACR,wFACD;AAGH,UACE,4CACGC,YACD,oBAACC;IACC,MAAK;IACL,OAAM;IACA;IACN,SAAQ;IACR,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,QAAQ,UAAU,CAC/B;cAED,oBAAC;KAAK,MAAM;eACV,oBAAC,eAAa;MACT;KACA,IACR;IAEL;GACM"}
+{"version":3,"file":"deletable.js","names":["AriaTag","children","Button"],"sources":["../../../src/components/chip/deletable.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 CancelFill from '@accelint/icons/cancel-fill';\nimport {\n  Tag as AriaTag,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ChipContext } from './context';\nimport styles from './styles.module.css';\nimport type { DeletableChipProps } from './types';\n\n/**\n * DeletableChip - Chip with built-in remove button for dynamic content management.\n *\n * Must be used inside a ChipList with an onRemove handler.\n *\n * @param props - The deletable chip props.\n * @param props.ref - Reference to the chip element.\n * @param props.id - Unique identifier for removal tracking.\n * @param props.children - Chip content.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.size - Size of the chip.\n * @param props.textValue - Accessible text value for the chip.\n * @returns The deletable chip component.\n *\n * @example\n * ```tsx\n * <ChipList onRemove={(keys) => console.log('Removed:', keys)}>\n *   <DeletableChip id=\"tag1\">JavaScript</DeletableChip>\n *   <DeletableChip id=\"tag2\">Python</DeletableChip>\n * </ChipList>\n * ```\n *\n * @example\n * ```tsx\n * // With custom classNames\n * <ChipList onRemove={handleRemove}>\n *   <DeletableChip\n *     id=\"tag1\"\n *     classNames={{ chip: 'custom-chip', remove: 'custom-remove' }}\n *   >\n *     Styled Tag\n *   </DeletableChip>\n * </ChipList>\n * ```\n */\nexport function DeletableChip({ ref, ...props }: DeletableChipProps) {\n  [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n  const {\n    children,\n    classNames,\n    size = 'medium',\n    textValue = typeof children === 'string' ? children : undefined,\n    ...rest\n  } = props;\n\n  const iconSize = size === 'small' ? 'xsmall' : 'small';\n\n  return (\n    <AriaTag\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.chip, (className) =>\n        clsx('group/chip', styles.chip, styles.deletable, className),\n      )}\n      textValue={textValue}\n      data-size={size}\n    >\n      {composeRenderProps(children, (children, { allowsRemoving }) => {\n        if (!allowsRemoving) {\n          throw new Error(\n            'You have a <DeletableChip> in a <ChipList> that does not specify an onRemove handler.',\n          );\n        }\n\n        return (\n          <>\n            {children}\n            <Button\n              slot='remove'\n              color='mono-muted'\n              size={size}\n              variant='icon'\n              className={composeRenderProps(classNames?.remove, (className) =>\n                clsx(styles.remove, className),\n              )}\n            >\n              <Icon size={iconSize}>\n                <CancelFill />\n              </Icon>\n            </Button>\n          </>\n        );\n      })}\n    </AriaTag>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,cAAc,EAAE,KAAK,GAAG,SAA6B;AACnE,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EACJ,UACA,YACA,OAAO,UACP,YAAY,OAAO,aAAa,WAAW,WAAW,QACtD,GAAG,SACD;CAEJ,MAAM,WAAW,SAAS,UAAU,WAAW;AAE/C,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,cAAc,OAAO,MAAM,OAAO,WAAW,UAAU,CAC7D;EACU;EACX,aAAW;YAEV,mBAAmB,WAAW,YAAU,EAAE,qBAAqB;AAC9D,OAAI,CAAC,eACH,OAAM,IAAI,MACR,wFACD;AAGH,UACE,4CACGC,YACD,oBAACC;IACC,MAAK;IACL,OAAM;IACA;IACN,SAAQ;IACR,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,QAAQ,UAAU,CAC/B;cAED,oBAAC;KAAK,MAAM;eACV,oBAAC,eAAa;MACT;KACA,IACR;IAEL;GACM"}

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

@@ -12,7 +12,7 @@
 
 import { ChipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime69 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/chip/index.d.ts
 
@@ -23,55 +23,77 @@ import * as react_jsx_runtime69 from "react/jsx-runtime";
  * Includes variants for deletable and selectable chips with keyboard navigation and
  * accessibility features. Perfect for tags, filters, or multi-selection interfaces.
  *
+ * @param props - The chip props.
+ * @param props.ref - Reference to the chip element.
+ * @param props.className - Additional CSS class names for styling.
+ * @param props.color - Semantic color variant.
+ * @param props.size - Size of the chip.
+ * @param props.children - Chip content (text, icons, or both).
+ * @returns The chip component.
+ *
  * @example
+ * ```tsx
  * // Basic chip
  * <Chip>JavaScript</Chip>
+ * ```
  *
  * @example
+ * ```tsx
  * // Chip with color variants
  * <Chip color="info">Information</Chip>
  * <Chip color="advisory">Warning</Chip>
  * <Chip color="normal">Success</Chip>
  * <Chip color="serious">Caution</Chip>
  * <Chip color="critical">Error</Chip>
+ * ```
  *
  * @example
+ * ```tsx
  * // Chip with icon
  * <Chip color="info">
  *   <Icon><Placeholder /></Icon>
  *   With Icon
  * </Chip>
+ * ```
  *
  * @example
+ * ```tsx
  * // Chip with size variants
  * <Chip size="medium">Medium Chip</Chip>
  * <Chip size="small">Small Chip</Chip>
+ * ```
  *
  * @example
+ * ```tsx
  * // Chip list with multiple items
  * <ChipList>
  *   <Chip color="info">React</Chip>
  *   <Chip color="advisory">TypeScript</Chip>
  *   <Chip color="normal">Node.js</Chip>
  * </ChipList>
+ * ```
  *
  * @example
+ * ```tsx
  * // Deletable chips
  * <ChipList onRemove={(keys) => console.log('removed', keys)}>
  *   <DeletableChip id="tag1">Removable Tag</DeletableChip>
  * </ChipList>
+ * ```
  *
  * @example
+ * ```tsx
  * // Selectable chips with color
  * <ChipList selectionMode="single">
  *   <SelectableChip id="up" color="normal">UP</SelectableChip>
  *   <SelectableChip id="down" color="critical">DOWN</SelectableChip>
  * </ChipList>
+ * ```
  */
 declare function Chip({
   ref,
   ...props
-}: ChipProps): react_jsx_runtime69.JSX.Element;
+}: ChipProps): react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Chip };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.js

@@ -31,50 +31,72 @@ import styles from "./styles.module.css";
 * Includes variants for deletable and selectable chips with keyboard navigation and
 * accessibility features. Perfect for tags, filters, or multi-selection interfaces.
 *
+* @param props - The chip props.
+* @param props.ref - Reference to the chip element.
+* @param props.className - Additional CSS class names for styling.
+* @param props.color - Semantic color variant.
+* @param props.size - Size of the chip.
+* @param props.children - Chip content (text, icons, or both).
+* @returns The chip component.
+*
 * @example
+* ```tsx
 * // Basic chip
 * <Chip>JavaScript</Chip>
+* ```
 *
 * @example
+* ```tsx
 * // Chip with color variants
 * <Chip color="info">Information</Chip>
 * <Chip color="advisory">Warning</Chip>
 * <Chip color="normal">Success</Chip>
 * <Chip color="serious">Caution</Chip>
 * <Chip color="critical">Error</Chip>
+* ```
 *
 * @example
+* ```tsx
 * // Chip with icon
 * <Chip color="info">
 *   <Icon><Placeholder /></Icon>
 *   With Icon
 * </Chip>
+* ```
 *
 * @example
+* ```tsx
 * // Chip with size variants
 * <Chip size="medium">Medium Chip</Chip>
 * <Chip size="small">Small Chip</Chip>
+* ```
 *
 * @example
+* ```tsx
 * // Chip list with multiple items
 * <ChipList>
 *   <Chip color="info">React</Chip>
 *   <Chip color="advisory">TypeScript</Chip>
 *   <Chip color="normal">Node.js</Chip>
 * </ChipList>
+* ```
 *
 * @example
+* ```tsx
 * // Deletable chips
 * <ChipList onRemove={(keys) => console.log('removed', keys)}>
 *   <DeletableChip id="tag1">Removable Tag</DeletableChip>
 * </ChipList>
+* ```
 *
 * @example
+* ```tsx
 * // Selectable chips with color
 * <ChipList selectionMode="single">
 *   <SelectableChip id="up" color="normal">UP</SelectableChip>
 *   <SelectableChip id="down" color="critical">DOWN</SelectableChip>
 * </ChipList>
+* ```
 */
 function Chip({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, ChipContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaTag"],"sources":["../../../src/components/chip/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 { useContext } from 'react';\nimport { Tag as AriaTag, useContextProps } from 'react-aria-components';\nimport { IconProvider } from '../icon/context';\nimport { ChipContext } from './context';\nimport { ChipListRenderingContext } from './list';\nimport styles from './styles.module.css';\nimport type { ChipProps } from './types';\n\n/**\n * Chip - A compact element for displaying tags, filters, or selectable items\n *\n * Provides flexible chip functionality supporting both individual chips and chip lists.\n * Includes variants for deletable and selectable chips with keyboard navigation and\n * accessibility features. Perfect for tags, filters, or multi-selection interfaces.\n *\n * @example\n * // Basic chip\n * <Chip>JavaScript</Chip>\n *\n * @example\n * // Chip with color variants\n * <Chip color=\"info\">Information</Chip>\n * <Chip color=\"advisory\">Warning</Chip>\n * <Chip color=\"normal\">Success</Chip>\n * <Chip color=\"serious\">Caution</Chip>\n * <Chip color=\"critical\">Error</Chip>\n *\n * @example\n * // Chip with icon\n * <Chip color=\"info\">\n *   <Icon><Placeholder /></Icon>\n *   With Icon\n * </Chip>\n *\n * @example\n * // Chip with size variants\n * <Chip size=\"medium\">Medium Chip</Chip>\n * <Chip size=\"small\">Small Chip</Chip>\n *\n * @example\n * // Chip list with multiple items\n * <ChipList>\n *   <Chip color=\"info\">React</Chip>\n *   <Chip color=\"advisory\">TypeScript</Chip>\n *   <Chip color=\"normal\">Node.js</Chip>\n * </ChipList>\n *\n * @example\n * // Deletable chips\n * <ChipList onRemove={(keys) => console.log('removed', keys)}>\n *   <DeletableChip id=\"tag1\">Removable Tag</DeletableChip>\n * </ChipList>\n *\n * @example\n * // Selectable chips with color\n * <ChipList selectionMode=\"single\">\n *   <SelectableChip id=\"up\" color=\"normal\">UP</SelectableChip>\n *   <SelectableChip id=\"down\" color=\"critical\">DOWN</SelectableChip>\n * </ChipList>\n */\nexport function Chip({ ref, ...props }: ChipProps) {\n  [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n  const context = useContext(ChipListRenderingContext);\n  const Component = context ? AriaTag : 'div';\n  const { className, color = 'info', size = 'medium', ...rest } = props;\n\n  return (\n    <IconProvider size={size === 'medium' ? 'small' : 'xsmall'}>\n      <Component\n        {...rest}\n        ref={ref}\n        className={clsx('group/chip', styles.chip, className)}\n        data-color={color}\n        data-size={size}\n      />\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,KAAK,EAAE,KAAK,GAAG,SAAoB;AACjD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAG/D,MAAM,YADU,WAAW,yBAAyB,GACxBA,MAAU;CACtC,MAAM,EAAE,WAAW,QAAQ,QAAQ,OAAO,UAAU,GAAG,SAAS;AAEhE,QACE,oBAAC;EAAa,MAAM,SAAS,WAAW,UAAU;YAChD,oBAAC;GACC,GAAI;GACC;GACL,WAAW,KAAK,cAAc,OAAO,MAAM,UAAU;GACrD,cAAY;GACZ,aAAW;IACX;GACW"}
+{"version":3,"file":"index.js","names":["AriaTag"],"sources":["../../../src/components/chip/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 { useContext } from 'react';\nimport { Tag as AriaTag, useContextProps } from 'react-aria-components';\nimport { IconProvider } from '../icon/context';\nimport { ChipContext } from './context';\nimport { ChipListRenderingContext } from './list';\nimport styles from './styles.module.css';\nimport type { ChipProps } from './types';\n\n/**\n * Chip - A compact element for displaying tags, filters, or selectable items\n *\n * Provides flexible chip functionality supporting both individual chips and chip lists.\n * Includes variants for deletable and selectable chips with keyboard navigation and\n * accessibility features. Perfect for tags, filters, or multi-selection interfaces.\n *\n * @param props - The chip props.\n * @param props.ref - Reference to the chip element.\n * @param props.className - Additional CSS class names for styling.\n * @param props.color - Semantic color variant.\n * @param props.size - Size of the chip.\n * @param props.children - Chip content (text, icons, or both).\n * @returns The chip component.\n *\n * @example\n * ```tsx\n * // Basic chip\n * <Chip>JavaScript</Chip>\n * ```\n *\n * @example\n * ```tsx\n * // Chip with color variants\n * <Chip color=\"info\">Information</Chip>\n * <Chip color=\"advisory\">Warning</Chip>\n * <Chip color=\"normal\">Success</Chip>\n * <Chip color=\"serious\">Caution</Chip>\n * <Chip color=\"critical\">Error</Chip>\n * ```\n *\n * @example\n * ```tsx\n * // Chip with icon\n * <Chip color=\"info\">\n *   <Icon><Placeholder /></Icon>\n *   With Icon\n * </Chip>\n * ```\n *\n * @example\n * ```tsx\n * // Chip with size variants\n * <Chip size=\"medium\">Medium Chip</Chip>\n * <Chip size=\"small\">Small Chip</Chip>\n * ```\n *\n * @example\n * ```tsx\n * // Chip list with multiple items\n * <ChipList>\n *   <Chip color=\"info\">React</Chip>\n *   <Chip color=\"advisory\">TypeScript</Chip>\n *   <Chip color=\"normal\">Node.js</Chip>\n * </ChipList>\n * ```\n *\n * @example\n * ```tsx\n * // Deletable chips\n * <ChipList onRemove={(keys) => console.log('removed', keys)}>\n *   <DeletableChip id=\"tag1\">Removable Tag</DeletableChip>\n * </ChipList>\n * ```\n *\n * @example\n * ```tsx\n * // Selectable chips with color\n * <ChipList selectionMode=\"single\">\n *   <SelectableChip id=\"up\" color=\"normal\">UP</SelectableChip>\n *   <SelectableChip id=\"down\" color=\"critical\">DOWN</SelectableChip>\n * </ChipList>\n * ```\n */\nexport function Chip({ ref, ...props }: ChipProps) {\n  [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n  const context = useContext(ChipListRenderingContext);\n  const Component = context ? AriaTag : 'div';\n  const { className, color = 'info', size = 'medium', ...rest } = props;\n\n  return (\n    <IconProvider size={size === 'medium' ? 'small' : 'xsmall'}>\n      <Component\n        {...rest}\n        ref={ref}\n        className={clsx('group/chip', styles.chip, className)}\n        data-color={color}\n        data-size={size}\n      />\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,SAAgB,KAAK,EAAE,KAAK,GAAG,SAAoB;AACjD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAG/D,MAAM,YADU,WAAW,yBAAyB,GACxBA,MAAU;CACtC,MAAM,EAAE,WAAW,QAAQ,QAAQ,OAAO,UAAU,GAAG,SAAS;AAEhE,QACE,oBAAC;EAAa,MAAM,SAAS,WAAW,UAAU;YAChD,oBAAC;GACC,GAAI;GACC;GACL,WAAW,KAAK,cAAc,OAAO,MAAM,UAAU;GACrD,cAAY;GACZ,aAAW;IACX;GACW"}

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

@@ -12,15 +12,60 @@
 
 import { ChipListProps } from "./types.js";
 import "client-only";
-import * as react17 from "react";
-import * as react_jsx_runtime60 from "react/jsx-runtime";
+import * as react9 from "react";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/chip/list.d.ts
-declare const ChipListRenderingContext: react17.Context<boolean>;
+/**
+ * React context indicating whether chips are being rendered inside a ChipList.
+ */
+declare const ChipListRenderingContext: react9.Context<boolean>;
+/**
+ * ChipList - Container component for grouping multiple chips with shared behavior.
+ *
+ * Provides context for size and color, and enables selection and removal functionality.
+ *
+ * @param props - The chip list props.
+ * @param props.ref - Reference to the list container element.
+ * @param props.children - Chip components to render in the list.
+ * @param props.className - Additional CSS class names for styling.
+ * @param props.color - Default color for all chips in the list.
+ * @param props.size - Default size for all chips in the list.
+ * @param props.selectionMode - Enable single or multiple selection.
+ * @param props.onRemove - Callback when chips are removed.
+ * @returns The chip list component.
+ *
+ * @example
+ * ```tsx
+ * // Basic list
+ * <ChipList>
+ *   <Chip color="info">React</Chip>
+ *   <Chip color="advisory">TypeScript</Chip>
+ * </ChipList>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Selectable chips
+ * <ChipList selectionMode="multiple" onSelectionChange={handleChange}>
+ *   <SelectableChip id="react">React</SelectableChip>
+ *   <SelectableChip id="vue">Vue</SelectableChip>
+ * </ChipList>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Deletable chips
+ * <ChipList onRemove={(keys) => console.log('Removed:', keys)}>
+ *   <DeletableChip id="tag1">Tag 1</DeletableChip>
+ *   <DeletableChip id="tag2">Tag 2</DeletableChip>
+ * </ChipList>
+ * ```
+ */
 declare function ChipList<T extends object>({
   ref,
   ...props
-}: ChipListProps<T>): react_jsx_runtime60.JSX.Element;
+}: ChipListProps<T>): react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ChipList, ChipListRenderingContext };
 //# sourceMappingURL=list.d.ts.map

package/dist/components/chip/list.js

@@ -22,7 +22,52 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/chip/list.tsx
+/**
+* React context indicating whether chips are being rendered inside a ChipList.
+*/
 const ChipListRenderingContext = createContext(false);
+/**
+* ChipList - Container component for grouping multiple chips with shared behavior.
+*
+* Provides context for size and color, and enables selection and removal functionality.
+*
+* @param props - The chip list props.
+* @param props.ref - Reference to the list container element.
+* @param props.children - Chip components to render in the list.
+* @param props.className - Additional CSS class names for styling.
+* @param props.color - Default color for all chips in the list.
+* @param props.size - Default size for all chips in the list.
+* @param props.selectionMode - Enable single or multiple selection.
+* @param props.onRemove - Callback when chips are removed.
+* @returns The chip list component.
+*
+* @example
+* ```tsx
+* // Basic list
+* <ChipList>
+*   <Chip color="info">React</Chip>
+*   <Chip color="advisory">TypeScript</Chip>
+* </ChipList>
+* ```
+*
+* @example
+* ```tsx
+* // Selectable chips
+* <ChipList selectionMode="multiple" onSelectionChange={handleChange}>
+*   <SelectableChip id="react">React</SelectableChip>
+*   <SelectableChip id="vue">Vue</SelectableChip>
+* </ChipList>
+* ```
+*
+* @example
+* ```tsx
+* // Deletable chips
+* <ChipList onRemove={(keys) => console.log('Removed:', keys)}>
+*   <DeletableChip id="tag1">Tag 1</DeletableChip>
+*   <DeletableChip id="tag2">Tag 2</DeletableChip>
+* </ChipList>
+* ```
+*/
 function ChipList({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, ChipContext);
 	const { children, className, color, dependencies, items, renderEmptyState, size = "small", ...rest } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["AriaTagGroup","AriaTagList","className"],"sources":["../../../src/components/chip/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { createContext } from 'react';\nimport {\n  TagGroup as AriaTagGroup,\n  TagList as AriaTagList,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { ChipContext, ChipProvider } from './context';\nimport styles from './styles.module.css';\nimport type { ChipListProps } from './types';\n\nexport const ChipListRenderingContext = createContext(false);\n\nexport function ChipList<T extends object>({\n  ref,\n  ...props\n}: ChipListProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n  const {\n    children,\n    className,\n    color,\n    dependencies,\n    items,\n    renderEmptyState,\n    size = 'small',\n    ...rest\n  } = props;\n\n  return (\n    <ChipListRenderingContext.Provider value>\n      <ChipProvider color={color} size={size}>\n        <AriaTagGroup {...rest}>\n          <AriaTagList<T>\n            ref={ref}\n            className={composeRenderProps(className, (className) =>\n              clsx('group/chip-list', styles.list, className),\n            )}\n            dependencies={dependencies}\n            items={items}\n            renderEmptyState={renderEmptyState}\n          >\n            {children}\n          </AriaTagList>\n        </AriaTagGroup>\n      </ChipProvider>\n    </ChipListRenderingContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,2BAA2B,cAAc,MAAM;AAE5D,SAAgB,SAA2B,EACzC,KACA,GAAG,SACgB;AACnB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EACJ,UACA,WACA,OACA,cACA,OACA,kBACA,OAAO,SACP,GAAG,SACD;AAEJ,QACE,oBAAC,yBAAyB;EAAS;YACjC,oBAAC;GAAoB;GAAa;aAChC,oBAACA;IAAa,GAAI;cAChB,oBAACC;KACM;KACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,mBAAmB,OAAO,MAAMC,YAAU,CAChD;KACa;KACP;KACW;KAEjB;MACW;KACD;IACF;GACmB"}
+{"version":3,"file":"list.js","names":["AriaTagGroup","AriaTagList","className"],"sources":["../../../src/components/chip/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { createContext } from 'react';\nimport {\n  TagGroup as AriaTagGroup,\n  TagList as AriaTagList,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { ChipContext, ChipProvider } from './context';\nimport styles from './styles.module.css';\nimport type { ChipListProps } from './types';\n\n/**\n * React context indicating whether chips are being rendered inside a ChipList.\n */\nexport const ChipListRenderingContext = createContext(false);\n\n/**\n * ChipList - Container component for grouping multiple chips with shared behavior.\n *\n * Provides context for size and color, and enables selection and removal functionality.\n *\n * @param props - The chip list props.\n * @param props.ref - Reference to the list container element.\n * @param props.children - Chip components to render in the list.\n * @param props.className - Additional CSS class names for styling.\n * @param props.color - Default color for all chips in the list.\n * @param props.size - Default size for all chips in the list.\n * @param props.selectionMode - Enable single or multiple selection.\n * @param props.onRemove - Callback when chips are removed.\n * @returns The chip list component.\n *\n * @example\n * ```tsx\n * // Basic list\n * <ChipList>\n *   <Chip color=\"info\">React</Chip>\n *   <Chip color=\"advisory\">TypeScript</Chip>\n * </ChipList>\n * ```\n *\n * @example\n * ```tsx\n * // Selectable chips\n * <ChipList selectionMode=\"multiple\" onSelectionChange={handleChange}>\n *   <SelectableChip id=\"react\">React</SelectableChip>\n *   <SelectableChip id=\"vue\">Vue</SelectableChip>\n * </ChipList>\n * ```\n *\n * @example\n * ```tsx\n * // Deletable chips\n * <ChipList onRemove={(keys) => console.log('Removed:', keys)}>\n *   <DeletableChip id=\"tag1\">Tag 1</DeletableChip>\n *   <DeletableChip id=\"tag2\">Tag 2</DeletableChip>\n * </ChipList>\n * ```\n */\nexport function ChipList<T extends object>({\n  ref,\n  ...props\n}: ChipListProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n  const {\n    children,\n    className,\n    color,\n    dependencies,\n    items,\n    renderEmptyState,\n    size = 'small',\n    ...rest\n  } = props;\n\n  return (\n    <ChipListRenderingContext.Provider value>\n      <ChipProvider color={color} size={size}>\n        <AriaTagGroup {...rest}>\n          <AriaTagList<T>\n            ref={ref}\n            className={composeRenderProps(className, (className) =>\n              clsx('group/chip-list', styles.list, className),\n            )}\n            dependencies={dependencies}\n            items={items}\n            renderEmptyState={renderEmptyState}\n          >\n            {children}\n          </AriaTagList>\n        </AriaTagGroup>\n      </ChipProvider>\n    </ChipListRenderingContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,2BAA2B,cAAc,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4C5D,SAAgB,SAA2B,EACzC,KACA,GAAG,SACgB;AACnB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EACJ,UACA,WACA,OACA,cACA,OACA,kBACA,OAAO,SACP,GAAG,SACD;AAEJ,QACE,oBAAC,yBAAyB;EAAS;YACjC,oBAAC;GAAoB;GAAa;aAChC,oBAACA;IAAa,GAAI;cAChB,oBAACC;KACM;KACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,mBAAmB,OAAO,MAAMC,YAAU,CAChD;KACa;KACP;KACW;KAEjB;MACW;KACD;IACF;GACmB"}

package/dist/components/chip/selectable.d.ts

@@ -12,13 +12,45 @@
 
 import { SelectableChipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime62 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/chip/selectable.d.ts
+
+/**
+ * SelectableChip - Interactive chip that can be selected/deselected for filtering.
+ *
+ * Must be used inside a ChipList with selectionMode set to "single" or "multiple".
+ *
+ * @param props - The selectable chip props.
+ * @param props.ref - Reference to the chip element.
+ * @param props.id - Unique identifier for selection tracking.
+ * @param props.className - Additional CSS class names for styling.
+ * @param props.color - Semantic color variant.
+ * @param props.size - Size of the chip.
+ * @param props.children - Chip content.
+ * @returns The selectable chip component.
+ *
+ * @example
+ * ```tsx
+ * <ChipList selectionMode="multiple">
+ *   <SelectableChip id="react">React</SelectableChip>
+ *   <SelectableChip id="vue">Vue</SelectableChip>
+ * </ChipList>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With colors
+ * <ChipList selectionMode="single">
+ *   <SelectableChip id="up" color="normal">UP</SelectableChip>
+ *   <SelectableChip id="down" color="critical">DOWN</SelectableChip>
+ * </ChipList>
+ * ```
+ */
 declare function SelectableChip({
   ref,
   ...props
-}: SelectableChipProps): react_jsx_runtime62.JSX.Element;
+}: SelectableChipProps): react_jsx_runtime22.JSX.Element;
 //#endregion
 export { SelectableChip };
 //# sourceMappingURL=selectable.d.ts.map

package/dist/components/chip/selectable.js

@@ -21,6 +21,37 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/chip/selectable.tsx
+/**
+* SelectableChip - Interactive chip that can be selected/deselected for filtering.
+*
+* Must be used inside a ChipList with selectionMode set to "single" or "multiple".
+*
+* @param props - The selectable chip props.
+* @param props.ref - Reference to the chip element.
+* @param props.id - Unique identifier for selection tracking.
+* @param props.className - Additional CSS class names for styling.
+* @param props.color - Semantic color variant.
+* @param props.size - Size of the chip.
+* @param props.children - Chip content.
+* @returns The selectable chip component.
+*
+* @example
+* ```tsx
+* <ChipList selectionMode="multiple">
+*   <SelectableChip id="react">React</SelectableChip>
+*   <SelectableChip id="vue">Vue</SelectableChip>
+* </ChipList>
+* ```
+*
+* @example
+* ```tsx
+* // With colors
+* <ChipList selectionMode="single">
+*   <SelectableChip id="up" color="normal">UP</SelectableChip>
+*   <SelectableChip id="down" color="critical">DOWN</SelectableChip>
+* </ChipList>
+* ```
+*/
 function SelectableChip({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, ChipContext);
 	const { className, color, size = "medium", ...rest } = props;