@openpkg-ts/ui 0.1.1 → 0.1.2
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/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 +3 -1
package/dist/api/index.d.ts
CHANGED
|
@@ -1,3 +1,64 @@
|
|
|
1
|
+
import { ReactNode as ReactNode2 } from "react";
|
|
2
|
+
interface CodeTab {
|
|
3
|
+
/** Tab label */
|
|
4
|
+
label: string;
|
|
5
|
+
/** Tab content (code block) */
|
|
6
|
+
content: ReactNode2;
|
|
7
|
+
/** Raw code for copy button */
|
|
8
|
+
code: string;
|
|
9
|
+
}
|
|
10
|
+
interface CodeTabsProps {
|
|
11
|
+
/** Array of tabs */
|
|
12
|
+
tabs: CodeTab[];
|
|
13
|
+
/** Default selected tab index */
|
|
14
|
+
defaultIndex?: number;
|
|
15
|
+
/** Enable sticky positioning for the header */
|
|
16
|
+
sticky?: boolean;
|
|
17
|
+
/** Custom className */
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Tabbed code block wrapper with copy button per tab.
|
|
22
|
+
* Uses docskit --dk-* CSS variables for consistent theming.
|
|
23
|
+
*/
|
|
24
|
+
declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
|
|
25
|
+
import * as React2 from "react";
|
|
26
|
+
type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
|
|
27
|
+
/**
|
|
28
|
+
* Kind badge variants for export cards.
|
|
29
|
+
*/
|
|
30
|
+
declare const kindBadgeVariants: (props?: {
|
|
31
|
+
kind?: ExportKind | null;
|
|
32
|
+
className?: string;
|
|
33
|
+
}) => string;
|
|
34
|
+
interface ExportCardProps extends React2.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
35
|
+
/** Export name */
|
|
36
|
+
name: string;
|
|
37
|
+
/** Description snippet */
|
|
38
|
+
description?: string;
|
|
39
|
+
/** Link to detail page */
|
|
40
|
+
href: string;
|
|
41
|
+
/** Export kind */
|
|
42
|
+
kind?: ExportKind | null;
|
|
43
|
+
/** Custom link component (for Next.js Link) */
|
|
44
|
+
as?: React2.ElementType;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Card component for displaying exports in an index grid.
|
|
48
|
+
* Features function name styling, description, kind badge, and hover effects.
|
|
49
|
+
*/
|
|
50
|
+
declare const ExportCard: React2.ForwardRefExoticComponent<ExportCardProps & React2.RefAttributes<HTMLAnchorElement>>;
|
|
51
|
+
interface ImportSectionProps {
|
|
52
|
+
/** Import statement text */
|
|
53
|
+
importStatement: string;
|
|
54
|
+
/** Custom className */
|
|
55
|
+
className?: string;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Displays a copyable import statement with one-click copy.
|
|
59
|
+
* Monospace styling with copy button.
|
|
60
|
+
*/
|
|
61
|
+
declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
|
|
1
62
|
interface ParameterSchema {
|
|
2
63
|
/** Type name (e.g., "string", "number", "object") */
|
|
3
64
|
type?: string;
|
|
@@ -29,7 +90,7 @@ interface ParameterItemProps {
|
|
|
29
90
|
* Features expandable nested params, type annotations, and required/optional badges.
|
|
30
91
|
*/
|
|
31
92
|
declare function ParameterItem({ name, schema, required: isRequired, description, depth, className }: ParameterItemProps): React.ReactNode;
|
|
32
|
-
import * as
|
|
93
|
+
import * as React3 from "react";
|
|
33
94
|
type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array" | "function" | "union" | "generic" | "default";
|
|
34
95
|
/**
|
|
35
96
|
* Type coloring for syntax display.
|
|
@@ -39,7 +100,7 @@ declare const typeBadgeVariants: (props?: {
|
|
|
39
100
|
typeColor?: TypeColor | null;
|
|
40
101
|
className?: string;
|
|
41
102
|
}) => string;
|
|
42
|
-
interface TypeBadgeProps extends
|
|
103
|
+
interface TypeBadgeProps extends React3.HTMLAttributes<HTMLSpanElement> {
|
|
43
104
|
/** Type string to display */
|
|
44
105
|
type: string;
|
|
45
106
|
/** Override color detection */
|
|
@@ -49,66 +110,5 @@ interface TypeBadgeProps extends React2.HTMLAttributes<HTMLSpanElement> {
|
|
|
49
110
|
* Inline type display with syntax coloring.
|
|
50
111
|
* Automatically detects type category and applies appropriate color.
|
|
51
112
|
*/
|
|
52
|
-
declare const TypeBadge:
|
|
53
|
-
interface ImportSectionProps {
|
|
54
|
-
/** Import statement text */
|
|
55
|
-
importStatement: string;
|
|
56
|
-
/** Custom className */
|
|
57
|
-
className?: string;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Displays a copyable import statement with one-click copy.
|
|
61
|
-
* Monospace styling with copy button.
|
|
62
|
-
*/
|
|
63
|
-
declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
|
|
64
|
-
import { ReactNode as ReactNode2 } from "react";
|
|
65
|
-
interface CodeTab {
|
|
66
|
-
/** Tab label */
|
|
67
|
-
label: string;
|
|
68
|
-
/** Tab content (code block) */
|
|
69
|
-
content: ReactNode2;
|
|
70
|
-
/** Raw code for copy button */
|
|
71
|
-
code: string;
|
|
72
|
-
}
|
|
73
|
-
interface CodeTabsProps {
|
|
74
|
-
/** Array of tabs */
|
|
75
|
-
tabs: CodeTab[];
|
|
76
|
-
/** Default selected tab index */
|
|
77
|
-
defaultIndex?: number;
|
|
78
|
-
/** Enable sticky positioning for the header */
|
|
79
|
-
sticky?: boolean;
|
|
80
|
-
/** Custom className */
|
|
81
|
-
className?: string;
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Tabbed code block wrapper with copy button per tab.
|
|
85
|
-
* Uses docskit --dk-* CSS variables for consistent theming.
|
|
86
|
-
*/
|
|
87
|
-
declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
|
|
88
|
-
import * as React3 from "react";
|
|
89
|
-
type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
|
|
90
|
-
/**
|
|
91
|
-
* Kind badge variants for export cards.
|
|
92
|
-
*/
|
|
93
|
-
declare const kindBadgeVariants: (props?: {
|
|
94
|
-
kind?: ExportKind | null;
|
|
95
|
-
className?: string;
|
|
96
|
-
}) => string;
|
|
97
|
-
interface ExportCardProps extends React3.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
98
|
-
/** Export name */
|
|
99
|
-
name: string;
|
|
100
|
-
/** Description snippet */
|
|
101
|
-
description?: string;
|
|
102
|
-
/** Link to detail page */
|
|
103
|
-
href: string;
|
|
104
|
-
/** Export kind */
|
|
105
|
-
kind?: ExportKind | null;
|
|
106
|
-
/** Custom link component (for Next.js Link) */
|
|
107
|
-
as?: React3.ElementType;
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Card component for displaying exports in an index grid.
|
|
111
|
-
* Features function name styling, description, kind badge, and hover effects.
|
|
112
|
-
*/
|
|
113
|
-
declare const ExportCard: React3.ForwardRefExoticComponent<ExportCardProps & React3.RefAttributes<HTMLAnchorElement>>;
|
|
113
|
+
declare const TypeBadge: React3.ForwardRefExoticComponent<TypeBadgeProps & React3.RefAttributes<HTMLSpanElement>>;
|
|
114
114
|
export { typeBadgeVariants, kindBadgeVariants, TypeBadgeProps, TypeBadge, ParameterSchema, ParameterItemProps, ParameterItem, ImportSectionProps, ImportSection, ExportKind, ExportCardProps, ExportCard, CodeTabsProps, CodeTabs, CodeTab };
|
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,
|