@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/SelectionBar.js

@@ -0,0 +1,103 @@
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
+import { useRef as m, useState as p, useEffect as $, Fragment as I } from "react";
+import { PILL_TRANSITION_MS as A, PILL_SHADOW as C, PILL_SURFACE as g, PILL_MUTED_TEXT as S, PILL_DIVIDER as k, PILL_BUTTON_BASE as O, PILL_BUTTON_CLASS as R, PILL_NOTICE_SHADOW as D, PILL_NOTICE_SLEEVE as H, PILL_NOTICE_TEXT as M, PILL_TRACK_CLASS as j, PILL_SHEET_ID as B, PILL_SHEET_CSS as F } from "./selectionBarChrome.js";
+import { useAdoptedStyleSheet as U } from "./useAdoptedStyleSheet.js";
+const T = (r) => String(r.value) === "" ? r.label : `${r.value} ${r.label}`, _ = (r) => r.map(T).join(", "), V = (r, n) => r === void 0 || r === "" ? _(n) : `${r} ${_(n)}`.trim(), z = ({
+  open: r,
+  counts: n,
+  actions: b,
+  placement: v = "sticky",
+  notice: d,
+  "aria-label": N = "Pending changes",
+  "aria-labelledby": L,
+  className: E = ""
+}) => {
+  const o = m(null), [P, f] = p(r), [s, h] = p(r), a = m(null), i = m(null);
+  U(o, F, B), $(() => {
+    var e;
+    if (r)
+      f(!0), i.current && (clearTimeout(i.current), i.current = null), a.current = requestAnimationFrame(() => {
+        a.current = null, h(!0);
+      });
+    else {
+      const c = document.activeElement;
+      c instanceof HTMLElement && ((e = o.current) != null && e.contains(c)) && c.blur(), h(!1), i.current = setTimeout(() => {
+        i.current = null, f(!1);
+      }, A);
+    }
+    return () => {
+      a.current !== null && (cancelAnimationFrame(a.current), a.current = null), i.current && (clearTimeout(i.current), i.current = null);
+    };
+  }, [r]);
+  const x = v === "sticky", u = d !== void 0 && d !== "", y = /* @__PURE__ */ t("div", { className: g, style: { boxShadow: C }, children: [
+    n.length > 0 && /* @__PURE__ */ l(
+      "p",
+      {
+        "aria-hidden": "true",
+        className: "m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]",
+        children: n.map((e, c) => /* @__PURE__ */ t(I, { children: [
+          c > 0 && /* @__PURE__ */ l("span", { className: S, children: "•" }),
+          /* @__PURE__ */ l("span", { children: T(e) })
+        ] }, e.label))
+      }
+    ),
+    b.map((e) => /* @__PURE__ */ t(I, { children: [
+      e.dividerBefore && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: `${k} ${S}`, children: "|" }),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          disabled: e.disabled,
+          tabIndex: s ? void 0 : -1,
+          onClick: e.onClick,
+          className: `${O} ${R}--${e.emphasis ?? "secondary"}`,
+          children: [
+            e.icon && e.iconPosition !== "end" && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "flex items-center", children: e.icon }),
+            e.label,
+            e.icon && e.iconPosition === "end" && /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "flex items-center", children: e.icon })
+          ]
+        }
+      )
+    ] }, e.label))
+  ] });
+  return (
+    // The live region has to exist BEFORE its text changes or the first announcement is dropped.
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: o,
+        className: `${j} pointer-events-none flex w-full justify-center ${x ? "sticky bottom-6 z-30" : "relative"} ${E}`.trim(),
+        style: { opacity: s ? 1 : 0 },
+        children: [
+          /* @__PURE__ */ l("p", { className: "sr-only", role: "status", children: s ? V(d, n) : "" }),
+          P && /* @__PURE__ */ l(
+            "div",
+            {
+              role: "group",
+              "aria-label": L ? void 0 : N,
+              "aria-labelledby": L,
+              "aria-hidden": s ? void 0 : !0,
+              className: s ? "pointer-events-auto" : void 0,
+              children: /* @__PURE__ */ t(
+                "div",
+                {
+                  className: u ? H : void 0,
+                  style: u ? { boxShadow: D } : void 0,
+                  children: [
+                    u && /* @__PURE__ */ l("p", { "aria-hidden": "true", className: M, children: d }),
+                    y
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+};
+export {
+  z as SelectionBar,
+  z as default
+};
+//# sourceMappingURL=SelectionBar.js.map

package/dist/components/SelectionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionBar.js","sources":["../../src/components/SelectionBar.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n    PILL_BUTTON_BASE,\n    PILL_BUTTON_CLASS,\n    PILL_DIVIDER,\n    PILL_MUTED_TEXT,\n    PILL_NOTICE_SHADOW,\n    PILL_NOTICE_SLEEVE,\n    PILL_NOTICE_TEXT,\n    PILL_SHADOW,\n    PILL_SHEET_CSS,\n    PILL_SHEET_ID,\n    PILL_SURFACE,\n    PILL_TRACK_CLASS,\n    PILL_TRANSITION_MS,\n    type SelectionBarCount,\n    type SelectionBarEmphasis,\n} from './selectionBarChrome';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type { SelectionBarCount, SelectionBarEmphasis };\n\nexport interface SelectionBarAction {\n    label: string;\n    onClick: () => void;\n    /** 'primary' commits the pending change; 'secondary' (the default) is a filled chip;\n     *  'quiet' is unfilled and takes a wash on hover. */\n    emphasis?: SelectionBarEmphasis;\n    icon?: React.ReactNode;\n    iconPosition?: 'start' | 'end';\n    disabled?: boolean;\n    /** Renders a separator glyph before this action. */\n    dividerBefore?: boolean;\n}\n\nexport interface SelectionBarProps {\n    /** Drives the mount: the bar animates in on true and animates out on false. */\n    open: boolean;\n    counts: SelectionBarCount[];\n    actions: SelectionBarAction[];\n    /** 'sticky' keeps the bar in view while its container scrolls; render it as the last child\n     *  of that content, with no `overflow: hidden` on any ancestor. */\n    placement?: 'sticky' | 'inline';\n    /**\n     * Wraps the bar in a warning sleeve carrying this message, for state the bar is\n     * reporting rather than an action it offers — e.g. that the selection is unsaved.\n     * It leads the announcement. An empty string renders no sleeve.\n     */\n    notice?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n/** A count reads as one phrase; an empty `value` carries a bare message instead. */\nconst countText = (count: SelectionBarCount): string =>\n    String(count.value) === '' ? count.label : `${count.value} ${count.label}`;\n\nconst summarise = (counts: SelectionBarCount[]): string => counts.map(countText).join(', ');\n\n/** A notice is the reason the bar is up, so it leads the announcement. */\nconst announcement = (notice: string | undefined, counts: SelectionBarCount[]): string =>\n    notice === undefined || notice === ''\n        ? summarise(counts)\n        : `${notice} ${summarise(counts)}`.trim();\n\n/**\n * A bar reporting a pending, not-yet-written selection and the actions that resolve it. Every\n * action destroys the button just pressed, so an `onClick` that ends the pending state must\n * also move focus.\n */\nexport const SelectionBar: React.FC<SelectionBarProps> = ({\n    open,\n    counts,\n    actions,\n    placement = 'sticky',\n    notice,\n    'aria-label': ariaLabel = 'Pending changes',\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const trackRef = useRef<HTMLDivElement>(null);\n    const [isMounted, setIsMounted] = useState(open);\n    const [isVisible, setIsVisible] = useState(open);\n    const frameRef = useRef<number | null>(null);\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useAdoptedStyleSheet(trackRef, PILL_SHEET_CSS, PILL_SHEET_ID);\n\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            if (timerRef.current) {\n                clearTimeout(timerRef.current);\n                timerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            // The browser refuses `aria-hidden` on a subtree still holding focus, so a caller\n            // that forgets to move it would trap the keyboard here.\n            const active = document.activeElement;\n            if (active instanceof HTMLElement && trackRef.current?.contains(active)) {\n                active.blur();\n            }\n            setIsVisible(false);\n            timerRef.current = setTimeout(() => {\n                timerRef.current = null;\n                setIsMounted(false);\n            }, PILL_TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (timerRef.current) {\n                clearTimeout(timerRef.current);\n                timerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    const isSticky = placement === 'sticky';\n    const hasNotice = notice !== undefined && notice !== '';\n\n    const pill = (\n        <div className={PILL_SURFACE} style={{ boxShadow: PILL_SHADOW }}>\n            {counts.length > 0 && (\n                <p\n                    aria-hidden=\"true\"\n                    className=\"m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]\"\n                >\n                    {counts.map((count, index) => (\n                        <Fragment key={count.label}>\n                            {index > 0 && <span className={PILL_MUTED_TEXT}>•</span>}\n                            <span>{countText(count)}</span>\n                        </Fragment>\n                    ))}\n                </p>\n            )}\n            {actions.map((action) => (\n                <Fragment key={action.label}>\n                    {action.dividerBefore && (\n                        <span aria-hidden=\"true\" className={`${PILL_DIVIDER} ${PILL_MUTED_TEXT}`}>\n                            |\n                        </span>\n                    )}\n                    <button\n                        type=\"button\"\n                        disabled={action.disabled}\n                        tabIndex={isVisible ? undefined : -1}\n                        onClick={action.onClick}\n                        className={`${PILL_BUTTON_BASE} ${PILL_BUTTON_CLASS}--${action.emphasis ?? 'secondary'}`}\n                    >\n                        {action.icon && action.iconPosition !== 'end' && (\n                            <span aria-hidden=\"true\" className=\"flex items-center\">\n                                {action.icon}\n                            </span>\n                        )}\n                        {action.label}\n                        {action.icon && action.iconPosition === 'end' && (\n                            <span aria-hidden=\"true\" className=\"flex items-center\">\n                                {action.icon}\n                            </span>\n                        )}\n                    </button>\n                </Fragment>\n            ))}\n        </div>\n    );\n\n    return (\n        // The live region has to exist BEFORE its text changes or the first announcement is dropped.\n        <div\n            ref={trackRef}\n            className={`${PILL_TRACK_CLASS} pointer-events-none flex w-full justify-center ${isSticky ? 'sticky bottom-6 z-30' : 'relative'} ${className}`.trim()}\n            style={{ opacity: isVisible ? 1 : 0 }}\n        >\n            <p className=\"sr-only\" role=\"status\">\n                {isVisible ? announcement(notice, counts) : ''}\n            </p>\n            {isMounted && (\n                <div\n                    role=\"group\"\n                    aria-label={ariaLabelledBy ? undefined : ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-hidden={isVisible ? undefined : true}\n                    className={isVisible ? 'pointer-events-auto' : undefined}\n                >\n                    {/* Keep the wrapper stable: changing the pill's parent remounts it and drops focus\n     from the action that raised the notice. */}\n                    <div\n                        className={hasNotice ? PILL_NOTICE_SLEEVE : undefined}\n                        style={hasNotice ? { boxShadow: PILL_NOTICE_SHADOW } : undefined}\n                    >\n                        {hasNotice && (\n                            <p aria-hidden=\"true\" className={PILL_NOTICE_TEXT}>\n                                {notice}\n                            </p>\n                        )}\n                        {pill}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default SelectionBar;\n"],"names":["countText","count","summarise","counts","announcement","notice","SelectionBar","open","actions","placement","ariaLabel","ariaLabelledBy","className","trackRef","useRef","isMounted","setIsMounted","useState","isVisible","setIsVisible","frameRef","timerRef","useAdoptedStyleSheet","PILL_SHEET_CSS","PILL_SHEET_ID","useEffect","active","_a","PILL_TRANSITION_MS","isSticky","hasNotice","pill","PILL_SURFACE","PILL_SHADOW","jsx","index","Fragment","PILL_MUTED_TEXT","action","PILL_DIVIDER","jsxs","PILL_BUTTON_BASE","PILL_BUTTON_CLASS","PILL_TRACK_CLASS","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT"],"mappings":"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"}

package/dist/components/SettingRow.js

@@ -0,0 +1,40 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useId as m } from "react";
+const x = ({
+  label: c,
+  badge: d,
+  description: e,
+  control: a,
+  className: l = ""
+}) => {
+  const s = m(), i = `${s}-label`, n = e ? `${s}-description` : void 0;
+  return /* @__PURE__ */ t("div", { className: l, children: [
+    /* @__PURE__ */ t("div", { className: "flex min-h-11 items-center gap-3 rounded-lg border border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] px-3 py-2", children: [
+      /* @__PURE__ */ t("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            id: i,
+            className: "truncate text-sm text-[var(--malachite-text-primary)]",
+            children: c
+          }
+        ),
+        d
+      ] }),
+      /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: typeof a == "function" ? a({ labelId: i, descriptionId: n }) : a })
+    ] }),
+    e && /* @__PURE__ */ r(
+      "p",
+      {
+        id: n,
+        className: "m-0 pt-2 text-[13px] leading-[1.5] text-[var(--malachite-text-secondary)]",
+        children: e
+      }
+    )
+  ] });
+};
+export {
+  x as SettingRow,
+  x as default
+};
+//# sourceMappingURL=SettingRow.js.map

package/dist/components/SettingRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingRow.js","sources":["../../src/components/SettingRow.tsx"],"sourcesContent":["import React, { useId } from 'react';\n\n/** The ids a control needs to name and describe itself from the row's own text. */\nexport interface SettingRowControlIds {\n    labelId: string;\n    descriptionId?: string;\n}\n\nexport interface SettingRowProps {\n    label: string;\n    /** Small badge after the label, e.g. a `Tag`. */\n    badge?: React.ReactNode;\n    /** Explanation rendered under the row, outside its border. */\n    description?: React.ReactNode;\n    /** The control on the trailing edge. Passed the row's ids: a control `<label htmlFor>`\n     *  cannot reach must name itself with `aria-labelledby`. */\n    control: React.ReactNode | ((ids: SettingRowControlIds) => React.ReactNode);\n    className?: string;\n}\n\nexport const SettingRow: React.FC<SettingRowProps> = ({\n    label,\n    badge,\n    description,\n    control,\n    className = '',\n}) => {\n    const instanceId = useId();\n    const labelId = `${instanceId}-label`;\n    const descriptionId = description ? `${instanceId}-description` : undefined;\n\n    return (\n        <div className={className}>\n            <div className=\"flex min-h-11 items-center gap-3 rounded-lg border border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] px-3 py-2\">\n                <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                    <span\n                        id={labelId}\n                        className=\"truncate text-sm text-[var(--malachite-text-primary)]\"\n                    >\n                        {label}\n                    </span>\n                    {badge}\n                </span>\n                <span className=\"flex shrink-0 items-center\">\n                    {typeof control === 'function' ? control({ labelId, descriptionId }) : control}\n                </span>\n            </div>\n            {description && (\n                <p\n                    id={descriptionId}\n                    className=\"m-0 pt-2 text-[13px] leading-[1.5] text-[var(--malachite-text-secondary)]\"\n                >\n                    {description}\n                </p>\n            )}\n        </div>\n    );\n};\n\nexport default SettingRow;\n"],"names":["SettingRow","label","badge","description","control","className","instanceId","useId","labelId","descriptionId","jsxs","jsx"],"mappings":";;AAoBO,MAAMA,IAAwC,CAAC;AAAA,EAClD,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAaC,EAAA,GACbC,IAAU,GAAGF,CAAU,UACvBG,IAAgBN,IAAc,GAAGG,CAAU,iBAAiB;AAElE,SACI,gBAAAI,EAAC,SAAI,WAAAL,GACD,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,4IACX,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,0CACZ,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAIH;AAAA,YACJ,WAAU;AAAA,YAET,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJC;AAAA,MAAA,GACL;AAAA,MACA,gBAAAS,EAAC,QAAA,EAAK,WAAU,8BACX,UAAA,OAAOP,KAAY,aAAaA,EAAQ,EAAE,SAAAI,GAAS,eAAAC,EAAA,CAAe,IAAIL,EAAA,CAC3E;AAAA,IAAA,GACJ;AAAA,IACCD,KACG,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAIF;AAAA,QACJ,WAAU;AAAA,QAET,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAER;AAER;"}

package/dist/components/ShadowEscape.js

@@ -0,0 +1,166 @@
+import { jsx as f, jsxs as d, Fragment as u } from "react/jsx-runtime";
+import { useState as h, useRef as b, useEffect as p } from "react";
+import { createPortal as y } from "react-dom";
+import { ensureInterFontFace as g } from "../inter-font.js";
+const s = "malachite-form-styles", x = `
+/* Malachite Form Styles - for components outside Shadow DOM */
+
+.malachite-form-container {
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #374151;
+}
+
+.malachite-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.malachite-form .space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+/* Basic input styling that matches Tailwind defaults */
+.malachite-form input,
+.malachite-form textarea,
+.malachite-form select {
+  appearance: none;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #111827;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  width: 100%;
+}
+
+.malachite-form input:focus,
+.malachite-form textarea:focus,
+.malachite-form select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.malachite-form input:disabled,
+.malachite-form textarea:disabled,
+.malachite-form select:disabled {
+  background-color: #f9fafb;
+  color: #6b7280;
+  cursor: not-allowed;
+}
+
+.malachite-form button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  border-radius: 0.375rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+.malachite-form button[type="submit"] {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.malachite-form button[type="submit"]:hover {
+  background-color: #2563eb;
+}
+
+.malachite-form button[type="button"] {
+  background-color: #ffffff;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.malachite-form button[type="button"]:hover {
+  background-color: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.malachite-form button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .malachite-form-container {
+    color: #f3f4f6;
+  }
+  
+  .malachite-form input,
+  .malachite-form textarea,
+  .malachite-form select {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f3f4f6;
+  }
+  
+  .malachite-form input:focus,
+  .malachite-form textarea:focus,
+  .malachite-form select:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
+  }
+  
+  .malachite-form button[type="button"] {
+    background-color: #374151;
+    color: #f3f4f6;
+    border-color: #4b5563;
+  }
+  
+  .malachite-form button[type="button"]:hover {
+    background-color: #4b5563;
+  }
+}
+`, w = () => {
+  if (typeof document > "u" || !document.head || document.getElementById(s))
+    return;
+  const o = document.createElement("style");
+  o.id = s, o.textContent = x, document.head.appendChild(o);
+}, F = ({ children: o, className: n = "" }) => {
+  const [l, c] = h(null), t = b(null);
+  return p(() => {
+    if (g(), w(), t.current) {
+      let r = t.current, i = !1;
+      for (; r; ) {
+        const m = r.getRootNode();
+        if (m !== document)
+          i = !0, r = m.host;
+        else {
+          const a = r.parentElement || document.body;
+          if (i) {
+            const e = document.createElement("div");
+            return e.className = `malachite-escape-container ${n}`, e.style.cssText = `
+                            position: relative;
+                            z-index: 1000;
+                        `, a.appendChild(e), c(e), () => {
+              e.parentElement && e.parentElement.removeChild(e);
+            };
+          }
+          c(a);
+          break;
+        }
+      }
+    }
+  }, [n]), l ? /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ f("div", { ref: t, style: { display: "none" } }),
+    y(o, l)
+  ] }) : /* @__PURE__ */ f("div", { ref: t, style: { display: "none" } });
+};
+export {
+  F as ShadowEscape,
+  F as default
+};
+//# sourceMappingURL=ShadowEscape.js.map

