@stackone/malachite 2.63.0 → 2.64.0

package/COMPONENTS.md

@@ -98,6 +98,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 ## Buttons & actions
 
 - **`Button`** — Primary button. Variants: `filled`, `outline`, `surface` (outline's geometry on a ground of its own, for a control sitting on a tinted surface), `assistant` (the violet the assistant is named in — provenance, not a severity: it says who is being asked, not that anything is wrong), `destructive`, `success`, `warning`, `error`, `ghost`, `no-style`. Supports `iconOnly`, `loading`, `tooltip`. _Key props:_ `variant`, `size`, `icon`, `iconOnly`, `loading`, `disabled`, `fill`, `tooltip`.
+- **`CloseButton`** — The bare X that dismisses a screen, panel or wizard: secondary at rest, primary on hover and keyboard focus, with no box or background at either. Use it instead of a `ghost` `Button` (which draws a hover box) or `no-style` (which has no disabled look). `surface="inverse"` is for a panel that stays dark in every theme, such as `SplitScreenLayout`’s, and reads the `closeButton` theme tokens. `loading` swaps the X for a spinner and sets `aria-busy`. Disabled and loading both use `aria-disabled` rather than `disabled`, so they ignore clicks but stay focusable and can still trigger a `Tooltip` explaining why. Named "Close" unless `aria-label` says otherwise. _Key props:_ `onClick`, `aria-label`, `size` (`small` 24px | `medium` 32px, 12px glyph), `surface` (`default` | `inverse`), `disabled`, `loading`.
 - **`PillButton`** — Pill-shaped button, often used for filters/toggleable chips. `shape="tab"` squares the top corners so a row of them reads as attached to whatever sits above — the controls under a chat composer. Pass `href` and an interactive, non-disabled pill renders a real anchor (cmd-click, copy-link) instead of navigating from `onClick`; a disabled or `interactive={false}` pill stays static, and an unsafe scheme such as `javascript:` is dropped. `target="_blank"` always carries `noopener noreferrer`. _Key props:_ `label`, `icon`, `trailingIcon`, `selected`, `disabled`, `interactive`, `size`, `variant`, `shape` (`pill` | `tab`), `onClick`, `href`, `target`, `rel`.
 - **`Link`** — Styled anchor/link text. _Key props:_ `LinkProps`.
 - **`InlineConfirm`** — A confirmation asked on the control that triggered it rather than in a modal, for a reversible bulk edit where a dialog would be heavier than the change it guards. Drawn to the design's chip: 33px tall, 12px radius, its confirm cell running to the pill's own edge between two rules. Reads its own `inlineConfirm` theme tokens — a shade off the `SelectionBar` it appears beside, by design. Carries a spinning glyph by default — its own, so it takes the pill's colour rather than the sheet's dimmed grey — standing for a change waiting on an answer; pass `icon={null}` to drop it or a node to replace it. Anchored placement is in viewport coordinates, so the chip must not sit inside an ancestor carrying `transform`, `filter` or `contain`. It takes focus on open so `Enter` confirms, dismisses on `Escape` (through the shared escape-layer stack, so the topmost overlay answers) or a click outside, and returns focus to whatever opened it. `role="alertdialog"` named by the message itself, so the confirm button is never announced bare. Only one can be open at a time: opening a second dismisses the first, so it is never ambiguous what Yes answers. Pass `anchorTo` (a ref to the control it answers for) and it pins itself to that control's left, follows it while the page or a sticky header scrolls, dismisses once it scrolls out of view, and treats clicks on it as inside — without which the same click would dismiss and reopen. Left unanchored it renders in flow for the consumer to place, and must then not sit in a container that clips overflow (`Table` header cells among them). Nothing renders while `open` is false, and its listeners are attached only while it is open. _Key props:_ `open`, `message`, `confirmLabel`, `onConfirm`, `onDismiss`, `anchorTo`, `icon`, `className`, `style`.

package/dist/components/CloseButton.js

@@ -0,0 +1,76 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import h from "./CustomIcons/DismissIcon.js";
+import { FOCUS_RING_CLOSE_BUTTON_INVERSE as v, FOCUS_RING as p } from "./focusRing.js";
+const x = {
+  small: { target: 24, glyph: 12 },
+  medium: { target: 32, glyph: 12 }
+}, y = {
+  default: {
+    idle: "text-[var(--malachite-text-secondary,rgb(123,123,123))]",
+    interactive: "hover:text-[var(--malachite-text-primary,rgb(10,10,10))] focus-visible:text-[var(--malachite-text-primary,rgb(10,10,10))]",
+    disabled: "text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
+    focusRing: p
+  },
+  inverse: {
+    idle: "text-[var(--malachite-close-button-inverse-foreground,rgba(255,255,255,0.7))]",
+    interactive: "hover:text-[var(--malachite-close-button-inverse-hover-foreground,rgb(255,255,255))] focus-visible:text-[var(--malachite-close-button-inverse-hover-foreground,rgb(255,255,255))]",
+    disabled: "text-[var(--malachite-close-button-inverse-disabled-foreground,rgba(255,255,255,0.35))]",
+    focusRing: v
+  }
+}, S = (e, a) => {
+  const { idle: r, interactive: o, disabled: t, focusRing: i } = y[e];
+  return `${{
+    enabled: `${r} ${o} cursor-pointer`,
+    disabled: `${t} cursor-not-allowed`,
+    loading: `${r} cursor-progress`
+  }[a]} ${i}`;
+}, C = "flex shrink-0 items-center justify-center rounded-md border-0 bg-transparent p-0 transition-colors", $ = (e) => {
+  e.preventDefault(), e.stopPropagation();
+}, E = f(
+  ({
+    onClick: e,
+    "aria-label": a = "Close",
+    "aria-labelledby": r,
+    disabled: o = !1,
+    loading: t = !1,
+    size: i = "small",
+    surface: n = "default",
+    className: u = "",
+    ...m
+  }, g) => {
+    const { target: d, glyph: s } = x[i], c = o && "disabled" || t && "loading" || "enabled", b = c !== "enabled";
+    return /* @__PURE__ */ l(
+      "button",
+      {
+        ...m,
+        ref: g,
+        type: "button",
+        "aria-label": a,
+        "aria-labelledby": r,
+        "aria-disabled": b ? !0 : void 0,
+        "aria-busy": t ? !0 : void 0,
+        onClick: b ? $ : e,
+        className: `${C} ${S(n, c)} ${u}`,
+        style: { width: d, height: d },
+        children: t ? (
+          // Not `Spinner`: its smallest step is 14px inside a min-height wrapper.
+          /* @__PURE__ */ l(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: "box-border shrink-0 animate-spin rounded-full border-2 border-solid border-current border-t-transparent motion-reduce:animate-none motion-reduce:border-t-current",
+              style: { width: s, height: s }
+            }
+          )
+        ) : /* @__PURE__ */ l(h, { size: s })
+      }
+    );
+  }
+);
+E.displayName = "CloseButton";
+export {
+  E as CloseButton,
+  E as default
+};
+//# sourceMappingURL=CloseButton.js.map

