@hanzo/docs-base-ui 16.5.3 → 16.7.5

package/css/lib/base.css

@@ -1,6 +1,3 @@
-@import './shiki.css';
-@plugin '@hanzo/docs-tailwind/typography';
-
 :root {
   --fd-sidebar-drawer-offset: 100%;
 }
@@ -175,7 +172,7 @@
 @utility fd-steps {
   counter-reset: step;
   position: relative;
-  @apply pl-6 ml-2 border-l sm:ml-4 sm:pl-7;
+  @apply ps-6 ms-2 border-s sm:ms-4 sm:ps-7;
 }
 
 @utility fd-step {

package/css/lib/shiki.css

@@ -1,90 +1,98 @@
-.shiki:not(.not-hanzo-docs-codeblock *) {
+.shiki:not(.not-fumadocs-codeblock *) {
   --padding-left: calc(var(--spacing) * 4);
   --padding-right: calc(var(--spacing) * 4);
 
   code span {
     color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
   }
-}
-
-.dark .shiki:not(.not-hanzo-docs-codeblock *) {
-  code span {
-    color: var(--shiki-dark);
-  }
-}
 
-:is(pre *):is(.shiki *):not(.not-hanzo-docs-codeblock *) {
-  .line& {
+  .line {
     position: relative;
-    min-height: 1lh;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
 
-  .has-focused .line&:not(.focused) {
+  .line:empty {
+    height: 1lh;
+  }
+
+  &.has-focused .line:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;
   }
 
-  .has-focused:hover .line&:not(.focused) {
+  &.has-focused:hover .line:not(.focused) {
     filter: blur(0);
   }
 
-  [data-line-numbers] .twoslash-meta-line& {
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-
-  [data-line-numbers] .line& {
-    counter-increment: line;
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-
-  [data-line-numbers] .line&::after {
-    position: absolute;
-    content: counter(line);
-    color: color-mix(
-      in oklab,
-      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
-      transparent
-    );
-    @apply top-0 left-4;
-  }
-
-  .diff&::before {
+  .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
   }
 
-  .diff.remove& {
+  .diff.remove {
     opacity: 0.7;
     --fd-counter-color: var(--color-fd-diff-remove-symbol);
     @apply bg-fd-diff-remove;
   }
 
-  .diff.remove&::before {
+  .diff.remove::before {
     content: '-';
     @apply text-fd-diff-remove-symbol;
   }
 
-  .diff.add& {
+  .diff.add {
     --fd-counter-color: var(--color-fd-diff-add-symbol);
     @apply bg-fd-diff-add;
   }
 
-  .diff.add&::before {
+  .diff.add::before {
     content: '+';
     @apply text-fd-diff-add-symbol;
   }
 
-  .highlighted& {
+  .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
+    @apply bg-fd-primary/10;
+  }
 
-    @apply border-l-2 border-fd-primary/50 bg-fd-primary/10;
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    @apply inset-y-0 left-0 border-l-2 border-fd-primary/50;
   }
 
-  .highlighted-word& {
+  .highlighted-word {
     padding: 1px;
     @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
   }
+
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: color-mix(
+      in oklab,
+      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
+      transparent
+    );
+    @apply inset-y-0 left-0 w-7 text-right;
+  }
+}
+
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
+  }
 }

package/css/preset.css

@@ -1,4 +1,7 @@
 @import './lib/base.css';
+@import './lib/shiki.css';
+
+@plugin '../dist/tailwind/typography.js';
 
 /* TODO: remove them on next major */
 @import './generated/flux.css';

package/dist/_virtual/_rolldown/runtime.js

@@ -2,17 +2,12 @@
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-
 //#endregion
-export { __exportAll };
+export { __exportAll };

package/dist/components/accordion.d.ts

@@ -20,5 +20,4 @@ declare function Accordion({
   value?: string;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Accordion, Accordions };
-//# sourceMappingURL=accordion.d.ts.map
+export { Accordion, Accordions };

package/dist/components/accordion.js

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { cn } from "../utils/cn.js";
 import { useCopyButton } from "../utils/use-copy-button.js";
 import { buttonVariants } from "./ui/button.js";
@@ -7,8 +6,7 @@ import { mergeRefs } from "../utils/merge-refs.js";
 import { Accordion as Accordion$1, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Link } from "lucide-react";
-
+import { Check, LinkIcon } from "lucide-react";
 //#region src/components/accordion.tsx
 function Accordions({ ref, className, defaultValue, ...props }) {
 	const rootRef = useRef(null);
@@ -62,10 +60,8 @@ function CopyButton({ id }) {
 			className: "text-fd-muted-foreground me-2"
 		})),
 		onClick,
-		children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Link, { className: "size-3.5" })
+		children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(LinkIcon, { className: "size-3.5" })
 	});
 }
-
 //#endregion
 export { Accordion, Accordions };
-//# sourceMappingURL=accordion.js.map

package/dist/components/banner.d.ts

@@ -31,5 +31,4 @@ declare function Banner({
   changeLayout?: boolean;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { Banner };
-//# sourceMappingURL=banner.d.ts.map
+export { Banner };

package/dist/components/banner.js

@@ -1,11 +1,9 @@
-'use client';
-
+"use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./ui/button.js";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
-
 //#region src/components/banner.tsx
 function Banner({ id, variant = "normal", changeLayout = true, height = "3rem", rainbowColors = [
 	"rgba(0,149,255,0.56)",
@@ -64,7 +62,5 @@ function flow({ colors }) {
             to { background-position: 100% 0;  }
          }` })] });
 }
-
 //#endregion
 export { Banner };
-//# sourceMappingURL=banner.js.map

package/dist/components/callout.d.ts

@@ -39,5 +39,4 @@ declare function CalloutDescription({
   ...props
 }: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Callout, CalloutContainer, CalloutContainerProps, CalloutDescription, CalloutTitle, CalloutType };
-//# sourceMappingURL=callout.d.ts.map
+export { Callout, CalloutContainer, CalloutContainerProps, CalloutDescription, CalloutTitle, CalloutType };

package/dist/components/callout.js

@@ -1,7 +1,6 @@
 import { cn } from "../utils/cn.js";
 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 }) {
@@ -57,7 +56,5 @@ function CalloutDescription({ children, className, ...props }) {
 		children
 	});
 }
-
 //#endregion
 export { Callout, CalloutContainer, CalloutDescription, CalloutTitle };
-//# sourceMappingURL=callout.js.map

package/dist/components/card.d.ts

@@ -17,5 +17,4 @@ declare function Card({
   ...props
 }: CardProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Card, CardProps, Cards };
-//# sourceMappingURL=card.d.ts.map
+export { Card, CardProps, Cards };

package/dist/components/card.js

@@ -1,7 +1,6 @@
 import { cn } from "../utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "@hanzo/docs-core/link";
-
 //#region src/components/card.tsx
 function Cards(props) {
 	return /* @__PURE__ */ jsx("div", {
@@ -35,7 +34,5 @@ function Card({ icon, title, description, ...props }) {
 		]
 	});
 }
-
 //#endregion
 export { Card, Cards };
-//# sourceMappingURL=card.js.map

package/dist/components/codeblock.d.ts

@@ -64,5 +64,4 @@ declare function CodeBlockTabsTrigger({
 }: ComponentProps<typeof TabsTrigger>): react_jsx_runtime0.JSX.Element;
 declare function CodeBlockTab(props: ComponentProps<typeof TabsContent>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { CodeBlock, CodeBlockProps, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre };
-//# sourceMappingURL=codeblock.d.ts.map
+export { CodeBlock, CodeBlockProps, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre };

package/dist/components/codeblock.js

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { cn } from "../utils/cn.js";
 import { useCopyButton } from "../utils/use-copy-button.js";
 import { buttonVariants } from "./ui/button.js";
@@ -8,7 +7,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.js";
 import { createContext, use, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Clipboard } from "lucide-react";
-
 //#region src/components/codeblock.tsx
 const TabsContext = createContext(null);
 function Pre(props) {
@@ -114,13 +112,11 @@ function CodeBlockTabsTrigger({ children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(TabsTrigger, {
 		...props,
 		className: (s) => cn("relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 [&_svg]:size-3.5", s.active ? "text-fd-primary" : "hover:text-fd-accent-foreground", typeof className === "function" ? className(s) : className),
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 bottom-0 h-px group-data-[active]:bg-fd-primary" }), children]
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 bottom-0 h-px group-data-active:bg-fd-primary" }), children]
 	});
 }
 function CodeBlockTab(props) {
 	return /* @__PURE__ */ jsx(TabsContent, { ...props });
 }
-
 //#endregion
 export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre };
-//# sourceMappingURL=codeblock.js.map

package/dist/components/codeblock.rsc.d.ts

@@ -0,0 +1,21 @@
+import { CodeBlockProps } from "./codeblock.js";
+import * as react from "react";
+import { HighlightOptions } from "@hanzo/docs-core/highlight";
+
+//#region src/components/codeblock.rsc.d.ts
+type ServerCodeBlockProps = HighlightOptions & {
+  code: string;
+  /**
+   * Extra props for the underlying `<CodeBlock />` component.
+   *
+   * Ignored if you defined your own `pre` component in `components`.
+   */
+  codeblock?: CodeBlockProps;
+};
+declare function ServerCodeBlock({
+  code,
+  codeblock,
+  ...options
+}: ServerCodeBlockProps): Promise<react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | (string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined)>;
+//#endregion
+export { ServerCodeBlock, ServerCodeBlockProps };

package/dist/components/codeblock.rsc.js

@@ -0,0 +1,22 @@
+import { cn } from "../utils/cn.js";
+import { CodeBlock, Pre } from "./codeblock.js";
+import { jsx } from "react/jsx-runtime";
+import { highlight } from "@hanzo/docs-core/highlight";
+//#region src/components/codeblock.rsc.tsx
+async function ServerCodeBlock({ code, codeblock, ...options }) {
+	return await highlight(code, {
+		defaultColor: false,
+		...options,
+		components: {
+			pre: (props) => /* @__PURE__ */ jsx(CodeBlock, {
+				...props,
+				...codeblock,
+				className: cn("my-0", props.className, codeblock?.className),
+				children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+			}),
+			...options.components
+		}
+	});
+}
+//#endregion
+export { ServerCodeBlock };

package/dist/components/dialog/search-algolia.d.ts

@@ -1,5 +1,4 @@
 import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
-import "./search.js";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { AlgoliaOptions } from "@hanzo/docs-core/search/client";
@@ -35,5 +34,4 @@ declare function AlgoliaSearchDialog({
   ...props
 }: AlgoliaSearchDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { AlgoliaSearchDialogProps, AlgoliaSearchDialog as default };
-//# sourceMappingURL=search-algolia.d.ts.map
+export { AlgoliaSearchDialogProps, AlgoliaSearchDialog as default };

package/dist/components/dialog/search-algolia.js

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { useI18n } from "../../contexts/i18n.js";
 import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
 import { useDocsSearch } from "@hanzo/docs-core/search/client";
-
 //#region src/components/dialog/search-algolia.tsx
 function AlgoliaSearchDialog({ searchOptions, tags = [], defaultTag, showAlgolia = false, allowClear = false, links = [], footer, ...props }) {
 	const [tag, setTag] = useState(defaultTag);
@@ -62,7 +60,5 @@ function AlgoliaTitle() {
 		children: "Search powered by Algolia"
 	});
 }
-
 //#endregion
 export { AlgoliaSearchDialog as default };
-//# sourceMappingURL=search-algolia.js.map

package/dist/components/dialog/search-default.d.ts

@@ -1,5 +1,4 @@
 import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
-import "./search.js";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -40,5 +39,4 @@ declare function DefaultSearchDialog({
   ...props
 }: DefaultSearchDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DefaultSearchDialogProps, DefaultSearchDialog as default };
-//# sourceMappingURL=search-default.d.ts.map
+export { DefaultSearchDialogProps, DefaultSearchDialog as default };

package/dist/components/dialog/search-default.js

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { useI18n } from "../../contexts/i18n.js";
 import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
 import { useDocsSearch } from "@hanzo/docs-core/search/client";
-
 //#region src/components/dialog/search-default.tsx
 function DefaultSearchDialog({ defaultTag, tags = [], api, delayMs, type = "fetch", allowClear = false, links = [], footer, ...props }) {
 	const { locale } = useI18n();
@@ -60,7 +58,5 @@ function DefaultSearchDialog({ defaultTag, tags = [], api, delayMs, type = "fetc
 		]
 	});
 }
-
 //#endregion
 export { DefaultSearchDialog as default };
-//# sourceMappingURL=search-default.js.map

package/dist/components/dialog/search-orama.d.ts

@@ -1,5 +1,4 @@
 import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
-import "./search.js";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { OramaCloudOptions } from "@hanzo/docs-core/search/client";
@@ -42,5 +41,4 @@ declare function OramaSearchDialog({
   ...props
 }: OramaSearchDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { OramaSearchDialogProps, OramaSearchDialog as default };
-//# sourceMappingURL=search-orama.d.ts.map
+export { OramaSearchDialogProps, OramaSearchDialog as default };

package/dist/components/dialog/search-orama.js

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { useI18n } from "../../contexts/i18n.js";
 import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
 import { useDocsSearch } from "@hanzo/docs-core/search/client";
-
 //#region src/components/dialog/search-orama.tsx
 /**
 * Orama Cloud integration
@@ -67,7 +65,5 @@ function Label() {
 		children: "Search powered by Orama"
 	});
 }
-
 //#endregion
 export { OramaSearchDialog as default };
-//# sourceMappingURL=search-orama.js.map

package/dist/components/dialog/search.d.ts

@@ -69,10 +69,12 @@ declare function SearchDialogListItem({
   item,
   className,
   children,
-  renderHighlights: render,
+  renderMarkdown,
+  renderHighlights: _,
   ...props
 }: ComponentProps<'button'> & {
-  renderHighlights?: typeof renderHighlights;
+  renderMarkdown?: (v: string) => ReactNode; /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */
+  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;
   item: SearchItemType;
 }): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogIcon(props: ComponentProps<'svg'>): react_jsx_runtime0.JSX.Element;
@@ -94,7 +96,6 @@ declare function TagsListItem({
 }: ComponentProps<'button'> & {
   value: string;
 }): react_jsx_runtime0.JSX.Element;
-declare function renderHighlights(highlights: HighlightedText<ReactNode>[]): ReactNode;
 declare function useSearch(): {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -113,5 +114,4 @@ declare function useSearchList(): {
   setActive: (v: string | null) => void;
 };
 //#endregion
-export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, SearchDialogProps, SearchItemType, type SharedProps, TagsList, TagsListItem, TagsListProps, useSearch, useSearchList, useTagsList };
-//# sourceMappingURL=search.d.ts.map
+export { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogListItem, SearchDialogOverlay, SearchDialogProps, SearchItemType, type SharedProps, TagsList, TagsListItem, TagsListProps, useSearch, useSearchList, useTagsList };