@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/index.js

@@ -0,0 +1,232 @@
+"use client";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-UC3ZIQPE.js";
+import {
+  TabPanel,
+  Tabs
+} from "./chunk-ZFSQVMLJ.js";
+import {
+  Textarea,
+  textareaClass
+} from "./chunk-IRCTGJQB.js";
+import {
+  DateRangePicker
+} from "./chunk-T2KXVH3O.js";
+import {
+  addDays,
+  addMonths,
+  createdRangeMs,
+  endAt2359Ms,
+  endOfDayMs,
+  formatDisplay,
+  fromIsoDate,
+  isSameDay,
+  monthGrid,
+  monthLabel,
+  startOfDayMs,
+  startOfMonth,
+  toIsoDate
+} from "./chunk-MUPW2TFJ.js";
+import {
+  SegmentedControl
+} from "./chunk-MLRSOTFI.js";
+import {
+  Select
+} from "./chunk-OUYT6SPU.js";
+import {
+  Separator
+} from "./chunk-T4WCCHJQ.js";
+import {
+  SideDrawer
+} from "./chunk-A6GRLKOO.js";
+import {
+  SpreadsheetGrid
+} from "./chunk-MQT5RAQV.js";
+import {
+  Switch
+} from "./chunk-ZHATD73Y.js";
+import {
+  Label
+} from "./chunk-QTFWORA7.js";
+import {
+  PageHeader
+} from "./chunk-RUPL2H6V.js";
+import {
+  Pagination
+} from "./chunk-PUTC52SI.js";
+import {
+  PanelSignIn,
+  PanelSignInSkeleton
+} from "./chunk-PM2VE7DJ.js";
+import {
+  PanelBrandMark
+} from "./chunk-JDE5XYPT.js";
+import {
+  CollapsibleSection
+} from "./chunk-EWSBFU54.js";
+import {
+  ConfirmDialog
+} from "./chunk-ISPICB4W.js";
+import {
+  CopyButton
+} from "./chunk-PPYR3O3L.js";
+import {
+  DataTable
+} from "./chunk-ZLAA4DGG.js";
+import {
+  FeatureAccessGate
+} from "./chunk-S7PVZAPL.js";
+import {
+  StatePanel
+} from "./chunk-G4ZQUSAJ.js";
+import {
+  Field
+} from "./chunk-67ACNS42.js";
+import {
+  ImageUploader
+} from "./chunk-YDICVETX.js";
+import {
+  Input,
+  inputClass
+} from "./chunk-PWAKTEXF.js";
+import {
+  Alert,
+  alertVariants
+} from "./chunk-ZP252OJZ.js";
+import {
+  Autocomplete
+} from "./chunk-5MEOZHJA.js";
+import {
+  Modal,
+  useHasMounted
+} from "./chunk-DS3QYIKL.js";
+import {
+  useDialogLayer
+} from "./chunk-HBBOR43A.js";
+import {
+  Badge,
+  badgeVariants
+} from "./chunk-SQDV2AKJ.js";
+import {
+  Breadcrumb
+} from "./chunk-JSJEEKR3.js";
+import {
+  Button
+} from "./chunk-KR3BCFP7.js";
+import {
+  Spinner
+} from "./chunk-UE7JY7VR.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "./chunk-GMCUXEFI.js";
+import {
+  Checkbox,
+  checkboxClass
+} from "./chunk-HYRJYUPI.js";
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+import {
+  CSV_DELIMITER,
+  TSV_DELIMITER,
+  buildRangeText,
+  countCells,
+  describeRange,
+  escapeCell,
+  fullRange,
+  normalizeRange,
+  writeToClipboard
+} from "./chunk-Y5WCT6XN.js";
+export {
+  Alert,
+  Autocomplete,
+  Badge,
+  Breadcrumb,
+  Button,
+  CSV_DELIMITER,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CollapsibleSection,
+  ConfirmDialog,
+  CopyButton,
+  DataTable,
+  DateRangePicker,
+  FeatureAccessGate,
+  Field,
+  ImageUploader,
+  Input,
+  Label,
+  Modal,
+  PageHeader,
+  Pagination,
+  PanelBrandMark,
+  PanelSignIn,
+  PanelSignInSkeleton,
+  SegmentedControl,
+  Select,
+  Separator,
+  SideDrawer,
+  Spinner,
+  SpreadsheetGrid,
+  StatePanel,
+  Switch,
+  TSV_DELIMITER,
+  TabPanel,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Textarea,
+  addDays,
+  addMonths,
+  alertVariants,
+  badgeVariants,
+  buildRangeText,
+  checkboxClass,
+  cn,
+  countCells,
+  createdRangeMs,
+  describeRange,
+  endAt2359Ms,
+  endOfDayMs,
+  escapeCell,
+  formatDisplay,
+  fromIsoDate,
+  fullRange,
+  inputClass,
+  isSameDay,
+  monthGrid,
+  monthLabel,
+  normalizeRange,
+  startOfDayMs,
+  startOfMonth,
+  textareaClass,
+  toIsoDate,
+  useDialogLayer,
+  useHasMounted,
+  writeToClipboard
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/input.cjs

@@ -0,0 +1,58 @@
+"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/input.tsx
+var input_exports = {};
+__export(input_exports, {
+  Input: () => Input,
+  inputClass: () => inputClass
+});
+module.exports = __toCommonJS(input_exports);
+var React = __toESM(require("react"), 1);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/input.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var inputClass = "h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var Input = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, className: cn(inputClass, className), ...props })
+);
+Input.displayName = "Input";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  inputClass
+});
+//# sourceMappingURL=input.cjs.map

