@moduix/react 2.1.0 → 2.2.4

package/dist/components/password-input/PasswordInput_module.css

@@ -0,0 +1,150 @@
+@layer moduix.components {
+  .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, none);
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .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)));
+    font-size: var(--moduix-password-input-label-font-size, var(--moduix-field-label-font-size, var(--moduix-text-sm)));
+    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;
+  }
+
+  .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))));
+  }
+
+  .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))));
+    border: var(--moduix-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-input-border-style, solid)
+      var(--moduix-password-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-password-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    background-color: var(--moduix-password-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: var(--moduix-input-focus-ring-offset, calc(0px - var(--moduix-input-border-width, var(--moduix-border-width-sm))));
+    transition: border-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-input-transition, var(--moduix-transition-default));
+    align-items: center;
+    padding-inline-end: var(--moduix-password-input-trigger-inset, var(--moduix-spacing-2));
+    display: flex;
+  }
+
+  .control-h2eb01:focus-within {
+    outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .control-h2eb01[data-invalid] {
+    border-color: var(--moduix-password-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
+
+  .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)));
+  }
+
+  .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)));
+  }
+
+  .input-ImUVi4 {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--moduix-password-input-padding-y, var(--moduix-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1))))
+      var(--moduix-password-input-padding-x, var(--moduix-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3))));
+    color: var(--moduix-password-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    font: inherit;
+    font-size: var(--moduix-password-input-font-size, var(--moduix-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md))));
+    line-height: var(--moduix-password-input-line-height, var(--moduix-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md))));
+    transition: opacity var(--moduix-input-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    flex: auto;
+    margin: 0;
+  }
+
+  .input-ImUVi4::placeholder {
+    color: var(--moduix-password-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
+
+  .input-ImUVi4:is([data-disabled], :disabled) {
+    pointer-events: none;
+    opacity: 1;
+  }
+
+  .input-ImUVi4:is(:read-only, [data-readonly]) {
+    background-color: #0000;
+  }
+
+  .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)));
+    color: var(--moduix-password-input-trigger-color, var(--moduix-color-muted-foreground));
+    background: var(--moduix-password-input-trigger-bg, transparent);
+    border-radius: var(--moduix-password-input-trigger-radius, var(--moduix-radius-sm));
+    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: var(--moduix-input-focus-ring-offset, calc(0px - var(--moduix-input-border-width, var(--moduix-border-width-sm))));
+    cursor: pointer;
+    transition: color var(--moduix-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-input-transition, var(--moduix-transition-default));
+    border: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .visibilityTrigger-UlZG7F:not([data-disabled]):not([data-readonly]):hover {
+    color: var(--moduix-password-input-trigger-hover-color, var(--moduix-color-foreground));
+  }
+
+  .visibilityTrigger-UlZG7F:focus-visible {
+    outline-color: var(--moduix-password-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .visibilityTrigger-UlZG7F:is([data-disabled], [data-readonly], :disabled) {
+    cursor: default;
+    opacity: 1;
+  }
+
+  .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)),
+      color var(--moduix-input-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .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)));
+  }
+
+  .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 };

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

