@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/number-input/number-input.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import { IconMinus, IconPlus } from "@mlola-ui/icons";
+import { Field, fieldDescription } from "../input/input";
+import { cx } from "../_internal/react";
+import { parseNumber, settle, stepValue } from "./number";
+
+export { parseNumber, settle, stepValue } from "./number";
+
+export interface NumberInputProps {
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number | null) => void;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** What Shift+arrows and Page Up/Down move by; ten steps by default. */
+  largeStep?: number;
+  /** Decimals kept when a typed value is committed. */
+  precision?: number;
+  /** How the value reads at rest, as Intl formats it: currency, unit, grouping. */
+  format?: Intl.NumberFormatOptions;
+  locale?: string;
+  /** Show − and + beside the value. */
+  buttons?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * A number field that reads well and types well: formatted at rest ($1,200.00,
+ * 12 kg), plain while editing, in the reader's own separators. Arrows step
+ * (Shift for ten), Page keys take large steps, Home and End go to the
+ * bounds, and holding − or + keeps counting.
+ */
+export function NumberInput({
+  value,
+  defaultValue = null,
+  onValueChange,
+  label,
+  hint,
+  error,
+  placeholder,
+  min,
+  max,
+  step = 1,
+  largeStep,
+  precision,
+  format,
+  locale = "en",
+  buttons = true,
+  disabled,
+  required,
+  id,
+  className,
+}: NumberInputProps) {
+  const autoId = React.useId();
+  const fieldId = id ?? autoId;
+  const [inner, setInner] = React.useState<number | null>(defaultValue);
+  const current = value !== undefined ? value : inner;
+  const [editing, setEditing] = React.useState<string | null>(null);
+  const hold = React.useRef<{ timer?: number; interval?: number }>({});
+  const input = React.useRef<HTMLInputElement>(null);
+  const selectOnRender = React.useRef(false);
+  const latest = React.useRef(current);
+  latest.current = current;
+  const big = largeStep ?? step * 10;
+
+  const display = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: precision ?? 20, ...format }), [locale, precision, format]);
+  const plain = React.useMemo(() => new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: 20 }), [locale]);
+  const shown = editing ?? (current === null ? "" : display.format(current));
+
+  // On focus the plain value replaces the formatted one; select it before the next keystroke lands.
+  React.useLayoutEffect(() => {
+    if (!selectOnRender.current) return;
+    selectOnRender.current = false;
+    input.current?.select();
+  });
+
+  const commit = (next: number | null) => {
+    latest.current = next;
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  const nudge = (delta: number, by = step) => {
+    const next = stepValue(latest.current, delta, { step: by, min, max });
+    commit(next);
+    if (editing !== null) setEditing(plain.format(next));
+  };
+
+  const finish = () => {
+    if (editing === null) return;
+    const parsed = parseNumber(editing, locale);
+    commit(parsed === null ? null : settle(parsed, { min, max, precision }));
+    setEditing(null);
+  };
+
+  const stopHold = () => {
+    window.clearTimeout(hold.current.timer);
+    window.clearInterval(hold.current.interval);
+  };
+  React.useEffect(() => stopHold, []);
+
+  // Press and hold: one step now, then a steady run after a pause.
+  const startHold = (delta: number) => {
+    stopHold();
+    nudge(delta);
+    hold.current.timer = window.setTimeout(() => {
+      hold.current.interval = window.setInterval(() => nudge(delta), 60);
+    }, 400);
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const keys: Record<string, () => void> = {
+      ArrowUp: () => nudge(1, event.shiftKey ? big : step),
+      ArrowDown: () => nudge(-1, event.shiftKey ? big : step),
+      PageUp: () => nudge(1, big),
+      PageDown: () => nudge(-1, big),
+      Home: () => min !== undefined && commit(min),
+      End: () => max !== undefined && commit(max),
+      Enter: () => finish(),
+    };
+    if (keys[event.key]) {
+      event.preventDefault();
+      keys[event.key]();
+    } else if (event.key === "Escape" && editing !== null) {
+      event.preventDefault();
+      setEditing(null);
+    }
+  };
+
+  const atMin = current !== null && min !== undefined && current <= min;
+  const atMax = current !== null && max !== undefined && current >= max;
+
+  return (
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-number-input", className)}>
+      <div className="ml-number-input-control" data-disabled={disabled || undefined} data-invalid={error ? "" : undefined}>
+        <input
+          ref={input}
+          id={fieldId}
+          className="ml-number-input-field"
+          role="spinbutton"
+          inputMode="decimal"
+          autoComplete="off"
+          aria-valuenow={current ?? undefined}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuetext={current === null ? undefined : display.format(current)}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={fieldDescription(fieldId, { hint, error })}
+          value={shown}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          onFocus={() => {
+            selectOnRender.current = true;
+            setEditing(current === null ? "" : plain.format(current));
+          }}
+          onChange={(event) => setEditing(event.target.value)}
+          onBlur={finish}
+          onKeyDown={onKeyDown}
+        />
+        {buttons ? (
+          <span className="ml-number-input-buttons">
+            <button type="button" className="ml-number-input-step" tabIndex={-1} aria-label="Decrease" disabled={disabled || atMin} onPointerDown={(event) => { event.preventDefault(); startHold(-1); }} onPointerUp={stopHold} onPointerLeave={stopHold} onPointerCancel={stopHold}>
+              <IconMinus aria-hidden="true" size="0.9em" />
+            </button>
+            <button type="button" className="ml-number-input-step" tabIndex={-1} aria-label="Increase" disabled={disabled || atMax} onPointerDown={(event) => { event.preventDefault(); startHold(1); }} onPointerUp={stopHold} onPointerLeave={stopHold} onPointerCancel={stopHold}>
+              <IconPlus aria-hidden="true" size="0.9em" />
+            </button>
+          </span>
+        ) : null}
+      </div>
+    </Field>
+  );
+}

package/snapshot/source/packages/components/number-input/number.ts

@@ -0,0 +1,50 @@
+/** Numbers as people type them, in their own locale. */
+
+/** The locale's decimal and group separators, from how it writes 12345.6. */
+export function separators(locale = "en") {
+  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+  return { decimal: parts.find((part) => part.type === "decimal")?.value ?? ".", group: parts.find((part) => part.type === "group")?.value ?? "," };
+}
+
+/**
+ * Read what was typed: group separators, currency signs and units are
+ * ignored, the locale's decimal separator (or a dot) marks the fraction, and
+ * a leading minus or parentheses make it negative. Returns null for nothing
+ * numeric.
+ */
+export function parseNumber(text: string, locale = "en"): number | null {
+  const { decimal, group } = separators(locale);
+  let body = text.trim();
+  if (!body) return null;
+  const negative = /^\(.*\)$/.test(body) || /^[-−]/.test(body) || /[-−]$/.test(body);
+  body = body.split(group).join("").replace(/\s/g, "");
+  if (decimal !== ".") body = body.split(decimal).join(".");
+  body = body.replace(/[^\d.]/g, "");
+  if (!body || body === ".") return null;
+  const firstDot = body.indexOf(".");
+  if (firstDot !== -1) body = body.slice(0, firstDot + 1) + body.slice(firstDot + 1).replace(/\./g, "");
+  const value = Number(body);
+  if (!Number.isFinite(value)) return null;
+  return negative ? -value : value;
+}
+
+/** Clamp into [min, max] and round to `precision` decimals, without float noise. */
+export function settle(value: number, { min = -Infinity, max = Infinity, precision }: { min?: number; max?: number; precision?: number }) {
+  const bounded = Math.min(max, Math.max(min, value));
+  return precision === undefined ? Number(bounded.toFixed(10)) : Number(bounded.toFixed(precision));
+}
+
+/**
+ * Step from a value by `delta` steps and land on the step grid measured from
+ * min (or zero), so 3.3 steps up to 4 and down to 2. An empty field starts
+ * at min, or zero.
+ */
+export function stepValue(value: number | null, delta: number, { step = 1, min, max }: { step?: number; min?: number; max?: number }) {
+  const origin = min !== undefined && Number.isFinite(min) ? min : 0;
+  const decimals = (String(step).split(".")[1] ?? "").length;
+  const precision = decimals || undefined;
+  if (value === null) return settle(origin, { min, max, precision });
+  const next = value + delta * step;
+  const onGrid = origin + Math.round((next - origin) / step) * step;
+  return settle(onGrid, { min, max, precision });
+}

