@inshorts/glint-ui 0.5.4 → 0.6.0

package/dist/dialogLayer.cjs

@@ -0,0 +1,121 @@
+"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/dialogLayer.ts
+var dialogLayer_exports = {};
+__export(dialogLayer_exports, {
+  useDialogLayer: () => useDialogLayer
+});
+module.exports = __toCommonJS(dialogLayer_exports);
+var React = __toESM(require("react"), 1);
+var layers = [];
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(element) {
+  if (element.closest("[hidden]")) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  return typeof element.checkVisibility === "function" ? element.checkVisibility() : true;
+}
+function focusableWithin(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    isVisible
+  );
+}
+function useDialogLayer({
+  active,
+  containerRef,
+  onEscape
+}) {
+  const escapeRef = React.useRef(onEscape);
+  React.useEffect(() => {
+    escapeRef.current = onEscape;
+  });
+  React.useEffect(() => {
+    if (!active) return;
+    const layer = /* @__PURE__ */ Symbol("dialog-layer");
+    layers.push(layer);
+    const isTopLayer = () => layers[layers.length - 1] === layer;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const container = containerRef.current;
+    if (container && !container.contains(document.activeElement)) {
+      const [first] = focusableWithin(container);
+      (container.hasAttribute("tabindex") ? container : first)?.focus();
+    }
+    function handleKeyDown(event) {
+      if (!isTopLayer()) return;
+      if (event.key === "Escape") {
+        escapeRef.current?.();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const panel = containerRef.current;
+      if (!panel) return;
+      const items = focusableWithin(panel);
+      if (items.length === 0) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active2 = document.activeElement;
+      const outside = !panel.contains(active2);
+      if (event.shiftKey && (active2 === first || outside)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (active2 === last || outside)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = previousOverflow;
+      const index = layers.indexOf(layer);
+      if (index !== -1) layers.splice(index, 1);
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
+  }, [active, containerRef]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDialogLayer
+});
+//# sourceMappingURL=dialogLayer.cjs.map

package/dist/dialogLayer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialogLayer.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * The keyboard and focus behaviour every dialog needs, in one place.\n *\n * `Modal` and `SideDrawer` each had a copy of the scroll lock and an Escape\n * handler, and neither did anything about focus: opening a dialog left focus\n * on the button behind it, Tab walked the page underneath — through the\n * full-screen backdrop button, among other things — and closing left focus\n * wherever it had wandered. That is the whole keyboard story for thirty\n * dialogs, so it is fixed once here rather than thirty times.\n */\n\n/**\n * Open dialogs, innermost last.\n *\n * Nesting is real here — \"Create audience group\" opens on top of \"Send\n * notification\" — and without an ordering both would answer the same Escape\n * and fight over the same Tab. Only the top layer acts.\n */\nconst layers: symbol[] = [];\n\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(\",\");\n\n/**\n * Deliberately not `offsetParent` or `getClientRects`: the first is null for\n * anything `position: fixed`, which a dialog panel usually is, and the second\n * is empty for *everything* under a test renderer that does no layout — which\n * would collapse the trap to \"no focusable elements\" in every test.\n */\nfunction isVisible(element: HTMLElement): boolean {\n  if (element.closest(\"[hidden]\")) return false;\n  if (element.getAttribute(\"aria-hidden\") === \"true\") return false;\n  return typeof element.checkVisibility === \"function\"\n    ? element.checkVisibility()\n    : true;\n}\n\nfunction focusableWithin(container: HTMLElement): HTMLElement[] {\n  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    isVisible,\n  );\n}\n\nexport function useDialogLayer({\n  active,\n  containerRef,\n  onEscape,\n}: {\n  active: boolean;\n  /** The panel. Focus is moved into it and kept inside it. */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Called on Escape, only while this is the top layer. Omit to ignore it. */\n  onEscape?: () => void;\n}): void {\n  // Read through a ref so a caller passing a fresh closure every render does\n  // not tear the listener down and rebuild it on every keystroke.\n  const escapeRef = React.useRef(onEscape);\n  React.useEffect(() => {\n    escapeRef.current = onEscape;\n  });\n\n  React.useEffect(() => {\n    if (!active) return;\n\n    const layer = Symbol(\"dialog-layer\");\n    layers.push(layer);\n    const isTopLayer = () => layers[layers.length - 1] === layer;\n\n    const previouslyFocused =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : null;\n\n    const container = containerRef.current;\n    // Something inside may have claimed focus already — an `autoFocus` input —\n    // and that choice is better than any this could make.\n    if (container && !container.contains(document.activeElement)) {\n      const [first] = focusableWithin(container);\n      // The panel itself, not its first control: the first control is a Delete\n      // button often enough that focusing it would put a destructive action\n      // one Enter away from an accidental keypress.\n      (container.hasAttribute(\"tabindex\") ? container : first)?.focus();\n    }\n\n    function handleKeyDown(event: KeyboardEvent) {\n      if (!isTopLayer()) return;\n\n      if (event.key === \"Escape\") {\n        escapeRef.current?.();\n        return;\n      }\n\n      if (event.key !== \"Tab\") return;\n      const panel = containerRef.current;\n      if (!panel) return;\n\n      const items = focusableWithin(panel);\n      if (items.length === 0) {\n        event.preventDefault();\n        panel.focus();\n        return;\n      }\n\n      const first = items[0]!;\n      const last = items[items.length - 1]!;\n      const active = document.activeElement;\n      const outside = !panel.contains(active);\n\n      if (event.shiftKey && (active === first || outside)) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && (active === last || outside)) {\n        event.preventDefault();\n        first.focus();\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = previousOverflow;\n      const index = layers.indexOf(layer);\n      if (index !== -1) layers.splice(index, 1);\n      // Back where it came from, so closing a dialog opened by keyboard does\n      // not drop the caret at the top of the document.\n      if (previouslyFocused?.isConnected) previouslyFocused.focus();\n    };\n  }, [active, containerRef]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AAoBvB,IAAM,SAAmB,CAAC;AAE1B,IAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAQV,SAAS,UAAU,SAA+B;AAChD,MAAI,QAAQ,QAAQ,UAAU,EAAG,QAAO;AACxC,MAAI,QAAQ,aAAa,aAAa,MAAM,OAAQ,QAAO;AAC3D,SAAO,OAAO,QAAQ,oBAAoB,aACtC,QAAQ,gBAAgB,IACxB;AACN;AAEA,SAAS,gBAAgB,WAAuC;AAC9D,SAAO,MAAM,KAAK,UAAU,iBAA8B,SAAS,CAAC,EAAE;AAAA,IACpE;AAAA,EACF;AACF;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAMS;AAGP,QAAM,YAAkB,aAAO,QAAQ;AACvC,EAAM,gBAAU,MAAM;AACpB,cAAU,UAAU;AAAA,EACtB,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AAEb,UAAM,QAAQ,uBAAO,cAAc;AACnC,WAAO,KAAK,KAAK;AACjB,UAAM,aAAa,MAAM,OAAO,OAAO,SAAS,CAAC,MAAM;AAEvD,UAAM,oBACJ,SAAS,yBAAyB,cAC9B,SAAS,gBACT;AAEN,UAAM,YAAY,aAAa;AAG/B,QAAI,aAAa,CAAC,UAAU,SAAS,SAAS,aAAa,GAAG;AAC5D,YAAM,CAAC,KAAK,IAAI,gBAAgB,SAAS;AAIzC,OAAC,UAAU,aAAa,UAAU,IAAI,YAAY,QAAQ,MAAM;AAAA,IAClE;AAEA,aAAS,cAAc,OAAsB;AAC3C,UAAI,CAAC,WAAW,EAAG;AAEnB,UAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAU,UAAU;AACpB;AAAA,MACF;AAEA,UAAI,MAAM,QAAQ,MAAO;AACzB,YAAM,QAAQ,aAAa;AAC3B,UAAI,CAAC,MAAO;AAEZ,YAAM,QAAQ,gBAAgB,KAAK;AACnC,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,eAAe;AACrB,cAAM,MAAM;AACZ;AAAA,MACF;AAEA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAMA,UAAS,SAAS;AACxB,YAAM,UAAU,CAAC,MAAM,SAASA,OAAM;AAEtC,UAAI,MAAM,aAAaA,YAAW,SAAS,UAAU;AACnD,cAAM,eAAe;AACrB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,MAAM,aAAaA,YAAW,QAAQ,UAAU;AAC1D,cAAM,eAAe;AACrB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,UAAM,mBAAmB,SAAS,KAAK,MAAM;AAC7C,aAAS,KAAK,MAAM,WAAW;AAE/B,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AACrD,eAAS,KAAK,MAAM,WAAW;AAC/B,YAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,UAAI,UAAU,GAAI,QAAO,OAAO,OAAO,CAAC;AAGxC,UAAI,mBAAmB,YAAa,mBAAkB,MAAM;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAC3B;","names":["active"]}

package/dist/dialogLayer.d.cts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare function useDialogLayer({ active, containerRef, onEscape, }: {
+    active: boolean;
+    /** The panel. Focus is moved into it and kept inside it. */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Called on Escape, only while this is the top layer. Omit to ignore it. */
+    onEscape?: () => void;
+}): void;
+
+export { useDialogLayer };

package/dist/dialogLayer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare function useDialogLayer({ active, containerRef, onEscape, }: {
+    active: boolean;
+    /** The panel. Focus is moved into it and kept inside it. */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Called on Escape, only while this is the top layer. Omit to ignore it. */
+    onEscape?: () => void;
+}): void;
+
+export { useDialogLayer };

package/dist/dialogLayer.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useDialogLayer
+} from "./chunk-HBBOR43A.js";
+export {
+  useDialogLayer
+};
+//# sourceMappingURL=dialogLayer.js.map

package/dist/dialogLayer.js.map

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

package/dist/feature-access-gate.cjs

@@ -0,0 +1,160 @@
+"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/feature-access-gate.tsx
+var feature_access_gate_exports = {};
+__export(feature_access_gate_exports, {
+  FeatureAccessGate: () => FeatureAccessGate
+});
+module.exports = __toCommonJS(feature_access_gate_exports);
+
+// src/alert.tsx
+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/alert.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var alertVariants = (0, import_class_variance_authority.cva)("rounded-lg border px-3 py-2 text-sm", {
+  variants: {
+    variant: {
+      danger: "border-destructive/30 bg-destructive/5 text-destructive",
+      warning: "border-warning/30 bg-warning/5 text-warning",
+      success: "border-success/30 bg-success/5 text-success",
+      info: "border-info/30 bg-info/5 text-info",
+      /**
+       * The quiet state of a banner that also has loud ones — "no default
+       * campaign set" next to "this is the default". Without it those callers
+       * keep a ternary of raw class strings and the shared component only
+       * covers half of what they draw.
+       */
+      neutral: "border-border bg-muted/40 text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    // Failure is what a banner almost always reports here, and defaulting to
+    // it means the noisy case cannot be forgotten.
+    variant: "danger"
+  }
+});
+var Alert = React.forwardRef(
+  ({ className, variant, action, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      role: variant === "danger" || variant == null ? "alert" : "status",
+      className: cn(
+        alertVariants({ variant }),
+        action && "flex flex-wrap items-center justify-between gap-3",
+        className
+      ),
+      ...props,
+      children: [
+        action ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }) : children,
+        action
+      ]
+    }
+  )
+);
+Alert.displayName = "Alert";
+
+// src/spinner.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = 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_runtime2.jsx)(
+    import_lucide_react.Loader2,
+    {
+      "aria-hidden": true,
+      className: cn("animate-spin", SIZES[size], className),
+      ...props
+    }
+  );
+}
+
+// src/state-panel.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function StatePanel({
+  loading,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      role: loading ? "status" : void 0,
+      "aria-live": loading ? "polite" : void 0,
+      className: cn(
+        "border-border bg-background/80 text-muted-foreground rounded-lg border px-4 py-6 text-center text-sm",
+        loading && "flex items-center justify-center gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "md" }) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/feature-access-gate.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function FeatureAccessGate({
+  isLoading,
+  allowed,
+  deniedMessage,
+  children
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StatePanel, { loading: true, className: "p-6", children: "Checking permissions\u2026" });
+  }
+  if (!allowed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Alert, { children: deniedMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FeatureAccessGate
+});
+//# sourceMappingURL=feature-access-gate.cjs.map

