@choice-ui/react 1.8.7 → 1.8.8

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

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
+import { RangeConnects, RangeConnectsProps, RangeContainer, RangeContainerProps } from './components/connects';
+import { RangeThumb, RangeThumbProps } from './components/thumb';
+import { RangeDot, RangeDotProps } from './components/dot';
 export interface RangeProps {
+    children?: React.ReactNode;
     className?: string;
-    connectsClassName?: {
-        negative?: string;
-        positive?: string;
-    };
     defaultValue?: number;
     disabled?: boolean;
     max?: number;
@@ -15,10 +15,18 @@ export interface RangeProps {
     readOnly?: boolean;
     step?: number;
     thumbSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number | "auto";
-    };
     value?: number;
+    /**
+     * Width of the range track in pixels.
+     * If not provided (undefined), the width will be auto-calculated from the container.
+     */
+    width?: number | boolean;
 }
-export declare const Range: React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLDivElement>>;
+interface RangeComponent extends React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLDivElement>> {
+    Container: typeof RangeContainer;
+    Connects: typeof RangeConnects;
+    Thumb: typeof RangeThumb;
+    Dot: typeof RangeDot;
+}
+export declare const Range: RangeComponent;
+export type { RangeContainerProps, RangeConnectsProps, RangeThumbProps, RangeDotProps };

package/dist/components/range/src/range.js

