@inshorts/glint-ui 0.5.4 → 0.6.1

package/src/badge.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "./utils";
-
-/**
- * The status pill every list panel was spelling out by hand.
- *
- * Variants are semantic rather than named after a colour, because the same
- * status means the same thing on every panel and should not have to be
- * re-decided per table — Deleted was `bg-rose-100 text-rose-800` in one place
- * and `text-rose-900` two files away.
- *
- * These stay light-on-dark-text in both themes on purpose. A pill is a small
- * block of colour whose whole job is to be picked out of a row of text, and
- * inverting it per theme made the same status read as two different states.
- */
-const badgeVariants = cva(
-  "inline-flex items-center gap-1 rounded font-medium whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        neutral: "bg-muted text-muted-foreground",
-        success: "bg-success/15 text-success",
-        warning: "bg-warning/15 text-warning",
-        danger: "bg-destructive/15 text-destructive",
-        info: "bg-info/15 text-info",
-      },
-      size: {
-        /** Inline chips — a category, a tenant, a permission. */
-        sm: "px-1.5 py-0.5 text-xs",
-        /** A row's status. */
-        md: "px-2 py-0.5 text-xs",
-      },
-    },
-    defaultVariants: {
-      variant: "neutral",
-      size: "md",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends
-    React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
-
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <span
-      ref={ref}
-      className={cn(badgeVariants({ variant, size }), className)}
-      {...props}
-    />
-  ),
-);
-
-Badge.displayName = "Badge";
-
-export { badgeVariants };

package/src/breadcrumb.tsx

@@ -1,71 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./utils";
-
-export type BreadcrumbItem = {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-};
-
-interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  className?: string;
-}
-
-export function Breadcrumb({ items, className }: BreadcrumbProps) {
-  return (
-    <nav aria-label="Breadcrumb" className={cn("text-sm", className)}>
-      <ol className="flex flex-wrap items-center gap-1.5">
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const isInteractive = !isLast && (item.href || item.onClick);
-
-          return (
-            <li
-              key={`${item.label}-${index}`}
-              className="flex items-center gap-1.5"
-            >
-              {index > 0 && (
-                <ChevronRight
-                  className="text-muted-foreground/70 size-3.5 shrink-0"
-                  aria-hidden
-                />
-              )}
-              {isInteractive ? (
-                item.href ? (
-                  <a
-                    href={item.href}
-                    className="text-muted-foreground hover:text-foreground transition"
-                  >
-                    {item.label}
-                  </a>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={item.onClick}
-                    className="text-muted-foreground hover:text-foreground transition"
-                  >
-                    {item.label}
-                  </button>
-                )
-              ) : (
-                <span
-                  className={cn(
-                    isLast
-                      ? "text-foreground font-medium"
-                      : "text-muted-foreground",
-                  )}
-                  aria-current={isLast ? "page" : undefined}
-                >
-                  {item.label}
-                </span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

package/src/button.tsx

@@ -1,113 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-
-import { Spinner } from "./spinner";
-import { cn } from "./utils";
-
-const buttonVariants = cva(
-  "inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-sm font-medium transition duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        secondary: "bg-muted text-foreground hover:bg-muted/80",
-        ghost: "hover:bg-muted",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-background hover:bg-muted",
-      },
-      size: {
-        sm: "h-8 px-2.5",
-        md: "h-9 px-3",
-        lg: "h-10 px-4",
-        icon: "h-9 w-9 px-0",
-        // Square, matching `sm`'s height — for an icon-only control sitting in
-        // a table row or beside `sm` buttons, where `icon` is a row taller.
-        "icon-sm": "h-8 w-8 px-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  /**
-   * Work is in flight: shows a spinner, disables the button, and sets
-   * `aria-busy`.
-   *
-   * This exists because the panel had 272 disabled buttons and only 22 that
-   * said anything about why — the rest went dead on click with no spinner and
-   * no label change, which reads as a broken button rather than a busy one.
-   * Making the feedback part of `disabled` rather than something each caller
-   * remembers separately is the only way that ratio stays fixed.
-   *
-   * The label is kept rather than swapped. "Saving…" loses which button you
-   * pressed, and the spinner already says it is working. An icon-only button
-   * is the exception — there is no room beside the glyph, so the spinner takes
-   * its place; the `aria-label` is what names the button either way.
-   *
-   * "Icon-only" means an icon `size`. A square button that grew a spinner
-   * beside its glyph would not just look wrong, it would resize mid-request
-   * and shove whatever sits next to it sideways.
-   */
-  loading?: boolean;
-}
-
-/** Sizes with no room for a spinner beside the glyph. */
-const ICON_SIZES = new Set<string>(["icon", "icon-sm"]);
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      asChild = false,
-      loading,
-      disabled,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-
-    // `asChild` renders someone else's element, which may not take a spinner or
-    // a disabled attribute — so the busy treatment is only applied to a real
-    // button, and passing both is a mistake worth not papering over.
-    if (asChild) {
-      return (
-        <Comp
-          ref={ref}
-          className={cn(buttonVariants({ variant, size }), className)}
-          {...props}
-        >
-          {children}
-        </Comp>
-      );
-    }
-
-    return (
-      <button
-        ref={ref}
-        disabled={disabled || loading}
-        aria-busy={loading || undefined}
-        className={cn(buttonVariants({ variant, size }), className)}
-        {...props}
-      >
-        {loading ? <Spinner size="sm" /> : null}
-        {loading && size != null && ICON_SIZES.has(size) ? null : children}
-      </button>
-    );
-  },
-);
-
-Button.displayName = "Button";

package/src/card.tsx

@@ -1,79 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-/**
- * Surface container for grouped content. Prefer a bare section when there is
- * no need for border / padding chrome — cards are for interactive or
- * self-contained blocks, not every stack of text.
- */
-export const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "bg-card text-card-foreground rounded-xl border shadow",
-      className,
-    )}
-    {...props}
-  />
-));
-Card.displayName = "Card";
-
-export const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-export const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("leading-none font-semibold tracking-tight", className)}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-export const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
-CardDescription.displayName = "CardDescription";
-
-export const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-export const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";

