@hanzo/radix 16.3.1

package/dist/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/dist/components/image-zoom.d.ts

@@ -0,0 +1,16 @@
+import { type ImageProps } from '@hanzo/docs/framework';
+import type { ComponentProps } from 'react';
+import { 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;
+};
+export declare function ImageZoom({ zoomInProps, children, rmiz, ...props }: ImageZoomProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image-zoom.d.ts.map

package/dist/components/image-zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-zoom.d.ts","sourceRoot":"","sources":["../../src/components/image-zoom.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAEpC;;OAEG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAeF,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,2CAoBhB"}

package/dist/components/image-zoom.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from '@hanzo/docs/framework';
+import Zoom from 'react-medium-image-zoom';
+import './image-zoom.css';
+function getImageSrc(src) {
+    if (typeof src === 'string')
+        return src;
+    if (typeof src === 'object') {
+        // Next.js
+        if ('default' in src)
+            return src.default.src;
+        return src.src;
+    }
+    return '';
+}
+export function ImageZoom({ zoomInProps, children, rmiz, ...props }) {
+    return (_jsx(Zoom, { zoomMargin: 20, wrapElement: "span", ...rmiz, zoomImg: {
+            src: getImageSrc(props.src),
+            sizes: undefined,
+            ...zoomInProps,
+        }, children: children ?? (_jsx(Image, { sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px", ...props })) }));
+}

package/dist/components/inline-toc.d.ts

@@ -0,0 +1,8 @@
+import type { TOCItemType } from '@hanzo/docs/toc';
+import { Collapsible } from './ui/collapsible.js';
+import type { ComponentProps } from 'react';
+export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
+    items: TOCItemType[];
+}
+export declare function InlineTOC({ items, ...props }: InlineTocProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline-toc.d.ts.map

package/dist/components/inline-toc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-toc.d.ts","sourceRoot":"","sources":["../../src/components/inline-toc.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,WAAW,EAGZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IACxE,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CA+B5D"}

package/dist/components/inline-toc.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from '@hanzo/ui/icons';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible.js';
+import { cn } from '@hanzo/ui/cn';
+export function InlineTOC({ items, ...props }) {
+    return (_jsxs(Collapsible, { ...props, className: cn('not-prose rounded-lg border bg-fd-card text-fd-card-foreground', props.className), children: [_jsxs(CollapsibleTrigger, { className: "group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium", children: [props.children ?? 'Table of Contents', _jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground", children: items.map((item) => (_jsx("a", { href: item.url, className: "border-s py-1.5 hover:text-fd-accent-foreground", style: {
+                            paddingInlineStart: 12 * Math.max(item.depth - 1, 0),
+                        }, children: item.title }, item.url))) }) })] }));
+}

package/dist/components/sidebar/base.d.ts

@@ -0,0 +1,72 @@
+import { type ComponentProps, type PointerEvent, type ReactNode, type RefObject } from 'react';
+import { type LinkProps } from '@hanzo/docs/link';
+import { type ScrollAreaProps } from '../../components/ui/scroll-area.js';
+import { type CollapsibleContentProps, type CollapsibleTriggerProps } from '../../components/ui/collapsible.js';
+interface SidebarContext {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    collapsed: boolean;
+    setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * When set to false, don't close the sidebar when navigate to another page
+     */
+    closeOnRedirect: RefObject<boolean>;
+    defaultOpenLevel: number;
+    prefetch: boolean;
+    mode: Mode;
+}
+export interface SidebarProviderProps {
+    /**
+     * Open folders by default if their level is lower or equal to a specific level
+     * (Starting from 1)
+     *
+     * @defaultValue 0
+     */
+    defaultOpenLevel?: number;
+    /**
+     * Prefetch links
+     *
+     * @defaultValue true
+     */
+    prefetch?: boolean;
+    children?: ReactNode;
+}
+type Mode = 'drawer' | 'full';
+declare const SidebarContext: import("react").Context<SidebarContext | null>;
+export declare function SidebarProvider({ defaultOpenLevel, prefetch, children, }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSidebar(): SidebarContext;
+export declare function useFolder(): {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    depth: number;
+    collapsible: boolean;
+} | null;
+export declare function useFolderDepth(): number;
+export declare function SidebarContent({ children, }: {
+    children: (state: {
+        ref: RefObject<HTMLElement | null>;
+        collapsed: boolean;
+        hovered: boolean;
+        onPointerEnter: (event: PointerEvent) => void;
+        onPointerLeave: (event: PointerEvent) => void;
+    }) => ReactNode;
+}): ReactNode;
+export declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSeparator(props: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarItem({ icon, children, ...props }: LinkProps & {
+    icon?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible, active, children, ...props }: ComponentProps<'div'> & {
+    active?: boolean;
+    defaultOpen?: boolean;
+    collapsible?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger({ children, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderLink({ children, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarTrigger({ children, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=base.d.ts.map

package/dist/components/sidebar/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/base.tsx"],"names":[],"mappings":"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"}

package/dist/components/sidebar/base.js

@@ -0,0 +1,186 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ExternalLink } from '@hanzo/ui/icons';
+import { createContext, use, useEffect, useMemo, useRef, useState, } from 'react';
+import Link from '@hanzo/docs/link';
+import { useOnChange } from '@hanzo/docs/utils/use-on-change';
+import { cn } from '@hanzo/ui/cn';
+import { ScrollArea, ScrollViewport, } from '../../components/ui/scroll-area.js';
+import { isActive } from '@hanzo/ui/urls';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+import { useMediaQuery } from '@hanzo/docs/utils/use-media-query';
+import { Presence } from '@radix-ui/react-presence';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { usePathname } from '@hanzo/docs/framework';
+const SidebarContext = createContext(null);
+const FolderContext = createContext(null);
+export function SidebarProvider({ defaultOpenLevel = 0, prefetch = true, children, }) {
+    const closeOnRedirect = useRef(true);
+    const [open, setOpen] = useState(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const pathname = usePathname();
+    const mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';
+    useOnChange(pathname, () => {
+        if (closeOnRedirect.current) {
+            setOpen(false);
+        }
+        closeOnRedirect.current = true;
+    });
+    return (_jsx(SidebarContext, { value: useMemo(() => ({
+            open,
+            setOpen,
+            collapsed,
+            setCollapsed,
+            closeOnRedirect,
+            defaultOpenLevel,
+            prefetch,
+            mode,
+        }), [open, collapsed, defaultOpenLevel, prefetch, mode]), children: children }));
+}
+export function useSidebar() {
+    const ctx = use(SidebarContext);
+    if (!ctx)
+        throw new Error('Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.');
+    return ctx;
+}
+export function useFolder() {
+    return use(FolderContext);
+}
+export function useFolderDepth() {
+    return use(FolderContext)?.depth ?? 0;
+}
+export function SidebarContent({ children, }) {
+    const { collapsed, mode } = useSidebar();
+    const [hover, setHover] = useState(false);
+    const ref = useRef(null);
+    const timerRef = useRef(0);
+    useOnChange(collapsed, () => {
+        if (collapsed)
+            setHover(false);
+    });
+    if (mode !== 'full')
+        return;
+    function shouldIgnoreHover(e) {
+        const element = ref.current;
+        if (!element)
+            return true;
+        return (!collapsed ||
+            e.pointerType === 'touch' ||
+            element.getAnimations().length > 0);
+    }
+    return children({
+        ref,
+        collapsed,
+        hovered: hover,
+        onPointerEnter(e) {
+            if (shouldIgnoreHover(e))
+                return;
+            window.clearTimeout(timerRef.current);
+            setHover(true);
+        },
+        onPointerLeave(e) {
+            if (shouldIgnoreHover(e))
+                return;
+            window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => setHover(false), 
+            // if mouse is leaving the viewport, add a close delay
+            Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+                ? 0
+                : 500);
+        },
+    });
+}
+export function SidebarDrawerOverlay(props) {
+    const { open, setOpen, mode } = useSidebar();
+    if (mode !== 'drawer')
+        return;
+    return (_jsx(Presence, { present: open, children: _jsx("div", { "data-state": open ? 'open' : 'closed', onClick: () => setOpen(false), ...props }) }));
+}
+export function SidebarDrawerContent({ className, children, ...props }) {
+    const { open, mode } = useSidebar();
+    const state = open ? 'open' : 'closed';
+    if (mode !== 'drawer')
+        return;
+    return (_jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", "data-state": state, className: cn(!present && 'invisible', className), ...props, children: children })) }));
+}
+export function SidebarViewport(props) {
+    return (_jsx(ScrollArea, { ...props, className: cn('min-h-0 flex-1', props.className), children: _jsx(ScrollViewport, { className: "p-4 overscroll-contain", style: {
+                maskImage: 'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',
+            }, children: props.children }) }));
+}
+export function SidebarSeparator(props) {
+    const depth = useFolderDepth();
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0', depth === 0 && 'first:mt-0', props.className), children: props.children }));
+}
+export function SidebarItem({ icon, children, ...props }) {
+    const pathname = usePathname();
+    const ref = useRef(null);
+    const { prefetch } = useSidebar();
+    const active = props.href !== undefined && isActive(props.href, pathname, false);
+    useAutoScroll(active, ref);
+    return (_jsxs(Link, { ref: ref, "data-active": active, prefetch: prefetch, ...props, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), children] }));
+}
+export function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible = true, active = false, children, ...props }) {
+    const { defaultOpenLevel } = useSidebar();
+    const depth = useFolderDepth() + 1;
+    const defaultOpen = collapsible === false ||
+        active ||
+        (defaultOpenProp ?? defaultOpenLevel >= depth);
+    const [open, setOpen] = useState(defaultOpen);
+    useOnChange(defaultOpen, (v) => {
+        if (v)
+            setOpen(v);
+    });
+    return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, disabled: !collapsible, ...props, children: _jsx(FolderContext, { value: useMemo(() => ({ open, setOpen, depth, collapsible }), [collapsible, depth, open]), children: children }) }));
+}
+export function SidebarFolderTrigger({ children, ...props }) {
+    const { open, collapsible } = use(FolderContext);
+    if (collapsible) {
+        return (_jsxs(CollapsibleTrigger, { ...props, children: [children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+    }
+    return _jsx("div", { ...props, children: children });
+}
+export function SidebarFolderLink({ children, ...props }) {
+    const ref = useRef(null);
+    const { open, setOpen, collapsible } = use(FolderContext);
+    const { prefetch } = useSidebar();
+    const pathname = usePathname();
+    const active = props.href !== undefined && isActive(props.href, pathname, false);
+    useAutoScroll(active, ref);
+    return (_jsxs(Link, { ref: ref, "data-active": active, onClick: (e) => {
+            if (!collapsible)
+                return;
+            if (e.target instanceof Element &&
+                e.target.matches('[data-icon], [data-icon] *')) {
+                setOpen(!open);
+                e.preventDefault();
+            }
+            else {
+                setOpen(active ? !open : true);
+            }
+        }, prefetch: prefetch, ...props, children: [children, collapsible && (_jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') }))] }));
+}
+export function SidebarFolderContent(props) {
+    return _jsx(CollapsibleContent, { ...props, children: props.children });
+}
+export function SidebarTrigger({ children, ...props }) {
+    const { setOpen } = useSidebar();
+    return (_jsx("button", { "aria-label": "Open Sidebar", onClick: () => setOpen((prev) => !prev), ...props, children: children }));
+}
+export function SidebarCollapseTrigger(props) {
+    const { collapsed, setCollapsed } = useSidebar();
+    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, onClick: () => {
+            setCollapsed((prev) => !prev);
+        }, ...props, children: props.children }));
+}
+function useAutoScroll(active, ref) {
+    const { mode } = useSidebar();
+    useEffect(() => {
+        if (active && ref.current) {
+            scrollIntoView(ref.current, {
+                boundary: document.getElementById(mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar'),
+                scrollMode: 'if-needed',
+            });
+        }
+    }, [active, mode, ref]);
+}

package/dist/components/sidebar/link-item.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+import type * as Base from './base.js';
+import type { LinkItemType } from '@hanzo/ui/link-item';
+type InternalComponents = Pick<typeof Base, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+export declare function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, }: InternalComponents): ({ item, ...props }: HTMLAttributes<HTMLElement> & {
+    item: Exclude<LinkItemType, {
+        type: "icon";
+    }>;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=link-item.d.ts.map

package/dist/components/sidebar/link-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-item.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/link-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,KAAK,kBAAkB,GAAG,IAAI,CAC5B,OAAO,IAAI,EACT,eAAe,GACf,mBAAmB,GACnB,sBAAsB,GACtB,sBAAsB,GACtB,aAAa,CAChB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,GACZ,EAAE,kBAAkB,IAIa,oBAG7B,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC/C,6CAoCF"}

package/dist/components/sidebar/link-item.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, }) {
+    /**
+     * Render sidebar items from page tree
+     */
+    return function SidebarLinkItem({ item, ...props }) {
+        if (item.type === 'custom')
+            return _jsx("div", { ...props, children: item.children });
+        if (item.type === 'menu')
+            return (_jsxs(SidebarFolder, { ...props, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, external: item.external, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(SidebarLinkItem, { item: child }, i))) })] }));
+        return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, ...props, children: item.text }));
+    };
+}

package/dist/components/sidebar/page-tree.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type ReactNode } from 'react';
+import type * as PageTree from '@hanzo/docs/page-tree';
+import type * as Base from './base.js';
+export interface SidebarPageTreeComponents {
+    Item: FC<{
+        item: PageTree.Item;
+    }>;
+    Folder: FC<{
+        item: PageTree.Folder;
+        children: ReactNode;
+    }>;
+    Separator: FC<{
+        item: PageTree.Separator;
+    }>;
+}
+type InternalComponents = Pick<typeof Base, 'SidebarSeparator' | 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+export declare function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem, }: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=page-tree.d.ts.map

