@stackone/malachite 2.27.2 → 2.29.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/tags/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,150 @@
+import { jsx as t, 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 b } from "./portalOverlay.js";
+const C = "w-full max-w-[640px] overflow-hidden font-body antialiased 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": r,
+  className: l = "",
+  style: s
+}) => {
+  const [c, d] = w(!1);
+  N(() => d(!0), []);
+  const p = k(null), m = $(() => e == null ? void 0 : e(), [e]), { ref: x, isTopmost: u, zIndex: f, elevated: v } = F({
+    open: !0,
+    onClose: m,
+    hostRef: p,
+    initialFocus: "content"
+  });
+  return c ? R(
+    /* @__PURE__ */ t(
+      _,
+      {
+        hostRef: p,
+        hostStyle: { position: "relative", zIndex: f },
+        hostProps: v ? { ...b("commandpalette"), [L]: "" } : b("commandpalette"),
+        children: /* @__PURE__ */ t(
+          "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 ? (h) => h.target === h.currentTarget && e() : void 0,
+            role: "presentation",
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                ref: x,
+                role: "dialog",
+                "aria-modal": u ? "true" : void 0,
+                "aria-label": r,
+                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: r }) => i(a, `${I} ${e}`.trim(), r), T = ({ children: a, scope: e, className: r = "" }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `flex items-center gap-2 border-0 border-b border-solid border-[var(--malachite-card-border)] px-[18px] ${r}`.trim(),
+    children: [
+      e,
+      a
+    ]
+  }
+), j = ({ children: a }) => /* @__PURE__ */ t("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: r = "", style: l }) => /* @__PURE__ */ n("div", { className: "relative", children: [
+  i(a, `${P} ${r}`.trim(), l),
+  e ? /* @__PURE__ */ t(
+    "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: r = "", style: l }) => i(
+  a,
+  `block pt-1 pb-2 ${e ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""} ${r}`.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-medium,14px)] 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: r,
+  label: l,
+  tags: s,
+  crumb: c,
+  meta: d,
+  status: p,
+  hint: m,
+  className: x = ""
+}) => i(
+  a,
+  `${O} ${e ? "bg-[var(--malachite-card-sunken-background)]" : ""} ${x}`.trim(),
+  void 0,
+  /* @__PURE__ */ n(g, { children: [
+    r,
+    /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+      l ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-[0_1_auto] overflow-hidden text-ellipsis whitespace-nowrap", children: l }) : null,
+      s ? /* @__PURE__ */ t("span", { className: "flex flex-none items-center gap-1 self-center", children: s }) : null,
+      c ? /* @__PURE__ */ t("span", { className: "flex-none whitespace-nowrap", children: c }) : null,
+      d ? /* @__PURE__ */ t("span", { className: "flex-none", children: d }) : null
+    ] }),
+    /* @__PURE__ */ t("span", { className: "flex min-w-[84px] flex-none justify-end", children: p }),
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: `flex-none ${e ? "" : "invisible"} group-data-[selected=true]:visible`,
+        children: m
+      }
+    )
+  ] })
+), H = ({ children: a, className: e = "", style: r }) => {
+  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, r) : /* @__PURE__ */ t("div", { className: l, style: r, children: a });
+}, W = ({ items: a }) => /* @__PURE__ */ t("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__ */ t(z, { size: "small", children: e.key }),
+  e.label
+] }, e.key)) }), B = ({ children: a, columns: e = 2, className: r = "" }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: `grid gap-1 px-2 ${e === 2 ? "grid-cols-2" : "grid-cols-1"} ${r}`.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__ */ t("span", { className: "flex items-center gap-[10px]", children: a }),
+  e ? /* @__PURE__ */ t("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 font-body antialiased 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    /** Tags beside the label, kept visible while a long label truncates. */\n    tags?: 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-medium,14px)] 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    tags,\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                {tags ? (\n                    <span className=\"flex flex-none items-center gap-1 self-center\">{tags}</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","tags","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/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;"}