@choice-ui/react 1.8.7 → 1.8.9

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

@@ -0,0 +1,26 @@
+export interface RangeConnectsProps {
+    className?: string;
+}
+export declare const RangeConnects: import('react').ForwardRefExoticComponent<RangeConnectsProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface RangeContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+    height?: number;
+}
+export declare function RangeContainer(props: RangeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RangeContainer {
+    var displayName: string;
+}
+export interface RangeTupleConnectsProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export declare const RangeTupleConnects: import('react').ForwardRefExoticComponent<RangeTupleConnectsProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface RangeTupleContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+    height?: number;
+}
+export declare function RangeTupleContainer(props: RangeTupleContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RangeTupleContainer {
+    var displayName: string;
+}

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

@@ -0,0 +1,192 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useRangeContext } from "../context/range-context.js";
+import { useRangeTupleContext } from "../context/range-tuple-context.js";
+import { rangeTv } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const RangeConnects = forwardRef(
+  function RangeConnects2(props, ref) {
+    const { className } = props;
+    const { currentValue, disabled, min, transforms, thumbSize, trackHeight, tv } = useRangeContext();
+    const connectsStatus = useMemo(() => {
+      if (disabled) return "disabled";
+      if (currentValue < 0) return "negative";
+      return "positive";
+    }, [disabled, currentValue]);
+    const connectStyle = useMemo(() => {
+      return {
+        left: min < 0 ? currentValue < 0 ? `${transforms.transformX + thumbSize / 2}px` : "50%" : trackHeight / 2 + "px",
+        right: min < 0 ? currentValue >= 0 ? `calc(100% - ${transforms.transformX + thumbSize / 2}px)` : "50%" : `calc(100% - ${transforms.transformX + thumbSize / 2}px)`,
+        height: trackHeight
+      };
+    }, [min, currentValue, transforms.transformX, thumbSize, trackHeight]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.connect(), disabled && "bg-disabled-background", className),
+        "data-connect-status": connectsStatus,
+        style: connectStyle
+      }
+    );
+  }
+);
+RangeConnects.displayName = "RangeConnects";
+function RangeContainer(props) {
+  const { children, className, height: _height, ...rest } = props;
+  const {
+    currentValue,
+    step,
+    transforms,
+    thumbSize,
+    defaultStepValue,
+    dotsData,
+    defaultDotPosition,
+    defaultValue,
+    tv,
+    hasCustomDot,
+    hasCustomConnects
+  } = useRangeContext();
+  const hasStepOrDefault = step > 1 || defaultValue !== void 0;
+  const renderDots = () => {
+    if (dotsData) {
+      const { minTransform, maxTransform } = transforms;
+      return dotsData.map(({ value: dotValue, position: dotPosition }) => {
+        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;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hasCustomConnects && /* @__PURE__ */ jsx(
+      RangeConnects,
+      {
+        className: tcx(tv.connect(), className),
+        ...rest
+      }
+    ),
+    children,
+    hasStepOrDefault && !hasCustomDot && /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() })
+  ] });
+}
+RangeContainer.displayName = "RangeContainer";
+const RangeTupleConnects = forwardRef(
+  function RangeTupleConnects2(props, ref) {
+    const { className, ...rest } = props;
+    const { transforms, thumbSize, trackHeight, tv } = useRangeTupleContext();
+    const connectStyle = useMemo(() => {
+      return {
+        left: `${transforms.transformX0 + thumbSize / 2}px`,
+        right: `calc(100% - ${transforms.transformX1 + thumbSize / 2}px)`,
+        height: trackHeight
+      };
+    }, [transforms.transformX0, transforms.transformX1, thumbSize, trackHeight]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.connect(), className),
+        style: connectStyle,
+        ...rest
+      }
+    );
+  }
+);
+RangeTupleConnects.displayName = "RangeTupleConnects";
+function RangeTupleContainer(props) {
+  const { children, className, height: _height, ...rest } = props;
+  const {
+    currentValue,
+    step,
+    transforms,
+    thumbSize,
+    defaultStepValue,
+    dotsData,
+    defaultDotPositions,
+    normalizedDefaultValue,
+    tv,
+    hasCustomDot,
+    hasCustomConnects
+  } = useRangeTupleContext();
+  const hasStepOrDefault = step > 1 || normalizedDefaultValue !== void 0;
+  const renderDots = () => {
+    if (dotsData) {
+      const { minTransform, maxTransform } = transforms;
+      return dotsData.map(({ value: dotValue, position: dotPosition }) => {
+        const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
+        const isWithinRange = dotValue >= currentValue[0] && dotValue <= currentValue[1];
+        const isDefaultValue = defaultStepValue == null ? void 0 : defaultStepValue.includes(dotValue);
+        const { dot } = rangeTv({
+          defaultStepValue: isDefaultValue,
+          overStepValue: isWithinRange
+        });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: dot(),
+            style: {
+              left: dotTransform + thumbSize / 2
+            }
+          },
+          dotValue
+        );
+      });
+    }
+    if (defaultDotPositions) {
+      return defaultDotPositions.map((position, idx) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: rangeTv({ defaultStepValue: true }).dot(),
+          style: {
+            left: transforms.minTransform + position * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
+          }
+        },
+        `default-${idx}`
+      ));
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hasCustomConnects && /* @__PURE__ */ jsx(
+      RangeTupleConnects,
+      {
+        className: tcx(tv.connect(), className),
+        ...rest
+      }
+    ),
+    children,
+    hasStepOrDefault && !hasCustomDot && /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() })
+  ] });
+}
+RangeTupleContainer.displayName = "RangeTupleContainer";
+export {
+  RangeConnects,
+  RangeContainer,
+  RangeTupleConnects,
+  RangeTupleContainer
+};

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

