@hanzo/ui 5.3.25 → 5.3.28

package/docs/_registry/layout/page-min.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { type ComponentProps, type ReactNode, useMemo } from 'react';
+import {
+  AnchorProvider,
+  type TOCItemType,
+  useActiveAnchors,
+} from '@hanzo/docs-core/toc';
+import { cn } from '@/utils/cn';
+import { useTreeContext } from '@hanzo/docs-ui/contexts/tree';
+import { Link, usePathname } from '@hanzo/docs-core/framework';
+import type * as PageTree from '@hanzo/docs-core/page-tree';
+
+export interface DocsPageProps {
+  toc?: TOCItemType[];
+
+  children: ReactNode;
+}
+
+export function DocsPage({ toc = [], ...props }: DocsPageProps) {
+  return (
+    <AnchorProvider toc={toc}>
+      <main className="flex w-full min-w-0 flex-col">
+        <article className="flex flex-1 flex-col w-full max-w-[860px] gap-6 px-4 py-8 md:px-6 md:mx-auto">
+          {props.children}
+          <Footer />
+        </article>
+      </main>
+      {toc.length > 0 && (
+        <div className="sticky top-(--fd-nav-height) w-[286px] shrink-0 h-[calc(100dvh-var(--fd-nav-height))] p-4 overflow-auto max-xl:hidden">
+          <p className="text-sm text-fd-muted-foreground mb-2">On this page</p>
+          <div className="flex flex-col">
+            {toc.map((item) => (
+              <TocItem key={item.url} item={item} />
+            ))}
+          </div>
+        </div>
+      )}
+    </AnchorProvider>
+  );
+}
+
+export function DocsBody(props: ComponentProps<'div'>) {
+  return (
+    <div {...props} className={cn('prose', props.className)}>
+      {props.children}
+    </div>
+  );
+}
+
+export function DocsDescription(props: ComponentProps<'p'>) {
+  // don't render if no description provided
+  if (props.children === undefined) return null;
+
+  return (
+    <p
+      {...props}
+      className={cn('mb-8 text-lg text-fd-muted-foreground', props.className)}
+    >
+      {props.children}
+    </p>
+  );
+}
+
+export function DocsTitle(props: ComponentProps<'h1'>) {
+  return (
+    <h1 {...props} className={cn('text-3xl font-semibold', props.className)}>
+      {props.children}
+    </h1>
+  );
+}
+
+function TocItem({ item }: { item: TOCItemType }) {
+  const isActive = useActiveAnchors().includes(item.url.slice(1));
+
+  return (
+    <a
+      href={item.url}
+      className={cn(
+        'text-sm text-fd-foreground/80 py-1',
+        isActive && 'text-fd-primary',
+      )}
+      style={{
+        paddingLeft: Math.max(0, item.depth - 2) * 16,
+      }}
+    >
+      {item.title}
+    </a>
+  );
+}
+
+function Footer() {
+  const { root } = useTreeContext();
+  const pathname = usePathname();
+  const flatten = useMemo(() => {
+    const result: PageTree.Item[] = [];
+
+    function scan(items: PageTree.Node[]) {
+      for (const item of items) {
+        if (item.type === 'page') result.push(item);
+        else if (item.type === 'folder') {
+          if (item.index) result.push(item.index);
+          scan(item.children);
+        }
+      }
+    }
+
+    scan(root.children);
+    return result;
+  }, [root]);
+
+  const { previous, next } = useMemo(() => {
+    const idx = flatten.findIndex((item) => item.url === pathname);
+
+    if (idx === -1) return {};
+    return {
+      previous: flatten[idx - 1],
+      next: flatten[idx + 1],
+    };
+  }, [flatten, pathname]);
+
+  return (
+    <div className="flex flex-row justify-between gap-2 items-center font-medium">
+      {previous ? <Link href={previous.url}>{previous.name}</Link> : null}
+      {next ? <Link href={next.url}>{next.name}</Link> : null}
+    </div>
+  );
+}

