@hanzo/docs-radix-ui 16.4.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Fuma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Fumadocs UI
+
+The React.js docs framework.
+
+[Read Documentation](https://fumadocs.dev/docs/ui)

package/css/black.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/black.css';

package/css/catppuccin.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/catppuccin.css';

package/css/dusk.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/dusk.css';

package/css/layouts/docs.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/docs/**/*.js';

package/css/layouts/home.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/home/**/*.js';

package/css/layouts/notebook.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/notebook/**/*.js';

package/css/neutral.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/neutral.css';

package/css/ocean.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/ocean.css';

package/css/preset.css

@@ -0,0 +1,89 @@
+@import '@hanzo/docs-ui/css/base.css';
+
+/* TODO: remove them on next major */
+@import './layouts/docs.css';
+@import './layouts/home.css';
+@import './layouts/notebook.css';
+
+@source '../dist/*.js';
+@source '../dist/{components,contexts,provider,utils}/**/*.js';
+@source '../dist/layouts/shared/**/*.js';
+
+@theme {
+  --animate-fd-collapsible-down: fd-collapsible-down 150ms cubic-bezier(0.45, 0, 0.55, 1);
+  --animate-fd-collapsible-up: fd-collapsible-up 150ms cubic-bezier(0.45, 0, 0.55, 1);
+
+  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
+  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
+
+  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
+  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;
+
+  @keyframes fd-collapsible-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes fd-collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-accordion-down {
+    from {
+      height: 0;
+      opacity: 0.5;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes fd-accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes fd-nav-menu-in {
+    from {
+      opacity: 0;
+      height: 0px;
+    }
+    to {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+  }
+
+  @keyframes fd-nav-menu-out {
+    from {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+    to {
+      opacity: 0;
+      height: 0px;
+    }
+  }
+}
+
+@property --radix-collapsible-content-height {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}

package/css/purple.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/purple.css';

package/css/shadcn.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/shadcn.css';

package/css/solar.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/solar.css';

package/css/style.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+@import './neutral.css';
+@import './preset.css';
+
+@layer base {
+  body {
+    @apply flex flex-col min-h-screen;
+  }
+}

package/css/vitepress.css

@@ -0,0 +1 @@
+@import '@hanzo/docs-ui/css/colors/vitepress.css';

package/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1,36 @@
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+//#endregion
+export { __exportAll, __reExport };

package/dist/components/accordion.d.ts

@@ -0,0 +1,25 @@
+import { Accordion as Accordion$1, AccordionItem } from "./ui/accordion.js";
+import * as react_jsx_runtime93 from "react/jsx-runtime";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/accordion.d.ts
+declare function Accordions({
+  type,
+  ref,
+  className,
+  defaultValue,
+  ...props
+}: ComponentProps<typeof Accordion$1>): react_jsx_runtime93.JSX.Element;
+declare function Accordion({
+  title,
+  id,
+  value,
+  children,
+  ...props
+}: Omit<ComponentProps<typeof AccordionItem>, 'value' | 'title'> & {
+  title: string | ReactNode;
+  value?: string;
+}): react_jsx_runtime93.JSX.Element;
+//#endregion
+export { Accordion, Accordions };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/components/accordion.tsx"],"sourcesContent":[],"mappings":";;;;;iBAgBgB,UAAA;;;;;;GAMb,sBAAsB,eAAK,mBAAA,CAAA,GAAA,CAAA;iBAoCd,SAAA;;;;;;GAMb,KAAK,sBAAsB;kBACZ;EAjDF,KAAA,CAAA,EAAA,MAAU;CACxB,CAAA,EAkDD,mBAAA,CAAA,GAAA,CAAA,OAlDC"}

package/dist/components/accordion.js

@@ -0,0 +1,70 @@
+'use client';
+
+import { buttonVariants } from "./ui/button.js";
+import { Accordion as Accordion$1, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Link } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useCopyButton } from "@hanzo/docs-ui/hooks/use-copy-button";
+import { mergeRefs } from "@hanzo/docs-ui/merge-refs";
+
+//#region src/components/accordion.tsx
+function Accordions({ type = "single", ref, className, defaultValue, ...props }) {
+	const rootRef = useRef(null);
+	const composedRef = mergeRefs(ref, rootRef);
+	const [value, setValue] = useState(() => type === "single" ? defaultValue ?? "" : defaultValue ?? []);
+	useEffect(() => {
+		const id = window.location.hash.substring(1);
+		const element = rootRef.current;
+		if (!element || id.length === 0) return;
+		const selected = document.getElementById(id);
+		if (!selected || !element.contains(selected)) return;
+		const value$1 = selected.getAttribute("data-accordion-value");
+		if (value$1) setValue((prev) => typeof prev === "string" ? value$1 : [value$1, ...prev]);
+	}, []);
+	return /* @__PURE__ */ jsx(Accordion$1, {
+		type,
+		ref: composedRef,
+		value,
+		onValueChange: setValue,
+		collapsible: type === "single" ? true : void 0,
+		className: cn("divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card", className),
+		...props
+	});
+}
+function Accordion({ title, id, value = String(title), children, ...props }) {
+	return /* @__PURE__ */ jsxs(AccordionItem, {
+		value,
+		...props,
+		children: [/* @__PURE__ */ jsxs(AccordionHeader, {
+			id,
+			"data-accordion-value": value,
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: title }), id ? /* @__PURE__ */ jsx(CopyButton, { id }) : null]
+		}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "px-4 pb-2 text-[0.9375rem] prose-no-margin",
+			children
+		}) })]
+	});
+}
+function CopyButton({ id }) {
+	const [checked, onClick] = useCopyButton(() => {
+		const url = new URL(window.location.href);
+		url.hash = id;
+		return navigator.clipboard.writeText(url.toString());
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Copy Link",
+		className: cn(buttonVariants({
+			color: "ghost",
+			className: "text-fd-muted-foreground me-2"
+		})),
+		onClick,
+		children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Link, { className: "size-3.5" })
+	});
+}
+
+//#endregion
+export { Accordion, Accordions };
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -0,0 +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 '@hanzo/docs-ui/cn';\nimport { useCopyButton } from '@hanzo/docs-ui/hooks/use-copy-button';\nimport { buttonVariants } from '@/components/ui/button';\nimport { mergeRefs } from '@hanzo/docs-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"}