package/dist/components/sidebar/page-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-tree.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/page-tree.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;AAEpC,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC3D,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,KAAK,kBAAkB,GAAG,IAAI,CAC5B,OAAO,IAAI,EACT,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,sBAAsB,GACtB,sBAAsB,GACtB,aAAa,CAChB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,GACZ,EAAE,kBAAkB,IAuCjB,YAAY,OAAO,CAAC,yBAAyB,CAAC,6CA6CjD"}

package/dist/components/sidebar/page-tree.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useTreeContext, useTreePath } from '../../contexts/tree.js';
+import { useMemo, Fragment } from 'react';
+export function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem, }) {
+    function PageTreeFolder({ item, children, }) {
+        const path = useTreePath();
+        return (_jsxs(SidebarFolder, { collapsible: item.collapsible, active: path.includes(item), defaultOpen: item.defaultOpen, children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: children })] }));
+    }
+    /**
+     * Render sidebar items from page tree
+     */
+    return function SidebarPageTree(components) {
+        const { root } = useTreeContext();
+        const { Separator, Item, Folder = PageTreeFolder } = components;
+        return useMemo(() => {
+            function renderSidebarList(items) {
+                return items.map((item, i) => {
+                    if (item.type === 'separator') {
+                        if (Separator)
+                            return _jsx(Separator, { item: item }, i);
+                        return (_jsxs(SidebarSeparator, { children: [item.icon, item.name] }, i));
+                    }
+                    if (item.type === 'folder') {
+                        return (_jsx(Folder, { item: item, children: renderSidebarList(item.children) }, i));
+                    }
+                    if (Item)
+                        return _jsx(Item, { item: item }, item.url);
+                    return (_jsx(SidebarItem, { href: item.url, external: item.external, icon: item.icon, children: item.name }, item.url));
+                });
+            }
+            return (_jsx(Fragment, { children: renderSidebarList(root.children) }, root.$id));
+        }, [Folder, Item, Separator, root]);
+    };
+}

package/dist/components/sidebar/tabs/dropdown.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { SidebarTab } from './index.js';
+export interface SidebarTabWithProps extends SidebarTab {
+    props?: ComponentProps<'a'>;
+}
+export declare function SidebarTabsDropdown({ options, placeholder, ...props }: {
+    placeholder?: ReactNode;
+    options: SidebarTabWithProps[];
+} & ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function isTabActive(tab: SidebarTab, pathname: string): boolean;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/sidebar/tabs/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/tabs/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAW/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAEpC,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAC;CAChC,GAAG,cAAc,CAAC,QAAQ,CAAC,2CAkF3B;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAI5D"}

package/dist/components/sidebar/tabs/dropdown.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from '@hanzo/ui/icons';
+import { useMemo, useState } from 'react';
+import Link from '@hanzo/docs/link';
+import { usePathname } from '@hanzo/docs/framework';
+import { cn } from '@hanzo/ui/cn';
+import { isActive, normalize } from '@hanzo/ui/urls';
+import { useSidebar } from '../../../components/sidebar/base.js';
+import { Popover, PopoverContent, PopoverTrigger, } from '../../../components/ui/popover.js';
+export function SidebarTabsDropdown({ options, placeholder, ...props }) {
+    const [open, setOpen] = useState(false);
+    const { closeOnRedirect } = useSidebar();
+    const pathname = usePathname();
+    const selected = useMemo(() => {
+        return options.findLast((item) => isTabActive(item, pathname));
+    }, [options, pathname]);
+    const onClick = () => {
+        closeOnRedirect.current = false;
+        setOpen(false);
+    };
+    const item = selected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "size-9 shrink-0 empty:hidden md:size-5", children: selected.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: selected.title }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden md:hidden", children: selected.description })] })] })) : (placeholder);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item && (_jsxs(PopoverTrigger, { ...props, className: cn('flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })] })), _jsx(PopoverContent, { className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container", children: options.map((item) => {
+                    const isActive = selected && item.url === selected.url;
+                    if (!isActive && item.unlisted)
+                        return;
+                    return (_jsxs(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground', item.props?.className), children: [_jsx("div", { className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden", children: item.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-none", children: item.title }), _jsx("p", { className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden", children: item.description })] }), _jsx(Check, { className: cn('shrink-0 ms-auto size-3.5 text-fd-primary', !isActive && 'invisible') })] }, item.url));
+                }) })] }));
+}
+export function isTabActive(tab, pathname) {
+    if (tab.urls)
+        return tab.urls.has(normalize(pathname));
+    return isActive(tab.url, pathname, true);
+}

