@moduix/react 1.1.1 → 2.1.0

package/dist/components/native-select/NativeSelect.css

@@ -12,7 +12,7 @@
     width: var(--select-width, 14rem);
     max-width: var(--select-max-width, 100%);
     min-width: 0;
-    height: var(--select-control-height, var(--size-lg));
+    height: var(--select-control-height, var(--size-md));
     border: var(--select-border-width, var(--border-width-sm)) solid
       var(--select-border-color, var(--color-border));
     border-radius: var(--select-radius, var(--radius-md));
@@ -20,8 +20,9 @@
     background-color: var(--select-bg, var(--color-background));
     color: var(--select-color, var(--color-foreground));
     font: inherit;
-    outline: var(--select-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--select-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     cursor: pointer;
     transition: background-color var(--select-transition, var(--transition-default)),
       border-color var(--select-transition, var(--transition-default)),
@@ -55,14 +56,6 @@
       appearance: auto;
     }
 
-    &:not(:disabled, [data-disabled]) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-bg-hover, var(--color-accent));
-        }
-      }
-    }
-
     @media (forced-colors: active) {
       appearance: auto;
       padding-inline-end: var(--select-trigger-padding-x-start, var(--spacing-3));
@@ -73,14 +66,19 @@
     top: 50%;
     width: var(--select-action-size, var(--spacing-6));
     height: var(--select-action-size, var(--spacing-6));
+    border-radius: var(--select-action-radius, var(--radius-sm));
+    background: var(--select-action-bg, transparent);
     color: var(--select-icon-color, var(--color-muted-foreground));
     pointer-events: none;
+    transition: background-color var(--select-transition, var(--transition-default)),
+      color var(--select-transition, var(--transition-default)),
+      opacity var(--select-transition, var(--transition-default));
     justify-content: center;
     align-items: center;
     line-height: 0;
     display: inline-flex;
     position: absolute;
-    inset-inline-end: var(--select-action-offset-right, var(--spacing-1));
+    inset-inline-end: var(--select-action-offset-right, var(--spacing-2));
     transform: translateY(-50%);
 
     & > svg {
@@ -98,6 +96,13 @@
     opacity: var(--select-disabled-opacity, var(--opacity-disabled));
   }
 
+  .mei8Eq_root:not(:disabled, [data-disabled]):hover + .mei8Eq_indicator {
+    @media (hover: hover) {
+      background-color: var(--select-action-bg-hover, var(--color-muted));
+      color: var(--select-action-color-hover, var(--color-foreground));
+    }
+  }
+
   .mei8Eq_root:is([multiple], [size]:not([size="1"])) + .mei8Eq_indicator {
     display: none;
   }

package/dist/components/native-select/NativeSelect.d.ts

@@ -1,8 +1,12 @@
+import { ComponentProps } from "react";
 import { Field } from "@ark-ui/react/field";
 
 //#region src/components/native-select/NativeSelect.d.ts
-declare const NativeSelect: import("react").ForwardRefExoticComponent<Omit<Field.SelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Field.SelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+type NativeSelectRootProps = ComponentProps<typeof Field.Select> & {
+  controlProps?: ComponentProps<'span'>;
+};
+declare const NativeSelect: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 };
 //#endregion
 export { NativeSelect };

package/dist/components/native-select/NativeSelect.js

@@ -1,17 +1,18 @@
-import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import NativeSelect_module_default from "./NativeSelect.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
 //#region src/components/native-select/NativeSelect.tsx
