@glyphui/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,151 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useFieldControl } from "../field/field-context.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { numberInputStyles } from "./number-input.styles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/number-input/number-input.tsx
+function clamp(value, min, max) {
+	return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, value));
+}
+/** Parses user text leniently: keeps digits, one leading minus and the decimal point. */
+function parse(text) {
+	const cleaned = text.replace(/[^\d.-]/g, "").replace(/(?!^)-/g, "");
+	if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
+	const n = Number(cleaned);
+	return Number.isFinite(n) ? n : null;
+}
+/** Round away float noise from repeated steps (0.1 + 0.2). */
+function roundToStep(value, step) {
+	const decimals = (String(step).split(".")[1] ?? "").length;
+	return Number(value.toFixed(Math.min(decimals + 2, 10)));
+}
+/**
+* A number field with − / + steppers, arrow-key stepping, min/max clamping on blur, and
+* locale formatting when not focused. The value is a `number`, never a string.
+*/
+function NumberInput(inProps) {
+	const [props, slots] = useComponentConfig("NumberInput", useFieldControl(inProps));
+	const { value: valueProp, defaultValue = null, onValueChange, min, max, step = 1, formatOptions, locale, prefix, suffix, hideSteppers = false, size, className, inputClassName, disabled, readOnly, onBlur, onFocus, onKeyDown, ...rest } = props;
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState(null);
+	const s = numberInputStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	const display = draft ?? (value === null || value === void 0 ? "" : formatOptions ? new Intl.NumberFormat(locale, formatOptions).format(value) : String(value));
+	const commit = (next) => {
+		setValue(next === null ? null : roundToStep(clamp(next, min, max), step));
+	};
+	const stepBy = (direction, multiplier = 1) => {
+		const base = draft !== null ? parse(draft) : value;
+		commit((base ?? min ?? 0) + direction * step * multiplier);
+		setDraft(null);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || readOnly) return;
+		const multiplier = event.shiftKey ? 10 : 1;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			stepBy(1, multiplier);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			stepBy(-1, multiplier);
+		} else if (event.key === "Home" && min !== void 0) {
+			event.preventDefault();
+			commit(min);
+			setDraft(null);
+		} else if (event.key === "End" && max !== void 0) {
+			event.preventDefault();
+			commit(max);
+			setDraft(null);
+		} else if (event.key === "Enter" && draft !== null) {
+			commit(parse(draft));
+			setDraft(null);
+		}
+	};
+	const atMin = value !== null && value !== void 0 && min !== void 0 && value <= min;
+	const atMax = value !== null && value !== void 0 && max !== void 0 && value >= max;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "number-input",
+		"data-invalid": invalid || void 0,
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				inputMode: "decimal",
+				role: "spinbutton",
+				"aria-valuenow": value ?? void 0,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				autoComplete: "off",
+				disabled,
+				readOnly,
+				value: display,
+				className: s.input({ class: [slots.input, inputClassName] }),
+				onFocus: (event) => {
+					setDraft(value === null || value === void 0 ? "" : String(value));
+					onFocus?.(event);
+				},
+				onChange: (event) => setDraft(event.target.value),
+				onBlur: (event) => {
+					if (draft !== null) commit(parse(draft));
+					setDraft(null);
+					onBlur?.(event);
+				},
+				onKeyDown: handleKeyDown,
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: suffix
+			}),
+			!hideSteppers && /* @__PURE__ */ jsxs("span", {
+				className: s.steppers({ class: slots.steppers }),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Decrease",
+					disabled: disabled || readOnly || atMin,
+					className: s.stepper({ class: slots.stepper }),
+					onClick: () => stepBy(-1),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Increase",
+					disabled: disabled || readOnly || atMax,
+					className: s.stepper({ class: slots.stepper }),
+					onClick: () => stepBy(1),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { NumberInput };

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

@@ -0,0 +1,68 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/number-input/number-input.styles.d.ts
+export declare const numberInputStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+      stepper: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+  steppers: string;
+  stepper: string[];
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+      stepper: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+  steppers: string;
+  stepper: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+      stepper: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+  steppers: string;
+  stepper: string[];
+}>>;
+export type NumberInputVariants = VariantProps<typeof numberInputStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    NumberInput: StylesEntry<typeof numberInputStyles>;
+  }
+}
+//#endregion

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

