@uipath/apollo-wind 2.63.0 → 2.65.0

package/dist/components/ui/sidebar/sidebar-menu.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef, useId, useMemo } from "react";
+import { Skeleton } from "../skeleton.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip.js";
+import { cn } from "../../../lib/index.js";
+import { guardDisabledClick, useSidebar } from "./sidebar-context.js";
+const SidebarMenu = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("ul", {
+        ref: ref,
+        "data-slot": "sidebar-menu",
+        "data-sidebar": "menu",
+        className: cn('flex w-full min-w-0 flex-col gap-1', className),
+        ...props
+    }));
+SidebarMenu.displayName = 'SidebarMenu';
+const SidebarMenuItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("li", {
+        ref: ref,
+        "data-slot": "sidebar-menu-item",
+        "data-sidebar": "menu-item",
+        className: cn('group/menu-item relative', className),
+        ...props
+    }));
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm text-foreground ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-has-data-[sidebar=menu-badge]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-background-hover focus-visible:ring-2 active:bg-background-hover disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-surface-selected data-[active=true]:hover:bg-surface-selected data-[active=true]:text-foreground data-[state=open]:hover:bg-background-hover [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: '',
+            outline: 'bg-background inset-ring inset-ring-border-subtle hover:inset-ring-border'
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});
+const SidebarMenuButton = /*#__PURE__*/ forwardRef(({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, onClick, onClickCapture, ...props }, ref)=>{
+    const Comp = asChild ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+    const button = /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        type: asChild ? void 0 : 'button',
+        "data-slot": "sidebar-menu-button",
+        "data-sidebar": "menu-button",
+        "data-size": size,
+        "data-active": isActive,
+        "aria-current": isActive ? 'true' : void 0,
+        className: cn(sidebarMenuButtonVariants({
+            variant,
+            size
+        }), className),
+        ...props,
+        onClick: onClick,
+        onClickCapture: guardDisabledClick(props['aria-disabled'], onClickCapture)
+    });
+    if (!tooltip) return button;
+    const tooltipProps = 'string' == typeof tooltip ? {
+        children: tooltip
+    } : tooltip;
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: button
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: "right",
+                align: "center",
+                hidden: 'collapsed' !== state || isMobile,
+                ...tooltipProps
+            })
+        ]
+    });
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+const SidebarMenuAction = /*#__PURE__*/ forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref)=>{
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        type: asChild ? void 0 : 'button',
+        "data-slot": "sidebar-menu-action",
+        "data-sidebar": "menu-action",
+        className: cn('absolute top-1.5 right-1 flex aspect-square w-5 cursor-pointer items-center justify-center rounded-md p-0 text-foreground-muted ring-ring outline-hidden transition-transform peer-hover/menu-button:text-foreground hover:bg-background-hover hover:text-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'after:absolute after:-inset-2 md:after:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-3.5', 'group-data-[collapsible=icon]:hidden', showOnHover && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-foreground data-[state=open]:opacity-100 md:opacity-0', className),
+        ...props
+    });
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+const SidebarMenuBadge = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "sidebar-menu-badge",
+        "data-sidebar": "menu-badge",
+        className: cn('pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-foreground-muted tabular-nums select-none', 'peer-data-[active=true]/menu-button:text-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-3.5', 'group-data-[collapsible=icon]:hidden', className),
+        ...props
+    }));
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+const SidebarMenuSkeleton = /*#__PURE__*/ forwardRef(({ className, showIcon = false, ...props }, ref)=>{
+    const id = useId();
+    const width = useMemo(()=>{
+        let hash = 0;
+        for(let i = 0; i < id.length; i++)hash = 31 * hash + id.charCodeAt(i) >>> 0;
+        return `${hash % 41 + 50}%`;
+    }, [
+        id
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "sidebar-menu-skeleton",
+        "data-sidebar": "menu-skeleton",
+        className: cn('flex h-8 items-center gap-2 rounded-md px-2', className),
+        ...props,
+        children: [
+            showIcon && /*#__PURE__*/ jsx(Skeleton, {
+                className: "size-4 rounded-md",
+                "data-sidebar": "menu-skeleton-icon"
+            }),
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-4 max-w-(--skeleton-width) flex-1",
+                "data-sidebar": "menu-skeleton-text",
+                style: {
+                    '--skeleton-width': width
+                }
+            })
+        ]
+    });
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, sidebarMenuButtonVariants };

