@choice-ui/react 1.6.7 → 1.6.9

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

@@ -1,25 +1,28 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { ScrollArea } from "../../../scroll-area/dist/index.js";
+import { memo } from "react";
 import { CodeBlockCode } from "./code-block-code.js";
 import { tcv, tcx } from "../../../../shared/utils/tcx/tcx.js";
+const LINE_HEIGHT_PX = 16;
+const HEIGHT_PADDING_PX = 32 + 40;
 const codeBlockTv = tcv({
   slots: {
-    code: "overflow-hidden",
+    code: "overflow-hidden min-h-0 flex-1",
     content: "flex w-fit flex-col overflow-clip p-[inherit]"
   }
 });
-function CodeBlockContent(props) {
-  const { code, className, codeBlock, withScrollArea = true } = props;
+const CodeBlockContent = memo(function CodeBlockContent2(props) {
+  const { className, codeBlock, withScrollArea = true, children } = props;
   if (!codeBlock) return null;
   const { language, isExpanded, codeExpanded, scrollRef, contentRef, lineCount, lineThreshold } = codeBlock;
   if (!isExpanded) {
     return null;
   }
-  if (typeof code !== "string") {
+  if (typeof children !== "string") {
     return null;
   }
   const tv = codeBlockTv();
-  const shouldLimitHeight = lineCount > lineThreshold && !codeExpanded;
+  const shouldLimitHeight = lineThreshold && lineCount > lineThreshold && !codeExpanded;
   return /* @__PURE__ */ jsx(Fragment, { children: withScrollArea ? /* @__PURE__ */ jsx(
     ScrollArea,
     {
@@ -32,7 +35,7 @@ function CodeBlockContent(props) {
         {
           ref: scrollRef,
           style: {
-            maxHeight: shouldLimitHeight ? `${lineThreshold * 14 + 32}px` : "none"
+            maxHeight: shouldLimitHeight ? `${lineThreshold * LINE_HEIGHT_PX + HEIGHT_PADDING_PX}px` : "none"
           },
           children: /* @__PURE__ */ jsx(
             ScrollArea.Content,
@@ -42,9 +45,9 @@ function CodeBlockContent(props) {
               children: /* @__PURE__ */ jsx(
                 CodeBlockCode,
                 {
-                  code,
                   language,
-                  codeBlock
+                  codeBlock,
+                  children
                 }
               )
             }
@@ -55,12 +58,12 @@ function CodeBlockContent(props) {
   ) : /* @__PURE__ */ jsx("div", { className: tcx(tv.content(), className), children: /* @__PURE__ */ jsx(
     CodeBlockCode,
     {
-      code,
       language,
-      codeBlock
+      codeBlock,
+      children
     }
   ) }) });
-}
+});
 export {
   CodeBlockContent
 };

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

@@ -15,9 +15,10 @@ const codeBlockFooterTv = tcv({
       },
       false: {
         footer: [
-          "bg-secondary-background/90 absolute inset-x-0 bottom-0 z-3",
+          "bg-secondary-background/80 absolute inset-x-0 bottom-0 z-3",
           "opacity-0 group-hover:opacity-100",
-          "hover:bg-tertiary-background"
+          "hover:bg-tertiary-background",
+          "backdrop-blur-xs"
         ]
       }
     }
@@ -31,7 +32,7 @@ const CodeBlockFooter = memo(function CodeBlockFooter2(props) {
   if (!codeBlock) return null;
   const { isExpanded, codeExpanded, handleCodeExpand, lineCount, lineThreshold, needsScroll } = codeBlock;
   const tv = codeBlockFooterTv({ codeExpanded });
-  if (!(lineCount > lineThreshold || needsScroll || codeExpanded) || !isExpanded) {
+  if (lineThreshold && !(lineCount > lineThreshold || needsScroll || codeExpanded) || !isExpanded) {
     return null;
   }
   return /* @__PURE__ */ jsx(

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

@@ -83,9 +83,8 @@ const CodeBlockHeader = memo(function CodeBlockHeader2(props) {
     handleCopy,
     variant
   } = codeBlock;
-  if (!handleExpand || !handleCopy) {
-    return null;
-  }
+  const canExpand = Boolean(handleExpand);
+  const canCopy = Boolean(handleCopy);
   const tv = codeBlockHeaderTv({ isExpanded, variant });
   let icon = null;
   try {
@@ -109,17 +108,17 @@ const CodeBlockHeader = memo(function CodeBlockHeader2(props) {
       children
     ] }),
     /* @__PURE__ */ jsxs("div", { className: tv.actions(), children: [
-      isExpanded && /* @__PURE__ */ jsx(
+      isExpanded && canCopy && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),
           variant: variant === "dark" ? "dark" : "ghost",
-          onClick: () => handleCopy(),
+          onClick: () => handleCopy == null ? void 0 : handleCopy(),
           tooltip: { content: copyTooltipContent },
           children: copied ? /* @__PURE__ */ jsx(Check, { className: "text-success-foreground" }) : /* @__PURE__ */ jsx(ClipboardSmall, {})
         }
       ),
-      expandable && /* @__PURE__ */ jsx(
+      expandable && canExpand && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),

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

@@ -1,4 +1,3 @@
 export { useCodeBlock } from './use-code-block';
 export { useScrollDetection } from './use-scroll-detection';
-export { useLineCount } from './use-line-count';
 export { useTheme } from './use-theme';

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

@@ -27,13 +27,34 @@ function useCodeBlock({
     if (!code || typeof code !== "string") {
       return;
     }
-    try {
-      if (typeof navigator !== "undefined" && navigator.clipboard) {
+    const onSuccess = () => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    };
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      try {
         await navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
+        onSuccess();
+        return;
+      } catch {
+      }
+    }
+    const textArea = document.createElement("textarea");
+    try {
+      textArea.value = code;
+      textArea.style.cssText = "position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent;";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      const successful = document.execCommand("copy");
+      if (successful) {
+        onSuccess();
+      }
+    } catch {
+    } finally {
+      if (textArea.parentNode) {
+        textArea.parentNode.removeChild(textArea);
       }
-    } catch (error) {
     }
   });
   return {

package/dist/components/code-block/src/hooks/use-scroll-detection.d.ts

@@ -1,10 +1,9 @@
 import { RefObject } from 'react';
 interface UseScrollDetectionProps {
-    children: React.ReactNode;
     codeExpanded: boolean;
     contentRef: RefObject<HTMLElement>;
     isExpanded: boolean;
     scrollRef: RefObject<HTMLElement>;
 }
-export declare function useScrollDetection({ scrollRef, contentRef, isExpanded, codeExpanded, children, }: UseScrollDetectionProps): boolean;
+export declare function useScrollDetection({ scrollRef, contentRef, isExpanded, codeExpanded, }: UseScrollDetectionProps): boolean;
 export {};

package/dist/components/code-block/src/hooks/use-scroll-detection.js

@@ -1,14 +1,17 @@
-import { useState, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 function useScrollDetection({
   scrollRef,
   contentRef,
   isExpanded,
-  codeExpanded,
-  children
+  codeExpanded
 }) {
   const [needsScroll, setNeedsScroll] = useState(false);
-  useEffect(() => {
-    const checkScrollNeeded = () => {
+  const debounceRef = useRef(null);
+  const checkScrollNeeded = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
       if (!scrollRef.current || !contentRef.current) {
         setNeedsScroll(false);
         return;
@@ -18,25 +21,28 @@ function useScrollDetection({
         const content = contentRef.current;
         const hasScroll = content.scrollHeight > viewport.clientHeight;
         setNeedsScroll(hasScroll);
-      } catch (error) {
+      } catch {
         setNeedsScroll(false);
       }
-    };
+    }, 50);
+  }, [scrollRef, contentRef]);
+  useEffect(() => {
     const timeoutId = setTimeout(checkScrollNeeded, 100);
     window.addEventListener("resize", checkScrollNeeded);
     let resizeObserver = null;
-    if (typeof ResizeObserver !== "undefined") {
+    if (typeof ResizeObserver !== "undefined" && contentRef.current) {
       resizeObserver = new ResizeObserver(checkScrollNeeded);
-      if (contentRef.current) {
-        resizeObserver.observe(contentRef.current);
-      }
+      resizeObserver.observe(contentRef.current);
     }
     return () => {
       clearTimeout(timeoutId);
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
       window.removeEventListener("resize", checkScrollNeeded);
       resizeObserver == null ? void 0 : resizeObserver.disconnect();
     };
-  }, [scrollRef, contentRef, isExpanded, codeExpanded, children]);
+  }, [checkScrollNeeded, isExpanded, codeExpanded]);
   return needsScroll;
 }
 export {

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

@@ -11,7 +11,7 @@ export interface CodeBlockContextValue {
     isExpanded: boolean;
     language: string;
     lineCount: number;
-    lineThreshold: number;
+    lineThreshold?: number;
     needsScroll: boolean;
     scrollRef?: RefObject<HTMLDivElement>;
     variant?: "default" | "light" | "dark";
@@ -48,18 +48,16 @@ export interface CodeBlockFooterProps extends CodeBlockInjectedProps {
 }
 export interface CodeBlockContentProps extends CodeBlockInjectedProps {
     className?: string;
-    code: string;
     language?: string;
     withScrollArea?: boolean;
+    children?: string;
 }
 export interface CodeBlockCodeProps extends HTMLProps<HTMLDivElement> {
     className?: string;
-    code: string;
-    /** 从 CodeBlock 传递的 context */
+    children?: string;
     codeBlock?: CodeBlockContextValue;
     codeBlockId?: string;
     language?: string;
-    /** 手动指定主题，覆盖自动检测 */
     variant?: "light" | "dark";
 }
 export interface UseCodeBlockOptions {

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

@@ -0,0 +1,23 @@
+import React__default from "react";
+function extractCodeFromChildren(children) {
+  if (!children) return "";
+  try {
+    return React__default.Children.toArray(children).map((child) => {
+      var _a, _b;
+      if (React__default.isValidElement(child)) {
+        if (((_a = child.props) == null ? void 0 : _a.code) && typeof child.props.code === "string") {
+          return child.props.code;
+        }
+        if (((_b = child.props) == null ? void 0 : _b.children) && typeof child.props.children === "string") {
+          return child.props.children;
+        }
+      }
+      return "";
+    }).filter(Boolean).join("");
+  } catch {
+    return "";
+  }
+}
+export {
+  extractCodeFromChildren
+};

package/dist/components/command/src/components/command-list.js

@@ -6,7 +6,17 @@ import { useCommandState } from "../hooks/use-command-state.js";
 import { useCommand } from "../hooks/use-command.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const CommandList = forwardRef((props, forwardedRef) => {
-  const { children, className, label = "Suggestions", hoverBoundary = "none", ...rest } = props;
+  const {
+    children,
+    className,
+    label = "Suggestions",
+    hoverBoundary = "none",
+    scrollbarMode = "padding-b",
+    orientation,
+    variant,
+    type,
+    ...rest
+  } = props;
   const ref = useRef(null);
   const height = useRef(null);
   const selectedItemId = useCommandState((state) => state.selectedItemId);
@@ -33,9 +43,11 @@ const CommandList = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     ScrollArea,
     {
-      variant: context.variant,
+      variant: variant ?? context.variant,
       hoverBoundary,
-      ...rest,
+      scrollbarMode,
+      orientation,
+      type,
       children: /* @__PURE__ */ jsx(
         ScrollArea.Viewport,
         {

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface DescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+declare const Description: React.NamedExoticComponent<DescriptionProps>;
+
+export { Description, type DescriptionProps };

package/dist/components/description/dist/index.js

@@ -0,0 +1,29 @@
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+var descriptionTv = tcv({
+  base: "text-secondary-foreground px-0.5 break-words whitespace-pre-wrap",
+  variants: {
+    disabled: {
+      true: "text-disabled-foreground"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+var Description = memo(function Description2(props) {
+  const { children, className, disabled, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: descriptionTv({ disabled, className }),
+      slot: "description",
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  Description
+};

package/dist/components/description/src/description.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface DescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const Description: React.NamedExoticComponent<DescriptionProps>;

package/dist/components/description/src/description.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { descriptionTv } from "./tv.js";
+const Description = memo(function Description2(props) {
+  const { children, className, disabled, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: descriptionTv({ disabled, className }),
+      slot: "description",
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  Description
+};

package/dist/components/description/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Description } from './description';
+export type { DescriptionProps } from './description';

package/dist/components/description/src/tv.d.ts

@@ -0,0 +1,13 @@
+export declare const descriptionTv: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string;
+    };
+}, undefined, "text-secondary-foreground px-0.5 break-words whitespace-pre-wrap", {
+    disabled: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string;
+    };
+}, undefined, "text-secondary-foreground px-0.5 break-words whitespace-pre-wrap", unknown, unknown, undefined>>;

package/dist/components/description/src/tv.js

@@ -0,0 +1,15 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const descriptionTv = tcv({
+  base: "text-secondary-foreground px-0.5 break-words whitespace-pre-wrap",
+  variants: {
+    disabled: {
+      true: "text-disabled-foreground"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+export {
+  descriptionTv
+};

package/dist/components/description/tsup.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('tsup').Options | import('tsup').Options[] | ((overrideOptions: import('tsup').Options) => import('tsup').Options | import('tsup').Options[] | Promise<import('tsup').Options | import('tsup').Options[]>);
+export default _default;

package/dist/components/emoji-picker/dist/index.d.ts

@@ -49,6 +49,7 @@ interface EmojiPickerProps {
     showCategories?: boolean;
     showFrequentlyUsed?: boolean;
     showSearch?: boolean;
+    showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
 }

package/dist/components/emoji-picker/dist/index.js

@@ -12017,6 +12017,7 @@ var EmojiPicker = memo(function EmojiPicker2({
   showCategories = true,
   showFrequentlyUsed = true,
   showSearch = true,
+  showFooter = true,
   children,
   variant = "dark"
 }) {
@@ -12063,6 +12064,7 @@ var EmojiPicker = memo(function EmojiPicker2({
     onChange == null ? void 0 : onChange(emoji);
   });
   const handleEmojiHover = useEventCallback((emoji) => {
+    if (!showFooter) return;
     setHoveredEmoji(emoji);
   });
   const handleCategoryClick = useEventCallback((category) => {
@@ -12079,7 +12081,7 @@ var EmojiPicker = memo(function EmojiPicker2({
       className: tv.container({ className }),
       style: rootStyle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
+        (showSearch || showCategories) && /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
           showSearch && /* @__PURE__ */ jsx(
             SearchInput,
             {
@@ -12181,7 +12183,7 @@ var EmojiPicker = memo(function EmojiPicker2({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        showFooter && /* @__PURE__ */ jsx(
           EmojiFooter,
           {
             hoveredEmoji,

package/dist/components/emoji-picker/src/emoji-picker.d.ts

@@ -10,6 +10,7 @@ export interface EmojiPickerProps {
     showCategories?: boolean;
     showFrequentlyUsed?: boolean;
     showSearch?: boolean;
+    showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
 }

package/dist/components/emoji-picker/src/emoji-picker.js

@@ -33,6 +33,7 @@ const EmojiPicker = memo(function EmojiPicker2({
   showCategories = true,
   showFrequentlyUsed = true,
   showSearch = true,
+  showFooter = true,
   children,
   variant = "dark"
 }) {
@@ -80,6 +81,7 @@ const EmojiPicker = memo(function EmojiPicker2({
     onChange == null ? void 0 : onChange(emoji);
   });
   const handleEmojiHover = useEventCallback((emoji) => {
+    if (!showFooter) return;
     setHoveredEmoji(emoji);
   });
   const handleCategoryClick = useEventCallback((category) => {
@@ -96,7 +98,7 @@ const EmojiPicker = memo(function EmojiPicker2({
       className: tv.container({ className }),
       style: rootStyle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
+        (showSearch || showCategories) && /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
           showSearch && /* @__PURE__ */ jsx(
             SearchInput,
             {
@@ -198,7 +200,7 @@ const EmojiPicker = memo(function EmojiPicker2({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        showFooter && /* @__PURE__ */ jsx(
           EmojiFooter,
           {
             hoveredEmoji,

package/dist/components/error-message/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface ErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+declare const ErrorMessage: React.NamedExoticComponent<ErrorMessageProps>;
+
+export { ErrorMessage, type ErrorMessageProps };

package/dist/components/error-message/dist/index.js

@@ -0,0 +1,30 @@
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+var errorMessageTv = tcv({
+  base: "text-danger-foreground break-words whitespace-pre-wrap px-0.5",
+  variants: {
+    disabled: {
+      true: "text-disabled-foreground"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+var ErrorMessage = memo(function ErrorMessage2(props) {
+  const { children, className, disabled, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "em",
+    {
+      className: errorMessageTv({ disabled, className }),
+      slot: "errorMessage",
+      role: "alert",
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  ErrorMessage
+};

package/dist/components/error-message/src/error-message.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface ErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const ErrorMessage: React.NamedExoticComponent<ErrorMessageProps>;

package/dist/components/error-message/src/error-message.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { errorMessageTv } from "./tv.js";
+const ErrorMessage = memo(function ErrorMessage2(props) {
+  const { children, className, disabled, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "em",
+    {
+      className: errorMessageTv({ disabled, className }),
+      slot: "errorMessage",
+      role: "alert",
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  ErrorMessage
+};

package/dist/components/error-message/src/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorMessage } from './error-message';
+export type { ErrorMessageProps } from './error-message';

package/dist/components/error-message/src/tv.d.ts

@@ -0,0 +1,13 @@
+export declare const errorMessageTv: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string;
+    };
+}, undefined, "text-danger-foreground break-words whitespace-pre-wrap px-0.5", {
+    disabled: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string;
+    };
+}, undefined, "text-danger-foreground break-words whitespace-pre-wrap px-0.5", unknown, unknown, undefined>>;

package/dist/components/error-message/src/tv.js

@@ -0,0 +1,15 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const errorMessageTv = tcv({
+  base: "text-danger-foreground break-words whitespace-pre-wrap px-0.5",
+  variants: {
+    disabled: {
+      true: "text-disabled-foreground"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+export {
+  errorMessageTv
+};

package/dist/components/error-message/tsup.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('tsup').Options | import('tsup').Options[] | ((overrideOptions: import('tsup').Options) => import('tsup').Options | import('tsup').Options[] | Promise<import('tsup').Options | import('tsup').Options[]>);
+export default _default;

package/dist/components/form/src/adapters/base-adapter.js

@@ -1,4 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { Description } from "../../../description/dist/index.js";
+import { ErrorMessage } from "../../../error-message/dist/index.js";
 import { Label } from "../../../label/dist/index.js";
 import { FormTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
@@ -23,8 +25,8 @@ function BaseAdapter({
       }
     ),
     children,
-    description && /* @__PURE__ */ jsx("p", { className: tv.description(), children: description }),
-    error && /* @__PURE__ */ jsx("p", { className: tv.error(), children: error })
+    typeof description === "string" ? /* @__PURE__ */ jsx(Description, { id: `${htmlFor}-description`, children: description }) : description,
+    typeof error === "string" ? /* @__PURE__ */ jsx(ErrorMessage, { id: `${htmlFor}-error`, children: error }) : error
   ] });
 }
 function filterFormProps(props) {