package/snapshot/source/packages/components/otp-input/otp-input.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+import { useControllableState } from "../_internal/react";
+import { Field, fieldDescription } from "../input/input";
+
+export interface OtpInputProps {
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called once every digit is filled. */
+  onComplete?: (value: string) => void;
+  label?: string;
+  hint?: string;
+  error?: string;
+  /** "numeric" (default) or "alphanumeric". */
+  mode?: "numeric" | "alphanumeric";
+  disabled?: boolean;
+  /** Split the boxes into groups, e.g. 3 for "123 456". */
+  groupSize?: number;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * A one-time code as separate boxes that behave like one field. Typing moves
+ * forward, Backspace moves back, arrows move freely, and pasting or the
+ * phone's SMS autofill fills every box at once.
+ */
+export function OtpInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  label,
+  hint,
+  error,
+  mode = "numeric",
+  disabled,
+  groupSize,
+  id,
+  className,
+}: OtpInputProps) {
+  const [code, setCode] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const boxes = React.useRef<Array<HTMLInputElement | null>>([]);
+  const generated = React.useId();
+  const fieldId = id ?? `otp-${generated}`;
+  const allowed = mode === "numeric" ? /\d/ : /[a-z0-9]/i;
+
+  const commit = (next: string, focusIndex?: number) => {
+    const clean = next.slice(0, length);
+    setCode(clean);
+    if (focusIndex !== undefined) boxes.current[Math.min(focusIndex, length - 1)]?.focus();
+    if (clean.length === length && !clean.includes(" ")) onComplete?.(clean);
+  };
+
+  const fill = (index: number, text: string) => {
+    const chars = [...text].filter((char) => allowed.test(char));
+    if (!chars.length) return;
+    const current = code.padEnd(length, " ").split("");
+    chars.forEach((char, offset) => {
+      if (index + offset < length) current[index + offset] = mode === "numeric" ? char : char.toUpperCase();
+    });
+    commit(current.join("").trimEnd(), index + chars.length);
+  };
+
+  return (
+    <Field id={fieldId} label={label} hint={hint} error={error} disabled={disabled} className={className}>
+      <div className="ml-otp" role="group" aria-label={label ?? `${length}-character code`} data-invalid={error ? "" : undefined}>
+        {Array.from({ length }, (_, index) => (
+          <React.Fragment key={index}>
+            {groupSize && index > 0 && index % groupSize === 0 ? <span aria-hidden="true" className="ml-otp-separator" /> : null}
+            <input
+              ref={(node) => {
+                boxes.current[index] = node;
+              }}
+              id={index === 0 ? fieldId : undefined}
+              className="ml-otp-box"
+              inputMode={mode === "numeric" ? "numeric" : "text"}
+              autoComplete={index === 0 ? "one-time-code" : "off"}
+              aria-label={`Digit ${index + 1} of ${length}`}
+              aria-invalid={error ? true : undefined}
+              aria-describedby={index === 0 ? fieldDescription(fieldId, { hint, error }) : undefined}
+              maxLength={index === 0 ? length : 1}
+              disabled={disabled}
+              value={(code[index] ?? "").trim()}
+              onFocus={(event) => event.target.select()}
+              onChange={(event) => fill(index, event.target.value)}
+              onPaste={(event) => {
+                event.preventDefault();
+                fill(index, event.clipboardData.getData("text"));
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Backspace") {
+                  event.preventDefault();
+                  const current = code.padEnd(length, " ").split("");
+                  const target = current[index]?.trim() ? index : Math.max(0, index - 1);
+                  current[target] = " ";
+                  commit(current.join("").trimEnd(), target);
+                } else if (event.key === "ArrowLeft") {
+                  event.preventDefault();
+                  boxes.current[Math.max(0, index - 1)]?.focus();
+                } else if (event.key === "ArrowRight") {
+                  event.preventDefault();
+                  boxes.current[Math.min(length - 1, index + 1)]?.focus();
+                }
+              }}
+            />
+          </React.Fragment>
+        ))}
+      </div>
+    </Field>
+  );
+}

