@hanzo/ui 5.3.26 → 5.3.29

package/docs/mdx.server.tsx

@@ -0,0 +1,37 @@
+import type { LoaderConfig, LoaderOutput, Page } from '@hanzo/docs-core/source';
+import type { ComponentProps, FC } from 'react';
+import defaultMdxComponents from '@/mdx';
+import * as path from 'node:path';
+
+/**
+ * Extend the default Link component to resolve relative file paths in `href`.
+ *
+ * @param page the current page
+ * @param source the source object
+ * @param OverrideLink The component to override from
+ */
+export function createRelativeLink(
+  source: LoaderOutput<LoaderConfig>,
+  page: Page,
+  OverrideLink: FC<ComponentProps<'a'>> = defaultMdxComponents.a,
+): FC<ComponentProps<'a'>> {
+  return async function RelativeLink({ href, ...props }) {
+    // resolve relative href
+    if (href && href.startsWith('.')) {
+      const target = source.getPageByHref(href, {
+        dir: path.dirname(page.path),
+        language: page.locale,
+      });
+
+      if (target) {
+        href = target.hash
+          ? `${target.page.url}#${target.hash}`
+          : target.page.url;
+      }
+    }
+
+    return <OverrideLink href={href} {...props} />;
+  };
+}
+
+export { defaultMdxComponents as default };

package/docs/mdx.tsx

@@ -0,0 +1,97 @@
+import Link from '@hanzo/docs-core/link';
+import type {
+  AnchorHTMLAttributes,
+  FC,
+  HTMLAttributes,
+  ImgHTMLAttributes,
+  TableHTMLAttributes,
+} from 'react';
+import { Image as FrameworkImage } from '@hanzo/docs-core/framework';
+import { Card, Cards } from '@/components/card';
+import {
+  Callout,
+  CalloutContainer,
+  CalloutDescription,
+  CalloutTitle,
+} from '@/components/callout';
+import { Heading } from '@/components/heading';
+import { cn } from '@/utils/cn';
+import {
+  CodeBlock,
+  CodeBlockTab,
+  CodeBlockTabs,
+  CodeBlockTabsList,
+  CodeBlockTabsTrigger,
+  Pre,
+} from '@/components/codeblock';
+
+function Image(
+  props: ImgHTMLAttributes<HTMLImageElement> & {
+    sizes?: string;
+  },
+) {
+  return (
+    <FrameworkImage
+      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px"
+      {...props}
+      src={props.src as unknown as string}
+      className={cn('rounded-lg', props.className)}
+    />
+  );
+}
+
+function Table(props: TableHTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="relative overflow-auto prose-no-margin my-6">
+      <table {...props} />
+    </div>
+  );
+}
+
+const defaultMdxComponents = {
+  CodeBlockTab,
+  CodeBlockTabs,
+  CodeBlockTabsList,
+  CodeBlockTabsTrigger,
+  pre: (props: HTMLAttributes<HTMLPreElement>) => (
+    <CodeBlock {...props}>
+      <Pre>{props.children}</Pre>
+    </CodeBlock>
+  ),
+  Card,
+  Cards,
+  a: Link as FC<AnchorHTMLAttributes<HTMLAnchorElement>>,
+  img: Image,
+  h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading as="h1" {...props} />
+  ),
+  h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading as="h2" {...props} />
+  ),
+  h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading as="h3" {...props} />
+  ),
+  h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading as="h4" {...props} />
+  ),
+  h5: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading as="h5" {...props} />
+  ),
+  h6: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading as="h6" {...props} />
+  ),
+  table: Table,
+  Callout,
+  CalloutContainer,
+  CalloutTitle,
+  CalloutDescription,
+};
+
+export const createRelativeLink: typeof import('./mdx.server').createRelativeLink =
+  () => {
+    throw new Error(
+      '`createRelativeLink` is only supported in Node.js environment',
+    );
+  };
+
+export { defaultMdxComponents as default };

package/docs/og.tsx

@@ -0,0 +1,101 @@
+import { ImageResponse } from 'next/og';
+import type { ReactElement, ReactNode } from 'react';
+import type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';
+
+interface GenerateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  primaryColor?: string;
+  primaryTextColor?: string;
+  site?: ReactNode;
+}
+
+export function generateOGImage(
+  options: GenerateProps & ImageResponseOptions,
+): ImageResponse {
+  const {
+    title,
+    description,
+    icon,
+    site,
+    primaryColor,
+    primaryTextColor,
+    ...rest
+  } = options;
+
+  return new ImageResponse(
+    generate({
+      title,
+      description,
+      icon,
+      site,
+      primaryTextColor,
+      primaryColor,
+    }),
+    {
+      width: 1200,
+      height: 630,
+      ...rest,
+    },
+  );
+}
+
+export function generate({
+  primaryColor = 'rgba(255,150,255,0.3)',
+  primaryTextColor = 'rgb(255,150,255)',
+  ...props
+}: GenerateProps): ReactElement {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        color: 'white',
+        padding: '4rem',
+        backgroundColor: '#0c0c0c',
+        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '16px',
+          marginBottom: '12px',
+          color: primaryTextColor,
+        }}
+      >
+        {props.icon}
+        <p
+          style={{
+            fontSize: '56px',
+            fontWeight: 600,
+          }}
+        >
+          {props.site}
+        </p>
+      </div>
+
+      <p
+        style={{
+          fontWeight: 800,
+          fontSize: '82px',
+        }}
+      >
+        {props.title}
+      </p>
+      <p
+        style={{
+          fontSize: '52px',
+          color: 'rgba(240,240,240,0.8)',
+        }}
+      >
+        {props.description}
+      </p>
+    </div>
+  );
+}