package/src/clipboard.ts

@@ -1,144 +0,0 @@
-/**
- * Range maths and clipboard text for the card table's spreadsheet selection.
- *
- * Ported from video-shorts-panel `app/src/common/components/ExcelTable.jsx`.
- * Kept free of React and the DOM (except `writeToClipboard`) so the escaping
- * and range rules are unit-testable.
- */
-
-export type CellRef = { r: number; c: number };
-
-export type CellRange = { r1: number; r2: number; c1: number; c2: number };
-
-/** Tab for the clipboard (Excel/Sheets split on it), comma for a .csv file. */
-export const TSV_DELIMITER = "\t";
-export const CSV_DELIMITER = ",";
-
-/**
- * Anchor and focus can be dragged in any direction, so the range is whichever
- * corners they happen to be — normalize to top-left / bottom-right.
- */
-export function normalizeRange(
-  anchor: CellRef | null | undefined,
-  focus: CellRef | null | undefined,
-): CellRange | null {
-  if (!anchor || !focus) return null;
-  return {
-    r1: Math.min(anchor.r, focus.r),
-    r2: Math.max(anchor.r, focus.r),
-    c1: Math.min(anchor.c, focus.c),
-    c2: Math.max(anchor.c, focus.c),
-  };
-}
-
-/**
- * A cell needs quoting once it carries the delimiters themselves — the same
- * rule Excel uses when it parses the clipboard. Without it, a title containing
- * a tab or a newline silently becomes extra columns or rows on paste.
- */
-export function escapeCell(raw: unknown, delimiter: string): string {
-  const value = raw == null ? "" : String(raw);
-  if (
-    value.includes(delimiter) ||
-    value.includes("\n") ||
-    value.includes("\r") ||
-    value.includes('"')
-  ) {
-    return `"${value.replace(/"/g, '""')}"`;
-  }
-  return value;
-}
-
-export type TextColumn<Row> = {
-  title: string;
-  value: (row: Row) => string;
-};
-
-/** Renders a range as delimited text, optionally with a header line. */
-export function buildRangeText<Row>(
-  range: CellRange | null,
-  columns: TextColumn<Row>[],
-  rows: Row[],
-  delimiter: string,
-  includeHeaders: boolean,
-): string {
-  if (!range) return "";
-  const lines: string[] = [];
-
-  if (includeHeaders) {
-    const header: string[] = [];
-    for (let c = range.c1; c <= range.c2; c++) {
-      header.push(escapeCell(columns[c]?.title, delimiter));
-    }
-    lines.push(header.join(delimiter));
-  }
-
-  for (let r = range.r1; r <= range.r2; r++) {
-    const line: string[] = [];
-    const row = rows[r];
-    for (let c = range.c1; c <= range.c2; c++) {
-      const column = columns[c];
-      line.push(
-        escapeCell(
-          column && row !== undefined ? column.value(row) : "",
-          delimiter,
-        ),
-      );
-    }
-    lines.push(line.join(delimiter));
-  }
-
-  return lines.join("\n");
-}
-
-/** The whole grid, or null when there is nothing to select. */
-export function fullRange<Row>(
-  columns: TextColumn<Row>[],
-  rows: Row[],
-): CellRange | null {
-  if (!rows.length || !columns.length) return null;
-  return { r1: 0, r2: rows.length - 1, c1: 0, c2: columns.length - 1 };
-}
-
-/** "3 × 2 selected" — what the toolbar reports back to the user. */
-export function describeRange(range: CellRange | null): string {
-  if (!range) return "No selection";
-  const rowCount = range.r2 - range.r1 + 1;
-  const colCount = range.c2 - range.c1 + 1;
-  if (rowCount === 1 && colCount === 1) return "1 cell selected";
-  return `${rowCount} × ${colCount} selected`;
-}
-
-export function countCells(range: CellRange): {
-  rows: number;
-  columns: number;
-} {
-  return {
-    rows: range.r2 - range.r1 + 1,
-    columns: range.c2 - range.c1 + 1,
-  };
-}
-
-/**
- * `navigator.clipboard` is unavailable on http origins and older browsers, so
- * fall back to a hidden textarea + execCommand rather than failing the copy.
- */
-export async function writeToClipboard(text: string): Promise<void> {
-  if (navigator.clipboard?.writeText) {
-    return navigator.clipboard.writeText(text);
-  }
-
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.style.position = "fixed";
-  textarea.style.top = "-1000px";
-  document.body.appendChild(textarea);
-  textarea.select();
-  try {
-    if (!document.execCommand("copy")) {
-      throw new Error("Could not write to the clipboard");
-    }
-  } finally {
-    document.body.removeChild(textarea);
-  }
-}

