@raystack/apsara 0.56.7 → 1.0.0-rc.1

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<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?: 1 | "small" | 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> & {
-    children?: ReactNode;
-} & HTMLAttributes<HTMLDivElement> & 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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?: 1 | "small" | 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;;;;;;;;;2IAe1B,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"}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { createContext, forwardRef, useState, useCallback, useContext } from 'react';
+import { createContext, useContext, useState, useCallback } from 'react';
 import styles from './code-block.module.css.js';
 
 const CodeBlockContext = createContext(undefined);
@@ -12,7 +12,7 @@ const useCodeBlockContext = () => {
     }
     return context;
 };
-const CodeBlockRoot = 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] = useState(defaultValue);
     const [code, setCode] = useState();
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed ?? false);
@@ -28,7 +28,7 @@ const CodeBlockRoot = forwardRef(({ children, value: providedValue, onValueChang
             return !_internalCollapsed;
         });
     }, [onCollapseChange]);
-    return (jsx(CodeBlockContext.Provider, { value: {
+    return (jsx(CodeBlockContext, { value: {
             hideLineNumbers,
             value,
             setValue,
@@ -37,8 +37,8 @@ const CodeBlockRoot = forwardRef(({ children, value: providedValue, onValueChang
             maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger
             collapsed,
             toggleCollapsed
-        }, children: jsx("div", { ref: ref, className: cx(styles.container, className), ...props, children: children }) }));
-});
+        }, children: jsx("div", { className: cx(styles.container, className), ...props, children: children }) }));
+};
 CodeBlockRoot.displayName = 'CodeBlock';
 
 export { CodeBlockRoot, useCodeBlockContext };

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

