@inshorts/glint-ui 0.5.4 → 0.6.0

package/dist/modal.d.cts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+/**
+ * Returns false during SSR and the first client render, then true once mounted.
+ * `useSyncExternalStore` is the React-recommended way to read client-only state
+ * without a setState-in-effect (which triggers cascading renders).
+ */
+declare function useHasMounted(): boolean;
+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;
+    children: React.ReactNode;
+    /**
+     * When false, Escape and backdrop clicks do not close the modal (e.g. while a
+     * save is in flight). Defaults to true.
+     */
+    dismissible?: boolean;
+    /** Use "alertdialog" for destructive confirmations. Defaults to "dialog". */
+    role?: "dialog" | "alertdialog";
+    /** Tailwind max-width class for the panel. Defaults to "max-w-md". */
+    panelClassName?: string;
+}
+/**
+ * Shared modal shell: renders a portal-backed, scroll-locked, Escape-dismissible
+ * overlay with a centered panel. Callers provide the panel body (heading, form,
+ * footer). Consolidates the boilerplate previously copied across every dialog.
+ */
+declare function Modal({ isOpen, labelledBy, describedBy, closeLabel, onClose, children, dismissible, role, panelClassName, }: ModalProps): React.ReactPortal | null;
+
+export { Modal, useHasMounted };

package/dist/modal.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+/**
+ * Returns false during SSR and the first client render, then true once mounted.
+ * `useSyncExternalStore` is the React-recommended way to read client-only state
+ * without a setState-in-effect (which triggers cascading renders).
+ */
+declare function useHasMounted(): boolean;
+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;
+    children: React.ReactNode;
+    /**
+     * When false, Escape and backdrop clicks do not close the modal (e.g. while a
+     * save is in flight). Defaults to true.
+     */
+    dismissible?: boolean;
+    /** Use "alertdialog" for destructive confirmations. Defaults to "dialog". */
+    role?: "dialog" | "alertdialog";
+    /** Tailwind max-width class for the panel. Defaults to "max-w-md". */
+    panelClassName?: string;
+}
+/**
+ * Shared modal shell: renders a portal-backed, scroll-locked, Escape-dismissible
+ * overlay with a centered panel. Callers provide the panel body (heading, form,
+ * footer). Consolidates the boilerplate previously copied across every dialog.
+ */
+declare function Modal({ isOpen, labelledBy, describedBy, closeLabel, onClose, children, dismissible, role, panelClassName, }: ModalProps): React.ReactPortal | null;
+
+export { Modal, useHasMounted };

package/dist/modal.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Modal,
+  useHasMounted
+} from "./chunk-YSU4VWRD.js";
+import "./chunk-HBBOR43A.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Modal,
+  useHasMounted
+};
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

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

package/dist/page-header.cjs

@@ -0,0 +1,78 @@
+"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/page-header.tsx
+var page_header_exports = {};
+__export(page_header_exports, {
+  PageHeader: () => PageHeader
+});
+module.exports = __toCommonJS(page_header_exports);
+
+// 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/page-header.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  className
+}) {
+  const heading = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+    eyebrow,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "h1",
+      {
+        className: cn(
+          "text-2xl font-semibold tracking-tight",
+          eyebrow != null && "mt-1"
+        ),
+        children: title
+      }
+    ),
+    description != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1 text-sm", children: description }) : null
+  ] });
+  if (!actions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: heading });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-3",
+        className
+      ),
+      children: [
+        heading,
+        actions
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageHeader
+});
+//# sourceMappingURL=page-header.cjs.map

