@axis-ds/agentic-ui 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +71 -1
  2. package/dist/agent-avatar/index.js +6 -16
  3. package/dist/agent-avatar/index.mjs +75 -4
  4. package/dist/approval-card/index.js +6 -16
  5. package/dist/approval-card/index.mjs +86 -4
  6. package/dist/attachment-card/index.js +5 -17
  7. package/dist/attachment-card/index.mjs +101 -4
  8. package/dist/code-block/index.js +2 -3
  9. package/dist/code-block/index.mjs +76 -3
  10. package/dist/constants/a11y-labels.d.mts +86 -0
  11. package/dist/constants/a11y-labels.d.ts +86 -0
  12. package/dist/constants/a11y-labels.js +105 -0
  13. package/dist/{chunk-SCZ4BQ2G.mjs → constants/a11y-labels.mjs} +21 -17
  14. package/dist/context-panel/index.js +2 -3
  15. package/dist/context-panel/index.mjs +99 -3
  16. package/dist/diff-viewer/index.js +8 -17
  17. package/dist/diff-viewer/index.mjs +155 -4
  18. package/dist/feedback-buttons/index.js +7 -16
  19. package/dist/feedback-buttons/index.mjs +65 -4
  20. package/dist/index.js +36 -1732
  21. package/dist/index.mjs +18 -55
  22. package/dist/message-bubble/index.js +5 -15
  23. package/dist/message-bubble/index.mjs +98 -4
  24. package/dist/plan-card/index.js +6 -28
  25. package/dist/plan-card/index.mjs +143 -4
  26. package/dist/recovery-banner/index.js +1 -3
  27. package/dist/recovery-banner/index.mjs +70 -3
  28. package/dist/run-progress/index.js +5 -19
  29. package/dist/run-progress/index.mjs +128 -4
  30. package/dist/source-panel/index.js +5 -15
  31. package/dist/source-panel/index.mjs +88 -4
  32. package/dist/step-timeline/index.js +3 -17
  33. package/dist/step-timeline/index.mjs +69 -4
  34. package/dist/streaming-text/index.js +2 -3
  35. package/dist/streaming-text/index.mjs +59 -3
  36. package/dist/surface-renderer/index.js +1 -3
  37. package/dist/surface-renderer/index.mjs +79 -3
  38. package/dist/thinking-indicator/index.js +3 -5
  39. package/dist/thinking-indicator/index.mjs +45 -3
  40. package/dist/token-usage-indicator/index.js +1 -3
  41. package/dist/token-usage-indicator/index.mjs +81 -3
  42. package/dist/tool-call-card/index.js +5 -18
  43. package/dist/tool-call-card/index.mjs +108 -4
  44. package/package.json +39 -7
  45. package/tailwind.css +10 -0
  46. package/dist/chunk-42KEAZ2Y.mjs +0 -109
  47. package/dist/chunk-4CMUEGLK.mjs +0 -80
  48. package/dist/chunk-4V4BWBRC.mjs +0 -77
  49. package/dist/chunk-7HTVJ6MK.mjs +0 -94
  50. package/dist/chunk-DPLGRVNQ.mjs +0 -95
  51. package/dist/chunk-FYAMA32G.mjs +0 -50
  52. package/dist/chunk-GQYOOLDL.mjs +0 -63
  53. package/dist/chunk-IOF4OET6.mjs +0 -162
  54. package/dist/chunk-J4FIMXXG.mjs +0 -106
  55. package/dist/chunk-JY7MTMMB.mjs +0 -83
  56. package/dist/chunk-KJVPVBET.mjs +0 -103
  57. package/dist/chunk-OYQX3SL4.mjs +0 -152
  58. package/dist/chunk-QS6GQNSE.mjs +0 -86
  59. package/dist/chunk-R4CMHIRO.mjs +0 -72
  60. package/dist/chunk-SCXUEQLI.mjs +0 -136
  61. package/dist/chunk-UDL4M5RP.mjs +0 -75
  62. package/dist/chunk-WFYQINWD.mjs +0 -115
  63. package/dist/chunk-ZW4Z27AB.mjs +0 -84
@@ -16,15 +16,13 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/token-usage-indicator/index.tsx
21
19
  var token_usage_indicator_exports = {};
