@wallarm-org/design-system 0.43.0 → 0.44.1

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -27,9 +27,10 @@ const breadcrumbsItemVariants = cva([
 const BreadcrumbsItem = ({ className, isCurrent = false, href, children, onClick, 'aria-label': ariaLabel, ...props })=>{
     const testId = useTestId('item');
     const isLink = href && !isCurrent;
+    const isInteractive = !!href || !!onClick;
     const commonClasses = cn(breadcrumbsItemVariants({
         isCurrent
-    }), className);
+    }), !isInteractive && 'cursor-default hover:bg-transparent active:bg-transparent', className);
     return /*#__PURE__*/ jsx("li", {
         children: isLink ? /*#__PURE__*/ jsx("a", {
             href: href,

package/dist/components/Breadcrumbs/BreadcrumbsScopeSwitcher.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface ScopeSwitcherItem {
+    id: string;
+    label: string;
+    description?: string;
+    href: string;
+}
+export interface BreadcrumbsScopeSwitcherProps {
+    ref?: Ref<HTMLButtonElement>;
+    value: string;
+    items: ScopeSwitcherItem[];
+    onSelect: (item: ScopeSwitcherItem) => void;
+    children: ReactNode;
+    className?: string;
+    /** @internal - set automatically by parent */
+    isCurrent?: boolean;
+}
+export declare const BreadcrumbsScopeSwitcher: FC<BreadcrumbsScopeSwitcherProps>;

package/dist/components/Breadcrumbs/BreadcrumbsScopeSwitcher.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronUpDown } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemText, DropdownMenuShortcut, DropdownMenuTrigger } from "../DropdownMenu/index.js";
+const BreadcrumbsScopeSwitcher = ({ ref, value, items, onSelect, children, className, isCurrent = false })=>{
+    const testId = useTestId('scope-switcher');
+    return /*#__PURE__*/ jsx("li", {
+        children: /*#__PURE__*/ jsxs(DropdownMenu, {
+            children: [
+                /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsxs("button", {
+                        ref: ref,
+                        type: "button",
+                        "aria-haspopup": "dialog",
+                        "data-slot": "breadcrumbs-scope-switcher",
+                        "data-testid": testId,
+                        className: cn('flex items-center gap-4 rounded-6 px-4 py-0 text-sm transition-colors', 'hover:bg-states-primary-hover active:bg-states-primary-pressed cursor-pointer', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', isCurrent ? 'font-medium text-text-primary' : 'font-normal text-text-secondary', className),
+                        children: [
+                            children,
+                            /*#__PURE__*/ jsx(ChevronUpDown, {
+                                size: "sm",
+                                className: "text-text-secondary"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(DropdownMenuContent, {
+                    children: items.map((item)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+                            onSelect: ()=>onSelect(item),
+                            children: [
+                                /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                    children: /*#__PURE__*/ jsxs("span", {
+                                        className: "flex flex-col",
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                children: item.label
+                                            }),
+                                            item.description && /*#__PURE__*/ jsx("span", {
+                                                className: "text-xs text-text-secondary",
+                                                children: item.description
+                                            })
+                                        ]
+                                    })
+                                }),
+                                item.id === value && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
+                                    children: /*#__PURE__*/ jsx(Check, {
+                                        size: "sm"
+                                    })
+                                })
+                            ]
+                        }, item.id))
+                })
+            ]
+        })
+    });
+};
+BreadcrumbsScopeSwitcher.displayName = 'BreadcrumbsScopeSwitcher';
+export { BreadcrumbsScopeSwitcher };

package/dist/components/Breadcrumbs/index.d.ts

@@ -1,4 +1,5 @@
 export { Breadcrumbs, type BreadcrumbsProps } from './Breadcrumbs';
 export { BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, } from './BreadcrumbsEllipsis';
 export { BreadcrumbsItem, type BreadcrumbsItemProps } from './BreadcrumbsItem';
+export { BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, type ScopeSwitcherItem, } from './BreadcrumbsScopeSwitcher';
 export { BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, } from './BreadcrumbsSeparator';