package/docs/components/accordion.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { Check, Link as LinkIcon } from '@icons';
+import {
+  ComponentProps,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '@/utils/cn';
+import { useCopyButton } from '@/utils/use-copy-button';
+import { buttonVariants } from '@/components/ui/button';
+import { mergeRefs } from '@/utils/merge-refs';
+import {
+  Accordion as Root,
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+
+export function Accordions({
+  type = 'single',
+  ref,
+  className,
+  defaultValue,
+  ...props
+}: ComponentProps<typeof Root>) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const composedRef = mergeRefs(ref, rootRef);
+  const [value, setValue] = useState<string | string[]>(() =>
+    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 = selected.getAttribute('data-accordion-value');
+
+    if (value)
+      setValue((prev) => (typeof prev === 'string' ? value : [value, ...prev]));
+  }, []);
+
+  return (
+    // @ts-expect-error -- Multiple types
+    <Root
+      type={type}
+      ref={composedRef}
+      value={value}
+      onValueChange={setValue}
+      collapsible={type === 'single' ? true : undefined}
+      className={cn(
+        'divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function Accordion({
+  title,
+  id,
+  value = String(title),
+  children,
+  ...props
+}: Omit<ComponentProps<typeof AccordionItem>, 'value' | 'title'> & {
+  title: string | ReactNode;
+  value?: string;
+}) {
+  return (
+    <AccordionItem value={value} {...props}>
+      <AccordionHeader id={id} data-accordion-value={value}>
+        <AccordionTrigger>{title}</AccordionTrigger>
+        {id ? <CopyButton id={id} /> : null}
+      </AccordionHeader>
+      <AccordionContent>
+        <div className="px-4 pb-2 text-[0.9375rem] prose-no-margin">
+          {children}
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
+function CopyButton({ id }: { id: string }) {
+  const [checked, onClick] = useCopyButton(() => {
+    const url = new URL(window.location.href);
+    url.hash = id;
+
+    return navigator.clipboard.writeText(url.toString());
+  });
+
+  return (
+    <button
+      type="button"
+      aria-label="Copy Link"
+      className={cn(
+        buttonVariants({
+          color: 'ghost',
+          className: 'text-fd-muted-foreground me-2',
+        }),
+      )}
+      onClick={onClick}
+    >
+      {checked ? (
+        <Check className="size-3.5" />
+      ) : (
+        <LinkIcon className="size-3.5" />
+      )}
+    </button>
+  );
+}

package/docs/components/banner.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { type HTMLAttributes, useEffect, useState } from 'react';
+import { X } from '@icons';
+import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/components/ui/button';
+
+type BannerVariant = 'rainbow' | 'normal';
+
+export 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
+}: 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;
+}) {
+  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 (
+    <div
+      id={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,
+      }}
+    >
+      {changeLayout && open ? (
+        <style>
+          {globalKey
+            ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }`
+            : `:root { --fd-banner-height: ${height}; }`}
+        </style>
+      ) : null}
+      {globalKey ? (
+        <style>{`.${globalKey} #${id} { display: none; }`}</style>
+      ) : null}
+      {globalKey ? (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
+          }}
+        />
+      ) : null}
+
+      {variant === 'rainbow'
+        ? flow({
+            colors: rainbowColors,
+          })
+        : null}
+      {props.children}
+      {id ? (
+        <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',
+            }),
+          )}
+        >
+          <X />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+const maskImage =
+  'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
+
+function flow({ colors }: { colors: string[] }) {
+  return (
+    <>
+      <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)',
+          } as object
+        }
+      />
+      <style>
+        {`@keyframes fd-moving-banner {
+            from { background-position: 0% 0;  }
+            to { background-position: 100% 0;  }
+         }`}
+      </style>
+    </>
+  );
+}

package/docs/components/callout.tsx

@@ -0,0 +1,112 @@
+import { CircleCheck, CircleX, Info, Sun, TriangleAlert } from '@icons';
+import type { ComponentProps, ReactNode } from 'react';
+import { cn } from '@/utils/cn';
+
+export type CalloutType =
+  | 'info'
+  | 'warn'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'idea';
+
+const iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-fd-card';
+
+export function Callout({
+  children,
+  title,
+  ...props
+}: { title?: ReactNode } & Omit<CalloutContainerProps, 'title'>) {
+  return (
+    <CalloutContainer {...props}>
+      {title && <CalloutTitle>{title}</CalloutTitle>}
+      <CalloutDescription>{children}</CalloutDescription>
+    </CalloutContainer>
+  );
+}
+
+export interface CalloutContainerProps extends ComponentProps<'div'> {
+  /**
+   * @defaultValue info
+   */
+  type?: CalloutType;
+
+  /**
+   * Force an icon
+   */
+  icon?: ReactNode;
+}
+
+function resolveAlias(type: CalloutType) {
+  if (type === 'warn') return 'warning';
+  if ((type as unknown) === 'tip') return 'info';
+  return type;
+}
+
+export function CalloutContainer({
+  type: inputType = 'info',
+  icon,
+  children,
+  className,
+  style,
+  ...props
+}: CalloutContainerProps) {
+  const type = resolveAlias(inputType);
+
+  return (
+    <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,
+        } as object
+      }
+      {...props}
+    >
+      <div role="none" className="w-0.5 bg-(--callout-color)/50 rounded-sm" />
+      {icon ??
+        {
+          info: <Info className={iconClass} />,
+          warning: <TriangleAlert className={iconClass} />,
+          error: <CircleX className={iconClass} />,
+          success: <CircleCheck className={iconClass} />,
+          idea: <Sun className={iconClass} />,
+        }[type]}
+      <div className="flex flex-col gap-2 min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+export function CalloutTitle({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  return (
+    <p className={cn('font-medium my-0!', className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function CalloutDescription({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  return (
+    <div
+      className={cn(
+        'text-fd-muted-foreground prose-no-margin empty:hidden',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/docs/components/card.tsx

@@ -0,0 +1,52 @@
+import Link from '@hanzo/docs-core/link';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '@/utils/cn';
+
+export function Cards(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={cn('grid grid-cols-2 gap-3 @container', props.className)}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+
+  href?: string;
+  external?: boolean;
+};
+
+export function Card({ icon, title, description, ...props }: CardProps) {
+  const E = props.href ? Link : 'div';
+
+  return (
+    <E
+      {...props}
+      data-card
+      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,
+      )}
+    >
+      {icon ? (
+        <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">
+          {icon}
+        </div>
+      ) : null}
+      <h3 className="not-prose mb-1 text-sm font-medium">{title}</h3>
+      {description ? (
+        <p className="my-0! text-sm text-fd-muted-foreground">{description}</p>
+      ) : null}
+      <div className="text-sm text-fd-muted-foreground prose-no-margin empty:hidden">
+        {props.children}
+      </div>
+    </E>
+  );
+}