@inklu/docs 0.2.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.
- package/CHANGELOG.md +7 -0
- package/components.json +25 -0
- package/dist/index.d.mts +271 -0
- package/dist/index.d.ts +271 -0
- package/dist/index.js +2455 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2368 -0
- package/dist/index.mjs.map +1 -0
- package/dist/shiki.d.mts +10 -0
- package/dist/shiki.d.ts +10 -0
- package/dist/shiki.js +47 -0
- package/dist/shiki.js.map +1 -0
- package/dist/shiki.mjs +22 -0
- package/dist/shiki.mjs.map +1 -0
- package/dist/styles.css +2556 -0
- package/package.json +55 -0
- package/src/components/content/changelog-content.tsx +119 -0
- package/src/components/content/code-block.tsx +111 -0
- package/src/components/content/docs-content.tsx +113 -0
- package/src/components/layout/docs-layout.tsx +192 -0
- package/src/components/layout/site-header.tsx +152 -0
- package/src/components/layout/site-layout.tsx +28 -0
- package/src/components/layout/site-provider.tsx +23 -0
- package/src/components/layout/site-template.tsx +20 -0
- package/src/components/layout/theme-provider.tsx +10 -0
- package/src/components/layout/theme-switcher.tsx +42 -0
- package/src/components/motion-primitives/morph-icon.tsx +97 -0
- package/src/components/motion-primitives/progressive-blur.tsx +64 -0
- package/src/components/motion-primitives/sliding-number.tsx +131 -0
- package/src/components/motion-primitives/text-effect.tsx +290 -0
- package/src/components/motion-primitives/text-morph.tsx +77 -0
- package/src/components/motion-primitives/text-scramble.tsx +87 -0
- package/src/components/shared/command-block.tsx +193 -0
- package/src/components/shared/scroll-fade.tsx +22 -0
- package/src/components/ui/badge.tsx +50 -0
- package/src/components/ui/brand-logo.tsx +68 -0
- package/src/components/ui/button-group.tsx +87 -0
- package/src/components/ui/button.tsx +104 -0
- package/src/components/ui/card.tsx +97 -0
- package/src/components/ui/direction.tsx +6 -0
- package/src/components/ui/hover-card.tsx +51 -0
- package/src/components/ui/item.tsx +201 -0
- package/src/components/ui/separator.tsx +25 -0
- package/src/components/ui/toast.tsx +322 -0
- package/src/components/ui/tooltip.tsx +66 -0
- package/src/hooks/use-copy-to-clipboard.ts +54 -0
- package/src/index.ts +30 -0
- package/src/lib/constants.ts +63 -0
- package/src/lib/motions.ts +21 -0
- package/src/lib/utils/audio.ts +56 -0
- package/src/lib/utils.ts +14 -0
- package/src/shiki.ts +25 -0
- package/src/styles.css +112 -0
- package/src/typeset.css +513 -0
- package/tsconfig.json +15 -0
- package/tsup.config.ts +11 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2455 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// src/index.ts
|
|
32
|
+
var index_exports = {};
|
|
33
|
+
__export(index_exports, {
|
|
34
|
+
AnchoredToastProvider: () => AnchoredToastProvider,
|
|
35
|
+
Badge: () => Badge,
|
|
36
|
+
BrandLogo: () => BrandLogo,
|
|
37
|
+
Button: () => Button,
|
|
38
|
+
ButtonGroup: () => ButtonGroup,
|
|
39
|
+
ButtonGroupSeparator: () => ButtonGroupSeparator,
|
|
40
|
+
ButtonGroupText: () => ButtonGroupText,
|
|
41
|
+
Card: () => Card,
|
|
42
|
+
CardAction: () => CardAction,
|
|
43
|
+
CardContent: () => CardContent,
|
|
44
|
+
CardDescription: () => CardDescription,
|
|
45
|
+
CardFooter: () => CardFooter,
|
|
46
|
+
CardHeader: () => CardHeader,
|
|
47
|
+
CardTitle: () => CardTitle,
|
|
48
|
+
ChangelogContent: () => ChangelogContent,
|
|
49
|
+
CodeBlock: () => CodeBlock,
|
|
50
|
+
CommandBlock: () => CommandBlock,
|
|
51
|
+
CopyMorphIcon: () => CopyMorphIcon,
|
|
52
|
+
DirectionProvider: () => import_direction_provider.DirectionProvider,
|
|
53
|
+
DocsCode: () => DocsCode,
|
|
54
|
+
DocsCol: () => DocsCol,
|
|
55
|
+
DocsFrame: () => DocsFrame,
|
|
56
|
+
DocsHeader: () => DocsHeader,
|
|
57
|
+
DocsInstallation: () => DocsInstallation,
|
|
58
|
+
DocsLayout: () => DocsLayout,
|
|
59
|
+
DocsNavbar: () => DocsNavbar,
|
|
60
|
+
DocsOverview: () => DocsOverview,
|
|
61
|
+
DocsSection: () => DocsSection,
|
|
62
|
+
EASE_OUT: () => EASE_OUT,
|
|
63
|
+
HERO_STAGGER: () => HERO_STAGGER,
|
|
64
|
+
HoverCard: () => HoverCard,
|
|
65
|
+
HoverCardContent: () => HoverCardContent,
|
|
66
|
+
HoverCardTrigger: () => HoverCardTrigger,
|
|
67
|
+
Item: () => Item,
|
|
68
|
+
ItemActions: () => ItemActions,
|
|
69
|
+
ItemContent: () => ItemContent,
|
|
70
|
+
ItemDescription: () => ItemDescription,
|
|
71
|
+
ItemFooter: () => ItemFooter,
|
|
72
|
+
ItemGroup: () => ItemGroup,
|
|
73
|
+
ItemHeader: () => ItemHeader,
|
|
74
|
+
ItemMedia: () => ItemMedia,
|
|
75
|
+
ItemSeparator: () => ItemSeparator,
|
|
76
|
+
ItemTitle: () => ItemTitle,
|
|
77
|
+
REVEAL_DURATION: () => REVEAL_DURATION,
|
|
78
|
+
ScrollFade: () => ScrollFade,
|
|
79
|
+
Separator: () => Separator,
|
|
80
|
+
SiteHeader: () => SiteHeader,
|
|
81
|
+
SiteLayout: () => SiteLayout,
|
|
82
|
+
SiteProvider: () => SiteProvider,
|
|
83
|
+
SiteTemplate: () => SiteTemplate,
|
|
84
|
+
SlidingNumber: () => SlidingNumber,
|
|
85
|
+
TextEffect: () => TextEffect,
|
|
86
|
+
TextMorph: () => TextMorph,
|
|
87
|
+
ThemeProvider: () => ThemeProvider,
|
|
88
|
+
ThemeSwitcher: () => ThemeSwitcher,
|
|
89
|
+
ToastPrimitive: () => import_toast.Toast,
|
|
90
|
+
ToastProvider: () => ToastProvider,
|
|
91
|
+
Tooltip: () => Tooltip,
|
|
92
|
+
TooltipContent: () => TooltipContent,
|
|
93
|
+
TooltipProvider: () => TooltipProvider,
|
|
94
|
+
TooltipTrigger: () => TooltipTrigger,
|
|
95
|
+
anchoredToastManager: () => anchoredToastManager,
|
|
96
|
+
badgeVariants: () => badgeVariants,
|
|
97
|
+
buttonGroupVariants: () => buttonGroupVariants,
|
|
98
|
+
buttonVariants: () => buttonVariants,
|
|
99
|
+
colReveal: () => colReveal,
|
|
100
|
+
heroChild: () => heroChild,
|
|
101
|
+
toastManager: () => toastManager,
|
|
102
|
+
useDirection: () => import_direction_provider.useDirection
|
|
103
|
+
});
|
|
104
|
+
module.exports = __toCommonJS(index_exports);
|
|
105
|
+
|
|
106
|
+
// src/components/content/changelog-content.tsx
|
|
107
|
+
var import_react2 = require("motion/react");
|
|
108
|
+
|
|
109
|
+
// src/components/ui/badge.tsx
|
|
110
|
+
var import_merge_props = require("@base-ui/react/merge-props");
|
|
111
|
+
var import_use_render = require("@base-ui/react/use-render");
|
|
112
|
+
var import_react = require("@lisse/react");
|
|
113
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
114
|
+
|
|
115
|
+
// src/lib/utils.ts
|
|
116
|
+
var import_clsx = require("clsx");
|
|
117
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
118
|
+
function cn(...inputs) {
|
|
119
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
120
|
+
}
|
|
121
|
+
function formatChangelogDate(date) {
|
|
122
|
+
return new Date(date).toLocaleDateString("en-US", {
|
|
123
|
+
month: "long",
|
|
124
|
+
day: "numeric",
|
|
125
|
+
year: "numeric"
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// src/components/ui/badge.tsx
|
|
130
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
131
|
+
var badgeVariants = (0, import_class_variance_authority.cva)(
|
|
132
|
+
"inline-flex h-4 items-center justify-center px-1.5 text-[10px] font-mono uppercase tracking-wide transition-all whitespace-nowrap",
|
|
133
|
+
{
|
|
134
|
+
variants: {
|
|
135
|
+
variant: {
|
|
136
|
+
default: "bg-primary text-primary-foreground",
|
|
137
|
+
secondary: "bg-secondary text-muted-foreground hover:text-foreground",
|
|
138
|
+
outline: "border border-border text-foreground"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
defaultVariants: {
|
|
142
|
+
variant: "default"
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
function Badge({
|
|
147
|
+
className,
|
|
148
|
+
variant = "default",
|
|
149
|
+
render,
|
|
150
|
+
...props
|
|
151
|
+
}) {
|
|
152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.SmoothCorners, { asChild: true, corners: { radius: 4, smoothing: 1 }, children: (0, import_use_render.useRender)({
|
|
153
|
+
defaultTagName: "span",
|
|
154
|
+
props: (0, import_merge_props.mergeProps)(
|
|
155
|
+
{
|
|
156
|
+
className: cn(badgeVariants({ variant }), className)
|
|
157
|
+
},
|
|
158
|
+
props
|
|
159
|
+
),
|
|
160
|
+
render,
|
|
161
|
+
state: {
|
|
162
|
+
slot: "badge",
|
|
163
|
+
variant
|
|
164
|
+
}
|
|
165
|
+
}) });
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// src/lib/constants.ts
|
|
169
|
+
var CHANGELOG = [
|
|
170
|
+
{
|
|
171
|
+
version: "1.1.0",
|
|
172
|
+
title: "The Components Update",
|
|
173
|
+
date: "2024-03-15",
|
|
174
|
+
summary: "Introduced a new suite of reusable components to accelerate your workflow.",
|
|
175
|
+
changes: [
|
|
176
|
+
{
|
|
177
|
+
kind: "new",
|
|
178
|
+
text: "Added generic button component with variants."
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
kind: "new",
|
|
182
|
+
text: "Added customizable dialog and modal components."
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
kind: "improved",
|
|
186
|
+
text: "Enhanced accessibility across all interactive elements."
|
|
187
|
+
}
|
|
188
|
+
]
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
version: "1.0.1",
|
|
192
|
+
title: "Bug Fixes",
|
|
193
|
+
date: "2024-01-10",
|
|
194
|
+
summary: "Minor fixes and performance improvements.",
|
|
195
|
+
changes: [
|
|
196
|
+
{
|
|
197
|
+
kind: "fixed",
|
|
198
|
+
text: "Fixed hydration error on initial load."
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
kind: "improved",
|
|
202
|
+
text: "Optimized font loading for better Core Web Vitals."
|
|
203
|
+
}
|
|
204
|
+
]
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
version: "1.0.0",
|
|
208
|
+
title: "Initial Release",
|
|
209
|
+
date: "2024-01-01",
|
|
210
|
+
summary: "First version of the project.",
|
|
211
|
+
changes: [
|
|
212
|
+
{
|
|
213
|
+
kind: "new",
|
|
214
|
+
text: "Added initial template architecture."
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
kind: "new",
|
|
218
|
+
text: "Established monochromatic Liquid Glass design tokens."
|
|
219
|
+
}
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
];
|
|
223
|
+
|
|
224
|
+
// src/lib/motions.ts
|
|
225
|
+
var EASE_OUT = [0.22, 1, 0.36, 1];
|
|
226
|
+
var REVEAL_DURATION = 0.28;
|
|
227
|
+
var HERO_STAGGER = 0.06;
|
|
228
|
+
var heroChild = {
|
|
229
|
+
hidden: { opacity: 0, y: 12 },
|
|
230
|
+
show: {
|
|
231
|
+
opacity: 1,
|
|
232
|
+
y: 0,
|
|
233
|
+
transition: { duration: REVEAL_DURATION, ease: EASE_OUT }
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
var colReveal = {
|
|
237
|
+
hidden: { opacity: 0, y: 12 },
|
|
238
|
+
show: {
|
|
239
|
+
opacity: 1,
|
|
240
|
+
y: 0,
|
|
241
|
+
transition: { duration: REVEAL_DURATION, ease: EASE_OUT }
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
// src/components/content/changelog-content.tsx
|
|
246
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
247
|
+
function Col({ children }) {
|
|
248
|
+
const reduced = (0, import_react2.useReducedMotion)() ?? false;
|
|
249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
250
|
+
import_react2.motion.div,
|
|
251
|
+
{
|
|
252
|
+
className: "mx-auto w-full",
|
|
253
|
+
initial: reduced ? false : "hidden",
|
|
254
|
+
whileInView: "show",
|
|
255
|
+
viewport: { once: true, margin: "0px 0px -64px 0px" },
|
|
256
|
+
variants: colReveal,
|
|
257
|
+
children
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
}
|
|
261
|
+
var KIND_LABEL = {
|
|
262
|
+
new: "New",
|
|
263
|
+
improved: "Improved",
|
|
264
|
+
fixed: "Fixed"
|
|
265
|
+
};
|
|
266
|
+
function KindTag({ kind }) {
|
|
267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: "secondary", className: "align-top mt-0.5", children: KIND_LABEL[kind] });
|
|
268
|
+
}
|
|
269
|
+
function ChangelogContent() {
|
|
270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("main", { className: "typeset typeset-docs mx-auto max-w-(--layout-content-width) w-full", children: [
|
|
271
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { id: "changelog-header", className: "scroll-mt-24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Col, { children: [
|
|
272
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "tracking-tight mb-2", children: "Changelog" }),
|
|
273
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-muted-foreground/60 mb-8 mt-0", children: "16 February, 2026" })
|
|
274
|
+
] }) }),
|
|
275
|
+
CHANGELOG.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
276
|
+
"section",
|
|
277
|
+
{
|
|
278
|
+
id: `v${entry.version}`,
|
|
279
|
+
className: "scroll-mt-24",
|
|
280
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Col, { children: [
|
|
281
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "not-typeset mt-16 flex items-center gap-3", children: [
|
|
282
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
283
|
+
Badge,
|
|
284
|
+
{
|
|
285
|
+
variant: "secondary",
|
|
286
|
+
className: "text-foreground align-middle",
|
|
287
|
+
children: entry.version === "next" ? "Up next" : `v${entry.version}`
|
|
288
|
+
}
|
|
289
|
+
),
|
|
290
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: entry.date ? formatChangelogDate(entry.date) : "In progress" })
|
|
291
|
+
] }),
|
|
292
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: entry.title }),
|
|
293
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: entry.summary }),
|
|
294
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "not-typeset mt-4 overflow-hidden rounded-2xl bg-card", children: entry.changes.map(
|
|
295
|
+
(change, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
296
|
+
"div",
|
|
297
|
+
{
|
|
298
|
+
className: cn(
|
|
299
|
+
"flex gap-3 px-4 py-3",
|
|
300
|
+
i > 0 && "border-t border-border"
|
|
301
|
+
),
|
|
302
|
+
children: [
|
|
303
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(KindTag, { kind: change.kind }),
|
|
304
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: change.text })
|
|
305
|
+
]
|
|
306
|
+
},
|
|
307
|
+
change.text
|
|
308
|
+
)
|
|
309
|
+
) })
|
|
310
|
+
] })
|
|
311
|
+
},
|
|
312
|
+
entry.version
|
|
313
|
+
)),
|
|
314
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Col, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "mt-16", children: [
|
|
315
|
+
"Full commit history lives on",
|
|
316
|
+
" ",
|
|
317
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
318
|
+
"a",
|
|
319
|
+
{
|
|
320
|
+
href: "https://github.com/your-username/your-repo",
|
|
321
|
+
target: "_blank",
|
|
322
|
+
rel: "noopener noreferrer",
|
|
323
|
+
children: "GitHub"
|
|
324
|
+
}
|
|
325
|
+
),
|
|
326
|
+
"."
|
|
327
|
+
] }) })
|
|
328
|
+
] }) }) });
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// src/components/content/code-block.tsx
|
|
332
|
+
var React = __toESM(require("react"));
|
|
333
|
+
|
|
334
|
+
// src/components/shared/command-block.tsx
|
|
335
|
+
var import_react8 = require("motion/react");
|
|
336
|
+
var import_react9 = require("react");
|
|
337
|
+
|
|
338
|
+
// src/components/ui/button.tsx
|
|
339
|
+
var import_react3 = require("@base-ui/react");
|
|
340
|
+
var import_react4 = require("@lisse/react");
|
|
341
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
342
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
343
|
+
var buttonVariants = (0, import_class_variance_authority2.cva)(
|
|
344
|
+
"group/button inline-flex shrink-0 items-center justify-center border border-transparent font-medium whitespace-nowrap transition duration-[160ms] ease-out outline-none select-none focus-visible:ring-2 focus-visible:ring-white/20 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
|
|
345
|
+
{
|
|
346
|
+
variants: {
|
|
347
|
+
variant: {
|
|
348
|
+
default: "bg-primary text-primary-foreground border-transparent hover:bg-primary/90",
|
|
349
|
+
outline: "border-border text-foreground hover:bg-accent hover:text-accent-foreground",
|
|
350
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
351
|
+
ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
|
|
352
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
353
|
+
link: "text-foreground underline-offset-4 hover:underline"
|
|
354
|
+
},
|
|
355
|
+
size: {
|
|
356
|
+
default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
|
|
357
|
+
icon: "size-9 sm:size-8",
|
|
358
|
+
"icon-lg": "size-10 sm:size-9",
|
|
359
|
+
"icon-sm": "size-8 sm:size-7",
|
|
360
|
+
"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
|
|
361
|
+
"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
|
|
362
|
+
lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
|
|
363
|
+
sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
|
|
364
|
+
xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
|
|
365
|
+
xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
defaultVariants: {
|
|
369
|
+
variant: "default",
|
|
370
|
+
size: "default"
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
);
|
|
374
|
+
function Button({
|
|
375
|
+
className,
|
|
376
|
+
variant,
|
|
377
|
+
size = "default",
|
|
378
|
+
render,
|
|
379
|
+
children,
|
|
380
|
+
loading = false,
|
|
381
|
+
disabled: disabledProp,
|
|
382
|
+
...props
|
|
383
|
+
}) {
|
|
384
|
+
const isDisabled = Boolean(loading || disabledProp);
|
|
385
|
+
const typeValue = render ? void 0 : "button";
|
|
386
|
+
const defaultProps = {
|
|
387
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
388
|
+
children,
|
|
389
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
390
|
+
"div",
|
|
391
|
+
{
|
|
392
|
+
className: "pointer-events-none absolute",
|
|
393
|
+
"data-slot": "button-loading-indicator"
|
|
394
|
+
}
|
|
395
|
+
)
|
|
396
|
+
] }),
|
|
397
|
+
className: cn(buttonVariants({ className, size, variant })),
|
|
398
|
+
"aria-disabled": loading || void 0,
|
|
399
|
+
"data-loading": loading ? "" : void 0,
|
|
400
|
+
"data-slot": "button",
|
|
401
|
+
disabled: isDisabled,
|
|
402
|
+
type: typeValue
|
|
403
|
+
};
|
|
404
|
+
let radius = 8;
|
|
405
|
+
if (size === "default") radius = 8;
|
|
406
|
+
else if (size === "sm") radius = 7;
|
|
407
|
+
else if (size === "xs") radius = 5;
|
|
408
|
+
else if (size === "lg") radius = 10;
|
|
409
|
+
else if (size === "xl") radius = 12;
|
|
410
|
+
else if (size === "icon") radius = 8;
|
|
411
|
+
else if (size === "icon-lg") radius = 10;
|
|
412
|
+
else if (size === "icon-sm") radius = 7;
|
|
413
|
+
else if (size === "icon-xl") radius = 12;
|
|
414
|
+
else if (size === "icon-xs") radius = 5;
|
|
415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.SmoothCorners, { asChild: true, corners: { radius, smoothing: 1 }, children: (0, import_react3.useRender)({
|
|
416
|
+
defaultTagName: "button",
|
|
417
|
+
props: (0, import_react3.mergeProps)(defaultProps, props),
|
|
418
|
+
render
|
|
419
|
+
}) });
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
// src/components/ui/toast.tsx
|
|
423
|
+
var import_toast = require("@base-ui/react/toast");
|
|
424
|
+
var import_react_icons = require("@radix-ui/react-icons");
|
|
425
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
426
|
+
var TOAST_ICONS = {
|
|
427
|
+
error: import_react_icons.CrossCircledIcon,
|
|
428
|
+
info: import_react_icons.InfoCircledIcon,
|
|
429
|
+
loading: import_react_icons.ReloadIcon,
|
|
430
|
+
success: import_react_icons.CheckCircledIcon,
|
|
431
|
+
warning: import_react_icons.ExclamationTriangleIcon
|
|
432
|
+
};
|
|
433
|
+
function getSwipeDirection(position) {
|
|
434
|
+
const verticalDirection = position.startsWith("top") ? "up" : "down";
|
|
435
|
+
if (position.includes("center")) {
|
|
436
|
+
return [verticalDirection];
|
|
437
|
+
}
|
|
438
|
+
if (position.includes("left")) {
|
|
439
|
+
return ["left", verticalDirection];
|
|
440
|
+
}
|
|
441
|
+
return ["right", verticalDirection];
|
|
442
|
+
}
|
|
443
|
+
function upsertReplayClassName(toast) {
|
|
444
|
+
const k = toast.updateKey ?? 0;
|
|
445
|
+
if (k <= 0) return void 0;
|
|
446
|
+
const isEven = k % 2 === 0;
|
|
447
|
+
if (toast.type === "error") {
|
|
448
|
+
return isEven ? "animate-toast-error-even" : "animate-toast-error-odd";
|
|
449
|
+
}
|
|
450
|
+
return isEven ? "animate-toast-success-even" : "animate-toast-success-odd";
|
|
451
|
+
}
|
|
452
|
+
function Toasts({
|
|
453
|
+
position,
|
|
454
|
+
portalProps
|
|
455
|
+
}) {
|
|
456
|
+
const { toasts } = import_toast.Toast.useToastManager();
|
|
457
|
+
const swipeDirection = getSwipeDirection(position);
|
|
458
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_toast.Toast.Portal, { "data-slot": "toast-portal", ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
459
|
+
import_toast.Toast.Viewport,
|
|
460
|
+
{
|
|
461
|
+
className: cn(
|
|
462
|
+
"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]",
|
|
463
|
+
// Vertical positioning
|
|
464
|
+
"data-[position*=top]:top-(--toast-inset)",
|
|
465
|
+
"data-[position*=bottom]:bottom-(--toast-inset)",
|
|
466
|
+
// Horizontal positioning
|
|
467
|
+
"data-[position*=left]:left-(--toast-inset)",
|
|
468
|
+
"data-[position*=right]:right-(--toast-inset)",
|
|
469
|
+
"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2"
|
|
470
|
+
),
|
|
471
|
+
"data-position": position,
|
|
472
|
+
"data-slot": "toast-viewport",
|
|
473
|
+
children: toasts.map((toast) => {
|
|
474
|
+
const Icon = toast.type ? TOAST_ICONS[toast.type] : null;
|
|
475
|
+
const toastData = toast.data;
|
|
476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
477
|
+
import_toast.Toast.Root,
|
|
478
|
+
{
|
|
479
|
+
className: cn(
|
|
480
|
+
"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-popover text-popover-foreground [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s]",
|
|
481
|
+
// Base positioning using data-position
|
|
482
|
+
"data-[position*=right]:right-0 data-[position*=right]:left-auto",
|
|
483
|
+
"data-[position*=left]:right-auto data-[position*=left]:left-0",
|
|
484
|
+
"data-[position*=center]:right-0 data-[position*=center]:left-0",
|
|
485
|
+
"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]",
|
|
486
|
+
"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]",
|
|
487
|
+
// Gap fill for hover
|
|
488
|
+
"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full",
|
|
489
|
+
"data-[position*=top]:after:top-full",
|
|
490
|
+
"data-[position*=bottom]:after:bottom-full",
|
|
491
|
+
// Define some variables
|
|
492
|
+
"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]",
|
|
493
|
+
// Define offset-y variable
|
|
494
|
+
"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]",
|
|
495
|
+
"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]",
|
|
496
|
+
// Default state transform
|
|
497
|
+
"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
|
|
498
|
+
"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
|
|
499
|
+
// Limited state
|
|
500
|
+
"data-limited:opacity-0",
|
|
501
|
+
// Expanded state
|
|
502
|
+
"data-expanded:h-(--toast-height)",
|
|
503
|
+
"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]",
|
|
504
|
+
// Starting and ending animations
|
|
505
|
+
"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]",
|
|
506
|
+
"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
|
|
507
|
+
"data-ending-style:opacity-0",
|
|
508
|
+
// Ending animations (direction-aware)
|
|
509
|
+
"data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
|
|
510
|
+
"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
|
|
511
|
+
"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
|
|
512
|
+
"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
|
|
513
|
+
"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
|
|
514
|
+
// Ending animations (expanded)
|
|
515
|
+
"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
|
|
516
|
+
"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
|
|
517
|
+
"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
|
|
518
|
+
"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
|
|
519
|
+
upsertReplayClassName(toast)
|
|
520
|
+
),
|
|
521
|
+
...toastData?.rootProps,
|
|
522
|
+
"data-position": position,
|
|
523
|
+
swipeDirection,
|
|
524
|
+
toast,
|
|
525
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_toast.Toast.Content, { className: "pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100", children: [
|
|
526
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2", children: [
|
|
527
|
+
Icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
528
|
+
"div",
|
|
529
|
+
{
|
|
530
|
+
className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
531
|
+
"data-slot": "toast-icon",
|
|
532
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" })
|
|
533
|
+
}
|
|
534
|
+
),
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
|
|
536
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
537
|
+
import_toast.Toast.Title,
|
|
538
|
+
{
|
|
539
|
+
className: "font-medium",
|
|
540
|
+
"data-slot": "toast-title"
|
|
541
|
+
}
|
|
542
|
+
),
|
|
543
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
544
|
+
import_toast.Toast.Description,
|
|
545
|
+
{
|
|
546
|
+
className: "text-muted-foreground",
|
|
547
|
+
"data-slot": "toast-description"
|
|
548
|
+
}
|
|
549
|
+
)
|
|
550
|
+
] })
|
|
551
|
+
] }),
|
|
552
|
+
toast.actionProps && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
553
|
+
import_toast.Toast.Action,
|
|
554
|
+
{
|
|
555
|
+
className: buttonVariants({ size: "xs" }),
|
|
556
|
+
"data-slot": "toast-action",
|
|
557
|
+
children: toast.actionProps.children
|
|
558
|
+
}
|
|
559
|
+
)
|
|
560
|
+
] })
|
|
561
|
+
},
|
|
562
|
+
toast.id
|
|
563
|
+
);
|
|
564
|
+
})
|
|
565
|
+
}
|
|
566
|
+
) });
|
|
567
|
+
}
|
|
568
|
+
function AnchoredToasts({
|
|
569
|
+
portalProps
|
|
570
|
+
}) {
|
|
571
|
+
const { toasts } = import_toast.Toast.useToastManager();
|
|
572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_toast.Toast.Portal, { "data-slot": "toast-portal-anchored", ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
573
|
+
import_toast.Toast.Viewport,
|
|
574
|
+
{
|
|
575
|
+
className: "outline-none",
|
|
576
|
+
"data-slot": "toast-viewport-anchored",
|
|
577
|
+
children: toasts.map((toast) => {
|
|
578
|
+
const Icon = toast.type ? TOAST_ICONS[toast.type] : null;
|
|
579
|
+
const toastData = toast.data;
|
|
580
|
+
const tooltipStyle = toastData?.tooltipStyle ?? false;
|
|
581
|
+
const positionerProps = toast.positionerProps;
|
|
582
|
+
if (!positionerProps?.anchor) {
|
|
583
|
+
return null;
|
|
584
|
+
}
|
|
585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
586
|
+
import_toast.Toast.Positioner,
|
|
587
|
+
{
|
|
588
|
+
className: "z-50 max-w-[min(--spacing(64),var(--available-width))]",
|
|
589
|
+
"data-slot": "toast-positioner",
|
|
590
|
+
sideOffset: positionerProps.sideOffset ?? 4,
|
|
591
|
+
toast,
|
|
592
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
593
|
+
import_toast.Toast.Root,
|
|
594
|
+
{
|
|
595
|
+
className: cn(
|
|
596
|
+
"relative text-balance border bg-popover text-popover-foreground text-xs transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
|
|
597
|
+
tooltipStyle ? "rounded-md" : "rounded-lg",
|
|
598
|
+
upsertReplayClassName(toast)
|
|
599
|
+
),
|
|
600
|
+
...toastData?.rootProps,
|
|
601
|
+
"data-slot": "toast-popup",
|
|
602
|
+
toast,
|
|
603
|
+
children: tooltipStyle ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_toast.Toast.Content, { className: "pointer-events-auto px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_toast.Toast.Title, { "data-slot": "toast-title" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_toast.Toast.Content, { className: "pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm", children: [
|
|
604
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2", children: [
|
|
605
|
+
Icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
606
|
+
"div",
|
|
607
|
+
{
|
|
608
|
+
className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
609
|
+
"data-slot": "toast-icon",
|
|
610
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" })
|
|
611
|
+
}
|
|
612
|
+
),
|
|
613
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
|
|
614
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
615
|
+
import_toast.Toast.Title,
|
|
616
|
+
{
|
|
617
|
+
className: "font-medium",
|
|
618
|
+
"data-slot": "toast-title"
|
|
619
|
+
}
|
|
620
|
+
),
|
|
621
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
622
|
+
import_toast.Toast.Description,
|
|
623
|
+
{
|
|
624
|
+
className: "text-muted-foreground",
|
|
625
|
+
"data-slot": "toast-description"
|
|
626
|
+
}
|
|
627
|
+
)
|
|
628
|
+
] })
|
|
629
|
+
] }),
|
|
630
|
+
toast.actionProps && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
631
|
+
import_toast.Toast.Action,
|
|
632
|
+
{
|
|
633
|
+
className: buttonVariants({ size: "xs" }),
|
|
634
|
+
"data-slot": "toast-action",
|
|
635
|
+
children: toast.actionProps.children
|
|
636
|
+
}
|
|
637
|
+
)
|
|
638
|
+
] })
|
|
639
|
+
}
|
|
640
|
+
)
|
|
641
|
+
},
|
|
642
|
+
toast.id
|
|
643
|
+
);
|
|
644
|
+
})
|
|
645
|
+
}
|
|
646
|
+
) });
|
|
647
|
+
}
|
|
648
|
+
var toastManager = import_toast.Toast.createToastManager();
|
|
649
|
+
var anchoredToastManager = import_toast.Toast.createToastManager();
|
|
650
|
+
function ToastProvider({
|
|
651
|
+
children,
|
|
652
|
+
position = "bottom-right",
|
|
653
|
+
portalProps,
|
|
654
|
+
...props
|
|
655
|
+
}) {
|
|
656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_toast.Toast.Provider, { toastManager, ...props, children: [
|
|
657
|
+
children,
|
|
658
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Toasts, { portalProps, position })
|
|
659
|
+
] });
|
|
660
|
+
}
|
|
661
|
+
function AnchoredToastProvider({
|
|
662
|
+
children,
|
|
663
|
+
portalProps,
|
|
664
|
+
...props
|
|
665
|
+
}) {
|
|
666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_toast.Toast.Provider, { toastManager: anchoredToastManager, ...props, children: [
|
|
667
|
+
children,
|
|
668
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnchoredToasts, { portalProps })
|
|
669
|
+
] });
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
// src/hooks/use-copy-to-clipboard.ts
|
|
673
|
+
var import_react5 = require("react");
|
|
674
|
+
function useCopyToClipboard(options = {}) {
|
|
675
|
+
const { timeout = 2e3, onCopy } = options;
|
|
676
|
+
const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
|
|
677
|
+
const timeoutRef = (0, import_react5.useRef)(null);
|
|
678
|
+
const copyToClipboard = (0, import_react5.useCallback)(
|
|
679
|
+
async (value) => {
|
|
680
|
+
if (!value || typeof window === "undefined" || !navigator.clipboard) {
|
|
681
|
+
return false;
|
|
682
|
+
}
|
|
683
|
+
try {
|
|
684
|
+
if (timeoutRef.current) {
|
|
685
|
+
window.clearTimeout(timeoutRef.current);
|
|
686
|
+
}
|
|
687
|
+
await navigator.clipboard.writeText(value);
|
|
688
|
+
setIsCopied(true);
|
|
689
|
+
onCopy?.();
|
|
690
|
+
if (timeout > 0) {
|
|
691
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
692
|
+
setIsCopied(false);
|
|
693
|
+
}, timeout);
|
|
694
|
+
}
|
|
695
|
+
return true;
|
|
696
|
+
} catch (error) {
|
|
697
|
+
console.error("Failed to copy to clipboard", error);
|
|
698
|
+
return false;
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
[timeout, onCopy]
|
|
702
|
+
);
|
|
703
|
+
(0, import_react5.useEffect)(() => {
|
|
704
|
+
return () => {
|
|
705
|
+
if (timeoutRef.current) {
|
|
706
|
+
window.clearTimeout(timeoutRef.current);
|
|
707
|
+
}
|
|
708
|
+
};
|
|
709
|
+
}, []);
|
|
710
|
+
return {
|
|
711
|
+
copyToClipboard,
|
|
712
|
+
isCopied
|
|
713
|
+
};
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
// src/lib/utils/audio.ts
|
|
717
|
+
function playBeep(frequency, duration, type = "sine") {
|
|
718
|
+
if (typeof window === "undefined" || // biome-ignore lint/suspicious/noExplicitAny: window may not have webkitAudioContext
|
|
719
|
+
!window.AudioContext && !window.webkitAudioContext)
|
|
720
|
+
return;
|
|
721
|
+
try {
|
|
722
|
+
const AudioContext = (
|
|
723
|
+
// biome-ignore lint/suspicious/noExplicitAny: window may not have webkitAudioContext
|
|
724
|
+
window.AudioContext || window.webkitAudioContext
|
|
725
|
+
);
|
|
726
|
+
const ctx = new AudioContext();
|
|
727
|
+
const osc = ctx.createOscillator();
|
|
728
|
+
const gain = ctx.createGain();
|
|
729
|
+
osc.type = type;
|
|
730
|
+
osc.frequency.setValueAtTime(frequency, ctx.currentTime);
|
|
731
|
+
gain.gain.setValueAtTime(0.1, ctx.currentTime);
|
|
732
|
+
gain.gain.exponentialRampToValueAtTime(1e-3, ctx.currentTime + duration);
|
|
733
|
+
osc.connect(gain);
|
|
734
|
+
gain.connect(ctx.destination);
|
|
735
|
+
osc.start();
|
|
736
|
+
osc.stop(ctx.currentTime + duration);
|
|
737
|
+
} catch (_e) {
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
function tap() {
|
|
741
|
+
playBeep(400, 0.1);
|
|
742
|
+
}
|
|
743
|
+
function turn(direction) {
|
|
744
|
+
if (direction === "forward") {
|
|
745
|
+
playBeep(600, 0.1);
|
|
746
|
+
} else {
|
|
747
|
+
playBeep(300, 0.1);
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
function copy() {
|
|
751
|
+
playBeep(800, 0.15, "triangle");
|
|
752
|
+
}
|
|
753
|
+
function deny() {
|
|
754
|
+
playBeep(150, 0.2, "sawtooth");
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
// src/components/motion-primitives/text-morph.tsx
|
|
758
|
+
var import_react6 = require("motion/react");
|
|
759
|
+
var import_react7 = require("react");
|
|
760
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
761
|
+
function TextMorph({
|
|
762
|
+
children,
|
|
763
|
+
as: Component = "p",
|
|
764
|
+
className,
|
|
765
|
+
style,
|
|
766
|
+
variants,
|
|
767
|
+
transition
|
|
768
|
+
}) {
|
|
769
|
+
const uniqueId = (0, import_react7.useId)();
|
|
770
|
+
const characters = (0, import_react7.useMemo)(() => {
|
|
771
|
+
const charCounts = {};
|
|
772
|
+
return children.split("").map((char) => {
|
|
773
|
+
const lowerChar = char.toLowerCase();
|
|
774
|
+
charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
|
|
775
|
+
return {
|
|
776
|
+
id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
|
|
777
|
+
label: char === " " ? "\xA0" : char
|
|
778
|
+
};
|
|
779
|
+
});
|
|
780
|
+
}, [children, uniqueId]);
|
|
781
|
+
const defaultVariants = {
|
|
782
|
+
initial: { opacity: 0 },
|
|
783
|
+
animate: { opacity: 1 },
|
|
784
|
+
exit: { opacity: 0 }
|
|
785
|
+
};
|
|
786
|
+
const defaultTransition = {
|
|
787
|
+
type: "spring",
|
|
788
|
+
bounce: 0,
|
|
789
|
+
duration: 0.3
|
|
790
|
+
};
|
|
791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { className: cn(className), "aria-label": children, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.AnimatePresence, { mode: "popLayout", initial: false, children: characters.map((character) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
792
|
+
import_react6.motion.span,
|
|
793
|
+
{
|
|
794
|
+
layoutId: character.id,
|
|
795
|
+
className: "inline-block",
|
|
796
|
+
"aria-hidden": "true",
|
|
797
|
+
initial: "initial",
|
|
798
|
+
animate: "animate",
|
|
799
|
+
exit: "exit",
|
|
800
|
+
variants: variants || defaultVariants,
|
|
801
|
+
transition: transition || defaultTransition,
|
|
802
|
+
children: character.label
|
|
803
|
+
},
|
|
804
|
+
character.id
|
|
805
|
+
)) }) });
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
// src/components/shared/command-block.tsx
|
|
809
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
810
|
+
var SLIDE_SPRING = { type: "spring", stiffness: 520, damping: 34 };
|
|
811
|
+
var MORPH_EASE = { duration: 0.16, ease: "easeOut" };
|
|
812
|
+
function CopyMorphIcon({ copied }) {
|
|
813
|
+
const reduced = (0, import_react8.useReducedMotion)() ?? false;
|
|
814
|
+
const t = reduced ? { duration: 0 } : MORPH_EASE;
|
|
815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
816
|
+
"span",
|
|
817
|
+
{
|
|
818
|
+
"aria-hidden": "true",
|
|
819
|
+
className: "relative grid size-3.5 place-items-center",
|
|
820
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react8.AnimatePresence, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
821
|
+
import_react8.motion.svg,
|
|
822
|
+
{
|
|
823
|
+
"aria-hidden": "true",
|
|
824
|
+
width: "15",
|
|
825
|
+
height: "15",
|
|
826
|
+
viewBox: "0 0 16 16",
|
|
827
|
+
fill: "none",
|
|
828
|
+
className: "absolute text-foreground",
|
|
829
|
+
initial: { opacity: 0, scale: 0.8 },
|
|
830
|
+
animate: { opacity: 1, scale: 1 },
|
|
831
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
832
|
+
transition: t,
|
|
833
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
834
|
+
import_react8.motion.path,
|
|
835
|
+
{
|
|
836
|
+
d: "M1.83398 10.0625L6.00065 13.5L14.1673 2.5",
|
|
837
|
+
stroke: "currentColor",
|
|
838
|
+
strokeWidth: "1.25",
|
|
839
|
+
strokeLinecap: "round",
|
|
840
|
+
strokeLinejoin: "round",
|
|
841
|
+
initial: { pathLength: reduced ? 1 : 0 },
|
|
842
|
+
animate: { pathLength: 1 },
|
|
843
|
+
transition: reduced ? { duration: 0 } : { duration: 0.18, ease: "easeOut" }
|
|
844
|
+
}
|
|
845
|
+
)
|
|
846
|
+
},
|
|
847
|
+
"check"
|
|
848
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
849
|
+
import_react8.motion.svg,
|
|
850
|
+
{
|
|
851
|
+
"aria-hidden": "true",
|
|
852
|
+
width: "15",
|
|
853
|
+
height: "15",
|
|
854
|
+
viewBox: "0 0 16 16",
|
|
855
|
+
fill: "none",
|
|
856
|
+
className: "absolute",
|
|
857
|
+
initial: { opacity: 0, scale: 0.8 },
|
|
858
|
+
animate: { opacity: 1, scale: 1 },
|
|
859
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
860
|
+
transition: t,
|
|
861
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
862
|
+
"path",
|
|
863
|
+
{
|
|
864
|
+
d: "M10.1667 3.16634H12.8334V14.1663H3.16675V3.16634H5.83341M5.83341 1.83301H10.1667V4.83301H5.83341V1.83301Z",
|
|
865
|
+
stroke: "currentColor",
|
|
866
|
+
strokeWidth: "1.25",
|
|
867
|
+
strokeLinecap: "round",
|
|
868
|
+
strokeLinejoin: "round"
|
|
869
|
+
}
|
|
870
|
+
)
|
|
871
|
+
},
|
|
872
|
+
"copy"
|
|
873
|
+
) })
|
|
874
|
+
}
|
|
875
|
+
);
|
|
876
|
+
}
|
|
877
|
+
function CommandBlock({
|
|
878
|
+
items
|
|
879
|
+
}) {
|
|
880
|
+
const [active, setActive] = (0, import_react9.useState)(0);
|
|
881
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 2e3 });
|
|
882
|
+
const reduced = (0, import_react8.useReducedMotion)() ?? false;
|
|
883
|
+
const cur = items[active];
|
|
884
|
+
const copyButtonRef = (0, import_react9.useRef)(null);
|
|
885
|
+
const handleCopy = async () => {
|
|
886
|
+
const success = await copyToClipboard(cur.command);
|
|
887
|
+
if (success) {
|
|
888
|
+
tap();
|
|
889
|
+
anchoredToastManager.add({
|
|
890
|
+
title: "Copied!",
|
|
891
|
+
positionerProps: {
|
|
892
|
+
anchor: copyButtonRef.current,
|
|
893
|
+
sideOffset: 6
|
|
894
|
+
},
|
|
895
|
+
data: {
|
|
896
|
+
tooltipStyle: true
|
|
897
|
+
},
|
|
898
|
+
timeout: 2e3
|
|
899
|
+
});
|
|
900
|
+
} else {
|
|
901
|
+
deny();
|
|
902
|
+
anchoredToastManager.add({
|
|
903
|
+
title: "Failed to copy",
|
|
904
|
+
positionerProps: {
|
|
905
|
+
anchor: copyButtonRef.current,
|
|
906
|
+
sideOffset: 6
|
|
907
|
+
},
|
|
908
|
+
data: {
|
|
909
|
+
tooltipStyle: true
|
|
910
|
+
},
|
|
911
|
+
timeout: 2e3
|
|
912
|
+
});
|
|
913
|
+
}
|
|
914
|
+
};
|
|
915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "not-typeset mt-6 rounded-2xl border-0 bg-code overflow-hidden", children: [
|
|
916
|
+
items.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-0.5 px-3 pb-1.5 pt-3 justify-between", children: [
|
|
917
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center gap-0.5 ", children: items.map((it, i) => {
|
|
918
|
+
const isActive = i === active;
|
|
919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
920
|
+
"button",
|
|
921
|
+
{
|
|
922
|
+
type: "button",
|
|
923
|
+
onClick: () => setActive(i),
|
|
924
|
+
className: cn(
|
|
925
|
+
"relative cursor-pointer rounded-md px-1.5 py-0.5 font-mono outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
|
|
926
|
+
isActive ? "text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
927
|
+
),
|
|
928
|
+
children: [
|
|
929
|
+
isActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
930
|
+
import_react8.motion.span,
|
|
931
|
+
{
|
|
932
|
+
"aria-hidden": "true",
|
|
933
|
+
layoutId: "pkg-tab-active",
|
|
934
|
+
transition: reduced ? { duration: 0 } : SLIDE_SPRING,
|
|
935
|
+
className: "absolute inset-0 rounded-md bg-accent"
|
|
936
|
+
}
|
|
937
|
+
),
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "relative", children: it.id })
|
|
939
|
+
]
|
|
940
|
+
},
|
|
941
|
+
it.id
|
|
942
|
+
);
|
|
943
|
+
}) }),
|
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
945
|
+
Button,
|
|
946
|
+
{
|
|
947
|
+
ref: copyButtonRef,
|
|
948
|
+
variant: "ghost",
|
|
949
|
+
size: "icon",
|
|
950
|
+
onClick: handleCopy,
|
|
951
|
+
className: "ml-auto text-muted-foreground hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring",
|
|
952
|
+
title: "Copy to clipboard",
|
|
953
|
+
"aria-label": "Copy install command",
|
|
954
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CopyMorphIcon, { copied: isCopied })
|
|
955
|
+
}
|
|
956
|
+
)
|
|
957
|
+
] }),
|
|
958
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center", children: [
|
|
959
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { className: "flex items-center overflow-x-auto px-5 py-4 font-mono text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextMorph, { children: cur.command }) }) }) }),
|
|
960
|
+
items.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
961
|
+
Button,
|
|
962
|
+
{
|
|
963
|
+
ref: copyButtonRef,
|
|
964
|
+
variant: "ghost",
|
|
965
|
+
size: "icon-sm",
|
|
966
|
+
onClick: handleCopy,
|
|
967
|
+
className: "mr-2 text-muted-foreground hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring",
|
|
968
|
+
title: "Copy to clipboard",
|
|
969
|
+
"aria-label": "Copy install command",
|
|
970
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CopyMorphIcon, { copied: isCopied })
|
|
971
|
+
}
|
|
972
|
+
)
|
|
973
|
+
] })
|
|
974
|
+
] });
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
// src/components/content/code-block.tsx
|
|
978
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
979
|
+
function CodeBlock({ html, code, className }) {
|
|
980
|
+
const buttonRef = React.useRef(null);
|
|
981
|
+
const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1800 });
|
|
982
|
+
async function handleCopy() {
|
|
983
|
+
const success = await copyToClipboard(code);
|
|
984
|
+
if (success) {
|
|
985
|
+
copy();
|
|
986
|
+
anchoredToastManager.add({
|
|
987
|
+
title: "Copied!",
|
|
988
|
+
positionerProps: {
|
|
989
|
+
anchor: buttonRef.current,
|
|
990
|
+
sideOffset: 6
|
|
991
|
+
},
|
|
992
|
+
data: {
|
|
993
|
+
tooltipStyle: true
|
|
994
|
+
},
|
|
995
|
+
timeout: 2e3
|
|
996
|
+
});
|
|
997
|
+
} else {
|
|
998
|
+
anchoredToastManager.add({
|
|
999
|
+
title: "Failed to copy",
|
|
1000
|
+
positionerProps: {
|
|
1001
|
+
anchor: buttonRef.current,
|
|
1002
|
+
sideOffset: 6
|
|
1003
|
+
},
|
|
1004
|
+
data: {
|
|
1005
|
+
tooltipStyle: true
|
|
1006
|
+
},
|
|
1007
|
+
timeout: 2e3
|
|
1008
|
+
});
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1012
|
+
"div",
|
|
1013
|
+
{
|
|
1014
|
+
className: cn(
|
|
1015
|
+
"group relative mt-6 overflow-hidden rounded-xl not-typeset",
|
|
1016
|
+
"bg-code",
|
|
1017
|
+
"transition-colors",
|
|
1018
|
+
className
|
|
1019
|
+
),
|
|
1020
|
+
children: [
|
|
1021
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1022
|
+
Button,
|
|
1023
|
+
{
|
|
1024
|
+
ref: buttonRef,
|
|
1025
|
+
variant: "ghost",
|
|
1026
|
+
size: "icon-xs",
|
|
1027
|
+
onClick: handleCopy,
|
|
1028
|
+
className: cn(
|
|
1029
|
+
"absolute right-3 top-3 z-20 rounded-lg",
|
|
1030
|
+
"bg-transparent",
|
|
1031
|
+
"text-muted-foreground",
|
|
1032
|
+
"opacity-0",
|
|
1033
|
+
"translate-y-1",
|
|
1034
|
+
"transition-all duration-200",
|
|
1035
|
+
"group-hover:translate-y-0",
|
|
1036
|
+
"group-hover:opacity-100",
|
|
1037
|
+
"hover:bg-code-foreground/10",
|
|
1038
|
+
"hover:text-code-foreground",
|
|
1039
|
+
"focus-visible:translate-y-0",
|
|
1040
|
+
"focus-visible:opacity-100"
|
|
1041
|
+
),
|
|
1042
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyMorphIcon, { copied: isCopied })
|
|
1043
|
+
}
|
|
1044
|
+
),
|
|
1045
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1046
|
+
"div",
|
|
1047
|
+
{
|
|
1048
|
+
className: cn(
|
|
1049
|
+
"[&_pre]:m-0",
|
|
1050
|
+
"[&_pre]:overflow-x-auto",
|
|
1051
|
+
"[&_pre]:bg-transparent!",
|
|
1052
|
+
"[&_pre]:px-5",
|
|
1053
|
+
"[&_pre]:py-4",
|
|
1054
|
+
"[&_pre]:font-mono",
|
|
1055
|
+
"[&_pre]:leading-relaxed",
|
|
1056
|
+
"[&_code]:bg-transparent!",
|
|
1057
|
+
"[&_code]:p-0",
|
|
1058
|
+
"[&_code]:font-inherit",
|
|
1059
|
+
"[&_.line]:min-h-6",
|
|
1060
|
+
"[&_pre::-webkit-scrollbar]:h-2",
|
|
1061
|
+
"[&_pre::-webkit-scrollbar-track]:bg-transparent",
|
|
1062
|
+
"[&_pre::-webkit-scrollbar-thumb]:rounded-full",
|
|
1063
|
+
"[&_pre::-webkit-scrollbar-thumb]:bg-code-foreground/10",
|
|
1064
|
+
"[&_pre::-webkit-scrollbar-thumb:hover]:bg-code-foreground/20"
|
|
1065
|
+
),
|
|
1066
|
+
dangerouslySetInnerHTML: {
|
|
1067
|
+
__html: html
|
|
1068
|
+
}
|
|
1069
|
+
}
|
|
1070
|
+
)
|
|
1071
|
+
]
|
|
1072
|
+
}
|
|
1073
|
+
);
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
// src/components/content/docs-content.tsx
|
|
1077
|
+
var import_react13 = require("motion/react");
|
|
1078
|
+
|
|
1079
|
+
// src/components/shared/scroll-fade.tsx
|
|
1080
|
+
var import_react10 = require("react");
|
|
1081
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1082
|
+
function ScrollFade() {
|
|
1083
|
+
const [visible, setVisible] = (0, import_react10.useState)(false);
|
|
1084
|
+
(0, import_react10.useEffect)(() => {
|
|
1085
|
+
const handleScroll = () => setVisible(window.scrollY > 50);
|
|
1086
|
+
handleScroll();
|
|
1087
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
1088
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
1089
|
+
}, []);
|
|
1090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1091
|
+
"div",
|
|
1092
|
+
{
|
|
1093
|
+
className: `pointer-events-none fixed inset-x-0 top-0 z-(--z-scroll-fade) h-20 bg-gradient-to-b from-background to-transparent transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"}`
|
|
1094
|
+
}
|
|
1095
|
+
);
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
// src/components/motion-primitives/text-effect.tsx
|
|
1099
|
+
var import_react11 = require("motion/react");
|
|
1100
|
+
var import_react12 = __toESM(require("react"));
|
|
1101
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1102
|
+
var defaultStaggerTimes = {
|
|
1103
|
+
char: 0.03,
|
|
1104
|
+
word: 0.05,
|
|
1105
|
+
line: 0.1
|
|
1106
|
+
};
|
|
1107
|
+
var defaultContainerVariants = {
|
|
1108
|
+
hidden: { opacity: 0 },
|
|
1109
|
+
visible: {
|
|
1110
|
+
opacity: 1,
|
|
1111
|
+
transition: {
|
|
1112
|
+
staggerChildren: 0.05
|
|
1113
|
+
}
|
|
1114
|
+
},
|
|
1115
|
+
exit: {
|
|
1116
|
+
transition: { staggerChildren: 0.05, staggerDirection: -1 }
|
|
1117
|
+
}
|
|
1118
|
+
};
|
|
1119
|
+
var defaultItemVariants = {
|
|
1120
|
+
hidden: { opacity: 0 },
|
|
1121
|
+
visible: {
|
|
1122
|
+
opacity: 1
|
|
1123
|
+
},
|
|
1124
|
+
exit: { opacity: 0 }
|
|
1125
|
+
};
|
|
1126
|
+
var presetVariants = {
|
|
1127
|
+
blur: {
|
|
1128
|
+
container: defaultContainerVariants,
|
|
1129
|
+
item: {
|
|
1130
|
+
hidden: { opacity: 0, filter: "blur(12px)" },
|
|
1131
|
+
visible: { opacity: 1, filter: "blur(0px)" },
|
|
1132
|
+
exit: { opacity: 0, filter: "blur(12px)" }
|
|
1133
|
+
}
|
|
1134
|
+
},
|
|
1135
|
+
"fade-in-blur": {
|
|
1136
|
+
container: defaultContainerVariants,
|
|
1137
|
+
item: {
|
|
1138
|
+
hidden: { opacity: 0, y: 8, filter: "blur(12px)" },
|
|
1139
|
+
visible: { opacity: 1, y: 0, filter: "blur(0px)" },
|
|
1140
|
+
exit: { opacity: 0, y: 8, filter: "blur(12px)" }
|
|
1141
|
+
}
|
|
1142
|
+
},
|
|
1143
|
+
scale: {
|
|
1144
|
+
container: defaultContainerVariants,
|
|
1145
|
+
item: {
|
|
1146
|
+
hidden: { opacity: 0, scale: 0.95 },
|
|
1147
|
+
visible: { opacity: 1, scale: 1 },
|
|
1148
|
+
exit: { opacity: 0, scale: 0.95 }
|
|
1149
|
+
}
|
|
1150
|
+
},
|
|
1151
|
+
fade: {
|
|
1152
|
+
container: defaultContainerVariants,
|
|
1153
|
+
item: {
|
|
1154
|
+
hidden: { opacity: 0 },
|
|
1155
|
+
visible: { opacity: 1 },
|
|
1156
|
+
exit: { opacity: 0 }
|
|
1157
|
+
}
|
|
1158
|
+
},
|
|
1159
|
+
slide: {
|
|
1160
|
+
container: defaultContainerVariants,
|
|
1161
|
+
item: {
|
|
1162
|
+
hidden: { opacity: 0, y: 8 },
|
|
1163
|
+
visible: { opacity: 1, y: 0 },
|
|
1164
|
+
exit: { opacity: 0, y: 8 }
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
};
|
|
1168
|
+
var AnimationComponent = import_react12.default.memo(({ segment, variants, per, segmentWrapperClassName }) => {
|
|
1169
|
+
const content = per === "line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.motion.span, { variants, className: "block", children: segment }) : per === "word" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1170
|
+
import_react11.motion.span,
|
|
1171
|
+
{
|
|
1172
|
+
"aria-hidden": "true",
|
|
1173
|
+
variants,
|
|
1174
|
+
className: "inline-block whitespace-pre",
|
|
1175
|
+
children: segment
|
|
1176
|
+
}
|
|
1177
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.motion.span, { className: "inline-block whitespace-pre", children: segment.split("").map((char, charIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1178
|
+
import_react11.motion.span,
|
|
1179
|
+
{
|
|
1180
|
+
"aria-hidden": "true",
|
|
1181
|
+
variants,
|
|
1182
|
+
className: "inline-block whitespace-pre",
|
|
1183
|
+
children: char
|
|
1184
|
+
},
|
|
1185
|
+
`char-${charIndex}`
|
|
1186
|
+
)) });
|
|
1187
|
+
if (!segmentWrapperClassName) {
|
|
1188
|
+
return content;
|
|
1189
|
+
}
|
|
1190
|
+
const defaultWrapperClassName = per === "line" ? "block" : "inline-block";
|
|
1191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(defaultWrapperClassName, segmentWrapperClassName), children: content });
|
|
1192
|
+
});
|
|
1193
|
+
AnimationComponent.displayName = "AnimationComponent";
|
|
1194
|
+
var splitText = (text, per) => {
|
|
1195
|
+
if (per === "line") return text.split("\n");
|
|
1196
|
+
return text.split(/(\s+)/);
|
|
1197
|
+
};
|
|
1198
|
+
var hasTransition = (variant) => {
|
|
1199
|
+
if (!variant) return false;
|
|
1200
|
+
return typeof variant === "object" && "transition" in variant;
|
|
1201
|
+
};
|
|
1202
|
+
var createVariantsWithTransition = (baseVariants, transition) => {
|
|
1203
|
+
if (!transition) return baseVariants;
|
|
1204
|
+
const { exit: _, ...mainTransition } = transition;
|
|
1205
|
+
return {
|
|
1206
|
+
...baseVariants,
|
|
1207
|
+
visible: {
|
|
1208
|
+
...baseVariants.visible,
|
|
1209
|
+
transition: {
|
|
1210
|
+
...hasTransition(baseVariants.visible) ? baseVariants.visible.transition : {},
|
|
1211
|
+
...mainTransition
|
|
1212
|
+
}
|
|
1213
|
+
},
|
|
1214
|
+
exit: {
|
|
1215
|
+
...baseVariants.exit,
|
|
1216
|
+
transition: {
|
|
1217
|
+
...hasTransition(baseVariants.exit) ? baseVariants.exit.transition : {},
|
|
1218
|
+
...mainTransition,
|
|
1219
|
+
staggerDirection: -1
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
};
|
|
1223
|
+
};
|
|
1224
|
+
function TextEffect({
|
|
1225
|
+
children,
|
|
1226
|
+
per = "word",
|
|
1227
|
+
as = "p",
|
|
1228
|
+
variants,
|
|
1229
|
+
className,
|
|
1230
|
+
preset = "fade",
|
|
1231
|
+
delay = 0,
|
|
1232
|
+
speedReveal = 1,
|
|
1233
|
+
speedSegment = 1,
|
|
1234
|
+
trigger = true,
|
|
1235
|
+
onAnimationComplete,
|
|
1236
|
+
onAnimationStart,
|
|
1237
|
+
segmentWrapperClassName,
|
|
1238
|
+
containerTransition,
|
|
1239
|
+
segmentTransition,
|
|
1240
|
+
style
|
|
1241
|
+
}) {
|
|
1242
|
+
const segments = splitText(children, per);
|
|
1243
|
+
const MotionTag = import_react11.motion[as];
|
|
1244
|
+
const baseVariants = preset ? presetVariants[preset] : { container: defaultContainerVariants, item: defaultItemVariants };
|
|
1245
|
+
const stagger = defaultStaggerTimes[per] / speedReveal;
|
|
1246
|
+
const baseDuration = 0.3 / speedSegment;
|
|
1247
|
+
const customStagger = hasTransition(variants?.container?.visible ?? {}) ? (variants?.container?.visible).transition?.staggerChildren : void 0;
|
|
1248
|
+
const customDelay = hasTransition(variants?.container?.visible ?? {}) ? (variants?.container?.visible).transition?.delayChildren : void 0;
|
|
1249
|
+
const computedVariants = {
|
|
1250
|
+
container: createVariantsWithTransition(
|
|
1251
|
+
variants?.container || baseVariants.container,
|
|
1252
|
+
{
|
|
1253
|
+
staggerChildren: customStagger ?? stagger,
|
|
1254
|
+
delayChildren: customDelay ?? delay,
|
|
1255
|
+
...containerTransition,
|
|
1256
|
+
exit: {
|
|
1257
|
+
staggerChildren: customStagger ?? stagger,
|
|
1258
|
+
staggerDirection: -1
|
|
1259
|
+
}
|
|
1260
|
+
}
|
|
1261
|
+
),
|
|
1262
|
+
item: createVariantsWithTransition(variants?.item || baseVariants.item, {
|
|
1263
|
+
duration: baseDuration,
|
|
1264
|
+
...segmentTransition
|
|
1265
|
+
})
|
|
1266
|
+
};
|
|
1267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.AnimatePresence, { mode: "popLayout", children: trigger && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1268
|
+
MotionTag,
|
|
1269
|
+
{
|
|
1270
|
+
initial: "hidden",
|
|
1271
|
+
animate: "visible",
|
|
1272
|
+
exit: "exit",
|
|
1273
|
+
variants: computedVariants.container,
|
|
1274
|
+
className,
|
|
1275
|
+
onAnimationComplete,
|
|
1276
|
+
onAnimationStart,
|
|
1277
|
+
style,
|
|
1278
|
+
children: [
|
|
1279
|
+
per !== "line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children }) : null,
|
|
1280
|
+
segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1281
|
+
AnimationComponent,
|
|
1282
|
+
{
|
|
1283
|
+
segment,
|
|
1284
|
+
variants: computedVariants.item,
|
|
1285
|
+
per,
|
|
1286
|
+
segmentWrapperClassName
|
|
1287
|
+
},
|
|
1288
|
+
`${per}-${index}-${segment}`
|
|
1289
|
+
))
|
|
1290
|
+
]
|
|
1291
|
+
}
|
|
1292
|
+
) });
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
// src/components/content/docs-content.tsx
|
|
1296
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1297
|
+
function DocsCol({ children }) {
|
|
1298
|
+
const reduced = (0, import_react13.useReducedMotion)() ?? false;
|
|
1299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1300
|
+
import_react13.motion.div,
|
|
1301
|
+
{
|
|
1302
|
+
className: "mx-auto w-full",
|
|
1303
|
+
initial: reduced ? false : "hidden",
|
|
1304
|
+
whileInView: "show",
|
|
1305
|
+
viewport: { once: true, margin: "0px 0px -64px 0px" },
|
|
1306
|
+
variants: colReveal,
|
|
1307
|
+
children
|
|
1308
|
+
}
|
|
1309
|
+
);
|
|
1310
|
+
}
|
|
1311
|
+
function DocsFrame({ children }) {
|
|
1312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative min-h-screen overflow-x-clip pb-24", children: [
|
|
1313
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollFade, {}),
|
|
1314
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `.docs-code .shiki{margin:0;padding:16px 18px;overflow-x:auto;line-height:1.65;background:transparent !important;font-size:var(--typeset-size)}.docs-code .shiki code{background:transparent;padding:0}` }),
|
|
1315
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("main", { className: "typeset typeset-docs mx-auto max-w-(--layout-content-width) w-full", children }) }) })
|
|
1316
|
+
] });
|
|
1317
|
+
}
|
|
1318
|
+
function DocsHeader({
|
|
1319
|
+
title,
|
|
1320
|
+
date,
|
|
1321
|
+
children
|
|
1322
|
+
}) {
|
|
1323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", { id: "docs-header", className: "scroll-mt-24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DocsCol, { children: [
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "tracking-tight mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextEffect, { preset: "fade-in-blur", per: "word", children: title }) }),
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-muted-foreground/60 mb-8 mt-0", children: date }),
|
|
1326
|
+
children
|
|
1327
|
+
] }) });
|
|
1328
|
+
}
|
|
1329
|
+
function DocsOverview({ children }) {
|
|
1330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", { id: "overview", className: "scroll-mt-24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DocsCol, { children }) });
|
|
1331
|
+
}
|
|
1332
|
+
function DocsSection({
|
|
1333
|
+
id,
|
|
1334
|
+
title,
|
|
1335
|
+
children
|
|
1336
|
+
}) {
|
|
1337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", { id, className: "scroll-mt-24 mt-12", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DocsCol, { children: [
|
|
1338
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { children: title }),
|
|
1339
|
+
children
|
|
1340
|
+
] }) });
|
|
1341
|
+
}
|
|
1342
|
+
function DocsInstallation({
|
|
1343
|
+
install
|
|
1344
|
+
}) {
|
|
1345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DocsSection, { id: "installation", title: "Installation", children: [
|
|
1346
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "Install the package using your preferred package manager:" }),
|
|
1347
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CommandBlock, { items: install })
|
|
1348
|
+
] });
|
|
1349
|
+
}
|
|
1350
|
+
function DocsCode({ code, html }) {
|
|
1351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CodeBlock, { code, html });
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
// src/components/layout/docs-layout.tsx
|
|
1355
|
+
var import_react_icons2 = require("@radix-ui/react-icons");
|
|
1356
|
+
var import_react16 = require("motion/react");
|
|
1357
|
+
var import_link = __toESM(require("next/link"));
|
|
1358
|
+
var import_navigation = require("next/navigation");
|
|
1359
|
+
var React3 = __toESM(require("react"));
|
|
1360
|
+
|
|
1361
|
+
// src/components/motion-primitives/sliding-number.tsx
|
|
1362
|
+
var import_react14 = require("motion/react");
|
|
1363
|
+
var import_react15 = require("react");
|
|
1364
|
+
var import_react_use_measure = __toESM(require("react-use-measure"));
|
|
1365
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1366
|
+
var TRANSITION = {
|
|
1367
|
+
type: "spring",
|
|
1368
|
+
bounce: 0,
|
|
1369
|
+
duration: 0.3
|
|
1370
|
+
};
|
|
1371
|
+
function Digit({ value, place }) {
|
|
1372
|
+
const valueRoundedToPlace = Math.floor(value / place) % 10;
|
|
1373
|
+
const initial = (0, import_react14.motionValue)(valueRoundedToPlace);
|
|
1374
|
+
const animatedValue = (0, import_react14.useSpring)(initial, TRANSITION);
|
|
1375
|
+
(0, import_react15.useEffect)(() => {
|
|
1376
|
+
animatedValue.set(valueRoundedToPlace);
|
|
1377
|
+
}, [animatedValue, valueRoundedToPlace]);
|
|
1378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums", children: [
|
|
1379
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "invisible", children: "0" }),
|
|
1380
|
+
Array.from({ length: 10 }, (_, i) => (
|
|
1381
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: order is static
|
|
1382
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlidingDigitNumber, { mv: animatedValue, number: i }, `digit-${i}`)
|
|
1383
|
+
))
|
|
1384
|
+
] });
|
|
1385
|
+
}
|
|
1386
|
+
function SlidingDigitNumber({
|
|
1387
|
+
mv,
|
|
1388
|
+
number
|
|
1389
|
+
}) {
|
|
1390
|
+
const uniqueId = (0, import_react15.useId)();
|
|
1391
|
+
const [ref, bounds] = (0, import_react_use_measure.default)();
|
|
1392
|
+
const y = (0, import_react14.useTransform)(mv, (latest) => {
|
|
1393
|
+
if (!bounds.height) return 0;
|
|
1394
|
+
const placeValue = latest % 10;
|
|
1395
|
+
const offset = (10 + number - placeValue) % 10;
|
|
1396
|
+
let memo = offset * bounds.height;
|
|
1397
|
+
if (offset > 5) {
|
|
1398
|
+
memo -= 10 * bounds.height;
|
|
1399
|
+
}
|
|
1400
|
+
return memo;
|
|
1401
|
+
});
|
|
1402
|
+
if (!bounds.height) {
|
|
1403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ref, className: "invisible absolute", children: number });
|
|
1404
|
+
}
|
|
1405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1406
|
+
import_react14.motion.span,
|
|
1407
|
+
{
|
|
1408
|
+
style: { y },
|
|
1409
|
+
layoutId: `${uniqueId}-${number}`,
|
|
1410
|
+
className: "absolute inset-0 flex items-center justify-center",
|
|
1411
|
+
transition: TRANSITION,
|
|
1412
|
+
ref,
|
|
1413
|
+
children: number
|
|
1414
|
+
}
|
|
1415
|
+
);
|
|
1416
|
+
}
|
|
1417
|
+
function SlidingNumber({
|
|
1418
|
+
value,
|
|
1419
|
+
padStart = false,
|
|
1420
|
+
decimalSeparator = "."
|
|
1421
|
+
}) {
|
|
1422
|
+
const absValue = Math.abs(value);
|
|
1423
|
+
const [integerPart, decimalPart] = absValue.toString().split(".");
|
|
1424
|
+
const integerValue = parseInt(integerPart, 10);
|
|
1425
|
+
const paddedInteger = padStart && integerValue < 10 ? `0${integerPart}` : integerPart;
|
|
1426
|
+
const integerDigits = paddedInteger.split("");
|
|
1427
|
+
const integerPlaces = integerDigits.map(
|
|
1428
|
+
(_, i) => 10 ** (integerDigits.length - i - 1)
|
|
1429
|
+
);
|
|
1430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center", children: [
|
|
1431
|
+
value < 0 && "-",
|
|
1432
|
+
integerDigits.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1433
|
+
Digit,
|
|
1434
|
+
{
|
|
1435
|
+
value: integerValue,
|
|
1436
|
+
place: integerPlaces[index]
|
|
1437
|
+
},
|
|
1438
|
+
`pos-${integerPlaces[index]}`
|
|
1439
|
+
)),
|
|
1440
|
+
decimalPart && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
1441
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: decimalSeparator }),
|
|
1442
|
+
decimalPart.split("").map((_, index) => {
|
|
1443
|
+
const place = 10 ** (decimalPart.length - index - 1);
|
|
1444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1445
|
+
Digit,
|
|
1446
|
+
{
|
|
1447
|
+
value: parseInt(decimalPart, 10),
|
|
1448
|
+
place
|
|
1449
|
+
},
|
|
1450
|
+
`decimal-${place}`
|
|
1451
|
+
);
|
|
1452
|
+
})
|
|
1453
|
+
] })
|
|
1454
|
+
] });
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
// src/components/layout/docs-layout.tsx
|
|
1458
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1459
|
+
function DocsLayout({
|
|
1460
|
+
children,
|
|
1461
|
+
links,
|
|
1462
|
+
indexUrl = "/",
|
|
1463
|
+
indexLabel = "Index",
|
|
1464
|
+
header
|
|
1465
|
+
}) {
|
|
1466
|
+
const pathname = (0, import_navigation.usePathname)();
|
|
1467
|
+
const [activeHash, setActiveHash] = React3.useState("");
|
|
1468
|
+
const { scrollYProgress } = (0, import_react16.useScroll)();
|
|
1469
|
+
const [progress, setProgress] = React3.useState(0);
|
|
1470
|
+
(0, import_react16.useMotionValueEvent)(scrollYProgress, "change", (latest) => {
|
|
1471
|
+
setProgress(Math.round(latest * 100));
|
|
1472
|
+
});
|
|
1473
|
+
React3.useEffect(() => {
|
|
1474
|
+
const currentPathLinks = links.flatMap(
|
|
1475
|
+
(g) => g.items.filter((i) => i.isAnchor && i.url.startsWith(pathname))
|
|
1476
|
+
);
|
|
1477
|
+
const sections = currentPathLinks.map((i) => i.url.split("#")[1]);
|
|
1478
|
+
if (!sections.length) {
|
|
1479
|
+
setActiveHash("");
|
|
1480
|
+
return;
|
|
1481
|
+
}
|
|
1482
|
+
const observerOptions = {
|
|
1483
|
+
root: null,
|
|
1484
|
+
rootMargin: "-20% 0px -60% 0px",
|
|
1485
|
+
// Trigger when the section occupies the main focal area
|
|
1486
|
+
threshold: 0
|
|
1487
|
+
};
|
|
1488
|
+
const observer = new IntersectionObserver((entries) => {
|
|
1489
|
+
for (const entry of entries) {
|
|
1490
|
+
if (entry.isIntersecting) {
|
|
1491
|
+
setActiveHash(`#${entry.target.id}`);
|
|
1492
|
+
}
|
|
1493
|
+
}
|
|
1494
|
+
}, observerOptions);
|
|
1495
|
+
for (const id of sections) {
|
|
1496
|
+
if (id) {
|
|
1497
|
+
const el = document.getElementById(id);
|
|
1498
|
+
if (el) observer.observe(el);
|
|
1499
|
+
}
|
|
1500
|
+
}
|
|
1501
|
+
if (typeof window !== "undefined" && window.location.hash) {
|
|
1502
|
+
setActiveHash(window.location.hash);
|
|
1503
|
+
} else {
|
|
1504
|
+
setActiveHash(`#${sections[0]}`);
|
|
1505
|
+
}
|
|
1506
|
+
return () => {
|
|
1507
|
+
observer.disconnect();
|
|
1508
|
+
};
|
|
1509
|
+
}, [links, pathname]);
|
|
1510
|
+
const handleAnchorClick = (e, url) => {
|
|
1511
|
+
if (!url.includes("#")) return;
|
|
1512
|
+
const hash = url.split("#")[1];
|
|
1513
|
+
const element = document.getElementById(hash);
|
|
1514
|
+
if (element && url.startsWith(pathname)) {
|
|
1515
|
+
e.preventDefault();
|
|
1516
|
+
element.scrollIntoView({ behavior: "smooth" });
|
|
1517
|
+
window.history.pushState(null, "", `#${hash}`);
|
|
1518
|
+
setActiveHash(`#${hash}`);
|
|
1519
|
+
}
|
|
1520
|
+
};
|
|
1521
|
+
const isLinkActive = (url, isAnchor) => {
|
|
1522
|
+
if (isAnchor) {
|
|
1523
|
+
if (!url.startsWith(pathname)) return false;
|
|
1524
|
+
const hash = url.split("#")[1];
|
|
1525
|
+
if (activeHash) {
|
|
1526
|
+
return activeHash === `#${hash}`;
|
|
1527
|
+
}
|
|
1528
|
+
return false;
|
|
1529
|
+
}
|
|
1530
|
+
return pathname === url;
|
|
1531
|
+
};
|
|
1532
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1533
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollFade, {}),
|
|
1534
|
+
header,
|
|
1535
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mx-auto w-full max-w-(--layout-max-width) px-6 py-12 md:py-24 flex flex-col md:flex-row gap-10 md:gap-16", children: [
|
|
1536
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("aside", { className: "w-full md:w-48 shrink-0 md:sticky md:top-24 md:self-start flex flex-col gap-6 md:gap-8", children: [
|
|
1537
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1539
|
+
import_link.default,
|
|
1540
|
+
{
|
|
1541
|
+
href: indexUrl,
|
|
1542
|
+
className: "text-sm text-muted-foreground hover:text-foreground flex items-center gap-1.5 transition-opacity duration-200 select-none opacity-60 hover:opacity-100",
|
|
1543
|
+
children: [
|
|
1544
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons2.ArrowLeftIcon, { className: "size-3.5" }),
|
|
1545
|
+
indexLabel
|
|
1546
|
+
]
|
|
1547
|
+
}
|
|
1548
|
+
),
|
|
1549
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-xs font-mono text-muted-foreground opacity-50 flex items-center gap-0.5", children: [
|
|
1550
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SlidingNumber, { value: progress }),
|
|
1551
|
+
"%"
|
|
1552
|
+
] })
|
|
1553
|
+
] }),
|
|
1554
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-row flex-wrap gap-x-6 gap-y-2 md:flex-col md:gap-y-4", children: links.map((group) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col gap-1.5 md:gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "flex flex-row flex-wrap gap-x-1 gap-y-1 md:flex-col md:gap-y-1", children: group.items.map((link) => {
|
|
1555
|
+
const active = isLinkActive(link.url, link.isAnchor);
|
|
1556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1557
|
+
import_link.default,
|
|
1558
|
+
{
|
|
1559
|
+
href: link.url,
|
|
1560
|
+
onClick: (e) => handleAnchorClick(e, link.url),
|
|
1561
|
+
className: `relative text-sm transition-colors duration-200 px-2 py-1.5 -ml-2 rounded-md ${active ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground"}`,
|
|
1562
|
+
children: [
|
|
1563
|
+
active && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1564
|
+
import_react16.motion.div,
|
|
1565
|
+
{
|
|
1566
|
+
layoutId: "activeDocsLinkBg",
|
|
1567
|
+
className: "absolute inset-0 bg-secondary/50 rounded-md",
|
|
1568
|
+
transition: {
|
|
1569
|
+
type: "spring",
|
|
1570
|
+
duration: 0.3,
|
|
1571
|
+
bounce: 0
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
),
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "relative z-10", children: link.title })
|
|
1576
|
+
]
|
|
1577
|
+
},
|
|
1578
|
+
link.title
|
|
1579
|
+
);
|
|
1580
|
+
}) }) }, group.group)) })
|
|
1581
|
+
] }),
|
|
1582
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("main", { className: "flex-1 min-w-0", children })
|
|
1583
|
+
] })
|
|
1584
|
+
] });
|
|
1585
|
+
}
|
|
1586
|
+
function DocsNavbar({
|
|
1587
|
+
logo,
|
|
1588
|
+
right
|
|
1589
|
+
}) {
|
|
1590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "sticky top-4 z-(--z-header) mx-auto flex w-full max-w-(--layout-max-width) items-center justify-between px-(--layout-padding) py-3", children: [
|
|
1591
|
+
logo,
|
|
1592
|
+
right
|
|
1593
|
+
] });
|
|
1594
|
+
}
|
|
1595
|
+
|
|
1596
|
+
// src/components/layout/site-header.tsx
|
|
1597
|
+
var import_react_icons4 = require("@radix-ui/react-icons");
|
|
1598
|
+
var import_react21 = require("motion/react");
|
|
1599
|
+
var import_link2 = __toESM(require("next/link"));
|
|
1600
|
+
var import_navigation2 = require("next/navigation");
|
|
1601
|
+
|
|
1602
|
+
// src/components/layout/theme-switcher.tsx
|
|
1603
|
+
var import_react_icons3 = require("@radix-ui/react-icons");
|
|
1604
|
+
var import_next_themes = require("next-themes");
|
|
1605
|
+
var import_react18 = require("react");
|
|
1606
|
+
|
|
1607
|
+
// src/components/motion-primitives/morph-icon.tsx
|
|
1608
|
+
var import_react17 = require("motion/react");
|
|
1609
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1610
|
+
function MorphIcon({
|
|
1611
|
+
isActive,
|
|
1612
|
+
activeIcon,
|
|
1613
|
+
inactiveIcon,
|
|
1614
|
+
className,
|
|
1615
|
+
variant = "rotate"
|
|
1616
|
+
}) {
|
|
1617
|
+
const variants = {
|
|
1618
|
+
scale: {
|
|
1619
|
+
initial: { opacity: 0, scale: 0.95 },
|
|
1620
|
+
animate: { opacity: 1, scale: 1 },
|
|
1621
|
+
exit: { opacity: 0, scale: 0.95 }
|
|
1622
|
+
},
|
|
1623
|
+
rotate: {
|
|
1624
|
+
initial: { opacity: 0, rotate: -90, scale: 0.95 },
|
|
1625
|
+
animate: { opacity: 1, rotate: 0, scale: 1 },
|
|
1626
|
+
exit: { opacity: 0, rotate: 90, scale: 0.95 }
|
|
1627
|
+
},
|
|
1628
|
+
slide: {
|
|
1629
|
+
initial: { opacity: 0, y: -10 },
|
|
1630
|
+
animate: { opacity: 1, y: 0 },
|
|
1631
|
+
exit: { opacity: 0, y: 10 }
|
|
1632
|
+
}
|
|
1633
|
+
};
|
|
1634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react17.AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1635
|
+
import_react17.motion.span,
|
|
1636
|
+
{
|
|
1637
|
+
initial: "initial",
|
|
1638
|
+
animate: "animate",
|
|
1639
|
+
exit: "exit",
|
|
1640
|
+
variants: variants[variant],
|
|
1641
|
+
transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] },
|
|
1642
|
+
className: `inline-flex items-center justify-center ${className ?? ""}`,
|
|
1643
|
+
children: isActive ? activeIcon : inactiveIcon
|
|
1644
|
+
},
|
|
1645
|
+
isActive ? "active" : "inactive"
|
|
1646
|
+
) });
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
// src/components/layout/theme-switcher.tsx
|
|
1650
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1651
|
+
function ThemeSwitcher() {
|
|
1652
|
+
const { theme, setTheme, systemTheme } = (0, import_next_themes.useTheme)();
|
|
1653
|
+
const [mounted, setMounted] = (0, import_react18.useState)(false);
|
|
1654
|
+
(0, import_react18.useEffect)(() => {
|
|
1655
|
+
setMounted(true);
|
|
1656
|
+
}, []);
|
|
1657
|
+
if (!mounted) {
|
|
1658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Toggle theme", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons3.SunIcon, { "aria-hidden": "true" }) });
|
|
1659
|
+
}
|
|
1660
|
+
const currentTheme = theme === "system" ? systemTheme : theme;
|
|
1661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1662
|
+
Button,
|
|
1663
|
+
{
|
|
1664
|
+
variant: "ghost",
|
|
1665
|
+
size: "icon-sm",
|
|
1666
|
+
onClick: () => setTheme(currentTheme === "dark" ? "light" : "dark"),
|
|
1667
|
+
"aria-label": "Toggle theme",
|
|
1668
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1669
|
+
MorphIcon,
|
|
1670
|
+
{
|
|
1671
|
+
isActive: currentTheme === "dark",
|
|
1672
|
+
activeIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons3.MoonIcon, { "aria-hidden": "true" }),
|
|
1673
|
+
inactiveIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons3.SunIcon, { "aria-hidden": "true" }),
|
|
1674
|
+
variant: "rotate"
|
|
1675
|
+
}
|
|
1676
|
+
)
|
|
1677
|
+
}
|
|
1678
|
+
);
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
// src/components/ui/brand-logo.tsx
|
|
1682
|
+
var import_react19 = require("motion/react");
|
|
1683
|
+
var import_react20 = require("react");
|
|
1684
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1685
|
+
var BrandLogo = (0, import_react20.forwardRef)(
|
|
1686
|
+
({ className = "", ...props }, ref) => {
|
|
1687
|
+
const [isHovered, setIsHovered] = (0, import_react20.useState)(false);
|
|
1688
|
+
const springConfig = {
|
|
1689
|
+
type: "spring",
|
|
1690
|
+
duration: 0.5,
|
|
1691
|
+
bounce: 0.2
|
|
1692
|
+
};
|
|
1693
|
+
const easeOut = [0.23, 1, 0.32, 1];
|
|
1694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1695
|
+
import_react19.motion.div,
|
|
1696
|
+
{
|
|
1697
|
+
ref,
|
|
1698
|
+
className: `relative flex items-center justify-center overflow-hidden transition-shadow ${className}`,
|
|
1699
|
+
onHoverStart: () => setIsHovered(true),
|
|
1700
|
+
onHoverEnd: () => setIsHovered(false),
|
|
1701
|
+
whileTap: { scale: 0.97 },
|
|
1702
|
+
layout: true,
|
|
1703
|
+
transition: springConfig,
|
|
1704
|
+
style: {
|
|
1705
|
+
height: 24,
|
|
1706
|
+
// Keeps vertical rhythm stable
|
|
1707
|
+
cursor: "pointer"
|
|
1708
|
+
},
|
|
1709
|
+
...props,
|
|
1710
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react19.AnimatePresence, { mode: "popLayout", initial: false, children: isHovered ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1711
|
+
import_react19.motion.span,
|
|
1712
|
+
{
|
|
1713
|
+
initial: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
|
|
1714
|
+
animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
|
|
1715
|
+
exit: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
|
|
1716
|
+
transition: { duration: 0.2, ease: easeOut },
|
|
1717
|
+
className: "whitespace-nowrap font-sans text-[16px] font-extrabold lowercase leading-none tracking-tight text-slate-900 dark:text-white",
|
|
1718
|
+
children: "inklu"
|
|
1719
|
+
},
|
|
1720
|
+
"text"
|
|
1721
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1722
|
+
import_react19.motion.div,
|
|
1723
|
+
{
|
|
1724
|
+
initial: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
|
|
1725
|
+
animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
|
|
1726
|
+
exit: { opacity: 0, scale: 0.95, filter: "blur(6px)" },
|
|
1727
|
+
transition: { duration: 0.2, ease: easeOut },
|
|
1728
|
+
className: "h-4 w-4 rounded-sm bg-slate-900 dark:bg-white"
|
|
1729
|
+
},
|
|
1730
|
+
"icon"
|
|
1731
|
+
) })
|
|
1732
|
+
}
|
|
1733
|
+
);
|
|
1734
|
+
}
|
|
1735
|
+
);
|
|
1736
|
+
BrandLogo.displayName = "BrandLogo";
|
|
1737
|
+
|
|
1738
|
+
// src/components/ui/hover-card.tsx
|
|
1739
|
+
var import_preview_card = require("@base-ui/react/preview-card");
|
|
1740
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1741
|
+
function HoverCard({ ...props }) {
|
|
1742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_preview_card.PreviewCard.Root, { "data-slot": "hover-card", ...props });
|
|
1743
|
+
}
|
|
1744
|
+
function HoverCardTrigger({ ...props }) {
|
|
1745
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_preview_card.PreviewCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
|
|
1746
|
+
}
|
|
1747
|
+
function HoverCardContent({
|
|
1748
|
+
className,
|
|
1749
|
+
side = "bottom",
|
|
1750
|
+
sideOffset = 4,
|
|
1751
|
+
align = "center",
|
|
1752
|
+
alignOffset = 4,
|
|
1753
|
+
...props
|
|
1754
|
+
}) {
|
|
1755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_preview_card.PreviewCard.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1756
|
+
import_preview_card.PreviewCard.Positioner,
|
|
1757
|
+
{
|
|
1758
|
+
align,
|
|
1759
|
+
alignOffset,
|
|
1760
|
+
side,
|
|
1761
|
+
sideOffset,
|
|
1762
|
+
className: "isolate z-50",
|
|
1763
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1764
|
+
import_preview_card.PreviewCard.Popup,
|
|
1765
|
+
{
|
|
1766
|
+
"data-slot": "hover-card-content",
|
|
1767
|
+
className: cn(
|
|
1768
|
+
"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-200 ease-out data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
1769
|
+
className
|
|
1770
|
+
),
|
|
1771
|
+
...props
|
|
1772
|
+
}
|
|
1773
|
+
)
|
|
1774
|
+
}
|
|
1775
|
+
) });
|
|
1776
|
+
}
|
|
1777
|
+
|
|
1778
|
+
// src/components/ui/tooltip.tsx
|
|
1779
|
+
var import_tooltip = require("@base-ui/react/tooltip");
|
|
1780
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1781
|
+
function TooltipProvider({
|
|
1782
|
+
delay = 0,
|
|
1783
|
+
...props
|
|
1784
|
+
}) {
|
|
1785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1786
|
+
import_tooltip.Tooltip.Provider,
|
|
1787
|
+
{
|
|
1788
|
+
"data-slot": "tooltip-provider",
|
|
1789
|
+
delay,
|
|
1790
|
+
...props
|
|
1791
|
+
}
|
|
1792
|
+
);
|
|
1793
|
+
}
|
|
1794
|
+
function Tooltip({ ...props }) {
|
|
1795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
1796
|
+
}
|
|
1797
|
+
function TooltipTrigger({ ...props }) {
|
|
1798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
1799
|
+
}
|
|
1800
|
+
function TooltipContent({
|
|
1801
|
+
className,
|
|
1802
|
+
side = "top",
|
|
1803
|
+
sideOffset = 4,
|
|
1804
|
+
align = "center",
|
|
1805
|
+
alignOffset = 0,
|
|
1806
|
+
children,
|
|
1807
|
+
...props
|
|
1808
|
+
}) {
|
|
1809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1810
|
+
import_tooltip.Tooltip.Positioner,
|
|
1811
|
+
{
|
|
1812
|
+
align,
|
|
1813
|
+
alignOffset,
|
|
1814
|
+
side,
|
|
1815
|
+
sideOffset,
|
|
1816
|
+
className: "isolate z-50",
|
|
1817
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1818
|
+
import_tooltip.Tooltip.Popup,
|
|
1819
|
+
{
|
|
1820
|
+
"data-slot": "tooltip-content",
|
|
1821
|
+
className: cn(
|
|
1822
|
+
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 duration-150 ease-out data-instant:duration-0 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
1823
|
+
className
|
|
1824
|
+
),
|
|
1825
|
+
...props,
|
|
1826
|
+
children: [
|
|
1827
|
+
children,
|
|
1828
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
|
|
1829
|
+
]
|
|
1830
|
+
}
|
|
1831
|
+
)
|
|
1832
|
+
}
|
|
1833
|
+
) });
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
// src/components/layout/site-header.tsx
|
|
1837
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1838
|
+
function SiteHeader({
|
|
1839
|
+
navItems = [],
|
|
1840
|
+
logo = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BrandLogo, {}),
|
|
1841
|
+
version = "v0.1",
|
|
1842
|
+
githubUrl = "https://github.com/your-username/your-repo",
|
|
1843
|
+
right
|
|
1844
|
+
}) {
|
|
1845
|
+
const pathname = (0, import_navigation2.usePathname)();
|
|
1846
|
+
const isActive = (href) => href === "/" ? pathname === "/" : pathname?.startsWith(href) ?? false;
|
|
1847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: "sticky top-4 z-(--z-header) flex w-full items-center justify-between rounded-xl", children: [
|
|
1848
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1849
|
+
import_link2.default,
|
|
1850
|
+
{
|
|
1851
|
+
href: "/",
|
|
1852
|
+
"aria-label": "Home",
|
|
1853
|
+
className: "flex items-center text-foreground transition-opacity hover:opacity-80",
|
|
1854
|
+
children: logo
|
|
1855
|
+
}
|
|
1856
|
+
),
|
|
1857
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { className: "absolute left-1/2 flex -translate-x-1/2 items-center gap-4 md:gap-5", children: navItems.map((item) => {
|
|
1858
|
+
const active = isActive(item.href);
|
|
1859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1860
|
+
import_link2.default,
|
|
1861
|
+
{
|
|
1862
|
+
href: item.href,
|
|
1863
|
+
"aria-current": active ? "page" : void 0,
|
|
1864
|
+
onClick: () => {
|
|
1865
|
+
if (!active) turn(item.href === "/" ? "back" : "forward");
|
|
1866
|
+
},
|
|
1867
|
+
className: cn(
|
|
1868
|
+
"relative font-medium text-sm leading-5 transition-colors px-3 py-1.5 rounded-full",
|
|
1869
|
+
active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
|
1870
|
+
),
|
|
1871
|
+
children: [
|
|
1872
|
+
active && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1873
|
+
import_react21.motion.div,
|
|
1874
|
+
{
|
|
1875
|
+
layoutId: "activeHeaderNavBg",
|
|
1876
|
+
className: "absolute inset-0 bg-secondary/60 rounded-full",
|
|
1877
|
+
transition: { type: "spring", duration: 0.3, bounce: 0 }
|
|
1878
|
+
}
|
|
1879
|
+
),
|
|
1880
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "relative z-10", children: item.label })
|
|
1881
|
+
]
|
|
1882
|
+
},
|
|
1883
|
+
item.href
|
|
1884
|
+
);
|
|
1885
|
+
}) }),
|
|
1886
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
1887
|
+
version && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(HoverCard, { children: [
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1889
|
+
HoverCardTrigger,
|
|
1890
|
+
{
|
|
1891
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1892
|
+
Badge,
|
|
1893
|
+
{
|
|
1894
|
+
variant: "secondary",
|
|
1895
|
+
className: "align-middle cursor-default hover:bg-secondary/80 transition-colors",
|
|
1896
|
+
children: version
|
|
1897
|
+
}
|
|
1898
|
+
)
|
|
1899
|
+
}
|
|
1900
|
+
),
|
|
1901
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1902
|
+
HoverCardContent,
|
|
1903
|
+
{
|
|
1904
|
+
side: "bottom",
|
|
1905
|
+
sideOffset: 8,
|
|
1906
|
+
align: "center",
|
|
1907
|
+
className: "w-64 p-2",
|
|
1908
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-1.5", children: [
|
|
1909
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h1", { className: " font-medium", children: [
|
|
1910
|
+
"Release ",
|
|
1911
|
+
version
|
|
1912
|
+
] }),
|
|
1913
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-muted-foreground", children: "You are viewing the documentation for the latest release." })
|
|
1914
|
+
] })
|
|
1915
|
+
}
|
|
1916
|
+
)
|
|
1917
|
+
] }),
|
|
1918
|
+
right,
|
|
1919
|
+
githubUrl && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipProvider, { delay: 200, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
|
|
1920
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1921
|
+
TooltipTrigger,
|
|
1922
|
+
{
|
|
1923
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1924
|
+
Button,
|
|
1925
|
+
{
|
|
1926
|
+
variant: "ghost",
|
|
1927
|
+
size: "sm",
|
|
1928
|
+
render: (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1929
|
+
"a",
|
|
1930
|
+
{
|
|
1931
|
+
...props,
|
|
1932
|
+
href: githubUrl,
|
|
1933
|
+
target: "_blank",
|
|
1934
|
+
rel: "noopener noreferrer",
|
|
1935
|
+
onClick: (e) => {
|
|
1936
|
+
props.onClick?.(e);
|
|
1937
|
+
tap();
|
|
1938
|
+
}
|
|
1939
|
+
}
|
|
1940
|
+
),
|
|
1941
|
+
children: [
|
|
1942
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons4.GitHubLogoIcon, {}),
|
|
1943
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "hidden sm:inline", children: "GitHub" })
|
|
1944
|
+
]
|
|
1945
|
+
}
|
|
1946
|
+
)
|
|
1947
|
+
}
|
|
1948
|
+
),
|
|
1949
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipContent, { side: "bottom", sideOffset: 6, children: "View source on GitHub" })
|
|
1950
|
+
] }) }),
|
|
1951
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ThemeSwitcher, {})
|
|
1952
|
+
] })
|
|
1953
|
+
] });
|
|
1954
|
+
}
|
|
1955
|
+
|
|
1956
|
+
// src/components/layout/site-layout.tsx
|
|
1957
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1958
|
+
function SiteLayout({ children, header, footer }) {
|
|
1959
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative flex flex-col items-center min-h-screen pb-24 overflow-x-clip", children: [
|
|
1960
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ScrollFade, {}),
|
|
1961
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("section", { className: "w-full px-6 flex flex-col gap-3 pt-3", children: [
|
|
1962
|
+
header,
|
|
1963
|
+
children
|
|
1964
|
+
] }),
|
|
1965
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col gap-10 items-center text-center mt-32 px-4", children: footer })
|
|
1966
|
+
] });
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
// src/components/ui/direction.tsx
|
|
1970
|
+
var import_direction_provider = require("@base-ui/react/direction-provider");
|
|
1971
|
+
|
|
1972
|
+
// src/components/layout/theme-provider.tsx
|
|
1973
|
+
var import_next_themes2 = require("next-themes");
|
|
1974
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1975
|
+
function ThemeProvider(props) {
|
|
1976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_next_themes2.ThemeProvider, { ...props });
|
|
1977
|
+
}
|
|
1978
|
+
|
|
1979
|
+
// src/components/layout/site-provider.tsx
|
|
1980
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1981
|
+
function SiteProvider({ children }) {
|
|
1982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1983
|
+
ThemeProvider,
|
|
1984
|
+
{
|
|
1985
|
+
attribute: "class",
|
|
1986
|
+
defaultTheme: "dark",
|
|
1987
|
+
enableSystem: true,
|
|
1988
|
+
disableTransitionOnChange: true,
|
|
1989
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_direction_provider.DirectionProvider, { direction: "ltr", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToastProvider, { position: "bottom-right", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AnchoredToastProvider, { children }) }) })
|
|
1990
|
+
}
|
|
1991
|
+
);
|
|
1992
|
+
}
|
|
1993
|
+
|
|
1994
|
+
// src/components/layout/site-template.tsx
|
|
1995
|
+
var import_react22 = require("motion/react");
|
|
1996
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1997
|
+
function SiteTemplate({ children }) {
|
|
1998
|
+
const reduced = (0, import_react22.useReducedMotion)();
|
|
1999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2000
|
+
import_react22.motion.div,
|
|
2001
|
+
{
|
|
2002
|
+
initial: reduced ? false : { opacity: 0 },
|
|
2003
|
+
animate: { opacity: 1 },
|
|
2004
|
+
transition: reduced ? { duration: 0 } : { duration: 0.24, ease: [0.22, 1, 0.36, 1] },
|
|
2005
|
+
children
|
|
2006
|
+
}
|
|
2007
|
+
);
|
|
2008
|
+
}
|
|
2009
|
+
|
|
2010
|
+
// src/components/ui/button-group.tsx
|
|
2011
|
+
var import_merge_props2 = require("@base-ui/react/merge-props");
|
|
2012
|
+
var import_use_render2 = require("@base-ui/react/use-render");
|
|
2013
|
+
var import_class_variance_authority3 = require("class-variance-authority");
|
|
2014
|
+
|
|
2015
|
+
// src/components/ui/separator.tsx
|
|
2016
|
+
var import_separator = require("@base-ui/react/separator");
|
|
2017
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2018
|
+
function Separator({
|
|
2019
|
+
className,
|
|
2020
|
+
orientation = "horizontal",
|
|
2021
|
+
...props
|
|
2022
|
+
}) {
|
|
2023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2024
|
+
import_separator.Separator,
|
|
2025
|
+
{
|
|
2026
|
+
"data-slot": "separator",
|
|
2027
|
+
orientation,
|
|
2028
|
+
className: cn(
|
|
2029
|
+
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
|
2030
|
+
className
|
|
2031
|
+
),
|
|
2032
|
+
...props
|
|
2033
|
+
}
|
|
2034
|
+
);
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2037
|
+
// src/components/ui/button-group.tsx
|
|
2038
|
+
var import_jsx_runtime24 = (
|
|
2039
|
+
// biome-ignore lint/a11y/useSemanticElements: Button group pattern
|
|
2040
|
+
require("react/jsx-runtime")
|
|
2041
|
+
);
|
|
2042
|
+
var buttonGroupVariants = (0, import_class_variance_authority3.cva)(
|
|
2043
|
+
"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
|
|
2044
|
+
{
|
|
2045
|
+
variants: {
|
|
2046
|
+
orientation: {
|
|
2047
|
+
horizontal: "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0",
|
|
2048
|
+
vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
|
|
2049
|
+
}
|
|
2050
|
+
},
|
|
2051
|
+
defaultVariants: {
|
|
2052
|
+
orientation: "horizontal"
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
2055
|
+
);
|
|
2056
|
+
function ButtonGroup({
|
|
2057
|
+
className,
|
|
2058
|
+
orientation,
|
|
2059
|
+
...props
|
|
2060
|
+
}) {
|
|
2061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2062
|
+
"div",
|
|
2063
|
+
{
|
|
2064
|
+
role: "group",
|
|
2065
|
+
"data-slot": "button-group",
|
|
2066
|
+
"data-orientation": orientation,
|
|
2067
|
+
className: cn(buttonGroupVariants({ orientation }), className),
|
|
2068
|
+
...props
|
|
2069
|
+
}
|
|
2070
|
+
);
|
|
2071
|
+
}
|
|
2072
|
+
function ButtonGroupText({
|
|
2073
|
+
className,
|
|
2074
|
+
render,
|
|
2075
|
+
...props
|
|
2076
|
+
}) {
|
|
2077
|
+
return (0, import_use_render2.useRender)({
|
|
2078
|
+
defaultTagName: "div",
|
|
2079
|
+
props: (0, import_merge_props2.mergeProps)(
|
|
2080
|
+
{
|
|
2081
|
+
className: cn(
|
|
2082
|
+
"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
2083
|
+
className
|
|
2084
|
+
)
|
|
2085
|
+
},
|
|
2086
|
+
props
|
|
2087
|
+
),
|
|
2088
|
+
render,
|
|
2089
|
+
state: {
|
|
2090
|
+
slot: "button-group-text"
|
|
2091
|
+
}
|
|
2092
|
+
});
|
|
2093
|
+
}
|
|
2094
|
+
function ButtonGroupSeparator({
|
|
2095
|
+
className,
|
|
2096
|
+
orientation = "vertical",
|
|
2097
|
+
...props
|
|
2098
|
+
}) {
|
|
2099
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2100
|
+
Separator,
|
|
2101
|
+
{
|
|
2102
|
+
"data-slot": "button-group-separator",
|
|
2103
|
+
orientation,
|
|
2104
|
+
className: cn(
|
|
2105
|
+
"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
|
|
2106
|
+
className
|
|
2107
|
+
),
|
|
2108
|
+
...props
|
|
2109
|
+
}
|
|
2110
|
+
);
|
|
2111
|
+
}
|
|
2112
|
+
|
|
2113
|
+
// src/components/ui/card.tsx
|
|
2114
|
+
var import_react23 = require("@lisse/react");
|
|
2115
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2116
|
+
function Card({
|
|
2117
|
+
className,
|
|
2118
|
+
size = "default",
|
|
2119
|
+
...props
|
|
2120
|
+
}) {
|
|
2121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.SmoothCorners, { asChild: true, corners: { radius: 24, smoothing: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2122
|
+
"div",
|
|
2123
|
+
{
|
|
2124
|
+
"data-slot": "card",
|
|
2125
|
+
"data-size": size,
|
|
2126
|
+
className: cn(
|
|
2127
|
+
"group/card flex flex-col overflow-hidden bg-card hover:bg-accent transition-colors text-card-foreground",
|
|
2128
|
+
className
|
|
2129
|
+
),
|
|
2130
|
+
...props
|
|
2131
|
+
}
|
|
2132
|
+
) });
|
|
2133
|
+
}
|
|
2134
|
+
function CardHeader({ className, ...props }) {
|
|
2135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2136
|
+
"div",
|
|
2137
|
+
{
|
|
2138
|
+
"data-slot": "card-header",
|
|
2139
|
+
className: cn("flex flex-col gap-1.5 mb-4", className),
|
|
2140
|
+
...props
|
|
2141
|
+
}
|
|
2142
|
+
);
|
|
2143
|
+
}
|
|
2144
|
+
function CardTitle({ className, ...props }) {
|
|
2145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2146
|
+
"div",
|
|
2147
|
+
{
|
|
2148
|
+
"data-slot": "card-title",
|
|
2149
|
+
className: cn("font-medium leading-none tracking-tight", className),
|
|
2150
|
+
...props
|
|
2151
|
+
}
|
|
2152
|
+
);
|
|
2153
|
+
}
|
|
2154
|
+
function CardDescription({ className, ...props }) {
|
|
2155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2156
|
+
"div",
|
|
2157
|
+
{
|
|
2158
|
+
"data-slot": "card-description",
|
|
2159
|
+
className: cn("text-muted-foreground", className),
|
|
2160
|
+
...props
|
|
2161
|
+
}
|
|
2162
|
+
);
|
|
2163
|
+
}
|
|
2164
|
+
function CardAction({ className, ...props }) {
|
|
2165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2166
|
+
"div",
|
|
2167
|
+
{
|
|
2168
|
+
"data-slot": "card-action",
|
|
2169
|
+
className: cn(
|
|
2170
|
+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
2171
|
+
className
|
|
2172
|
+
),
|
|
2173
|
+
...props
|
|
2174
|
+
}
|
|
2175
|
+
);
|
|
2176
|
+
}
|
|
2177
|
+
function CardContent({ className, ...props }) {
|
|
2178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2179
|
+
"div",
|
|
2180
|
+
{
|
|
2181
|
+
"data-slot": "card-content",
|
|
2182
|
+
className: cn("text-muted-foreground", className),
|
|
2183
|
+
...props
|
|
2184
|
+
}
|
|
2185
|
+
);
|
|
2186
|
+
}
|
|
2187
|
+
function CardFooter({ className, ...props }) {
|
|
2188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2189
|
+
"div",
|
|
2190
|
+
{
|
|
2191
|
+
"data-slot": "card-footer",
|
|
2192
|
+
className: cn("flex items-center pt-4", className),
|
|
2193
|
+
...props
|
|
2194
|
+
}
|
|
2195
|
+
);
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
// src/components/ui/item.tsx
|
|
2199
|
+
var import_merge_props3 = require("@base-ui/react/merge-props");
|
|
2200
|
+
var import_use_render3 = require("@base-ui/react/use-render");
|
|
2201
|
+
var import_class_variance_authority4 = require("class-variance-authority");
|
|
2202
|
+
var import_jsx_runtime26 = (
|
|
2203
|
+
// biome-ignore lint/a11y/useSemanticElements: ARIA list pattern
|
|
2204
|
+
require("react/jsx-runtime")
|
|
2205
|
+
);
|
|
2206
|
+
function ItemGroup({ className, ...props }) {
|
|
2207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2208
|
+
"div",
|
|
2209
|
+
{
|
|
2210
|
+
role: "list",
|
|
2211
|
+
"data-slot": "item-group",
|
|
2212
|
+
className: cn(
|
|
2213
|
+
"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
|
|
2214
|
+
className
|
|
2215
|
+
),
|
|
2216
|
+
...props
|
|
2217
|
+
}
|
|
2218
|
+
);
|
|
2219
|
+
}
|
|
2220
|
+
function ItemSeparator({
|
|
2221
|
+
className,
|
|
2222
|
+
...props
|
|
2223
|
+
}) {
|
|
2224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2225
|
+
Separator,
|
|
2226
|
+
{
|
|
2227
|
+
"data-slot": "item-separator",
|
|
2228
|
+
orientation: "horizontal",
|
|
2229
|
+
className: cn("my-2", className),
|
|
2230
|
+
...props
|
|
2231
|
+
}
|
|
2232
|
+
);
|
|
2233
|
+
}
|
|
2234
|
+
var itemVariants = (0, import_class_variance_authority4.cva)(
|
|
2235
|
+
"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition duration-[160ms] ease-out outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted active:scale-[0.97]",
|
|
2236
|
+
{
|
|
2237
|
+
variants: {
|
|
2238
|
+
variant: {
|
|
2239
|
+
default: "border-transparent",
|
|
2240
|
+
outline: "border-border",
|
|
2241
|
+
muted: "border-transparent bg-muted/50"
|
|
2242
|
+
},
|
|
2243
|
+
size: {
|
|
2244
|
+
default: "gap-2.5 px-3 py-2.5",
|
|
2245
|
+
sm: "gap-2.5 px-3 py-2.5",
|
|
2246
|
+
xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
|
|
2247
|
+
}
|
|
2248
|
+
},
|
|
2249
|
+
defaultVariants: {
|
|
2250
|
+
variant: "default",
|
|
2251
|
+
size: "default"
|
|
2252
|
+
}
|
|
2253
|
+
}
|
|
2254
|
+
);
|
|
2255
|
+
function Item({
|
|
2256
|
+
className,
|
|
2257
|
+
variant = "default",
|
|
2258
|
+
size = "default",
|
|
2259
|
+
render,
|
|
2260
|
+
...props
|
|
2261
|
+
}) {
|
|
2262
|
+
return (0, import_use_render3.useRender)({
|
|
2263
|
+
defaultTagName: "div",
|
|
2264
|
+
props: (0, import_merge_props3.mergeProps)(
|
|
2265
|
+
{
|
|
2266
|
+
className: cn(itemVariants({ variant, size, className }))
|
|
2267
|
+
},
|
|
2268
|
+
props
|
|
2269
|
+
),
|
|
2270
|
+
render,
|
|
2271
|
+
state: {
|
|
2272
|
+
slot: "item",
|
|
2273
|
+
variant,
|
|
2274
|
+
size
|
|
2275
|
+
}
|
|
2276
|
+
});
|
|
2277
|
+
}
|
|
2278
|
+
var itemMediaVariants = (0, import_class_variance_authority4.cva)(
|
|
2279
|
+
"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
|
|
2280
|
+
{
|
|
2281
|
+
variants: {
|
|
2282
|
+
variant: {
|
|
2283
|
+
default: "bg-transparent",
|
|
2284
|
+
icon: "[&_svg:not([class*='size-'])]:size-4",
|
|
2285
|
+
image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
|
|
2286
|
+
}
|
|
2287
|
+
},
|
|
2288
|
+
defaultVariants: {
|
|
2289
|
+
variant: "default"
|
|
2290
|
+
}
|
|
2291
|
+
}
|
|
2292
|
+
);
|
|
2293
|
+
function ItemMedia({
|
|
2294
|
+
className,
|
|
2295
|
+
variant = "default",
|
|
2296
|
+
...props
|
|
2297
|
+
}) {
|
|
2298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2299
|
+
"div",
|
|
2300
|
+
{
|
|
2301
|
+
"data-slot": "item-media",
|
|
2302
|
+
"data-variant": variant,
|
|
2303
|
+
className: cn(itemMediaVariants({ variant, className })),
|
|
2304
|
+
...props
|
|
2305
|
+
}
|
|
2306
|
+
);
|
|
2307
|
+
}
|
|
2308
|
+
function ItemContent({ className, ...props }) {
|
|
2309
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2310
|
+
"div",
|
|
2311
|
+
{
|
|
2312
|
+
"data-slot": "item-content",
|
|
2313
|
+
className: cn(
|
|
2314
|
+
"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
|
|
2315
|
+
className
|
|
2316
|
+
),
|
|
2317
|
+
...props
|
|
2318
|
+
}
|
|
2319
|
+
);
|
|
2320
|
+
}
|
|
2321
|
+
function ItemTitle({ className, ...props }) {
|
|
2322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2323
|
+
"div",
|
|
2324
|
+
{
|
|
2325
|
+
"data-slot": "item-title",
|
|
2326
|
+
className: cn(
|
|
2327
|
+
"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
|
|
2328
|
+
className
|
|
2329
|
+
),
|
|
2330
|
+
...props
|
|
2331
|
+
}
|
|
2332
|
+
);
|
|
2333
|
+
}
|
|
2334
|
+
function ItemDescription({ className, ...props }) {
|
|
2335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2336
|
+
"p",
|
|
2337
|
+
{
|
|
2338
|
+
"data-slot": "item-description",
|
|
2339
|
+
className: cn(
|
|
2340
|
+
"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
2341
|
+
className
|
|
2342
|
+
),
|
|
2343
|
+
...props
|
|
2344
|
+
}
|
|
2345
|
+
);
|
|
2346
|
+
}
|
|
2347
|
+
function ItemActions({ className, ...props }) {
|
|
2348
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2349
|
+
"div",
|
|
2350
|
+
{
|
|
2351
|
+
"data-slot": "item-actions",
|
|
2352
|
+
className: cn("flex items-center gap-2", className),
|
|
2353
|
+
...props
|
|
2354
|
+
}
|
|
2355
|
+
);
|
|
2356
|
+
}
|
|
2357
|
+
function ItemHeader({ className, ...props }) {
|
|
2358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2359
|
+
"div",
|
|
2360
|
+
{
|
|
2361
|
+
"data-slot": "item-header",
|
|
2362
|
+
className: cn(
|
|
2363
|
+
"flex basis-full items-center justify-between gap-2",
|
|
2364
|
+
className
|
|
2365
|
+
),
|
|
2366
|
+
...props
|
|
2367
|
+
}
|
|
2368
|
+
);
|
|
2369
|
+
}
|
|
2370
|
+
function ItemFooter({ className, ...props }) {
|
|
2371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2372
|
+
"div",
|
|
2373
|
+
{
|
|
2374
|
+
"data-slot": "item-footer",
|
|
2375
|
+
className: cn(
|
|
2376
|
+
"flex basis-full items-center justify-between gap-2",
|
|
2377
|
+
className
|
|
2378
|
+
),
|
|
2379
|
+
...props
|
|
2380
|
+
}
|
|
2381
|
+
);
|
|
2382
|
+
}
|
|
2383
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
2384
|
+
0 && (module.exports = {
|
|
2385
|
+
AnchoredToastProvider,
|
|
2386
|
+
Badge,
|
|
2387
|
+
BrandLogo,
|
|
2388
|
+
Button,
|
|
2389
|
+
ButtonGroup,
|
|
2390
|
+
ButtonGroupSeparator,
|
|
2391
|
+
ButtonGroupText,
|
|
2392
|
+
Card,
|
|
2393
|
+
CardAction,
|
|
2394
|
+
CardContent,
|
|
2395
|
+
CardDescription,
|
|
2396
|
+
CardFooter,
|
|
2397
|
+
CardHeader,
|
|
2398
|
+
CardTitle,
|
|
2399
|
+
ChangelogContent,
|
|
2400
|
+
CodeBlock,
|
|
2401
|
+
CommandBlock,
|
|
2402
|
+
CopyMorphIcon,
|
|
2403
|
+
DirectionProvider,
|
|
2404
|
+
DocsCode,
|
|
2405
|
+
DocsCol,
|
|
2406
|
+
DocsFrame,
|
|
2407
|
+
DocsHeader,
|
|
2408
|
+
DocsInstallation,
|
|
2409
|
+
DocsLayout,
|
|
2410
|
+
DocsNavbar,
|
|
2411
|
+
DocsOverview,
|
|
2412
|
+
DocsSection,
|
|
2413
|
+
EASE_OUT,
|
|
2414
|
+
HERO_STAGGER,
|
|
2415
|
+
HoverCard,
|
|
2416
|
+
HoverCardContent,
|
|
2417
|
+
HoverCardTrigger,
|
|
2418
|
+
Item,
|
|
2419
|
+
ItemActions,
|
|
2420
|
+
ItemContent,
|
|
2421
|
+
ItemDescription,
|
|
2422
|
+
ItemFooter,
|
|
2423
|
+
ItemGroup,
|
|
2424
|
+
ItemHeader,
|
|
2425
|
+
ItemMedia,
|
|
2426
|
+
ItemSeparator,
|
|
2427
|
+
ItemTitle,
|
|
2428
|
+
REVEAL_DURATION,
|
|
2429
|
+
ScrollFade,
|
|
2430
|
+
Separator,
|
|
2431
|
+
SiteHeader,
|
|
2432
|
+
SiteLayout,
|
|
2433
|
+
SiteProvider,
|
|
2434
|
+
SiteTemplate,
|
|
2435
|
+
SlidingNumber,
|
|
2436
|
+
TextEffect,
|
|
2437
|
+
TextMorph,
|
|
2438
|
+
ThemeProvider,
|
|
2439
|
+
ThemeSwitcher,
|
|
2440
|
+
ToastPrimitive,
|
|
2441
|
+
ToastProvider,
|
|
2442
|
+
Tooltip,
|
|
2443
|
+
TooltipContent,
|
|
2444
|
+
TooltipProvider,
|
|
2445
|
+
TooltipTrigger,
|
|
2446
|
+
anchoredToastManager,
|
|
2447
|
+
badgeVariants,
|
|
2448
|
+
buttonGroupVariants,
|
|
2449
|
+
buttonVariants,
|
|
2450
|
+
colReveal,
|
|
2451
|
+
heroChild,
|
|
2452
|
+
toastManager,
|
|
2453
|
+
useDirection
|
|
2454
|
+
});
|
|
2455
|
+
//# sourceMappingURL=index.js.map
|