@moduix/react 2.2.0 → 2.2.4

package/dist/components/password-input/PasswordInput.js

@@ -1,85 +1,90 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { EyeClosedIcon, EyeIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import PasswordInput_module_default from "./PasswordInput.module.js";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/react/password-input";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PasswordInput, usePasswordInput } from "@ark-ui/react/password-input";
-//#region src/components/password-input/PasswordInput.tsx
-const PasswordInputRoot = forwardRef(function PasswordInputRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.Root, {
-		ref,
-		"data-slot": "password-input-root",
-		className: clsx(PasswordInput_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import PasswordInput_module from "./PasswordInput.module.js";
+const PasswordInput_PasswordInputRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.Root, {
+        ref: ref,
+        "data-slot": "password-input-root",
+        className: clsx(PasswordInput_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const PasswordInputRootProvider = forwardRef(function PasswordInputRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.RootProvider, {
-		ref,
-		"data-slot": "password-input-root-provider",
-		className: clsx(PasswordInput_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const PasswordInput_PasswordInputRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.RootProvider, {
+        ref: ref,
+        "data-slot": "password-input-root-provider",
+        className: clsx(PasswordInput_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const PasswordInputLabel = forwardRef(function PasswordInputLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.Label, {
-		ref,
-		"data-slot": "password-input-label",
-		className: clsx(PasswordInput_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const PasswordInput_PasswordInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.Label, {
+        ref: ref,
+        "data-slot": "password-input-label",
+        className: clsx(PasswordInput_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
-const PasswordInputControl = forwardRef(function PasswordInputControl({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.Control, {
-		ref,
-		"data-slot": "password-input-control",
-		className: clsx(PasswordInput_module_default.control, normalizeClassName(className)),
-		...props
-	});
+const PasswordInput_PasswordInputControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.Control, {
+        ref: ref,
+        "data-slot": "password-input-control",
+        className: clsx(PasswordInput_module.control, normalizeClassName(className)),
+        ...props
+    });
 });
-const PasswordInputInput = forwardRef(function PasswordInputInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.Input, {
-		ref,
-		"data-slot": "password-input-input",
-		className: clsx(PasswordInput_module_default.input, normalizeClassName(className)),
-		...props
-	});
+const PasswordInput_PasswordInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.Input, {
+        ref: ref,
+        "data-slot": "password-input-input",
+        className: clsx(PasswordInput_module.input, normalizeClassName(className)),
+        ...props
+    });
 });
-const PasswordInputVisibilityTrigger = forwardRef(function PasswordInputVisibilityTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.VisibilityTrigger, {
-		ref,
-		"data-slot": "password-input-visibility-trigger",
-		className: clsx(PasswordInput_module_default.visibilityTrigger, normalizeClassName(className)),
-		...props
-	});
+const PasswordInput_PasswordInputVisibilityTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.VisibilityTrigger, {
+        ref: ref,
+        "data-slot": "password-input-visibility-trigger",
+        className: clsx(PasswordInput_module.visibilityTrigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const PasswordInputIndicator = forwardRef(function PasswordInputIndicator({ className, children, fallback, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PasswordInput.Indicator, {
-		ref,
-		"data-slot": "password-input-indicator",
-		className: clsx(PasswordInput_module_default.indicator, normalizeClassName(className)),
-		fallback: fallback ?? /* @__PURE__ */ jsx(EyeClosedIcon, {}),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(EyeIcon, {})
-	});
+const PasswordInput_PasswordInputIndicator = /*#__PURE__*/ forwardRef(function({ className, children, fallback, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PasswordInput.Indicator, {
+        ref: ref,
+        "data-slot": "password-input-indicator",
+        className: clsx(PasswordInput_module.indicator, normalizeClassName(className)),
+        fallback: fallback ?? /*#__PURE__*/ jsx(EyeClosedIcon, {}),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(EyeIcon, {})
+    });
 });
-const PasswordInputField = forwardRef(function PasswordInputField(props, ref) {
-	return /* @__PURE__ */ jsxs(PasswordInputControl, {
-		ref,
-		...props,
-		children: [/* @__PURE__ */ jsx(PasswordInputInput, {}), /* @__PURE__ */ jsx(PasswordInputVisibilityTrigger, { children: /* @__PURE__ */ jsx(PasswordInputIndicator, {}) })]
-	});
+const PasswordInput_PasswordInputField = /*#__PURE__*/ forwardRef(function(props, ref) {
+    return /*#__PURE__*/ jsxs(PasswordInput_PasswordInputControl, {
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(PasswordInput_PasswordInputInput, {}),
+            /*#__PURE__*/ jsx(PasswordInput_PasswordInputVisibilityTrigger, {
+                children: /*#__PURE__*/ jsx(PasswordInput_PasswordInputIndicator, {})
+            })
+        ]
+    });
 });
-const PasswordInput$1 = Object.assign(PasswordInputRoot, {
-	Root: PasswordInputRoot,
-	RootProvider: PasswordInputRootProvider,
-	Label: PasswordInputLabel,
-	Control: PasswordInputControl,
-	Field: PasswordInputField,
-	Input: PasswordInputInput,
-	VisibilityTrigger: PasswordInputVisibilityTrigger,
-	Indicator: PasswordInputIndicator
+const PasswordInput_PasswordInput = Object.assign(PasswordInput_PasswordInputRoot, {
+    Root: PasswordInput_PasswordInputRoot,
+    RootProvider: PasswordInput_PasswordInputRootProvider,
+    Context: PasswordInput.Context,
+    Label: PasswordInput_PasswordInputLabel,
+    Control: PasswordInput_PasswordInputControl,
+    Field: PasswordInput_PasswordInputField,
+    Input: PasswordInput_PasswordInputInput,
+    VisibilityTrigger: PasswordInput_PasswordInputVisibilityTrigger,
+    Indicator: PasswordInput_PasswordInputIndicator
 });
-//#endregion
-export { PasswordInput$1 as PasswordInput, usePasswordInput };
+export { PasswordInput_PasswordInput as PasswordInput, usePasswordInput, usePasswordInputContext };

package/dist/components/password-input/PasswordInput.module.js

@@ -1,12 +1,10 @@
-import './PasswordInput.css';
-//#region src/components/password-input/PasswordInput.module.css
-var PasswordInput_module_default = {
-	"control": "_8wEG0G_control",
-	"indicator": "_8wEG0G_indicator",
-	"input": "_8wEG0G_input",
-	"label": "_8wEG0G_label",
-	"root": "_8wEG0G_root",
-	"visibilityTrigger": "_8wEG0G_visibilityTrigger"
+import "./PasswordInput_module.css";
+const PasswordInput_module = {
+    root: "root-OrlafY",
+    label: "label-ZAQCRM",
+    control: "control-h2eb01",
+    input: "input-ImUVi4",
+    visibilityTrigger: "visibilityTrigger-UlZG7F",
+    indicator: "indicator-ede0IZ"
 };
-//#endregion
-export { PasswordInput_module_default as default };
+export default PasswordInput_module;

package/dist/components/password-input/{PasswordInput.css → PasswordInput_module.css}

@@ -1,19 +1,15 @@
 @layer moduix.components {
-  ._8wEG0G_root {
+  .root-OrlafY {
     box-sizing: border-box;
     gap: var(--moduix-password-input-gap, var(--moduix-field-gap, var(--moduix-spacing-1)));
     width: var(--moduix-password-input-width, 100%);
-    max-width: var(--moduix-password-input-max-width, 20rem);
+    max-width: var(--moduix-password-input-max-width, none);
     color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     flex-direction: column;
     display: flex;
-
-    &[data-disabled] {
-      opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
-    }
   }
 
-  ._8wEG0G_label {
+  .label-ZAQCRM {
     align-items: center;
     gap: var(--moduix-password-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
     color: var(--moduix-password-input-label-color, var(--moduix-field-label-color, var(--moduix-color-foreground)));
@@ -21,13 +17,13 @@
     font-weight: var(--moduix-password-input-label-font-weight, var(--moduix-field-label-font-weight, var(--moduix-weight-medium)));
     line-height: var(--moduix-password-input-label-line-height, var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm)));
     display: inline-flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
-    }
+  .label-ZAQCRM[data-disabled] {
+    opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
   }
 
-  ._8wEG0G_control {
+  .control-h2eb01 {
     box-sizing: border-box;
     width: 100%;
     min-height: var(--moduix-password-input-height, var(--moduix-input-height, var(--moduix-input-height-md, var(--moduix-size-md))));
@@ -46,30 +42,26 @@
     align-items: center;
     padding-inline-end: var(--moduix-password-input-trigger-inset, var(--moduix-spacing-2));
     display: flex;
+  }
 
-    &:focus-within {
-      outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
-    }
-
-    &[data-invalid] {
-      border-color: var(--moduix-password-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  .control-h2eb01:focus-within {
+    outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
 
-      &:focus-within {
-        outline-color: var(--moduix-password-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
-      }
-    }
+  .control-h2eb01[data-invalid] {
+    border-color: var(--moduix-password-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
-    }
+  .control-h2eb01[data-invalid]:focus-within {
+    outline-color: var(--moduix-password-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
 
-    &[data-readonly] {
-      background-color: var(--moduix-password-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-color-background)));
-      color: var(--moduix-password-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-color-foreground)));
-    }
+  .control-h2eb01[data-readonly] {
+    background-color: var(--moduix-password-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-color-background)));
+    color: var(--moduix-password-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-color-foreground)));
   }
 
-  ._8wEG0G_input {
+  .input-ImUVi4 {
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;
@@ -86,22 +78,22 @@
     outline: 0;
     flex: auto;
     margin: 0;
+  }
 
-    &::placeholder {
-      color: var(--moduix-password-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
-    }
+  .input-ImUVi4::placeholder {
+    color: var(--moduix-password-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
 
-    &:is([data-disabled], :disabled) {
-      pointer-events: none;
-      opacity: 1;
-    }
+  .input-ImUVi4:is([data-disabled], :disabled) {
+    pointer-events: none;
+    opacity: 1;
+  }
 
-    &:is(:read-only, [data-readonly]) {
-      background-color: #0000;
-    }
+  .input-ImUVi4:is(:read-only, [data-readonly]) {
+    background-color: #0000;
   }
 
-  ._8wEG0G_visibilityTrigger {
+  .visibilityTrigger-UlZG7F {
     width: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
     min-width: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
     height: var(--moduix-password-input-trigger-size, var(--moduix-button-size-sm, var(--moduix-size-sm)));
@@ -121,21 +113,22 @@
     align-items: center;
     padding: 0;
     display: inline-flex;
+  }
 
-    &:hover {
-      color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
-    }
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
+    color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+  }
 
-    &:focus-visible {
-      outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
-    }
+  .visibilityTrigger-UlZG7F:focus-visible {
+    outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
 
-    &:is([data-disabled], :disabled) {
-      opacity: 1;
-    }
+  .visibilityTrigger-UlZG7F:is([data-disabled], [data-readonly], :disabled) {
+    cursor: default;
+    opacity: 1;
   }
 
-  ._8wEG0G_indicator {
+  .indicator-ede0IZ {
     padding: var(--moduix-password-input-trigger-visual-padding, var(--moduix-spacing-1));
     border-radius: var(--moduix-password-input-trigger-radius, var(--moduix-radius-sm));
     transition: background-color var(--moduix-input-transition, var(--moduix-transition-default)),
@@ -143,14 +136,15 @@
     justify-content: center;
     align-items: center;
     display: inline-flex;
+  }
 
-    & svg {
-      width: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
-      height: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
-    }
+  .indicator-ede0IZ svg {
+    width: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+    height: var(--moduix-password-input-icon-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
   }
 
-  ._8wEG0G_visibilityTrigger:hover ._8wEG0G_indicator, ._8wEG0G_visibilityTrigger:focus-visible ._8wEG0G_indicator {
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):is(:hover, :focus-visible) .indicator-ede0IZ {
     background: var(--moduix-password-input-trigger-hover-bg, var(--moduix-color-muted));
   }
 }
+

package/dist/components/password-input/index.d.ts

@@ -1,2 +1 @@
-import { PasswordInput, usePasswordInput } from "./PasswordInput.js";
-export { PasswordInput, usePasswordInput };
+export * from './PasswordInput.js';

package/dist/components/password-input/index.js

@@ -0,0 +1 @@
+export * from "./PasswordInput.js";

package/dist/components/pin-input/PinInput.d.ts

@@ -1,28 +1,18 @@
-import { ComponentProps } from "react";
-import { PinInput, UsePinInputProps } from "@ark-ui/react/pin-input";
-
-//#region src/components/pin-input/PinInput.d.ts
-declare function PinInputInputs({
-  className
-}: {
-  className?: string;
+import { PinInput as PinInputPrimitive, usePinInputContext, type UsePinInputProps } from '@ark-ui/react/pin-input';
+import type { ComponentProps, ReactNode } from 'react';
+declare function PinInputInputs({ className }: {
+    className?: string;
 }): import("react").JSX.Element[];
-declare function PinInputSeparator({
-  className,
-  'aria-hidden': ariaHidden,
-  role,
-  children,
-  ...props
-}: ComponentProps<'span'>): import("react").JSX.Element;
-declare function usePinInput$1(props?: UsePinInputProps): import("@ark-ui/react/pin-input").UsePinInputReturn;
-declare const PinInput$1: import("react").ForwardRefExoticComponent<Omit<PinInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<PinInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<PinInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<PinInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<PinInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Input: import("react").ForwardRefExoticComponent<Omit<PinInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  Inputs: typeof PinInputInputs;
-  Separator: typeof PinInputSeparator;
+declare function PinInputSeparator({ className, 'aria-hidden': ariaHidden, role, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function usePinInput(props?: UsePinInputProps): import("@ark-ui/react/pin-input").UsePinInputReturn;
+declare const PinInput: import("react").ForwardRefExoticComponent<Omit<PinInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<PinInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<PinInputPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: PinInputPrimitive.ContextProps) => ReactNode;
+    Label: import("react").ForwardRefExoticComponent<Omit<PinInputPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<PinInputPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<PinInputPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Inputs: typeof PinInputInputs;
+    Separator: typeof PinInputSeparator;
 };
-//#endregion
-export { PinInput$1 as PinInput, usePinInput$1 as usePinInput };
+export { PinInput, usePinInput, usePinInputContext };

package/dist/components/pin-input/PinInput.js

@@ -1,94 +1,125 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { SeparatorMarkIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import PinInput_module_default from "./PinInput.module.js";
-import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { PinInput, usePinInput, usePinInputContext } from "@ark-ui/react/pin-input";
-//#region src/components/pin-input/PinInput.tsx
-const PinInputRoot = forwardRef(function PinInputRoot({ asChild, children, className, count, placeholder = "", ...props }, ref) {
-	return /* @__PURE__ */ jsx(PinInput.Root, {
-		ref,
-		asChild,
-		"data-slot": "pin-input-root",
-		className: clsx(PinInput_module_default.root, normalizeClassName(className)),
-		count,
-		placeholder,
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+import { clsx } from "clsx";
+import { Children, cloneElement, forwardRef, useEffect, useRef } from "react";
+import { SeparatorMarkIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import PinInput_module from "./PinInput.module.js";
+const PinInput_PinInputRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, count, placeholder = '', ...props }, ref) {
+    return /*#__PURE__*/ jsx(PinInput.Root, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "pin-input-root",
+        className: clsx(PinInput_module.root, normalizeClassName(className)),
+        count: count,
+        placeholder: placeholder,
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const PinInputRootProvider = forwardRef(function PinInputRootProvider({ asChild, children, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PinInput.RootProvider, {
-		ref,
-		asChild,
-		"data-slot": "pin-input-root-provider",
-		className: clsx(PinInput_module_default.root, normalizeClassName(className)),
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+const PinInput_PinInputRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PinInput.RootProvider, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "pin-input-root-provider",
+        className: clsx(PinInput_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const PinInputLabel = forwardRef(function PinInputLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PinInput.Label, {
-		ref,
-		"data-slot": "pin-input-label",
-		className: clsx(PinInput_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const PinInput_PinInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PinInput.Label, {
+        ref: ref,
+        "data-slot": "pin-input-label",
+        className: clsx(PinInput_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
-const PinInputControl = forwardRef(function PinInputControl({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PinInput.Control, {
-		ref,
-		"data-slot": "pin-input-control",
-		className: clsx(PinInput_module_default.control, normalizeClassName(className)),
-		...props
-	});
+const PinInput_PinInputControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PinInput.Control, {
+        ref: ref,
+        "data-slot": "pin-input-control",
+        className: clsx(PinInput_module.control, normalizeClassName(className)),
+        ...props
+    });
 });
-const PinInputInput = forwardRef(function PinInputInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(PinInput.Input, {
-		ref,
-		"data-slot": "pin-input-input",
-		className: clsx(PinInput_module_default.input, normalizeClassName(className)),
-		...props
-	});
+const PinInput_PinInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(PinInput.Input, {
+        ref: ref,
+        "data-slot": "pin-input-input",
+        className: clsx(PinInput_module.input, normalizeClassName(className)),
+        ...props
+    });
 });
 function PinInputInputs({ className }) {
-	const { items } = usePinInputContext();
-	return items.map((index) => /* @__PURE__ */ jsx(PinInputInput, {
-		index,
-		className
-	}, index));
+    const { items } = usePinInputContext();
+    return items.map((index)=>/*#__PURE__*/ jsx(PinInput_PinInputInput, {
+            index: index,
+            className: className
+        }, index));
 }
 function withHiddenInput(children, asChild) {
-	const hiddenInput = /* @__PURE__ */ jsx(PinInput.HiddenInput, { "data-slot": "pin-input-hidden-input" });
-	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
-	const child = Children.only(children);
-	return cloneElement(child, {}, child.props.children, hiddenInput);
+    const formControls = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(PinInputFormReset, {}),
+            /*#__PURE__*/ jsx(PinInput.HiddenInput, {
+                "data-slot": "pin-input-hidden-input"
+            })
+        ]
+    });
+    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children,
+            formControls
+        ]
+    });
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, formControls);
+}
+function PinInputFormReset() {
+    const pinInput = usePinInputContext();
+    const defaultValue = useRef(pinInput.value);
+    useEffect(()=>{
+        const hiddenInputId = pinInput.getHiddenInputProps().id;
+        if (!hiddenInputId) return;
+        const hiddenInput = document.getElementById(hiddenInputId);
+        const form = hiddenInput?.form;
+        if (!form) return;
+        const handleReset = ()=>{
+            queueMicrotask(()=>pinInput.setValue(defaultValue.current));
+        };
+        form.addEventListener('reset', handleReset);
+        return ()=>form.removeEventListener('reset', handleReset);
+    }, [
+        pinInput
+    ]);
+    return null;
 }
-function PinInputSeparator({ className, "aria-hidden": ariaHidden = true, role = "presentation", children, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "pin-input-separator",
-		"aria-hidden": ariaHidden,
-		role,
-		className: clsx(PinInput_module_default.separator, normalizeClassName(className)),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(SeparatorMarkIcon, {})
-	});
+function PinInputSeparator({ className, 'aria-hidden': ariaHidden = true, role = 'presentation', children, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "pin-input-separator",
+        "aria-hidden": ariaHidden,
+        role: role,
+        className: clsx(PinInput_module.separator, normalizeClassName(className)),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(SeparatorMarkIcon, {})
+    });
 }
-function usePinInput$1(props = {}) {
-	return usePinInput({
-		placeholder: "",
-		...props
-	});
+function PinInput_usePinInput(props = {}) {
+    return usePinInput({
+        placeholder: '',
+        ...props
+    });
 }
-const PinInput$1 = Object.assign(PinInputRoot, {
-	Root: PinInputRoot,
-	RootProvider: PinInputRootProvider,
-	Label: PinInputLabel,
-	Control: PinInputControl,
-	Input: PinInputInput,
-	Inputs: PinInputInputs,
-	Separator: PinInputSeparator
+const PinInput_PinInput = Object.assign(PinInput_PinInputRoot, {
+    Root: PinInput_PinInputRoot,
+    RootProvider: PinInput_PinInputRootProvider,
+    Context: PinInput.Context,
+    Label: PinInput_PinInputLabel,
+    Control: PinInput_PinInputControl,
+    Input: PinInput_PinInputInput,
+    Inputs: PinInputInputs,
+    Separator: PinInputSeparator
 });
-//#endregion
-export { PinInput$1 as PinInput, usePinInput$1 as usePinInput };
+export { PinInput_PinInput as PinInput, PinInput_usePinInput as usePinInput, usePinInputContext };