@@ -0,0 +1,35 @@
+"use client";
+import { focusRing } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { fieldControl } from "../input/input.styles.js";
+//#region src/components/number-input/number-input.styles.ts
+const numberInputStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			...fieldControl,
+			"flex items-center gap-2 pl-3",
+			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+			"data-invalid:focus-within:ring-danger/20",
+			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+		],
+		input: "h-full w-full min-w-0 bg-transparent tabular-nums text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		adornment: "flex shrink-0 items-center text-faint-foreground [&>svg]:size-4",
+		steppers: "flex h-full shrink-0 items-stretch border-l border-input",
+		stepper: [
+			"inline-flex w-8 cursor-pointer items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground",
+			"disabled:pointer-events-none disabled:opacity-40 [&>svg]:size-3.5 last:rounded-r-[calc(var(--radius-md)-1px)]",
+			focusRing
+		]
+	},
+	variants: { size: {
+		sm: { root: "h-(--glyph-control-sm) text-small" },
+		md: { root: "h-(--glyph-control-md) text-small" },
+		lg: {
+			root: "h-(--glyph-control-lg) text-body",
+			stepper: "w-10"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { numberInputStyles };

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

@@ -0,0 +1,4 @@
+import { PaginationVariants, paginationStyles } from "./pagination.styles.js";
+import { Pagination, PaginationProps } from "./pagination.js";
+import { PaginationItem, paginationRange } from "./pagination-range.js";
+export { Pagination, type PaginationItem, type PaginationProps, type PaginationVariants, paginationRange, paginationStyles };

package/dist/components/pagination/pagination-range.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/pagination/pagination-range.d.ts
+export type PaginationItem = number | 'ellipsis';
+/**
+ * The page numbers to show, with `'ellipsis'` for gaps. Always includes the first and
+ * last page and `siblingCount` pages on each side of the current one, and keeps the
+ * number of items constant so the control doesn't jump in width.
+ *
+ * `paginationRange(6, 20)` → `[1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]`
+ */
+export declare function paginationRange(page: number, pageCount: number, siblingCount?: number): PaginationItem[];
+//#endregion

package/dist/components/pagination/pagination-range.js

@@ -0,0 +1,42 @@
+"use client";
+//#region src/components/pagination/pagination-range.ts
+/**
+* The page numbers to show, with `'ellipsis'` for gaps. Always includes the first and
+* last page and `siblingCount` pages on each side of the current one, and keeps the
+* number of items constant so the control doesn't jump in width.
+*
+* `paginationRange(6, 20)` → `[1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]`
+*/
+function paginationRange(page, pageCount, siblingCount = 1) {
+	const count = Math.max(0, Math.floor(pageCount));
+	if (count === 0) return [];
+	const current = Math.min(Math.max(1, Math.floor(page)), count);
+	if (count <= siblingCount * 2 + 5) return range(1, count);
+	const left = Math.max(current - siblingCount, 1);
+	const right = Math.min(current + siblingCount, count);
+	const showLeftGap = left > 2;
+	const showRightGap = right < count - 1;
+	const edge = 3 + siblingCount * 2;
+	if (!showLeftGap && showRightGap) return [
+		...range(1, edge),
+		"ellipsis",
+		count
+	];
+	if (showLeftGap && !showRightGap) return [
+		1,
+		"ellipsis",
+		...range(count - edge + 1, count)
+	];
+	return [
+		1,
+		"ellipsis",
+		...range(left, right),
+		"ellipsis",
+		count
+	];
+}
+function range(from, to) {
+	return Array.from({ length: to - from + 1 }, (_, i) => from + i);
+}
+//#endregion
+export { paginationRange };

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

@@ -0,0 +1,18 @@
+import { PaginationVariants } from "./pagination.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/pagination/pagination.d.ts
+export interface PaginationProps extends Omit<ComponentProps<'nav'>, 'onChange'>, PaginationVariants {
+  /** Current page, starting at 1. */
+  page: number;
+  pageCount: number;
+  onPageChange?: (page: number) => void;
+  /** Render pages as links (through the provider's linkComponent) instead of buttons. */
+  getHref?: (page: number) => string;
+  /** Pages shown on each side of the current page. Default 1. */
+  siblingCount?: number;
+  /** Show first / last page buttons. Default true. */
+  showEdges?: boolean;
+}
+/** Page navigation for long lists. Controlled: you own `page`. */
+export declare function Pagination(inProps: PaginationProps): import("react").JSX.Element;
+//#endregion

package/dist/components/pagination/pagination.js

@@ -0,0 +1,94 @@
+"use client";
+import { useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons.js";
+import { ActiveIndicator } from "../../motion/active-indicator.js";
+import { paginationStyles } from "./pagination.styles.js";
+import { paginationRange } from "./pagination-range.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+const ChevronsLeftIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" })
+});
+const ChevronsRightIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m6 17 5-5-5-5M13 17l5-5-5-5" })
+});
+/** Page navigation for long lists. Controlled: you own `page`. */
+function Pagination(inProps) {
+	const [props, slots] = useComponentConfig("Pagination", inProps);
+	const { page, pageCount, onPageChange, getHref, siblingCount = 1, showEdges = true, size, className, ...rest } = props;
+	const Link = useLinkComponent();
+	const s = paginationStyles({ size });
+	const itemClass = s.item({ class: slots.item });
+	const current = Math.min(Math.max(1, page), Math.max(1, pageCount));
+	const indicatorId = `${useId()}-pagination-indicator`;
+	const control = (target, label, content, options = {}) => {
+		const disabled = target < 1 || target > pageCount || target === current && !options.current;
+		if (options.current) content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActiveIndicator, {
+			layoutId: indicatorId,
+			className: s.indicator({ class: slots.indicator })
+		}), content] });
+		const shared = {
+			"aria-label": label,
+			"aria-current": options.current ? "page" : void 0,
+			className: itemClass
+		};
+		if (getHref) {
+			if (disabled) return /* @__PURE__ */ jsx("span", {
+				"aria-disabled": "true",
+				...shared,
+				children: content
+			});
+			return /* @__PURE__ */ jsx(Link, {
+				href: getHref(target),
+				onClick: () => onPageChange?.(target),
+				...shared,
+				children: content
+			});
+		}
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled,
+			onClick: () => onPageChange?.(target),
+			...shared,
+			children: content
+		});
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Pagination",
+		"data-slot": "pagination",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: s.list({ class: slots.list }),
+			children: [
+				showEdges && /* @__PURE__ */ jsx("li", { children: control(1, "First page", /* @__PURE__ */ jsx(ChevronsLeftIcon, {})) }),
+				/* @__PURE__ */ jsx("li", { children: control(current - 1, "Previous page", /* @__PURE__ */ jsx(ChevronLeftIcon, {})) }),
+				paginationRange(current, pageCount, siblingCount).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+					className: s.ellipsis({ class: slots.ellipsis }),
+					"aria-hidden": "true",
+					children: "…"
+				}, `gap-${index}`) : /* @__PURE__ */ jsx("li", { children: control(item, `Page ${item}`, item, { current: item === current }) }, item)),
+				/* @__PURE__ */ jsx("li", { children: control(current + 1, "Next page", /* @__PURE__ */ jsx(ChevronRightIcon, {})) }),
+				showEdges && /* @__PURE__ */ jsx("li", { children: control(pageCount, "Last page", /* @__PURE__ */ jsx(ChevronsRightIcon, {})) })
+			]
+		})
+	});
+}
+//#endregion
+export { Pagination };

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

