@stackone/malachite 2.21.0 → 2.23.0

package/dist/components/Accordion.js

@@ -0,0 +1,105 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useId as E, useState as b } from "react";
+import { DisclosureArrow as u } from "./DisclosureArrow.js";
+import { FOCUS_RING as _, FOCUS_RING_INSET as A } from "./focusRing.js";
+import { isRenderableNode as F } from "./renderableNode.js";
+const K = ({
+  title: x,
+  header: f,
+  className: v,
+  children: o,
+  trailing: c,
+  variant: h = "default",
+  defaultExpanded: g = !1,
+  isExpanded: n,
+  onToggle: d,
+  disabled: s = !1,
+  stickyHeader: p = !1,
+  stickyTopOffset: w = 0,
+  animate: m = !0
+}) => {
+  const r = h === "sunken", l = `${E()}-body`, [N, y] = b(g), e = n !== void 0 ? n : N, k = m || e && !!o, [I, C] = b(!1), R = () => {
+    const a = !e;
+    n === void 0 && y(a), d == null || d(a);
+  }, S = [
+    "flex flex-col w-full text-left",
+    r ? "rounded-xl bg-[var(--malachite-card-dimmed-background)] p-[4px]" : "",
+    v
+  ].filter(Boolean).join(" "), B = [
+    // `group` only when enabled, so the arrow doesn't darken on hover while disabled.
+    s ? "" : "group",
+    "flex items-center w-full transition-colors",
+    r ? "" : "border-0 border-b border-solid border-[var(--malachite-card-border)]",
+    p ? "sticky z-10" : "",
+    r ? "bg-transparent" : e ? "bg-[var(--malachite-buttonlist-hover-background)]" : s ? "bg-transparent" : "bg-transparent hover:bg-[var(--malachite-buttonlist-hover-background)]"
+  ].filter(Boolean).join(" "), j = [
+    "flex flex-1 items-center min-w-0 appearance-none border-0 bg-transparent text-left cursor-pointer select-none disabled:cursor-not-allowed",
+    r ? `gap-[16px] px-[16px] py-[12px] rounded-lg ${_}` : `gap-[12px] p-[16px] ${A}`
+  ].join(" "), $ = p ? { top: `${w}px`, backgroundColor: "var(--malachite-card-background)" } : {};
+  return /* @__PURE__ */ i("div", { className: S, children: [
+    /* @__PURE__ */ i("div", { className: B, style: $, "data-accordion-header": "", children: [
+      /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          className: j,
+          onClick: R,
+          "aria-expanded": e,
+          "aria-controls": k ? l : void 0,
+          disabled: s,
+          children: [
+            r ? null : /* @__PURE__ */ t(u, { expanded: e }),
+            f ?? /* @__PURE__ */ t("span", { className: "flex-1 min-w-0 truncate font-medium text-[13px] tracking-[0.13px] text-[var(--malachite-text-primary)]", children: x }),
+            r ? /* @__PURE__ */ t(u, { expanded: e }) : null
+          ]
+        }
+      ),
+      F(c) && /* @__PURE__ */ t("div", { className: "shrink-0 flex items-center pr-[16px] text-[var(--malachite-text-secondary)]", children: c })
+    ] }),
+    m ? (
+      /* Height animates via grid-template-rows (0fr → 1fr); body clips during.
+         grid-cols-[minmax(0,1fr)] pins the single column to the track width so
+         wide, non-wrapping children (e.g. a table with long cell text) can't grow
+         the implicit `auto` column to their max-content and overflow the container. */
+      /* @__PURE__ */ t(
+        "div",
+        {
+          id: l,
+          className: "grid grid-cols-[minmax(0,1fr)] w-full transition-[grid-template-rows] duration-200 ease-in-out",
+          style: { gridTemplateRows: e ? "1fr" : "0fr" },
+          onTransitionEnd: (a) => {
+            a.propertyName === "grid-template-rows" && C(e);
+          },
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: I && e ? "overflow-visible" : "overflow-hidden",
+              children: o && /* @__PURE__ */ t(
+                "div",
+                {
+                  className: r ? "pt-[4px]" : "border-b border-solid border-[var(--malachite-card-border)]",
+                  children: o
+                }
+              )
+            }
+          )
+        }
+      )
+    ) : (
+      /* Instant open — no clip, so a sticky child inside pins immediately. */
+      e && o && /* @__PURE__ */ t(
+        "div",
+        {
+          id: l,
+          className: r ? "pt-[4px]" : "border-b border-solid border-[var(--malachite-card-border)]",
+          children: o
+        }
+      )
+    )
+  ] });
+};
+export {
+  K as Accordion,
+  K as default
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING, FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\n\ninterface AccordionBaseProps {\n    className?: string;\n    children?: React.ReactNode;\n    /**\n     * Visual style. `default` is the flat list row (arrow leading, row dividers,\n     * hover background). `sunken` draws the section as a sunken card (dimmed\n     * rounded container, arrow pinned right, no dividers/hover) — used for stacked\n     * detail sections in side panels and detail pages (see `CollapsibleSection`).\n     */\n    variant?: 'default' | 'sunken';\n    /**\n     * Content pinned to the right of the header, OUTSIDE the toggle button — so it may\n     * be interactive (e.g. a Checkbox) without nesting a button inside a button.\n     */\n    trailing?: React.ReactNode;\n    defaultExpanded?: boolean;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** Disables the toggle (and its hover). Trailing controls manage their own state. */\n    disabled?: boolean;\n    /**\n     * Pin the header row to the top of the nearest scroll container so it stays\n     * reachable while the body scrolls. Needs a scroll ancestor that clips without\n     * trapping sticky — e.g. a `<Surface overflow=\"clip\">` (`overflow: hidden` traps it).\n     */\n    stickyHeader?: boolean;\n    /** Offset (px) from the top of the scroll container when `stickyHeader` is set. */\n    stickyTopOffset?: number;\n    /**\n     * Animate the expand/collapse height (default `true`). Set `false` for an instant\n     * open — the body isn't clipped, so a `position: sticky` child pins immediately with\n     * no post-animation settle.\n     */\n    animate?: boolean;\n}\n\n/**\n * Requires at least one of `title` (simple text header) or `header` (rich ReactNode\n * content for the toggle area, e.g. avatar + badges) so the toggle is never empty.\n */\ntype AccordionProps = AccordionBaseProps &\n    ({ title: string; header?: React.ReactNode } | { title?: string; header: React.ReactNode });\n\nconst Accordion: React.FC<AccordionProps> = ({\n    title,\n    header,\n    className,\n    children,\n    trailing,\n    variant = 'default',\n    defaultExpanded = false,\n    isExpanded,\n    onToggle,\n    disabled = false,\n    stickyHeader = false,\n    stickyTopOffset = 0,\n    animate = true,\n}) => {\n    const sunken = variant === 'sunken';\n    const instanceId = useId();\n    const bodyId = `${instanceId}-body`;\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    // The instant path only renders the body while expanded; don't advertise\n    // aria-controls when the referenced element isn't in the DOM.\n    const bodyRendered = animate || (expanded && !!children);\n\n    // The body clips overflow so the expand/collapse height animation works. Once fully\n    // expanded we release the clip (after the transition) so a `position: sticky` child\n    // inside can pin — `overflow: hidden` would otherwise trap it.\n    //\n    // Owned entirely by the transition: the same `onTransitionEnd` that sets it on expand\n    // clears it on collapse, so no effect has to mirror `expanded` into it.\n    const [bodySettled, setBodySettled] = useState(false);\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            setInternalExpanded(newExpanded);\n        }\n        onToggle?.(newExpanded);\n    };\n\n    const containerClasses = [\n        'flex flex-col w-full text-left',\n        sunken ? 'rounded-xl bg-[var(--malachite-card-dimmed-background)] p-[4px]' : '',\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    // The whole header row is a `group` so the disclosure arrow darkens on hover; the\n    // hover background and arrow react to hovering anywhere on the row. The sunken\n    // variant carries its own card chrome instead of row dividers/hover.\n    const rowBackground = sunken\n        ? 'bg-transparent'\n        : expanded\n          ? 'bg-[var(--malachite-buttonlist-hover-background)]'\n          : disabled\n            ? 'bg-transparent'\n            : 'bg-transparent hover:bg-[var(--malachite-buttonlist-hover-background)]';\n    const headerRowClasses = [\n        // `group` only when enabled, so the arrow doesn't darken on hover while disabled.\n        disabled ? '' : 'group',\n        'flex items-center w-full transition-colors',\n        sunken ? '' : 'border-0 border-b border-solid border-[var(--malachite-card-border)]',\n        stickyHeader ? 'sticky z-10' : '',\n        rowBackground,\n    ]\n        .filter(Boolean)\n        .join(' ');\n    // Full-bleed default rows use an inset ring; the padded sunken toggle fits an outset one.\n    const toggleButtonClasses = [\n        'flex flex-1 items-center min-w-0 appearance-none border-0 bg-transparent text-left cursor-pointer select-none disabled:cursor-not-allowed',\n        sunken\n            ? `gap-[16px] px-[16px] py-[12px] rounded-lg ${FOCUS_RING}`\n            : `gap-[12px] p-[16px] ${FOCUS_RING_INSET}`,\n    ].join(' ');\n\n    // A pinned header needs an opaque background so the scrolling body doesn't bleed\n    // through. Inline (not a Tailwind arbitrary class) so the offset always applies.\n    const headerRowStyle: React.CSSProperties = stickyHeader\n        ? { top: `${stickyTopOffset}px`, backgroundColor: 'var(--malachite-card-background)' }\n        : {};\n\n    return (\n        <div className={containerClasses}>\n            <div className={headerRowClasses} style={headerRowStyle} data-accordion-header=\"\">\n                {/* Toggle area — arrow + header/title. Interactive trailing sits outside it. */}\n                <button\n                    type=\"button\"\n                    className={toggleButtonClasses}\n                    onClick={handleToggle}\n                    aria-expanded={expanded}\n                    aria-controls={bodyRendered ? bodyId : undefined}\n                    disabled={disabled}\n                >\n                    {sunken ? null : <DisclosureArrow expanded={expanded} />}\n                    {header ?? (\n                        <span className=\"flex-1 min-w-0 truncate font-medium text-[13px] tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n                            {title}\n                        </span>\n                    )}\n                    {sunken ? <DisclosureArrow expanded={expanded} /> : null}\n                </button>\n                {isRenderableNode(trailing) && (\n                    <div className=\"shrink-0 flex items-center pr-[16px] text-[var(--malachite-text-secondary)]\">\n                        {trailing}\n                    </div>\n                )}\n            </div>\n\n            {animate ? (\n                /* Height animates via grid-template-rows (0fr → 1fr); body clips during.\n                   grid-cols-[minmax(0,1fr)] pins the single column to the track width so\n                   wide, non-wrapping children (e.g. a table with long cell text) can't grow\n                   the implicit `auto` column to their max-content and overflow the container. */\n                <div\n                    id={bodyId}\n                    className=\"grid grid-cols-[minmax(0,1fr)] w-full transition-[grid-template-rows] duration-200 ease-in-out\"\n                    style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}\n                    onTransitionEnd={(event) => {\n                        if (event.propertyName === 'grid-template-rows') {\n                            setBodySettled(expanded);\n                        }\n                    }}\n                >\n                    <div\n                        className={bodySettled && expanded ? 'overflow-visible' : 'overflow-hidden'}\n                    >\n                        {children && (\n                            <div\n                                className={\n                                    sunken\n                                        ? 'pt-[4px]'\n                                        : 'border-b border-solid border-[var(--malachite-card-border)]'\n                                }\n                            >\n                                {children}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            ) : (\n                /* Instant open — no clip, so a sticky child inside pins immediately. */\n                expanded &&\n                children && (\n                    <div\n                        id={bodyId}\n                        className={\n                            sunken\n                                ? 'pt-[4px]'\n                                : 'border-b border-solid border-[var(--malachite-card-border)]'\n                        }\n                    >\n                        {children}\n                    </div>\n                )\n            )}\n        </div>\n    );\n};\n\nexport default Accordion;\nexport { Accordion };\nexport type { AccordionProps };\n"],"names":["Accordion","title","header","className","children","trailing","variant","defaultExpanded","isExpanded","onToggle","disabled","stickyHeader","stickyTopOffset","animate","sunken","bodyId","useId","internalExpanded","setInternalExpanded","useState","expanded","bodyRendered","bodySettled","setBodySettled","handleToggle","newExpanded","containerClasses","headerRowClasses","toggleButtonClasses","FOCUS_RING","FOCUS_RING_INSET","headerRowStyle","jsxs","jsx","DisclosureArrow","isRenderableNode","event"],"mappings":"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"}

package/dist/components/ActionBar.js

@@ -0,0 +1,66 @@
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { useRef as W, useState as A, useLayoutEffect as E, Fragment as L } from "react";
+import R from "./ActionMenu.js";
+import { Button as b } from "./Button.js";
+import { buildActionBarMenuItems as g } from "./actionBarMenuItems.js";
+const x = 600, y = ({
+  buttons: l,
+  collapseBelow: c = x,
+  menuLabel: h = "Actions",
+  className: p = ""
+}) => {
+  const o = W(null), [u, v] = A(!1);
+  return E(() => {
+    const r = ((t) => {
+      let i = t;
+      for (let n = 0; i && n < 5; n += 1) {
+        const s = i.parentElement;
+        if (!s)
+          return i;
+        if (s.clientWidth > i.clientWidth)
+          return s;
+        i = s;
+      }
+      return i;
+    })(o.current);
+    if (!r)
+      return;
+    const d = (t) => {
+      v(t > 0 && t < c);
+    };
+    if (d(r.clientWidth), typeof ResizeObserver > "u")
+      return;
+    let f = r.clientWidth;
+    const m = new ResizeObserver((t) => {
+      var n;
+      const i = (n = t[0]) == null ? void 0 : n.contentRect.width;
+      i === void 0 || Math.abs(i - f) < 1 || (f = i, d(i));
+    });
+    return m.observe(r), () => m.disconnect();
+  }, [c]), l.length === 0 ? null : /* @__PURE__ */ a("div", { ref: o, className: p, children: u ? /* @__PURE__ */ a(R, { items: g(l), label: h }) : /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: l.map((e, r) => /* @__PURE__ */ C(L, { children: [
+    e.dividerBefore && r > 0 && /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "w-px h-4 shrink-0 bg-[var(--malachite-card-border)]"
+      }
+    ),
+    /* @__PURE__ */ a(
+      b,
+      {
+        variant: e.variant ?? "filled",
+        size: e.size,
+        radius: e.radius,
+        onClick: e.onClick,
+        disabled: e.disabled,
+        icon: e.icon,
+        tooltip: e.tooltip,
+        children: e.label
+      }
+    )
+  ] }, `${e.label}-${r}`)) }) });
+};
+export {
+  y as default
+};
+//# sourceMappingURL=ActionBar.js.map