-const NativeSelectRoot = forwardRef(function NativeSelectRoot({ className, ...props }, ref) {
+const NativeSelectRoot = forwardRef(function NativeSelectRoot({ className, controlProps, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("span", {
+		...controlProps,
 		"data-scope": "native-select",
 		"data-part": "control",
 		"data-slot": "native-select-control",
-		className: NativeSelect_module_default.control,
+		className: clsx(NativeSelect_module_default.control, normalizeClassName(controlProps?.className)),
 		children: [/* @__PURE__ */ jsx(Field.Select, {
 			...props,
 			ref,

package/dist/components/number-input/NumberInput.css

@@ -29,7 +29,6 @@
 
     &[data-disabled] {
       cursor: default;
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
     }
   }
 
@@ -39,11 +38,11 @@
   }
 
   .ZjEX8G_decrementTrigger, .ZjEX8G_incrementTrigger {
-    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--border-width-sm)));
+    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     box-sizing: border-box;
-    width: var(--number-input-control-height, var(--size-lg));
-    min-width: var(--number-input-control-height, var(--size-lg));
-    height: var(--number-input-control-height, var(--size-lg));
+    width: var(--number-input-control-height, var(--size-md));
+    min-width: var(--number-input-control-height, var(--size-md));
+    height: var(--number-input-control-height, var(--size-md));
     border: var(--number-input-border-width, var(--border-width-sm))
       var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
     background-color: var(--number-input-button-bg, var(--color-background));
@@ -79,7 +78,6 @@
     }
 
     &:is([data-disabled], :disabled) {
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
       pointer-events: none;
     }
 
@@ -88,35 +86,35 @@
     }
 
     & > svg {
-      width: var(--number-input-icon-size, .875rem);
-      height: var(--number-input-icon-size, .875rem);
+      width: var(--number-input-icon-size, var(--spacing-3-5));
+      height: var(--number-input-icon-size, var(--spacing-3-5));
       flex-shrink: 0;
     }
   }
 
   .ZjEX8G_decrementTrigger {
-    border-radius: var(--number-input-radius, var(--radius-md)) 0 0
-      var(--number-input-radius, var(--radius-md));
-    border-right: 0;
+    border-inline-end: 0;
+    border-start-start-radius: var(--number-input-radius, var(--radius-md));
+    border-end-start-radius: var(--number-input-radius, var(--radius-md));
   }
 
   .ZjEX8G_incrementTrigger {
-    border-radius: 0 var(--number-input-radius, var(--radius-md))
-      var(--number-input-radius, var(--radius-md)) 0;
-    border-left: 0;
+    border-inline-start: 0;
+    border-start-end-radius: var(--number-input-radius, var(--radius-md));
+    border-end-end-radius: var(--number-input-radius, var(--radius-md));
   }
 
   .ZjEX8G_input {
-    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--border-width-sm)));
+    --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))));
     box-sizing: border-box;
     width: var(--number-input-input-width, 6rem);
-    height: var(--number-input-control-height, var(--size-lg));
+    height: var(--number-input-control-height, var(--size-md));
     border-top: var(--number-input-border-width, var(--border-width-sm))
       var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
     border-bottom: var(--number-input-border-width, var(--border-width-sm))
       var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
-    padding: var(--number-input-input-padding-y, .5rem)
-      var(--number-input-input-padding-x, .75rem);
+    padding: var(--number-input-input-padding-y, var(--spacing-1))
+      var(--number-input-input-padding-x, var(--spacing-3));
     background-color: var(--number-input-input-bg, var(--color-background));
     color: var(--number-input-input-color, var(--color-foreground));
     font: inherit;
@@ -129,8 +127,7 @@
     transition: border-color var(--transition-default),
       outline-color var(--transition-default),
       opacity var(--transition-default);
-    border-left: 0;
-    border-right: 0;
+    border-inline: 0;
     border-radius: 0;
     margin: 0;
 
@@ -147,10 +144,6 @@
         outline-color: var(--number-input-border-color-invalid, var(--color-destructive));
       }
     }
