@choice-ui/react 1.4.3 → 1.4.6

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

@@ -1,5 +1,5 @@
-import { ReactNode, HTMLProps, RefObject } from 'react';
-import * as react from 'react';
+import { default as React__default, ReactNode, HTMLProps, RefObject } from 'react';
+import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface CodeBlockContextValue {
@@ -65,40 +65,22 @@ interface CodeBlockCodeProps extends HTMLProps<HTMLDivElement> {
     /** 手动指定主题，覆盖自动检测 */
     variant?: "light" | "dark";
 }
-interface UseCodeBlockOptions {
-    defaultCodeExpanded?: boolean;
-    defaultExpanded?: boolean;
-    onCodeExpandChange?: (expanded: boolean) => void;
-    onExpandChange?: (expanded: boolean) => void;
-    scrollToBottom?: () => void;
-}
-interface UseCodeBlockReturn {
-    codeExpanded: boolean;
-    copied: boolean;
-    handleCodeExpand: () => void;
-    handleCopy: (code: string) => void;
-    handleExpand: () => void;
-    isExpanded: boolean;
-}
-interface UseScrollDetectionOptions {
-    children?: ReactNode;
-    codeExpanded: boolean;
-    contentRef: RefObject<HTMLDivElement>;
-    isExpanded: boolean;
-    scrollRef: RefObject<HTMLDivElement>;
-}
 
-declare const CodeBlockCode: react.NamedExoticComponent<CodeBlockCodeProps>;
+declare const CodeBlockCode: React.NamedExoticComponent<CodeBlockCodeProps>;
 
-declare function CodeBlockContent(props: CodeBlockContentProps): react_jsx_runtime.JSX.Element | null;
+declare const CodeBlockHeader: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
 
-declare function getDefaultFilenameForLanguage(language: string): string;
+declare const CodeBlockFooter: React.NamedExoticComponent<CodeBlockFooterProps>;
+
+declare function CodeBlockContent(props: CodeBlockContentProps): react_jsx_runtime.JSX.Element | null;
 
-declare const CodeBlock: react.NamedExoticComponent<CodeBlockProps> & {
-    Code: react.NamedExoticComponent<CodeBlockCodeProps>;
+declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
+    Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
     Content: typeof CodeBlockContent;
-    Footer: react.NamedExoticComponent<CodeBlockFooterProps>;
-    Header: react.NamedExoticComponent<CodeBlockHeaderProps>;
+    Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
+    Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
 };
 
-export { CodeBlock, CodeBlockCode, type CodeBlockCodeProps, type CodeBlockContentProps, type CodeBlockContextValue, type CodeBlockFooterProps, type CodeBlockHeaderProps, type CodeBlockInjectedProps, type CodeBlockProps, type UseCodeBlockOptions, type UseCodeBlockReturn, type UseScrollDetectionOptions, getDefaultFilenameForLanguage };
+declare function getDefaultFilenameForLanguage(language: string): string;
+
+export { CodeBlock, CodeBlockCode, type CodeBlockCodeProps, CodeBlockContent, type CodeBlockContentProps, CodeBlockFooter, type CodeBlockFooterProps, CodeBlockHeader, type CodeBlockHeaderProps, type CodeBlockProps, getDefaultFilenameForLanguage };

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

@@ -1,10 +1,10 @@
 import React, { memo, useState, useEffect } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
+import { codeToHtml } from "shiki";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { codeToHtml } from "shiki";
 import { IconButton } from "../../icon-button/dist/index.js";
-import { FileCode, CircleCirclehecirclek, ClipboardSmall, Enlarge, ChevronUpSmall, ChevronDownSmall } from "@choiceform/icons-react";
+import { FileCode, Check, ClipboardSmall, Enlarge, ChevronUpSmall, ChevronDownSmall } from "@choiceform/icons-react";
 import { ScrollArea } from "../../scroll-area/dist/index.js";
 import { tcx, tcv } from "../../../shared/utils/tcx/tcx.js";
 function useCodeBlock({
@@ -155,135 +155,23 @@ function useTheme() {
   }, []);
   return theme;
 }
-var CodeBlock = memo(function CodeBlock2(props) {
-  const {
-    children,
-    className,
-    filename,
-    language = "code",
-    lineThreshold = 20,
-    expandable = true,
-    defaultExpanded = true,
-    defaultCodeExpanded = false,
-    variant = "default",
-    onExpandChange,
-    onCodeExpandChange
-  } = props;
-  const { scrollRef, contentRef, scrollToBottom } = useStickToBottom({
-    resize: "smooth",
-    initial: "smooth"
-  });
-  const codeContentRef = React.useRef("");
-  const {
-    isExpanded,
-    codeExpanded,
-    copied,
-    handleExpand,
-    handleCodeExpand,
-    handleCopy: originalHandleCopy
-  } = useCodeBlock({
-    defaultExpanded,
-    defaultCodeExpanded,
-    onExpandChange,
-    onCodeExpandChange,
-    scrollToBottom
-  });
-  const handleCopy = React.useCallback(
-    (code) => {
-      const codeToUse = code || codeContentRef.current;
-      if (codeToUse) {
-        originalHandleCopy(codeToUse);
-      }
-    },
-    [originalHandleCopy]
-  );
-  React.useEffect(() => {
-    try {
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child) && child.props) {
-          if (child.props.code && typeof child.props.code === "string") {
-            codeContentRef.current = child.props.code;
-          }
-        }
-      });
-    } catch {
-    }
-  }, [children]);
-  const lineCount = useLineCount(children);
-  const needsScroll = useScrollDetection({
-    scrollRef,
-    contentRef,
-    isExpanded,
-    codeExpanded,
-    children
-  });
-  const contextValue = React.useMemo(
-    () => ({
-      language,
-      filename,
-      lineCount,
-      isExpanded,
-      codeExpanded,
-      copied,
-      needsScroll,
-      expandable,
-      lineThreshold,
-      handleExpand,
-      handleCodeExpand,
-      handleCopy,
-      scrollRef,
-      contentRef,
-      variant
-    }),
-    [
-      language,
-      filename,
-      lineCount,
-      isExpanded,
-      codeExpanded,
-      copied,
-      needsScroll,
-      expandable,
-      lineThreshold,
-      handleExpand,
-      handleCodeExpand,
-      handleCopy,
-      scrollRef,
-      contentRef,
-      variant
-    ]
-  );
-  const injectedChildren = React.useMemo(() => {
-    try {
-      return React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(
-            child,
-            {
-              codeBlock: contextValue
-            }
-          );
-        }
-        return child;
-      });
-    } catch {
-      return children;
-    }
-  }, [children, contextValue]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: tcx(
-        "group relative overflow-hidden rounded-lg",
-        variant === "default" && "bg-secondary-background",
-        variant === "light" && "bg-gray-100",
-        variant === "dark" && "bg-gray-700",
-        className
-      ),
-      children: injectedChildren
-    }
-  );
-});
+var LANGUAGE_ALIASES = {
+  node: "javascript",
+  nodejs: "javascript",
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  yml: "yaml",
+  dockerfile: "docker",
+  plaintext: "text",
+  plain: "text"
+};
+function resolveLanguage(lang) {
+  const normalized = lang.toLowerCase();
+  return LANGUAGE_ALIASES[normalized] ?? normalized;
+}
 var codeBlockCodeTv = tcv({
   base: "text-message-code w-fit min-w-full bg-transparent font-mono [&>pre]:!bg-transparent [&>pre]:px-4 [&>pre]:py-4"
 });