package/dist/components/ShadowEscape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowEscape.js","sources":["../../src/components/ShadowEscape.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ensureInterFontFace } from '../inter-font';\n\ninterface ShadowEscapeProps {\n    children: React.ReactNode;\n    className?: string;\n}\n\nconst FORM_STYLES_ID = 'malachite-form-styles';\n\n// Form styles as a string - this ensures it works in all build environments\nconst formStyles = `\n/* Malachite Form Styles - for components outside Shadow DOM */\n\n.malachite-form-container {\n  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #374151;\n}\n\n.malachite-form {\n  display: flex;\n  flex-direction: column;\n}\n\n.malachite-form .space-y-4 > * + * {\n  margin-top: 1rem;\n}\n\n/* Basic input styling that matches Tailwind defaults */\n.malachite-form input,\n.malachite-form textarea,\n.malachite-form select {\n  appearance: none;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: #111827;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  width: 100%;\n}\n\n.malachite-form input:focus,\n.malachite-form textarea:focus,\n.malachite-form select:focus {\n  outline: none;\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.malachite-form input:disabled,\n.malachite-form textarea:disabled,\n.malachite-form select:disabled {\n  background-color: #f9fafb;\n  color: #6b7280;\n  cursor: not-allowed;\n}\n\n.malachite-form button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.25rem;\n  border-radius: 0.375rem;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n}\n\n.malachite-form button[type=\"submit\"] {\n  background-color: #3b82f6;\n  color: #ffffff;\n}\n\n.malachite-form button[type=\"submit\"]:hover {\n  background-color: #2563eb;\n}\n\n.malachite-form button[type=\"button\"] {\n  background-color: #ffffff;\n  color: #374151;\n  border-color: #d1d5db;\n}\n\n.malachite-form button[type=\"button\"]:hover {\n  background-color: #f9fafb;\n  border-color: #9ca3af;\n}\n\n.malachite-form button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .malachite-form-container {\n    color: #f3f4f6;\n  }\n  \n  .malachite-form input,\n  .malachite-form textarea,\n  .malachite-form select {\n    background-color: #1f2937;\n    border-color: #374151;\n    color: #f3f4f6;\n  }\n  \n  .malachite-form input:focus,\n  .malachite-form textarea:focus,\n  .malachite-form select:focus {\n    border-color: #60a5fa;\n    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\n  }\n  \n  .malachite-form button[type=\"button\"] {\n    background-color: #374151;\n    color: #f3f4f6;\n    border-color: #4b5563;\n  }\n  \n  .malachite-form button[type=\"button\"]:hover {\n    background-color: #4b5563;\n  }\n}\n`;\n\n/**\n * Adds the escaped-form stylesheet to <head> unless it is already there. The check reads\n * the DOM, not a module-level latch: a latch goes stale the moment anything removes the\n * <style> (a host app clearing <head> between routes, a test resetting the document), and\n * the styles would then never be re-added.\n */\nconst ensureFormStyles = (): void => {\n    if (typeof document === 'undefined' || !document.head) {\n        return;\n    }\n    if (document.getElementById(FORM_STYLES_ID)) {\n        return;\n    }\n    const styleElement = document.createElement('style');\n    styleElement.id = FORM_STYLES_ID;\n    styleElement.textContent = formStyles;\n    document.head.appendChild(styleElement);\n};\n\n/**\n * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.\n * This is used internally by form components to escape Shadow DOM boundaries.\n * \n * The component finds the nearest non-shadow DOM ancestor and renders there.\n */\nexport const ShadowEscape: React.FC<ShadowEscapeProps> = ({ children, className = '' }) => {\n    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n    const markerRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        // Inter @font-face must live in the document so escaped (non-shadow) forms can use it.\n        ensureInterFontFace();\n\n        ensureFormStyles();\n\n        if (markerRef.current) {\n            // Find the closest non-shadow DOM ancestor\n            let element: Node | null = markerRef.current;\n            let isInShadowDOM = false;\n\n            // Traverse up the DOM tree to find a non-shadow root container\n            while (element) {\n                const rootNode = element.getRootNode();\n\n                // Check if we're in a shadow root\n                if (rootNode !== document) {\n                    isInShadowDOM = true;\n                    // We're in a shadow root, find its host\n                    const shadowRoot = rootNode as ShadowRoot;\n                    element = shadowRoot.host;\n                } else {\n                    // We found a regular DOM element, use its parent\n                    const parentElement = element.parentElement || document.body;\n\n                    if (isInShadowDOM) {\n                        // Create a container for the escaped content\n                        const container = document.createElement('div');\n                        container.className = `malachite-escape-container ${className}`;\n                        container.style.cssText = `\n                            position: relative;\n                            z-index: 1000;\n                        `;\n\n                        parentElement.appendChild(container);\n                        setPortalContainer(container);\n\n                        // Cleanup function\n                        return () => {\n                            if (container.parentElement) {\n                                container.parentElement.removeChild(container);\n                            }\n                        };\n                    }\n                    // We're not in Shadow DOM, just render normally\n                    setPortalContainer(parentElement);\n                    break;\n                }\n            }\n        }\n    }, [className]);\n\n    if (!portalContainer) {\n        // Render a marker in Shadow DOM while we find the escape container\n        return <div ref={markerRef} style={{ display: 'none' }} />;\n    }\n\n    // Render children outside Shadow DOM\n    return (\n        <>\n            <div ref={markerRef} style={{ display: 'none' }} />\n            {createPortal(children, portalContainer)}\n        </>\n    );\n};\n\nexport default ShadowEscape; "],"names":["FORM_STYLES_ID","formStyles","ensureFormStyles","styleElement","ShadowEscape","children","className","portalContainer","setPortalContainer","useState","markerRef","useRef","useEffect","ensureInterFontFace","element","isInShadowDOM","rootNode","parentElement","container","jsxs","Fragment","jsx","createPortal"],"mappings":";;;;AASA,MAAMA,IAAiB,yBAGjBC,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkIbC,IAAmB,MAAY;AAIjC,MAHI,OAAO,WAAa,OAAe,CAAC,SAAS,QAG7C,SAAS,eAAeF,CAAc;AACtC;AAEJ,QAAMG,IAAe,SAAS,cAAc,OAAO;AACnD,EAAAA,EAAa,KAAKH,GAClBG,EAAa,cAAcF,GAC3B,SAAS,KAAK,YAAYE,CAAY;AAC1C,GAQaC,IAA4C,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,SAAS;AACvF,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzEC,IAAYC,EAAuB,IAAI;AAsD7C,SApDAC,EAAU,MAAM;AAMZ,QAJAC,EAAA,GAEAX,EAAA,GAEIQ,EAAU,SAAS;AAEnB,UAAII,IAAuBJ,EAAU,SACjCK,IAAgB;AAGpB,aAAOD,KAAS;AACZ,cAAME,IAAWF,EAAQ,YAAA;AAGzB,YAAIE,MAAa;AACb,UAAAD,IAAgB,IAGhBD,IADmBE,EACE;AAAA,aAClB;AAEH,gBAAMC,IAAgBH,EAAQ,iBAAiB,SAAS;AAExD,cAAIC,GAAe;AAEf,kBAAMG,IAAY,SAAS,cAAc,KAAK;AAC9C,mBAAAA,EAAU,YAAY,8BAA8BZ,CAAS,IAC7DY,EAAU,MAAM,UAAU;AAAA;AAAA;AAAA,2BAK1BD,EAAc,YAAYC,CAAS,GACnCV,EAAmBU,CAAS,GAGrB,MAAM;AACT,cAAIA,EAAU,iBACVA,EAAU,cAAc,YAAYA,CAAS;AAAA,YAErD;AAAA,UACJ;AAEA,UAAAV,EAAmBS,CAAa;AAChC;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAACX,CAAS,CAAC,GAETC,IAOD,gBAAAY,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,KAAKX,GAAW,OAAO,EAAE,SAAS,UAAU;AAAA,IAChDY,EAAajB,GAAUE,CAAe;AAAA,EAAA,GAC3C,IARO,gBAAAc,EAAC,SAAI,KAAKX,GAAW,OAAO,EAAE,SAAS,UAAU;AAUhE;"}

