bits-lab 0.0.0-stage → 0.1.2

package/dist/MorphPopover.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface MorphPopoverProps {
+    /** Button content; it stays visible while the panel grows. */
+    label?: ReactNode;
+    icon?: ReactNode;
+    /** Panel content. The function form receives close(). */
+    children?: ReactNode | ((api: {
+        close: () => void;
+    }) => ReactNode);
+    /** Accessible name of the panel (defaults to the label when it's a string). */
+    panelLabel?: string;
+    /** Panel width, in px; its height follows the content. */
+    panelWidth?: number;
+    /** Which edge stays pinned to the button. */
+    align?: 'start' | 'center' | 'end';
+    /** Which way the panel grows. */
+    side?: 'bottom' | 'top';
+    /** Button height, in px. */
+    height?: number;
+    radius?: number;
+    /** Morph length, in ms. */
+    duration?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    backgroundColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MorphPopover({ label, icon, children, panelLabel, panelWidth, align, side, height, radius, duration, open: controlledOpen, onOpenChange, backgroundColor, textColor, lineColor, accentColor, fontFamily, className, style }: MorphPopoverProps): import("react").JSX.Element;

package/dist/MorphPopover.js

@@ -0,0 +1,168 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-morph-popover";
+const CSS = `
+.bl-mp { position: relative; display: inline-block; vertical-align: top; font-family: var(--bl-font); }
+.bl-mp__button { display: inline-flex; align-items: center; gap: 8px; height: var(--bl-h); padding: 0 18px; border: 0; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font: inherit; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--bl-line); white-space: nowrap; }
+.bl-mp__button:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-mp__button[data-hidden] { visibility: hidden; }
+.bl-mp__shell { position: absolute; z-index: 50; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); box-shadow: inset 0 0 0 1px var(--bl-line), 0 24px 50px -20px rgba(0,0,0,0.65); outline: none; }
+.bl-mp[data-align="start"] .bl-mp__shell { left: 0; }
+.bl-mp[data-align="end"] .bl-mp__shell { right: 0; }
+.bl-mp[data-align="center"] .bl-mp__shell { left: 50%; transform: translateX(-50%); }
+.bl-mp[data-side="bottom"] .bl-mp__shell { top: 0; }
+.bl-mp[data-side="top"] .bl-mp__shell { bottom: 0; }
+.bl-mp__ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; white-space: nowrap; pointer-events: none; }
+.bl-mp__panel { width: var(--bl-panel-w); padding: 16px; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function MorphPopover({
+  label = "Feedback",
+  icon,
+  children,
+  panelLabel,
+  panelWidth = 320,
+  align = "start",
+  side = "bottom",
+  height = 42,
+  radius = 14,
+  duration = 380,
+  open: controlledOpen,
+  onOpenChange,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  lineColor = "rgba(255,255,255,0.14)",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rootRef = useRef(null);
+  const buttonRef = useRef(null);
+  const shellRef = useRef(null);
+  const panelRef = useRef(null);
+  const ghostRef = useRef(null);
+  const [innerOpen, setInnerOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const open = controlledOpen ?? innerOpen;
+  const closing = useRef(false);
+  const setOpen = (next) => {
+    if (controlledOpen === void 0) setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+  const close = () => setOpen(false);
+  useEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+  const reduced = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  const size = (w, h) => ({ width: `${w}px`, height: `${h}px` });
+  useLayoutEffect(() => {
+    if (!mounted || !open) return;
+    const button = buttonRef.current;
+    const panel = panelRef.current;
+    const from = [button.offsetWidth, button.offsetHeight];
+    const width = Math.min(panelWidth, window.innerWidth - 32);
+    panel.style.width = `${width}px`;
+    const to = [width, panel.offsetHeight];
+    Object.assign(shellRef.current.style, size(...to));
+    button.setAttribute("data-hidden", "");
+    if (!reduced()) {
+      const easing = "cubic-bezier(.2,.9,.25,1.05)";
+      shellRef.current.animate([size(...from), size(...to)], { duration, easing });
+      panel.animate({ opacity: [0, 0, 1], filter: ["blur(4px)", "blur(4px)", "none"] }, { duration, easing: "ease-out" });
+      ghostRef.current.animate({ opacity: [1, 0, 0] }, { duration: duration * 0.6, fill: "forwards" });
+    } else {
+      ghostRef.current.style.opacity = "0";
+    }
+    (panel.querySelector('input, textarea, select, button, [href], [tabindex]:not([tabindex="-1"])') ?? shellRef.current).focus({ preventScroll: true });
+  }, [mounted, open]);
+  useEffect(() => {
+    if (open || !mounted || closing.current) return;
+    closing.current = true;
+    const shell = shellRef.current;
+    const button = buttonRef.current;
+    const finish = () => {
+      closing.current = false;
+      button.removeAttribute("data-hidden");
+      setMounted(false);
+      if (rootRef.current?.contains(document.activeElement) || document.activeElement === document.body) button.focus({ preventScroll: true });
+    };
+    if (reduced()) return finish();
+    const from = [shell.offsetWidth, shell.offsetHeight];
+    const to = [button.offsetWidth, button.offsetHeight];
+    panelRef.current.animate({ opacity: [1, 0] }, { duration: duration * 0.35, fill: "forwards" });
+    ghostRef.current.animate({ opacity: [0, 1] }, { duration: duration * 0.5, delay: duration * 0.4, fill: "forwards" });
+    shell.animate([size(...from), size(...to)], { duration: duration * 0.9, easing: "cubic-bezier(.4,0,.2,1)", fill: "forwards" }).onfinish = finish;
+  }, [open, mounted]);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event) => {
+      if (!rootRef.current.contains(event.target)) close();
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-mp ${className}`,
+      "data-align": align,
+      "data-side": side,
+      style: {
+        "--bl-h": `${height}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        "--bl-panel-w": `${panelWidth}px`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("button", { ref: buttonRef, type: "button", className: "bl-mp__button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": mounted ? `${uid}-panel` : void 0, onClick: () => setOpen(!open), children: [
+          icon,
+          label
+        ] }),
+        mounted && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: shellRef,
+            id: `${uid}-panel`,
+            className: "bl-mp__shell",
+            role: "dialog",
+            "aria-label": panelLabel ?? (typeof label === "string" ? label : void 0),
+            tabIndex: -1,
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                event.stopPropagation();
+                close();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { ref: ghostRef, className: "bl-mp__ghost", "aria-hidden": "true", children: [
+                icon,
+                label
+              ] }),
+              /* @__PURE__ */ jsx("div", { ref: panelRef, className: "bl-mp__panel", children: typeof children === "function" ? children({ close }) : children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MorphPopover as default
+};

package/dist/MorphWords.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from 'react';
+export interface MorphWordsProps {
+    /** Words to cycle through; the box sizes to the widest. */
+    words?: string[];
+    /** How long each word holds, in ms. */
+    interval?: number;
+    /** Morph length, in ms. */
+    morphTime?: number;
+    /** Alignment of shorter words inside the box. */
+    align?: 'center' | 'start' | 'end';
+    /** Announce each word to screen readers. */
+    announce?: boolean;
+    /** Text color (defaults to the inherited color). */
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MorphWords({ words, interval, morphTime, align, announce, color, className, style }: MorphWordsProps): import("react").JSX.Element;

package/dist/MorphWords.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-morph-words";
+const CSS = `
+.bl-morph { position: relative; display: inline-grid; vertical-align: bottom; color: var(--bl-ink); }
+.bl-morph__sizer, .bl-morph__stage { grid-area: 1 / 1; }
+.bl-morph__sizer { display: grid; visibility: hidden; }
+.bl-morph__sizer > span { grid-area: 1 / 1; white-space: nowrap; }
+.bl-morph__stage { position: relative; }
+.bl-morph__word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: var(--bl-align); white-space: nowrap; user-select: none; }
+.bl-morph__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function MorphWords({
+  words = ["pixels", "worlds", "quests", "magic"],
+  interval = 1800,
+  morphTime = 900,
+  align = "center",
+  announce = false,
+  color,
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rootRef = useRef(null);
+  const fromRef = useRef(null);
+  const toRef = useRef(null);
+  const stageRef = useRef(null);
+  const [index, setIndex] = useState(0);
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    setReduced(Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches));
+  }, []);
+  useEffect(() => {
+    if (words.length < 2) return void 0;
+    const from = fromRef.current;
+    const to = toRef.current;
+    const stage = stageRef.current;
+    let frame = 0;
+    let timer = 0;
+    let visible = true;
+    let current = 0;
+    const paint = (t) => {
+      const inT = Math.max(1e-4, t);
+      const outT = Math.max(1e-4, 1 - t);
+      to.style.filter = `blur(${Math.min(8 / inT - 8, 100)}px)`;
+      to.style.opacity = `${Math.pow(inT, 0.4) * 100}%`;
+      from.style.filter = `blur(${Math.min(8 / outT - 8, 100)}px)`;
+      from.style.opacity = `${Math.pow(outT, 0.4) * 100}%`;
+    };
+    const rest = () => {
+      stage.style.filter = "";
+      from.style.filter = "";
+      from.style.opacity = "100%";
+      to.style.filter = "";
+      to.style.opacity = "0%";
+    };
+    const morph = () => {
+      const next = (current + 1) % words.length;
+      from.textContent = words[current];
+      to.textContent = words[next];
+      if (reduced) {
+        current = next;
+        from.textContent = words[current];
+        setIndex(current);
+        timer = setTimeout(morph, interval);
+        return;
+      }
+      stage.style.filter = `url(#${uid}-goo)`;
+      const start = performance.now();
+      const step = (now) => {
+        const t = Math.min(1, (now - start) / morphTime);
+        paint(t);
+        if (t < 1) {
+          frame = requestAnimationFrame(step);
+          return;
+        }
+        current = next;
+        from.textContent = words[current];
+        rest();
+        setIndex(current);
+        if (visible) timer = setTimeout(morph, interval);
+      };
+      frame = requestAnimationFrame(step);
+    };
+    rest();
+    from.textContent = words[0];
+    const observer = new IntersectionObserver(([entry]) => {
+      const was = visible;
+      visible = entry.isIntersecting;
+      if (visible && !was) timer = setTimeout(morph, interval);
+      if (!visible) {
+        clearTimeout(timer);
+        cancelAnimationFrame(frame);
+        rest();
+        from.textContent = words[current];
+      }
+    });
+    observer.observe(rootRef.current);
+    timer = setTimeout(morph, interval);
+    return () => {
+      clearTimeout(timer);
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [words.join("|"), interval, morphTime, reduced, uid]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: rootRef,
+      className: `bl-morph ${className}`,
+      style: { "--bl-align": align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center", ...color ? { "--bl-ink": color } : { "--bl-ink": "currentColor" }, ...style },
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: `${uid}-goo`, children: /* @__PURE__ */ jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 255 -140" }) }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-morph__sizer", "aria-hidden": "true", children: words.map((word) => /* @__PURE__ */ jsx("span", { children: word }, word)) }),
+        /* @__PURE__ */ jsxs("span", { ref: stageRef, className: "bl-morph__stage", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { ref: fromRef, className: "bl-morph__word", children: words[0] }),
+          /* @__PURE__ */ jsx("span", { ref: toRef, className: "bl-morph__word", style: { opacity: 0 } })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-morph__sr", "aria-live": announce ? "polite" : void 0, children: words[index] ?? "" })
+      ]
+    }
+  );
+}
+export {
+  MorphWords as default
+};

