@kuzenbo/core 0.0.1-alpha.4 → 0.0.1

package/dist/input-group.d.ts

@@ -1,139 +1,46 @@
-import "./accordion-trigger-B51W3Rdg.js";
-import "./alert-title-W1oau4D6.js";
-import { ButtonProps } from "./button.js";
-import { F as InputGroupInput, I as InputGroupButton, L as InputGroupAddon, N as InputGroupTextarea, P as InputGroupText } from "./use-sidebar-CYBPR0ue.js";
-import "./announcement-title-3cikJ44S.js";
-import "./autocomplete-value-DUN1Jprs.js";
-import "./avatar-image-DPunh5Hd.js";
-import "./breadcrumb-separator-C6zfQJ5p.js";
-import "./card-title-Dk0akcFR.js";
-import "./collapsible-trigger-DjL8pGgf.js";
-import "./use-combobox-anchor-DKwvfnFx.js";
-import "./dialog-trigger-B5HeOikl.js";
-import "./context-menu-trigger-DHPhlnvV.js";
-import "./drawer-viewport-DejmWgmc.js";
-import "./dropdown-menu-trigger-DEdnOFwc.js";
-import "./dropzone-context-DNiJThhB.js";
-import "./emoji-picker-skin-tone-selector-amzh0Wk6.js";
-import "./empty-title-CcQlXOlP.js";
-import "./hover-card-trigger-CRzFaoL4.js";
-import { TextareaProps } from "./textarea.js";
-import "./input-otp-slot-B19cyjk_.js";
-import "./kbd-group-PUw0yaIv.js";
-import "./marquee-item-BCswidMf.js";
-import "./menubar-trigger-Gx-lmpr9.js";
-import "./meter-value-FRDEI8VE.js";
-import "./navigation-menu-trigger-ryYftbUl.js";
-import "./number-field-scrub-area-cursor-BIS4ObSL.js";
-import "./pagination-previous-NpFopV3e.js";
-import "./pill-status-BS75xd9Z.js";
-import "./popover-trigger-C8pR26Xp.js";
-import "./progress-value-BGhNh_xb.js";
-import "./radio-group-item-DCXseC2o.js";
-import "./rating-star-CxVJUZmc.js";
-import "./resizable-panel-D4Brid-G.js";
-import "./scroll-bar-L-sXig2v.js";
-import "./select-value-D8pFrPKG.js";
-import "./sheet-trigger-B_N_tXmj.js";
-import "./tooltip-trigger-B43yfWhK.js";
-import "./table-row-BSEIkZEJ.js";
-import "./tabs-trigger-ChutNdGI.js";
-import "./use-timeline-Dcj9DR0I.js";
-import "./toggle-group-item-CrPxpOF5.js";
-import "./toolbar-separator-DbkRIfIA.js";
-import "./typography-ul-Dy8wQB_p.js";
-import "./index.js";
-import * as tailwind_variants0 from "tailwind-variants";
+import { InputSize } from "./input.js";
+import { a as InputGroupInput, c as InputGroupButtonProps, i as InputGroupTextProps, l as InputGroupAddon, n as InputGroupTextareaProps, o as InputGroupInputProps, r as InputGroupText, s as InputGroupButton, t as InputGroupTextarea, u as InputGroupAddonProps } from "./input-group-textarea-C6-pPujg.js";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/ui/input-group/input-group.d.ts
+type InputGroupProps = ComponentProps<"div"> & {
+  size?: InputSize;
+};
 declare const InputGroup: {
   ({
     className,
+    children,
+    size: providedSize,
     ...props
-  }: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+  }: InputGroupProps): react_jsx_runtime0.JSX.Element;
   Addon: ({
     className,
     align,
+    size,
     ...props
-  }: ComponentProps<"div"> & tailwind_variants0.VariantProps<tailwind_variants0.TVReturnType<{
-    align: {
-      "inline-start": string;
-      "inline-end": string;
-      "block-start": string;
-      "block-end": string;
-    };
-  }, undefined, "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--kb-radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
-    align: {
-      "inline-start": string;
-      "inline-end": string;
-      "block-start": string;
-      "block-end": string;
-    };
-  }, undefined, tailwind_variants0.TVReturnType<{
-    align: {
-      "inline-start": string;
-      "inline-end": string;
-      "block-start": string;
-      "block-end": string;
-    };
-  }, undefined, "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--kb-radius)-5px)] [&>svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>>) => react_jsx_runtime0.JSX.Element;
+  }: InputGroupAddonProps) => react_jsx_runtime0.JSX.Element;
   Button: ({
     className,
     type,
     variant,
     size,
     ...props
-  }: Omit<ComponentProps<({
-    className,
-    variant,
-    size,
-    isLoading,
-    children,
-    disabled,
-    ...props
-  }: ButtonProps) => react_jsx_runtime0.JSX.Element>, "size" | "type"> & tailwind_variants0.VariantProps<tailwind_variants0.TVReturnType<{
-    size: {
-      xs: string;
-      sm: string;
-      "icon-xs": string;
-      "icon-sm": string;
-    };
-  }, undefined, "flex items-center gap-2 text-sm shadow-none", {
-    size: {
-      xs: string;
-      sm: string;
-      "icon-xs": string;
-      "icon-sm": string;
-    };
-  }, undefined, tailwind_variants0.TVReturnType<{
-    size: {
-      xs: string;
-      sm: string;
-      "icon-xs": string;
-      "icon-sm": string;
-    };
-  }, undefined, "flex items-center gap-2 text-sm shadow-none", unknown, unknown, undefined>>> & {
-    type?: "button" | "submit" | "reset";
-  }) => react_jsx_runtime0.JSX.Element;
+  }: InputGroupButtonProps) => react_jsx_runtime0.JSX.Element;
   Input: ({
     className,
+    size,
     ...props
-  }: ComponentProps<"input">) => react_jsx_runtime0.JSX.Element;
+  }: InputGroupInputProps) => react_jsx_runtime0.JSX.Element;
   Text: ({
     className,
     ...props
-  }: ComponentProps<"span">) => react_jsx_runtime0.JSX.Element;
+  }: InputGroupTextProps) => react_jsx_runtime0.JSX.Element;
   Textarea: ({
     className,
     ...props
-  }: ComponentProps<({
-    className,
-    rows,
-    ...props
-  }: TextareaProps) => react_jsx_runtime0.JSX.Element>) => react_jsx_runtime0.JSX.Element;
+  }: InputGroupTextareaProps) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps };
 //# sourceMappingURL=input-group.d.ts.map

