@choice-ui/react 1.3.10

package/dist/cjs/components/textarea/src/textarea.cjs

@@ -0,0 +1,274 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const index = require("../../scroll-area/dist/index.cjs");
+const React = require("react");
+const usehooksTs = require("usehooks-ts");
+const tv = require("./tv.cjs");
+const resizeHandle = require("./components/resize-handle.cjs");
+const index$1 = require("./components/autosize/index.cjs");
+const tcx = require("../../../shared/utils/tcx/tcx.cjs");
+const mergeRefs = require("../../../shared/utils/merge-refs/merge-refs.cjs");
+const DEFAULT_TEXTAREA_CONSTANTS = {
+  lineHeight: 16,
+  padding: 4
+};
+const TextareaContent = React.forwardRef(
+  function TextareaContent2(props, ref) {
+    const { className, style, onChange, ...rest } = props;
+    const autosizeStyle = style ? { ...style, height: style.height } : void 0;
+    const handleChange = onChange ? (e) => onChange(e.target.value) : void 0;
+    return /* @__PURE__ */ require$$0.jsx(
+      index$1.TextareaAutosize,
+      {
+        ref,
+        className,
+        style: autosizeStyle,
+        onChange: handleChange,
+        ...rest
+      }
+    );
+  }
+);
+TextareaContent.displayName = "Textarea.Content";
+const TextareaBase = React.forwardRef(
+  function TextareaBase2(props, ref) {
+    const {
+      allowNewline = true,
+      className,
+      disabled,
+      readOnly,
+      selected,
+      value,
+      variant = "default",
+      resize = "auto",
+      minRows = 3,
+      maxRows,
+      lineHeight = DEFAULT_TEXTAREA_CONSTANTS.lineHeight,
+      padding = DEFAULT_TEXTAREA_CONSTANTS.padding,
+      onBlur,
+      onChange,
+      onFocus,
+      onIsEditingChange,
+      children,
+      focusSelection = "all",
+      scrollRef,
+      contentRef,
+      ...rest
+    } = props;
+    const textareaRef = React.useRef(null);
+    const viewportRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [viewportHeight, setViewportHeight] = React.useState();
+    React.useImperativeHandle(ref, () => textareaRef.current, []);
+    usehooksTs.useUnmount(() => {
+      onIsEditingChange == null ? void 0 : onIsEditingChange(false);
+    });
+    const tx = React.useMemo(() => {
+      return tv.TextareaTv({ variant, selected, disabled, readOnly, resize, isDragging });
+    }, [variant, selected, disabled, readOnly, resize, isDragging]);
+    const handleChange = usehooksTs.useEventCallback((e) => {
+      onChange == null ? void 0 : onChange(e.target.value);
+    });
+    const handleFocus = usehooksTs.useEventCallback((e) => {
+      if (focusSelection === "all") {
+        e.target.select();
+      } else if (focusSelection === "end") {
+        const textarea = e.target;
+        setTimeout(() => {
+          const length = textarea.value.length;
+          textarea.setSelectionRange(length, length);
+        }, 0);
+      }
+      onFocus == null ? void 0 : onFocus(e);
+      onIsEditingChange == null ? void 0 : onIsEditingChange(true);
+    });
+    const handleBlur = usehooksTs.useEventCallback((e) => {
+      onBlur == null ? void 0 : onBlur(e);
+      onIsEditingChange == null ? void 0 : onIsEditingChange(false);
+    });
+    const handleKeyDown = usehooksTs.useEventCallback((e) => {
+      var _a;
+      if (!allowNewline && e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+      }
+      (_a = rest.onKeyDown) == null ? void 0 : _a.call(rest, e);
+    });
+    const { style, ...restWithoutStyle } = rest;
+    const baseTextareaProps = React.useMemo(
+      () => ({
+        ...restWithoutStyle,
+        ref: textareaRef,
+        "data-1p-ignore": true,
+        spellCheck: false,
+        autoComplete: "off",
+        value,
+        disabled,
+        readOnly,
+        className: tx.textarea(),
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown
+      }),
+      [
+        restWithoutStyle,
+        value,
+        disabled,
+        readOnly,
+        tx,
+        handleChange,
+        handleFocus,
+        handleBlur,
+        handleKeyDown
+      ]
+    );
+    const heightConstraints = React.useMemo(() => {
+      const minHeight = minRows ? minRows * lineHeight + padding * 2 : void 0;
+      const maxHeight = maxRows ? maxRows * lineHeight + padding * 2 : void 0;
+      return { minHeight, maxHeight };
+    }, [minRows, maxRows, lineHeight, padding]);
+    const textareaAutosizeProps = React.useMemo(
+      () => ({
+        ...baseTextareaProps,
+        minRows,
+        maxRows: void 0,
+        // 在 ScrollArea 中不限制 maxRows
+        style: {
+          lineHeight: `${lineHeight}px`,
+          padding: `${padding}px`
+        }
+      }),
+      [baseTextareaProps, minRows, lineHeight, padding]
+    );
+    const containerClasses = React.useMemo(() => tcx.tcx(tx.container(), className), [tx, className]);
+    const handleMouseDown = usehooksTs.useEventCallback((e) => {
+      var _a;
+      if (resize !== "handle" || disabled || readOnly) return;
+      e.preventDefault();
+      setIsDragging(true);
+      const startY = e.clientY;
+      const startHeight = ((_a = viewportRef.current) == null ? void 0 : _a.offsetHeight) || heightConstraints.minHeight || 100;
+      const handleMouseMove = (e2) => {
+        const deltaY = e2.clientY - startY;
+        let newHeight = startHeight + deltaY;
+        if (heightConstraints.minHeight) {
+          newHeight = Math.max(newHeight, heightConstraints.minHeight);
+        }
+        if (heightConstraints.maxHeight) {
+          newHeight = Math.min(newHeight, heightConstraints.maxHeight);
+        }
+        setViewportHeight(newHeight);
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    });
+    const viewportStyle = React.useMemo(() => {
+      if (resize === "auto") {
+        return heightConstraints.maxHeight ? { maxHeight: `${heightConstraints.maxHeight}px` } : void 0;
+      }
+      if (resize === "handle") {
+        const height = viewportHeight || heightConstraints.minHeight || 100;
+        return { height: `${height}px` };
+      }
+      if (resize === false && rest.rows) {
+        const fixedHeight = rest.rows * lineHeight + padding * 2;
+        return { height: `${fixedHeight}px` };
+      }
+      return void 0;
+    }, [resize, heightConstraints, rest.rows, viewportHeight, lineHeight, padding]);
+    const contentStyle = React.useMemo(
+      () => ({
+        minHeight: viewportHeight || heightConstraints.minHeight
+      }),
+      [viewportHeight, heightConstraints.minHeight]
+    );
+    const bodyRef = React.useRef();
+    React.useEffect(() => {
+      if (!bodyRef.current) {
+        bodyRef.current = document.body;
+      }
+      bodyRef.current.style.cursor = isDragging ? "ns-resize" : "";
+    }, [isDragging]);
+    React.useEffect(() => {
+      return () => {
+        if (bodyRef.current) {
+          bodyRef.current.style.cursor = "";
+        }
+      };
+    }, []);
+    const hasContentChild = React.useMemo(() => {
+      let foundContent = false;
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === TextareaContent) {
+          foundContent = true;
+        }
+      });
+      return foundContent;
+    }, [children]);
+    const renderContent = () => {
+      if (hasContentChild) {
+        return React.Children.map(children, (child) => {
+          if (React.isValidElement(child) && child.type === TextareaContent) {
+            const mergedStyle = {
+              lineHeight: `${lineHeight}px`,
+              padding: `${padding}px`,
+              ...child.props.style
+            };
+            return /* @__PURE__ */ require$$0.jsx(
+              index$1.TextareaAutosize,
+              {
+                ...textareaAutosizeProps,
+                ...child.props,
+                className: tcx.tcx(tx.textarea(), child.props.className),
+                style: mergedStyle,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown
+              }
+            );
+          }
+          return child;
+        });
+      }
+      return /* @__PURE__ */ require$$0.jsx(index$1.TextareaAutosize, { ...textareaAutosizeProps });
+    };
+    return /* @__PURE__ */ require$$0.jsxs("div", { className: tcx.tcx(containerClasses, "relative"), children: [
+      /* @__PURE__ */ require$$0.jsx(index.ScrollArea, { type: "scroll", children: /* @__PURE__ */ require$$0.jsx(
+        index.ScrollArea.Viewport,
+        {
+          ref: mergeRefs.mergeRefs(viewportRef, scrollRef),
+          className: tx.viewport(),
+          style: viewportStyle,
+          children: /* @__PURE__ */ require$$0.jsx(
+            index.ScrollArea.Content,
+            {
+              ref: contentRef,
+              className: tx.content(),
+              style: contentStyle,
+              children: renderContent()
+            }
+          )
+        }
+      ) }),
+      resize === "handle" && /* @__PURE__ */ require$$0.jsx(
+        resizeHandle.ResizeHandle,
+        {
+          className: tx.resizeHandle(),
+          onMouseDown: handleMouseDown
+        }
+      )
+    ] });
+  }
+);
+TextareaBase.displayName = "Textarea";
+const Textarea = Object.assign(TextareaBase, {
+  Content: TextareaContent
+});
+exports.Textarea = Textarea;

