@choice-ui/react 1.3.11 → 1.4.0

package/dist/cjs/components/range/src/range.cjs

@@ -1,328 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("react/jsx-runtime");
-const esToolkit = require("es-toolkit");
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-const tv = require("./tv.cjs");
-const useIsomorphicLayoutEffect = require("../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.cjs");
-const tcx = require("../../../shared/utils/tcx/tcx.cjs");
-const mergeRefs = require("../../../shared/utils/merge-refs/merge-refs.cjs");
-const Range = React.forwardRef(function Range2(props, ref) {
-  const {
-    defaultValue,
-    value,
-    onChange,
-    onChangeStart,
-    onChangeEnd,
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-    readOnly = false,
-    className,
-    connectsClassName = {
-      positive: "bg-accent-background",
-      negative: "bg-accent-background"
-    },
-    trackSize = {
-      width: 256,
-      height: 16
-    },
-    thumbSize = 14
-  } = props;
-  const [actualTrackWidth, setActualTrackWidth] = React.useState();
-  const valueToPosition = React.useCallback((val) => (val - min) / (max - min), [min, max]);
-  const positionToValue = React.useCallback(
-    (position) => min + position * (max - min),
-    [min, max]
-  );
-  const defaultStepValue = React.useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null) return null;
-    if (step > 1) {
-      return Math.round((defaultValue - min) / step) * step + min;
-    }
-    return defaultValue;
-  }, [defaultValue, step, min]);
-  const sliderRef = React.useRef(null);
-  const thumbRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const isDragging = React.useRef(false);
-  const [internalValue, setInternalValue] = React.useState(value ?? min);
-  const currentValue = value ?? internalValue;
-  const currentStepValue = React.useMemo(
-    () => step > 1 ? Math.round(currentValue / step) * step : currentValue,
-    [currentValue, step]
-  );
-  const [transforms, setTransforms] = React.useState({
-    minTransform: 1,
-    maxTransform: 0,
-    transformX: 0
-  });
-  const trackWidth = React.useMemo(() => {
-    if ((trackSize == null ? void 0 : trackSize.width) === "auto") {
-      return actualTrackWidth;
-    }
-    return trackSize == null ? void 0 : trackSize.width;
-  }, [trackSize == null ? void 0 : trackSize.width, actualTrackWidth]);
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if ((trackSize == null ? void 0 : trackSize.width) === "auto" && sliderRef.current) {
-      const updateWidth = () => {
-        if (sliderRef.current) {
-          const width = sliderRef.current.getBoundingClientRect().width;
-          if (width > 0) {
-            setActualTrackWidth(width);
-          }
-        }
-      };
-      updateWidth();
-      const resizeObserver = new ResizeObserver(() => {
-        updateWidth();
-      });
-      resizeObserver.observe(sliderRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [trackSize == null ? void 0 : trackSize.width]);
-  React.useEffect(() => {
-    const position = valueToPosition(currentValue);
-    const minTransform = 1;
-    const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
-    const transformX = minTransform + position * (maxTransform - minTransform);
-    setTransforms({
-      minTransform,
-      maxTransform,
-      transformX
-    });
-  }, [currentValue, trackWidth, thumbSize, valueToPosition]);
-  const dotsData = React.useMemo(() => {
-    if (!step || step <= 1) return null;
-    return Array.from({ length: Math.ceil((max - min) / step) + 1 }, (_, i) => {
-      const dotValue = min + i * step;
-      const dotPosition = valueToPosition(dotValue);
-      return {
-        value: dotValue,
-        position: dotPosition
-      };
-    });
-  }, [step, min, max, valueToPosition]);
-  const defaultDotPosition = React.useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null || step > 1) return null;
-    return valueToPosition(defaultValue);
-  }, [defaultValue, step, valueToPosition]);
-  const updatePosition = usehooksTs.useEventCallback((clientX, isEnd) => {
-    var _a;
-    if (readOnly) return;
-    const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
-    if (!rect) return;
-    const newPosition = esToolkit.clamp((clientX - rect.left) / rect.width, 0, 1);
-    const newValue = Math.round(positionToValue(newPosition) / step) * step;
-    let clampedValue = esToolkit.clamp(newValue, min, max);
-    if (defaultValue !== void 0 && defaultValue !== null && step === 1) {
-      const snapThreshold = (max - min) * 0.05;
-      const distanceToDefault = Math.abs(clampedValue - defaultValue);
-      if (distanceToDefault <= snapThreshold) {
-        clampedValue = defaultValue;
-      }
-    }
-    if (isEnd) {
-      isDragging.current = false;
-    }
-    if (value === void 0) {
-      setInternalValue(clampedValue);
-    }
-    onChange == null ? void 0 : onChange(clampedValue);
-  });
-  React.useEffect(() => {
-    if (value !== void 0) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const handlePointerDown = React.useCallback(
-    (e) => {
-      var _a;
-      if (disabled || readOnly) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const thumb = thumbRef.current;
-      if (!thumb) return;
-      onChangeStart == null ? void 0 : onChangeStart();
-      isDragging.current = true;
-      thumb.setPointerCapture(e.pointerId);
-      updatePosition(e.clientX);
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-      const handleMove = (e2) => {
-        if (!isDragging.current) return;
-        e2.preventDefault();
-        updatePosition(e2.clientX);
-      };
-      const handleUp = (e2) => {
-        if (!isDragging.current) return;
-        e2.preventDefault();
-        if (thumb.hasPointerCapture(e2.pointerId)) {
-          thumb.releasePointerCapture(e2.pointerId);
-        }
-        updatePosition(e2.clientX, true);
-        isDragging.current = false;
-        onChangeEnd == null ? void 0 : onChangeEnd();
-        window.removeEventListener("pointermove", handleMove);
-        window.removeEventListener("pointerup", handleUp);
-        window.removeEventListener("pointercancel", handleUp);
-      };
-      window.addEventListener("pointermove", handleMove);
-      window.addEventListener("pointerup", handleUp);
-      window.addEventListener("pointercancel", handleUp);
-    },
-    [disabled, readOnly, onChangeEnd, onChangeStart, updatePosition]
-  );
-  const handleSliderPointerDown = React.useCallback(
-    (e) => {
-      if (disabled || readOnly || e.target === thumbRef.current) return;
-      handlePointerDown(e);
-    },
-    [disabled, readOnly, handlePointerDown]
-  );
-  const handleKeyDown = usehooksTs.useEventCallback((e) => {
-    if (disabled || readOnly) return;
-    const stepValue = e.shiftKey ? step * 10 : step;
-    let newValue = currentValue;
-    switch (e.key) {
-      case "ArrowLeft":
-      case "ArrowDown":
-        e.preventDefault();
-        newValue = esToolkit.clamp(newValue - stepValue, min, max);
-        break;
-      case "ArrowRight":
-      case "ArrowUp":
-        e.preventDefault();
-        newValue = esToolkit.clamp(newValue + stepValue, min, max);
-        break;
-      default:
-        return;
-    }
-    if (newValue !== value) {
-      onChange == null ? void 0 : onChange(newValue);
-    }
-  });
-  React.useEffect(() => {
-    var _a;
-    if (disabled && document.activeElement === inputRef.current) {
-      (_a = inputRef.current) == null ? void 0 : _a.blur();
-    }
-  }, [disabled]);
-  const styles = React.useMemo(
-    () => tv.rangeTv({
-      currentDefaultValue: defaultStepValue === currentStepValue,
-      hasStepOrDefault: step > 1 || defaultValue !== void 0,
-      disabled
-    }),
-    [defaultStepValue, currentStepValue, step, defaultValue, disabled]
-  );
-  const connectsClass = React.useMemo(() => {
-    if (disabled) return "bg-disabled-background";
-    if (currentValue < 0) return connectsClassName.negative;
-    return connectsClassName.positive;
-  }, [disabled, currentValue, connectsClassName]);
-  const connectStyle = React.useMemo(() => {
-    return {
-      left: min < 0 ? currentValue < 0 ? `${transforms.transformX + thumbSize / 2}px` : "50%" : ((trackSize == null ? void 0 : trackSize.height) ?? 0) / 2 + "px",
-      right: min < 0 ? currentValue >= 0 ? `calc(100% - ${transforms.transformX + thumbSize / 2}px)` : "50%" : `calc(100% - ${transforms.transformX + thumbSize / 2}px)`,
-      height: trackSize == null ? void 0 : trackSize.height
-    };
-  }, [min, currentValue, transforms.transformX, thumbSize, trackSize == null ? void 0 : trackSize.height]);
-  const renderDots = React.useCallback(() => {
-    if (dotsData) {
-      return dotsData.map(({ value: dotValue, position: dotPosition }) => {
-        const { minTransform, maxTransform } = transforms;
-        const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
-        const { dot } = tv.rangeTv({
-          defaultStepValue: defaultStepValue === dotValue,
-          overStepValue: dotValue <= currentValue
-        });
-        return /* @__PURE__ */ require$$0.jsx(
-          "div",
-          {
-            className: dot(),
-            style: {
-              left: dotTransform + thumbSize / 2
-            }
-          },
-          dotValue
-        );
-      });
-    }
-    if (defaultDotPosition !== null && defaultDotPosition !== void 0) {
-      return /* @__PURE__ */ require$$0.jsx(
-        "div",
-        {
-          className: tv.rangeTv({ defaultStepValue: true }).dot(),
-          style: {
-            left: transforms.minTransform + defaultDotPosition * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
-          }
-        }
-      );
-    }
-    return null;
-  }, [dotsData, defaultDotPosition, transforms, defaultStepValue, currentValue, thumbSize]);
-  React.useEffect(() => {
-    const noop = () => {
-    };
-    return () => {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("pointermove", noop);
-        window.removeEventListener("pointerup", noop);
-        window.removeEventListener("pointercancel", noop);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ require$$0.jsxs(
-    "div",
-    {
-      ref: mergeRefs.mergeRefs(sliderRef, ref),
-      onPointerDown: handleSliderPointerDown,
-      className: tcx.tcx(styles.container(), className),
-      style: {
-        "--width": `${trackWidth}px`,
-        "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
-      },
-      children: [
-        /* @__PURE__ */ require$$0.jsx(
-          "div",
-          {
-            className: tcx.tcx(styles.connect(), connectsClass),
-            style: connectStyle
-          }
-        ),
-        step > 1 || defaultValue !== void 0 ? /* @__PURE__ */ require$$0.jsx("div", { className: styles.dotContainer(), children: renderDots() }) : "",
-        /* @__PURE__ */ require$$0.jsx(
-          "div",
-          {
-            ref: thumbRef,
-            onPointerDown: handlePointerDown,
-            className: styles.thumb(),
-            style: {
-              width: thumbSize,
-              height: thumbSize,
-              transform: `translate(${transforms.transformX}px, -50%)`,
-              willChange: isDragging.current ? "transform" : "auto"
-            },
-            children: /* @__PURE__ */ require$$0.jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                onKeyDown: handleKeyDown,
-                className: styles.input(),
-                tabIndex: disabled || readOnly ? -1 : 0,
-                readOnly: true
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-});
-Range.displayName = "Range";
-exports.Range = Range;

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

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tcx = require("../../../shared/utils/tcx/tcx.cjs");
-const rangeTv = tcx.tcv({
-  slots: {
-    container: [
-      "h-(--height) w-(--width)",
-      "relative touch-none select-none",
-      "bg-secondary-background shadow-inset-border rounded-full"
-    ],
-    connect: [
-      "pointer-events-none absolute",
-      "after:absolute",
-      "after:content-['']",
-      "after:rounded-full",
-      "after:bg-inherit",
-      "after:h-[var(--height)]",
-      "after:left-[calc(var(--height)/-2)]",
-      "after:right-[calc(var(--height)/-2)]"
-    ],
-    thumb: [
-      "absolute top-1/2 box-border origin-center rounded-full",
-      "shadow-range-thumb border-2 border-white",
-      "bg-white"
-    ],
-    dotContainer: "pointer-events-none absolute inset-0",
-    dot: ["size-1 rounded-full", "absolute top-1/2", "-translate-x-1/2 -translate-y-1/2"],
-    input: "absolute -inset-1 cursor-default opacity-0"
-  },
-  variants: {
-    overStepValue: {
-      true: {
-        dot: "bg-black/20"
-      },
-      false: {
-        dot: "bg-black/10"
-      }
-    },
-    defaultStepValue: {
-      true: {
-        dot: "bg-black"
-      }
-    },
-    hasStepOrDefault: {
-      true: {},
-      false: {}
-    },
-    currentDefaultValue: {
-      true: {},
-      false: {}
-    },
-    disabled: {
-      true: {
-        thumb: "bg-secondary-background"
-      },
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      defaultStepValue: true,
-      overStepValue: true,
-      class: {
-        dot: "bg-black"
-      }
-    },
-    {
-      hasStepOrDefault: true,
-      currentDefaultValue: true,
-      disabled: false,
-      class: {
-        thumb: "bg-white"
-      }
-    },
-    {
-      hasStepOrDefault: true,
-      currentDefaultValue: false,
-      disabled: false,
-      class: {
-        thumb: "bg-accent-background"
-      }
-    }
-  ],
-  defaultVariants: {
-    defaultStepValue: false,
-    overStepValue: false,
-    hasStepOrDefault: false,
-    currentDefaultValue: false,
-    disabled: false
-  }
-});
-exports.rangeTv = rangeTv;

package/dist/cjs/components/rich-input/src/components/block-button.cjs

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("react/jsx-runtime");
-const index = require("../../../icon-button/dist/index.cjs");
-const React = require("react");
-const slateReact = require("slate-react");
-const usehooksTs = require("usehooks-ts");
-const tv = require("../tv.cjs");
-const editorUtils = require("../utils/editor-utils.cjs");
-const tcx = require("../../../../shared/utils/tcx/tcx.cjs");
-const BlockButton = React.memo(function BlockButton2({
-  format,
-  children,
-  onClick,
-  ...rest
-}) {
-  const editor = slateReact.useSlate();
-  const isActive = editorUtils.isBlockActive(editor, format);
-  const handleOnClick = usehooksTs.useEventCallback((e) => {
-    editorUtils.toggleBlock(editor, format);
-    onClick == null ? void 0 : onClick(e);
-  });
-  return /* @__PURE__ */ require$$0.jsx(
-    index.IconButton,
-    {
-      tabIndex: -1,
-      variant: "dark",
-      active: isActive,
-      className: tcx.tcx(tv.buttonTv({ variant: "icon", active: isActive })),
-      onClick: handleOnClick,
-      ...rest,
-      children
-    }
-  );
-});
-exports.BlockButton = BlockButton;

package/dist/cjs/components/rich-input/src/components/characters-menu.cjs

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("react/jsx-runtime");
-const index$1 = require("../../../button/dist/index.cjs");
-const iconsReact = require("@choiceform/icons-react");
-const index = require("../../../text-field/dist/index.cjs");
-const React = require("react");
-const slate = require("slate");
-const slateReact = require("slate-react");
-const usehooksTs = require("usehooks-ts");
-const tv = require("../tv.cjs");
-const floatingMenuBase = require("./floating-menu-base.cjs");
-const formatButton = require("./format-button.cjs");
-const tcx = require("../../../../shared/utils/tcx/tcx.cjs");
-const UrlInput = ({
-  charactersUrl,
-  onChangeUrl,
-  onAddUrl,
-  onRemoveUrl,
-  isOpen,
-  i18n
-}) => /* @__PURE__ */ require$$0.jsxs("div", { className: tcx.tcx(tv.floatingMenuTv({ type: "url", expanded: isOpen })), children: [
-  /* @__PURE__ */ require$$0.jsx(
-    index.TextField,
-    {
-      variant: "dark",
-      placeholder: i18n.url.placeholder,
-      autoFocus: true,
-      value: charactersUrl,
-      onChange: onChangeUrl,
-      children: charactersUrl !== "" && /* @__PURE__ */ require$$0.jsx(index.TextField.Suffix, { children: /* @__PURE__ */ require$$0.jsx(
-        "button",
-        {
-          tabIndex: -1,
-          type: "button",
-          className: tcx.tcx(tv.buttonTv({ variant: "removeUrl" })),
-          onClick: onRemoveUrl,
-          children: /* @__PURE__ */ require$$0.jsx(iconsReact.RemoveTiny, {})
-        }
-      ) })
-    }
-  ),
-  /* @__PURE__ */ require$$0.jsx(
-    index$1.Button,
-    {
-      variant: "dark",
-      tabIndex: -1,
-      onClick: onAddUrl,
-      children: i18n.url.doneButton
-    }
-  )
-] });
-const CharactersMenu = React.memo(function CharactersMenu2(props) {
-  const {
-    isOpen,
-    editorInView,
-    portalElementId,
-    refs,
-    floatingStyles,
-    x,
-    y,
-    getFloatingProps,
-    charactersOptions,
-    switchUrlInput,
-    setSwitchUrlInput,
-    charactersUrl,
-    setCharactersUrl,
-    setIsCharactersStyleOpen,
-    placement,
-    i18n
-  } = props;
-  const editor = slateReact.useSlate();
-  const handleOnChangeUrl = usehooksTs.useEventCallback((value) => {
-    setCharactersUrl(value);
-  });
-  const handleAddUrl = usehooksTs.useEventCallback(() => {
-    slate.Editor.addMark(editor, "link", charactersUrl);
-    setSwitchUrlInput(false);
-    setIsCharactersStyleOpen(false);
-    setCharactersUrl("");
-  });
-  const handleRemoveUrl = usehooksTs.useEventCallback(() => {
-    setCharactersUrl("");
-    slate.Editor.removeMark(editor, "link");
-    setSwitchUrlInput(false);
-    setIsCharactersStyleOpen(false);
-  });
-  const handleSwitchUrlInput = usehooksTs.useEventCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setSwitchUrlInput(true);
-  });
-  if (!isOpen && !switchUrlInput || !editorInView) return null;
-  return /* @__PURE__ */ require$$0.jsx(
-    floatingMenuBase.FloatingMenuContainer,
-    {
-      portalElementId,
-      refs,
-      floatingStyles,
-      getFloatingProps,
-      style: {
-        transform: `translate(${x}px, ${y}px)`
-      },
-      onMouseDown: (e) => {
-        if (!switchUrlInput) {
-          e.preventDefault();
-        }
-      },
-      children: switchUrlInput ? /* @__PURE__ */ require$$0.jsx(
-        UrlInput,
-        {
-          charactersUrl,
-          onChangeUrl: handleOnChangeUrl,
-          onAddUrl: handleAddUrl,
-          onRemoveUrl: handleRemoveUrl,
-          isOpen,
-          i18n
-        }
-      ) : /* @__PURE__ */ require$$0.jsxs(
-        floatingMenuBase.MotionWrapper,
-        {
-          placement,
-          className: tcx.tcx(tv.floatingMenuTv({ type: "characters", expanded: isOpen })),
-          children: [
-            charactersOptions.map((item, index2) => /* @__PURE__ */ require$$0.jsx(
-              formatButton.FormatButton,
-              {
-                format: item.format,
-                children: item.icon
-              },
-              index2
-            )),
-            /* @__PURE__ */ require$$0.jsx(
-              formatButton.FormatButton,
-              {
-                tabIndex: -1,
-                onClick: handleSwitchUrlInput,
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                },
-                children: /* @__PURE__ */ require$$0.jsx(iconsReact.FieldTypeUrl, {})
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-});
-exports.CharactersMenu = CharactersMenu;