package/dist/OTPInput.d.ts

@@ -0,0 +1,43 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface OTPInputProps {
+    /** Number of characters. */
+    length?: number;
+    /** Controlled code. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (code: string) => void;
+    /** Called once per complete code (typed, pasted or autofilled). */
+    onComplete?: (code: string) => void;
+    /** error shakes and turns red (reset it on the next change); success fuses the cells and locks the input. */
+    status?: 'idle' | 'error' | 'success';
+    /** Line under the cells; announced as an alert on error. */
+    message?: ReactNode;
+    /** Allowed characters; alphanumeric is uppercased. */
+    type?: 'numeric' | 'alphanumeric';
+    /** Hide the characters. */
+    mask?: boolean;
+    /** Separator every N cells; 0 for none. */
+    groupSize?: number;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    /** Accessible name of the input. */
+    label?: string;
+    cellWidth?: number;
+    cellHeight?: number;
+    gap?: number;
+    radius?: number;
+    borderWidth?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    filledLineColor?: string;
+    accentColor?: string;
+    errorColor?: string;
+    successColor?: string;
+    successTextColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function OTPInput({ length, value, defaultValue, onChange, onComplete, status, message, type, mask, groupSize, autoFocus, disabled, label, cellWidth, cellHeight, gap, radius, borderWidth, backgroundColor, textColor, mutedColor, lineColor, filledLineColor, accentColor, errorColor, successColor, successTextColor, fontFamily, className, style }: OTPInputProps): import("react").JSX.Element;

package/dist/OTPInput.js

@@ -0,0 +1,174 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-otp";
+const CSS = `
+.bl-otp { position: relative; display: inline-flex; max-width: 100%; flex-direction: column; align-items: center; gap: 10px; font-family: var(--bl-font); }
+.bl-otp__cells { position: relative; display: flex; max-width: 100%; align-items: center; gap: var(--bl-gap); transition: gap 320ms cubic-bezier(.2,.9,.25,1); }
+.bl-otp__cell { position: relative; display: grid; place-items: center; flex: 0 1 var(--bl-w); width: var(--bl-w); min-width: 22px; height: var(--bl-h); border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-size: calc(var(--bl-h) * 0.42); font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 var(--bl-border) var(--bl-line); transition: box-shadow 160ms, background-color 200ms, border-radius 320ms cubic-bezier(.2,.9,.25,1), transform 160ms; }
+.bl-otp__cell[data-filled] { box-shadow: inset 0 0 0 var(--bl-border) var(--bl-line-filled); }
+.bl-otp[data-focused] .bl-otp__cell[data-active] { box-shadow: inset 0 0 0 calc(var(--bl-border) + 1px) var(--bl-accent), 0 0 0 4px var(--bl-ring); }
+.bl-otp__char { animation: bl-otp-pop 160ms cubic-bezier(.2,.9,.25,1.4); }
+.bl-otp__caret { width: 2px; height: 42%; background: var(--bl-accent); animation: bl-otp-blink 1s steps(1) infinite; }
+.bl-otp__sep { width: 10px; height: 2px; border-radius: 1px; background: var(--bl-line-filled); transition: width 320ms, opacity 200ms; }
+.bl-otp__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; outline: none; cursor: text; opacity: 0.001; }
+.bl-otp__input:disabled { cursor: not-allowed; }
+.bl-otp[data-status="error"] .bl-otp__cells { animation: bl-otp-shake 420ms cubic-bezier(.36,.07,.19,.97); }
+.bl-otp[data-status="error"] .bl-otp__cell { box-shadow: inset 0 0 0 calc(var(--bl-border) + 1px) var(--bl-error); color: var(--bl-error); }
+.bl-otp[data-status="success"] .bl-otp__cells { gap: 0; }
+.bl-otp[data-status="success"] .bl-otp__sep { width: 0; opacity: 0; }
+.bl-otp[data-status="success"] .bl-otp__cell { background: var(--bl-success); color: var(--bl-success-ink); box-shadow: none; border-radius: 0; }
+.bl-otp[data-status="success"] .bl-otp__cell[data-edge="first"] { border-radius: var(--bl-radius) 0 0 var(--bl-radius); }
+.bl-otp[data-status="success"] .bl-otp__cell[data-edge="last"] { border-radius: 0 var(--bl-radius) var(--bl-radius) 0; }
+.bl-otp__check { position: absolute; right: -14px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bl-success); color: var(--bl-success-ink); transform: translate(100%, -50%) scale(0); transition: transform 300ms cubic-bezier(.2,.9,.25,1.5) 200ms; }
+.bl-otp[data-status="success"] .bl-otp__check { transform: translate(100%, -50%) scale(1); }
+.bl-otp[data-disabled] { opacity: 0.55; }
+.bl-otp__message { min-height: 1.3em; margin: 0; color: var(--bl-muted); font-size: 13px; }
+.bl-otp[data-status="error"] .bl-otp__message { color: var(--bl-error); }
+.bl-otp[data-status="success"] .bl-otp__message { color: var(--bl-success); }
+@keyframes bl-otp-pop { from { transform: scale(0.5); opacity: 0; } }
+@keyframes bl-otp-blink { 50% { opacity: 0; } }
+@keyframes bl-otp-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-otp__cells, .bl-otp__cell, .bl-otp__sep, .bl-otp__check { transition: none; }
+  .bl-otp__char, .bl-otp__caret, .bl-otp[data-status="error"] .bl-otp__cells { animation: none; }
+}
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const PATTERNS = { numeric: /[^0-9]/g, alphanumeric: /[^0-9a-z]/gi };
+function OTPInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  status = "idle",
+  message,
+  type = "numeric",
+  mask = false,
+  groupSize = 3,
+  autoFocus = false,
+  disabled = false,
+  label = "One-time code",
+  cellWidth = 48,
+  cellHeight = 58,
+  gap = 8,
+  radius = 12,
+  borderWidth = 1.5,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.14)",
+  filledLineColor = "rgba(255,255,255,0.32)",
+  accentColor = "#73eff7",
+  errorColor = "#ef7d57",
+  successColor = "#38b764",
+  successTextColor = "#0b0b14",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const inputRef = useRef(null);
+  const [inner, setInner] = useState(defaultValue);
+  const [focused, setFocused] = useState(false);
+  const code = (value ?? inner).slice(0, length);
+  const lastComplete = useRef("");
+  const clean = (raw) => {
+    const filtered = raw.replace(PATTERNS[type] ?? PATTERNS.numeric, "");
+    return (type === "alphanumeric" ? filtered.toUpperCase() : filtered).slice(0, length);
+  };
+  const update = (next) => {
+    if (value === void 0) setInner(next);
+    onChange?.(next);
+  };
+  useEffect(() => {
+    if (code.length === length && code !== lastComplete.current) {
+      lastComplete.current = code;
+      onComplete?.(code);
+    }
+    if (code.length < length) lastComplete.current = "";
+  }, [code, length]);
+  useEffect(() => {
+    if (status === "error") inputRef.current?.select();
+  }, [status]);
+  const active = Math.min(code.length, length - 1);
+  const cells = Array.from({ length }, (_, i) => i);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-otp ${className}`,
+      "data-status": status,
+      "data-focused": focused || void 0,
+      "data-disabled": disabled || void 0,
+      style: {
+        "--bl-w": `${cellWidth}px`,
+        "--bl-h": `${cellHeight}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-border": `${borderWidth}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-line-filled": filledLineColor,
+        "--bl-accent": accentColor,
+        "--bl-ring": `color-mix(in srgb, ${accentColor} 25%, transparent)`,
+        "--bl-error": errorColor,
+        "--bl-success": successColor,
+        "--bl-success-ink": successTextColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-otp__cells", children: [
+          cells.map((i) => /* @__PURE__ */ jsxs("span", { style: { display: "contents" }, children: [
+            groupSize > 0 && i > 0 && i % groupSize === 0 && /* @__PURE__ */ jsx("span", { className: "bl-otp__sep", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "bl-otp__cell", "data-edge": i === 0 ? "first" : i === length - 1 ? "last" : void 0, "data-filled": i < code.length || void 0, "data-active": i === active && code.length < length ? "" : void 0, "aria-hidden": "true", children: i < code.length ? /* @__PURE__ */ jsx("span", { className: "bl-otp__char", children: mask ? "\u2022" : code[i] }, code[i] + i) : focused && i === code.length && /* @__PURE__ */ jsx("span", { className: "bl-otp__caret" }) })
+          ] }, i)),
+          /* @__PURE__ */ jsx("span", { className: "bl-otp__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7.5 5.5 10.5 11.5 3.5" }) }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: "bl-otp__input",
+              value: code,
+              onChange: (event) => update(clean(event.target.value)),
+              onFocus: (event) => {
+                setFocused(true);
+                const end = event.target.value.length;
+                event.target.setSelectionRange(end, end);
+              },
+              onBlur: () => setFocused(false),
+              inputMode: type === "numeric" ? "numeric" : "text",
+              autoComplete: "one-time-code",
+              autoCapitalize: type === "alphanumeric" ? "characters" : "off",
+              autoCorrect: "off",
+              spellCheck: false,
+              autoFocus,
+              maxLength: length,
+              pattern: type === "numeric" ? `[0-9]{${length}}` : void 0,
+              disabled: disabled || status === "success",
+              type: mask ? "password" : "text",
+              "aria-label": label,
+              "aria-invalid": status === "error" || void 0,
+              "aria-describedby": message ? `${uid}-msg` : void 0
+            }
+          )
+        ] }),
+        message !== void 0 && /* @__PURE__ */ jsx("p", { id: `${uid}-msg`, className: "bl-otp__message", role: status === "error" ? "alert" : "status", children: message })
+      ]
+    }
+  );
+}
+export {
+  OTPInput as default
+};