package/dist/components/banner.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime122 from "react/jsx-runtime";
+import { HTMLAttributes } from "react";
+
+//#region src/components/banner.d.ts
+type BannerVariant = 'rainbow' | 'normal';
+declare function Banner({
+  id,
+  variant,
+  changeLayout,
+  height,
+  rainbowColors,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  /**
+   * @defaultValue 3rem
+   */
+  height?: string;
+  /**
+   * @defaultValue 'normal'
+   */
+  variant?: BannerVariant;
+  /**
+   * For rainbow variant only, customise the colors
+   */
+  rainbowColors?: string[];
+  /**
+   * Change Fumadocs layout styles
+   *
+   * @defaultValue true
+   */
+  changeLayout?: boolean;
+}): react_jsx_runtime122.JSX.Element | null;
+//#endregion
+export { Banner };
+//# sourceMappingURL=banner.d.ts.map

package/dist/components/banner.d.ts.map

@@ -0,0 +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"}

package/dist/components/banner.js

@@ -0,0 +1,70 @@
+'use client';
+
+import { buttonVariants } from "./ui/button.js";
+import { cn } from "@hanzo/docs-ui/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+//#region src/components/banner.tsx
+function Banner({ id, variant = "normal", changeLayout = true, height = "3rem", rainbowColors = [
+	"rgba(0,149,255,0.56)",
+	"rgba(231,77,255,0.77)",
+	"rgba(255,0,0,0.73)",
+	"rgba(131,255,166,0.66)"
+], ...props }) {
+	const [open, setOpen] = useState(true);
+	const globalKey = id ? `nd-banner-${id}` : null;
+	useEffect(() => {
+		if (globalKey) setOpen(localStorage.getItem(globalKey) !== "true");
+	}, [globalKey]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		...props,
+		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),
+		style: { height },
+		children: [
+			changeLayout && open ? /* @__PURE__ */ jsx("style", { children: globalKey ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }` : `:root { --fd-banner-height: ${height}; }` }) : null,
+			globalKey ? /* @__PURE__ */ jsx("style", { children: `.${globalKey} #${id} { display: none; }` }) : null,
+			globalKey ? /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');` } }) : null,
+			variant === "rainbow" ? flow({ colors: rainbowColors }) : null,
+			props.children,
+			id ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close Banner",
+				onClick: () => {
+					setOpen(false);
+					if (globalKey) localStorage.setItem(globalKey, "true");
+				},
+				className: cn(buttonVariants({
+					color: "ghost",
+					className: "absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50",
+					size: "icon-sm"
+				})),
+				children: /* @__PURE__ */ jsx(X, {})
+			}) : null
+		]
+	});
+}
+const maskImage = "linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)";
+function flow({ colors }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 z-[-1]",
+		style: {
+			maskImage,
+			maskComposite: "intersect",
+			animation: "fd-moving-banner 20s linear infinite",
+			backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${i * 50 / colors.length}%`).join(", ")})`,
+			backgroundSize: "200% 100%",
+			filter: "saturate(2)"
+		}
+	}), /* @__PURE__ */ jsx("style", { children: `@keyframes fd-moving-banner {
+            from { background-position: 0% 0;  }
+            to { background-position: 100% 0;  }
+         }` })] });
+}
+
+//#endregion
+export { Banner };
+//# sourceMappingURL=banner.js.map

