@inshorts/glint-ui 0.5.4 → 0.6.0

package/dist/autocomplete.d.cts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+type AutocompleteOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type BaseAutocompleteProps = {
+    options: AutocompleteOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    emptyMessage?: string;
+    id?: string;
+    /**
+     * Accessible name for the combobox.
+     *
+     * `Field` renders its label as a `<span>`, so without this the control is
+     * announced as an unnamed combobox and cannot be queried by name — the
+     * filter toolbars work around it by counting comboboxes on the page.
+     */
+    ariaLabel?: string;
+    /**
+     * `compact` is the spreadsheet cell: no search icon, no min height, and a
+     * list wide enough to read a name. The closed control still shows the
+     * chosen label, and typing filters the list.
+     */
+    size?: "default" | "compact";
+    /**
+     * Type a value and press Enter (or paste a list) to add it, like antd
+     * `Select mode="tags"`. With `multiple` a pasted list is split into several
+     * values; on a single-value control it accepts one typed value the options
+     * do not offer — an id for a record the list has not loaded, say.
+     */
+    creatable?: boolean;
+    /**
+     * Shows the clear button once a value is chosen. Off for dropdowns that
+     * always keep one of their options, where clearing would blank a required
+     * field.
+     */
+    clearable?: boolean;
+};
+type SingleAutocompleteProps = BaseAutocompleteProps & {
+    multiple?: false;
+    value: string;
+    onChange: (value: string) => void;
+};
+type MultipleAutocompleteProps = BaseAutocompleteProps & {
+    multiple: true;
+    value: string[];
+    onChange: (value: string[]) => void;
+};
+type AutocompleteProps = SingleAutocompleteProps | MultipleAutocompleteProps;
+declare function Autocomplete(props: AutocompleteProps): React.JSX.Element;
+
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps };

package/dist/autocomplete.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+type AutocompleteOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type BaseAutocompleteProps = {
+    options: AutocompleteOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    emptyMessage?: string;
+    id?: string;
+    /**
+     * Accessible name for the combobox.
+     *
+     * `Field` renders its label as a `<span>`, so without this the control is
+     * announced as an unnamed combobox and cannot be queried by name — the
+     * filter toolbars work around it by counting comboboxes on the page.
+     */
+    ariaLabel?: string;
+    /**
+     * `compact` is the spreadsheet cell: no search icon, no min height, and a
+     * list wide enough to read a name. The closed control still shows the
+     * chosen label, and typing filters the list.
+     */
+    size?: "default" | "compact";
+    /**
+     * Type a value and press Enter (or paste a list) to add it, like antd
+     * `Select mode="tags"`. With `multiple` a pasted list is split into several
+     * values; on a single-value control it accepts one typed value the options
+     * do not offer — an id for a record the list has not loaded, say.
+     */
+    creatable?: boolean;
+    /**
+     * Shows the clear button once a value is chosen. Off for dropdowns that
+     * always keep one of their options, where clearing would blank a required
+     * field.
+     */
+    clearable?: boolean;
+};
+type SingleAutocompleteProps = BaseAutocompleteProps & {
+    multiple?: false;
+    value: string;
+    onChange: (value: string) => void;
+};
+type MultipleAutocompleteProps = BaseAutocompleteProps & {
+    multiple: true;
+    value: string[];
+    onChange: (value: string[]) => void;
+};
+type AutocompleteProps = SingleAutocompleteProps | MultipleAutocompleteProps;
+declare function Autocomplete(props: AutocompleteProps): React.JSX.Element;
+
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps };

package/dist/autocomplete.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Autocomplete
+} from "./chunk-PVK4WQJZ.js";
+import "./chunk-YSU4VWRD.js";
+import "./chunk-HBBOR43A.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Autocomplete
+};
+//# sourceMappingURL=autocomplete.js.map

package/dist/autocomplete.js.map

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

package/dist/badge.cjs

@@ -0,0 +1,89 @@
+"use strict";
+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/badge.tsx
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge,
+  badgeVariants: () => badgeVariants
+});
+module.exports = __toCommonJS(badge_exports);
+var React = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+
+// 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/badge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority.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"
+    }
+  }
+);
+var Badge = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ref,
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Badge.displayName = "Badge";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  badgeVariants
+});
+//# sourceMappingURL=badge.cjs.map

