fancy-ui-react 0.2.0

package/dist/components/number-ticker/NumberTicker.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function NumberTicker({
+  value = 0,
+  direction = "up",
+  duration = 1e3,
+  delay = 0,
+  decimalPlaces = 0,
+  className
+}) {
+  const spanRef = useRef(null);
+  const [displayValue, setDisplayValue] = useState(0);
+  const displayValueRef = useRef(0);
+  const hasAnimatedRef = useRef(false);
+  const animationFrameIdRef = useRef(null);
+  const initialValue = direction === "down" ? value : 0;
+  function setDisplay(next) {
+    displayValueRef.current = next;
+    setDisplayValue(next);
+  }
+  const animate = useEventCallback((target) => {
+    if (animationFrameIdRef.current !== null) {
+      cancelAnimationFrame(animationFrameIdRef.current);
+      animationFrameIdRef.current = null;
+    }
+    const start = displayValueRef.current;
+    const startTime = performance.now() + delay;
+    function tick(now) {
+      if (now < startTime) {
+        animationFrameIdRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeOutCubic(progress);
+      setDisplay(start + (target - start) * easedProgress);
+      if (progress < 1) {
+        animationFrameIdRef.current = requestAnimationFrame(tick);
+      } else {
+        animationFrameIdRef.current = null;
+      }
+    }
+    animationFrameIdRef.current = requestAnimationFrame(tick);
+  });
+  const valueRef = useLiveRef(value);
+  const directionRef = useLiveRef(direction);
+  useEffect(() => {
+    if (!hasAnimatedRef.current) {
+      setDisplay(initialValue);
+    }
+  }, [initialValue]);
+  useEffect(() => {
+    const node = spanRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !hasAnimatedRef.current) {
+          hasAnimatedRef.current = true;
+          const target = directionRef.current === "down" ? 0 : valueRef.current;
+          animate(target);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0 }
+    );
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      if (animationFrameIdRef.current !== null) {
+        cancelAnimationFrame(animationFrameIdRef.current);
+        animationFrameIdRef.current = null;
+      }
+    };
+  }, []);
+  const animTarget = direction === "down" ? 0 : value;
+  useEffect(() => {
+    if (hasAnimatedRef.current) {
+      animate(animTarget);
+    }
+  }, [animTarget, animate]);
+  const formattedValue = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimalPlaces,
+    maximumFractionDigits: decimalPlaces
+  }).format(Number(displayValue.toFixed(decimalPlaces)));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: spanRef,
+      className: cn(
+        "number-ticker inline-block text-black tabular-nums dark:text-white",
+        className
+      ),
+      children: formattedValue
+    }
+  );
+}
+export {
+  NumberTicker
+};

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

@@ -0,0 +1,2 @@
+export { NumberTicker } from "./NumberTicker.js";
+export type { NumberTickerProps } from "./NumberTicker.js";

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+export interface PaginationProps {
+    /**
+     * The current page, 1-based. Pass it to control the component from
+     * outside; omit it entirely to let the control own its own page and
+     * report every change through `onPageChange`.
+     */
+    page?: number;
+    /** Total number of pages. */
+    count: number;
+    /** Called with the new page whenever it changes, however the change happened. */
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. Defaults to `1`. */
+    siblingCount?: number;
+    /** Pages always shown at each end of the run. Defaults to `1`. */
+    boundaryCount?: number;
+    /** Shows First/Last jump buttons alongside Previous/Next. Defaults to `false`. */
+    showEdges?: boolean;
+    /** Disables every control in the nav. */
+    disabled?: boolean;
+    /** Accessible name for the `<nav>` landmark. Defaults to `"Pagination"`. */
+    label?: string;
+    /** Overrides the Previous button's content. */
+    previousLabel?: ReactNode;
+    /** Overrides the Next button's content. */
+    nextLabel?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the select cue through the sound controller. Off by default;
+     * only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The nav element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the Svelte source reads only these props off
+ * `$props()` and has no `...restProps`, so the port carries no wider
+ * attribute surface than the component it mirrors.
+ */
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { buildPageRange } from "./pagination-range.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css               */
+const pageButtonBase = "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
+const navButtonBase = "inline-flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
+const Pagination = forwardRef(
+  ({
+    page: pageProp,
+    count,
+    onPageChange,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showEdges = false,
+    disabled = false,
+    label = "Pagination",
+    previousLabel,
+    nextLabel,
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const playCue = useSoundCue(sound);
+    const [uncontrolledPage, setUncontrolledPage] = useState(1);
+    const isControlled = pageProp !== void 0;
+    const page = isControlled ? pageProp : uncontrolledPage;
+    const items = buildPageRange(page, count, siblingCount, boundaryCount);
+    const safeCount = Math.max(0, Math.floor(count));
+    const safePage = Math.min(Math.max(Math.floor(page), 1), Math.max(safeCount, 1));
+    const isFirst = safePage <= 1;
+    const isLast = safePage >= safeCount;
+    const [popArmed, setPopArmed] = useState(false);
+    const lastPageRef = useRef(safePage);
+    useEffect(() => {
+      if (safePage === lastPageRef.current) return;
+      lastPageRef.current = safePage;
+      setPopArmed(true);
+    }, [safePage]);
+    function goTo(next) {
+      if (disabled) return;
+      const clamped = Math.max(1, Math.min(Math.floor(next), Math.max(safeCount, 1)));
+      if (clamped === page) return;
+      if (!isControlled) setUncontrolledPage(clamped);
+      playCue("select");
+      onPageChange?.(clamped);
+    }
+    function handlePrevious() {
+      if (disabled || isFirst) return;
+      goTo(safePage - 1);
+    }
+    function handleNext() {
+      if (disabled || isLast) return;
+      goTo(safePage + 1);
+    }
+    function handleFirst() {
+      if (disabled || isFirst) return;
+      goTo(1);
+    }
+    function handleLast() {
+      if (disabled || isLast) return;
+      goTo(safeCount);
+    }
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref: forwardedRef,
+        "aria-label": label,
+        "data-armed": popArmed ? "true" : void 0,
+        className: cn("ft-pagination", className),
+        children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+          showEdges && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: navButtonBase,
+              disabled: disabled || isFirst,
+              "aria-label": "First page",
+              title: "First page",
+              onClick: handleFirst,
+              children: "« First"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: navButtonBase,
+              disabled: disabled || isFirst,
+              "aria-label": "Previous page",
+              title: "Previous page",
+              onClick: handlePrevious,
+              children: previousLabel ?? "‹ Previous"
+            }
+          ) }),
+          items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item === "ellipsis" ? (
+            // Decorative only: it stands for a run of hidden pages, not a
+            // control, so it must not take focus or be reachable by Tab.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-muted-foreground flex size-8 items-center justify-center select-none",
+                children: "…"
+              }
+            )
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                pageButtonBase,
+                item === safePage ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+              ),
+              disabled,
+              "aria-current": item === safePage ? "page" : void 0,
+              "aria-label": `Go to page ${item}`,
+              title: `Go to page ${item}`,
+              onClick: () => goTo(item),
+              children: item
+            }
+          ) }, item === "ellipsis" ? `ellipsis-${i}` : `page-${item}`)),
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: navButtonBase,
+              disabled: disabled || isLast,
+              "aria-label": "Next page",
+              title: "Next page",
+              onClick: handleNext,
+              children: nextLabel ?? "Next ›"
+            }
+          ) }),
+          showEdges && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: navButtonBase,
+              disabled: disabled || isLast,
+              "aria-label": "Last page",
+              title: "Last page",
+              onClick: handleLast,
+              children: "Last »"
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+export {
+  Pagination
+};

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

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

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

@@ -0,0 +1,11 @@
+export type PageItem = number | "ellipsis";
+/**
+ * Builds the visible page sequence for a pagination control, with
+ * `"ellipsis"` markers standing in for runs of two or more hidden pages.
+ *
+ * @param page - The current page (1-based). Clamped into `[1, count]`.
+ * @param count - Total number of pages. `count <= 0` returns `[]`.
+ * @param siblingCount - Pages shown on each side of `page`.
+ * @param boundaryCount - Pages always shown at each end of the run.
+ */
+export declare function buildPageRange(page: number, count: number, siblingCount: number, boundaryCount: number): PageItem[];

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