package/dist/components/banner.js.map

@@ -0,0 +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 '@hanzo/docs-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"}

package/dist/components/callout.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/callout.d.ts
+type CalloutType = 'info' | 'warn' | 'error' | 'success' | 'warning' | 'idea';
+declare function Callout({
+  children,
+  title,
+  ...props
+}: {
+  title?: ReactNode;
+} & Omit<CalloutContainerProps, 'title'>): react_jsx_runtime0.JSX.Element;
+interface CalloutContainerProps extends ComponentProps<'div'> {
+  /**
+   * @defaultValue info
+   */
+  type?: CalloutType;
+  /**
+   * Force an icon
+   */
+  icon?: ReactNode;
+}
+declare function CalloutContainer({
+  type: inputType,
+  icon,
+  children,
+  className,
+  style,
+  ...props
+}: CalloutContainerProps): react_jsx_runtime0.JSX.Element;
+declare function CalloutTitle({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
+declare function CalloutDescription({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Callout, CalloutContainer, CalloutContainerProps, CalloutDescription, CalloutTitle, CalloutType };
+//# sourceMappingURL=callout.d.ts.map

package/dist/components/callout.d.ts.map

@@ -0,0 +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,kBAAA,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,kBAAA,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,kBAAA,CAAA,GAAA,CAAA,OA1DpC;AAAc,iBAkE7C,kBAAA,CAlE6C;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkES,cAlET,CAAA,GAAA,CAAA,CAAA,EAkE4B,kBAAA,CAAA,GAAA,CAAA,OAlE5B"}

package/dist/components/callout.js

@@ -0,0 +1,63 @@
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleX, Info, Lightbulb, TriangleAlert } from "lucide-react";
+
+//#region src/components/callout.tsx
+const iconClass = "size-5 -me-0.5 fill-(--callout-color) text-fd-card";
+function Callout({ children, title, ...props }) {
+	return /* @__PURE__ */ jsxs(CalloutContainer, {
+		...props,
+		children: [title && /* @__PURE__ */ jsx(CalloutTitle, { children: title }), /* @__PURE__ */ jsx(CalloutDescription, { children })]
+	});
+}
+function resolveAlias(type) {
+	if (type === "warn") return "warning";
+	if (type === "tip") return "info";
+	return type;
+}
+function CalloutContainer({ type: inputType = "info", icon, children, className, style, ...props }) {
+	const type = resolveAlias(inputType);
+	return /* @__PURE__ */ jsxs("div", {
+		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),
+		style: {
+			"--callout-color": `var(--color-fd-${type}, var(--color-fd-muted))`,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "none",
+				className: "w-0.5 bg-(--callout-color)/50 rounded-sm"
+			}),
+			icon ?? {
+				info: /* @__PURE__ */ jsx(Info, { className: iconClass }),
+				warning: /* @__PURE__ */ jsx(TriangleAlert, { className: iconClass }),
+				error: /* @__PURE__ */ jsx(CircleX, { className: iconClass }),
+				success: /* @__PURE__ */ jsx(CircleCheck, { className: iconClass }),
+				idea: /* @__PURE__ */ jsx(Lightbulb, { className: "size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" })
+			}[type],
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2 min-w-0 flex-1",
+				children
+			})
+		]
+	});
+}
+function CalloutTitle({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("font-medium my-0!", className),
+		...props,
+		children
+	});
+}
+function CalloutDescription({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-fd-muted-foreground prose-no-margin empty:hidden", className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+export { Callout, CalloutContainer, CalloutDescription, CalloutTitle };
+//# sourceMappingURL=callout.js.map

package/dist/components/callout.js.map

@@ -0,0 +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 '@hanzo/docs-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"}

package/dist/components/card.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/card.d.ts
+declare function Cards(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime11.JSX.Element;
+type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  href?: string;
+  external?: boolean;
+};
+declare function Card({
+  icon,
+  title,
+  description,
+  ...props
+}: CardProps): react_jsx_runtime11.JSX.Element;
+//#endregion
+export { Card, CardProps, Cards };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":[],"mappings":";;;;iBAIgB,KAAA,QAAa,eAAe,kBAAe,mBAAA,CAAA,GAAA,CAAA;KAQ/C,SAAA,GAAY,KAAK,eAAe;SACnC;EATO,KAAA,EAUP,SAVY;EAAuB,WAAA,CAAA,EAW5B,SAX4B;EAAf,IAAA,CAAA,EAAA,MAAA;EAA8B,QAAA,CAAA,EAAA,OAAA;CAAA;AAQ/C,iBASI,IAAA,CATK;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EASwC,SATxC,CAAA,EASiD,mBAAA,CAAA,GAAA,CAAA,OATjD"}

package/dist/components/card.js

@@ -0,0 +1,41 @@
+import Link from "@hanzo/docs-core/link";
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/card.tsx
+function Cards(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("grid grid-cols-2 gap-3 @container", props.className),
+		children: props.children
+	});
+}
+function Card({ icon, title, description, ...props }) {
+	return /* @__PURE__ */ jsxs(props.href ? Link : "div", {
+		...props,
+		"data-card": true,
+		className: cn("block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full", props.href && "hover:bg-fd-accent/80", props.className),
+		children: [
+			icon ? /* @__PURE__ */ jsx("div", {
+				className: "not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("h3", {
+				className: "not-prose mb-1 text-sm font-medium",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "my-0! text-sm text-fd-muted-foreground",
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "text-sm text-fd-muted-foreground prose-no-margin empty:hidden",
+				children: props.children
+			})
+		]
+	});
+}
+
+//#endregion
+export { Card, Cards };
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import Link from '@hanzo/docs-core/link';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '@hanzo/docs-ui/cn';\n\nexport function Cards(props: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div {...props} className={cn('grid grid-cols-2 gap-3 @container', props.className)}>\n      {props.children}\n    </div>\n  );\n}\n\nexport type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {\n  icon?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n\n  href?: string;\n  external?: boolean;\n};\n\nexport function Card({ icon, title, description, ...props }: CardProps) {\n  const E = props.href ? Link : 'div';\n\n  return (\n    <E\n      {...props}\n      data-card\n      className={cn(\n        'block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full',\n        props.href && 'hover:bg-fd-accent/80',\n        props.className,\n      )}\n    >\n      {icon ? (\n        <div className=\"not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4\">\n          {icon}\n        </div>\n      ) : null}\n      <h3 className=\"not-prose mb-1 text-sm font-medium\">{title}</h3>\n      {description ? <p className=\"my-0! text-sm text-fd-muted-foreground\">{description}</p> : null}\n      <div className=\"text-sm text-fd-muted-foreground prose-no-margin empty:hidden\">\n        {props.children}\n      </div>\n    </E>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,MAAM,OAAuC;AAC3D,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,qCAAqC,MAAM,UAAU;YAChF,MAAM;GACH;;AAaV,SAAgB,KAAK,EAAE,MAAM,OAAO,aAAa,GAAG,SAAoB;AAGtE,QACE,qBAHQ,MAAM,OAAO,OAAO;EAI1B,GAAI;EACJ;EACA,WAAW,GACT,0GACA,MAAM,QAAQ,yBACd,MAAM,UACP;;GAEA,OACC,oBAAC;IAAI,WAAU;cACZ;KACG,GACJ;GACJ,oBAAC;IAAG,WAAU;cAAsC;KAAW;GAC9D,cAAc,oBAAC;IAAE,WAAU;cAA0C;KAAgB,GAAG;GACzF,oBAAC;IAAI,WAAU;cACZ,MAAM;KACH;;GACJ"}