@tangle-network/sandbox-ui 0.14.0 → 0.15.1

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 (104) hide show
  1. package/dist/auth.d.ts +1 -74
  2. package/dist/auth.js +1 -4
  3. package/dist/chat.d.ts +1 -136
  4. package/dist/chat.js +2 -15
  5. package/dist/chunk-2BUPSB7O.js +0 -0
  6. package/dist/chunk-3J6FG3FJ.js +18 -0
  7. package/dist/chunk-76IQLPW2.js +206 -0
  8. package/dist/chunk-7ZA5SEK3.js +239 -0
  9. package/dist/chunk-AHBZCBDO.js +2960 -0
  10. package/dist/chunk-AZ3AWMTM.js +8 -0
  11. package/dist/chunk-CMY7W45U.js +380 -0
  12. package/dist/{chunk-QMU2PWOU.js → chunk-DNZ4DTNA.js} +71 -17
  13. package/dist/chunk-EI44GEQ5.js +6 -0
  14. package/dist/{chunk-5OQ27N57.js → chunk-GPT7VKK6.js} +34 -38
  15. package/dist/chunk-JBGKGLD7.js +16 -0
  16. package/dist/chunk-NJNME4J4.js +14 -0
  17. package/dist/chunk-QPAJR74X.js +20 -0
  18. package/dist/chunk-TK46XFLM.js +28 -0
  19. package/dist/chunk-WID73FPH.js +89 -0
  20. package/dist/chunk-YVXK4XRO.js +30 -0
  21. package/dist/dashboard.d.ts +538 -4
  22. package/dist/dashboard.js +15 -886
  23. package/dist/editor.d.ts +1 -120
  24. package/dist/editor.js +1 -5
  25. package/dist/files.d.ts +1 -129
  26. package/dist/files.js +2 -7
  27. package/dist/globals.css +2 -1265
  28. package/dist/hooks.d.ts +114 -11
  29. package/dist/hooks.js +17 -88
  30. package/dist/index.d.ts +24 -99
  31. package/dist/index.js +247 -252
  32. package/dist/markdown.d.ts +1 -29
  33. package/dist/markdown.js +2 -2
  34. package/dist/openui.d.ts +8 -115
  35. package/dist/openui.js +1 -6
  36. package/dist/pages.d.ts +1 -2
  37. package/dist/pages.js +68 -66
  38. package/dist/primitives.d.ts +14 -49
  39. package/dist/primitives.js +69 -77
  40. package/dist/run.d.ts +1 -14
  41. package/dist/run.js +2 -22
  42. package/dist/sdk-hooks.d.ts +3 -283
  43. package/dist/sdk-hooks.js +10 -14
  44. package/dist/stores.d.ts +2 -14
  45. package/dist/stores.js +11 -39
  46. package/dist/styles.css +2 -1265
  47. package/dist/{usage-chart-CPTcNlGs.d.ts → template-card-UhV3pmRC.d.ts} +16 -1
  48. package/dist/types.d.ts +11 -8
  49. package/dist/types.js +1 -0
  50. package/dist/utils.d.ts +1 -44
  51. package/dist/utils.js +6 -12
  52. package/dist/workspace.d.ts +5 -10
  53. package/dist/workspace.js +3 -19
  54. package/package.json +19 -54
  55. package/dist/active-sessions-store-CeOmXgv5.d.ts +0 -85
  56. package/dist/artifact-pane-Bh45Ssco.d.ts +0 -24
  57. package/dist/branding-DCi5VEik.d.ts +0 -13
  58. package/dist/button-CMQuQEW_.d.ts +0 -17
  59. package/dist/chat-container-f4yEs6KN.d.ts +0 -106
  60. package/dist/chunk-34A66VBG.js +0 -214
  61. package/dist/chunk-34I7UFSX.js +0 -92
  62. package/dist/chunk-36QY2W5G.js +0 -802
  63. package/dist/chunk-4CLN43XT.js +0 -45
  64. package/dist/chunk-54SQQMMM.js +0 -156
  65. package/dist/chunk-66EZOYZR.js +0 -102
  66. package/dist/chunk-BX6AQMUS.js +0 -183
  67. package/dist/chunk-DI3NZ5ZX.js +0 -192
  68. package/dist/chunk-DPGIXDAI.js +0 -220
  69. package/dist/chunk-DXMIEK4K.js +0 -1426
  70. package/dist/chunk-GSZA3TSY.js +0 -79
  71. package/dist/chunk-HB5Y37YU.js +0 -54
  72. package/dist/chunk-LQNEZDRM.js +0 -109
  73. package/dist/chunk-MA7YKRUP.js +0 -131
  74. package/dist/chunk-MKTSMWVD.js +0 -109
  75. package/dist/chunk-MQXABZTB.js +0 -1348
  76. package/dist/chunk-MT5FJ3ZT.js +0 -186
  77. package/dist/chunk-NKUPJC34.js +0 -2070
  78. package/dist/chunk-OEX7NZE3.js +0 -321
  79. package/dist/chunk-OKLQVY3Y.js +0 -139
  80. package/dist/chunk-Q56BYXQF.js +0 -61
  81. package/dist/chunk-QD4QE5P5.js +0 -40
  82. package/dist/chunk-QDH5GEGY.js +0 -630
  83. package/dist/chunk-QID2OOMG.js +0 -133
  84. package/dist/chunk-RQHJBTEU.js +0 -10
  85. package/dist/chunk-T7HMZEVO.js +0 -216
  86. package/dist/chunk-U6QTHMY6.js +0 -1290
  87. package/dist/chunk-US6JKJKH.js +0 -124
  88. package/dist/chunk-VX3XOUEB.js +0 -63
  89. package/dist/chunk-XLG757B6.js +0 -933
  90. package/dist/chunk-ZMNSRDMH.js +0 -127
  91. package/dist/chunk-ZNCEM5CD.js +0 -316
  92. package/dist/document-editor-pane-A70-EhdQ.d.ts +0 -124
  93. package/dist/document-editor-pane-TLPVRBBU.js +0 -11
  94. package/dist/expanded-tool-detail-Dh99mcbY.d.ts +0 -63
  95. package/dist/file-tabs-BLfxfmAH.d.ts +0 -51
  96. package/dist/parts-CyGkM6Fp.d.ts +0 -50
  97. package/dist/run-CtFZ6s-D.d.ts +0 -41
  98. package/dist/sidebar-drop-zone-tDBsuOH5.d.ts +0 -301
  99. package/dist/sidecar-CFU2W9j1.d.ts +0 -8
  100. package/dist/template-card-BAtvcAkU.d.ts +0 -18
  101. package/dist/tool-call-feed-Bs3MyQMT.d.ts +0 -68
  102. package/dist/tool-display-Ct9nFAzJ.d.ts +0 -32
  103. package/dist/use-sandbox-metrics-DWc0k9Xm.d.ts +0 -153
  104. package/dist/variant-list-BrHYcBCk.d.ts +0 -540
