@openpkg-ts/ui 0.1.1 → 0.1.3
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.
- package/README.md +66 -0
- package/dist/api/index.d.ts +64 -64
- package/dist/api/index.js +193 -193
- package/dist/docskit/index.d.ts +223 -222
- package/dist/docskit/index.js +1910 -5458
- package/package.json +12 -3
package/dist/api/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
// src/api/
|
|
3
|
-
import {
|
|
2
|
+
// src/api/CodeTabs.tsx
|
|
3
|
+
import { Check, Copy } from "lucide-react";
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
|
|
6
6
|
// src/lib/utils.ts
|
|
@@ -10,9 +10,161 @@ function cn(...inputs) {
|
|
|
10
10
|
return twMerge(clsx(inputs));
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
// src/api/
|
|
13
|
+
// src/api/CodeTabs.tsx
|
|
14
14
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
15
|
|
|
16
|
+
function CodeTabs({
|
|
17
|
+
tabs,
|
|
18
|
+
defaultIndex = 0,
|
|
19
|
+
sticky = false,
|
|
20
|
+
className
|
|
21
|
+
}) {
|
|
22
|
+
const [activeIndex, setActiveIndex] = useState(defaultIndex);
|
|
23
|
+
const [copied, setCopied] = useState(false);
|
|
24
|
+
const activeTab = tabs[activeIndex];
|
|
25
|
+
const handleCopy = () => {
|
|
26
|
+
if (!activeTab)
|
|
27
|
+
return;
|
|
28
|
+
navigator.clipboard.writeText(activeTab.code);
|
|
29
|
+
setCopied(true);
|
|
30
|
+
setTimeout(() => setCopied(false), 1200);
|
|
31
|
+
};
|
|
32
|
+
if (!tabs.length)
|
|
33
|
+
return null;
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
35
|
+
className: cn("group rounded-lg border border-dk-border bg-dk-background overflow-hidden", "selection:bg-dk-selection selection:text-current", className),
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsxs("div", {
|
|
38
|
+
className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ jsx("div", {
|
|
41
|
+
className: "flex-1 flex items-stretch",
|
|
42
|
+
children: tabs.map((tab, index) => /* @__PURE__ */ jsx("button", {
|
|
43
|
+
type: "button",
|
|
44
|
+
onClick: () => setActiveIndex(index),
|
|
45
|
+
className: cn("px-4 py-2 text-sm font-mono transition-colors duration-200", "border-r border-dk-border last:border-r-0", index === activeIndex ? "text-dk-tab-active-foreground bg-dk-background/50" : "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
|
|
46
|
+
children: tab.label
|
|
47
|
+
}, tab.label))
|
|
48
|
+
}),
|
|
49
|
+
/* @__PURE__ */ jsx("button", {
|
|
50
|
+
type: "button",
|
|
51
|
+
onClick: handleCopy,
|
|
52
|
+
className: cn("p-2 mx-2", "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground", "opacity-0 group-hover:opacity-100 transition-opacity", "cursor-pointer"),
|
|
53
|
+
"aria-label": "Copy code",
|
|
54
|
+
children: copied ? /* @__PURE__ */ jsx(Check, {
|
|
55
|
+
size: 16
|
|
56
|
+
}) : /* @__PURE__ */ jsx(Copy, {
|
|
57
|
+
size: 16
|
|
58
|
+
})
|
|
59
|
+
})
|
|
60
|
+
]
|
|
61
|
+
}),
|
|
62
|
+
/* @__PURE__ */ jsx("div", {
|
|
63
|
+
className: "bg-dk-background",
|
|
64
|
+
children: activeTab?.content
|
|
65
|
+
})
|
|
66
|
+
]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
// src/api/ExportCard.tsx
|
|
70
|
+
import { cva } from "class-variance-authority";
|
|
71
|
+
import * as React from "react";
|
|
72
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
73
|
+
|
|
74
|
+
var kindBadgeVariants = cva("inline-flex items-center justify-center font-mono font-medium rounded shrink-0 h-5 px-1.5 text-xs", {
|
|
75
|
+
variants: {
|
|
76
|
+
kind: {
|
|
77
|
+
function: "bg-fuchsia-500/15 text-fuchsia-600 dark:text-fuchsia-400",
|
|
78
|
+
class: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
|
|
79
|
+
interface: "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400",
|
|
80
|
+
type: "bg-purple-500/15 text-purple-600 dark:text-purple-400",
|
|
81
|
+
enum: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
|
|
82
|
+
variable: "bg-blue-500/15 text-blue-600 dark:text-blue-400"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
defaultVariants: {
|
|
86
|
+
kind: "function"
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
var kindLabels = {
|
|
90
|
+
function: "fn",
|
|
91
|
+
class: "cls",
|
|
92
|
+
interface: "int",
|
|
93
|
+
type: "type",
|
|
94
|
+
enum: "enum",
|
|
95
|
+
variable: "var"
|
|
96
|
+
};
|
|
97
|
+
var ExportCard = React.forwardRef(({ name, description, href, kind = "function", as: Component = "a", className, ...props }, ref) => {
|
|
98
|
+
const isFunction = kind === "function";
|
|
99
|
+
return /* @__PURE__ */ jsxs2(Component, {
|
|
100
|
+
ref,
|
|
101
|
+
href,
|
|
102
|
+
className: cn("group block rounded-lg border border-border bg-card/50 p-4", "transition-all duration-200", "hover:border-border/80 hover:bg-card hover:shadow-md", "hover:-translate-y-0.5", className),
|
|
103
|
+
...props,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
106
|
+
className: "flex items-center gap-2 mb-2",
|
|
107
|
+
children: [
|
|
108
|
+
/* @__PURE__ */ jsx2("span", {
|
|
109
|
+
className: kindBadgeVariants({ kind }),
|
|
110
|
+
children: kindLabels[kind]
|
|
111
|
+
}),
|
|
112
|
+
/* @__PURE__ */ jsx2("span", {
|
|
113
|
+
className: "font-mono text-base font-medium text-foreground group-hover:text-primary transition-colors",
|
|
114
|
+
children: name
|
|
115
|
+
}),
|
|
116
|
+
isFunction && /* @__PURE__ */ jsx2("span", {
|
|
117
|
+
className: "font-mono text-base text-muted-foreground",
|
|
118
|
+
children: "()"
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
}),
|
|
122
|
+
description && /* @__PURE__ */ jsx2("p", {
|
|
123
|
+
className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed",
|
|
124
|
+
children: description
|
|
125
|
+
})
|
|
126
|
+
]
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
ExportCard.displayName = "ExportCard";
|
|
130
|
+
// src/api/ImportSection.tsx
|
|
131
|
+
import { Check as Check2, Copy as Copy2 } from "lucide-react";
|
|
132
|
+
import { useState as useState2 } from "react";
|
|
133
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
134
|
+
|
|
135
|
+
function ImportSection({ importStatement, className }) {
|
|
136
|
+
const [copied, setCopied] = useState2(false);
|
|
137
|
+
const handleCopy = () => {
|
|
138
|
+
navigator.clipboard.writeText(importStatement);
|
|
139
|
+
setCopied(true);
|
|
140
|
+
setTimeout(() => setCopied(false), 1200);
|
|
141
|
+
};
|
|
142
|
+
return /* @__PURE__ */ jsxs3("div", {
|
|
143
|
+
className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-border bg-muted/30 px-4 py-3", className),
|
|
144
|
+
children: [
|
|
145
|
+
/* @__PURE__ */ jsx3("code", {
|
|
146
|
+
className: "font-mono text-sm text-foreground overflow-x-auto",
|
|
147
|
+
children: importStatement
|
|
148
|
+
}),
|
|
149
|
+
/* @__PURE__ */ jsx3("button", {
|
|
150
|
+
type: "button",
|
|
151
|
+
onClick: handleCopy,
|
|
152
|
+
className: cn("shrink-0 p-1.5 rounded", "text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
|
|
153
|
+
"aria-label": "Copy import statement",
|
|
154
|
+
children: copied ? /* @__PURE__ */ jsx3(Check2, {
|
|
155
|
+
size: 16
|
|
156
|
+
}) : /* @__PURE__ */ jsx3(Copy2, {
|
|
157
|
+
size: 16
|
|
158
|
+
})
|
|
159
|
+
})
|
|
160
|
+
]
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
// src/api/ParameterItem.tsx
|
|
164
|
+
import { ChevronRight } from "lucide-react";
|
|
165
|
+
import { useState as useState3 } from "react";
|
|
166
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
167
|
+
|
|
16
168
|
function getNestedProperties(schema) {
|
|
17
169
|
if (!schema || typeof schema !== "object")
|
|
18
170
|
return null;
|
|
@@ -39,53 +191,53 @@ function NestedPropertyItem({
|
|
|
39
191
|
required = false,
|
|
40
192
|
depth = 0
|
|
41
193
|
}) {
|
|
42
|
-
const [expanded, setExpanded] =
|
|
194
|
+
const [expanded, setExpanded] = useState3(false);
|
|
43
195
|
const type = getTypeDisplay(schema);
|
|
44
196
|
const nestedProps = getNestedProperties(schema);
|
|
45
197
|
const nestedCount = countProperties(schema);
|
|
46
198
|
const hasNested = nestedCount > 0;
|
|
47
|
-
return /* @__PURE__ */
|
|
199
|
+
return /* @__PURE__ */ jsxs4("div", {
|
|
48
200
|
className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
|
|
49
201
|
children: [
|
|
50
|
-
/* @__PURE__ */
|
|
202
|
+
/* @__PURE__ */ jsx4("div", {
|
|
51
203
|
className: "py-3",
|
|
52
|
-
children: /* @__PURE__ */
|
|
204
|
+
children: /* @__PURE__ */ jsxs4("div", {
|
|
53
205
|
className: "flex items-start gap-2",
|
|
54
206
|
children: [
|
|
55
|
-
hasNested && /* @__PURE__ */
|
|
207
|
+
hasNested && /* @__PURE__ */ jsx4("button", {
|
|
56
208
|
type: "button",
|
|
57
209
|
onClick: () => setExpanded(!expanded),
|
|
58
210
|
className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
|
|
59
211
|
"aria-label": expanded ? "Collapse" : "Expand",
|
|
60
|
-
children: /* @__PURE__ */
|
|
212
|
+
children: /* @__PURE__ */ jsx4(ChevronRight, {
|
|
61
213
|
size: 14,
|
|
62
214
|
className: cn("transition-transform duration-200", expanded && "rotate-90")
|
|
63
215
|
})
|
|
64
216
|
}),
|
|
65
|
-
!hasNested && /* @__PURE__ */
|
|
217
|
+
!hasNested && /* @__PURE__ */ jsx4("div", {
|
|
66
218
|
className: "w-5"
|
|
67
219
|
}),
|
|
68
|
-
/* @__PURE__ */
|
|
220
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
69
221
|
className: "flex-1 min-w-0",
|
|
70
222
|
children: [
|
|
71
|
-
/* @__PURE__ */
|
|
223
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
72
224
|
className: "flex items-baseline gap-2 flex-wrap",
|
|
73
225
|
children: [
|
|
74
|
-
/* @__PURE__ */
|
|
226
|
+
/* @__PURE__ */ jsxs4("span", {
|
|
75
227
|
className: "font-mono text-sm text-foreground",
|
|
76
228
|
children: [
|
|
77
229
|
name,
|
|
78
|
-
!required && /* @__PURE__ */
|
|
230
|
+
!required && /* @__PURE__ */ jsx4("span", {
|
|
79
231
|
className: "text-muted-foreground",
|
|
80
232
|
children: "?"
|
|
81
233
|
})
|
|
82
234
|
]
|
|
83
235
|
}),
|
|
84
|
-
/* @__PURE__ */
|
|
236
|
+
/* @__PURE__ */ jsx4("span", {
|
|
85
237
|
className: "font-mono text-sm text-muted-foreground",
|
|
86
238
|
children: hasNested ? "object" : type
|
|
87
239
|
}),
|
|
88
|
-
hasNested && /* @__PURE__ */
|
|
240
|
+
hasNested && /* @__PURE__ */ jsxs4("button", {
|
|
89
241
|
type: "button",
|
|
90
242
|
onClick: () => setExpanded(!expanded),
|
|
91
243
|
className: "text-xs text-primary hover:underline cursor-pointer",
|
|
@@ -97,7 +249,7 @@ function NestedPropertyItem({
|
|
|
97
249
|
})
|
|
98
250
|
]
|
|
99
251
|
}),
|
|
100
|
-
schema.description && /* @__PURE__ */
|
|
252
|
+
schema.description && /* @__PURE__ */ jsx4("p", {
|
|
101
253
|
className: "text-sm text-muted-foreground mt-1",
|
|
102
254
|
children: schema.description
|
|
103
255
|
})
|
|
@@ -106,9 +258,9 @@ function NestedPropertyItem({
|
|
|
106
258
|
]
|
|
107
259
|
})
|
|
108
260
|
}),
|
|
109
|
-
hasNested && expanded && nestedProps && /* @__PURE__ */
|
|
261
|
+
hasNested && expanded && nestedProps && /* @__PURE__ */ jsx4("div", {
|
|
110
262
|
className: "border-l border-border ml-2",
|
|
111
|
-
children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */
|
|
263
|
+
children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx4(NestedPropertyItem, {
|
|
112
264
|
name: propName,
|
|
113
265
|
schema: propSchema,
|
|
114
266
|
required: getRequiredFields(schema).includes(propName),
|
|
@@ -126,52 +278,52 @@ function ParameterItem({
|
|
|
126
278
|
depth = 0,
|
|
127
279
|
className
|
|
128
280
|
}) {
|
|
129
|
-
const [expanded, setExpanded] =
|
|
281
|
+
const [expanded, setExpanded] = useState3(false);
|
|
130
282
|
const type = getTypeDisplay(schema);
|
|
131
283
|
const nestedProps = getNestedProperties(schema);
|
|
132
284
|
const nestedCount = countProperties(schema);
|
|
133
285
|
const hasNested = nestedCount > 0;
|
|
134
286
|
const displayDescription = description ?? schema.description;
|
|
135
|
-
return /* @__PURE__ */
|
|
287
|
+
return /* @__PURE__ */ jsxs4("div", {
|
|
136
288
|
className: cn("border-b border-border last:border-b-0", className),
|
|
137
289
|
children: [
|
|
138
|
-
/* @__PURE__ */
|
|
290
|
+
/* @__PURE__ */ jsx4("div", {
|
|
139
291
|
className: "py-3",
|
|
140
|
-
children: /* @__PURE__ */
|
|
292
|
+
children: /* @__PURE__ */ jsxs4("div", {
|
|
141
293
|
className: "flex items-start gap-2",
|
|
142
294
|
children: [
|
|
143
|
-
hasNested && /* @__PURE__ */
|
|
295
|
+
hasNested && /* @__PURE__ */ jsx4("button", {
|
|
144
296
|
type: "button",
|
|
145
297
|
onClick: () => setExpanded(!expanded),
|
|
146
298
|
className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
|
|
147
299
|
"aria-label": expanded ? "Collapse" : "Expand",
|
|
148
|
-
children: /* @__PURE__ */
|
|
300
|
+
children: /* @__PURE__ */ jsx4(ChevronRight, {
|
|
149
301
|
size: 14,
|
|
150
302
|
className: cn("transition-transform duration-200", expanded && "rotate-90")
|
|
151
303
|
})
|
|
152
304
|
}),
|
|
153
|
-
!hasNested && /* @__PURE__ */
|
|
305
|
+
!hasNested && /* @__PURE__ */ jsx4("div", {
|
|
154
306
|
className: "w-5"
|
|
155
307
|
}),
|
|
156
|
-
/* @__PURE__ */
|
|
308
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
157
309
|
className: "flex-1 min-w-0",
|
|
158
310
|
children: [
|
|
159
|
-
/* @__PURE__ */
|
|
311
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
160
312
|
className: "flex items-baseline gap-2 flex-wrap",
|
|
161
313
|
children: [
|
|
162
|
-
/* @__PURE__ */
|
|
314
|
+
/* @__PURE__ */ jsx4("span", {
|
|
163
315
|
className: "font-mono text-sm font-medium text-foreground",
|
|
164
316
|
children: name
|
|
165
317
|
}),
|
|
166
|
-
isRequired && /* @__PURE__ */
|
|
318
|
+
isRequired && /* @__PURE__ */ jsx4("span", {
|
|
167
319
|
className: "text-[10px] font-semibold px-1.5 py-0.5 rounded border border-border bg-muted text-muted-foreground uppercase tracking-wide",
|
|
168
320
|
children: "Required"
|
|
169
321
|
}),
|
|
170
|
-
/* @__PURE__ */
|
|
322
|
+
/* @__PURE__ */ jsx4("span", {
|
|
171
323
|
className: "font-mono text-sm text-muted-foreground",
|
|
172
324
|
children: hasNested ? "object" : type
|
|
173
325
|
}),
|
|
174
|
-
hasNested && /* @__PURE__ */
|
|
326
|
+
hasNested && /* @__PURE__ */ jsxs4("button", {
|
|
175
327
|
type: "button",
|
|
176
328
|
onClick: () => setExpanded(!expanded),
|
|
177
329
|
className: "text-xs text-primary hover:underline cursor-pointer",
|
|
@@ -183,7 +335,7 @@ function ParameterItem({
|
|
|
183
335
|
})
|
|
184
336
|
]
|
|
185
337
|
}),
|
|
186
|
-
displayDescription && /* @__PURE__ */
|
|
338
|
+
displayDescription && /* @__PURE__ */ jsx4("p", {
|
|
187
339
|
className: "text-sm text-muted-foreground mt-1",
|
|
188
340
|
children: displayDescription
|
|
189
341
|
})
|
|
@@ -192,9 +344,9 @@ function ParameterItem({
|
|
|
192
344
|
]
|
|
193
345
|
})
|
|
194
346
|
}),
|
|
195
|
-
hasNested && expanded && nestedProps && /* @__PURE__ */
|
|
347
|
+
hasNested && expanded && nestedProps && /* @__PURE__ */ jsx4("div", {
|
|
196
348
|
className: "border-l border-border ml-2 mb-3",
|
|
197
|
-
children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */
|
|
349
|
+
children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx4(NestedPropertyItem, {
|
|
198
350
|
name: propName,
|
|
199
351
|
schema: propSchema,
|
|
200
352
|
required: getRequiredFields(schema).includes(propName),
|
|
@@ -205,10 +357,10 @@ function ParameterItem({
|
|
|
205
357
|
});
|
|
206
358
|
}
|
|
207
359
|
// src/api/TypeBadge.tsx
|
|
208
|
-
import { cva } from "class-variance-authority";
|
|
209
|
-
import * as
|
|
210
|
-
import { jsx as
|
|
211
|
-
var typeBadgeVariants =
|
|
360
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
361
|
+
import * as React2 from "react";
|
|
362
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
363
|
+
var typeBadgeVariants = cva2("font-mono text-sm", {
|
|
212
364
|
variants: {
|
|
213
365
|
typeColor: {
|
|
214
366
|
string: "text-emerald-600 dark:text-emerald-400",
|
|
@@ -262,9 +414,9 @@ function detectTypeColor(type) {
|
|
|
262
414
|
}
|
|
263
415
|
return "default";
|
|
264
416
|
}
|
|
265
|
-
var TypeBadge =
|
|
417
|
+
var TypeBadge = React2.forwardRef(({ className, type, typeColor, ...props }, ref) => {
|
|
266
418
|
const color = typeColor ?? detectTypeColor(type);
|
|
267
|
-
return /* @__PURE__ */
|
|
419
|
+
return /* @__PURE__ */ jsx5("span", {
|
|
268
420
|
ref,
|
|
269
421
|
className: cn(typeBadgeVariants({ typeColor: color }), className),
|
|
270
422
|
...props,
|
|
@@ -272,158 +424,6 @@ var TypeBadge = React.forwardRef(({ className, type, typeColor, ...props }, ref)
|
|
|
272
424
|
});
|
|
273
425
|
});
|
|
274
426
|
TypeBadge.displayName = "TypeBadge";
|
|
275
|
-
// src/api/ImportSection.tsx
|
|
276
|
-
import { Check, Copy } from "lucide-react";
|
|
277
|
-
import { useState as useState2 } from "react";
|
|
278
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
279
|
-
|
|
280
|
-
function ImportSection({ importStatement, className }) {
|
|
281
|
-
const [copied, setCopied] = useState2(false);
|
|
282
|
-
const handleCopy = () => {
|
|
283
|
-
navigator.clipboard.writeText(importStatement);
|
|
284
|
-
setCopied(true);
|
|
285
|
-
setTimeout(() => setCopied(false), 1200);
|
|
286
|
-
};
|
|
287
|
-
return /* @__PURE__ */ jsxs2("div", {
|
|
288
|
-
className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-border bg-muted/30 px-4 py-3", className),
|
|
289
|
-
children: [
|
|
290
|
-
/* @__PURE__ */ jsx3("code", {
|
|
291
|
-
className: "font-mono text-sm text-foreground overflow-x-auto",
|
|
292
|
-
children: importStatement
|
|
293
|
-
}),
|
|
294
|
-
/* @__PURE__ */ jsx3("button", {
|
|
295
|
-
type: "button",
|
|
296
|
-
onClick: handleCopy,
|
|
297
|
-
className: cn("shrink-0 p-1.5 rounded", "text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
|
|
298
|
-
"aria-label": "Copy import statement",
|
|
299
|
-
children: copied ? /* @__PURE__ */ jsx3(Check, {
|
|
300
|
-
size: 16
|
|
301
|
-
}) : /* @__PURE__ */ jsx3(Copy, {
|
|
302
|
-
size: 16
|
|
303
|
-
})
|
|
304
|
-
})
|
|
305
|
-
]
|
|
306
|
-
});
|
|
307
|
-
}
|
|
308
|
-
// src/api/CodeTabs.tsx
|
|
309
|
-
import { Check as Check2, Copy as Copy2 } from "lucide-react";
|
|
310
|
-
import { useState as useState3 } from "react";
|
|
311
|
-
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
312
|
-
|
|
313
|
-
function CodeTabs({
|
|
314
|
-
tabs,
|
|
315
|
-
defaultIndex = 0,
|
|
316
|
-
sticky = false,
|
|
317
|
-
className
|
|
318
|
-
}) {
|
|
319
|
-
const [activeIndex, setActiveIndex] = useState3(defaultIndex);
|
|
320
|
-
const [copied, setCopied] = useState3(false);
|
|
321
|
-
const activeTab = tabs[activeIndex];
|
|
322
|
-
const handleCopy = () => {
|
|
323
|
-
if (!activeTab)
|
|
324
|
-
return;
|
|
325
|
-
navigator.clipboard.writeText(activeTab.code);
|
|
326
|
-
setCopied(true);
|
|
327
|
-
setTimeout(() => setCopied(false), 1200);
|
|
328
|
-
};
|
|
329
|
-
if (!tabs.length)
|
|
330
|
-
return null;
|
|
331
|
-
return /* @__PURE__ */ jsxs3("div", {
|
|
332
|
-
className: cn("group rounded-lg border border-dk-border bg-dk-background overflow-hidden", "selection:bg-dk-selection selection:text-current", className),
|
|
333
|
-
children: [
|
|
334
|
-
/* @__PURE__ */ jsxs3("div", {
|
|
335
|
-
className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
|
|
336
|
-
children: [
|
|
337
|
-
/* @__PURE__ */ jsx4("div", {
|
|
338
|
-
className: "flex-1 flex items-stretch",
|
|
339
|
-
children: tabs.map((tab, index) => /* @__PURE__ */ jsx4("button", {
|
|
340
|
-
type: "button",
|
|
341
|
-
onClick: () => setActiveIndex(index),
|
|
342
|
-
className: cn("px-4 py-2 text-sm font-mono transition-colors duration-200", "border-r border-dk-border last:border-r-0", index === activeIndex ? "text-dk-tab-active-foreground bg-dk-background/50" : "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
|
|
343
|
-
children: tab.label
|
|
344
|
-
}, tab.label))
|
|
345
|
-
}),
|
|
346
|
-
/* @__PURE__ */ jsx4("button", {
|
|
347
|
-
type: "button",
|
|
348
|
-
onClick: handleCopy,
|
|
349
|
-
className: cn("p-2 mx-2", "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground", "opacity-0 group-hover:opacity-100 transition-opacity", "cursor-pointer"),
|
|
350
|
-
"aria-label": "Copy code",
|
|
351
|
-
children: copied ? /* @__PURE__ */ jsx4(Check2, {
|
|
352
|
-
size: 16
|
|
353
|
-
}) : /* @__PURE__ */ jsx4(Copy2, {
|
|
354
|
-
size: 16
|
|
355
|
-
})
|
|
356
|
-
})
|
|
357
|
-
]
|
|
358
|
-
}),
|
|
359
|
-
/* @__PURE__ */ jsx4("div", {
|
|
360
|
-
className: "bg-dk-background",
|
|
361
|
-
children: activeTab?.content
|
|
362
|
-
})
|
|
363
|
-
]
|
|
364
|
-
});
|
|
365
|
-
}
|
|
366
|
-
// src/api/ExportCard.tsx
|
|
367
|
-
import { cva as cva2 } from "class-variance-authority";
|
|
368
|
-
import * as React2 from "react";
|
|
369
|
-
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
370
|
-
|
|
371
|
-
var kindBadgeVariants = cva2("inline-flex items-center justify-center font-mono font-medium rounded shrink-0 h-5 px-1.5 text-xs", {
|
|
372
|
-
variants: {
|
|
373
|
-
kind: {
|
|
374
|
-
function: "bg-fuchsia-500/15 text-fuchsia-600 dark:text-fuchsia-400",
|
|
375
|
-
class: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
|
|
376
|
-
interface: "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400",
|
|
377
|
-
type: "bg-purple-500/15 text-purple-600 dark:text-purple-400",
|
|
378
|
-
enum: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
|
|
379
|
-
variable: "bg-blue-500/15 text-blue-600 dark:text-blue-400"
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
defaultVariants: {
|
|
383
|
-
kind: "function"
|
|
384
|
-
}
|
|
385
|
-
});
|
|
386
|
-
var kindLabels = {
|
|
387
|
-
function: "fn",
|
|
388
|
-
class: "cls",
|
|
389
|
-
interface: "int",
|
|
390
|
-
type: "type",
|
|
391
|
-
enum: "enum",
|
|
392
|
-
variable: "var"
|
|
393
|
-
};
|
|
394
|
-
var ExportCard = React2.forwardRef(({ name, description, href, kind = "function", as: Component = "a", className, ...props }, ref) => {
|
|
395
|
-
const isFunction = kind === "function";
|
|
396
|
-
return /* @__PURE__ */ jsxs4(Component, {
|
|
397
|
-
ref,
|
|
398
|
-
href,
|
|
399
|
-
className: cn("group block rounded-lg border border-border bg-card/50 p-4", "transition-all duration-200", "hover:border-border/80 hover:bg-card hover:shadow-md", "hover:-translate-y-0.5", className),
|
|
400
|
-
...props,
|
|
401
|
-
children: [
|
|
402
|
-
/* @__PURE__ */ jsxs4("div", {
|
|
403
|
-
className: "flex items-center gap-2 mb-2",
|
|
404
|
-
children: [
|
|
405
|
-
/* @__PURE__ */ jsx5("span", {
|
|
406
|
-
className: kindBadgeVariants({ kind }),
|
|
407
|
-
children: kindLabels[kind]
|
|
408
|
-
}),
|
|
409
|
-
/* @__PURE__ */ jsx5("span", {
|
|
410
|
-
className: "font-mono text-base font-medium text-foreground group-hover:text-primary transition-colors",
|
|
411
|
-
children: name
|
|
412
|
-
}),
|
|
413
|
-
isFunction && /* @__PURE__ */ jsx5("span", {
|
|
414
|
-
className: "font-mono text-base text-muted-foreground",
|
|
415
|
-
children: "()"
|
|
416
|
-
})
|
|
417
|
-
]
|
|
418
|
-
}),
|
|
419
|
-
description && /* @__PURE__ */ jsx5("p", {
|
|
420
|
-
className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed",
|
|
421
|
-
children: description
|
|
422
|
-
})
|
|
423
|
-
]
|
|
424
|
-
});
|
|
425
|
-
});
|
|
426
|
-
ExportCard.displayName = "ExportCard";
|
|
427
427
|
export {
|
|
428
428
|
typeBadgeVariants,
|
|
429
429
|
kindBadgeVariants,
|