@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.2

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;

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-misc.cjs","sources":["../../../components/code-block/code-block-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode\n} from 'react';\nimport { Button } from '../button';\nimport { CopyButton } from '../copy-button';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport const CodeBlockContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cx(styles.content, className)} {...props}>\n      {children}\n    </div>\n  );\n});\n\nCodeBlockContent.displayName = 'CodeBlockContent';\n\nexport const CodeBlockHeader = forwardRef<\n  ElementRef<typeof Flex>,\n  ComponentProps<typeof Flex>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Flex\n      ref={ref}\n      align='center'\n      gap={4}\n      className={cx(styles.header, className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nCodeBlockHeader.displayName = 'CodeBlockHeader';\n\nexport const CodeBlockLabel = forwardRef<\n  ElementRef<typeof Text>,\n  ComponentProps<typeof Text>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Text ref={ref} className={cx(styles.label, className)} {...props}>\n      {children}\n    </Text>\n  );\n});\n\nCodeBlockLabel.displayName = 'CodeBlockLabel';\n\nexport interface CodeBlockCollapseTriggerProps\n  extends Omit<ComponentProps<typeof Button>, 'children'> {\n  children?: ReactNode | ((collapsed: boolean) => ReactNode);\n}\nexport const CodeBlockCollapseTrigger = forwardRef<\n  HTMLButtonElement,\n  CodeBlockCollapseTriggerProps\n>(\n  (\n    {\n      className,\n      children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const { maxLines, collapsed, toggleCollapsed, code } =\n      useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    const lineCount = code?.split('\\n').length ?? 0;\n\n    if (!canCollapse || lineCount < maxLines) return null;\n\n    return (\n      <Button\n        ref={ref}\n        onClick={e => {\n          toggleCollapsed();\n          onClick?.(e);\n        }}\n        variant='text'\n        color='neutral'\n        className={cx(\n          styles.collapseTrigger,\n          collapsed && styles.collapsed,\n          className\n        )}\n        {...props}\n      >\n        {typeof children === 'function' ? children(!!collapsed) : children}\n      </Button>\n    );\n  }\n);\n\nCodeBlockCollapseTrigger.displayName = 'CodeBlockCollapseTrigger';\n\nexport interface CodeBlockCopyButtonProps\n  extends Omit<ComponentProps<typeof CopyButton>, 'text'> {\n  variant?: 'floating' | 'default';\n}\n\nexport const CodeBlockCopyButton = forwardRef<\n  ElementRef<typeof CopyButton>,\n  CodeBlockCopyButtonProps\n>(({ className, variant = 'default', ...props }, ref) => {\n  const { code = '' } = useCodeBlockContext();\n\n  return (\n    <CopyButton\n      ref={ref}\n      text={code}\n      size={variant === 'floating' ? 2 : 3}\n      className={cx(\n        styles.copyButton,\n        variant === 'floating' && styles.floatingCopyButton,\n        className\n      )}\n      {...props}\n    />\n  );\n});\n\nCodeBlockCopyButton.displayName = 'CodeBlockCopyButton';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiBa;;AASb;AAEA;AAEa;AAIX;AAWF;AAEA;AAEa;;AASb;AAEA;AAMa;AAaT;AAEA;AACA;AAEA;AAA0C;AAE1C;AAIM;AACA;;AAcR;AAGF;;;;AA0BA;AAEA;;;;;;"}
+{"version":3,"file":"code-block-misc.cjs","sources":["../../../components/code-block/code-block-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../button';\nimport { CopyButton } from '../copy-button';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport function CodeBlockContent({\n  children,\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div className={cx(styles.content, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nCodeBlockContent.displayName = 'CodeBlock.Content';\n\nexport function CodeBlockHeader({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      align='center'\n      gap={4}\n      className={cx(styles.header, className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n}\n\nCodeBlockHeader.displayName = 'CodeBlock.Header';\n\nexport function CodeBlockLabel({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Text>) {\n  return (\n    <Text className={cx(styles.label, className)} {...props}>\n      {children}\n    </Text>\n  );\n}\n\nCodeBlockLabel.displayName = 'CodeBlock.Label';\n\nexport interface CodeBlockCollapseTriggerProps\n  extends Omit<ComponentProps<typeof Button>, 'children'> {\n  children?: ReactNode | ((collapsed: boolean) => ReactNode);\n}\n\nexport function CodeBlockCollapseTrigger({\n  className,\n  children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),\n  onClick,\n  ...props\n}: CodeBlockCollapseTriggerProps) {\n  const { maxLines, collapsed, toggleCollapsed, code } = useCodeBlockContext();\n  const canCollapse = maxLines && maxLines > 0;\n  const lineCount = code?.split('\\n').length ?? 0;\n\n  if (!canCollapse || lineCount < maxLines) return null;\n\n  return (\n    <Button\n      onClick={e => {\n        toggleCollapsed();\n        onClick?.(e);\n      }}\n      variant='text'\n      color='neutral'\n      className={cx(\n        styles.collapseTrigger,\n        collapsed && styles.collapsed,\n        className\n      )}\n      {...props}\n    >\n      {typeof children === 'function' ? children(!!collapsed) : children}\n    </Button>\n  );\n}\n\nCodeBlockCollapseTrigger.displayName = 'CodeBlock.CollapseTrigger';\n\nexport interface CodeBlockCopyButtonProps\n  extends Omit<ComponentProps<typeof CopyButton>, 'text'> {\n  variant?: 'floating' | 'default';\n}\n\nexport function CodeBlockCopyButton({\n  className,\n  variant = 'default',\n  ...props\n}: CodeBlockCopyButtonProps) {\n  const { code = '' } = useCodeBlockContext();\n\n  return (\n    <CopyButton\n      text={code}\n      size={variant === 'floating' ? 2 : 3}\n      className={cx(\n        styles.copyButton,\n        variant === 'floating' && styles.floatingCopyButton,\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nCodeBlockCopyButton.displayName = 'CodeBlock.CopyButton';\n"],"names":[],"mappings":";;;;;;;;;;;;AAWM;AAKJ;AAKF;AAEA;AAEM;AAKJ;AAUF;AAEA;AAEM;;AAUN;AAEA;AAOgB;AAMd;AACA;AACA;AAEA;AAA0C;;AAKpC;AACA;;AAcR;AAEA;AAOgB;;;AAmBhB;AAEA;;;;;;"}

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

@@ -1,99 +1,32 @@
-import { ComponentProps, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Button } from '../button';
 import { CopyButton } from '../copy-button';
-export declare const CodeBlockContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CodeBlockHeader: import("react").ForwardRefExoticComponent<Omit<Omit<import("class-variance-authority").VariantProps<(props?: ({
-    direction?: "row" | "column" | "rowReverse" | "columnReverse" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "start" | "end" | "between" | null | undefined;
-    wrap?: "wrap" | "noWrap" | "wrapReverse" | null | undefined;
-    gap?: "small" | 1 | 2 | "extra-small" | "medium" | "large" | "extra-large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
-    width?: "full" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-    render?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CodeBlockLabel: import("react").ForwardRefExoticComponent<(Omit<import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-    transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-    align?: "center" | "start" | "end" | "justify" | null | undefined;
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-    underline?: boolean | null | undefined;
-    strikeThrough?: boolean | null | undefined;
-    italic?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-} & {
-    as?: "span" | undefined;
-} & Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-    transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-    align?: "center" | "start" | "end" | "justify" | null | undefined;
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-    underline?: boolean | null | undefined;
-    strikeThrough?: boolean | null | undefined;
-    italic?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-} & {
-    as: "div";
-} & Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-    transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-    align?: "center" | "start" | "end" | "justify" | null | undefined;
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-    underline?: boolean | null | undefined;
-    strikeThrough?: boolean | null | undefined;
-    italic?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-} & {
-    as: "label";
-} & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-    transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-    align?: "center" | "start" | "end" | "justify" | null | undefined;
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-    underline?: boolean | null | undefined;
-    strikeThrough?: boolean | null | undefined;
-    italic?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-} & {
-    as: "p";
-} & Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref"> | Omit<import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success" | null | undefined;
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | null | undefined;
-    transform?: "capitalize" | "uppercase" | "lowercase" | null | undefined;
-    align?: "center" | "start" | "end" | "justify" | null | undefined;
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | null | undefined;
-    underline?: boolean | null | undefined;
-    strikeThrough?: boolean | null | undefined;
-    italic?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    size?: "small" | 1 | 2 | 10 | "large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "micro" | "mini" | "regular" | undefined;
-    weight?: "bold" | "medium" | "regular" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
-} & {
-    as: "a";
-} & Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>, "ref">) & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLLabelElement | HTMLParagraphElement>>;
+import { Flex } from '../flex';
+import { Text } from '../text';
+export declare function CodeBlockContent({ children, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeBlockContent {
+    var displayName: string;
+}
+export declare function CodeBlockHeader({ children, className, ...props }: ComponentProps<typeof Flex>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeBlockHeader {
+    var displayName: string;
+}
+export declare function CodeBlockLabel({ children, className, ...props }: ComponentProps<typeof Text>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeBlockLabel {
+    var displayName: string;
+}
 export interface CodeBlockCollapseTriggerProps extends Omit<ComponentProps<typeof Button>, 'children'> {
     children?: ReactNode | ((collapsed: boolean) => ReactNode);
 }
-export declare const CodeBlockCollapseTrigger: import("react").ForwardRefExoticComponent<Omit<CodeBlockCollapseTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CodeBlockCollapseTrigger({ className, children, onClick, ...props }: CodeBlockCollapseTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace CodeBlockCollapseTrigger {
+    var displayName: string;
+}
 export interface CodeBlockCopyButtonProps extends Omit<ComponentProps<typeof CopyButton>, 'text'> {
     variant?: 'floating' | 'default';
 }
-export declare const CodeBlockCopyButton: import("react").ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CodeBlockCopyButton({ className, variant, ...props }: CodeBlockCopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeBlockCopyButton {
+    var displayName: string;
+}
 //# sourceMappingURL=code-block-misc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-misc.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-misc.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAGd,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAM5C,eAAO,MAAM,gBAAgB,2HAS3B,CAAC;AAIH,eAAO,MAAM,eAAe;;;;;;;;;kHAe1B,CAAC;AAIH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wYASzB,CAAC;AAIH,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC;IACvD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;CAC5D;AACD,eAAO,MAAM,wBAAwB,0IAwCpC,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,CAAC;IACvD,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,qIAmB9B,CAAC"}
+{"version":3,"file":"code-block-misc.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-misc.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAMvB;yBAVe,gBAAgB;;;AAchC,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CAW7B;yBAfe,eAAe;;;AAmB/B,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CAM7B;yBAVe,cAAc;;;AAc9B,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC;IACvD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;CAC5D;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,QAA+D,EAC/D,OAAO,EACP,GAAG,KAAK,EACT,EAAE,6BAA6B,kDAyB/B;yBA9Be,wBAAwB;;;AAkCxC,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,CAAC;IACvD,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAe1B;yBAnBe,mBAAmB"}

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import { Button } from '../button/button.js';
 import { CopyButton } from '../copy-button/copy-button.js';
 import { Flex } from '../flex/flex.js';
@@ -9,35 +8,35 @@ import { Text } from '../text/text.js';
 import styles from './code-block.module.css.js';
 import { useCodeBlockContext } from './code-block-root.js';
 
-const CodeBlockContent = forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cx(styles.content, className), ...props, children: children }));
-});
-CodeBlockContent.displayName = 'CodeBlockContent';
-const CodeBlockHeader = forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx(Flex, { ref: ref, align: 'center', gap: 4, className: cx(styles.header, className), ...props, children: children }));
-});
-CodeBlockHeader.displayName = 'CodeBlockHeader';
-const CodeBlockLabel = forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx(Text, { ref: ref, className: cx(styles.label, className), ...props, children: children }));
-});
-CodeBlockLabel.displayName = 'CodeBlockLabel';
-const CodeBlockCollapseTrigger = forwardRef(({ className, children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'), onClick, ...props }, ref) => {
+function CodeBlockContent({ children, className, ...props }) {
+    return (jsx("div", { className: cx(styles.content, className), ...props, children: children }));
+}
+CodeBlockContent.displayName = 'CodeBlock.Content';
+function CodeBlockHeader({ children, className, ...props }) {
+    return (jsx(Flex, { align: 'center', gap: 4, className: cx(styles.header, className), ...props, children: children }));
+}
+CodeBlockHeader.displayName = 'CodeBlock.Header';
+function CodeBlockLabel({ children, className, ...props }) {
+    return (jsx(Text, { className: cx(styles.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 } = useCodeBlockContext();
     const canCollapse = maxLines && maxLines > 0;
     const lineCount = code?.split('\n').length ?? 0;
     if (!canCollapse || lineCount < maxLines)
         return null;
-    return (jsx(Button, { ref: ref, onClick: e => {
+    return (jsx(Button, { onClick: e => {
             toggleCollapsed();
             onClick?.(e);
         }, variant: 'text', color: 'neutral', className: cx(styles.collapseTrigger, collapsed && styles.collapsed, className), ...props, children: typeof children === 'function' ? children(!!collapsed) : children }));
-});
-CodeBlockCollapseTrigger.displayName = 'CodeBlockCollapseTrigger';
-const CodeBlockCopyButton = forwardRef(({ className, variant = 'default', ...props }, ref) => {
+}
+CodeBlockCollapseTrigger.displayName = 'CodeBlock.CollapseTrigger';
+function CodeBlockCopyButton({ className, variant = 'default', ...props }) {
     const { code = '' } = useCodeBlockContext();
-    return (jsx(CopyButton, { ref: ref, text: code, size: variant === 'floating' ? 2 : 3, className: cx(styles.copyButton, variant === 'floating' && styles.floatingCopyButton, className), ...props }));
-});
-CodeBlockCopyButton.displayName = 'CodeBlockCopyButton';
+    return (jsx(CopyButton, { text: code, size: variant === 'floating' ? 2 : 3, className: cx(styles.copyButton, variant === 'floating' && styles.floatingCopyButton, className), ...props }));
+}
+CodeBlockCopyButton.displayName = 'CodeBlock.CopyButton';
 
 export { CodeBlockCollapseTrigger, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockLabel };
 //# sourceMappingURL=code-block-misc.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-misc.js","sources":["../../../components/code-block/code-block-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode\n} from 'react';\nimport { Button } from '../button';\nimport { CopyButton } from '../copy-button';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport const CodeBlockContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cx(styles.content, className)} {...props}>\n      {children}\n    </div>\n  );\n});\n\nCodeBlockContent.displayName = 'CodeBlockContent';\n\nexport const CodeBlockHeader = forwardRef<\n  ElementRef<typeof Flex>,\n  ComponentProps<typeof Flex>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Flex\n      ref={ref}\n      align='center'\n      gap={4}\n      className={cx(styles.header, className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nCodeBlockHeader.displayName = 'CodeBlockHeader';\n\nexport const CodeBlockLabel = forwardRef<\n  ElementRef<typeof Text>,\n  ComponentProps<typeof Text>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Text ref={ref} className={cx(styles.label, className)} {...props}>\n      {children}\n    </Text>\n  );\n});\n\nCodeBlockLabel.displayName = 'CodeBlockLabel';\n\nexport interface CodeBlockCollapseTriggerProps\n  extends Omit<ComponentProps<typeof Button>, 'children'> {\n  children?: ReactNode | ((collapsed: boolean) => ReactNode);\n}\nexport const CodeBlockCollapseTrigger = forwardRef<\n  HTMLButtonElement,\n  CodeBlockCollapseTriggerProps\n>(\n  (\n    {\n      className,\n      children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const { maxLines, collapsed, toggleCollapsed, code } =\n      useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    const lineCount = code?.split('\\n').length ?? 0;\n\n    if (!canCollapse || lineCount < maxLines) return null;\n\n    return (\n      <Button\n        ref={ref}\n        onClick={e => {\n          toggleCollapsed();\n          onClick?.(e);\n        }}\n        variant='text'\n        color='neutral'\n        className={cx(\n          styles.collapseTrigger,\n          collapsed && styles.collapsed,\n          className\n        )}\n        {...props}\n      >\n        {typeof children === 'function' ? children(!!collapsed) : children}\n      </Button>\n    );\n  }\n);\n\nCodeBlockCollapseTrigger.displayName = 'CodeBlockCollapseTrigger';\n\nexport interface CodeBlockCopyButtonProps\n  extends Omit<ComponentProps<typeof CopyButton>, 'text'> {\n  variant?: 'floating' | 'default';\n}\n\nexport const CodeBlockCopyButton = forwardRef<\n  ElementRef<typeof CopyButton>,\n  CodeBlockCopyButtonProps\n>(({ className, variant = 'default', ...props }, ref) => {\n  const { code = '' } = useCodeBlockContext();\n\n  return (\n    <CopyButton\n      ref={ref}\n      text={code}\n      size={variant === 'floating' ? 2 : 3}\n      className={cx(\n        styles.copyButton,\n        variant === 'floating' && styles.floatingCopyButton,\n        className\n      )}\n      {...props}\n    />\n  );\n});\n\nCodeBlockCopyButton.displayName = 'CodeBlockCopyButton';\n"],"names":[],"mappings":";;;;;;;;;;;AAiBa;;AASb;AAEA;AAEa;AAIX;AAWF;AAEA;AAEa;;AASb;AAEA;AAMa;AAaT;AAEA;AACA;AAEA;AAA0C;AAE1C;AAIM;AACA;;AAcR;AAGF;;;;AA0BA;AAEA;;"}
+{"version":3,"file":"code-block-misc.js","sources":["../../../components/code-block/code-block-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../button';\nimport { CopyButton } from '../copy-button';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport function CodeBlockContent({\n  children,\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div className={cx(styles.content, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nCodeBlockContent.displayName = 'CodeBlock.Content';\n\nexport function CodeBlockHeader({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      align='center'\n      gap={4}\n      className={cx(styles.header, className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n}\n\nCodeBlockHeader.displayName = 'CodeBlock.Header';\n\nexport function CodeBlockLabel({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Text>) {\n  return (\n    <Text className={cx(styles.label, className)} {...props}>\n      {children}\n    </Text>\n  );\n}\n\nCodeBlockLabel.displayName = 'CodeBlock.Label';\n\nexport interface CodeBlockCollapseTriggerProps\n  extends Omit<ComponentProps<typeof Button>, 'children'> {\n  children?: ReactNode | ((collapsed: boolean) => ReactNode);\n}\n\nexport function CodeBlockCollapseTrigger({\n  className,\n  children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),\n  onClick,\n  ...props\n}: CodeBlockCollapseTriggerProps) {\n  const { maxLines, collapsed, toggleCollapsed, code } = useCodeBlockContext();\n  const canCollapse = maxLines && maxLines > 0;\n  const lineCount = code?.split('\\n').length ?? 0;\n\n  if (!canCollapse || lineCount < maxLines) return null;\n\n  return (\n    <Button\n      onClick={e => {\n        toggleCollapsed();\n        onClick?.(e);\n      }}\n      variant='text'\n      color='neutral'\n      className={cx(\n        styles.collapseTrigger,\n        collapsed && styles.collapsed,\n        className\n      )}\n      {...props}\n    >\n      {typeof children === 'function' ? children(!!collapsed) : children}\n    </Button>\n  );\n}\n\nCodeBlockCollapseTrigger.displayName = 'CodeBlock.CollapseTrigger';\n\nexport interface CodeBlockCopyButtonProps\n  extends Omit<ComponentProps<typeof CopyButton>, 'text'> {\n  variant?: 'floating' | 'default';\n}\n\nexport function CodeBlockCopyButton({\n  className,\n  variant = 'default',\n  ...props\n}: CodeBlockCopyButtonProps) {\n  const { code = '' } = useCodeBlockContext();\n\n  return (\n    <CopyButton\n      text={code}\n      size={variant === 'floating' ? 2 : 3}\n      className={cx(\n        styles.copyButton,\n        variant === 'floating' && styles.floatingCopyButton,\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nCodeBlockCopyButton.displayName = 'CodeBlock.CopyButton';\n"],"names":[],"mappings":";;;;;;;;;;AAWM;AAKJ;AAKF;AAEA;AAEM;AAKJ;AAUF;AAEA;AAEM;;AAUN;AAEA;AAOgB;AAMd;AACA;AACA;AAEA;AAA0C;;AAKpC;AACA;;AAcR;AAEA;AAOgB;;;AAmBhB;AAEA;;"}

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

@@ -14,7 +14,7 @@ const useCodeBlockContext = () => {
     }
     return context;
 };
-const CodeBlockRoot = React.forwardRef(({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers = false, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed = true, onCollapseChange, ...props }, ref) => {
+const CodeBlockRoot = ({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers = false, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed = true, onCollapseChange, ...props }) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [code, setCode] = React.useState();
     const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed ?? false);
@@ -30,7 +30,7 @@ const CodeBlockRoot = React.forwardRef(({ children, value: providedValue, onValu
             return !_internalCollapsed;
         });
     }, [onCollapseChange]);
-    return (jsxRuntime.jsx(CodeBlockContext.Provider, { value: {
+    return (jsxRuntime.jsx(CodeBlockContext, { value: {
             hideLineNumbers,
             value,
             setValue,
@@ -39,8 +39,8 @@ const CodeBlockRoot = React.forwardRef(({ children, value: providedValue, onValu
             maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger
             collapsed,
             toggleCollapsed
-        }, children: jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(codeBlock_module.default.container, className), ...props, children: children }) }));
-});
+        }, children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(codeBlock_module.default.container, className), ...props, children: children }) }));
+};
 CodeBlockRoot.displayName = 'CodeBlock';
 
 exports.CodeBlockRoot = CodeBlockRoot;

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-root.cjs","sources":["../../../components/code-block/code-block-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  createContext,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport styles from './code-block.module.css';\n\ninterface CodeBlockCommonProps {\n  hideLineNumbers?: boolean;\n  value?: string;\n  maxLines?: number;\n  collapsed?: boolean;\n}\n\ninterface CodeBlockContextValue extends CodeBlockCommonProps {\n  setValue: (value: string) => void;\n  code?: string;\n  setCode: (code: string) => void;\n  toggleCollapsed: () => void;\n}\n\nconst CodeBlockContext = createContext<CodeBlockContextValue | undefined>(\n  undefined\n);\n\nexport const useCodeBlockContext = () => {\n  const context = useContext(CodeBlockContext);\n  if (!context) {\n    throw new Error('useCodeBlockContext must be used within a CodeBlock');\n  }\n  return context;\n};\n\nexport interface CodeBlockProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CodeBlockCommonProps {\n  defaultValue?: string;\n  maxHeight?: string | number;\n  onValueChange?: (value: string) => void;\n  defaultCollapsed?: boolean;\n  onCollapseChange?: (value: boolean) => void;\n}\n\nexport const CodeBlockRoot = forwardRef<HTMLDivElement, CodeBlockProps>(\n  (\n    {\n      children,\n      value: providedValue,\n      onValueChange,\n      defaultValue,\n      hideLineNumbers = false,\n      maxLines,\n      maxHeight,\n      className,\n      collapsed: providedCollapsed,\n      defaultCollapsed = true,\n      onCollapseChange,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState<string | undefined>(\n      defaultValue\n    );\n    const [code, setCode] = useState<string | undefined>();\n    const [internalCollapsed, setInternalCollapsed] = useState<boolean>(\n      defaultCollapsed ?? false\n    );\n\n    const collapsed = providedCollapsed ?? internalCollapsed;\n\n    const value = providedValue ?? internalValue ?? defaultValue;\n\n    const setValue = useCallback(\n      (newValue: string) => {\n        setInternalValue(newValue);\n        onValueChange?.(newValue);\n      },\n      [onValueChange]\n    );\n\n    const toggleCollapsed = useCallback(() => {\n      setInternalCollapsed(_internalCollapsed => {\n        onCollapseChange?.(!_internalCollapsed);\n        return !_internalCollapsed;\n      });\n    }, [onCollapseChange]);\n\n    return (\n      <CodeBlockContext.Provider\n        value={{\n          hideLineNumbers,\n          value,\n          setValue,\n          code,\n          setCode,\n          maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger\n          collapsed,\n          toggleCollapsed\n        }}\n      >\n        <div ref={ref} className={cx(styles.container, className)} {...props}>\n          {children}\n        </div>\n      </CodeBlockContext.Provider>\n    );\n  }\n);\n\nCodeBlockRoot.displayName = 'CodeBlock';\n"],"names":[],"mappings":";;;;;;;;AA2BA;AAIO;AACL;;AAEE;;AAEF;AACF;;;;AAkCI;AAIA;AAEA;AAEA;;AAGI;AACF;AAIF;;AAEI;;AAEF;AACF;AAEA;;;;;;AAQM;;;;AAUR;AAGF;;;"}
+{"version":3,"file":"code-block-root.cjs","sources":["../../../components/code-block/code-block-root.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport styles from './code-block.module.css';\n\ninterface CodeBlockCommonProps {\n  hideLineNumbers?: boolean;\n  value?: string;\n  maxLines?: number;\n  collapsed?: boolean;\n}\n\ninterface CodeBlockContextValue extends CodeBlockCommonProps {\n  setValue: (value: string) => void;\n  code?: string;\n  setCode: (code: string) => void;\n  toggleCollapsed: () => void;\n}\n\nconst CodeBlockContext = createContext<CodeBlockContextValue | undefined>(\n  undefined\n);\n\nexport const useCodeBlockContext = () => {\n  const context = useContext(CodeBlockContext);\n  if (!context) {\n    throw new Error('useCodeBlockContext must be used within a CodeBlock');\n  }\n  return context;\n};\n\nexport interface CodeBlockProps\n  extends ComponentProps<'div'>,\n    CodeBlockCommonProps {\n  defaultValue?: string;\n  maxHeight?: string | number;\n  onValueChange?: (value: string) => void;\n  defaultCollapsed?: boolean;\n  onCollapseChange?: (value: boolean) => void;\n}\n\nexport const CodeBlockRoot = ({\n  children,\n  value: providedValue,\n  onValueChange,\n  defaultValue,\n  hideLineNumbers = false,\n  maxLines,\n  maxHeight,\n  className,\n  collapsed: providedCollapsed,\n  defaultCollapsed = true,\n  onCollapseChange,\n  ...props\n}: CodeBlockProps) => {\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const [code, setCode] = useState<string | undefined>();\n  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(\n    defaultCollapsed ?? false\n  );\n\n  const collapsed = providedCollapsed ?? internalCollapsed;\n\n  const value = providedValue ?? internalValue ?? defaultValue;\n\n  const setValue = useCallback(\n    (newValue: string) => {\n      setInternalValue(newValue);\n      onValueChange?.(newValue);\n    },\n    [onValueChange]\n  );\n\n  const toggleCollapsed = useCallback(() => {\n    setInternalCollapsed(_internalCollapsed => {\n      onCollapseChange?.(!_internalCollapsed);\n      return !_internalCollapsed;\n    });\n  }, [onCollapseChange]);\n\n  return (\n    <CodeBlockContext\n      value={{\n        hideLineNumbers,\n        value,\n        setValue,\n        code,\n        setCode,\n        maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger\n        collapsed,\n        toggleCollapsed\n      }}\n    >\n      <div className={cx(styles.container, className)} {...props}>\n        {children}\n      </div>\n    </CodeBlockContext>\n  );\n};\n\nCodeBlockRoot.displayName = 'CodeBlock';\n"],"names":[],"mappings":";;;;;;;;AA0BA;AAIO;AACL;;AAEE;;AAEF;AACF;AAYa;;;AAkBX;AAIA;AAEA;AAEA;;AAGI;AACF;AAIF;;AAEI;;AAEF;AACF;AAEA;;;;;;AAQM;;;AAGD;AAOP;AAEA;;;"}

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { ComponentProps } from 'react';
 interface CodeBlockCommonProps {
     hideLineNumbers?: boolean;
     value?: string;
@@ -12,13 +12,16 @@ interface CodeBlockContextValue extends CodeBlockCommonProps {
     toggleCollapsed: () => void;
 }
 export declare const useCodeBlockContext: () => CodeBlockContextValue;
-export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement>, CodeBlockCommonProps {
+export interface CodeBlockProps extends ComponentProps<'div'>, CodeBlockCommonProps {
     defaultValue?: string;
     maxHeight?: string | number;
     onValueChange?: (value: string) => void;
     defaultCollapsed?: boolean;
     onCollapseChange?: (value: boolean) => void;
 }
-export declare const CodeBlockRoot: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CodeBlockRoot: {
+    ({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed, onCollapseChange, ...props }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=code-block-root.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-root.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,cAAc,EAIf,MAAM,OAAO,CAAC;AAGf,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAMD,eAAO,MAAM,mBAAmB,6BAM/B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,oBAAoB;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,2GAgEzB,CAAC"}
+{"version":3,"file":"code-block-root.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAKf,MAAM,OAAO,CAAC;AAGf,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAMD,eAAO,MAAM,mBAAmB,6BAM/B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,cAAc,CAAC,KAAK,CAAC,EAC3B,oBAAoB;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa;mMAavB,cAAc;;CA8ChB,CAAC"}