kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-536NL4X2.js

@@ -0,0 +1,89 @@
+"use client";
+import {
+  InlineSelector
+} from "./chunk-YRRZ22OK.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/option-selector.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OptionSelector({
+  label,
+  value,
+  options,
+  onChange,
+  compact = false,
+  className,
+  onOpenPanelHeightChange,
+  triggerAlign = "between"
+}) {
+  const selected = options.find((option) => option.id === value) ?? options[0];
+  return /* @__PURE__ */ jsx(
+    InlineSelector,
+    {
+      label,
+      value,
+      options,
+      onChange,
+      className: cn(compact ? "w-auto shrink-0" : "w-full", className),
+      panelClassName: "right-0 left-auto min-w-[11rem] rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card",
+      optionClassName: "px-3.5 py-2.5 data-[selected]:shadow-none",
+      onOpenPanelHeightChange,
+      renderTrigger: ({ open }) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex h-9 min-w-[4.5rem] items-center gap-1.5 rounded-full bg-foreground/8 px-3.5 text-body font-semibold leading-none text-foreground shadow-raised transition-all hover-gradient-violet",
+            triggerAlign === "center" ? "justify-center" : "justify-between",
+            open && "bg-secondary/20 text-secondary-content ring-1 ring-inset ring-secondary/40 shadow-glow-violet-soft hover-gradient-violet",
+            !compact && "w-full"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate leading-normal", children: selected?.label }),
+            /* @__PURE__ */ jsx(
+              IconGlyph,
+              {
+                glyph: ExpandMore,
+                className: cn(
+                  "shrink-0 text-icon-xs transition-transform",
+                  open ? "rotate-180 text-secondary-content" : "text-muted-foreground"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      renderOption: ({ option, selected: optionSelected }) => /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          option.icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: option.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block truncate text-body",
+                  optionSelected ? "font-semibold text-brand" : "font-medium text-foreground"
+                ),
+                children: option.label
+              }
+            ),
+            option.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-tiny text-muted-foreground", children: option.description })
+          ] })
+        ] }),
+        optionSelected && /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-sm text-secondary-content" })
+      ] })
+    }
+  );
+}
+
+export {
+  OptionSelector
+};

package/dist/web/chunk-563GMWFT.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  TooltipBubble
+} from "./chunk-YQDCU7ZL.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/restricted.tsx
+import { cloneElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Restricted({ reason, children, placement = "bottom", className }) {
+  const id = useId();
+  if (!reason) return children;
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "restricted", className: cn("group/tooltip relative inline-flex", className), children: [
+    cloneElement(children, {
+      "aria-disabled": true,
+      "aria-describedby": id,
+      className: cn(children.props.className, "cursor-not-allowed opacity-50"),
+      // Activation does nothing: no dialog opens and no form submits.
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }),
+    /* @__PURE__ */ jsx(TooltipBubble, { id, placement, children: reason })
+  ] });
+}
+
+export {
+  Restricted
+};

package/dist/web/chunk-5GBURTY4.js

@@ -0,0 +1,33 @@
+"use client";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/input.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-12 w-full px-4 py-3 text-body file:border-0 file:bg-transparent file:text-caption file:font-medium",
+          fieldSurface,
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  Input
+};

package/dist/web/chunk-5INE4WNW.js