package/dist/components/sidebar/tabs/index.d.ts

@@ -0,0 +1,21 @@
+import type * as PageTree from '@hanzo/docs/page-tree';
+import type { ReactNode } from 'react';
+export interface SidebarTab {
+    /**
+     * Redirect URL of the folder, usually the index page
+     */
+    url: string;
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /**
+     * Detect from a list of urls
+     */
+    urls?: Set<string>;
+    unlisted?: boolean;
+}
+export interface GetSidebarTabsOptions {
+    transform?: (option: SidebarTab, node: PageTree.Folder) => SidebarTab | null;
+}
+export declare function getSidebarTabs(tree: PageTree.Root, { transform }?: GetSidebarTabsOptions): SidebarTab[];
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sidebar/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,KAAK,UAAU,GAAG,IAAI,CAAC;CAC9E;AAeD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,EAAE,SAA4B,EAAE,GAAE,qBAA0B,GAC3D,UAAU,EAAE,CAkCd"}

package/dist/components/sidebar/tabs/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTransform = (option, node) => {
+    if (!node.icon)
+        return option;
+    return {
+        ...option,
+        icon: (_jsx("div", { className: "size-full [&_svg]:size-full max-md:p-1.5 max-md:rounded-md max-md:border max-md:bg-fd-secondary", children: node.icon })),
+    };
+};
+export function getSidebarTabs(tree, { transform = defaultTransform } = {}) {
+    const results = [];
+    function scanOptions(node, unlisted) {
+        if ('root' in node && node.root) {
+            const urls = getFolderUrls(node);
+            if (urls.size > 0) {
+                const option = {
+                    url: urls.values().next().value ?? '',
+                    title: node.name,
+                    icon: node.icon,
+                    unlisted,
+                    description: node.description,
+                    urls,
+                };
+                const mapped = transform ? transform(option, node) : option;
+                if (mapped)
+                    results.push(mapped);
+            }
+        }
+        for (const child of node.children) {
+            if (child.type === 'folder')
+                scanOptions(child, unlisted);
+        }
+    }
+    scanOptions(tree);
+    if (tree.fallback)
+        scanOptions(tree.fallback, true);
+    return results;
+}
+function getFolderUrls(folder, output = new Set()) {
+    if (folder.index)
+        output.add(folder.index.url);
+    for (const child of folder.children) {
+        if (child.type === 'page' && !child.external)
+            output.add(child.url);
+        if (child.type === 'folder')
+            getFolderUrls(child, output);
+    }
+    return output;
+}

package/dist/components/steps.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare function Steps({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Step({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=steps.d.ts.map

package/dist/components/steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/components/steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAE1D;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAEzD"}