22
20
  __export(token_usage_indicator_exports, {
23
21
  TokenUsageIndicator: () => TokenUsageIndicator
24
22
  });
25
23
  module.exports = __toCommonJS(token_usage_indicator_exports);
26
- var import_ui_react = require("@axis-ds/ui-react");
27
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
+ var import_ui_react = require("@axis-ds/ui-react");
28
26
  function TokenUsageIndicator({
29
27
  current,
30
28
  max,
@@ -1,6 +1,84 @@
1
- import {
2
- TokenUsageIndicator
3
- } from "../chunk-QS6GQNSE.mjs";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { cn } from "@axis-ds/ui-react";
3
+ function TokenUsageIndicator({
4
+ current,
5
+ max,
6
+ cost,
7
+ warningThreshold = 0.8,
8
+ compact = false,
9
+ className
10
+ }) {
11
+ const ratio = max > 0 ? current / max : 0;
12
+ const percentage = Math.min(Math.round(ratio * 100), 100);
13
+ const getColor = () => {
14
+ if (ratio >= 1) return "bg-[var(--axis-status-error)]";
15
+ if (ratio >= warningThreshold) return "bg-[var(--axis-status-warning)]";
16
+ return "bg-[var(--axis-status-success)]";
17
+ };
18
+ const getTextColor = () => {
19
+ if (ratio >= 1) return "text-[var(--axis-status-error)]";
20
+ if (ratio >= warningThreshold) return "text-[var(--axis-status-warning)]";
21
+ return "text-[var(--axis-text-secondary)]";
22
+ };
23
+ const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
24
+ if (compact) {
25
+ return /* @__PURE__ */ jsxs(
26
+ "span",
27
+ {
28
+ role: "meter",
29
+ "aria-valuenow": current,
30
+ "aria-valuemin": 0,
31
+ "aria-valuemax": max,
32
+ "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max}`,
33
+ className: cn("inline-flex items-center gap-1 text-xs", getTextColor(), className),
34
+ children: [
35
+ /* @__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" }) }),
36
+ formatNumber(current),
37
+ "/",
38
+ formatNumber(max),
39
+ cost !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-[var(--axis-text-tertiary)]", children: [
40
+ "($",
41
+ cost.toFixed(4),
42
+ ")"
43
+ ] })
44
+ ]
45
+ }
46
+ );
47
+ }
48
+ return /* @__PURE__ */ jsxs(
49
+ "div",
50
+ {
51
+ role: "meter",
52
+ "aria-valuenow": current,
53
+ "aria-valuemin": 0,
54
+ "aria-valuemax": max,
55
+ "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max} (${percentage}%)`,
56
+ className: cn("space-y-1", className),
57
+ children: [
58
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
59
+ /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-secondary)]", children: "\uD1A0\uD070 \uC0AC\uC6A9\uB7C9" }),
60
+ /* @__PURE__ */ jsxs("span", { className: getTextColor(), children: [
61
+ formatNumber(current),
62
+ " / ",
63
+ formatNumber(max)
64
+ ] })
65
+ ] }),
66
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
67
+ "div",
68
+ {
69
+ className: cn("h-full rounded-full transition-all", getColor()),
70
+ style: { width: `${percentage}%` },
71
+ "aria-hidden": "true"
72
+ }
73
+ ) }),
74
+ cost !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--axis-text-tertiary)] text-right", children: [
75
+ "$",
76
+ cost.toFixed(4)
77
+ ] })
78
+ ]
79
+ }
80
+ );
81
+ }
4
82
  export {
5
83
  TokenUsageIndicator
6
84
  };
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -26,30 +27,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
26
27
  mod
27
28
  ));
28
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/tool-call-card/index.tsx
31
30
  var tool_call_card_exports = {};
32
31
  __export(tool_call_card_exports, {
33
32
  ToolCallCard: () => ToolCallCard
34
33
  });
35
34
  module.exports = __toCommonJS(tool_call_card_exports);
35
+ var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var React = __toESM(require("react"));
37
37
  var import_ui_react = require("@axis-ds/ui-react");
