@hanzo/ui 5.7.1 → 8.0.1

package/docs/layouts/notebook/sidebar.tsx

@@ -1,248 +0,0 @@
-'use client';
-import * as Base from '@/components/sidebar/base';
-import { cn } from '@/utils/cn';
-import { type ComponentProps, use, useRef } from 'react';
-import { cva } from 'class-variance-authority';
-import { LayoutContext } from './client';
-import { createPageTreeRenderer } from '@/components/sidebar/page-tree';
-import { createLinkItemRenderer } from '@/components/sidebar/link-item';
-import { mergeRefs } from '@/utils/merge-refs';
-
-const itemVariants = cva(
-  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',
-        button:
-          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
-      },
-      highlight: {
-        true: "data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5",
-      },
-    },
-  },
-);
-
-function getItemOffset(depth: number) {
-  return `calc(${2 + 3 * depth} * var(--spacing))`;
-}
-
-export const {
-  SidebarProvider: Sidebar,
-  SidebarFolder,
-  SidebarCollapseTrigger,
-  SidebarViewport,
-  SidebarTrigger,
-} = Base;
-
-export function SidebarContent({
-  ref: refProp,
-  className,
-  children,
-  ...props
-}: ComponentProps<'aside'>) {
-  const { navMode } = use(LayoutContext)!;
-  const ref = useRef<HTMLElement>(null);
-
-  return (
-    <Base.SidebarContent>
-      {({ collapsed, hovered, ref: asideRef, ...rest }) => (
-        <div
-          data-sidebar-placeholder=""
-          className={cn(
-            'sticky z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto md:layout:[--fd-sidebar-width:268px] max-md:hidden',
-            navMode === 'auto'
-              ? 'top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))]'
-              : 'top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]',
-          )}
-        >
-          {collapsed && (
-            <div className="absolute start-0 inset-y-0 w-4" {...rest} />
-          )}
-          <aside
-            id="nd-sidebar"
-            ref={mergeRefs(ref, refProp, asideRef)}
-            data-collapsed={collapsed}
-            data-hovered={collapsed && hovered}
-            className={cn(
-              'absolute flex flex-col w-full start-0 inset-y-0 items-end text-sm duration-250 *:w-(--fd-sidebar-width)',
-              navMode === 'auto' && 'bg-fd-card border-e',
-              collapsed && [
-                'inset-y-2 rounded-xl bg-fd-card transition-transform border w-(--fd-sidebar-width)',
-                hovered
-                  ? 'shadow-lg translate-x-2 rtl:-translate-x-2'
-                  : '-translate-x-(--fd-sidebar-width) rtl:translate-x-full',
-              ],
-              ref.current &&
-                (ref.current.getAttribute('data-collapsed') === 'true') !==
-                  collapsed &&
-                'transition-[width,inset-block,translate,background-color]',
-              className,
-            )}
-            {...props}
-            {...rest}
-          >
-            {children}
-          </aside>
-        </div>
-      )}
-    </Base.SidebarContent>
-  );
-}
-
-export function SidebarDrawer({
-  children,
-  className,
-  ...props
-}: ComponentProps<typeof Base.SidebarDrawerContent>) {
-  return (
-    <>
-      <Base.SidebarDrawerOverlay className="fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" />
-      <Base.SidebarDrawerContent
-        className={cn(
-          'fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </Base.SidebarDrawerContent>
-    </>
-  );
-}
-
-export function SidebarSeparator({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<'p'>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarSeparator
-      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}
-      style={{
-        paddingInlineStart: getItemOffset(depth),
-        ...style,
-      }}
-      {...props}
-    >
-      {children}
-    </Base.SidebarSeparator>
-  );
-}
-
-export function SidebarItem({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<typeof Base.SidebarItem>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarItem
-      className={cn(
-        itemVariants({ variant: 'link', highlight: depth >= 1 }),
-        className,
-      )}
-      style={{
-        paddingInlineStart: getItemOffset(depth),
-        ...style,
-      }}
-      {...props}
-    >
-      {children}
-    </Base.SidebarItem>
-  );
-}
-
-export function SidebarFolderTrigger({
-  className,
-  style,
-  ...props
-}: ComponentProps<typeof Base.SidebarFolderTrigger>) {
-  const { depth, collapsible } = Base.useFolder()!;
-
-  return (
-    <Base.SidebarFolderTrigger
-      className={cn(
-        itemVariants({ variant: collapsible ? 'button' : null }),
-        'w-full',
-        className,
-      )}
-      style={{
-        paddingInlineStart: getItemOffset(depth - 1),
-        ...style,
-      }}
-      {...props}
-    >
-      {props.children}
-    </Base.SidebarFolderTrigger>
-  );
-}
-
-export function SidebarFolderLink({
-  className,
-  style,
-  ...props
-}: ComponentProps<typeof Base.SidebarFolderLink>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarFolderLink
-      className={cn(
-        itemVariants({ variant: 'link', highlight: depth > 1 }),
-        'w-full',
-        className,
-      )}
-      style={{
-        paddingInlineStart: getItemOffset(depth - 1),
-        ...style,
-      }}
-      {...props}
-    >
-      {props.children}
-    </Base.SidebarFolderLink>
-  );
-}
-
-export function SidebarFolderContent({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof Base.SidebarFolderContent>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarFolderContent
-      className={cn(
-        'relative',
-        depth === 1 &&
-          "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </Base.SidebarFolderContent>
-  );
-}
-export const SidebarPageTree = createPageTreeRenderer({
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarItem,
-  SidebarSeparator,
-});
-
-export const SidebarLinkItem = createLinkItemRenderer({
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarItem,
-});

package/docs/layouts/shared/index.tsx

@@ -1,89 +0,0 @@
-import type { ReactNode } from 'react';
-import type { I18nConfig } from '@hanzo/docs-core/i18n';
-import type { LinkItemType } from './link-item';
-
-export interface NavOptions {
-  enabled: boolean;
-  component: ReactNode;
-
-  title?: ReactNode;
-
-  /**
-   * Redirect url of title
-   * @defaultValue '/'
-   */
-  url?: string;
-
-  /**
-   * Use transparent background
-   *
-   * @defaultValue none
-   */
-  transparentMode?: 'always' | 'top' | 'none';
-
-  children?: ReactNode;
-}
-
-export interface BaseLayoutProps {
-  themeSwitch?: {
-    enabled?: boolean;
-    component?: ReactNode;
-    mode?: 'light-dark' | 'light-dark-system';
-  };
-
-  searchToggle?: Partial<{
-    enabled: boolean;
-    components: Partial<{
-      sm: ReactNode;
-      lg: ReactNode;
-    }>;
-  }>;
-
-  /**
-   * I18n options
-   *
-   * @defaultValue false
-   */
-  i18n?: boolean | I18nConfig;
-
-  /**
-   * GitHub url
-   */
-  githubUrl?: string;
-
-  links?: LinkItemType[];
-  /**
-   * Replace or disable navbar
-   */
-  nav?: Partial<NavOptions>;
-
-  children?: ReactNode;
-}
-
-/**
- * Get link items with shortcuts
- */
-export function resolveLinkItems({
-  links = [],
-  githubUrl,
-}: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): LinkItemType[] {
-  const result = [...links];
-
-  if (githubUrl)
-    result.push({
-      type: 'icon',
-      url: githubUrl,
-      text: 'Github',
-      label: 'GitHub',
-      icon: (
-        <svg role="img" viewBox="0 0 24 24" fill="currentColor">
-          <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>
-      ),
-      external: true,
-    });
-
-  return result;
-}
-
-export type * from './link-item';

package/docs/layouts/shared/language-toggle.tsx

@@ -1,66 +0,0 @@
-'use client';
-import type { ComponentProps } from 'react';
-import { useI18n } from '@/contexts/i18n';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/components/ui/button';
-
-export type LanguageSelectProps = ComponentProps<'button'>;
-
-export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
-  const context = useI18n();
-  if (!context.locales) throw new Error('Missing `<I18nProvider />`');
-
-  return (
-    <Popover>
-      <PopoverTrigger
-        aria-label={context.text.chooseLanguage}
-        {...props}
-        className={cn(
-          buttonVariants({
-            color: 'ghost',
-            className: 'gap-1.5 p-1.5',
-          }),
-          props.className,
-        )}
-      >
-        {props.children}
-      </PopoverTrigger>
-      <PopoverContent className="flex flex-col overflow-x-hidden p-0">
-        <p className="mb-1 p-2 text-xs font-medium text-fd-muted-foreground">
-          {context.text.chooseLanguage}
-        </p>
-        {context.locales.map((item) => (
-          <button
-            key={item.locale}
-            type="button"
-            className={cn(
-              'p-2 text-start text-sm',
-              item.locale === context.locale
-                ? 'bg-fd-primary/10 font-medium text-fd-primary'
-                : 'hover:bg-fd-accent hover:text-fd-accent-foreground',
-            )}
-            onClick={() => {
-              context.onChange?.(item.locale);
-            }}
-          >
-            {item.name}
-          </button>
-        ))}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export function LanguageToggleText(props: ComponentProps<'span'>) {
-  const context = useI18n();
-  const text = context.locales?.find(
-    (item) => item.locale === context.locale,
-  )?.name;
-
-  return <span {...props}>{text}</span>;
-}

package/docs/layouts/shared/link-item.tsx

@@ -1,119 +0,0 @@
-'use client';
-import type { ComponentProps, ReactNode } from 'react';
-import { usePathname } from '@hanzo/docs-core/framework';
-import { isActive } from '@/utils/is-active';
-import Link from '@hanzo/docs-core/link';
-
-interface Filterable {
-  /**
-   * Restrict where the item is displayed
-   *
-   * @defaultValue 'all'
-   */
-  on?: 'menu' | 'nav' | 'all';
-}
-
-interface WithHref {
-  url: string;
-  /**
-   * When the item is marked as active
-   *
-   * @defaultValue 'url'
-   */
-  active?: 'url' | 'nested-url' | 'none';
-  external?: boolean;
-}
-
-export interface MainItemType extends WithHref, Filterable {
-  type?: 'main';
-  icon?: ReactNode;
-  text: ReactNode;
-  description?: ReactNode;
-}
-
-export interface IconItemType extends WithHref, Filterable {
-  type: 'icon';
-  /**
-   * `aria-label` of icon button
-   */
-  label?: string;
-  icon: ReactNode;
-  text: ReactNode;
-  /**
-   * @defaultValue true
-   */
-  secondary?: boolean;
-}
-
-export interface ButtonItemType extends WithHref, Filterable {
-  type: 'button';
-  icon?: ReactNode;
-  text: ReactNode;
-  /**
-   * @defaultValue false
-   */
-  secondary?: boolean;
-}
-
-export interface MenuItemType extends Partial<WithHref>, Filterable {
-  type: 'menu';
-  icon?: ReactNode;
-  text: ReactNode;
-
-  items: (
-    | (MainItemType & {
-        /**
-         * Options when displayed on navigation menu
-         */
-        menu?: ComponentProps<'a'> & {
-          banner?: ReactNode;
-        };
-      })
-    | CustomItemType
-  )[];
-
-  /**
-   * @defaultValue false
-   */
-  secondary?: boolean;
-}
-
-export interface CustomItemType extends Filterable {
-  type: 'custom';
-  /**
-   * @defaultValue false
-   */
-  secondary?: boolean;
-  children: ReactNode;
-}
-
-export type LinkItemType =
-  | MainItemType
-  | IconItemType
-  | ButtonItemType
-  | MenuItemType
-  | CustomItemType;
-
-export function LinkItem({
-  ref,
-  item,
-  ...props
-}: Omit<ComponentProps<'a'>, 'href'> & { item: WithHref }) {
-  const pathname = usePathname();
-  const activeType = item.active ?? 'url';
-  const active =
-    activeType !== 'none' &&
-    isActive(item.url, pathname, activeType === 'nested-url');
-
-  return (
-    <Link
-      ref={ref}
-      href={item.url}
-      external={item.external}
-      {...props}
-      data-active={active}
-    >
-      {props.children}
-    </Link>
-  );
-}

package/docs/layouts/shared/search-toggle.tsx

@@ -1,78 +0,0 @@
-'use client';
-import type { ComponentProps } from 'react';
-import { Search } from '@icons';
-import { useSearchContext } from '@/contexts/search';
-import { useI18n } from '@/contexts/i18n';
-import { cn } from '@/utils/cn';
-import { type ButtonProps, buttonVariants } from '@/components/ui/button';
-
-interface SearchToggleProps
-  extends Omit<ComponentProps<'button'>, 'color'>, ButtonProps {
-  hideIfDisabled?: boolean;
-}
-
-export function SearchToggle({
-  hideIfDisabled,
-  size = 'icon-sm',
-  color = 'ghost',
-  ...props
-}: SearchToggleProps) {
-  const { setOpenSearch, enabled } = useSearchContext();
-  if (hideIfDisabled && !enabled) return null;
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        buttonVariants({
-          size,
-          color,
-        }),
-        props.className,
-      )}
-      data-search=""
-      aria-label="Open Search"
-      onClick={() => {
-        setOpenSearch(true);
-      }}
-    >
-      <Search />
-    </button>
-  );
-}
-
-export function LargeSearchToggle({
-  hideIfDisabled,
-  ...props
-}: ComponentProps<'button'> & {
-  hideIfDisabled?: boolean;
-}) {
-  const { enabled, hotKey, setOpenSearch } = useSearchContext();
-  const { text } = useI18n();
-  if (hideIfDisabled && !enabled) return null;
-
-  return (
-    <button
-      type="button"
-      data-search-full=""
-      {...props}
-      className={cn(
-        'inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground',
-        props.className,
-      )}
-      onClick={() => {
-        setOpenSearch(true);
-      }}
-    >
-      <Search className="size-4" />
-      {text.search}
-      <div className="ms-auto inline-flex gap-0.5">
-        {hotKey.map((k, i) => (
-          <kbd key={i} className="rounded-md border bg-fd-background px-1.5">
-            {k.display}
-          </kbd>
-        ))}
-      </div>
-    </button>
-  );
-}

