@fragments-sdk/ui 0.11.1 → 0.13.0

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,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,mBAAmB;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,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"}

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\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  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  /** 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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"}

package/dist/components/Chip/index.cjs

@@ -23,7 +23,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ChipBase = React__namespace.forwardRef(
   function Chip2({
     children,
-    variant = "filled",
+    variant: variantProp = "filled",
     size = "md",
     selected = false,
     disabled = false,
@@ -35,6 +35,7 @@ const ChipBase = React__namespace.forwardRef(
     value: _value,
     ...htmlProps
   }, ref) {
+    const variant = variantProp === "outline" ? "outlined" : variantProp;
     const classes = [
       Chip_module.default.chip,
       Chip_module.default[size],

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\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant */\n  variant?: 'filled' | 'outlined' | 'soft';\n  /** Size of the chip */\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 = '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    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 {\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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"}

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

@@ -1,9 +1,16 @@
 import * as React from 'react';
+/**
+ * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.
+ * @see https://usefragments.com/components/chip
+ */
 export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     children: React.ReactNode;
-    /** Visual style variant */
-    variant?: 'filled' | 'outlined' | 'soft';
-    /** Size of the chip */
+    /** Visual style variant. `"outline"` is an alias for `"outlined"`.
+     * @default "filled"
+     * @see https://usefragments.com/components/chip#variants */
+    variant?: 'filled' | 'outlined' | 'outline' | 'soft';
+    /** Chip size.
+     * @default "md" */
     size?: 'sm' | 'md' | 'lg';
     /** Whether the chip is selected */
     selected?: boolean;

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,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,uBAAuB;IACvB,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;AAmID,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,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"}

package/dist/components/Chip/index.js