package/dist/components/ui/sidebar/sidebar.cjs

@@ -0,0 +1,220 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Sidebar: ()=>Sidebar,
+    SidebarRail: ()=>SidebarRail,
+    SidebarTrigger: ()=>SidebarTrigger,
+    SidebarInset: ()=>SidebarInset
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_button_cjs_namespaceObject = require("../button.cjs");
+const external_sheet_cjs_namespaceObject = require("../sheet.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_sidebar_context_cjs_namespaceObject = require("./sidebar-context.cjs");
+const HIDING_ATTRIBUTES = [
+    {
+        name: 'inert',
+        value: ''
+    },
+    {
+        name: 'aria-hidden',
+        value: 'true'
+    }
+];
+const Sidebar = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref)=>{
+    const { isMobile, state, openMobile, setOpenMobile } = (0, external_sidebar_context_cjs_namespaceObject.useSidebar)();
+    const containerRef = external_react_namespaceObject.useRef(null);
+    const setContainerRef = external_react_namespaceObject.useMemo(()=>(0, index_cjs_namespaceObject.composeRefs)(containerRef, ref), [
+        ref
+    ]);
+    const hiddenOffcanvas = 'offcanvas' === collapsible && 'collapsed' === state;
+    external_react_namespaceObject.useEffect(()=>{
+        const inner = containerRef.current?.querySelector('[data-slot="sidebar-inner"]');
+        if (!inner || isMobile) return;
+        const sync = ()=>{
+            for (const child of Array.from(inner.children))if (!child.matches('[data-sidebar="rail"]')) for (const attr of HIDING_ATTRIBUTES){
+                const marker = `data-sidebar-set-${attr.name}`;
+                if (hiddenOffcanvas) {
+                    if (!child.hasAttribute(attr.name)) {
+                        child.setAttribute(attr.name, attr.value);
+                        child.setAttribute(marker, '');
+                    }
+                } else if (child.hasAttribute(marker)) {
+                    child.removeAttribute(attr.name);
+                    child.removeAttribute(marker);
+                }
+            }
+        };
+        sync();
+        if (!hiddenOffcanvas || "u" < typeof MutationObserver) return;
+        const observer = new MutationObserver(sync);
+        observer.observe(inner, {
+            childList: true
+        });
+        return ()=>observer.disconnect();
+    }, [
+        hiddenOffcanvas,
+        isMobile
+    ]);
+    if ('none' === collapsible) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        "data-slot": "sidebar",
+        "data-sidebar": "sidebar",
+        className: (0, index_cjs_namespaceObject.cn)('flex h-full w-(--sidebar-width) flex-col text-foreground', className),
+        ...props,
+        children: children
+    });
+    if (isMobile) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_sheet_cjs_namespaceObject.Sheet, {
+        open: openMobile,
+        onOpenChange: setOpenMobile,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_sheet_cjs_namespaceObject.SheetContent, {
+            ref: ref,
+            ...props,
+            "data-sidebar": "sidebar",
+            "data-slot": "sidebar",
+            "data-mobile": "true",
+            className: (0, index_cjs_namespaceObject.cn)('w-(--sidebar-width) max-w-none bg-surface p-0 text-foreground sm:max-w-none [&>button]:hidden', className),
+            style: {
+                '--sidebar-width': external_sidebar_context_cjs_namespaceObject.SIDEBAR_WIDTH_MOBILE,
+                ...props.style
+            },
+            side: side,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_sheet_cjs_namespaceObject.SheetHeader, {
+                    className: "sr-only",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_sheet_cjs_namespaceObject.SheetTitle, {
+                            children: "Sidebar"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_sheet_cjs_namespaceObject.SheetDescription, {
+                            children: "Displays the mobile sidebar."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "flex h-full w-full flex-col",
+                    children: children
+                })
+            ]
+        })
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "group peer hidden text-foreground data-[side=right]:order-last md:block",
+        "data-state": state,
+        "data-collapsible": 'collapsed' === state ? collapsible : '',
+        "data-variant": variant,
+        "data-side": side,
+        "data-slot": "sidebar",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                "data-slot": "sidebar-gap",
+                className: (0, index_cjs_namespaceObject.cn)('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', 'floating' === variant || 'inset' === variant ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)')
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                ref: setContainerRef,
+                "data-slot": "sidebar-container",
+                className: (0, index_cjs_namespaceObject.cn)('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', 'left' === side ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 'floating' === variant || 'inset' === variant ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' : 'border-border-subtle group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className),
+                ...props,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    "data-sidebar": "sidebar",
+                    "data-slot": "sidebar-inner",
+                    className: "flex h-full w-full flex-col bg-surface group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow-sm",
+                    children: children
+                })
+            })
+        ]
+    });
+});
+Sidebar.displayName = 'Sidebar';
+const SidebarTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, onClick, ...props }, ref)=>{
+    const { toggleSidebar, open, openMobile, isMobile } = (0, external_sidebar_context_cjs_namespaceObject.useSidebar)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+        ref: ref,
+        "aria-expanded": isMobile ? openMobile : open,
+        "data-sidebar": "trigger",
+        "data-slot": "sidebar-trigger",
+        variant: "ghost",
+        size: "2xs",
+        icon: true,
+        className: className,
+        onClick: (event)=>{
+            onClick?.(event);
+            toggleSidebar();
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelLeftIcon, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "sr-only",
+                children: "Toggle Sidebar"
+            })
+        ]
+    });
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+const SidebarRail = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, onClick, ...props }, ref)=>{
+    const { toggleSidebar, open } = (0, external_sidebar_context_cjs_namespaceObject.useSidebar)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        ref: ref,
+        "aria-expanded": open,
+        type: "button",
+        "data-sidebar": "rail",
+        "data-slot": "sidebar-rail",
+        "aria-label": "Toggle Sidebar",
+        tabIndex: -1,
+        onClick: (event)=>{
+            onClick?.(event);
+            toggleSidebar();
+        },
+        title: "Toggle Sidebar",
+        className: (0, index_cjs_namespaceObject.cn)('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border-subtle md:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className),
+        ...props
+    });
+});
+SidebarRail.displayName = 'SidebarRail';
+const SidebarInset = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
+        ref: ref,
+        "data-slot": "sidebar-inset",
+        className: (0, index_cjs_namespaceObject.cn)('relative flex w-full flex-1 flex-col bg-background', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', 'md:peer-data-[variant=inset]:peer-data-[side=right]:mr-0 md:peer-data-[variant=inset]:peer-data-[side=right]:ml-2 md:peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2', className),
+        ...props
+    }));
+SidebarInset.displayName = 'SidebarInset';
+exports.Sidebar = __webpack_exports__.Sidebar;
+exports.SidebarInset = __webpack_exports__.SidebarInset;
+exports.SidebarRail = __webpack_exports__.SidebarRail;
+exports.SidebarTrigger = __webpack_exports__.SidebarTrigger;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Sidebar",
+    "SidebarInset",
+    "SidebarRail",
+    "SidebarTrigger"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export interface SidebarProps extends React.ComponentProps<'div'> {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    /**
+     * - `offcanvas`: slides fully out of view when collapsed.
+     * - `icon`: collapses to an icon rail.
+     * - `none`: static panel for embedding (dialogs, split panes).
+     */
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+}
+declare const Sidebar: React.ForwardRefExoticComponent<Omit<SidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("../button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A thin, pointer-only toggle along the sidebar's edge. It's left out of the tab
+ * order on purpose (as in shadcn), so it doesn't add an invisible tab stop beside
+ * every sidebar. Keyboard users toggle with `SidebarTrigger`, so a layout should
+ * always include one. The rail still reports `aria-expanded` for assistive tech.
+ */
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Sidebar, SidebarInset, SidebarRail, SidebarTrigger };