package/dist/components/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","sources":["../../src/components/ActionBar.tsx"],"sourcesContent":["import React, { Fragment, useLayoutEffect, useRef, useState } from 'react';\nimport ActionMenu from './ActionMenu';\nimport Button from './Button';\nimport { buildActionBarMenuItems } from './actionBarMenuItems';\n\ntype BaseButtonProps = React.ComponentProps<typeof Button>;\n\nexport interface ActionBarItem {\n    label: string;\n    onClick?: () => void;\n    disabled?: boolean;\n    icon?: React.ReactNode;\n    tooltip?: string;\n    variant?: BaseButtonProps['variant'];\n    size?: BaseButtonProps['size'];\n    radius?: BaseButtonProps['radius'];\n    /** Renders a vertical rule before this button (and a menu divider when collapsed). */\n    dividerBefore?: boolean;\n}\n\nexport interface ActionBarProps {\n    buttons: ActionBarItem[];\n    /** Container width, in px, below which the row collapses into a single menu. */\n    collapseBelow?: number;\n    /** Accessible name for the collapsed menu trigger. */\n    menuLabel?: string;\n    className?: string;\n}\n\nconst DEFAULT_COLLAPSE_BELOW_PX = 600;\n\n\nconst ActionBar: React.FC<ActionBarProps> = ({\n    buttons,\n    collapseBelow = DEFAULT_COLLAPSE_BELOW_PX,\n    menuLabel = 'Actions',\n    className = '',\n}) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [isCompact, setIsCompact] = useState(false);\n\n    useLayoutEffect(() => {\n        const findStableContainer = (start: HTMLElement | null): HTMLElement | null => {\n            let node: HTMLElement | null = start;\n\n            for (let depth = 0; node && depth < 5; depth += 1) {\n                const parent = node.parentElement;\n                if (!parent) {\n                    return node;\n                }\n                if (parent.clientWidth > node.clientWidth) {\n                    return parent;\n                }\n                node = parent;\n            }\n\n            return node;\n        };\n\n        const element = findStableContainer(containerRef.current);\n        if (!element) {\n            return;\n        }\n\n        const applyWidth = (width: number) => {\n            setIsCompact(width > 0 && width < collapseBelow);\n        };\n\n        applyWidth(element.clientWidth);\n\n        if (typeof ResizeObserver === 'undefined') {\n            return;\n        }\n\n        let lastWidth = element.clientWidth;\n\n        const observer = new ResizeObserver((entries) => {\n            const width = entries[0]?.contentRect.width;\n            if (width === undefined || Math.abs(width - lastWidth) < 1) {\n                return;\n            }\n            lastWidth = width;\n            applyWidth(width);\n        });\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [collapseBelow]);\n\n    if (buttons.length === 0) {\n        return null;\n    }\n\n    return (\n        <div ref={containerRef} className={className}>\n            {isCompact ? (\n                <ActionMenu items={buildActionBarMenuItems(buttons)} label={menuLabel} />\n            ) : (\n                <div className=\"flex items-center gap-2\">\n                    {buttons.map((button, index) => (\n                        <Fragment key={`${button.label}-${index}`}>\n                            {button.dividerBefore && index > 0 && (\n                                <div\n                                    aria-hidden=\"true\"\n                                    className=\"w-px h-4 shrink-0 bg-[var(--malachite-card-border)]\"\n                                />\n                            )}\n                            <Button\n                                variant={button.variant ?? 'filled'}\n                                size={button.size}\n                                radius={button.radius}\n                                onClick={button.onClick}\n                                disabled={button.disabled}\n                                icon={button.icon}\n                                tooltip={button.tooltip}\n                            >\n                                {button.label}\n                            </Button>\n                        </Fragment>\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default ActionBar;\n"],"names":["DEFAULT_COLLAPSE_BELOW_PX","ActionBar","buttons","collapseBelow","menuLabel","className","containerRef","useRef","isCompact","setIsCompact","useState","useLayoutEffect","element","start","node","depth","parent","applyWidth","width","lastWidth","observer","entries","_a","jsx","ActionMenu","buildActionBarMenuItems","button","index","jsxs","Fragment","Button"],"mappings":";;;;;AA6BA,MAAMA,IAA4B,KAG5BC,IAAsC,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,eAAAC,IAAgBH;AAAA,EAChB,WAAAI,IAAY;AAAA,EACZ,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAeC,EAAuB,IAAI,GAC1C,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAiDhD,SA/CAC,EAAgB,MAAM;AAkBlB,UAAMC,KAjBsB,CAACC,MAAkD;AAC3E,UAAIC,IAA2BD;AAE/B,eAASE,IAAQ,GAAGD,KAAQC,IAAQ,GAAGA,KAAS,GAAG;AAC/C,cAAMC,IAASF,EAAK;AACpB,YAAI,CAACE;AACD,iBAAOF;AAEX,YAAIE,EAAO,cAAcF,EAAK;AAC1B,iBAAOE;AAEX,QAAAF,IAAOE;AAAA,MACX;AAEA,aAAOF;AAAA,IACX,GAEoCR,EAAa,OAAO;AACxD,QAAI,CAACM;AACD;AAGJ,UAAMK,IAAa,CAACC,MAAkB;AAClC,MAAAT,EAAaS,IAAQ,KAAKA,IAAQf,CAAa;AAAA,IACnD;AAIA,QAFAc,EAAWL,EAAQ,WAAW,GAE1B,OAAO,iBAAmB;AAC1B;AAGJ,QAAIO,IAAYP,EAAQ;AAExB,UAAMQ,IAAW,IAAI,eAAe,CAACC,MAAY;;AAC7C,YAAMH,KAAQI,IAAAD,EAAQ,CAAC,MAAT,gBAAAC,EAAY,YAAY;AACtC,MAAIJ,MAAU,UAAa,KAAK,IAAIA,IAAQC,CAAS,IAAI,MAGzDA,IAAYD,GACZD,EAAWC,CAAK;AAAA,IACpB,CAAC;AACD,WAAAE,EAAS,QAAQR,CAAO,GACjB,MAAMQ,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACjB,CAAa,CAAC,GAEdD,EAAQ,WAAW,IACZ,OAIP,gBAAAqB,EAAC,OAAA,EAAI,KAAKjB,GAAc,WAAAD,GACnB,cACG,gBAAAkB,EAACC,GAAA,EAAW,OAAOC,EAAwBvB,CAAO,GAAG,OAAOE,EAAA,CAAW,IAEvE,gBAAAmB,EAAC,OAAA,EAAI,WAAU,2BACV,UAAArB,EAAQ,IAAI,CAACwB,GAAQC,MAClB,gBAAAC,EAACC,GAAA,EACI,UAAA;AAAA,IAAAH,EAAO,iBAAiBC,IAAQ,KAC7B,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGlB,gBAAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAASJ,EAAO,WAAW;AAAA,QAC3B,MAAMA,EAAO;AAAA,QACb,QAAQA,EAAO;AAAA,QACf,SAASA,EAAO;AAAA,QAChB,UAAUA,EAAO;AAAA,QACjB,MAAMA,EAAO;AAAA,QACb,SAASA,EAAO;AAAA,QAEf,UAAAA,EAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,KAjBW,GAAGA,EAAO,KAAK,IAAIC,CAAK,EAkBvC,CACH,GACL,GAER;AAER;"}

package/dist/components/ActionMenu.js

@@ -0,0 +1,174 @@
+import { jsxs as m, Fragment as O, jsx as s } from "react/jsx-runtime";
+import { useState as E, useRef as S, useCallback as _, useEffect as H, useLayoutEffect as j, useInsertionEffect as D } from "react";
+import { createPortal as N } from "react-dom";
+import { Button as A } from "./Button.js";
+import G from "./CustomIcons/MoreHorizontalIcon.js";
+import { pushEscapeLayer as W } from "./escapeLayers.js";
+import { ensureOverlayStyles as Y, overlayIdentity as $ } from "./portalOverlay.js";
+import { useTopLayer as F } from "./topLayer.js";
+const Z = {
+  padding: "6px 10px",
+  fontSize: "var(--malachite-font-size-small, 13px)",
+  color: "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+  userSelect: "none"
+}, q = {
+  small: { icon: 16, iconBox: "text-[16px] [&_svg]:size-[16px]!" },
+  xsmall: { icon: 11, iconBox: "text-[11px] [&_svg]:size-[11px]!" }
+}, L = (n) => n.type === "divider" ? {
+  height: 1,
+  background: "var(--malachite-card-border, rgb(232, 232, 232))",
+  margin: "4px 0"
+} : {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "6px 10px",
+  borderRadius: 8,
+  fontSize: "var(--malachite-font-size-small, 13px)",
+  fontWeight: 400,
+  color: n.danger ? "var(--malachite-text-destructive, rgb(237, 53, 54))" : "var(--malachite-text-primary, rgb(10, 10, 10))",
+  cursor: n.disabled ? "not-allowed" : "pointer",
+  opacity: n.disabled ? 0.5 : 1,
+  userSelect: "none",
+  background: "transparent",
+  border: "none",
+  textAlign: "left",
+  width: "100%"
+}, oe = ({
+  items: n,
+  label: b = "More actions",
+  triggerIcon: M,
+  minWidth: v = 180,
+  size: h = "small",
+  showLabel: d = !1,
+  variant: z = "outline"
+}) => {
+  const y = q[h], [o, p] = E(!1), [r, P] = E(null), x = S(null), a = S(null);
+  F(a, o);
+  const l = _(() => {
+    var w, k;
+    const e = x.current;
+    if (!e)
+      return;
+    const t = e.getBoundingClientRect(), u = ((w = a.current) == null ? void 0 : w.offsetWidth) || v, c = ((k = a.current) == null ? void 0 : k.offsetHeight) || 0, i = 8, f = t.right - u, g = window.innerWidth - u - i, I = Math.max(i, Math.min(f, g)), T = window.innerHeight - t.bottom, B = c > 0 && T < c + i ? t.top - c - 4 : t.bottom + 4;
+    P({ top: B, left: I });
+  }, [v]);
+  H(() => {
+    if (!o)
+      return;
+    l();
+    const e = () => l(), t = (c) => {
+      var f, g;
+      const i = c.target;
+      !((f = x.current) != null && f.contains(i)) && !((g = a.current) != null && g.contains(i)) && p(!1);
+    }, u = W(() => p(!1));
+    return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), document.addEventListener("mousedown", t, !0), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), document.removeEventListener("mousedown", t, !0), u();
+    };
+  }, [o, l]), j(() => {
+    o && a.current && l();
+  }, [o, l]);
+  const R = (e) => {
+    var t;
+    e.type === "divider" || e.disabled || ((t = e.onClick) == null || t.call(e), p(!1));
+  };
+  D(() => {
+    o && Y();
+  }, [o]);
+  const C = {
+    position: "fixed",
+    top: (r == null ? void 0 : r.top) ?? 0,
+    left: (r == null ? void 0 : r.left) ?? 0,
+    minWidth: v,
+    background: "var(--malachite-card-background, rgb(255, 255, 255))",
+    border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
+    borderRadius: 12,
+    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.08)",
+    padding: 4,
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    visibility: r ? "visible" : "hidden",
+    opacity: r ? 1 : 0
+  };
+  return /* @__PURE__ */ m(O, { children: [
+    /* @__PURE__ */ m(
+      A,
+      {
+        ref: x,
+        type: "button",
+        variant: z,
+        size: h,
+        iconOnly: !d,
+        "aria-label": d ? void 0 : b,
+        "aria-haspopup": "menu",
+        "aria-expanded": o,
+        className: `shrink-0${d ? " gap-2" : ""}`,
+        onClick: (e) => {
+          e.stopPropagation(), p((t) => !t);
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ s("span", { className: `inline-flex items-center justify-center ${y.iconBox}`, children: M ?? /* @__PURE__ */ s(G, { size: y.icon }) }),
+          d && /* @__PURE__ */ s("span", { children: b })
+        ]
+      }
+    ),
+    o && N(
+      /* @__PURE__ */ m(
+        "div",
+        {
+          ref: a,
+          role: "menu",
+          ...$("actionmenu"),
+          style: C,
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            n.length === 0 && // role="menu" takes menuitem children only, so the notice is one.
+            /* @__PURE__ */ s("div", { role: "menuitem", "aria-disabled": "true", style: Z, children: "No actions available" }),
+            n.map(
+              (e) => e.type === "divider" ? /* @__PURE__ */ s("div", { style: L(e) }, e.key) : /* @__PURE__ */ m(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  disabled: e.disabled,
+                  title: e.tooltip,
+                  onClick: () => R(e),
+                  onMouseEnter: (t) => {
+                    e.disabled || (t.currentTarget.style.background = "rgba(0, 0, 0, 0.04)");
+                  },
+                  onMouseLeave: (t) => {
+                    t.currentTarget.style.background = "transparent";
+                  },
+                  style: L(e),
+                  children: [
+                    e.icon && /* @__PURE__ */ s(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          flexShrink: 0,
+                          color: "var(--malachite-icon-secondary, rgb(148, 148, 148))"
+                        },
+                        children: e.icon
+                      }
+                    ),
+                    e.label
+                  ]
+                },
+                e.key
+              )
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  oe as default
+};
+//# sourceMappingURL=ActionMenu.js.map

package/dist/components/ActionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.js","sources":["../../src/components/ActionMenu.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    useInsertionEffect,\n    useLayoutEffect,\n    useCallback,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport Button from './Button';\nimport type { ButtonVariant } from './Button';\nimport MoreHorizontalIcon from './CustomIcons/MoreHorizontalIcon';\nimport { pushEscapeLayer } from './escapeLayers';\nimport { ensureOverlayStyles, overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\n\nconst EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport type ActionMenuItem =\n    | {\n          type?: 'item';\n          key: string;\n          label: React.ReactNode;\n          onClick?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n          tooltip?: string;\n          icon?: React.ReactNode;\n      }\n    | {\n          type: 'divider';\n          key: string;\n      };\n\nexport interface ActionMenuProps {\n    items: ActionMenuItem[];\n    label?: string;\n    triggerIcon?: React.ReactNode;\n    minWidth?: number;\n    size?: 'small' | 'xsmall';\n    /**\n     * Shows `label` beside the icon instead of leaving it to the accessible name. For a menu\n     * that is the point of its corner rather than an overflow for a row that already reads —\n     * a kebab nobody can name is only safe when the row it belongs to says what it acts on.\n     */\n    showLabel?: boolean;\n    /** Trigger's Button variant. Defaults to `outline`, the overflow-kebab look. */\n    variant?: ButtonVariant;\n}\n\n// No box here: pinning `--malachite-control-height-small` beat Button's own `size-[28px]`, so a\n// theme that moved that token moved the kebab and left the Button behind. Only the glyph is\n// left to size, Button sizing one only for its `icon` prop.\nconst TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nconst itemStyle = (item: ActionMenuItem): React.CSSProperties => {\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: item.danger\n            ? 'var(--malachite-text-destructive, rgb(237, 53, 54))'\n            : 'var(--malachite-text-primary, rgb(10, 10, 10))',\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        background: 'transparent',\n        border: 'none',\n        textAlign: 'left',\n        width: '100%',\n    };\n};\n\n/**\n * ActionMenu is a kebab-style overflow action menu. The trigger is a square\n * icon-only outline Button (three-dot icon by default); on click, a popover\n * appears with the given items. The popover is rendered to document.body via\n * createPortal so it escapes any Shadow DOM or overflow:hidden ancestors —\n * which is also why the popover is styled inline rather than with Tailwind:\n * the scoped stylesheet does not reach document.body.\n */\nconst ActionMenu: React.FC<ActionMenuProps> = ({\n    items,\n    label = 'More actions',\n    triggerIcon,\n    minWidth = 180,\n    size = 'small',\n    showLabel = false,\n    variant = 'outline',\n}) => {\n    const trigger = TRIGGER_SIZES[size];\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<{ top: number; left: number } | null>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const popoverRef = useRef<HTMLDivElement>(null);\n\n    useTopLayer(popoverRef, open);\n\n    const updatePosition = useCallback(() => {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n            return;\n        }\n        const rect = trigger.getBoundingClientRect();\n        const popoverWidth = popoverRef.current?.offsetWidth || minWidth;\n        const popoverHeight = popoverRef.current?.offsetHeight || 0;\n        const viewportPadding = 8;\n\n        const desiredLeft = rect.right - popoverWidth;\n        const maxLeft = window.innerWidth - popoverWidth - viewportPadding;\n        const left = Math.max(viewportPadding, Math.min(desiredLeft, maxLeft));\n\n        const spaceBelow = window.innerHeight - rect.bottom;\n        const top =\n            popoverHeight > 0 && spaceBelow < popoverHeight + viewportPadding\n                ? rect.top - popoverHeight - 4\n                : rect.bottom + 4;\n\n        setPosition({ top, left });\n    }, [minWidth]);\n\n    useEffect(() => {\n        if (!open) {\n            return;\n        }\n        updatePosition();\n        const handleScrollOrResize = () => updatePosition();\n        const handleClickOutside = (e: MouseEvent) => {\n            const target = e.target as Node;\n            if (!triggerRef.current?.contains(target) && !popoverRef.current?.contains(target)) {\n                setOpen(false);\n            }\n        };\n        // ESC via the shared layer stack: closes only the topmost overlay.\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n        window.addEventListener('scroll', handleScrollOrResize, true);\n        window.addEventListener('resize', handleScrollOrResize);\n        document.addEventListener('mousedown', handleClickOutside, true);\n        return () => {\n            window.removeEventListener('scroll', handleScrollOrResize, true);\n            window.removeEventListener('resize', handleScrollOrResize);\n            document.removeEventListener('mousedown', handleClickOutside, true);\n            popEscapeLayer();\n        };\n    }, [open, updatePosition]);\n\n    // Re-measure once the popover is in the DOM so the right-edge alignment\n    // and viewport clamping use the real width — not the minWidth fallback.\n    useLayoutEffect(() => {\n        if (open && popoverRef.current) {\n            updatePosition();\n        }\n    }, [open, updatePosition]);\n\n    const handleItemClick = (item: ActionMenuItem) => {\n        if (item.type === 'divider' || item.disabled) {\n            return;\n        }\n        item.onClick?.();\n        setOpen(false);\n    };\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureOverlayStyles();\n        }\n    }, [open]);\n\n    const popoverStyle: React.CSSProperties = {\n        position: 'fixed',\n        top: position?.top ?? 0,\n        left: position?.left ?? 0,\n        minWidth,\n        background: 'var(--malachite-card-background, rgb(255, 255, 255))',\n        border: '1px solid var(--malachite-card-border, rgb(232, 232, 232))',\n        borderRadius: 12,\n        boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.08)',\n        padding: 4,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 2,\n        visibility: position ? 'visible' : 'hidden',\n        opacity: position ? 1 : 0,\n    };\n\n    return (\n        <>\n            <Button\n                ref={triggerRef}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                iconOnly={!showLabel}\n                // With the label drawn, it is already the accessible name; repeating it here\n                // would have a screen reader announce it twice.\n                aria-label={showLabel ? undefined : label}\n                aria-haspopup=\"menu\"\n                aria-expanded={open}\n                // The engaged border while open is each variant's own, keyed off aria-expanded\n                // in the stylesheet — pinning the outline token here stripped it from every\n                // other variant.\n                //\n                // Button only spaces the icon it owns via its `icon` prop; this one is a child,\n                // so the gap is set here rather than left to collapse against the label. `gap-2`\n                // because the stylesheet is precompiled: a utility no source file already uses\n                // is never emitted, and the class then does nothing with nothing to show for it.\n                className={`shrink-0${showLabel ? ' gap-2' : ''}`}\n                onClick={(e) => {\n                    e.stopPropagation();\n                    setOpen((v) => !v);\n                }}\n                onMouseDown={(e) => e.stopPropagation()}\n            >\n                {/* `!important` because every CustomIcon writes its size inline; `text-[…]` for a\n                    glyph that is not an svg at all, which the svg rule never matches. */}\n                <span className={`inline-flex items-center justify-center ${trigger.iconBox}`}>\n                    {triggerIcon ?? <MoreHorizontalIcon size={trigger.icon} />}\n                </span>\n                {showLabel && <span>{label}</span>}\n            </Button>\n            {open &&\n                createPortal(\n                    <div\n                        ref={popoverRef}\n                        role=\"menu\"\n                        {...overlayIdentity('actionmenu')}\n                        style={popoverStyle}\n                        onMouseDown={(e) => e.stopPropagation()}\n                        onClick={(e) => e.stopPropagation()}\n                    >\n                        {items.length === 0 && (\n                            // role=\"menu\" takes menuitem children only, so the notice is one.\n                            <div role=\"menuitem\" aria-disabled=\"true\" style={EMPTY_ITEM_STYLE}>\n                                No actions available\n                            </div>\n                        )}\n                        {items.map((item) =>\n                            item.type === 'divider' ? (\n                                <div key={item.key} style={itemStyle(item)} />\n                            ) : (\n                                <button\n                                    key={item.key}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    disabled={item.disabled}\n                                    title={item.tooltip}\n                                    onClick={() => handleItemClick(item)}\n                                    onMouseEnter={(e) => {\n                                        if (!item.disabled) {\n                                            (\n                                                e.currentTarget as HTMLButtonElement\n                                            ).style.background = 'rgba(0, 0, 0, 0.04)';\n                                        }\n                                    }}\n                                    onMouseLeave={(e) => {\n                                        (e.currentTarget as HTMLButtonElement).style.background =\n                                            'transparent';\n                                    }}\n                                    style={itemStyle(item)}\n                                >\n                                    {/* Leading: every caller's icon names the action itself —\n                                        copy, open, delete — and an icon that is part of an\n                                        item's identity belongs where the eye starts, not\n                                        right-aligned where it reads as a status column. */}\n                                    {item.icon && (\n                                        <span\n                                            style={{\n                                                display: 'inline-flex',\n                                                flexShrink: 0,\n                                                color: 'var(--malachite-icon-secondary, rgb(148, 148, 148))',\n                                            }}\n                                        >\n                                            {item.icon}\n                                        </span>\n                                    )}\n                                    {item.label}\n                                </button>\n                            ),\n                        )}\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default ActionMenu;\n"],"names":["EMPTY_ITEM_STYLE","TRIGGER_SIZES","itemStyle","item","ActionMenu","items","label","triggerIcon","minWidth","size","showLabel","variant","trigger","open","setOpen","useState","position","setPosition","triggerRef","useRef","popoverRef","useTopLayer","updatePosition","useCallback","rect","popoverWidth","_a","popoverHeight","_b","viewportPadding","desiredLeft","maxLeft","left","spaceBelow","top","useEffect","handleScrollOrResize","handleClickOutside","e","target","popEscapeLayer","pushEscapeLayer","useLayoutEffect","handleItemClick","useInsertionEffect","ensureOverlayStyles","popoverStyle","jsxs","Fragment","Button","v","jsx","MoreHorizontalIcon","createPortal","overlayIdentity"],"mappings":"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"}

package/dist/components/Alert.js

@@ -0,0 +1,136 @@
+import { jsxs as o, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { Button as I } from "./Button.js";
+import j from "./CustomIcons/CaretDownIcon.js";
+import k from "./CustomIcons/CaretUpIcon.js";
+import B from "./CustomIcons/CheckCircleFilled.js";
+import E from "./CustomIcons/ErrorCircleFilled.js";
+import F from "./CustomIcons/InfoCircleFilled.js";
+import S from "./CustomIcons/SparkleIcon.js";
+import _ from "./CustomIcons/WarningCircleFilled.js";
+import A from "./Typography/MarkdownBlock.js";
+import { getTextColor as W } from "./Typography/textStyles.js";
+const p = (r) => {
+  switch (r) {
+    case "info":
+      return "primary";
+    case "success":
+      return "success";
+    case "error":
+      return "error";
+    case "warning":
+      return "warning";
+    // The violet is on `.alert-assistant` itself; inheriting it keeps one definition
+    // rather than a TextColor token that only this alert would ever name.
+    case "assistant":
+      return "inherit";
+    default:
+      return "primary";
+  }
+}, a = {
+  width: "13px",
+  height: "13px",
+  flexShrink: 0
+}, f = {
+  info: /* @__PURE__ */ e(
+    F,
+    {
+      style: { ...a, color: "var(--malachite-alert-info-foreground)" }
+    }
+  ),
+  success: /* @__PURE__ */ e(
+    B,
+    {
+      style: { ...a, color: "var(--malachite-alert-success-foreground)" }
+    }
+  ),
+  error: /* @__PURE__ */ e(
+    E,
+    {
+      style: { ...a, color: "var(--malachite-alert-error-foreground)" }
+    }
+  ),
+  warning: /* @__PURE__ */ e(
+    _,
+    {
+      style: { ...a, color: "var(--malachite-alert-warning-foreground)" }
+    }
+  ),
+  // The same sparkle the control that produced the message carries, so the two read as
+  // one thread rather than two unrelated affordances.
+  assistant: /* @__PURE__ */ e(
+    S,
+    {
+      style: { ...a, color: "var(--malachite-alert-assistant-foreground)" }
+    }
+  )
+}, x = ({ text: r, type: i }) => /* @__PURE__ */ e(A, { text: r, color: p(i), size: "small", omitMargin: !0 }), G = ({
+  type: r = "info",
+  message: i,
+  hasMargin: h = !0,
+  className: u,
+  children: c,
+  isExpanded: n,
+  onToggle: s
+}) => {
+  const l = !!c, [v, g] = y(!1), t = n !== void 0 ? n : v, w = () => {
+    const m = !t;
+    n === void 0 && g(m), s == null || s(m);
+  }, d = [
+    "alert-base",
+    `alert-${r}`,
+    "flex",
+    "w-full",
+    // Ensure full width
+    l && t ? "flex-col" : "gap-2 items-center min-h-[2rem]",
+    h ? "" : "alert-no-margin",
+    "text-left",
+    l ? "rounded-xl !p-0" : "!px-2.5 !py-1.5",
+    // Slightly more vertical padding for centering
+    u
+  ].filter(Boolean).join(" "), C = [
+    "flex items-center justify-between w-full",
+    l ? "gap-2 px-2.5 py-1" : "gap-2",
+    l && t ? "rounded-t-xl" : l ? "rounded-xl" : ""
+  ].filter(Boolean).join(" "), b = ["w-full", "overflow-hidden"].filter(Boolean).join(" ");
+  return l ? /* @__PURE__ */ o("div", { className: `${d} alert-expandable`, children: [
+    /* @__PURE__ */ o("div", { className: C, children: [
+      /* @__PURE__ */ o("div", { className: "flex-1 flex gap-2 items-center", children: [
+        f[r],
+        /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", children: /* @__PURE__ */ e(x, { text: i, type: r }) }) })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(
+        I,
+        {
+          variant: "no-style",
+          size: "xsmall",
+          onClick: w,
+          "aria-label": t ? "Collapse" : "Expand",
+          style: {
+            color: W(p(r))
+          },
+          children: t ? /* @__PURE__ */ e(
+            k,
+            {
+              style: { minWidth: "13px", minHeight: "13px" }
+            }
+          ) : /* @__PURE__ */ e(
+            j,
+            {
+              style: { minWidth: "13px", minHeight: "13px" }
+            }
+          )
+        }
+      ) })
+    ] }),
+    t && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("div", { className: b, children: /* @__PURE__ */ e("div", { className: "bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto", children: c }) }) })
+  ] }) : /* @__PURE__ */ o("div", { className: d, children: [
+    f[r],
+    /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", children: /* @__PURE__ */ e(x, { text: i, type: r }) }) })
+  ] });
+};
+export {
+  G as Alert,
+  G as default
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button, ButtonVariant } from './Button';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport SparkleIcon from './CustomIcons/SparkleIcon';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport type { TextColor } from './Typography/Text';\nimport { getTextColor } from './Typography/textStyles';\n\nexport type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';\n\ninterface AlertButtonConfig {\n    label: string;\n    onClick: () => void;\n    variant?: ButtonVariant;\n    icon?: React.ReactNode;\n}\n\ninterface AlertProps {\n    type?: AlertType;\n    message: string;\n    hasMargin?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n}\n\n// Distinct from the imported `getTextColor`, which maps a TextColor to a CSS variable.\n// This maps an AlertType to a TextColor token; both are used in this file.\nconst getAlertTextColor = (alertType: AlertType): TextColor => {\n    switch (alertType) {\n        case 'info':\n            return 'primary';\n        case 'success':\n            return 'success';\n        case 'error':\n            return 'error';\n        case 'warning':\n            return 'warning';\n        // The violet is on `.alert-assistant` itself; inheriting it keeps one definition\n        // rather than a TextColor token that only this alert would ever name.\n        case 'assistant':\n            return 'inherit';\n        default:\n            return 'primary';\n    }\n};\n\nconst ICON_STYLE = {\n    width: '13px',\n    height: '13px',\n    flexShrink: 0,\n};\n\nconst AlertIcon = {\n    info: (\n        <InfoCircleFilled\n            style={{ ...ICON_STYLE, color: 'var(--malachite-alert-info-foreground)' }}\n        />\n    ),\n    success: (\n        <CheckCircleFilled\n            style={{ ...ICON_STYLE, color: 'var(--malachite-alert-success-foreground)' }}\n        />\n    ),\n    error: (\n        <ErrorCircleFilled\n            style={{ ...ICON_STYLE, color: 'var(--malachite-alert-error-foreground)' }}\n        />\n    ),\n    warning: (\n        <WarningCircleFilled\n            style={{ ...ICON_STYLE, color: 'var(--malachite-alert-warning-foreground)' }}\n        />\n    ),\n    // The same sparkle the control that produced the message carries, so the two read as\n    // one thread rather than two unrelated affordances.\n    assistant: (\n        <SparkleIcon\n            style={{ ...ICON_STYLE, color: 'var(--malachite-alert-assistant-foreground)' }}\n        />\n    ),\n};\n\nconst SimpleTextRenderer: React.FC<{ text: string; type: AlertType }> = ({ text, type }) => {\n    return <MarkdownBlock text={text} color={getAlertTextColor(type)} size=\"small\" omitMargin />;\n};\n\nconst Alert: React.FC<AlertProps> = ({\n    type = 'info',\n    message,\n    hasMargin = true,\n    className,\n    children,\n    isExpanded,\n    onToggle,\n}) => {\n    const isExpandable = !!children;\n    const [internalExpanded, setInternalExpanded] = useState(false);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            // Uncontrolled mode\n            setInternalExpanded(newExpanded);\n        }\n        // Call onToggle if provided (for both controlled and uncontrolled)\n        onToggle?.(newExpanded);\n    };\n\n    const alertClasses = [\n        'alert-base',\n        `alert-${type}`,\n        'flex',\n        'w-full', // Ensure full width\n        isExpandable && expanded ? 'flex-col' : 'gap-2 items-center min-h-[2rem]',\n        !hasMargin ? 'alert-no-margin' : '',\n        'text-left',\n        isExpandable ? 'rounded-xl !p-0' : '!px-2.5 !py-1.5', // Slightly more vertical padding for centering\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const headerClasses = [\n        'flex items-center justify-between w-full',\n        isExpandable ? 'gap-2 px-2.5 py-1' : 'gap-2',\n        isExpandable && expanded ? 'rounded-t-xl' : isExpandable ? 'rounded-xl' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const expandableContentClasses = ['w-full', 'overflow-hidden'].filter(Boolean).join(' ');\n\n    // Non-expandable alert (original behavior)\n    if (!isExpandable) {\n        return (\n            <div className={alertClasses}>\n                {AlertIcon[type]}\n                <div className=\"flex-1 flex items-center\">\n                    <div className=\"[&>div]:mb-0\">\n                        <SimpleTextRenderer text={message} type={type} />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    // Expandable alert\n    return (\n        <div className={`${alertClasses} alert-expandable`}>\n            {/* Header section with title and expand/collapse button */}\n            <div className={headerClasses}>\n                <div className=\"flex-1 flex gap-2 items-center\">\n                    {AlertIcon[type]}\n                    <div className=\"flex-1 flex items-center\">\n                        <div className=\"[&>div]:mb-0\">\n                            <SimpleTextRenderer text={message} type={type} />\n                        </div>\n                    </div>\n                </div>\n\n                {/* Right side buttons container */}\n                <div className=\"flex items-center gap-2\">\n                    {/* Expand/collapse button */}\n                    <Button\n                        variant=\"no-style\"\n                        size=\"xsmall\"\n                        onClick={handleToggle}\n                        aria-label={expanded ? 'Collapse' : 'Expand'}\n                        style={{\n                            color: getTextColor(getAlertTextColor(type)),\n                        }}\n                    >\n                        {expanded ? (\n                            <CaretUpIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        ) : (\n                            <CaretDownIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        )}\n                    </Button>\n                </div>\n            </div>\n\n            {/* Expandable content */}\n            {expanded && (\n                <>\n                    <div className={expandableContentClasses}>\n                        <div className=\"bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto\">\n                            {children}\n                        </div>\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default Alert;\nexport { Alert };\nexport type { AlertButtonConfig };\n"],"names":["getAlertTextColor","alertType","ICON_STYLE","AlertIcon","jsx","InfoCircleFilled","CheckCircleFilled","ErrorCircleFilled","WarningCircleFilled","SparkleIcon","SimpleTextRenderer","text","type","MarkdownBlock","Alert","message","hasMargin","className","children","isExpanded","onToggle","isExpandable","internalExpanded","setInternalExpanded","useState","expanded","handleToggle","newExpanded","alertClasses","headerClasses","expandableContentClasses","jsxs","Button","getTextColor","CaretUpIcon","CaretDownIcon","Fragment"],"mappings":"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"}

package/dist/components/AppLogo.js

@@ -0,0 +1,43 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Avatar as p } from "./Avatar.js";
+import { Tag as g } from "./Tag.js";
+import { Typography as m } from "./Typography/index.js";
+import { getFontWeight as d, getFontSize as u } from "./Typography/textStyles.js";
+const j = ({
+  src: i,
+  name: e,
+  showName: f = !0,
+  size: r = 24,
+  nameSize: o = "medium",
+  nameWeight: a = "normal",
+  version: n,
+  truncate: c = !1,
+  className: s = ""
+}) => {
+  const h = r <= 18 ? "gap-2" : "gap-3";
+  return f ? (
+    // `max-w-full` is what makes `truncate` work — without it the box is floored at the name's min-content width.
+    /* @__PURE__ */ l("span", { className: `inline-flex items-center ${h} max-w-full ${s}`.trim(), children: [
+      /* @__PURE__ */ t(p, { src: i, name: e, size: r, shape: "square", className: "shrink-0" }),
+      /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-2 min-w-0", children: [
+        c ? /* @__PURE__ */ t(
+          m.EllipsisText,
+          {
+            maxWidth: "100%",
+            tooltip: e,
+            style: {
+              fontSize: u(o),
+              fontWeight: d(a)
+            },
+            children: e
+          }
+        ) : /* @__PURE__ */ t(m.Text, { size: o, fontWeight: a, children: e }),
+        n ? /* @__PURE__ */ t("span", { className: "shrink-0", children: /* @__PURE__ */ t(g, { value: n, textTransform: "none", paddingSize: "compact" }) }) : null
+      ] })
+    ] })
+  ) : /* @__PURE__ */ t(p, { src: i, name: e, size: r, shape: "square", className: s });
+};
+export {
+  j as default
+};
+//# sourceMappingURL=AppLogo.js.map