@choice-ui/react 1.3.11 → 1.4.0

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

@@ -1,274 +0,0 @@
-"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

@@ -1,151 +0,0 @@
-"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

@@ -1,102 +0,0 @@
-"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

@@ -1,150 +0,0 @@
-"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;