@inshorts/glint-ui 0.3.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshorts/glint-ui",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Glint Tailwind 4 UI kit for Inshorts Next panels.",
   "license": "UNLICENSED",
   "type": "module",
@@ -33,28 +33,45 @@
     "url": "git+https://github.com/NewsInShorts/inshorts-npm-modules.git",
     "directory": "glint/ui"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run typecheck"
-  },
   "peerDependencies": {
+    "@radix-ui/react-slot": "^1.2.0",
+    "lucide-react": "^0.400.0 || ^1.0.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0"
   },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.3.3",
+    "@inshorts/glint-theme": "^0.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.49.0",
-    "tailwind-merge": "^3.7.0",
-    "@inshorts/glint-theme": "0.3.1"
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
+    "@radix-ui/react-slot": "^1.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "typescript": "^5.9.3"
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^24.1.3",
+    "lucide-react": "^1.49.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^5.9.3",
+    "vite": "5.4.21",
+    "vitest": "^2.1.9",
+    "vitest-axe": "^0.1.0"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
-}
+}

package/src/alert.tsx

@@ -18,10 +18,10 @@ import { cn } from "./utils";
 const alertVariants = cva("rounded-lg border px-3 py-2 text-sm", {
   variants: {
     variant: {
-      danger: "border-rose-200 bg-rose-50 text-rose-700",
-      warning: "border-amber-200 bg-amber-50 text-amber-800",
-      success: "border-emerald-200 bg-emerald-50 text-emerald-800",
-      info: "border-sky-200 bg-sky-50 text-sky-800",
+      danger: "border-destructive/30 bg-destructive/5 text-destructive",
+      warning: "border-warning/30 bg-warning/5 text-warning",
+      success: "border-success/30 bg-success/5 text-success",
+      info: "border-info/30 bg-info/5 text-info",
       /**
        * The quiet state of a banner that also has loud ones — "no default
        * campaign set" next to "this is the default". Without it those callers

package/src/badge.tsx

@@ -21,10 +21,10 @@ const badgeVariants = cva(
     variants: {
       variant: {
         neutral: "bg-muted text-muted-foreground",
-        success: "bg-emerald-100 text-emerald-800",
-        warning: "bg-amber-100 text-amber-800",
-        danger: "bg-rose-100 text-rose-800",
-        info: "bg-sky-100 text-sky-900",
+        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. */

package/src/confirm-dialog.tsx

@@ -28,23 +28,41 @@ export function ConfirmDialog({
   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="confirm-dialog-title"
+      labelledBy={titleId}
+      describedBy={describedBy || undefined}
       closeLabel="Close dialog"
       onClose={onClose}
     >
-      <h3 id="confirm-dialog-title" className="text-lg font-semibold">
+      <h3 id={titleId} className="text-lg font-semibold">
         {title}
       </h3>
       {description ? (
-        <div className="text-muted-foreground mt-2 text-sm">{description}</div>
+        <div id={descriptionId} className="text-muted-foreground mt-2 text-sm">
+          {description}
+        </div>
       ) : null}
 
       {error ? (
-        <div className="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
+        <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}

package/src/field.tsx

@@ -5,6 +5,12 @@ 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
@@ -18,21 +24,32 @@ interface FieldProps {
 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)}>
-      <span className="text-muted-foreground">
-        {label}
-        {required ? (
-          <span className="text-destructive ml-0.5" aria-hidden="true">
-            *
-          </span>
-        ) : null}
-      </span>
+      {htmlFor && as === "div" ? (
+        <label htmlFor={htmlFor} className="text-muted-foreground">
+          {labelNode}
+        </label>
+      ) : (
+        <span className="text-muted-foreground">{labelNode}</span>
+      )}
       {children}
     </Wrapper>
   );

package/src/index.ts

@@ -20,6 +20,8 @@ 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";

package/src/modal.tsx

@@ -25,6 +25,11 @@ 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;
@@ -48,6 +53,7 @@ interface ModalProps {
 export function Modal({
   isOpen,
   labelledBy,
+  describedBy,
   closeLabel,
   onClose,
   children,
@@ -96,6 +102,7 @@ export function Modal({
         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",

package/src/panel-brand-mark.tsx

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

@@ -0,0 +1,134 @@
+"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/tabs.tsx

@@ -17,6 +17,10 @@ import { cn } from "./utils";
  * about how many tabs there are or which is selected; `tablist` / `tab` /
  * `aria-selected` do. Arrow-key navigation comes with that expectation, so it
  * is implemented here too.
+ *
+ * Optional `panel` on a tab (or a sibling `TabPanel`) wires APG `aria-controls`
+ * / `role="tabpanel"`. Callers that already render content from `value` can
+ * keep doing so and pass `panelId` for association, or switch to `panel`.
  */
 export interface TabItem<Key extends string = string> {
   key: Key;
@@ -24,6 +28,16 @@ export interface TabItem<Key extends string = string> {
   /** Rendered after the label — a count, usually. */
   badge?: React.ReactNode;
   disabled?: boolean;
+  /**
+   * Optional panel body. When any tab provides `panel`, panels render under
+   * the strip with `role="tabpanel"`.
+   */
+  panel?: React.ReactNode;
+  /**
+   * External panel element id for `aria-controls` when panels live outside
+   * this component.
+   */
+  panelId?: string;
 }
 
 export interface TabsProps<Key extends string = string> {
@@ -35,6 +49,37 @@ export interface TabsProps<Key extends string = string> {
   className?: string;
 }
 
+export interface TabPanelProps {
+  /** Must match the controlling tab's generated or explicit id. */
+  id: string;
+  /** Id of the tab that labels this panel. */
+  labelledBy: string;
+  active: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/** Companion panel for callers that keep content outside `Tabs`. */
+export function TabPanel({
+  id,
+  labelledBy,
+  active,
+  children,
+  className,
+}: TabPanelProps) {
+  return (
+    <div
+      role="tabpanel"
+      id={id}
+      aria-labelledby={labelledBy}
+      hidden={!active}
+      className={className}
+    >
+      {active ? children : null}
+    </div>
+  );
+}
+
 export function Tabs<Key extends string = string>({
   tabs,
   value,
@@ -43,6 +88,16 @@ export function Tabs<Key extends string = string>({
   className,
 }: TabsProps<Key>) {
   const refs = React.useRef(new Map<Key, HTMLButtonElement | null>());
+  const reactId = React.useId();
+  const hasInlinePanels = tabs.some((tab) => tab.panel != null);
+
+  function tabDomId(key: Key) {
+    return `${reactId}-tab-${key}`;
+  }
+
+  function panelDomId(tab: TabItem<Key>) {
+    return tab.panelId ?? `${reactId}-panel-${tab.key}`;
+  }
 
   function focusTab(key: Key) {
     onChange(key);
@@ -68,24 +123,32 @@ export function Tabs<Key extends string = string>({
     focusTab(next.key);
   }
 
-  return (
+  const tablist = (
     <div
       role="tablist"
       aria-label={ariaLabel}
       onKeyDown={onKeyDown}
-      className={cn("border-border flex flex-wrap gap-1 border-b", className)}
+      className={cn(
+        "border-border flex flex-wrap gap-1 border-b",
+        !hasInlinePanels ? className : undefined,
+      )}
     >
       {tabs.map((tab) => {
         const active = tab.key === value;
+        const id = tabDomId(tab.key);
+        const controls =
+          tab.panel != null || tab.panelId ? panelDomId(tab) : undefined;
         return (
           <button
             key={tab.key}
+            id={id}
             ref={(node) => {
               refs.current.set(tab.key, node);
             }}
             type="button"
             role="tab"
             aria-selected={active}
+            aria-controls={controls}
             disabled={tab.disabled}
             // Only the active tab is reachable by Tab; arrows move within the
             // strip. Without this a keyboard user pages through every tab to
@@ -100,7 +163,7 @@ export function Tabs<Key extends string = string>({
               // already used. Adopting it keeps this a deduplication rather
               // than a restyle of every panel that has tabs.
               active
-                ? "bg-slate-950 text-white dark:bg-white dark:text-slate-950"
+                ? "bg-primary text-primary-foreground"
                 : "text-muted-foreground hover:bg-muted",
             )}
           >
@@ -115,4 +178,24 @@ export function Tabs<Key extends string = string>({
       })}
     </div>
   );
+
+  if (!hasInlinePanels) return tablist;
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {tablist}
+      {tabs.map((tab) =>
+        tab.panel != null ? (
+          <TabPanel
+            key={tab.key}
+            id={panelDomId(tab)}
+            labelledBy={tabDomId(tab.key)}
+            active={tab.key === value}
+          >
+            {tab.panel}
+          </TabPanel>
+        ) : null,
+      )}
+    </div>
+  );
 }