@choice-ui/react 1.7.4 → 1.7.6

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

@@ -1,22 +1,15 @@
 import { HTMLProps } from 'react';
-import { TooltipProps } from '../../tooltip/src';
 import * as react from 'react';
 
-interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
+interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
     active?: boolean;
+    as?: React.ElementType;
     asChild?: boolean;
     className?: string;
     focused?: boolean;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @default "default"
-     */
     size?: "default" | "large";
-    tooltip?: TooltipProps;
-    /**
-     * @default "primary"
-     */
     variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
 }
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/dist/index.js

@@ -1,10 +1,9 @@
-import { LoaderCircle } from "@choiceform/icons-react";
 import { Slot } from "../../slot/dist/index.js";
-import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
+import { LoaderCircle } from "@choiceform/icons-react";
+import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { isMultiElement } from "../../../shared/utils/assertion.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+import { isMultiElement } from "../../../shared/utils/assertion.js";
 var buttonTv = tcv({
   slots: {
     button: [
@@ -75,6 +74,10 @@ var buttonTv = tcv({
     focused: {
       true: "",
       false: ""
+    },
+    multiElement: {
+      true: "",
+      false: ""
     }
   },
   compoundVariants: [
@@ -123,10 +126,15 @@ var buttonTv = tcv({
       variant: ["link", "link-danger", "ghost"],
       disabled: true,
       class: {
-        button: [
-          "text-disabled-foreground pointer-events-none",
-          "data-[multi-element=true]:border-default-boundary"
-        ]
+        button: ["text-disabled-foreground pointer-events-none"]
+      }
+    },
+    {
+      variant: ["link", "link-danger", "ghost"],
+      disabled: true,
+      multiElement: true,
+      class: {
+        button: ["border-default-boundary"]
       }
     },
     {
@@ -244,7 +252,8 @@ var buttonTv = tcv({
     active: false,
     disabled: false,
     loading: false,
-    focused: false
+    focused: false,
+    multiElement: false
   }
 });
 var Button = forwardRef(function Button2(props, ref) {
@@ -259,13 +268,25 @@ var Button = forwardRef(function Button2(props, ref) {
     loading,
     asChild,
     children,
-    tooltip,
+    as,
     "aria-label": ariaLabel,
     onClick,
     ...rest
   } = props;
-  const Button3 = asChild ? Slot : "button";
-  const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
+  const As = as ?? "button";
+  const AsComponent = asChild ? Slot : As;
+  const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
+  const tv = useMemo(
+    () => buttonTv({
+      variant,
+      size,
+      active,
+      disabled,
+      loading,
+      focused
+    }),
+    [variant, size, active, disabled, loading, focused]
+  );
   const content = isValidElement(children) ? cloneElement(children, {
     children: children.props.children
   }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -279,23 +300,21 @@ var Button = forwardRef(function Button2(props, ref) {
     return props["aria-label"];
   }, [children, props]);
   const handleClick = readOnly ? void 0 : onClick;
-  const button = /* @__PURE__ */ jsx(
-    Button3,
+  return /* @__PURE__ */ jsx(
+    AsComponent,
     {
-      ...rest,
       ref,
-      type: rest.type || "button",
+      className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
+      ...elementProps,
+      ...rest,
       disabled: disabled || loading,
       onClick: handleClick,
-      className: tcx(tv.button(), className),
-      "data-multi-element": isMultiElement(content),
       "aria-disabled": disabled || loading,
       "aria-busy": loading,
       "aria-label": ariaLabelProps,
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
 });
 Button.displayName = "Button";
 export {

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

@@ -1,20 +1,13 @@
-import { TooltipProps } from '../../tooltip/src';
 import { HTMLProps } from 'react';
-export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
+export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
     active?: boolean;
+    as?: React.ElementType;
     asChild?: boolean;
     className?: string;
     focused?: boolean;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @default "default"
-     */
     size?: "default" | "large";
-    tooltip?: TooltipProps;
-    /**
-     * @default "primary"
-     */
     variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
 }
 export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/button/src/button.js

@@ -1,8 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { LoaderCircle } from "@choiceform/icons-react";
 import { Slot } from "../../slot/dist/index.js";
-import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
+import { LoaderCircle } from "@choiceform/icons-react";
+import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
 import { buttonTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 import { isMultiElement } from "../../../shared/utils/assertion.js";
@@ -18,13 +17,25 @@ const Button = forwardRef(function Button2(props, ref) {
     loading,
     asChild,
     children,
-    tooltip,
+    as,
     "aria-label": ariaLabel,
     onClick,
     ...rest
   } = props;
-  const Button3 = asChild ? Slot : "button";
-  const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
+  const As = as ?? "button";
+  const AsComponent = asChild ? Slot : As;
+  const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
+  const tv = useMemo(
+    () => buttonTv({
+      variant,
+      size,
+      active,
+      disabled,
+      loading,
+      focused
+    }),
+    [variant, size, active, disabled, loading, focused]
+  );
   const content = isValidElement(children) ? cloneElement(children, {
     children: children.props.children
   }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -38,23 +49,21 @@ const Button = forwardRef(function Button2(props, ref) {
     return props["aria-label"];
   }, [children, props]);
   const handleClick = readOnly ? void 0 : onClick;
-  const button = /* @__PURE__ */ jsx(
-    Button3,
+  return /* @__PURE__ */ jsx(
+    AsComponent,
     {
-      ...rest,
       ref,
-      type: rest.type || "button",
+      className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
+      ...elementProps,
+      ...rest,
       disabled: disabled || loading,
       onClick: handleClick,
-      className: tcx(tv.button(), className),
-      "data-multi-element": isMultiElement(content),
       "aria-disabled": disabled || loading,
       "aria-busy": loading,
       "aria-label": ariaLabelProps,
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
 });
 Button.displayName = "Button";
 export {

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

@@ -61,6 +61,10 @@ export declare const buttonTv: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
+    multiElement: {
+        true: string;
+        false: string;
+    };
 }, {
     button: string[];
     spinner: string[];
@@ -128,6 +132,10 @@ export declare const buttonTv: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
+    multiElement: {
+        true: string;
+        false: string;
+    };
 }, {
     button: string[];
     spinner: string[];
@@ -195,6 +203,10 @@ export declare const buttonTv: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
+    multiElement: {
+        true: string;
+        false: string;
+    };
 }, {
     button: string[];
     spinner: string[];

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

@@ -69,6 +69,10 @@ const buttonTv = tcv({
     focused: {
       true: "",
       false: ""
+    },
+    multiElement: {
+      true: "",
+      false: ""
     }
   },
   compoundVariants: [
@@ -117,10 +121,15 @@ const buttonTv = tcv({
       variant: ["link", "link-danger", "ghost"],
       disabled: true,
       class: {
-        button: [
-          "text-disabled-foreground pointer-events-none",
-          "data-[multi-element=true]:border-default-boundary"
-        ]
+        button: ["text-disabled-foreground pointer-events-none"]
+      }
+    },
+    {
+      variant: ["link", "link-danger", "ghost"],
+      disabled: true,
+      multiElement: true,
+      class: {
+        button: ["border-default-boundary"]
       }
     },
     {
@@ -238,7 +247,8 @@ const buttonTv = tcv({
     active: false,
     disabled: false,
     loading: false,
-    focused: false
+    focused: false,
+    multiElement: false
   }
 });
 export {

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

@@ -79,6 +79,9 @@ interface CommentInputProps {
     placeholder?: string;
     users?: User[];
     variant?: "default" | "solid";
+    showMentionButton?: boolean;
+    showEmojiButton?: boolean;
+    showImageUploadButton?: boolean;
 }
 declare const CommentInput: react.ForwardRefExoticComponent<CommentInputProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/components/comments/src/comment-input/comment-input.d.ts

@@ -12,5 +12,8 @@ export interface CommentInputProps {
     placeholder?: string;
     users?: User[];
     variant?: "default" | "solid";
+    showMentionButton?: boolean;
+    showEmojiButton?: boolean;
+    showImageUploadButton?: boolean;
 }
 export declare const CommentInput: import('react').ForwardRefExoticComponent<CommentInputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/comments/src/comment-input/comment-input.js

@@ -31,7 +31,10 @@ const CommentInput = forwardRef((props, ref) => {
       ADD_EMOJI: "Add emoji",
       UPLOAD_ATTACHMENT: "Upload up to 5 images",
       REMOVE_IMAGE: "Remove image"
-    }
+    },
+    showMentionButton = true,
+    showEmojiButton = true,
+    showImageUploadButton = true
   } = props;
   const [isEditMode, setIsEditMode] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
@@ -230,7 +233,10 @@ const CommentInput = forwardRef((props, ref) => {
                 imageCount,
                 maxImageCount,
                 hasOnlyImages,
-                defaultText
+                defaultText,
+                showMentionButton: showMentionButton && users.length > 0,
+                showEmojiButton,
+                showImageUploadButton
               }
             ),
             shouldShowPlaceholder ? /* @__PURE__ */ jsx("div", { className: styles.placeholder(), children: /* @__PURE__ */ jsx("span", { className: "truncate", children: error || placeholder }) }) : null

package/dist/components/comments/src/comment-input/components/comment-input-footer.d.ts

@@ -17,6 +17,9 @@ interface CommentInputFooterProps {
     onMentionClick?: () => void;
     onSubmit?: () => void;
     typing?: boolean;
+    showMentionButton?: boolean;
+    showEmojiButton?: boolean;
+    showImageUploadButton?: boolean;
 }
 export declare const CommentInputFooter: (props: CommentInputFooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/comments/src/comment-input/components/comment-input-footer.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../../../../button/dist/index.js";
 import { IconButton } from "../../../../icon-button/dist/index.js";
+import { Tooltip } from "../../../../tooltip/dist/index.js";
 import { Smile, AtSign, Image, ArrowUp } from "@choiceform/icons-react";
 import { useRef } from "react";
 import { CommentInputTv } from "../tv.js";
@@ -21,7 +22,10 @@ const CommentInputFooter = (props) => {
     imageCount = 0,
     maxImageCount = 5,
     hasOnlyImages = false,
-    defaultText
+    defaultText,
+    showMentionButton = true,
+    showEmojiButton = true,
+    showImageUploadButton = true
   } = props;
   const fileInputRef = useRef(null);
   const handleImageButtonClick = () => {
@@ -39,7 +43,7 @@ const CommentInputFooter = (props) => {
   const isSubmitDisabled = disabled || !allowSubmission || hasOnlyImages;
   return /* @__PURE__ */ jsxs("div", { className: styles.footer({ className }), children: [
     typing && /* @__PURE__ */ jsxs("div", { className: styles.footerActions(), children: [
-      /* @__PURE__ */ jsx(
+      showEmojiButton && /* @__PURE__ */ jsx(
         IconButton,
         {
           ref: emojiButtonRef,
@@ -50,7 +54,7 @@ const CommentInputFooter = (props) => {
           children: /* @__PURE__ */ jsx(Smile, {})
         }
       ),
-      /* @__PURE__ */ jsx(
+      showMentionButton && /* @__PURE__ */ jsx(
         IconButton,
         {
           onClick: onMentionClick,
@@ -60,7 +64,7 @@ const CommentInputFooter = (props) => {
           children: /* @__PURE__ */ jsx(AtSign, {})
         }
       ),
-      /* @__PURE__ */ jsxs(
+      showImageUploadButton && /* @__PURE__ */ jsxs(
         IconButton,
         {
           onClick: handleImageButtonClick,
@@ -106,18 +110,15 @@ const CommentInputFooter = (props) => {
       )
     ] }) : (
       /* Submit Button */
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Tooltip, { content: defaultText.SUBMIT, children: /* @__PURE__ */ jsx(
         Button,
         {
           onClick: onSubmit,
           disabled: isSubmitDisabled,
           className: "w-6 rounded-full border-none px-0",
-          tooltip: {
-            content: defaultText.SUBMIT
-          },
           children: /* @__PURE__ */ jsx(ArrowUp, {})
         }
-      )
+      ) })
     )
   ] });
 };

package/dist/components/comments/src/comment-input/components/comment-input-renderers.js

@@ -91,7 +91,7 @@ const renderLeaf = (props) => {
     formattedChildren = /* @__PURE__ */ jsx("u", { className: "underline", children: formattedChildren });
   }
   if (customLeaf.emoji) {
-    formattedChildren = /* @__PURE__ */ jsx("span", { className: "font-emoji text-xl leading-6", children: formattedChildren });
+    formattedChildren = /* @__PURE__ */ jsx("span", { className: "font-emoji text-body-large leading-6", children: formattedChildren });
   }
   return /* @__PURE__ */ jsx("span", { ...attributes, children: formattedChildren });
 };

package/dist/components/comments/src/comment-item/tv.d.ts

@@ -4,8 +4,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            root?: import('tailwind-merge').ClassNameValue;
             name?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };
@@ -16,8 +16,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            root?: import('tailwind-merge').ClassNameValue;
             name?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };
@@ -36,8 +36,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            root?: import('tailwind-merge').ClassNameValue;
             name?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };

package/dist/components/modal/dist/index.js

@@ -15,7 +15,7 @@ var ModalTv = tcv({
 });
 var ModalHeaderTv = tcv({
   slots: {
-    root: "modal__header border-default-boundary w-full flex-none items-center border-b",
+    root: ["modal__header", "grid border-default-boundary w-full flex-none items-center border-b"],
     title: "text-body-medium flex min-w-0 items-center gap-2 p-2 font-strong [grid-area:title] select-none",
     close: "p-2 [grid-area:close]"
   },
@@ -30,7 +30,7 @@ var ModalHeaderTv = tcv({
     },
     close: {
       true: {
-        root: "modal__header--action"
+        root: "grid-cols-[auto_1fr_2.5rem]"
       },
       false: {}
     }

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

@@ -39,7 +39,7 @@ export declare const ModalHeaderTv: import('tailwind-variants').TVReturnType<{
         false: {};
     };
 }, {
-    root: string;
+    root: string[];
     title: string;
     close: string;
 }, undefined, {
@@ -58,7 +58,7 @@ export declare const ModalHeaderTv: import('tailwind-variants').TVReturnType<{
         false: {};
     };
 }, {
-    root: string;
+    root: string[];
     title: string;
     close: string;
 }, import('tailwind-variants').TVReturnType<{
@@ -77,7 +77,7 @@ export declare const ModalHeaderTv: import('tailwind-variants').TVReturnType<{
         false: {};
     };
 }, {
-    root: string;
+    root: string[];
     title: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;

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

@@ -6,7 +6,7 @@ const ModalTv = tcv({
 });
 const ModalHeaderTv = tcv({
   slots: {
-    root: "modal__header border-default-boundary w-full flex-none items-center border-b",
+    root: ["modal__header", "grid border-default-boundary w-full flex-none items-center border-b"],
     title: "text-body-medium flex min-w-0 items-center gap-2 p-2 font-strong [grid-area:title] select-none",
     close: "p-2 [grid-area:close]"
   },
@@ -21,7 +21,7 @@ const ModalHeaderTv = tcv({
     },
     close: {
       true: {
-        root: "modal__header--action"
+        root: "grid-cols-[auto_1fr_2.5rem]"
       },
       false: {}
     }

package/dist/components/otp-input/src/otp-input.js

@@ -4,7 +4,6 @@ import { useMemo, createContext, useContext } from "react";
 import { otpInputTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const OTPInputCtx = createContext({
-  styles: otpInputTv({}),
   slotProps: [],
   variant: "default",
   disabled: false,
@@ -32,30 +31,26 @@ function OTPInputRoot({
       autoComplete: "off",
       "data-disabled": disabled || void 0,
       "data-invalid": isInvalid || void 0,
-      "data-slot": "otp-input",
       disabled,
-      render: ({ slots: slotProps }) => /* @__PURE__ */ jsx(OTPInputCtx.Provider, { value: { styles: tv, slotProps, variant, disabled, isInvalid }, children }),
+      render: ({ slots: slotProps }) => /* @__PURE__ */ jsx(OTPInputCtx.Provider, { value: { slotProps, variant, disabled, isInvalid }, children }),
       ...props
     }
   );
 }
 function OTPInputGroup({ className, ...props }) {
-  var _a;
-  const { styles } = useContext(OTPInputCtx);
+  const tv = otpInputTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: (_a = styles == null ? void 0 : styles.group) == null ? void 0 : _a.call(styles, { className }),
-      "data-slot": "otp-input-group",
+      className: tcx(tv.group(), className),
       ...props
     }
   );
 }
 function OTPInputSlot({ className, index, ...props }) {
-  var _a, _b, _c, _d;
-  const { styles, slotProps, variant, disabled, isInvalid } = useContext(OTPInputCtx);
+  const { slotProps, variant, disabled, isInvalid } = useContext(OTPInputCtx);
   const { char, hasFakeCaret, isActive } = (slotProps == null ? void 0 : slotProps[index]) ?? {};
-  const slotStyles = otpInputTv({
+  const tv = otpInputTv({
     variant,
     selected: isActive,
     disabled,
@@ -65,40 +60,24 @@ function OTPInputSlot({ className, index, ...props }) {
     "div",
     {
       ...props,
-      className: tcx((_a = styles == null ? void 0 : styles.slot) == null ? void 0 : _a.call(styles, { className }), (_b = slotStyles == null ? void 0 : slotStyles.slot) == null ? void 0 : _b.call(slotStyles)),
+      className: tcx(tv.slot(), className),
       "data-active": isActive || void 0,
       "data-disabled": disabled || void 0,
       "data-filled": !!char || void 0,
       "data-invalid": isInvalid || void 0,
-      "data-slot": "otp-input-slot",
       children: [
-        char ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: (_c = styles == null ? void 0 : styles.slotValue) == null ? void 0 : _c.call(styles),
-            "data-slot": "otp-input-slot-value",
-            children: char
-          }
-        ) : null,
-        hasFakeCaret && isActive ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: tcx((_d = styles == null ? void 0 : styles.caret) == null ? void 0 : _d.call(styles), "otp-input__caret"),
-            "data-slot": "otp-input-caret"
-          }
-        ) : null
+        char ? /* @__PURE__ */ jsx("div", { className: tv.slotValue(), children: char }) : null,
+        hasFakeCaret && isActive ? /* @__PURE__ */ jsx("div", { className: tv.caret() }) : null
       ]
     }
   );
 }
 function OTPInputSeparator({ className, children, ...props }) {
-  var _a;
-  const { styles } = useContext(OTPInputCtx);
+  const tv = otpInputTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: (_a = styles == null ? void 0 : styles.separator) == null ? void 0 : _a.call(styles, { className }),
-      "data-slot": "otp-input-separator",
+      className: tcx(tv.separator(), className),
       ...props,
       children: children ?? /* @__PURE__ */ jsx("span", { children: "-" })
     }

package/dist/components/otp-input/src/tv.d.ts

@@ -36,7 +36,7 @@ export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
     group: string;
     slot: string[];
     slotValue: string;
-    caret: string;
+    caret: string[];
     separator: string;
 }, undefined, {
     variant: {
@@ -76,7 +76,7 @@ export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
     group: string;
     slot: string[];
     slotValue: string;
-    caret: string;
+    caret: string[];
     separator: string;
 }, import('tailwind-variants').TVReturnType<{
     variant: {
@@ -116,6 +116,6 @@ export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
     group: string;
     slot: string[];
     slotValue: string;
-    caret: string;
+    caret: string[];
     separator: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/otp-input/src/tv.js

@@ -12,7 +12,7 @@ const otpInputTv = tcv({
       "border border-solid border-transparent"
     ],
     slotValue: "",
-    caret: "absolute inset-y-2 left-1/2 w-px -translate-x-1/2",
+    caret: ["absolute inset-y-2 left-1/2 w-px -translate-x-1/2", "otp-input__caret"],
     separator: "text-secondary-foreground mx-1"
   },
   variants: {