@@ -0,0 +1,65 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/pagination/pagination.styles.d.ts
+export declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      item: string;
+      ellipsis: string;
+    };
+    md: {
+      item: string;
+      ellipsis: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  item: string[];
+  ellipsis: string;
+  /** The current page's highlight. Slides to the new page when it changes. */
+  indicator: string;
+}, undefined, {
+  size: {
+    sm: {
+      item: string;
+      ellipsis: string;
+    };
+    md: {
+      item: string;
+      ellipsis: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  item: string[];
+  ellipsis: string;
+  /** The current page's highlight. Slides to the new page when it changes. */
+  indicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      item: string;
+      ellipsis: string;
+    };
+    md: {
+      item: string;
+      ellipsis: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  item: string[];
+  ellipsis: string;
+  /** The current page's highlight. Slides to the new page when it changes. */
+  indicator: string;
+}>>;
+export type PaginationVariants = VariantProps<typeof paginationStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Pagination: StylesEntry<typeof paginationStyles>;
+  }
+}
+//#endregion

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,35 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/pagination/pagination.styles.ts
+const paginationStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex",
+		list: "isolate flex flex-wrap items-center gap-1",
+		item: [
+			"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium tabular-nums text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:bg-muted hover:text-foreground",
+			"aria-[current=page]:text-primary-foreground aria-[current=page]:hover:bg-transparent",
+			"disabled:pointer-events-none disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40",
+			"[&>svg]:size-4"
+		],
+		ellipsis: "inline-flex items-center justify-center text-faint-foreground",
+		/** The current page's highlight. Slides to the new page when it changes. */
+		indicator: "pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-primary shadow-xs"
+	},
+	variants: { size: {
+		sm: {
+			item: "h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-1.5 text-small",
+			ellipsis: "h-(--glyph-control-sm) w-(--glyph-control-sm) text-small"
+		},
+		md: {
+			item: "h-(--glyph-control-md) min-w-(--glyph-control-md) px-2 text-small",
+			ellipsis: "h-(--glyph-control-md) w-(--glyph-control-md) text-small"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { paginationStyles };

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

@@ -0,0 +1,3 @@
+import { PasswordInput, PasswordInputProps, PasswordStrength, passwordStrength } from "./password-input.js";
+import { passwordInputStyles } from "./password-input.styles.js";
+export { PasswordInput, type PasswordInputProps, type PasswordStrength, passwordInputStyles, passwordStrength };

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

@@ -0,0 +1,20 @@
+import { InputProps } from "../input/input.js";
+//#region src/components/password-input/password-input.d.ts
+export type PasswordStrength = 'weak' | 'fair' | 'strong';
+/**
+ * A quick strength estimate from length and character variety. A hint for users,
+ * not a security check: enforce real rules on the server.
+ */
+export declare function passwordStrength(password: string): {
+  score: number;
+  strength: PasswordStrength;
+};
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix'> {
+  /** Show a strength meter under the field once the user starts typing. */
+  showStrength?: boolean;
+  /** Start with the password visible. */
+  defaultVisible?: boolean;
+}
+/** A password field with a show/hide toggle and an optional strength meter. */
+export declare function PasswordInput(inProps: PasswordInputProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,106 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Input } from "../input/input.js";
+import { passwordInputStyles } from "./password-input.styles.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/password-input/password-input.tsx
+/**
+* A quick strength estimate from length and character variety. A hint for users,
+* not a security check: enforce real rules on the server.
+*/
+function passwordStrength(password) {
+	let score = 0;
+	if (password.length >= 8) score++;
+	if (password.length >= 12) score++;
+	if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+	if (/\d/.test(password)) score++;
+	if (/[^A-Za-z0-9]/.test(password)) score++;
+	return {
+		score,
+		strength: score >= 4 ? "strong" : score >= 3 ? "fair" : "weak"
+	};
+}
+const filled = {
+	weak: 1,
+	fair: 2,
+	strong: 3
+};
+const barColor = {
+	weak: "bg-danger",
+	fair: "bg-warning",
+	strong: "bg-success"
+};
+const labels = {
+	weak: "Weak",
+	fair: "Fair",
+	strong: "Strong"
+};
+function EyeIcon({ off }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: off ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6" }), /* @__PURE__ */ jsx("path", { d: "M9.9 9.9a3 3 0 1 0 4.2 4.2M2 2l20 20" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})] })
+	});
+}
+/** A password field with a show/hide toggle and an optional strength meter. */
+function PasswordInput(inProps) {
+	const [props, slots] = useComponentConfig("PasswordInput", inProps);
+	const { showStrength = false, defaultVisible = false, value, defaultValue, onChange, className, ...rest } = props;
+	const [visible, setVisible] = useState(defaultVisible);
+	const [typed, setTyped] = useState(String(defaultValue ?? ""));
+	const current = value !== void 0 ? String(value) : typed;
+	const { strength } = passwordStrength(current);
+	const s = passwordInputStyles({ strength });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "password-input",
+		className: s.root({ class: [slots.root, className] }),
+		children: [/* @__PURE__ */ jsx(Input, {
+			...rest,
+			...value !== void 0 && { value },
+			...defaultValue !== void 0 && { defaultValue },
+			type: visible ? "text" : "password",
+			autoComplete: rest.autoComplete ?? "current-password",
+			spellCheck: false,
+			onChange: (event) => {
+				setTyped(event.target.value);
+				onChange?.(event);
+			},
+			suffix: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": visible ? "Hide password" : "Show password",
+				"aria-pressed": visible,
+				disabled: rest.disabled,
+				className: s.toggle({ class: slots.toggle }),
+				onClick: () => setVisible((v) => !v),
+				children: /* @__PURE__ */ jsx(EyeIcon, { off: visible })
+			})
+		}), showStrength && current.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: s.meter({ class: slots.meter }),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: s.bars({ class: slots.bars }),
+				"aria-hidden": "true",
+				children: [
+					1,
+					2,
+					3
+				].map((n) => /* @__PURE__ */ jsx("span", { className: s.bar({ class: [slots.bar, n <= filled[strength] && barColor[strength]] }) }, n))
+			}), /* @__PURE__ */ jsx("span", {
+				className: s.label({ class: slots.label }),
+				"aria-live": "polite",
+				children: labels[strength]
+			})]
+		})]
+	});
+}
+//#endregion
+export { PasswordInput, passwordStrength };