package/dist/components/SidePanel.js

@@ -0,0 +1,140 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as T, useRef as s, useEffect as V } from "react";
+import { createPortal as L } from "react-dom";
+import { ShadowRootWrapper as M } from "../ShadowRootWrapper.js";
+import P from "./CustomIcons/ArrowLeftIcon.js";
+import j from "./CustomIcons/DismissIcon.js";
+import { useOverlayBehaviour as D, OVERLAY_ICON_BUTTON_CLASSES as I } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as F, overlayIdentity as R } from "./portalOverlay.js";
+const S = 200, X = (a) => typeof a == "number" ? `${a}px` : a, K = ({
+  open: a,
+  onClose: n,
+  title: i,
+  subtitle: o,
+  titleExtra: c,
+  description: d,
+  headerDivider: w = !1,
+  icon: m,
+  headerExtra: u,
+  footer: p,
+  onBack: f,
+  maxWidth: A = 1080,
+  "aria-label": k,
+  "aria-labelledby": x,
+  bodyPadding: h = !0,
+  stacking: z = "default",
+  children: b
+}) => {
+  const [v, y] = T(!1), [O, N] = T(!1), t = s(null), r = s(null), g = s(null), {
+    ref: _,
+    isTopmost: $,
+    zIndex: C,
+    elevated: E
+  } = D({
+    open: a,
+    onClose: n,
+    elevated: z === "above-app-overlays",
+    hostRef: g
+  });
+  return V(() => (a ? (N(!0), r.current && (clearTimeout(r.current), r.current = null), t.current = requestAnimationFrame(() => {
+    t.current = null, y(!0);
+  })) : (y(!1), r.current = setTimeout(() => {
+    r.current = null, N(!1);
+  }, S)), () => {
+    t.current !== null && (cancelAnimationFrame(t.current), t.current = null), r.current && (clearTimeout(r.current), r.current = null);
+  }), [a]), O ? L(
+    // Host carries the stacking context — ShadowRootWrapper's `isolation` would
+    // otherwise flatten our z-index and let sticky page elements paint over us.
+    /* @__PURE__ */ e(
+      M,
+      {
+        hostRef: g,
+        hostStyle: { position: "relative", zIndex: C },
+        hostProps: E ? { ...R("sidepanel"), [F]: "" } : R("sidepanel"),
+        children: /* @__PURE__ */ l("div", { className: "fixed inset-0 z-[1000]", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": "true",
+              onClick: n,
+              className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${v ? "opacity-100" : "opacity-0"}`
+            }
+          ),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              ref: _,
+              role: "dialog",
+              "aria-modal": $ ? "true" : void 0,
+              tabIndex: -1,
+              "aria-label": x ? void 0 : k ?? (typeof i == "string" ? i : void 0),
+              "aria-labelledby": x,
+              className: "absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]",
+              style: {
+                width: `min(calc(100% - 16px), ${X(A)})`,
+                // Inline: Tailwind translate utilities silently break inside
+                // shadow roots (see CLAUDE.md Shadow DOM caveats).
+                transform: v ? "translateX(0)" : "translateX(calc(100% + 16px))",
+                transition: `transform ${S}ms ease-in-out`
+              },
+              children: [
+                /* @__PURE__ */ l(
+                  "div",
+                  {
+                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${w ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                    children: [
+                      /* @__PURE__ */ l("div", { className: "flex items-center gap-[12px]", children: [
+                        f ? /* @__PURE__ */ e(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Back",
+                            onClick: f,
+                            className: I,
+                            children: /* @__PURE__ */ e(P, { size: 16 })
+                          }
+                        ) : null,
+                        m ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: m }) : null,
+                        /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-[8px]", children: [
+                          /* @__PURE__ */ e("span", { className: "shrink-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold text-[var(--malachite-text-primary)]", children: i }),
+                          o ? /* @__PURE__ */ e("span", { className: "min-w-0 truncate text-[13px] text-[var(--malachite-text-secondary)]", children: o }) : null,
+                          c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: c }) : null
+                        ] }),
+                        u ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: u }) : null,
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Close",
+                            onClick: n,
+                            className: I,
+                            children: /* @__PURE__ */ e(j, { size: 10 })
+                          }
+                        )
+                      ] }),
+                      d ? /* @__PURE__ */ e("div", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: d }) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: `min-h-0 flex-1 overflow-y-auto ${h ? "px-[28px]" : ""}`,
+                    children: h ? /* @__PURE__ */ e("div", { className: "py-[28px]", children: b }) : b
+                  }
+                ),
+                p ? /* @__PURE__ */ e("div", { className: "border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]", children: p }) : null
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    document.body
+  ) : null;
+};
+export {
+  K as SidePanel,
+  K as default
+};
+//# sourceMappingURL=SidePanel.js.map

package/dist/components/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary text, inline after the title. */\n    subtitle?: React.ReactNode;\n    /** Content at the end of the title row, after the subtitle (e.g. a status tag). */\n    titleExtra?: React.ReactNode;\n    /** Block paragraph below the title row, spanning the header width. */\n    description?: React.ReactNode;\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Leading header slot, typically a logo or icon. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    footer?: React.ReactNode;\n    /** Renders a back button before the header icon. */\n    onBack?: () => void;\n    /** Maximum panel width. Default: 1080. */\n    maxWidth?: number | string;\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. */\n    stacking?: 'default' | 'above-app-overlays';\n    children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number | string): string =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    titleExtra,\n    description,\n    headerDivider = false,\n    icon,\n    headerExtra,\n    footer,\n    onBack,\n    maxWidth = 1080,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    bodyPadding = true,\n    stacking = 'default',\n    children,\n}) => {\n    const [isVisible, setIsVisible] = useState(false);\n    const [isMounted, setIsMounted] = useState(false);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const {\n        ref: handlePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        elevated: stacking === 'above-app-overlays',\n        hostRef,\n    });\n\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n        // otherwise flatten our z-index and let sticky page elements paint over us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('sidepanel')\n            }\n        >\n            <div className=\"fixed inset-0 z-[1000]\">\n                <div\n                    aria-hidden=\"true\"\n                    onClick={onClose}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role=\"dialog\"\n                    // Only the topmost overlay may claim it, or a screen reader can still\n                    // browse the one underneath.\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    tabIndex={-1}\n                    // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n                    style={{\n                        width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n                        // Inline: Tailwind translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n                        transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n                    }}\n                >\n                    <div\n                        className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n                            headerDivider\n                                ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                : ''\n                        }`}\n                    >\n                        <div className=\"flex items-center gap-[12px]\">\n                            {onBack ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Back\"\n                                    onClick={onBack}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <ArrowLeftIcon size={16} />\n                                </button>\n                            ) : null}\n                            {icon ? (\n                                <span className=\"flex shrink-0 items-center\">{icon}</span>\n                            ) : null}\n                            <div className=\"flex min-w-0 flex-1 items-center gap-[8px]\">\n                                <span className=\"shrink-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold text-[var(--malachite-text-primary)]\">\n                                    {title}\n                                </span>\n                                {subtitle ? (\n                                    <span className=\"min-w-0 truncate text-[13px] text-[var(--malachite-text-secondary)]\">\n                                        {subtitle}\n                                    </span>\n                                ) : null}\n                                {titleExtra ? (\n                                    <span className=\"flex shrink-0 items-center\">{titleExtra}</span>\n                                ) : null}\n                            </div>\n                            {headerExtra ? (\n                                <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n                            ) : null}\n                            <button\n                                type=\"button\"\n                                aria-label=\"Close\"\n                                onClick={onClose}\n                                className={OVERLAY_ICON_BUTTON_CLASSES}\n                            >\n                                <DismissIcon size={10} />\n                            </button>\n                        </div>\n                        {description ? (\n                            <div className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                {description}\n                            </div>\n                        ) : null}\n                    </div>\n                    <div\n                        className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding ? 'px-[28px]' : ''}`}\n                    >\n                        {bodyPadding ? <div className=\"py-[28px]\">{children}</div> : children}\n                    </div>\n                    {footer ? (\n                        <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n                            {footer}\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","titleExtra","description","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","children","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","DismissIcon"],"mappings":"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"}

package/dist/components/SidePanelNavFooter.js

@@ -0,0 +1,46 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import p from "./CustomIcons/CaretDownIcon.js";
+import m from "./CustomIcons/CaretUpIcon.js";
+import { FOCUS_RING as x } from "./focusRing.js";
+const n = "flex h-[20px] min-w-[20px] items-center justify-center rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] px-[4px] [box-shadow:0_1px_0_0_rgba(0,0,0,0.15)]", s = "text-[13px] font-medium tracking-[0.14px] text-[var(--malachite-text-secondary)]", o = ({ onClick: t, disabled: a, ariaLabel: l, children: i }) => /* @__PURE__ */ e(
+  "button",
+  {
+    type: "button",
+    "aria-label": l,
+    onClick: t,
+    disabled: a,
+    className: `${n} transition-opacity ${x} ${a ? "cursor-not-allowed opacity-40" : "cursor-pointer hover:border-[var(--malachite-text-placeholder)]"}`,
+    children: i
+  }
+), v = ({
+  onNavigateUp: t,
+  onNavigateDown: a,
+  canNavigateUp: l = !1,
+  canNavigateDown: i = !1,
+  actions: c,
+  className: d = ""
+}) => /* @__PURE__ */ r("div", { className: `flex w-full items-center justify-between ${d}`, children: [
+  /* @__PURE__ */ r("div", { className: "flex items-center gap-[8px]", children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center gap-[4px]", children: [
+      /* @__PURE__ */ e(o, { ariaLabel: "Previous", onClick: t, disabled: !l, children: /* @__PURE__ */ e(m, { size: 11 }) }),
+      /* @__PURE__ */ e(o, { ariaLabel: "Next", onClick: a, disabled: !i, children: /* @__PURE__ */ e(p, { size: 11 }) })
+    ] }),
+    /* @__PURE__ */ e("span", { className: s, children: "Navigate" }),
+    /* @__PURE__ */ r("div", { className: "ml-[20px] flex items-center gap-[8px]", children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: `${n} px-[6px] text-[10px] font-medium uppercase tracking-[0.5px] text-[var(--malachite-text-placeholder)]`,
+          children: "esc"
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: s, children: "Close" })
+    ] })
+  ] }),
+  c ? /* @__PURE__ */ e("div", { className: "flex items-center", children: c }) : null
+] });
+export {
+  v as SidePanelNavFooter,
+  v as default
+};
+//# sourceMappingURL=SidePanelNavFooter.js.map

