@docubook/mdx 1.0.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.
@@ -0,0 +1,428 @@
1
+ // src/core/components/Button.tsx
2
+ import * as Icons from "lucide-react";
3
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
+ function Button({
5
+ icon,
6
+ text,
7
+ href,
8
+ target,
9
+ size = "md",
10
+ variation = "primary",
11
+ LinkComponent
12
+ }) {
13
+ const baseStyles = "inline-flex items-center justify-center rounded font-medium focus:outline-none transition no-underline";
14
+ const sizeStyles = {
15
+ sm: "px-3 py-1 my-6 text-sm",
16
+ md: "px-4 py-2 my-6 text-base",
17
+ lg: "px-5 py-3 my-6 text-lg"
18
+ };
19
+ const variationStyles = {
20
+ primary: "bg-primary text-white hover:bg-primary/90",
21
+ accent: "bg-accent text-white hover:bg-accent/90",
22
+ outline: "border border-accent text-accent hover:bg-accent/10"
23
+ };
24
+ const Icon = icon ? Icons[icon] : null;
25
+ const className = `${baseStyles} ${sizeStyles[size]} ${variationStyles[variation]}`;
26
+ const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
27
+ text && /* @__PURE__ */ jsx("span", { children: text }),
28
+ Icon && /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-5 w-5" })
29
+ ] });
30
+ if (LinkComponent) {
31
+ return /* @__PURE__ */ jsx(
32
+ LinkComponent,
33
+ {
34
+ href,
35
+ target,
36
+ rel: target === "_blank" ? "noopener noreferrer" : void 0,
37
+ className,
38
+ children: inner
39
+ }
40
+ );
41
+ }
42
+ return /* @__PURE__ */ jsx(
43
+ "a",
44
+ {
45
+ href,
46
+ target,
47
+ rel: target === "_blank" ? "noopener noreferrer" : void 0,
48
+ className,
49
+ children: inner
50
+ }
51
+ );
52
+ }
53
+
54
+ // src/core/components/Card.tsx
55
+ import * as Icons2 from "lucide-react";
56
+ import clsx from "clsx";
57
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
58
+ function Card({
59
+ title,
60
+ icon,
61
+ href,
62
+ horizontal,
63
+ children,
64
+ className,
65
+ LinkComponent
66
+ }) {
67
+ const Icon = icon ? Icons2[icon] : null;
68
+ const content = /* @__PURE__ */ jsxs2(
69
+ "div",
70
+ {
71
+ className: clsx(
72
+ "border rounded-lg shadow-sm p-4 transition-all duration-200",
73
+ "bg-card text-card-foreground border-border",
74
+ "hover:bg-accent/5 hover:border-accent/30",
75
+ "flex gap-2",
76
+ horizontal ? "flex-row items-start gap-1" : "flex-col space-y-1",
77
+ className
78
+ ),
79
+ children: [
80
+ Icon && /* @__PURE__ */ jsx2(Icon, { className: clsx("w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5") }),
81
+ /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
82
+ /* @__PURE__ */ jsx2("div", { className: "text-base font-semibold text-foreground leading-6", children: title }),
83
+ /* @__PURE__ */ jsx2("div", { className: "text-sm text-muted-foreground -mt-3", children })
84
+ ] })
85
+ ]
86
+ }
87
+ );
88
+ if (!href) return content;
89
+ if (LinkComponent) {
90
+ return /* @__PURE__ */ jsx2(LinkComponent, { href, className: "no-underline block", children: content });
91
+ }
92
+ return /* @__PURE__ */ jsx2("a", { className: "no-underline block", href, children: content });
93
+ }
94
+
95
+ // src/core/components/CardGroup.tsx
96
+ import React from "react";
97
+ import clsx2 from "clsx";
98
+ import { jsx as jsx3 } from "react/jsx-runtime";
99
+ function CardGroup({ children, cols = 2, className }) {
100
+ const cardsArray = React.Children.toArray(children);
101
+ const gridColsClass = {
102
+ 1: "grid-cols-1",
103
+ 2: "grid-cols-1 sm:grid-cols-2",
104
+ 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
105
+ 4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
106
+ }[cols] || "grid-cols-1 sm:grid-cols-2";
107
+ return /* @__PURE__ */ jsx3("div", { className: clsx2("grid gap-4 text-foreground", gridColsClass, className), children: cardsArray.map((card, index) => /* @__PURE__ */ jsx3("div", { children: card }, index)) });
108
+ }
109
+
110
+ // src/core/components/Keyboard.tsx
111
+ import { jsx as jsx4 } from "react/jsx-runtime";
112
+ var macKeyMap = {
113
+ command: "\u2318",
114
+ cmd: "\u2318",
115
+ option: "\u2325",
116
+ alt: "\u2325",
117
+ shift: "\u21E7",
118
+ ctrl: "\u2303",
119
+ control: "\u2303",
120
+ tab: "\u21E5",
121
+ caps: "\u21EA",
122
+ enter: "\u23CE",
123
+ return: "\u23CE",
124
+ delete: "\u232B",
125
+ escape: "\u238B",
126
+ esc: "\u238B",
127
+ up: "\u2191",
128
+ down: "\u2193",
129
+ left: "\u2190",
130
+ right: "\u2192",
131
+ space: "\u2423"
132
+ };
133
+ var windowsKeyMap = {
134
+ command: "Win",
135
+ cmd: "Win",
136
+ option: "Alt",
137
+ alt: "Alt",
138
+ ctrl: "Ctrl",
139
+ control: "Ctrl",
140
+ delete: "Del",
141
+ escape: "Esc",
142
+ esc: "Esc",
143
+ enter: "Enter",
144
+ return: "Enter",
145
+ tab: "Tab",
146
+ caps: "Caps",
147
+ shift: "Shift",
148
+ space: "Space",
149
+ up: "\u2191",
150
+ down: "\u2193",
151
+ left: "\u2190",
152
+ right: "\u2192"
153
+ };
154
+ function Kbd({
155
+ show: keyProp,
156
+ type = "window",
157
+ children,
158
+ ...props
159
+ }) {
160
+ const getKeyDisplay = () => {
161
+ if (!keyProp || typeof keyProp !== "string") return null;
162
+ const lowerKey = keyProp.toLowerCase();
163
+ if (type === "mac") {
164
+ return macKeyMap[lowerKey] || keyProp;
165
+ }
166
+ return windowsKeyMap[lowerKey] || keyProp.charAt(0).toUpperCase() + keyProp.slice(1);
167
+ };
168
+ const renderContent = () => {
169
+ if (children !== void 0 && children !== null && children !== "") {
170
+ return children;
171
+ }
172
+ return getKeyDisplay() || keyProp || "";
173
+ };
174
+ return /* @__PURE__ */ jsx4(
175
+ "kbd",
176
+ {
177
+ className: "inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md",
178
+ ...props,
179
+ children: renderContent()
180
+ }
181
+ );
182
+ }
183
+
184
+ // src/core/components/Link.tsx
185
+ import { jsx as jsx5 } from "react/jsx-runtime";
186
+ function isUnsafeHref(href) {
187
+ const normalized = href.trim().toLowerCase();
188
+ return normalized.startsWith("javascript:") || normalized.startsWith("data:") || normalized.startsWith("vbscript:");
189
+ }
190
+ function Link({ href, target, rel, ...props }) {
191
+ if (!href) return null;
192
+ if (isUnsafeHref(href)) return null;
193
+ const isExternal = /^https?:\/\//.test(href);
194
+ return /* @__PURE__ */ jsx5(
195
+ "a",
196
+ {
197
+ href,
198
+ ...props,
199
+ target: target ?? (isExternal ? "_blank" : void 0),
200
+ rel: rel ?? (isExternal ? "noopener noreferrer" : void 0)
201
+ }
202
+ );
203
+ }
204
+
205
+ // src/core/components/Note.tsx
206
+ import { cva } from "class-variance-authority";
207
+ import {
208
+ AlertTriangle,
209
+ CheckCircle2,
210
+ Info,
211
+ ShieldAlert
212
+ } from "lucide-react";
213
+
214
+ // src/core/utils/cn.ts
215
+ import { clsx as clsx3 } from "clsx";
216
+ import { twMerge } from "tailwind-merge";
217
+ function cn(...inputs) {
218
+ return twMerge(clsx3(inputs));
219
+ }
220
+
221
+ // src/core/components/Note.tsx
222
+ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
223
+ var noteVariants = cva(
224
+ "relative w-full rounded-lg border border-l-4 p-4 mb-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
225
+ {
226
+ variants: {
227
+ variant: {
228
+ note: "bg-muted/30 border-border border-l-primary/50 text-foreground [&>svg]:text-primary",
229
+ danger: "border-destructive/20 border-l-destructive/60 bg-destructive/5 text-destructive [&>svg]:text-destructive dark:border-destructive/30",
230
+ warning: "border-orange-500/20 border-l-orange-500/60 bg-orange-500/5 text-orange-600 dark:text-orange-400 [&>svg]:text-orange-600 dark:[&>svg]:text-orange-400",
231
+ success: "border-emerald-500/20 border-l-emerald-500/60 bg-emerald-500/5 text-emerald-600 dark:text-emerald-400 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400"
232
+ }
233
+ },
234
+ defaultVariants: {
235
+ variant: "note"
236
+ }
237
+ }
238
+ );
239
+ var iconMap = {
240
+ note: Info,
241
+ danger: ShieldAlert,
242
+ warning: AlertTriangle,
243
+ success: CheckCircle2
244
+ };
245
+ function Note({
246
+ className,
247
+ title = "Note",
248
+ type = "note",
249
+ children,
250
+ ...props
251
+ }) {
252
+ const Icon = iconMap[type] || Info;
253
+ return /* @__PURE__ */ jsxs3("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
254
+ /* @__PURE__ */ jsx6(Icon, { className: "h-5 w-5" }),
255
+ /* @__PURE__ */ jsxs3("div", { className: "pl-8", children: [
256
+ /* @__PURE__ */ jsx6("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
257
+ /* @__PURE__ */ jsx6("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
258
+ ] })
259
+ ] });
260
+ }
261
+
262
+ // src/core/components/Release.tsx
263
+ import { Children } from "react";
264
+ import {
265
+ AlertTriangle as AlertTriangle2,
266
+ PlusCircle,
267
+ Wrench,
268
+ XCircle,
269
+ Zap
270
+ } from "lucide-react";
271
+ import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
272
+ function Release({ version, title, date, children }) {
273
+ return /* @__PURE__ */ jsxs4("div", { className: "mb-16 group", children: [
274
+ /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 mt-6 mb-2", children: [
275
+ /* @__PURE__ */ jsxs4(
276
+ "div",
277
+ {
278
+ id: version,
279
+ className: "inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-semibold text-primary transition-colors hover:bg-primary/15 scroll-m-20 backdrop-blur-sm",
280
+ children: [
281
+ "v",
282
+ version
283
+ ]
284
+ }
285
+ ),
286
+ date && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 text-sm font-medium text-muted-foreground", children: [
287
+ /* @__PURE__ */ jsx7("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
288
+ /* @__PURE__ */ jsx7("time", { dateTime: date, children: new Date(date).toLocaleDateString("en-US", {
289
+ year: "numeric",
290
+ month: "long",
291
+ day: "numeric"
292
+ }) })
293
+ ] })
294
+ ] }),
295
+ /* @__PURE__ */ jsx7("h3", { className: "text-2xl font-bold text-foreground/90 mb-6 mt-0!", children: title }),
296
+ /* @__PURE__ */ jsx7("div", { className: "space-y-8", children })
297
+ ] });
298
+ }
299
+ var typeConfig = {
300
+ added: {
301
+ label: "Added",
302
+ className: "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300",
303
+ icon: PlusCircle
304
+ },
305
+ fixed: {
306
+ label: "Fixed",
307
+ className: "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300",
308
+ icon: Wrench
309
+ },
310
+ improved: {
311
+ label: "Improved",
312
+ className: "bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300",
313
+ icon: Zap
314
+ },
315
+ deprecated: {
316
+ label: "Deprecated",
317
+ className: "bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300",
318
+ icon: AlertTriangle2
319
+ },
320
+ removed: {
321
+ label: "Removed",
322
+ className: "bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300",
323
+ icon: XCircle
324
+ }
325
+ };
326
+ function Changes({ type, children }) {
327
+ const config = typeConfig[type] || typeConfig.added;
328
+ return /* @__PURE__ */ jsxs4("div", { className: "space-y-3 mb-8", children: [
329
+ /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs4(
330
+ "div",
331
+ {
332
+ className: cn(
333
+ "px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1.5",
334
+ config.className
335
+ ),
336
+ children: [
337
+ /* @__PURE__ */ jsx7(config.icon, { className: "h-3.5 w-3.5" }),
338
+ /* @__PURE__ */ jsx7("span", { children: config.label })
339
+ ]
340
+ }
341
+ ) }),
342
+ /* @__PURE__ */ jsx7("ul", { className: "list-none pl-0 space-y-2 text-foreground/80", children: Children.map(children, (child, index) => {
343
+ const processedChild = typeof child === "string" ? child.trim().replace(/^[-*]\s+/, "") : child;
344
+ return /* @__PURE__ */ jsx7("li", { className: "leading-relaxed", children: processedChild }, index);
345
+ }) })
346
+ ] });
347
+ }
348
+
349
+ // src/core/components/Stepper.tsx
350
+ import clsx4 from "clsx";
351
+ import { Children as Children2 } from "react";
352
+ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
353
+ function Stepper({ children }) {
354
+ const length = Children2.count(children);
355
+ return /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: Children2.map(children, (child, index) => {
356
+ return /* @__PURE__ */ jsxs5(
357
+ "div",
358
+ {
359
+ className: cn(
360
+ "border-l border-muted pl-9 ml-3 relative",
361
+ clsx4({
362
+ "pb-5 ": index < length - 1
363
+ })
364
+ ),
365
+ children: [
366
+ /* @__PURE__ */ jsx8("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
367
+ child
368
+ ]
369
+ }
370
+ );
371
+ }) });
372
+ }
373
+ function StepperItem({
374
+ children,
375
+ title
376
+ }) {
377
+ return /* @__PURE__ */ jsxs5("div", { className: "pt-0.5", children: [
378
+ /* @__PURE__ */ jsx8("h4", { className: "mt-0", children: title }),
379
+ /* @__PURE__ */ jsx8("div", { children })
380
+ ] });
381
+ }
382
+
383
+ // src/core/components/Youtube.tsx
384
+ import { jsx as jsx9 } from "react/jsx-runtime";
385
+ var Youtube = ({ videoId, className }) => {
386
+ return /* @__PURE__ */ jsx9("div", { className: `youtube ${className || ""}`, children: /* @__PURE__ */ jsx9(
387
+ "iframe",
388
+ {
389
+ src: `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1&showinfo=0&autohide=1&controls=1`,
390
+ title: "YouTube video player",
391
+ frameBorder: "0",
392
+ allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
393
+ allowFullScreen: true
394
+ }
395
+ ) });
396
+ };
397
+
398
+ // src/core/server.ts
399
+ function createCoreServerMdxComponents() {
400
+ return {
401
+ Button,
402
+ Card,
403
+ CardGroup,
404
+ Kbd,
405
+ kbd: Kbd,
406
+ Note,
407
+ Stepper,
408
+ StepperItem,
409
+ Youtube,
410
+ Release,
411
+ Changes,
412
+ a: Link
413
+ };
414
+ }
415
+ export {
416
+ Button,
417
+ Card,
418
+ CardGroup,
419
+ Changes,
420
+ Kbd,
421
+ Link,
422
+ Note,
423
+ Release,
424
+ Stepper,
425
+ StepperItem,
426
+ Youtube,
427
+ createCoreServerMdxComponents
428
+ };