@hanzo/ui 5.3.26 → 5.3.29

package/docs/components/toc/index.tsx

@@ -0,0 +1,136 @@
+'use client';
+import * as Primitive from '@hanzo/docs-core/toc';
+import {
+  type ComponentProps,
+  createContext,
+  use,
+  type RefObject,
+  useEffect,
+  useEffectEvent,
+  useRef,
+} from 'react';
+import { cn } from '@/utils/cn';
+import { mergeRefs } from '@/utils/merge-refs';
+
+const TOCContext = createContext<Primitive.TOCItemType[]>([]);
+
+export function useTOCItems(): Primitive.TOCItemType[] {
+  return use(TOCContext);
+}
+
+export function TOCProvider({
+  toc,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.AnchorProvider>) {
+  return (
+    <TOCContext value={toc}>
+      <Primitive.AnchorProvider toc={toc} {...props}>
+        {children}
+      </Primitive.AnchorProvider>
+    </TOCContext>
+  );
+}
+
+export function TOCScrollArea({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  const viewRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={mergeRefs(viewRef, ref)}
+      className={cn(
+        'relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3',
+        className,
+      )}
+      {...props}
+    >
+      <Primitive.ScrollProvider containerRef={viewRef}>
+        {props.children}
+      </Primitive.ScrollProvider>
+    </div>
+  );
+}
+
+type TocThumb = [top: number, height: number];
+
+interface RefProps {
+  containerRef: RefObject<HTMLElement | null>;
+}
+
+export function TocThumb({
+  containerRef,
+  ...props
+}: ComponentProps<'div'> & RefProps) {
+  const thumbRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <div ref={thumbRef} role="none" {...props} />
+      <Updater containerRef={containerRef} thumbRef={thumbRef} />
+    </>
+  );
+}
+
+function Updater({
+  containerRef,
+  thumbRef,
+}: RefProps & { thumbRef: RefObject<HTMLElement | null> }) {
+  const active = Primitive.useActiveAnchors();
+  const onPrint = useEffectEvent(() => {
+    if (!containerRef.current || !thumbRef.current) return;
+
+    update(thumbRef.current, calc(containerRef.current, active));
+  });
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+
+    const observer = new ResizeObserver(onPrint);
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
+
+  if (containerRef.current && thumbRef.current) {
+    update(thumbRef.current, calc(containerRef.current, active));
+  }
+
+  return null;
+}
+
+function calc(container: HTMLElement, active: string[]): TocThumb {
+  if (active.length === 0 || container.clientHeight === 0) {
+    return [0, 0];
+  }
+
+  let upper = Number.MAX_VALUE,
+    lower = 0;
+
+  for (const item of active) {
+    const element = container.querySelector<HTMLElement>(`a[href="#${item}"]`);
+    if (!element) continue;
+
+    const styles = getComputedStyle(element);
+    upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+    lower = Math.max(
+      lower,
+      element.offsetTop +
+        element.clientHeight -
+        parseFloat(styles.paddingBottom),
+    );
+  }
+
+  return [upper, lower - upper];
+}
+
+function update(element: HTMLElement, info: TocThumb): void {
+  element.style.setProperty('--fd-top', `${info[0]}px`);
+  element.style.setProperty('--fd-height', `${info[1]}px`);
+}

package/docs/components/type-table.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { ChevronDown } from '@icons';
+import Link from '@hanzo/docs-core/link';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/utils/cn';
+import { type ReactNode, useState } from 'react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+
+export interface ParameterNode {
+  name: string;
+  description: ReactNode;
+}
+
+export interface TypeNode {
+  /**
+   * Additional description of the field
+   */
+  description?: ReactNode;
+
+  /**
+   * type signature (short)
+   */
+  type: ReactNode;
+
+  /**
+   * type signature (full)
+   */
+  typeDescription?: ReactNode;
+
+  /**
+   * Optional `href` for the type
+   */
+  typeDescriptionLink?: string;
+
+  default?: ReactNode;
+
+  required?: boolean;
+  deprecated?: boolean;
+
+  parameters?: ParameterNode[];
+
+  returns?: ReactNode;
+}
+
+const keyVariants = cva('text-fd-primary', {
+  variants: {
+    deprecated: {
+      true: 'line-through text-fd-primary/50',
+    },
+  },
+});
+
+const fieldVariants = cva('text-fd-muted-foreground not-prose pe-2');
+
+export function TypeTable({ type }: { type: Record<string, TypeNode> }) {
+  return (
+    <div className="@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden">
+      <div className="flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground">
+        <p className="w-[25%]">Prop</p>
+        <p className="@max-xl:hidden">Type</p>
+      </div>
+      {Object.entries(type).map(([key, value]) => (
+        <Item key={key} name={key} item={value} />
+      ))}
+    </div>
+  );
+}
+
+function Item({
+  name,
+  item: {
+    parameters = [],
+    description,
+    required = false,
+    deprecated,
+    typeDescription,
+    default: defaultValue,
+    type,
+    typeDescriptionLink,
+    returns,
+  },
+}: {
+  name: string;
+  item: TypeNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className={cn(
+        'rounded-xl border overflow-hidden transition-all',
+        open
+          ? 'shadow-sm bg-fd-background not-last:mb-2'
+          : 'border-transparent',
+      )}
+    >
+      <CollapsibleTrigger className="relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent">
+        <code
+          className={cn(
+            keyVariants({
+              deprecated,
+              className: 'min-w-fit w-[25%] font-medium pe-2',
+            }),
+          )}
+        >
+          {name}
+          {!required && '?'}
+        </code>
+        {typeDescriptionLink ? (
+          <Link href={typeDescriptionLink} className="underline @max-xl:hidden">
+            {type}
+          </Link>
+        ) : (
+          <span className="@max-xl:hidden">{type}</span>
+        )}
+        <ChevronDown className="absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-3 overflow-auto fd-scroll-container border-t">
+          <div className="text-sm prose col-span-full prose-no-margin empty:hidden">
+            {description}
+          </div>
+          {typeDescription && (
+            <>
+              <p className={cn(fieldVariants())}>Type</p>
+              <p className="my-auto not-prose">{typeDescription}</p>
+            </>
+          )}
+          {defaultValue && (
+            <>
+              <p className={cn(fieldVariants())}>Default</p>
+              <p className="my-auto not-prose">{defaultValue}</p>
+            </>
+          )}
+          {parameters.length > 0 && (
+            <>
+              <p className={cn(fieldVariants())}>Parameters</p>
+              <div className="flex flex-col gap-2">
+                {parameters.map((param) => (
+                  <div
+                    key={param.name}
+                    className="inline-flex items-center flex-wrap gap-1"
+                  >
+                    <p className="font-medium not-prose text-nowrap">
+                      {param.name} -
+                    </p>
+                    <div className="text-sm prose prose-no-margin">
+                      {param.description}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+          {returns && (
+            <>
+              <p className={cn(fieldVariants())}>Returns</p>
+              <div className="my-auto text-sm prose prose-no-margin">
+                {returns}
+              </div>
+            </>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/docs/components/ui/accordion.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import * as Primitive from '@radix-ui/react-accordion';
+import { ChevronRight } from '@icons';
+import { type ComponentProps } from 'react';
+import { cn } from '@/utils/cn';
+
+export function Accordion({
+  className,
+  ...props
+}: ComponentProps<typeof Primitive.Root>) {
+  return (
+    <Primitive.Root
+      className={cn(
+        'divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AccordionItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Item>) {
+  return (
+    <Primitive.Item className={cn('scroll-m-24', className)} {...props}>
+      {children}
+    </Primitive.Item>
+  );
+}
+
+export function AccordionHeader({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Header>) {
+  return (
+    <Primitive.Header
+      className={cn(
+        'not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Primitive.Header>
+  );
+}
+
+export function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Trigger>) {
+  return (
+    <Primitive.Trigger
+      className={cn(
+        'group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronRight className="size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" />
+      {children}
+    </Primitive.Trigger>
+  );
+}
+
+export function AccordionContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Content>) {
+  return (
+    <Primitive.Content
+      className={cn(
+        'overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Primitive.Content>
+  );
+}

package/docs/components/ui/button.tsx

@@ -0,0 +1,28 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const variants = {
+  primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
+  outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
+  ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
+  secondary:
+    'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
+} as const;
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring',
+  {
+    variants: {
+      variant: variants,
+      // fumadocs use `color` instead of `variant`
+      color: variants,
+      size: {
+        sm: 'gap-1 px-2 py-1.5 text-xs',
+        icon: 'p-1.5 [&_svg]:size-5',
+        'icon-sm': 'p-1.5 [&_svg]:size-4.5',
+        'icon-xs': 'p-1 [&_svg]:size-4',
+      },
+    },
+  },
+);
+
+export type ButtonProps = VariantProps<typeof buttonVariants>;

package/docs/components/ui/collapsible.tsx

@@ -0,0 +1,42 @@
+'use client';
+import * as Primitive from '@radix-ui/react-collapsible';
+import { forwardRef, useEffect, useState } from 'react';
+import { cn } from '@/utils/cn';
+
+const Collapsible = Primitive.Root;
+
+const CollapsibleTrigger = Primitive.CollapsibleTrigger;
+
+const CollapsibleContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof Primitive.CollapsibleContent>
+>(({ children, ...props }, ref) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <Primitive.CollapsibleContent
+      ref={ref}
+      {...props}
+      className={cn(
+        'overflow-hidden',
+        mounted &&
+          'data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down',
+        props.className,
+      )}
+    >
+      {children}
+    </Primitive.CollapsibleContent>
+  );
+});
+
+CollapsibleContent.displayName = Primitive.CollapsibleContent.displayName;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+
+export type CollapsibleProps = Primitive.CollapsibleProps;
+export type CollapsibleContentProps = Primitive.CollapsibleContentProps;
+export type CollapsibleTriggerProps = Primitive.CollapsibleTriggerProps;

package/docs/components/ui/navigation-menu.tsx

@@ -0,0 +1,83 @@
+'use client';
+import * as React from 'react';
+import * as Primitive from '@radix-ui/react-navigation-menu';
+import { cn } from '@/utils/cn';
+
+export type NavigationMenuContentProps = Primitive.NavigationMenuContentProps;
+export type NavigationMenuTriggerProps = Primitive.NavigationMenuTriggerProps;
+
+const NavigationMenu = Primitive.Root;
+
+const NavigationMenuList = Primitive.List;
+
+const NavigationMenuItem = React.forwardRef<
+  React.ComponentRef<typeof Primitive.NavigationMenuItem>,
+  React.ComponentPropsWithoutRef<typeof Primitive.NavigationMenuItem>
+>(({ className, children, ...props }, ref) => (
+  <Primitive.NavigationMenuItem
+    ref={ref}
+    className={cn('list-none', className)}
+    {...props}
+  >
+    {children}
+  </Primitive.NavigationMenuItem>
+));
+
+NavigationMenuItem.displayName = Primitive.NavigationMenuItem.displayName;
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ComponentRef<typeof Primitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <Primitive.Trigger
+    ref={ref}
+    className={cn('data-[state=open]:bg-fd-accent/50', className)}
+    {...props}
+  >
+    {children}
+  </Primitive.Trigger>
+));
+NavigationMenuTrigger.displayName = Primitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ComponentRef<typeof Primitive.Content>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Content>
+>(({ className, ...props }, ref) => (
+  <Primitive.Content
+    ref={ref}
+    className={cn(
+      'absolute inset-x-0 top-0 overflow-auto fd-scroll-container max-h-[80svh] data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft',
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = Primitive.Content.displayName;
+
+const NavigationMenuLink = Primitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ComponentRef<typeof Primitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className="flex w-full justify-center">
+    <Primitive.Viewport
+      {...props}
+      className={cn(
+        'relative h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in',
+        className,
+      )}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+};

package/docs/components/ui/popover.tsx

@@ -0,0 +1,32 @@
+'use client';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      side="bottom"
+      className={cn(
+        'z-50 origin-(--radix-popover-content-transform-origin) overflow-y-auto max-h-(--radix-popover-content-available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.PopoverClose;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

package/docs/components/ui/scroll-area.tsx

@@ -0,0 +1,59 @@
+import * as Primitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+
+const ScrollArea = React.forwardRef<
+  React.ComponentRef<typeof Primitive.Root>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <Primitive.Root
+    ref={ref}
+    type="scroll"
+    className={cn('overflow-hidden', className)}
+    {...props}
+  >
+    {children}
+    <Primitive.Corner />
+    <ScrollBar orientation="vertical" />
+  </Primitive.Root>
+));
+
+ScrollArea.displayName = Primitive.Root.displayName;
+
+const ScrollViewport = React.forwardRef<
+  React.ComponentRef<typeof Primitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Viewport>
+>(({ className, children, ...props }, ref) => (
+  <Primitive.Viewport
+    ref={ref}
+    className={cn('size-full rounded-[inherit]', className)}
+    {...props}
+  >
+    {children}
+  </Primitive.Viewport>
+));
+
+ScrollViewport.displayName = Primitive.Viewport.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ComponentRef<typeof Primitive.Scrollbar>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Scrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <Primitive.Scrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex select-none data-[state=hidden]:animate-fd-fade-out',
+      orientation === 'vertical' && 'h-full w-1.5',
+      orientation === 'horizontal' && 'h-1.5 flex-col',
+      className,
+    )}
+    {...props}
+  >
+    <Primitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-fd-border" />
+  </Primitive.Scrollbar>
+));
+ScrollBar.displayName = Primitive.Scrollbar.displayName;
+
+export { ScrollArea, ScrollBar, ScrollViewport };
+export type ScrollAreaProps = Primitive.ScrollAreaProps;