@choice-ui/react 2.0.0 → 2.0.2

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

@@ -1,22 +1,15 @@
 import { HTMLProps } from 'react';
-import { TooltipProps } from '../../tooltip/src';
 import * as react from 'react';
 
-interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
+interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
     active?: boolean;
+    as?: React.ElementType;
     asChild?: boolean;
     className?: string;
     focused?: boolean;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @default "default"
-     */
     size?: "default" | "large";
-    tooltip?: TooltipProps;
-    /**
-     * @default "primary"
-     */
     variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
 }
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/dist/index.js

@@ -1,10 +1,9 @@
-import { LoaderCircle } from "@choiceform/icons-react";
 import { Slot } from "../../slot/dist/index.js";
-import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
+import { LoaderCircle } from "@choiceform/icons-react";
+import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { isMultiElement } from "../../../shared/utils/assertion.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+import { isMultiElement } from "../../../shared/utils/assertion.js";
 var buttonTv = tcv({
   slots: {
     button: [
@@ -75,6 +74,10 @@ var buttonTv = tcv({
     focused: {
       true: "",
       false: ""
+    },
+    multiElement: {
+      true: "",
+      false: ""
     }
   },
   compoundVariants: [
@@ -123,10 +126,15 @@ var buttonTv = tcv({
       variant: ["link", "link-danger", "ghost"],
       disabled: true,
       class: {
-        button: [
-          "text-disabled-foreground pointer-events-none",
-          "data-[multi-element=true]:border-default-boundary"
-        ]
+        button: ["text-disabled-foreground pointer-events-none"]
+      }
+    },
+    {
+      variant: ["link", "link-danger", "ghost"],
+      disabled: true,
+      multiElement: true,
+      class: {
+        button: ["border-default-boundary"]
       }
     },
     {
@@ -236,6 +244,13 @@ var buttonTv = tcv({
       loading: false,
       variant: "dark",
       class: { button: "active:bg-gray-600" }
+    },
+    {
+      disabled: false,
+      loading: false,
+      variant: "secondary",
+      active: false,
+      class: { button: "hover:bg-secondary-background" }
     }
   ],
   defaultVariants: {
@@ -244,7 +259,8 @@ var buttonTv = tcv({
     active: false,
     disabled: false,
     loading: false,
-    focused: false
+    focused: false,
+    multiElement: false
   }
 });
 var Button = forwardRef(function Button2(props, ref) {
@@ -259,13 +275,25 @@ var Button = forwardRef(function Button2(props, ref) {
     loading,
     asChild,
     children,
-    tooltip,
+    as,
     "aria-label": ariaLabel,
     onClick,
     ...rest
   } = props;
-  const Button3 = asChild ? Slot : "button";
-  const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
+  const As = as ?? "button";
+  const AsComponent = asChild ? Slot : As;
+  const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
+  const tv = useMemo(
+    () => buttonTv({
+      variant,
+      size,
+      active,
+      disabled,
+      loading,
+      focused
+    }),
+    [variant, size, active, disabled, loading, focused]
+  );
   const content = isValidElement(children) ? cloneElement(children, {
     children: children.props.children
   }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -279,23 +307,21 @@ var Button = forwardRef(function Button2(props, ref) {
     return props["aria-label"];
   }, [children, props]);
   const handleClick = readOnly ? void 0 : onClick;
-  const button = /* @__PURE__ */ jsx(
-    Button3,
+  return /* @__PURE__ */ jsx(
+    AsComponent,
     {
-      ...rest,
       ref,
-      type: rest.type || "button",
+      className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
+      ...elementProps,
+      ...rest,
       disabled: disabled || loading,
       onClick: handleClick,
-      className: tcx(tv.button(), className),
-      "data-multi-element": isMultiElement(content),
       "aria-disabled": disabled || loading,
       "aria-busy": loading,
       "aria-label": ariaLabelProps,
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
 });
 Button.displayName = "Button";
 export {

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

@@ -1,6 +1,14 @@
 import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
+interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+declare const CheckboxIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -20,9 +28,10 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }
 declare const Checkbox: CheckboxType;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxIconProps, type CheckboxLabelProps, type CheckboxProps };

package/dist/components/checkbox/dist/index.js

@@ -1,5 +1,5 @@
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId, createContext, useContext } from "react";
+import { memo, forwardRef, useId, Children, isValidElement, createContext, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -137,6 +137,38 @@ var checkboxTv = tcv({
     focused: false
   }
 });
+var CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
 var CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
@@ -195,12 +227,23 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.Icon");
+  };
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find(isIconElement);
+  const otherChildren = childArray.filter((child) => !isIconElement(child));
   const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsx(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -234,7 +277,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -243,6 +286,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
 });
 var MemoizedCheckbox = memo(CheckboxBase);
 var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Icon = CheckboxIcon;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 export {

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

@@ -1,6 +1,5 @@
 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 {
     codeExpanded: boolean;
@@ -14,7 +13,7 @@ interface CodeBlockContextValue {
     isExpanded: boolean;
     language: string;
     lineCount: number;
-    lineThreshold: number;
+    lineThreshold?: number;
     needsScroll: boolean;
     scrollRef?: RefObject<HTMLDivElement>;
     variant?: "default" | "light" | "dark";
@@ -51,35 +50,33 @@ interface CodeBlockFooterProps extends CodeBlockInjectedProps {
 }
 interface CodeBlockContentProps extends CodeBlockInjectedProps {
     className?: string;
-    code: string;
     language?: string;
     withScrollArea?: boolean;
+    children?: string;
 }
 interface CodeBlockCodeProps extends HTMLProps<HTMLDivElement> {
     className?: string;
-    code: string;
-    /** 从 CodeBlock 传递的 context */
+    children?: string;
     codeBlock?: CodeBlockContextValue;
     codeBlockId?: string;
     language?: string;
-    /** 手动指定主题，覆盖自动检测 */
     variant?: "light" | "dark";
 }
 
+declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
+    Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
+    Content: React__default.NamedExoticComponent<CodeBlockContentProps>;
+    Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
+    Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
+};
+
 declare const CodeBlockCode: React.NamedExoticComponent<CodeBlockCodeProps>;
 
 declare const CodeBlockHeader: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
 
 declare const CodeBlockFooter: React.NamedExoticComponent<CodeBlockFooterProps>;
 
-declare function CodeBlockContent(props: CodeBlockContentProps): react_jsx_runtime.JSX.Element | null;
-
-declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
-    Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
-    Content: typeof CodeBlockContent;
-    Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
-    Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
-};
+declare const CodeBlockContent: React.NamedExoticComponent<CodeBlockContentProps>;
 
 declare function getDefaultFilenameForLanguage(language: string): string;