@axis-ds/agentic-ui 1.1.0

package/dist/chunk-GQYOOLDL.mjs

@@ -0,0 +1,63 @@
+// src/streaming-text/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StreamingText({
+  text,
+  speed = 20,
+  isComplete = false,
+  showCursor = true,
+  onComplete,
+  "aria-live": ariaLive,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const [displayedText, setDisplayedText] = React.useState("");
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const prevTextRef = React.useRef("");
+  React.useEffect(() => {
+    if (isComplete) {
+      setDisplayedText(text);
+      setIsStreaming(false);
+      return;
+    }
+    if (text.length > prevTextRef.current.length && text.startsWith(prevTextRef.current)) {
+      const newText = text.slice(prevTextRef.current.length);
+      let charIndex = 0;
+      setIsStreaming(true);
+      const interval = setInterval(() => {
+        if (charIndex < newText.length) {
+          setDisplayedText((prev) => prev + newText[charIndex]);
+          charIndex++;
+        } else {
+          clearInterval(interval);
+          setIsStreaming(false);
+          if (onComplete) onComplete();
+        }
+      }, speed);
+      prevTextRef.current = text;
+      return () => clearInterval(interval);
+    } else if (text !== prevTextRef.current) {
+      setDisplayedText("");
+      prevTextRef.current = "";
+    }
+  }, [text, speed, isComplete, onComplete]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel || "AI \uC751\uB2F5",
+      "aria-live": ariaLive ?? "polite",
+      "aria-busy": isStreaming,
+      className: cn("relative", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-primary)] whitespace-pre-wrap", children: displayedText }),
+        showCursor && isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 ml-0.5 bg-[var(--axis-text-primary)] animate-pulse", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+export {
+  StreamingText
+};

package/dist/chunk-H6VXOP7U.mjs

@@ -0,0 +1,86 @@
+// src/token-usage-indicator/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TokenUsageIndicator({
+  current,
+  max,
+  cost,
+  warningThreshold = 0.8,
+  compact = false,
+  className
+}) {
+  const ratio = max > 0 ? current / max : 0;
+  const percentage = Math.min(Math.round(ratio * 100), 100);
+  const getColor = () => {
+    if (ratio >= 1) return "bg-[var(--axis-color-red-500)]";
+    if (ratio >= warningThreshold) return "bg-[var(--axis-color-yellow-500)]";
+    return "bg-[var(--axis-color-green-500)]";
+  };
+  const getTextColor = () => {
+    if (ratio >= 1) return "text-[var(--axis-color-red-500)]";
+    if (ratio >= warningThreshold) return "text-[var(--axis-color-yellow-500)]";
+    return "text-[var(--axis-text-secondary)]";
+  };
+  const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
+  if (compact) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "meter",
+        "aria-valuenow": current,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max}`,
+        className: cn("inline-flex items-center gap-1 text-xs", getTextColor(), className),
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+          formatNumber(current),
+          "/",
+          formatNumber(max),
+          cost !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-[var(--axis-text-tertiary)]", children: [
+            "($",
+            cost.toFixed(4),
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": current,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max} (${percentage}%)`,
+      className: cn("space-y-1", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-secondary)]", children: "\uD1A0\uD070 \uC0AC\uC6A9\uB7C9" }),
+          /* @__PURE__ */ jsxs("span", { className: getTextColor(), children: [
+            formatNumber(current),
+            " / ",
+            formatNumber(max)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full transition-all", getColor()),
+            style: { width: `${percentage}%` },
+            "aria-hidden": "true"
+          }
+        ) }),
+        cost !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--axis-text-tertiary)] text-right", children: [
+          "$",
+          cost.toFixed(4)
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  TokenUsageIndicator
+};

package/dist/chunk-HLW7VEFF.mjs