@@ -1 +1 @@
-{"version":3,"file":"code-block-root.js","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.js","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.d.ts

@@ -0,0 +1,24 @@
+import { CodeBlockLanguageSelectTrigger } from './code-block-language-select';
+import { CodeBlockCollapseTrigger, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockLabel } from './code-block-misc';
+export declare const CodeBlock: {
+    ({ children, value: providedValue, onValueChange, defaultValue, hideLineNumbers, maxLines, maxHeight, className, collapsed: providedCollapsed, defaultCollapsed, onCollapseChange, ...props }: import("./code-block-root").CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: typeof CodeBlockHeader;
+    Content: typeof CodeBlockContent;
+    Label: typeof CodeBlockLabel;
+    LanguageSelect: {
+        (props: import("../select/select-root").SingleSelectProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    LanguageSelectTrigger: typeof CodeBlockLanguageSelectTrigger;
+    LanguageSelectContent: typeof import("../select/select-content").SelectContent;
+    LanguageSelectItem: typeof import("../select/select-item").SelectItem;
+    CopyButton: typeof CodeBlockCopyButton;
+    Code: {
+        ({ children, language, className, value, ...props }: import("./code-block-code").CodeBlockCodeProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    CollapseTrigger: typeof CodeBlockCollapseTrigger;
+};
+//# sourceMappingURL=code-block.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,8BAA8B,EAC/B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,wBAAwB,EACxB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACf,MAAM,mBAAmB,CAAC;AAG3B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAWpB,CAAC"}

package/dist/components/collapsible/__tests__/collapsible.test.d.ts

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

package/dist/components/collapsible/__tests__/collapsible.test.d.ts.map

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

package/dist/components/collapsible/collapsible.cjs

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var collapsible_module = require('./collapsible.module.css.cjs');
+
+function CollapsibleRoot(props) {
+    return jsxRuntime.jsx(react.Collapsible.Root, { ...props });
+}
+CollapsibleRoot.displayName = 'Collapsible';
+function CollapsibleTrigger({ className, ...props }) {
+    return (jsxRuntime.jsx(react.Collapsible.Trigger, { className: classVarianceAuthority.cx(collapsible_module.default.trigger, className), ...props }));
+}
+CollapsibleTrigger.displayName = 'Collapsible.Trigger';
+function CollapsiblePanel({ className, ...props }) {
+    return (jsxRuntime.jsx(react.Collapsible.Panel, { className: classVarianceAuthority.cx(collapsible_module.default.panel, className), ...props }));
+}
+CollapsiblePanel.displayName = 'Collapsible.Panel';
+const Collapsible = Object.assign(CollapsibleRoot, {
+    Trigger: CollapsibleTrigger,
+    Panel: CollapsiblePanel
+});
+
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=collapsible.cjs.map

package/dist/components/collapsible/collapsible.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.cjs","sources":["../../../components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './collapsible.module.css';\n\nfunction CollapsibleRoot(props: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root {...props} />;\n}\n\nCollapsibleRoot.displayName = 'Collapsible';\n\nfunction CollapsibleTrigger({\n  className,\n  ...props\n}: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cx(styles.trigger, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsibleTrigger.displayName = 'Collapsible.Trigger';\n\nfunction CollapsiblePanel({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cx(styles.panel, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel\n});\n"],"names":[],"mappings":";;;;;;;;AAMA;AACE;AACF;AAEA;AAEA;;AAUA;AAEA;AAEA;;AAUA;AAEA;;AAGE;AACA;AACD;;"}

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react';
+declare function CollapsibleRoot(props: CollapsiblePrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapsibleRoot {
+    var displayName: string;
+}
+declare function CollapsibleTrigger({ className, ...props }: CollapsiblePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapsibleTrigger {
+    var displayName: string;
+}
+declare function CollapsiblePanel({ className, ...props }: CollapsiblePrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapsiblePanel {
+    var displayName: string;
+}
+export declare const Collapsible: typeof CollapsibleRoot & {
+    Trigger: typeof CollapsibleTrigger;
+    Panel: typeof CollapsiblePanel;
+};
+export {};
+//# sourceMappingURL=collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAIrE,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,2CAE9D;kBAFQ,eAAe;;;AAMxB,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,2CAOpC;kBAVQ,kBAAkB;;;AAc3B,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,2CAOlC;kBAVQ,gBAAgB;;;AAczB,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import styles from './collapsible.module.css.js';
+
+function CollapsibleRoot(props) {
+    return jsx(Collapsible$1.Root, { ...props });
+}
+CollapsibleRoot.displayName = 'Collapsible';
+function CollapsibleTrigger({ className, ...props }) {
+    return (jsx(Collapsible$1.Trigger, { className: cx(styles.trigger, className), ...props }));
+}
+CollapsibleTrigger.displayName = 'Collapsible.Trigger';
+function CollapsiblePanel({ className, ...props }) {
+    return (jsx(Collapsible$1.Panel, { className: cx(styles.panel, className), ...props }));
+}
+CollapsiblePanel.displayName = 'Collapsible.Panel';
+const Collapsible = Object.assign(CollapsibleRoot, {
+    Trigger: CollapsibleTrigger,
+    Panel: CollapsiblePanel
+});
+
+export { Collapsible };
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sources":["../../../components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './collapsible.module.css';\n\nfunction CollapsibleRoot(props: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root {...props} />;\n}\n\nCollapsibleRoot.displayName = 'Collapsible';\n\nfunction CollapsibleTrigger({\n  className,\n  ...props\n}: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cx(styles.trigger, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsibleTrigger.displayName = 'Collapsible.Trigger';\n\nfunction CollapsiblePanel({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cx(styles.panel, className)}\n      {...props}\n    />\n  );\n}\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel\n});\n"],"names":[],"mappings":";;;;;;AAMA;AACE;AACF;AAEA;AAEA;;AAUA;AAEA;AAEA;;AAUA;AAEA;;AAGE;AACA;AACD;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"trigger":"collapsible-module_trigger__95zum","panel":"collapsible-module_panel__9Wvtm"};
+
+exports.default = styles;
+//# sourceMappingURL=collapsible.module.css.cjs.map

package/dist/components/collapsible/collapsible.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1,4 @@
+var styles = {"trigger":"collapsible-module_trigger__95zum","panel":"collapsible-module_panel__9Wvtm"};
+
+export { styles as default };
+//# sourceMappingURL=collapsible.module.css.js.map

package/dist/components/collapsible/collapsible.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,2 @@
+export { Collapsible } from './collapsible';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/color-picker/color-picker-alpha.cjs

@@ -2,15 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var slider = require('@base-ui/react/slider');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
-var colorPickerRoot = require('./color-picker-root.cjs');
 var colorPicker_module = require('./color-picker.module.css.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
 
 const ColorPickerAlpha = ({ className, ...props }) => {
     const { alpha = 1, setColor } = colorPickerRoot.useColorPicker();
-    return (jsxRuntime.jsxs(radixUi.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 100, onValueChange: ([alpha]) => setColor({ alpha: alpha / 100 }), step: 1, value: [alpha * 100], ...props, children: [jsxRuntime.jsxs(radixUi.Slider.Track, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.alphaTrack), children: [jsxRuntime.jsx("div", { className: colorPicker_module.default.alphaTrackGradient }), jsxRuntime.jsx(radixUi.Slider.Range, { className: colorPicker_module.default.sliderRange })] }), jsxRuntime.jsx(radixUi.Slider.Thumb, { className: colorPicker_module.default.sliderThumb })] }));
+    return (jsxRuntime.jsx(slider.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 100, onValueChange: value => setColor({ alpha: value / 100 }), step: 1, value: alpha * 100, thumbAlignment: 'edge', ...props, children: jsxRuntime.jsx(slider.Slider.Control, { className: colorPicker_module.default.sliderControl, children: jsxRuntime.jsxs(slider.Slider.Track, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.alphaTrack), children: [jsxRuntime.jsx("div", { className: colorPicker_module.default.alphaTrackGradient }), jsxRuntime.jsx(slider.Slider.Indicator, { className: colorPicker_module.default.sliderRange }), jsxRuntime.jsx(slider.Slider.Thumb, { className: colorPicker_module.default.sliderThumb, "aria-label": 'Alpha' })] }) }) }));
 };
+ColorPickerAlpha.displayName = 'ColorPicker.Alpha';
 
 exports.ColorPickerAlpha = ColorPickerAlpha;
 //# sourceMappingURL=color-picker-alpha.cjs.map

package/dist/components/color-picker/color-picker-alpha.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.cjs","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO;;;AAqBP;;"}
+{"version":3,"file":"color-picker-alpha.cjs","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerAlphaProps = Slider.Root.Props;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={value => setColor({ alpha: (value as number) / 100 })}\n      step={1}\n      value={alpha * 100}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n          <div className={styles.alphaTrackGradient} />\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Alpha' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n\nColorPickerAlpha.displayName = 'ColorPicker.Alpha';\n"],"names":[],"mappings":";;;;;;;;;AASO;;;AAwBP;AAEA;;"}