package/dist/OverlayKit.d.ts

@@ -0,0 +1,97 @@
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from 'react';
+export type Side = 'top' | 'bottom' | 'left' | 'right';
+export type Align = 'start' | 'center' | 'end';
+/** The element a trigger or tooltip child must be: anything that takes DOM props and a ref. */
+type TriggerProps = HTMLAttributes<HTMLElement> & {
+    ref?: Ref<HTMLElement>;
+};
+type TriggerElement = ReactElement<TriggerProps>;
+type RenderChildren = ReactNode | ((api: {
+    close: () => void;
+}) => ReactNode);
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** An element (usually a button) that opens it; cloned with ARIA and onClick. */
+    trigger?: TriggerElement;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Content, or a function receiving { close }. Mark a button data-autofocus to focus it first. */
+    children?: RenderChildren;
+    /** Panel width in px. */
+    width?: number;
+    closeLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface SheetProps extends DialogProps {
+    /** Edge the sheet slides in from. */
+    side?: Side;
+}
+export interface TooltipProps {
+    content: ReactNode;
+    /** One element; it receives the hover/focus handlers and aria-describedby. */
+    children: TriggerElement;
+    side?: Side;
+    align?: Align;
+    /** Hover delay before showing, in ms. */
+    delay?: number;
+    /** Delay before hiding after the pointer leaves, in ms. */
+    closeDelay?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface PopoverProps {
+    trigger?: TriggerElement;
+    children?: RenderChildren;
+    /** Accessible name of the popover panel. */
+    label?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: Side;
+    align?: Align;
+    width?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface DropdownAction {
+    type?: 'item';
+    label: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+}
+export type DropdownItem = DropdownAction | {
+    type: 'separator';
+} | {
+    type: 'label';
+    label: ReactNode;
+};
+export interface DropdownProps {
+    trigger?: TriggerElement;
+    items?: DropdownItem[];
+    /** Accessible name of the menu. */
+    label?: string;
+    side?: Side;
+    align?: Align;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const MOTION: {
+    fast: number;
+    base: number;
+    slow: number;
+    easeOut: string;
+    easeIn: string;
+    spring: string;
+};
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;
+export declare function Sheet(props: SheetProps): import("react").JSX.Element;
+export declare function Tooltip({ content, children, side, align, delay, closeDelay, className, style }: TooltipProps): import("react").JSX.Element;
+export declare function Popover({ trigger, children, label, open, defaultOpen, onOpenChange, side, align, width, className, style }: PopoverProps): import("react").JSX.Element;
+export declare function Dropdown({ trigger, items, label, side, align, className, style }: DropdownProps): import("react").JSX.Element;
+export default Dialog;