fumadocs-ui 16.4.1 → 16.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/preset.css +2 -4
- package/dist/_virtual/rolldown_runtime.js +36 -0
- package/dist/components/accordion.d.ts +24 -7
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +65 -38
- package/dist/components/accordion.js.map +1 -0
- package/dist/components/banner.d.ts +33 -22
- package/dist/components/banner.d.ts.map +1 -1
- package/dist/components/banner.js +63 -47
- package/dist/components/banner.js.map +1 -0
- package/dist/components/callout.d.ts +41 -17
- package/dist/components/callout.d.ts.map +1 -1
- package/dist/components/callout.js +57 -28
- package/dist/components/callout.js.map +1 -0
- package/dist/components/card.d.ts +19 -9
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +39 -8
- package/dist/components/card.js.map +1 -0
- package/dist/components/codeblock.d.ts +61 -40
- package/dist/components/codeblock.d.ts.map +1 -1
- package/dist/components/codeblock.js +116 -58
- package/dist/components/codeblock.js.map +1 -0
- package/dist/components/dialog/search-algolia.d.ts +37 -23
- package/dist/components/dialog/search-algolia.d.ts.map +1 -1
- package/dist/components/dialog/search-algolia.js +64 -31
- package/dist/components/dialog/search-algolia.js.map +1 -0
- package/dist/components/dialog/search-default.d.ts +42 -27
- package/dist/components/dialog/search-default.d.ts.map +1 -1
- package/dist/components/dialog/search-default.js +64 -38
- package/dist/components/dialog/search-default.js.map +1 -0
- package/dist/components/dialog/search-orama.d.ts +41 -25
- package/dist/components/dialog/search-orama.d.ts.map +1 -1
- package/dist/components/dialog/search-orama.js +68 -35
- package/dist/components/dialog/search-orama.js.map +1 -0
- package/dist/components/dialog/search.d.ts +103 -64
- package/dist/components/dialog/search.d.ts.map +1 -1
- package/dist/components/dialog/search.js +264 -185
- package/dist/components/dialog/search.js.map +1 -0
- package/dist/components/dynamic-codeblock.d.ts +30 -19
- package/dist/components/dynamic-codeblock.d.ts.map +1 -1
- package/dist/components/dynamic-codeblock.js +60 -27
- package/dist/components/dynamic-codeblock.js.map +1 -0
- package/dist/components/files.d.ts +32 -16
- package/dist/components/files.d.ts.map +1 -1
- package/dist/components/files.js +40 -14
- package/dist/components/files.js.map +1 -0
- package/dist/components/github-info.d.ts +18 -7
- package/dist/components/github-info.d.ts.map +1 -1
- package/dist/components/github-info.js +63 -48
- package/dist/components/github-info.js.map +1 -0
- package/dist/components/heading.d.ts +11 -4
- package/dist/components/heading.d.ts.map +1 -1
- package/dist/components/heading.js +28 -8
- package/dist/components/heading.js.map +1 -0
- package/dist/components/image-zoom-CtfZieBH.css +80 -0
- package/dist/components/image-zoom-CtfZieBH.css.map +1 -0
- package/dist/components/image-zoom.d.ts +23 -14
- package/dist/components/image-zoom.d.ts.map +1 -1
- package/dist/components/image-zoom.js +32 -19
- package/dist/components/image-zoom.js.map +1 -0
- package/dist/components/image-zoom2.js +1 -0
- package/dist/components/inline-toc.d.ts +14 -6
- package/dist/components/inline-toc.d.ts.map +1 -1
- package/dist/components/inline-toc.js +28 -8
- package/dist/components/inline-toc.js.map +1 -0
- package/dist/components/sidebar/base.d.ts +100 -65
- package/dist/components/sidebar/base.d.ts.map +1 -1
- package/dist/components/sidebar/base.js +256 -180
- package/dist/components/sidebar/base.js.map +1 -0
- package/dist/components/sidebar/link-item.d.ts +23 -10
- package/dist/components/sidebar/link-item.d.ts.map +1 -1
- package/dist/components/sidebar/link-item.js +32 -12
- package/dist/components/sidebar/link-item.js.map +1 -0
- package/dist/components/sidebar/page-tree.d.ts +28 -17
- package/dist/components/sidebar/page-tree.d.ts.map +1 -1
- package/dist/components/sidebar/page-tree.js +57 -33
- package/dist/components/sidebar/page-tree.js.map +1 -0
- package/dist/components/sidebar/tabs/dropdown.d.ts +18 -9
- package/dist/components/sidebar/tabs/dropdown.d.ts.map +1 -1
- package/dist/components/sidebar/tabs/dropdown.js +75 -31
- package/dist/components/sidebar/tabs/dropdown.js.map +1 -0
- package/dist/components/sidebar/tabs/index.d.ts +24 -18
- package/dist/components/sidebar/tabs/index.d.ts.map +1 -1
- package/dist/components/sidebar/tabs/index.js +45 -45
- package/dist/components/sidebar/tabs/index.js.map +1 -0
- package/dist/components/steps.d.ts +16 -7
- package/dist/components/steps.d.ts.map +1 -1
- package/dist/components/steps.js +17 -5
- package/dist/components/steps.js.map +1 -0
- package/dist/components/tabs.d.ts +49 -28
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +88 -51
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/toc/clerk.d.ts +1 -2
- package/dist/components/toc/clerk.js +12 -1
- package/dist/components/toc/clerk.js.map +1 -0
- package/dist/components/toc/default.d.ts +1 -2
- package/dist/components/toc/default.js +12 -1
- package/dist/components/toc/default.js.map +1 -0
- package/dist/components/toc/index.d.ts +1 -2
- package/dist/components/toc/index.js +12 -1
- package/dist/components/toc/index.js.map +1 -0
- package/dist/components/type-table.d.ts +36 -29
- package/dist/components/type-table.d.ts.map +1 -1
- package/dist/components/type-table.js +106 -25
- package/dist/components/type-table.js.map +1 -0
- package/dist/components/ui/accordion.d.ts +31 -7
- package/dist/components/ui/accordion.d.ts.map +1 -1
- package/dist/components/ui/accordion.js +40 -14
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/button.d.ts +12 -7
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/button.js +21 -18
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/collapsible.d.ts +12 -8
- package/dist/components/ui/collapsible.d.ts.map +1 -1
- package/dist/components/ui/collapsible.js +21 -11
- package/dist/components/ui/collapsible.js.map +1 -0
- package/dist/components/ui/navigation-menu.d.ts +8 -5
- package/dist/components/ui/navigation-menu.d.ts.map +1 -1
- package/dist/components/ui/navigation-menu.js +36 -9
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/popover.d.ts +6 -3
- package/dist/components/ui/popover.d.ts.map +1 -1
- package/dist/components/ui/popover.js +19 -6
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/scroll-area.d.ts +7 -4
- package/dist/components/ui/scroll-area.d.ts.map +1 -1
- package/dist/components/ui/scroll-area.js +33 -7
- package/dist/components/ui/scroll-area.js.map +1 -0
- package/dist/components/ui/tabs.d.ts +37 -19
- package/dist/components/ui/tabs.d.ts.map +1 -1
- package/dist/components/ui/tabs.js +75 -73
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/contexts/i18n.d.ts +1 -2
- package/dist/contexts/i18n.js +12 -1
- package/dist/contexts/i18n.js.map +1 -0
- package/dist/contexts/search.d.ts +7 -1
- package/dist/contexts/search.d.ts.map +1 -1
- package/dist/contexts/search.js +12 -1
- package/dist/contexts/search.js.map +1 -0
- package/dist/contexts/tree.d.ts +1 -2
- package/dist/contexts/tree.js +12 -1
- package/dist/contexts/tree.js.map +1 -0
- package/dist/i18n.d.ts +1 -2
- package/dist/i18n.js +3 -1
- package/dist/layouts/docs/client.d.ts +30 -13
- package/dist/layouts/docs/client.d.ts.map +1 -1
- package/dist/layouts/docs/client.js +61 -34
- package/dist/layouts/docs/client.js.map +1 -0
- package/dist/layouts/docs/index.d.ts +57 -33
- package/dist/layouts/docs/index.d.ts.map +1 -1
- package/dist/layouts/docs/index.js +178 -68
- package/dist/layouts/docs/index.js.map +1 -0
- package/dist/layouts/docs/page/client.d.ts +43 -21
- package/dist/layouts/docs/page/client.d.ts.map +1 -1
- package/dist/layouts/docs/page/client.js +213 -105
- package/dist/layouts/docs/page/client.js.map +1 -0
- package/dist/layouts/docs/page/index.d.ts +82 -46
- package/dist/layouts/docs/page/index.d.ts.map +1 -1
- package/dist/layouts/docs/page/index.js +98 -45
- package/dist/layouts/docs/page/index.js.map +1 -0
- package/dist/layouts/docs/sidebar.d.ts +57 -16
- package/dist/layouts/docs/sidebar.d.ts.map +1 -1
- package/dist/layouts/docs/sidebar.js +135 -82
- package/dist/layouts/docs/sidebar.js.map +1 -0
- package/dist/layouts/home/client.d.ts +18 -5
- package/dist/layouts/home/client.d.ts.map +1 -1
- package/dist/layouts/home/client.js +252 -103
- package/dist/layouts/home/client.js.map +1 -0
- package/dist/layouts/home/index.d.ts +15 -10
- package/dist/layouts/home/index.d.ts.map +1 -1
- package/dist/layouts/home/index.js +24 -7
- package/dist/layouts/home/index.js.map +1 -0
- package/dist/layouts/home/navbar.d.ts +13 -6
- package/dist/layouts/home/navbar.d.ts.map +1 -1
- package/dist/layouts/home/navbar.js +34 -12
- package/dist/layouts/home/navbar.js.map +1 -0
- package/dist/layouts/notebook/client.d.ts +44 -20
- package/dist/layouts/notebook/client.d.ts.map +1 -1
- package/dist/layouts/notebook/client.js +148 -93
- package/dist/layouts/notebook/client.js.map +1 -0
- package/dist/layouts/notebook/index.d.ts +34 -30
- package/dist/layouts/notebook/index.d.ts.map +1 -1
- package/dist/layouts/notebook/index.js +216 -90
- package/dist/layouts/notebook/index.js.map +1 -0
- package/dist/layouts/notebook/page/client.d.ts +43 -21
- package/dist/layouts/notebook/page/client.d.ts.map +1 -1
- package/dist/layouts/notebook/page/client.js +213 -105
- package/dist/layouts/notebook/page/client.js.map +1 -0
- package/dist/layouts/notebook/page/index.d.ts +82 -46
- package/dist/layouts/notebook/page/index.d.ts.map +1 -1
- package/dist/layouts/notebook/page/index.js +98 -45
- package/dist/layouts/notebook/page/index.js.map +1 -0
- package/dist/layouts/notebook/sidebar.d.ts +62 -20
- package/dist/layouts/notebook/sidebar.d.ts.map +1 -1
- package/dist/layouts/notebook/sidebar.js +130 -88
- package/dist/layouts/notebook/sidebar.js.map +1 -0
- package/dist/layouts/shared/index.d.ts +62 -50
- package/dist/layouts/shared/index.d.ts.map +1 -1
- package/dist/layouts/shared/index.js +36 -20
- package/dist/layouts/shared/index.js.map +1 -0
- package/dist/layouts/shared/language-toggle.d.ts +9 -4
- package/dist/layouts/shared/language-toggle.d.ts.map +1 -1
- package/dist/layouts/shared/language-toggle.js +44 -21
- package/dist/layouts/shared/language-toggle.js.map +1 -0
- package/dist/layouts/shared/search-toggle.d.ts +20 -8
- package/dist/layouts/shared/search-toggle.d.ts.map +1 -1
- package/dist/layouts/shared/search-toggle.js +53 -24
- package/dist/layouts/shared/search-toggle.js.map +1 -0
- package/dist/layouts/shared/theme-toggle.d.ts +13 -4
- package/dist/layouts/shared/theme-toggle.d.ts.map +1 -1
- package/dist/layouts/shared/theme-toggle.js +58 -34
- package/dist/layouts/shared/theme-toggle.js.map +1 -0
- package/dist/mdx.d.ts +34 -29
- package/dist/mdx.d.ts.map +1 -1
- package/dist/mdx.js +68 -34
- package/dist/mdx.js.map +1 -0
- package/dist/mdx.server.d.ts +9 -5
- package/dist/mdx.server.d.ts.map +1 -1
- package/dist/mdx.server.js +21 -13
- package/dist/mdx.server.js.map +1 -0
- package/dist/og.d.ts +1 -2
- package/dist/og.js +3 -1
- package/dist/page.d.ts +30 -20
- package/dist/page.d.ts.map +1 -1
- package/dist/page.js +34 -18
- package/dist/page.js.map +1 -0
- package/dist/provider/base.d.ts +43 -33
- package/dist/provider/base.d.ts.map +1 -1
- package/dist/provider/base.js +37 -17
- package/dist/provider/base.js.map +1 -0
- package/dist/provider/next.d.ts +20 -12
- package/dist/provider/next.d.ts.map +1 -1
- package/dist/provider/next.js +19 -5
- package/dist/provider/next.js.map +1 -0
- package/dist/provider/react-router.d.ts +20 -12
- package/dist/provider/react-router.d.ts.map +1 -1
- package/dist/provider/react-router.js +19 -5
- package/dist/provider/react-router.js.map +1 -0
- package/dist/provider/tanstack.d.ts +20 -12
- package/dist/provider/tanstack.d.ts.map +1 -1
- package/dist/provider/tanstack.js +19 -5
- package/dist/provider/tanstack.js.map +1 -0
- package/dist/provider/waku.d.ts +20 -12
- package/dist/provider/waku.d.ts.map +1 -1
- package/dist/provider/waku.js +19 -5
- package/dist/provider/waku.js.map +1 -0
- package/dist/style.css +11 -13
- package/dist/utils/use-copy-button.d.ts +1 -2
- package/dist/utils/use-copy-button.js +3 -1
- package/dist/utils/use-footer-items.d.ts +1 -2
- package/dist/utils/use-footer-items.js +3 -1
- package/dist/utils/use-is-scroll-top.d.ts +1 -2
- package/dist/utils/use-is-scroll-top.js +3 -1
- package/package.json +51 -52
- package/dist/components/toc/clerk.d.ts.map +0 -1
- package/dist/components/toc/default.d.ts.map +0 -1
- package/dist/components/toc/index.d.ts.map +0 -1
- package/dist/contexts/i18n.d.ts.map +0 -1
- package/dist/contexts/tree.d.ts.map +0 -1
- package/dist/i18n.d.ts.map +0 -1
- package/dist/og.d.ts.map +0 -1
- package/dist/utils/use-copy-button.d.ts.map +0 -1
- package/dist/utils/use-footer-items.d.ts.map +0 -1
- package/dist/utils/use-is-scroll-top.d.ts.map +0 -1
package/css/preset.css
CHANGED
|
@@ -10,10 +10,8 @@
|
|
|
10
10
|
@source '../dist/layouts/shared/**/*.js';
|
|
11
11
|
|
|
12
12
|
@theme {
|
|
13
|
-
--animate-fd-collapsible-down: fd-collapsible-down 150ms
|
|
14
|
-
|
|
15
|
-
--animate-fd-collapsible-up: fd-collapsible-up 150ms
|
|
16
|
-
cubic-bezier(0.45, 0, 0.55, 1);
|
|
13
|
+
--animate-fd-collapsible-down: fd-collapsible-down 150ms cubic-bezier(0.45, 0, 0.55, 1);
|
|
14
|
+
--animate-fd-collapsible-up: fd-collapsible-up 150ms cubic-bezier(0.45, 0, 0.55, 1);
|
|
17
15
|
|
|
18
16
|
--animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
|
|
19
17
|
--animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
//#region rolldown:runtime
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __exportAll = (all, symbols) => {
|
|
7
|
+
let target = {};
|
|
8
|
+
for (var name in all) {
|
|
9
|
+
__defProp(target, name, {
|
|
10
|
+
get: all[name],
|
|
11
|
+
enumerable: true
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
if (symbols) {
|
|
15
|
+
__defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
16
|
+
}
|
|
17
|
+
return target;
|
|
18
|
+
};
|
|
19
|
+
var __copyProps = (to, from, except, desc) => {
|
|
20
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
21
|
+
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
22
|
+
key = keys[i];
|
|
23
|
+
if (!__hasOwnProp.call(to, key) && key !== except) {
|
|
24
|
+
__defProp(to, key, {
|
|
25
|
+
get: ((k) => from[k]).bind(null, key),
|
|
26
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
return to;
|
|
32
|
+
};
|
|
33
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
34
|
+
|
|
35
|
+
//#endregion
|
|
36
|
+
export { __exportAll, __reExport };
|
|
@@ -1,8 +1,25 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { Accordion as Accordion$1, AccordionItem } from "./ui/accordion.js";
|
|
2
|
+
import * as react_jsx_runtime130 from "react/jsx-runtime";
|
|
3
|
+
import { ComponentProps, ReactNode } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/accordion.d.ts
|
|
6
|
+
declare function Accordions({
|
|
7
|
+
type,
|
|
8
|
+
ref,
|
|
9
|
+
className,
|
|
10
|
+
defaultValue,
|
|
11
|
+
...props
|
|
12
|
+
}: ComponentProps<typeof Accordion$1>): react_jsx_runtime130.JSX.Element;
|
|
13
|
+
declare function Accordion({
|
|
14
|
+
title,
|
|
15
|
+
id,
|
|
16
|
+
value,
|
|
17
|
+
children,
|
|
18
|
+
...props
|
|
19
|
+
}: Omit<ComponentProps<typeof AccordionItem>, 'value' | 'title'> & {
|
|
20
|
+
title: string | ReactNode;
|
|
21
|
+
value?: string;
|
|
22
|
+
}): react_jsx_runtime130.JSX.Element;
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Accordion, Accordions };
|
|
8
25
|
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.d.ts","
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/components/accordion.tsx"],"sourcesContent":[],"mappings":";;;;;iBAgBgB,UAAA;;;;;;GAMb,sBAAsB,eAAK,oBAAA,CAAA,GAAA,CAAA;iBAoCd,SAAA;;;;;;GAMb,KAAK,sBAAsB;kBACZ;EAjDF,KAAA,CAAA,EAAA,MAAU;CACxB,CAAA,EAkDD,oBAAA,CAAA,GAAA,CAAA,OAlDC"}
|
|
@@ -1,43 +1,70 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { cn } from
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
2
|
+
|
|
3
|
+
import { buttonVariants } from "./ui/button.js";
|
|
4
|
+
import { Accordion as Accordion$1, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
|
|
5
|
+
import { cn } from "@fumadocs/ui/cn";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Check, Link } from "lucide-react";
|
|
8
|
+
import { useEffect, useRef, useState } from "react";
|
|
9
|
+
import { useCopyButton } from "@fumadocs/ui/hooks/use-copy-button";
|
|
10
|
+
import { mergeRefs } from "@fumadocs/ui/merge-refs";
|
|
11
|
+
|
|
12
|
+
//#region src/components/accordion.tsx
|
|
13
|
+
function Accordions({ type = "single", ref, className, defaultValue, ...props }) {
|
|
14
|
+
const rootRef = useRef(null);
|
|
15
|
+
const composedRef = mergeRefs(ref, rootRef);
|
|
16
|
+
const [value, setValue] = useState(() => type === "single" ? defaultValue ?? "" : defaultValue ?? []);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const id = window.location.hash.substring(1);
|
|
19
|
+
const element = rootRef.current;
|
|
20
|
+
if (!element || id.length === 0) return;
|
|
21
|
+
const selected = document.getElementById(id);
|
|
22
|
+
if (!selected || !element.contains(selected)) return;
|
|
23
|
+
const value$1 = selected.getAttribute("data-accordion-value");
|
|
24
|
+
if (value$1) setValue((prev) => typeof prev === "string" ? value$1 : [value$1, ...prev]);
|
|
25
|
+
}, []);
|
|
26
|
+
return /* @__PURE__ */ jsx(Accordion$1, {
|
|
27
|
+
type,
|
|
28
|
+
ref: composedRef,
|
|
29
|
+
value,
|
|
30
|
+
onValueChange: setValue,
|
|
31
|
+
collapsible: type === "single" ? true : void 0,
|
|
32
|
+
className: cn("divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card", className),
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
29
35
|
}
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
function Accordion({ title, id, value = String(title), children, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsxs(AccordionItem, {
|
|
38
|
+
value,
|
|
39
|
+
...props,
|
|
40
|
+
children: [/* @__PURE__ */ jsxs(AccordionHeader, {
|
|
41
|
+
id,
|
|
42
|
+
"data-accordion-value": value,
|
|
43
|
+
children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: title }), id ? /* @__PURE__ */ jsx(CopyButton, { id }) : null]
|
|
44
|
+
}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
|
|
45
|
+
className: "px-4 pb-2 text-[0.9375rem] prose-no-margin",
|
|
46
|
+
children
|
|
47
|
+
}) })]
|
|
48
|
+
});
|
|
32
49
|
}
|
|
33
50
|
function CopyButton({ id }) {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
51
|
+
const [checked, onClick] = useCopyButton(() => {
|
|
52
|
+
const url = new URL(window.location.href);
|
|
53
|
+
url.hash = id;
|
|
54
|
+
return navigator.clipboard.writeText(url.toString());
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ jsx("button", {
|
|
57
|
+
type: "button",
|
|
58
|
+
"aria-label": "Copy Link",
|
|
59
|
+
className: cn(buttonVariants({
|
|
60
|
+
color: "ghost",
|
|
61
|
+
className: "text-fd-muted-foreground me-2"
|
|
62
|
+
})),
|
|
63
|
+
onClick,
|
|
64
|
+
children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Link, { className: "size-3.5" })
|
|
65
|
+
});
|
|
43
66
|
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
export { Accordion, Accordions };
|
|
70
|
+
//# sourceMappingURL=accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.js","names":["value","Root","LinkIcon"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Link as LinkIcon } from 'lucide-react';\nimport { ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { cn } from '@fumadocs/ui/cn';\nimport { useCopyButton } from '@fumadocs/ui/hooks/use-copy-button';\nimport { buttonVariants } from '@/components/ui/button';\nimport { mergeRefs } from '@fumadocs/ui/merge-refs';\nimport {\n Accordion as Root,\n AccordionContent,\n AccordionHeader,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\n\nexport function Accordions({\n type = 'single',\n ref,\n className,\n defaultValue,\n ...props\n}: ComponentProps<typeof Root>) {\n const rootRef = useRef<HTMLDivElement>(null);\n const composedRef = mergeRefs(ref, rootRef);\n const [value, setValue] = useState<string | string[]>(() =>\n type === 'single' ? (defaultValue ?? '') : (defaultValue ?? []),\n );\n\n useEffect(() => {\n const id = window.location.hash.substring(1);\n const element = rootRef.current;\n if (!element || id.length === 0) return;\n\n const selected = document.getElementById(id);\n if (!selected || !element.contains(selected)) return;\n const value = selected.getAttribute('data-accordion-value');\n\n if (value) setValue((prev) => (typeof prev === 'string' ? value : [value, ...prev]));\n }, []);\n\n return (\n // @ts-expect-error -- Multiple types\n <Root\n type={type}\n ref={composedRef}\n value={value}\n onValueChange={setValue}\n collapsible={type === 'single' ? true : undefined}\n className={cn(\n 'divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Accordion({\n title,\n id,\n value = String(title),\n children,\n ...props\n}: Omit<ComponentProps<typeof AccordionItem>, 'value' | 'title'> & {\n title: string | ReactNode;\n value?: string;\n}) {\n return (\n <AccordionItem value={value} {...props}>\n <AccordionHeader id={id} data-accordion-value={value}>\n <AccordionTrigger>{title}</AccordionTrigger>\n {id ? <CopyButton id={id} /> : null}\n </AccordionHeader>\n <AccordionContent>\n <div className=\"px-4 pb-2 text-[0.9375rem] prose-no-margin\">{children}</div>\n </AccordionContent>\n </AccordionItem>\n );\n}\n\nfunction CopyButton({ id }: { id: string }) {\n const [checked, onClick] = useCopyButton(() => {\n const url = new URL(window.location.href);\n url.hash = id;\n\n return navigator.clipboard.writeText(url.toString());\n });\n\n return (\n <button\n type=\"button\"\n aria-label=\"Copy Link\"\n className={cn(\n buttonVariants({\n color: 'ghost',\n className: 'text-fd-muted-foreground me-2',\n }),\n )}\n onClick={onClick}\n >\n {checked ? <Check className=\"size-3.5\" /> : <LinkIcon className=\"size-3.5\" />}\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,WAAW,EACzB,OAAO,UACP,KACA,WACA,cACA,GAAG,SAC2B;CAC9B,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,UAAU,KAAK,QAAQ;CAC3C,MAAM,CAAC,OAAO,YAAY,eACxB,SAAS,WAAY,gBAAgB,KAAO,gBAAgB,EAAE,CAC/D;AAED,iBAAgB;EACd,MAAM,KAAK,OAAO,SAAS,KAAK,UAAU,EAAE;EAC5C,MAAM,UAAU,QAAQ;AACxB,MAAI,CAAC,WAAW,GAAG,WAAW,EAAG;EAEjC,MAAM,WAAW,SAAS,eAAe,GAAG;AAC5C,MAAI,CAAC,YAAY,CAAC,QAAQ,SAAS,SAAS,CAAE;EAC9C,MAAMA,UAAQ,SAAS,aAAa,uBAAuB;AAE3D,MAAIA,QAAO,WAAU,SAAU,OAAO,SAAS,WAAWA,UAAQ,CAACA,SAAO,GAAG,KAAK,CAAE;IACnF,EAAE,CAAC;AAEN,QAEE,oBAACC;EACO;EACN,KAAK;EACE;EACP,eAAe;EACf,aAAa,SAAS,WAAW,OAAO;EACxC,WAAW,GACT,0EACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAgB,UAAU,EACxB,OACA,IACA,QAAQ,OAAO,MAAM,EACrB,UACA,GAAG,SAIF;AACD,QACE,qBAAC;EAAqB;EAAO,GAAI;aAC/B,qBAAC;GAAoB;GAAI,wBAAsB;cAC7C,oBAAC,8BAAkB,QAAyB,EAC3C,KAAK,oBAAC,cAAe,KAAM,GAAG;IACf,EAClB,oBAAC,8BACC,oBAAC;GAAI,WAAU;GAA8C;IAAe,GAC3D;GACL;;AAIpB,SAAS,WAAW,EAAE,MAAsB;CAC1C,MAAM,CAAC,SAAS,WAAW,oBAAoB;EAC7C,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,KAAK;AACzC,MAAI,OAAO;AAEX,SAAO,UAAU,UAAU,UAAU,IAAI,UAAU,CAAC;GACpD;AAEF,QACE,oBAAC;EACC,MAAK;EACL,cAAW;EACX,WAAW,GACT,eAAe;GACb,OAAO;GACP,WAAW;GACZ,CAAC,CACH;EACQ;YAER,UAAU,oBAAC,SAAM,WAAU,aAAa,GAAG,oBAACC,QAAS,WAAU,aAAa;GACtE"}
|
|
@@ -1,24 +1,35 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react_jsx_runtime121 from "react/jsx-runtime";
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/banner.d.ts
|
|
2
5
|
type BannerVariant = 'rainbow' | 'normal';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
declare function Banner({
|
|
7
|
+
id,
|
|
8
|
+
variant,
|
|
9
|
+
changeLayout,
|
|
10
|
+
height,
|
|
11
|
+
rainbowColors,
|
|
12
|
+
...props
|
|
13
|
+
}: HTMLAttributes<HTMLDivElement> & {
|
|
14
|
+
/**
|
|
15
|
+
* @defaultValue 3rem
|
|
16
|
+
*/
|
|
17
|
+
height?: string;
|
|
18
|
+
/**
|
|
19
|
+
* @defaultValue 'normal'
|
|
20
|
+
*/
|
|
21
|
+
variant?: BannerVariant;
|
|
22
|
+
/**
|
|
23
|
+
* For rainbow variant only, customise the colors
|
|
24
|
+
*/
|
|
25
|
+
rainbowColors?: string[];
|
|
26
|
+
/**
|
|
27
|
+
* Change Fumadocs layout styles
|
|
28
|
+
*
|
|
29
|
+
* @defaultValue true
|
|
30
|
+
*/
|
|
31
|
+
changeLayout?: boolean;
|
|
32
|
+
}): react_jsx_runtime121.JSX.Element | null;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { Banner };
|
|
24
35
|
//# sourceMappingURL=banner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.d.ts","
|
|
1
|
+
{"version":3,"file":"banner.d.ts","names":[],"sources":["../../src/components/banner.tsx"],"sourcesContent":[],"mappings":";;;;KAOK,aAAA;iBAEW,MAAA;;;;;;;GAYb,eAAe;;AAnB+C;AAOjE;EACE,MAAA,CAAA,EAAA,MAAA;EACA;;;EAGA,OAAA,CAAA,EAgBU,aAhBV;EAOgB;;;EAsBjB,aAAA,CAAA,EAAA,MAAA,EAAA;EAAA;;;;;;IAAA,oBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,54 +1,70 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
|
|
3
|
+
import { buttonVariants } from "./ui/button.js";
|
|
4
|
+
import { cn } from "@fumadocs/ui/cn";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { X } from "lucide-react";
|
|
7
|
+
import { useEffect, useState } from "react";
|
|
8
|
+
|
|
9
|
+
//#region src/components/banner.tsx
|
|
10
|
+
function Banner({ id, variant = "normal", changeLayout = true, height = "3rem", rainbowColors = [
|
|
11
|
+
"rgba(0,149,255,0.56)",
|
|
12
|
+
"rgba(231,77,255,0.77)",
|
|
13
|
+
"rgba(255,0,0,0.73)",
|
|
14
|
+
"rgba(131,255,166,0.66)"
|
|
12
15
|
], ...props }) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
16
|
+
const [open, setOpen] = useState(true);
|
|
17
|
+
const globalKey = id ? `nd-banner-${id}` : null;
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (globalKey) setOpen(localStorage.getItem(globalKey) !== "true");
|
|
20
|
+
}, [globalKey]);
|
|
21
|
+
if (!open) return null;
|
|
22
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
23
|
+
id,
|
|
24
|
+
...props,
|
|
25
|
+
className: cn("sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium", variant === "normal" && "bg-fd-secondary", variant === "rainbow" && "bg-fd-background", !open && "hidden", props.className),
|
|
26
|
+
style: { height },
|
|
27
|
+
children: [
|
|
28
|
+
changeLayout && open ? /* @__PURE__ */ jsx("style", { children: globalKey ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }` : `:root { --fd-banner-height: ${height}; }` }) : null,
|
|
29
|
+
globalKey ? /* @__PURE__ */ jsx("style", { children: `.${globalKey} #${id} { display: none; }` }) : null,
|
|
30
|
+
globalKey ? /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');` } }) : null,
|
|
31
|
+
variant === "rainbow" ? flow({ colors: rainbowColors }) : null,
|
|
32
|
+
props.children,
|
|
33
|
+
id ? /* @__PURE__ */ jsx("button", {
|
|
34
|
+
type: "button",
|
|
35
|
+
"aria-label": "Close Banner",
|
|
36
|
+
onClick: () => {
|
|
37
|
+
setOpen(false);
|
|
38
|
+
if (globalKey) localStorage.setItem(globalKey, "true");
|
|
39
|
+
},
|
|
40
|
+
className: cn(buttonVariants({
|
|
41
|
+
color: "ghost",
|
|
42
|
+
className: "absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50",
|
|
43
|
+
size: "icon-sm"
|
|
44
|
+
})),
|
|
45
|
+
children: /* @__PURE__ */ jsx(X, {})
|
|
46
|
+
}) : null
|
|
47
|
+
]
|
|
48
|
+
});
|
|
40
49
|
}
|
|
41
|
-
const maskImage =
|
|
50
|
+
const maskImage = "linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)";
|
|
42
51
|
function flow({ colors }) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
|
|
53
|
+
className: "absolute inset-0 z-[-1]",
|
|
54
|
+
style: {
|
|
55
|
+
maskImage,
|
|
56
|
+
maskComposite: "intersect",
|
|
57
|
+
animation: "fd-moving-banner 20s linear infinite",
|
|
58
|
+
backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${i * 50 / colors.length}%`).join(", ")})`,
|
|
59
|
+
backgroundSize: "200% 100%",
|
|
60
|
+
filter: "saturate(2)"
|
|
61
|
+
}
|
|
62
|
+
}), /* @__PURE__ */ jsx("style", { children: `@keyframes fd-moving-banner {
|
|
51
63
|
from { background-position: 0% 0; }
|
|
52
64
|
to { background-position: 100% 0; }
|
|
53
|
-
}` })] })
|
|
65
|
+
}` })] });
|
|
54
66
|
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
export { Banner };
|
|
70
|
+
//# sourceMappingURL=banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner.js","names":[],"sources":["../../src/components/banner.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useEffect, useState } from 'react';\nimport { X } from 'lucide-react';\nimport { cn } from '@fumadocs/ui/cn';\nimport { buttonVariants } from '@/components/ui/button';\n\ntype BannerVariant = 'rainbow' | 'normal';\n\nexport function Banner({\n id,\n variant = 'normal',\n changeLayout = true,\n height = '3rem',\n rainbowColors = [\n 'rgba(0,149,255,0.56)',\n 'rgba(231,77,255,0.77)',\n 'rgba(255,0,0,0.73)',\n 'rgba(131,255,166,0.66)',\n ],\n ...props\n}: HTMLAttributes<HTMLDivElement> & {\n /**\n * @defaultValue 3rem\n */\n height?: string;\n\n /**\n * @defaultValue 'normal'\n */\n variant?: BannerVariant;\n\n /**\n * For rainbow variant only, customise the colors\n */\n rainbowColors?: string[];\n\n /**\n * Change Fumadocs layout styles\n *\n * @defaultValue true\n */\n changeLayout?: boolean;\n}) {\n const [open, setOpen] = useState(true);\n const globalKey = id ? `nd-banner-${id}` : null;\n\n useEffect(() => {\n if (globalKey) setOpen(localStorage.getItem(globalKey) !== 'true');\n }, [globalKey]);\n\n if (!open) return null;\n\n return (\n <div\n id={id}\n {...props}\n className={cn(\n 'sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium',\n variant === 'normal' && 'bg-fd-secondary',\n variant === 'rainbow' && 'bg-fd-background',\n !open && 'hidden',\n props.className,\n )}\n style={{\n height,\n }}\n >\n {changeLayout && open ? (\n <style>\n {globalKey\n ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }`\n : `:root { --fd-banner-height: ${height}; }`}\n </style>\n ) : null}\n {globalKey ? <style>{`.${globalKey} #${id} { display: none; }`}</style> : null}\n {globalKey ? (\n <script\n dangerouslySetInnerHTML={{\n __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,\n }}\n />\n ) : null}\n\n {variant === 'rainbow'\n ? flow({\n colors: rainbowColors,\n })\n : null}\n {props.children}\n {id ? (\n <button\n type=\"button\"\n aria-label=\"Close Banner\"\n onClick={() => {\n setOpen(false);\n if (globalKey) localStorage.setItem(globalKey, 'true');\n }}\n className={cn(\n buttonVariants({\n color: 'ghost',\n className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50',\n size: 'icon-sm',\n }),\n )}\n >\n <X />\n </button>\n ) : null}\n </div>\n );\n}\n\nconst maskImage =\n 'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';\n\nfunction flow({ colors }: { colors: string[] }) {\n return (\n <>\n <div\n className=\"absolute inset-0 z-[-1]\"\n style={\n {\n maskImage,\n maskComposite: 'intersect',\n animation: 'fd-moving-banner 20s linear infinite',\n backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${(i * 50) / colors.length}%`).join(', ')})`,\n backgroundSize: '200% 100%',\n filter: 'saturate(2)',\n } as object\n }\n />\n <style>\n {`@keyframes fd-moving-banner {\n from { background-position: 0% 0; }\n to { background-position: 100% 0; }\n }`}\n </style>\n </>\n );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,OAAO,EACrB,IACA,UAAU,UACV,eAAe,MACf,SAAS,QACT,gBAAgB;CACd;CACA;CACA;CACA;CACD,EACD,GAAG,SAuBF;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,KAAK,aAAa,OAAO;AAE3C,iBAAgB;AACd,MAAI,UAAW,SAAQ,aAAa,QAAQ,UAAU,KAAK,OAAO;IACjE,CAAC,UAAU,CAAC;AAEf,KAAI,CAAC,KAAM,QAAO;AAElB,QACE,qBAAC;EACK;EACJ,GAAI;EACJ,WAAW,GACT,oGACA,YAAY,YAAY,mBACxB,YAAY,aAAa,oBACzB,CAAC,QAAQ,UACT,MAAM,UACP;EACD,OAAO,EACL,QACD;;GAEA,gBAAgB,OACf,oBAAC,qBACE,YACG,cAAc,UAAU,0BAA0B,OAAO,OACzD,+BAA+B,OAAO,OACpC,GACN;GACH,YAAY,oBAAC,qBAAO,IAAI,UAAU,IAAI,GAAG,uBAA6B,GAAG;GACzE,YACC,oBAAC,YACC,yBAAyB,EACvB,QAAQ,6BAA6B,UAAU,yDAAyD,UAAU,MACnH,GACD,GACA;GAEH,YAAY,YACT,KAAK,EACH,QAAQ,eACT,CAAC,GACF;GACH,MAAM;GACN,KACC,oBAAC;IACC,MAAK;IACL,cAAW;IACX,eAAe;AACb,aAAQ,MAAM;AACd,SAAI,UAAW,cAAa,QAAQ,WAAW,OAAO;;IAExD,WAAW,GACT,eAAe;KACb,OAAO;KACP,WAAW;KACX,MAAM;KACP,CAAC,CACH;cAED,oBAAC,MAAI;KACE,GACP;;GACA;;AAIV,MAAM,YACJ;AAEF,SAAS,KAAK,EAAE,UAAgC;AAC9C,QACE,4CACE,oBAAC;EACC,WAAU;EACV,OACE;GACE;GACA,eAAe;GACf,WAAW;GACX,iBAAiB,oCAAoC,CAAC,GAAG,QAAQ,OAAO,GAAG,CAAC,KAAK,OAAO,MAAM,GAAG,MAAM,GAAI,IAAI,KAAM,OAAO,OAAO,GAAG,CAAC,KAAK,KAAK,CAAC;GAClJ,gBAAgB;GAChB,QAAQ;GACT;GAEH,EACF,oBAAC,qBACE;;;cAIK,IACP"}
|
|
@@ -1,19 +1,43 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import * as react_jsx_runtime19 from "react/jsx-runtime";
|
|
2
|
+
import { ComponentProps, ReactNode } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/callout.d.ts
|
|
5
|
+
type CalloutType = 'info' | 'warn' | 'error' | 'success' | 'warning' | 'idea';
|
|
6
|
+
declare function Callout({
|
|
7
|
+
children,
|
|
8
|
+
title,
|
|
9
|
+
...props
|
|
10
|
+
}: {
|
|
11
|
+
title?: ReactNode;
|
|
12
|
+
} & Omit<CalloutContainerProps, 'title'>): react_jsx_runtime19.JSX.Element;
|
|
13
|
+
interface CalloutContainerProps extends ComponentProps<'div'> {
|
|
14
|
+
/**
|
|
15
|
+
* @defaultValue info
|
|
16
|
+
*/
|
|
17
|
+
type?: CalloutType;
|
|
18
|
+
/**
|
|
19
|
+
* Force an icon
|
|
20
|
+
*/
|
|
21
|
+
icon?: ReactNode;
|
|
15
22
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
23
|
+
declare function CalloutContainer({
|
|
24
|
+
type: inputType,
|
|
25
|
+
icon,
|
|
26
|
+
children,
|
|
27
|
+
className,
|
|
28
|
+
style,
|
|
29
|
+
...props
|
|
30
|
+
}: CalloutContainerProps): react_jsx_runtime19.JSX.Element;
|
|
31
|
+
declare function CalloutTitle({
|
|
32
|
+
children,
|
|
33
|
+
className,
|
|
34
|
+
...props
|
|
35
|
+
}: ComponentProps<'p'>): react_jsx_runtime19.JSX.Element;
|
|
36
|
+
declare function CalloutDescription({
|
|
37
|
+
children,
|
|
38
|
+
className,
|
|
39
|
+
...props
|
|
40
|
+
}: ComponentProps<'p'>): react_jsx_runtime19.JSX.Element;
|
|
41
|
+
//#endregion
|
|
42
|
+
export { Callout, CalloutContainer, CalloutContainerProps, CalloutDescription, CalloutTitle, CalloutType };
|
|
19
43
|
//# sourceMappingURL=callout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.d.ts","
|
|
1
|
+
{"version":3,"file":"callout.d.ts","names":[],"sources":["../../src/components/callout.tsx"],"sourcesContent":[],"mappings":";;;;KAIY,WAAA;iBAII,OAAA;;;;AAJO;UAQV;AARb,CAAA,GAQ2B,IARf,CAQoB,qBART,EAAA,OAAA,CAAA,CAAA,EAQwC,mBAAA,CAAA,GAAA,CAAA,OARxC;AAIP,UAaC,qBAAA,SAA8B,cAbxB,CAAA,KAAA,CAAA,CAAA;EACrB;;;EAG8B,IAAA,CAAA,EAavB,WAbuB;EAAL;;;EASV,IAAA,CAAA,EASR,SATQ;;AASR,iBASO,gBAAA,CATP;EAAA,IAAA,EAUD,SAVC;EAAA,IAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAgBN,qBAhBM,CAAA,EAgBe,mBAAA,CAAA,GAAA,CAAA,OAhBf;AATsC,iBA0D/B,YAAA,CA1D+B;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA0DiB,cA1DjB,CAAA,GAAA,CAAA,CAAA,EA0DoC,mBAAA,CAAA,GAAA,CAAA,OA1DpC;AAAc,iBAkE7C,kBAAA,CAlE6C;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkES,cAlET,CAAA,GAAA,CAAA,CAAA,EAkE4B,mBAAA,CAAA,GAAA,CAAA,OAlE5B"}
|
|
@@ -1,34 +1,63 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { cn } from "@fumadocs/ui/cn";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { CircleCheck, CircleX, Info, Lightbulb, TriangleAlert } from "lucide-react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/callout.tsx
|
|
6
|
+
const iconClass = "size-5 -me-0.5 fill-(--callout-color) text-fd-card";
|
|
7
|
+
function Callout({ children, title, ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsxs(CalloutContainer, {
|
|
9
|
+
...props,
|
|
10
|
+
children: [title && /* @__PURE__ */ jsx(CalloutTitle, { children: title }), /* @__PURE__ */ jsx(CalloutDescription, { children })]
|
|
11
|
+
});
|
|
7
12
|
}
|
|
8
13
|
function resolveAlias(type) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return 'info';
|
|
13
|
-
return type;
|
|
14
|
+
if (type === "warn") return "warning";
|
|
15
|
+
if (type === "tip") return "info";
|
|
16
|
+
return type;
|
|
14
17
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
function CalloutContainer({ type: inputType = "info", icon, children, className, style, ...props }) {
|
|
19
|
+
const type = resolveAlias(inputType);
|
|
20
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
21
|
+
className: cn("flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md", className),
|
|
22
|
+
style: {
|
|
23
|
+
"--callout-color": `var(--color-fd-${type}, var(--color-fd-muted))`,
|
|
24
|
+
...style
|
|
25
|
+
},
|
|
26
|
+
...props,
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ jsx("div", {
|
|
29
|
+
role: "none",
|
|
30
|
+
className: "w-0.5 bg-(--callout-color)/50 rounded-sm"
|
|
31
|
+
}),
|
|
32
|
+
icon ?? {
|
|
33
|
+
info: /* @__PURE__ */ jsx(Info, { className: iconClass }),
|
|
34
|
+
warning: /* @__PURE__ */ jsx(TriangleAlert, { className: iconClass }),
|
|
35
|
+
error: /* @__PURE__ */ jsx(CircleX, { className: iconClass }),
|
|
36
|
+
success: /* @__PURE__ */ jsx(CircleCheck, { className: iconClass }),
|
|
37
|
+
idea: /* @__PURE__ */ jsx(Lightbulb, { className: "size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" })
|
|
38
|
+
}[type],
|
|
39
|
+
/* @__PURE__ */ jsx("div", {
|
|
40
|
+
className: "flex flex-col gap-2 min-w-0 flex-1",
|
|
41
|
+
children
|
|
42
|
+
})
|
|
43
|
+
]
|
|
44
|
+
});
|
|
28
45
|
}
|
|
29
|
-
|
|
30
|
-
|
|
46
|
+
function CalloutTitle({ children, className, ...props }) {
|
|
47
|
+
return /* @__PURE__ */ jsx("p", {
|
|
48
|
+
className: cn("font-medium my-0!", className),
|
|
49
|
+
...props,
|
|
50
|
+
children
|
|
51
|
+
});
|
|
31
52
|
}
|
|
32
|
-
|
|
33
|
-
|
|
53
|
+
function CalloutDescription({ children, className, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx("div", {
|
|
55
|
+
className: cn("text-fd-muted-foreground prose-no-margin empty:hidden", className),
|
|
56
|
+
...props,
|
|
57
|
+
children
|
|
58
|
+
});
|
|
34
59
|
}
|
|
60
|
+
|
|
61
|
+
//#endregion
|
|
62
|
+
export { Callout, CalloutContainer, CalloutDescription, CalloutTitle };
|
|
63
|
+
//# sourceMappingURL=callout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"callout.js","names":[],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { CircleCheck, CircleX, Info, Lightbulb, TriangleAlert } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@fumadocs/ui/cn';\n\nexport type CalloutType = 'info' | 'warn' | 'error' | 'success' | 'warning' | 'idea';\n\nconst iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-fd-card';\n\nexport function Callout({\n children,\n title,\n ...props\n}: { title?: ReactNode } & Omit<CalloutContainerProps, 'title'>) {\n return (\n <CalloutContainer {...props}>\n {title && <CalloutTitle>{title}</CalloutTitle>}\n <CalloutDescription>{children}</CalloutDescription>\n </CalloutContainer>\n );\n}\n\nexport interface CalloutContainerProps extends ComponentProps<'div'> {\n /**\n * @defaultValue info\n */\n type?: CalloutType;\n\n /**\n * Force an icon\n */\n icon?: ReactNode;\n}\n\nfunction resolveAlias(type: CalloutType) {\n if (type === 'warn') return 'warning';\n if ((type as unknown) === 'tip') return 'info';\n return type;\n}\n\nexport function CalloutContainer({\n type: inputType = 'info',\n icon,\n children,\n className,\n style,\n ...props\n}: CalloutContainerProps) {\n const type = resolveAlias(inputType);\n\n return (\n <div\n className={cn(\n 'flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md',\n className,\n )}\n style={\n {\n '--callout-color': `var(--color-fd-${type}, var(--color-fd-muted))`,\n ...style,\n } as object\n }\n {...props}\n >\n <div role=\"none\" className=\"w-0.5 bg-(--callout-color)/50 rounded-sm\" />\n {icon ??\n {\n info: <Info className={iconClass} />,\n warning: <TriangleAlert className={iconClass} />,\n error: <CircleX className={iconClass} />,\n success: <CircleCheck className={iconClass} />,\n idea: (\n <Lightbulb className=\"size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)\" />\n ),\n }[type]}\n <div className=\"flex flex-col gap-2 min-w-0 flex-1\">{children}</div>\n </div>\n );\n}\n\nexport function CalloutTitle({ children, className, ...props }: ComponentProps<'p'>) {\n return (\n <p className={cn('font-medium my-0!', className)} {...props}>\n {children}\n </p>\n );\n}\n\nexport function CalloutDescription({ children, className, ...props }: ComponentProps<'p'>) {\n return (\n <div\n className={cn('text-fd-muted-foreground prose-no-margin empty:hidden', className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;AAMA,MAAM,YAAY;AAElB,SAAgB,QAAQ,EACtB,UACA,OACA,GAAG,SAC4D;AAC/D,QACE,qBAAC;EAAiB,GAAI;aACnB,SAAS,oBAAC,0BAAc,QAAqB,EAC9C,oBAAC,sBAAoB,WAA8B;GAClC;;AAgBvB,SAAS,aAAa,MAAmB;AACvC,KAAI,SAAS,OAAQ,QAAO;AAC5B,KAAK,SAAqB,MAAO,QAAO;AACxC,QAAO;;AAGT,SAAgB,iBAAiB,EAC/B,MAAM,YAAY,QAClB,MACA,UACA,WACA,OACA,GAAG,SACqB;CACxB,MAAM,OAAO,aAAa,UAAU;AAEpC,QACE,qBAAC;EACC,WAAW,GACT,mGACA,UACD;EACD,OACE;GACE,mBAAmB,kBAAkB,KAAK;GAC1C,GAAG;GACJ;EAEH,GAAI;;GAEJ,oBAAC;IAAI,MAAK;IAAO,WAAU;KAA6C;GACvE,QACC;IACE,MAAM,oBAAC,QAAK,WAAW,YAAa;IACpC,SAAS,oBAAC,iBAAc,WAAW,YAAa;IAChD,OAAO,oBAAC,WAAQ,WAAW,YAAa;IACxC,SAAS,oBAAC,eAAY,WAAW,YAAa;IAC9C,MACE,oBAAC,aAAU,WAAU,iEAAiE;IAEzF,CAAC;GACJ,oBAAC;IAAI,WAAU;IAAsC;KAAe;;GAChE;;AAIV,SAAgB,aAAa,EAAE,UAAU,WAAW,GAAG,SAA8B;AACnF,QACE,oBAAC;EAAE,WAAW,GAAG,qBAAqB,UAAU;EAAE,GAAI;EACnD;GACC;;AAIR,SAAgB,mBAAmB,EAAE,UAAU,WAAW,GAAG,SAA8B;AACzF,QACE,oBAAC;EACC,WAAW,GAAG,yDAAyD,UAAU;EACjF,GAAI;EAEH;GACG"}
|