38
-
39
- // src/constants/a11y-labels.ts
40
- var STATUS_LABELS = {
41
- pending: "\uB300\uAE30 \uC911",
42
- running: "\uC2E4\uD589 \uC911",
43
- complete: "\uC644\uB8CC",
44
- success: "\uC131\uACF5",
45
- error: "\uC624\uB958",
46
- skipped: "\uAC74\uB108\uB700",
47
- idle: "\uB300\uAE30 \uC911"
48
- };
49
-
50
- // src/tool-call-card/index.tsx
51
- var import_jsx_runtime = require("react/jsx-runtime");
52
- var statusConfig = {
38
+ var import_a11y_labels = require("../constants/a11y-labels.js");
39
+ const statusConfig = {
53
40
  pending: {
54
41
  color: "text-[var(--axis-status-neutral)]",
55
42
  icon: /* @__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)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
@@ -85,7 +72,7 @@ function ToolCallCard({
85
72
  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
86
73
  const config = statusConfig[status];
87
74
  const contentId = React.useId();
88
- const statusLabel = STATUS_LABELS[status] || status;
75
+ const statusLabel = import_a11y_labels.STATUS_LABELS[status] || status;
89
76
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
90
77
  "div",
91
78
  {
@@ -1,7 +1,111 @@
1
- import {
2
- ToolCallCard
3
- } from "../chunk-WFYQINWD.mjs";
4
- import "../chunk-SCZ4BQ2G.mjs";
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import * as React from "react";
4
+ import { cn } from "@axis-ds/ui-react";
5
+ import { STATUS_LABELS } from "../constants/a11y-labels.mjs";
6
+ const statusConfig = {
7
+ pending: {
8
+ color: "text-[var(--axis-status-neutral)]",
9
+ icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
10
+ },
11
+ running: {
12
+ color: "text-[var(--axis-status-running)]",
13
+ icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
14
+ /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
15
+ /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
16
+ ] })
17
+ },
18
+ success: {
19
+ color: "text-[var(--axis-status-success)]",
20
+ icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
21
+ },
22
+ error: {
23
+ color: "text-[var(--axis-status-error)]",
24
+ icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", 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" }) })
25
+ }
26
+ };
27
+ function ToolCallCard({
28
+ toolName,
29
+ description,
30
+ status,
31
+ input,
32
+ output,
33
+ error,
34
+ duration,
35
+ defaultExpanded = false,
36
+ "aria-label": ariaLabel,
37
+ className
38
+ }) {
39
+ const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
40
+ const config = statusConfig[status];
41
+ const contentId = React.useId();
42
+ const statusLabel = STATUS_LABELS[status] || status;
43
+ return /* @__PURE__ */ jsxs(
44
+ "div",
45
+ {
46
+ className: cn(
47
+ "rounded-lg border overflow-hidden",
48
+ "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
49
+ className
50
+ ),
51
+ children: [
52
+ /* @__PURE__ */ jsxs(
53
+ "button",
54
+ {
55
+ onClick: () => setIsExpanded(!isExpanded),
56
+ "aria-expanded": isExpanded,
57
+ "aria-controls": contentId,
58
+ "aria-label": ariaLabel || `${toolName} - ${statusLabel}`,
59
+ className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
60
+ children: [
61
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
62
+ /* @__PURE__ */ jsx("span", { className: config.color, "aria-hidden": "true", children: config.icon }),
63
+ /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
64
+ description && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
65
+ "\u2014 ",
66
+ description
67
+ ] })
68
+ ] }),
69
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
70
+ duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
71
+ duration,
72
+ "ms"
73
+ ] }),
74
+ /* @__PURE__ */ jsx(
75
+ "svg",
76
+ {
77
+ className: cn(
78
+ "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
79
+ isExpanded && "rotate-180"
80
+ ),
81
+ fill: "none",
82
+ stroke: "currentColor",
83
+ viewBox: "0 0 24 24",
84
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
85
+ }
86
+ )
87
+ ] })
88
+ ]
89
+ }
90
+ ),
91
+ isExpanded && /* @__PURE__ */ jsxs("div", { id: contentId, className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
92
+ input && /* @__PURE__ */ jsxs("div", { children: [
93
+ /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
94
+ /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: JSON.stringify(input, null, 2) }) })
95
+ ] }),
96
+ output !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
97
+ /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
98
+ /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: typeof output === "string" ? output : JSON.stringify(output, null, 2) }) })
99
+ ] }),
100
+ error && /* @__PURE__ */ jsxs("div", { children: [
101
+ /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
102
+ /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-error)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-error)]", children: error }) })
103
+ ] })
104
+ ] })
105
+ ]
106
+ }
107
+ );
108
+ }
5
109
  export {
6
110
  ToolCallCard
7
111
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axis-ds/agentic-ui",
3
- "version": "1.3.0",
3
+ "version": "1.5.0",
4
4
  "description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -70,11 +70,43 @@
70
70
  "types": "./dist/attachment-card/index.d.ts",
71
71
  "import": "./dist/attachment-card/index.mjs",
72
72
  "require": "./dist/attachment-card/index.js"
73
- }
73
+ },
74
+ "./agent-avatar": {
75
+ "types": "./dist/agent-avatar/index.d.ts",
76
+ "import": "./dist/agent-avatar/index.mjs",
77
+ "require": "./dist/agent-avatar/index.js"
78
+ },
79
+ "./recovery-banner": {
80
+ "types": "./dist/recovery-banner/index.d.ts",
81
+ "import": "./dist/recovery-banner/index.mjs",
82
+ "require": "./dist/recovery-banner/index.js"
83
+ },
84
+ "./source-panel": {
85
+ "types": "./dist/source-panel/index.d.ts",
86
+ "import": "./dist/source-panel/index.mjs",
87
+ "require": "./dist/source-panel/index.js"
88
+ },
89
+ "./step-timeline": {
90
+ "types": "./dist/step-timeline/index.d.ts",
91
+ "import": "./dist/step-timeline/index.mjs",
92
+ "require": "./dist/step-timeline/index.js"
93
+ },
94
+ "./surface-renderer": {
95
+ "types": "./dist/surface-renderer/index.d.ts",
96
+ "import": "./dist/surface-renderer/index.mjs",
97
+ "require": "./dist/surface-renderer/index.js"
98
+ },
99
+ "./thinking-indicator": {
100
+ "types": "./dist/thinking-indicator/index.d.ts",
101
+ "import": "./dist/thinking-indicator/index.mjs",
102
+ "require": "./dist/thinking-indicator/index.js"
103
+ },
104
+ "./tailwind.css": "./tailwind.css"
74
105
  },
