@inshorts/glint-ui 0.5.4 → 0.6.0

package/src/dialogLayer.ts

@@ -1,142 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-/**
- * The keyboard and focus behaviour every dialog needs, in one place.
- *
- * `Modal` and `SideDrawer` each had a copy of the scroll lock and an Escape
- * handler, and neither did anything about focus: opening a dialog left focus
- * on the button behind it, Tab walked the page underneath — through the
- * full-screen backdrop button, among other things — and closing left focus
- * wherever it had wandered. That is the whole keyboard story for thirty
- * dialogs, so it is fixed once here rather than thirty times.
- */
-
-/**
- * Open dialogs, innermost last.
- *
- * Nesting is real here — "Create audience group" opens on top of "Send
- * notification" — and without an ordering both would answer the same Escape
- * and fight over the same Tab. Only the top layer acts.
- */
-const layers: symbol[] = [];
-
-const FOCUSABLE = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[tabindex]:not([tabindex="-1"])',
-].join(",");
-
-/**
- * Deliberately not `offsetParent` or `getClientRects`: the first is null for
- * anything `position: fixed`, which a dialog panel usually is, and the second
- * is empty for *everything* under a test renderer that does no layout — which
- * would collapse the trap to "no focusable elements" in every test.
- */
-function isVisible(element: HTMLElement): boolean {
-  if (element.closest("[hidden]")) return false;
-  if (element.getAttribute("aria-hidden") === "true") return false;
-  return typeof element.checkVisibility === "function"
-    ? element.checkVisibility()
-    : true;
-}
-
-function focusableWithin(container: HTMLElement): HTMLElement[] {
-  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
-    isVisible,
-  );
-}
-
-export function useDialogLayer({
-  active,
-  containerRef,
-  onEscape,
-}: {
-  active: boolean;
-  /** The panel. Focus is moved into it and kept inside it. */
-  containerRef: React.RefObject<HTMLElement | null>;
-  /** Called on Escape, only while this is the top layer. Omit to ignore it. */
-  onEscape?: () => void;
-}): void {
-  // Read through a ref so a caller passing a fresh closure every render does
-  // not tear the listener down and rebuild it on every keystroke.
-  const escapeRef = React.useRef(onEscape);
-  React.useEffect(() => {
-    escapeRef.current = onEscape;
-  });
-
-  React.useEffect(() => {
-    if (!active) return;
-
-    const layer = Symbol("dialog-layer");
-    layers.push(layer);
-    const isTopLayer = () => layers[layers.length - 1] === layer;
-
-    const previouslyFocused =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-
-    const container = containerRef.current;
-    // Something inside may have claimed focus already — an `autoFocus` input —
-    // and that choice is better than any this could make.
-    if (container && !container.contains(document.activeElement)) {
-      const [first] = focusableWithin(container);
-      // The panel itself, not its first control: the first control is a Delete
-      // button often enough that focusing it would put a destructive action
-      // one Enter away from an accidental keypress.
-      (container.hasAttribute("tabindex") ? container : first)?.focus();
-    }
-
-    function handleKeyDown(event: KeyboardEvent) {
-      if (!isTopLayer()) return;
-
-      if (event.key === "Escape") {
-        escapeRef.current?.();
-        return;
-      }
-
-      if (event.key !== "Tab") return;
-      const panel = containerRef.current;
-      if (!panel) return;
-
-      const items = focusableWithin(panel);
-      if (items.length === 0) {
-        event.preventDefault();
-        panel.focus();
-        return;
-      }
-
-      const first = items[0]!;
-      const last = items[items.length - 1]!;
-      const active = document.activeElement;
-      const outside = !panel.contains(active);
-
-      if (event.shiftKey && (active === first || outside)) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && (active === last || outside)) {
-        event.preventDefault();
-        first.focus();
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyDown);
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = previousOverflow;
-      const index = layers.indexOf(layer);
-      if (index !== -1) layers.splice(index, 1);
-      // Back where it came from, so closing a dialog opened by keyboard does
-      // not drop the caret at the top of the document.
-      if (previouslyFocused?.isConnected) previouslyFocused.focus();
-    };
-  }, [active, containerRef]);
-}