@@ -0,0 +1,47 @@
+// src/thinking-indicator/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "text-xs gap-1",
+  md: "text-sm gap-1.5",
+  lg: "text-base gap-2"
+};
+var dotSizes = {
+  sm: "w-1 h-1",
+  md: "w-1.5 h-1.5",
+  lg: "w-2 h-2"
+};
+function ThinkingIndicator({
+  text = "\uC0DD\uAC01 \uC911",
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center text-[var(--axis-text-secondary)]",
+        sizeStyles[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: text }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-full bg-current animate-bounce",
+              dotSizes[size]
+            ),
+            style: { animationDelay: `${i * 150}ms` }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+export {
+  ThinkingIndicator
+};

package/dist/chunk-HWISMHCP.mjs

@@ -0,0 +1,33 @@
+// src/constants/a11y-labels.ts
+var STATUS_LABELS = {
+  pending: "\uB300\uAE30 \uC911",
+  running: "\uC2E4\uD589 \uC911",
+  complete: "\uC644\uB8CC",
+  success: "\uC131\uACF5",
+  error: "\uC624\uB958",
+  skipped: "\uAC74\uB108\uB700",
+  idle: "\uB300\uAE30 \uC911"
+};
+var SEVERITY_LABELS = {
+  info: "\uC815\uBCF4",
+  warning: "\uC8FC\uC758",
+  error: "\uC624\uB958"
+};
+var AGENT_STATUS_LABELS = {
+  online: "\uC628\uB77C\uC778",
+  busy: "\uC0AC\uC6A9 \uC911",
+  offline: "\uC624\uD504\uB77C\uC778"
+};
+var SOURCE_TYPE_LABELS = {
+  web: "\uC6F9 \uD398\uC774\uC9C0",
+  file: "\uD30C\uC77C",
+  database: "\uB370\uC774\uD130\uBCA0\uC774\uC2A4",
+  api: "API"
+};
+
+export {
+  STATUS_LABELS,
+  SEVERITY_LABELS,
+  AGENT_STATUS_LABELS,
+  SOURCE_TYPE_LABELS
+};

package/dist/chunk-KH4OXDEV.mjs

@@ -0,0 +1,83 @@
+import {
+  AGENT_STATUS_LABELS
+} from "./chunk-SCZ4BQ2G.mjs";
+
+// src/agent-avatar/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  xl: "w-12 h-12 text-lg"
+};
+var statusStyles = {
+  online: "bg-[var(--axis-color-green-500)]",
+  busy: "bg-[var(--axis-color-yellow-500)]",
+  offline: "bg-[var(--axis-color-gray-400)]"
+};
+var typeColors = {
+  assistant: "bg-[var(--axis-color-purple-500)]",
+  tool: "bg-[var(--axis-color-blue-500)]",
+  system: "bg-[var(--axis-color-gray-600)]"
+};
+function AgentAvatar({
+  name,
+  src,
+  size = "md",
+  status,
+  type = "assistant",
+  className
+}) {
+  const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  const statusLabel = status ? AGENT_STATUS_LABELS[status] : "";
+  const ariaLabel = `${name}${statusLabel ? `, ${statusLabel}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("relative inline-flex", className),
+      children: [
+        src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            "aria-hidden": "true",
+            className: cn(
+              "rounded-full object-cover",
+              sizeStyles[size]
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "rounded-full flex items-center justify-center font-medium text-white",
+              sizeStyles[size],
+              typeColors[type]
+            ),
+            children: initials
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
+              size === "sm" ? "w-2 h-2" : "w-3 h-3",
+              statusStyles[status]
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  AgentAvatar
+};

package/dist/chunk-KJVPVBET.mjs

@@ -0,0 +1,103 @@
+// src/context-panel/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ContextPanel({
+  modelInfo,
+  systemPrompt,
+  attachedFiles,
+  settings,
+  collapsible = true,
+  defaultExpanded = false,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+  const contentId = React.useId();
+  const hasContent = modelInfo || systemPrompt || attachedFiles && attachedFiles.length > 0 || settings && Object.keys(settings).length > 0;
+  if (!hasContent) return null;
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--axis-text-secondary)]", children: "\uCEE8\uD14D\uC2A4\uD2B8" })
+  ] });
+  const content = /* @__PURE__ */ jsxs("div", { id: contentId, className: "space-y-3 mt-2", children: [
+    modelInfo && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uBAA8\uB378" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: modelInfo.name }),
+        modelInfo.provider && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: modelInfo.provider }),
+        modelInfo.version && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: modelInfo.version })
+      ] })
+    ] }),
+    systemPrompt && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-primary)] p-2 rounded bg-[var(--axis-surface-secondary)] line-clamp-3 whitespace-pre-wrap", children: systemPrompt })
+    ] }),
+    attachedFiles && attachedFiles.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: [
+        "\uCCA8\uBD80 \uD30C\uC77C (",
+        attachedFiles.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: attachedFiles.map((file, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-[var(--axis-text-primary)]", children: [
+        /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: file })
+      ] }, i)) })
+    ] }),
+    settings && Object.keys(settings).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC124\uC815" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(settings).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-secondary)]", children: key }),
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-[var(--axis-text-primary)]", children: value })
+      ] }, key)) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border p-3",
+        "bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: collapsible ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": contentId,
+            className: "w-full flex items-center justify-between hover:opacity-80 transition-opacity",
+            children: [
+              header,
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: cn(
+                    "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
+                    isExpanded && "rotate-180"
+                  ),
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && content
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        header,
+        content
+      ] })
+    }
+  );
+}
+
+export {
+  ContextPanel
+};

