@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/callout/callout.js

@@ -2,7 +2,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './callout.module.css.js';
 
 const callout = cva(styles.callout, {
@@ -27,7 +26,7 @@ const callout = cva(styles.callout, {
         type: 'grey'
     }
 });
-const Callout = forwardRef(({ className, type = 'grey', outline, highContrast, children, action, dismissible, onDismiss, width, style, icon = jsx(InfoCircledIcon, {}), ...props }, ref) => {
+function Callout({ className, type = 'grey', outline, highContrast, children, action, dismissible, onDismiss, width, style, icon = jsx(InfoCircledIcon, {}), ...props }) {
     const combinedStyle = {
         ...style,
         ...(width && { width: typeof width === 'number' ? `${width}px` : width })
@@ -42,8 +41,8 @@ const Callout = forwardRef(({ className, type = 'grey', outline, highContrast, c
                 return 'status';
         }
     };
-    return (jsx("div", { ref: ref, className: `${callout({ type, outline, highContrast })} ${className || ''}`, style: combinedStyle, role: getRole(), "aria-live": type === 'alert' ? 'assertive' : 'polite', ...props, children: jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.messageContainer, children: [icon && (jsx("div", { className: styles.icon, "aria-hidden": 'true', children: icon })), jsx("div", { className: styles.message, children: children })] }), jsxs("div", { className: styles.actionsContainer, children: [action && jsx("div", { className: styles.action, children: action }), dismissible && (jsx("button", { className: styles.dismiss, onClick: onDismiss, "aria-label": 'Dismiss message', type: 'button', children: jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) }))] })] }) }));
-});
+    return (jsx("div", { className: `${callout({ type, outline, highContrast })} ${className || ''}`, style: combinedStyle, role: getRole(), "aria-live": type === 'alert' ? 'assertive' : 'polite', ...props, children: jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.messageContainer, children: [icon && (jsx("div", { className: styles.icon, "aria-hidden": 'true', children: icon })), jsx("div", { className: styles.message, children: children })] }), jsxs("div", { className: styles.actionsContainer, children: [action && jsx("div", { className: styles.action, children: action }), dismissible && (jsx("button", { className: styles.dismiss, onClick: onDismiss, "aria-label": 'Dismiss message', type: 'button', children: jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) }))] })] }) }));
+}
 Callout.displayName = 'Callout';
 
 export { Callout };

package/dist/components/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport {\n  CSSProperties,\n  type HTMLAttributes,\n  ReactNode,\n  forwardRef\n} from 'react';\n\nimport styles from './callout.module.css';\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal']\n    },\n    outline: {\n      true: styles['callout-outline']\n    },\n    highContrast: {\n      true: styles['callout-high-contrast']\n    }\n  },\n  defaultVariants: {\n    type: 'grey'\n  }\n});\n\nexport interface CalloutProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof callout> {\n  children: ReactNode;\n  action?: ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  width?: string | number;\n  style?: CSSProperties;\n  icon?: ReactNode;\n}\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    {\n      className,\n      type = 'grey',\n      outline,\n      highContrast,\n      children,\n      action,\n      dismissible,\n      onDismiss,\n      width,\n      style,\n      icon = <InfoCircledIcon />,\n      ...props\n    },\n    ref\n  ) => {\n    const combinedStyle = {\n      ...style,\n      ...(width && { width: typeof width === 'number' ? `${width}px` : width })\n    };\n\n    const getRole = () => {\n      switch (type) {\n        case 'alert':\n          return 'alert';\n        case 'success':\n          return 'status';\n        default:\n          return 'status';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`${callout({ type, outline, highContrast })} ${className || ''}`}\n        style={combinedStyle}\n        role={getRole()}\n        aria-live={type === 'alert' ? 'assertive' : 'polite'}\n        {...props}\n      >\n        <div className={styles.container}>\n          <div className={styles.messageContainer}>\n            {icon && (\n              <div className={styles.icon} aria-hidden='true'>\n                {icon}\n              </div>\n            )}\n            <div className={styles.message}>{children}</div>\n          </div>\n\n          <div className={styles.actionsContainer}>\n            {action && <div className={styles.action}>{action}</div>}\n            {dismissible && (\n              <button\n                className={styles.dismiss}\n                onClick={onDismiss}\n                aria-label='Dismiss message'\n                type='button'\n              >\n                <svg\n                  width='12'\n                  height='12'\n                  viewBox='0 0 12 12'\n                  fill='none'\n                  xmlns='http://www.w3.org/2000/svg'\n                  aria-hidden='true'\n                  role='presentation'\n                >\n                  <path\n                    fillRule='evenodd'\n                    clipRule='evenodd'\n                    d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n                    fill='currentColor'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nCallout.displayName = 'Callout';\n"],"names":[],"mappings":";;;;;;;AAaA;AACE;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAcY;AAkBT;AACE;;;;;AAME;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;AAkDF;AAGF;;"}
+{"version":3,"file":"callout.js","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type CSSProperties, type ReactNode } from 'react';\n\nimport styles from './callout.module.css';\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal']\n    },\n    outline: {\n      true: styles['callout-outline']\n    },\n    highContrast: {\n      true: styles['callout-high-contrast']\n    }\n  },\n  defaultVariants: {\n    type: 'grey'\n  }\n});\n\nexport interface CalloutProps\n  extends ComponentProps<'div'>,\n    VariantProps<typeof callout> {\n  children: ReactNode;\n  action?: ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  width?: string | number;\n  style?: CSSProperties;\n  icon?: ReactNode;\n}\n\nexport function Callout({\n  className,\n  type = 'grey',\n  outline,\n  highContrast,\n  children,\n  action,\n  dismissible,\n  onDismiss,\n  width,\n  style,\n  icon = <InfoCircledIcon />,\n  ...props\n}: CalloutProps) {\n  const combinedStyle = {\n    ...style,\n    ...(width && { width: typeof width === 'number' ? `${width}px` : width })\n  };\n\n  const getRole = () => {\n    switch (type) {\n      case 'alert':\n        return 'alert';\n      case 'success':\n        return 'status';\n      default:\n        return 'status';\n    }\n  };\n\n  return (\n    <div\n      className={`${callout({ type, outline, highContrast })} ${className || ''}`}\n      style={combinedStyle}\n      role={getRole()}\n      aria-live={type === 'alert' ? 'assertive' : 'polite'}\n      {...props}\n    >\n      <div className={styles.container}>\n        <div className={styles.messageContainer}>\n          {icon && (\n            <div className={styles.icon} aria-hidden='true'>\n              {icon}\n            </div>\n          )}\n          <div className={styles.message}>{children}</div>\n        </div>\n\n        <div className={styles.actionsContainer}>\n          {action && <div className={styles.action}>{action}</div>}\n          {dismissible && (\n            <button\n              className={styles.dismiss}\n              onClick={onDismiss}\n              aria-label='Dismiss message'\n              type='button'\n            >\n              <svg\n                width='12'\n                height='12'\n                viewBox='0 0 12 12'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n                aria-hidden='true'\n                role='presentation'\n              >\n                <path\n                  fillRule='evenodd'\n                  clipRule='evenodd'\n                  d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n                  fill='currentColor'\n                />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nCallout.displayName = 'Callout';\n"],"names":[],"mappings":";;;;;;AAQA;AACE;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAce;AAcd;AACE;;;;;AAME;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;AAiDF;AAEA;;"}

