@inshorts/glint-ui 0.5.4 → 0.6.1

package/src/pagination.tsx

@@ -1,116 +0,0 @@
-"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/panel-brand-mark.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-export type PanelBrandMarkProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Icon inside the mark (lucide, etc.). */
-  children: React.ReactNode;
-  size?: "sm" | "md";
-};
-
-/**
- * Quiet brand tile for sidebar / sign-in — solid primary, no decorative gradients.
- */
-export function PanelBrandMark({
-  children,
-  size = "md",
-  className,
-  ...props
-}: PanelBrandMarkProps) {
-  return (
-    <div
-      className={cn(
-        "bg-primary text-primary-foreground grid shrink-0 place-items-center rounded-lg",
-        size === "sm" ? "h-9 w-9" : "h-10 w-10",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

package/src/panel-sign-in.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "./button";
-import { PanelBrandMark } from "./panel-brand-mark";
-import { cn } from "./utils";
-
-export type PanelSignInProps = {
-  appName: string;
-  /** Short line under the brand (e.g. "Secure Google sign-in"). */
-  eyebrow?: string;
-  /** One supporting sentence under the headline. */
-  description?: string;
-  /** Optional feature bullets — keep to ≤3; DESIGN.md: one job per surface. */
-  features?: string[];
-  brandIcon?: React.ReactNode;
-  error?: string | null;
-  /** Google signed in but panel access refused. */
-  refused?: boolean;
-  refusedTitle?: string;
-  refusedMessage?: string;
-  isSessionLoading?: boolean;
-  isSigningIn?: boolean;
-  onSignIn: () => void;
-  signInLabel?: string;
-  className?: string;
-};
-
-/**
- * DESIGN.md-compliant panel login: brand-first, ink neutrals, no purple glow.
- */
-export function PanelSignIn({
-  appName,
-  eyebrow = "Secure Google sign-in",
-  description = "Use your work Google account to continue.",
-  features,
-  brandIcon,
-  error,
-  refused = false,
-  refusedTitle = "Access denied",
-  refusedMessage = "This Google account is signed in, but it is not provisioned for this panel.",
-  isSessionLoading = false,
-  isSigningIn = false,
-  onSignIn,
-  signInLabel = "Continue with Google",
-  className,
-}: PanelSignInProps) {
-  const busy = isSessionLoading || isSigningIn;
-
-  return (
-    <main
-      className={cn(
-        "bg-background text-foreground grid min-h-screen place-items-center p-4 sm:p-8",
-        className,
-      )}
-    >
-      <section className="border-border bg-card w-full max-w-md space-y-6 rounded-lg border p-8 shadow-sm">
-        <div className="flex items-center gap-3">
-          <PanelBrandMark>
-            {brandIcon ?? (
-              <span className="text-sm font-semibold" aria-hidden>
-                {appName.slice(0, 1).toUpperCase()}
-              </span>
-            )}
-          </PanelBrandMark>
-          <div className="min-w-0">
-            <p className="text-title truncate font-semibold">{appName}</p>
-            <p className="text-muted-foreground text-meta">{eyebrow}</p>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <h1 className="text-display font-semibold tracking-tight">
-            {refused ? refusedTitle : "Sign in"}
-          </h1>
-          <p className="text-muted-foreground text-body">
-            {refused ? refusedMessage : description}
-          </p>
-        </div>
-
-        {features && features.length > 0 && !refused ? (
-          <ul className="text-muted-foreground text-body space-y-1.5">
-            {features.slice(0, 3).map((feature) => (
-              <li key={feature} className="flex gap-2">
-                <span className="text-foreground mt-1.5 h-1 w-1 shrink-0 rounded-full bg-current" />
-                <span>{feature}</span>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-
-        {error ? (
-          <p
-            role="alert"
-            className="border-destructive/30 bg-destructive/5 text-destructive rounded-md border px-3 py-2 text-sm"
-          >
-            {error}
-          </p>
-        ) : null}
-
-        <Button
-          className="w-full"
-          disabled={busy}
-          onClick={onSignIn}
-          aria-busy={busy}
-        >
-          {busy ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
-          ) : null}
-          {isSigningIn ? "Redirecting…" : signInLabel}
-        </Button>
-      </section>
-    </main>
-  );
-}
-
-export function PanelSignInSkeleton({ className }: { className?: string }) {
-  return (
-    <main
-      className={cn(
-        "bg-background grid min-h-screen place-items-center p-4 sm:p-8",
-        className,
-      )}
-    >
-      <div className="border-border bg-card w-full max-w-md space-y-4 rounded-lg border p-8 shadow-sm">
-        <div className="bg-muted h-3 w-24 animate-pulse rounded" />
-        <div className="bg-muted h-8 w-48 animate-pulse rounded" />
-        <div className="bg-muted mt-7 h-10 w-full animate-pulse rounded-md" />
-      </div>
-    </main>
-  );
-}

package/src/segmented-control.tsx

@@ -1,155 +0,0 @@
-"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

@@ -1,105 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-"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

@@ -1,87 +0,0 @@
-"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,
-  );
-}