@@ -299,11 +187,20 @@ var CodeBlockCode = memo(function CodeBlockCode2(props) {
         setHighlightedHtml("<pre><code></code></pre>");
         return;
       }
-      const html = await codeToHtml(code, {
-        lang: language,
-        theme: theme === "light" ? "github-light" : "github-dark"
-      });
-      setHighlightedHtml(html);
+      const resolvedLang = resolveLanguage(language);
+      try {
+        const html = await codeToHtml(code, {
+          lang: resolvedLang,
+          theme: theme === "light" ? "github-light" : "github-dark"
+        });
+        setHighlightedHtml(html);
+      } catch {
+        const html = await codeToHtml(code, {
+          lang: "text",
+          theme: theme === "light" ? "github-light" : "github-dark"
+        });
+        setHighlightedHtml(html);
+      }
     }
     highlight();
   }, [code, language, theme]);
@@ -937,17 +834,51 @@ var codeBlockHeaderTv = tcv({
   slots: {
     header: "text-body-medium code-header flex h-8 items-center justify-between pr-1 pl-2",
     title: "flex items-center gap-1",
-    filename: "text-secondary-foreground",
+    filename: "",
     actions: "flex items-center",
-    button: "opacity-0 group-hover:opacity-100",
+    button: "opacity-0 group-hover/code-block:opacity-100",
     lineCount: "text-success-foreground ml-2 font-strong"
   },
   variants: {
     isExpanded: {
-      true: { header: "bg-secondary-background" },
+      true: {},
       false: {}
+    },
+    variant: {
+      default: {
+        filename: "text-secondary-foreground"
+      },
+      light: {
+        filename: "text-gray-900"
+      },
+      dark: {
+        filename: "text-white"
+      }
     }
   },
+  compoundVariants: [
+    {
+      variant: "default",
+      isExpanded: true,
+      class: {
+        header: "bg-secondary-background"
+      }
+    },
+    {
+      variant: "light",
+      isExpanded: true,
+      class: {
+        header: "bg-gray-100"
+      }
+    },
+    {
+      variant: "dark",
+      isExpanded: true,
+      class: {
+        header: "bg-gray-700"
+      }
+    }
+  ],
   defaultVariants: {
     isExpanded: true
   }
@@ -956,7 +887,7 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
   const {
     className,
     codeBlock,
-    showLineCount = true,
+    showLineCount = false,
     i18n = {
       collapse: "Collapse",
       copied: "Copied",
@@ -974,12 +905,13 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
     copied = false,
     expandable = true,
     handleExpand,
-    handleCopy
+    handleCopy,
+    variant
   } = codeBlock;
   if (!handleExpand || !handleCopy) {
     return null;
   }
-  const tv = codeBlockHeaderTv({ isExpanded });
+  const tv = codeBlockHeaderTv({ isExpanded, variant });
   let icon = null;
   try {
     if (filename && typeof filename === "string") {
@@ -1006,17 +938,17 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
         IconButton,
         {
           className: tv.button(),
-          variant: "ghost",
+          variant: variant === "dark" ? "dark" : "ghost",
           onClick: () => handleCopy(),
           tooltip: { content: copyTooltipContent },
-          children: copied ? /* @__PURE__ */ jsx(CircleCirclehecirclek, { className: "text-success-foreground" }) : /* @__PURE__ */ jsx(ClipboardSmall, {})
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "text-success-foreground" }) : /* @__PURE__ */ jsx(ClipboardSmall, {})
         }
       ),
       expandable && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),
-          variant: "ghost",
+          variant: variant === "dark" ? "dark" : "ghost",
           onClick: handleExpand,
           tooltip: {
             content: expandTooltipContent
@@ -1127,14 +1059,146 @@ function CodeBlockContent(props) {
     }
   ) }) });
 }