package/docs/page.tsx

@@ -0,0 +1,85 @@
+'use client';
+import { use, type ComponentProps } from 'react';
+import { cn } from './utils/cn';
+import * as Docs from './layouts/docs/page';
+import * as Notebook from './layouts/notebook/page';
+import { LayoutContext } from './layouts/docs/client';
+
+// TODO: remove this compat layer on v17
+
+export {
+  DocsDescription,
+  DocsTitle,
+  EditOnGitHub,
+  DocsBody,
+  PageBreadcrumb,
+  PageLastUpdate,
+} from './layouts/docs/page';
+
+interface EditOnGitHubOptions extends Omit<
+  ComponentProps<'a'>,
+  'href' | 'children'
+> {
+  owner: string;
+  repo: string;
+
+  /**
+   * SHA or ref (branch or tag) name.
+   *
+   * @defaultValue main
+   */
+  sha?: string;
+
+  /**
+   * File path in the repo
+   */
+  path: string;
+}
+
+export interface DocsPageProps extends Docs.DocsPageProps {
+  editOnGithub?: EditOnGitHubOptions;
+  lastUpdate?: Date | string | number;
+}
+
+/**
+ * For separate MDX page
+ */
+export function withArticle(props: ComponentProps<'main'>) {
+  return (
+    <main
+      {...props}
+      className={cn(
+        'w-full max-w-[1400px] mx-auto px-4 py-12',
+        props.className,
+      )}
+    >
+      <article className="prose">{props.children}</article>
+    </main>
+  );
+}
+
+export function DocsPage({
+  lastUpdate,
+  editOnGithub,
+  children,
+  ...props
+}: DocsPageProps) {
+  const docsLayoutCtx = use(LayoutContext);
+  const { DocsPage, EditOnGitHub, PageLastUpdate } = docsLayoutCtx
+    ? Docs
+    : Notebook;
+
+  return (
+    <DocsPage {...props}>
+      {children}
+      <div className="flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden">
+        {editOnGithub && (
+          <EditOnGitHub
+            href={`https://github.com/${editOnGithub.owner}/${editOnGithub.repo}/blob/${editOnGithub.sha}/${editOnGithub.path.startsWith('/') ? editOnGithub.path.slice(1) : editOnGithub.path}`}
+          />
+        )}
+        {lastUpdate && <PageLastUpdate date={new Date(lastUpdate)} />}
+      </div>
+    </DocsPage>
+  );
+}

package/docs/provider/base.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import {
+  type ComponentPropsWithoutRef,
+  lazy,
+  type ReactNode,
+  useMemo,
+  useRef,
+} from 'react';
+import { DirectionProvider } from '@radix-ui/react-direction';
+import type { DefaultSearchDialogProps } from '@/components/dialog/search-default';
+import { SearchProvider, type SearchProviderProps } from '@/contexts/search';
+import {
+  defaultTranslations,
+  I18nContext,
+  type LocaleItem,
+  type Translations,
+} from '@/contexts/i18n';
+import { usePathname, useRouter } from '@hanzo/docs-core/framework';
+
+interface SearchOptions extends Omit<
+  SearchProviderProps,
+  'options' | 'children'
+> {
+  options?: Partial<DefaultSearchDialogProps>;
+
+  /**
+   * Enable search functionality
+   *
+   * @defaultValue `true`
+   */
+  enabled?: boolean;
+}
+
+export interface RootProviderProps {
+  /**
+   * `dir` option for Radix UI
+   */
+  dir?: 'rtl' | 'ltr';
+
+  /**
+   * @remarks `SearchProviderProps`
+   */
+  search?: Partial<SearchOptions>;
+
+  /**
+   * Customise options of `next-themes`
+   */
+  theme?: Partial<ComponentPropsWithoutRef<typeof ThemeProvider>> & {
+    /**
+     * Enable `next-themes`
+     *
+     * @defaultValue true
+     */
+    enabled?: boolean;
+  };
+
+  i18n?: Omit<I18nProviderProps, 'children'>;
+
+  children?: ReactNode;
+}
+
+export interface I18nProviderProps {
+  /**
+   * Current locale
+   */
+  locale: string;
+
+  /**
+   * Handle changes to the locale, redirect user when not specified.
+   */
+  onLocaleChange?: (v: string) => void;
+
+  /**
+   * Translations of current locale
+   */
+  translations?: Partial<Translations>;
+
+  /**
+   * Available languages
+   */
+  locales?: LocaleItem[];
+
+  children?: ReactNode;
+}
+
+const DefaultSearchDialog = lazy(
+  () => import('@/components/dialog/search-default'),
+);
+
+export function RootProvider({
+  children,
+  dir = 'ltr',
+  theme = {},
+  search,
+  i18n,
+}: RootProviderProps) {
+  let body = children;
+
+  if (search?.enabled !== false)
+    body = (
+      <SearchProvider SearchDialog={DefaultSearchDialog} {...search}>
+        {body}
+      </SearchProvider>
+    );
+
+  if (theme?.enabled !== false)
+    body = (
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+        {...theme}
+      >
+        {body}
+      </ThemeProvider>
+    );
+
+  if (i18n) {
+    body = <I18nProvider {...i18n}>{body}</I18nProvider>;
+  }
+
+  return <DirectionProvider dir={dir}>{body}</DirectionProvider>;
+}
+
+function I18nProvider({
+  locales = [],
+  locale,
+  onLocaleChange,
+  children,
+  translations,
+}: I18nProviderProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const onChange = (value: string) => {
+    if (onLocaleChange) {
+      return onLocaleChange(value);
+    }
+    const segments = pathname.split('/').filter((v) => v.length > 0);
+
+    // If locale prefix hidden
+    if (segments[0] !== locale) {
+      segments.unshift(value);
+    } else {
+      segments[0] = value;
+    }
+
+    router.push(`/${segments.join('/')}`);
+  };
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  return (
+    <I18nContext
+      value={useMemo(
+        () => ({
+          locale,
+          locales,
+          text: {
+            ...defaultTranslations,
+            ...translations,
+          },
+          onChange: (v) => onChangeRef.current(v),
+        }),
+        [locale, locales, translations],
+      )}
+    >
+      {children}
+    </I18nContext>
+  );
+}

