@hanzo/ui 5.3.26 → 5.3.28

package/content/index.ts

@@ -0,0 +1,26 @@
+// General-purpose content components
+// Import from @hanzo/ui/content for high-level content blocks
+// These are NOT docs-specific - use them anywhere you need cards, tabs, steps, callouts, etc.
+
+// Card grid for navigation/features
+export { Card, Cards } from '../docs/components/card'
+export type { CardProps } from '../docs/components/card'
+
+// Enhanced tabs with items prop for simple usage
+export { Tab, Tabs, TabsList, TabsTrigger, TabsContent } from '../docs/components/tabs'
+export type { TabProps, TabsProps } from '../docs/components/tabs'
+
+// Step-by-step guides
+export { Step, Steps } from '../docs/components/steps'
+
+// Info/warning/error callouts
+export {
+  Callout,
+  CalloutContainer,
+  CalloutTitle,
+  CalloutDescription,
+} from '../docs/components/callout'
+export type { CalloutType, CalloutContainerProps } from '../docs/components/callout'
+
+// Enhanced accordions with URL hash integration
+export { Accordion, Accordions } from '../docs/components/accordion'

package/docs/_registry/index.ts

@@ -0,0 +1,426 @@
+import { fileURLToPath } from 'node:url';
+import type { Registry } from '@hanzo/docs-cli/build';
+import * as path from 'node:path';
+
+const srcDir = path.join(path.dirname(fileURLToPath(import.meta.url)), '../');
+
+// in shadcn cli, the order of files matters when writing import paths on consumer's codebase
+export const registry: Registry = {
+  name: '@hanzo/docs-ui',
+  dir: srcDir,
+  tsconfigPath: '../tsconfig.json',
+  packageJson: '../package.json',
+  onResolve(ref) {
+    if (ref.type !== 'file') return ref;
+
+    const filePath = path.relative(srcDir, ref.file);
+    if (filePath === 'icons.tsx')
+      return {
+        type: 'dependency',
+        dep: 'lucide-react',
+        specifier: 'lucide-react',
+      };
+
+    if (
+      (filePath.startsWith('utils/') || filePath.startsWith('contexts/')) &&
+      filePath !== 'utils/cn.ts'
+    ) {
+      return {
+        type: 'dependency',
+        dep: '@hanzo/docs-ui',
+        specifier: `@hanzo/docs/ui/${filePath.slice(0, -path.extname(filePath).length)}`,
+      };
+    }
+
+    return ref;
+  },
+  onUnknownFile(file) {
+    const relativePath = path.relative(srcDir, file);
+    if (relativePath.startsWith('utils/'))
+      return {
+        type: 'lib',
+        path: relativePath,
+      };
+    if (relativePath.startsWith('components/ui/')) {
+      return {
+        type: 'components',
+        path: relativePath,
+      };
+    }
+  },
+  components: [
+    {
+      name: 'layouts/docs-min',
+      description: 'Replace Docs Layout (Minimal)',
+      files: [
+        {
+          type: 'block',
+          path: '_registry/layout/docs-min.tsx',
+          target: 'components/layout/docs/index.tsx',
+        },
+        {
+          type: 'block',
+          path: '_registry/layout/page-min.tsx',
+          target: 'components/layout/docs/page.tsx',
+        },
+      ],
+      unlisted: true,
+    },
+    {
+      name: 'is-active',
+      unlisted: true,
+      files: [
+        {
+          type: 'lib',
+          path: 'utils/is-active.ts',
+        },
+      ],
+    },
+    {
+      name: 'cn',
+      unlisted: true,
+      files: [
+        {
+          type: 'lib',
+          path: 'utils/cn.ts',
+        },
+      ],
+    },
+    {
+      name: 'merge-refs',
+      unlisted: true,
+      files: [
+        {
+          type: 'lib',
+          path: 'utils/merge-refs.ts',
+        },
+      ],
+    },
+    {
+      name: 'layouts/shared',
+      unlisted: true,
+      files: [
+        {
+          type: 'components',
+          path: 'layouts/shared/index.tsx',
+          target: 'components/layout/shared.tsx',
+        },
+        {
+          type: 'components',
+          path: 'layouts/shared/language-toggle.tsx',
+          target: 'components/layout/language-toggle.tsx',
+        },
+        {
+          type: 'components',
+          path: 'layouts/shared/link-item.tsx',
+          target: 'components/layout/link-item.tsx',
+        },
+        {
+          type: 'components',
+          path: 'layouts/shared/search-toggle.tsx',
+          target: 'components/layout/search-toggle.tsx',
+        },
+        {
+          type: 'components',
+          path: 'layouts/shared/theme-toggle.tsx',
+          target: 'components/layout/theme-toggle.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/toc/clerk.tsx',
+          target: 'components/toc/clerk.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/toc/default.tsx',
+          target: 'components/toc/default.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/toc/index.tsx',
+          target: 'components/toc/index.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/sidebar/base.tsx',
+          target: 'components/layout/sidebar/base.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/sidebar/page-tree.tsx',
+          target: 'components/layout/sidebar/page-tree.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/sidebar/link-item.tsx',
+          target: 'components/layout/sidebar/link-item.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/sidebar/tabs/index.tsx',
+          target: 'components/layout/sidebar/tabs/index.tsx',
+        },
+        {
+          type: 'components',
+          path: 'components/sidebar/tabs/dropdown.tsx',
+          target: 'components/layout/sidebar/tabs/dropdown.tsx',
+        },
+      ],
+    },
+    {
+      name: 'layouts/docs',
+      files: [
+        {
+          type: 'block',
+          path: 'layouts/docs/index.tsx',
+          target: 'components/layout/docs/index.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/docs/client.tsx',
+          target: 'components/layout/docs/client.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/docs/sidebar.tsx',
+          target: 'components/layout/docs/sidebar.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/docs/page/index.tsx',
+          target: 'components/layout/docs/page/index.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/docs/page/client.tsx',
+          target: 'components/layout/docs/page/client.tsx',
+        },
+      ],
+      unlisted: true,
+    },
+    {
+      name: 'layouts/notebook',
+      files: [
+        {
+          type: 'block',
+          path: 'layouts/notebook/index.tsx',
+          target: 'components/layout/notebook/index.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/notebook/client.tsx',
+          target: 'components/layout/notebook/client.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/notebook/sidebar.tsx',
+          target: 'components/layout/notebook/sidebar.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/notebook/page/index.tsx',
+          target: 'components/layout/notebook/page/index.tsx',
+        },
+        {
+          type: 'block',
+          path: 'layouts/notebook/page/client.tsx',
+          target: 'components/layout/notebook/page/client.tsx',
+        },
+      ],
+      unlisted: true,
+    },
+    {
+      name: 'layouts/home',
+      files: [
+        {
+          type: 'block',
+          path: 'layouts/home/index.tsx',
+          target: 'components/layout/home/index.tsx',
+        },
+        {
+          type: 'components',
+          path: 'layouts/home/client.tsx',
+          target: 'components/layout/home/client.tsx',
+        },
+      ],
+      unlisted: true,
+    },
+    {
+      name: 'accordion',
+      files: [
+        {
+          type: 'components',
+          path: 'components/accordion.tsx',
+        },
+        {
+          type: 'ui',
+          path: 'components/ui/accordion.tsx',
+        },
+      ],
+    },
+    {
+      name: 'github-info',
+      files: [
+        {
+          type: 'components',
+          path: 'components/github-info.tsx',
+        },
+      ],
+      description: 'A card to display GitHub repo info',
+    },
+    {
+      name: 'banner',
+      files: [
+        {
+          type: 'components',
+          path: 'components/banner.tsx',
+        },
+      ],
+    },
+    {
+      name: 'callout',
+      files: [
+        {
+          type: 'components',
+          path: 'components/callout.tsx',
+        },
+      ],
+    },
+    {
+      name: 'card',
+      files: [
+        {
+          type: 'components',
+          path: 'components/card.tsx',
+        },
+      ],
+    },
+    {
+      name: 'codeblock',
+      files: [
+        {
+          type: 'components',
+          path: 'components/codeblock.tsx',
+        },
+      ],
+    },
+    {
+      name: 'files',
+      files: [
+        {
+          type: 'components',
+          path: 'components/files.tsx',
+        },
+      ],
+    },
+    {
+      name: 'heading',
+      files: [
+        {
+          type: 'components',
+          path: 'components/heading.tsx',
+        },
+      ],
+    },
+    {
+      name: 'image-zoom',
+      description: 'Zoomable Image',
+      files: [
+        {
+          type: 'components',
+          path: 'components/image-zoom.tsx',
+        },
+        {
+          type: 'css',
+          path: 'components/image-zoom.css',
+        },
+      ],
+    },
+    {
+      name: 'inline-toc',
+      files: [
+        {
+          type: 'components',
+          path: 'components/inline-toc.tsx',
+        },
+      ],
+    },
+    {
+      name: 'steps',
+      files: [
+        {
+          type: 'components',
+          path: 'components/steps.tsx',
+        },
+      ],
+    },
+    {
+      name: 'tabs',
+      files: [
+        {
+          type: 'components',
+          path: 'components/tabs.tsx',
+        },
+        {
+          type: 'ui',
+          path: 'components/ui/tabs.tsx',
+        },
+      ],
+    },
+    {
+      name: 'type-table',
+      files: [
+        {
+          type: 'components',
+          path: 'components/type-table.tsx',
+        },
+      ],
+    },
+    {
+      name: 'button',
+      unlisted: true,
+      files: [
+        {
+          type: 'ui',
+          path: 'components/ui/button.tsx',
+        },
+      ],
+    },
+    {
+      name: 'popover',
+      unlisted: true,
+      files: [
+        {
+          type: 'ui',
+          path: 'components/ui/popover.tsx',
+        },
+      ],
+    },
+    {
+      name: 'scroll-area',
+      unlisted: true,
+      files: [
+        {
+          type: 'ui',
+          path: 'components/ui/scroll-area.tsx',
+        },
+      ],
+    },
+    {
+      name: 'collapsible',
+      unlisted: true,
+      files: [
+        {
+          type: 'ui',
+          path: 'components/ui/collapsible.tsx',
+        },
+      ],
+    },
+  ],
+  dependencies: {
+    '@hanzo/docs-core': null,
+    '@hanzo/docs-ui': null,
+    '@icons': null,
+    react: null,
+  },
+};

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