package/dist/components/Breadcrumbs/index.js

@@ -1,5 +1,6 @@
 import { Breadcrumbs } from "./Breadcrumbs.js";
 import { BreadcrumbsEllipsis } from "./BreadcrumbsEllipsis.js";
 import { BreadcrumbsItem } from "./BreadcrumbsItem.js";
+import { BreadcrumbsScopeSwitcher } from "./BreadcrumbsScopeSwitcher.js";
 import { BreadcrumbsSeparator } from "./BreadcrumbsSeparator.js";
-export { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsSeparator };
+export { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator };

package/dist/components/NavPanel/NavPanel.d.ts

@@ -0,0 +1,8 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface NavPanelProps extends HTMLAttributes<HTMLElement>, TestableProps {
+    ref?: Ref<HTMLElement>;
+    children?: ReactNode;
+    resizable?: boolean;
+}
+export declare const NavPanel: FC<NavPanelProps>;

package/dist/components/NavPanel/NavPanel.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { useArrowNav } from "../../hooks/useArrowNav.js";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { NavPanelInternalProvider } from "./NavPanelContext.js";
+import { NavPanelResizeHandle } from "./NavPanelResizeHandle.js";
+const DEFAULT_WIDTH = 216;
+const MIN_WIDTH = 164;
+const MAX_WIDTH = 256;
+const NavPanel = ({ ref, className, children, resizable = false, 'data-testid': testId, 'aria-label': ariaLabel = 'Product navigation', ...props })=>{
+    const internalRef = useRef(null);
+    const focusRail = useCallback(()=>{
+        const rail = document.querySelector('[data-slot="nav-rail"]');
+        const target = rail?.querySelector('[tabindex="0"]');
+        target?.focus();
+    }, []);
+    const focusFirstItemAfterNav = useCallback(()=>{
+        const container = internalRef.current;
+        if (!container) return;
+        const observer = new MutationObserver(()=>{
+            const back = container.querySelector('[data-slot="nav-panel-back"]');
+            const first = container.querySelector('[data-slot="nav-panel-item"], [data-slot="nav-panel-back"]');
+            const target = back ?? first;
+            if (target) {
+                target.setAttribute('tabindex', '0');
+                target.focus();
+                observer.disconnect();
+            }
+        });
+        observer.observe(container, {
+            childList: true,
+            subtree: true
+        });
+        setTimeout(()=>observer.disconnect(), 2000);
+    }, []);
+    useArrowNav(internalRef, '[data-slot="nav-panel-item"], [data-slot="nav-panel-group-label"], [data-slot="nav-panel-group-item"], [data-slot="nav-panel-back"]', {
+        onArrowLeft: focusRail,
+        onEnter: focusFirstItemAfterNav
+    });
+    const [width, setWidth] = useState(DEFAULT_WIDTH);
+    const [isResizing, setIsResizing] = useState(false);
+    const contextValue = useMemo(()=>({
+            width,
+            setWidth,
+            isResizing,
+            setIsResizing,
+            minWidth: MIN_WIDTH,
+            maxWidth: MAX_WIDTH
+        }), [
+        width,
+        isResizing
+    ]);
+    if (resizable) return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx(NavPanelInternalProvider, {
+            value: contextValue,
+            children: /*#__PURE__*/ jsxs("aside", {
+                ...props,
+                ref: composeRefs(internalRef, ref),
+                "aria-label": ariaLabel,
+                "data-slot": "nav-panel",
+                "data-testid": testId,
+                style: {
+                    width
+                },
+                className: cn('relative h-full shrink-0 border-r border-border-primary pt-8', isResizing && 'select-none', className),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex h-full flex-col gap-2 overflow-y-auto [scrollbar-width:thin] px-8 pb-8",
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(NavPanelResizeHandle, {})
+                ]
+            })
+        })
+    });
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("aside", {
+            ...props,
+            ref: composeRefs(internalRef, ref),
+            "aria-label": ariaLabel,
+            "data-slot": "nav-panel",
+            "data-testid": testId,
+            className: cn('flex h-full w-[216px] shrink-0 flex-col gap-2 overflow-y-auto [scrollbar-width:thin] border-r border-border-primary p-8', className),
+            children: children
+        })
+    });
+};
+NavPanel.displayName = 'NavPanel';
+export { NavPanel };