-var CodeBlock3 = Object.assign(CodeBlock, {
+var CodeBlockRoot = memo(function CodeBlock(props) {
+  const {
+    children,
+    className,
+    filename,
+    language = "code",
+    lineThreshold = 20,
+    expandable = true,
+    defaultExpanded = true,
+    defaultCodeExpanded = false,
+    variant = "default",
+    onExpandChange,
+    onCodeExpandChange
+  } = props;
+  const { scrollRef, contentRef, scrollToBottom } = useStickToBottom({
+    resize: "smooth",
+    initial: "smooth"
+  });
+  const codeContentRef = React.useRef("");
+  const {
+    isExpanded,
+    codeExpanded,
+    copied,
+    handleExpand,
+    handleCodeExpand,
+    handleCopy: originalHandleCopy
+  } = useCodeBlock({
+    defaultExpanded,
+    defaultCodeExpanded,
+    onExpandChange,
+    onCodeExpandChange,
+    scrollToBottom
+  });
+  const handleCopy = React.useCallback(
+    (code) => {
+      const codeToUse = code || codeContentRef.current;
+      if (codeToUse) {
+        originalHandleCopy(codeToUse);
+      }
+    },
+    [originalHandleCopy]
+  );
+  React.useEffect(() => {
+    try {
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.props) {
+          if (child.props.code && typeof child.props.code === "string") {
+            codeContentRef.current = child.props.code;
+          }
+        }
+      });
+    } catch {
+    }
+  }, [children]);
+  const lineCount = useLineCount(children);
+  const needsScroll = useScrollDetection({
+    scrollRef,
+    contentRef,
+    isExpanded,
+    codeExpanded,
+    children
+  });
+  const contextValue = React.useMemo(
+    () => ({
+      language,
+      filename,
+      lineCount,
+      isExpanded,
+      codeExpanded,
+      copied,
+      needsScroll,
+      expandable,
+      lineThreshold,
+      handleExpand,
+      handleCodeExpand,
+      handleCopy,
+      scrollRef,
+      contentRef,
+      variant
+    }),
+    [
+      language,
+      filename,
+      lineCount,
+      isExpanded,
+      codeExpanded,
+      copied,
+      needsScroll,
+      expandable,
+      lineThreshold,
+      handleExpand,
+      handleCodeExpand,
+      handleCopy,
+      scrollRef,
+      contentRef,
+      variant
+    ]
+  );
+  const injectedChildren = React.useMemo(() => {
+    try {
+      return React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(
+            child,
+            {
+              codeBlock: contextValue
+            }
+          );
+        }
+        return child;
+      });
+    } catch {
+      return children;
+    }
+  }, [children, contextValue]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tcx(
+        "group/code-block relative overflow-hidden rounded-lg",
+        variant === "default" && "bg-secondary-background",
+        variant === "light" && "bg-gray-100",
+        variant === "dark" && "bg-gray-700",
+        className
+      ),
+      children: injectedChildren
+    }
+  );
+});
+var CodeBlock2 = Object.assign(CodeBlockRoot, {
   Code: CodeBlockCode,
   Content: CodeBlockContent,
   Footer: CodeBlockFooter,
   Header: CodeBlockHeader
 });
 export {
-  CodeBlock3 as CodeBlock,
+  CodeBlock2 as CodeBlock,
   CodeBlockCode,
+  CodeBlockContent,
+  CodeBlockFooter,
+  CodeBlockHeader,
   getDefaultFilenameForLanguage
 };

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

