@choice-ui/react 1.4.2 → 1.4.5

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

@@ -1,5 +1,5 @@
 import { ModalHeaderProps, ModalContent, ModalFooter } from '../../modal/src';
-import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
+import { FloatingFocusManagerProps, OffsetOptions, Placement } from '@floating-ui/react';
 import { default as react__default } from 'react';
 import * as react from 'react';
 
@@ -23,14 +23,10 @@ interface PopoverProps {
     };
     draggable?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;
-    /**
-     * @deprecated use focusManagerProps.initialFocus instead
-     */
-    initialFocus?: number | react__default.MutableRefObject<HTMLElement | null>;
     interactions?: "hover" | "click" | "focus" | "none";
     matchTriggerWidth?: boolean;
     maxWidth?: number;
-    offset?: number;
+    offset?: OffsetOptions;
     onOpenChange?: (isOpen: boolean) => void;
     open?: boolean;
     outsidePressIgnore?: string | string[] | boolean;
@@ -45,7 +41,6 @@ interface PopoverProps {
     root?: HTMLElement | null;
     triggerRef?: react__default.RefObject<HTMLElement>;
 }
-declare const DragPopover: react__default.NamedExoticComponent<PopoverProps>;
 interface PopoverComponent extends react__default.FC<PopoverProps> {
     Content: typeof ModalContent;
     Footer: typeof ModalFooter;
@@ -54,4 +49,4 @@ interface PopoverComponent extends react__default.FC<PopoverProps> {
 }
 declare const Popover: PopoverComponent;
 
-export { DragPopover, Popover, type PopoverProps };
+export { Popover, type PopoverProps };

package/dist/components/popover/dist/index.js

@@ -18,7 +18,7 @@ var usePopoverContext = () => {
 };
 var PopoverHeader = memo(
   forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
+    const { children, ...rest } = props;
     const { titleId, onCloseClick } = usePopoverContext();
     return /* @__PURE__ */ jsx(
       ModalHeader,
@@ -202,7 +202,7 @@ function useFloatingPopover({
   defaultOpen,
   onOpenChange,
   placement = "bottom",
-  offset: offsetDistance = 8,
+  offset: offsetDistance = { mainAxis: 8, crossAxis: 0 },
   interactions = "click",
   outsidePressIgnore,
   delay,
@@ -215,7 +215,10 @@ function useFloatingPopover({
   rememberPosition = false,
   autoSize = true,
   maxWidth: maxWidthValue = 320,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  transitionStylesProps = {
+    duration: 0
+  }
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const positionRef = useRef({ x: 0, y: 0 });
@@ -269,7 +272,7 @@ function useFloatingPopover({
   const { refs, floatingStyles, context, x, y, isPositioned } = useFloating({
     nodeId,
     open: innerOpen,
-    // 直接传递状态
+    // Pass state directly
     onOpenChange: handleOpenChange,
     placement,
     middleware,
@@ -288,9 +291,9 @@ function useFloatingPopover({
   });
   const click = useClick(context, {
     enabled: interactions === "click",
-    // 🔧 使用 mousedown 事件而不是 click，提前处理，避免与 dismiss 冲突
+    // Use mousedown event instead of click, handle early, avoid conflict with dismiss
     event: "mousedown",
-    // 🔧 如果已经有其他 Popover 打开，点击时保持逻辑一致
+    // If another Popover is already open, keep logic consistent when clicking
     stickIfOpen: false
   });
   const focus = useFocus(context, {
@@ -333,12 +336,19 @@ function useFloatingPopover({
   ]);
   const getStyles = useCallback(
     (dragPosition, isDragging) => {
-      const transform = dragPosition && draggable ? `translate(${dragPosition.x}px, ${dragPosition.y}px)` : `translate(${x}px, ${y}px)`;
+      if (dragPosition && draggable) {
+        return {
+          ...floatingStyles,
+          position: "fixed",
+          top: `${dragPosition.y}px`,
+          left: `${dragPosition.x}px`,
+          transform: "none",
+          transition: isDragging ? "none" : floatingStyles.transition
+        };
+      }
       return {
         ...floatingStyles,
-        transform,
-        // 仅在拖拽功能开启且正在拖拽时禁用过渡动画
-        transition: draggable && isDragging ? "none" : floatingStyles.transition
+        transform: `translate(${x}px, ${y}px)`
       };
     },
     [floatingStyles, x, y, draggable]
@@ -377,7 +387,6 @@ function useFloatingPopover({
     triggerRefs,
     context,
     positionReady: isPositioned,
-    // 🔧 使用官方的 isPositioned
     innerOpen,
     setInnerOpen,
     x,
@@ -391,7 +400,7 @@ function useFloatingPopover({
   };
 }
 var PORTAL_ROOT_ID = "floating-popover-root";
-var DEFAULT_OFFSET = 8;
+var DEFAULT_OFFSET = { mainAxis: 8, crossAxis: 0 };
 var DragPopover = memo(function DragPopover2({
   className,
   children,
@@ -407,7 +416,6 @@ var DragPopover = memo(function DragPopover2({
   closeOnEscape = true,
   contentRef,
   delay,
-  initialFocus,
   focusManagerProps = {
     returnFocus: true,
     guards: false,
@@ -534,7 +542,7 @@ var DragPopover = memo(function DragPopover2({
       externalTriggerRef,
       draggable,
       handleDragStart
-      // titleId, descriptionId, dragContentRef 是稳定的，移除
+      // titleId, descriptionId, dragContentRef are stable, remove
     ]
   );
   return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
@@ -542,7 +550,6 @@ var DragPopover = memo(function DragPopover2({
     /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
-        initialFocus,
         ...focusManagerProps,
         context: floating.context,
         children: /* @__PURE__ */ jsx(
@@ -593,6 +600,5 @@ var Popover = Object.assign(PopoverBase, {
   Footer: ModalFooter
 });
 export {
-  DragPopover,
   Popover
 };

package/dist/components/popover/src/components/popover-header.js

@@ -4,7 +4,7 @@ import { memo, forwardRef } from "react";
 import { usePopoverContext } from "../popover-context.js";
 const PopoverHeader = memo(
   forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
+    const { children, ...rest } = props;
     const { titleId, onCloseClick } = usePopoverContext();
     return /* @__PURE__ */ jsx(
       ModalHeader,

package/dist/components/popover/src/hooks/use-drag.d.ts

@@ -14,9 +14,9 @@ interface UseDragOptions {
     rememberPosition?: boolean;
 }
 /**
- * 拖拽功能 Hook
- * @param options 配置选项
- * @returns 拖拽状态和控制方法
+ * Drag functionality Hook
+ * @param options configuration options
+ * @returns drag state and control methods
  */
 export declare function useDrag({ draggable, floatingRef, rememberPosition }: UseDragOptions): {
     state: DragState;

package/dist/components/popover/src/hooks/use-floating-popover.d.ts

@@ -1,4 +1,4 @@
-import { FloatingContext, Placement, ReferenceType } from '@floating-ui/react';
+import { FloatingContext, OffsetOptions, Placement, ReferenceType, UseTransitionStylesProps } from '@floating-ui/react';
 import { RefObject } from 'react';
 interface UseFloatingPopoverReturn {
     context: FloatingContext;
@@ -41,7 +41,7 @@ interface UseFloatingPopoverParams {
     matchTriggerWidth?: boolean;
     maxWidth?: number;
     nodeId: string | undefined;
-    offset?: number;
+    offset?: OffsetOptions;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     outsidePressIgnore?: string | string[] | boolean;
@@ -49,6 +49,7 @@ interface UseFloatingPopoverParams {
     rememberPosition?: boolean;
     resetDragState: () => void;
     resetPosition: () => void;
+    transitionStylesProps?: UseTransitionStylesProps;
 }
-export declare function useFloatingPopover({ open, defaultOpen, onOpenChange, placement, offset: offsetDistance, interactions, outsidePressIgnore, delay, autoUpdate, closeOnEscape, draggable, nodeId, resetDragState, resetPosition, rememberPosition, autoSize, maxWidth: maxWidthValue, matchTriggerWidth, }: UseFloatingPopoverParams): UseFloatingPopoverReturn;
+export declare function useFloatingPopover({ open, defaultOpen, onOpenChange, placement, offset: offsetDistance, interactions, outsidePressIgnore, delay, autoUpdate, closeOnEscape, draggable, nodeId, resetDragState, resetPosition, rememberPosition, autoSize, maxWidth: maxWidthValue, matchTriggerWidth, transitionStylesProps, }: UseFloatingPopoverParams): UseFloatingPopoverReturn;
 export {};

package/dist/components/popover/src/hooks/use-floating-popover.js

@@ -7,7 +7,7 @@ function useFloatingPopover({
   defaultOpen,
   onOpenChange,
   placement = "bottom",
-  offset: offsetDistance = 8,
+  offset: offsetDistance = { mainAxis: 8, crossAxis: 0 },
   interactions = "click",
   outsidePressIgnore,
   delay,
@@ -20,7 +20,10 @@ function useFloatingPopover({
   rememberPosition = false,
   autoSize = true,
   maxWidth: maxWidthValue = 320,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  transitionStylesProps = {
+    duration: 0
+  }
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const positionRef = useRef({ x: 0, y: 0 });
@@ -74,7 +77,7 @@ function useFloatingPopover({
   const { refs, floatingStyles, context, x, y, isPositioned } = useFloating({
     nodeId,
     open: innerOpen,
-    // 直接传递状态
+    // Pass state directly
     onOpenChange: handleOpenChange,
     placement,
     middleware,
@@ -93,9 +96,9 @@ function useFloatingPopover({
   });
   const click = useClick(context, {
     enabled: interactions === "click",
-    // 🔧 使用 mousedown 事件而不是 click，提前处理，避免与 dismiss 冲突
+    // Use mousedown event instead of click, handle early, avoid conflict with dismiss
     event: "mousedown",
-    // 🔧 如果已经有其他 Popover 打开，点击时保持逻辑一致
+    // If another Popover is already open, keep logic consistent when clicking
     stickIfOpen: false
   });
   const focus = useFocus(context, {
@@ -138,12 +141,19 @@ function useFloatingPopover({
   ]);
   const getStyles = useCallback(
     (dragPosition, isDragging) => {
-      const transform = dragPosition && draggable ? `translate(${dragPosition.x}px, ${dragPosition.y}px)` : `translate(${x}px, ${y}px)`;
+      if (dragPosition && draggable) {
+        return {
+          ...floatingStyles,
+          position: "fixed",
+          top: `${dragPosition.y}px`,
+          left: `${dragPosition.x}px`,
+          transform: "none",
+          transition: isDragging ? "none" : floatingStyles.transition
+        };
+      }
       return {
         ...floatingStyles,
-        transform,
-        // 仅在拖拽功能开启且正在拖拽时禁用过渡动画
-        transition: draggable && isDragging ? "none" : floatingStyles.transition
+        transform: `translate(${x}px, ${y}px)`
       };
     },
     [floatingStyles, x, y, draggable]
@@ -182,7 +192,6 @@ function useFloatingPopover({
     triggerRefs,
     context,
     positionReady: isPositioned,
-    // 🔧 使用官方的 isPositioned
     innerOpen,
     setInnerOpen,
     x,

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

@@ -1 +1,2 @@
-export * from './popover';
+export { Popover } from './popover';
+export type { PopoverProps } from './popover';

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

@@ -1,5 +1,5 @@
 import { ModalContent, ModalFooter } from '../../modal/src';
-import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
+import { FloatingFocusManagerProps, Placement, OffsetOptions } from '@floating-ui/react';
 import { default as React } from 'react';
 import { PopoverHeader, PopoverTrigger } from './components';
 export interface PopoverProps {
@@ -16,14 +16,10 @@ export interface PopoverProps {
     };
     draggable?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;
-    /**
-     * @deprecated use focusManagerProps.initialFocus instead
-     */
-    initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
     interactions?: "hover" | "click" | "focus" | "none";
     matchTriggerWidth?: boolean;
     maxWidth?: number;
-    offset?: number;
+    offset?: OffsetOptions;
     onOpenChange?: (isOpen: boolean) => void;
     open?: boolean;
     outsidePressIgnore?: string | string[] | boolean;

package/dist/components/popover/src/popover.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
-import { Modal, ModalFooter, ModalContent } from "../../modal/dist/index.js";
-import { useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, useFloatingParentNodeId, FloatingTree } from "@floating-ui/react";
+import { ModalFooter, ModalContent, Modal } from "../../modal/dist/index.js";
+import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { memo, useId, useRef, useEffect, useMemo, useCallback } from "react";
 import { PopoverContext } from "./popover-context.js";
-import { useDrag } from "./hooks/use-drag.js";
-import { useFloatingPopover } from "./hooks/use-floating-popover.js";
 import { PopoverHeader } from "./components/popover-header.js";
 import { PopoverTrigger } from "./components/popover-trigger.js";
+import { useDrag } from "./hooks/use-drag.js";
+import { useFloatingPopover } from "./hooks/use-floating-popover.js";
 import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
 import { findChildByType } from "../../../shared/utils/assertion.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const PORTAL_ROOT_ID = "floating-popover-root";
-const DEFAULT_OFFSET = 8;
+const DEFAULT_OFFSET = { mainAxis: 8, crossAxis: 0 };
 const DragPopover = memo(function DragPopover2({
   className,
   children,
@@ -28,7 +28,6 @@ const DragPopover = memo(function DragPopover2({
   closeOnEscape = true,
   contentRef,
   delay,
-  initialFocus,
   focusManagerProps = {
     returnFocus: true,
     guards: false,
@@ -155,7 +154,7 @@ const DragPopover = memo(function DragPopover2({
       externalTriggerRef,
       draggable,
       handleDragStart
-      // titleId, descriptionId, dragContentRef 是稳定的，移除
+      // titleId, descriptionId, dragContentRef are stable, remove
     ]
   );
   return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
@@ -163,7 +162,6 @@ const DragPopover = memo(function DragPopover2({
     /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
-        initialFocus,
         ...focusManagerProps,
         context: floating.context,
         children: /* @__PURE__ */ jsx(

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

@@ -1,2 +1,4 @@
-export * from './progress-bar';
-export * from './progress-circle';
+export { ProgressBar } from './progress-bar';
+export { ProgressCircle } from './progress-circle';
+export type { ProgressBarProps } from './progress-bar';
+export type { ProgressCircleProps } from './progress-circle';

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

@@ -50,20 +50,4 @@ interface RadioGroupType {
 }
 declare const RadioGroup: RadioGroupType;
 
-interface RadioContextType {
-    descriptionId: string;
-    disabled?: boolean;
-    id: string;
-}
-declare function useRadioContext(): RadioContextType;
-interface RadioGroupContextType {
-    disabled?: boolean;
-    name: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-    value: string;
-    variant?: "default" | "accent" | "outline";
-}
-declare function useRadioGroupContext(): RadioGroupContextType;
-
-export { Radio, type RadioContextType, RadioGroup, type RadioGroupContextType, type RadioGroupProps, RadioLabel, type RadioLabelProps, type RadioProps, useRadioContext, useRadioGroupContext };
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/components/radio/dist/index.js

@@ -149,14 +149,14 @@ var RadioLabel = memo(
   forwardRef(function RadioLabel2(props, ref) {
     const { children, className, ...rest } = props;
     const { id, descriptionId, disabled } = useRadioContext();
-    const styles = radioTv({ disabled });
+    const tv = radioTv({ disabled });
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
         id: descriptionId,
         htmlFor: id,
-        className: tcx(styles.label(), className),
+        className: tcx(tv.label(), className),
         ...rest,
         children
       }
@@ -182,7 +182,7 @@ var RadioBase = forwardRef(function Radio(props, ref) {
   } = props;
   const id = useId();
   const descriptionId = useId();
-  const styles = radioTv({
+  const tv = radioTv({
     type: "radio",
     variant,
     disabled,
@@ -207,13 +207,13 @@ var RadioBase = forwardRef(function Radio(props, ref) {
     }
     return children;
   };
-  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
     /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           ref,
-          className: styles.input(),
+          className: tv.input(),
           type: "radio",
           id,
           name,
@@ -229,7 +229,7 @@ var RadioBase = forwardRef(function Radio(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: styles.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+      /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
     ] }),
     renderChildren()
   ] }) });
@@ -331,8 +331,5 @@ RadioGroup2.Item = RadioGroupItem;
 RadioGroup2.displayName = "RadioGroup";
 export {
   Radio2 as Radio,
-  RadioGroup2 as RadioGroup,
-  RadioLabel,
-  useRadioContext,
-  useRadioGroupContext
+  RadioGroup2 as RadioGroup
 };

package/dist/components/radio/src/context.js

@@ -1,4 +1,4 @@
-import { useContext, createContext } from "react";
+import { createContext, useContext } from "react";
 const RadioContext = createContext(null);
 function useRadioContext() {
   const context = useContext(RadioContext);

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

@@ -1,8 +1,4 @@
 export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
-export { RadioLabel } from './radio-label';
-export { useRadioContext, useRadioGroupContext } from './context';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps } from './radio-group';
-export type { RadioLabelProps } from './radio-label';
-export type { RadioContextType, RadioGroupContextType } from './context';

package/dist/components/radio/src/radio-label.js

@@ -7,14 +7,14 @@ const RadioLabel = memo(
   forwardRef(function RadioLabel2(props, ref) {
     const { children, className, ...rest } = props;
     const { id, descriptionId, disabled } = useRadioContext();
-    const styles = radioTv({ disabled });
+    const tv = radioTv({ disabled });
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
         id: descriptionId,
         htmlFor: id,
-        className: tcx(styles.label(), className),
+        className: tcx(tv.label(), className),
         ...rest,
         children
       }

package/dist/components/radio/src/radio.js

@@ -24,7 +24,7 @@ const RadioBase = forwardRef(function Radio2(props, ref) {
   } = props;
   const id = useId();
   const descriptionId = useId();
-  const styles = radioTv({
+  const tv = radioTv({
     type: "radio",
     variant,
     disabled,
@@ -49,13 +49,13 @@ const RadioBase = forwardRef(function Radio2(props, ref) {
     }
     return children;
   };
-  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
     /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           ref,
-          className: styles.input(),
+          className: tv.input(),
           type: "radio",
           id,
           name,
@@ -71,7 +71,7 @@ const RadioBase = forwardRef(function Radio2(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: styles.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+      /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
     ] }),
     renderChildren()
   ] }) });

package/dist/components/range/dist/index.js

@@ -296,7 +296,7 @@ var Range = forwardRef(function Range2(props, ref) {
       (_a = inputRef.current) == null ? void 0 : _a.blur();
     }
   }, [disabled]);
-  const styles = useMemo(
+  const tv = useMemo(
     () => rangeTv({
       currentDefaultValue: defaultStepValue === currentStepValue,
       hasStepOrDefault: step > 1 || defaultValue !== void 0,
@@ -366,7 +366,7 @@ var Range = forwardRef(function Range2(props, ref) {
     {
       ref: mergeRefs(sliderRef, ref),
       onPointerDown: handleSliderPointerDown,
-      className: tcx(styles.container(), className),
+      className: tcx(tv.container(), className),
       style: {
         "--width": `${trackWidth}px`,
         "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
@@ -375,17 +375,17 @@ var Range = forwardRef(function Range2(props, ref) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: tcx(styles.connect(), connectsClass),
+            className: tcx(tv.connect(), connectsClass),
             style: connectStyle
           }
         ),
-        step > 1 || defaultValue !== void 0 ? /* @__PURE__ */ jsx("div", { className: styles.dotContainer(), children: renderDots() }) : "",
+        step > 1 || defaultValue !== void 0 ? /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() }) : "",
         /* @__PURE__ */ jsx(
           "div",
           {
             ref: thumbRef,
             onPointerDown: handlePointerDown,
-            className: styles.thumb(),
+            className: tv.thumb(),
             style: {
               width: thumbSize,
               height: thumbSize,
@@ -398,7 +398,7 @@ var Range = forwardRef(function Range2(props, ref) {
                 ref: inputRef,
                 type: "text",
                 onKeyDown: handleKeyDown,
-                className: styles.input(),
+                className: tv.input(),
                 tabIndex: disabled || readOnly ? -1 : 0,
                 readOnly: true
               }
@@ -715,7 +715,7 @@ var RangeTuple = forwardRef(
         }
       }
     }, [disabled]);
-    const styles = useMemo(
+    const tv = useMemo(
       () => rangeTv({
         hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
         disabled
@@ -789,7 +789,7 @@ var RangeTuple = forwardRef(
       if (!defaultStepValue) return false;
       return currentStepValue[1] === defaultStepValue[1];
     }, [currentStepValue, defaultStepValue]);
-    const thumb0Styles = useMemo(
+    const thumbTv0 = useMemo(
       () => rangeTv({
         currentDefaultValue: thumb0IsDefault,
         hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
@@ -797,7 +797,7 @@ var RangeTuple = forwardRef(
       }),
       [thumb0IsDefault, step, normalizedDefaultValue, disabled]
     );
-    const thumb1Styles = useMemo(
+    const thumbTv1 = useMemo(
       () => rangeTv({
         currentDefaultValue: thumb1IsDefault,
         hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
@@ -810,7 +810,7 @@ var RangeTuple = forwardRef(
       {
         ref: mergeRefs(sliderRef, ref),
         onPointerDown: handleSliderPointerDown,
-        className: tcx(styles.container(), className),
+        className: tcx(tv.container(), className),
         style: {
           "--width": `${trackWidth}px`,
           "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
@@ -819,17 +819,17 @@ var RangeTuple = forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: tcx(styles.connect(), connectsClass),
+              className: tcx(tv.connect(), connectsClass),
               style: connectStyle
             }
           ),
-          (step > 1 || normalizedDefaultValue !== void 0) && /* @__PURE__ */ jsx("div", { className: styles.dotContainer(), children: renderDots() }),
+          (step > 1 || normalizedDefaultValue !== void 0) && /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() }),
           /* @__PURE__ */ jsx(
             "div",
             {
               ref: thumb0Ref,
               onPointerDown: (e) => handlePointerDown(e, 0),
-              className: thumb0Styles.thumb(),
+              className: thumbTv0.thumb(),
               style: {
                 width: thumbSize,
                 height: thumbSize,
@@ -842,7 +842,7 @@ var RangeTuple = forwardRef(
                   ref: input0Ref,
                   type: "text",
                   onKeyDown: (e) => handleKeyDown(e, 0),
-                  className: styles.input(),
+                  className: tv.input(),
                   tabIndex: disabled || readOnly ? -1 : 0,
                   readOnly: true
                 }
@@ -854,7 +854,7 @@ var RangeTuple = forwardRef(
             {
               ref: thumb1Ref,
               onPointerDown: (e) => handlePointerDown(e, 1),
-              className: thumb1Styles.thumb(),
+              className: thumbTv1.thumb(),
               style: {
                 width: thumbSize,
                 height: thumbSize,
@@ -867,7 +867,7 @@ var RangeTuple = forwardRef(
                   ref: input1Ref,
                   type: "text",
                   onKeyDown: (e) => handleKeyDown(e, 1),
-                  className: styles.input(),
+                  className: tv.input(),
                   tabIndex: disabled || readOnly ? -1 : 0,
                   readOnly: true
                 }

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

@@ -1,2 +1,4 @@
-export * from './range';
-export * from './range-tuple';
+export { Range } from './range';
+export { RangeTuple } from './range-tuple';
+export type { RangeProps } from './range';
+export type { RangeTupleProps } from './range-tuple';