package/dist/feature-access-gate.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feature-access-gate.tsx","../src/alert.tsx","../src/utils.ts","../src/spinner.tsx","../src/state-panel.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { Alert } from \"./alert\";\nimport { StatePanel } from \"./state-panel\";\n\ntype FeatureAccessGateProps = {\n  isLoading?: boolean;\n  allowed: boolean;\n  deniedMessage: React.ReactNode;\n  children: React.ReactNode;\n};\n\n/**\n * Shared loading / denied shell for feature Managers (showcase, headers, …).\n */\nexport function FeatureAccessGate({\n  isLoading,\n  allowed,\n  deniedMessage,\n  children,\n}: FeatureAccessGateProps) {\n  if (isLoading) {\n    return (\n      <StatePanel loading className=\"p-6\">\n        Checking permissions…\n      </StatePanel>\n    );\n  }\n\n  if (!allowed) {\n    // `Alert`, not a hand-rolled banner: this is the denial surface for\n    // seventeen panels, and it was the one copy the Alert migration missed —\n    // so being refused a panel announced nothing to a screen reader.\n    return <Alert>{deniedMessage}</Alert>;\n  }\n\n  return <>{children}</>;\n}\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The inline message banner — a failed load, a warning above a form, a note.\n *\n * This was the most duplicated markup in the panel: thirty blocks across\n * twenty-eight files, spelled seven different ways. `px-3 py-2` in most places\n * and `px-4 py-3` in others, `text-rose-700` here and `text-destructive`\n * there — all meaning \"something went wrong\".\n *\n * `role` is derived from the variant rather than left to callers. An error a\n * user needs to act on should interrupt a screen reader; a note should not.\n * Almost none of the hand-rolled copies set either.\n */\nconst alertVariants = cva(\"rounded-lg border px-3 py-2 text-sm\", {\n  variants: {\n    variant: {\n      danger: \"border-destructive/30 bg-destructive/5 text-destructive\",\n      warning: \"border-warning/30 bg-warning/5 text-warning\",\n      success: \"border-success/30 bg-success/5 text-success\",\n      info: \"border-info/30 bg-info/5 text-info\",\n      /**\n       * The quiet state of a banner that also has loud ones — \"no default\n       * campaign set\" next to \"this is the default\". Without it those callers\n       * keep a ternary of raw class strings and the shared component only\n       * covers half of what they draw.\n       */\n      neutral: \"border-border bg-muted/40 text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    // Failure is what a banner almost always reports here, and defaulting to\n    // it means the noisy case cannot be forgotten.\n    variant: \"danger\",\n  },\n});\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /**\n   * A control belonging to the message, such as Retry. Given one, the banner\n   * lays out as a row and keeps the action at its end.\n   */\n  action?: React.ReactNode;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, action, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      role={variant === \"danger\" || variant == null ? \"alert\" : \"status\"}\n      className={cn(\n        alertVariants({ variant }),\n        action && \"flex flex-wrap items-center justify-between gap-3\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Wrapped so the action sits opposite the text rather than being\n          pushed around by whatever the caller passed as children. */}\n      {action ? <span>{children}</span> : children}\n      {action}\n    </div>\n  ),\n);\n\nAlert.displayName = \"Alert\";\n\nexport { alertVariants };\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\";\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 * as React from \"react\";\n\nimport { Spinner } from \"./spinner\";\nimport { cn } from \"./utils\";\n\n/**\n * The bordered block a list shows instead of rows: loading, or nothing found.\n *\n * Fourteen copies of the same\n * `border-border bg-background/80 … rounded-lg border px-4 py-6 text-center`\n * across the panels, each with its own wording — \"Loading users…\", \"Loading\n * taxonomy…\", \"Loading showcases…\". The wording is worth keeping (it says what\n * is loading), the markup is not.\n *\n * `loading` adds two things the hand-rolled versions did not have: a spinner,\n * so a slow panel does not look like an empty one, and `role=\"status\"` with\n * `aria-live=\"polite\"`, so a screen reader is told the list arrived instead of\n * silently finding rows on the next tab press.\n */\nexport interface StatePanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Shows a spinner and announces politely. */\n  loading?: boolean;\n}\n\nexport function StatePanel({\n  loading,\n  className,\n  children,\n  ...props\n}: StatePanelProps) {\n  return (\n    <div\n      role={loading ? \"status\" : undefined}\n      aria-live={loading ? \"polite\" : undefined}\n      className={cn(\n        \"border-border bg-background/80 text-muted-foreground rounded-lg border px-4 py-6 text-center text-sm\",\n        loading && \"flex items-center justify-center gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? <Spinner size=\"md\" /> : null}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,sCAAuC;;;ACDvC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADgDI;AApCJ,IAAM,oBAAgB,qCAAI,uCAAuC;AAAA,EAC/D,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAON,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA;AAAA;AAAA,IAGf,SAAS;AAAA,EACX;AACF,CAAC;AAaM,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,SAAS,QAAQ,UAAU,GAAG,MAAM,GAAG,QACnD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,YAAY,YAAY,WAAW,OAAO,UAAU;AAAA,MAC1D,WAAW;AAAA,QACT,cAAc,EAAE,QAAQ,CAAC;AAAA,QACzB,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAIH;AAAA,iBAAS,4CAAC,UAAM,UAAS,IAAU;AAAA,QACnC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,cAAc;;;AEtEpB,0BAAwB;AA8BpB,IAAAA,sBAAA;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;;;ACNI,IAAAC,sBAAA;AAPG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,WAAW;AAAA,MAC3B,aAAW,UAAU,WAAW;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,kBAAU,6CAAC,WAAQ,MAAK,MAAK,IAAK;AAAA,QAClC;AAAA;AAAA;AAAA,EACH;AAEJ;;;AJtBM,IAAAC,sBAAA;AARC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,WAAW;AACb,WACE,6CAAC,cAAW,SAAO,MAAC,WAAU,OAAM,wCAEpC;AAAA,EAEJ;AAEA,MAAI,CAAC,SAAS;AAIZ,WAAO,6CAAC,SAAO,yBAAc;AAAA,EAC/B;AAEA,SAAO,6EAAG,UAAS;AACrB;","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/feature-access-gate.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+type FeatureAccessGateProps = {
+    isLoading?: boolean;
+    allowed: boolean;
+    deniedMessage: React.ReactNode;
+    children: React.ReactNode;
+};
+/**
+ * Shared loading / denied shell for feature Managers (showcase, headers, …).
+ */
+declare function FeatureAccessGate({ isLoading, allowed, deniedMessage, children, }: FeatureAccessGateProps): React.JSX.Element;
+
+export { FeatureAccessGate };