package/dist/components/NavPanel/NavPanelBack.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+export interface NavPanelBackProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+}
+export declare const NavPanelBack: FC<NavPanelBackProps>;

package/dist/components/NavPanel/NavPanelBack.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CornerUpLeft } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const NavPanelBack = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('back');
+    return /*#__PURE__*/ jsxs("button", {
+        ...props,
+        ref: ref,
+        type: "button",
+        "data-slot": "nav-panel-back",
+        "data-testid": testId,
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-secondary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        children: [
+            /*#__PURE__*/ jsx(CornerUpLeft, {
+                size: "md"
+            }),
+            /*#__PURE__*/ jsxs(Text, {
+                size: "sm",
+                truncate: true,
+                children: [
+                    "Back to ",
+                    children
+                ]
+            })
+        ]
+    });
+};
+NavPanelBack.displayName = 'NavPanelBack';
+export { NavPanelBack };

package/dist/components/NavPanel/NavPanelContext.d.ts

@@ -0,0 +1,12 @@
+import { type Dispatch, type SetStateAction } from 'react';
+interface NavPanelInternalContextValue {
+    width: number;
+    setWidth: Dispatch<SetStateAction<number>>;
+    isResizing: boolean;
+    setIsResizing: Dispatch<SetStateAction<boolean>>;
+    minWidth: number;
+    maxWidth: number;
+}
+export declare const NavPanelInternalProvider: import("react").Provider<NavPanelInternalContextValue | null>;
+export declare function useNavPanelInternalContext(): NavPanelInternalContextValue;
+export {};

package/dist/components/NavPanel/NavPanelContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const NavPanelInternalContext = /*#__PURE__*/ createContext(null);
+const NavPanelInternalProvider = NavPanelInternalContext.Provider;
+function useNavPanelInternalContext() {
+    const ctx = useContext(NavPanelInternalContext);
+    if (!ctx) throw new Error('useNavPanelInternalContext must be used within NavPanelInternalProvider');
+    return ctx;
+}
+export { NavPanelInternalProvider, useNavPanelInternalContext };

package/dist/components/NavPanel/NavPanelDivider.d.ts

@@ -0,0 +1,3 @@
+import type { FC, HTMLAttributes } from 'react';
+export type NavPanelDividerProps = HTMLAttributes<HTMLDivElement>;
+export declare const NavPanelDivider: FC<NavPanelDividerProps>;

package/dist/components/NavPanel/NavPanelDivider.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const NavPanelDivider = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        role: "none",
+        "data-slot": "nav-panel-divider",
+        className: cn('my-4 mx-8 h-px shrink-0 bg-border-primary', className)
+    });
+NavPanelDivider.displayName = 'NavPanelDivider';
+export { NavPanelDivider };

package/dist/components/NavPanel/NavPanelGroup.d.ts

@@ -0,0 +1,18 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+interface NavPanelGroupContextValue {
+    expanded: boolean;
+    toggle: () => void;
+    contentId: string;
+}
+export declare function useNavPanelGroupContext(): NavPanelGroupContextValue;
+declare const NavPanelDepthContext: import("react").Context<number>;
+export declare function useNavPanelDepth(): number;
+export { NavPanelDepthContext };
+export interface NavPanelGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    children: ReactNode;
+}
+export declare const NavPanelGroup: FC<NavPanelGroupProps>;