package/dist/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input.tsx","../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport const inputClass =\n  \"h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, ...props }, ref) => (\n    <input ref={ref} className={cn(inputClass, className)} {...props} />\n  ),\n);\n\nInput.displayName = \"Input\";\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;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADMI;AAPG,IAAM,aACX;AAIK,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,4CAAC,WAAM,KAAU,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAEtE;AAEA,MAAM,cAAc;","names":[]}

package/dist/input.d.cts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+declare const inputClass = "h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, inputClass };

package/dist/input.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+declare const inputClass = "h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, inputClass };

package/dist/input.js

@@ -0,0 +1,10 @@
+import {
+  Input,
+  inputClass
+} from "./chunk-PWAKTEXF.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Input,
+  inputClass
+};
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

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

package/dist/label.cjs

@@ -0,0 +1,67 @@
+"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/label.tsx
+var label_exports = {};
+__export(label_exports, {
+  Label: () => Label
+});
+module.exports = __toCommonJS(label_exports);
+var React = __toESM(require("react"), 1);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/label.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Label = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "label",
+    {
+      ref,
+      className: cn(
+        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Label
+});
+//# sourceMappingURL=label.cjs.map

package/dist/label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/label.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;\n\n/** Form label — pair with a native control via `htmlFor`. */\nexport const Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      className={cn(\n        \"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\n\nLabel.displayName = \"Label\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;;;ACFvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADMI;AAFG,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;","names":[]}

package/dist/label.d.cts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+/** Form label — pair with a native control via `htmlFor`. */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps };

package/dist/label.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+/** Form label — pair with a native control via `htmlFor`. */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps };

package/dist/label.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  Label
+} from "./chunk-QTFWORA7.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/label.js.map

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

package/dist/modal.cjs