package/dist/feature-access-gate.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+type FeatureAccessGateProps = {
+    isLoading?: boolean;
+    allowed: boolean;
+    deniedMessage: React.ReactNode;
+    children: React.ReactNode;
+};
+/**
+ * Shared loading / denied shell for feature Managers (showcase, headers, …).
+ */
+declare function FeatureAccessGate({ isLoading, allowed, deniedMessage, children, }: FeatureAccessGateProps): React.JSX.Element;
+
+export { FeatureAccessGate };

package/dist/feature-access-gate.js

@@ -0,0 +1,11 @@
+import {
+  FeatureAccessGate
+} from "./chunk-S7PVZAPL.js";
+import "./chunk-G4ZQUSAJ.js";
+import "./chunk-ZP252OJZ.js";
+import "./chunk-UE7JY7VR.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  FeatureAccessGate
+};
+//# sourceMappingURL=feature-access-gate.js.map

package/dist/feature-access-gate.js.map

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

package/dist/field.cjs

@@ -0,0 +1,58 @@
+"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/field.tsx
+var field_exports = {};
+__export(field_exports, {
+  Field: () => Field
+});
+module.exports = __toCommonJS(field_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/field.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Field({
+  label,
+  required,
+  htmlFor,
+  as = "div",
+  className,
+  children
+}) {
+  const Wrapper = as;
+  const labelNode = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    label,
+    required ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-destructive ml-0.5", "aria-hidden": "true", children: "*" }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { className: cn("space-y-1 text-sm", className), children: [
+    htmlFor && as === "div" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor, className: "text-muted-foreground", children: labelNode }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: labelNode }),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Field
+});
+//# sourceMappingURL=field.cjs.map