package/docs/provider/next.tsx

@@ -0,0 +1,23 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { RootProvider as BaseProvider } from '@/provider/base';
+import { NextProvider } from '@hanzo/docs-core/framework/next';
+import type { Framework } from '@hanzo/docs-core/framework';
+
+export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
+  /**
+   * Custom framework components to override Next.js defaults
+   */
+  components?: {
+    Link?: Framework['Link'];
+    Image?: Framework['Image'];
+  };
+}
+
+export function RootProvider({ components, ...props }: RootProviderProps) {
+  return (
+    <NextProvider Link={components?.Link} Image={components?.Image}>
+      <BaseProvider {...props}>{props.children}</BaseProvider>
+    </NextProvider>
+  );
+}

package/docs/provider/react-router.tsx

@@ -0,0 +1,23 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { RootProvider as BaseProvider } from '@/provider/base';
+import { ReactRouterProvider } from '@hanzo/docs-core/framework/react-router';
+import type { Framework } from '@hanzo/docs-core/framework';
+
+export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
+  /**
+   * Custom framework components to override React Router defaults
+   */
+  components?: {
+    Link?: Framework['Link'];
+    Image?: Framework['Image'];
+  };
+}
+
+export function RootProvider({ components, ...props }: RootProviderProps) {
+  return (
+    <ReactRouterProvider Link={components?.Link} Image={components?.Image}>
+      <BaseProvider {...props}>{props.children}</BaseProvider>
+    </ReactRouterProvider>
+  );
+}

package/docs/provider/tanstack.tsx

@@ -0,0 +1,23 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { RootProvider as BaseProvider } from '@/provider/base';
+import { TanstackProvider } from '@hanzo/docs-core/framework/tanstack';
+import type { Framework } from '@hanzo/docs-core/framework';
+
+export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
+  /**
+   * Custom framework components to override Tanstack Router defaults
+   */
+  components?: {
+    Link?: Framework['Link'];
+    Image?: Framework['Image'];
+  };
+}
+
+export function RootProvider({ components, ...props }: RootProviderProps) {
+  return (
+    <TanstackProvider Link={components?.Link} Image={components?.Image}>
+      <BaseProvider {...props}>{props.children}</BaseProvider>
+    </TanstackProvider>
+  );
+}

package/docs/provider/waku.tsx

@@ -0,0 +1,23 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { RootProvider as BaseProvider } from '@/provider/base';
+import { WakuProvider } from '@hanzo/docs-core/framework/waku';
+import type { Framework } from '@hanzo/docs-core/framework';
+
+export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
+  /**
+   * Custom framework components to override Waku defaults
+   */
+  components?: {
+    Link?: Framework['Link'];
+    Image?: Framework['Image'];
+  };
+}
+
+export function RootProvider({ components, ...props }: RootProviderProps) {
+  return (
+    <WakuProvider Link={components?.Link} Image={components?.Image}>
+      <BaseProvider {...props}>{props.children}</BaseProvider>
+    </WakuProvider>
+  );
+}

package/docs/source.ts

@@ -0,0 +1,3 @@
+// Re-export from @hanzo/docs-core for @hanzo/ui/docs/source API
+export * from "@hanzo/docs-core/source"
+export { loader } from "@hanzo/docs-core/source"

package/docs/theme/typography/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.