@fragments-sdk/ui 0.12.0 → 0.14.0

package/dist/components/Checkbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport styles from './Checkbox.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Checkbox for boolean or indeterminate selections in forms.\n * @see https://usefragments.com/components/checkbox\n */\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultChecked'> {\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Whether the checkbox is in an indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Size variant.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Name attribute for form submission */\n  name?: string;\n  /** Value attribute for form submission */\n  value?: string;\n  /** ID for the checkbox input */\n  id?: string;\n  /** Accessible label for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship for icon-only mode */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      indeterminate = false,\n      disabled = false,\n      required = false,\n      size = 'md',\n      label,\n      description,\n      name,\n      value,\n      className,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const checkboxId = id ?? `checkbox-${generatedId}`;\n    const labelId = label ? `${checkboxId}-label` : undefined;\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\n\n    const checkboxClasses = [\n      styles.checkbox,\n      size === 'sm' && styles.sm,\n      size === 'lg' && styles.lg,\n    ].filter(Boolean).join(' ');\n\n    const labelClasses = [\n      styles.label,\n      size === 'sm' && styles.labelSm,\n      size === 'lg' && styles.labelLg,\n    ].filter(Boolean).join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n\n    // If no label/description, render just the checkbox\n    if (!label && !description) {\n      return (\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={[checkboxClasses, className].filter(Boolean).join(' ')}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n      );\n    }\n\n    return (\n      <label\n        {...htmlProps}\n        className={wrapperClasses}\n        data-disabled={disabled || undefined}\n        data-has-description={description ? true : undefined}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n          className={checkboxClasses}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n        <div className={styles.content}>\n          <span id={labelId} className={labelClasses}>{label}</span>\n          {description && (\n            <span id={descriptionId} className={styles.description}>{description}</span>\n          )}\n        </div>\n      </label>\n    );\n  }\n);\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n  Root: CheckboxRoot,\n});\n"],"names":["jsx","React","Checkbox","styles","BaseCheckbox","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport styles from './Checkbox.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Checkbox for boolean or indeterminate selections in forms.\n * @see https://usefragments.com/components/checkbox\n */\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultChecked'> {\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Alias for onCheckedChange */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is in an indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Size variant.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Name attribute for form submission */\n  name?: string;\n  /** Value attribute for form submission */\n  value?: string;\n  /** ID for the checkbox input */\n  id?: string;\n  /** Class applied directly to the checkbox control element */\n  controlClassName?: string;\n  /** Class applied to the label/description content wrapper */\n  contentClassName?: string;\n  /** Accessible label for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship for icon-only mode */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      onChange,\n      indeterminate = false,\n      disabled = false,\n      required = false,\n      size = 'md',\n      label,\n      description,\n      name,\n      value,\n      className,\n      controlClassName,\n      contentClassName,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const checkboxId = id ?? `checkbox-${generatedId}`;\n    const labelId = label ? `${checkboxId}-label` : undefined;\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\n\n    const checkboxClasses = [\n      styles.checkbox,\n      size === 'sm' && styles.sm,\n      size === 'lg' && styles.lg,\n      controlClassName,\n    ].filter(Boolean).join(' ');\n\n    const labelClasses = [\n      styles.label,\n      size === 'sm' && styles.labelSm,\n      size === 'lg' && styles.labelLg,\n    ].filter(Boolean).join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n    const handleCheckedChange = onChange ?? onCheckedChange;\n\n    // If no label/description, render just the checkbox\n    if (!label && !description) {\n      const iconOnlyHtmlProps = htmlProps as unknown as Record<string, unknown>;\n      return (\n        <BaseCheckbox.Root\n          {...iconOnlyHtmlProps}\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={handleCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={[checkboxClasses, className].filter(Boolean).join(' ')}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n      );\n    }\n\n    return (\n      <label\n        {...htmlProps}\n        className={wrapperClasses}\n        data-disabled={disabled || undefined}\n        data-has-description={description ? true : undefined}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={handleCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n          className={checkboxClasses}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n        <div className={[styles.content, contentClassName].filter(Boolean).join(' ')}>\n          <span id={labelId} className={labelClasses}>{label}</span>\n          {description && (\n            <span id={descriptionId} className={styles.description}>{description}</span>\n          )}\n        </div>\n      </label>\n    );\n  }\n);\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n  Root: CheckboxRoot,\n});\n"],"names":["jsx","React","Checkbox","styles","BaseCheckbox","jsxs"],"mappings":"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"}

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

@@ -10,6 +10,8 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElemen
     defaultChecked?: boolean;
     /** Callback when checked state changes */
     onCheckedChange?: (checked: boolean) => void;
+    /** Alias for onCheckedChange */
+    onChange?: (checked: boolean) => void;
     /** Whether the checkbox is in an indeterminate state */
     indeterminate?: boolean;
     /** Whether the checkbox is disabled */
@@ -29,6 +31,10 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElemen
     value?: string;
     /** ID for the checkbox input */
     id?: string;
+    /** Class applied directly to the checkbox control element */
+    controlClassName?: string;
+    /** Class applied to the label/description content wrapper */
+    contentClassName?: string;
     /** Accessible label for icon-only mode */
     'aria-label'?: string;
     /** Accessible labelled-by relationship for icon-only mode */

package/dist/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC;IAChH,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA2JD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC;IAChH,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAkKD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/Checkbox/index.js

@@ -43,6 +43,7 @@ const CheckboxRoot = React.forwardRef(
     checked,
     defaultChecked,
     onCheckedChange,
+    onChange,
     indeterminate = false,
     disabled = false,
     required = false,
@@ -52,6 +53,8 @@ const CheckboxRoot = React.forwardRef(
     name,
     value,
     className,
+    controlClassName,
+    contentClassName,
     id,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -65,7 +68,8 @@ const CheckboxRoot = React.forwardRef(
     const checkboxClasses = [
       styles.checkbox,
       size === "sm" && styles.sm,
-      size === "lg" && styles.lg
+      size === "lg" && styles.lg,
+      controlClassName
     ].filter(Boolean).join(" ");
     const labelClasses = [
       styles.label,
@@ -73,14 +77,17 @@ const CheckboxRoot = React.forwardRef(
       size === "lg" && styles.labelLg
     ].filter(Boolean).join(" ");
     const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
+    const handleCheckedChange = onChange ?? onCheckedChange;
     if (!label && !description) {
+      const iconOnlyHtmlProps = htmlProps;
       return /* @__PURE__ */ jsx(
         Checkbox$1.Root,
         {
+          ...iconOnlyHtmlProps,
           ref,
           checked,
           defaultChecked,
-          onCheckedChange,
+          onCheckedChange: handleCheckedChange,
           indeterminate,
           disabled,
           required,
@@ -109,7 +116,7 @@ const CheckboxRoot = React.forwardRef(
               ref,
               checked,
               defaultChecked,
-              onCheckedChange,
+              onCheckedChange: handleCheckedChange,
               indeterminate,
               disabled,
               required,
@@ -123,7 +130,7 @@ const CheckboxRoot = React.forwardRef(
               children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: styles.indicator, keepMounted: true, children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          /* @__PURE__ */ jsxs("div", { className: [styles.content, contentClassName].filter(Boolean).join(" "), children: [
             /* @__PURE__ */ jsx("span", { id: labelId, className: labelClasses, children: label }),
             description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: description })
           ] })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport styles from './Checkbox.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Checkbox for boolean or indeterminate selections in forms.\n * @see https://usefragments.com/components/checkbox\n */\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultChecked'> {\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Whether the checkbox is in an indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Size variant.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Name attribute for form submission */\n  name?: string;\n  /** Value attribute for form submission */\n  value?: string;\n  /** ID for the checkbox input */\n  id?: string;\n  /** Accessible label for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship for icon-only mode */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      indeterminate = false,\n      disabled = false,\n      required = false,\n      size = 'md',\n      label,\n      description,\n      name,\n      value,\n      className,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const checkboxId = id ?? `checkbox-${generatedId}`;\n    const labelId = label ? `${checkboxId}-label` : undefined;\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\n\n    const checkboxClasses = [\n      styles.checkbox,\n      size === 'sm' && styles.sm,\n      size === 'lg' && styles.lg,\n    ].filter(Boolean).join(' ');\n\n    const labelClasses = [\n      styles.label,\n      size === 'sm' && styles.labelSm,\n      size === 'lg' && styles.labelLg,\n    ].filter(Boolean).join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n\n    // If no label/description, render just the checkbox\n    if (!label && !description) {\n      return (\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={[checkboxClasses, className].filter(Boolean).join(' ')}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n      );\n    }\n\n    return (\n      <label\n        {...htmlProps}\n        className={wrapperClasses}\n        data-disabled={disabled || undefined}\n        data-has-description={description ? true : undefined}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n          className={checkboxClasses}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n        <div className={styles.content}>\n          <span id={labelId} className={labelClasses}>{label}</span>\n          {description && (\n            <span id={descriptionId} className={styles.description}>{description}</span>\n          )}\n        </div>\n      </label>\n    );\n  }\n);\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n  Root: CheckboxRoot,\n});\n"],"names":["Checkbox","BaseCheckbox"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport styles from './Checkbox.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Checkbox for boolean or indeterminate selections in forms.\n * @see https://usefragments.com/components/checkbox\n */\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultChecked'> {\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Alias for onCheckedChange */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is in an indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Size variant.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Name attribute for form submission */\n  name?: string;\n  /** Value attribute for form submission */\n  value?: string;\n  /** ID for the checkbox input */\n  id?: string;\n  /** Class applied directly to the checkbox control element */\n  controlClassName?: string;\n  /** Class applied to the label/description content wrapper */\n  contentClassName?: string;\n  /** Accessible label for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship for icon-only mode */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      onChange,\n      indeterminate = false,\n      disabled = false,\n      required = false,\n      size = 'md',\n      label,\n      description,\n      name,\n      value,\n      className,\n      controlClassName,\n      contentClassName,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const checkboxId = id ?? `checkbox-${generatedId}`;\n    const labelId = label ? `${checkboxId}-label` : undefined;\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\n\n    const checkboxClasses = [\n      styles.checkbox,\n      size === 'sm' && styles.sm,\n      size === 'lg' && styles.lg,\n      controlClassName,\n    ].filter(Boolean).join(' ');\n\n    const labelClasses = [\n      styles.label,\n      size === 'sm' && styles.labelSm,\n      size === 'lg' && styles.labelLg,\n    ].filter(Boolean).join(' ');\n\n    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');\n    const handleCheckedChange = onChange ?? onCheckedChange;\n\n    // If no label/description, render just the checkbox\n    if (!label && !description) {\n      const iconOnlyHtmlProps = htmlProps as unknown as Record<string, unknown>;\n      return (\n        <BaseCheckbox.Root\n          {...iconOnlyHtmlProps}\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={handleCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={[checkboxClasses, className].filter(Boolean).join(' ')}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n      );\n    }\n\n    return (\n      <label\n        {...htmlProps}\n        className={wrapperClasses}\n        data-disabled={disabled || undefined}\n        data-has-description={description ? true : undefined}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={handleCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n          className={checkboxClasses}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n        <div className={[styles.content, contentClassName].filter(Boolean).join(' ')}>\n          <span id={labelId} className={labelClasses}>{label}</span>\n          {description && (\n            <span id={descriptionId} className={styles.description}>{description}</span>\n          )}\n        </div>\n      </label>\n    );\n  }\n);\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n  Root: CheckboxRoot,\n});\n"],"names":["Checkbox","BaseCheckbox"],"mappings":"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"}

package/dist/components/Chip/index.cjs

@@ -86,7 +86,7 @@ const ChipBase = React__namespace.forwardRef(
   }
 );
 const EMPTY_CHIP_GROUP = [];
-function ChipGroupInner({ children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className }, ref) {
+function ChipGroupInner({ children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className, ...htmlProps }, ref) {
   const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : internalValue;
@@ -101,9 +101,17 @@ function ChipGroupInner({ children, value: controlledValue, defaultValue = EMPTY
     [currentValue, isControlled, onChange]
   );
   const classes = [Chip_module.default.group, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, children: React__namespace.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, children: React__namespace.Children.map(children, (child, index) => {
     if (!React__namespace.isValidElement(child)) return child;
-    const chipValue = child.props.value ?? (typeof child.props.children === "string" ? child.props.children : "");
+    const chipValue = (() => {
+      if (child.props.value != null) return child.props.value;
+      if (typeof child.props.children === "string") return child.props.children;
+      if (child.key != null) return String(child.key);
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("Chip.Group: Chips with non-string children should provide a `value` prop.");
+      }
+      return `__chip-${index}`;
+    })();
     return React__namespace.cloneElement(child, {
       selected: currentValue.includes(chipValue),
       onClick: (e) => {

package/dist/components/Chip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Chip.module.scss';\n\n/**\n * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.\n * @see https://usefragments.com/components/chip\n */\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`.\n   * @default \"filled\"\n   * @see https://usefragments.com/components/chip#variants */\n  variant?: 'filled' | 'outlined' | 'outline' | 'soft';\n  /** Chip size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the chip is selected */\n  selected?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Avatar element rendered before the label */\n  avatar?: React.ReactNode;\n  /** Makes chip removable. Called when X is clicked. */\n  onRemove?: () => void;\n  /** Value identifier used by Chip.Group */\n  value?: string;\n}\n\nexport interface ChipGroupProps {\n  children: React.ReactNode;\n  /** Controlled selected values */\n  value?: string[];\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[];\n  /** Called when selection changes */\n  onChange?: (value: string[]) => void;\n  className?: string;\n}\n\nconst ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(\n    {\n      children,\n      variant: variantProp = 'filled',\n      size = 'md',\n      selected = false,\n      disabled = false,\n      icon,\n      avatar,\n      onRemove,\n      className,\n      onClick,\n      value: _value,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // Resolve alias: \"outline\" → \"outlined\"\n    const variant = variantProp === 'outline' ? 'outlined' : variantProp;\n\n    const classes = [\n      styles.chip,\n      styles[size],\n      styles[variant],\n      selected && styles.selected,\n      onRemove && styles.withRemove,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onRemove?.();\n    };\n\n    const removeAriaLabel = `Remove ${typeof children === 'string' ? children : 'chip'}`;\n\n    const chipButton = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        disabled={disabled}\n        className={classes}\n        onClick={onClick}\n        {...htmlProps}\n      >\n        {avatar && (\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </button>\n    );\n\n    if (!onRemove) {\n      return chipButton;\n    }\n\n    return (\n      <span className={styles.removableChip} data-disabled={disabled || undefined}>\n        {chipButton}\n        <button\n          type=\"button\"\n          className={styles.remove}\n          onClick={handleRemoveClick}\n          aria-label={removeAriaLabel}\n          disabled={disabled}\n        >\n          &times;\n        </button>\n      </span>\n    );\n  }\n);\n\nconst EMPTY_CHIP_GROUP: string[] = [];\n\nfunction ChipGroupInner(\n  { children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className }: ChipGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const toggle = React.useCallback(\n    (chipValue: string) => {\n      const next = currentValue.includes(chipValue)\n        ? currentValue.filter((v) => v !== chipValue)\n        : [...currentValue, chipValue];\n\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      onChange?.(next);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div ref={ref} className={classes}>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement<ChipProps>(child)) return child;\n        const chipValue = child.props.value ?? (typeof child.props.children === 'string' ? child.props.children : '');\n        return React.cloneElement(child, {\n          selected: currentValue.includes(chipValue),\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            child.props.onClick?.(e);\n            if (!e.defaultPrevented) {\n              toggle(chipValue);\n            }\n          },\n        } as Partial<ChipProps>);\n      })}\n    </div>\n  );\n}\n\nconst ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);\n\n// Compose Chip with static Group property\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"names":["React","Chip","styles","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Chip.module.scss';\n\n/**\n * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.\n * @see https://usefragments.com/components/chip\n */\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`.\n   * @default \"filled\"\n   * @see https://usefragments.com/components/chip#variants */\n  variant?: 'filled' | 'outlined' | 'outline' | 'soft';\n  /** Chip size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the chip is selected */\n  selected?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Avatar element rendered before the label */\n  avatar?: React.ReactNode;\n  /** Makes chip removable. Called when X is clicked. */\n  onRemove?: () => void;\n  /** Value identifier used by Chip.Group */\n  value?: string;\n}\n\nexport interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {\n  children: React.ReactNode;\n  /** Controlled selected values */\n  value?: string[];\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[];\n  /** Called when selection changes */\n  onChange?: (value: string[]) => void;\n}\n\nconst ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(\n    {\n      children,\n      variant: variantProp = 'filled',\n      size = 'md',\n      selected = false,\n      disabled = false,\n      icon,\n      avatar,\n      onRemove,\n      className,\n      onClick,\n      value: _value,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // Resolve alias: \"outline\" → \"outlined\"\n    const variant = variantProp === 'outline' ? 'outlined' : variantProp;\n\n    const classes = [\n      styles.chip,\n      styles[size],\n      styles[variant],\n      selected && styles.selected,\n      onRemove && styles.withRemove,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onRemove?.();\n    };\n\n    const removeAriaLabel = `Remove ${typeof children === 'string' ? children : 'chip'}`;\n\n    const chipButton = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        disabled={disabled}\n        className={classes}\n        onClick={onClick}\n        {...htmlProps}\n      >\n        {avatar && (\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </button>\n    );\n\n    if (!onRemove) {\n      return chipButton;\n    }\n\n    return (\n      <span className={styles.removableChip} data-disabled={disabled || undefined}>\n        {chipButton}\n        <button\n          type=\"button\"\n          className={styles.remove}\n          onClick={handleRemoveClick}\n          aria-label={removeAriaLabel}\n          disabled={disabled}\n        >\n          &times;\n        </button>\n      </span>\n    );\n  }\n);\n\nconst EMPTY_CHIP_GROUP: string[] = [];\n\nfunction ChipGroupInner(\n  { children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className, ...htmlProps }: ChipGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const toggle = React.useCallback(\n    (chipValue: string) => {\n      const next = currentValue.includes(chipValue)\n        ? currentValue.filter((v) => v !== chipValue)\n        : [...currentValue, chipValue];\n\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      onChange?.(next);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div ref={ref} {...htmlProps} className={classes}>\n      {React.Children.map(children, (child, index) => {\n        if (!React.isValidElement<ChipProps>(child)) return child;\n        const chipValue = (() => {\n          if (child.props.value != null) return child.props.value;\n          if (typeof child.props.children === 'string') return child.props.children;\n          if (child.key != null) return String(child.key);\n          if (process.env.NODE_ENV !== 'production') {\n            // Non-string labels need an explicit value to avoid unstable group selection keys.\n            console.warn('Chip.Group: Chips with non-string children should provide a `value` prop.');\n          }\n          return `__chip-${index}`;\n        })();\n        return React.cloneElement(child, {\n          selected: currentValue.includes(chipValue),\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            child.props.onClick?.(e);\n            if (!e.defaultPrevented) {\n              toggle(chipValue);\n            }\n          },\n        } as Partial<ChipProps>);\n      })}\n    </div>\n  );\n}\n\nconst ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);\n\n// Compose Chip with static Group property\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"names":["React","Chip","styles","jsxs","jsx"],"mappings":"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"}

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

@@ -23,7 +23,7 @@ export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
     /** Value identifier used by Chip.Group */
     value?: string;
 }
-export interface ChipGroupProps {
+export interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     children: React.ReactNode;
     /** Controlled selected values */
     value?: string[];
@@ -31,7 +31,6 @@ export interface ChipGroupProps {
     defaultValue?: string[];
     /** Called when selection changes */
     onChange?: (value: string[]) => void;
-    className?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>> & {
     Group: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;gEAE4D;IAC5D,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsID,eAAO,MAAM,IAAI;;CAAgD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;gEAE4D;IAC5D,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACzG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AA+ID,eAAO,MAAM,IAAI;;CAAgD,CAAC"}

package/dist/components/Chip/index.js

@@ -67,7 +67,7 @@ const ChipBase = React.forwardRef(
   }
 );
 const EMPTY_CHIP_GROUP = [];
-function ChipGroupInner({ children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className }, ref) {
+function ChipGroupInner({ children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className, ...htmlProps }, ref) {
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : internalValue;
@@ -82,9 +82,17 @@ function ChipGroupInner({ children, value: controlledValue, defaultValue = EMPTY
     [currentValue, isControlled, onChange]
   );
   const classes = [styles.group, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: React.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, children: React.Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) return child;
-    const chipValue = child.props.value ?? (typeof child.props.children === "string" ? child.props.children : "");
+    const chipValue = (() => {
+      if (child.props.value != null) return child.props.value;
+      if (typeof child.props.children === "string") return child.props.children;
+      if (child.key != null) return String(child.key);
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("Chip.Group: Chips with non-string children should provide a `value` prop.");
+      }
+      return `__chip-${index}`;
+    })();
     return React.cloneElement(child, {
       selected: currentValue.includes(chipValue),
       onClick: (e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Chip.module.scss';\n\n/**\n * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.\n * @see https://usefragments.com/components/chip\n */\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`.\n   * @default \"filled\"\n   * @see https://usefragments.com/components/chip#variants */\n  variant?: 'filled' | 'outlined' | 'outline' | 'soft';\n  /** Chip size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the chip is selected */\n  selected?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Avatar element rendered before the label */\n  avatar?: React.ReactNode;\n  /** Makes chip removable. Called when X is clicked. */\n  onRemove?: () => void;\n  /** Value identifier used by Chip.Group */\n  value?: string;\n}\n\nexport interface ChipGroupProps {\n  children: React.ReactNode;\n  /** Controlled selected values */\n  value?: string[];\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[];\n  /** Called when selection changes */\n  onChange?: (value: string[]) => void;\n  className?: string;\n}\n\nconst ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(\n    {\n      children,\n      variant: variantProp = 'filled',\n      size = 'md',\n      selected = false,\n      disabled = false,\n      icon,\n      avatar,\n      onRemove,\n      className,\n      onClick,\n      value: _value,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // Resolve alias: \"outline\" → \"outlined\"\n    const variant = variantProp === 'outline' ? 'outlined' : variantProp;\n\n    const classes = [\n      styles.chip,\n      styles[size],\n      styles[variant],\n      selected && styles.selected,\n      onRemove && styles.withRemove,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onRemove?.();\n    };\n\n    const removeAriaLabel = `Remove ${typeof children === 'string' ? children : 'chip'}`;\n\n    const chipButton = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        disabled={disabled}\n        className={classes}\n        onClick={onClick}\n        {...htmlProps}\n      >\n        {avatar && (\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </button>\n    );\n\n    if (!onRemove) {\n      return chipButton;\n    }\n\n    return (\n      <span className={styles.removableChip} data-disabled={disabled || undefined}>\n        {chipButton}\n        <button\n          type=\"button\"\n          className={styles.remove}\n          onClick={handleRemoveClick}\n          aria-label={removeAriaLabel}\n          disabled={disabled}\n        >\n          &times;\n        </button>\n      </span>\n    );\n  }\n);\n\nconst EMPTY_CHIP_GROUP: string[] = [];\n\nfunction ChipGroupInner(\n  { children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className }: ChipGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const toggle = React.useCallback(\n    (chipValue: string) => {\n      const next = currentValue.includes(chipValue)\n        ? currentValue.filter((v) => v !== chipValue)\n        : [...currentValue, chipValue];\n\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      onChange?.(next);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div ref={ref} className={classes}>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement<ChipProps>(child)) return child;\n        const chipValue = child.props.value ?? (typeof child.props.children === 'string' ? child.props.children : '');\n        return React.cloneElement(child, {\n          selected: currentValue.includes(chipValue),\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            child.props.onClick?.(e);\n            if (!e.defaultPrevented) {\n              toggle(chipValue);\n            }\n          },\n        } as Partial<ChipProps>);\n      })}\n    </div>\n  );\n}\n\nconst ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);\n\n// Compose Chip with static Group property\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"names":["Chip"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Chip.module.scss';\n\n/**\n * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.\n * @see https://usefragments.com/components/chip\n */\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant. `\"outline\"` is an alias for `\"outlined\"`.\n   * @default \"filled\"\n   * @see https://usefragments.com/components/chip#variants */\n  variant?: 'filled' | 'outlined' | 'outline' | 'soft';\n  /** Chip size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the chip is selected */\n  selected?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Avatar element rendered before the label */\n  avatar?: React.ReactNode;\n  /** Makes chip removable. Called when X is clicked. */\n  onRemove?: () => void;\n  /** Value identifier used by Chip.Group */\n  value?: string;\n}\n\nexport interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {\n  children: React.ReactNode;\n  /** Controlled selected values */\n  value?: string[];\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[];\n  /** Called when selection changes */\n  onChange?: (value: string[]) => void;\n}\n\nconst ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(\n    {\n      children,\n      variant: variantProp = 'filled',\n      size = 'md',\n      selected = false,\n      disabled = false,\n      icon,\n      avatar,\n      onRemove,\n      className,\n      onClick,\n      value: _value,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // Resolve alias: \"outline\" → \"outlined\"\n    const variant = variantProp === 'outline' ? 'outlined' : variantProp;\n\n    const classes = [\n      styles.chip,\n      styles[size],\n      styles[variant],\n      selected && styles.selected,\n      onRemove && styles.withRemove,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onRemove?.();\n    };\n\n    const removeAriaLabel = `Remove ${typeof children === 'string' ? children : 'chip'}`;\n\n    const chipButton = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        disabled={disabled}\n        className={classes}\n        onClick={onClick}\n        {...htmlProps}\n      >\n        {avatar && (\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </button>\n    );\n\n    if (!onRemove) {\n      return chipButton;\n    }\n\n    return (\n      <span className={styles.removableChip} data-disabled={disabled || undefined}>\n        {chipButton}\n        <button\n          type=\"button\"\n          className={styles.remove}\n          onClick={handleRemoveClick}\n          aria-label={removeAriaLabel}\n          disabled={disabled}\n        >\n          &times;\n        </button>\n      </span>\n    );\n  }\n);\n\nconst EMPTY_CHIP_GROUP: string[] = [];\n\nfunction ChipGroupInner(\n  { children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className, ...htmlProps }: ChipGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const toggle = React.useCallback(\n    (chipValue: string) => {\n      const next = currentValue.includes(chipValue)\n        ? currentValue.filter((v) => v !== chipValue)\n        : [...currentValue, chipValue];\n\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      onChange?.(next);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div ref={ref} {...htmlProps} className={classes}>\n      {React.Children.map(children, (child, index) => {\n        if (!React.isValidElement<ChipProps>(child)) return child;\n        const chipValue = (() => {\n          if (child.props.value != null) return child.props.value;\n          if (typeof child.props.children === 'string') return child.props.children;\n          if (child.key != null) return String(child.key);\n          if (process.env.NODE_ENV !== 'production') {\n            // Non-string labels need an explicit value to avoid unstable group selection keys.\n            console.warn('Chip.Group: Chips with non-string children should provide a `value` prop.');\n          }\n          return `__chip-${index}`;\n        })();\n        return React.cloneElement(child, {\n          selected: currentValue.includes(chipValue),\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            child.props.onClick?.(e);\n            if (!e.defaultPrevented) {\n              toggle(chipValue);\n            }\n          },\n        } as Partial<ChipProps>);\n      })}\n    </div>\n  );\n}\n\nconst ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);\n\n// Compose Chip with static Group property\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"names":["Chip"],"mappings":"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"}

package/dist/components/CodeBlock/CodeBlock.module.scss.cjs

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_1j662_1";
-const title = "_title_1j662_5";
-const wrapper = "_wrapper_1j662_14";
-const header = "_header_1j662_22";
-const filename = "_filename_1j662_32";
-const copyButton = "_copyButton_1j662_39";
-const copied = "_copied_1j662_77";
-const copyOverlay = "_copyOverlay_1j662_81";
-const withCopyOverlay = "_withCopyOverlay_1j662_92";
-const codeContainer = "_codeContainer_1j662_92";
-const loading = "_loading_1j662_93";
-const icon = "_icon_1j662_97";
-const persistentCopy = "_persistentCopy_1j662_101";
-const withLineNumbers = "_withLineNumbers_1j662_188";
-const withDiff = "_withDiff_1j662_192";
-const compact = "_compact_1j662_216";
-const wordWrap = "_wordWrap_1j662_230";
-const caption = "_caption_1j662_240";
-const collapseButton = "_collapseButton_1j662_247";
-const tabbedPanel = "_tabbedPanel_1j662_291";
+const container = "_container_1vzq9_1";
+const title = "_title_1vzq9_5";
+const wrapper = "_wrapper_1vzq9_14";
+const header = "_header_1vzq9_22";
+const filename = "_filename_1vzq9_32";
+const copyButton = "_copyButton_1vzq9_39";
+const copied = "_copied_1vzq9_77";
+const copyOverlay = "_copyOverlay_1vzq9_81";
+const withCopyOverlay = "_withCopyOverlay_1vzq9_92";
+const codeContainer = "_codeContainer_1vzq9_92";
+const loading = "_loading_1vzq9_93";
+const icon = "_icon_1vzq9_97";
+const persistentCopy = "_persistentCopy_1vzq9_101";
+const withLineNumbers = "_withLineNumbers_1vzq9_188";
+const withDiff = "_withDiff_1vzq9_192";
+const compact = "_compact_1vzq9_216";
+const wordWrap = "_wordWrap_1vzq9_230";
+const caption = "_caption_1vzq9_240";
+const collapseButton = "_collapseButton_1vzq9_247";
+const tabbedPanel = "_tabbedPanel_1vzq9_291";
 const styles = {
   container,
   title,

package/dist/components/CodeBlock/CodeBlock.module.scss.js

@@ -1,23 +1,23 @@
-const container = "_container_1j662_1";
-const title = "_title_1j662_5";
-const wrapper = "_wrapper_1j662_14";
-const header = "_header_1j662_22";
-const filename = "_filename_1j662_32";
-const copyButton = "_copyButton_1j662_39";
-const copied = "_copied_1j662_77";
-const copyOverlay = "_copyOverlay_1j662_81";
-const withCopyOverlay = "_withCopyOverlay_1j662_92";
-const codeContainer = "_codeContainer_1j662_92";
-const loading = "_loading_1j662_93";
-const icon = "_icon_1j662_97";
-const persistentCopy = "_persistentCopy_1j662_101";
-const withLineNumbers = "_withLineNumbers_1j662_188";
-const withDiff = "_withDiff_1j662_192";
-const compact = "_compact_1j662_216";
-const wordWrap = "_wordWrap_1j662_230";
-const caption = "_caption_1j662_240";
-const collapseButton = "_collapseButton_1j662_247";
-const tabbedPanel = "_tabbedPanel_1j662_291";
+const container = "_container_1vzq9_1";
+const title = "_title_1vzq9_5";
+const wrapper = "_wrapper_1vzq9_14";
+const header = "_header_1vzq9_22";
+const filename = "_filename_1vzq9_32";
+const copyButton = "_copyButton_1vzq9_39";
+const copied = "_copied_1vzq9_77";
+const copyOverlay = "_copyOverlay_1vzq9_81";
+const withCopyOverlay = "_withCopyOverlay_1vzq9_92";
+const codeContainer = "_codeContainer_1vzq9_92";
+const loading = "_loading_1vzq9_93";
+const icon = "_icon_1vzq9_97";
+const persistentCopy = "_persistentCopy_1vzq9_101";
+const withLineNumbers = "_withLineNumbers_1vzq9_188";
+const withDiff = "_withDiff_1vzq9_192";
+const compact = "_compact_1vzq9_216";
+const wordWrap = "_wordWrap_1vzq9_230";
+const caption = "_caption_1vzq9_240";
+const collapseButton = "_collapseButton_1vzq9_247";
+const tabbedPanel = "_tabbedPanel_1vzq9_291";
 const styles = {
   container,
   title,

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

@@ -51,6 +51,8 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface CodeBlockTab {
     /** Label shown in the tab */
     label: string;
+    /** Stable tab value (defaults to label) */
+    value?: string;
     /** Code string to display */
     code: string;
     /** Programming language for syntax highlighting */
@@ -59,8 +61,12 @@ export interface CodeBlockTab {
 export interface TabbedCodeBlockProps {
     /** Array of code tabs */
     tabs: CodeBlockTab[];
-    /** Default selected tab (by label) */
+    /** Default selected tab (by tab value, or label when value is omitted) */
     defaultTab?: string;
+    /** Controlled selected tab value */
+    value?: string;
+    /** Called when the selected tab changes */
+    onValueChange?: (value: string) => void;
     /** Show copy button */
     showCopy?: boolean;
     /** Placement of copy button when not using persistent copy */
@@ -80,7 +86,7 @@ export interface TabbedCodeBlockProps {
     /** Callback fired when a tab's copy button is clicked. Receives the tab label. */
     onCopy?: (tabLabel: string) => void;
 }
-declare function TabbedCodeBlock({ tabs, defaultTab, showCopy, copyPlacement, showLineNumbers, theme, tabsVariant, wordWrap, maxHeight, className, onCopy, }: TabbedCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+declare function TabbedCodeBlock({ tabs, defaultTab, value, onValueChange, showCopy, copyPlacement, showLineNumbers, theme, tabsVariant, wordWrap, maxHeight, className, onCopy, }: TabbedCodeBlockProps): import("react/jsx-runtime").JSX.Element;
 export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>> & {
     Tabbed: typeof TabbedCodeBlock;
 };

package/dist/components/CodeBlock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Collapsible/Collapsible.module.scss.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_okqbn_1";
-const trigger = "_trigger_okqbn_5";
-const triggerContent = "_triggerContent_okqbn_33";
-const chevron = "_chevron_okqbn_38";
-const chevronOpen = "_chevronOpen_okqbn_44";
-const content = "_content_okqbn_48";
-const contentOpen = "_contentOpen_okqbn_53";
-const contentClosed = "_contentClosed_okqbn_58";
-const contentInner = "_contentInner_okqbn_63";
-const disabled = "_disabled_okqbn_67";
+const root = "_root_1i10a_1";
+const trigger = "_trigger_1i10a_5";
+const triggerContent = "_triggerContent_1i10a_33";
+const chevron = "_chevron_1i10a_38";
+const chevronOpen = "_chevronOpen_1i10a_44";
+const content = "_content_1i10a_48";
+const contentOpen = "_contentOpen_1i10a_53";
+const contentClosed = "_contentClosed_1i10a_58";
+const contentInner = "_contentInner_1i10a_63";
+const disabled = "_disabled_1i10a_67";
 const styles = {
   root,
   trigger,

package/dist/components/Collapsible/Collapsible.module.scss.js

@@ -1,13 +1,13 @@
-const root = "_root_okqbn_1";
-const trigger = "_trigger_okqbn_5";
-const triggerContent = "_triggerContent_okqbn_33";
-const chevron = "_chevron_okqbn_38";
-const chevronOpen = "_chevronOpen_okqbn_44";
-const content = "_content_okqbn_48";
-const contentOpen = "_contentOpen_okqbn_53";
-const contentClosed = "_contentClosed_okqbn_58";
-const contentInner = "_contentInner_okqbn_63";
-const disabled = "_disabled_okqbn_67";
+const root = "_root_1i10a_1";
+const trigger = "_trigger_1i10a_5";
+const triggerContent = "_triggerContent_1i10a_33";
+const chevron = "_chevron_1i10a_38";
+const chevronOpen = "_chevronOpen_1i10a_44";
+const content = "_content_1i10a_48";
+const contentOpen = "_contentOpen_1i10a_53";
+const contentClosed = "_contentClosed_1i10a_58";
+const contentInner = "_contentInner_1i10a_63";
+const disabled = "_disabled_1i10a_67";
 const styles = {
   root,
   trigger,