package/dist/field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field.tsx","../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\ninterface FieldProps {\n  label: React.ReactNode;\n  required?: boolean;\n  /**\n   * Associates the label with a control via `htmlFor` / `id`. Prefer this for\n   * native inputs rendered as siblings (not wrapped). For composite controls\n   * (Autocomplete), omit and use `as=\"label\"` wrapping or an `aria-label`.\n   */\n  htmlFor?: string;\n  /**\n   * Render as a `<label>` (wraps a native control so clicking the text focuses\n   * it) or a `<div>` (for composite controls like Autocomplete that manage\n   * their own focus / render in a portal). Defaults to `div`.\n   */\n  as?: \"label\" | \"div\";\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function Field({\n  label,\n  required,\n  htmlFor,\n  as = \"div\",\n  className,\n  children,\n}: FieldProps) {\n  const Wrapper = as;\n  const labelNode = (\n    <>\n      {label}\n      {required ? (\n        <span className=\"text-destructive ml-0.5\" aria-hidden=\"true\">\n          *\n        </span>\n      ) : null}\n    </>\n  );\n\n  return (\n    <Wrapper className={cn(\"space-y-1 text-sm\", className)}>\n      {htmlFor && as === \"div\" ? (\n        <label htmlFor={htmlFor} className=\"text-muted-foreground\">\n          {labelNode}\n        </label>\n      ) : (\n        <span className=\"text-muted-foreground\">{labelNode}</span>\n      )}\n      {children}\n    </Wrapper>\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;;;AD4BI;AAVG,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA;AACF,GAAe;AACb,QAAM,UAAU;AAChB,QAAM,YACJ,4EACG;AAAA;AAAA,IACA,WACC,4CAAC,UAAK,WAAU,2BAA0B,eAAY,QAAO,eAE7D,IACE;AAAA,KACN;AAGF,SACE,6CAAC,WAAQ,WAAW,GAAG,qBAAqB,SAAS,GAClD;AAAA,eAAW,OAAO,QACjB,4CAAC,WAAM,SAAkB,WAAU,yBAChC,qBACH,IAEA,4CAAC,UAAK,WAAU,yBAAyB,qBAAU;AAAA,IAEpD;AAAA,KACH;AAEJ;","names":[]}

package/dist/field.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface FieldProps {
+    label: React.ReactNode;
+    required?: boolean;
+    /**
+     * Associates the label with a control via `htmlFor` / `id`. Prefer this for
+     * native inputs rendered as siblings (not wrapped). For composite controls
+     * (Autocomplete), omit and use `as="label"` wrapping or an `aria-label`.
+     */
+    htmlFor?: string;
+    /**
+     * Render as a `<label>` (wraps a native control so clicking the text focuses
+     * it) or a `<div>` (for composite controls like Autocomplete that manage
+     * their own focus / render in a portal). Defaults to `div`.
+     */
+    as?: "label" | "div";
+    className?: string;
+    children: React.ReactNode;
+}
+declare function Field({ label, required, htmlFor, as, className, children, }: FieldProps): React.JSX.Element;
+
+export { Field };

package/dist/field.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface FieldProps {
+    label: React.ReactNode;
+    required?: boolean;
+    /**
+     * Associates the label with a control via `htmlFor` / `id`. Prefer this for
+     * native inputs rendered as siblings (not wrapped). For composite controls
+     * (Autocomplete), omit and use `as="label"` wrapping or an `aria-label`.
+     */
+    htmlFor?: string;
+    /**
+     * Render as a `<label>` (wraps a native control so clicking the text focuses
+     * it) or a `<div>` (for composite controls like Autocomplete that manage
+     * their own focus / render in a portal). Defaults to `div`.
+     */
+    as?: "label" | "div";
+    className?: string;
+    children: React.ReactNode;
+}
+declare function Field({ label, required, htmlFor, as, className, children, }: FieldProps): React.JSX.Element;
+
+export { Field };

package/dist/field.js

@@ -0,0 +1,8 @@
+import {
+  Field
+} from "./chunk-67ACNS42.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Field
+};
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

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