package/dist/page-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/page-header.tsx","../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The title block every panel opens with.\n *\n * Twenty Managers wrote the same `<h1>` and subtitle by hand, differing only in\n * whether the row said `gap-3` or `gap-x-4 gap-y-2` and whether the inner block\n * carried `min-w-0` — differences nobody chose, which is what made them worth\n * removing.\n *\n * `description` takes a node rather than a string because several panels put a\n * `<code>` in theirs, naming the Firebase field they write. That is the useful\n * kind of subtitle and it should not have to opt out of the shared component to\n * stay.\n *\n * `min-w-0` is not optional here. Without it a long title refuses to shrink and\n * pushes the actions off the row instead of wrapping — which is the bug the\n * three panels that set it had already hit, and the seven that did not had not\n * yet.\n */\nexport interface PageHeaderProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Sits above the title: a breadcrumb, or the back link the filter editors\n   * use. Four panels had one, each spacing it by hand.\n   */\n  eyebrow?: React.ReactNode;\n  /** Buttons belonging to the page, laid out at the end of the title row. */\n  actions?: React.ReactNode;\n  className?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  eyebrow,\n  actions,\n  className,\n}: PageHeaderProps) {\n  const heading = (\n    <div className=\"min-w-0\">\n      {eyebrow}\n      <h1\n        className={cn(\n          \"text-2xl font-semibold tracking-tight\",\n          eyebrow != null && \"mt-1\",\n        )}\n      >\n        {title}\n      </h1>\n      {description != null ? (\n        <p className=\"text-muted-foreground mt-1 text-sm\">{description}</p>\n      ) : null}\n    </div>\n  );\n\n  if (!actions) {\n    return <div className={className}>{heading}</div>;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-3\",\n        className,\n      )}\n    >\n      {heading}\n      {actions}\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;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADsCI;AARG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,UACJ,6CAAC,SAAI,WAAU,WACZ;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,QAAQ;AAAA,QACrB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACC,eAAe,OACd,4CAAC,OAAE,WAAU,sCAAsC,uBAAY,IAC7D;AAAA,KACN;AAGF,MAAI,CAAC,SAAS;AACZ,WAAO,4CAAC,SAAI,WAAuB,mBAAQ;AAAA,EAC7C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/page-header.d.cts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+/**
+ * The title block every panel opens with.
+ *
+ * Twenty Managers wrote the same `<h1>` and subtitle by hand, differing only in
+ * whether the row said `gap-3` or `gap-x-4 gap-y-2` and whether the inner block
+ * carried `min-w-0` — differences nobody chose, which is what made them worth
+ * removing.
+ *
+ * `description` takes a node rather than a string because several panels put a
+ * `<code>` in theirs, naming the Firebase field they write. That is the useful
+ * kind of subtitle and it should not have to opt out of the shared component to
+ * stay.
+ *
+ * `min-w-0` is not optional here. Without it a long title refuses to shrink and
+ * pushes the actions off the row instead of wrapping — which is the bug the
+ * three panels that set it had already hit, and the seven that did not had not
+ * yet.
+ */
+interface PageHeaderProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * Sits above the title: a breadcrumb, or the back link the filter editors
+     * use. Four panels had one, each spacing it by hand.
+     */
+    eyebrow?: React.ReactNode;
+    /** Buttons belonging to the page, laid out at the end of the title row. */
+    actions?: React.ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, description, eyebrow, actions, className, }: PageHeaderProps): React.JSX.Element;
+
+export { PageHeader, type PageHeaderProps };

package/dist/page-header.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+/**
+ * The title block every panel opens with.
+ *
+ * Twenty Managers wrote the same `<h1>` and subtitle by hand, differing only in
+ * whether the row said `gap-3` or `gap-x-4 gap-y-2` and whether the inner block
+ * carried `min-w-0` — differences nobody chose, which is what made them worth
+ * removing.
+ *
+ * `description` takes a node rather than a string because several panels put a
+ * `<code>` in theirs, naming the Firebase field they write. That is the useful
+ * kind of subtitle and it should not have to opt out of the shared component to
+ * stay.
+ *
+ * `min-w-0` is not optional here. Without it a long title refuses to shrink and
+ * pushes the actions off the row instead of wrapping — which is the bug the
+ * three panels that set it had already hit, and the seven that did not had not
+ * yet.
+ */
+interface PageHeaderProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * Sits above the title: a breadcrumb, or the back link the filter editors
+     * use. Four panels had one, each spacing it by hand.
+     */
+    eyebrow?: React.ReactNode;
+    /** Buttons belonging to the page, laid out at the end of the title row. */
+    actions?: React.ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, description, eyebrow, actions, className, }: PageHeaderProps): React.JSX.Element;
+
+export { PageHeader, type PageHeaderProps };

package/dist/page-header.js

@@ -0,0 +1,8 @@
+import {
+  PageHeader
+} from "./chunk-RUPL2H6V.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  PageHeader
+};
+//# sourceMappingURL=page-header.js.map

package/dist/page-header.js.map

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

package/dist/pagination.cjs

@@ -0,0 +1,237 @@
+"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/pagination.tsx
+var pagination_exports = {};
+__export(pagination_exports, {
+  Pagination: () => Pagination
+});
+module.exports = __toCommonJS(pagination_exports);
+var import_lucide_react2 = require("lucide-react");
+var React2 = __toESM(require("react"), 1);
+
+// 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/pagination.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  loading = false,
+  showPageInfo = true
+}) {
+  const visiblePages = React2.useMemo(() => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
+    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
+      range.push(i);
+    }
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, "...");
+    } else {
+      rangeWithDots.push(1);
+    }
+    rangeWithDots.push(...range);
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push("...", totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+    return rangeWithDots;
+  }, [currentPage, totalPages]);
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+    showPageInfo ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-muted-foreground order-2 text-sm sm:order-1", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "order-1 flex items-center space-x-1 sm:order-2 sm:space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: currentPage <= 1 || loading,
+          className: "h-8 min-w-8 px-2",
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex max-w-[200px] items-center space-x-1 overflow-x-auto sm:max-w-none", children: visiblePages.map(
+        (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "flex h-8 w-8 shrink-0 items-center justify-center",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.MoreHorizontal, { className: "h-4 w-4" })
+          },
+          `dots-${index}`
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Button,
+          {
+            variant: page === currentPage ? "default" : "outline",
+            size: "sm",
+            onClick: () => onPageChange(page),
+            disabled: loading,
+            className: "h-8 min-w-8 shrink-0 px-2",
+            "aria-current": page === currentPage ? "page" : void 0,
+            children: page
+          },
+          page
+        )
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: currentPage >= totalPages || loading,
+          className: "h-8 min-w-8 px-2",
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pagination
+});
+//# sourceMappingURL=pagination.cjs.map