-
-    &:is([data-disabled], :disabled) {
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
-    }
   }
 
   .ZjEX8G_valueText {

package/dist/components/number-input/NumberInput.d.ts

@@ -1,16 +1,21 @@
-import { NumberInput } from "@ark-ui/react/number-input";
+import { ComponentProps } from "react";
+import { NumberInput, useNumberInput, useNumberInputContext } from "@ark-ui/react/number-input";
 
 //#region src/components/number-input/NumberInput.d.ts
+declare const NumberInputControl: import("react").ForwardRefExoticComponent<Omit<NumberInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NumberInputFieldProps = Omit<ComponentProps<typeof NumberInputControl>, 'asChild' | 'children'>;
 declare const NumberInput$1: import("react").ForwardRefExoticComponent<Omit<NumberInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<NumberInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<NumberInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: NumberInput.ContextProps) => import("react").ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<NumberInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Scrubber: import("react").ForwardRefExoticComponent<Omit<NumberInput.ScrubberProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<NumberInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<NumberInputFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   DecrementTrigger: import("react").ForwardRefExoticComponent<Omit<NumberInput.DecrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<NumberInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   IncrementTrigger: import("react").ForwardRefExoticComponent<Omit<NumberInput.IncrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<NumberInput.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { NumberInput$1 as NumberInput };
+export { NumberInput$1 as NumberInput, useNumberInput, useNumberInputContext };

package/dist/components/number-input/NumberInput.js