package/dist/components/NavPanel/NavPanelGroup.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useId, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const NavPanelGroupContext = /*#__PURE__*/ createContext({
+    expanded: false,
+    toggle: ()=>{},
+    contentId: ''
+});
+function useNavPanelGroupContext() {
+    return useContext(NavPanelGroupContext);
+}
+const NavPanelDepthContext = /*#__PURE__*/ createContext(0);
+function useNavPanelDepth() {
+    return useContext(NavPanelDepthContext);
+}
+const NavPanelGroup = ({ ref, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, children, ...props })=>{
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+    const isControlled = void 0 !== controlledExpanded;
+    const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;
+    const contentId = useId();
+    const testId = useTestId('group');
+    const toggle = useCallback(()=>{
+        const next = !expanded;
+        if (!isControlled) setUncontrolledExpanded(next);
+        onExpandedChange?.(next);
+    }, [
+        expanded,
+        isControlled,
+        onExpandedChange
+    ]);
+    return /*#__PURE__*/ jsx(NavPanelGroupContext.Provider, {
+        value: {
+            expanded,
+            toggle,
+            contentId
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "nav-panel-group",
+            "data-testid": testId,
+            className: cn('flex flex-col', className),
+            children: children
+        })
+    });
+};
+NavPanelGroup.displayName = 'NavPanelGroup';
+export { NavPanelDepthContext, NavPanelGroup, useNavPanelDepth, useNavPanelGroupContext };

package/dist/components/NavPanel/NavPanelGroupContent.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface NavPanelGroupContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const NavPanelGroupContent: FC<NavPanelGroupContentProps>;

package/dist/components/NavPanel/NavPanelGroupContent.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { NavPanelDepthContext, useNavPanelDepth, useNavPanelGroupContext } from "./NavPanelGroup.js";
+const NavPanelGroupContent = ({ ref, className, children, ...props })=>{
+    const { expanded, contentId } = useNavPanelGroupContext();
+    const parentDepth = useNavPanelDepth();
+    const depth = parentDepth + 1;
+    const innerRef = useRef(null);
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        id: contentId,
+        role: "group",
+        "data-slot": "nav-panel-group-content",
+        className: cn('relative grid transition-[grid-template-rows] duration-150 ease-out', expanded ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr]', className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "absolute top-0 bottom-0 w-px bg-border-primary",
+                style: {
+                    left: 16 * depth + 8 * parentDepth
+                }
+            }),
+            /*#__PURE__*/ jsx(NavPanelDepthContext.Provider, {
+                value: depth,
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: innerRef,
+                    className: "flex flex-col gap-2 overflow-hidden",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+NavPanelGroupContent.displayName = 'NavPanelGroupContent';
+export { NavPanelGroupContent };

package/dist/components/NavPanel/NavPanelGroupItem.d.ts

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes, ComponentType, FC, ReactNode, Ref } from 'react';
+import type { SvgIconProps } from '../../icons/SvgIcon';
+export interface NavPanelGroupItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    ref?: Ref<HTMLAnchorElement>;
+    asChild?: boolean;
+    icon?: ComponentType<SvgIconProps>;
+    active?: boolean;
+    children: ReactNode;
+}
+export declare const NavPanelGroupItem: FC<NavPanelGroupItemProps>;

package/dist/components/NavPanel/NavPanelGroupItem.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { navPanelGroupItemVariants } from "./classes.js";
+import { useNavPanelDepth } from "./NavPanelGroup.js";
+const NavPanelGroupItem = ({ ref, asChild = false, icon: Icon, active = false, className, children, ...props })=>{
+    const testId = useTestId('group-item');
+    const depth = useNavPanelDepth();
+    const Comp = asChild ? Slot : 'a';
+    return /*#__PURE__*/ jsxs(Comp, {
+        ...props,
+        ref: ref,
+        "aria-current": active ? 'page' : void 0,
+        "data-slot": "nav-panel-group-item",
+        "data-testid": testId,
+        className: cn(navPanelGroupItemVariants({
+            active
+        }), className),
+        style: {
+            paddingLeft: 8 + 24 * depth
+        },
+        children: [
+            Icon && /*#__PURE__*/ jsx("span", {
+                className: "flex shrink-0 items-center justify-center",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    size: "md"
+                })
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                truncate: true,
+                children: children
+            })
+        ]
+    });
+};
+NavPanelGroupItem.displayName = 'NavPanelGroupItem';
+export { NavPanelGroupItem };