package/snapshot/source/packages/components/pagination/pagination.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { cx } from "../_internal/react";
+import { IconChevronLeft, IconChevronRight } from "@mlola-ui/icons";
+
+type PageItem = number | "ellipsis-start" | "ellipsis-end";
+const pages = (current: number, total: number, siblingCount: number): PageItem[] => {
+  if (total <= siblingCount * 2 + 5) return Array.from({ length: total }, (_, index) => index + 1);
+  const left = Math.max(2, current - siblingCount);
+  const right = Math.min(total - 1, current + siblingCount);
+  const result: PageItem[] = [1];
+  if (left > 2) result.push("ellipsis-start");
+  else for (let page = 2; page < left; page += 1) result.push(page);
+  for (let page = left; page <= right; page += 1) result.push(page);
+  if (right < total - 1) result.push("ellipsis-end");
+  else for (let page = right + 1; page < total; page += 1) result.push(page);
+  result.push(total);
+  return result;
+};
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  className?: string;
+}
+export function Pagination({ currentPage, totalPages, onPageChange, siblingCount = 1, className }: PaginationProps) {
+  const total = Number.isFinite(totalPages) ? Math.max(1, Math.floor(totalPages)) : 1;
+  const requested = Number.isFinite(currentPage) ? Math.floor(currentPage) : 1;
+  const current = Math.min(total, Math.max(1, requested));
+  const siblings = Number.isFinite(siblingCount) ? Math.max(0, Math.floor(siblingCount)) : 1;
+  const go = (page: number) => {
+    const next = Math.min(total, Math.max(1, page));
+    if (next !== current) onPageChange(next);
+  };
+  return (
+    <nav aria-label="Pagination" className={cx("ml-pagination", className)}>
+      <ol className="ml-pagination-list">
+        <li>
+          <button type="button" aria-label="Go to previous page" disabled={current === 1} className="ml-pagination-button" onClick={() => go(current - 1)}>
+            <IconChevronLeft aria-hidden="true" size="1em" /><span className="ml-pagination-button-label">Previous</span>
+          </button>
+        </li>
+        {pages(current, total, siblings).map((item) => typeof item === "number" ? (
+          <li key={item}>
+            <button
+              type="button"
+              aria-label={`Go to page ${item}`}
+              aria-current={item === current ? "page" : undefined}
+              data-state={item === current ? "active" : "inactive"}
+              className="ml-pagination-button"
+              onClick={() => go(item)}
+            >{item}</button>
+          </li>
+        ) : <li key={item}><span aria-hidden="true" className="ml-pagination-ellipsis">…</span></li>)}
+        <li>
+          <button type="button" aria-label="Go to next page" disabled={current === total} className="ml-pagination-button" onClick={() => go(current + 1)}>
+            <span className="ml-pagination-button-label">Next</span><IconChevronRight aria-hidden="true" size="1em" />
+          </button>
+        </li>
+      </ol>
+    </nav>
+  );
+}