package/dist/components/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.js","sources":["../../src/components/CloseButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { FOCUS_RING, FOCUS_RING_CLOSE_BUTTON_INVERSE } from './focusRing';\n\nexport type CloseButtonSize = 'small' | 'medium';\n\n/** `inverse` is for a surface that stays dark in every theme, e.g. `SplitScreenLayout`'s panel. */\nexport type CloseButtonSurface = 'default' | 'inverse';\n\nexport interface CloseButtonProps\n    extends Omit<\n        React.ButtonHTMLAttributes<HTMLButtonElement>,\n        | 'children'\n        | 'className'\n        | 'style'\n        | 'color'\n        | 'type'\n        | 'disabled'\n        | 'onClick'\n        | 'aria-label'\n        | 'aria-disabled'\n        | 'aria-busy'\n    > {\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    /** Accessible name. Defaults to \"Close\"; name what closes when there are several. */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    disabled?: boolean;\n    /** Shows a spinner in place of the X, sets `aria-busy` and ignores clicks. */\n    loading?: boolean;\n    /** `small` is a 24px target, `medium` a 32px one. The glyph is 12px in both. */\n    size?: CloseButtonSize;\n    surface?: CloseButtonSurface;\n    className?: string;\n}\n\nconst SIZE_PX: Record<CloseButtonSize, { target: number; glyph: number }> = {\n    small: { target: 24, glyph: 12 },\n    medium: { target: 32, glyph: 12 },\n};\n\nconst SURFACE_CLASSES: Record<\n    CloseButtonSurface,\n    { idle: string; interactive: string; disabled: string; focusRing: string }\n> = {\n    default: {\n        idle: 'text-[var(--malachite-text-secondary,rgb(123,123,123))]',\n        interactive:\n            'hover:text-[var(--malachite-text-primary,rgb(10,10,10))] focus-visible:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n        disabled: 'text-[var(--malachite-text-dimmed,rgb(161,161,161))]',\n        focusRing: FOCUS_RING,\n    },\n    inverse: {\n        idle: 'text-[var(--malachite-close-button-inverse-foreground,rgba(255,255,255,0.7))]',\n        interactive:\n            'hover:text-[var(--malachite-close-button-inverse-hover-foreground,rgb(255,255,255))] focus-visible:text-[var(--malachite-close-button-inverse-hover-foreground,rgb(255,255,255))]',\n        disabled:\n            'text-[var(--malachite-close-button-inverse-disabled-foreground,rgba(255,255,255,0.35))]',\n        focusRing: FOCUS_RING_CLOSE_BUTTON_INVERSE,\n    },\n};\n\ntype CloseButtonState = 'enabled' | 'disabled' | 'loading';\n\nconst stateClassesOf = (surface: CloseButtonSurface, state: CloseButtonState): string => {\n    const { idle, interactive, disabled, focusRing } = SURFACE_CLASSES[surface];\n    const byState: Record<CloseButtonState, string> = {\n        enabled: `${idle} ${interactive} cursor-pointer`,\n        disabled: `${disabled} cursor-not-allowed`,\n        loading: `${idle} cursor-progress`,\n    };\n    return `${byState[state]} ${focusRing}`;\n};\n\nconst BASE_CLASSES =\n    'flex shrink-0 items-center justify-center rounded-md border-0 bg-transparent p-0 transition-colors';\n\n// A click on an aria-disabled button still dispatches, so stop it before an ancestor's handler runs.\nconst swallowClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n};\n\n/** The bare X that dismisses a screen or panel: no box at rest or on hover. */\nconst CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(\n    (\n        {\n            onClick,\n            'aria-label': ariaLabel = 'Close',\n            'aria-labelledby': ariaLabelledBy,\n            disabled = false,\n            loading = false,\n            size = 'small',\n            surface = 'default',\n            className = '',\n            ...rest\n        },\n        ref,\n    ) => {\n        const { target, glyph } = SIZE_PX[size];\n        const state: CloseButtonState =\n            (disabled && 'disabled') || (loading && 'loading') || 'enabled';\n        const inactive = state !== 'enabled';\n\n        return (\n            <button\n                {...rest}\n                ref={ref}\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                // aria-disabled, not `disabled`: a disabled element gets no pointer events, so a\n                // wrapping Tooltip could never explain it, and focus would drop to <body> mid-request.\n                aria-disabled={inactive ? true : undefined}\n                aria-busy={loading ? true : undefined}\n                onClick={inactive ? swallowClick : onClick}\n                className={`${BASE_CLASSES} ${stateClassesOf(surface, state)} ${className}`}\n                style={{ width: target, height: target }}\n            >\n                {loading ? (\n                    // Not `Spinner`: its smallest step is 14px inside a min-height wrapper.\n                    <span\n                        aria-hidden\n                        className=\"box-border shrink-0 animate-spin rounded-full border-2 border-solid border-current border-t-transparent motion-reduce:animate-none motion-reduce:border-t-current\"\n                        style={{ width: glyph, height: glyph }}\n                    />\n                ) : (\n                    <DismissIcon size={glyph} />\n                )}\n            </button>\n        );\n    },\n);\n\nCloseButton.displayName = 'CloseButton';\n\nexport default CloseButton;\nexport { CloseButton };\n"],"names":["SIZE_PX","SURFACE_CLASSES","FOCUS_RING","FOCUS_RING_CLOSE_BUTTON_INVERSE","stateClassesOf","surface","state","idle","interactive","disabled","focusRing","BASE_CLASSES","swallowClick","event","CloseButton","forwardRef","onClick","ariaLabel","ariaLabelledBy","loading","size","className","rest","ref","target","glyph","inactive","jsx","DismissIcon"],"mappings":";;;;AAoCA,MAAMA,IAAsE;AAAA,EACxE,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAA;AAAA,EAC5B,QAAQ,EAAE,QAAQ,IAAI,OAAO,GAAA;AACjC,GAEMC,IAGF;AAAA,EACA,SAAS;AAAA,IACL,MAAM;AAAA,IACN,aACI;AAAA,IACJ,UAAU;AAAA,IACV,WAAWC;AAAA,EAAA;AAAA,EAEf,SAAS;AAAA,IACL,MAAM;AAAA,IACN,aACI;AAAA,IACJ,UACI;AAAA,IACJ,WAAWC;AAAA,EAAA;AAEnB,GAIMC,IAAiB,CAACC,GAA6BC,MAAoC;AACrF,QAAM,EAAE,MAAAC,GAAM,aAAAC,GAAa,UAAAC,GAAU,WAAAC,EAAA,IAAcT,EAAgBI,CAAO;AAM1E,SAAO,GAL2C;AAAA,IAC9C,SAAS,GAAGE,CAAI,IAAIC,CAAW;AAAA,IAC/B,UAAU,GAAGC,CAAQ;AAAA,IACrB,SAAS,GAAGF,CAAI;AAAA,EAAA,EAEFD,CAAK,CAAC,IAAII,CAAS;AACzC,GAEMC,IACF,sGAGEC,IAAe,CAACC,MAA+C;AACjE,EAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA;AACV,GAGMC,IAAcC;AAAA,EAChB,CACI;AAAA,IACI,SAAAC;AAAA,IACA,cAAcC,IAAY;AAAA,IAC1B,mBAAmBC;AAAA,IACnB,UAAAT,IAAW;AAAA,IACX,SAAAU,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,SAAAf,IAAU;AAAA,IACV,WAAAgB,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAM,EAAE,QAAAC,GAAQ,OAAAC,MAAUzB,EAAQoB,CAAI,GAChCd,IACDG,KAAY,cAAgBU,KAAW,aAAc,WACpDO,IAAWpB,MAAU;AAE3B,WACI,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGL;AAAA,QACJ,KAAAC;AAAA,QACA,MAAK;AAAA,QACL,cAAYN;AAAA,QACZ,mBAAiBC;AAAA,QAGjB,iBAAeQ,IAAW,KAAO;AAAA,QACjC,aAAWP,IAAU,KAAO;AAAA,QAC5B,SAASO,IAAWd,IAAeI;AAAA,QACnC,WAAW,GAAGL,CAAY,IAAIP,EAAeC,GAASC,CAAK,CAAC,IAAIe,CAAS;AAAA,QACzE,OAAO,EAAE,OAAOG,GAAQ,QAAQA,EAAA;AAAA,QAE/B,UAAAL;AAAA;AAAA,UAEG,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAO,EAAE,OAAOF,GAAO,QAAQA,EAAA;AAAA,YAAM;AAAA,UAAA;AAAA,YAGzC,gBAAAE,EAACC,GAAA,EAAY,MAAMH,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAI1C;AACJ;AAEAX,EAAY,cAAc;"}

package/dist/components/SplitScreenLayout.js

@@ -1,51 +1,34 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import c from "./CustomIcons/DismissIcon.js";
-const r = ({
-  onClose: i,
-  className: s = ""
-}) => /* @__PURE__ */ e(
-  "button",
-  {
-    type: "button",
-    "aria-label": "Close",
-    onClick: i,
-    className: `flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 transition-colors ${s}`,
-    children: /* @__PURE__ */ e(c, { size: 12 })
-  }
-), x = ({
-  left: i,
-  right: s,
-  logo: a,
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { CloseButton as s } from "./CloseButton.js";
+const f = ({
+  left: a,
+  right: n,
+  logo: r,
   onClose: l,
-  footer: n
-}) => /* @__PURE__ */ t("div", { className: "flex h-screen w-full overflow-hidden gap-3 bg-[var(--malachite-card-sunken-background)] p-3", children: [
-  /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 flex-col items-center px-[60px] py-[40px]", children: [
-    /* @__PURE__ */ t("div", { className: "flex h-6 w-full shrink-0 items-center justify-between", children: [
+  footer: c
+}) => /* @__PURE__ */ i("div", { className: "flex h-screen w-full overflow-hidden gap-3 bg-[var(--malachite-card-sunken-background)] p-3", children: [
+  /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col items-center px-[60px] py-[40px]", children: [
+    /* @__PURE__ */ i("div", { className: "flex h-6 w-full shrink-0 items-center justify-between", children: [
       /* @__PURE__ */ e("span", { className: "size-6 shrink-0", "aria-hidden": !0 }),
-      a ?? /* @__PURE__ */ e("span", { className: "size-6 shrink-0", "aria-hidden": !0 }),
-      /* @__PURE__ */ e("span", { className: "flex size-6 shrink-0 items-center justify-center", children: l ? /* @__PURE__ */ e(
-        r,
-        {
-          onClose: l,
-          className: "text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] lg:hidden"
-        }
-      ) : null })
+      r ?? /* @__PURE__ */ e("span", { className: "size-6 shrink-0", "aria-hidden": !0 }),
+      /* @__PURE__ */ e("span", { className: "flex size-6 shrink-0 items-center justify-center", children: l ? /* @__PURE__ */ e(s, { onClick: l, className: "lg:hidden" }) : null })
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex w-full min-h-0 flex-1 flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ e("div", { className: "m-auto flex w-full max-w-[380px] flex-col items-center py-10", children: i }) }),
-    /* @__PURE__ */ e("div", { className: "flex h-6 shrink-0 items-center justify-center", children: n })
+    /* @__PURE__ */ e("div", { className: "flex w-full min-h-0 flex-1 flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ e("div", { className: "m-auto flex w-full max-w-[380px] flex-col items-center py-10", children: a }) }),
+    /* @__PURE__ */ e("div", { className: "flex h-6 shrink-0 items-center justify-center", children: c })
   ] }),
-  /* @__PURE__ */ t("div", { className: "relative hidden min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-[28px] bg-[#2b2b2b] px-[60px] py-[40px] lg:flex", children: [
+  /* @__PURE__ */ i("div", { className: "relative hidden min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-[28px] bg-[#2b2b2b] px-[60px] py-[40px] lg:flex", children: [
     l ? /* @__PURE__ */ e(
-      r,
+      s,
       {
-        onClose: l,
-        className: "absolute top-[40px] right-[60px] z-10 text-white/70 hover:text-white"
+        onClick: l,
+        surface: "inverse",
+        className: "absolute top-[34px] right-[54px] z-10"
       }
     ) : null,
-    s
+    n
   ] })
 ] });
 export {
-  x as default
+  f as default
 };
 //# sourceMappingURL=SplitScreenLayout.js.map

package/dist/components/SplitScreenLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitScreenLayout.js","sources":["../../src/components/SplitScreenLayout.tsx"],"sourcesContent":["import React from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\n\ninterface SplitScreenLayoutProps {\n    left: React.ReactNode;\n    right: React.ReactNode;\n    logo?: React.ReactNode;\n    onClose?: () => void;\n    footer?: React.ReactNode;\n}\n\nconst CloseButton: React.FC<{ onClose: () => void; className?: string }> = ({\n    onClose,\n    className = '',\n}) => (\n    <button\n        type=\"button\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        className={`flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 transition-colors ${className}`}\n    >\n        <DismissIcon size={12} />\n    </button>\n);\n\nconst SplitScreenLayout: React.FC<SplitScreenLayoutProps> = ({\n    left,\n    right,\n    logo,\n    onClose,\n    footer,\n}) => (\n    <div className=\"flex h-screen w-full overflow-hidden gap-3 bg-[var(--malachite-card-sunken-background)] p-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col items-center px-[60px] py-[40px]\">\n            <div className=\"flex h-6 w-full shrink-0 items-center justify-between\">\n                <span className=\"size-6 shrink-0\" aria-hidden />\n                {logo ?? <span className=\"size-6 shrink-0\" aria-hidden />}\n                <span className=\"flex size-6 shrink-0 items-center justify-center\">\n                    {onClose ? (\n                        <CloseButton\n                            onClose={onClose}\n                            className=\"text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] lg:hidden\"\n                        />\n                    ) : null}\n                </span>\n            </div>\n            <div className=\"flex w-full min-h-0 flex-1 flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n                <div className=\"m-auto flex w-full max-w-[380px] flex-col items-center py-10\">\n                    {left}\n                </div>\n            </div>\n            <div className=\"flex h-6 shrink-0 items-center justify-center\">{footer}</div>\n        </div>\n        <div className=\"relative hidden min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-[28px] bg-[#2b2b2b] px-[60px] py-[40px] lg:flex\">\n            {onClose ? (\n                <CloseButton\n                    onClose={onClose}\n                    className=\"absolute top-[40px] right-[60px] z-10 text-white/70 hover:text-white\"\n                />\n            ) : null}\n            {right}\n        </div>\n    </div>\n);\n\nexport default SplitScreenLayout;\n"],"names":["CloseButton","onClose","className","jsx","DismissIcon","SplitScreenLayout","left","right","logo","footer","jsxs"],"mappings":";;AAWA,MAAMA,IAAqE,CAAC;AAAA,EACxE,SAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAK;AAAA,IACL,cAAW;AAAA,IACX,SAASF;AAAA,IACT,WAAW,iGAAiGC,CAAS;AAAA,IAErH,UAAA,gBAAAC,EAACC,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,EAAA;AAC3B,GAGEC,IAAsD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAP;AAAA,EACA,QAAAQ;AACJ,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,+FACX,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,iEACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,yDACX,UAAA;AAAA,MAAA,gBAAAP,EAAC,QAAA,EAAK,WAAU,mBAAkB,eAAW,IAAC;AAAA,MAC7CK,KAAQ,gBAAAL,EAAC,QAAA,EAAK,WAAU,mBAAkB,eAAW,IAAC;AAAA,MACvD,gBAAAA,EAAC,QAAA,EAAK,WAAU,oDACX,UAAAF,IACG,gBAAAE;AAAA,QAACH;AAAA,QAAA;AAAA,UACG,SAAAC;AAAA,UACA,WAAU;AAAA,QAAA;AAAA,MAAA,IAEd,KAAA,CACR;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAE,EAAC,SAAI,WAAU,4GACX,4BAAC,OAAA,EAAI,WAAU,gEACV,UAAAG,EAAA,CACL,EAAA,CACJ;AAAA,IACA,gBAAAH,EAAC,OAAA,EAAI,WAAU,iDAAiD,UAAAM,EAAA,CAAO;AAAA,EAAA,GAC3E;AAAA,EACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+IACV,UAAA;AAAA,IAAAT,IACG,gBAAAE;AAAA,MAACH;AAAA,MAAA;AAAA,QACG,SAAAC;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA,IAEd;AAAA,IACHM;AAAA,EAAA,EAAA,CACL;AAAA,EAAA,CACJ;"}
+{"version":3,"file":"SplitScreenLayout.js","sources":["../../src/components/SplitScreenLayout.tsx"],"sourcesContent":["import React from 'react';\nimport CloseButton from './CloseButton';\n\ninterface SplitScreenLayoutProps {\n    left: React.ReactNode;\n    right: React.ReactNode;\n    logo?: React.ReactNode;\n    onClose?: () => void;\n    footer?: React.ReactNode;\n}\n\nconst SplitScreenLayout: React.FC<SplitScreenLayoutProps> = ({\n    left,\n    right,\n    logo,\n    onClose,\n    footer,\n}) => (\n    <div className=\"flex h-screen w-full overflow-hidden gap-3 bg-[var(--malachite-card-sunken-background)] p-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col items-center px-[60px] py-[40px]\">\n            <div className=\"flex h-6 w-full shrink-0 items-center justify-between\">\n                <span className=\"size-6 shrink-0\" aria-hidden />\n                {logo ?? <span className=\"size-6 shrink-0\" aria-hidden />}\n                <span className=\"flex size-6 shrink-0 items-center justify-center\">\n                    {onClose ? <CloseButton onClick={onClose} className=\"lg:hidden\" /> : null}\n                </span>\n            </div>\n            <div className=\"flex w-full min-h-0 flex-1 flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n                <div className=\"m-auto flex w-full max-w-[380px] flex-col items-center py-10\">\n                    {left}\n                </div>\n            </div>\n            <div className=\"flex h-6 shrink-0 items-center justify-center\">{footer}</div>\n        </div>\n        <div className=\"relative hidden min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-[28px] bg-[#2b2b2b] px-[60px] py-[40px] lg:flex\">\n            {/* 6px in from 40/60: the 24px target is 12px wider than the glyph, which stays put. */}\n            {onClose ? (\n                <CloseButton\n                    onClick={onClose}\n                    surface=\"inverse\"\n                    className=\"absolute top-[34px] right-[54px] z-10\"\n                />\n            ) : null}\n            {right}\n        </div>\n    </div>\n);\n\nexport default SplitScreenLayout;\n"],"names":["SplitScreenLayout","left","right","logo","onClose","footer","jsxs","jsx","CloseButton"],"mappings":";;AAWA,MAAMA,IAAsD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AACJ,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,+FACX,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,iEACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,yDACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,mBAAkB,eAAW,IAAC;AAAA,MAC7CJ,KAAQ,gBAAAI,EAAC,QAAA,EAAK,WAAU,mBAAkB,eAAW,IAAC;AAAA,MACvD,gBAAAA,EAAC,QAAA,EAAK,WAAU,oDACX,UAAAH,IAAU,gBAAAG,EAACC,GAAA,EAAY,SAASJ,GAAS,WAAU,YAAA,CAAY,IAAK,KAAA,CACzE;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAG,EAAC,SAAI,WAAU,4GACX,4BAAC,OAAA,EAAI,WAAU,gEACV,UAAAN,EAAA,CACL,EAAA,CACJ;AAAA,IACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,iDAAiD,UAAAF,EAAA,CAAO;AAAA,EAAA,GAC3E;AAAA,EACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+IAEV,UAAA;AAAA,IAAAF,IACG,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,SAASJ;AAAA,QACT,SAAQ;AAAA,QACR,WAAU;AAAA,MAAA;AAAA,IAAA,IAEd;AAAA,IACHF;AAAA,EAAA,EAAA,CACL;AAAA,EAAA,CACJ;"}

package/dist/components/focusRing.js

@@ -1,10 +1,11 @@
-const o = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]", e = "outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]", i = "pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]", t = "outline-none has-[[role=radio]:focus-visible]:outline-offset-2 has-[[role=radio]:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]", l = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]", s = "outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]";
+const o = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]", e = "outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]", i = "pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]", t = "outline-none has-[[role=radio]:focus-visible]:outline-offset-2 has-[[role=radio]:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]", s = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]", l = "outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]", n = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-close-button-inverse-hover-foreground,rgb(255,255,255))]";
 export {
   o as FOCUS_RING,
-  s as FOCUS_RING_INLINE_CONFIRM_INSET,
+  n as FOCUS_RING_CLOSE_BUTTON_INVERSE,
+  l as FOCUS_RING_INLINE_CONFIRM_INSET,
   e as FOCUS_RING_INSET,
   i as FOCUS_RING_INSET_OVERLAY,
-  l as FOCUS_RING_SELECTION_BAR,
+  s as FOCUS_RING_SELECTION_BAR,
   t as FOCUS_RING_WITHIN_RADIO
 };
 //# sourceMappingURL=focusRing.js.map

package/dist/components/focusRing.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.js","sources":["../../src/components/focusRing.ts"],"sourcesContent":["// Shared keyboard focus indicator for interactive components.\n\n/** Standard focus ring — sits 2px outside the control. */\nexport const FOCUS_RING =\n    'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * Inset focus ring — drawn 2px inside the element edge. Use for full-bleed elements\n * inside an `overflow-hidden` container (e.g. Surface.Row) where an outset outline\n * would be clipped.\n */\nexport const FOCUS_RING_INSET =\n    'outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]';\n\n/** `FOCUS_RING_INSET` drawn by an overlay while its `group` ancestor has keyboard focus. */\nexport const FOCUS_RING_INSET_OVERLAY =\n    'pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]';\n\n/** Ring drawn on a wrapper when a control *inside* it takes focus. */\nexport const FOCUS_RING_WITHIN =\n    'outline-none has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * As `FOCUS_RING_WITHIN`, for a card whose control is a `role=\"radio\"` beside its links:\n * `:has(:focus-visible)` would also match a focused link and draw a second ring.\n */\nexport const FOCUS_RING_WITHIN_RADIO =\n    'outline-none has-[[role=radio]:focus-visible]:outline-offset-2 has-[[role=radio]:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/** Ring for a control on the SelectionBar, where `FOCUS_RING` would be invisible. */\nexport const FOCUS_RING_SELECTION_BAR =\n    'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]';\n\n/** Inset ring for a control on the InlineConfirm chip. */\nexport const FOCUS_RING_INLINE_CONFIRM_INSET =\n    'outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]';\n"],"names":["FOCUS_RING","FOCUS_RING_INSET","FOCUS_RING_INSET_OVERLAY","FOCUS_RING_WITHIN_RADIO","FOCUS_RING_SELECTION_BAR","FOCUS_RING_INLINE_CONFIRM_INSET"],"mappings":"AAGO,MAAMA,IACT,+GAOSC,IACT,oHAGSC,IACT,uJAUSC,IACT,qJAGSC,IACT,2HAGSC,IACT;"}
+{"version":3,"file":"focusRing.js","sources":["../../src/components/focusRing.ts"],"sourcesContent":["// Shared keyboard focus indicator for interactive components.\n\n/** Standard focus ring — sits 2px outside the control. */\nexport const FOCUS_RING =\n    'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * Inset focus ring — drawn 2px inside the element edge. Use for full-bleed elements\n * inside an `overflow-hidden` container (e.g. Surface.Row) where an outset outline\n * would be clipped.\n */\nexport const FOCUS_RING_INSET =\n    'outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]';\n\n/** `FOCUS_RING_INSET` drawn by an overlay while its `group` ancestor has keyboard focus. */\nexport const FOCUS_RING_INSET_OVERLAY =\n    'pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]';\n\n/** Ring drawn on a wrapper when a control *inside* it takes focus. */\nexport const FOCUS_RING_WITHIN =\n    'outline-none has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * As `FOCUS_RING_WITHIN`, for a card whose control is a `role=\"radio\"` beside its links:\n * `:has(:focus-visible)` would also match a focused link and draw a second ring.\n */\nexport const FOCUS_RING_WITHIN_RADIO =\n    'outline-none has-[[role=radio]:focus-visible]:outline-offset-2 has-[[role=radio]:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/** Ring for a control on the SelectionBar, where `FOCUS_RING` would be invisible. */\nexport const FOCUS_RING_SELECTION_BAR =\n    'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]';\n\n/** Inset ring for a control on the InlineConfirm chip. */\nexport const FOCUS_RING_INLINE_CONFIRM_INSET =\n    'outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]';\n\n/** Ring for `CloseButton surface=\"inverse\"`, where `FOCUS_RING` would be invisible on the dark panel. */\nexport const FOCUS_RING_CLOSE_BUTTON_INVERSE =\n    'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-close-button-inverse-hover-foreground,rgb(255,255,255))]';\n"],"names":["FOCUS_RING","FOCUS_RING_INSET","FOCUS_RING_INSET_OVERLAY","FOCUS_RING_WITHIN_RADIO","FOCUS_RING_SELECTION_BAR","FOCUS_RING_INLINE_CONFIRM_INSET","FOCUS_RING_CLOSE_BUTTON_INVERSE"],"mappings":"AAGO,MAAMA,IACT,+GAOSC,IACT,oHAGSC,IACT,uJAUSC,IACT,qJAGSC,IACT,2HAGSC,IACT,iIAGSC,IACT;"}

package/dist/index.d.ts

@@ -927,6 +927,28 @@ export declare interface ClampTextProps {
 
 export declare const ClearIcon: React.FC<IconProps_27>;
 
+/** The bare X that dismisses a screen or panel: no box at rest or on hover. */
+export declare const CloseButton: default_2.ForwardRefExoticComponent<CloseButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface CloseButtonProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'color' | 'type' | 'disabled' | 'onClick' | 'aria-label' | 'aria-disabled' | 'aria-busy'> {
+    onClick?: default_2.MouseEventHandler<HTMLButtonElement>;
+    /** Accessible name. Defaults to "Close"; name what closes when there are several. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    /** Shows a spinner in place of the X, sets `aria-busy` and ignores clicks. */
+    loading?: boolean;
+    /** `small` is a 24px target, `medium` a 32px one. The glyph is 12px in both. */
+    size?: CloseButtonSize;
+    surface?: CloseButtonSurface;
+    className?: string;
+}
+
+export declare type CloseButtonSize = 'small' | 'medium';
+
+/** `inverse` is for a surface that stays dark in every theme, e.g. `SplitScreenLayout`'s panel. */
+export declare type CloseButtonSurface = 'default' | 'inverse';
+
 export declare const CloseIcon: React.FC<IconProps_28>;
 
 export declare const CodeBlock: default_2.FC<CodeBlockProps>;
@@ -3258,6 +3280,12 @@ export declare interface MalachiteTheme {
             divider: string;
             shadow: string;
         };
+        /** `CloseButton surface="inverse"`: the X on a panel that is dark in every theme. */
+        closeButton: {
+            inverseForeground: string;
+            inverseHoverForeground: string;
+            inverseDisabledForeground: string;
+        };
         dropdown: {
             border: string;
             borderActive: string;
@@ -3803,6 +3831,7 @@ export declare interface PartialMalachiteTheme {
         cardStrip?: Partial<MalachiteTheme['colors']['cardStrip']>;
         selectionBar?: Partial<MalachiteTheme['colors']['selectionBar']>;
         inlineConfirm?: Partial<MalachiteTheme['colors']['inlineConfirm']>;
+        closeButton?: Partial<MalachiteTheme['colors']['closeButton']>;
         dropdown?: Partial<MalachiteTheme['colors']['dropdown']>;
         tag?: {
             [K in keyof MalachiteTheme['colors']['tag']]?: Partial<MalachiteTheme['colors']['tag'][K]>;