@@ -0,0 +1,8 @@
+export interface RangeDotProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export interface RangeTupleDotProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export declare const RangeDot: import('react').ForwardRefExoticComponent<RangeDotProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const RangeTupleDot: import('react').ForwardRefExoticComponent<RangeTupleDotProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,148 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useRangeContext } from "../context/range-context.js";
+import { useRangeTupleContext } from "../context/range-tuple-context.js";
+import { rangeTv } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function getDotStatus(isOver, isDefault) {
+  if (isOver && isDefault) return "default-over";
+  if (isOver) return "over";
+  if (isDefault) return "default";
+  return "under";
+}
+const RangeDot = forwardRef(function RangeDot2(props, ref) {
+  const { className, ...rest } = props;
+  const {
+    currentValue,
+    step,
+    transforms,
+    thumbSize,
+    defaultStepValue,
+    dotsData,
+    defaultDotPosition,
+    defaultValue,
+    tv
+  } = useRangeContext();
+  const hasStepOrDefault = step > 1 || defaultValue !== void 0;
+  if (!hasStepOrDefault) {
+    return null;
+  }
+  const renderDots = () => {
+    if (dotsData) {
+      const { minTransform, maxTransform } = transforms;
+      return dotsData.map(({ value: dotValue, position: dotPosition }, idx) => {
+        const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
+        const isDefault = defaultStepValue === dotValue;
+        const isOver = dotValue <= currentValue;
+        const { dot } = rangeTv({
+          defaultStepValue: isDefault,
+          overStepValue: isOver
+        });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: idx === 0 ? ref : void 0,
+            className: tcx(dot(), className),
+            "data-status": getDotStatus(isOver, isDefault),
+            style: {
+              left: dotTransform + thumbSize / 2
+            },
+            ...rest
+          },
+          dotValue
+        );
+      });
+    }
+    if (defaultDotPosition !== null && defaultDotPosition !== void 0 && defaultStepValue) {
+      const isOver = defaultStepValue <= currentValue;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: tcx(rangeTv({ defaultStepValue: true }).dot(), className),
+          "data-status": isOver ? "over" : "default",
+          style: {
+            left: transforms.minTransform + defaultDotPosition * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
+          },
+          ...rest
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() });
+});
+RangeDot.displayName = "RangeDot";
+const RangeTupleDot = forwardRef(
+  function RangeTupleDot2(props, ref) {
+    const { className, ...rest } = props;
+    const {
+      currentValue,
+      step,
+      transforms,
+      thumbSize,
+      defaultStepValue,
+      dotsData,
+      defaultDotPositions,
+      normalizedDefaultValue,
+      tv
+    } = useRangeTupleContext();
+    const hasStepOrDefault = step > 1 || normalizedDefaultValue !== void 0;
+    if (!hasStepOrDefault) {
+      return null;
+    }
+    const renderDots = () => {
+      if (dotsData) {
+        const { minTransform, maxTransform } = transforms;
+        return dotsData.map(({ value: dotValue, position: dotPosition }, idx) => {
+          const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
+          const isWithinRange = dotValue >= currentValue[0] && dotValue <= currentValue[1];
+          const isDefaultValue = defaultStepValue == null ? void 0 : defaultStepValue.includes(dotValue);
+          const { dot } = rangeTv({
+            defaultStepValue: isDefaultValue,
+            overStepValue: isWithinRange
+          });
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: idx === 0 ? ref : void 0,
+              className: tcx(dot(), className),
+              "data-status": getDotStatus(isWithinRange, !!isDefaultValue),
+              "data-position": idx === 0 ? "left" : "right",
+              style: {
+                left: dotTransform + thumbSize / 2
+              },
+              ...rest
+            },
+            dotValue
+          );
+        });
+      }
+      if (defaultDotPositions && defaultStepValue) {
+        const leftIsOver = defaultStepValue[0] >= currentValue[0];
+        const rightIsOver = defaultStepValue[1] <= currentValue[1];
+        return defaultDotPositions.map((position, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: idx === 0 ? ref : void 0,
+            className: tcx(rangeTv({ defaultStepValue: true }).dot(), className),
+            "data-status": leftIsOver && idx === 0 ? "left-over" : rightIsOver && idx === 1 ? "right-over" : "default",
+            "data-position": idx === 0 ? "left" : "right",
+            style: {
+              left: transforms.minTransform + position * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
+            },
+            ...rest
+          },
+          `default-${idx}`
+        ));
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() });
+  }
+);
+RangeTupleDot.displayName = "RangeTupleDot";
+export {
+  RangeDot,
+  RangeTupleDot
+};

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface RangeThumbProps {
+    className?: string;
+    size?: number;
+}
+export declare const RangeThumb: React.ForwardRefExoticComponent<RangeThumbProps & React.RefAttributes<HTMLDivElement>>;
+type ThumbIndex = 0 | 1;
+export interface RangeTupleThumbProps {
+    className?: string;
+    size?: number;
+    index: ThumbIndex;
+}
+export declare const RangeTupleThumb: React.ForwardRefExoticComponent<RangeTupleThumbProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,159 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useRangeContext } from "../context/range-context.js";
+import { useRangeTupleContext } from "../context/range-tuple-context.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const BaseThumb = forwardRef(function BaseThumb2(props, ref) {
+  const {
+    className,
+    thumbRef,
+    inputRef,
+    thumbSize,
+    transformX,
+    isDragging,
+    disabled,
+    readOnly,
+    tv,
+    thumbTv,
+    onPointerDown,
+    onKeyDown,
+    isDefaultValue
+  } = props;
+  const thumbStyle = useMemo(
+    () => ({
+      width: thumbSize,
+      height: thumbSize,
+      transform: `translate(${transformX}px, -50%)`,
+      willChange: isDragging ? "transform" : "auto"
+    }),
+    [thumbSize, transformX, isDragging]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        if (thumbRef && "current" in thumbRef) {
+          thumbRef.current = node;
+        }
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      onPointerDown,
+      className: tv.thumbWrapper(),
+      style: thumbStyle,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: tcx(thumbTv.thumb(), className),
+          "data-status": isDefaultValue ? "default" : void 0,
+          children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (node) => {
+                if (inputRef && "current" in inputRef) {
+                  inputRef.current = node;
+                }
+              },
+              type: "text",
+              onKeyDown,
+              className: tv.input(),
+              tabIndex: disabled || readOnly ? -1 : 0,
+              readOnly: true
+            }
+          )
+        }
+      )
+    }
+  );
+});
+const RangeThumb = forwardRef(
+  function RangeThumb2(props, ref) {
+    const { className, size: _size } = props;
+    const {
+      disabled,
+      readOnly,
+      transforms,
+      thumbSize,
+      thumbRef,
+      inputRef,
+      isDragging,
+      isDefaultValue,
+      handlePointerDown,
+      handleKeyDown,
+      tv
+    } = useRangeContext();
+    return /* @__PURE__ */ jsx(
+      BaseThumb,
+      {
+        ref,
+        className,
+        thumbRef,
+        inputRef,
+        thumbSize,
+        transformX: transforms.transformX,
+        isDragging: isDragging.current,
+        disabled,
+        readOnly,
+        tv,
+        thumbTv: tv,
+        onPointerDown: handlePointerDown,
+        onKeyDown: handleKeyDown,
+        isDefaultValue
+      }
+    );
+  }
+);
+RangeThumb.displayName = "RangeThumb";
+const RangeTupleThumb = forwardRef(
+  function RangeTupleThumb2(props, ref) {
+    const { className, size: _size, index } = props;
+    const {
+      disabled,
+      readOnly,
+      transforms,
+      thumbSize,
+      thumb0Ref,
+      thumb1Ref,
+      input0Ref,
+      input1Ref,
+      isDragging,
+      isDefaultValue,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      thumbTv0,
+      thumbTv1
+    } = useRangeTupleContext();
+    const thumbRef = index === 0 ? thumb0Ref : thumb1Ref;
+    const inputRef = index === 0 ? input0Ref : input1Ref;
+    const thumbTv = index === 0 ? thumbTv0 : thumbTv1;
+    const transformX = index === 0 ? transforms.transformX0 : transforms.transformX1;
+    return /* @__PURE__ */ jsx(
+      BaseThumb,
+      {
+        ref,
+        className,
+        thumbRef,
+        inputRef,
+        thumbSize,
+        transformX,
+        isDragging: isDragging.current === index,
+        disabled,
+        readOnly,
+        tv,
+        thumbTv,
+        onPointerDown: (e) => handlePointerDown(e, index),
+        onKeyDown: (e) => handleKeyDown(e, index),
+        isDefaultValue
+      }
+    );
+  }
+);
+RangeTupleThumb.displayName = "RangeTupleThumb";
+export {
+  RangeThumb,
+  RangeTupleThumb
+};

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