package/dist/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pagination.tsx","../src/button.tsx","../src/spinner.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"./button\";\n\nexport type PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  loading?: boolean;\n  showPageInfo?: boolean;\n};\n\n/**\n * Numbered pager for list panels. Hides itself when there is only one page.\n */\nexport function Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  loading = false,\n  showPageInfo = true,\n}: PaginationProps) {\n  const visiblePages = React.useMemo(() => {\n    const delta = 2;\n    const range: number[] = [];\n    const rangeWithDots: Array<number | \"...\"> = [];\n\n    for (\n      let i = Math.max(2, currentPage - delta);\n      i <= Math.min(totalPages - 1, currentPage + delta);\n      i++\n    ) {\n      range.push(i);\n    }\n\n    if (currentPage - delta > 2) {\n      rangeWithDots.push(1, \"...\");\n    } else {\n      rangeWithDots.push(1);\n    }\n\n    rangeWithDots.push(...range);\n\n    if (currentPage + delta < totalPages - 1) {\n      rangeWithDots.push(\"...\", totalPages);\n    } else if (totalPages > 1) {\n      rangeWithDots.push(totalPages);\n    }\n\n    return rangeWithDots;\n  }, [currentPage, totalPages]);\n\n  if (totalPages <= 1) return null;\n\n  return (\n    <div className=\"flex flex-col items-center justify-between gap-4 sm:flex-row\">\n      {showPageInfo ? (\n        <div className=\"text-muted-foreground order-2 text-sm sm:order-1\">\n          Page {currentPage} of {totalPages}\n        </div>\n      ) : null}\n\n      <div className=\"order-1 flex items-center space-x-1 sm:order-2 sm:space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage <= 1 || loading}\n          className=\"h-8 min-w-8 px-2\"\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n\n        <div className=\"flex max-w-[200px] items-center space-x-1 overflow-x-auto sm:max-w-none\">\n          {visiblePages.map((page, index) =>\n            page === \"...\" ? (\n              <div\n                key={`dots-${index}`}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center\"\n              >\n                <MoreHorizontal className=\"h-4 w-4\" />\n              </div>\n            ) : (\n              <Button\n                key={page}\n                variant={page === currentPage ? \"default\" : \"outline\"}\n                size=\"sm\"\n                onClick={() => onPageChange(page)}\n                disabled={loading}\n                className=\"h-8 min-w-8 shrink-0 px-2\"\n                aria-current={page === currentPage ? \"page\" : undefined}\n              >\n                {page}\n              </Button>\n            ),\n          )}\n        </div>\n\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage >= totalPages || loading}\n          className=\"h-8 min-w-8 px-2\"\n          aria-label=\"Next page\"\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\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"],"mappings":"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","names":["import_lucide_react","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/pagination.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    loading?: boolean;
+    showPageInfo?: boolean;
+};
+/**
+ * Numbered pager for list panels. Hides itself when there is only one page.
+ */
+declare function Pagination({ currentPage, totalPages, onPageChange, loading, showPageInfo, }: PaginationProps): React.JSX.Element | null;
+
+export { Pagination, type PaginationProps };

package/dist/pagination.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    loading?: boolean;
+    showPageInfo?: boolean;
+};
+/**
+ * Numbered pager for list panels. Hides itself when there is only one page.
+ */
+declare function Pagination({ currentPage, totalPages, onPageChange, loading, showPageInfo, }: PaginationProps): React.JSX.Element | null;
+
+export { Pagination, type PaginationProps };

package/dist/pagination.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Pagination
+} from "./chunk-PUTC52SI.js";
+import "./chunk-KR3BCFP7.js";
+import "./chunk-UE7JY7VR.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Pagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

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

package/dist/panel-brand-mark.cjs

@@ -0,0 +1,59 @@
+"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/panel-brand-mark.tsx
+var panel_brand_mark_exports = {};
+__export(panel_brand_mark_exports, {
+  PanelBrandMark: () => PanelBrandMark
+});
+module.exports = __toCommonJS(panel_brand_mark_exports);
+
+// 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/panel-brand-mark.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PanelBrandMark({
+  children,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PanelBrandMark
+});
+//# sourceMappingURL=panel-brand-mark.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-brand-mark.tsx","../src/utils.ts"],"sourcesContent":["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","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;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADeI;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;","names":[]}

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

@@ -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 };