package/dist/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","names":[],"sources":["../src/ui/input-group/input-group.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAYM,UAAA;EAAA;;;KAAuC,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"input-group.d.ts","names":[],"sources":["../src/ui/input-group/input-group.tsx"],"mappings":";;;;;;KAeY,eAAA,GAAkB,cAAA;EAC5B,IAAA,GAAO,SAAA;AAAA;AAAA,cAGH,UAAA;EAAA;;;;;KAKH,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/input-group.js

@@ -1,16 +1,25 @@
 "use client";
 
-import { a as InputGroupAddon, i as InputGroupButton, n as InputGroupText, r as InputGroupInput, t as InputGroupTextarea } from "./input-group-textarea-ntvRL1EK.js";
+import { a as useComponentSize } from "./size-provider-D2Fy00Ky.js";
+import { a as InputGroupAddon, i as InputGroupButton, n as InputGroupText, o as InputGroupContext, r as InputGroupInput, t as InputGroupTextarea } from "./input-group-textarea-C6ixncHC.js";
 import { cn } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/ui/input-group/input-group.tsx
-const InputGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-danger has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-danger/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
-	"data-slot": "input-group",
-	role: "group",
-	...props
-});
+const InputGroup = ({ className, children, size: providedSize, ...props }) => {
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group/input-group relative flex w-full min-w-0 items-center border border-input transition-colors outline-none data-[size=xs]:h-6 data-[size=xs]:rounded-[min(var(--radius-md),8px)] data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=md]:h-9 data-[size=md]:rounded-md data-[size=lg]:h-10 data-[size=lg]:rounded-md data-[size=xl]:h-11 data-[size=xl]:rounded-md in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-danger has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-danger/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		"data-size": size,
+		"data-slot": "input-group",
+		role: "group",
+		...props,
+		children: /* @__PURE__ */ jsx(InputGroupContext.Provider, {
+			value: { size },
+			children
+		})
+	});
+};
 InputGroup.Addon = InputGroupAddon;
 InputGroup.Button = InputGroupButton;
 InputGroup.Input = InputGroupInput;

package/dist/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../src/ui/input-group/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { InputGroupAddon } from \"./input-group-addon\";\nimport { InputGroupButton } from \"./input-group-button\";\nimport { InputGroupInput } from \"./input-group-input\";\nimport { InputGroupText } from \"./input-group-text\";\nimport { InputGroupTextarea } from \"./input-group-textarea\";\n\nconst InputGroup = ({ className, ...props }: ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-danger has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-danger/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n      className\n    )}\n    data-slot=\"input-group\"\n    role=\"group\"\n    {...props}\n  />\n);\n\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.Input = InputGroupInput;\nInputGroup.Text = InputGroupText;\nInputGroup.Textarea = InputGroupTextarea;\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;AAYA,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC;CACC,WAAW,GACT,klCACA,UACD;CACD,aAAU;CACV,MAAK;CACL,GAAI;EACJ;AAGJ,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,QAAQ;AACnB,WAAW,OAAO;AAClB,WAAW,WAAW"}
+{"version":3,"file":"input-group.js","names":[],"sources":["../src/ui/input-group/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { InputGroupAddon } from \"./input-group-addon\";\nimport { InputGroupButton } from \"./input-group-button\";\nimport { InputGroupContext } from \"./input-group-context\";\nimport { InputGroupInput } from \"./input-group-input\";\nimport { InputGroupText } from \"./input-group-text\";\nimport { InputGroupTextarea } from \"./input-group-textarea\";\nexport type InputGroupProps = ComponentProps<\"div\"> & {\n  size?: InputSize;\n};\n\nconst InputGroup = ({\n  className,\n  children,\n  size: providedSize,\n  ...props\n}: InputGroupProps) => {\n  const size = useComponentSize(providedSize);\n\n  return (\n    <div\n      className={cn(\n        \"group/input-group relative flex w-full min-w-0 items-center border border-input transition-colors outline-none data-[size=xs]:h-6 data-[size=xs]:rounded-[min(var(--radius-md),8px)] data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=md]:h-9 data-[size=md]:rounded-md data-[size=lg]:h-10 data-[size=lg]:rounded-md data-[size=xl]:h-11 data-[size=xl]:rounded-md in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-danger has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-danger/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      data-size={size}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    >\n      <InputGroupContext.Provider value={{ size }}>\n        {children}\n      </InputGroupContext.Provider>\n    </div>\n  );\n};\n\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.Input = InputGroupInput;\nInputGroup.Text = InputGroupText;\nInputGroup.Textarea = InputGroupTextarea;\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n};\n\nexport type { InputGroupAddonProps } from \"./input-group-addon\";\nexport type { InputGroupButtonProps } from \"./input-group-button\";\nexport type { InputGroupInputProps } from \"./input-group-input\";\nexport type { InputGroupTextProps } from \"./input-group-text\";\nexport type { InputGroupTextareaProps } from \"./input-group-textarea\";\n"],"mappings":";;;;;;;;AAmBA,MAAM,cAAc,EAClB,WACA,UACA,MAAM,cACN,GAAG,YACkB;CACrB,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAAC;EACC,WAAW,GACT,y1CACA,UACD;EACD,aAAW;EACX,aAAU;EACV,MAAK;EACL,GAAI;YAEJ,oBAAC,kBAAkB;GAAS,OAAO,EAAE,MAAM;GACxC;IAC0B;GACzB;;AAIV,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,QAAQ;AACnB,WAAW,OAAO;AAClB,WAAW,WAAW"}

package/dist/input-otp-slot-BA8DE3oz.js

@@ -0,0 +1,116 @@
+import { cn, tv } from "tailwind-variants";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MinusSignIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { OTPInputContext } from "input-otp";
+
+//#region src/ui/input-otp/input-otp-context.tsx
+const InputOTPContext = createContext({ size: "md" });
+
+//#endregion
+//#region src/ui/input-otp/input-otp-group.tsx
+const inputOTPGroupVariants = tv({
+	base: "flex items-center has-aria-invalid:border-danger has-aria-invalid:ring-[3px] has-aria-invalid:ring-danger/20 dark:has-aria-invalid:ring-danger/40",
+	variants: { size: {
+		xs: "rounded-[min(var(--radius-md),8px)]",
+		sm: "rounded-[min(var(--radius-md),10px)]",
+		md: "rounded-md",
+		lg: "rounded-md",
+		xl: "rounded-md"
+	} },
+	defaultVariants: { size: "md" }
+});
+const InputOTPGroup = ({ className, size, ...props }) => {
+	const { size: rootSize } = useContext(InputOTPContext);
+	const resolvedSize = size ?? rootSize ?? "md";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(inputOTPGroupVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "input-otp-group",
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/input-otp/input-otp-separator.tsx
+const inputOTPSeparatorVariants = tv({
+	base: "flex items-center justify-center",
+	variants: { size: {
+		xs: "[&_svg:not([class*='size-'])]:size-3",
+		sm: "[&_svg:not([class*='size-'])]:size-3.5",
+		md: "[&_svg:not([class*='size-'])]:size-4",
+		lg: "[&_svg:not([class*='size-'])]:size-4",
+		xl: "[&_svg:not([class*='size-'])]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const InputOTPSeparator = ({ className, size, ...props }) => {
+	const { size: rootSize } = useContext(InputOTPContext);
+	const resolvedSize = size ?? rootSize ?? "md";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(inputOTPSeparatorVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "input-otp-separator",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: MinusSignIcon,
+			strokeWidth: 2
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/input-otp/input-otp-slot.tsx
+const inputOTPSlotVariants = tv({
+	slots: {
+		caret: "animate-caret-blink bg-foreground duration-1000",
+		root: "relative flex items-center justify-center border-y border-r border-input shadow-xs transition-all outline-none first:border-l aria-invalid:border-danger first:rounded-l-md last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-danger data-[active=true]:aria-invalid:ring-danger/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-danger/40"
+	},
+	variants: { size: {
+		xs: {
+			caret: "h-3 w-px",
+			root: "size-6 text-xs first:rounded-l-[min(var(--radius-md),8px)] last:rounded-r-[min(var(--radius-md),8px)]"
+		},
+		sm: {
+			caret: "h-3.5 w-px",
+			root: "size-8 text-sm first:rounded-l-[min(var(--radius-md),10px)] last:rounded-r-[min(var(--radius-md),10px)]"
+		},
+		md: {
+			caret: "h-4 w-px",
+			root: "size-9 text-base first:rounded-l-md last:rounded-r-md md:text-sm"
+		},
+		lg: {
+			caret: "h-4 w-px",
+			root: "size-10 text-base first:rounded-l-md last:rounded-r-md md:text-sm"
+		},
+		xl: {
+			caret: "h-5 w-px",
+			root: "size-11 text-base first:rounded-l-md last:rounded-r-md"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+const InputOTPSlot = ({ index, className, size, ...props }) => {
+	const inputOTPContext = useContext(OTPInputContext);
+	const { size: rootSize } = useContext(InputOTPContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+	const resolvedSize = size ?? rootSize ?? "md";
+	const { caret, root } = inputOTPSlotVariants({ size: resolvedSize });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(root(), className),
+		"data-active": isActive,
+		"data-size": resolvedSize,
+		"data-slot": "input-otp-slot",
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: caret() })
+		})]
+	});
+};
+
+//#endregion
+export { InputOTPContext as i, InputOTPSeparator as n, InputOTPGroup as r, InputOTPSlot as t };
+//# sourceMappingURL=input-otp-slot-BA8DE3oz.js.map

package/dist/input-otp-slot-BA8DE3oz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp-slot-BA8DE3oz.js","names":[],"sources":["../src/ui/input-otp/input-otp-context.tsx","../src/ui/input-otp/input-otp-group.tsx","../src/ui/input-otp/input-otp-separator.tsx","../src/ui/input-otp/input-otp-slot.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport type { InputSize } from \"../input/input\";\n\ninterface InputOTPContextValue {\n  size: InputSize;\n}\n\nconst InputOTPContext = createContext<InputOTPContextValue>({\n  size: \"md\",\n});\n\nexport { InputOTPContext };\n","import type { ComponentProps } from \"react\";\n\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { InputOTPContext } from \"./input-otp-context\";\n\nconst inputOTPGroupVariants = tv({\n  base: \"flex items-center has-aria-invalid:border-danger has-aria-invalid:ring-[3px] has-aria-invalid:ring-danger/20 dark:has-aria-invalid:ring-danger/40\",\n  variants: {\n    size: {\n      xs: \"rounded-[min(var(--radius-md),8px)]\",\n      sm: \"rounded-[min(var(--radius-md),10px)]\",\n      md: \"rounded-md\",\n      lg: \"rounded-md\",\n      xl: \"rounded-md\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype InputOTPGroupVariantProps = VariantProps<typeof inputOTPGroupVariants>;\n\nexport type InputOTPGroupProps = ComponentProps<\"div\"> &\n  InputOTPGroupVariantProps & {\n    size?: InputSize;\n  };\n\nconst InputOTPGroup = ({ className, size, ...props }: InputOTPGroupProps) => {\n  const { size: rootSize } = useContext(InputOTPContext);\n  const resolvedSize: InputSize = size ?? rootSize ?? \"md\";\n\n  return (\n    <div\n      className={cn(inputOTPGroupVariants({ size: resolvedSize }), className)}\n      data-size={resolvedSize}\n      data-slot=\"input-otp-group\"\n      {...props}\n    />\n  );\n};\n\nexport { InputOTPGroup };\n","import type { ComponentProps } from \"react\";\n\nimport { MinusSignIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { InputOTPContext } from \"./input-otp-context\";\n\nconst inputOTPSeparatorVariants = tv({\n  base: \"flex items-center justify-center\",\n  variants: {\n    size: {\n      xs: \"[&_svg:not([class*='size-'])]:size-3\",\n      sm: \"[&_svg:not([class*='size-'])]:size-3.5\",\n      md: \"[&_svg:not([class*='size-'])]:size-4\",\n      lg: \"[&_svg:not([class*='size-'])]:size-4\",\n      xl: \"[&_svg:not([class*='size-'])]:size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype InputOTPSeparatorVariantProps = VariantProps<\n  typeof inputOTPSeparatorVariants\n>;\n\nexport type InputOTPSeparatorProps = ComponentProps<\"div\"> &\n  InputOTPSeparatorVariantProps & {\n    size?: InputSize;\n  };\n\nconst InputOTPSeparator = ({\n  className,\n  size,\n  ...props\n}: InputOTPSeparatorProps) => {\n  const { size: rootSize } = useContext(InputOTPContext);\n  const resolvedSize: InputSize = size ?? rootSize ?? \"md\";\n\n  return (\n    <div\n      className={cn(\n        inputOTPSeparatorVariants({ size: resolvedSize }),\n        className\n      )}\n      data-size={resolvedSize}\n      data-slot=\"input-otp-separator\"\n      role=\"separator\"\n      {...props}\n    >\n      <HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />\n    </div>\n  );\n};\n\nexport { InputOTPSeparator };\n","import { OTPInputContext } from \"input-otp\";\nimport { type ComponentProps, useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { InputOTPContext } from \"./input-otp-context\";\n\nconst inputOTPSlotVariants = tv({\n  slots: {\n    caret: \"animate-caret-blink bg-foreground duration-1000\",\n    root: \"relative flex items-center justify-center border-y border-r border-input shadow-xs transition-all outline-none first:border-l aria-invalid:border-danger first:rounded-l-md last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-danger data-[active=true]:aria-invalid:ring-danger/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-danger/40\",\n  },\n  variants: {\n    size: {\n      xs: {\n        caret: \"h-3 w-px\",\n        root: \"size-6 text-xs first:rounded-l-[min(var(--radius-md),8px)] last:rounded-r-[min(var(--radius-md),8px)]\",\n      },\n      sm: {\n        caret: \"h-3.5 w-px\",\n        root: \"size-8 text-sm first:rounded-l-[min(var(--radius-md),10px)] last:rounded-r-[min(var(--radius-md),10px)]\",\n      },\n      md: {\n        caret: \"h-4 w-px\",\n        root: \"size-9 text-base first:rounded-l-md last:rounded-r-md md:text-sm\",\n      },\n      lg: {\n        caret: \"h-4 w-px\",\n        root: \"size-10 text-base first:rounded-l-md last:rounded-r-md md:text-sm\",\n      },\n      xl: {\n        caret: \"h-5 w-px\",\n        root: \"size-11 text-base first:rounded-l-md last:rounded-r-md\",\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype InputOTPSlotVariantProps = VariantProps<typeof inputOTPSlotVariants>;\nexport type InputOTPSlotProps = ComponentProps<\"div\"> & {\n  index: number;\n} & InputOTPSlotVariantProps & {\n    size?: InputSize;\n  };\n\nconst InputOTPSlot = ({\n  index,\n  className,\n  size,\n  ...props\n}: InputOTPSlotProps) => {\n  const inputOTPContext = useContext(OTPInputContext);\n  const { size: rootSize } = useContext(InputOTPContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const resolvedSize: InputSize = size ?? rootSize ?? \"md\";\n  const { caret, root } = inputOTPSlotVariants({ size: resolvedSize });\n\n  return (\n    <div\n      className={cn(root(), className)}\n      data-active={isActive}\n      data-size={resolvedSize}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className={caret()} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { InputOTPSlot };\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,cAAoC,EAC1D,MAAM,MACP,CAAC;;;;ACDF,MAAM,wBAAwB,GAAG;CAC/B,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AASF,MAAM,iBAAiB,EAAE,WAAW,MAAM,GAAG,YAAgC;CAC3E,MAAM,EAAE,MAAM,aAAa,WAAW,gBAAgB;CACtD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QACE,oBAAC;EACC,WAAW,GAAG,sBAAsB,EAAE,MAAM,cAAc,CAAC,EAAE,UAAU;EACvE,aAAW;EACX,aAAU;EACV,GAAI;GACJ;;;;;AC/BN,MAAM,4BAA4B,GAAG;CACnC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAWF,MAAM,qBAAqB,EACzB,WACA,MACA,GAAG,YACyB;CAC5B,MAAM,EAAE,MAAM,aAAa,WAAW,gBAAgB;CACtD,MAAM,eAA0B,QAAQ,YAAY;AAEpD,QACE,oBAAC;EACC,WAAW,GACT,0BAA0B,EAAE,MAAM,cAAc,CAAC,EACjD,UACD;EACD,aAAW;EACX,aAAU;EACV,MAAK;EACL,GAAI;YAEJ,oBAAC;GAAc,MAAM;GAAe,aAAa;IAAK;GAClD;;;;;AChDV,MAAM,uBAAuB,GAAG;CAC9B,OAAO;EACL,OAAO;EACP,MAAM;EACP;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO;GACP,MAAM;GACP;EACD,IAAI;GACF,OAAO;GACP,MAAM;GACP;EACD,IAAI;GACF,OAAO;GACP,MAAM;GACP;EACD,IAAI;GACF,OAAO;GACP,MAAM;GACP;EACD,IAAI;GACF,OAAO;GACP,MAAM;GACP;EACF,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AASF,MAAM,gBAAgB,EACpB,OACA,WACA,MACA,GAAG,YACoB;CACvB,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,EAAE,MAAM,aAAa,WAAW,gBAAgB;CACtD,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,EAAE;CAC5E,MAAM,eAA0B,QAAQ,YAAY;CACpD,MAAM,EAAE,OAAO,SAAS,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEpE,QACE,qBAAC;EACC,WAAW,GAAG,MAAM,EAAE,UAAU;EAChC,eAAa;EACb,aAAW;EACX,aAAU;EACV,GAAI;aAEH,MACA,gBACC,oBAAC;GAAI,WAAU;aACb,oBAAC,SAAI,WAAW,OAAO,GAAI;IACvB;GAEJ"}

package/dist/input-otp-slot-BxEhjqR5.d.ts

@@ -0,0 +1,173 @@
+import { InputSize } from "./input.js";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/input-otp/input-otp-group.d.ts
+declare const inputOTPGroupVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "flex items-center has-aria-invalid:border-danger has-aria-invalid:ring-[3px] has-aria-invalid:ring-danger/20 dark:has-aria-invalid:ring-danger/40", {
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "flex items-center has-aria-invalid:border-danger has-aria-invalid:ring-[3px] has-aria-invalid:ring-danger/20 dark:has-aria-invalid:ring-danger/40", unknown, unknown, undefined>>;
+type InputOTPGroupVariantProps = VariantProps<typeof inputOTPGroupVariants>;
+type InputOTPGroupProps = ComponentProps<"div"> & InputOTPGroupVariantProps & {
+  size?: InputSize;
+};
+declare const InputOTPGroup: ({
+  className,
+  size,
+  ...props
+}: InputOTPGroupProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/input-otp/input-otp-separator.d.ts
+declare const inputOTPSeparatorVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "flex items-center justify-center", {
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "flex items-center justify-center", unknown, unknown, undefined>>;
+type InputOTPSeparatorVariantProps = VariantProps<typeof inputOTPSeparatorVariants>;
+type InputOTPSeparatorProps = ComponentProps<"div"> & InputOTPSeparatorVariantProps & {
+  size?: InputSize;
+};
+declare const InputOTPSeparator: ({
+  className,
+  size,
+  ...props
+}: InputOTPSeparatorProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/input-otp/input-otp-slot.d.ts
+declare const inputOTPSlotVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: {
+      caret: string;
+      root: string;
+    };
+    sm: {
+      caret: string;
+      root: string;
+    };
+    md: {
+      caret: string;
+      root: string;
+    };
+    lg: {
+      caret: string;
+      root: string;
+    };
+    xl: {
+      caret: string;
+      root: string;
+    };
+  };
+}, {
+  caret: string;
+  root: string;
+}, undefined, {
+  size: {
+    xs: {
+      caret: string;
+      root: string;
+    };
+    sm: {
+      caret: string;
+      root: string;
+    };
+    md: {
+      caret: string;
+      root: string;
+    };
+    lg: {
+      caret: string;
+      root: string;
+    };
+    xl: {
+      caret: string;
+      root: string;
+    };
+  };
+}, {
+  caret: string;
+  root: string;
+}, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: {
+      caret: string;
+      root: string;
+    };
+    sm: {
+      caret: string;
+      root: string;
+    };
+    md: {
+      caret: string;
+      root: string;
+    };
+    lg: {
+      caret: string;
+      root: string;
+    };
+    xl: {
+      caret: string;
+      root: string;
+    };
+  };
+}, {
+  caret: string;
+  root: string;
+}, undefined, unknown, unknown, undefined>>;
+type InputOTPSlotVariantProps = VariantProps<typeof inputOTPSlotVariants>;
+type InputOTPSlotProps = ComponentProps<"div"> & {
+  index: number;
+} & InputOTPSlotVariantProps & {
+  size?: InputSize;
+};
+declare const InputOTPSlot: ({
+  index,
+  className,
+  size,
+  ...props
+}: InputOTPSlotProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InputOTPGroup as a, InputOTPSeparatorProps as i, InputOTPSlotProps as n, InputOTPGroupProps as o, InputOTPSeparator as r, InputOTPSlot as t };
+//# sourceMappingURL=input-otp-slot-BxEhjqR5.d.ts.map

package/dist/input-otp-slot-BxEhjqR5.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp-slot-BxEhjqR5.d.ts","names":[],"sources":["../src/ui/input-otp/input-otp-group.tsx","../src/ui/input-otp/input-otp-separator.tsx","../src/ui/input-otp/input-otp-slot.tsx"],"mappings":";;;;;;;cASM,qBAAA,EAcJ,kBAAA,CAdyB,YAAA;;;;;;;;;;;;;;;;cAczB,kBAAA,CAAA,YAAA;;;;;;;;;KAEG,yBAAA,GAA4B,YAAA,QAAoB,qBAAA;AAAA,KAEzC,kBAAA,GAAqB,cAAA,UAC/B,yBAAA;EACE,IAAA,GAAO,SAAA;AAAA;AAAA,cAGL,aAAA;EAAiB,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAA+B,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cCrBlE,yBAAA,EAcJ,kBAAA,CAd6B,YAAA;;;;;;;;;;;;;;;;cAc7B,kBAAA,CAAA,YAAA;;;;;;;;;KAEG,6BAAA,GAAgC,YAAA,QAC5B,yBAAA;AAAA,KAGG,sBAAA,GAAyB,cAAA,UACnC,6BAAA;EACE,IAAA,GAAO,SAAA;AAAA;AAAA,cAGL,iBAAA;EAAqB,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAIxB,sBAAA,KAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cChCnB,oBAAA,EAgCJ,kBAAA,CAhCwB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCxB,kBAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEG,wBAAA,GAA2B,YAAA,QAAoB,oBAAA;AAAA,KACxC,iBAAA,GAAoB,cAAA;EAC9B,KAAA;AAAA,IACE,wBAAA;EACA,IAAA,GAAO,SAAA;AAAA;AAAA,cAGL,YAAA;EAAgB,KAAA;EAAA,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAKnB,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/input-otp.d.ts

@@ -1,32 +1,40 @@
-import { n as InputOTPSeparator, r as InputOTPGroup, t as InputOTPSlot } from "./input-otp-slot-B19cyjk_.js";
+import { InputSize } from "./input.js";
+import { a as InputOTPGroup, i as InputOTPSeparatorProps, n as InputOTPSlotProps, o as InputOTPGroupProps, r as InputOTPSeparator, t as InputOTPSlot } from "./input-otp-slot-BxEhjqR5.js";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { OTPInput } from "input-otp";
 
 //#region src/ui/input-otp/input-otp.d.ts
+type NativeInputOTPProps = ComponentProps<typeof OTPInput>;
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type InputOTPProps = DistributiveOmit<NativeInputOTPProps, "size"> & {
+  containerClassName?: string;
+  size?: InputSize;
+};
 declare const InputOTP: {
   ({
     className,
     containerClassName,
+    size: providedSize,
     ...props
-  }: ComponentProps<typeof OTPInput> & {
-    containerClassName?: string;
-  }): react_jsx_runtime0.JSX.Element;
+  }: InputOTPProps): react_jsx_runtime0.JSX.Element;
   Group: ({
     className,
+    size,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: InputOTPGroupProps) => react_jsx_runtime0.JSX.Element;
   Separator: ({
+    className,
+    size,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: InputOTPSeparatorProps) => react_jsx_runtime0.JSX.Element;
   Slot: ({
     index,
     className,
+    size,
     ...props
-  }: ComponentProps<"div"> & {
-    index: number;
-  }) => react_jsx_runtime0.JSX.Element;
+  }: InputOTPSlotProps) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+export { InputOTP, InputOTPGroup, type InputOTPGroupProps, InputOTPProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps };
 //# sourceMappingURL=input-otp.d.ts.map

package/dist/input-otp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","names":[],"sources":["../src/ui/input-otp/input-otp.tsx"],"mappings":";;;;;;cAWM,QAAA;EAAA;;;;KAIH,cAAA,QAAsB,QAAA;IACvB,kBAAA;EAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"input-otp.d.ts","names":[],"sources":["../src/ui/input-otp/input-otp.tsx"],"mappings":";;;;;;;KAeK,mBAAA,GAAsB,cAAA,QAAsB,QAAA;AAAA,KAC5C,gBAAA,cAA8B,WAAA,IAAe,CAAA,mBAC9C,IAAA,CAAK,CAAA,EAAG,CAAA;AAAA,KAGA,aAAA,GAAgB,gBAAA,CAAiB,mBAAA;EAC3C,kBAAA;EACA,IAAA,GAAO,SAAA;AAAA;AAAA,cAGH,QAAA;EAAA;;;;;KAKH,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/input-otp.js

@@ -1,18 +1,26 @@
 "use client";
 
-import { n as InputOTPSeparator, r as InputOTPGroup, t as InputOTPSlot } from "./input-otp-slot-BPkvsGjg.js";
+import { a as useComponentSize } from "./size-provider-D2Fy00Ky.js";
+import { i as InputOTPContext, n as InputOTPSeparator, r as InputOTPGroup, t as InputOTPSlot } from "./input-otp-slot-BA8DE3oz.js";
 import { cn } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 import { OTPInput } from "input-otp";
 
 //#region src/ui/input-otp/input-otp.tsx
-const InputOTP = ({ className, containerClassName, ...props }) => /* @__PURE__ */ jsx(OTPInput, {
-	className: cn("disabled:cursor-not-allowed", className),
-	containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
-	"data-slot": "input-otp",
-	spellCheck: false,
-	...props
-});
+const InputOTP = ({ className, containerClassName, size: providedSize, ...props }) => {
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx(InputOTPContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(OTPInput, {
+			className: cn("disabled:cursor-not-allowed", className),
+			containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
+			"data-size": size,
+			"data-slot": "input-otp",
+			spellCheck: false,
+			...props
+		})
+	});
+};
 InputOTP.Group = InputOTPGroup;
 InputOTP.Separator = InputOTPSeparator;
 InputOTP.Slot = InputOTPSlot;

package/dist/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../src/ui/input-otp/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { OTPInput } from \"input-otp\";\nimport { cn } from \"tailwind-variants\";\n\nimport { InputOTPGroup } from \"./input-otp-group\";\nimport { InputOTPSeparator } from \"./input-otp-separator\";\nimport { InputOTPSlot } from \"./input-otp-slot\";\n\nconst InputOTP = ({\n  className,\n  containerClassName,\n  ...props\n}: ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n}) => (\n  <OTPInput\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    containerClassName={cn(\n      \"cn-input-otp flex items-center has-disabled:opacity-50\",\n      containerClassName\n    )}\n    data-slot=\"input-otp\"\n    spellCheck={false}\n    {...props}\n  />\n);\n\nInputOTP.Group = InputOTPGroup;\nInputOTP.Separator = InputOTPSeparator;\nInputOTP.Slot = InputOTPSlot;\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n"],"mappings":";;;;;;;;AAWA,MAAM,YAAY,EAChB,WACA,oBACA,GAAG,YAIH,oBAAC;CACC,WAAW,GAAG,+BAA+B,UAAU;CACvD,oBAAoB,GAClB,0DACA,mBACD;CACD,aAAU;CACV,YAAY;CACZ,GAAI;EACJ;AAGJ,SAAS,QAAQ;AACjB,SAAS,YAAY;AACrB,SAAS,OAAO"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../src/ui/input-otp/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { OTPInput } from \"input-otp\";\nimport { cn } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { InputOTPContext } from \"./input-otp-context\";\nimport { InputOTPGroup } from \"./input-otp-group\";\nimport { InputOTPSeparator } from \"./input-otp-separator\";\nimport { InputOTPSlot } from \"./input-otp-slot\";\n\ntype NativeInputOTPProps = ComponentProps<typeof OTPInput>;\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nexport type InputOTPProps = DistributiveOmit<NativeInputOTPProps, \"size\"> & {\n  containerClassName?: string;\n  size?: InputSize;\n};\n\nconst InputOTP = ({\n  className,\n  containerClassName,\n  size: providedSize,\n  ...props\n}: InputOTPProps) => {\n  const size = useComponentSize(providedSize);\n\n  return (\n    <InputOTPContext.Provider value={{ size }}>\n      <OTPInput\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        containerClassName={cn(\n          \"cn-input-otp flex items-center has-disabled:opacity-50\",\n          containerClassName\n        )}\n        data-size={size}\n        data-slot=\"input-otp\"\n        spellCheck={false}\n        {...props}\n      />\n    </InputOTPContext.Provider>\n  );\n};\n\nInputOTP.Group = InputOTPGroup;\nInputOTP.Separator = InputOTPSeparator;\nInputOTP.Slot = InputOTPSlot;\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n\nexport type { InputOTPGroupProps } from \"./input-otp-group\";\nexport type { InputOTPSeparatorProps } from \"./input-otp-separator\";\nexport type { InputOTPSlotProps } from \"./input-otp-slot\";\n"],"mappings":";;;;;;;;;AAyBA,MAAM,YAAY,EAChB,WACA,oBACA,MAAM,cACN,GAAG,YACgB;CACnB,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAAC,gBAAgB;EAAS,OAAO,EAAE,MAAM;YACvC,oBAAC;GACC,WAAW,GAAG,+BAA+B,UAAU;GACvD,oBAAoB,GAClB,0DACA,mBACD;GACD,aAAW;GACX,aAAU;GACV,YAAY;GACZ,GAAI;IACJ;GACuB;;AAI/B,SAAS,QAAQ;AACjB,SAAS,YAAY;AACrB,SAAS,OAAO"}