@@ -0,0 +1,4 @@
+export { RangeContext, useRangeContext } from './range-context';
+export type { RangeContextValue } from './range-context';
+export { RangeTupleContext, useRangeTupleContext } from './range-tuple-context';
+export type { RangeTupleContextValue } from './range-tuple-context';

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

@@ -0,0 +1,35 @@
+import { rangeTv } from '../tv';
+export interface RangeContextValue {
+    currentValue: number;
+    disabled: boolean;
+    readOnly: boolean;
+    min: number;
+    max: number;
+    step: number;
+    thumbSize: number;
+    trackHeight: number;
+    transforms: {
+        minTransform: number;
+        maxTransform: number;
+        transformX: number;
+    };
+    defaultStepValue: number | null;
+    currentStepValue: number;
+    dotsData: Array<{
+        value: number;
+        position: number;
+    }> | null;
+    defaultDotPosition: number | null;
+    thumbRef: React.MutableRefObject<HTMLDivElement | null>;
+    inputRef: React.MutableRefObject<HTMLInputElement | null>;
+    isDragging: React.MutableRefObject<boolean>;
+    handlePointerDown: (e: React.PointerEvent) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    tv: ReturnType<typeof rangeTv>;
+    defaultValue?: number;
+    hasCustomDot: boolean;
+    hasCustomConnects: boolean;
+    isDefaultValue?: boolean;
+}
+export declare const RangeContext: import('react').Context<RangeContextValue | null>;
+export declare function useRangeContext(): RangeContextValue;

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const RangeContext = createContext(null);
+function useRangeContext() {
+  const context = useContext(RangeContext);
+  if (!context) {
+    throw new Error("Range.Connects and Range.Thumb must be used within a Range component");
+  }
+  return context;
+}
+export {
+  RangeContext,
+  useRangeContext
+};

