@libreapps/ui 5.4.1

package/docs/layouts/notebook/sidebar.tsx

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

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

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

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

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

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