package/dist/components/NavPanel/NavPanelGroupLabel.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes, ComponentType, FC, ReactNode, Ref } from 'react';
+import type { SvgIconProps } from '../../icons/SvgIcon';
+export interface NavPanelGroupLabelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+    icon?: ComponentType<SvgIconProps>;
+    children: ReactNode;
+}
+export declare const NavPanelGroupLabel: FC<NavPanelGroupLabelProps>;

package/dist/components/NavPanel/NavPanelGroupLabel.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { useNavPanelDepth, useNavPanelGroupContext } from "./NavPanelGroup.js";
+const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=>{
+    const { expanded, toggle, contentId } = useNavPanelGroupContext();
+    const depth = useNavPanelDepth();
+    const testId = useTestId('group-label');
+    return /*#__PURE__*/ jsxs("button", {
+        ...props,
+        ref: ref,
+        type: "button",
+        "aria-expanded": expanded,
+        "aria-controls": contentId,
+        "data-slot": "nav-panel-group-label",
+        "data-testid": testId,
+        onClick: toggle,
+        style: {
+            paddingLeft: 8 + 24 * depth
+        },
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-secondary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        children: [
+            Icon && /*#__PURE__*/ jsx("span", {
+                className: "flex shrink-0 items-center justify-center",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    size: "md"
+                })
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                style: {
+                    flex: 1
+                },
+                align: "left",
+                truncate: true,
+                children: children
+            }),
+            /*#__PURE__*/ jsx(ChevronRight, {
+                size: "sm",
+                className: cn('shrink-0 transition-transform duration-150', expanded && 'rotate-90')
+            })
+        ]
+    });
+};
+NavPanelGroupLabel.displayName = 'NavPanelGroupLabel';
+export { NavPanelGroupLabel };

package/dist/components/NavPanel/NavPanelHeader.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface NavPanelHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const NavPanelHeader: FC<NavPanelHeaderProps>;

package/dist/components/NavPanel/NavPanelHeader.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const NavPanelHeader = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('header');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "nav-panel-header",
+        "data-testid": testId,
+        className: cn('sticky top-0 z-10 flex shrink-0 items-center bg-bg-surface-1 p-4', className),
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            weight: "medium",
+            children: children
+        })
+    });
+};
+NavPanelHeader.displayName = 'NavPanelHeader';
+export { NavPanelHeader };

package/dist/components/NavPanel/NavPanelItem.d.ts

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes, ComponentType, FC, ReactNode, Ref } from 'react';
+import type { SvgIconProps } from '../../icons/SvgIcon';
+export interface NavPanelItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    ref?: Ref<HTMLAnchorElement>;
+    asChild?: boolean;
+    icon?: ComponentType<SvgIconProps>;
+    active?: boolean;
+    children: ReactNode;
+}
+export declare const NavPanelItem: FC<NavPanelItemProps>;

package/dist/components/NavPanel/NavPanelItem.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { navPanelItemVariants } from "./classes.js";
+const NavPanelItem = ({ ref, asChild = false, icon: Icon, active = false, className, children, ...props })=>{
+    const testId = useTestId('item');
+    const Comp = asChild ? Slot : 'a';
+    return /*#__PURE__*/ jsxs(Comp, {
+        ...props,
+        ref: ref,
+        "aria-current": active ? 'page' : void 0,
+        "data-slot": "nav-panel-item",
+        "data-testid": testId,
+        className: cn(navPanelItemVariants({
+            active
+        }), className),
+        children: [
+            Icon && /*#__PURE__*/ jsx("span", {
+                className: "flex shrink-0 items-center justify-center",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    size: "md"
+                })
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                truncate: true,
+                children: children
+            })
+        ]
+    });
+};
+NavPanelItem.displayName = 'NavPanelItem';
+export { NavPanelItem };

package/dist/components/NavPanel/NavPanelResizeHandle.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const NavPanelResizeHandle: FC;