@choice-ui/react 1.4.3 → 1.4.6

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

@@ -1,5 +1,5 @@
 import { ModalHeaderProps, ModalContent, ModalFooter } from '../../modal/src';
-import { FloatingFocusManagerProps, OffsetOptions, Placement, UseTransitionStylesProps } from '@floating-ui/react';
+import { FloatingFocusManagerProps, OffsetOptions, Placement } from '@floating-ui/react';
 import { default as react__default } from 'react';
 import * as react from 'react';
 
@@ -40,9 +40,7 @@ interface PopoverProps {
      */
     root?: HTMLElement | null;
     triggerRef?: react__default.RefObject<HTMLElement>;
-    transitionStylesProps?: UseTransitionStylesProps;
 }
-declare const DragPopover: react__default.NamedExoticComponent<PopoverProps>;
 interface PopoverComponent extends react__default.FC<PopoverProps> {
     Content: typeof ModalContent;
     Footer: typeof ModalFooter;
@@ -51,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

@@ -1,6 +1,6 @@
-import { ModalFooter, ModalContent, ModalHeader, Modal } from "../../modal/dist/index.js";
 import { Slot } from "../../slot/dist/index.js";
-import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, offset, flip, shift, size, useFloating, autoUpdate, useTransitionStyles, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { ModalFooter, ModalContent, ModalHeader, Modal } from "../../modal/dist/index.js";
+import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, offset, flip, shift, size, useFloating, autoUpdate, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { memo, forwardRef, useId, useRef, useEffect, useMemo, useCallback, createContext, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEventCallback } from "usehooks-ts";
@@ -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,
@@ -272,13 +272,12 @@ function useFloatingPopover({
   const { refs, floatingStyles, context, x, y, isPositioned } = useFloating({
     nodeId,
     open: innerOpen,
-    // 直接传递状态
+    // Pass state directly
     onOpenChange: handleOpenChange,
     placement,
     middleware,
     whileElementsMounted: autoUpdate$1 ? autoUpdate : void 0
   });
-  const { isMounted, styles } = useTransitionStyles(context, transitionStylesProps);
   useEffect(() => {
     if (innerOpen && isPositioned && x !== null && y !== null) {
       positionRef.current = { x, y };
@@ -292,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, {
@@ -337,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]
@@ -381,7 +387,6 @@ function useFloatingPopover({
     triggerRefs,
     context,
     positionReady: isPositioned,
-    // 🔧 使用官方的 isPositioned
     innerOpen,
     setInnerOpen,
     x,
@@ -391,13 +396,11 @@ function useFloatingPopover({
     getStyles,
     handleClose,
     handleTriggerRef,
-    isClosing,
-    isMounted,
-    styles
+    isClosing
   };
 }
 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,
@@ -405,7 +408,7 @@ var DragPopover = memo(function DragPopover2({
   draggable = false,
   placement = "bottom",
   interactions = "click",
-  offset: offsetDistance = { mainAxis: DEFAULT_OFFSET, crossAxis: 0 },
+  offset: offsetDistance = DEFAULT_OFFSET,
   open,
   onOpenChange,
   defaultOpen,
@@ -424,8 +427,7 @@ var DragPopover = memo(function DragPopover2({
   autoSize = true,
   rememberPosition = false,
   maxWidth,
-  matchTriggerWidth = false,
-  transitionStylesProps
+  matchTriggerWidth = false
 }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -460,8 +462,7 @@ var DragPopover = memo(function DragPopover2({
     closeOnEscape,
     rememberPosition,
     resetDragState,
-    resetPosition,
-    transitionStylesProps
+    resetPosition
   });
   useEffect(() => {
     if (externalTriggerRef) {
@@ -471,15 +472,6 @@ var DragPopover = memo(function DragPopover2({
   const combinedStyles = useMemo(() => {
     return floating.getStyles(dragState.position, dragState.isDragging);
   }, [floating, dragState.position, dragState.isDragging]);
-  const transitionStyles = useMemo(() => {
-    if (draggable && dragState.isDragging) {
-      return { ...floating.styles, transition: "none" };
-    }
-    if (floating.styles.transition) {
-      return { ...floating.styles, transition: floating.styles.transition };
-    }
-    return floating.styles;
-  }, [floating.styles, draggable, dragState.isDragging]);
   const handleFloatingRef = useCallback(
     (node) => {
       floating.refs.setFloating(node);
@@ -550,6 +542,7 @@ var DragPopover = memo(function DragPopover2({
       externalTriggerRef,
       draggable,
       handleDragStart
+      // titleId, descriptionId, dragContentRef are stable, remove
     ]
   );
   return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
@@ -564,7 +557,7 @@ var DragPopover = memo(function DragPopover2({
           {
             id: portalId,
             root,
-            children: floating.innerOpen && floating.isMounted && /* @__PURE__ */ jsx("div", { style: transitionStyles, children: /* @__PURE__ */ jsxs(
+            children: floating.innerOpen && /* @__PURE__ */ jsxs(
               Modal,
               {
                 ref: handleFloatingRef,
@@ -585,7 +578,7 @@ var DragPopover = memo(function DragPopover2({
                   footerContent
                 ]
               }
-            ) })
+            )
           }
         )
       }
@@ -607,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

@@ -12,7 +12,6 @@ interface UseFloatingPopoverReturn {
     handleTriggerRef: (triggerRef: RefObject<HTMLElement | null>) => void;
     innerOpen: boolean;
     isClosing: boolean;
-    isMounted: boolean;
     positionReady: boolean;
     refs: {
         floating: React.MutableRefObject<HTMLElement | null>;
@@ -27,7 +26,6 @@ interface UseFloatingPopoverReturn {
     }>;
     x: number | null;
     y: number | null;
-    styles: React.CSSProperties;
 }
 interface UseFloatingPopoverParams {
     autoSize?: boolean;

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

@@ -1,4 +1,4 @@
-import { offset, flip, shift, size, useFloating, autoUpdate, useTransitionStyles, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { offset, flip, shift, size, useFloating, autoUpdate, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { useMergedValue } from "../../../../shared/hooks/use-merged-value/use-merged-value.js";
@@ -77,13 +77,12 @@ function useFloatingPopover({
   const { refs, floatingStyles, context, x, y, isPositioned } = useFloating({
     nodeId,
     open: innerOpen,
-    // 直接传递状态
+    // Pass state directly
     onOpenChange: handleOpenChange,
     placement,
     middleware,
     whileElementsMounted: autoUpdate$1 ? autoUpdate : void 0
   });
-  const { isMounted, styles } = useTransitionStyles(context, transitionStylesProps);
   useEffect(() => {
     if (innerOpen && isPositioned && x !== null && y !== null) {
       positionRef.current = { x, y };
@@ -97,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, {
@@ -142,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]
@@ -186,7 +192,6 @@ function useFloatingPopover({
     triggerRefs,
     context,
     positionReady: isPositioned,
-    // 🔧 使用官方的 isPositioned
     innerOpen,
     setInnerOpen,
     x,
@@ -196,9 +201,7 @@ function useFloatingPopover({
     getStyles,
     handleClose,
     handleTriggerRef,
-    isClosing,
-    isMounted,
-    styles
+    isClosing
   };
 }
 export {

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, OffsetOptions, Placement, UseTransitionStylesProps } 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 {
@@ -33,7 +33,6 @@ export interface PopoverProps {
      */
     root?: HTMLElement | null;
     triggerRef?: React.RefObject<HTMLElement>;
-    transitionStylesProps?: UseTransitionStylesProps;
 }
 export declare const DragPopover: React.NamedExoticComponent<PopoverProps>;
 interface PopoverComponent extends React.FC<PopoverProps> {

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

@@ -1,18 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Modal, ModalFooter, ModalContent } from "../../modal/dist/index.js";
 import { Slot } from "../../slot/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,
@@ -20,7 +20,7 @@ const DragPopover = memo(function DragPopover2({
   draggable = false,
   placement = "bottom",
   interactions = "click",
-  offset: offsetDistance = { mainAxis: DEFAULT_OFFSET, crossAxis: 0 },
+  offset: offsetDistance = DEFAULT_OFFSET,
   open,
   onOpenChange,
   defaultOpen,
@@ -39,8 +39,7 @@ const DragPopover = memo(function DragPopover2({
   autoSize = true,
   rememberPosition = false,
   maxWidth,
-  matchTriggerWidth = false,
-  transitionStylesProps
+  matchTriggerWidth = false
 }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -75,8 +74,7 @@ const DragPopover = memo(function DragPopover2({
     closeOnEscape,
     rememberPosition,
     resetDragState,
-    resetPosition,
-    transitionStylesProps
+    resetPosition
   });
   useEffect(() => {
     if (externalTriggerRef) {
@@ -86,15 +84,6 @@ const DragPopover = memo(function DragPopover2({
   const combinedStyles = useMemo(() => {
     return floating.getStyles(dragState.position, dragState.isDragging);
   }, [floating, dragState.position, dragState.isDragging]);
-  const transitionStyles = useMemo(() => {
-    if (draggable && dragState.isDragging) {
-      return { ...floating.styles, transition: "none" };
-    }
-    if (floating.styles.transition) {
-      return { ...floating.styles, transition: floating.styles.transition };
-    }
-    return floating.styles;
-  }, [floating.styles, draggable, dragState.isDragging]);
   const handleFloatingRef = useCallback(
     (node) => {
       floating.refs.setFloating(node);
@@ -165,6 +154,7 @@ const DragPopover = memo(function DragPopover2({
       externalTriggerRef,
       draggable,
       handleDragStart
+      // titleId, descriptionId, dragContentRef are stable, remove
     ]
   );
   return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
@@ -179,7 +169,7 @@ const DragPopover = memo(function DragPopover2({
           {
             id: portalId,
             root,
-            children: floating.innerOpen && floating.isMounted && /* @__PURE__ */ jsx("div", { style: transitionStyles, children: /* @__PURE__ */ jsxs(
+            children: floating.innerOpen && /* @__PURE__ */ jsxs(
               Modal,
               {
                 ref: handleFloatingRef,
@@ -200,7 +190,7 @@ const DragPopover = memo(function DragPopover2({
                   footerContent
                 ]
               }
-            ) })
+            )
           }
         )
       }

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()
   ] }) });