75
106
  "sideEffects": false,
76
107
  "files": [
77
- "dist"
108
+ "dist",
109
+ "tailwind.css"
78
110
  ],
79
111
  "publishConfig": {
80
112
  "access": "public"
@@ -88,8 +120,8 @@
88
120
  "clsx": "^2.1.0",
89
121
  "framer-motion": "^11.0.0",
90
122
  "tailwind-merge": "^2.5.0",
91
- "@axis-ds/tokens": "1.3.0",
92
- "@axis-ds/ui-react": "1.3.0"
123
+ "@axis-ds/tokens": "1.5.0",
124
+ "@axis-ds/ui-react": "1.5.0"
93
125
  },
94
126
  "devDependencies": {
95
127
  "@testing-library/jest-dom": "^6.9.1",
@@ -123,8 +155,8 @@
123
155
  },
124
156
  "homepage": "https://axis.minu.best",
125
157
  "scripts": {
126
- "build": "tsup src/index.ts src/*/index.tsx --format cjs,esm --dts --external react",
127
- "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
158
+ "build": "tsup && node scripts/postbuild.mjs",
159
+ "dev": "tsup --watch --onSuccess \"node scripts/postbuild.mjs\"",
128
160
  "clean": "rm -rf dist",
129
161
  "lint": "eslint .",
130
162
  "test": "vitest run",
package/tailwind.css ADDED
@@ -0,0 +1,10 @@
1
+ /*
2
+ * @axis-ds/agentic-ui - Tailwind CSS 4 스캔 진입점
3
+ *
4
+ * Tailwind 4 는 node_modules 를 자동 스캔하지 않아서, 컴포넌트가 쓰는 클래스
5
+ * (예: bg-[var(--axis-button-bg-default)])가 생성되지 않습니다. 전역 CSS 에서
6
+ * @import "@axis-ds/agentic-ui/tailwind.css";
7
+ * 한 줄을 넣으면 아래 @source 가 이 패키지의 빌드 산출물을 스캔 대상에 더합니다.
8
+ * 경로는 이 파일 기준 상대 경로입니다. 스타일 규칙은 담지 않습니다.
9
+ */
10
+ @source "./dist";
@@ -1,109 +0,0 @@
1
- import {
2
- ATTACHMENT_TYPE_LABELS
3
- } from "./chunk-SCZ4BQ2G.mjs";
4
-
5
- // src/attachment-card/index.tsx
6
- import { cn } from "@axis-ds/ui-react";
7
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
- var typeIcons = {
9
- image: /* @__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: "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" }) }),
10
- document: /* @__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: "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" }) }),
11
- code: /* @__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: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) }),
12
- archive: /* @__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: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" }) }),
13
- other: /* @__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: "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" }) })
14
- };
15
- var formatFileSize = (bytes) => {
16
- if (bytes < 1024) return `${bytes} B`;
17
- if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
18
- return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
19
- };
20
- function AttachmentCard({
21
- type,
22
- name,
23
- size,
24
- url,
25
- thumbnail,
26
- status = "complete",
27
- progress,
28
- onRemove,
29
- className
30
- }) {
31
- const typeLabel = ATTACHMENT_TYPE_LABELS[type];
32
- return /* @__PURE__ */ jsxs(
33
- "div",
34
- {
35
- role: "article",
36
- "aria-label": `${typeLabel}: ${name}`,
37
- className: cn(
38
- "flex items-center gap-3 rounded-lg border p-3",
39
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
40
- status === "error" && "border-[var(--axis-status-error-border)]",
41
- className
42
- ),
43
- children: [
44
- thumbnail ? /* @__PURE__ */ jsx(
45
- "img",
46
- {
47
- src: thumbnail,
48
- alt: "",
49
- "aria-hidden": "true",
50
- className: "w-10 h-10 rounded object-cover flex-shrink-0"
51
- }
52
- ) : /* @__PURE__ */ jsx(
53
- "div",
54
- {
55
- className: "w-10 h-10 rounded flex items-center justify-center flex-shrink-0 bg-[var(--axis-surface-secondary)] text-[var(--axis-icon-secondary)]",
56
- "aria-hidden": "true",
57
- children: typeIcons[type]
58
- }
59
- ),
60
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
61
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: url ? /* @__PURE__ */ jsx(
62
- "a",
63
- {
64
- href: url,
65
- target: "_blank",
66
- rel: "noopener noreferrer",
67
- className: "hover:underline",
68
- "aria-label": `${name} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
69
- children: name
70
- }
71
- ) : name }),
72
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
73
- /* @__PURE__ */ jsx("span", { children: typeLabel }),
74
- size !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
75
- /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
76
- /* @__PURE__ */ jsx("span", { children: formatFileSize(size) })
77
- ] }),
78
- status === "error" && /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-error)]", children: "\uC5C5\uB85C\uB4DC \uC2E4\uD328" })
79
- ] }),
80
- status === "uploading" && progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
81
- "div",
82
- {
83
- className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all",
84
- style: { width: `${progress}%` },
85
- role: "progressbar",
86
- "aria-valuenow": progress,
87
- "aria-valuemin": 0,
88
- "aria-valuemax": 100,
89
- "aria-label": "\uC5C5\uB85C\uB4DC \uC9C4\uD589\uB960"
90
- }
91
- ) })
92
- ] }),
93
- onRemove && /* @__PURE__ */ jsx(
94
- "button",
95
- {
96
- onClick: onRemove,
97
- "aria-label": `${name} \uC0AD\uC81C`,
98
- 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",
99
- children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", 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" }) })
100
- }
101
- )
102
- ]
103
- }
104
- );
105
- }
106
-
107
- export {
108
- AttachmentCard
109
- };
@@ -1,80 +0,0 @@
1
- // src/code-block/index.tsx
2
- import * as React from "react";
3
- import { cn } from "@axis-ds/ui-react";
4
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
- function CodeBlock({
6
- code,
7
- language,
8
- filename,
9
- showLineNumbers = false,
10
- onCopy,
11
- maxHeight,
12
- className
13
- }) {
14
- const [copied, setCopied] = React.useState(false);
15
- const handleCopy = async () => {
16
- try {
17
- await navigator.clipboard.writeText(code);
18
- setCopied(true);
19
- onCopy?.(code);
20
- setTimeout(() => setCopied(false), 2e3);
21
- } catch {
22
- }
23
- };
24
- const lines = code.split("\n");
25
- return /* @__PURE__ */ jsxs(
26
- "div",
27
- {
28
- className: cn(
29
- "rounded-lg border overflow-hidden",
30
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
31
- className
32
- ),
33
- children: [
34
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
35
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
36
- filename && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
37
- language && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: language })
38
- ] }),
39
- /* @__PURE__ */ jsx(
40
- "button",
41
- {
42
- onClick: handleCopy,
43
- "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
44
- className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-tertiary)] transition-colors",
45
- children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
46
- /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
47
- /* @__PURE__ */ jsx("span", { children: "\uBCF5\uC0AC\uB428" })
48
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
49
- /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
50
- /* @__PURE__ */ jsx("span", { children: "\uBCF5\uC0AC" })
51
- ] })
52
- }
53
- )
54
- ] }),
55
- /* @__PURE__ */ jsx(
56
- "div",
57
- {
58
- className: "overflow-auto",
59
- style: maxHeight ? { maxHeight } : void 0,
60
- children: /* @__PURE__ */ jsx("pre", { className: "p-3 text-sm leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)] font-mono", children: showLineNumbers ? /* @__PURE__ */ jsx("table", { className: "border-collapse w-full", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { children: [
61
- /* @__PURE__ */ jsx(
62
- "td",
63
- {
64
- className: "select-none text-right pr-4 text-[var(--axis-text-tertiary)] w-8",
65
- "aria-hidden": "true",
66
- children: i + 1
67
- }
68
- ),
69
- /* @__PURE__ */ jsx("td", { className: "whitespace-pre", children: line })
70
- ] }, i)) }) }) : code }) })
71
- }
72
- )
73
- ]
74
- }
75
- );
76
- }
77
-
78
- export {
79
- CodeBlock
80
- };
@@ -1,77 +0,0 @@
1
- import {
2
- STATUS_LABELS
3
- } from "./chunk-SCZ4BQ2G.mjs";
4
-
5
- // src/step-timeline/index.tsx
6
- import { cn } from "@axis-ds/ui-react";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- function StepTimeline({
9
- steps,
10
- orientation = "vertical",
11
- className
12
- }) {
13
- const isVertical = orientation === "vertical";
14
- return /* @__PURE__ */ jsx(
15
- "div",
16
- {
17
- role: "list",
18
- "aria-label": "\uC791\uC5C5 \uD0C0\uC784\uB77C\uC778",
19
- className: cn(
20
- isVertical ? "flex flex-col gap-4" : "flex items-center gap-2",
21
- className
22
- ),
23
- children: steps.map((step, index) => /* @__PURE__ */ jsxs(
24
- "div",
25
- {
26
- role: "listitem",
27
- "aria-current": step.status === "running" ? "step" : void 0,
28
- className: cn(
29
- "relative flex",
30
- isVertical ? "items-start gap-3" : "flex-col items-center"
31
- ),
32
- children: [
33
- index < steps.length - 1 && /* @__PURE__ */ jsx(
34
- "div",
35
- {
36
- "aria-hidden": "true",
37
- className: cn(
38
- "absolute bg-[var(--axis-border-default)]",
39
- isVertical ? "left-2.5 top-6 w-0.5 h-full -translate-x-1/2" : "top-2.5 left-6 h-0.5 w-full"
40
- )
41
- }
42
- ),
43
- /* @__PURE__ */ jsx(
44
- "div",
45
- {
46
- "aria-hidden": "true",
47
- className: cn(
48
- "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
49
- step.status === "complete" && "bg-[var(--axis-status-success)]",
50
- step.status === "running" && "bg-[var(--axis-status-running)] animate-pulse",
51
- step.status === "error" && "bg-[var(--axis-status-error)]",
52
- step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
53
- step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
54
- ),
55
- children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
56
- }
57
- ),
58
- /* @__PURE__ */ jsxs("div", { className: cn(isVertical ? "flex-1" : "text-center mt-2"), children: [
59
- /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
60
- STATUS_LABELS[step.status],
61
- ":"
62
- ] }),
63
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
64
- step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
65
- step.timestamp && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
66
- ] })
67
- ]
68
- },
69
- step.id
70
- ))
71
- }
72
- );
73
- }
74
-
75
- export {
76
- StepTimeline
77
- };