@hanzo/ui 5.7.1 → 8.0.1

package/docs/components/files.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import { cva } from 'class-variance-authority';
-import { File as FileIcon, Folder as FolderIcon, FolderOpen } from '@icons';
-import { type HTMLAttributes, type ReactNode, useState } from 'react';
-import { cn } from '@/utils/cn';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from './ui/collapsible';
-
-const itemVariants = cva(
-  'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4',
-);
-
-export function Files({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): React.ReactElement {
-  return (
-    <div
-      className={cn('not-prose rounded-md border bg-fd-card p-2', className)}
-      {...props}
-    >
-      {props.children}
-    </div>
-  );
-}
-
-export interface FileProps extends HTMLAttributes<HTMLDivElement> {
-  name: string;
-  icon?: ReactNode;
-}
-
-export interface FolderProps extends HTMLAttributes<HTMLDivElement> {
-  name: string;
-
-  disabled?: boolean;
-
-  /**
-   * Open folder by default
-   *
-   * @defaultValue false
-   */
-  defaultOpen?: boolean;
-}
-
-export function File({
-  name,
-  icon = <FileIcon />,
-  className,
-  ...rest
-}: FileProps): React.ReactElement {
-  return (
-    <div className={cn(itemVariants({ className }))} {...rest}>
-      {icon}
-      {name}
-    </div>
-  );
-}
-
-export function Folder({
-  name,
-  defaultOpen = false,
-  ...props
-}: FolderProps): React.ReactElement {
-  const [open, setOpen] = useState(defaultOpen);
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen} {...props}>
-      <CollapsibleTrigger className={cn(itemVariants({ className: 'w-full' }))}>
-        {open ? <FolderOpen /> : <FolderIcon />}
-        {name}
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <div className="ms-2 flex flex-col border-l ps-2">{props.children}</div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}

package/docs/components/github-info.tsx