package/dist/components/ui/sidebar/sidebar.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftIcon } from "lucide-react";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { Button } from "../button.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../sheet.js";
+import { cn, composeRefs } from "../../../lib/index.js";
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./sidebar-context.js";
+const HIDING_ATTRIBUTES = [
+    {
+        name: 'inert',
+        value: ''
+    },
+    {
+        name: 'aria-hidden',
+        value: 'true'
+    }
+];
+const Sidebar = /*#__PURE__*/ forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref)=>{
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const containerRef = useRef(null);
+    const setContainerRef = useMemo(()=>composeRefs(containerRef, ref), [
+        ref
+    ]);
+    const hiddenOffcanvas = 'offcanvas' === collapsible && 'collapsed' === state;
+    useEffect(()=>{
+        const inner = containerRef.current?.querySelector('[data-slot="sidebar-inner"]');
+        if (!inner || isMobile) return;
+        const sync = ()=>{
+            for (const child of Array.from(inner.children))if (!child.matches('[data-sidebar="rail"]')) for (const attr of HIDING_ATTRIBUTES){
+                const marker = `data-sidebar-set-${attr.name}`;
+                if (hiddenOffcanvas) {
+                    if (!child.hasAttribute(attr.name)) {
+                        child.setAttribute(attr.name, attr.value);
+                        child.setAttribute(marker, '');
+                    }
+                } else if (child.hasAttribute(marker)) {
+                    child.removeAttribute(attr.name);
+                    child.removeAttribute(marker);
+                }
+            }
+        };
+        sync();
+        if (!hiddenOffcanvas || "u" < typeof MutationObserver) return;
+        const observer = new MutationObserver(sync);
+        observer.observe(inner, {
+            childList: true
+        });
+        return ()=>observer.disconnect();
+    }, [
+        hiddenOffcanvas,
+        isMobile
+    ]);
+    if ('none' === collapsible) return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "sidebar",
+        "data-sidebar": "sidebar",
+        className: cn('flex h-full w-(--sidebar-width) flex-col text-foreground', className),
+        ...props,
+        children: children
+    });
+    if (isMobile) return /*#__PURE__*/ jsx(Sheet, {
+        open: openMobile,
+        onOpenChange: setOpenMobile,
+        children: /*#__PURE__*/ jsxs(SheetContent, {
+            ref: ref,
+            ...props,
+            "data-sidebar": "sidebar",
+            "data-slot": "sidebar",
+            "data-mobile": "true",
+            className: cn('w-(--sidebar-width) max-w-none bg-surface p-0 text-foreground sm:max-w-none [&>button]:hidden', className),
+            style: {
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                ...props.style
+            },
+            side: side,
+            children: [
+                /*#__PURE__*/ jsxs(SheetHeader, {
+                    className: "sr-only",
+                    children: [
+                        /*#__PURE__*/ jsx(SheetTitle, {
+                            children: "Sidebar"
+                        }),
+                        /*#__PURE__*/ jsx(SheetDescription, {
+                            children: "Displays the mobile sidebar."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex h-full w-full flex-col",
+                    children: children
+                })
+            ]
+        })
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "group peer hidden text-foreground data-[side=right]:order-last md:block",
+        "data-state": state,
+        "data-collapsible": 'collapsed' === state ? collapsible : '',
+        "data-variant": variant,
+        "data-side": side,
+        "data-slot": "sidebar",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                "data-slot": "sidebar-gap",
+                className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', 'floating' === variant || 'inset' === variant ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)')
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: setContainerRef,
+                "data-slot": "sidebar-container",
+                className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', 'left' === side ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 'floating' === variant || 'inset' === variant ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' : 'border-border-subtle group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className),
+                ...props,
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-sidebar": "sidebar",
+                    "data-slot": "sidebar-inner",
+                    className: "flex h-full w-full flex-col bg-surface group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow-sm",
+                    children: children
+                })
+            })
+        ]
+    });
+});
+Sidebar.displayName = 'Sidebar';
+const SidebarTrigger = /*#__PURE__*/ forwardRef(({ className, onClick, ...props }, ref)=>{
+    const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
+    return /*#__PURE__*/ jsxs(Button, {
+        ref: ref,
+        "aria-expanded": isMobile ? openMobile : open,
+        "data-sidebar": "trigger",
+        "data-slot": "sidebar-trigger",
+        variant: "ghost",
+        size: "2xs",
+        icon: true,
+        className: className,
+        onClick: (event)=>{
+            onClick?.(event);
+            toggleSidebar();
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(PanelLeftIcon, {}),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: "Toggle Sidebar"
+            })
+        ]
+    });
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+const SidebarRail = /*#__PURE__*/ forwardRef(({ className, onClick, ...props }, ref)=>{
+    const { toggleSidebar, open } = useSidebar();
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        "aria-expanded": open,
+        type: "button",
+        "data-sidebar": "rail",
+        "data-slot": "sidebar-rail",
+        "aria-label": "Toggle Sidebar",
+        tabIndex: -1,
+        onClick: (event)=>{
+            onClick?.(event);
+            toggleSidebar();
+        },
+        title: "Toggle Sidebar",
+        className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border-subtle md:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className),
+        ...props
+    });
+});
+SidebarRail.displayName = 'SidebarRail';
+const SidebarInset = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("main", {
+        ref: ref,
+        "data-slot": "sidebar-inset",
+        className: cn('relative flex w-full flex-1 flex-col bg-background', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', 'md:peer-data-[variant=inset]:peer-data-[side=right]:mr-0 md:peer-data-[variant=inset]:peer-data-[side=right]:ml-2 md:peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2', className),
+        ...props
+    }));
+SidebarInset.displayName = 'SidebarInset';
+export { Sidebar, SidebarInset, SidebarRail, SidebarTrigger };