package/dist/badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge.tsx","../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The status pill every list panel was spelling out by hand.\n *\n * Variants are semantic rather than named after a colour, because the same\n * status means the same thing on every panel and should not have to be\n * re-decided per table — Deleted was `bg-rose-100 text-rose-800` in one place\n * and `text-rose-900` two files away.\n *\n * These stay light-on-dark-text in both themes on purpose. A pill is a small\n * block of colour whose whole job is to be picked out of a row of text, and\n * inverting it per theme made the same status read as two different states.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded font-medium whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        neutral: \"bg-muted text-muted-foreground\",\n        success: \"bg-success/15 text-success\",\n        warning: \"bg-warning/15 text-warning\",\n        danger: \"bg-destructive/15 text-destructive\",\n        info: \"bg-info/15 text-info\",\n      },\n      size: {\n        /** Inline chips — a category, a tenant, a permission. */\n        sm: \"px-1.5 py-0.5 text-xs\",\n        /** A row's status. */\n        md: \"px-2 py-0.5 text-xs\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface BadgeProps\n  extends\n    React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, size, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    />\n  ),\n);\n\nBadge.displayName = \"Badge\";\n\nexport { badgeVariants };\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;AAAA;AAAA,YAAuB;AACvB,sCAAuC;;;ACDvC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD4CI;AAhCJ,IAAM,oBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA;AAAA,QAEJ,IAAI;AAAA;AAAA,QAEJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAOO,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QACvC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,cAAc,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,MACxD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;","names":[]}

package/dist/badge.d.cts

@@ -0,0 +1,25 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * 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.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.d.ts

@@ -0,0 +1,25 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * 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.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,10 @@
+import {
+  Badge,
+  badgeVariants
+} from "./chunk-SQDV2AKJ.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

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

package/dist/breadcrumb.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/breadcrumb.tsx
+var breadcrumb_exports = {};
+__export(breadcrumb_exports, {
+  Breadcrumb: () => Breadcrumb
+});
+module.exports = __toCommonJS(breadcrumb_exports);
+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/breadcrumb.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Breadcrumb({ items, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "Breadcrumb", className: cn("text-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isInteractive = !isLast && (item.href || item.onClick);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "li",
+      {
+        className: "flex items-center gap-1.5",
+        children: [
+          index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.ChevronRight,
+            {
+              className: "text-muted-foreground/70 size-3.5 shrink-0",
+              "aria-hidden": true
+            }
+          ),
+          isInteractive ? item.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: item.href,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: cn(
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
+              ),
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            }
+          )
+        ]
+      },
+      `${item.label}-${index}`
+    );
+  }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb
+});
+//# sourceMappingURL=breadcrumb.cjs.map

package/dist/breadcrumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/breadcrumb.tsx","../src/utils.ts"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type BreadcrumbItem = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\ninterface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn(\"text-sm\", className)}>\n      <ol className=\"flex flex-wrap items-center gap-1.5\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const isInteractive = !isLast && (item.href || item.onClick);\n\n          return (\n            <li\n              key={`${item.label}-${index}`}\n              className=\"flex items-center gap-1.5\"\n            >\n              {index > 0 && (\n                <ChevronRight\n                  className=\"text-muted-foreground/70 size-3.5 shrink-0\"\n                  aria-hidden\n                />\n              )}\n              {isInteractive ? (\n                item.href ? (\n                  <a\n                    href={item.href}\n                    className=\"text-muted-foreground hover:text-foreground transition\"\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={item.onClick}\n                    className=\"text-muted-foreground hover:text-foreground transition\"\n                  >\n                    {item.label}\n                  </button>\n                )\n              ) : (\n                <span\n                  className={cn(\n                    isLast\n                      ? \"text-foreground font-medium\"\n                      : \"text-muted-foreground\",\n                  )}\n                  aria-current={isLast ? \"page\" : undefined}\n                >\n                  {item.label}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\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;AAAA,0BAA6B;;;ACA7B,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADoBY;AATL,SAAS,WAAW,EAAE,OAAO,UAAU,GAAoB;AAChE,SACE,4CAAC,SAAI,cAAW,cAAa,WAAW,GAAG,WAAW,SAAS,GAC7D,sDAAC,QAAG,WAAU,uCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UAAM,gBAAgB,CAAC,WAAW,KAAK,QAAQ,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAET;AAAA,kBAAQ,KACP;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAW;AAAA;AAAA,UACb;AAAA,UAED,gBACC,KAAK,OACH;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,KAAK;AAAA,cACX,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,KAAK;AAAA,cACd,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR,IAGF;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,SACI,gCACA;AAAA,cACN;AAAA,cACA,gBAAc,SAAS,SAAS;AAAA,cAE/B,eAAK;AAAA;AAAA,UACR;AAAA;AAAA;AAAA,MApCG,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,IAsC7B;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}

package/dist/breadcrumb.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare function Breadcrumb({ items, className }: BreadcrumbProps): React.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbItem };

package/dist/breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare function Breadcrumb({ items, className }: BreadcrumbProps): React.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbItem };

package/dist/breadcrumb.js

@@ -0,0 +1,8 @@
+import {
+  Breadcrumb
+} from "./chunk-JSJEEKR3.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/breadcrumb.js.map

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

package/dist/button.cjs

@@ -0,0 +1,143 @@
+"use strict";
+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/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});
+//# sourceMappingURL=button.cjs.map

package/dist/button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button.tsx","../src/spinner.tsx","../src/utils.ts"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,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,IAAAA,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;","names":["import_jsx_runtime"]}

package/dist/button.d.cts

@@ -0,0 +1,34 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "ghost" | "destructive" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+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;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };