@hanzo/ui 5.6.1 → 8.0.0

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

@@ -1,128 +0,0 @@
-'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

@@ -1,118 +0,0 @@
-'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

@@ -1,144 +0,0 @@
-'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

@@ -1,112 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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>
-  );
-}