package/dist/components/SidePanelNavFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelNavFooter.js","sources":["../../src/components/SidePanelNavFooter.tsx"],"sourcesContent":["import React from 'react';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport { FOCUS_RING } from './focusRing';\n\nexport interface SidePanelNavFooterProps {\n    onNavigateUp?: () => void;\n    onNavigateDown?: () => void;\n    canNavigateUp?: boolean;\n    canNavigateDown?: boolean;\n    actions?: React.ReactNode;\n    className?: string;\n}\n\nconst KEYCAP =\n    'flex h-[20px] min-w-[20px] items-center justify-center rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] px-[4px] [box-shadow:0_1px_0_0_rgba(0,0,0,0.15)]';\nconst LABEL = 'text-[13px] font-medium tracking-[0.14px] text-[var(--malachite-text-secondary)]';\n\nconst NavKey: React.FC<{\n    onClick?: () => void;\n    disabled?: boolean;\n    ariaLabel: string;\n    children: React.ReactNode;\n}> = ({ onClick, disabled, ariaLabel, children }) => (\n    <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        onClick={onClick}\n        disabled={disabled}\n        className={`${KEYCAP} transition-opacity ${FOCUS_RING} ${\n            disabled\n                ? 'cursor-not-allowed opacity-40'\n                : 'cursor-pointer hover:border-[var(--malachite-text-placeholder)]'\n        }`}\n    >\n        {children}\n    </button>\n);\n\nconst SidePanelNavFooter: React.FC<SidePanelNavFooterProps> = ({\n    onNavigateUp,\n    onNavigateDown,\n    canNavigateUp = false,\n    canNavigateDown = false,\n    actions,\n    className = '',\n}) => (\n    <div className={`flex w-full items-center justify-between ${className}`}>\n        <div className=\"flex items-center gap-[8px]\">\n            <div className=\"flex items-center gap-[4px]\">\n                <NavKey ariaLabel=\"Previous\" onClick={onNavigateUp} disabled={!canNavigateUp}>\n                    <CaretUpIcon size={11} />\n                </NavKey>\n                <NavKey ariaLabel=\"Next\" onClick={onNavigateDown} disabled={!canNavigateDown}>\n                    <CaretDownIcon size={11} />\n                </NavKey>\n            </div>\n            <span className={LABEL}>Navigate</span>\n            <div className=\"ml-[20px] flex items-center gap-[8px]\">\n                <span\n                    className={`${KEYCAP} px-[6px] text-[10px] font-medium uppercase tracking-[0.5px] text-[var(--malachite-text-placeholder)]`}\n                >\n                    esc\n                </span>\n                <span className={LABEL}>Close</span>\n            </div>\n        </div>\n        {actions ? <div className=\"flex items-center\">{actions}</div> : null}\n    </div>\n);\n\nexport default SidePanelNavFooter;\nexport { SidePanelNavFooter };\n"],"names":["KEYCAP","LABEL","NavKey","onClick","disabled","ariaLabel","children","jsx","FOCUS_RING","SidePanelNavFooter","onNavigateUp","onNavigateDown","canNavigateUp","canNavigateDown","actions","className","jsxs","CaretUpIcon","CaretDownIcon"],"mappings":";;;;AAcA,MAAMA,IACF,sNACEC,IAAQ,oFAERC,IAKD,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,UAAAC,QAClC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAK;AAAA,IACL,cAAYF;AAAA,IACZ,SAAAF;AAAA,IACA,UAAAC;AAAA,IACA,WAAW,GAAGJ,CAAM,uBAAuBQ,CAAU,IACjDJ,IACM,kCACA,iEACV;AAAA,IAEC,UAAAE;AAAA,EAAA;AACL,GAGEG,IAAwD,CAAC;AAAA,EAC3D,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAW,4CAA4CD,CAAS,IACjE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,MAAA,gBAAAT,EAACL,GAAA,EAAO,WAAU,YAAW,SAASQ,GAAc,UAAU,CAACE,GAC3D,UAAA,gBAAAL,EAACU,GAAA,EAAY,MAAM,GAAA,CAAI,GAC3B;AAAA,MACA,gBAAAV,EAACL,GAAA,EAAO,WAAU,QAAO,SAASS,GAAgB,UAAU,CAACE,GACzD,UAAA,gBAAAN,EAACW,GAAA,EAAc,MAAM,IAAI,EAAA,CAC7B;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAX,EAAC,QAAA,EAAK,WAAWN,GAAO,UAAA,YAAQ;AAAA,IAChC,gBAAAe,EAAC,OAAA,EAAI,WAAU,yCACX,UAAA;AAAA,MAAA,gBAAAT;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,GAAGP,CAAM;AAAA,UACvB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGD,gBAAAO,EAAC,QAAA,EAAK,WAAWN,GAAO,UAAA,QAAA,CAAK;AAAA,IAAA,EAAA,CACjC;AAAA,EAAA,GACJ;AAAA,EACCa,IAAU,gBAAAP,EAAC,OAAA,EAAI,WAAU,qBAAqB,aAAQ,IAAS;AAAA,EAAA,CACpE;"}