@stackone/malachite 2.27.1 → 2.28.0

package/COMPONENTS.md

@@ -60,6 +60,8 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`FooterNav`** — Footer navigation bar of links. _Key props:_ `FooterNavLink[]`.
 - **`FooterLinks`** — Inline list of footer links (e.g. terms, privacy, support).
 - **`StepTabs`** — Header for a short, ordered flow — a two-step drawer or wizard panel. Each step is a button carrying `aria-current="step"`, not a tab: the body beneath is the step’s form, so it keeps the normal tab order instead of adopting a `tablist`’s arrow-key contract. States are current / complete (a check, still reachable so the user can go back) / upcoming. For a read-only progress readout use `Stepper`. _Key props:_ `items` (`key`, `label`, `hint`, `disabled`), `activeKey`, `completedKeys`, `onChange`, `aria-label`, `aria-labelledby`, `className`.
+- **`CommandPalette`** — Chrome for a command palette, over a headless library that keeps its own elements. `FieldRow`/`Field` take the query input, `List` the scrolling viewport (with a bottom fade for `hasMoreBelow`), `Group` + `Heading` a titled section, and `Row` one result — composing leading/label/crumb/meta/status/hint so names start and statuses end on the same x down the list. `Message` covers empty and loading, `Legend` documents the scope sigils, `Footer` the key hints. Everything the library owns is taken through `asChild`, so its role, id, state and handlers are untouched.
+- **`Keycap`** — One key on a keyboard, drawn as a cap — `esc`, `⌘`, a caret, or a sigil a user types to scope a search. Renders a `<kbd>`, or a button as soon as either `onClick` or `disabled` is passed — `disabled={false}` included, since naming the prop at all is the statement that the cap is a control. `SidePanelNavFooter` is built on it.
 - **`CollapsibleSection`** — Collapsible sunken-card section (title - subtitle header, disclosure arrow right) for stacked detail sections in side panels and detail pages. A preset over `Accordion`’s `sunken` variant.
 - **`KeyValueList`** — Bordered card of label/value rows (`KeyValueList.Row`) for entity details: fixed-width secondary labels, free-form values, row dividers.
 

package/dist/components/CommandPalette.js

