@hanzo/ui 5.7.1 → 8.0.0

package/docs/components/toc/index.tsx

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

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

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

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

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

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

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

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