package/snapshot/source/packages/components/popover/popover.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useFloating, usePortalNode, type Align, type Side } from "../_internal/floating";
+import { composeRefs, cx, useControllableState } from "../_internal/react";
+
+export interface PopoverProps {
+  /** The element that opens the popover; it receives the ARIA wiring. */
+  trigger: React.ReactElement<Record<string, unknown>>;
+  children: React.ReactNode;
+  /** The layer's accessible name. */
+  label: string;
+  side?: Side;
+  align?: Align;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/**
+ * A non-modal layer anchored to its trigger: filters, share options, a
+ * definition. It opens on click, takes focus, and gives it back to the
+ * trigger when Escape, an outside click or moving focus away closes it.
+ */
+export function Popover({ trigger, children, label, side = "bottom", align = "start", open, defaultOpen = false, onOpenChange, className }: PopoverProps) {
+  const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
+  const anchor = React.useRef<HTMLElement>(null);
+  const layer = React.useRef<HTMLDivElement>(null);
+  const portal = usePortalNode();
+  const id = React.useId();
+  useFloating(anchor, layer, isOpen && Boolean(portal), { side, align });
+
+  const close = React.useCallback(
+    (restoreFocus: boolean) => {
+      setOpen(false);
+      if (restoreFocus) requestAnimationFrame(() => anchor.current?.focus());
+    },
+    [setOpen],
+  );
+
+  React.useEffect(() => {
+    if (!isOpen || !portal) return;
+    const frame = requestAnimationFrame(() => {
+      const node = layer.current;
+      (node?.querySelector<HTMLElement>(FOCUSABLE) ?? node)?.focus();
+    });
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (!layer.current?.contains(target) && !anchor.current?.contains(target)) close(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        close(true);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, portal, close]);
+
+  const triggerProps = trigger.props as { onClick?: React.MouseEventHandler; ref?: React.Ref<HTMLElement> };
+  const anchored = React.cloneElement(trigger, {
+    ref: composeRefs(anchor, triggerProps.ref as React.Ref<HTMLElement> | undefined),
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? id : undefined,
+    onClick: (event: React.MouseEvent) => {
+      triggerProps.onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!isOpen);
+    },
+  });
+
+  return (
+    <>
+      {anchored}
+      {isOpen && portal
+        ? createPortal(
+            <div
+              ref={layer}
+              id={id}
+              role="dialog"
+              aria-label={label}
+              tabIndex={-1}
+              data-state="open"
+              className={cx("ml-popover", className)}
+              onBlur={(event) => {
+                const next = event.relatedTarget as Node | null;
+                if (next && !layer.current?.contains(next) && !anchor.current?.contains(next)) close(false);
+              }}
+            >
+              {children}
+            </div>,
+            portal,
+          )
+        : null}
+    </>
+  );
+}

package/snapshot/source/packages/components/priority-icon/labels.ts

@@ -0,0 +1,13 @@
+/** Work priorities and their names, kept apart from the icon so plain logic can use them. */
+export type WorkPriority = "none" | "urgent" | "high" | "medium" | "low";
+
+/** Every priority, most pressing first, for menus and sorting. */
+export const WORK_PRIORITIES: WorkPriority[] = ["urgent", "high", "medium", "low", "none"];
+
+export const PRIORITY_LABELS: Record<WorkPriority, string> = {
+  none: "No priority",
+  urgent: "Urgent",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+};

package/snapshot/source/packages/components/priority-icon/priority-icon.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cx } from "../_internal/react";
+import { PRIORITY_LABELS, type WorkPriority } from "./labels";
+
+export type { WorkPriority } from "./labels";
+export { PRIORITY_LABELS, WORK_PRIORITIES } from "./labels";
+
+export interface PriorityIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+  priority: WorkPriority;
+  /** The accessible name; defaults to the priority label. Pass "" when a visible label sits beside it. */
+  label?: string;
+  size?: string;
+}
+
+const LEVEL: Record<WorkPriority, number> = { none: 0, low: 1, medium: 2, high: 3, urgent: 4 };
+
+/**
+ * A work item's priority as signal bars: one, two or three filled for low,
+ * medium and high, a filled alert for urgent, and a quiet dash for none.
+ */
+export function PriorityIcon({ priority, label, size = "1em", className, ...props }: PriorityIconProps) {
+  const name = label ?? PRIORITY_LABELS[priority];
+  const level = LEVEL[priority];
+  return (
+    <svg
+      viewBox="0 0 14 14"
+      width={size}
+      height={size}
+      className={cx("ml-priority-icon", className)}
+      data-priority={priority}
+      role={name ? "img" : undefined}
+      aria-label={name || undefined}
+      aria-hidden={name ? undefined : true}
+      {...props}
+    >
+      {priority === "urgent" ? (
+        <>
+          <rect x="1" y="1" width="12" height="12" rx="3" fill="currentColor" />
+          <path d="M7 3.8v3.9" stroke="var(--ml-priority-mark)" strokeWidth="1.6" strokeLinecap="round" />
+          <circle cx="7" cy="10" r="0.95" fill="var(--ml-priority-mark)" />
+        </>
+      ) : priority === "none" ? (
+        <path d="M2.5 7h1.6M6.2 7h1.6M9.9 7h1.6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      ) : (
+        [0, 1, 2].map((bar) => (
+          <rect
+            key={bar}
+            x={1.5 + bar * 4}
+            y={9 - bar * 3.2}
+            width="3"
+            height={3.5 + bar * 3.2}
+            rx="1"
+            fill="currentColor"
+            opacity={bar < level ? 1 : 0.28}
+          />
+        ))
+      )}
+    </svg>
+  );
+}