@@ -0,0 +1,148 @@
+import { jsx as r, jsxs as n, Fragment as g } from "react/jsx-runtime";
+import y, { useState as w, useEffect as N, useRef as k, useCallback as $ } from "react";
+import { createPortal as R } from "react-dom";
+import { ShadowRootWrapper as _ } from "../ShadowRootWrapper.js";
+import { Keycap as z } from "./Keycap.js";
+import { paintOnChild as i } from "./asChild.js";
+import { useOverlayBehaviour as F } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as L, overlayIdentity as h } from "./portalOverlay.js";
+const C = "w-full max-w-[640px] overflow-hidden rounded-[var(--malachite-radius-xxl,14px)] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] outline-none [box-shadow:0_16px_48px_0_rgba(0,0,0,0.18)]", E = ({
+  children: a,
+  onDismiss: e,
+  "aria-label": t,
+  className: l = "",
+  style: s
+}) => {
+  const [c, p] = w(!1);
+  N(() => p(!0), []);
+  const d = k(null), m = $(() => e == null ? void 0 : e(), [e]), { ref: b, isTopmost: u, zIndex: v, elevated: f } = F({
+    open: !0,
+    onClose: m,
+    hostRef: d,
+    initialFocus: "content"
+  });
+  return c ? R(
+    /* @__PURE__ */ r(
+      _,
+      {
+        hostRef: d,
+        hostStyle: { position: "relative", zIndex: v },
+        hostProps: f ? { ...h("commandpalette"), [L]: "" } : h("commandpalette"),
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: "fixed inset-0 z-[1000] flex items-start justify-center pt-[10vh] bg-[var(--malachite-overlay-scrim,rgba(0,0,0,0.5))]",
+            onClick: e ? (x) => x.target === x.currentTarget && e() : void 0,
+            role: "presentation",
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                ref: b,
+                role: "dialog",
+                "aria-modal": u ? "true" : void 0,
+                "aria-label": t,
+                tabIndex: -1,
+                className: `${C} ${l}`.trim(),
+                style: s,
+                children: a
+              }
+            )
+          }
+        )
+      }
+    ),
+    document.body
+  ) : null;
+}, I = "w-full border-none bg-transparent px-0 py-[18px] text-[length:var(--malachite-font-size-xlarge,18px)] text-[var(--malachite-text-primary)] outline-none placeholder:text-[var(--malachite-text-placeholder)]", S = ({ children: a, className: e = "", style: t }) => i(a, `${I} ${e}`.trim(), t), T = ({ children: a, scope: e, className: t = "" }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `flex items-center gap-2 border-0 border-b border-solid border-[var(--malachite-card-border)] px-[18px] ${t}`.trim(),
+    children: [
+      e,
+      a
+    ]
+  }
+), j = ({ children: a }) => /* @__PURE__ */ r("span", { className: "flex-none whitespace-nowrap rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-sunken-background)] px-2 py-[3px] text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-primary)]", children: a }), P = "max-h-[420px] overflow-auto py-1 bg-[var(--malachite-card-background)]", A = ({ children: a, hasMoreBelow: e = !1, className: t = "", style: l }) => /* @__PURE__ */ n("div", { className: "relative", children: [
+  i(a, `${P} ${t}`.trim(), l),
+  e ? /* @__PURE__ */ r(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: "pointer-events-none absolute inset-x-0 bottom-0 h-[28px] bg-[linear-gradient(to_bottom,transparent,var(--malachite-card-background))]"
+    }
+  ) : null
+] }), G = ({ children: a, divider: e = !1, className: t = "", style: l }) => i(
+  a,
+  `block pt-1 pb-2 ${e ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""} ${t}`.trim(),
+  l
+), M = ({
+  children: a,
+  trailing: e
+}) => /* @__PURE__ */ n("div", { className: "mb-1 flex items-center gap-2 px-4 text-[length:var(--malachite-font-size-xsmall,11px)] font-semibold uppercase tracking-[0.06em] text-[var(--malachite-text-secondary)]", children: [
+  a,
+  e
+] }), O = "group mx-2 flex cursor-pointer items-center gap-2 rounded-[var(--malachite-radius-xl,12px)] px-3 py-[10px] text-[length:var(--malachite-font-size-15,15px)] text-[var(--malachite-text-primary)] transition-colors hover:bg-[var(--malachite-card-sunken-background)] data-[selected=true]:bg-[var(--malachite-card-sunken-background)]", V = ({
+  children: a,
+  selected: e = !1,
+  leading: t,
+  label: l,
+  crumb: s,
+  meta: c,
+  status: p,
+  hint: d,
+  className: m = ""
+}) => i(
+  a,
+  `${O} ${e ? "bg-[var(--malachite-card-sunken-background)]" : ""} ${m}`.trim(),
+  void 0,
+  /* @__PURE__ */ n(g, { children: [
+    t,
+    /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+      l ? /* @__PURE__ */ r("span", { className: "min-w-0 flex-[0_1_auto] overflow-hidden text-ellipsis whitespace-nowrap", children: l }) : null,
+      s ? /* @__PURE__ */ r("span", { className: "flex-none whitespace-nowrap", children: s }) : null,
+      c ? /* @__PURE__ */ r("span", { className: "flex-none", children: c }) : null
+    ] }),
+    /* @__PURE__ */ r("span", { className: "flex min-w-[84px] flex-none justify-end", children: p }),
+    /* @__PURE__ */ r(
+      "span",
+      {
+        className: `flex-none ${e ? "" : "invisible"} group-data-[selected=true]:visible`,
+        children: d
+      }
+    )
+  ] })
+), H = ({ children: a, className: e = "", style: t }) => {
+  const l = `block px-4 py-2 text-[length:var(--malachite-font-size-medium,14px)] text-[var(--malachite-text-secondary)] ${e}`.trim();
+  return y.isValidElement(a) ? i(a, l, t) : /* @__PURE__ */ r("div", { className: l, style: t, children: a });
+}, W = ({ items: a }) => /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-[14px] px-4 pt-[10px] pb-1 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-secondary)]", children: a.map((e) => /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-[6px]", children: [
+  /* @__PURE__ */ r(z, { size: "small", children: e.key }),
+  e.label
+] }, e.key)) }), B = ({ children: a, columns: e = 2, className: t = "" }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: `grid gap-1 px-2 ${e === 2 ? "grid-cols-2" : "grid-cols-1"} ${t}`.trim(),
+    children: a
+  }
+), K = ({
+  children: a,
+  trailing: e
+}) => /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-3 border-0 border-t border-solid border-[var(--malachite-card-border)] px-4 py-3 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-secondary)]", children: [
+  /* @__PURE__ */ r("span", { className: "flex items-center gap-[10px]", children: a }),
+  e ? /* @__PURE__ */ r("span", { className: "flex items-center gap-[10px]", children: e }) : null
+] }), o = E;
+o.FieldRow = T;
+o.Field = S;
+o.ScopeChip = j;
+o.List = A;
+o.Group = G;
+o.Heading = M;
+o.Row = V;
+o.Grid = B;
+o.Message = H;
+o.Legend = W;
+o.Footer = K;
+export {
+  o as CommandPalette,
+  o as default
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/components/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../src/components/CommandPalette.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport Keycap from './Keycap';\nimport { paintOnChild } from './asChild';\nimport { useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nconst PANEL =\n    'w-full max-w-[640px] overflow-hidden rounded-[var(--malachite-radius-xxl,14px)] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] outline-none [box-shadow:0_16px_48px_0_rgba(0,0,0,0.18)]';\n\nexport interface CommandPaletteProps {\n    children?: React.ReactNode;\n    /** Scrim click, and Escape unless a consumer handler already called `preventDefault`. */\n    onDismiss?: () => void;\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/** Open while mounted. */\nconst CommandPaletteRoot: React.FC<CommandPaletteProps> = ({\n    children,\n    onDismiss,\n    'aria-label': ariaLabel,\n    className = '',\n    style,\n}) => {\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const dismiss = useCallback(() => onDismiss?.(), [onDismiss]);\n    const { ref, isTopmost, zIndex, elevated } = useOverlayBehaviour({\n        open: true,\n        onClose: dismiss,\n        hostRef,\n        initialFocus: 'content',\n    });\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('commandpalette'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('commandpalette')\n            }\n        >\n            <div\n                className=\"fixed inset-0 z-[1000] flex items-start justify-center pt-[10vh] bg-[var(--malachite-overlay-scrim,rgba(0,0,0,0.5))]\"\n                onClick={\n                    onDismiss\n                        ? (event) => event.target === event.currentTarget && onDismiss()\n                        : undefined\n                }\n                role=\"presentation\"\n            >\n                <div\n                    ref={ref}\n                    role=\"dialog\"\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-label={ariaLabel}\n                    tabIndex={-1}\n                    className={`${PANEL} ${className}`.trim()}\n                    style={style}\n                >\n                    {children}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\ninterface AsChildProps {\n    children: React.ReactElement;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst FIELD =\n    'w-full border-none bg-transparent px-0 py-[18px] text-[length:var(--malachite-font-size-xlarge,18px)] text-[var(--malachite-text-primary)] outline-none placeholder:text-[var(--malachite-text-placeholder)]';\n\nconst Field: React.FC<AsChildProps> = ({ children, className = '', style }) =>\n    paintOnChild(children, `${FIELD} ${className}`.trim(), style);\n\nexport interface FieldRowProps {\n    children?: React.ReactNode;\n    scope?: React.ReactNode;\n    className?: string;\n}\n\nconst FieldRow: React.FC<FieldRowProps> = ({ children, scope, className = '' }) => (\n    <div\n        className={`flex items-center gap-2 border-0 border-b border-solid border-[var(--malachite-card-border)] px-[18px] ${className}`.trim()}\n    >\n        {scope}\n        {children}\n    </div>\n);\n\nconst ScopeChip: React.FC<{ children?: React.ReactNode }> = ({ children }) => (\n    <span className=\"flex-none whitespace-nowrap rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-sunken-background)] px-2 py-[3px] text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-primary)]\">\n        {children}\n    </span>\n);\n\nexport interface ListProps extends AsChildProps {\n    hasMoreBelow?: boolean;\n}\n\nconst LIST = 'max-h-[420px] overflow-auto py-1 bg-[var(--malachite-card-background)]';\n\nconst List: React.FC<ListProps> = ({ children, hasMoreBelow = false, className = '', style }) => (\n    <div className=\"relative\">\n        {paintOnChild(children, `${LIST} ${className}`.trim(), style)}\n        {hasMoreBelow ? (\n            <div\n                aria-hidden\n                className=\"pointer-events-none absolute inset-x-0 bottom-0 h-[28px] bg-[linear-gradient(to_bottom,transparent,var(--malachite-card-background))]\"\n            />\n        ) : null}\n    </div>\n);\n\nexport interface GroupProps extends AsChildProps {\n    divider?: boolean;\n}\n\nconst Group: React.FC<GroupProps> = ({ children, divider = false, className = '', style }) =>\n    paintOnChild(\n        children,\n        `block pt-1 pb-2 ${\n            divider ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]' : ''\n        } ${className}`.trim(),\n        style,\n    );\n\nconst Heading: React.FC<{ children?: React.ReactNode; trailing?: React.ReactNode }> = ({\n    children,\n    trailing,\n}) => (\n    <div className=\"mb-1 flex items-center gap-2 px-4 text-[length:var(--malachite-font-size-xsmall,11px)] font-semibold uppercase tracking-[0.06em] text-[var(--malachite-text-secondary)]\">\n        {children}\n        {trailing}\n    </div>\n);\n\nexport interface RowProps {\n    /** Its children are replaced, so give the item an explicit `value`/`keywords`. */\n    children: React.ReactElement;\n    selected?: boolean;\n    leading?: React.ReactNode;\n    label?: React.ReactNode;\n    crumb?: React.ReactNode;\n    meta?: React.ReactNode;\n    status?: React.ReactNode;\n    hint?: React.ReactNode;\n    className?: string;\n}\n\n// `data-selected` too: a headless library marks its active item without re-rendering the row.\nconst ROW =\n    'group mx-2 flex cursor-pointer items-center gap-2 rounded-[var(--malachite-radius-xl,12px)] px-3 py-[10px] text-[length:var(--malachite-font-size-15,15px)] text-[var(--malachite-text-primary)] transition-colors hover:bg-[var(--malachite-card-sunken-background)] data-[selected=true]:bg-[var(--malachite-card-sunken-background)]';\n\nconst Row: React.FC<RowProps> = ({\n    children,\n    selected = false,\n    leading,\n    label,\n    crumb,\n    meta,\n    status,\n    hint,\n    className = '',\n}) =>\n    paintOnChild(\n        children,\n        `${ROW} ${selected ? 'bg-[var(--malachite-card-sunken-background)]' : ''} ${className}`.trim(),\n        undefined,\n        <>\n            {leading}\n            <span className=\"flex min-w-0 flex-1 items-baseline gap-2\">\n                {label ? (\n                    <span className=\"min-w-0 flex-[0_1_auto] overflow-hidden text-ellipsis whitespace-nowrap\">\n                        {label}\n                    </span>\n                ) : null}\n                {crumb ? <span className=\"flex-none whitespace-nowrap\">{crumb}</span> : null}\n                {meta ? <span className=\"flex-none\">{meta}</span> : null}\n            </span>\n            <span className=\"flex min-w-[84px] flex-none justify-end\">{status}</span>\n            <span\n                className={`flex-none ${selected ? '' : 'invisible'} group-data-[selected=true]:visible`}\n            >\n                {hint}\n            </span>\n        </>,\n    );\n\nexport interface MessageProps {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst Message: React.FC<MessageProps> = ({ children, className = '', style }) => {\n    const classes =\n        `block px-4 py-2 text-[length:var(--malachite-font-size-medium,14px)] text-[var(--malachite-text-secondary)] ${className}`.trim();\n    return React.isValidElement(children) ? (\n        paintOnChild(children, classes, style)\n    ) : (\n        <div className={classes} style={style}>\n            {children}\n        </div>\n    );\n};\n\nexport interface LegendProps {\n    items: { key: string; label: string }[];\n}\n\nconst Legend: React.FC<LegendProps> = ({ items }) => (\n    <div className=\"flex flex-wrap gap-[14px] px-4 pt-[10px] pb-1 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-secondary)]\">\n        {items.map((item) => (\n            <span key={item.key} className=\"inline-flex items-center gap-[6px]\">\n                <Keycap size=\"small\">{item.key}</Keycap>\n                {item.label}\n            </span>\n        ))}\n    </div>\n);\n\nexport interface GridProps {\n    children?: React.ReactNode;\n    columns?: 1 | 2;\n    className?: string;\n}\n\nconst Grid: React.FC<GridProps> = ({ children, columns = 2, className = '' }) => (\n    <div\n        className={`grid gap-1 px-2 ${columns === 2 ? 'grid-cols-2' : 'grid-cols-1'} ${className}`.trim()}\n    >\n        {children}\n    </div>\n);\n\nconst Footer: React.FC<{ children?: React.ReactNode; trailing?: React.ReactNode }> = ({\n    children,\n    trailing,\n}) => (\n    <div className=\"flex items-center justify-between gap-3 border-0 border-t border-solid border-[var(--malachite-card-border)] px-4 py-3 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-secondary)]\">\n        <span className=\"flex items-center gap-[10px]\">{children}</span>\n        {trailing ? <span className=\"flex items-center gap-[10px]\">{trailing}</span> : null}\n    </div>\n);\n\ninterface CommandPaletteComponent extends React.FC<CommandPaletteProps> {\n    FieldRow: React.FC<FieldRowProps>;\n    Field: React.FC<AsChildProps>;\n    ScopeChip: React.FC<{ children?: React.ReactNode }>;\n    List: React.FC<ListProps>;\n    Group: React.FC<GroupProps>;\n    Heading: React.FC<{ children?: React.ReactNode; trailing?: React.ReactNode }>;\n    Row: React.FC<RowProps>;\n    Grid: React.FC<GridProps>;\n    Message: React.FC<MessageProps>;\n    Legend: React.FC<LegendProps>;\n    Footer: React.FC<{ children?: React.ReactNode; trailing?: React.ReactNode }>;\n}\n\nconst CommandPalette = CommandPaletteRoot as CommandPaletteComponent;\nCommandPalette.FieldRow = FieldRow;\nCommandPalette.Field = Field;\nCommandPalette.ScopeChip = ScopeChip;\nCommandPalette.List = List;\nCommandPalette.Group = Group;\nCommandPalette.Heading = Heading;\nCommandPalette.Row = Row;\nCommandPalette.Grid = Grid;\nCommandPalette.Message = Message;\nCommandPalette.Legend = Legend;\nCommandPalette.Footer = Footer;\n\nexport default CommandPalette;\nexport { CommandPalette };\n"],"names":["PANEL","CommandPaletteRoot","children","onDismiss","ariaLabel","className","style","isMounted","setIsMounted","useState","useEffect","hostRef","useRef","dismiss","useCallback","ref","isTopmost","zIndex","elevated","useOverlayBehaviour","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","event","FIELD","Field","paintOnChild","FieldRow","scope","jsxs","ScopeChip","LIST","List","hasMoreBelow","Group","divider","Heading","trailing","ROW","Row","selected","leading","label","crumb","meta","status","hint","Fragment","Message","classes","React","Legend","items","item","Keycap","Grid","columns","Footer","CommandPalette"],"mappings":"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"}

package/dist/components/Keycap.js

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import { FOCUS_RING as m } from "./focusRing.js";
+const c = {
+  small: "h-[18px] min-w-[18px]",
+  medium: "h-[20px] min-w-[20px]"
+}, b = "inline-flex items-center justify-center rounded-lg border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))]", n = "px-[6px] text-[10px] font-medium uppercase tracking-[0.5px] text-[var(--malachite-text-placeholder,rgb(187,187,187))]", x = "px-[4px]", h = ({
+  children: a,
+  size: e = "medium",
+  onClick: t,
+  disabled: r,
+  "aria-label": o,
+  "aria-labelledby": l,
+  className: p = ""
+}) => t !== void 0 || r !== void 0 ? /* @__PURE__ */ i(
+  "button",
+  {
+    type: "button",
+    "aria-label": o,
+    "aria-labelledby": l,
+    onClick: t,
+    disabled: r,
+    className: `${c[e]} ${b} ${x} transition-opacity ${m} ${r ? "cursor-not-allowed opacity-40" : "cursor-pointer hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))]"} ${p}`.trim(),
+    children: a
+  }
+) : /* @__PURE__ */ i(
+  "kbd",
+  {
+    className: `${c[e]} ${b} ${n} ${p}`.trim(),
+    "aria-label": o,
+    "aria-labelledby": l,
+    children: a
+  }
+);
+export {
+  h as Keycap,
+  h as default
+};
+//# sourceMappingURL=Keycap.js.map

package/dist/components/Keycap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keycap.js","sources":["../../src/components/Keycap.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING } from './focusRing';\n\nexport type KeycapSize = 'small' | 'medium';\n\nexport interface KeycapProps {\n    children: React.ReactNode;\n    size?: KeycapSize;\n    onClick?: () => void;\n    /** Renders a `<button>` even when `false`. */\n    disabled?: boolean;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\nconst SIZE_CLASSES: Record<KeycapSize, string> = {\n    small: 'h-[18px] min-w-[18px]',\n    medium: 'h-[20px] min-w-[20px]',\n};\n\nconst CAP =\n    'inline-flex items-center justify-center rounded-lg border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))]';\n\nconst LABEL_CAP =\n    'px-[6px] text-[10px] font-medium uppercase tracking-[0.5px] text-[var(--malachite-text-placeholder,rgb(187,187,187))]';\nconst GLYPH_CAP = 'px-[4px]';\n\nexport const Keycap: React.FC<KeycapProps> = ({\n    children,\n    size = 'medium',\n    onClick,\n    disabled,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const pressable = onClick !== undefined || disabled !== undefined;\n\n    if (!pressable) {\n        return (\n            <kbd\n                className={`${SIZE_CLASSES[size]} ${CAP} ${LABEL_CAP} ${className}`.trim()}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </kbd>\n        );\n    }\n\n    return (\n        <button\n            type=\"button\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            onClick={onClick}\n            disabled={disabled}\n            className={`${SIZE_CLASSES[size]} ${CAP} ${GLYPH_CAP} transition-opacity ${FOCUS_RING} ${\n                disabled\n                    ? 'cursor-not-allowed opacity-40'\n                    : 'cursor-pointer hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))]'\n            } ${className}`.trim()}\n        >\n            {children}\n        </button>\n    );\n};\n\nexport default Keycap;\n"],"names":["SIZE_CLASSES","CAP","LABEL_CAP","GLYPH_CAP","Keycap","children","size","onClick","disabled","ariaLabel","ariaLabelledBy","className","jsx","FOCUS_RING"],"mappings":";;AAgBA,MAAMA,IAA2C;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IACF,sQAEEC,IACF,yHACEC,IAAY,YAELC,IAAgC,CAAC;AAAA,EAC1C,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAChB,MACsBJ,MAAY,UAAaC,MAAa,SAepD,gBAAAI;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAK;AAAA,IACL,cAAYH;AAAA,IACZ,mBAAiBC;AAAA,IACjB,SAAAH;AAAA,IACA,UAAAC;AAAA,IACA,WAAW,GAAGR,EAAaM,CAAI,CAAC,IAAIL,CAAG,IAAIE,CAAS,uBAAuBU,CAAU,IACjFL,IACM,kCACA,kFACV,IAAIG,CAAS,GAAG,KAAA;AAAA,IAEf,UAAAN;AAAA,EAAA;AAAA,IAvBD,gBAAAO;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,GAAGZ,EAAaM,CAAI,CAAC,IAAIL,CAAG,IAAIC,CAAS,IAAIS,CAAS,GAAG,KAAA;AAAA,IACpE,cAAYF;AAAA,IACZ,mBAAiBC;AAAA,IAEhB,UAAAL;AAAA,EAAA;AAAA;"}

package/dist/components/SelectionBar.js

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

package/dist/components/SelectionBar.js.map

@@ -1 +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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"}
+{"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    const stickyClass = `sticky bottom-0 z-30${isMounted ? ' pt-4 pb-6' : ''}`;\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 ? stickyClass : '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","stickyClass","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/SidePanelNavFooter.js

@@ -1,46 +1,30 @@
-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 }) })
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import d from "./CustomIcons/CaretDownIcon.js";
+import o from "./CustomIcons/CaretUpIcon.js";
+import { Keycap as l } from "./Keycap.js";
+const s = "text-[13px] font-medium tracking-[0.14px] text-[var(--malachite-text-secondary)]", N = ({
+  onNavigateUp: r,
+  onNavigateDown: t,
+  canNavigateUp: c = !1,
+  canNavigateDown: n = !1,
+  actions: i,
+  className: m = ""
+}) => /* @__PURE__ */ a("div", { className: `flex w-full items-center justify-between ${m}`, children: [
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-[8px]", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-[4px]", children: [
+      /* @__PURE__ */ e(l, { "aria-label": "Previous", onClick: r, disabled: !c, children: /* @__PURE__ */ e(o, { size: 11 }) }),
+      /* @__PURE__ */ e(l, { "aria-label": "Next", onClick: t, disabled: !n, children: /* @__PURE__ */ e(d, { 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__ */ a("div", { className: "ml-[20px] flex items-center gap-[8px]", children: [
+      /* @__PURE__ */ e(l, { children: "esc" }),
       /* @__PURE__ */ e("span", { className: s, children: "Close" })
     ] })
   ] }),
-  c ? /* @__PURE__ */ e("div", { className: "flex items-center", children: c }) : null
+  i ? /* @__PURE__ */ e("div", { className: "flex items-center", children: i }) : null
 ] });
 export {
-  v as SidePanelNavFooter,
-  v as default
+  N as SidePanelNavFooter,
+  N as default
 };
 //# sourceMappingURL=SidePanelNavFooter.js.map

package/dist/components/SidePanelNavFooter.js.map

@@ -1 +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;"}
+{"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 Keycap from './Keycap';\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 LABEL = 'text-[13px] font-medium tracking-[0.14px] text-[var(--malachite-text-secondary)]';\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                <Keycap aria-label=\"Previous\" onClick={onNavigateUp} disabled={!canNavigateUp}>\n                    <CaretUpIcon size={11} />\n                </Keycap>\n                <Keycap aria-label=\"Next\" onClick={onNavigateDown} disabled={!canNavigateDown}>\n                    <CaretDownIcon size={11} />\n                </Keycap>\n            </div>\n            <span className={LABEL}>Navigate</span>\n            <div className=\"ml-[20px] flex items-center gap-[8px]\">\n                <Keycap>esc</Keycap>\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":["LABEL","SidePanelNavFooter","onNavigateUp","onNavigateDown","canNavigateUp","canNavigateDown","actions","className","jsxs","jsx","Keycap","CaretUpIcon","CaretDownIcon"],"mappings":";;;;AAcA,MAAMA,IAAQ,oFAERC,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,gBAAAC,EAACC,GAAA,EAAO,cAAW,YAAW,SAASR,GAAc,UAAU,CAACE,GAC5D,UAAA,gBAAAK,EAACE,GAAA,EAAY,MAAM,GAAA,CAAI,GAC3B;AAAA,MACA,gBAAAF,EAACC,GAAA,EAAO,cAAW,QAAO,SAASP,GAAgB,UAAU,CAACE,GAC1D,UAAA,gBAAAI,EAACG,GAAA,EAAc,MAAM,IAAI,EAAA,CAC7B;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAH,EAAC,QAAA,EAAK,WAAWT,GAAO,UAAA,YAAQ;AAAA,IAChC,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yCACX,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAO,UAAA,MAAA,CAAG;AAAA,MACX,gBAAAD,EAAC,QAAA,EAAK,WAAWT,GAAO,UAAA,QAAA,CAAK;AAAA,IAAA,EAAA,CACjC;AAAA,EAAA,GACJ;AAAA,EACCM,IAAU,gBAAAG,EAAC,OAAA,EAAI,WAAU,qBAAqB,aAAQ,IAAS;AAAA,EAAA,CACpE;"}