package/src/feature-access-gate.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-import { Alert } from "./alert";
-import { StatePanel } from "./state-panel";
-
-type FeatureAccessGateProps = {
-  isLoading?: boolean;
-  allowed: boolean;
-  deniedMessage: React.ReactNode;
-  children: React.ReactNode;
-};
-
-/**
- * Shared loading / denied shell for feature Managers (showcase, headers, …).
- */
-export function FeatureAccessGate({
-  isLoading,
-  allowed,
-  deniedMessage,
-  children,
-}: FeatureAccessGateProps) {
-  if (isLoading) {
-    return (
-      <StatePanel loading className="p-6">
-        Checking permissions…
-      </StatePanel>
-    );
-  }
-
-  if (!allowed) {
-    // `Alert`, not a hand-rolled banner: this is the denial surface for
-    // seventeen panels, and it was the one copy the Alert migration missed —
-    // so being refused a panel announced nothing to a screen reader.
-    return <Alert>{deniedMessage}</Alert>;
-  }
-
-  return <>{children}</>;
-}

package/src/field.tsx

@@ -1,56 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-interface FieldProps {
-  label: React.ReactNode;
-  required?: boolean;
-  /**
-   * Associates the label with a control via `htmlFor` / `id`. Prefer this for
-   * native inputs rendered as siblings (not wrapped). For composite controls
-   * (Autocomplete), omit and use `as="label"` wrapping or an `aria-label`.
-   */
-  htmlFor?: string;
-  /**
-   * Render as a `<label>` (wraps a native control so clicking the text focuses
-   * it) or a `<div>` (for composite controls like Autocomplete that manage
-   * their own focus / render in a portal). Defaults to `div`.
-   */
-  as?: "label" | "div";
-  className?: string;
-  children: React.ReactNode;
-}
-
-export function Field({
-  label,
-  required,
-  htmlFor,
-  as = "div",
-  className,
-  children,
-}: FieldProps) {
-  const Wrapper = as;
-  const labelNode = (
-    <>
-      {label}
-      {required ? (
-        <span className="text-destructive ml-0.5" aria-hidden="true">
-          *
-        </span>
-      ) : null}
-    </>
-  );
-
-  return (
-    <Wrapper className={cn("space-y-1 text-sm", className)}>
-      {htmlFor && as === "div" ? (
-        <label htmlFor={htmlFor} className="text-muted-foreground">
-          {labelNode}
-        </label>
-      ) : (
-        <span className="text-muted-foreground">{labelNode}</span>
-      )}
-      {children}
-    </Wrapper>
-  );
-}

package/src/image-uploader.tsx