@@ -1,11 +1,9 @@
-import './PinInput.css';
-//#region src/components/pin-input/PinInput.module.css
-var PinInput_module_default = {
-	"control": "d_HHPW_control",
-	"input": "d_HHPW_input",
-	"label": "d_HHPW_label",
-	"root": "d_HHPW_root",
-	"separator": "d_HHPW_separator"
+import "./PinInput_module.css";
+const PinInput_module = {
+    root: "root-pskv82",
+    label: "label-lORIFI",
+    control: "control-pyrtBu",
+    input: "input-pYZWmc",
+    separator: "separator-f357Hg"
 };
-//#endregion
-export { PinInput_module_default as default };
+export default PinInput_module;

package/dist/components/pin-input/PinInput_module.css

@@ -0,0 +1,97 @@
+@layer moduix.components {
+  .root-pskv82 {
+    align-items: flex-start;
+    gap: var(--moduix-pin-input-root-gap, var(--moduix-spacing-2));
+    width: var(--moduix-pin-input-width, auto);
+    max-width: var(--moduix-pin-input-max-width, none);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .root-pskv82[data-disabled] {
+    opacity: var(--moduix-pin-input-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-lORIFI {
+    color: var(--moduix-pin-input-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-pin-input-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-pin-input-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-pin-input-label-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .control-pyrtBu {
+    align-items: center;
+    gap: var(--moduix-pin-input-gap, var(--moduix-spacing-2));
+    display: inline-flex;
+  }
+
+  .input-pYZWmc {
+    box-sizing: border-box;
+    width: var(--moduix-pin-input-input-width, var(--moduix-pin-input-input-size, var(--moduix-size-md)));
+    height: var(--moduix-pin-input-input-height, var(--moduix-pin-input-input-size, var(--moduix-size-md)));
+    border: var(--moduix-pin-input-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-pin-input-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-pin-input-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-pin-input-input-padding-y, 0);
+    padding-inline: var(--moduix-pin-input-input-padding-x, 0);
+    background-color: var(--moduix-pin-input-bg, var(--moduix-color-background));
+    color: var(--moduix-pin-input-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-pin-input-font-size, var(--moduix-text-lg));
+    font-weight: var(--moduix-pin-input-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-pin-input-line-height, var(--moduix-line-height-text-lg));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    outline: var(--moduix-pin-input-focus-ring-width, var(--moduix-pin-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+      solid transparent;
+    outline-offset: var(--moduix-pin-input-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    transition: border-color var(--moduix-pin-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-pin-input-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-pin-input-transition, var(--moduix-transition-default));
+    flex: none;
+    margin: 0;
+  }
+
+  .input-pYZWmc::placeholder {
+    color: var(--moduix-pin-input-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .input-pYZWmc:focus-visible {
+    outline-color: var(--moduix-pin-input-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .input-pYZWmc[data-complete] {
+    border-color: var(--moduix-pin-input-border-color-complete, var(--moduix-pin-input-border-color, var(--moduix-color-border)));
+  }
+
+  .input-pYZWmc[data-invalid] {
+    border-color: var(--moduix-pin-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .input-pYZWmc[data-invalid]:focus-visible {
+    outline-color: var(--moduix-pin-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .input-pYZWmc[data-disabled] {
+    pointer-events: none;
+  }
+
+  .separator-f357Hg {
+    width: var(--moduix-pin-input-separator-width, var(--moduix-pin-input-separator-size, var(--moduix-spacing-4)));
+    height: var(--moduix-pin-input-separator-height, var(--moduix-pin-input-separator-size, var(--moduix-spacing-4)));
+    color: var(--moduix-pin-input-separator-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .separator-f357Hg > svg {
+    flex: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+

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

@@ -1,2 +1 @@
-import { PinInput, usePinInput } from "./PinInput.js";
-export { PinInput, usePinInput };
+export { PinInput, usePinInput, usePinInputContext } from './PinInput.js';

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

@@ -0,0 +1 @@
+export { PinInput, usePinInput, usePinInputContext } from "./PinInput.js";

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

@@ -1,50 +1,30 @@
-import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps } from "react";
-import { Popover, usePopover } from "@ark-ui/react/popover";
-
-//#region src/components/popover/Popover.d.ts
-type PopoverRootProps = ComponentProps<typeof Popover.Root> & OverlayPortalProps;
-type PopoverRootProviderProps = ComponentProps<typeof Popover.RootProvider> & OverlayPortalProps;
-declare function PopoverRoot({
-  portalled,
-  portalRef,
-  ...props
-}: PopoverRootProps): import("react").JSX.Element;
-declare function PopoverRootProvider({
-  portalled,
-  portalRef,
-  value,
-  ...props
-}: PopoverRootProviderProps): import("react").JSX.Element;
-declare function PopoverHeader({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverBody({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverFooter({
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare const Popover$1: typeof PopoverRoot & {
-  Root: typeof PopoverRoot;
-  RootProvider: typeof PopoverRootProvider;
-  Anchor: import("react").ForwardRefExoticComponent<Omit<Popover.AnchorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<Popover.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<Popover.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Positioner: import("react").ForwardRefExoticComponent<Omit<Popover.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Popover.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Arrow: import("react").ForwardRefExoticComponent<Omit<Popover.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ArrowTip: import("react").ForwardRefExoticComponent<Omit<Popover.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Title: import("react").ForwardRefExoticComponent<Omit<Popover.TitleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Description: import("react").ForwardRefExoticComponent<Omit<Popover.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Popover.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Popover.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Header: typeof PopoverHeader;
-  Body: typeof PopoverBody;
-  Footer: typeof PopoverFooter;
+import { Popover as PopoverPrimitive, usePopover, usePopoverContext } from '@ark-ui/react/popover';
+import type { ComponentProps } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal';
+type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
+type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & OverlayPortalProps;
+declare function PopoverRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: PopoverRootProps): import("react").JSX.Element;
+declare function PopoverRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, value, ...props }: PopoverRootProviderProps): import("react").JSX.Element;
+declare function PopoverHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare const Popover: typeof PopoverRoot & {
+    Root: typeof PopoverRoot;
+    RootProvider: typeof PopoverRootProvider;
+    Context: (props: PopoverPrimitive.ContextProps) => import("react").ReactNode;
+    Anchor: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.AnchorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.TitleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CloseTrigger: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Header: typeof PopoverHeader;
+    Body: typeof PopoverBody;
+    Footer: typeof PopoverFooter;
 };
-//#endregion
-export { Popover$1 as Popover, usePopover };
+export { Popover, usePopover, usePopoverContext };