@@ -0,0 +1,212 @@
+"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/modal.tsx
+var modal_exports = {};
+__export(modal_exports, {
+  Modal: () => Modal,
+  useHasMounted: () => useHasMounted
+});
+module.exports = __toCommonJS(modal_exports);
+var React2 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// src/dialogLayer.ts
+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]);
+}
+
+// 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/modal.tsx
+var import_jsx_runtime = (
+  /*
+    `overflow-y-auto` on the overlay, `my-auto` on the panel — not
+    `items-center`. A flex item centred with `align-items` overflows equally
+    in both directions once it is taller than its container, and the half
+    above the top edge cannot be scrolled to: with the page behind it locked,
+    an over-tall dialog was simply unreachable at both ends. Auto margins
+    centre a short panel the same way and collapse to zero on a tall one,
+    which scrolls.
+  */
+  require("react/jsx-runtime")
+);
+var emptySubscribe = () => () => {
+};
+function useHasMounted() {
+  return React2.useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+function Modal({
+  isOpen,
+  labelledBy,
+  describedBy,
+  closeLabel,
+  onClose,
+  children,
+  dismissible = true,
+  role = "dialog",
+  panelClassName
+}) {
+  const mounted = useHasMounted();
+  const panelRef = React2.useRef(null);
+  useDialogLayer({
+    // Gated on `mounted` too: before that the panel is not rendered, so there
+    // would be nothing to move focus into.
+    active: isOpen && mounted,
+    containerRef: panelRef,
+    onEscape: dismissible ? onClose : void 0
+  });
+  if (!mounted || !isOpen) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed inset-0 z-[100] flex justify-center overflow-y-auto p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": closeLabel,
+          tabIndex: -1,
+          className: "fixed inset-0 bg-overlay/50",
+          onClick: () => {
+            if (dismissible) onClose();
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: panelRef,
+          role,
+          "aria-modal": "true",
+          "aria-labelledby": labelledBy,
+          "aria-describedby": describedBy,
+          tabIndex: -1,
+          className: cn(
+            "border-border bg-background relative z-10 my-auto w-full rounded-lg border shadow-2xl outline-none",
+            panelClassName ?? "max-w-md p-6"
+          ),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal,
+  useHasMounted
+});
+//# sourceMappingURL=modal.cjs.map

package/dist/modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal.tsx","../src/dialogLayer.ts","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useDialogLayer } from \"./dialogLayer\";\nimport { cn } from \"./utils\";\n\nconst emptySubscribe = () => () => {};\n\n/**\n * Returns false during SSR and the first client render, then true once mounted.\n * `useSyncExternalStore` is the React-recommended way to read client-only state\n * without a setState-in-effect (which triggers cascading renders).\n */\nexport function useHasMounted(): boolean {\n  return React.useSyncExternalStore(\n    emptySubscribe,\n    () => true,\n    () => false,\n  );\n}\n\ninterface ModalProps {\n  isOpen: boolean;\n  /** id of the element labelling the dialog; wired to aria-labelledby. */\n  labelledBy: string;\n  /**\n   * Optional id(s) of elements describing the dialog (APG alertdialog body).\n   * Space-separated when multiple.\n   */\n  describedBy?: string;\n  /** Accessible label for the backdrop dismiss button. */\n  closeLabel: string;\n  onClose: () => void;\n  children: React.ReactNode;\n  /**\n   * When false, Escape and backdrop clicks do not close the modal (e.g. while a\n   * save is in flight). Defaults to true.\n   */\n  dismissible?: boolean;\n  /** Use \"alertdialog\" for destructive confirmations. Defaults to \"dialog\". */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Tailwind max-width class for the panel. Defaults to \"max-w-md\". */\n  panelClassName?: string;\n}\n\n/**\n * Shared modal shell: renders a portal-backed, scroll-locked, Escape-dismissible\n * overlay with a centered panel. Callers provide the panel body (heading, form,\n * footer). Consolidates the boilerplate previously copied across every dialog.\n */\nexport function Modal({\n  isOpen,\n  labelledBy,\n  describedBy,\n  closeLabel,\n  onClose,\n  children,\n  dismissible = true,\n  role = \"dialog\",\n  panelClassName,\n}: ModalProps) {\n  const mounted = useHasMounted();\n  const panelRef = React.useRef<HTMLDivElement>(null);\n\n  useDialogLayer({\n    // Gated on `mounted` too: before that the panel is not rendered, so there\n    // would be nothing to move focus into.\n    active: isOpen && mounted,\n    containerRef: panelRef,\n    onEscape: dismissible ? onClose : undefined,\n  });\n\n  if (!mounted || !isOpen) return null;\n\n  return createPortal(\n    /*\n      `overflow-y-auto` on the overlay, `my-auto` on the panel — not\n      `items-center`. A flex item centred with `align-items` overflows equally\n      in both directions once it is taller than its container, and the half\n      above the top edge cannot be scrolled to: with the page behind it locked,\n      an over-tall dialog was simply unreachable at both ends. Auto margins\n      centre a short panel the same way and collapse to zero on a tall one,\n      which scrolls.\n    */\n    <div className=\"fixed inset-0 z-[100] flex justify-center overflow-y-auto p-4\">\n      {/* `fixed`, not `absolute`: inside a scrolling overlay an absolute\n          backdrop scrolls away with the content and leaves the rest of a tall\n          dialog sitting on an undimmed page. */}\n      <button\n        type=\"button\"\n        aria-label={closeLabel}\n        tabIndex={-1}\n        className=\"fixed inset-0 bg-overlay/50\"\n        onClick={() => {\n          if (dismissible) onClose();\n        }}\n      />\n      <div\n        ref={panelRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        tabIndex={-1}\n        className={cn(\n          \"border-border bg-background relative z-10 my-auto w-full rounded-lg border shadow-2xl outline-none\",\n          panelClassName ?? \"max-w-md p-6\",\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n","\"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","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":["React","active"]}