@@ -1,107 +0,0 @@
-import { cn } from '@/utils/cn';
-import { Star } from '@icons';
-import { type AnchorHTMLAttributes } from 'react';
-
-async function getRepoStarsAndForks(
-  owner: string,
-  repo: string,
-  token?: string,
-  baseUrl: string = 'https://api.github.com',
-): Promise<{
-  stars: number;
-  forks: number;
-}> {
-  const endpoint = `${baseUrl}/repos/${owner}/${repo}`;
-  const headers = new Headers({
-    'Content-Type': 'application/json',
-  });
-
-  if (token) headers.set('Authorization', `Bearer ${token}`);
-
-  const response = await fetch(endpoint, {
-    headers,
-    next: {
-      revalidate: 60,
-    },
-  } as RequestInit);
-
-  if (!response.ok) {
-    const message = await response.text();
-
-    throw new Error(`Failed to fetch repository data: ${message}`);
-  }
-
-  const data = await response.json();
-  return {
-    stars: data.stargazers_count,
-    forks: data.forks_count,
-  };
-}
-
-export async function GithubInfo({
-  repo,
-  owner,
-  token,
-  baseUrl,
-  ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & {
-  owner: string;
-  repo: string;
-  token?: string;
-  baseUrl?: string;
-}) {
-  const { stars } = await getRepoStarsAndForks(owner, repo, token, baseUrl);
-  const humanizedStars = humanizeNumber(stars);
-
-  return (
-    <a
-      href={`https://github.com/${owner}/${repo}`}
-      rel="noreferrer noopener"
-      target="_blank"
-      {...props}
-      className={cn(
-        'flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent',
-        props.className,
-      )}
-    >
-      <p className="flex items-center gap-2 truncate">
-        <svg fill="currentColor" viewBox="0 0 24 24" className="size-3.5">
-          <title>GitHub</title>
-          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-        </svg>
-        {owner}/{repo}
-      </p>
-      <p className="flex text-xs items-center gap-1 text-fd-muted-foreground">
-        <Star className="size-3" />
-        {humanizedStars}
-      </p>
-    </a>
-  );
-}
-
-/**
- * Converts a number to a human-readable string with K suffix for thousands
- * @example 1500 -> "1.5K", 1000000 -> "1000000"
- */
-function humanizeNumber(num: number): string {
-  if (num < 1000) {
-    return num.toString();
-  }
-
-  if (num < 100000) {
-    // For numbers between 1,000 and 99,999, show with one decimal (e.g., 1.5K)
-    const value = (num / 1000).toFixed(1);
-    // Remove trailing .0 if present
-    const formattedValue = value.endsWith('.0') ? value.slice(0, -2) : value;
-
-    return `${formattedValue}K`;
-  }
-
-  if (num < 1000000) {
-    // For numbers between 10,000 and 999,999, show as whole K (e.g., 10K, 999K)
-    return `${Math.floor(num / 1000)}K`;
-  }
-
-  // For 1,000,000 and above, just return the number
-  return num.toString();
-}

package/docs/components/heading.tsx

@@ -1,33 +0,0 @@
-import { Link } from '@icons';
-import type { ComponentPropsWithoutRef } from 'react';
-import { cn } from '@/utils/cn';
-
-type Types = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-type HeadingProps<T extends Types> = Omit<ComponentPropsWithoutRef<T>, 'as'> & {
-  as?: T;
-};
-
-export function Heading<T extends Types = 'h1'>({
-  as,
-  className,
-  ...props
-}: HeadingProps<T>): React.ReactElement {
-  const As = as ?? 'h1';
-
-  if (!props.id) return <As className={className} {...props} />;
-
-  return (
-    <As
-      className={cn('flex scroll-m-28 flex-row items-center gap-2', className)}
-      {...props}
-    >
-      <a data-card="" href={`#${props.id}`} className="peer">
-        {props.children}
-      </a>
-      <Link
-        aria-hidden
-        className="size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
-      />
-    </As>
-  );
-}

package/docs/components/image-zoom.css

@@ -1,77 +0,0 @@
-[data-rmiz] {
-  display: block;
-  position: relative;
-}
-
-[data-rmiz-ghost] {
-  pointer-events: none;
-  position: absolute;
-}
-
-[data-rmiz-btn-zoom],
-[data-rmiz-btn-unzoom] {
-  display: none;
-}
-
-[data-rmiz-content='found'] img {
-  cursor: zoom-in;
-}
-
-[data-rmiz-modal][open] {
-  width: 100vw /* fallback */;
-  width: 100dvw;
-
-  height: 100vh /* fallback */;
-  height: 100dvh;
-
-  background-color: transparent;
-  max-width: none;
-  max-height: none;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  overflow: hidden;
-}
-
-[data-rmiz-modal]:focus-visible {
-  outline: none;
-}
-
-[data-rmiz-modal-overlay] {
-  transition: background-color 0.3s;
-  position: absolute;
-  inset: 0;
-}
-
-[data-rmiz-modal-overlay='visible'] {
-  background-color: var(--color-fd-background);
-}
-
-[data-rmiz-modal-overlay='hidden'] {
-  background-color: transparent;
-}
-
-[data-rmiz-modal-content] {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-[data-rmiz-modal]::backdrop {
-  display: none;
-}
-
-[data-rmiz-modal-img] {
-  cursor: zoom-out;
-  image-rendering: high-quality;
-  transform-origin: 0 0;
-  transition: transform 0.3s;
-  position: absolute;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-rmiz-modal-overlay],
-  [data-rmiz-modal-img] {
-    transition-duration: 0.01ms !important;
-  }
-}

package/docs/components/image-zoom.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import { Image, type ImageProps } from '@hanzo/docs-core/framework';
-import type { ComponentProps } from 'react';
-import Zoom, { type UncontrolledProps } from 'react-medium-image-zoom';
-import './image-zoom.css';
-
-export type ImageZoomProps = ImageProps & {
-  /**
-   * Image props when zoom in
-   */
-  zoomInProps?: ComponentProps<'img'>;
-
-  /**
-   * Props for `react-medium-image-zoom`
-   */
-  rmiz?: UncontrolledProps;
-};
-
-function getImageSrc(src: ImageProps['src']): string {
-  if (typeof src === 'string') return src;
-
-  if (typeof src === 'object') {
-    // Next.js
-    if ('default' in src)
-      return (src as { default: { src: string } }).default.src;
-    return src.src;
-  }
-
-  return '';
-}
-
-export function ImageZoom({
-  zoomInProps,
-  children,
-  rmiz,
-  ...props
-}: ImageZoomProps) {
-  return (
-    <Zoom
-      zoomMargin={20}
-      wrapElement="span"
-      {...rmiz}
-      zoomImg={{
-        src: getImageSrc(props.src),
-        sizes: undefined,
-        ...zoomInProps,
-      }}
-    >
-      {children ?? (
-        <Image
-          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px"
-          {...props}
-        />
-      )}
-    </Zoom>
-  );
-}

package/docs/components/index.ts

@@ -1,7 +0,0 @@
-// Documentation-specific components
-// For general content components (Card, Tabs, Steps, Callout, Accordion),
-// use @hanzo/ui/content instead
-
-// TypeTable is truly docs-specific (API reference tables)
-export { TypeTable } from './type-table'
-export type { TypeNode, ParameterNode } from './type-table'

package/docs/components/inline-toc.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import { ChevronDown } from '@icons';
-import type { TOCItemType } from '@hanzo/docs-core/toc';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from './ui/collapsible';
-import type { ComponentProps } from 'react';
-import { cn } from '@/utils/cn';
-
-export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
-  items: TOCItemType[];
-}
-
-export function InlineTOC({ items, ...props }: InlineTocProps) {
-  return (
-    <Collapsible
-      {...props}
-      className={cn(
-        'not-prose rounded-lg border bg-fd-card text-fd-card-foreground',
-        props.className,
-      )}
-    >
-      <CollapsibleTrigger className="group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium">
-        {props.children ?? 'Table of Contents'}
-        <ChevronDown className="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <div className="flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground">
-          {items.map((item) => (
-            <a
-              key={item.url}
-              href={item.url}
-              className="border-s py-1.5 hover:text-fd-accent-foreground"
-              style={{
-                paddingInlineStart: 12 * Math.max(item.depth - 1, 0),
-              }}
-            >
-              {item.title}
-            </a>
-          ))}
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}