@@ -0,0 +1,35 @@
+"use client";
+function buildPageRange(page, count, siblingCount, boundaryCount) {
+  const safeCount = Math.floor(count);
+  if (safeCount <= 0) return [];
+  const safeSiblingCount = Math.max(0, Math.floor(siblingCount));
+  const safeBoundaryCount = Math.max(0, Math.floor(boundaryCount));
+  const current = Math.min(Math.max(Math.floor(page), 1), safeCount);
+  const visible = /* @__PURE__ */ new Set();
+  for (let p2 = 1; p2 <= Math.min(safeBoundaryCount, safeCount); p2++) visible.add(p2);
+  for (let p2 = Math.max(1, safeCount - safeBoundaryCount + 1); p2 <= safeCount; p2++) visible.add(p2);
+  const windowWidth = Math.min(safeSiblingCount * 2 + 1, safeCount);
+  let windowStart = current - safeSiblingCount;
+  if (windowStart < 1) windowStart = 1;
+  if (windowStart + windowWidth - 1 > safeCount) windowStart = safeCount - windowWidth + 1;
+  const windowEnd = windowStart + windowWidth - 1;
+  for (let p2 = windowStart; p2 <= windowEnd; p2++) visible.add(p2);
+  const items = [];
+  let p = 1;
+  while (p <= safeCount) {
+    if (visible.has(p)) {
+      items.push(p);
+      p++;
+      continue;
+    }
+    let runEnd = p;
+    while (runEnd + 1 <= safeCount && !visible.has(runEnd + 1)) runEnd++;
+    const runLength = runEnd - p + 1;
+    items.push(runLength === 1 ? p : "ellipsis");
+    p = runEnd + 1;
+  }
+  return items;
+}
+export {
+  buildPageRange
+};

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