package/dist/chunk-LZKOCELQ.mjs

@@ -0,0 +1,136 @@
+import {
+  STATUS_LABELS
+} from "./chunk-SCZ4BQ2G.mjs";
+
+// src/run-progress/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusColors = {
+  pending: "bg-[var(--axis-color-gray-300)]",
+  running: "bg-[var(--axis-color-blue-500)] animate-pulse",
+  complete: "bg-[var(--axis-color-green-500)]",
+  error: "bg-[var(--axis-color-red-500)]"
+};
+var statusIcons = {
+  pending: null,
+  running: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] }),
+  complete: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+};
+function RunProgress({
+  status,
+  steps,
+  currentStep,
+  onCancel,
+  onRetry,
+  className
+}) {
+  const progressPercent = React.useMemo(() => {
+    const completed = steps.filter((s) => s.status === "complete").length;
+    return Math.round(completed / steps.length * 100);
+  }, [steps]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            status === "running" && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
+              status === "idle" && "\uB300\uAE30 \uC911",
+              status === "running" && "\uC2E4\uD589 \uC911",
+              status === "complete" && "\uC644\uB8CC",
+              status === "error" && "\uC624\uB958 \uBC1C\uC0DD"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+            progressPercent,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuenow": progressPercent,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": `\uC2E4\uD589 \uC9C4\uD589\uB960 ${progressPercent}%`,
+            className: "w-full h-1.5 rounded-full bg-[var(--axis-surface-secondary)] mb-4",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all duration-300",
+                style: { width: `${progressPercent}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "space-y-2", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "listitem",
+            "aria-current": currentStep === index ? "step" : void 0,
+            className: cn(
+              "flex items-center gap-3 p-2 rounded-md transition-colors",
+              currentStep === index && "bg-[var(--axis-surface-secondary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
+                    statusColors[step.status]
+                  ),
+                  "aria-hidden": "true",
+                  children: statusIcons[step.status] || index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                  STATUS_LABELS[step.status],
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
+                step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
+              ] })
+            ]
+          },
+          step.id
+        )) }),
+        (onCancel || onRetry) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--axis-border-default)]", children: [
+          status === "running" && onCancel && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancel,
+              className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-tertiary)]",
+              children: "\uCDE8\uC18C"
+            }
+          ),
+          status === "error" && onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onRetry,
+              className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-color-blue-500)] text-white hover:bg-[var(--axis-color-blue-600)]",
+              children: "\uC7AC\uC2DC\uB3C4"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  RunProgress
+};

package/dist/chunk-MGQ7AEYE.mjs

@@ -0,0 +1,94 @@
+import {
+  SEVERITY_LABELS
+} from "./chunk-HWISMHCP.mjs";
+
+// src/approval-card/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var severityStyles = {
+  info: {
+    border: "border-l-[var(--axis-color-blue-500)]",
+    icon: "text-[var(--axis-color-blue-500)]",
+    bg: "bg-[var(--axis-surface-info)]"
+  },
+  warning: {
+    border: "border-l-[var(--axis-color-yellow-500)]",
+    icon: "text-[var(--axis-color-yellow-500)]",
+    bg: "bg-[var(--axis-surface-warning)]"
+  },
+  error: {
+    border: "border-l-[var(--axis-color-red-500)]",
+    icon: "text-[var(--axis-color-red-500)]",
+    bg: "bg-[var(--axis-surface-error)]"
+  }
+};
+var severityIcons = {
+  info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+  warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+};
+var actionVariantStyles = {
+  default: "bg-[var(--axis-button-bg-default)] text-white hover:bg-[var(--axis-button-bg-hover)]",
+  secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
+  ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
+  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-white hover:bg-[var(--axis-button-destructive-bg-hover)]"
+};
+function ApprovalCard({
+  id,
+  title,
+  description,
+  severity = "info",
+  actions,
+  children,
+  className
+}) {
+  const styles = severityStyles[severity];
+  const generatedId = React.useId();
+  const baseId = id || generatedId;
+  const titleId = `${baseId}-title`;
+  const descId = `${baseId}-desc`;
+  const severityLabel = SEVERITY_LABELS[severity];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      className: cn(
+        "rounded-lg border border-l-4 p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 mt-0.5", styles.icon), "aria-hidden": "true", children: severityIcons[severity] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            severityLabel,
+            " \uC54C\uB9BC:"
+          ] }),
+          /* @__PURE__ */ jsx("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
+          description && /* @__PURE__ */ jsx("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: "mt-3", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: action.onClick,
+              className: cn(
+                "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                actionVariantStyles[action.variant || "default"]
+              ),
+              children: action.label
+            },
+            index
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  ApprovalCard
+};