@axis-ds/agentic-ui 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Think & Action
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @axis-ds/agentic-ui
+
+AXIS Design System의 AI/Agent 전용 UI 컴포넌트 라이브러리입니다. LLM 기반 애플리케이션에 최적화된 컴포넌트를 제공합니다.
+
+## 설치
+
+```bash
+npm install @axis-ds/agentic-ui
+# or
+pnpm add @axis-ds/agentic-ui
+```
+
+## 사용법
+
+```tsx
+import { StreamingText, ToolCallCard } from '@axis-ds/agentic-ui';
+// 또는 개별 임포트
+import { StreamingText } from '@axis-ds/agentic-ui/streaming-text';
+```
+
+## 컴포넌트 목록
+
+RunProgress, ApprovalCard, StreamingText, ToolCallCard, MessageBubble, FeedbackButtons, CodeBlock, DiffViewer, PlanCard, ContextPanel, TokenUsageIndicator, AttachmentCard
+
+## 문서
+
+자세한 사용법은 [AXIS Design System 문서](https://axis.minu.best)를 참고하세요.
+
+## 라이선스
+
+MIT

package/dist/agent-avatar/index.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AgentAvatarProps {
+    /** 에이전트 이름 */
+    name: string;
+    /** 이미지 URL */
+    src?: string;
+    /** 크기 */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** 상태 표시 */
+    status?: "online" | "busy" | "offline";
+    /** 에이전트 타입 */
+    type?: "assistant" | "tool" | "system";
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 에이전트 아바타 컴포넌트
+ */
+declare function AgentAvatar({ name, src, size, status, type, className, }: AgentAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { AgentAvatar, type AgentAvatarProps };

package/dist/agent-avatar/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AgentAvatarProps {
+    /** 에이전트 이름 */
+    name: string;
+    /** 이미지 URL */
+    src?: string;
+    /** 크기 */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** 상태 표시 */
+    status?: "online" | "busy" | "offline";
+    /** 에이전트 타입 */
+    type?: "assistant" | "tool" | "system";
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 에이전트 아바타 컴포넌트
+ */
+declare function AgentAvatar({ name, src, size, status, type, className, }: AgentAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { AgentAvatar, type AgentAvatarProps };

package/dist/agent-avatar/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/agent-avatar/index.tsx
+var agent_avatar_exports = {};
+__export(agent_avatar_exports, {
+  AgentAvatar: () => AgentAvatar
+});
+module.exports = __toCommonJS(agent_avatar_exports);
+var import_ui_react = require("@axis-ds/ui-react");
+
+// src/constants/a11y-labels.ts
+var AGENT_STATUS_LABELS = {
+  online: "\uC628\uB77C\uC778",
+  busy: "\uC0AC\uC6A9 \uC911",
+  offline: "\uC624\uD504\uB77C\uC778"
+};
+
+// src/agent-avatar/index.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: (0, import_ui_react.cn)("relative inline-flex", className),
+      children: [
+        src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src,
+            alt: "",
+            "aria-hidden": "true",
+            className: (0, import_ui_react.cn)(
+              "rounded-full object-cover",
+              sizeStyles[size]
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: (0, import_ui_react.cn)(
+              "rounded-full flex items-center justify-center font-medium text-white",
+              sizeStyles[size],
+              typeColors[type]
+            ),
+            children: initials
+          }
+        ),
+        status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: (0, import_ui_react.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]
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentAvatar
+});

package/dist/agent-avatar/index.mjs

@@ -0,0 +1,7 @@
+import {
+  AgentAvatar
+} from "../chunk-KH4OXDEV.mjs";
+import "../chunk-SCZ4BQ2G.mjs";
+export {
+  AgentAvatar
+};

package/dist/approval-card/index.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type Severity = "info" | "warning" | "error";
+interface ApprovalAction {
+    label: string;
+    variant?: "default" | "secondary" | "ghost" | "destructive";
+    onClick: () => void;
+}
+interface ApprovalCardProps {
+    /** 고유 ID (접근성용) */
+    id?: string;
+    /** 제목 */
+    title: string;
+    /** 설명 */
+    description?: string;
+    /** 심각도 (색상 결정) */
+    severity?: Severity;
+    /** 액션 버튼 목록 */
+    actions: ApprovalAction[];
+    /** 추가 내용 */
+    children?: React.ReactNode;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 사용자 승인이 필요한 작업을 표시하는 카드 컴포넌트
+ */
+declare function ApprovalCard({ id, title, description, severity, actions, children, className, }: ApprovalCardProps): react_jsx_runtime.JSX.Element;
+
+export { type ApprovalAction, ApprovalCard, type ApprovalCardProps, type Severity };

package/dist/approval-card/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type Severity = "info" | "warning" | "error";
+interface ApprovalAction {
+    label: string;
+    variant?: "default" | "secondary" | "ghost" | "destructive";
+    onClick: () => void;
+}
+interface ApprovalCardProps {
+    /** 고유 ID (접근성용) */
+    id?: string;
+    /** 제목 */
+    title: string;
+    /** 설명 */
+    description?: string;
+    /** 심각도 (색상 결정) */
+    severity?: Severity;
+    /** 액션 버튼 목록 */
+    actions: ApprovalAction[];
+    /** 추가 내용 */
+    children?: React.ReactNode;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 사용자 승인이 필요한 작업을 표시하는 카드 컴포넌트
+ */
+declare function ApprovalCard({ id, title, description, severity, actions, children, className, }: ApprovalCardProps): react_jsx_runtime.JSX.Element;
+
+export { type ApprovalAction, ApprovalCard, type ApprovalCardProps, type Severity };

package/dist/approval-card/index.js

@@ -0,0 +1,133 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/approval-card/index.tsx
+var approval_card_exports = {};
+__export(approval_card_exports, {
+  ApprovalCard: () => ApprovalCard
+});
+module.exports = __toCommonJS(approval_card_exports);
+var React = __toESM(require("react"));
+var import_ui_react = require("@axis-ds/ui-react");
+
+// src/constants/a11y-labels.ts
+var SEVERITY_LABELS = {
+  info: "\uC815\uBCF4",
+  warning: "\uC8FC\uC758",
+  error: "\uC624\uB958"
+};
+
+// src/approval-card/index.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      className: (0, import_ui_react.cn)(
+        "rounded-lg border border-l-4 p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_ui_react.cn)("flex-shrink-0 mt-0.5", styles.icon), "aria-hidden": "true", children: severityIcons[severity] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
+            severityLabel,
+            " \uC54C\uB9BC:"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: action.onClick,
+              className: (0, import_ui_react.cn)(
+                "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                actionVariantStyles[action.variant || "default"]
+              ),
+              children: action.label
+            },
+            index
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApprovalCard
+});

package/dist/approval-card/index.mjs

@@ -0,0 +1,7 @@
+import {
+  ApprovalCard
+} from "../chunk-ENIWC4WX.mjs";
+import "../chunk-SCZ4BQ2G.mjs";
+export {
+  ApprovalCard
+};

package/dist/attachment-card/index.d.mts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AttachmentType = "image" | "document" | "code" | "archive" | "other";
+type AttachmentStatus = "uploading" | "complete" | "error";
+interface AttachmentCardProps {
+    /** 파일 타입 */
+    type: AttachmentType;
+    /** 파일명 */
+    name: string;
+    /** 파일 크기 (bytes) */
+    size?: number;
+    /** 파일 URL */
+    url?: string;
+    /** 썸네일 URL (이미지인 경우) */
+    thumbnail?: string;
+    /** 업로드 상태 */
+    status?: AttachmentStatus;
+    /** 업로드 진행률 (0-100) */
+    progress?: number;
+    /** 삭제 콜백 */
+    onRemove?: () => void;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 파일/이미지 첨부를 표시하는 카드 컴포넌트
+ */
+declare function AttachmentCard({ type, name, size, url, thumbnail, status, progress, onRemove, className, }: AttachmentCardProps): react_jsx_runtime.JSX.Element;
+
+export { AttachmentCard, type AttachmentCardProps, type AttachmentStatus, type AttachmentType };

package/dist/attachment-card/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AttachmentType = "image" | "document" | "code" | "archive" | "other";
+type AttachmentStatus = "uploading" | "complete" | "error";
+interface AttachmentCardProps {
+    /** 파일 타입 */
+    type: AttachmentType;
+    /** 파일명 */
+    name: string;
+    /** 파일 크기 (bytes) */
+    size?: number;
+    /** 파일 URL */
+    url?: string;
+    /** 썸네일 URL (이미지인 경우) */
+    thumbnail?: string;
+    /** 업로드 상태 */
+    status?: AttachmentStatus;
+    /** 업로드 진행률 (0-100) */
+    progress?: number;
+    /** 삭제 콜백 */
+    onRemove?: () => void;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 파일/이미지 첨부를 표시하는 카드 컴포넌트
+ */
+declare function AttachmentCard({ type, name, size, url, thumbnail, status, progress, onRemove, className, }: AttachmentCardProps): react_jsx_runtime.JSX.Element;
+
+export { AttachmentCard, type AttachmentCardProps, type AttachmentStatus, type AttachmentType };

package/dist/attachment-card/index.js

@@ -0,0 +1,140 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/attachment-card/index.tsx
+var attachment_card_exports = {};
+__export(attachment_card_exports, {
+  AttachmentCard: () => AttachmentCard
+});
+module.exports = __toCommonJS(attachment_card_exports);
+var import_ui_react = require("@axis-ds/ui-react");
+
+// src/constants/a11y-labels.ts
+var ATTACHMENT_TYPE_LABELS = {
+  image: "\uC774\uBBF8\uC9C0",
+  document: "\uBB38\uC11C",
+  code: "\uCF54\uB4DC",
+  archive: "\uC555\uCD95 \uD30C\uC77C",
+  other: "\uAE30\uD0C0 \uD30C\uC77C"
+};
+
+// src/attachment-card/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var typeIcons = {
+  image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+  document: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+  code: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) }),
+  archive: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" }) }),
+  other: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
+};
+var formatFileSize = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+function AttachmentCard({
+  type,
+  name,
+  size,
+  url,
+  thumbnail,
+  status = "complete",
+  progress,
+  onRemove,
+  className
+}) {
+  const typeLabel = ATTACHMENT_TYPE_LABELS[type];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${typeLabel}: ${name}`,
+      className: (0, import_ui_react.cn)(
+        "flex items-center gap-3 rounded-lg border p-3",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        status === "error" && "border-[var(--axis-color-red-500)]/30",
+        className
+      ),
+      children: [
+        thumbnail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: thumbnail,
+            alt: "",
+            "aria-hidden": "true",
+            className: "w-10 h-10 rounded object-cover flex-shrink-0"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "w-10 h-10 rounded flex items-center justify-center flex-shrink-0 bg-[var(--axis-surface-secondary)] text-[var(--axis-icon-secondary)]",
+            "aria-hidden": "true",
+            children: typeIcons[type]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "hover:underline",
+              "aria-label": `${name} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
+              children: name
+            }
+          ) : name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: typeLabel }),
+            size !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatFileSize(size) })
+            ] }),
+            status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[var(--axis-text-error)]", children: "\uC5C5\uB85C\uB4DC \uC2E4\uD328" })
+          ] }),
+          status === "uploading" && progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all",
+              style: { width: `${progress}%` },
+              role: "progressbar",
+              "aria-valuenow": progress,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-label": "\uC5C5\uB85C\uB4DC \uC9C4\uD589\uB960"
+            }
+          ) })
+        ] }),
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: onRemove,
+            "aria-label": `${name} \uC0AD\uC81C`,
+            className: "flex-shrink-0 p-1 rounded-md text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)] transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AttachmentCard
+});

package/dist/attachment-card/index.mjs

@@ -0,0 +1,7 @@
+import {
+  AttachmentCard
+} from "../chunk-FPOHPDZ2.mjs";
+import "../chunk-SCZ4BQ2G.mjs";
+export {
+  AttachmentCard
+};