@robr0/design-system 0.4.0 → 0.5.0

package/components/Composer/Composer.js

@@ -0,0 +1,120 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useLayoutEffect } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import "./Composer.css";
+const Composer = React.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onValueChange,
+    onSubmit,
+    streaming = false,
+    onStop,
+    maxRows = 8,
+    attachments,
+    actions,
+    trailingActions,
+    sendLabel = "Send message",
+    stopLabel = "Stop generating",
+    className = "",
+    onChange,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-composer";
+    const textareaRef = useRef(null);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const disabled = Boolean(rest.disabled);
+    const canSend = !disabled && currentValue.trim() !== "";
+    const setTextareaRef = (node) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useLayoutEffect(() => {
+      const node = textareaRef.current;
+      if (!node) return;
+      if (typeof CSS !== "undefined" && CSS.supports("field-sizing", "content")) return;
+      node.style.height = "auto";
+      node.style.height = `${node.scrollHeight}px`;
+    }, [currentValue]);
+    const submit = () => {
+      if (streaming || !canSend) return;
+      onSubmit?.(currentValue);
+    };
+    const handleChange = (e) => {
+      if (!isControlled) setUncontrolledValue(e.target.value);
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    };
+    const handleShellClick = (e) => {
+      const target = e.target;
+      if (target.closest('button, a, textarea, input, select, [role="button"]')) return;
+      textareaRef.current?.focus();
+    };
+    const classes = [baseClass, disabled ? `${baseClass}--disabled` : "", className].filter(Boolean).join(" ");
+    const ariaLabel = rest["aria-label"] ?? (rest["aria-labelledby"] !== void 0 ? void 0 : "Message");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes,
+        style: { "--ds-composer-max-rows": maxRows },
+        onClick: handleShellClick,
+        children: [
+          attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...rest,
+              ref: setTextareaRef,
+              className: `${baseClass}__textarea`,
+              rows: 1,
+              value: currentValue,
+              "aria-label": ariaLabel,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+            actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__trailing`, children: [
+              trailingActions,
+              streaming ? /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "stop",
+                  variant: "primary",
+                  ariaLabel: stopLabel,
+                  disabled,
+                  onClick: onStop
+                }
+              ) : /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "arrow_upward",
+                  variant: "primary",
+                  ariaLabel: sendLabel,
+                  disabled: !canSend,
+                  onClick: submit
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Composer.displayName = "Composer";
+export {
+  Composer
+};

package/components/DocumentChip/DocumentChip.css

@@ -0,0 +1,181 @@
+/* ============================================
+   DOCUMENT CHIP COMPONENT
+   Compact file reference tile: type icon, name,
+   metadata line, upload progress, optional remove.
+   ============================================ */
+
+.ds-document-chip {
+  /* Accent indirection — the error modifier repoints one variable
+     instead of restyling each part */
+  --ds-document-chip-border: var(--color-bg-container-border);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+
+  padding: var(--padding-xs) var(--padding-sm-md);
+
+  border: var(--border-xs) solid var(--ds-document-chip-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   SIZE — COMPACT (single line for composer rows)
+   ============================================ */
+
+.ds-document-chip--compact {
+  gap: var(--gap-xs);
+  padding: var(--padding-xxs) var(--padding-sm);
+}
+
+/* ============================================
+   ERROR — repoint the border accent
+   ============================================ */
+
+.ds-document-chip--error {
+  --ds-document-chip-border: var(--color-status-error-border);
+}
+
+/* ============================================
+   MAIN — body button when the chip is clickable
+   ============================================ */
+
+.ds-document-chip__main {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__main:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   TYPE ICON
+   ============================================ */
+
+.ds-document-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-icon-primary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-document-chip--compact .ds-document-chip__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-document-chip--error .ds-document-chip__icon {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   TEXT BLOCK — name over one detail line
+   ============================================ */
+
+.ds-document-chip__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+.ds-document-chip__name {
+  /* Consumer-overridable truncation width */
+  max-width: var(--ds-document-chip-max-width, 28ch);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-document-chip__meta,
+.ds-document-chip__error {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  white-space: nowrap;
+}
+
+.ds-document-chip__meta {
+  color: var(--color-text-tertiary);
+}
+
+.ds-document-chip__error {
+  color: var(--color-status-error-text);
+}
+
+/* Composed ProgressBar replacing the metadata line */
+.ds-document-chip__progress {
+  align-self: stretch;
+}
+
+/* ============================================
+   REMOVE BUTTON
+   ============================================ */
+
+.ds-document-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-full);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-document-chip__remove:not(:disabled):hover {
+  color: var(--color-text-primary);
+}
+
+.ds-document-chip__remove:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-document-chip__main:focus-visible,
+.ds-document-chip__remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}

package/components/DocumentChip/DocumentChip.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export type DocumentChipFileType = 'pdf' | 'doc' | 'sheet' | 'slide' | 'image' | 'code' | 'archive' | 'generic';
+/** Props owned by DocumentChip itself — everything else falls through to the root element. */
+type DocumentChipOwnProps = {
+    /** File name, truncated with an ellipsis when it outgrows the tile. */
+    name: string;
+    /** Document type — picks the leading Material Symbol. */
+    fileType?: DocumentChipFileType;
+    /** Override the type icon — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Free-text metadata line, e.g. "1.2 MB" or "12 pages" — callers keep their own formatting. */
+    meta?: string;
+    /** Upload progress, 0–100. While set, replaces the metadata line with a progress bar. */
+    progress?: number;
+    /** Error message — replaces the metadata line and colours the tile with the error pair. */
+    error?: string;
+    /** Tile size. Compact drops the metadata line — name only — for dense composer rows. */
+    size?: 'default' | 'compact';
+    /** Click handler — presence makes the chip body (icon + text) an interactive button. */
+    onClick?: () => void;
+    /** Remove handler — renders a trailing close button. */
+    onRemove?: () => void;
+    /** Accessible label for the remove button. */
+    removeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface DocumentChipProps extends DocumentChipOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DocumentChipOwnProps> {
+}
+/**
+ * DocumentChip is a compact file reference: a two-line tile with a type
+ * icon, name, metadata line, upload progress, and an optional remove
+ * button. It references documents attached to chat messages or queued
+ * above a composer — Chip stays the one-line pill for attributes, and
+ * FileInput stays the form control that owns selection.
+ *
+ * The root is always a `<div>`; passing `onClick` turns the body into a
+ * `<button>` so click and remove coexist without nesting controls.
+ */
+export declare const DocumentChip: React.ForwardRefExoticComponent<DocumentChipProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/DocumentChip/DocumentChip.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { ProgressBar } from "../ProgressBar/ProgressBar.js";
+import "./DocumentChip.css";
+import "../../fonts/material-symbols.css";
+const FILE_TYPE_ICONS = {
+  pdf: "picture_as_pdf",
+  doc: "description",
+  sheet: "table",
+  slide: "co_present",
+  image: "image",
+  code: "code",
+  archive: "folder_zip",
+  generic: "draft"
+};
+const DocumentChip = React.forwardRef(
+  ({
+    name,
+    fileType = "generic",
+    icon,
+    meta,
+    progress,
+    error,
+    size = "default",
+    onClick,
+    onRemove,
+    removeLabel = "Remove file",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-document-chip";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      error ? `${baseClass}--error` : "",
+      onClick ? `${baseClass}--clickable` : "",
+      onRemove ? `${baseClass}--removable` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const typeIcon = icon ?? FILE_TYPE_ICONS[fileType];
+    const showDetail = size !== "compact";
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof typeIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: typeIcon }) : typeIcon }),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: name }),
+        showDetail && error && /* @__PURE__ */ jsx("span", { className: `${baseClass}__error`, children: error }),
+        showDetail && !error && progress !== void 0 && /* @__PURE__ */ jsx(
+          ProgressBar,
+          {
+            className: `${baseClass}__progress`,
+            size: "compact",
+            value: progress,
+            showLabel: true,
+            ariaLabel: `Uploading ${name}`
+          }
+        ),
+        showDetail && !error && progress === void 0 && meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      onClick ? /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__main`, onClick, children: body }) : body,
+      onRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__remove`,
+          onClick: onRemove,
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+);
+DocumentChip.displayName = "DocumentChip";
+export {
+  DocumentChip
+};

package/components/InterruptCard/InterruptCard.css

@@ -0,0 +1,164 @@
+/* ============================================
+   INTERRUPT CARD COMPONENT
+   A human-in-the-loop checkpoint: a question
+   from the agent, a detail slot, and option
+   buttons in a footer.
+
+   ToolCall's pending language promoted to a
+   card — the warning pair on icon and border
+   while a decision is owed, routed through a
+   local custom-property pair so the answered
+   state repoints two variables and the whole
+   card drops to monochrome.
+   ============================================ */
+
+.ds-interrupt-card {
+  --ds-interrupt-card-color: var(--color-status-warning-text);
+  --ds-interrupt-card-border: var(--color-status-warning-border);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--ds-interrupt-card-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* Decision made — no signal needed */
+.ds-interrupt-card--answered {
+  --ds-interrupt-card-color: var(--color-text-secondary);
+  --ds-interrupt-card-border: var(--color-bg-container-border);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-interrupt-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+}
+
+.ds-interrupt-card__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--ds-interrupt-card-color);
+}
+
+.ds-interrupt-card__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-interrupt-card__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+/* The question is the card's one heading, so it takes the title tier
+   rather than an emphasised paragraph */
+.ds-interrupt-card__title {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-interrupt-card__description {
+  margin: 0;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   DETAIL SLOT
+   Typically a pending ToolCall showing what
+   wants to run.
+   ============================================ */
+
+.ds-interrupt-card__detail {
+  padding: 0 var(--padding-sm-md) var(--padding-sm);
+}
+
+.ds-interrupt-card__detail > :first-child {
+  margin-top: 0;
+}
+
+.ds-interrupt-card__detail > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   OPTIONS
+   Mirrors ToolCall's actions footer exactly, so
+   a decision on a card and an approval on a
+   call read as the same row.
+   ============================================ */
+
+.ds-interrupt-card__options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   ANSWERED ECHO
+   Same footer geometry, quiet text where the
+   buttons were.
+   ============================================ */
+
+.ds-interrupt-card__answer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-xs);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-interrupt-card__answer-icon {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--ds-interrupt-card-color);
+}
+
+/* ============================================
+   VISUALLY HIDDEN
+   The waiting announcement is for screen
+   readers only.
+   ============================================ */
+
+.ds-interrupt-card__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/InterruptCard/InterruptCard.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** One choice the card offers, rendered as a Button in the options footer. */
+export interface InterruptCardOption {
+    /** Value passed to `onValueChange` when this option is chosen. */
+    value: string;
+    /** Button text, e.g. "Allow once". */
+    label: string;
+    /** Visual weight. `primary` for the recommended choice, `danger` for destructive approvals. */
+    variant?: 'primary' | 'secondary' | 'danger';
+}
+/** Props owned by InterruptCard itself — everything else falls through to the root element. */
+type InterruptCardOwnProps = {
+    /** The question, e.g. "Allow file edit?". */
+    title: string;
+    /** One line of context under the title. */
+    description?: string;
+    /** Leading Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** The choices, rendered as buttons left to right. */
+    options?: InterruptCardOption[];
+    /** Fires with the chosen option's value. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The already-chosen value. When set, the card renders its answered state:
+     * the warning signal drops to monochrome and the options are replaced by an
+     * echo of the chosen label.
+     */
+    value?: string;
+    /** Override the echoed text in the answered state (default: the chosen option's label). */
+    answeredLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Detail slot between the description and the options — typically a
+     * `<ToolCall status="pending">` showing what wants to run.
+     */
+    children?: React.ReactNode;
+};
+export interface InterruptCardProps extends InterruptCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InterruptCardOwnProps> {
+}
+/**
+ * InterruptCard is a human-in-the-loop checkpoint: a question from the agent
+ * with option buttons for the person to decide. "Allow this file edit?" —
+ * allow once, always allow, deny.
+ *
+ * Unanswered it wears ToolCall's pending language promoted to a card: the
+ * warning pair on icon and border, options in a footer outside the content.
+ * Once `value` is set the decision is made, so the signal drops to monochrome
+ * and the footer echoes the chosen label.
+ *
+ * Fully controlled: the card never stores the answer itself — `onValueChange`
+ * reports the choice and `value` renders it.
+ */
+export declare const InterruptCard: React.ForwardRefExoticComponent<InterruptCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/InterruptCard/InterruptCard.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "../Button/Button.js";
+import "./InterruptCard.css";
+import "../../fonts/material-symbols.css";
+const OPTION_VARIANTS = {
+  primary: "primary",
+  secondary: "secondary",
+  danger: "destructive"
+};
+const InterruptCard = React.forwardRef(
+  ({
+    title,
+    description,
+    icon = "pause_circle",
+    options,
+    onValueChange,
+    value,
+    answeredLabel,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-interrupt-card";
+    const answered = value !== void 0;
+    const classes = [baseClass, answered ? `${baseClass}--answered` : "", className].filter(Boolean).join(" ");
+    const echoedLabel = answeredLabel ?? options?.find((option) => option.value === value)?.label ?? value;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, role: "group", "aria-label": title, className: classes, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+        ] }),
+        !answered && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, role: "status", children: "Waiting for your decision" })
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__detail`, children }),
+      answered ? /* @__PURE__ */ jsxs("div", { className: `${baseClass}__answer`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__answer-icon material-symbols-rounded`, "aria-hidden": "true", children: "check" }),
+        echoedLabel
+      ] }) : options && options.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: OPTION_VARIANTS[option.variant ?? "secondary"],
+          size: "compact",
+          label: option.label,
+          onClick: () => onValueChange?.(option.value)
+        },
+        option.value
+      )) })
+    ] });
+  }
+);
+InterruptCard.displayName = "InterruptCard";
+export {
+  InterruptCard
+};