@@ -1,13 +1,18 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { clamp } from "es-toolkit";
-import { forwardRef, useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { forwardRef, useMemo, Children, isValidElement, useState, useCallback, useRef, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
+import { RangeConnects, RangeContainer } from "./components/connects.js";
+import { RangeThumb } from "./components/thumb.js";
+import { RangeDot } from "./components/dot.js";
 import { rangeTv } from "./tv.js";
+import { RangeContext } from "./context/range-context.js";
 import { useIsomorphicLayoutEffect } from "../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
-const Range = forwardRef(function Range2(props, ref) {
+const RangeRoot = forwardRef(function Range2(props, ref) {
   const {
+    children,
     defaultValue,
     value,
     onChange,
@@ -19,52 +24,82 @@ const Range = forwardRef(function Range2(props, ref) {
     disabled = false,
     readOnly = false,
     className,
-    connectsClassName = {
-      positive: "bg-accent-background",
-      negative: "bg-accent-background"
-    },
-    trackSize = {
-      width: 256,
-      height: 16
-    },
-    thumbSize = 14
+    width: propsWidth = 256,
+    thumbSize: propsThumbSize = 14
   } = props;
+  const {
+    hasCustomChildren,
+    hasCustomDot,
+    hasCustomConnects,
+    extractedThumbSize,
+    extractedTrackHeight
+  } = useMemo(() => {
+    const childArray = Children.toArray(children);
+    let hasCustom = false;
+    let hasDot = false;
+    let hasConnects = false;
+    let thumbSizeFromChild;
+    let trackHeightFromChild;
+    for (const child of childArray) {
+      if (isValidElement(child)) {
+        const type = child.type;
+        if (child.type === RangeThumb || (type == null ? void 0 : type.displayName) === "RangeThumb") {
+          hasCustom = true;
+          const childProps = child.props;
+          if (childProps.size !== void 0) {
+            thumbSizeFromChild = childProps.size;
+          }
+        } else if (child.type === RangeContainer || (type == null ? void 0 : type.displayName) === "RangeContainer") {
+          hasCustom = true;
+          const childProps = child.props;
+          if (childProps.height !== void 0) {
+            trackHeightFromChild = childProps.height;
+          }
+        } else if (child.type === RangeConnects || (type == null ? void 0 : type.displayName) === "RangeConnects") {
+          hasCustom = true;
+          hasConnects = true;
+        } else if (child.type === RangeDot || (type == null ? void 0 : type.displayName) === "RangeDot") {
+          hasCustom = true;
+          hasDot = true;
+        }
+      }
+    }
+    return {
+      hasCustomChildren: hasCustom,
+      hasCustomDot: hasDot,
+      hasCustomConnects: hasConnects,
+      extractedThumbSize: thumbSizeFromChild,
+      extractedTrackHeight: trackHeightFromChild
+    };
+  }, [children]);
+  const thumbSize = extractedThumbSize ?? propsThumbSize;
+  const trackHeight = extractedTrackHeight ?? 16;
+  const safeStep = step > 0 ? step : 1;
+  const range = max - min || 1;
   const [actualTrackWidth, setActualTrackWidth] = useState();
-  const valueToPosition = useCallback((val) => (val - min) / (max - min), [min, max]);
-  const positionToValue = useCallback(
-    (position) => min + position * (max - min),
-    [min, max]
-  );
+  const valueToPosition = useCallback((val) => (val - min) / range, [min, range]);
+  const positionToValue = useCallback((position) => min + position * range, [min, range]);
   const defaultStepValue = useMemo(() => {
     if (defaultValue === void 0 || defaultValue === null) return null;
-    if (step > 1) {
-      return Math.round((defaultValue - min) / step) * step + min;
+    if (safeStep > 1) {
+      return Math.round((defaultValue - min) / safeStep) * safeStep + min;
     }
     return defaultValue;
-  }, [defaultValue, step, min]);
+  }, [defaultValue, safeStep, min]);
   const sliderRef = useRef(null);
   const thumbRef = useRef(null);
   const inputRef = useRef(null);
   const isDragging = useRef(false);
+  const cleanupRef = useRef(null);
   const [internalValue, setInternalValue] = useState(value ?? min);
   const currentValue = value ?? internalValue;
   const currentStepValue = useMemo(
-    () => step > 1 ? Math.round(currentValue / step) * step : currentValue,
-    [currentValue, step]
+    () => safeStep > 1 ? Math.round(currentValue / safeStep) * safeStep : currentValue,
+    [currentValue, safeStep]
   );
-  const [transforms, setTransforms] = useState({
-    minTransform: 1,
-    maxTransform: 0,
-    transformX: 0
-  });
-  const trackWidth = 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]);
+  const trackWidth = typeof propsWidth === "number" ? propsWidth : actualTrackWidth;
   useIsomorphicLayoutEffect(() => {
-    if ((trackSize == null ? void 0 : trackSize.width) === "auto" && sliderRef.current) {
+    if (typeof propsWidth !== "number" && sliderRef.current) {
       const updateWidth = () => {
         if (sliderRef.current) {
           const width = sliderRef.current.getBoundingClientRect().width;
@@ -82,43 +117,39 @@ const Range = forwardRef(function Range2(props, ref) {
         resizeObserver.disconnect();
       };
     }
-  }, [trackSize == null ? void 0 : trackSize.width]);
-  useEffect(() => {
+  }, [propsWidth]);
+  const transforms = useMemo(() => {
     const position = valueToPosition(currentValue);
     const minTransform = 1;
-    const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
+    const maxTransform = (typeof trackWidth === "number" ? trackWidth : 0) - thumbSize - 1;
     const transformX = minTransform + position * (maxTransform - minTransform);
-    setTransforms({
-      minTransform,
-      maxTransform,
-      transformX
-    });
+    return { minTransform, maxTransform, transformX };
   }, [currentValue, trackWidth, thumbSize, valueToPosition]);
   const dotsData = useMemo(() => {
-    if (!step || step <= 1) return null;
-    return Array.from({ length: Math.ceil((max - min) / step) + 1 }, (_, i) => {
-      const dotValue = min + i * step;
+    if (safeStep <= 1) return null;
+    return Array.from({ length: Math.ceil((max - min) / safeStep) + 1 }, (_, i) => {
+      const dotValue = min + i * safeStep;
       const dotPosition = valueToPosition(dotValue);
       return {
         value: dotValue,
         position: dotPosition
       };
     });
-  }, [step, min, max, valueToPosition]);
+  }, [safeStep, min, max, valueToPosition]);
   const defaultDotPosition = useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null || step > 1) return null;
+    if (defaultValue === void 0 || defaultValue === null || safeStep > 1) return null;
     return valueToPosition(defaultValue);
-  }, [defaultValue, step, valueToPosition]);
+  }, [defaultValue, safeStep, valueToPosition]);
   const updatePosition = useEventCallback((clientX, isEnd) => {
     var _a;
     if (readOnly) return;
     const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
     if (!rect) return;
     const newPosition = clamp((clientX - rect.left) / rect.width, 0, 1);
-    const newValue = Math.round(positionToValue(newPosition) / step) * step;
+    const newValue = Math.round(positionToValue(newPosition) / safeStep) * safeStep;
     let clampedValue = clamp(newValue, min, max);
-    if (defaultValue !== void 0 && defaultValue !== null && step === 1) {
-      const snapThreshold = (max - min) * 0.05;
+    if (defaultValue !== void 0 && defaultValue !== null && safeStep <= 1) {
+      const snapThreshold = range * 0.05;
       const distanceToDefault = Math.abs(clampedValue - defaultValue);
       if (distanceToDefault <= snapThreshold) {
         clampedValue = defaultValue;
@@ -155,6 +186,12 @@ const Range = forwardRef(function Range2(props, ref) {
         e2.preventDefault();
         updatePosition(e2.clientX);
       };
+      const cleanup = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+        cleanupRef.current = null;
+      };
       const handleUp = (e2) => {
         if (!isDragging.current) return;
         e2.preventDefault();
@@ -164,16 +201,21 @@ const Range = forwardRef(function Range2(props, ref) {
         updatePosition(e2.clientX, true);
         isDragging.current = false;
         onChangeEnd == null ? void 0 : onChangeEnd();
-        window.removeEventListener("pointermove", handleMove);
-        window.removeEventListener("pointerup", handleUp);
-        window.removeEventListener("pointercancel", handleUp);
+        cleanup();
       };
+      cleanupRef.current = cleanup;
       window.addEventListener("pointermove", handleMove);
       window.addEventListener("pointerup", handleUp);
       window.addEventListener("pointercancel", handleUp);
     },
     [disabled, readOnly, onChangeEnd, onChangeStart, updatePosition]
   );
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+    };
+  }, []);
   const handleSliderPointerDown = useCallback(
     (e) => {
       if (disabled || readOnly || e.target === thumbRef.current) return;
@@ -183,7 +225,7 @@ const Range = forwardRef(function Range2(props, ref) {
   );
   const handleKeyDown = useEventCallback((e) => {
     if (disabled || readOnly) return;
-    const stepValue = e.shiftKey ? step * 10 : step;
+    const stepValue = e.shiftKey ? safeStep * 10 : safeStep;
     let newValue = currentValue;
     switch (e.key) {
       case "ArrowLeft":
@@ -209,120 +251,88 @@ const Range = forwardRef(function Range2(props, ref) {
       (_a = inputRef.current) == null ? void 0 : _a.blur();
     }
   }, [disabled]);
+  const hasStepOrDefault = safeStep > 1 || defaultValue !== void 0;
   const tv = useMemo(
     () => rangeTv({
       currentDefaultValue: defaultStepValue === currentStepValue,
-      hasStepOrDefault: step > 1 || defaultValue !== void 0,
+      hasStepOrDefault,
       disabled
     }),
-    [defaultStepValue, currentStepValue, step, defaultValue, disabled]
+    [defaultStepValue, currentStepValue, hasStepOrDefault, disabled]
   );
-  const connectsClass = useMemo(() => {
-    if (disabled) return "bg-disabled-background";
-    if (currentValue < 0) return connectsClassName.negative;
-    return connectsClassName.positive;
-  }, [disabled, currentValue, connectsClassName]);
-  const connectStyle = 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 = useCallback(() => {
-    if (dotsData) {
-      return dotsData.map(({ value: dotValue, position: dotPosition }) => {
-        const { minTransform, maxTransform } = transforms;
-        const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
-        const { dot } = rangeTv({
-          defaultStepValue: defaultStepValue === dotValue,
-          overStepValue: dotValue <= currentValue
-        });
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: dot(),
-            style: {
-              left: dotTransform + thumbSize / 2
-            }
-          },
-          dotValue
-        );
-      });
-    }
-    if (defaultDotPosition !== null && defaultDotPosition !== void 0) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: rangeTv({ defaultStepValue: true }).dot(),
-          style: {
-            left: transforms.minTransform + defaultDotPosition * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
-          }
-        }
-      );
-    }
-    return null;
-  }, [dotsData, defaultDotPosition, transforms, defaultStepValue, currentValue, thumbSize]);
-  useEffect(() => {
-    const noop = () => {
-    };
-    return () => {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("pointermove", noop);
-        window.removeEventListener("pointerup", noop);
-        window.removeEventListener("pointercancel", noop);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(
+  const contextValue = useMemo(
+    () => ({
+      currentValue,
+      disabled,
+      readOnly,
+      min,
+      max,
+      step: safeStep,
+      thumbSize,
+      trackHeight,
+      transforms,
+      defaultStepValue,
+      currentStepValue,
+      dotsData,
+      defaultDotPosition,
+      thumbRef,
+      inputRef,
+      isDragging,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      defaultValue,
+      hasCustomDot,
+      hasCustomConnects,
+      isDefaultValue: defaultStepValue === currentStepValue && hasStepOrDefault
+    }),
+    [
+      currentValue,
+      disabled,
+      readOnly,
+      min,
+      max,
+      safeStep,
+      thumbSize,
+      trackHeight,
+      transforms,
+      defaultStepValue,
+      currentStepValue,
+      dotsData,
+      defaultDotPosition,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      defaultValue,
+      hasCustomDot,
+      hasCustomConnects
+    ]
+  );
+  return /* @__PURE__ */ jsx(RangeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: mergeRefs(sliderRef, ref),
       onPointerDown: handleSliderPointerDown,
       className: tcx(tv.container(), className),
       style: {
-        "--width": `${trackWidth}px`,
-        "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
+        "--width": `${typeof trackWidth === "number" ? trackWidth : actualTrackWidth}px`,
+        "--height": `${trackHeight}px`,
+        "--thumb-size": `${thumbSize}px`
       },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: tcx(tv.connect(), connectsClass),
-            style: connectStyle
-          }
-        ),
-        step > 1 || defaultValue !== void 0 ? /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() }) : "",
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: thumbRef,
-            onPointerDown: handlePointerDown,
-            className: tv.thumb(),
-            style: {
-              width: thumbSize,
-              height: thumbSize,
-              transform: `translate(${transforms.transformX}px, -50%)`,
-              willChange: isDragging.current ? "transform" : "auto"
-            },
-            children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                onKeyDown: handleKeyDown,
-                className: tv.input(),
-                tabIndex: disabled || readOnly ? -1 : 0,
-                readOnly: true
-              }
-            )
-          }
-        )
-      ]
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(RangeContainer, {}),
+        /* @__PURE__ */ jsx(RangeThumb, {})
+      ] })
     }