package/docs/layouts/shared/theme-toggle.tsx

@@ -1,86 +0,0 @@
-'use client';
-import { cva } from 'class-variance-authority';
-import { Airplay, Moon, Sun } from '@icons';
-import { useTheme } from 'next-themes';
-import { ComponentProps, useEffect, useState } from 'react';
-import { cn } from '@/utils/cn';
-
-const itemVariants = cva(
-  'size-6.5 rounded-full p-1.5 text-fd-muted-foreground',
-  {
-    variants: {
-      active: {
-        true: 'bg-fd-accent text-fd-accent-foreground',
-        false: 'text-fd-muted-foreground',
-      },
-    },
-  },
-);
-
-const full = [
-  ['light', Sun] as const,
-  ['dark', Moon] as const,
-  ['system', Airplay] as const,
-];
-
-export function ThemeToggle({
-  className,
-  mode = 'light-dark',
-  ...props
-}: ComponentProps<'div'> & {
-  mode?: 'light-dark' | 'light-dark-system';
-}) {
-  const { setTheme, theme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const container = cn(
-    'inline-flex items-center rounded-full border p-1',
-    className,
-  );
-
-  if (mode === 'light-dark') {
-    const value = mounted ? resolvedTheme : null;
-
-    return (
-      <button
-        className={container}
-        aria-label={`Toggle Theme`}
-        onClick={() => setTheme(value === 'light' ? 'dark' : 'light')}
-        data-theme-toggle=""
-      >
-        {full.map(([key, Icon]) => {
-          if (key === 'system') return;
-
-          return (
-            <Icon
-              key={key}
-              fill="currentColor"
-              className={cn(itemVariants({ active: value === key }))}
-            />
-          );
-        })}
-      </button>
-    );
-  }
-
-  const value = mounted ? theme : null;
-
-  return (
-    <div className={container} data-theme-toggle="" {...props}>
-      {full.map(([key, Icon]) => (
-        <button
-          key={key}
-          aria-label={key}
-          className={cn(itemVariants({ active: value === key }))}
-          onClick={() => setTheme(key)}
-        >
-          <Icon className="size-full" fill="currentColor" />
-        </button>
-      ))}
-    </div>
-  );
-}