package/dist/components/range/src/context/range-tuple-context.d.ts

@@ -0,0 +1,42 @@
+import { rangeTv } from '../tv';
+type ThumbIndex = 0 | 1;
+export interface RangeTupleContextValue {
+    currentValue: [number, number];
+    disabled: boolean;
+    readOnly: boolean;
+    min: number;
+    max: number;
+    step: number;
+    thumbSize: number;
+    trackHeight: number;
+    transforms: {
+        minTransform: number;
+        maxTransform: number;
+        transformX0: number;
+        transformX1: number;
+    };
+    defaultStepValue: [number, number] | null;
+    currentStepValue: [number, number];
+    dotsData: Array<{
+        value: number;
+        position: number;
+    }> | null;
+    defaultDotPositions: [number, number] | null;
+    normalizedDefaultValue: [number, number] | undefined;
+    thumb0Ref: React.RefObject<HTMLDivElement | null>;
+    thumb1Ref: React.RefObject<HTMLDivElement | null>;
+    input0Ref: React.RefObject<HTMLInputElement | null>;
+    input1Ref: React.RefObject<HTMLInputElement | null>;
+    isDragging: React.MutableRefObject<ThumbIndex | null>;
+    handlePointerDown: (e: React.PointerEvent, thumbIndex: ThumbIndex) => void;
+    handleKeyDown: (e: React.KeyboardEvent, thumbIndex: ThumbIndex) => void;
+    tv: ReturnType<typeof rangeTv>;
+    thumbTv0: ReturnType<typeof rangeTv>;
+    thumbTv1: ReturnType<typeof rangeTv>;
+    hasCustomDot: boolean;
+    hasCustomConnects: boolean;
+    isDefaultValue?: boolean;
+}
+export declare const RangeTupleContext: import('react').Context<RangeTupleContextValue | null>;
+export declare function useRangeTupleContext(): RangeTupleContextValue;
+export {};

package/dist/components/range/src/context/range-tuple-context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+const RangeTupleContext = createContext(null);
+function useRangeTupleContext() {
+  const context = useContext(RangeTupleContext);
+  if (!context) {
+    throw new Error(
+      "RangeTuple.Connects and RangeTuple.Thumb must be used within a RangeTuple component"
+    );
+  }
+  return context;
+}
+export {
+  RangeTupleContext,
+  useRangeTupleContext
+};

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

@@ -1,4 +1,6 @@
 export { Range } from './range';
 export { RangeTuple } from './range-tuple';
-export type { RangeProps } from './range';
-export type { RangeTupleProps } from './range-tuple';
+export { RangeContext, RangeTupleContext, useRangeContext, useRangeTupleContext } from './context';
+export type { RangeContextValue, RangeTupleContextValue } from './context';
+export type { RangeConnectsProps, RangeContainerProps, RangeDotProps, RangeProps, RangeThumbProps, } from './range';
+export type { RangeTupleConnectsProps, RangeTupleContainerProps, RangeTupleDotProps, RangeTupleProps, RangeTupleThumbProps, } from './range-tuple';