package/src/collapsible.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "./utils";
-
-/**
- * A titled section that folds away.
- *
- * For sidebar panels that are long but not always in use — the body stays
- * mounted so its state (a loaded list, a half-filled filter) survives being
- * collapsed, rather than being thrown away and refetched on the way back.
- */
-export function CollapsibleSection({
-  title,
-  icon,
-  defaultOpen = true,
-  right,
-  className,
-  children,
-}: {
-  title: string;
-  /** Optional leading glyph, shown between the chevron and the title. */
-  icon?: React.ReactNode;
-  defaultOpen?: boolean;
-  /** Optional trailing content in the header, e.g. a count. */
-  right?: React.ReactNode;
-  className?: string;
-  children: React.ReactNode;
-}) {
-  const [open, setOpen] = React.useState(defaultOpen);
-  const bodyId = React.useId();
-
-  return (
-    <div className={cn("border-border rounded-lg border", className)}>
-      <button
-        type="button"
-        aria-expanded={open}
-        aria-controls={bodyId}
-        onClick={() => setOpen((current) => !current)}
-        className="hover:bg-muted/50 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-semibold transition"
-      >
-        <ChevronDown
-          size={14}
-          aria-hidden
-          className={cn(
-            "shrink-0 transition-transform",
-            open ? "" : "-rotate-90",
-          )}
-        />
-        {icon}
-        <span className="flex-1">{title}</span>
-        {right}
-      </button>
-      {/* Hidden rather than unmounted, so collapsing does not discard the
-          panel's state or refetch what it had already loaded. */}
-      <div id={bodyId} hidden={!open} className="space-y-3 px-3 pt-1 pb-3">
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/confirm-dialog.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Button } from "./button";
-import { Modal } from "./modal";
-
-interface ConfirmDialogProps {
-  isOpen: boolean;
-  title: string;
-  description?: React.ReactNode;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  isConfirming?: boolean;
-  error?: string | null;
-  onConfirm: () => void;
-  onClose: () => void;
-}
-
-export function ConfirmDialog({
-  isOpen,
-  title,
-  description,
-  confirmLabel = "Delete",
-  cancelLabel = "Cancel",
-  isConfirming,
-  error,
-  onConfirm,
-  onClose,
-}: ConfirmDialogProps) {
-  const titleId = React.useId();
-  const descriptionId = React.useId();
-  const errorId = React.useId();
-
-  const describedBy = [
-    description ? descriptionId : null,
-    error ? errorId : null,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      role="alertdialog"
-      labelledBy={titleId}
-      describedBy={describedBy || undefined}
-      closeLabel="Close dialog"
-      onClose={onClose}
-    >
-      <h3 id={titleId} className="text-lg font-semibold">
-        {title}
-      </h3>
-      {description ? (
-        <div id={descriptionId} className="text-muted-foreground mt-2 text-sm">
-          {description}
-        </div>
-      ) : null}
-
-      {error ? (
-        <div
-          id={errorId}
-          role="alert"
-          className="border-destructive/30 bg-destructive/5 text-destructive mt-4 rounded-lg border px-3 py-2 text-sm"
-        >
-          {error}
-        </div>
-      ) : null}
-
-      <div className="mt-6 flex justify-end gap-2">
-        <Button variant="outline" onClick={onClose} disabled={isConfirming}>
-          {cancelLabel}
-        </Button>
-        <Button
-          variant="destructive"
-          onClick={onConfirm}
-          loading={isConfirming}
-        >
-          {confirmLabel}
-        </Button>
-      </div>
-    </Modal>
-  );
-}

package/src/copy-button.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { Check, Copy } from "lucide-react";
-import * as React from "react";
-
-import { writeToClipboard } from "./clipboard";
-import { cn } from "./utils";
-
-/**
- * Copies one short string — an id, a title, a URL — and says so for a moment.
- *
- * The panel had this three times over, each with its own timeout and its own
- * silent-failure story. `writeToClipboard` is used rather than
- * `navigator.clipboard` directly because the latter is undefined on http
- * origins, which is exactly where this panel runs in local dev.
- */
-export function CopyButton({
-  value,
-  label,
-  className,
-}: {
-  value: string;
-  /** What is being copied, for the accessible name: "card id", "title". */
-  label: string;
-  className?: string;
-}) {
-  const [copied, setCopied] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!copied) return;
-    const timer = window.setTimeout(() => setCopied(false), 1500);
-    return () => window.clearTimeout(timer);
-  }, [copied]);
-
-  return (
-    <button
-      type="button"
-      aria-label={copied ? `${label} copied` : `Copy ${label}`}
-      title={copied ? "Copied" : `Copy ${label}`}
-      className={cn(
-        "text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring shrink-0 cursor-pointer rounded p-1 transition focus-visible:ring-2 focus-visible:outline-none",
-        className,
-      )}
-      onClick={() => {
-        // A denied clipboard permission should not throw into the row.
-        void writeToClipboard(value)
-          .then(() => setCopied(true))
-          .catch(() => undefined);
-      }}
-    >
-      {copied ? (
-        <Check className="size-3.5 text-success" aria-hidden />
-      ) : (
-        <Copy className="size-3.5" aria-hidden />
-      )}
-    </button>
-  );
-}