@@ -1,10 +1,10 @@
-import { MinusIcon, PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { MinusIcon, PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import NumberInput_module_default from "./NumberInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { NumberInput } from "@ark-ui/react/number-input";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberInput, useNumberInput, useNumberInputContext } from "@ark-ui/react/number-input";
 //#region src/components/number-input/NumberInput.tsx
 const NumberInputRoot = forwardRef(function NumberInputRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(NumberInput.Root, {
@@ -80,16 +80,29 @@ const NumberInputValueText = forwardRef(function NumberInputValueText({ classNam
 		...props
 	});
 });
+const NumberInputField = forwardRef(function NumberInputField(props, ref) {
+	return /* @__PURE__ */ jsxs(NumberInputControl, {
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(NumberInputDecrementTrigger, {}),
+			/* @__PURE__ */ jsx(NumberInputInput, {}),
+			/* @__PURE__ */ jsx(NumberInputIncrementTrigger, {})
+		]
+	});
+});
 const NumberInput$1 = Object.assign(NumberInputRoot, {
 	Root: NumberInputRoot,
 	RootProvider: NumberInputRootProvider,
+	Context: NumberInput.Context,
 	Label: NumberInputLabel,
 	Scrubber: NumberInputScrubber,
 	Control: NumberInputControl,
+	Field: NumberInputField,
 	DecrementTrigger: NumberInputDecrementTrigger,
 	Input: NumberInputInput,
 	IncrementTrigger: NumberInputIncrementTrigger,
 	ValueText: NumberInputValueText
 });
 //#endregion
-export { NumberInput$1 as NumberInput };
+export { NumberInput$1 as NumberInput, useNumberInput, useNumberInputContext };

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

@@ -1,2 +1,2 @@
-import { NumberInput } from "./NumberInput.js";
-export { NumberInput };
+import { NumberInput, useNumberInput, useNumberInputContext } from "./NumberInput.js";
+export { NumberInput, useNumberInput, useNumberInputContext };

package/dist/components/pagination/Pagination.css

@@ -8,8 +8,8 @@
 
   .djsvna_item, .djsvna_trigger, .djsvna_ellipsis {
     box-sizing: border-box;
-    min-width: var(--pagination-item-size, var(--size-lg));
-    height: var(--pagination-item-size, var(--size-lg));
+    min-width: var(--pagination-item-size, var(--size-md));
+    height: var(--pagination-item-size, var(--size-md));
     border-radius: var(--pagination-item-radius, var(--radius-md));
     font-size: var(--pagination-font-size, var(--text-sm));
     font-weight: var(--pagination-font-weight, var(--weight-medium));
@@ -25,7 +25,7 @@
     gap: var(--pagination-trigger-gap, var(--spacing-2));
     border: var(--pagination-item-border-width, var(--border-width-sm)) solid
       var(--pagination-item-border-color, var(--color-border));
-    padding-inline: var(--pagination-item-padding-inline, .75rem);
+    padding-inline: var(--pagination-item-padding-inline, var(--spacing-3));
     background-color: var(--pagination-item-bg, var(--color-background));
     color: var(--pagination-item-color, var(--color-foreground));
     user-select: none;
@@ -44,9 +44,9 @@
     }
 
     &:focus-visible, &[data-focus] {
-      outline: var(--pagination-focus-ring-width, var(--border-width-md)) solid
-        var(--pagination-focus-ring-color, var(--color-ring));
-      outline-offset: var(--pagination-focus-ring-offset, -1px);
+      outline: var(--pagination-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--pagination-focus-ring-color, var(--color-ring));
+      outline-offset: var(--pagination-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &:is([data-disabled], :disabled) {
@@ -55,8 +55,8 @@
     }
 
     & svg {
-      width: var(--pagination-icon-size, 1rem);
-      height: var(--pagination-icon-size, 1rem);
+      width: var(--pagination-icon-size, var(--spacing-4));
+      height: var(--pagination-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
   }
@@ -74,11 +74,11 @@
   }
 
   .djsvna_trigger {
-    padding-inline: max(var(--pagination-item-padding-inline, .75rem), var(--spacing-3));
+    padding-inline: max(var(--pagination-item-padding-inline, var(--spacing-3)), var(--spacing-3));
   }
 
   .djsvna_iconTrigger {
-    width: var(--pagination-item-size, var(--size-lg));
+    width: var(--pagination-item-size, var(--size-md));
     padding-inline: 0;
   }
 
@@ -93,7 +93,7 @@
     display: inline-flex;
 
     & svg + svg {
-      margin-inline-start: calc(var(--pagination-icon-size, 1rem) * -.5);
+      margin-inline-start: calc(var(--pagination-icon-size, var(--spacing-4)) * -.5);
     }
   }
 }

package/dist/components/pagination/Pagination.d.ts

@@ -1,6 +1,7 @@
 import { Pagination } from "@ark-ui/react/pagination";
 
 //#region src/components/pagination/Pagination.d.ts
+declare function PaginationItems(): import("react").JSX.Element;
 declare const Pagination$1: import("react").ForwardRefExoticComponent<Omit<Pagination.RootProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Pagination.RootProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Pagination.RootProviderProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -11,6 +12,9 @@ declare const Pagination$1: import("react").ForwardRefExoticComponent<Omit<Pagin
   FirstTrigger: import("react").ForwardRefExoticComponent<Omit<Pagination.FirstTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   LastTrigger: import("react").ForwardRefExoticComponent<Omit<Pagination.LastTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Context: (props: Pagination.ContextProps) => import("react").ReactNode;
+  Items: typeof PaginationItems;
+  usePagination: (props?: import("@ark-ui/react/pagination").UsePaginationProps) => import("@ark-ui/react/pagination").UsePaginationReturn;
+  usePaginationContext: () => import("@ark-ui/react/pagination").UsePaginationContext;
 };
 //#endregion
 export { Pagination$1 as Pagination };

package/dist/components/pagination/Pagination.js

@@ -1,10 +1,10 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Pagination_module_default from "./Pagination.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Pagination } from "@ark-ui/react/pagination";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pagination, usePagination, usePaginationContext } from "@ark-ui/react/pagination";
 //#region src/components/pagination/Pagination.tsx
 const PaginationRoot = forwardRef(function PaginationRoot({ "aria-label": ariaLabel = "Pagination", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Pagination.Root, {
@@ -86,6 +86,12 @@ const PaginationLastTrigger = forwardRef(function PaginationLastTrigger({ classN
 	});
 });
 const PaginationContext = Pagination.Context;
+function PaginationItems() {
+	return /* @__PURE__ */ jsx(PaginationContext, { children: (pagination) => pagination.pages.map((page, index) => page.type === "page" ? /* @__PURE__ */ jsx(PaginationItem, {
+		...page,
+		children: page.value
+	}, index) : /* @__PURE__ */ jsx(PaginationEllipsis, { index }, index)) });
+}
 const Pagination$1 = Object.assign(PaginationRoot, {
 	Root: PaginationRoot,
 	RootProvider: PaginationRootProvider,
@@ -95,7 +101,10 @@ const Pagination$1 = Object.assign(PaginationRoot, {
 	NextTrigger: PaginationNextTrigger,
 	FirstTrigger: PaginationFirstTrigger,
 	LastTrigger: PaginationLastTrigger,
-	Context: PaginationContext
+	Context: PaginationContext,
+	Items: PaginationItems,
+	usePagination,
+	usePaginationContext
 });
 //#endregion
 export { Pagination$1 as Pagination };

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

@@ -30,7 +30,7 @@
   ._8wEG0G_control {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--password-input-height, var(--input-height, var(--input-height-md, var(--size-lg))));
+    min-height: var(--password-input-height, var(--input-height, var(--input-height-md, var(--size-md))));
     border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
       var(--password-input-border-color, var(--input-border-color, var(--color-border)));
     border-radius: var(--password-input-radius, var(--input-radius, var(--radius-md)));
@@ -72,7 +72,7 @@
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;
-    padding: var(--password-input-padding-y, var(--input-padding-y, var(--input-padding-y-md, var(--spacing-2))))
+    padding: var(--password-input-padding-y, var(--input-padding-y, var(--input-padding-y-md, var(--spacing-1))))
       var(--password-input-padding-x, var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3))));
     color: var(--password-input-color, var(--input-color, var(--color-foreground)));
     font: inherit;
@@ -144,8 +144,8 @@
     display: inline-flex;
 
     & svg {
-      width: var(--password-input-icon-size, var(--button-icon-size, 1rem));
-      height: var(--password-input-icon-size, var(--button-icon-size, 1rem));
+      width: var(--password-input-icon-size, var(--button-icon-size, var(--spacing-4)));
+      height: var(--password-input-icon-size, var(--button-icon-size, var(--spacing-4)));
     }
   }
 

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

@@ -1,11 +1,15 @@
+import { ComponentProps } from "react";
 import { PasswordInput, usePasswordInput } from "@ark-ui/react/password-input";
 
 //#region src/components/password-input/PasswordInput.d.ts
+declare const PasswordInputControl: import("react").ForwardRefExoticComponent<Omit<PasswordInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type PasswordInputFieldProps = Omit<ComponentProps<typeof PasswordInputControl>, 'asChild' | 'children'>;
 declare const PasswordInput$1: import("react").ForwardRefExoticComponent<Omit<PasswordInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<PasswordInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<PasswordInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<PasswordInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<PasswordInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<PasswordInputFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<PasswordInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   VisibilityTrigger: import("react").ForwardRefExoticComponent<Omit<PasswordInput.VisibilityTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<PasswordInput.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -1,9 +1,9 @@
-import { EyeClosedIcon, EyeIcon } from "../../lib/moduix/icons/ui/Icons.js";
 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";
-import { jsx } from "react/jsx-runtime";
 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) {
@@ -64,11 +64,19 @@ const PasswordInputIndicator = forwardRef(function PasswordInputIndicator({ clas
 		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$1 = Object.assign(PasswordInputRoot, {
 	Root: PasswordInputRoot,
 	RootProvider: PasswordInputRootProvider,
 	Label: PasswordInputLabel,
 	Control: PasswordInputControl,
+	Field: PasswordInputField,
 	Input: PasswordInputInput,
 	VisibilityTrigger: PasswordInputVisibilityTrigger,
 	Indicator: PasswordInputIndicator

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

@@ -27,8 +27,8 @@
 
   .d_HHPW_input {
     box-sizing: border-box;
-    width: var(--pin-input-input-width, var(--pin-input-input-size, 2.5rem));
-    height: var(--pin-input-input-height, var(--pin-input-input-size, 2.5rem));
+    width: var(--pin-input-input-width, var(--pin-input-input-size, var(--size-md)));
+    height: var(--pin-input-input-height, var(--pin-input-input-size, var(--size-md)));
     border: var(--pin-input-border-width, var(--border-width-sm)) solid
       var(--pin-input-border-color, var(--color-border));
     border-radius: var(--pin-input-radius, var(--radius-md));
@@ -42,9 +42,9 @@
     line-height: var(--pin-input-line-height, var(--line-height-text-lg));
     text-align: center;
     font-variant-numeric: tabular-nums;
-    outline: var(--pin-input-focus-ring-width, var(--pin-input-border-width, var(--border-width-sm)))
+    outline: var(--pin-input-focus-ring-width, var(--pin-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--pin-input-focus-ring-offset, -1px);
+    outline-offset: var(--pin-input-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--pin-input-transition, var(--transition-default)),
       outline-color var(--pin-input-transition, var(--transition-default)),
       background-color var(--pin-input-transition, var(--transition-default));
@@ -77,8 +77,8 @@
   }
 
   .d_HHPW_separator {
-    width: var(--pin-input-separator-width, var(--pin-input-separator-size, 1rem));
-    height: var(--pin-input-separator-height, var(--pin-input-separator-size, 1rem));
+    width: var(--pin-input-separator-width, var(--pin-input-separator-size, var(--spacing-4)));
+    height: var(--pin-input-separator-height, var(--pin-input-separator-size, var(--spacing-4)));
     color: var(--pin-input-separator-color, var(--color-muted-foreground));
     pointer-events: none;
     flex: none;

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

@@ -2,6 +2,11 @@ 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("react").JSX.Element[];
 declare function PinInputSeparator({
   className,
   'aria-hidden': ariaHidden,
@@ -16,7 +21,7 @@ declare const PinInput$1: import("react").ForwardRefExoticComponent<Omit<PinInpu
   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>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<PinInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Inputs: typeof PinInputInputs;
   Separator: typeof PinInputSeparator;
 };
 //#endregion

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

@@ -1,28 +1,31 @@
-import { SeparatorMarkIcon } from "../../lib/moduix/icons/ui/Icons.js";
 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 { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { PinInput, usePinInput } from "@ark-ui/react/pin-input";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, 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({ children, className, count, placeholder = "", ...props }, ref) {
+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
+		children: withHiddenInput(children, asChild)
 	});
 });
-const PinInputRootProvider = forwardRef(function PinInputRootProvider({ className, ...props }, ref) {
+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
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const PinInputLabel = forwardRef(function PinInputLabel({ className, ...props }, ref) {
@@ -49,13 +52,19 @@ const PinInputInput = forwardRef(function PinInputInput({ className, ...props },
 		...props
 	});
 });
-const PinInputHiddenInput = forwardRef(function PinInputHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(PinInput.HiddenInput, {
-		ref,
-		"data-slot": "pin-input-hidden-input",
-		...props
-	});
-});
+function PinInputInputs({ className }) {
+	const { items } = usePinInputContext();
+	return items.map((index) => /* @__PURE__ */ jsx(PinInputInput, {
+		index,
+		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);
+}
 function PinInputSeparator({ className, "aria-hidden": ariaHidden = true, role = "presentation", children, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "pin-input-separator",
@@ -78,7 +87,7 @@ const PinInput$1 = Object.assign(PinInputRoot, {
 	Label: PinInputLabel,
 	Control: PinInputControl,
 	Input: PinInputInput,
-	HiddenInput: PinInputHiddenInput,
+	Inputs: PinInputInputs,
 	Separator: PinInputSeparator
 });
 //#endregion