moduix 0.11.0 → 0.11.1

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1,123 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Pagination_module = require("./Pagination.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let react = require("react");
+let _base_ui_react_toolbar = require("@base-ui/react/toolbar");
+//#region src/components/Pagination/Pagination.tsx
+function clampPage(page, count) {
+	return Math.min(Math.max(page, 1), count);
+}
+function range(start, end) {
+	return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+function usePagination({ count, page, siblingCount = 1, boundaryCount = 1 }) {
+	const safeCount = Math.max(0, Math.floor(count));
+	const safePage = safeCount === 0 ? 0 : clampPage(Math.floor(page), safeCount);
+	const safeSiblingCount = Math.max(0, Math.floor(siblingCount));
+	const safeBoundaryCount = Math.max(0, Math.floor(boundaryCount));
+	return {
+		items: (0, react.useMemo)(() => {
+			if (safeCount === 0) return [];
+			if (safeCount <= safeSiblingCount * 2 + 3 + safeBoundaryCount * 2) return range(1, safeCount);
+			const startPages = range(1, safeBoundaryCount);
+			const endPages = range(safeCount - safeBoundaryCount + 1, safeCount);
+			const siblingsStart = Math.max(Math.min(safePage - safeSiblingCount, safeCount - safeBoundaryCount - safeSiblingCount * 2 - 1), safeBoundaryCount + 2);
+			const siblingsEnd = Math.min(Math.max(safePage + safeSiblingCount, safeBoundaryCount + safeSiblingCount * 2 + 2), endPages[0] - 2);
+			return [
+				...startPages,
+				...siblingsStart > safeBoundaryCount + 2 ? ["ellipsis-start"] : safeBoundaryCount + 1 < safeCount - safeBoundaryCount ? [safeBoundaryCount + 1] : [],
+				...range(siblingsStart, siblingsEnd),
+				...siblingsEnd < safeCount - safeBoundaryCount - 1 ? ["ellipsis-end"] : safeCount - safeBoundaryCount > safeBoundaryCount ? [safeCount - safeBoundaryCount] : [],
+				...endPages
+			];
+		}, [
+			safeBoundaryCount,
+			safeCount,
+			safePage,
+			safeSiblingCount
+		]),
+		page: safePage,
+		canNextPage: safeCount > 0 && safePage < safeCount,
+		canPreviousPage: safePage > 1,
+		nextPage: safeCount === 0 ? 0 : Math.min(safePage + 1, safeCount),
+		previousPage: safePage <= 1 ? safePage : safePage - 1
+	};
+}
+const getPaginationRender = ({ href }) => {
+	if (href != null) return;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", { type: "button" });
+};
+function Pagination({ "aria-label": ariaLabel = "Pagination", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"data-slot": "pagination-root",
+		"aria-label": ariaLabel,
+		className: (0, clsx.clsx)(require_Pagination_module.default.root, className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Root, {
+		"data-slot": "pagination-content",
+		className: require_mergeClassName.mergeClassName(className, require_Pagination_module.default.content),
+		...props
+	});
+}
+function PaginationItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "pagination-item",
+		className: (0, clsx.clsx)(require_Pagination_module.default.item, className),
+		...props
+	});
+}
+function PaginationLink({ className, isActive, render, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toolbar.Toolbar.Link, {
+		"data-slot": "pagination-link",
+		"aria-current": isActive ? "page" : void 0,
+		className: require_mergeClassName.mergeClassName(className, require_Pagination_module.default.link, isActive && require_Pagination_module.default.linkActive),
+		render: render ?? getPaginationRender(props),
+		...props
+	});
+}
+function PaginationPrevious({ children, className, render, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationLink, {
+		"aria-label": children ? ariaLabel : ariaLabel ?? "Go to previous page",
+		className: require_mergeClassName.mergeClassName(className, require_Pagination_module.default.previous, !children && require_Pagination_module.default.iconOnly),
+		render,
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.ChevronLeftIcon, {})
+	});
+}
+function PaginationNext({ children, className, render, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationLink, {
+		"aria-label": children ? ariaLabel : ariaLabel ?? "Go to next page",
+		className: require_mergeClassName.mergeClassName(className, require_Pagination_module.default.next, !children && require_Pagination_module.default.iconOnly),
+		render,
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.ChevronRightIcon, {})
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"data-slot": "pagination-ellipsis",
+		className: (0, clsx.clsx)(require_Pagination_module.default.ellipsis, className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			children: "..."
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_Pagination_module.default.visuallyHidden,
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;
+exports.usePagination = usePagination;

package/dist/components/Pagination/Pagination.css

@@ -0,0 +1,103 @@
+@layer ui.components {
+  .Etg_Eq_root {
+    display: flex;
+  }
+
+  .Etg_Eq_content {
+    align-items: center;
+    gap: var(--pagination-gap, var(--spacing-1));
+    display: inline-flex;
+  }
+
+  .Etg_Eq_item {
+    display: inline-flex;
+  }
+
+  .Etg_Eq_link, .Etg_Eq_ellipsis {
+    box-sizing: border-box;
+    min-width: var(--pagination-item-size, var(--size-lg));
+    min-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));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .Etg_Eq_link {
+    gap: var(--spacing-2);
+    border: 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(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      opacity var(--transition-default);
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--pagination-item-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--border-width-md) solid var(--color-ring);
+      outline-offset: -1px;
+    }
+
+    &[aria-disabled="true"], &[data-disabled], &[disabled] {
+      opacity: var(--pagination-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    & :where(svg) {
+      width: var(--pagination-icon-size, 1rem);
+      height: var(--pagination-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+  }
+
+  .Etg_Eq_linkActive, .Etg_Eq_link[aria-current="page"] {
+    border-color: var(--pagination-item-border-color-active, var(--color-foreground));
+    background-color: var(--pagination-item-bg-active, var(--color-foreground));
+    color: var(--pagination-item-color-active, var(--color-background));
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--pagination-item-bg-active, var(--color-foreground));
+      }
+    }
+  }
+
+  .Etg_Eq_previous, .Etg_Eq_next {
+    padding-inline: max(var(--pagination-item-padding-inline, .75rem), var(--spacing-3));
+  }
+
+  .Etg_Eq_iconOnly {
+    width: var(--pagination-item-size, var(--size-lg));
+    padding-inline: 0;
+  }
+
+  .Etg_Eq_ellipsis {
+    color: var(--pagination-ellipsis-color, var(--color-muted-foreground));
+    user-select: none;
+  }
+
+  .Etg_Eq_visuallyHidden {
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+}

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

@@ -1,25 +1,63 @@
-import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
-import { ComponentProps } from 'react';
-declare function usePagination({ count, page, siblingCount, boundaryCount, }: {
-    count: number;
-    page: number;
-    siblingCount?: number;
-    boundaryCount?: number;
+import { ComponentProps } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+
+//#region src/components/Pagination/Pagination.d.ts
+declare function usePagination({
+  count,
+  page,
+  siblingCount,
+  boundaryCount
+}: {
+  count: number;
+  page: number;
+  siblingCount?: number;
+  boundaryCount?: number;
 }): {
-    items: (number | "ellipsis-start" | "ellipsis-end")[];
-    page: number;
-    canNextPage: boolean;
-    canPreviousPage: boolean;
-    nextPage: number;
-    previousPage: number;
+  items: (number | "ellipsis-start" | "ellipsis-end")[];
+  page: number;
+  canNextPage: boolean;
+  canPreviousPage: boolean;
+  nextPage: number;
+  previousPage: number;
 };
-declare function Pagination({ 'aria-label': ariaLabel, className, ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
-declare function PaginationContent({ className, ...props }: ToolbarPrimitive.Root.Props): import("react").JSX.Element;
-declare function PaginationItem({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PaginationLink({ className, isActive, render, ...props }: ToolbarPrimitive.Link.Props & {
-    isActive?: boolean;
+declare function Pagination({
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}: ComponentProps<'nav'>): import("react").JSX.Element;
+declare function PaginationContent({
+  className,
+  ...props
+}: Toolbar.Root.Props): import("react").JSX.Element;
+declare function PaginationItem({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PaginationLink({
+  className,
+  isActive,
+  render,
+  ...props
+}: Toolbar.Link.Props & {
+  isActive?: boolean;
 }): import("react").JSX.Element;
-declare function PaginationPrevious({ children, className, render, 'aria-label': ariaLabel, ...props }: ToolbarPrimitive.Link.Props): import("react").JSX.Element;
-declare function PaginationNext({ children, className, render, 'aria-label': ariaLabel, ...props }: ToolbarPrimitive.Link.Props): import("react").JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, usePagination, };
+declare function PaginationPrevious({
+  children,
+  className,
+  render,
+  'aria-label': ariaLabel,
+  ...props
+}: Toolbar.Link.Props): import("react").JSX.Element;
+declare function PaginationNext({
+  children,
+  className,
+  render,
+  'aria-label': ariaLabel,
+  ...props
+}: Toolbar.Link.Props): import("react").JSX.Element;
+declare function PaginationEllipsis({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, usePagination };

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,116 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Pagination_module_default from "./Pagination.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/Pagination/Pagination.tsx
+function clampPage(page, count) {
+	return Math.min(Math.max(page, 1), count);
+}
+function range(start, end) {
+	return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+function usePagination({ count, page, siblingCount = 1, boundaryCount = 1 }) {
+	const safeCount = Math.max(0, Math.floor(count));
+	const safePage = safeCount === 0 ? 0 : clampPage(Math.floor(page), safeCount);
+	const safeSiblingCount = Math.max(0, Math.floor(siblingCount));
+	const safeBoundaryCount = Math.max(0, Math.floor(boundaryCount));
+	return {
+		items: useMemo(() => {
+			if (safeCount === 0) return [];
+			if (safeCount <= safeSiblingCount * 2 + 3 + safeBoundaryCount * 2) return range(1, safeCount);
+			const startPages = range(1, safeBoundaryCount);
+			const endPages = range(safeCount - safeBoundaryCount + 1, safeCount);
+			const siblingsStart = Math.max(Math.min(safePage - safeSiblingCount, safeCount - safeBoundaryCount - safeSiblingCount * 2 - 1), safeBoundaryCount + 2);
+			const siblingsEnd = Math.min(Math.max(safePage + safeSiblingCount, safeBoundaryCount + safeSiblingCount * 2 + 2), endPages[0] - 2);
+			return [
+				...startPages,
+				...siblingsStart > safeBoundaryCount + 2 ? ["ellipsis-start"] : safeBoundaryCount + 1 < safeCount - safeBoundaryCount ? [safeBoundaryCount + 1] : [],
+				...range(siblingsStart, siblingsEnd),
+				...siblingsEnd < safeCount - safeBoundaryCount - 1 ? ["ellipsis-end"] : safeCount - safeBoundaryCount > safeBoundaryCount ? [safeCount - safeBoundaryCount] : [],
+				...endPages
+			];
+		}, [
+			safeBoundaryCount,
+			safeCount,
+			safePage,
+			safeSiblingCount
+		]),
+		page: safePage,
+		canNextPage: safeCount > 0 && safePage < safeCount,
+		canPreviousPage: safePage > 1,
+		nextPage: safeCount === 0 ? 0 : Math.min(safePage + 1, safeCount),
+		previousPage: safePage <= 1 ? safePage : safePage - 1
+	};
+}
+const getPaginationRender = ({ href }) => {
+	if (href != null) return;
+	return /* @__PURE__ */ jsx("button", { type: "button" });
+};
+function Pagination({ "aria-label": ariaLabel = "Pagination", className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "pagination-root",
+		"aria-label": ariaLabel,
+		className: clsx(Pagination_module_default.root, className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"data-slot": "pagination-content",
+		className: mergeClassName(className, Pagination_module_default.content),
+		...props
+	});
+}
+function PaginationItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "pagination-item",
+		className: clsx(Pagination_module_default.item, className),
+		...props
+	});
+}
+function PaginationLink({ className, isActive, render, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Link, {
+		"data-slot": "pagination-link",
+		"aria-current": isActive ? "page" : void 0,
+		className: mergeClassName(className, Pagination_module_default.link, isActive && Pagination_module_default.linkActive),
+		render: render ?? getPaginationRender(props),
+		...props
+	});
+}
+function PaginationPrevious({ children, className, render, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(PaginationLink, {
+		"aria-label": children ? ariaLabel : ariaLabel ?? "Go to previous page",
+		className: mergeClassName(className, Pagination_module_default.previous, !children && Pagination_module_default.iconOnly),
+		render,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+	});
+}
+function PaginationNext({ children, className, render, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(PaginationLink, {
+		"aria-label": children ? ariaLabel : ariaLabel ?? "Go to next page",
+		className: mergeClassName(className, Pagination_module_default.next, !children && Pagination_module_default.iconOnly),
+		render,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "pagination-ellipsis",
+		className: clsx(Pagination_module_default.ellipsis, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "..."
+		}), /* @__PURE__ */ jsx("span", {
+			className: Pagination_module_default.visuallyHidden,
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, usePagination };

package/dist/components/Pagination/Pagination.module.cjs

@@ -0,0 +1,16 @@
+import './Pagination.css';
+//#region src/components/Pagination/Pagination.module.css
+var Pagination_module_default = {
+	"content": "Etg_Eq_content",
+	"ellipsis": "Etg_Eq_ellipsis",
+	"iconOnly": "Etg_Eq_iconOnly",
+	"item": "Etg_Eq_item",
+	"link": "Etg_Eq_link",
+	"linkActive": "Etg_Eq_linkActive",
+	"next": "Etg_Eq_next",
+	"previous": "Etg_Eq_previous",
+	"root": "Etg_Eq_root",
+	"visuallyHidden": "Etg_Eq_visuallyHidden"
+};
+//#endregion
+exports.default = Pagination_module_default;

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

@@ -0,0 +1,16 @@
+import './Pagination.css';
+//#region src/components/Pagination/Pagination.module.css
+var Pagination_module_default = {
+	"content": "Etg_Eq_content",
+	"ellipsis": "Etg_Eq_ellipsis",
+	"iconOnly": "Etg_Eq_iconOnly",
+	"item": "Etg_Eq_item",
+	"link": "Etg_Eq_link",
+	"linkActive": "Etg_Eq_linkActive",
+	"next": "Etg_Eq_next",
+	"previous": "Etg_Eq_previous",
+	"root": "Etg_Eq_root",
+	"visuallyHidden": "Etg_Eq_visuallyHidden"
+};
+//#endregion
+export { Pagination_module_default as default };

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

@@ -1 +1 @@
-export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, usePagination, } from './Pagination';
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, usePagination } from "./Pagination.js";

package/dist/components/PasswordInput/PasswordInput.cjs

@@ -0,0 +1,47 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_InputGroup = require("../InputGroup/InputGroup.cjs");
+const require_PasswordInput_module = require("./PasswordInput.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let react = require("react");
+//#region src/components/PasswordInput/PasswordInput.tsx
+const DEFAULT_VISIBILITY_TOGGLE_LABELS = {
+	show: "Show password",
+	hide: "Hide password"
+};
+const PasswordInput = (0, react.forwardRef)(function PasswordInput({ className, defaultVisible = false, disabled, onVisibleChange, readOnly, size = "md", visibilityToggleLabels = DEFAULT_VISIBILITY_TOGGLE_LABELS, ...props }, ref) {
+	const [visible, setVisible] = (0, react.useState)(defaultVisible);
+	const handleToggleMouseDown = (event) => {
+		event.preventDefault();
+	};
+	const handleToggleClick = () => {
+		const nextVisible = !visible;
+		setVisible(nextVisible);
+		onVisibleChange?.(nextVisible);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_InputGroup.InputGroup, {
+		"data-slot": "password-input-root",
+		className: (0, clsx.clsx)(require_PasswordInput_module.default.root, className),
+		size,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputGroup.InputGroupInput, {
+			ref,
+			...props,
+			className: require_PasswordInput_module.default.input,
+			disabled,
+			readOnly,
+			size,
+			type: visible ? "text" : "password"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputGroup.InputGroupButton, {
+			"aria-label": visible ? visibilityToggleLabels.hide : visibilityToggleLabels.show,
+			"aria-pressed": visible,
+			className: require_PasswordInput_module.default.toggle,
+			"data-slot": "password-input-toggle",
+			disabled,
+			onClick: handleToggleClick,
+			onMouseDown: handleToggleMouseDown,
+			children: visible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.EyeClosedIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.EyeIcon, {})
+		})]
+	});
+});
+//#endregion
+exports.PasswordInput = PasswordInput;

package/dist/components/PasswordInput/PasswordInput.css

@@ -0,0 +1,19 @@
+@layer ui.components {
+  ._72aPqG_root {
+    width: var(--input-width, 100%);
+    max-width: var(--input-max-width, none);
+  }
+
+  ._72aPqG_input {
+    min-width: 0;
+  }
+
+  ._72aPqG_toggle {
+    --button-icon-size: var(--input-group-icon-size, 1rem);
+    color: var(--color-muted-foreground);
+  }
+
+  ._72aPqG_toggle[aria-pressed="true"] {
+    color: var(--color-foreground);
+  }
+}

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -1,14 +1,16 @@
-import { ComponentProps } from 'react';
-import { InputProps } from '../Input';
+import { InputProps } from "../Input/Input.js";
+import { ComponentProps } from "react";
+
+//#region src/components/PasswordInput/PasswordInput.d.ts
 type PasswordInputProps = Omit<InputProps, 'className' | 'type'> & {
-    className?: ComponentProps<'div'>['className'];
-    defaultVisible?: boolean;
-    onVisibleChange?: (visible: boolean) => void;
-    visibilityToggleLabels?: {
-        show: string;
-        hide: string;
-    };
+  className?: ComponentProps<'div'>['className'];
+  defaultVisible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+  visibilityToggleLabels?: {
+    show: string;
+    hide: string;
+  };
 };
-declare const PasswordInput: import('react').ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { PasswordInput };
-export type { PasswordInputProps };
+declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { PasswordInput, type PasswordInputProps };

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,47 @@
+import { EyeClosedIcon, EyeIcon } from "../../icons/ui/Icons.js";
+import { InputGroup, InputGroupButton, InputGroupInput } from "../InputGroup/InputGroup.js";
+import PasswordInput_module_default from "./PasswordInput.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef, useState } from "react";
+//#region src/components/PasswordInput/PasswordInput.tsx
+const DEFAULT_VISIBILITY_TOGGLE_LABELS = {
+	show: "Show password",
+	hide: "Hide password"
+};
+const PasswordInput = forwardRef(function PasswordInput({ className, defaultVisible = false, disabled, onVisibleChange, readOnly, size = "md", visibilityToggleLabels = DEFAULT_VISIBILITY_TOGGLE_LABELS, ...props }, ref) {
+	const [visible, setVisible] = useState(defaultVisible);
+	const handleToggleMouseDown = (event) => {
+		event.preventDefault();
+	};
+	const handleToggleClick = () => {
+		const nextVisible = !visible;
+		setVisible(nextVisible);
+		onVisibleChange?.(nextVisible);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "password-input-root",
+		className: clsx(PasswordInput_module_default.root, className),
+		size,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			ref,
+			...props,
+			className: PasswordInput_module_default.input,
+			disabled,
+			readOnly,
+			size,
+			type: visible ? "text" : "password"
+		}), /* @__PURE__ */ jsx(InputGroupButton, {
+			"aria-label": visible ? visibilityToggleLabels.hide : visibilityToggleLabels.show,
+			"aria-pressed": visible,
+			className: PasswordInput_module_default.toggle,
+			"data-slot": "password-input-toggle",
+			disabled,
+			onClick: handleToggleClick,
+			onMouseDown: handleToggleMouseDown,
+			children: visible ? /* @__PURE__ */ jsx(EyeClosedIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+		})]
+	});
+});
+//#endregion
+export { PasswordInput };

package/dist/components/PasswordInput/PasswordInput.module.cjs

@@ -0,0 +1,9 @@
+import './PasswordInput.css';
+//#region src/components/PasswordInput/PasswordInput.module.css
+var PasswordInput_module_default = {
+	"input": "_72aPqG_input",
+	"root": "_72aPqG_root",
+	"toggle": "_72aPqG_toggle"
+};
+//#endregion
+exports.default = PasswordInput_module_default;

package/dist/components/PasswordInput/PasswordInput.module.js

@@ -0,0 +1,9 @@
+import './PasswordInput.css';
+//#region src/components/PasswordInput/PasswordInput.module.css
+var PasswordInput_module_default = {
+	"input": "_72aPqG_input",
+	"root": "_72aPqG_root",
+	"toggle": "_72aPqG_toggle"
+};
+//#endregion
+export { PasswordInput_module_default as default };

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

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