@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/ButtonList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonList.js","sources":["../../src/components/ButtonList.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\n\ninterface ButtonListProps {\n    buttons: Array<{\n        key: string;\n        children: ReactNode;\n        onClick?: (event: React.MouseEvent) => void;\n        /** When set, the item renders as an anchor so it can be opened in a new tab. */\n        href?: string;\n    }>;\n    className?: string;\n    /** Renders shorter, denser rows. */\n    compact?: boolean;\n}\n\nconst ButtonList: React.FC<ButtonListProps> = ({ buttons, className = '', compact = false }) => {\n    const sizeClasses = compact ? 'h-8 px-3 py-1.5' : 'h-10 px-3 py-2.5';\n    const itemClasses = `flex justify-between items-center w-full no-underline ${sizeClasses}\n        bg-[var(--malachite-buttonlist-background)]\n        hover:bg-[var(--malachite-buttonlist-hover-background)]\n        focus:bg-[var(--malachite-buttonlist-hover-background)]\n        active:opacity-60\n        border-none rounded-xl shadow-none\n        transition-all duration-150 ease-in-out\n        cursor-pointer\n        text-[var(--malachite-buttonlist-foreground)]\n        hover:text-[var(--malachite-buttonlist-hover-foreground)]\n        focus:text-[var(--malachite-buttonlist-hover-foreground)]\n        focus:outline-none`;\n\n    return (\n        <div className={`flex flex-col gap-1 w-full ${className}`}>\n            {buttons.map((button) =>\n                button.href ? (\n                    <a\n                        key={button.key}\n                        href={button.href}\n                        onClick={button.onClick}\n                        className={itemClasses}\n                    >\n                        {button.children}\n                    </a>\n                ) : (\n                    <button\n                        key={button.key}\n                        type=\"button\"\n                        onClick={button.onClick}\n                        className={itemClasses}\n                    >\n                        {button.children}\n                    </button>\n                ),\n            )}\n        </div>\n    );\n};\n\nexport default ButtonList;\n"],"names":["ButtonList","buttons","className","compact","itemClasses","button","jsx"],"mappings":";AAeA,MAAMA,IAAwC,CAAC,EAAE,SAAAC,GAAS,WAAAC,IAAY,IAAI,SAAAC,IAAU,SAAY;AAE5F,QAAMC,IAAc,yDADAD,IAAU,oBAAoB,kBACsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaxF,2BACK,OAAA,EAAI,WAAW,8BAA8BD,CAAS,IAClD,UAAAD,EAAQ;AAAA,IAAI,CAACI,MACVA,EAAO,OACH,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,MAAMD,EAAO;AAAA,QACb,SAASA,EAAO;AAAA,QAChB,WAAWD;AAAA,QAEV,UAAAC,EAAO;AAAA,MAAA;AAAA,MALHA,EAAO;AAAA,IAAA,IAQhB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,MAAK;AAAA,QACL,SAASD,EAAO;AAAA,QAChB,WAAWD;AAAA,QAEV,UAAAC,EAAO;AAAA,MAAA;AAAA,MALHA,EAAO;AAAA,IAAA;AAAA,EAMhB,GAGZ;AAER;"}

package/dist/components/Card.js

@@ -0,0 +1,109 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { useRef as A, useState as C, useEffect as D } from "react";
+import { GLASS_SURFACE_STYLE as H } from "./glassSurface.js";
+const T = ({
+  title: a,
+  children: u,
+  padding: d = "20px",
+  size: r = "default",
+  width: v,
+  minWidth: y,
+  dimmed: b = !1,
+  direction: c,
+  align: h,
+  fullHeight: f = !1,
+  border: i = "base",
+  alignSelf: R,
+  height: s,
+  footer: e,
+  glassFooter: t = !1,
+  className: S = "",
+  style: B = {},
+  headerConfig: l = {}
+}) => {
+  const n = A(null), [m, p] = C(0);
+  D(() => {
+    if (t && e && n.current) {
+      const x = new ResizeObserver((E) => {
+        for (const L of E)
+          p(L.contentRect.height);
+      });
+      return x.observe(n.current), p(n.current.offsetHeight), () => x.disconnect();
+    }
+  }, [t, e]);
+  const N = [
+    "card-base",
+    b ? "card-dimmed" : "",
+    i === "rounded" ? "card-rounded" : "",
+    f ? "h-full" : "",
+    s ? "flex flex-col" : "",
+    r === "small" ? "text-sm" : "",
+    S
+  ].filter(Boolean).join(" "), w = parseInt(d) || 20, j = {
+    padding: d,
+    display: c ? "flex" : void 0,
+    flexDirection: c,
+    alignItems: h,
+    ...s && { overflow: "auto", height: "100%" },
+    ...t && e && m > 0 && {
+      paddingBottom: `${w + m + 10}px`
+    }
+  }, z = {
+    width: v,
+    minWidth: y,
+    alignSelf: R,
+    ...f && { height: "100%" },
+    ...s && { height: s, display: "flex", flexDirection: "column" },
+    ...t && e && { position: "relative" },
+    overflow: "hidden",
+    ...B
+  };
+  return /* @__PURE__ */ g("div", { className: N, style: z, children: [
+    a && /* @__PURE__ */ o(
+      "div",
+      {
+        className: "card-header px-3 py-2",
+        style: {
+          marginBottom: "1px",
+          fontSize: r === "small" ? "12px" : "13px",
+          fontWeight: "normal",
+          padding: l == null ? void 0 : l.padding
+        },
+        children: /* @__PURE__ */ o("div", { className: "font-normal overflow-visible", children: a })
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "flex-1",
+        style: {
+          ...j,
+          ...t && e && { position: "relative" }
+        },
+        children: u
+      }
+    ),
+    e && /* @__PURE__ */ o(
+      "div",
+      {
+        ref: t ? n : void 0,
+        className: "card-footer px-4 py-3",
+        style: t ? {
+          ...H,
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderBottomLeftRadius: i === "rounded" ? "20px" : "12px",
+          borderBottomRightRadius: i === "rounded" ? "20px" : "12px"
+        } : void 0,
+        children: e
+      }
+    )
+  ] });
+};
+export {
+  T as Card,
+  T as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../src/components/Card.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\n\ninterface CardProps {\n    title?: string | React.ReactNode;\n    padding?: string;\n    children?: React.ReactNode;\n    size?: 'default' | 'small';\n    width?: string;\n    minWidth?: string;\n    direction?: 'row' | 'column';\n    align?: 'center';\n    dimmed?: boolean;\n    fullHeight?: boolean;\n    border?: 'base' | 'rounded';\n    alignSelf?: 'center';\n    height?: string;\n    footer?: React.ReactNode;\n    glassFooter?: boolean;\n    className?: string;\n    style?: React.CSSProperties;\n    headerConfig?: {\n        padding?: string;\n    };\n}\n\nconst Card: React.FC<CardProps> = ({\n    title,\n    children,\n    padding = '20px',\n    size = 'default',\n    width,\n    minWidth,\n    dimmed = false,\n    direction,\n    align,\n    fullHeight = false,\n    border = 'base',\n    alignSelf,\n    height,\n    footer,\n    glassFooter = false,\n    className = '',\n    style = {},\n    headerConfig = {},\n}) => {\n    const footerRef = useRef<HTMLDivElement>(null);\n    const [footerHeight, setFooterHeight] = useState(0);\n\n    useEffect(() => {\n        if (glassFooter && footer && footerRef.current) {\n            const observer = new ResizeObserver((entries) => {\n                for (const entry of entries) {\n                    setFooterHeight(entry.contentRect.height);\n                }\n            });\n\n            observer.observe(footerRef.current);\n            setFooterHeight(footerRef.current.offsetHeight);\n\n            return () => observer.disconnect();\n        }\n    }, [glassFooter, footer]);\n\n    // Size-specific padding\n    const sizeClasses = size === 'small' ? 'text-sm' : '';\n\n    // Dynamic classes based on props\n    const cardClasses = [\n        'card-base',\n        dimmed ? 'card-dimmed' : '',\n        border === 'rounded' ? 'card-rounded' : '',\n        fullHeight ? 'h-full' : '',\n        height ? 'flex flex-col' : '',\n        sizeClasses,\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    // Content styles\n    const paddingValue = parseInt(padding) || 20;\n    const extraPadding = 10;\n    const contentStyles: React.CSSProperties = {\n        padding,\n        display: direction ? 'flex' : undefined,\n        flexDirection: direction,\n        alignItems: align,\n        ...(height && { overflow: 'auto', height: '100%' }),\n        ...(glassFooter &&\n            footer &&\n            footerHeight > 0 && {\n                paddingBottom: `${paddingValue + footerHeight + extraPadding}px`,\n            }),\n    };\n\n    // Card container styles\n    const cardContainerStyles: React.CSSProperties = {\n        width,\n        minWidth,\n        alignSelf,\n        ...(fullHeight && { height: '100%' }),\n        ...(height && { height, display: 'flex', flexDirection: 'column' }),\n        ...(glassFooter && footer && { position: 'relative' }),\n        overflow: 'hidden',\n        ...style,\n    };\n\n    return (\n        <div className={cardClasses} style={cardContainerStyles}>\n            {/* Header */}\n            {title && (\n                <div\n                    className=\"card-header px-3 py-2\"\n                    style={{\n                        marginBottom: '1px',\n                        fontSize: size === 'small' ? '12px' : '13px',\n                        fontWeight: 'normal',\n                        padding: headerConfig?.padding,\n                    }}\n                >\n                    <div className=\"font-normal overflow-visible\">{title}</div>\n                </div>\n            )}\n\n            {/* Body */}\n            <div\n                className=\"flex-1\"\n                style={{\n                    ...contentStyles,\n                    ...(glassFooter && footer && { position: 'relative' }),\n                }}\n            >\n                {children}\n            </div>\n\n            {/* Footer */}\n            {footer && (\n                <div\n                    ref={glassFooter ? footerRef : undefined}\n                    className=\"card-footer px-4 py-3\"\n                    style={\n                        glassFooter\n                            ? {\n                                  ...GLASS_SURFACE_STYLE,\n                                  position: 'absolute',\n                                  bottom: 0,\n                                  left: 0,\n                                  right: 0,\n                                  borderBottomLeftRadius: border === 'rounded' ? '20px' : '12px',\n                                  borderBottomRightRadius: border === 'rounded' ? '20px' : '12px',\n                              }\n                            : undefined\n                    }\n                >\n                    {footer}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default Card;\nexport { Card };\n"],"names":["Card","title","children","padding","size","width","minWidth","dimmed","direction","align","fullHeight","border","alignSelf","height","footer","glassFooter","className","style","headerConfig","footerRef","useRef","footerHeight","setFooterHeight","useState","useEffect","observer","entries","entry","cardClasses","paddingValue","contentStyles","cardContainerStyles","jsxs","jsx","GLASS_SURFACE_STYLE"],"mappings":"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"}

package/dist/components/CardStrip.js

@@ -0,0 +1,454 @@
+import { jsxs as X, jsx as u } from "react/jsx-runtime";
+import $, { useRef as Z, useState as bt, useCallback as L, useLayoutEffect as F } from "react";
+import Ft from "./CustomIcons/ArrowLeftIcon.js";
+import Ht from "./CustomIcons/ForwardArrowIcon.js";
+import Xt from "./CustomIcons/PlusIcon.js";
+import { CONTENT_INSET as mt } from "./PageLayout/constants.js";
+import { CARD_FLARE_PX as m, STRIP_RULE_PX as Wt, CARD_FLARE_TIP_PX as tt, CARD_WIDTH_PX as Mt, FLARE_CLASS as Yt } from "./SelectableCard.js";
+import { CardStripSlotContext as Rt, PINNED_SLOT as Vt, SCROLLED_SLOT as zt } from "./cardStripSlot.js";
+import { FOCUS_RING as Kt } from "./focusRing.js";
+import { useAdoptedStyleSheet as jt } from "./useAdoptedStyleSheet.js";
+const qt = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), I = '[role="radio"]', Zt = "data-card-strip-scroller", Jt = "data-card-strip-trough", W = "malachite-card-strip", R = "malachite-card-strip-scroller", Dt = "malachite-card-strip-fade", x = "malachite-card-strip-add-tile", Ot = "[data-selectable-card-actions]", Qt = 'a[href], area[href], button, input, select, textarea, iframe, [contenteditable="true"], [tabindex]', w = "data-card-strip-prev-tabindex", J = 1, te = 0.8, ee = (t) => {
+  const [r, c] = Array.from(t.children), s = r && c ? c.getBoundingClientRect().left - r.getBoundingClientRect().left : (r == null ? void 0 : r.getBoundingClientRect().width) ?? 0, i = t.clientWidth - m * 2;
+  return s <= 0 ? i * te : Math.max(1, Math.floor(i / s)) * s;
+}, re = 80, ne = 20, gt = 11, T = 12, P = 52, oe = (P + ne) / 2, Ct = "var(--malachite-shadow-default)", ae = "var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))", ce = "var(--malachite-card-strip-arrow-border, #e8e8e8)", et = "var(--malachite-card-strip-background, #f1f1f1)", _t = "var(--malachite-radius-xxl, 14px)", se = `${_t} ${_t} 0 0`, At = "var(--malachite-radius-xxxl, 16px)", ie = `${At} ${At} 0 0`, M = 4, xt = re + (m - M), le = Mt, de = "var(--malachite-card-strip-divider, #dddddd)", St = "var(--malachite-card-strip-fade, transparent)", ue = "var(--malachite-selectable-card-hover-background, #e8e8e8)", fe = "var(--malachite-card-strip-arrow-border, #e8e8e8)", Et = "var(--malachite-selectable-card-hover-rule, #bbbbbb)", Lt = "0px 1px 0px 0px rgba(0, 0, 0, 0.4)", pe = "var(--malachite-card-background, #ffffff)", he = "var(--malachite-text-primary, #0a0a0a)", be = "var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))", me = "var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))", Re = "0px 1px 0px 0px rgba(10, 10, 10, 0.7)", nt = Wt, $t = 16, H = 9999, ge = 4, _e = `
+.${W} {
+    clip-path: inset(-${H}px -${H}px 0);
+}
+.${W}:has(:focus-visible) {
+    clip-path: inset(-${H}px -${H}px -${ge}px);
+}
+.${R} {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding-block: ${$t}px;
+    margin-block: -${$t}px;
+    /* overflow-x clips both axes, so the end cards would lose a flare; the negative margin trades
+       the padding back out and scroll-padding keeps the rest position at zero. */
+    padding-inline: ${m}px;
+    margin-inline: -${m}px;
+    scroll-padding-inline: ${m}px;
+}
+/* A card focused at a faded edge has to stay readable, so the fade lifts entirely. */
+.${W}:has(:focus-visible) .${Dt} {
+    display: none;
+}
+.${R}::-webkit-scrollbar {
+    display: none;
+}
+/* No bottom edge: the strip's rule is the baseline for the add tile as much as for a card. */
+.${x} > * {
+    background: ${et};
+    border-radius: ${se};
+}
+.${x}:hover:not(:has(button:disabled)) > * {
+    background: ${ue};
+}
+.${x} button:active:not(:disabled) {
+    opacity: 0.8;
+}
+.${x}:has(button:active) > * {
+    background: ${et};
+}
+.${x}[data-emphasis='secondary'] button {
+    border-color: ${fe};
+    box-shadow: ${Ct};
+}
+.${x}[data-emphasis='secondary']:hover:not(:has(button:disabled)) button {
+    border-color: ${Et};
+    box-shadow: ${Lt};
+}
+.${x}[data-emphasis='secondary'] button:active:not(:disabled) {
+    border-color: ${Et};
+    box-shadow: ${Lt};
+}
+.${x}[data-emphasis='primary'] button {
+    border-color: transparent;
+    box-shadow: ${Re};
+}
+.${R} > * {
+    flex: 0 0 auto;
+    min-width: 0;
+}
+.${R} > * + * {
+    border-left: 1px solid ${de};
+}
+.${R}[data-snap='true'] {
+    scroll-snap-type: x proximity;
+}
+.${R}[data-snap='true'] > * {
+    scroll-snap-align: start;
+}
+@media (prefers-reduced-motion: reduce) {
+    .${R} {
+        scroll-behavior: auto;
+    }
+    .${R}[data-snap='true'] {
+        scroll-snap-type: none;
+    }
+    .${R}[data-snap='true'] > * {
+        scroll-snap-align: none;
+    }
+}`, Ae = "malachite-card-strip-style", xe = () => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches, A = (t) => t.dataset.value ?? t.getAttribute("value"), Q = (t) => t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true", Se = (t) => {
+  const r = t.parentElement;
+  return !r || r.querySelectorAll(I).length !== 1 ? null : r.querySelector(Ot);
+}, Ee = (t, r) => {
+  const c = t.closest(I);
+  if (c)
+    return c;
+  if (t.closest(Ot))
+    return null;
+  let s = t;
+  for (; s && r.contains(s); ) {
+    const i = s.querySelectorAll(I);
+    if (i.length === 1 && i[0].parentElement === s)
+      return i[0];
+    s = s.parentElement;
+  }
+  return null;
+}, Le = (t) => {
+  const r = Se(t);
+  return r ? Array.from(r.querySelectorAll(Qt)) : [];
+}, $e = (t) => {
+  t.hasAttribute(w) || t.setAttribute(w, t.getAttribute("tabindex") ?? ""), t.setAttribute("tabindex", "-1");
+}, Te = (t) => {
+  if (!t.hasAttribute(w))
+    return;
+  const r = t.getAttribute(w);
+  t.removeAttribute(w), r ? t.setAttribute("tabindex", r) : t.removeAttribute("tabindex");
+}, ve = {
+  profile: "var(--malachite-selectable-card-selected-border, #047b43)",
+  library: "var(--malachite-selectable-card-library-selected-border, #bbbbbb)",
+  editing: "var(--malachite-selectable-card-pending-foreground, #96580a)"
+}, ye = {
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "left bottom",
+  backgroundSize: `100% ${nt}px`
+}, Tt = 0.5, vt = m - tt, De = (t) => {
+  const r = t.querySelector(`:scope > .${Yt}`);
+  if (!r)
+    return null;
+  const { left: c, right: s } = r.getBoundingClientRect();
+  return { left: c + vt, right: s - vt };
+}, Oe = (t, r, c, s) => {
+  if (!t)
+    return;
+  const i = ve[s], S = t.getBoundingClientRect(), v = S.left, k = c && (r != null && r.contains(c)) ? r.getBoundingClientRect() : S, E = c == null ? void 0 : c.getBoundingClientRect(), g = c ? De(c) : null, V = (g == null ? void 0 : g.left) ?? (E ? E.left - tt : 0), z = (g == null ? void 0 : g.right) ?? (E ? E.right + tt : 0), y = E ? Math.max(V, k.left) + Tt - v : 0, b = E ? Math.min(z, k.right) - Tt - v : 0;
+  t.style.backgroundImage = b > y ? `linear-gradient(to right, ${i} 0 ${y}px, transparent ${y}px ${b}px, ${i} ${b}px 100%)` : `linear-gradient(to right, ${i} 0 100%)`;
+}, Ce = {
+  marginInline: `calc(${mt} * -1)`,
+  paddingInline: mt
+}, Y = {
+  background: et,
+  borderRadius: ie,
+  paddingTop: `${M}px`,
+  paddingInline: `${M}px`,
+  marginBottom: `${nt}px`
+}, we = {
+  ...Y,
+  marginInline: `${T}px`
+}, Ie = Object.fromEntries(
+  [T, P].flatMap(
+    (t) => [T, P].map((r) => [
+      `${t}:${r}`,
+      { ...Y, marginInline: `${t}px ${r}px` }
+    ])
+  )
+), Pe = Y, ke = Y, Ne = {
+  marginInlineStart: `${T}px`
+}, Ue = {
+  primary: {
+    backgroundColor: be,
+    color: me
+  },
+  secondary: { backgroundColor: pe, color: he }
+}, wt = ({
+  label: t,
+  icon: r,
+  onClick: c,
+  disabled: s = !1,
+  emphasis: i = "secondary",
+  className: S = ""
+}) => /* @__PURE__ */ u(
+  "div",
+  {
+    className: x,
+    "data-emphasis": i,
+    style: {
+      ...Pe,
+      width: `${le}px`,
+      height: `calc(100% - ${nt}px)`
+    },
+    children: /* @__PURE__ */ u("div", { className: "flex h-full items-center justify-center px-4", children: /* @__PURE__ */ X(
+      "button",
+      {
+        type: "button",
+        onClick: c,
+        disabled: s,
+        style: Ue[i],
+        className: `${Kt} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${s ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${S}`,
+        children: [
+          /* @__PURE__ */ u("span", { className: "inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center", children: r ?? /* @__PURE__ */ u(Xt, { size: 13 }) }),
+          t
+        ]
+      }
+    ) })
+  }
+), rt = (t) => $.isValidElement(t) && t.type === wt, Be = (t) => $.isValidElement(t) && t.type === $.Fragment && $.Children.toArray(t.props.children).some(rt), yt = ({ side: t, onClick: r }) => /* @__PURE__ */ u(
+  "button",
+  {
+    type: "button",
+    tabIndex: -1,
+    "aria-hidden": "true",
+    "aria-label": t === "left" ? "Scroll left" : "Scroll right",
+    onClick: r,
+    className: "absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center w-5 h-5 rounded-lg cursor-pointer text-[var(--malachite-text-secondary)]",
+    style: {
+      [t]: `-${oe}px`,
+      background: ae,
+      border: `1px solid ${ce}`,
+      boxShadow: Ct
+    },
+    children: t === "left" ? /* @__PURE__ */ u(Ft, { size: gt }) : /* @__PURE__ */ u(Ht, { size: gt })
+  }
+), Ge = ({
+  value: t,
+  tone: r,
+  onChange: c,
+  children: s,
+  leading: i,
+  arrows: S = !0,
+  fadeEdges: v = !0,
+  snap: k = !0,
+  bleed: E = !1,
+  scrollSelectedIntoView: g = !0,
+  "aria-label": V,
+  "aria-labelledby": z,
+  className: y = "",
+  style: b
+}) => {
+  const D = Z(null), O = Z(null), [N, It] = bt({ canScrollLeft: !1, canScrollRight: !1 });
+  jt(D, _e, Ae);
+  const K = $.Children.toArray(s), j = K.filter((e) => !rt(e)), Pt = j.some(Be), U = j.length > 0, ot = K.filter(rt).map(
+    (e) => e.props.emphasis === void 0 ? $.cloneElement(e, { emphasis: U ? "secondary" : "primary" }) : e
+  ), at = K.length, _ = L(() => {
+    const e = D.current;
+    return e ? Array.from(e.querySelectorAll(I)) : [];
+  }, []), q = L(
+    () => _().filter((e) => A(e) !== null),
+    [_]
+  ), ct = Z(/* @__PURE__ */ new Set()), C = L((e, n) => {
+    ct.current.has(e) || (ct.current.add(e), console.warn(n));
+  }, []), [kt, Nt] = bt("profile");
+  F(() => {
+    var n, a;
+    const e = (a = (n = _().find((d) => A(d) === t)) == null ? void 0 : n.parentElement) == null ? void 0 : a.getAttribute("data-variant");
+    (e === "profile" || e === "library" || e === "editing") && Nt(e);
+  }, [_, t]), F(() => {
+    const e = _(), n = q(), d = n.find((o) => A(o) === t) ?? n.find((o) => !Q(o)) ?? null;
+    if (e.forEach((o) => {
+      const h = o === d, G = h ? 0 : -1;
+      o.tabIndex !== G && (o.tabIndex = G);
+      for (const ht of Le(o))
+        h ? Te(ht) : $e(ht);
+    }), process.env.NODE_ENV === "production")
+      return;
+    n.length !== e.length && C(
+      "missing-value",
+      'CardStrip: a child with role="radio" has no `data-value`. It cannot be selected or reached by arrow keys, so it is excluded from the radio set. Give every card a `data-value`.'
+    );
+    const l = /* @__PURE__ */ new Set();
+    for (const o of n) {
+      const h = A(o);
+      h !== null && (l.has(h) && C(
+        `duplicate:${h}`,
+        `CardStrip: two cards share the data-value "${h}". Both will read as checked and only the first is selectable — data-value must be unique.`
+      ), l.add(h));
+    }
+    const p = t !== "";
+    e.length > 0 && p && !l.has(t) && C(
+      `unmatched:${t}`,
+      `CardStrip: value "${t}" matches no card's data-value, so the group reports no selection.`
+    );
+    const f = e.filter(
+      (o) => o.getAttribute("aria-checked") === "true"
+    ).length;
+    e.length > 0 && p && f !== 1 && C(
+      `checked:${f}`,
+      `CardStrip: ${f} cards are aria-checked, but a radiogroup has exactly one. Drive each card's checked state from the strip's \`value\`.`
+    ), Pt && C(
+      "wrapped-add-tile",
+      "CardStrip: a CardStrip.AddTile inside a fragment is treated as a card and scrolls with them. The add tile must be a direct child of CardStrip."
+    );
+  }), F(() => {
+    if (!g)
+      return;
+    const e = O.current, n = _().find((G) => A(G) === t);
+    if (!e || !n || typeof e.scrollTo != "function")
+      return;
+    const d = (n.closest('[role="radio"]') ?? n).getBoundingClientRect(), l = e.getBoundingClientRect(), p = e.scrollLeft + (d.left - l.left), f = p + d.width, o = e.scrollLeft + m, h = e.scrollLeft + e.clientWidth - m;
+    p >= o && f <= h || e.scrollTo({
+      left: f > h ? f - e.clientWidth + m : p - m,
+      behavior: "instant"
+    });
+  }, [_, g, t, at]);
+  const st = r ?? kt, it = (b == null ? void 0 : b.background) !== void 0 || (b == null ? void 0 : b.backgroundImage) !== void 0, B = L(() => {
+    var f;
+    const e = O.current;
+    if (it || Oe(
+      D.current,
+      e,
+      (f = _().find((o) => A(o) === t)) == null ? void 0 : f.parentElement,
+      st
+    ), !e)
+      return;
+    const { scrollWidth: n, clientWidth: a, scrollLeft: d } = e, l = n > a + J, p = {
+      canScrollLeft: l && d > J,
+      canScrollRight: l && d + a < n - J
+    };
+    It(
+      (o) => o.canScrollLeft === p.canScrollLeft && o.canScrollRight === p.canScrollRight ? o : p
+    );
+  }, [it, _, st, t]);
+  F(() => {
+    B();
+    const e = O.current;
+    if (!e)
+      return;
+    const n = () => B();
+    e.addEventListener("scroll", n, { passive: !0 });
+    const a = typeof ResizeObserver < "u" ? new ResizeObserver(() => B()) : null;
+    return a == null || a.observe(e), () => {
+      e.removeEventListener("scroll", n), a == null || a.disconnect();
+    };
+  }, [B, at]);
+  const lt = L((e) => {
+    const n = O.current;
+    !n || typeof n.scrollBy != "function" || n.scrollBy({
+      left: e * ee(n),
+      behavior: xe() ? "auto" : "smooth"
+    });
+  }, []), Ut = L(
+    (e) => {
+      if (!qt.has(e.key))
+        return;
+      const n = e.target;
+      if (!(n instanceof Element) || !n.closest(I))
+        return;
+      const a = q().filter((o) => !Q(o));
+      if (a.length === 0)
+        return;
+      e.preventDefault();
+      const d = a.findIndex((o) => A(o) === t);
+      let l;
+      if (e.key === "Home")
+        l = 0;
+      else if (e.key === "End")
+        l = a.length - 1;
+      else {
+        const o = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1;
+        l = ((d === -1 ? 0 : d) + o + a.length) % a.length;
+      }
+      const p = a[l], f = A(p);
+      f !== null && f !== t && c(f), p.focus();
+    },
+    [q, c, t]
+  ), Bt = L(
+    (e) => {
+      const n = e.target;
+      if (!(n instanceof Element))
+        return;
+      const a = D.current;
+      if (!a)
+        return;
+      const d = Ee(n, a);
+      if (!d || Q(d))
+        return;
+      const l = A(d);
+      l !== null && l !== t && c(l);
+    },
+    [c, t]
+  ), dt = S && N.canScrollLeft, ut = S && N.canScrollRight, ft = v && N.canScrollLeft, pt = v && N.canScrollRight, Gt = S ? Ie[`${dt ? P : T}:${ut ? P : T}`] : we;
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      ref: D,
+      onKeyDown: Ut,
+      onClick: Bt,
+      className: `${W} flex items-stretch ${y}`,
+      style: {
+        ...ye,
+        ...E ? Ce : null,
+        ...b
+      },
+      children: [
+        /* @__PURE__ */ X(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": V,
+            "aria-labelledby": z,
+            className: U ? "flex items-stretch min-w-0" : "flex items-stretch",
+            children: [
+              i ? /* @__PURE__ */ u(Rt.Provider, { value: Vt, children: /* @__PURE__ */ u("div", { className: "shrink-0", style: ke, children: i }) }) : null,
+              U ? /* @__PURE__ */ X(
+                "div",
+                {
+                  [Jt]: "",
+                  className: "relative min-w-0 shrink basis-auto",
+                  style: Gt,
+                  children: [
+                    /* @__PURE__ */ u(
+                      "div",
+                      {
+                        ref: O,
+                        tabIndex: -1,
+                        [Zt]: "",
+                        "data-snap": k ? "true" : "false",
+                        className: R,
+                        children: /* @__PURE__ */ u(Rt.Provider, { value: zt, children: j })
+                      }
+                    ),
+                    dt ? /* @__PURE__ */ u(yt, { side: "left", onClick: () => lt(-1) }) : null,
+                    ut ? /* @__PURE__ */ u(yt, { side: "right", onClick: () => lt(1) }) : null,
+                    ft || pt ? /* @__PURE__ */ u(
+                      "div",
+                      {
+                        "aria-hidden": !0,
+                        "data-card-strip-fade": "",
+                        className: `${Dt} absolute pointer-events-none`,
+                        style: {
+                          inset: `-${M}px -${m}px 0`,
+                          background: `linear-gradient(to right, ${ft ? St : "transparent"} 0, transparent ${xt}px, transparent calc(100% - ${xt}px), ${pt ? St : "transparent"} 100%)`
+                        }
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        ot.length > 0 ? /* @__PURE__ */ u(
+          "div",
+          {
+            className: "shrink-0",
+            style: !U && i ? Ne : void 0,
+            children: ot
+          }
+        ) : null
+      ]
+    }
+  );
+};
+Ge.AddTile = wt;
+export {
+  Ge as CardStrip,
+  Ge as default
+};
+//# sourceMappingURL=CardStrip.js.map