@inshorts/glint-ui 0.3.0

package/src/pagination.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "./button";
+
+export type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  loading?: boolean;
+  showPageInfo?: boolean;
+};
+
+/**
+ * Numbered pager for list panels. Hides itself when there is only one page.
+ */
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  loading = false,
+  showPageInfo = true,
+}: PaginationProps) {
+  const visiblePages = React.useMemo(() => {
+    const delta = 2;
+    const range: number[] = [];
+    const rangeWithDots: Array<number | "..."> = [];
+
+    for (
+      let i = Math.max(2, currentPage - delta);
+      i <= Math.min(totalPages - 1, currentPage + delta);
+      i++
+    ) {
+      range.push(i);
+    }
+
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, "...");
+    } else {
+      rangeWithDots.push(1);
+    }
+
+    rangeWithDots.push(...range);
+
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push("...", totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+
+    return rangeWithDots;
+  }, [currentPage, totalPages]);
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+      {showPageInfo ? (
+        <div className="text-muted-foreground order-2 text-sm sm:order-1">
+          Page {currentPage} of {totalPages}
+        </div>
+      ) : null}
+
+      <div className="order-1 flex items-center space-x-1 sm:order-2 sm:space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage <= 1 || loading}
+          className="h-8 min-w-8 px-2"
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+
+        <div className="flex max-w-[200px] items-center space-x-1 overflow-x-auto sm:max-w-none">
+          {visiblePages.map((page, index) =>
+            page === "..." ? (
+              <div
+                key={`dots-${index}`}
+                className="flex h-8 w-8 shrink-0 items-center justify-center"
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </div>
+            ) : (
+              <Button
+                key={page}
+                variant={page === currentPage ? "default" : "outline"}
+                size="sm"
+                onClick={() => onPageChange(page)}
+                disabled={loading}
+                className="h-8 min-w-8 shrink-0 px-2"
+                aria-current={page === currentPage ? "page" : undefined}
+              >
+                {page}
+              </Button>
+            ),
+          )}
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage >= totalPages || loading}
+          className="h-8 min-w-8 px-2"
+          aria-label="Next page"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/segmented-control.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+/**
+ * The one-of-N picker seven panels were each drawing by hand.
+ *
+ * Not `Tabs`, which is a bottom-bordered strip sitting above the content it
+ * switches. This is the inline version — a bordered track with the selected
+ * option filled in — used for a filter or a setting that sits among other
+ * controls rather than heading a panel.
+ *
+ * **Roles are the reason to use this.** The seven copies had three different
+ * ideas about what they were: one said `tablist`/`tab`, one said
+ * `group`/`aria-pressed`, and the other five said nothing at all — so on five
+ * of seven a screen reader heard a row of unlabelled buttons with no
+ * indication which one was active. None of the three was right. `tablist`
+ * without a `tabpanel` is a promise the markup does not keep, and
+ * `aria-pressed` describes independent toggles, not a choice of one. Picking a
+ * value out of a fixed set is a radio group, so that is what this is, with the
+ * roving tabindex and arrow keys that come with the role.
+ *
+ * `tone` keeps both active colours the panels had drifted into: `emphasis` is
+ * the near-black/near-white fill five of them used, `primary` the violet
+ * accent the other two did. They are genuinely different colours rather than
+ * one spelled two ways, so collapsing them is a visual change to two panels
+ * and belongs in its own reviewable diff — the same call `DataTable` makes
+ * about its two header variants.
+ */
+export interface SegmentedOption<Value extends string> {
+  value: Value;
+  label: React.ReactNode;
+  disabled?: boolean;
+  /**
+   * Hover text. Worth setting on a disabled option — "Everyone" going grey
+   * says nothing about which permission would bring it back.
+   */
+  title?: string;
+}
+
+export interface SegmentedControlProps<Value extends string> {
+  options: ReadonlyArray<SegmentedOption<Value>>;
+  value: Value;
+  onChange: (value: Value) => void;
+  /**
+   * Required: the group never has a visible label — the options name the
+   * choice between them, which tells you nothing about what is being chosen.
+   */
+  ariaLabel: string;
+  /**
+   * `contained` — one bordered track around the options (five panels).
+   * `loose` — free-standing pills with a gap between them (two panels).
+   */
+  variant?: "contained" | "loose";
+  /** See the note above: two real colours, not one spelled twice. */
+  tone?: "emphasis" | "primary";
+  /** Options share the width equally, for a control that fills its column. */
+  fill?: boolean;
+  className?: string;
+}
+
+const TONES = {
+  emphasis: {
+    on: "bg-slate-950 text-white dark:bg-white dark:text-slate-950",
+    off: "text-muted-foreground hover:bg-muted",
+  },
+  primary: {
+    on: "bg-primary text-primary-foreground",
+    off: "text-muted-foreground hover:bg-muted",
+  },
+} as const;
+
+const TRACKS = {
+  contained: "border-border inline-flex rounded-md border p-0.5",
+  loose: "flex flex-wrap gap-2",
+} as const;
+
+export function SegmentedControl<Value extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  variant = "contained",
+  tone = "emphasis",
+  fill = false,
+  className,
+}: SegmentedControlProps<Value>) {
+  const refs = React.useRef(new Map<Value, HTMLButtonElement | null>());
+
+  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    const step =
+      event.key === "ArrowRight" || event.key === "ArrowDown"
+        ? 1
+        : event.key === "ArrowLeft" || event.key === "ArrowUp"
+          ? -1
+          : 0;
+    if (step === 0) return;
+
+    const selectable = options.filter((option) => !option.disabled);
+    if (selectable.length < 2) return;
+
+    const current = selectable.findIndex((option) => option.value === value);
+    // Wraps, which is what a radio group is expected to do.
+    const next =
+      selectable[(current + step + selectable.length) % selectable.length];
+
+    event.preventDefault();
+    onChange(next.value);
+    // The newly checked option has to take focus, or the next arrow press is
+    // still measured from the old one.
+    refs.current.get(next.value)?.focus();
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      onKeyDown={onKeyDown}
+      className={cn(TRACKS[variant], className)}
+    >
+      {options.map((option) => {
+        const checked = option.value === value;
+        return (
+          <button
+            key={option.value}
+            ref={(node) => {
+              refs.current.set(option.value, node);
+            }}
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            disabled={option.disabled}
+            title={option.title}
+            // Only the checked option is reachable by Tab; arrows move within
+            // the group. Without this a keyboard user pages through every
+            // option to get past the control.
+            tabIndex={checked ? 0 : -1}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              "cursor-pointer rounded px-3 py-1 text-sm font-medium transition",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              fill && "flex-1",
+              checked ? TONES[tone].on : TONES[tone].off,
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/select.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+
+import { Autocomplete, type AutocompleteOption } from "./autocomplete";
+
+type SelectChange = {
+  target: { value: string };
+  currentTarget: { value: string };
+};
+
+export type SelectProps = {
+  id?: string;
+  className?: string;
+  disabled?: boolean;
+  /** Accessible name when the control is not wrapped in a label. */
+  "aria-label"?: string;
+  /** `compact` fits a spreadsheet cell. Typing still filters the list. */
+  size?: "default" | "compact";
+  value?: string | number | readonly string[];
+  placeholder?: string;
+  children?: React.ReactNode;
+  onChange?: (event: SelectChange) => void;
+};
+
+function optionText(node: React.ReactNode): string {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(optionText).join("");
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
+    return optionText(node.props.children);
+  }
+  return "";
+}
+
+function optionsFromChildren(children: React.ReactNode): AutocompleteOption[] {
+  const options: AutocompleteOption[] = [];
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === React.Fragment) {
+      options.push(
+        ...optionsFromChildren(
+          (child.props as { children?: React.ReactNode }).children,
+        ),
+      );
+      return;
+    }
+    const props = child.props as {
+      value?: string | number;
+      disabled?: boolean;
+      children?: React.ReactNode;
+    };
+    const value = props.value == null ? "" : String(props.value);
+    options.push({
+      value,
+      label: optionText(props.children).trim() || value,
+      disabled: Boolean(props.disabled),
+    });
+  });
+  return options;
+}
+
+/**
+ * The dropdown. It is the searchable autocomplete, not a native `<select>`,
+ * so a long list can be typed into and an empty list still opens.
+ */
+export function Select({
+  id,
+  className,
+  disabled,
+  value,
+  placeholder,
+  children,
+  onChange,
+  size = "default",
+  "aria-label": ariaLabel,
+}: SelectProps) {
+  const options = optionsFromChildren(children);
+  const current = Array.isArray(value)
+    ? String(value[0] ?? "")
+    : value == null
+      ? ""
+      : String(value);
+  const blank = options.find((option) => option.value === "");
+
+  return (
+    <Autocomplete
+      id={id}
+      className={className}
+      disabled={Boolean(disabled)}
+      ariaLabel={ariaLabel}
+      size={size}
+      options={options}
+      value={current}
+      clearable={false}
+      placeholder={placeholder ?? blank?.label ?? "Search…"}
+      onChange={(next) =>
+        onChange?.({
+          target: { value: next },
+          currentTarget: { value: next },
+        })
+      }
+    />
+  );
+}

package/src/separator.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+};
+
+/** Thin rule between sections. */
+export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={orientation}
+      className={cn(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+Separator.displayName = "Separator";

package/src/side-drawer.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { X } from "lucide-react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import { Button } from "./button";
+import { useDialogLayer } from "./dialogLayer";
+import { useHasMounted } from "./modal";
+import { cn } from "./utils";
+
+interface SideDrawerProps {
+  isOpen: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  /** Tailwind width class for the panel. Defaults to a reading-width column. */
+  panelClassName?: string;
+}
+
+/**
+ * A panel that slides in from the right.
+ *
+ * For content that belongs beside the page rather than on top of it — a queue
+ * you glance at and dismiss, not a decision you have to answer. Unlike
+ * `Modal`, it does not centre or dim the whole page to a stop: the table
+ * underneath stays readable, which is the point of looking at both.
+ */
+export function SideDrawer({
+  isOpen,
+  title,
+  onClose,
+  children,
+  panelClassName,
+}: SideDrawerProps) {
+  const mounted = useHasMounted();
+  const headingId = React.useId();
+  const panelRef = React.useRef<HTMLElement>(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: onClose,
+  });
+
+  if (!mounted || !isOpen) return null;
+
+  return createPortal(
+    <>
+      <div
+        aria-hidden
+        onClick={onClose}
+        className="fixed inset-0 z-[90] bg-slate-950/30"
+      />
+      <aside
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={headingId}
+        tabIndex={-1}
+        className={cn(
+          "border-border bg-background fixed inset-y-0 right-0 z-[95] flex flex-col border-l shadow-2xl outline-none",
+          panelClassName ?? "w-full max-w-md",
+        )}
+      >
+        <div className="border-border flex items-center justify-between gap-3 border-b px-4 py-3">
+          <h2 id={headingId} className="truncate text-base font-semibold">
+            {title}
+          </h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Close panel"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </Button>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">{children}</div>
+      </aside>
+    </>,
+    document.body,
+  );
+}

package/src/spinner.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Loader2 } from "lucide-react";
+
+import { cn } from "./utils";
+
+/**
+ * The one spinner.
+ *
+ * There were five spellings of `animate-spin` across twelve files — `h-4 w-4`,
+ * `h-5 w-5`, `size-4`, bare, and a hand-drawn ring in `ProtectedRoute` — so the
+ * same "working" signal came out a different size depending on which panel you
+ * were on.
+ *
+ * It is `aria-hidden` on purpose. A spinner is decoration; what a screen reader
+ * needs is the surrounding control's `aria-busy` or the panel's status text,
+ * and announcing "loading" twice is worse than once. `Button` and `StatePanel`
+ * both supply that.
+ */
+const SIZES = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5",
+  xl: "size-10 border-2",
+} as const;
+
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+  size?: keyof typeof SIZES;
+}
+
+export function Spinner({ size = "md", className, ...props }: SpinnerProps) {
+  return (
+    <Loader2
+      aria-hidden
+      className={cn("animate-spin", SIZES[size], className)}
+      {...props}
+    />
+  );
+}