-  );
+  ) });
+});
+RangeRoot.displayName = "Range";
+const Range = Object.assign(RangeRoot, {
+  Container: RangeContainer,
+  Connects: RangeConnects,
+  Thumb: RangeThumb,
+  Dot: RangeDot
 });
-Range.displayName = "Range";
 export {
   Range
 };

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

@@ -22,13 +22,17 @@ export declare const rangeTv: import('tailwind-variants').TVReturnType<{
     };
     disabled: {
         true: {
+            connect: string;
             thumb: string;
         };
-        false: {};
+        false: {
+            connect: string;
+        };
     };
 }, {
     container: string[];
     connect: string[];
+    thumbWrapper: string[];
     thumb: string[];
     dotContainer: string;
     dot: string[];
@@ -57,13 +61,17 @@ export declare const rangeTv: import('tailwind-variants').TVReturnType<{
     };
     disabled: {
         true: {
+            connect: string;
             thumb: string;
         };
-        false: {};
+        false: {
+            connect: string;
+        };
     };
 }, {
     container: string[];
     connect: string[];
+    thumbWrapper: string[];
     thumb: string[];
     dotContainer: string;
     dot: string[];
@@ -92,13 +100,17 @@ export declare const rangeTv: import('tailwind-variants').TVReturnType<{
     };
     disabled: {
         true: {
+            connect: string;
             thumb: string;
         };
-        false: {};
+        false: {
+            connect: string;
+        };
     };
 }, {
     container: string[];
     connect: string[];
+    thumbWrapper: string[];
     thumb: string[];
     dotContainer: string;
     dot: string[];

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

@@ -7,19 +7,19 @@ const rangeTv = tcv({
       "bg-secondary-background shadow-inset-border rounded-full"
     ],
     connect: [
-      "pointer-events-none absolute",
+      "pointer-events-none absolute h-(--height)",
       "after:absolute",
       "after:content-['']",
       "after:rounded-full",
-      "after:bg-inherit",
-      "after:h-[var(--height)]",
+      "after:[background:inherit]",
+      "after:h-[inherit]",
       "after:left-[calc(var(--height)/-2)]",
       "after:right-[calc(var(--height)/-2)]"
     ],
+    thumbWrapper: ["absolute top-1/2 box-border origin-center z-2"],
     thumb: [
-      "absolute top-1/2 box-border origin-center rounded-full",
-      "shadow-range-thumb border-2 border-white",
-      "bg-white"
+      "shadow-range-thumb border-2 border-white rounded-full size-(--thumb-size)",
+      "bg-white absolute -translate-y-1/2 -translate-x-1/2 left-1/2 top-1/2"
     ],
     dotContainer: "pointer-events-none absolute inset-0",
     dot: ["size-1 rounded-full", "absolute top-1/2", "-translate-x-1/2 -translate-y-1/2"],
@@ -49,9 +49,12 @@ const rangeTv = tcv({
     },
     disabled: {
       true: {
+        connect: "bg-disabled-background",
         thumb: "bg-secondary-background"
       },
-      false: {}
+      false: {
+        connect: "bg-accent-background"
+      }
     }
   },
   compoundVariants: [

package/dist/components/textarea/dist/index.js

@@ -507,7 +507,9 @@ var TextareaTv = tcv({
         container: "bg-gray-700",
         textarea: "text-white placeholder:text-white/40"
       },
-      reset: {}
+      reset: {
+        container: "rounded-none border-0"
+      }
     },
     resize: {
       auto: {},

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

@@ -10,6 +10,7 @@ interface TooltipProps {
     className?: string;
     content?: React.ReactNode;
     disabled?: boolean;
+    interactive?: boolean;
     offset?: number;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
@@ -23,6 +24,7 @@ interface TooltipProps {
     withArrow?: boolean;
 }
 interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
+    interactive?: boolean;
     portalId?: string;
     variant?: "default" | "light";
     withArrow?: boolean;

package/dist/components/tooltip/dist/index.js

@@ -128,7 +128,15 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
 });
 var TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
-    const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
+    const {
+      className,
+      withArrow = true,
+      variant = "default",
+      children,
+      portalId,
+      interactive = true,
+      ...rest
+    } = props;
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
     const { isInstantPhase, currentId } = useDelayGroup(state.context, {
@@ -157,19 +165,27 @@ var TooltipContent = forwardRef(
     });
     const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
     if (state.disabled || !isMounted) return null;
+    const floatingProps = state.getFloatingProps(rest);
     return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        style: state.floatingStyles,
-        ...state.getFloatingProps(rest),
+        style: {
+          ...state.floatingStyles,
+          pointerEvents: interactive ? void 0 : "none"
+        },
+        ...floatingProps,
         className: "z-tooltip",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: tcx(tv.root({ className })),
             "data-state": state.open ? "open" : "closed",
-            style: styles,
+            style: {
+              ...styles,
+              pointerEvents: interactive ? void 0 : "none",
+              cursor: interactive ? void 0 : "default"
+            },
             children: [
               children,
               withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
@@ -272,7 +288,8 @@ function TooltipRoot(props) {
     withArrow = true,
     variant = "default",
     offset: offset2 = 8,
-    portalId = PORTAL_ROOT_ID
+    portalId = PORTAL_ROOT_ID,
+    interactive = true
   } = props;
   const tooltip = useTooltip({
     placement,
@@ -291,6 +308,7 @@ function TooltipRoot(props) {
           variant,
           portalId,
           className,
+          interactive,
           children: [
             content,
             shortcut && /* @__PURE__ */ jsx(