@@ -1,79 +0,0 @@
1
- import {
2
- Markdown
3
- } from "./chunk-T7HMZEVO.js";
4
- import {
5
- cn
6
- } from "./chunk-RQHJBTEU.js";
7
-
8
- // src/chat/chat-message.tsx
9
- import { User, Bot } from "lucide-react";
10
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
11
- function ChatMessage({
12
- role,
13
- content,
14
- toolCalls,
15
- isStreaming,
16
- timestamp,
17
- className,
18
- userLabel = "You",
19
- assistantLabel = "Agent",
20
- hideRoleLabel,
21
- hideAvatar,
22
- avatar
23
- }) {
24
- const isUser = role === "user";
25
- return /* @__PURE__ */ jsxs(
26
- "div",
27
- {
28
- className: cn(
29
- "flex gap-3",
30
- isUser ? "flex-row-reverse" : "flex-row",
31
- className
32
- ),
33
- children: [
34
- !hideAvatar && (avatar ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0", children: avatar }) : /* @__PURE__ */ jsx(
35
- "div",
36
- {
37
- className: cn(
38
- "mt-0.5 flex shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border",
39
- "h-[var(--avatar-size)] w-[var(--avatar-size)]",
40
- isUser ? "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-border bg-muted text-[var(--brand-cool)]"
41
- ),
42
- children: isUser ? /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5" })
43
- }
44
- )),
45
- /* @__PURE__ */ jsxs(
46
- "div",
47
- {
48
- className: cn(
49
- "min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border",
50
- "px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
51
- isUser ? "border-border bg-muted/50" : "border-border bg-card"
52
- ),
53
- children: [
54
- !hideRoleLabel && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", isUser && "flex-row-reverse"), children: [
55
- /* @__PURE__ */ jsx("span", { className: "text-[var(--font-size-xs)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.14em)] text-foreground", children: isUser ? userLabel : assistantLabel }),
56
- timestamp && /* @__PURE__ */ jsx("span", { className: "text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(timestamp) })
57
- ] }),
58
- isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: content }) : /* @__PURE__ */ jsxs(Fragment, { children: [
59
- content && /* @__PURE__ */ jsx(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: content }),
60
- isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })
61
- ] }),
62
- toolCalls
63
- ]
64
- }
65
- )
66
- ]
67
- }
68
- );
69
- }
70
- function formatTime(date) {
71
- return date.toLocaleTimeString(void 0, {
72
- hour: "numeric",
73
- minute: "2-digit"
74
- });
75
- }
76
-
77
- export {
78
- ChatMessage
79
- };
@@ -1,54 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-RQHJBTEU.js";
4
-
5
- // src/workspace/artifact-pane.tsx
6
- import { jsx, jsxs } from "react/jsx-runtime";
7
- function ArtifactPane({
8
- eyebrow,
9
- title,
10
- subtitle,
11
- meta,
12
- headerActions,
13
- tabs,
14
- toolbar,
15
- footer,
16
- emptyState,
17
- children,
18
- className,
19
- contentClassName
20
- }) {
21
- const hasContent = children !== void 0 && children !== null;
22
- return /* @__PURE__ */ jsxs(
23
- "section",
24
- {
25
- className: cn(
26
- "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
27
- className
28
- ),
29
- children: [
30
- /* @__PURE__ */ jsxs("header", { className: "border-b border-border bg-muted/10", children: [
31
- /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [
32
- /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
33
- eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
34
- /* @__PURE__ */ jsx("div", { className: "min-w-0 text-[13px] font-medium text-foreground", children: title }),
35
- (subtitle || meta) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground", children: [
36
- subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
37
- meta && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: meta })
38
- ] })
39
- ] }),
40
- headerActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: headerActions })
41
- ] }),
42
- tabs,
43
- toolbar && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-2", children: toolbar })
44
- ] }),
45
- /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-auto", contentClassName), children: hasContent ? children : emptyState ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : null }),
46
- footer && /* @__PURE__ */ jsx("footer", { className: "shrink-0 border-t border-border bg-card px-3 py-2", children: footer })
47
- ]
48
- }
49
- );
50
- }
51
-
52
- export {
53
- ArtifactPane
54
- };
@@ -1,109 +0,0 @@
1
- // src/files/rich-file-tree.tsx
2
- import {
3
- FileTree as PierreFileTree,
4
- useFileTree as usePierreFileTree
5
- } from "@pierre/trees/react";
6
- import { useEffect, useMemo } from "react";
7
- import { jsx } from "react/jsx-runtime";
8
- function cssVarFromToken(name) {
9
- return `var(${name})`;
10
- }
11
- var DEFAULT_THEME = {
12
- selectedBg: cssVarFromToken("--accent-surface-soft"),
13
- selectedFg: cssVarFromToken("--accent-text"),
14
- fg: cssVarFromToken("--foreground"),
15
- hoverBg: cssVarFromToken("--muted"),
16
- border: cssVarFromToken("--border"),
17
- mutedFg: cssVarFromToken("--muted-foreground")
18
- };
19
- function flattenFileNode(node, out = []) {
20
- if (node.type === "file" && node.path) {
21
- out.push(node.path);
22
- return out;
23
- }
24
- if (node.type === "directory") {
25
- if (node.children?.length) {
26
- for (const child of node.children) {
27
- flattenFileNode(child, out);
28
- }
29
- return out;
30
- }
31
- if (node.path) out.push(`${node.path}/`);
32
- }
33
- return out;
34
- }
35
- function RichFileTree({
36
- root,
37
- paths,
38
- selectedPath,
39
- onSelect,
40
- search = true,
41
- initialExpansion = "open",
42
- gitStatus,
43
- renderContextMenu,
44
- header,
45
- themeOverrides,
46
- className,
47
- style,
48
- height
49
- }) {
50
- if (root && paths) {
51
- throw new Error("RichFileTree: pass `root` or `paths`, not both");
52
- }
53
- const flatPaths = useMemo(() => {
54
- if (paths) return Array.from(paths);
55
- if (root) return flattenFileNode(root);
56
- return [];
57
- }, [paths, root]);
58
- const { model } = usePierreFileTree({
59
- paths: flatPaths,
60
- search,
61
- initialExpansion,
62
- onSelectionChange: (selected) => {
63
- const next = selected[0];
64
- if (next && next !== selectedPath) onSelect?.(next);
65
- }
66
- });
67
- useEffect(() => {
68
- if (!gitStatus) return;
69
- model.setGitStatus(gitStatus);
70
- }, [model, gitStatus]);
71
- useEffect(() => {
72
- model.resetPaths(flatPaths);
73
- }, [model, flatPaths]);
74
- useEffect(() => {
75
- if (!selectedPath) return;
76
- const current = model.getSelectedPaths();
77
- if (current.length === 1 && current[0] === selectedPath) return;
78
- const m = model;
79
- m.setSelectedPaths?.([selectedPath]);
80
- }, [model, selectedPath]);
81
- const theme = { ...DEFAULT_THEME, ...themeOverrides };
82
- const themeStyle = useMemo(
83
- () => ({
84
- ["--trees-selected-bg-override"]: theme.selectedBg,
85
- ["--trees-selected-fg-override"]: theme.selectedFg,
86
- ["--trees-fg-override"]: theme.fg,
87
- ["--trees-hover-bg-override"]: theme.hoverBg,
88
- ["--trees-border-color-override"]: theme.border,
89
- ["--trees-muted-fg-override"]: theme.mutedFg,
90
- height: height ?? "100%",
91
- ...style
92
- }),
93
- [theme, height, style]
94
- );
95
- return /* @__PURE__ */ jsx(
96
- PierreFileTree,
97
- {
98
- model,
99
- header,
100
- renderContextMenu,
101
- className,
102
- style: themeStyle
103
- }
104
- );
105
- }
106
-
107
- export {
108
- RichFileTree
109
- };
@@ -1,131 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-RQHJBTEU.js";
4
-
5
- // src/primitives/input.tsx
6
- import * as React from "react";
7
- import { cva } from "class-variance-authority";
8
- import { jsx, jsxs } from "react/jsx-runtime";
9
- var inputVariants = cva(
10
- "flex w-full rounded-lg border bg-card px-4 py-2 text-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
11
- {
12
- variants: {
13
- variant: {
14
- default: "border-input focus:ring-ring",
15
- sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]",
16
- error: "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]"
17
- },
18
- size: {
19
- default: "h-11",
20
- sm: "h-9 px-3",
21
- lg: "h-12 px-5"
22
- }
23
- },
24
- defaultVariants: {
25
- variant: "default",
26
- size: "default"
27
- }
28
- }
29
- );
30
- var Input = React.forwardRef(
31
- ({ className, type, variant, size, label, error, hint, id, ...props }, ref) => {
32
- const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
33
- const input = /* @__PURE__ */ jsx(
34
- "input",
35
- {
36
- type,
37
- id: inputId,
38
- className: cn(inputVariants({ variant: error ? "error" : variant, size, className })),
39
- ref,
40
- ...props
41
- }
42
- );
43
- if (!label && !error && !hint) return input;
44
- return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1.5", children: [
45
- label && /* @__PURE__ */ jsx(
46
- "label",
47
- {
48
- htmlFor: inputId,
49
- className: "block font-medium text-foreground text-sm",
50
- children: label
51
- }
52
- ),
53
- input,
54
- error && /* @__PURE__ */ jsx("p", { className: "text-[var(--surface-danger-text)] text-sm font-medium", children: error }),
55
- hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
56
- ] });
57
- }
58
- );
59
- Input.displayName = "Input";
60
- var Textarea = React.forwardRef(
61
- ({ className, variant = "default", label, error, hint, id, ...props }, ref) => {
62
- const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
63
- const variants = {
64
- default: "border-input focus:ring-ring",
65
- sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
66
- };
67
- const textarea = /* @__PURE__ */ jsx(
68
- "textarea",
69
- {
70
- id: textareaId,
71
- className: cn(
72
- "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm transition-all duration-200",
73
- "placeholder:text-muted-foreground",
74
- "focus:outline-none focus:ring-2 focus:ring-offset-0",
75
- "disabled:cursor-not-allowed disabled:opacity-50",
76
- error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
77
- className
78
- ),
79
- ref,
80
- ...props
81
- }
82
- );
83
- if (!label && !error && !hint) return textarea;
84
- return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1.5", children: [
85
- label && /* @__PURE__ */ jsx(
86
- "label",
87
- {
88
- htmlFor: textareaId,
89
- className: "block font-medium text-muted-foreground text-sm",
90
- children: label
91
- }
92
- ),
93
- textarea,
94
- error && /* @__PURE__ */ jsx("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
95
- hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
96
- ] });
97
- }
98
- );
99
- Textarea.displayName = "Textarea";
100
-
101
- // src/primitives/empty-state.tsx
102
- import * as React2 from "react";
103
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
104
- var EmptyState = React2.forwardRef(
105
- ({ className, icon, title, description, action, ...props }, ref) => {
106
- return /* @__PURE__ */ jsxs2(
107
- "div",
108
- {
109
- ref,
110
- className: cn(
111
- "flex flex-col items-center justify-center px-4 py-16 text-center",
112
- className
113
- ),
114
- ...props,
115
- children: [
116
- icon && /* @__PURE__ */ jsx2("div", { className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground", children: icon }),
117
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-lg", children: title }),
118
- description && /* @__PURE__ */ jsx2("p", { className: "mt-2 max-w-sm text-muted-foreground text-sm", children: description }),
119
- action && /* @__PURE__ */ jsx2("div", { className: "mt-6", children: action })
120
- ]
121
- }
122
- );
123
- }
124
- );
125
- EmptyState.displayName = "EmptyState";
126
-
127
- export {
128
- Input,
129
- Textarea,
130
- EmptyState
131
- };
@@ -1,109 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-RQHJBTEU.js";
4
-
5
- // src/primitives/button.tsx
6
- import { Slot } from "@radix-ui/react-slot";
7
- import { cva } from "class-variance-authority";
8
- import * as React from "react";
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
- var buttonVariants = cva(
11
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
12
- {
13
- variants: {
14
- variant: {
15
- default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
16
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
17
- outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
18
- secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
19
- ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
20
- link: "text-primary underline-offset-4 hover:underline",
21
- sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]"
22
- },
23
- size: {
24
- default: "h-[var(--control-height)] px-4 py-2",
25
- sm: "h-8 rounded-md px-3 text-xs",
26
- lg: "h-11 rounded-lg px-7 text-sm",
27
- xl: "h-13 rounded-xl px-9 text-base",
28
- icon: "h-[var(--control-height)] w-[var(--control-height)]"
29
- }
30
- },
31
- defaultVariants: {
32
- variant: "default",
33
- size: "default"
34
- }
35
- }
36
- );
37
- var Button = React.forwardRef(
38
- ({
39
- className,
40
- variant,
41
- size,
42
- asChild = false,
43
- loading = false,
44
- disabled,
45
- children,
46
- ...props
47
- }, ref) => {
48
- const Comp = asChild ? Slot : "button";
49
- if (asChild) {
50
- return /* @__PURE__ */ jsx(
51
- Comp,
52
- {
53
- className: cn(buttonVariants({ variant, size, className })),
54
- ref,
55
- ...props,
56
- children
57
- }
58
- );
59
- }
60
- return /* @__PURE__ */ jsxs(
61
- Comp,
62
- {
63
- className: cn(buttonVariants({ variant, size, className })),
64
- ref,
65
- disabled: disabled || loading,
66
- ...props,
67
- children: [
68
- loading && /* @__PURE__ */ jsxs(
69
- "svg",
70
- {
71
- className: "mr-2 -ml-1 h-4 w-4 animate-spin",
72
- fill: "none",
73
- viewBox: "0 0 24 24",
74
- children: [
75
- /* @__PURE__ */ jsx("title", { children: "Loading spinner" }),
76
- /* @__PURE__ */ jsx(
77
- "circle",
78
- {
79
- className: "opacity-25",
80
- cx: "12",
81
- cy: "12",
82
- r: "10",
83
- stroke: "currentColor",
84
- strokeWidth: "4"
85
- }
86
- ),
87
- /* @__PURE__ */ jsx(
88
- "path",
89
- {
90
- className: "opacity-75",
91
- fill: "currentColor",
92
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
93
- }
94
- )
95
- ]
96
- }
97
- ),
98
- children
99
- ]
100
- }
101
- );
102
- }
103
- );
104
- Button.displayName = "Button";
105
-
106
- export {
107
- buttonVariants,
108
- Button
109
- };