@inshorts/glint-ui 0.5.3 → 0.6.0

package/dist/panel-brand-mark.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+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.
+ */
+declare function PanelBrandMark({ children, size, className, ...props }: PanelBrandMarkProps): React.JSX.Element;
+
+export { PanelBrandMark, type PanelBrandMarkProps };

package/dist/panel-brand-mark.js

@@ -0,0 +1,8 @@
+import {
+  PanelBrandMark
+} from "./chunk-JDE5XYPT.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  PanelBrandMark
+};
+//# sourceMappingURL=panel-brand-mark.js.map

package/dist/panel-brand-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/panel-sign-in.cjs

@@ -0,0 +1,256 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/panel-sign-in.tsx
+var panel_sign_in_exports = {};
+__export(panel_sign_in_exports, {
+  PanelSignIn: () => PanelSignIn,
+  PanelSignInSkeleton: () => PanelSignInSkeleton
+});
+module.exports = __toCommonJS(panel_sign_in_exports);
+var import_lucide_react2 = require("lucide-react");
+
+// src/button.tsx
+var React = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+
+// src/spinner.tsx
+var import_lucide_react = require("lucide-react");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIZES = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5",
+  xl: "size-10 border-2"
+};
+function Spinner({ size = "md", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_lucide_react.Loader2,
+    {
+      "aria-hidden": true,
+      className: cn("animate-spin", SIZES[size], className),
+      ...props
+    }
+  );
+}
+
+// src/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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"
+    }
+  }
+);
+var ICON_SIZES = /* @__PURE__ */ new Set(["icon", "icon-sm"]);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Comp,
+        {
+          ref,
+          className: cn(buttonVariants({ variant, size }), className),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "sm" }) : null,
+          loading && size != null && ICON_SIZES.has(size) ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/panel-brand-mark.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PanelBrandMark({
+  children,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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
+    }
+  );
+}
+
+// src/panel-sign-in.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+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
+}) {
+  const busy = isSessionLoading || isSigningIn;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "main",
+    {
+      className: cn(
+        "bg-background text-foreground grid min-h-screen place-items-center p-4 sm:p-8",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "border-border bg-card w-full max-w-md space-y-6 rounded-lg border p-8 shadow-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBrandMark, { children: brandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-semibold", "aria-hidden": true, children: appName.slice(0, 1).toUpperCase() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-title truncate font-semibold", children: appName }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-muted-foreground text-meta", children: eyebrow })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { className: "text-display font-semibold tracking-tight", children: refused ? refusedTitle : "Sign in" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-muted-foreground text-body", children: refused ? refusedMessage : description })
+        ] }),
+        features && features.length > 0 && !refused ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "text-muted-foreground text-body space-y-1.5", children: features.slice(0, 3).map((feature) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-foreground mt-1.5 h-1 w-1 shrink-0 rounded-full bg-current" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: feature })
+        ] }, feature)) }) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "p",
+          {
+            role: "alert",
+            className: "border-destructive/30 bg-destructive/5 text-destructive rounded-md border px-3 py-2 text-sm",
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          Button,
+          {
+            className: "w-full",
+            disabled: busy,
+            onClick: onSignIn,
+            "aria-busy": busy,
+            children: [
+              busy ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Loader2, { className: "mr-2 h-4 w-4 animate-spin", "aria-hidden": true }) : null,
+              isSigningIn ? "Redirecting\u2026" : signInLabel
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function PanelSignInSkeleton({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "main",
+    {
+      className: cn(
+        "bg-background grid min-h-screen place-items-center p-4 sm:p-8",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border-border bg-card w-full max-w-md space-y-4 rounded-lg border p-8 shadow-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-muted h-3 w-24 animate-pulse rounded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-muted h-8 w-48 animate-pulse rounded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-muted mt-7 h-10 w-full animate-pulse rounded-md" })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PanelSignIn,
+  PanelSignInSkeleton
+});
+//# sourceMappingURL=panel-sign-in.cjs.map

package/dist/panel-sign-in.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-sign-in.tsx","../src/button.tsx","../src/spinner.tsx","../src/utils.ts","../src/panel-brand-mark.tsx"],"sourcesContent":["\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"./button\";\nimport { PanelBrandMark } from \"./panel-brand-mark\";\nimport { cn } from \"./utils\";\n\nexport type PanelSignInProps = {\n  appName: string;\n  /** Short line under the brand (e.g. \"Secure Google sign-in\"). */\n  eyebrow?: string;\n  /** One supporting sentence under the headline. */\n  description?: string;\n  /** Optional feature bullets — keep to ≤3; DESIGN.md: one job per surface. */\n  features?: string[];\n  brandIcon?: React.ReactNode;\n  error?: string | null;\n  /** Google signed in but panel access refused. */\n  refused?: boolean;\n  refusedTitle?: string;\n  refusedMessage?: string;\n  isSessionLoading?: boolean;\n  isSigningIn?: boolean;\n  onSignIn: () => void;\n  signInLabel?: string;\n  className?: string;\n};\n\n/**\n * DESIGN.md-compliant panel login: brand-first, ink neutrals, no purple glow.\n */\nexport function PanelSignIn({\n  appName,\n  eyebrow = \"Secure Google sign-in\",\n  description = \"Use your work Google account to continue.\",\n  features,\n  brandIcon,\n  error,\n  refused = false,\n  refusedTitle = \"Access denied\",\n  refusedMessage = \"This Google account is signed in, but it is not provisioned for this panel.\",\n  isSessionLoading = false,\n  isSigningIn = false,\n  onSignIn,\n  signInLabel = \"Continue with Google\",\n  className,\n}: PanelSignInProps) {\n  const busy = isSessionLoading || isSigningIn;\n\n  return (\n    <main\n      className={cn(\n        \"bg-background text-foreground grid min-h-screen place-items-center p-4 sm:p-8\",\n        className,\n      )}\n    >\n      <section className=\"border-border bg-card w-full max-w-md space-y-6 rounded-lg border p-8 shadow-sm\">\n        <div className=\"flex items-center gap-3\">\n          <PanelBrandMark>\n            {brandIcon ?? (\n              <span className=\"text-sm font-semibold\" aria-hidden>\n                {appName.slice(0, 1).toUpperCase()}\n              </span>\n            )}\n          </PanelBrandMark>\n          <div className=\"min-w-0\">\n            <p className=\"text-title truncate font-semibold\">{appName}</p>\n            <p className=\"text-muted-foreground text-meta\">{eyebrow}</p>\n          </div>\n        </div>\n\n        <div className=\"space-y-2\">\n          <h1 className=\"text-display font-semibold tracking-tight\">\n            {refused ? refusedTitle : \"Sign in\"}\n          </h1>\n          <p className=\"text-muted-foreground text-body\">\n            {refused ? refusedMessage : description}\n          </p>\n        </div>\n\n        {features && features.length > 0 && !refused ? (\n          <ul className=\"text-muted-foreground text-body space-y-1.5\">\n            {features.slice(0, 3).map((feature) => (\n              <li key={feature} className=\"flex gap-2\">\n                <span className=\"text-foreground mt-1.5 h-1 w-1 shrink-0 rounded-full bg-current\" />\n                <span>{feature}</span>\n              </li>\n            ))}\n          </ul>\n        ) : null}\n\n        {error ? (\n          <p\n            role=\"alert\"\n            className=\"border-destructive/30 bg-destructive/5 text-destructive rounded-md border px-3 py-2 text-sm\"\n          >\n            {error}\n          </p>\n        ) : null}\n\n        <Button\n          className=\"w-full\"\n          disabled={busy}\n          onClick={onSignIn}\n          aria-busy={busy}\n        >\n          {busy ? (\n            <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" aria-hidden />\n          ) : null}\n          {isSigningIn ? \"Redirecting…\" : signInLabel}\n        </Button>\n      </section>\n    </main>\n  );\n}\n\nexport function PanelSignInSkeleton({ className }: { className?: string }) {\n  return (\n    <main\n      className={cn(\n        \"bg-background grid min-h-screen place-items-center p-4 sm:p-8\",\n        className,\n      )}\n    >\n      <div className=\"border-border bg-card w-full max-w-md space-y-4 rounded-lg border p-8 shadow-sm\">\n        <div className=\"bg-muted h-3 w-24 animate-pulse rounded\" />\n        <div className=\"bg-muted h-8 w-48 animate-pulse rounded\" />\n        <div className=\"bg-muted mt-7 h-10 w-full animate-pulse rounded-md\" />\n      </div>\n    </main>\n  );\n}\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nimport { Spinner } from \"./spinner\";\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        secondary: \"bg-muted text-foreground hover:bg-muted/80\",\n        ghost: \"hover:bg-muted\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-border bg-background hover:bg-muted\",\n      },\n      size: {\n        sm: \"h-8 px-2.5\",\n        md: \"h-9 px-3\",\n        lg: \"h-10 px-4\",\n        icon: \"h-9 w-9 px-0\",\n        // Square, matching `sm`'s height — for an icon-only control sitting in\n        // a table row or beside `sm` buttons, where `icon` is a row taller.\n        \"icon-sm\": \"h-8 w-8 px-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  /**\n   * Work is in flight: shows a spinner, disables the button, and sets\n   * `aria-busy`.\n   *\n   * This exists because the panel had 272 disabled buttons and only 22 that\n   * said anything about why — the rest went dead on click with no spinner and\n   * no label change, which reads as a broken button rather than a busy one.\n   * Making the feedback part of `disabled` rather than something each caller\n   * remembers separately is the only way that ratio stays fixed.\n   *\n   * The label is kept rather than swapped. \"Saving…\" loses which button you\n   * pressed, and the spinner already says it is working. An icon-only button\n   * is the exception — there is no room beside the glyph, so the spinner takes\n   * its place; the `aria-label` is what names the button either way.\n   *\n   * \"Icon-only\" means an icon `size`. A square button that grew a spinner\n   * beside its glyph would not just look wrong, it would resize mid-request\n   * and shove whatever sits next to it sideways.\n   */\n  loading?: boolean;\n}\n\n/** Sizes with no room for a spinner beside the glyph. */\nconst ICON_SIZES = new Set<string>([\"icon\", \"icon-sm\"]);\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      loading,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    // `asChild` renders someone else's element, which may not take a spinner or\n    // a disabled attribute — so the busy treatment is only applied to a real\n    // button, and passing both is a mistake worth not papering over.\n    if (asChild) {\n      return (\n        <Comp\n          ref={ref}\n          className={cn(buttonVariants({ variant, size }), className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      );\n    }\n\n    return (\n      <button\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {loading ? <Spinner size=\"sm\" /> : null}\n        {loading && size != null && ICON_SIZES.has(size) ? null : children}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n","import * as React from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one spinner.\n *\n * There were five spellings of `animate-spin` across twelve files — `h-4 w-4`,\n * `h-5 w-5`, `size-4`, bare, and a hand-drawn ring in `ProtectedRoute` — so the\n * same \"working\" signal came out a different size depending on which panel you\n * were on.\n *\n * It is `aria-hidden` on purpose. A spinner is decoration; what a screen reader\n * needs is the surrounding control's `aria-busy` or the panel's status text,\n * and announcing \"loading\" twice is worse than once. `Button` and `StatePanel`\n * both supply that.\n */\nconst SIZES = {\n  sm: \"size-3.5\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-10 border-2\",\n} as const;\n\nexport interface SpinnerProps extends React.SVGProps<SVGSVGElement> {\n  size?: keyof typeof SIZES;\n}\n\nexport function Spinner({ size = \"md\", className, ...props }: SpinnerProps) {\n  return (\n    <Loader2\n      aria-hidden\n      className={cn(\"animate-spin\", SIZES[size], className)}\n      {...props}\n    />\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type PanelBrandMarkProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Icon inside the mark (lucide, etc.). */\n  children: React.ReactNode;\n  size?: \"sm\" | \"md\";\n};\n\n/**\n * Quiet brand tile for sidebar / sign-in — solid primary, no decorative gradients.\n */\nexport function PanelBrandMark({\n  children,\n  size = \"md\",\n  className,\n  ...props\n}: PanelBrandMarkProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-primary text-primary-foreground grid shrink-0 place-items-center rounded-lg\",\n        size === \"sm\" ? \"h-9 w-9\" : \"h-10 w-10\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,uBAAwB;;;ACFxB,YAAuB;AACvB,sCAAuC;AACvC,wBAAqB;;;ACDrB,0BAAwB;;;ACDxB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD0BI;AAbJ,IAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,MAAM,IAAI,GAAG,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEJ;;;ADkDQ,IAAAC,sBAAA;AAhFR,IAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,aACE;AAAA,QACF,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA;AAAA;AAAA,QAGN,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA8BA,IAAM,aAAa,oBAAI,IAAY,CAAC,QAAQ,SAAS,CAAC;AAE/C,IAAM,SAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,OAAO,UAAU,yBAAO;AAK9B,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,UACzD,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACtB,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA,QAEH;AAAA,oBAAU,6CAAC,WAAQ,MAAK,MAAK,IAAK;AAAA,UAClC,WAAW,QAAQ,QAAQ,WAAW,IAAI,IAAI,IAAI,OAAO;AAAA;AAAA;AAAA,IAC5D;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AG5FjB,IAAAC,sBAAA;AAPG,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,OAAO,YAAY;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AJ+Bc,IAAAC,sBAAA;AA7BP,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAqB;AACnB,QAAM,OAAO,oBAAoB;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA,wDAAC,aAAQ,WAAU,mFACjB;AAAA,sDAAC,SAAI,WAAU,2BACb;AAAA,uDAAC,kBACE,uBACC,6CAAC,UAAK,WAAU,yBAAwB,eAAW,MAChD,kBAAQ,MAAM,GAAG,CAAC,EAAE,YAAY,GACnC,GAEJ;AAAA,UACA,8CAAC,SAAI,WAAU,WACb;AAAA,yDAAC,OAAE,WAAU,qCAAqC,mBAAQ;AAAA,YAC1D,6CAAC,OAAE,WAAU,mCAAmC,mBAAQ;AAAA,aAC1D;AAAA,WACF;AAAA,QAEA,8CAAC,SAAI,WAAU,aACb;AAAA,uDAAC,QAAG,WAAU,6CACX,oBAAU,eAAe,WAC5B;AAAA,UACA,6CAAC,OAAE,WAAU,mCACV,oBAAU,iBAAiB,aAC9B;AAAA,WACF;AAAA,QAEC,YAAY,SAAS,SAAS,KAAK,CAAC,UACnC,6CAAC,QAAG,WAAU,+CACX,mBAAS,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,YACzB,8CAAC,QAAiB,WAAU,cAC1B;AAAA,uDAAC,UAAK,WAAU,mEAAkE;AAAA,UAClF,6CAAC,UAAM,mBAAQ;AAAA,aAFR,OAGT,CACD,GACH,IACE;AAAA,QAEH,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAET;AAAA;AAAA,QACH,IACE;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,UAAU;AAAA,YACV,SAAS;AAAA,YACT,aAAW;AAAA,YAEV;AAAA,qBACC,6CAAC,gCAAQ,WAAU,6BAA4B,eAAW,MAAC,IACzD;AAAA,cACH,cAAc,sBAAiB;AAAA;AAAA;AAAA,QAClC;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB,EAAE,UAAU,GAA2B;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA,wDAAC,SAAI,WAAU,mFACb;AAAA,qDAAC,SAAI,WAAU,2CAA0C;AAAA,QACzD,6CAAC,SAAI,WAAU,2CAA0C;AAAA,QACzD,6CAAC,SAAI,WAAU,sDAAqD;AAAA,SACtE;AAAA;AAAA,EACF;AAEJ;","names":["import_lucide_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/panel-sign-in.d.cts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+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.
+ */
+declare function PanelSignIn({ appName, eyebrow, description, features, brandIcon, error, refused, refusedTitle, refusedMessage, isSessionLoading, isSigningIn, onSignIn, signInLabel, className, }: PanelSignInProps): React.JSX.Element;
+declare function PanelSignInSkeleton({ className }: {
+    className?: string;
+}): React.JSX.Element;
+
+export { PanelSignIn, type PanelSignInProps, PanelSignInSkeleton };

package/dist/panel-sign-in.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+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.
+ */
+declare function PanelSignIn({ appName, eyebrow, description, features, brandIcon, error, refused, refusedTitle, refusedMessage, isSessionLoading, isSigningIn, onSignIn, signInLabel, className, }: PanelSignInProps): React.JSX.Element;
+declare function PanelSignInSkeleton({ className }: {
+    className?: string;
+}): React.JSX.Element;
+
+export { PanelSignIn, type PanelSignInProps, PanelSignInSkeleton };

package/dist/panel-sign-in.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  PanelSignIn,
+  PanelSignInSkeleton
+} from "./chunk-PM2VE7DJ.js";
+import "./chunk-JDE5XYPT.js";
+import "./chunk-KR3BCFP7.js";
+import "./chunk-UE7JY7VR.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  PanelSignIn,
+  PanelSignInSkeleton
+};
+//# sourceMappingURL=panel-sign-in.js.map

package/dist/panel-sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/segmented-control.cjs

@@ -0,0 +1,126 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/segmented-control.tsx
+var segmented_control_exports = {};
+__export(segmented_control_exports, {
+  SegmentedControl: () => SegmentedControl
+});
+module.exports = __toCommonJS(segmented_control_exports);
+var React = __toESM(require("react"), 1);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/segmented-control.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var 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"
+  }
+};
+var TRACKS = {
+  contained: "border-border inline-flex rounded-md border p-0.5",
+  loose: "flex flex-wrap gap-2"
+};
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  variant = "contained",
+  tone = "emphasis",
+  fill = false,
+  className
+}) {
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  function onKeyDown(event) {
+    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);
+    const next = selectable[(current + step + selectable.length) % selectable.length];
+    event.preventDefault();
+    onChange(next.value);
+    refs.current.get(next.value)?.focus();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      className: cn(TRACKS[variant], className),
+      children: options.map((option) => {
+        const checked = option.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            ref: (node) => {
+              refs.current.set(option.value, node);
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            disabled: option.disabled,
+            title: option.title,
+            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
+            ),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentedControl
+});
+//# sourceMappingURL=segmented-control.cjs.map

package/dist/segmented-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one-of-N picker seven panels were each drawing by hand.\n *\n * Not `Tabs`, which is a bottom-bordered strip sitting above the content it\n * switches. This is the inline version — a bordered track with the selected\n * option filled in — used for a filter or a setting that sits among other\n * controls rather than heading a panel.\n *\n * **Roles are the reason to use this.** The seven copies had three different\n * ideas about what they were: one said `tablist`/`tab`, one said\n * `group`/`aria-pressed`, and the other five said nothing at all — so on five\n * of seven a screen reader heard a row of unlabelled buttons with no\n * indication which one was active. None of the three was right. `tablist`\n * without a `tabpanel` is a promise the markup does not keep, and\n * `aria-pressed` describes independent toggles, not a choice of one. Picking a\n * value out of a fixed set is a radio group, so that is what this is, with the\n * roving tabindex and arrow keys that come with the role.\n *\n * `tone` keeps both active colours the panels had drifted into: `emphasis` is\n * the near-black/near-white fill five of them used, `primary` the violet\n * accent the other two did. They are genuinely different colours rather than\n * one spelled two ways, so collapsing them is a visual change to two panels\n * and belongs in its own reviewable diff — the same call `DataTable` makes\n * about its two header variants.\n */\nexport interface SegmentedOption<Value extends string> {\n  value: Value;\n  label: React.ReactNode;\n  disabled?: boolean;\n  /**\n   * Hover text. Worth setting on a disabled option — \"Everyone\" going grey\n   * says nothing about which permission would bring it back.\n   */\n  title?: string;\n}\n\nexport interface SegmentedControlProps<Value extends string> {\n  options: ReadonlyArray<SegmentedOption<Value>>;\n  value: Value;\n  onChange: (value: Value) => void;\n  /**\n   * Required: the group never has a visible label — the options name the\n   * choice between them, which tells you nothing about what is being chosen.\n   */\n  ariaLabel: string;\n  /**\n   * `contained` — one bordered track around the options (five panels).\n   * `loose` — free-standing pills with a gap between them (two panels).\n   */\n  variant?: \"contained\" | \"loose\";\n  /** See the note above: two real colours, not one spelled twice. */\n  tone?: \"emphasis\" | \"primary\";\n  /** Options share the width equally, for a control that fills its column. */\n  fill?: boolean;\n  className?: string;\n}\n\nconst TONES = {\n  emphasis: {\n    on: \"bg-slate-950 text-white dark:bg-white dark:text-slate-950\",\n    off: \"text-muted-foreground hover:bg-muted\",\n  },\n  primary: {\n    on: \"bg-primary text-primary-foreground\",\n    off: \"text-muted-foreground hover:bg-muted\",\n  },\n} as const;\n\nconst TRACKS = {\n  contained: \"border-border inline-flex rounded-md border p-0.5\",\n  loose: \"flex flex-wrap gap-2\",\n} as const;\n\nexport function SegmentedControl<Value extends string>({\n  options,\n  value,\n  onChange,\n  ariaLabel,\n  variant = \"contained\",\n  tone = \"emphasis\",\n  fill = false,\n  className,\n}: SegmentedControlProps<Value>) {\n  const refs = React.useRef(new Map<Value, HTMLButtonElement | null>());\n\n  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    const step =\n      event.key === \"ArrowRight\" || event.key === \"ArrowDown\"\n        ? 1\n        : event.key === \"ArrowLeft\" || event.key === \"ArrowUp\"\n          ? -1\n          : 0;\n    if (step === 0) return;\n\n    const selectable = options.filter((option) => !option.disabled);\n    if (selectable.length < 2) return;\n\n    const current = selectable.findIndex((option) => option.value === value);\n    // Wraps, which is what a radio group is expected to do.\n    const next =\n      selectable[(current + step + selectable.length) % selectable.length];\n\n    event.preventDefault();\n    onChange(next.value);\n    // The newly checked option has to take focus, or the next arrow press is\n    // still measured from the old one.\n    refs.current.get(next.value)?.focus();\n  }\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      onKeyDown={onKeyDown}\n      className={cn(TRACKS[variant], className)}\n    >\n      {options.map((option) => {\n        const checked = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              refs.current.set(option.value, node);\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={checked}\n            disabled={option.disabled}\n            title={option.title}\n            // Only the checked option is reachable by Tab; arrows move within\n            // the group. Without this a keyboard user pages through every\n            // option to get past the control.\n            tabIndex={checked ? 0 : -1}\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"cursor-pointer rounded px-3 py-1 text-sm font-medium transition\",\n              \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              fill && \"flex-1\",\n              checked ? TONES[tone].on : TONES[tone].off,\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;;;ACFvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADwHU;AA9DV,IAAM,QAAQ;AAAA,EACZ,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,EACP;AACF;AAEA,IAAM,SAAS;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AACT;AAEO,SAAS,iBAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AACF,GAAiC;AAC/B,QAAM,OAAa,aAAO,oBAAI,IAAqC,CAAC;AAEpE,WAAS,UAAU,OAA4C;AAC7D,UAAM,OACJ,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,cACxC,IACA,MAAM,QAAQ,eAAe,MAAM,QAAQ,YACzC,KACA;AACR,QAAI,SAAS,EAAG;AAEhB,UAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,CAAC,OAAO,QAAQ;AAC9D,QAAI,WAAW,SAAS,EAAG;AAE3B,UAAM,UAAU,WAAW,UAAU,CAAC,WAAW,OAAO,UAAU,KAAK;AAEvE,UAAM,OACJ,YAAY,UAAU,OAAO,WAAW,UAAU,WAAW,MAAM;AAErE,UAAM,eAAe;AACrB,aAAS,KAAK,KAAK;AAGnB,SAAK,QAAQ,IAAI,KAAK,KAAK,GAAG,MAAM;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA,WAAW,GAAG,OAAO,OAAO,GAAG,SAAS;AAAA,MAEvC,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,UAAU,OAAO,UAAU;AACjC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,mBAAK,QAAQ,IAAI,OAAO,OAAO,IAAI;AAAA,YACrC;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,OAAO,OAAO;AAAA,YAId,UAAU,UAAU,IAAI;AAAA,YACxB,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,UAAU,MAAM,IAAI,EAAE,KAAK,MAAM,IAAI,EAAE;AAAA,YACzC;AAAA,YAEC,iBAAO;AAAA;AAAA,UAtBH,OAAO;AAAA,QAuBd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/segmented-control.d.cts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+/**
+ * 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.
+ */
+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;
+}
+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;
+}
+declare function SegmentedControl<Value extends string>({ options, value, onChange, ariaLabel, variant, tone, fill, className, }: SegmentedControlProps<Value>): React.JSX.Element;
+
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption };