@stackone/malachite 2.20.1 → 2.22.0

package/dist/components/SegmentedControl.js

@@ -0,0 +1,107 @@
+import { jsx as g, jsxs as I } from "react/jsx-runtime";
+import { useRef as $, useCallback as A } from "react";
+import { FOCUS_RING as E } from "./focusRing.js";
+const D = {
+  small: {
+    text: "text-[length:var(--malachite-font-size-small,13px)]",
+    track: "h-[var(--malachite-control-height-small,28px)]",
+    item: "h-full px-2.5"
+  },
+  medium: {
+    text: "text-[length:var(--malachite-font-size-small,13px)]",
+    track: "h-[var(--malachite-control-height-medium,32px)]",
+    item: "h-full px-2.5"
+  },
+  large: {
+    text: "text-[length:var(--malachite-font-size-15,15px)]",
+    track: "h-[var(--malachite-control-height-large,42px)]",
+    item: "h-full px-4"
+  }
+}, N = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), j = "inline-flex items-center justify-center gap-1.5 rounded-[var(--malachite-radius-10,10px)] border-0 font-medium tracking-[0.13px] whitespace-nowrap transition-colors duration-150 ease-in-out", K = ({
+  options: n,
+  value: s,
+  onChange: d,
+  size: b = "medium",
+  fullWidth: u = !1,
+  disabled: o = !1,
+  "aria-label": p,
+  "aria-labelledby": k,
+  className: v = ""
+}) => {
+  const x = $([]), m = D[b], f = n.findIndex((e) => e.value === s), w = f >= 0 && !n[f].disabled ? f : n.findIndex((e) => !e.disabled), y = A(
+    (e) => {
+      var c;
+      if (o || !N.has(e.key))
+        return;
+      const t = n.reduce((i, h, S) => (h.disabled || i.push({ option: h, index: S }), i), []);
+      if (t.length === 0)
+        return;
+      e.preventDefault();
+      const l = t.findIndex(({ option: i }) => i.value === s);
+      let r;
+      if (e.key === "Home")
+        r = 0;
+      else if (e.key === "End")
+        r = t.length - 1;
+      else {
+        const i = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1;
+        r = ((l === -1 ? 0 : l) + i + t.length) % t.length;
+      }
+      const a = t[r];
+      a.option.value !== s && d(a.option.value), (c = x.current[a.index]) == null || c.focus();
+    },
+    [o, d, n, s]
+  );
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": p,
+      "aria-labelledby": k,
+      "aria-disabled": o || void 0,
+      onKeyDown: y,
+      className: `${// One display utility, not two: `flex` and `inline-flex` are both plain
+      // `display` utilities, so emitting both would resolve by stylesheet order
+      // (same hazard as the background above).
+      u ? "flex w-full" : "inline-flex"} ${m.track} items-center gap-1 p-0.5 rounded-xl bg-[var(--malachite-segmented-control-track-background)] ${o ? "opacity-50" : ""} ${v}`,
+      children: n.map((e, t) => {
+        const l = e.value === s, r = o || e.disabled;
+        let a;
+        return l ? a = "bg-[var(--malachite-segmented-control-selected-background)] text-[var(--malachite-segmented-control-selected-foreground)]" : r ? a = "bg-transparent text-[var(--malachite-segmented-control-item-foreground)]" : a = "bg-transparent text-[var(--malachite-segmented-control-item-foreground)] hover:text-[var(--malachite-segmented-control-item-hover-foreground)] cursor-pointer", /* @__PURE__ */ I(
+          "button",
+          {
+            ref: (c) => {
+              x.current[t] = c;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": l,
+            disabled: r,
+            tabIndex: t === w ? 0 : -1,
+            onClick: () => {
+              !r && !l && d(e.value);
+            },
+            className: `${E} ${j} ${m.text} ${m.item} ${a} ${u ? "flex-1" : ""} ${e.disabled && !o ? "opacity-50 cursor-not-allowed" : ""}`,
+            style: {
+              // Inline rather than a `shadow-[...]` class: Tailwind's shadow
+              // utilities compose `--tw-shadow-*` custom properties that rely on
+              // document-level @property registration and silently don't paint
+              // inside a shadow root (same caveat as `ring-*`).
+              boxShadow: l ? "var(--malachite-segmented-control-selected-shadow, 0px 1px 5px 0px rgba(0, 0, 0, 0.1))" : void 0
+            },
+            children: [
+              e.icon ? /* @__PURE__ */ g("span", { className: "inline-flex items-center justify-center w-4 h-4 shrink-0", children: e.icon }) : null,
+              e.label
+            ]
+          },
+          e.value
+        );
+      })
+    }
+  );
+};
+export {
+  K as SegmentedControl,
+  K as default
+};
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport { FOCUS_RING } from './focusRing';\n\ntype SegmentedControlSize = 'small' | 'medium' | 'large';\n\ninterface SegmentedControlOption<T extends string = string> {\n    value: T;\n    label: string;\n    icon?: React.ReactNode;\n    disabled?: boolean;\n}\n\ninterface SegmentedControlProps<T extends string = string> {\n    options: SegmentedControlOption<T>[];\n    /** The selected option's value. A value not present in `options` renders nothing selected. */\n    value: T;\n    onChange: (value: T) => void;\n    size?: SegmentedControlSize;\n    /** Stretch the track to its container and split it into equal segments. */\n    fullWidth?: boolean;\n    /** Disables every segment. Individual segments can also be disabled via `options`. */\n    disabled?: boolean;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n// The ladder governs a control's outer box. The height therefore sits on the track and\n// the items fill whatever the 4px inset leaves — putting it on the item instead makes a\n// `medium` segmented control 40px tall beside a 32px Dropdown.\nconst SIZE_CLASSES: Record<SegmentedControlSize, { text: string; track: string; item: string }> = {\n    small: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)]',\n        track: 'h-[var(--malachite-control-height-small,28px)]',\n        item: 'h-full px-2.5',\n    },\n    medium: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)]',\n        track: 'h-[var(--malachite-control-height-medium,32px)]',\n        item: 'h-full px-2.5',\n    },\n    large: {\n        text: 'text-[length:var(--malachite-font-size-15,15px)]',\n        track: 'h-[var(--malachite-control-height-large,42px)]',\n        item: 'h-full px-4',\n    },\n};\n\n/** Arrow keys move AND select, per the WAI-ARIA radiogroup pattern. */\nconst NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);\n\n// Deliberately no `bg-*` here: each state branch below supplies exactly one\n// background-color utility. Both `bg-transparent` and `bg-[var(--…)]` are plain\n// single-class utilities in the same `@layer utilities`, so an element carrying both\n// resolves by stylesheet order — and the arbitrary value loses, silently rendering the\n// selected thumb transparent.\nconst ITEM_BASE =\n    'inline-flex items-center justify-center gap-1.5 rounded-[var(--malachite-radius-10,10px)] border-0 font-medium tracking-[0.13px] whitespace-nowrap transition-colors duration-150 ease-in-out';\n\n/**\n * A rounded track of mutually-exclusive options — the segmented \"one of these\" control.\n *\n * Owns the track background, the selected-thumb chrome and the radiogroup semantics in\n * one place, so consumers never hand-roll a track around `PillButton` (whose `default`\n * variant tokens are tuned for standalone filter pills, not for a sunken track).\n *\n * Selection is conveyed non-visually via `role=\"radio\"` + `aria-checked`, and by a\n * foreground-colour change as well as the thumb, so it does not rest on background\n * colour alone.\n */\nconst SegmentedControl = <T extends string = string>({\n    options,\n    value,\n    onChange,\n    size = 'medium',\n    fullWidth = false,\n    disabled = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}: SegmentedControlProps<T>) => {\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const sizeBlock = SIZE_CLASSES[size];\n\n    const selectedIndex = options.findIndex((option) => option.value === value);\n    // Roving tabindex: the group is a single tab stop. When the selected option is\n    // missing or disabled, the first enabled option takes the stop so the control is\n    // still reachable by keyboard.\n    const selectedIsEnabled = selectedIndex >= 0 && !options[selectedIndex].disabled;\n    const tabStopIndex = selectedIsEnabled\n        ? selectedIndex\n        : options.findIndex((option) => !option.disabled);\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent) => {\n            if (disabled || !NAV_KEYS.has(event.key)) {\n                return;\n            }\n\n            const enabled = options.reduce<\n                Array<{ option: SegmentedControlOption<T>; index: number }>\n            >((acc, option, index) => {\n                if (!option.disabled) {\n                    acc.push({ option, index });\n                }\n                return acc;\n            }, []);\n            if (enabled.length === 0) {\n                return;\n            }\n\n            // Only once we know we'll act — otherwise Home/End etc. should still scroll.\n            event.preventDefault();\n\n            const currentPosition = enabled.findIndex(({ option }) => option.value === value);\n            let nextPosition: number;\n            if (event.key === 'Home') {\n                nextPosition = 0;\n            } else if (event.key === 'End') {\n                nextPosition = enabled.length - 1;\n            } else {\n                const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;\n                const from = currentPosition === -1 ? 0 : currentPosition;\n                nextPosition = (from + delta + enabled.length) % enabled.length;\n            }\n\n            const next = enabled[nextPosition];\n            if (next.option.value !== value) {\n                onChange(next.option.value);\n            }\n            itemRefs.current[next.index]?.focus();\n        },\n        [disabled, onChange, options, value],\n    );\n\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled || undefined}\n            onKeyDown={handleKeyDown}\n            className={`${\n                // One display utility, not two: `flex` and `inline-flex` are both plain\n                // `display` utilities, so emitting both would resolve by stylesheet order\n                // (same hazard as the background above).\n                fullWidth ? 'flex w-full' : 'inline-flex'\n            } ${sizeBlock.track} items-center gap-1 p-0.5 rounded-xl bg-[var(--malachite-segmented-control-track-background)] ${\n                disabled ? 'opacity-50' : ''\n            } ${className}`}\n        >\n            {options.map((option, index) => {\n                const isSelected = option.value === value;\n                const isDisabled = disabled || option.disabled;\n\n                let colorClasses: string;\n                if (isSelected) {\n                    colorClasses =\n                        'bg-[var(--malachite-segmented-control-selected-background)] text-[var(--malachite-segmented-control-selected-foreground)]';\n                } else if (isDisabled) {\n                    colorClasses =\n                        'bg-transparent text-[var(--malachite-segmented-control-item-foreground)]';\n                } else {\n                    colorClasses =\n                        'bg-transparent text-[var(--malachite-segmented-control-item-foreground)] hover:text-[var(--malachite-segmented-control-item-hover-foreground)] cursor-pointer';\n                }\n\n                return (\n                    <button\n                        key={option.value}\n                        ref={(element) => {\n                            itemRefs.current[index] = element;\n                        }}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={isSelected}\n                        disabled={isDisabled}\n                        tabIndex={index === tabStopIndex ? 0 : -1}\n                        onClick={() => {\n                            // Radios don't toggle off on re-click.\n                            if (!isDisabled && !isSelected) {\n                                onChange(option.value);\n                            }\n                        }}\n                        className={`${FOCUS_RING} ${ITEM_BASE} ${sizeBlock.text} ${sizeBlock.item} ${colorClasses} ${\n                            fullWidth ? 'flex-1' : ''\n                        } ${option.disabled && !disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n                        style={{\n                            // Inline rather than a `shadow-[...]` class: Tailwind's shadow\n                            // utilities compose `--tw-shadow-*` custom properties that rely on\n                            // document-level @property registration and silently don't paint\n                            // inside a shadow root (same caveat as `ring-*`).\n                            boxShadow: isSelected\n                                ? 'var(--malachite-segmented-control-selected-shadow, 0px 1px 5px 0px rgba(0, 0, 0, 0.1))'\n                                : undefined,\n                        }}\n                    >\n                        {option.icon ? (\n                            <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0\">\n                                {option.icon}\n                            </span>\n                        ) : null}\n                        {option.label}\n                    </button>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize };\n"],"names":["SIZE_CLASSES","NAV_KEYS","ITEM_BASE","SegmentedControl","options","value","onChange","size","fullWidth","disabled","ariaLabel","ariaLabelledBy","className","itemRefs","useRef","sizeBlock","selectedIndex","option","tabStopIndex","handleKeyDown","useCallback","event","enabled","acc","index","currentPosition","nextPosition","delta","next","_a","jsx","isSelected","isDisabled","colorClasses","jsxs","element","FOCUS_RING"],"mappings":"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"}

package/dist/components/SelectableCard.js

@@ -0,0 +1,364 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useRef as Re, useId as $e } from "react";
+import Te from "./CustomIcons/PinIcon.js";
+import { Tag as xe } from "./Tag.js";
+import ue from "./Tooltip.js";
+import M from "./TruncatedTooltip.js";
+import p from "./Typography/Text.js";
+import { useCardStripSlot as ge } from "./cardStripSlot.js";
+import { FOCUS_RING_WITHIN as ve } from "./focusRing.js";
+import { useAdoptedStyleSheet as Ie } from "./useAdoptedStyleSheet.js";
+const k = 240, K = `${k}px`, Z = "116px", V = "var(--malachite-radius-xxl, 14px)", L = `${V} ${V} 0 0`, u = "var(--malachite-selectable-card-muted-foreground, #7b7b7b)", ye = "var(--malachite-text-secondary, #7b7b7b)", se = "var(--malachite-selectable-card-accent, #047b43)", Ae = "var(--malachite-selectable-card-selected-tint, #e7f8f1)", Ne = "var(--malachite-selectable-card-selected-border, #047b43)", q = 0.7, Se = "var(--malachite-selectable-card-library-selected-tint, #f1f1f1)", Ce = "var(--malachite-selectable-card-library-selected-border, #bbbbbb)", re = "var(--malachite-selectable-card-pending-foreground, #96580a)", ne = "var(--malachite-selectable-card-editing-tint, #f9f2e9)", J = "var(--malachite-selectable-card-selected-surface-end, #ffffff)", Le = "var(--malachite-selectable-card-background, #f1f1f1)", Oe = "1px solid var(--malachite-selectable-card-border, #dddddd)", De = "var(--malachite-selectable-card-hover-background, #e8e8e8)", Pe = 14, s = Pe, b = 2, oe = 116, Fe = 14, ie = 2, dt = s - b / 2, $ = k + s * 2, T = oe + ie + b, ke = (a) => {
+  const t = b / 2, l = s + t, c = s + k - t, i = t, r = Fe - t;
+  return [
+    `M${l - s} ${a}`,
+    `A${s} ${s} 0 0 0 ${l} ${a - s}`,
+    `L${l} ${i + r}`,
+    `A${r} ${r} 0 0 1 ${l + r} ${i}`,
+    `L${c - r} ${i}`,
+    `A${r} ${r} 0 0 1 ${c} ${i + r}`,
+    `L${c} ${a - s}`,
+    `A${s} ${s} 0 0 0 ${c + s} ${a}`
+  ].join(" ");
+}, F = ke(oe + ie / 2), Q = `${F} Z`, g = "malachite-selectable-card-outline", o = "malachite-selectable-card", we = "malachite-selectable-card-style", f = "--malachite-selectable-card-state-outline", m = "--malachite-selectable-card-state-tint", O = {
+  "background-color": De,
+  "border-left-color": "transparent"
+}, D = {
+  "background-color": Le
+}, P = {
+  profile: {
+    resting: D,
+    hover: O,
+    selected: {
+      [f]: Ne,
+      [m]: Ae
+    }
+  },
+  library: {
+    resting: D,
+    hover: O,
+    selected: {
+      [f]: Ce,
+      [m]: Se
+    }
+  },
+  editing: {
+    resting: D,
+    hover: O,
+    selected: {
+      [f]: re,
+      [m]: ne
+    }
+  }
+}, x = { color: ye }, Be = {
+  profile: {
+    resting: x,
+    selected: { color: se, opacity: q }
+  },
+  library: { resting: x, selected: x },
+  editing: {
+    resting: x,
+    selected: { color: re, opacity: q }
+  }
+}, Ue = { "border-left": Oe }, Ge = `
+.${o}[data-state='selected'] {
+    z-index: 5;
+}
+.${o} > .${g} {
+    position: absolute;
+    left: -${s}px;
+    top: 0;
+    z-index: 0;
+    overflow: visible;
+    pointer-events: none;
+}
+.${o} > *:not(.${g}):not([data-selectable-card-actions]) {
+    position: relative;
+    z-index: 1;
+}
+.${o} > [data-selectable-card-actions] {
+    z-index: 2;
+}`, ce = (a) => Object.entries(a).map(([t, l]) => `    ${t}: ${l};`).join(`
+`), We = (a, t) => t === "hover" ? `.${o}[data-variant='${a}'][data-state='resting'][data-hoverable]:hover` : `.${o}[data-variant='${a}'][data-state='${t}']`, Ye = (a, t, l) => `${We(a, t)} {
+${ce(l)}
+}`, ze = Object.keys(P).flatMap(
+  (a) => Object.keys(P[a]).map(
+    (t) => Ye(a, t, P[a][t])
+  )
+).join(`
+`), He = `.${o}[data-pinned='false'][data-state='resting'] {
+${ce(
+  Ue
+)}
+}`, je = `${He}
+${ze}
+${Ge}`, Xe = {
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  color: u,
+  lineHeight: 1.6
+}, Me = { color: u, letterSpacing: "0.11px" }, w = "var(--malachite-selectable-card-pending-foreground, #96580a)", Ke = { color: w }, Ze = { color: w, opacity: 0.7 }, Ve = 36, qe = 38, ee = {
+  color: "var(--malachite-text-primary)"
+}, te = "Default profile", Je = 16, Qe = {
+  color: se,
+  display: "inline-flex"
+}, ae = () => /* @__PURE__ */ e(ue, { text: te, triggerAs: "span", describesTrigger: !1, children: /* @__PURE__ */ e("span", { role: "img", "aria-label": te, style: Qe, children: /* @__PURE__ */ e(Te, { size: Je }) }) }), le = (a) => {
+  const t = a.filter((l) => l !== void 0);
+  return t.length > 0 ? t.join(" ") : void 0;
+}, pt = ({
+  value: a,
+  title: t,
+  titleIcon: l,
+  isDefault: c = !1,
+  variant: i = "profile",
+  eyebrow: r,
+  status: E,
+  description: v,
+  countLabel: I,
+  actions: y,
+  selected: d = !1,
+  loading: de = !1,
+  loadingLabel: pe = "Loading…",
+  loadingHint: B,
+  disabled: _ = !1,
+  dimmed: U = !1,
+  onSelect: A,
+  tabIndex: he,
+  "aria-label": G,
+  className: W = "",
+  style: Y
+}) => {
+  const { pinned: fe } = ge(), me = !d && !_, N = Re(null);
+  Ie(N, je, we);
+  const h = `mal-selectable-card-${$e().replace(/[^a-zA-Z0-9_-]/g, "")}`, R = `${h}-outline`, z = `${h}-eyebrow`, H = `${h}-status`, S = `${h}-title`, j = `${h}-description`, X = `${h}-count`, be = G ? void 0 : le([r ? z : void 0, S, E ? H : void 0]), Ee = le([
+    v ? j : void 0,
+    I ? X : void 0
+  ]);
+  if (de)
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: N,
+        role: "status",
+        "aria-busy": "true",
+        "aria-live": "polite",
+        "data-variant": "editing",
+        "data-state": "selected",
+        className: `${o} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${W}`.trim(),
+        style: {
+          width: K,
+          height: Z,
+          borderRadius: L,
+          boxSizing: "border-box",
+          paddingTop: `${Ve}px`,
+          paddingBottom: `${qe}px`,
+          justifyContent: "center",
+          [f]: w,
+          [m]: ne,
+          ...Y
+        },
+        children: [
+          /* @__PURE__ */ n(
+            "svg",
+            {
+              className: g,
+              width: $,
+              height: T,
+              viewBox: `0 0 ${$} ${T}`,
+              fill: "none",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: R, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${m})` } }),
+                  /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: J } })
+                ] }) }),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: Q,
+                    "data-malachite-shape": "",
+                    style: { fill: `url(#${R})` }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: F,
+                    "data-malachite-shape": "",
+                    strokeWidth: b,
+                    style: { fill: "none", stroke: `var(${f})` }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(p, { size: "small", fontWeight: "semi-bold", style: Ke, children: pe }),
+          B ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: Ze, children: B }) : null
+        ]
+      }
+    );
+  const C = i === "library", _e = Be[i][d ? "selected" : "resting"];
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: N,
+      "data-variant": i,
+      "data-pinned": fe ? "true" : "false",
+      "data-state": d ? "selected" : "resting",
+      "data-hoverable": me ? "" : void 0,
+      className: `${o} group relative grid shrink-0 grid-rows-[1fr_auto] ${ve} ${W}`.trim(),
+      style: {
+        width: K,
+        height: Z,
+        borderRadius: L,
+        boxSizing: "border-box",
+        ...Y
+      },
+      children: [
+        d ? /* @__PURE__ */ n(
+          "svg",
+          {
+            className: g,
+            width: $,
+            height: T,
+            viewBox: `0 0 ${$} ${T}`,
+            fill: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: R, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${m})` } }),
+                /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: J } })
+              ] }) }),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  d: Q,
+                  "data-malachite-shape": "",
+                  style: { fill: `url(#${R})` }
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  d: F,
+                  "data-malachite-shape": "",
+                  strokeWidth: b,
+                  style: { fill: "none", stroke: `var(${f})` }
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "data-value": a,
+            "aria-checked": d,
+            "aria-label": G,
+            "aria-labelledby": be,
+            "aria-describedby": Ee,
+            "aria-disabled": _ || void 0,
+            tabIndex: he ?? (d ? 0 : -1),
+            onClick: () => {
+              _ || d || A == null || A(a);
+            },
+            className: `flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${_ ? "cursor-not-allowed" : "cursor-pointer"}`,
+            style: { borderRadius: L },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `flex h-[13px] shrink-0 items-center gap-2 ${y ? "pr-[26px]" : "pr-1"}`,
+                  children: /* @__PURE__ */ n("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                    C ? /* @__PURE__ */ n("span", { id: S, className: "flex min-w-0 items-center gap-1.5", children: [
+                      l ? /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: "flex shrink-0 items-center",
+                          style: ee,
+                          children: l
+                        }
+                      ) : null,
+                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ae, {}) }) : null,
+                      /* @__PURE__ */ e(M, { text: t, children: /* @__PURE__ */ e(
+                        p,
+                        {
+                          size: "small",
+                          fontWeight: "semi-bold",
+                          style: U ? { color: u } : void 0,
+                          children: t
+                        }
+                      ) })
+                    ] }) : null,
+                    r ? /* @__PURE__ */ e("span", { id: z, className: "flex min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: _e, children: r }) }) : null,
+                    E ? /* @__PURE__ */ e("span", { id: H, className: "flex min-w-0", children: /* @__PURE__ */ e(
+                      xe,
+                      {
+                        value: E.label,
+                        type: E.type ?? "default",
+                        textTransform: "none",
+                        paddingSize: "compact"
+                      }
+                    ) }) : null
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: `mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${C ? "justify-end" : "justify-between"}`,
+                  children: [
+                    C ? null : /* @__PURE__ */ n("div", { id: S, className: "flex min-w-0 items-center gap-1.5", children: [
+                      l ? /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: "flex shrink-0 items-center",
+                          style: ee,
+                          children: l
+                        }
+                      ) : null,
+                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ae, {}) }) : null,
+                      /* @__PURE__ */ e(M, { text: t, children: /* @__PURE__ */ e(
+                        p,
+                        {
+                          size: "small",
+                          fontWeight: "semi-bold",
+                          style: U ? { color: u } : void 0,
+                          children: t
+                        }
+                      ) })
+                    ] }),
+                    v ? /* @__PURE__ */ e("span", { id: j, className: "block min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", style: Xe, children: v }) }) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: X, className: "min-w-0 self-end truncate pr-4 pb-3 pl-4", children: I ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: Me, children: I }) : null }),
+        y ? /* @__PURE__ */ e(
+          "div",
+          {
+            "data-selectable-card-actions": "",
+            className: "absolute top-3 right-4 flex h-[13px] shrink-0 items-center gap-2.5",
+            children: y
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  Pe as CARD_FLARE_PX,
+  dt as CARD_FLARE_TIP_PX,
+  k as CARD_WIDTH_PX,
+  g as FLARE_CLASS,
+  ie as STRIP_RULE_PX,
+  pt as SelectableCard,
+  pt as default
+};
+//# sourceMappingURL=SelectableCard.js.map

package/dist/components/SelectableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useId, useRef } from 'react';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING_WITHIN } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n    label: string;\n    /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". */\n    type?: TagType;\n}\n\n/** The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n *  profile with unsaved changes. */\nexport type SelectableCardVariant = 'profile' | 'library' | 'editing';\n\nexport interface SelectableCardProps {\n    /** Identifies the card inside its group; handed back to `onSelect`. */\n    value: string;\n    title: string;\n    /** Leading glyph on the title line, e.g. a library/book icon. */\n    titleIcon?: React.ReactNode;\n    /** Pins the card as the account default, marked beside the title. */\n    isDefault?: boolean;\n    /** Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. */\n    variant?: SelectableCardVariant;\n    /** Small label above the title (\"Profile\", \"Explore\"). */\n    eyebrow?: string;\n    /** Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. */\n    status?: SelectableCardStatus;\n    /** Supporting copy under the title, clamped to two lines. */\n    description?: string;\n    /** Bottom-left summary (\"16 Actions\", \"10 Selected\"). */\n    countLabel?: string;\n    /** Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n     *  xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. */\n    actions?: React.ReactNode;\n    selected?: boolean;\n    /** Replaces the card's content with a centred in-progress message. */\n    loading?: boolean;\n    loadingLabel?: string;\n    loadingHint?: string;\n    /** Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. */\n    disabled?: boolean;\n    /** Mutes the title without blocking selection. */\n    dimmed?: boolean;\n    onSelect?: (value: string) => void;\n    /** Tab stop for the card. */\n    tabIndex?: number;\n    /** Replaces the generated accessible name (eyebrow + title + status). */\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/** How far a selected card's outline sweeps past its own edge. The strip keeps this much\n *  clear of its scroller's clip. */\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/** Weight of the strip's bottom rule, which a selected card's flare reaches down through. */\nexport const STRIP_RULE_PX = 2;\n\n/** Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n *  stops half a stroke inside the flare box. */\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX * 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. */\nconst pathTo = (base: number): string => {\n    const inset = STROKE_PX / 2;\n    const left = FLARE_PX + inset;\n    const right = FLARE_PX + CARD_WIDTH_PX - inset;\n    const top = inset;\n    const r = CORNER_PX - inset;\n    return [\n        `M${left - FLARE_PX} ${base}`,\n        `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n        `L${left} ${top + r}`,\n        `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n        `L${right - r} ${top}`,\n        `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n        `L${right} ${base - FLARE_PX}`,\n        `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n    ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' | 'hover' | 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n    'background-color': HOVER_SURFACE_FILL,\n    'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n    'background-color': RESTING_SURFACE,\n};\n\n/** Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. */\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n    profile: {\n        resting: RESTING_SURFACE_DECLARATIONS,\n        hover: HOVER_SURFACE,\n        selected: {\n            [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n            [TINT_PROPERTY]: PROFILE_TINT,\n        },\n    },\n    library: {\n        resting: RESTING_SURFACE_DECLARATIONS,\n        hover: HOVER_SURFACE,\n        selected: {\n            [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n            [TINT_PROPERTY]: LIBRARY_TINT,\n        },\n    },\n    editing: {\n        resting: RESTING_SURFACE_DECLARATIONS,\n        hover: HOVER_SURFACE,\n        selected: {\n            [OUTLINE_PROPERTY]: EDITING_ACCENT,\n            [TINT_PROPERTY]: EDITING_TINT,\n        },\n    },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n    profile: {\n        resting: RESTING_EYEBROW,\n        selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n    },\n    library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n    editing: {\n        resting: RESTING_EYEBROW,\n        selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n    },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n    z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n    position: absolute;\n    left: -${FLARE_PX}px;\n    top: 0;\n    z-index: 0;\n    overflow: visible;\n    pointer-events: none;\n}\n.${ROOT_CLASS} > *:not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n    position: relative;\n    z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n    z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n    Object.entries(declarations)\n        .map(([property, value]) => `    ${property}: ${value};`)\n        .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n    state === 'hover'\n        ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n        : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n    variant: SelectableCardVariant,\n    state: CardState,\n    declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n    .flatMap((variant) =>\n        (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n            ruleFor(variant, state, SURFACES[variant][state]),\n        ),\n    )\n    .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n    SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n    color: MUTED,\n    lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n    color: 'var(--malachite-text-primary)',\n};\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n    color: PROFILE_ACCENT,\n    display: 'inline-flex',\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n *  travels by `aria-describedby`, which describes rather than names. */\nconst DefaultMarker: React.FC = () => (\n    <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n        <span role=\"img\" aria-label={DEFAULT_MARKER_LABEL} style={DEFAULT_MARKER_STYLE}>\n            <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n        </span>\n    </Tooltip>\n);\n\nconst joinIds = (ids: Array<string | undefined>): string | undefined => {\n    const present = ids.filter((id): id is string => id !== undefined);\n    return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n    value,\n    title,\n    titleIcon,\n    isDefault = false,\n    variant = 'profile',\n    eyebrow,\n    status,\n    description,\n    countLabel,\n    actions,\n    selected = false,\n    loading = false,\n    loadingLabel = 'Loading…',\n    loadingHint,\n    disabled = false,\n    dimmed = false,\n    onSelect,\n    tabIndex,\n    'aria-label': ariaLabel,\n    className = '',\n    style,\n}) => {\n    const { pinned } = useCardStripSlot();\n    const hoverable = !selected && !disabled;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n    const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n    const outlineGradientId = `${instanceId}-outline`;\n    const eyebrowId = `${instanceId}-eyebrow`;\n    const statusId = `${instanceId}-status`;\n    const titleId = `${instanceId}-title`;\n    const descriptionId = `${instanceId}-description`;\n    const countId = `${instanceId}-count`;\n\n    const labelledBy = ariaLabel\n        ? undefined\n        : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n    const describedBy = joinIds([\n        description ? descriptionId : undefined,\n        countLabel ? countId : undefined,\n    ]);\n\n    if (loading) {\n        return (\n            <div\n                ref={rootRef}\n                role=\"status\"\n                aria-busy=\"true\"\n                aria-live=\"polite\"\n                data-variant=\"editing\"\n                data-state=\"selected\"\n                className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n                style={\n                    {\n                        width: CARD_WIDTH,\n                        height: CARD_HEIGHT,\n                        borderRadius: CARD_RADIUS,\n                        boxSizing: 'border-box',\n                        paddingTop: `${PENDING_BODY_TOP_PX}px`,\n                        paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n                        justifyContent: 'center',\n                        [OUTLINE_PROPERTY]: PENDING,\n                        [TINT_PROPERTY]: EDITING_TINT,\n                        ...style,\n                    } as React.CSSProperties\n                }\n            >\n                {/* The same outline a selected card wears: this IS the selection while a profile\n                    is being built, so it has to break the strip's rule rather than sit on it. */}\n                <svg\n                    className={FLARE_CLASS}\n                    width={FLARE_BOX_WIDTH}\n                    height={FLARE_BOX_HEIGHT}\n                    viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n                    fill=\"none\"\n                    aria-hidden=\"true\"\n                >\n                    <defs>\n                        <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n                            <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n                        </linearGradient>\n                    </defs>\n                    <path\n                        d={FILL_PATH}\n                        data-malachite-shape=\"\"\n                        style={{ fill: `url(#${outlineGradientId})` }}\n                    />\n                    <path\n                        d={OUTLINE_PATH}\n                        data-malachite-shape=\"\"\n                        strokeWidth={STROKE_PX}\n                        style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n                    />\n                </svg>\n                <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n                    {loadingLabel}\n                </Text>\n                {loadingHint ? (\n                    <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n                        {loadingHint}\n                    </Text>\n                ) : null}\n            </div>\n        );\n    }\n\n    const titleInTopRow = variant === 'library';\n\n    const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n\n    return (\n        <div\n            ref={rootRef}\n            data-variant={variant}\n            data-pinned={pinned ? 'true' : 'false'}\n            data-state={selected ? 'selected' : 'resting'}\n            data-hoverable={hoverable ? '' : undefined}\n            className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN} ${className}`.trim()}\n            style={{\n                width: CARD_WIDTH,\n                height: CARD_HEIGHT,\n                borderRadius: CARD_RADIUS,\n                boxSizing: 'border-box',\n                ...style,\n            }}\n        >\n            {selected ? (\n                <svg\n                    className={FLARE_CLASS}\n                    width={FLARE_BOX_WIDTH}\n                    height={FLARE_BOX_HEIGHT}\n                    viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n                    fill=\"none\"\n                    aria-hidden=\"true\"\n                >\n                    <defs>\n                        <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n                            <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n                        </linearGradient>\n                    </defs>\n                    <path\n                        d={FILL_PATH}\n                        data-malachite-shape=\"\"\n                        style={{ fill: `url(#${outlineGradientId})` }}\n                    />\n                    <path\n                        d={OUTLINE_PATH}\n                        data-malachite-shape=\"\"\n                        strokeWidth={STROKE_PX}\n                        style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n                    />\n                </svg>\n            ) : null}\n            <button\n                type=\"button\"\n                role=\"radio\"\n                data-value={value}\n                aria-checked={selected}\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                aria-describedby={describedBy}\n                aria-disabled={disabled || undefined}\n                tabIndex={tabIndex ?? (selected ? 0 : -1)}\n                onClick={() => {\n                    if (disabled || selected) {\n                        return;\n                    }\n                    onSelect?.(value);\n                }}\n                className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n                    disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n                }`}\n                style={{ borderRadius: CARD_RADIUS }}\n            >\n                {/* 26px is the xsmall icon button the cluster usually holds, plus a gap: the\n                    cluster stands over the end of this row, so the eyebrow stops short of it. */}\n                <div\n                    className={`flex h-[13px] shrink-0 items-center gap-2 ${\n                        actions ? 'pr-[26px]' : 'pr-1'\n                    }`}\n                >\n                    <div className=\"flex min-w-0 items-center gap-1.5\">\n                        {titleInTopRow ? (\n                            <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n                                {titleIcon ? (\n                                    <span\n                                        className=\"flex shrink-0 items-center\"\n                                        style={TITLE_ICON_STYLE}\n                                    >\n                                        {titleIcon}\n                                    </span>\n                                ) : null}\n                                {isDefault ? (\n                                    <span className=\"flex shrink-0 items-center\">\n                                        <DefaultMarker />\n                                    </span>\n                                ) : null}\n                                <TruncatedTooltip text={title}>\n                                    <Text\n                                        size=\"small\"\n                                        fontWeight=\"semi-bold\"\n                                        style={dimmed ? { color: MUTED } : undefined}\n                                    >\n                                        {title}\n                                    </Text>\n                                </TruncatedTooltip>\n                            </span>\n                        ) : null}\n                        {eyebrow ? (\n                            <span id={eyebrowId} className=\"flex min-w-0\">\n                                <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n                                    {eyebrow}\n                                </Text>\n                            </span>\n                        ) : null}\n                        {status ? (\n                            <span id={statusId} className=\"flex min-w-0\">\n                                <Tag\n                                    value={status.label}\n                                    type={status.type ?? 'default'}\n                                    textTransform=\"none\"\n                                    paddingSize=\"compact\"\n                                />\n                            </span>\n                        ) : null}\n                    </div>\n                </div>\n\n                <div\n                    className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n                        titleInTopRow ? 'justify-end' : 'justify-between'\n                    }`}\n                >\n                    {titleInTopRow ? null : (\n                        <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n                            {titleIcon ? (\n                                <span\n                                    className=\"flex shrink-0 items-center\"\n                                    style={TITLE_ICON_STYLE}\n                                >\n                                    {titleIcon}\n                                </span>\n                            ) : null}\n                            {isDefault ? (\n                                <span className=\"flex shrink-0 items-center\">\n                                    <DefaultMarker />\n                                </span>\n                            ) : null}\n                            <TruncatedTooltip text={title}>\n                                <Text\n                                    size=\"small\"\n                                    fontWeight=\"semi-bold\"\n                                    style={dimmed ? { color: MUTED } : undefined}\n                                >\n                                    {title}\n                                </Text>\n                            </TruncatedTooltip>\n                        </div>\n                    )}\n                    {description ? (\n                        <span id={descriptionId} className=\"block min-w-0\">\n                            <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n                                {description}\n                            </Text>\n                        </span>\n                    ) : null}\n                </div>\n            </button>\n\n            <span id={countId} className=\"min-w-0 self-end truncate pr-4 pb-3 pl-4\">\n                {countLabel ? (\n                    <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n                        {countLabel}\n                    </Text>\n                ) : null}\n            </span>\n\n            {/* Lifted out of the flow rather than given a grid cell, so it can sit on the\n                eyebrow row — which belongs to the control and cannot hold a second one. */}\n            {actions ? (\n                <div\n                    data-selectable-card-actions=\"\"\n                    className=\"absolute top-3 right-4 flex h-[13px] shrink-0 items-center gap-2.5\"\n                >\n                    {actions}\n                </div>\n            ) : null}\n        </div>\n    );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","DefaultMarker","jsx","Tooltip","PinIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","actions","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","countId","labelledBy","describedBy","jsxs","Text","titleInTopRow","eyebrowStyle","FOCUS_RING_WITHIN","TruncatedTooltip","Tag"],"mappings":"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"}