@@ -1,3 +1,10 @@
 import { default as React } from 'react';
+import { CodeBlockContent } from './components';
 import { CodeBlockProps } from './types';
-export declare const CodeBlock: React.NamedExoticComponent<CodeBlockProps>;
+export declare const CodeBlockRoot: React.NamedExoticComponent<CodeBlockProps>;
+export declare const CodeBlock: React.NamedExoticComponent<CodeBlockProps> & {
+    Code: React.NamedExoticComponent<import('../..').CodeBlockCodeProps>;
+    Content: typeof CodeBlockContent;
+    Footer: React.NamedExoticComponent<import('../..').CodeBlockFooterProps>;
+    Header: React.NamedExoticComponent<import('../..').CodeBlockHeaderProps>;
+};

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

@@ -1,11 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import React, { memo } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
+import { CodeBlockHeader } from "./components/code-block-header.js";
+import { CodeBlockFooter } from "./components/code-block-footer.js";
+import { CodeBlockContent } from "./components/code-block-content.js";
+import { CodeBlockCode } from "./components/code-block-code.js";
 import { useCodeBlock } from "./hooks/use-code-block.js";
 import { useLineCount } from "./hooks/use-line-count.js";
 import { useScrollDetection } from "./hooks/use-scroll-detection.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
-const CodeBlock = memo(function CodeBlock2(props) {
+const CodeBlockRoot = memo(function CodeBlock2(props) {
   const {
     children,
     className,
@@ -124,7 +128,7 @@ const CodeBlock = memo(function CodeBlock2(props) {
     "div",
     {
       className: tcx(
-        "group relative overflow-hidden rounded-lg",
+        "group/code-block relative overflow-hidden rounded-lg",
         variant === "default" && "bg-secondary-background",
         variant === "light" && "bg-gray-100",
         variant === "dark" && "bg-gray-700",
@@ -134,6 +138,13 @@ const CodeBlock = memo(function CodeBlock2(props) {
     }
   );
 });
+const CodeBlock = Object.assign(CodeBlockRoot, {
+  Code: CodeBlockCode,
+  Content: CodeBlockContent,
+  Footer: CodeBlockFooter,
+  Header: CodeBlockHeader
+});
 export {
-  CodeBlock
+  CodeBlock,
+  CodeBlockRoot
 };

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

@@ -3,6 +3,23 @@ import { memo, useState, useEffect } from "react";
 import { codeToHtml } from "shiki";
 import { useTheme } from "../hooks/use-theme.js";
 import { tcv, tcx } from "../../../../shared/utils/tcx/tcx.js";
+const LANGUAGE_ALIASES = {
+  node: "javascript",
+  nodejs: "javascript",
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  yml: "yaml",
+  dockerfile: "docker",
+  plaintext: "text",
+  plain: "text"
+};
+function resolveLanguage(lang) {
+  const normalized = lang.toLowerCase();
+  return LANGUAGE_ALIASES[normalized] ?? normalized;
+}
 const codeBlockCodeTv = tcv({
   base: "text-message-code w-fit min-w-full bg-transparent font-mono [&>pre]:!bg-transparent [&>pre]:px-4 [&>pre]:py-4"
 });
@@ -18,11 +35,20 @@ const CodeBlockCode = memo(function CodeBlockCode2(props) {
         setHighlightedHtml("<pre><code></code></pre>");
         return;
       }
-      const html = await codeToHtml(code, {
-        lang: language,
-        theme: theme === "light" ? "github-light" : "github-dark"
-      });
-      setHighlightedHtml(html);
+      const resolvedLang = resolveLanguage(language);
+      try {
+        const html = await codeToHtml(code, {
+          lang: resolvedLang,
+          theme: theme === "light" ? "github-light" : "github-dark"
+        });
+        setHighlightedHtml(html);
+      } catch {
+        const html = await codeToHtml(code, {
+          lang: "text",
+          theme: theme === "light" ? "github-light" : "github-dark"
+        });
+        setHighlightedHtml(html);
+      }
     }
     highlight();
   }, [code, language, theme]);