@moduix/react 1.1.0

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

@@ -0,0 +1,95 @@
+import { MinusIcon, PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/number-input/NumberInput.tsx
+const NumberInputRoot = forwardRef(function NumberInputRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.Root, {
+		ref,
+		"data-slot": "number-input-root",
+		className: clsx(NumberInput_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInputRootProvider = forwardRef(function NumberInputRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.RootProvider, {
+		ref,
+		"data-slot": "number-input-root-provider",
+		className: clsx(NumberInput_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInputLabel = forwardRef(function NumberInputLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.Label, {
+		ref,
+		"data-slot": "number-input-label",
+		className: clsx(NumberInput_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInputScrubber = forwardRef(function NumberInputScrubber({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.Scrubber, {
+		ref,
+		"data-slot": "number-input-scrubber",
+		className: clsx(NumberInput_module_default.scrubber, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInputControl = forwardRef(function NumberInputControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.Control, {
+		ref,
+		"data-slot": "number-input-control",
+		className: clsx(NumberInput_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInputDecrementTrigger = forwardRef(function NumberInputDecrementTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.DecrementTrigger, {
+		ref,
+		"data-slot": "number-input-decrement-trigger",
+		className: clsx(NumberInput_module_default.decrementTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+});
+const NumberInputInput = forwardRef(function NumberInputInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.Input, {
+		ref,
+		"data-slot": "number-input-input",
+		className: clsx(NumberInput_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInputIncrementTrigger = forwardRef(function NumberInputIncrementTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.IncrementTrigger, {
+		ref,
+		"data-slot": "number-input-increment-trigger",
+		className: clsx(NumberInput_module_default.incrementTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+});
+const NumberInputValueText = forwardRef(function NumberInputValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberInput.ValueText, {
+		ref,
+		"data-slot": "number-input-value-text",
+		className: clsx(NumberInput_module_default.valueText, normalizeClassName(className)),
+		...props
+	});
+});
+const NumberInput$1 = Object.assign(NumberInputRoot, {
+	Root: NumberInputRoot,
+	RootProvider: NumberInputRootProvider,
+	Label: NumberInputLabel,
+	Scrubber: NumberInputScrubber,
+	Control: NumberInputControl,
+	DecrementTrigger: NumberInputDecrementTrigger,
+	Input: NumberInputInput,
+	IncrementTrigger: NumberInputIncrementTrigger,
+	ValueText: NumberInputValueText
+});
+//#endregion
+export { NumberInput$1 as NumberInput };

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

@@ -0,0 +1,14 @@
+import './NumberInput.css';
+//#region src/components/number-input/NumberInput.module.css
+var NumberInput_module_default = {
+	"control": "_99y8lW_control",
+	"decrementTrigger": "_99y8lW_decrementTrigger",
+	"incrementTrigger": "_99y8lW_incrementTrigger",
+	"input": "_99y8lW_input",
+	"label": "_99y8lW_label",
+	"root": "_99y8lW_root",
+	"scrubber": "_99y8lW_scrubber",
+	"valueText": "_99y8lW_valueText"
+};
+//#endregion
+export { NumberInput_module_default as default };

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

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

package/dist/components/pagination/Pagination.css

@@ -0,0 +1,99 @@
+@layer ui.components {
+  ._9uLVTW_root {
+    align-items: center;
+    gap: var(--pagination-gap, var(--spacing-1));
+    color: var(--pagination-color, var(--color-foreground));
+    display: inline-flex;
+  }
+
+  ._9uLVTW_item, ._9uLVTW_trigger, ._9uLVTW_ellipsis {
+    box-sizing: border-box;
+    min-width: var(--pagination-item-size, var(--size-lg));
+    height: var(--pagination-item-size, var(--size-lg));
+    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));
+    line-height: var(--pagination-line-height, var(--line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._9uLVTW_item, ._9uLVTW_trigger {
+    cursor: pointer;
+    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);
+    background-color: var(--pagination-item-bg, var(--color-background));
+    color: var(--pagination-item-color, var(--color-foreground));
+    user-select: none;
+    white-space: nowrap;
+    transition: background-color var(--pagination-transition, var(--transition-default)),
+      border-color var(--pagination-transition, var(--transition-default)),
+      color var(--pagination-transition, var(--transition-default)),
+      opacity var(--pagination-transition, var(--transition-default));
+    font-family: inherit;
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--pagination-item-bg-hover, var(--color-accent));
+      }
+    }
+
+    &: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);
+    }
+
+    &:is([data-disabled], :disabled) {
+      opacity: var(--pagination-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    & svg {
+      width: var(--pagination-icon-size, 1rem);
+      height: var(--pagination-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+  }
+
+  ._9uLVTW_item[data-selected] {
+    border-color: var(--pagination-item-border-color-selected, var(--color-foreground));
+    background-color: var(--pagination-item-bg-selected, var(--color-foreground));
+    color: var(--pagination-item-color-selected, var(--color-background));
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--pagination-item-bg-selected, var(--color-foreground));
+      }
+    }
+  }
+
+  ._9uLVTW_trigger {
+    padding-inline: max(var(--pagination-item-padding-inline, .75rem), var(--spacing-3));
+  }
+
+  ._9uLVTW_iconTrigger {
+    width: var(--pagination-item-size, var(--size-lg));
+    padding-inline: 0;
+  }
+
+  ._9uLVTW_ellipsis {
+    color: var(--pagination-ellipsis-color, var(--color-muted-foreground));
+    user-select: none;
+  }
+
+  ._9uLVTW_edgeIcon {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & svg + svg {
+      margin-inline-start: calc(var(--pagination-icon-size, 1rem) * -.5);
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Pagination } from "@ark-ui/react/pagination";
+
+//#region src/components/pagination/Pagination.d.ts
+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>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Ellipsis: import("react").ForwardRefExoticComponent<Omit<Pagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  PrevTrigger: import("react").ForwardRefExoticComponent<Omit<Pagination.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  NextTrigger: import("react").ForwardRefExoticComponent<Omit<Pagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  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;
+};
+//#endregion
+export { Pagination$1 as Pagination };

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,101 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/pagination/Pagination.tsx
+const PaginationRoot = forwardRef(function PaginationRoot({ "aria-label": ariaLabel = "Pagination", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.Root, {
+		ref,
+		"data-slot": "pagination-root",
+		"aria-label": ariaLabel,
+		className: clsx(Pagination_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const PaginationRootProvider = forwardRef(function PaginationRootProvider({ "aria-label": ariaLabel = "Pagination", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.RootProvider, {
+		ref,
+		"data-slot": "pagination-root-provider",
+		"aria-label": ariaLabel,
+		className: clsx(Pagination_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const PaginationItem = forwardRef(function PaginationItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.Item, {
+		ref,
+		"data-slot": "pagination-item",
+		className: clsx(Pagination_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const PaginationEllipsis = forwardRef(function PaginationEllipsis({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.Ellipsis, {
+		ref,
+		"data-slot": "pagination-ellipsis",
+		className: clsx(Pagination_module_default.ellipsis, normalizeClassName(className)),
+		...props,
+		children: children ?? "..."
+	});
+});
+function EdgeIcon({ side }) {
+	const Icon = side === "left" ? ChevronLeftIcon : ChevronRightIcon;
+	return /* @__PURE__ */ jsxs("span", {
+		className: Pagination_module_default.edgeIcon,
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx(Icon, {})]
+	});
+}
+const PaginationPrevTrigger = forwardRef(function PaginationPrevTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.PrevTrigger, {
+		ref,
+		"data-slot": "pagination-prev-trigger",
+		className: clsx(Pagination_module_default.trigger, children == null && Pagination_module_default.iconTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+	});
+});
+const PaginationNextTrigger = forwardRef(function PaginationNextTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.NextTrigger, {
+		ref,
+		"data-slot": "pagination-next-trigger",
+		className: clsx(Pagination_module_default.trigger, children == null && Pagination_module_default.iconTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+});
+const PaginationFirstTrigger = forwardRef(function PaginationFirstTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.FirstTrigger, {
+		ref,
+		"data-slot": "pagination-first-trigger",
+		className: clsx(Pagination_module_default.trigger, children == null && Pagination_module_default.iconTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(EdgeIcon, { side: "left" })
+	});
+});
+const PaginationLastTrigger = forwardRef(function PaginationLastTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Pagination.LastTrigger, {
+		ref,
+		"data-slot": "pagination-last-trigger",
+		className: clsx(Pagination_module_default.trigger, children == null && Pagination_module_default.iconTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(EdgeIcon, { side: "right" })
+	});
+});
+const PaginationContext = Pagination.Context;
+const Pagination$1 = Object.assign(PaginationRoot, {
+	Root: PaginationRoot,
+	RootProvider: PaginationRootProvider,
+	Item: PaginationItem,
+	Ellipsis: PaginationEllipsis,
+	PrevTrigger: PaginationPrevTrigger,
+	NextTrigger: PaginationNextTrigger,
+	FirstTrigger: PaginationFirstTrigger,
+	LastTrigger: PaginationLastTrigger,
+	Context: PaginationContext
+});
+//#endregion
+export { Pagination$1 as Pagination };

package/dist/components/pagination/Pagination.module.js

@@ -0,0 +1,12 @@
+import './Pagination.css';
+//#region src/components/pagination/Pagination.module.css
+var Pagination_module_default = {
+	"edgeIcon": "_9uLVTW_edgeIcon",
+	"ellipsis": "_9uLVTW_ellipsis",
+	"iconTrigger": "_9uLVTW_iconTrigger",
+	"item": "_9uLVTW_item",
+	"root": "_9uLVTW_root",
+	"trigger": "_9uLVTW_trigger"
+};
+//#endregion
+export { Pagination_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Pagination } from "./Pagination.js";
+export { Pagination };

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

@@ -0,0 +1,155 @@
+@layer ui.components {
+  .Tb1TUq_root {
+    box-sizing: border-box;
+    gap: var(--password-input-gap, var(--field-gap, var(--spacing-1)));
+    width: var(--password-input-width, 100%);
+    max-width: var(--password-input-max-width, 20rem);
+    color: var(--password-input-color, var(--input-color, var(--color-foreground)));
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--password-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+    }
+  }
+
+  .Tb1TUq_label {
+    align-items: center;
+    gap: var(--password-input-label-gap, var(--field-label-gap, var(--spacing-1)));
+    color: var(--password-input-label-color, var(--field-label-color, var(--color-foreground)));
+    font-size: var(--password-input-label-font-size, var(--field-label-font-size, var(--text-sm)));
+    font-weight: var(--password-input-label-font-weight, var(--field-label-font-weight, var(--weight-medium)));
+    line-height: var(--password-input-label-line-height, var(--field-label-line-height, var(--line-height-text-sm)));
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--password-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+    }
+  }
+
+  .Tb1TUq_control {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--password-input-height, var(--input-height, var(--input-height-md, var(--size-lg))));
+    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)));
+    background-color: var(--password-input-bg, var(--input-bg, var(--color-background)));
+    color: var(--password-input-color, var(--input-color, var(--color-foreground)));
+    outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
+      transparent;
+    outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
+    transition: border-color var(--input-transition, var(--transition-default)),
+      outline-color var(--input-transition, var(--transition-default)),
+      opacity var(--input-transition, var(--transition-default));
+    align-items: center;
+    padding-inline-end: var(--password-input-trigger-inset, var(--spacing-2));
+    display: flex;
+
+    &:focus-within {
+      outline-color: var(--password-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+    }
+
+    &[data-invalid] {
+      border-color: var(--password-input-invalid-border-color, var(--input-border-color-invalid, var(--color-destructive)));
+
+      &:focus-within {
+        outline-color: var(--password-input-invalid-focus-ring-color, var(--input-border-color-invalid, var(--color-destructive)));
+      }
+    }
+
+    &[data-disabled] {
+      opacity: var(--password-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+    }
+
+    &[data-readonly] {
+      background-color: var(--password-input-readonly-bg, var(--input-readonly-bg, var(--color-background)));
+      color: var(--password-input-readonly-color, var(--input-readonly-color, var(--color-foreground)));
+    }
+  }
+
+  .Tb1TUq_input {
+    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))))
+      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;
+    font-size: var(--password-input-font-size, var(--input-font-size, var(--input-font-size-md, var(--text-md))));
+    line-height: var(--password-input-line-height, var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md))));
+    transition: opacity var(--input-transition, var(--transition-default));
+    background-color: #0000;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    flex: auto;
+    margin: 0;
+
+    &::placeholder {
+      color: var(--password-input-placeholder-color, var(--input-placeholder-color, var(--color-muted-foreground)));
+    }
+
+    &:is([data-disabled], :disabled) {
+      pointer-events: none;
+      opacity: 1;
+    }
+
+    &:is(:read-only, [data-readonly]) {
+      background-color: #0000;
+    }
+  }
+
+  .Tb1TUq_visibilityTrigger {
+    width: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
+    min-width: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
+    height: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
+    color: var(--password-input-trigger-color, var(--color-muted-foreground));
+    background: var(--password-input-trigger-bg, transparent);
+    border-radius: var(--password-input-trigger-radius, var(--radius-sm));
+    outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
+      transparent;
+    outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
+    cursor: pointer;
+    transition: color var(--input-transition, var(--transition-default)),
+      outline-color var(--input-transition, var(--transition-default)),
+      opacity var(--input-transition, var(--transition-default));
+    border: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+
+    &:hover {
+      color: var(--password-input-trigger-hover-color, var(--color-foreground));
+    }
+
+    &:focus-visible {
+      outline-color: var(--password-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+    }
+
+    &:is([data-disabled], :disabled) {
+      opacity: 1;
+    }
+  }
+
+  .Tb1TUq_indicator {
+    padding: var(--password-input-trigger-visual-padding, var(--spacing-1));
+    border-radius: var(--password-input-trigger-radius, var(--radius-sm));
+    transition: background-color var(--input-transition, var(--transition-default)),
+      color var(--input-transition, var(--transition-default));
+    justify-content: center;
+    align-items: center;
+    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));
+    }
+  }
+
+  .Tb1TUq_visibilityTrigger:hover .Tb1TUq_indicator, .Tb1TUq_visibilityTrigger:focus-visible .Tb1TUq_indicator {
+    background: var(--password-input-trigger-hover-bg, var(--color-muted));
+  }
+}

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

@@ -0,0 +1,14 @@
+import { PasswordInput, usePasswordInput } from "@ark-ui/react/password-input";
+
+//#region src/components/password-input/PasswordInput.d.ts
+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>>;
+  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>>;
+};
+//#endregion
+export { PasswordInput$1 as PasswordInput, usePasswordInput };

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

@@ -0,0 +1,77 @@
+import { EyeClosedIcon, EyeIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import PasswordInput_module_default from "./PasswordInput.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+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
+	});
+});
+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 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 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 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 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 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$1 = Object.assign(PasswordInputRoot, {
+	Root: PasswordInputRoot,
+	RootProvider: PasswordInputRootProvider,
+	Label: PasswordInputLabel,
+	Control: PasswordInputControl,
+	Input: PasswordInputInput,
+	VisibilityTrigger: PasswordInputVisibilityTrigger,
+	Indicator: PasswordInputIndicator
+});
+//#endregion
+export { PasswordInput$1 as PasswordInput, usePasswordInput };

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

@@ -0,0 +1,12 @@
+import './PasswordInput.css';
+//#region src/components/password-input/PasswordInput.module.css
+var PasswordInput_module_default = {
+	"control": "Tb1TUq_control",
+	"indicator": "Tb1TUq_indicator",
+	"input": "Tb1TUq_input",
+	"label": "Tb1TUq_label",
+	"root": "Tb1TUq_root",
+	"visibilityTrigger": "Tb1TUq_visibilityTrigger"
+};
+//#endregion
+export { PasswordInput_module_default as default };

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

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