@@ -1,181 +0,0 @@
-"use client";
-
-import { ImagePlus, Loader2, X } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "./button";
-import { Input } from "./input";
-import { cn } from "./utils";
-
-export type ImageUploaderProps = {
-  value?: string;
-  onChange: (url: string) => void;
-  disabled?: boolean;
-  label?: string;
-  className?: string;
-  /** Allow pasting a remote URL in addition to file upload. Default true. */
-  allowUrlPaste?: boolean;
-  accept?: string;
-  /**
-   * Upload a picked file and return its hosted URL.
-   * Injected by the panel — Upload stays enabled either way; without a
-   * handler, picking a file surfaces a configuration error.
-   */
-  uploadFile?: (file: File) => Promise<string>;
-  /**
-   * Optional transform for pasted values (e.g. host a relative path).
-   * When omitted, any pasted non-empty string is applied as-is. Absolute
-   * `http(s)` URLs never call this.
-   */
-  uploadFromUrl?: (imageUrl: string) => Promise<string>;
-};
-
-/**
- * Reusable image uploader.
- *
- * Upload and URL paste are both enabled by default. Hosting is injected:
- * each panel passes `uploadFile` / `uploadFromUrl` so the kit stays free of
- * panel-specific API routes.
- */
-export function ImageUploader({
-  value = "",
-  onChange,
-  disabled,
-  label,
-  className,
-  allowUrlPaste = true,
-  accept = "image/*,.gif",
-  uploadFile,
-  uploadFromUrl,
-}: ImageUploaderProps) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const [uploading, setUploading] = React.useState(false);
-  const [error, setError] = React.useState<string | null>(null);
-  const busy = Boolean(disabled || uploading);
-
-  const handleFile = async (file: File) => {
-    if (!uploadFile) {
-      setError("File upload is not configured for this panel.");
-      return;
-    }
-    setUploading(true);
-    setError(null);
-    try {
-      onChange(await uploadFile(file));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Upload failed");
-    } finally {
-      setUploading(false);
-      if (inputRef.current) inputRef.current.value = "";
-    }
-  };
-
-  const handleUrl = async (imageUrl: string) => {
-    const trimmed = imageUrl.trim();
-    if (!trimmed) {
-      onChange("");
-      return;
-    }
-    if (trimmed === value) return;
-
-    // Absolute URLs — and any paste when no transform is configured — apply
-    // as-is. Paste is never gated behind a disabled input.
-    if (!uploadFromUrl || /^https?:\/\//i.test(trimmed)) {
-      setError(null);
-      onChange(trimmed);
-      return;
-    }
-
-    setUploading(true);
-    setError(null);
-    try {
-      onChange(await uploadFromUrl(trimmed));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Upload failed");
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  return (
-    <div className={cn("space-y-2", className)}>
-      {label ? (
-        <div className="text-muted-foreground text-xs font-medium">{label}</div>
-      ) : null}
-
-      <div className="flex flex-wrap items-center gap-2">
-        <input
-          ref={inputRef}
-          type="file"
-          accept={accept}
-          className="hidden"
-          disabled={busy}
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) void handleFile(file);
-          }}
-        />
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          disabled={busy}
-          onClick={() => inputRef.current?.click()}
-        >
-          {uploading ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <ImagePlus className="h-4 w-4" />
-          )}
-          {uploading ? "Uploading…" : "Upload"}
-        </Button>
-        {value ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            disabled={busy}
-            onClick={() => onChange("")}
-            aria-label="Clear image"
-          >
-            <X className="h-4 w-4" />
-            Clear
-          </Button>
-        ) : null}
-      </div>
-
-      {allowUrlPaste ? (
-        <Input
-          key={value || "empty"}
-          defaultValue={value}
-          disabled={busy}
-          placeholder="Or paste image URL…"
-          onBlur={(e) => {
-            void handleUrl(e.target.value);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              void handleUrl((e.target as HTMLInputElement).value);
-            }
-          }}
-        />
-      ) : null}
-
-      {value ? (
-        // eslint-disable-next-line @next/next/no-img-element -- CDN URLs vary
-        <img
-          src={value}
-          alt=""
-          className="border-border max-h-24 rounded border bg-white object-contain p-1"
-        />
-      ) : null}
-
-      {error ? (
-        <p className="text-destructive text-xs" role="alert">
-          {error}
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/src/index.ts

@@ -1,37 +0,0 @@
-export * from "./alert";
-export * from "./autocomplete";
-export * from "./badge";
-export * from "./breadcrumb";
-export * from "./button";
-export * from "./card";
-export * from "./checkbox";
-export * from "./clipboard";
-export * from "./collapsible";
-export * from "./confirm-dialog";
-export * from "./copy-button";
-export * from "./data-table";
-export * from "./date-range-picker";
-export * from "./date-range-picker/dateRange";
-export * from "./dialogLayer";
-export * from "./feature-access-gate";
-export * from "./field";
-export * from "./image-uploader";
-export * from "./input";
-export * from "./label";
-export * from "./modal";
-export * from "./page-header";
-export * from "./panel-brand-mark";
-export * from "./panel-sign-in";
-export * from "./pagination";
-export * from "./segmented-control";
-export * from "./select";
-export * from "./separator";
-export * from "./side-drawer";
-export * from "./spinner";
-export * from "./spreadsheet-grid";
-export * from "./state-panel";
-export * from "./switch";
-export * from "./table";
-export * from "./tabs";
-export * from "./textarea";
-export * from "./utils";

package/src/input.tsx

@@ -1,16 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-export const inputClass =
-  "h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => (
-    <input ref={ref} className={cn(inputClass, className)} {...props} />
-  ),
-);
-
-Input.displayName = "Input";