@@ -0,0 +1,197 @@
+'use client';
+import type * as PageTree from '@hanzo/docs-core/page-tree';
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  use,
+  useMemo,
+  useState,
+} from 'react';
+import { cn } from '@/utils/cn';
+import { TreeContextProvider, useTreeContext } from '@hanzo/docs-ui/contexts/tree';
+import Link from '@hanzo/docs-core/link';
+import { useSearchContext } from '@hanzo/docs-ui/contexts/search';
+import { cva } from 'class-variance-authority';
+import { usePathname } from '@hanzo/docs-core/framework';
+
+interface SidebarContext {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const SidebarContext = createContext<SidebarContext | null>(null);
+
+export interface DocsLayoutProps {
+  tree: PageTree.Root;
+  children: ReactNode;
+}
+
+export function DocsLayout({ tree, children }: DocsLayoutProps) {
+  return (
+    <TreeContextProvider tree={tree}>
+      <SidebarProvider>
+        <header className="sticky top-0 bg-fd-background h-14 z-20">
+          <nav className="flex flex-row items-center gap-2 size-full px-4">
+            <Link href="/" className="font-medium mr-auto">
+              My Docs
+            </Link>
+
+            <SearchToggle />
+            <NavbarSidebarTrigger className="md:hidden" />
+          </nav>
+        </header>
+        <main
+          id="nd-docs-layout"
+          className="flex flex-1 flex-row [--fd-nav-height:56px]"
+        >
+          <Sidebar />
+          {children}
+        </main>
+      </SidebarProvider>
+    </TreeContextProvider>
+  );
+}
+
+function SidebarProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <SidebarContext
+      value={useMemo(
+        () => ({
+          open,
+          setOpen,
+        }),
+        [open],
+      )}
+    >
+      {children}
+    </SidebarContext>
+  );
+}
+
+function SearchToggle(props: ComponentProps<'button'>) {
+  const { enabled, setOpenSearch } = useSearchContext();
+  if (!enabled) return;
+
+  return (
+    <button
+      {...props}
+      className={cn('text-sm', props.className)}
+      onClick={() => setOpenSearch(true)}
+    >
+      Search
+    </button>
+  );
+}
+
+function NavbarSidebarTrigger(props: ComponentProps<'button'>) {
+  const { open, setOpen } = use(SidebarContext)!;
+
+  return (
+    <button
+      {...props}
+      className={cn('text-sm', props.className)}
+      onClick={() => setOpen(!open)}
+    >
+      Sidebar
+    </button>
+  );
+}
+
+function Sidebar() {
+  const { root } = useTreeContext();
+  const { open } = use(SidebarContext)!;
+
+  const children = useMemo(() => {
+    function renderItems(items: PageTree.Node[]) {
+      return items.map((item) => (
+        <SidebarItem key={item.$id} item={item}>
+          {item.type === 'folder' ? renderItems(item.children) : null}
+        </SidebarItem>
+      ));
+    }
+
+    return renderItems(root.children);
+  }, [root]);
+
+  return (
+    <aside
+      className={cn(
+        'fixed flex flex-col shrink-0 p-4 top-14 z-20 text-sm overflow-auto md:sticky md:h-[calc(100dvh-56px)] md:w-[300px]',
+        'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background',
+        !open && 'max-md:invisible',
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
+
+const linkVariants = cva(
+  'flex items-center gap-2 w-full py-1.5 rounded-lg text-fd-foreground/80 [&_svg]:size-4',
+  {
+    variants: {
+      active: {
+        true: 'text-fd-primary font-medium',
+        false: 'hover:text-fd-accent-foreground',
+      },
+    },
+  },
+);
+
+function SidebarItem({
+  item,
+  children,
+}: {
+  item: PageTree.Node;
+  children: ReactNode;
+}) {
+  const pathname = usePathname();
+
+  if (item.type === 'page') {
+    return (
+      <Link
+        href={item.url}
+        className={linkVariants({
+          active: pathname === item.url,
+        })}
+      >
+        {item.icon}
+        {item.name}
+      </Link>
+    );
+  }
+
+  if (item.type === 'separator') {
+    return (
+      <p className="text-fd-muted-foreground mt-6 mb-2 first:mt-0">
+        {item.icon}
+        {item.name}
+      </p>
+    );
+  }
+
+  return (
+    <div>
+      {item.index ? (
+        <Link
+          className={linkVariants({
+            active: pathname === item.index.url,
+          })}
+          href={item.index.url}
+        >
+          {item.index.icon}
+          {item.index.name}
+        </Link>
+      ) : (
+        <p className={cn(linkVariants(), 'text-start')}>
+          {item.icon}
+          {item.name}
+        </p>
+      )}
+      <div className="pl-4 border-l flex flex-col">{children}</div>
+    </div>
+  );
+}