package/dist/components/ui/variable-value-control.cjs

@@ -28,12 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+const aria_ids_cjs_namespaceObject = require("../forms/aria-ids.cjs");
 const value_mode_strings_cjs_namespaceObject = require("./field-addons/value-mode-strings.cjs");
 const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("./variable-picker/index.cjs");
 const external_lib_index_cjs_namespaceObject = require("../../lib/index.cjs");
-const VariableValueControl = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, value, onChange, onBlur, inputRef, variables, disabled, placeholder, strings, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }, ref)=>{
+const VariableValueControl = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, value, onChange, onBlur, inputRef, variables, disabled, placeholder, strings, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, controlProps }, ref)=>{
     const text = {
         ...value_mode_strings_cjs_namespaceObject.DEFAULT_VALUE_MODE_STRINGS,
         ...strings
@@ -70,6 +71,7 @@ const VariableValueControl = /*#__PURE__*/ external_react_namespaceObject.forwar
                 className: className,
                 "aria-label": ariaLabel,
                 "aria-labelledby": ariaLabelledBy,
+                "aria-describedby": (0, aria_ids_cjs_namespaceObject.joinIds)(ariaDescribedBy, controlProps?.['aria-describedby']),
                 children: reference && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                     className: "truncate font-mono text-sm",
                     children: reference

package/dist/components/ui/variable-value-control.d.ts

@@ -24,6 +24,11 @@ export interface VariableValueControlProps {
     className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    /** The value-mode wiring; its `aria-describedby` joins the control's own. */
+    controlProps?: {
+        'aria-describedby'?: string;
+    };
 }
 /**
  * A value bound to a variable, for an `InputGroup`: the whole control is a picker whose trigger

package/dist/components/ui/variable-value-control.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, useState } from "react";
+import { joinIds } from "../forms/aria-ids.js";
 import { DEFAULT_VALUE_MODE_STRINGS } from "./field-addons/value-mode-strings.js";
 import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Popover, PopoverContent } from "./popover.js";
 import { VariablePickerContent } from "./variable-picker/index.js";
 import { composeRefs } from "../../lib/index.js";
-const VariableValueControl = /*#__PURE__*/ forwardRef(({ id, value, onChange, onBlur, inputRef, variables, disabled, placeholder, strings, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }, ref)=>{
+const VariableValueControl = /*#__PURE__*/ forwardRef(({ id, value, onChange, onBlur, inputRef, variables, disabled, placeholder, strings, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, controlProps }, ref)=>{
     const text = {
         ...DEFAULT_VALUE_MODE_STRINGS,
         ...strings
@@ -42,6 +43,7 @@ const VariableValueControl = /*#__PURE__*/ forwardRef(({ id, value, onChange, on
                 className: className,
                 "aria-label": ariaLabel,
                 "aria-labelledby": ariaLabelledBy,
+                "aria-describedby": joinIds(ariaDescribedBy, controlProps?.['aria-describedby']),
                 children: reference && /*#__PURE__*/ jsx("span", {
                     className: "truncate font-mono text-sm",
                     children: reference