@@ -4,7 +4,7 @@ import styles from "./Chip.module.scss.js";
 const ChipBase = React.forwardRef(
   function Chip2({
     children,
-    variant = "filled",
+    variant: variantProp = "filled",
     size = "md",
     selected = false,
     disabled = false,
@@ -16,6 +16,7 @@ const ChipBase = React.forwardRef(
     value: _value,
     ...htmlProps
   }, ref) {
+    const variant = variantProp === "outline" ? "outlined" : variantProp;
     const classes = [
       styles.chip,
       styles[size],

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\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant */\n  variant?: 'filled' | 'outlined' | 'soft';\n  /** Size of the chip */\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 = '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    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 {\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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"}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import "../../styles/globals.scss";
-export type CodeBlockLanguage = "tsx" | "typescript" | "javascript" | "jsx" | "bash" | "shell" | "css" | "scss" | "sass" | "json" | "html" | "xml" | "markdown" | "md" | "yaml" | "yml" | "python" | "py" | "ruby" | "go" | "rust" | "java" | "kotlin" | "swift" | "c" | "cpp" | "csharp" | "php" | "sql" | "graphql" | "diff" | "plaintext";
+export type CodeBlockLanguage = "tsx" | "typescript" | "ts" | "javascript" | "js" | "jsx" | "bash" | "shell" | "css" | "scss" | "sass" | "json" | "html" | "xml" | "markdown" | "md" | "yaml" | "yml" | "python" | "py" | "ruby" | "go" | "rust" | "java" | "kotlin" | "swift" | "c" | "cpp" | "csharp" | "php" | "sql" | "graphql" | "diff" | "plaintext" | "text";
 /** Available syntax highlighting themes */
 export type CodeBlockTheme = "synthwave-84" | "github-dark" | "github-light" | "one-dark-pro" | "dracula" | "nord" | "monokai" | "vitesse-dark" | "vitesse-light" | "min-dark" | "min-light";
 export type CodeBlockCopyPlacement = "auto" | "header" | "overlay";

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/index.cjs

@@ -3,6 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Collapsible_module = require("./Collapsible.module.scss.cjs");
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
 const CollapsibleContext = React.createContext(null);
 function useCollapsibleContext() {
   const context = React.useContext(CollapsibleContext);
@@ -17,7 +24,8 @@ function CollapsibleRoot({
   open: controlledOpen,
   onOpenChange,
   disabled = false,
-  className
+  className,
+  ...htmlProps
 }) {
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
@@ -47,6 +55,7 @@ function CollapsibleRoot({
   return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ...htmlProps,
       className: `${Collapsible_module.default.root} ${isOpen ? Collapsible_module.default.open : ""} ${disabled ? Collapsible_module.default.disabled : ""} ${className || ""}`,
       "data-state": isOpen ? "open" : "closed",
       "data-disabled": disabled || void 0,
@@ -59,7 +68,10 @@ function CollapsibleTrigger({
   className,
   showChevron = true,
   chevronPosition = "end",
-  asChild = false
+  asChild = false,
+  onClick,
+  onKeyDown,
+  ...htmlProps
 }) {
   const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
   const handleKeyDown = (e) => {
@@ -68,6 +80,9 @@ function CollapsibleTrigger({
       toggle();
     }
   };
+  const handleClick = () => {
+    toggle();
+  };
   const chevronIcon = showChevron && /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -90,26 +105,44 @@ function CollapsibleTrigger({
     }
   );
   if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
     return React.cloneElement(children, {
-      id: triggerId,
+      ...htmlProps,
+      id: htmlProps.id ?? triggerId,
       "aria-expanded": isOpen,
       "aria-controls": contentId,
       "aria-disabled": disabled || void 0,
-      onClick: toggle,
-      onKeyDown: handleKeyDown
+      onClick: composeEventHandlers(
+        (event) => {
+          var _a;
+          (_a = childProps.onClick) == null ? void 0 : _a.call(childProps, event);
+          onClick == null ? void 0 : onClick(event);
+        },
+        () => handleClick()
+      ),
+      onKeyDown: composeEventHandlers(
+        (event) => {
+          var _a;
+          (_a = childProps.onKeyDown) == null ? void 0 : _a.call(childProps, event);
+          onKeyDown == null ? void 0 : onKeyDown(event);
+        },
+        (event) => handleKeyDown(event)
+      ),
+      className: [className, childProps.className].filter(Boolean).join(" ")
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
+      ...htmlProps,
       type: "button",
-      id: triggerId,
+      id: htmlProps.id ?? triggerId,
       className: `${Collapsible_module.default.trigger} ${className || ""}`,
       "aria-expanded": isOpen,
       "aria-controls": contentId,
       "aria-disabled": disabled || void 0,
-      onClick: toggle,
-      onKeyDown: handleKeyDown,
+      onClick: composeEventHandlers(onClick, handleClick),
+      onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
       disabled,
       children: [
         chevronPosition === "start" && chevronIcon,
@@ -122,7 +155,8 @@ function CollapsibleTrigger({
 function CollapsibleContent({
   children,
   className,
-  forceMount = false
+  forceMount = false,
+  ...htmlProps
 }) {
   const { isOpen, contentId, triggerId } = useCollapsibleContext();
   if (!forceMount && !isOpen) {
@@ -131,7 +165,8 @@ function CollapsibleContent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      id: contentId,
+      ...htmlProps,
+      id: htmlProps.id ?? contentId,
       role: "region",
       "aria-labelledby": triggerId,
       className: `${Collapsible_module.default.content} ${isOpen ? Collapsible_module.default.contentOpen : Collapsible_module.default.contentClosed} ${className || ""}`,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Collapsible/index.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useId, createContext, useContext } from 'react';\nimport styles from './Collapsible.module.scss';\n\n// Context for sharing state between compound components\ninterface CollapsibleContextValue {\n  isOpen: boolean;\n  toggle: () => void;\n  contentId: string;\n  triggerId: string;\n  disabled?: boolean;\n}\n\nconst CollapsibleContext = createContext<CollapsibleContextValue | null>(null);\n\nfunction useCollapsibleContext() {\n  const context = useContext(CollapsibleContext);\n  if (!context) {\n    throw new Error('Collapsible compound components must be used within Collapsible.Root');\n  }\n  return context;\n}\n\n// Root component\nexport interface CollapsibleRootProps {\n  children: React.ReactNode;\n  /** Whether the collapsible is initially open */\n  defaultOpen?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the collapsible is disabled */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction CollapsibleRoot({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  disabled = false,\n  className,\n}: CollapsibleRootProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const uniqueId = useId();\n  const contentId = `collapsible-content-${uniqueId}`;\n  const triggerId = `collapsible-trigger-${uniqueId}`;\n\n  const toggle = useCallback(() => {\n    if (disabled) return;\n\n    if (isControlled) {\n      onOpenChange?.(!isOpen);\n    } else {\n      setInternalOpen((prev) => {\n        const newValue = !prev;\n        onOpenChange?.(newValue);\n        return newValue;\n      });\n    }\n  }, [disabled, isControlled, isOpen, onOpenChange]);\n\n  const contextValue: CollapsibleContextValue = {\n    isOpen,\n    toggle,\n    contentId,\n    triggerId,\n    disabled,\n  };\n\n  return (\n    <CollapsibleContext.Provider value={contextValue}>\n      <div\n        className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}\n        data-state={isOpen ? 'open' : 'closed'}\n        data-disabled={disabled || undefined}\n      >\n        {children}\n      </div>\n    </CollapsibleContext.Provider>\n  );\n}\n\n// Trigger component\nexport interface CollapsibleTriggerProps {\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Show chevron indicator */\n  showChevron?: boolean;\n  /** Chevron position */\n  chevronPosition?: 'start' | 'end';\n  /** Render as child element (for custom triggers) */\n  asChild?: boolean;\n}\n\nfunction CollapsibleTrigger({\n  children,\n  className,\n  showChevron = true,\n  chevronPosition = 'end',\n  asChild = false,\n}: CollapsibleTriggerProps) {\n  const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      toggle();\n    }\n  };\n\n  const chevronIcon = showChevron && (\n    <svg\n      className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6 4L10 8L6 12\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children as React.ReactElement<any>, {\n      id: triggerId,\n      'aria-expanded': isOpen,\n      'aria-controls': contentId,\n      'aria-disabled': disabled || undefined,\n      onClick: toggle,\n      onKeyDown: handleKeyDown,\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      id={triggerId}\n      className={`${styles.trigger} ${className || ''}`}\n      aria-expanded={isOpen}\n      aria-controls={contentId}\n      aria-disabled={disabled || undefined}\n      onClick={toggle}\n      onKeyDown={handleKeyDown}\n      disabled={disabled}\n    >\n      {chevronPosition === 'start' && chevronIcon}\n      <span className={styles.triggerContent}>{children}</span>\n      {chevronPosition === 'end' && chevronIcon}\n    </button>\n  );\n}\n\n// Content component\nexport interface CollapsibleContentProps {\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Force mount content even when closed (useful for animations) */\n  forceMount?: boolean;\n}\n\nfunction CollapsibleContent({\n  children,\n  className,\n  forceMount = false,\n}: CollapsibleContentProps) {\n  const { isOpen, contentId, triggerId } = useCollapsibleContext();\n\n  // If not force mounted and closed, don't render\n  if (!forceMount && !isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id={contentId}\n      role=\"region\"\n      aria-labelledby={triggerId}\n      className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}\n      data-state={isOpen ? 'open' : 'closed'}\n      hidden={!isOpen && !forceMount}\n    >\n      <div className={styles.contentInner}>{children}</div>\n    </div>\n  );\n}\n\n// Compound component export\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n});\n\n// Named exports for direct imports\nexport {\n  CollapsibleRoot,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  useCollapsibleContext,\n};\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["createContext","useContext","useState","useId","useCallback","jsx","styles","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Collapsible/index.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useId, createContext, useContext } from 'react';\nimport styles from './Collapsible.module.scss';\n\nfunction composeEventHandlers<E extends { defaultPrevented: boolean }>(\n  userHandler: ((event: E) => void) | undefined,\n  internalHandler: (event: E) => void\n) {\n  return (event: E) => {\n    userHandler?.(event);\n    if (event.defaultPrevented) return;\n    internalHandler(event);\n  };\n}\n\n// Context for sharing state between compound components\ninterface CollapsibleContextValue {\n  isOpen: boolean;\n  toggle: () => void;\n  contentId: string;\n  triggerId: string;\n  disabled?: boolean;\n}\n\nconst CollapsibleContext = createContext<CollapsibleContextValue | null>(null);\n\nfunction useCollapsibleContext() {\n  const context = useContext(CollapsibleContext);\n  if (!context) {\n    throw new Error('Collapsible compound components must be used within Collapsible.Root');\n  }\n  return context;\n}\n\n// Root component\nexport interface CollapsibleRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Whether the collapsible is initially open */\n  defaultOpen?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the collapsible is disabled */\n  disabled?: boolean;\n}\n\nfunction CollapsibleRoot({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  disabled = false,\n  className,\n  ...htmlProps\n}: CollapsibleRootProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const uniqueId = useId();\n  const contentId = `collapsible-content-${uniqueId}`;\n  const triggerId = `collapsible-trigger-${uniqueId}`;\n\n  const toggle = useCallback(() => {\n    if (disabled) return;\n\n    if (isControlled) {\n      onOpenChange?.(!isOpen);\n    } else {\n      setInternalOpen((prev) => {\n        const newValue = !prev;\n        onOpenChange?.(newValue);\n        return newValue;\n      });\n    }\n  }, [disabled, isControlled, isOpen, onOpenChange]);\n\n  const contextValue: CollapsibleContextValue = {\n    isOpen,\n    toggle,\n    contentId,\n    triggerId,\n    disabled,\n  };\n\n  return (\n    <CollapsibleContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}\n        data-state={isOpen ? 'open' : 'closed'}\n        data-disabled={disabled || undefined}\n      >\n        {children}\n      </div>\n    </CollapsibleContext.Provider>\n  );\n}\n\n// Trigger component\nexport interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  /** Show chevron indicator */\n  showChevron?: boolean;\n  /** Chevron position */\n  chevronPosition?: 'start' | 'end';\n  /** Render as child element (for custom triggers) */\n  asChild?: boolean;\n}\n\nfunction CollapsibleTrigger({\n  children,\n  className,\n  showChevron = true,\n  chevronPosition = 'end',\n  asChild = false,\n  onClick,\n  onKeyDown,\n  ...htmlProps\n}: CollapsibleTriggerProps) {\n  const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      toggle();\n    }\n  };\n\n  const handleClick = () => {\n    toggle();\n  };\n\n  const chevronIcon = showChevron && (\n    <svg\n      className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6 4L10 8L6 12\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n\n  if (asChild && React.isValidElement(children)) {\n    const childProps = children.props as {\n      className?: string;\n      onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n    };\n\n    return React.cloneElement(children as React.ReactElement<any>, {\n      ...htmlProps,\n      id: (htmlProps.id as string | undefined) ?? triggerId,\n      'aria-expanded': isOpen,\n      'aria-controls': contentId,\n      'aria-disabled': disabled || undefined,\n      onClick: composeEventHandlers(\n        (event: React.MouseEvent<HTMLElement>) => {\n          childProps.onClick?.(event);\n          onClick?.(event as unknown as React.MouseEvent<HTMLButtonElement>);\n        },\n        () => handleClick()\n      ),\n      onKeyDown: composeEventHandlers(\n        (event: React.KeyboardEvent<HTMLElement>) => {\n          childProps.onKeyDown?.(event);\n          onKeyDown?.(event as unknown as React.KeyboardEvent<HTMLButtonElement>);\n        },\n        (event) => handleKeyDown(event as unknown as React.KeyboardEvent)\n      ),\n      className: [className, childProps.className].filter(Boolean).join(' '),\n    });\n  }\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      id={(htmlProps.id as string | undefined) ?? triggerId}\n      className={`${styles.trigger} ${className || ''}`}\n      aria-expanded={isOpen}\n      aria-controls={contentId}\n      aria-disabled={disabled || undefined}\n      onClick={composeEventHandlers(onClick, handleClick)}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      disabled={disabled}\n    >\n      {chevronPosition === 'start' && chevronIcon}\n      <span className={styles.triggerContent}>{children}</span>\n      {chevronPosition === 'end' && chevronIcon}\n    </button>\n  );\n}\n\n// Content component\nexport interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Force mount content even when closed (useful for animations) */\n  forceMount?: boolean;\n}\n\nfunction CollapsibleContent({\n  children,\n  className,\n  forceMount = false,\n  ...htmlProps\n}: CollapsibleContentProps) {\n  const { isOpen, contentId, triggerId } = useCollapsibleContext();\n\n  // If not force mounted and closed, don't render\n  if (!forceMount && !isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      {...htmlProps}\n      id={(htmlProps.id as string | undefined) ?? contentId}\n      role=\"region\"\n      aria-labelledby={triggerId}\n      className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}\n      data-state={isOpen ? 'open' : 'closed'}\n      hidden={!isOpen && !forceMount}\n    >\n      <div className={styles.contentInner}>{children}</div>\n    </div>\n  );\n}\n\n// Compound component export\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n});\n\n// Named exports for direct imports\nexport {\n  CollapsibleRoot,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  useCollapsibleContext,\n};\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["createContext","useContext","useState","useId","useCallback","jsx","styles","jsxs"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ interface CollapsibleContextValue {
     disabled?: boolean;
 }
 declare function useCollapsibleContext(): CollapsibleContextValue;
-export interface CollapsibleRootProps {
+export interface CollapsibleRootProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /** Whether the collapsible is initially open */
     defaultOpen?: boolean;
@@ -17,14 +17,10 @@ export interface CollapsibleRootProps {
     onOpenChange?: (open: boolean) => void;
     /** Whether the collapsible is disabled */
     disabled?: boolean;
-    /** Additional class name */
-    className?: string;
 }
-declare function CollapsibleRoot({ children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, }: CollapsibleRootProps): import("react/jsx-runtime").JSX.Element;
-export interface CollapsibleTriggerProps {
+declare function CollapsibleRoot({ children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, ...htmlProps }: CollapsibleRootProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
-    /** Additional class name */
-    className?: string;
     /** Show chevron indicator */
     showChevron?: boolean;
     /** Chevron position */
@@ -32,15 +28,13 @@ export interface CollapsibleTriggerProps {
     /** Render as child element (for custom triggers) */
     asChild?: boolean;
 }
-declare function CollapsibleTrigger({ children, className, showChevron, chevronPosition, asChild, }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
-export interface CollapsibleContentProps {
+declare function CollapsibleTrigger({ children, className, showChevron, chevronPosition, asChild, onClick, onKeyDown, ...htmlProps }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    /** Additional class name */
-    className?: string;
     /** Force mount content even when closed (useful for animations) */
     forceMount?: boolean;
 }
-declare function CollapsibleContent({ children, className, forceMount, }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CollapsibleContent({ children, className, forceMount, ...htmlProps }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const Collapsible: typeof CollapsibleRoot & {
     Root: typeof CollapsibleRoot;
     Trigger: typeof CollapsibleTrigger;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAIvF,UAAU,uBAAuB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,iBAAS,qBAAqB,4BAM7B;AAGD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,QAAgB,EAChB,SAAS,GACV,EAAE,oBAAoB,2CA0CtB;AAGD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,WAAkB,EAClB,eAAuB,EACvB,OAAe,GAChB,EAAE,uBAAuB,2CAyDzB;AAGD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAkB,GACnB,EAAE,uBAAuB,kDAoBzB;AAGD,eAAO,MAAM,WAAW;;;;CAItB,CAAC;AAGH,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,GACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAevF,UAAU,uBAAuB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,iBAAS,qBAAqB,4BAM7B;AAGD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,QAAgB,EAChB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CA2CtB;AAGD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,WAAkB,EAClB,eAAuB,EACvB,OAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACb,EAAE,uBAAuB,2CAkFzB;AAGD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAkB,EAClB,GAAG,SAAS,EACb,EAAE,uBAAuB,kDAqBzB;AAGD,eAAO,MAAM,WAAW;;;;CAItB,CAAC;AAGH,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,GACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}

package/dist/components/Collapsible/index.js

@@ -1,6 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useState, useId, useCallback, createContext, useContext } from "react";
 import styles from "./Collapsible.module.scss.js";
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
 const CollapsibleContext = createContext(null);
 function useCollapsibleContext() {
   const context = useContext(CollapsibleContext);
@@ -15,7 +22,8 @@ function CollapsibleRoot({
   open: controlledOpen,
   onOpenChange,
   disabled = false,
-  className
+  className,
+  ...htmlProps
 }) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
@@ -45,6 +53,7 @@ function CollapsibleRoot({
   return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...htmlProps,
       className: `${styles.root} ${isOpen ? styles.open : ""} ${disabled ? styles.disabled : ""} ${className || ""}`,
       "data-state": isOpen ? "open" : "closed",
       "data-disabled": disabled || void 0,
@@ -57,7 +66,10 @@ function CollapsibleTrigger({
   className,
   showChevron = true,
   chevronPosition = "end",
-  asChild = false
+  asChild = false,
+  onClick,
+  onKeyDown,
+  ...htmlProps
 }) {
   const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
   const handleKeyDown = (e) => {
@@ -66,6 +78,9 @@ function CollapsibleTrigger({
       toggle();
     }
   };
+  const handleClick = () => {
+    toggle();
+  };
   const chevronIcon = showChevron && /* @__PURE__ */ jsx(
     "svg",
     {
@@ -88,26 +103,44 @@ function CollapsibleTrigger({
     }
   );
   if (asChild && React__default.isValidElement(children)) {
+    const childProps = children.props;
     return React__default.cloneElement(children, {
-      id: triggerId,
+      ...htmlProps,
+      id: htmlProps.id ?? triggerId,
       "aria-expanded": isOpen,
       "aria-controls": contentId,
       "aria-disabled": disabled || void 0,
-      onClick: toggle,
-      onKeyDown: handleKeyDown
+      onClick: composeEventHandlers(
+        (event) => {
+          var _a;
+          (_a = childProps.onClick) == null ? void 0 : _a.call(childProps, event);
+          onClick == null ? void 0 : onClick(event);
+        },
+        () => handleClick()
+      ),
+      onKeyDown: composeEventHandlers(
+        (event) => {
+          var _a;
+          (_a = childProps.onKeyDown) == null ? void 0 : _a.call(childProps, event);
+          onKeyDown == null ? void 0 : onKeyDown(event);
+        },
+        (event) => handleKeyDown(event)
+      ),
+      className: [className, childProps.className].filter(Boolean).join(" ")
     });
   }
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      ...htmlProps,
       type: "button",
-      id: triggerId,
+      id: htmlProps.id ?? triggerId,
       className: `${styles.trigger} ${className || ""}`,
       "aria-expanded": isOpen,
       "aria-controls": contentId,
       "aria-disabled": disabled || void 0,
-      onClick: toggle,
-      onKeyDown: handleKeyDown,
+      onClick: composeEventHandlers(onClick, handleClick),
+      onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
       disabled,
       children: [
         chevronPosition === "start" && chevronIcon,
@@ -120,7 +153,8 @@ function CollapsibleTrigger({
 function CollapsibleContent({
   children,
   className,
-  forceMount = false
+  forceMount = false,
+  ...htmlProps
 }) {
   const { isOpen, contentId, triggerId } = useCollapsibleContext();
   if (!forceMount && !isOpen) {
@@ -129,7 +163,8 @@ function CollapsibleContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id: contentId,
+      ...htmlProps,
+      id: htmlProps.id ?? contentId,
       role: "region",
       "aria-labelledby": triggerId,
       className: `${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ""}`,