package/dist/components/checkbox/__tests__/checkbox-group.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox-group.test.d.ts.map

package/dist/components/checkbox/__tests__/checkbox-group.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.test.d.ts","sourceRoot":"","sources":["../../../../components/checkbox/__tests__/checkbox-group.test.tsx"],"names":[],"mappings":""}

package/dist/components/checkbox/checkbox.cjs

@@ -2,34 +2,24 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var checkbox = require('@base-ui/react/checkbox');
+var checkboxGroup = require('@base-ui/react/checkbox-group');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
-var React = require('react');
 var checkbox_module = require('./checkbox.module.css.cjs');
 
 const CheckMarkIcon = () => (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: checkbox_module.default.icon, children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z', fill: 'currentColor' }) }));
 const IndeterminateIcon = () => (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: checkbox_module.default.icon, children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z', fill: 'currentColor' }) }));
-const checkbox = classVarianceAuthority.cva(checkbox_module.default.checkbox);
-const Checkbox = React.forwardRef(({ className, disabled, checked, defaultChecked, onCheckedChange, ...props }, forwardedRef) => {
-    const isIndeterminate = checked === 'indeterminate' || defaultChecked === 'indeterminate';
-    return (jsxRuntime.jsx(radixUi.Checkbox.Root, { className: checkbox({
-            className: classVarianceAuthority.cx(className, {
-                [checkbox_module.default['checkbox-disabled']]: disabled,
-                [checkbox_module.default['checkbox-indeterminate']]: isIndeterminate
-            })
-        }), checked: isIndeterminate || checked === true, defaultChecked: defaultChecked === true, onCheckedChange: value => {
-            if (onCheckedChange) {
-                // If it's currently indeterminate, next state will be unchecked
-                if (checked === 'indeterminate') {
-                    onCheckedChange(false);
-                }
-                else {
-                    onCheckedChange(value);
-                }
-            }
-        }, disabled: disabled, ref: forwardedRef, ...props, children: jsxRuntime.jsx(radixUi.Checkbox.Indicator, { className: checkbox_module.default.indicator, children: isIndeterminate ? jsxRuntime.jsx(IndeterminateIcon, {}) : jsxRuntime.jsx(CheckMarkIcon, {}) }) }));
+function CheckboxGroup({ className, ...props }) {
+    return (jsxRuntime.jsx(checkboxGroup.CheckboxGroup, { className: classVarianceAuthority.cx(checkbox_module.default.group, className), ...props }));
+}
+CheckboxGroup.displayName = 'Checkbox.Group';
+function CheckboxItem({ className, ...props }) {
+    return (jsxRuntime.jsx(checkbox.Checkbox.Root, { className: classVarianceAuthority.cx(checkbox_module.default.checkbox, className), ...props, children: jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: checkbox_module.default.indicator, render: (props, state) => (jsxRuntime.jsx("span", { ...props, children: state.indeterminate ? jsxRuntime.jsx(IndeterminateIcon, {}) : jsxRuntime.jsx(CheckMarkIcon, {}) })) }) }));
+}
+CheckboxItem.displayName = 'Checkbox';
+const Checkbox = Object.assign(CheckboxItem, {
+    Group: CheckboxGroup
 });
-Checkbox.displayName = 'Checkbox';
 
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=checkbox.cjs.map

package/dist/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkbox = cva(styles.checkbox);\n\ntype CheckboxVariants = VariantProps<typeof checkbox>;\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n      keyof CheckboxVariants\n    >,\n    CheckboxVariants {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n}\n\nexport const Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    { className, disabled, checked, defaultChecked, onCheckedChange, ...props },\n    forwardedRef\n  ) => {\n    const isIndeterminate =\n      checked === 'indeterminate' || defaultChecked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        className={checkbox({\n          className: cx(className, {\n            [styles['checkbox-disabled']]: disabled,\n            [styles['checkbox-indeterminate']]: isIndeterminate\n          })\n        })}\n        checked={isIndeterminate || checked === true}\n        defaultChecked={defaultChecked === true}\n        onCheckedChange={value => {\n          if (onCheckedChange) {\n            // If it's currently indeterminate, next state will be unchecked\n            if (checked === 'indeterminate') {\n              onCheckedChange(false);\n            } else {\n              onCheckedChange(value);\n            }\n          }\n        }}\n        disabled={disabled}\n        ref={forwardedRef}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className={styles.indicator}>\n          {isIndeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;;;;;;;AAQA;AAkBA;AAkBA;AAgBa;;;AAcH;AACE;AACA;;AAEH;;;AAMG;;;;;;;AAMJ;AAUN;AAGF;;"}
+{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cx } from 'class-variance-authority';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nfunction CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {\n  return (\n    <CheckboxGroupPrimitive\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nfunction CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      className={cx(styles.checkbox, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;;;AAQA;AAkBA;AAkBA;AACE;AAMF;AAEA;AAEA;AACE;AAeF;AAEA;;AAGE;AACD;;"}

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

@@ -1,14 +1,15 @@
-import { VariantProps } from 'class-variance-authority';
-import { Checkbox as CheckboxPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef } from 'react';
-declare const checkbox: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-type CheckboxVariants = VariantProps<typeof checkbox>;
-type CheckedState = boolean | 'indeterminate';
-export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, keyof CheckboxVariants>, CheckboxVariants {
-    checked?: CheckedState;
-    defaultChecked?: CheckedState;
-    onCheckedChange?: (checked: CheckedState) => void;
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
+declare function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxGroup {
+    var displayName: string;
 }
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare function CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxItem {
+    var displayName: string;
+}
+export declare const Checkbox: typeof CheckboxItem & {
+    Group: typeof CheckboxGroup;
+};
 export {};
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAA0B,MAAM,OAAO,CAAC;AAwCzE,QAAA,MAAM,QAAQ,oFAAuB,CAAC;AAEtC,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACtD,KAAK,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAE9C,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACvD,MAAM,gBAAgB,CACvB,EACD,gBAAgB;IAClB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,6GAyCpB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAyCxF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,CAAC,KAAK,2CAO3E;kBAPQ,aAAa;;;AAWtB,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,2CAgB1E;kBAhBQ,YAAY;;;AAoBrB,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/checkbox/checkbox.js

@@ -1,33 +1,23 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cva, cx } from 'class-variance-authority';
-import { Checkbox as Checkbox$1 } from 'radix-ui';
-import { forwardRef } from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
+import { cx } from 'class-variance-authority';
 import styles from './checkbox.module.css.js';
 
 const CheckMarkIcon = () => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: styles.icon, children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z', fill: 'currentColor' }) }));
 const IndeterminateIcon = () => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: styles.icon, children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z', fill: 'currentColor' }) }));
-const checkbox = cva(styles.checkbox);
-const Checkbox = forwardRef(({ className, disabled, checked, defaultChecked, onCheckedChange, ...props }, forwardedRef) => {
-    const isIndeterminate = checked === 'indeterminate' || defaultChecked === 'indeterminate';
-    return (jsx(Checkbox$1.Root, { className: checkbox({
-            className: cx(className, {
-                [styles['checkbox-disabled']]: disabled,
-                [styles['checkbox-indeterminate']]: isIndeterminate
-            })
-        }), checked: isIndeterminate || checked === true, defaultChecked: defaultChecked === true, onCheckedChange: value => {
-            if (onCheckedChange) {
-                // If it's currently indeterminate, next state will be unchecked
-                if (checked === 'indeterminate') {
-                    onCheckedChange(false);
-                }
-                else {
-                    onCheckedChange(value);
-                }
-            }
-        }, disabled: disabled, ref: forwardedRef, ...props, children: jsx(Checkbox$1.Indicator, { className: styles.indicator, children: isIndeterminate ? jsx(IndeterminateIcon, {}) : jsx(CheckMarkIcon, {}) }) }));
+function CheckboxGroup({ className, ...props }) {
+    return (jsx(CheckboxGroup$1, { className: cx(styles.group, className), ...props }));
+}
+CheckboxGroup.displayName = 'Checkbox.Group';
+function CheckboxItem({ className, ...props }) {
+    return (jsx(Checkbox$1.Root, { className: cx(styles.checkbox, className), ...props, children: jsx(Checkbox$1.Indicator, { className: styles.indicator, render: (props, state) => (jsx("span", { ...props, children: state.indeterminate ? jsx(IndeterminateIcon, {}) : jsx(CheckMarkIcon, {}) })) }) }));
+}
+CheckboxItem.displayName = 'Checkbox';
+const Checkbox = Object.assign(CheckboxItem, {
+    Group: CheckboxGroup
 });
-Checkbox.displayName = 'Checkbox';
 
 export { Checkbox };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst checkbox = cva(styles.checkbox);\n\ntype CheckboxVariants = VariantProps<typeof checkbox>;\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps\n  extends Omit<\n      ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n      keyof CheckboxVariants\n    >,\n    CheckboxVariants {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n}\n\nexport const Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    { className, disabled, checked, defaultChecked, onCheckedChange, ...props },\n    forwardedRef\n  ) => {\n    const isIndeterminate =\n      checked === 'indeterminate' || defaultChecked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        className={checkbox({\n          className: cx(className, {\n            [styles['checkbox-disabled']]: disabled,\n            [styles['checkbox-indeterminate']]: isIndeterminate\n          })\n        })}\n        checked={isIndeterminate || checked === true}\n        defaultChecked={defaultChecked === true}\n        onCheckedChange={value => {\n          if (onCheckedChange) {\n            // If it's currently indeterminate, next state will be unchecked\n            if (checked === 'indeterminate') {\n              onCheckedChange(false);\n            } else {\n              onCheckedChange(value);\n            }\n          }\n        }}\n        disabled={disabled}\n        ref={forwardedRef}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className={styles.indicator}>\n          {isIndeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;;;;;AAQA;AAkBA;AAkBA;AAgBa;;;AAcH;AACE;AACA;;AAEH;;;AAMG;;;;;;;AAMJ;AAUN;AAGF;;"}
+{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cx } from 'class-variance-authority';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nfunction CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {\n  return (\n    <CheckboxGroupPrimitive\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nfunction CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      className={cx(styles.checkbox, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;AAQA;AAkBA;AAkBA;AACE;AAMF;AAEA;AAEA;AACE;AAeF;AAEA;;AAGE;AACD;;"}

package/dist/components/checkbox/checkbox.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"checkbox":"checkbox-module_checkbox__MwMTa","checkbox-indeterminate":"checkbox-module_checkbox-indeterminate__prK1B","checkbox-disabled":"checkbox-module_checkbox-disabled__UkyEy","indicator":"checkbox-module_indicator__AlJBp","icon":"checkbox-module_icon__joVFL","checkbox___indeterminate":"checkbox-module_checkbox-indeterminate__prK1B","checkbox___disabled":"checkbox-module_checkbox-disabled__UkyEy"};
+var styles = {"group":"checkbox-module_group__iyptK","checkbox":"checkbox-module_checkbox__MwMTa","indicator":"checkbox-module_indicator__AlJBp","icon":"checkbox-module_icon__joVFL"};
 
 exports.default = styles;
 //# sourceMappingURL=checkbox.module.css.cjs.map

package/dist/components/checkbox/checkbox.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"checkbox":"checkbox-module_checkbox__MwMTa","checkbox-indeterminate":"checkbox-module_checkbox-indeterminate__prK1B","checkbox-disabled":"checkbox-module_checkbox-disabled__UkyEy","indicator":"checkbox-module_indicator__AlJBp","icon":"checkbox-module_icon__joVFL","checkbox___indeterminate":"checkbox-module_checkbox-indeterminate__prK1B","checkbox___disabled":"checkbox-module_checkbox-disabled__UkyEy"};
+var styles = {"group":"checkbox-module_group__iyptK","checkbox":"checkbox-module_checkbox__MwMTa","indicator":"checkbox-module_indicator__AlJBp","icon":"checkbox-module_icon__joVFL"};
 
 export { styles as default };
 //# sourceMappingURL=checkbox.module.css.js.map

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

@@ -1,2 +1,2 @@
-export { Checkbox } from "./checkbox";
+export { Checkbox } from './checkbox';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 declare const chip: (props?: ({
-    variant?: "outline" | "filled" | null | undefined;
+    variant?: "filled" | "outline" | null | undefined;
     size?: "small" | "large" | null | undefined;
     color?: "accent" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/code-block/code-block-code.cjs

@@ -11,7 +11,7 @@ var codeBlock_module = require('./code-block.module.css.cjs');
 var codeBlockRoot = require('./code-block-root.cjs');
 
 const emptyTheme = { plain: {}, styles: [] };
-const CodeBlockCode = React.forwardRef(({ children, language, className, value, ...props }, ref) => {
+const CodeBlockCode = ({ children, language, className, value, ...props }) => {
     const { value: contextValue, setCode, setValue } = codeBlockRoot.useCodeBlockContext();
     const computedValue = value ?? language;
     const isContextValueDefined = !!contextValue;
@@ -34,9 +34,9 @@ const CodeBlockCode = React.forwardRef(({ children, language, className, value,
     ]);
     if (!shouldRender)
         return null;
-    return (jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(codeBlock_module.default.codeContent, className), ...props, children: jsxRuntime.jsx(CodeHighlight, { content: content, language: language }) }));
-});
-CodeBlockCode.displayName = 'CodeBlockCode';
+    return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(codeBlock_module.default.codeContent, className), ...props, children: jsxRuntime.jsx(CodeHighlight, { content: content, language: language }) }));
+};
+CodeBlockCode.displayName = 'CodeBlock.Code';
 const CodeHighlight = React.memo(({ content, language }) => {
     const { hideLineNumbers, maxLines, collapsed } = codeBlockRoot.useCodeBlockContext();
     const canCollapse = maxLines && maxLines > 0;

package/dist/components/code-block/code-block-code.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-code.cjs","sources":["../../../components/code-block/code-block-code.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Highlight, Language } from 'prism-react-renderer';\nimport { forwardRef, HTMLAttributes, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = forwardRef<HTMLDivElement, CodeBlockCodeProps>(\n  ({ children, language, className, value, ...props }, ref) => {\n    const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n    const computedValue = value ?? language;\n    const isContextValueDefined = !!contextValue;\n    const shouldRender =\n      !isContextValueDefined || contextValue === computedValue;\n    const content = children.trim();\n\n    useIsomorphicLayoutEffect(() => {\n      // if value is not defined, set the value\n      if (!isContextValueDefined) setValue(language);\n      // if should render, store the code\n      if (shouldRender) setCode(content);\n    }, [\n      content,\n      setCode,\n      shouldRender,\n      setValue,\n      language,\n      isContextValueDefined\n    ]);\n\n    if (!shouldRender) return null;\n\n    return (\n      <div ref={ref} className={cx(styles.codeContent, className)} {...props}>\n        <CodeHighlight content={content} language={language} />\n      </div>\n    );\n  }\n);\n\nCodeBlockCode.displayName = 'CodeBlockCode';\n\nconst CodeHighlight = memo(\n  ({ content, language }: { content: string; language: Language }) => {\n    const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    return (\n      <Highlight theme={emptyTheme} code={content} language={language}>\n        {({\n          className: highlightClassName,\n          style,\n          tokens,\n          getLineProps,\n          getTokenProps\n        }) => {\n          const renderedTokens =\n            canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;\n          return (\n            <pre\n              className={cx(code.theme, styles.pre, highlightClassName)}\n              style={style}\n            >\n              {renderedTokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })}>\n                  {!hideLineNumbers && (\n                    <span className={styles.lineNumber}>{i + 1}</span>\n                  )}\n                  <span className={styles.lineContent}>\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </span>\n                </div>\n              ))}\n            </pre>\n          );\n        }}\n      </Highlight>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA;;AAII;AACA;AACA;;AAGA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAGF;AAEA;;AAGI;AACA;;;;AAiCF;;"}
+{"version":3,"file":"code-block-code.cjs","sources":["../../../components/code-block/code-block-code.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Highlight, Language } from 'prism-react-renderer';\nimport { ComponentProps, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport interface CodeBlockCodeProps extends ComponentProps<'div'> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = ({\n  children,\n  language,\n  className,\n  value,\n  ...props\n}: CodeBlockCodeProps) => {\n  const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n  const computedValue = value ?? language;\n  const isContextValueDefined = !!contextValue;\n  const shouldRender = !isContextValueDefined || contextValue === computedValue;\n  const content = children.trim();\n\n  useIsomorphicLayoutEffect(() => {\n    // if value is not defined, set the value\n    if (!isContextValueDefined) setValue(language);\n    // if should render, store the code\n    if (shouldRender) setCode(content);\n  }, [\n    content,\n    setCode,\n    shouldRender,\n    setValue,\n    language,\n    isContextValueDefined\n  ]);\n\n  if (!shouldRender) return null;\n\n  return (\n    <div className={cx(styles.codeContent, className)} {...props}>\n      <CodeHighlight content={content} language={language} />\n    </div>\n  );\n};\n\nCodeBlockCode.displayName = 'CodeBlock.Code';\n\nconst CodeHighlight = memo(\n  ({ content, language }: { content: string; language: Language }) => {\n    const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    return (\n      <Highlight theme={emptyTheme} code={content} language={language}>\n        {({\n          className: highlightClassName,\n          style,\n          tokens,\n          getLineProps,\n          getTokenProps\n        }) => {\n          const renderedTokens =\n            canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;\n          return (\n            <pre\n              className={cx(code.theme, styles.pre, highlightClassName)}\n              style={style}\n            >\n              {renderedTokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })}>\n                  {!hideLineNumbers && (\n                    <span className={styles.lineNumber}>{i + 1}</span>\n                  )}\n                  <span className={styles.lineContent}>\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </span>\n                </div>\n              ))}\n            </pre>\n          );\n        }}\n      </Highlight>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA;AAEa;AAOX;AACA;AACA;;AAEA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAEA;AAEA;;AAGI;AACA;;;;AAiCF;;"}

package/dist/components/code-block/code-block-code.d.ts

@@ -1,10 +1,13 @@
 import { Language } from 'prism-react-renderer';
-import { HTMLAttributes } from 'react';
-export interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {
+import { ComponentProps } from 'react';
+export interface CodeBlockCodeProps extends ComponentProps<'div'> {
     children: string;
     language: Language;
     value?: string;
     className?: string;
 }
-export declare const CodeBlockCode: import("react").ForwardRefExoticComponent<CodeBlockCodeProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CodeBlockCode: {
+    ({ children, language, className, value, ...props }: CodeBlockCodeProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 //# sourceMappingURL=code-block-code.d.ts.map

package/dist/components/code-block/code-block-code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-code.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-code.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAc,cAAc,EAAQ,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,eAAO,MAAM,aAAa,+GA+BzB,CAAC"}
+{"version":3,"file":"code-block-code.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-code.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAQ,MAAM,OAAO,CAAC;AAM7C,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,eAAO,MAAM,aAAa;yDAMvB,kBAAkB;;CA4BpB,CAAC"}

package/dist/components/code-block/code-block-code.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
 import { Highlight } from 'prism-react-renderer';
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
 import code from './code.module.css.js';
 import styles from './code-block.module.css.js';
 import { useCodeBlockContext } from './code-block-root.js';
 
 const emptyTheme = { plain: {}, styles: [] };
-const CodeBlockCode = forwardRef(({ children, language, className, value, ...props }, ref) => {
+const CodeBlockCode = ({ children, language, className, value, ...props }) => {
     const { value: contextValue, setCode, setValue } = useCodeBlockContext();
     const computedValue = value ?? language;
     const isContextValueDefined = !!contextValue;
@@ -32,9 +32,9 @@ const CodeBlockCode = forwardRef(({ children, language, className, value, ...pro
     ]);
     if (!shouldRender)
         return null;
-    return (jsx("div", { ref: ref, className: cx(styles.codeContent, className), ...props, children: jsx(CodeHighlight, { content: content, language: language }) }));
-});
-CodeBlockCode.displayName = 'CodeBlockCode';
+    return (jsx("div", { className: cx(styles.codeContent, className), ...props, children: jsx(CodeHighlight, { content: content, language: language }) }));
+};
+CodeBlockCode.displayName = 'CodeBlock.Code';
 const CodeHighlight = memo(({ content, language }) => {
     const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();
     const canCollapse = maxLines && maxLines > 0;

package/dist/components/code-block/code-block-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-code.js","sources":["../../../components/code-block/code-block-code.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Highlight, Language } from 'prism-react-renderer';\nimport { forwardRef, HTMLAttributes, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = forwardRef<HTMLDivElement, CodeBlockCodeProps>(\n  ({ children, language, className, value, ...props }, ref) => {\n    const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n    const computedValue = value ?? language;\n    const isContextValueDefined = !!contextValue;\n    const shouldRender =\n      !isContextValueDefined || contextValue === computedValue;\n    const content = children.trim();\n\n    useIsomorphicLayoutEffect(() => {\n      // if value is not defined, set the value\n      if (!isContextValueDefined) setValue(language);\n      // if should render, store the code\n      if (shouldRender) setCode(content);\n    }, [\n      content,\n      setCode,\n      shouldRender,\n      setValue,\n      language,\n      isContextValueDefined\n    ]);\n\n    if (!shouldRender) return null;\n\n    return (\n      <div ref={ref} className={cx(styles.codeContent, className)} {...props}>\n        <CodeHighlight content={content} language={language} />\n      </div>\n    );\n  }\n);\n\nCodeBlockCode.displayName = 'CodeBlockCode';\n\nconst CodeHighlight = memo(\n  ({ content, language }: { content: string; language: Language }) => {\n    const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    return (\n      <Highlight theme={emptyTheme} code={content} language={language}>\n        {({\n          className: highlightClassName,\n          style,\n          tokens,\n          getLineProps,\n          getTokenProps\n        }) => {\n          const renderedTokens =\n            canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;\n          return (\n            <pre\n              className={cx(code.theme, styles.pre, highlightClassName)}\n              style={style}\n            >\n              {renderedTokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })}>\n                  {!hideLineNumbers && (\n                    <span className={styles.lineNumber}>{i + 1}</span>\n                  )}\n                  <span className={styles.lineContent}>\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </span>\n                </div>\n              ))}\n            </pre>\n          );\n        }}\n      </Highlight>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAiBA;;AAII;AACA;AACA;;AAGA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAGF;AAEA;;AAGI;AACA;;;;AAiCF;;"}
+{"version":3,"file":"code-block-code.js","sources":["../../../components/code-block/code-block-code.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Highlight, Language } from 'prism-react-renderer';\nimport { ComponentProps, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport interface CodeBlockCodeProps extends ComponentProps<'div'> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = ({\n  children,\n  language,\n  className,\n  value,\n  ...props\n}: CodeBlockCodeProps) => {\n  const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n  const computedValue = value ?? language;\n  const isContextValueDefined = !!contextValue;\n  const shouldRender = !isContextValueDefined || contextValue === computedValue;\n  const content = children.trim();\n\n  useIsomorphicLayoutEffect(() => {\n    // if value is not defined, set the value\n    if (!isContextValueDefined) setValue(language);\n    // if should render, store the code\n    if (shouldRender) setCode(content);\n  }, [\n    content,\n    setCode,\n    shouldRender,\n    setValue,\n    language,\n    isContextValueDefined\n  ]);\n\n  if (!shouldRender) return null;\n\n  return (\n    <div className={cx(styles.codeContent, className)} {...props}>\n      <CodeHighlight content={content} language={language} />\n    </div>\n  );\n};\n\nCodeBlockCode.displayName = 'CodeBlock.Code';\n\nconst CodeHighlight = memo(\n  ({ content, language }: { content: string; language: Language }) => {\n    const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    return (\n      <Highlight theme={emptyTheme} code={content} language={language}>\n        {({\n          className: highlightClassName,\n          style,\n          tokens,\n          getLineProps,\n          getTokenProps\n        }) => {\n          const renderedTokens =\n            canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;\n          return (\n            <pre\n              className={cx(code.theme, styles.pre, highlightClassName)}\n              style={style}\n            >\n              {renderedTokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })}>\n                  {!hideLineNumbers && (\n                    <span className={styles.lineNumber}>{i + 1}</span>\n                  )}\n                  <span className={styles.lineContent}>\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </span>\n                </div>\n              ))}\n            </pre>\n          );\n        }}\n      </Highlight>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAiBA;AAEa;AAOX;AACA;AACA;;AAEA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAEA;AAEA;;AAGI;AACA;;;;AAiCF;;"}

package/dist/components/code-block/code-block-language-select.cjs

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var select = require('../select/select.cjs');
 var codeBlock_module = require('./code-block.module.css.cjs');
 var codeBlockRoot = require('./code-block-root.cjs');
@@ -15,11 +14,11 @@ const CodeBlockLanguageSelect = (props) => {
     };
     return jsxRuntime.jsx(select.Select, { onValueChange: handleValueChange, value: value, ...props });
 };
-CodeBlockLanguageSelect.displayName = 'CodeBlockLanguageSelect';
-const CodeBlockLanguageSelectTrigger = React.forwardRef(({ className, ...props }, ref) => {
-    return (jsxRuntime.jsx(select.Select.Trigger, { ref: ref, className: classVarianceAuthority.cx(codeBlock_module.default.languageSelectTrigger, className), size: 'small', variant: 'text', ...props, children: jsxRuntime.jsx(select.Select.Value, {}) }));
-});
-CodeBlockLanguageSelectTrigger.displayName = 'CodeBlockLanguageSelectTrigger';
+CodeBlockLanguageSelect.displayName = 'CodeBlock.LanguageSelect';
+function CodeBlockLanguageSelectTrigger({ className, ...props }) {
+    return (jsxRuntime.jsx(select.Select.Trigger, { className: classVarianceAuthority.cx(codeBlock_module.default.languageSelectTrigger, className), size: 'small', variant: 'text', ...props, children: jsxRuntime.jsx(select.Select.Value, {}) }));
+}
+CodeBlockLanguageSelectTrigger.displayName = 'CodeBlock.LanguageSelectTrigger';
 
 exports.CodeBlockLanguageSelect = CodeBlockLanguageSelect;
 exports.CodeBlockLanguageSelectTrigger = CodeBlockLanguageSelectTrigger;

package/dist/components/code-block/code-block-language-select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-language-select.cjs","sources":["../../../components/code-block/code-block-language-select.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Language } from 'prism-react-renderer';\nimport { ComponentProps, ElementRef, forwardRef } from 'react';\nimport { Select } from '../select';\nimport { SingleSelectProps } from '../select/select-root';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport const CodeBlockLanguageSelect = (props: SingleSelectProps) => {\n  const { value, setValue } = useCodeBlockContext();\n\n  const handleValueChange = (value: string) => {\n    setValue(value as Language);\n  };\n  return <Select onValueChange={handleValueChange} value={value} {...props} />;\n};\n\nCodeBlockLanguageSelect.displayName = 'CodeBlockLanguageSelect';\n\nexport const CodeBlockLanguageSelectTrigger = forwardRef<\n  ElementRef<typeof Select.Trigger>,\n  ComponentProps<typeof Select.Trigger>\n>(({ className, ...props }, ref) => {\n  return (\n    <Select.Trigger\n      ref={ref}\n      className={cx(styles.languageSelectTrigger, className)}\n      size='small'\n      variant='text'\n      {...props}\n    >\n      <Select.Value />\n    </Select.Trigger>\n  );\n});\n\nCodeBlockLanguageSelectTrigger.displayName = 'CodeBlockLanguageSelectTrigger';\n"],"names":[],"mappings":";;;;;;;;;;AAUa;;AAGX;;AAEA;AACA;AACF;AAEA;AAEa;AAIX;AAWF;AAEA;;;"}
+{"version":3,"file":"code-block-language-select.cjs","sources":["../../../components/code-block/code-block-language-select.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Language } from 'prism-react-renderer';\nimport { ComponentProps } from 'react';\nimport { Select } from '../select';\nimport { SingleSelectProps } from '../select/select-root';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport const CodeBlockLanguageSelect = (props: SingleSelectProps) => {\n  const { value, setValue } = useCodeBlockContext();\n\n  const handleValueChange = (value: string) => {\n    setValue(value as Language);\n  };\n  return <Select onValueChange={handleValueChange} value={value} {...props} />;\n};\n\nCodeBlockLanguageSelect.displayName = 'CodeBlock.LanguageSelect';\n\nexport function CodeBlockLanguageSelectTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof Select.Trigger>) {\n  return (\n    <Select.Trigger\n      className={cx(styles.languageSelectTrigger, className)}\n      size='small'\n      variant='text'\n      {...props}\n    >\n      <Select.Value />\n    </Select.Trigger>\n  );\n}\n\nCodeBlockLanguageSelectTrigger.displayName = 'CodeBlock.LanguageSelectTrigger';\n"],"names":[],"mappings":";;;;;;;;;AAUa;;AAGX;;AAEA;AACA;AACF;AAEA;AAEM;AAIJ;AAUF;AAEA;;;"}

package/dist/components/code-block/code-block-language-select.d.ts

@@ -1,7 +1,12 @@
+import { ComponentProps } from 'react';
+import { Select } from '../select';
 import { SingleSelectProps } from '../select/select-root';
 export declare const CodeBlockLanguageSelect: {
     (props: SingleSelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const CodeBlockLanguageSelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("../select/select-trigger").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CodeBlockLanguageSelectTrigger({ className, ...props }: ComponentProps<typeof Select.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeBlockLanguageSelectTrigger {
+    var displayName: string;
+}
 //# sourceMappingURL=code-block-language-select.d.ts.map

package/dist/components/code-block/code-block-language-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-language-select.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-language-select.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI1D,eAAO,MAAM,uBAAuB;YAAW,iBAAiB;;CAO/D,CAAC;AAIF,eAAO,MAAM,8BAA8B,qNAezC,CAAC"}
+{"version":3,"file":"code-block-language-select.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-language-select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI1D,eAAO,MAAM,uBAAuB;YAAW,iBAAiB;;CAO/D,CAAC;AAIF,wBAAgB,8BAA8B,CAAC,EAC7C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,2CAWvC;yBAde,8BAA8B"}

package/dist/components/code-block/code-block-language-select.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import { Select } from '../select/select.js';
 import styles from './code-block.module.css.js';
 import { useCodeBlockContext } from './code-block-root.js';
@@ -13,11 +12,11 @@ const CodeBlockLanguageSelect = (props) => {
     };
     return jsx(Select, { onValueChange: handleValueChange, value: value, ...props });
 };
-CodeBlockLanguageSelect.displayName = 'CodeBlockLanguageSelect';
-const CodeBlockLanguageSelectTrigger = forwardRef(({ className, ...props }, ref) => {
-    return (jsx(Select.Trigger, { ref: ref, className: cx(styles.languageSelectTrigger, className), size: 'small', variant: 'text', ...props, children: jsx(Select.Value, {}) }));
-});
-CodeBlockLanguageSelectTrigger.displayName = 'CodeBlockLanguageSelectTrigger';
+CodeBlockLanguageSelect.displayName = 'CodeBlock.LanguageSelect';
+function CodeBlockLanguageSelectTrigger({ className, ...props }) {
+    return (jsx(Select.Trigger, { className: cx(styles.languageSelectTrigger, className), size: 'small', variant: 'text', ...props, children: jsx(Select.Value, {}) }));
+}
+CodeBlockLanguageSelectTrigger.displayName = 'CodeBlock.LanguageSelectTrigger';
 
 export { CodeBlockLanguageSelect, CodeBlockLanguageSelectTrigger };
 //# sourceMappingURL=code-block-language-select.js.map

package/dist/components/code-block/code-block-language-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-language-select.js","sources":["../../../components/code-block/code-block-language-select.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Language } from 'prism-react-renderer';\nimport { ComponentProps, ElementRef, forwardRef } from 'react';\nimport { Select } from '../select';\nimport { SingleSelectProps } from '../select/select-root';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport const CodeBlockLanguageSelect = (props: SingleSelectProps) => {\n  const { value, setValue } = useCodeBlockContext();\n\n  const handleValueChange = (value: string) => {\n    setValue(value as Language);\n  };\n  return <Select onValueChange={handleValueChange} value={value} {...props} />;\n};\n\nCodeBlockLanguageSelect.displayName = 'CodeBlockLanguageSelect';\n\nexport const CodeBlockLanguageSelectTrigger = forwardRef<\n  ElementRef<typeof Select.Trigger>,\n  ComponentProps<typeof Select.Trigger>\n>(({ className, ...props }, ref) => {\n  return (\n    <Select.Trigger\n      ref={ref}\n      className={cx(styles.languageSelectTrigger, className)}\n      size='small'\n      variant='text'\n      {...props}\n    >\n      <Select.Value />\n    </Select.Trigger>\n  );\n});\n\nCodeBlockLanguageSelectTrigger.displayName = 'CodeBlockLanguageSelectTrigger';\n"],"names":[],"mappings":";;;;;;;;AAUa;;AAGX;;AAEA;AACA;AACF;AAEA;AAEa;AAIX;AAWF;AAEA;;"}
+{"version":3,"file":"code-block-language-select.js","sources":["../../../components/code-block/code-block-language-select.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Language } from 'prism-react-renderer';\nimport { ComponentProps } from 'react';\nimport { Select } from '../select';\nimport { SingleSelectProps } from '../select/select-root';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport const CodeBlockLanguageSelect = (props: SingleSelectProps) => {\n  const { value, setValue } = useCodeBlockContext();\n\n  const handleValueChange = (value: string) => {\n    setValue(value as Language);\n  };\n  return <Select onValueChange={handleValueChange} value={value} {...props} />;\n};\n\nCodeBlockLanguageSelect.displayName = 'CodeBlock.LanguageSelect';\n\nexport function CodeBlockLanguageSelectTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof Select.Trigger>) {\n  return (\n    <Select.Trigger\n      className={cx(styles.languageSelectTrigger, className)}\n      size='small'\n      variant='text'\n      {...props}\n    >\n      <Select.Value />\n    </Select.Trigger>\n  );\n}\n\nCodeBlockLanguageSelectTrigger.displayName = 'CodeBlock.LanguageSelectTrigger';\n"],"names":[],"mappings":";;;;;;;AAUa;;AAGX;;AAEA;AACA;AACF;AAEA;AAEM;AAIJ;AAUF;AAEA;;"}

package/dist/components/code-block/code-block-misc.cjs

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var button = require('../button/button.cjs');
 var copyButton = require('../copy-button/copy-button.cjs');
 var flex = require('../flex/flex.cjs');
@@ -11,35 +10,35 @@ var text = require('../text/text.cjs');
 var codeBlock_module = require('./code-block.module.css.cjs');
 var codeBlockRoot = require('./code-block-root.cjs');
 
-const CodeBlockContent = React.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(codeBlock_module.default.content, className), ...props, children: children }));
-});
-CodeBlockContent.displayName = 'CodeBlockContent';
-const CodeBlockHeader = React.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsxRuntime.jsx(flex.Flex, { ref: ref, align: 'center', gap: 4, className: classVarianceAuthority.cx(codeBlock_module.default.header, className), ...props, children: children }));
-});
-CodeBlockHeader.displayName = 'CodeBlockHeader';
-const CodeBlockLabel = React.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsxRuntime.jsx(text.Text, { ref: ref, className: classVarianceAuthority.cx(codeBlock_module.default.label, className), ...props, children: children }));
-});
-CodeBlockLabel.displayName = 'CodeBlockLabel';
-const CodeBlockCollapseTrigger = React.forwardRef(({ className, children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'), onClick, ...props }, ref) => {
+function CodeBlockContent({ children, className, ...props }) {
+    return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(codeBlock_module.default.content, className), ...props, children: children }));
+}
+CodeBlockContent.displayName = 'CodeBlock.Content';
+function CodeBlockHeader({ children, className, ...props }) {
+    return (jsxRuntime.jsx(flex.Flex, { align: 'center', gap: 4, className: classVarianceAuthority.cx(codeBlock_module.default.header, className), ...props, children: children }));
+}
+CodeBlockHeader.displayName = 'CodeBlock.Header';
+function CodeBlockLabel({ children, className, ...props }) {
+    return (jsxRuntime.jsx(text.Text, { className: classVarianceAuthority.cx(codeBlock_module.default.label, className), ...props, children: children }));
+}
+CodeBlockLabel.displayName = 'CodeBlock.Label';
+function CodeBlockCollapseTrigger({ className, children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'), onClick, ...props }) {
     const { maxLines, collapsed, toggleCollapsed, code } = codeBlockRoot.useCodeBlockContext();
     const canCollapse = maxLines && maxLines > 0;
     const lineCount = code?.split('\n').length ?? 0;
     if (!canCollapse || lineCount < maxLines)
         return null;
-    return (jsxRuntime.jsx(button.Button, { ref: ref, onClick: e => {
+    return (jsxRuntime.jsx(button.Button, { onClick: e => {
             toggleCollapsed();
             onClick?.(e);
         }, variant: 'text', color: 'neutral', className: classVarianceAuthority.cx(codeBlock_module.default.collapseTrigger, collapsed && codeBlock_module.default.collapsed, className), ...props, children: typeof children === 'function' ? children(!!collapsed) : children }));
-});
-CodeBlockCollapseTrigger.displayName = 'CodeBlockCollapseTrigger';
-const CodeBlockCopyButton = React.forwardRef(({ className, variant = 'default', ...props }, ref) => {
+}
+CodeBlockCollapseTrigger.displayName = 'CodeBlock.CollapseTrigger';
+function CodeBlockCopyButton({ className, variant = 'default', ...props }) {
     const { code = '' } = codeBlockRoot.useCodeBlockContext();
-    return (jsxRuntime.jsx(copyButton.CopyButton, { ref: ref, text: code, size: variant === 'floating' ? 2 : 3, className: classVarianceAuthority.cx(codeBlock_module.default.copyButton, variant === 'floating' && codeBlock_module.default.floatingCopyButton, className), ...props }));
-});
-CodeBlockCopyButton.displayName = 'CodeBlockCopyButton';
+    return (jsxRuntime.jsx(copyButton.CopyButton, { text: code, size: variant === 'floating' ? 2 : 3, className: classVarianceAuthority.cx(codeBlock_module.default.copyButton, variant === 'floating' && codeBlock_module.default.floatingCopyButton, className), ...props }));
+}
+CodeBlockCopyButton.displayName = 'CodeBlock.CopyButton';
 
 exports.CodeBlockCollapseTrigger = CodeBlockCollapseTrigger;
 exports.CodeBlockContent = CodeBlockContent;