@@ -0,0 +1,56 @@
+/** Result of scoring a password's strength. */
+export interface PasswordStrengthResult {
+    /** 0 = very weak, 4 = strongest. The bars fill left to right by this count. */
+    score: 0 | 1 | 2 | 3 | 4;
+    /** Carries the actual meaning — see the component README on why colour alone never does. */
+    label: string;
+}
+export interface PasswordInputProps {
+    /**
+     * Current value. Controlled when supplied: pair it with `onValueChange`,
+     * the React counterpart of the Svelte source's `bind:value`.
+     */
+    value?: string;
+    /** Initial value when uncontrolled (no `value` prop given). */
+    defaultValue?: string;
+    /** Called with the new value on every input event. */
+    onValueChange?: (value: string) => void;
+    /** Shown while the field is empty. */
+    placeholder?: string;
+    /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Blocks typing but stays focusable and is still submitted, unlike `disabled`. */
+    readonly?: boolean;
+    /** Native `required`. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Native `autocomplete` hint. `"new-password"` opts a password manager into offering to generate one. */
+    autocomplete?: "current-password" | "new-password" | "off";
+    /** Renders the show/hide toggle button. Defaults to `true`. */
+    showToggle?: boolean;
+    /** Renders the strength meter and label once there's a value. Defaults to `false`. */
+    showStrength?: boolean;
+    /** Overrides the built-in heuristic scorer — see the README before trusting the default one. */
+    strength?: (value: string) => PasswordStrengthResult;
+    /** Additional CSS classes, merged onto the root field surface (not the bare `<input>`). */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A password field with a reveal toggle and an optional strength meter.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native `<input>`.
+ */
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,246 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                   */
+const iconFade = preset("fade");
+const fadeParams = () => ({
+  duration: prefersReducedMotion() ? 0 : DURATIONS.micro
+});
+function defaultStrength(password) {
+  let classes = 0;
+  if (/[a-z]/.test(password)) classes++;
+  if (/[A-Z]/.test(password)) classes++;
+  if (/[0-9]/.test(password)) classes++;
+  if (/[^a-zA-Z0-9]/.test(password)) classes++;
+  const lengthBonus = password.length >= 12 ? 2 : password.length >= 8 ? 1 : 0;
+  const raw = classes + lengthBonus;
+  const score = raw <= 1 ? 0 : raw === 2 ? 1 : raw === 3 ? 2 : raw === 4 ? 3 : 4;
+  const labels = ["Very weak", "Weak", "Fair", "Good", "Strong"];
+  return { score, label: labels[score] };
+}
+const eyeIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "size-4",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+    ]
+  }
+);
+const eyeOffIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "size-4",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M9.9 4.24A9.1 9.1 0 0 1 12 4c7 0 11 8 11 8a17.6 17.6 0 0 1-2.16 3.19m-3.22 2.62A9.2 9.2 0 0 1 12 20c-7 0-11-8-11-8a17.7 17.7 0 0 1 4.09-5.41" }),
+      /* @__PURE__ */ jsx("path", { d: "M14.12 14.12a3 3 0 1 1-4.24-4.24" }),
+      /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+    ]
+  }
+);
+const PasswordInput = forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    label,
+    autocomplete = "current-password",
+    showToggle = true,
+    showStrength = false,
+    strength,
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const isControlled = valueProp !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const field = useField();
+    const effectiveId = field?.controlId ?? id;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveRequired = field?.required ?? required;
+    const effectiveInvalid = field?.invalid ?? invalid;
+    const [revealed, setRevealed] = useState(false);
+    const type = revealed ? "text" : "password";
+    const uid = useFancyId();
+    const strengthId = `${uid}-strength`;
+    const inputRef = useRef(null);
+    const composedRef = useComposedRefs(forwardedRef, inputRef);
+    const playCue = useSoundCue(sound);
+    const revealedIcon = usePresence(revealed);
+    const hiddenIcon = usePresence(!revealed);
+    const scoreFn = strength ?? defaultStrength;
+    const result = showStrength && value ? scoreFn(value) : void 0;
+    const describedBy = [field?.describedBy, result ? strengthId : void 0].filter(Boolean).join(" ") || void 0;
+    const tierClass = !result ? "" : result.score <= 1 ? "bg-destructive" : result.score === 2 ? "bg-muted-foreground" : "ft-password-strength-bar--strong";
+    const wrapperClasses = cn(
+      "ft-password-input flex w-full items-center gap-2 rounded-[8px] border border-input bg-background px-[12px] py-[9px] text-[13px] transition-colors",
+      effectiveDisabled && "cursor-not-allowed opacity-50",
+      effectiveInvalid && "border-destructive/50",
+      className
+    );
+    function handleInput(event) {
+      if (effectiveDisabled) {
+        event.currentTarget.value = value;
+        return;
+      }
+      const next = event.currentTarget.value;
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+    }
+    const pendingSelection = useRef(null);
+    function toggleReveal() {
+      if (effectiveDisabled) return;
+      const el = inputRef.current;
+      pendingSelection.current = {
+        start: el?.selectionStart ?? null,
+        end: el?.selectionEnd ?? null,
+        direction: el?.selectionDirection ?? void 0
+      };
+      const next = !revealed;
+      setRevealed(next);
+      playCue(next ? "toggle-on" : "toggle-off");
+    }
+    useIsomorphicLayoutEffect(() => {
+      const captured = pendingSelection.current;
+      pendingSelection.current = null;
+      const el = inputRef.current;
+      if (el && captured && captured.start !== null && captured.end !== null) {
+        el.setSelectionRange(captured.start, captured.end, captured.direction ?? void 0);
+      }
+    }, [revealed]);
+    function preventFocusSteal(event) {
+      event.preventDefault();
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "ft-password-input-wrapper flex w-full flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: composedRef,
+            type,
+            placeholder,
+            name,
+            autoComplete: autocomplete,
+            id: effectiveId,
+            value,
+            disabled: effectiveDisabled,
+            readOnly: readonly,
+            required: effectiveRequired,
+            "aria-invalid": effectiveInvalid ? "true" : void 0,
+            "aria-describedby": describedBy,
+            "aria-label": label,
+            className: "ft-password-input-field text-foreground placeholder:text-muted-foreground min-w-0 flex-1 border-0 bg-transparent p-0 outline-none disabled:cursor-not-allowed",
+            onChange: handleInput
+          }
+        ),
+        showToggle && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ft-password-input-toggle text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50",
+            disabled: effectiveDisabled,
+            "aria-pressed": revealed,
+            "aria-label": revealed ? "Hide password" : "Show password",
+            onMouseDown: preventFocusSteal,
+            onClick: toggleReveal,
+            children: /* @__PURE__ */ jsxs("span", { className: "ft-password-input-eye", children: [
+              revealedIcon.mounted && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ft-password-input-eye-layer",
+                  ref: revealedIcon.register(iconFade, fadeParams),
+                  children: eyeOffIcon
+                }
+              ),
+              hiddenIcon.mounted && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ft-password-input-eye-layer",
+                  ref: hiddenIcon.register(iconFade, fadeParams),
+                  children: eyeIcon
+                }
+              )
+            ] })
+          }
+        )
+      ] }),
+      result && /* @__PURE__ */ jsxs("div", { className: "ft-password-strength flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "ft-password-strength-bar h-1 flex-1 rounded-full",
+                result.score >= 1 ? tierClass : "bg-border"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "ft-password-strength-bar h-1 flex-1 rounded-full",
+                result.score >= 2 ? tierClass : "bg-border"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "ft-password-strength-bar h-1 flex-1 rounded-full",
+                result.score >= 3 ? tierClass : "bg-border"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "ft-password-strength-bar h-1 flex-1 rounded-full",
+                result.score >= 4 ? tierClass : "bg-border"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { id: strengthId, className: "text-[11px]", children: result.label })
+      ] })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+export {
+  PasswordInput
+};

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

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