@hanzo/ui 5.3.26 → 5.3.28

package/docs/components/files.tsx

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

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

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

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

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

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

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