@mlola-ui/registry 1.0.0

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

@@ -0,0 +1,185 @@
+"use client";
+
+import * as React from "react";
+import { IconUpload, IconX } from "@mlola-ui/icons";
+import { Field } from "../input/input";
+
+export interface DropzoneFile {
+  id: string;
+  name: string;
+  size: number;
+  /** 0..100 while uploading. */
+  progress?: number;
+  status?: "uploading" | "done" | "error";
+  error?: string;
+}
+
+export interface DropzoneProps {
+  /** Called with the files that passed validation. */
+  onFiles: (files: File[]) => void;
+  /** Files to list under the zone, e.g. uploads in progress. */
+  files?: DropzoneFile[];
+  onRemove?: (file: DropzoneFile) => void;
+  /** As the input's accept attribute: "image/*,.pdf". */
+  accept?: string;
+  /** Largest file in bytes. */
+  maxSize?: number;
+  maxFiles?: number;
+  multiple?: boolean;
+  label?: string;
+  hint?: string;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+}
+
+/** "image/*,.pdf" → "Images, PDF": what a person would call the types. */
+function describeAccept(accept: string) {
+  const words: Record<string, string> = { "image/*": "Images", "video/*": "Videos", "audio/*": "Audio", "text/*": "Text files" };
+  return accept
+    .split(",")
+    .map((rule) => rule.trim().toLowerCase())
+    .map((rule) => words[rule] ?? (rule.startsWith(".") ? rule.slice(1).toUpperCase() : rule.split("/").pop()?.toUpperCase() ?? rule))
+    .join(", ");
+}
+
+function accepts(file: File, accept: string | undefined) {
+  if (!accept) return true;
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).some((rule) => {
+    if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule);
+    if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1));
+    return file.type === rule;
+  });
+}
+
+/**
+ * Drop files, choose them, or paste them. Files are checked for type, size
+ * and count before they are handed over, and every rejection is explained.
+ */
+export function Dropzone({ onFiles, files = [], onRemove, accept, maxSize, maxFiles, multiple = true, label, hint, disabled, id, className }: DropzoneProps) {
+  const input = React.useRef<HTMLInputElement>(null);
+  const generated = React.useId();
+  const fieldId = id ?? `dropzone-${generated}`;
+  const [dragging, setDragging] = React.useState(false);
+  const [rejected, setRejected] = React.useState<string[]>([]);
+  const depth = React.useRef(0);
+
+  const take = (list: FileList | File[] | null) => {
+    if (!list || disabled) return;
+    const incoming = Array.from(list);
+    const problems: string[] = [];
+    const room = maxFiles !== undefined ? Math.max(0, maxFiles - files.length) : Infinity;
+    const kept = incoming.filter((file) => {
+      if (!accepts(file, accept)) problems.push(`${file.name} is not an accepted file type.`);
+      else if (maxSize !== undefined && file.size > maxSize) problems.push(`${file.name} is larger than ${formatBytes(maxSize)}.`);
+      else return true;
+      return false;
+    });
+    if (kept.length > room) problems.push(`Only ${maxFiles} ${maxFiles === 1 ? "file" : "files"} can be added.`);
+    setRejected(problems);
+    const accepted = kept.slice(0, room === Infinity ? undefined : room);
+    if (accepted.length) onFiles(multiple ? accepted : accepted.slice(0, 1));
+  };
+
+  const rules = [accept && describeAccept(accept), maxSize && `up to ${formatBytes(maxSize)}`].filter(Boolean).join(" · ");
+
+  return (
+    <div className={["ml-dropzone-root", className].filter(Boolean).join(" ")}>
+      <Field id={fieldId} label={label} hint={hint} disabled={disabled}>
+        <div
+          id={fieldId}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-disabled={disabled || undefined}
+          aria-label={`${label ? `${label}: ` : ""}drop files here, or press Enter to choose`}
+          aria-describedby={hint ? `${fieldId}-hint` : undefined}
+          className="ml-dropzone"
+          data-dragging={dragging || undefined}
+          onClick={() => input.current?.click()}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              input.current?.click();
+            }
+          }}
+          onPaste={(event) => take(event.clipboardData.files)}
+          onDragEnter={(event) => {
+            event.preventDefault();
+            depth.current += 1;
+            setDragging(true);
+          }}
+          onDragOver={(event) => event.preventDefault()}
+          onDragLeave={() => {
+            depth.current = Math.max(0, depth.current - 1);
+            if (depth.current === 0) setDragging(false);
+          }}
+          onDrop={(event) => {
+            event.preventDefault();
+            depth.current = 0;
+            setDragging(false);
+            take(event.dataTransfer.files);
+          }}
+        >
+          <span className="ml-dropzone-icon" aria-hidden="true">
+            <IconUpload size="1em" />
+          </span>
+          <span className="ml-dropzone-title">{dragging ? "Drop to upload" : "Drop files here, or choose"}</span>
+          {rules ? <span className="ml-dropzone-rules">{rules}</span> : null}
+          <input
+            ref={input}
+            type="file"
+            hidden
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={(event) => {
+              take(event.target.files);
+              event.target.value = "";
+            }}
+          />
+        </div>
+        {rejected.length ? (
+          <ul className="ml-dropzone-rejected" role="alert">
+            {rejected.map((problem) => (
+              <li key={problem}>{problem}</li>
+            ))}
+          </ul>
+        ) : null}
+      </Field>
+      {files.length ? (
+        <ul className="ml-dropzone-files" aria-label="Files">
+          {files.map((file) => (
+            <li key={file.id} className="ml-dropzone-file" data-status={file.status ?? "done"}>
+              <span className="ml-dropzone-file-name">{file.name}</span>
+              <span className="ml-dropzone-file-meta">
+                {file.status === "error" ? file.error ?? "Upload failed" : file.status === "uploading" ? `${Math.round(file.progress ?? 0)}%` : formatBytes(file.size)}
+              </span>
+              {onRemove ? (
+                <button type="button" className="ml-dropzone-remove" aria-label={`Remove ${file.name}`} onClick={() => onRemove(file)}>
+                  <IconX aria-hidden="true" size="0.875em" />
+                </button>
+              ) : null}
+              {file.status === "uploading" ? (
+                <span
+                  className="ml-dropzone-progress"
+                  role="progressbar"
+                  aria-label={`Uploading ${file.name}`}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={Math.round(file.progress ?? 0)}
+                  style={{ ["--ml-dropzone-progress" as string]: `${file.progress ?? 0}%` }}
+                />
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/snapshot/source/packages/components/empty-state/empty-state.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** An icon or small illustration. */
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** The way forward: usually one primary action and one secondary. */
+  actions?: React.ReactNode;
+  /** "page" centres in a large area; "inline" sits inside a card or table. */
+  size?: "inline" | "page";
+}
+
+/**
+ * What a screen says when there is nothing to show yet: why, and what to do
+ * next. Never a blank area and never an apology without a way forward.
+ */
+export function EmptyState({ icon, title, description, actions, size = "inline", className, ...props }: EmptyStateProps) {
+  return (
+    <section className={cx("ml-empty", className)} data-size={size} {...props}>
+      {icon ? (
+        <span className="ml-empty-icon" aria-hidden="true">
+          {icon}
+        </span>
+      ) : null}
+      <h3 className="ml-empty-title">{title}</h3>
+      {description ? <p className="ml-empty-description">{description}</p> : null}
+      {actions ? <div className="ml-empty-actions">{actions}</div> : null}
+    </section>
+  );
+}

package/snapshot/source/packages/components/hover-card/hover-card.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cx } from "../_internal/react";
+import { useFloating, usePortalNode, type Align, type Side } from "../_internal/floating";
+
+export interface HoverCardProps {
+  /** The link or name that shows the card; it keeps its own behaviour. */
+  children: React.ReactElement<Record<string, unknown>>;
+  /** The preview: a profile, a page summary, a repository. */
+  content: React.ReactNode;
+  side?: Side;
+  align?: Align;
+  /** Milliseconds the pointer must rest before the card opens. */
+  openDelay?: number;
+  /** Milliseconds of grace after the pointer leaves, so it can reach the card. */
+  closeDelay?: number;
+  className?: string;
+}
+
+/**
+ * A preview that appears when the pointer rests on a link or a name, or when
+ * it takes keyboard focus: who someone is, what a page holds. The pointer can
+ * move into the card and use what is inside; Escape closes it. It adds to the
+ * trigger and never replaces what the trigger does.
+ */
+export function HoverCard({ children, content, side = "bottom", align = "start", openDelay = 450, closeDelay = 180, className }: HoverCardProps) {
+  const [open, setOpen] = React.useState(false);
+  const anchor = React.useRef<HTMLElement>(null);
+  const layer = React.useRef<HTMLDivElement>(null);
+  const timer = React.useRef<number | undefined>(undefined);
+  const portal = usePortalNode();
+  const id = React.useId();
+  useFloating(anchor, layer, open && Boolean(portal), { side, align, offset: 8 });
+
+  const schedule = (next: boolean) => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setOpen(next), next ? openDelay : closeDelay);
+  };
+  React.useEffect(() => () => window.clearTimeout(timer.current), []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  const child = children.props as Record<string, unknown> & { ref?: React.Ref<HTMLElement> };
+  const call = (name: string, event: unknown) => (child[name] as ((value: unknown) => void) | undefined)?.(event);
+  const trigger = React.cloneElement(children, {
+    ref: (node: HTMLElement | null) => {
+      anchor.current = node;
+      const own = child.ref;
+      if (typeof own === "function") own(node);
+      else if (own && typeof own === "object") (own as React.MutableRefObject<HTMLElement | null>).current = node;
+    },
+    "aria-describedby": open ? id : child["aria-describedby"],
+    onPointerEnter: (event: React.PointerEvent) => {
+      call("onPointerEnter", event);
+      if (event.pointerType === "mouse") schedule(true);
+    },
+    onPointerLeave: (event: React.PointerEvent) => {
+      call("onPointerLeave", event);
+      schedule(false);
+    },
+    onFocus: (event: React.FocusEvent) => {
+      call("onFocus", event);
+      schedule(true);
+    },
+    onBlur: (event: React.FocusEvent) => {
+      call("onBlur", event);
+      if (!layer.current?.contains(event.relatedTarget as Node)) schedule(false);
+    },
+  });
+
+  return (
+    <>
+      {trigger}
+      {open && portal
+        ? createPortal(
+            <div
+              ref={layer}
+              id={id}
+              role="tooltip"
+              className={cx("ml-hover-card", className)}
+              onPointerEnter={() => window.clearTimeout(timer.current)}
+              onPointerLeave={() => schedule(false)}
+              onBlur={(event) => {
+                if (!layer.current?.contains(event.relatedTarget as Node) && event.relatedTarget !== anchor.current) schedule(false);
+              }}
+            >
+              {content}
+            </div>,
+            portal,
+          )
+        : null}
+    </>
+  );
+}

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

@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+export type InputVariant = "default" | "filled" | "subtle";
+type InputSize = "sm" | "md" | "lg";
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  label?: string;
+  hint?: string;
+  error?: string;
+  variant?: InputVariant;
+  size?: InputSize;
+  containerClassName?: string;
+  /** Decoration inside the field, before the text, such as a search glyph. */
+  leading?: React.ReactNode;
+  /** A control rendered inside the field, at the end of the input. */
+  trailing?: React.ReactNode;
+};
+
+export interface FieldProps {
+  /** The control's id; the label, hint and error are tied to it. */
+  id: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/** Ids for a control's description: merge, never replace, so a caller's own description never hides the error. */
+export function fieldDescription(id: string, { hint, error, describedBy }: { hint?: unknown; error?: unknown; describedBy?: string }) {
+  return [describedBy, hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(" ") || undefined;
+}
+
+/**
+ * The anatomy every form control shares: a label, the control, a hint and an
+ * error announced when it appears. Input, Textarea, OTP Input and Dropzone
+ * all use it, so labels and errors behave identically everywhere.
+ */
+export function Field({ id, label, hint, error, required, disabled, className, children }: FieldProps) {
+  return (
+    <div className={cx("ml-input-field", className)} data-disabled={disabled ? "" : undefined} data-invalid={error ? "" : undefined}>
+      {label ? (
+        <label htmlFor={id} className="ml-input-label">
+          {label}
+          {required ? <span aria-hidden="true" className="ml-required-mark">*</span> : null}
+        </label>
+      ) : null}
+      {children}
+      {hint ? <p id={`${id}-hint`} className="ml-input-hint">{hint}</p> : null}
+      {error ? <p id={`${id}-error`} role="alert" className="ml-input-error">{error}</p> : null}
+    </div>
+  );
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, hint, error, variant = "default", size = "md", containerClassName, leading, trailing, className, id, disabled, required, "aria-describedby": describedBy, ...props }, ref) => {
+    const generated = React.useId();
+    const inputId = id ?? `input-${generated}`;
+    const control = React.useRef<HTMLDivElement>(null);
+    const hasLeading = Boolean(leading);
+    const hasTrailing = Boolean(trailing);
+    // Pad the text past whatever sits beside it: an icon, a prefix like "https://", a badge.
+    React.useLayoutEffect(() => {
+      const element = control.current;
+      if (!element || (!hasLeading && !hasTrailing)) return;
+      const affixes = Array.from(element.querySelectorAll<HTMLElement>(":scope > .ml-input-leading, :scope > .ml-input-trailing"));
+      const measure = () => {
+        for (const affix of affixes) element.style.setProperty(affix.classList.contains("ml-input-leading") ? "--ml-input-leading" : "--ml-input-trailing", `${affix.offsetWidth}px`);
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      affixes.forEach((affix) => observer.observe(affix));
+      return () => observer.disconnect();
+    }, [hasLeading, hasTrailing]);
+    return (
+      <Field id={inputId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={containerClassName}>
+        <div ref={control} className="ml-input-control" data-leading={leading ? "" : undefined} data-trailing={trailing ? "" : undefined}>
+          {leading ? <span aria-hidden="true" className="ml-input-leading">{leading}</span> : null}
+          <input
+            ref={ref}
+            id={inputId}
+            disabled={disabled}
+            required={required}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={fieldDescription(inputId, { hint, error, describedBy })}
+            data-variant={variant}
+            data-size={size}
+            className={cx("ml-input", className)}
+            {...props}
+          />
+          {trailing ? <span className="ml-input-trailing">{trailing}</span> : null}
+        </div>
+      </Field>
+    );
+  }
+);
+Input.displayName = "Input";

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

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+/** A single key, as printed on a keyboard. */
+export function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <kbd className={cx("ml-kbd", className)} {...props} />;
+}
+
+function useIsApple() {
+  return React.useSyncExternalStore(
+    () => () => undefined,
+    () => /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent),
+    () => true,
+  );
+}
+
+const SYMBOLS: Record<string, { apple: string; other: string; spoken: string; spokenOther?: string }> = {
+  mod: { apple: "⌘", other: "Ctrl", spoken: "Command", spokenOther: "Control" },
+  ctrl: { apple: "⌃", other: "Ctrl", spoken: "Control" },
+  alt: { apple: "⌥", other: "Alt", spoken: "Option", spokenOther: "Alt" },
+  shift: { apple: "⇧", other: "Shift", spoken: "Shift" },
+  enter: { apple: "↵", other: "Enter", spoken: "Enter" },
+  esc: { apple: "Esc", other: "Esc", spoken: "Escape" },
+  up: { apple: "↑", other: "↑", spoken: "Up arrow" },
+  down: { apple: "↓", other: "↓", spoken: "Down arrow" },
+  backspace: { apple: "⌫", other: "Backspace", spoken: "Backspace" },
+};
+
+export interface ShortcutProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+  /** Keys joined with "+", e.g. "mod+k" or "shift+enter". "mod" is ⌘ on Apple devices and Ctrl elsewhere. */
+  keys: string;
+}
+
+/**
+ * A keyboard shortcut for the visitor's platform: "mod+k" reads ⌘K on a Mac
+ * and Ctrl K elsewhere, and is spoken as words, not symbols.
+ */
+export function Shortcut({ keys, className, ...props }: ShortcutProps) {
+  const apple = useIsApple();
+  const parts = keys.toLowerCase().split("+").map((key) => key.trim()).filter(Boolean);
+  const shown = parts.map((key) => SYMBOLS[key]?.[apple ? "apple" : "other"] ?? key.toUpperCase());
+  const spoken = parts.map((key) => (apple ? SYMBOLS[key]?.spoken : SYMBOLS[key]?.spokenOther ?? SYMBOLS[key]?.spoken) ?? key.toUpperCase()).join(" ");
+  return (
+    <kbd className={cx("ml-shortcut", className)} aria-label={spoken} {...props}>
+      {shown.map((key, index) => (
+        <kbd key={index} className="ml-kbd" aria-hidden="true">
+          {key}
+        </kbd>
+      ))}
+    </kbd>
+  );
+}

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

@@ -0,0 +1,100 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useDialogLayer } from "../_internal/dialog";
+import { cx } from "../_internal/react";
+import { IconX } from "@mlola-ui/icons";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  size?: ModalSize;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  label?: string;
+  description?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Modal({
+  open,
+  onClose,
+  size = "md",
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  label = "Dialog",
+  description,
+  className,
+  children,
+}: ModalProps) {
+  const panelRef = React.useRef<HTMLDivElement>(null);
+  const portal = useDialogLayer({ open, onClose, closeOnEscape, panelRef });
+  const descriptionId = React.useId();
+  if (!portal || !open) return null;
+  return createPortal(
+    <div
+      className="ml-modal-overlay"
+      data-state="open"
+      onMouseDown={(event) => {
+        if (closeOnBackdrop && event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+        aria-describedby={description ? descriptionId : undefined}
+        tabIndex={-1}
+        data-size={size}
+        data-state="open"
+        className={cx("ml-modal", className)}
+      >
+        {description ? <p id={descriptionId} className="ml-visually-hidden">{description}</p> : null}
+        {children}
+      </div>
+    </div>,
+    portal
+  );
+}
+
+export interface ModalHeaderProps {
+  title: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+export function ModalHeader({ title, onClose, className }: ModalHeaderProps) {
+  return (
+    <div className={cx("ml-modal-header", className)}>
+      <h2 className="ml-modal-title">{title}</h2>
+      {onClose ? (
+        <button type="button" onClick={onClose} aria-label="Close dialog" className="ml-modal-close">
+          <IconX aria-hidden="true" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export interface ModalBodyProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function ModalBody({ className, children }: ModalBodyProps) {
+  return <div className={cx("ml-modal-body", className)}>{children}</div>;
+}
+
+export interface ModalFooterProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function ModalFooter({ className, children }: ModalFooterProps) {
+  return <div className={cx("ml-modal-footer", className)}>{children}</div>;
+}