package/dist/cjs/components/textarea/src/tv.cjs

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tcx = require("../../../shared/utils/tcx/tcx.cjs");
+const TextareaTv = tcx.tcv({
+  slots: {
+    container: "relative rounded-md border border-transparent min-w-0",
+    textarea: [
+      "w-full min-w-0",
+      "px-2 py-1",
+      "cursor-text",
+      "bg-transparent",
+      "placeholder:text-secondary-foreground",
+      "resize-none appearance-none",
+      "focus:outline-none",
+      "overflow-hidden"
+    ],
+    viewport: "h-full w-full",
+    content: "flex flex-col",
+    resizeHandle: [
+      "absolute right-0 bottom-0 cursor-ns-resize",
+      "flex size-6 items-center justify-center",
+      "select-none"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {
+        container: "bg-secondary-background",
+        textarea: "text-default-foreground"
+      },
+      light: {
+        container: "bg-gray-100",
+        textarea: "text-gray-900 placeholder:text-black/50"
+      },
+      dark: {
+        container: "bg-gray-700",
+        textarea: "text-white placeholder:text-white/40"
+      },
+      reset: {}
+    },
+    resize: {
+      auto: {},
+      handle: {
+        textarea: "min-h-[inherit] pr-6"
+      },
+      false: {}
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {},
+      false: {}
+    },
+    readOnly: {
+      true: {
+        textarea: "cursor-default"
+      },
+      false: {}
+    },
+    isDragging: {
+      true: {
+        container: "border-selected-boundary border-dashed",
+        textarea: "pointer-events-none"
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      selected: true,
+      disabled: false,
+      class: {
+        container: [
+          "bg-default-background",
+          "not-focus-within:border-selected-boundary/50",
+          "focus-within:border-selected-boundary"
+        ]
+      }
+    },
+    {
+      variant: "default",
+      selected: false,
+      disabled: false,
+      isDragging: false,
+      class: {
+        container: "hover:not-focus-within:border-default-boundary"
+      }
+    },
+    {
+      variant: "light",
+      selected: false,
+      disabled: false,
+      isDragging: false,
+      class: {
+        container: ["hover:not-focus-within:border-gray-200"]
+      }
+    },
+    {
+      variant: "dark",
+      selected: false,
+      disabled: false,
+      isDragging: false,
+      class: {
+        container: ["hover:not-focus-within:border-gray-600"]
+      }
+    },
+    {
+      variant: ["light", "dark", "default"],
+      selected: false,
+      disabled: false,
+      class: {
+        container: "focus-within:border-selected-boundary"
+      }
+    },
+    {
+      variant: "default",
+      disabled: true,
+      class: {
+        container: "border-secondary-background bg-secondary-background",
+        textarea: "text-disabled-foreground"
+      }
+    },
+    {
+      variant: "light",
+      disabled: true,
+      class: {
+        container: "bg-gray-100",
+        textarea: "text-black/50"
+      }
+    },
+    {
+      variant: "dark",
+      disabled: true,
+      class: {
+        container: "bg-gray-700",
+        textarea: "text-white/40"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    selected: false,
+    disabled: false,
+    readOnly: false,
+    resize: "auto"
+  }
+});
+exports.TextareaTv = TextareaTv;

package/dist/cjs/components/toggle-button/src/toggle-button.cjs

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const index = require("../../tooltip/dist/index.cjs");
+const React = require("react");
+const tv = require("./tv.cjs");
+const tcx = require("../../../shared/utils/tcx/tcx.cjs");
+const ToggleButton = React.forwardRef(
+  function ToggleButton2(props, ref) {
+    const {
+      className,
+      variant = "default",
+      size = "default",
+      children,
+      disabled,
+      readOnly = false,
+      active,
+      focused,
+      value,
+      tooltip,
+      event = "click",
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
+      onChange,
+      onMouseDown,
+      onContextMenu,
+      ...rest
+    } = props;
+    const id = React.useId();
+    const descriptionId = React.useId();
+    const styles = tv.toggleButtonTv({
+      checked: value,
+      disabled,
+      variant,
+      active,
+      focused,
+      event,
+      size
+    });
+    const button = /* @__PURE__ */ require$$0.jsxs(
+      "div",
+      {
+        className: tcx.tcx(styles.root(), className),
+        role: "presentation",
+        onContextMenu,
+        children: [
+          /* @__PURE__ */ require$$0.jsx("span", { className: "sr-only", children: value ? "Enabled" : "Disabled" }),
+          /* @__PURE__ */ require$$0.jsx(
+            "input",
+            {
+              ref,
+              id,
+              className: styles.input(),
+              tabIndex: 0,
+              type: "checkbox",
+              checked: value,
+              disabled: disabled || readOnly,
+              onChange: (e) => {
+                if (!readOnly) {
+                  onChange == null ? void 0 : onChange(e.target.checked);
+                }
+              },
+              "aria-checked": value,
+              "aria-disabled": disabled || readOnly,
+              "aria-label": ariaLabel || (typeof children === "string" ? children : void 0),
+              "aria-describedby": ariaDescribedby || (children ? descriptionId : void 0),
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ require$$0.jsx(
+            "label",
+            {
+              htmlFor: id,
+              id: descriptionId,
+              className: styles.label(),
+              onMouseDown: (e) => {
+                if (readOnly) return;
+                if (event === "mousedown") {
+                  e.preventDefault();
+                  onMouseDown == null ? void 0 : onMouseDown(e);
+                  if (!disabled) {
+                    onChange == null ? void 0 : onChange(!value);
+                  }
+                  const clickHandler = (e2) => {
+                    e2.preventDefault();
+                    e2.stopPropagation();
+                    document.removeEventListener("click", clickHandler, true);
+                  };
+                  document.addEventListener("click", clickHandler, true);
+                }
+              },
+              children
+            }
+          )
+        ]
+      }
+    );
+    return tooltip ? /* @__PURE__ */ require$$0.jsx(index.Tooltip, { ...tooltip, children: button }) : button;
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+exports.ToggleButton = ToggleButton;

package/dist/cjs/components/toggle-button/src/tv.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tcx = require("../../../shared/utils/tcx/tcx.cjs");
+const toggleButtonTv = tcx.tcv({
+  slots: {
+    root: ["relative"],
+    input: ["absolute inset-0 h-full w-full", "peer pointer-events-auto appearance-none opacity-0"],
+    label: [
+      "absolute inset-0 flex h-full w-full rounded-md",
+      "items-center justify-center",
+      "border border-solid border-transparent",
+      "peer-focus-visible:border-selected-boundary"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {},
+      secondary: {},
+      highlight: {},
+      reset: {}
+    },
+    size: {
+      default: { root: "h-6 w-6" },
+      large: { root: "h-8 w-8" }
+    },
+    checked: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {
+        label: "text-secondary-foreground"
+      },
+      false: {}
+    },
+    active: {
+      true: {},
+      false: {}
+    },
+    focused: {
+      true: { label: "border-selected-boundary" },
+      false: {}
+    },
+    event: {
+      click: {},
+      mousedown: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["default", "highlight"],
+      active: false,
+      disabled: false,
+      class: {
+        label: "hover:bg-secondary-background"
+      }
+    },
+    {
+      variant: "default",
+      active: false,
+      event: "click",
+      disabled: false,
+      class: {
+        label: "active:bg-tertiary-background"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      active: false,
+      checked: false,
+      disabled: false,
+      event: "click",
+      class: {
+        label: "active:bg-tertiary-background"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      active: false,
+      checked: true,
+      disabled: false,
+      event: "click",
+      class: {
+        label: "active:bg-accent-background/10"
+      }
+    },
+    {
+      variant: ["default", "highlight"],
+      active: true,
+      disabled: false,
+      class: {
+        label: "bg-tertiary-background"
+      }
+    },
+    {
+      variant: "secondary",
+      checked: false,
+      focused: false,
+      disabled: false,
+      class: {
+        label: "border-default-boundary hover:bg-secondary-background"
+      }
+    },
+    {
+      variant: "secondary",
+      active: true,
+      disabled: false,
+      checked: false,
+      class: {
+        label: "bg-secondary-background"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      active: true,
+      disabled: false,
+      checked: true,
+      class: {
+        label: "bg-accent-background/10 text-accent-foreground"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      checked: true,
+      disabled: false,
+      active: false,
+      class: {
+        label: "bg-accent-background/10 text-accent-foreground hover:bg-accent-background/5"
+      }
+    },
+    {
+      variant: ["highlight", "secondary"],
+      checked: true,
+      disabled: true,
+      class: {
+        label: "bg-tertiary-background"
+      }
+    }
+  ],
+  defaultVariants: {
+    checked: false,
+    disabled: false,
+    variant: "default",
+    size: "default",
+    event: "click",
+    active: false,
+    focused: false
+  }
+});
+exports.toggleButtonTv = toggleButtonTv;