@@ -0,0 +1,291 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  LegendSwatch,
+  TICK_FONT,
+  axisTextWidth,
+  chartLabelIndices,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  tooltipText,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-CXLGQSHM.js";
+
+// src/web/components/charts/mixed-chart.tsx
+import { useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MARK_VIEWS = {
+  bar: { value: "bar", label: "Bars", icon: "bar_chart" },
+  stacked: { value: "stacked", label: "Stacked bars", icon: "stacked_bar_chart" },
+  line: { value: "line", label: "Lines", icon: "show_chart" },
+  area: { value: "area", label: "Areas", icon: "area_chart" },
+  dots: { value: "dots", label: "Dots", icon: "scatter_plot" }
+};
+var MARGIN = { top: 12, right: 16, bottom: 26, left: 8 };
+var MAX_BAR_GROUP = 56;
+var ALL_MARKS = ["bar", "stacked", "line", "area", "dots"];
+function MarkSwatch({ mark, color }) {
+  if (mark === "area") {
+    return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
+      /* @__PURE__ */ jsx("rect", { width: "12", height: "12", rx: "3", fill: color, fillOpacity: "0.25" }),
+      /* @__PURE__ */ jsx("line", { x1: "1", x2: "11", y1: "3", y2: "3", stroke: color, strokeWidth: "2", strokeLinecap: "round" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(LegendSwatch, { color, shape: mark === "line" ? "line" : mark === "dots" ? "dot" : "rect" });
+}
+function MixedChart({
+  data,
+  series: allSeries,
+  label,
+  scaleLabel,
+  marks = ALL_MARKS,
+  integer = false,
+  formatValue = defaultChartFormat,
+  height = 280,
+  empty,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useChartWidth();
+  const [active, setActive] = useState(null);
+  const [chosen, setChosen] = useState(marks[0] ?? "bar");
+  const mark = marks.includes(chosen) ? chosen : marks[0] ?? "bar";
+  const idBase = `mixed-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = allSeries.filter((s) => visibility.isVisible(s.id));
+  const colorOf = (id) => seriesColor(allSeries.findIndex((s) => s.id === id));
+  const count = data.length;
+  if (count === 0 || allSeries.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const totals = data.map((d) => series.reduce((sum, s) => sum + Math.max(0, d.values[s.id] ?? 0), 0));
+  const max = mark === "stacked" ? Math.max(0, ...totals) : Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
+  const ticks = chartValueTicks(max, { integer });
+  const tickLabels = ticks.map(formatValue);
+  const plotLeft = MARGIN.left + axisTextWidth(tickLabels) + 8;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const top = max > 0 ? max : 1;
+  const band = plotWidth / count;
+  const x = (index) => plotLeft + band * (index + 0.5);
+  const y = (value) => plotBottom - Math.max(0, value) / top * plotHeight;
+  const labelIndices = chartLabelIndices(count, plotWidth / 72);
+  const groupWidth = Math.min(band * 0.7, MAX_BAR_GROUP);
+  const barWidth = mark === "stacked" ? groupWidth : Math.max(1, (groupWidth - (series.length - 1) * 2) / Math.max(1, series.length));
+  const pathFor = (id) => data.map((d, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(2)},${y(d.values[id] ?? 0).toFixed(2)}`).join("");
+  const rowsAt = (index) => series.map((s) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(data[index].values[s.id] ?? 0),
+    color: colorOf(s.id)
+  }));
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const px = (event.clientX - box.left) / box.width * width;
+    setActive(Math.max(0, Math.min(count - 1, Math.floor((px - plotLeft) / band))));
+  };
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, count) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, count);
+      return next === void 0 ? current : next;
+    });
+  };
+  const activeDatum = active === null ? null : data[active];
+  const strokeFor = (s) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-series": s.id,
+      "data-mark": mark,
+      d: pathFor(s.id),
+      fill: "none",
+      stroke: colorOf(s.id),
+      strokeWidth: mark === "area" ? 1.5 : 2,
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    },
+    s.id
+  );
+  const marksLayer = () => {
+    if (mark === "bar" || mark === "stacked") {
+      return data.map((d, index) => {
+        let stackTop = 0;
+        return series.map((s, position) => {
+          const value = Math.max(0, d.values[s.id] ?? 0);
+          const left = mark === "stacked" ? x(index) - groupWidth / 2 : x(index) - groupWidth / 2 + position * (barWidth + 2);
+          const bottom = mark === "stacked" ? y(stackTop) : plotBottom;
+          if (mark === "stacked") stackTop += value;
+          const barTop = mark === "stacked" ? y(stackTop) : y(value);
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-series": s.id,
+              "data-mark": mark,
+              x: left,
+              y: barTop,
+              width: barWidth,
+              height: Math.max(0, bottom - barTop - (mark === "stacked" && position > 0 ? 1 : 0)),
+              rx: mark === "stacked" ? 0 : Math.min(3, barWidth / 2),
+              fill: colorOf(s.id)
+            },
+            `${s.id}-${d.key}`
+          );
+        });
+      });
+    }
+    if (mark === "dots") {
+      return series.map((s) => /* @__PURE__ */ jsx("g", { "data-series": s.id, "data-mark": "dots", children: data.map((d, index) => /* @__PURE__ */ jsx("circle", { cx: x(index), cy: y(d.values[s.id] ?? 0), r: 4, fill: colorOf(s.id), stroke: "var(--card)", strokeWidth: 1.5 }, d.key)) }, s.id));
+    }
+    if (mark === "area") {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        series.map((s) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `${pathFor(s.id)}L${x(count - 1)},${plotBottom}L${x(0)},${plotBottom}Z`,
+            fill: `url(#${idBase}-wash-${s.id})`
+          },
+          `${s.id}-wash`
+        )),
+        series.map(strokeFor)
+      ] });
+    }
+    return series.map(strokeFor);
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      views: marks.map((m) => MARK_VIEWS[m]),
+      chartView: mark,
+      onChartViewChange: (next) => setChosen(next),
+      label,
+      className,
+      scale: `${scaleLabel} \xB7 linear, from 0`,
+      legend: /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: allSeries.map((s) => ({
+            id: s.id,
+            label: s.label,
+            color: colorOf(s.id),
+            swatch: /* @__PURE__ */ jsx(MarkSwatch, { mark, color: colorOf(s.id) })
+          })),
+          ...visibility.legend
+        }
+      ),
+      table: {
+        columns: ["Period", ...allSeries.map((s) => s.label)],
+        rows: data.map((d) => [d.detail ?? d.label, ...allSeries.map((s) => formatValue(d.values[s.id] ?? 0))])
+      },
+      announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${count} periods. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "100%",
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                className: "block overflow-visible",
+                "aria-hidden": "true",
+                onPointerMove,
+                onPointerLeave: () => setActive(null),
+                children: [
+                  /* @__PURE__ */ jsx("defs", { children: mark === "area" && series.map((s) => /* @__PURE__ */ jsxs("linearGradient", { id: `${idBase}-wash-${s.id}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: colorOf(s.id), stopOpacity: "0.22" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: colorOf(s.id), stopOpacity: "0.03" })
+                  ] }, s.id)) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: plotLeft - 8,
+                        y: y(tick),
+                        dy: "0.32em",
+                        textAnchor: "end",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        style: { fontVariantNumeric: "tabular-nums" },
+                        children: tickLabels[index]
+                      }
+                    )
+                  ] }, tick)) }),
+                  active !== null && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      "data-slot": "chart-active-band",
+                      x: plotLeft + band * active,
+                      y: plotTop,
+                      width: band,
+                      height: plotBottom - plotTop,
+                      fill: "var(--muted-foreground)",
+                      fillOpacity: 0.08
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-marks", "data-view": mark, children: marksLayer() }),
+                  active !== null && /* @__PURE__ */ jsx("g", { "data-slot": "chart-crosshair", children: (mark === "bar" || mark === "stacked" ? [] : series).map((s) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: x(active),
+                      cy: y(data[active].values[s.id] ?? 0),
+                      r: 4.5,
+                      fill: colorOf(s.id),
+                      stroke: "var(--card)",
+                      strokeWidth: 2
+                    },
+                    s.id
+                  )) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: x(index),
+                      y: plotBottom + 18,
+                      textAnchor: "middle",
+                      fontSize: TICK_FONT,
+                      fill: "var(--muted-foreground)",
+                      children: data[index].label
+                    },
+                    data[index].key
+                  )) })
+                ]
+              }
+            ),
+            activeDatum && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activeDatum.detail ?? activeDatum.label,
+                rows: rowsAt(active),
+                x: x(active) * (containerRef.current ? containerRef.current.clientWidth / width : 1),
+                y: plotTop,
+                width: containerRef.current?.clientWidth ?? width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  MixedChart
+};

package/dist/web/chunk-5MM5YGGG.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/skeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClass = {
+  primary: "bg-secondary/15",
+  secondary: "bg-secondary/10",
+  card: "bg-secondary/[0.08]"
+};
+function Skeleton({ className, tone = "primary" }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("animate-pulse rounded", toneClass[tone], className) });
+}
+function ListSkeletonRows({ rows = 3, className, rowClassName }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card animate-pulse",
+        rowClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-xl" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { tone: "secondary", className: "h-2.5 w-20" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-14" }),
+          /* @__PURE__ */ jsx(Skeleton, { tone: "secondary", className: "h-2 w-10" })
+        ] })
+      ]
+    },
+    index
+  )) });
+}
+
+export {
+  Skeleton,
+  ListSkeletonRows
+};

package/dist/web/chunk-5NCVH6N5.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  PageHeader
+} from "./chunk-MKMZH4XD.js";
+import {
+  FadeOverlay
+} from "./chunk-Z3H2FQVX.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/extension-page-frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ExtensionPageFrame({
+  children,
+  header,
+  title,
+  subtitle,
+  left,
+  right,
+  onBack,
+  backLabel,
+  titleAlign,
+  bottomNav,
+  bottomFade = Boolean(bottomNav),
+  scroll = true,
+  viewportAs = "main",
+  className,
+  contentClassName,
+  viewportClassName,
+  fadeClassName
+}) {
+  const renderedHeader = header ?? (title || subtitle || left || right || onBack ? /* @__PURE__ */ jsx(
+    PageHeader,
+    {
+      title,
+      subtitle,
+      left,
+      right,
+      onBack,
+      backLabel,
+      titleAlign
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial font-display text-foreground",
+        className
+      ),
+      children: [
+        renderedHeader,
+        scroll ? /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            className: cn("flex-1", contentClassName),
+            viewportAs,
+            viewportClassName,
+            children
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1", contentClassName), children }),
+        bottomNav,
+        bottomFade && /* @__PURE__ */ jsx(
+          FadeOverlay,
+          {
+            heightClassName: "h-20",
+            className: cn("fixed inset-x-0 bottom-0 z-20", fadeClassName)
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ExtensionPageFrame
+};

package/dist/web/chunk-5V2KMO56.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/selectable-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectableCard({
+  selected,
+  onClick,
+  title,
+  description,
+  badge,
+  preview,
+  indicator = true,
+  children,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      indicator && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+            selected ? "border-primary bg-primary bg-gradient-primary shadow-glow-primary-soft" : "border-secondary/40"
+          ),
+          children: selected && /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-white" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-body font-bold text-foreground", children: title }),
+          badge
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption leading-relaxed text-muted-foreground", children: description }),
+        children
+      ] })
+    ] }),
+    preview && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-right", children: preview })
+  ] });
+  const cardClassName = cn(
+    "w-full rounded-2xl border border-transparent bg-card p-4 text-left transition-all duration-200",
+    selected ? "bg-gradient-active ring-1 ring-inset ring-primary/40 shadow-glow-primary-soft" : cn("bg-gradient-card shadow-card", onClick && "hover:-translate-y-0.5 hover:shadow-card-hover"),
+    className
+  );
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: cardClassName, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cardClassName, children: content });
+}
+
+export {
+  SelectableCard
+};

package/dist/web/chunk-5WBAFYPH.js

@@ -0,0 +1,62 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/choice-group.tsx
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChoiceGroupContext = createContext(void 0);
+function ChoiceGroup({ legend, children, name, className }) {
+  const generated = useId();
+  return /* @__PURE__ */ jsxs("fieldset", { "data-slot": "choice-group", className: cn("m-0 min-w-0 space-y-2 border-0 p-0", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: cn(eyebrow, "mb-1 p-0 text-muted-foreground"), children: legend }),
+    /* @__PURE__ */ jsx(ChoiceGroupContext.Provider, { value: name ?? generated, children })
+  ] });
+}
+function Choice({ checked, onChange, title, detail, disabled, name, className }) {
+  const groupName = useContext(ChoiceGroupContext);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-slot": "choice",
+      className: cn(
+        "flex min-w-0 items-start gap-3 text-body text-foreground",
+        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: name ?? groupName,
+            checked,
+            disabled,
+            onChange,
+            className: "mt-1 size-4 shrink-0 accent-primary"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+          detail && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block truncate text-caption text-muted-foreground",
+              title: typeof detail === "string" ? detail : void 0,
+              children: detail
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  ChoiceGroup,
+  Choice
+};