package/src/label.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "./utils";
-
-export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
-
-/** Form label — pair with a native control via `htmlFor`. */
-export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, ...props }, ref) => (
-    <label
-      ref={ref}
-      className={cn(
-        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-
-Label.displayName = "Label";

package/src/modal.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { createPortal } from "react-dom";
-
-import { useDialogLayer } from "./dialogLayer";
-import { cn } from "./utils";
-
-const emptySubscribe = () => () => {};
-
-/**
- * Returns false during SSR and the first client render, then true once mounted.
- * `useSyncExternalStore` is the React-recommended way to read client-only state
- * without a setState-in-effect (which triggers cascading renders).
- */
-export function useHasMounted(): boolean {
-  return React.useSyncExternalStore(
-    emptySubscribe,
-    () => true,
-    () => false,
-  );
-}
-
-interface ModalProps {
-  isOpen: boolean;
-  /** id of the element labelling the dialog; wired to aria-labelledby. */
-  labelledBy: string;
-  /**
-   * Optional id(s) of elements describing the dialog (APG alertdialog body).
-   * Space-separated when multiple.
-   */
-  describedBy?: string;
-  /** Accessible label for the backdrop dismiss button. */
-  closeLabel: string;
-  onClose: () => void;
-  children: React.ReactNode;
-  /**
-   * When false, Escape and backdrop clicks do not close the modal (e.g. while a
-   * save is in flight). Defaults to true.
-   */
-  dismissible?: boolean;
-  /** Use "alertdialog" for destructive confirmations. Defaults to "dialog". */
-  role?: "dialog" | "alertdialog";
-  /** Tailwind max-width class for the panel. Defaults to "max-w-md". */
-  panelClassName?: string;
-}
-
-/**
- * Shared modal shell: renders a portal-backed, scroll-locked, Escape-dismissible
- * overlay with a centered panel. Callers provide the panel body (heading, form,
- * footer). Consolidates the boilerplate previously copied across every dialog.
- */
-export function Modal({
-  isOpen,
-  labelledBy,
-  describedBy,
-  closeLabel,
-  onClose,
-  children,
-  dismissible = true,
-  role = "dialog",
-  panelClassName,
-}: ModalProps) {
-  const mounted = useHasMounted();
-  const panelRef = React.useRef<HTMLDivElement>(null);
-
-  useDialogLayer({
-    // Gated on `mounted` too: before that the panel is not rendered, so there
-    // would be nothing to move focus into.
-    active: isOpen && mounted,
-    containerRef: panelRef,
-    onEscape: dismissible ? onClose : undefined,
-  });
-
-  if (!mounted || !isOpen) return null;
-
-  return createPortal(
-    /*
-      `overflow-y-auto` on the overlay, `my-auto` on the panel — not
-      `items-center`. A flex item centred with `align-items` overflows equally
-      in both directions once it is taller than its container, and the half
-      above the top edge cannot be scrolled to: with the page behind it locked,
-      an over-tall dialog was simply unreachable at both ends. Auto margins
-      centre a short panel the same way and collapse to zero on a tall one,
-      which scrolls.
-    */
-    <div className="fixed inset-0 z-[100] flex justify-center overflow-y-auto p-4">
-      {/* `fixed`, not `absolute`: inside a scrolling overlay an absolute
-          backdrop scrolls away with the content and leaves the rest of a tall
-          dialog sitting on an undimmed page. */}
-      <button
-        type="button"
-        aria-label={closeLabel}
-        tabIndex={-1}
-        className="fixed inset-0 bg-slate-950/50"
-        onClick={() => {
-          if (dismissible) onClose();
-        }}
-      />
-      <div
-        ref={panelRef}
-        role={role}
-        aria-modal="true"
-        aria-labelledby={labelledBy}
-        aria-describedby={describedBy}
-        tabIndex={-1}
-        className={cn(
-          "border-border bg-background relative z-10 my-auto w-full rounded-lg border shadow-2xl outline-none",
-          panelClassName ?? "max-w-md p-6",
-        )}
-      >
-        {children}
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/page-header.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-/**
- * The title block every panel opens with.
- *
- * Twenty Managers wrote the same `<h1>` and subtitle by hand, differing only in
- * whether the row said `gap-3` or `gap-x-4 gap-y-2` and whether the inner block
- * carried `min-w-0` — differences nobody chose, which is what made them worth
- * removing.
- *
- * `description` takes a node rather than a string because several panels put a
- * `<code>` in theirs, naming the Firebase field they write. That is the useful
- * kind of subtitle and it should not have to opt out of the shared component to
- * stay.
- *
- * `min-w-0` is not optional here. Without it a long title refuses to shrink and
- * pushes the actions off the row instead of wrapping — which is the bug the
- * three panels that set it had already hit, and the seven that did not had not
- * yet.
- */
-export interface PageHeaderProps {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  /**
-   * Sits above the title: a breadcrumb, or the back link the filter editors
-   * use. Four panels had one, each spacing it by hand.
-   */
-  eyebrow?: React.ReactNode;
-  /** Buttons belonging to the page, laid out at the end of the title row. */
-  actions?: React.ReactNode;
-  className?: string;
-}
-
-export function PageHeader({
-  title,
-  description,
-  eyebrow,
-  actions,
-  className,
-}: PageHeaderProps) {
-  const heading = (
-    <div className="min-w-0">
-      {eyebrow}
-      <h1
-        className={cn(
-          "text-2xl font-semibold tracking-tight",
-          eyebrow != null && "mt-1",
-        )}
-      >
-        {title}
-      </h1>
-      {description != null ? (
-        <p className="text-muted-foreground mt-1 text-sm">{description}</p>
-      ) : null}
-    </div>
-  );
-
-  if (!actions) {
-    return <div className={className}>{heading}</div>;
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex flex-wrap items-center justify-between gap-3",
-        className,
-      )}
-    >
-      {heading}
-      {actions}
-    </div>
-  );
-}