@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/dist/ui/select.js

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { mergeRefs } from "./slot.js";
+import { Portal } from "./portal.js";
+import { useFloating } from "./use-floating.js";
+import { usePresence } from "./use-presence.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { ChevronDownIcon, CheckIcon } from "../icons/index.js";
+const SelectContext = React.createContext(null);
+function useSelect() {
+    const ctx = React.useContext(SelectContext);
+    if (!ctx)
+        throw new Error("Select parts must be used within <Select>");
+    return ctx;
+}
+function Select({ value, defaultValue, onValueChange, open, defaultOpen = false, onOpenChange, children, }) {
+    const [selected, setSelected] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const triggerRef = React.useRef(null);
+    const contentId = React.useId();
+    const [labels, setLabels] = React.useState({});
+    const registerLabel = React.useCallback((v, label) => setLabels((prev) => ({ ...prev, [v]: label })), []);
+    const unregisterLabel = React.useCallback((v) => setLabels((prev) => {
+        const { [v]: _, ...rest } = prev;
+        return rest;
+    }), []);
+    const setValue = React.useCallback((v) => {
+        setSelected(v);
+        setOpen(false);
+        triggerRef.current?.focus();
+    }, [setSelected, setOpen]);
+    return (_jsx(SelectContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            value: selected,
+            setValue,
+            triggerRef,
+            contentId,
+            labels,
+            registerLabel,
+            unregisterLabel,
+        }, children: children }));
+}
+function SelectGroup({ className, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "select-group", className: cn("scroll-my-1 p-1", className), ...props }));
+}
+function SelectValue({ className, placeholder, ...props }) {
+    const { value, labels } = useSelect();
+    const label = value !== undefined ? labels[value] : undefined;
+    return (_jsx("span", { "data-slot": "select-value", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex flex-1 text-left", className), ...props, children: label ?? placeholder ?? null }));
+}
+function SelectTrigger({ className, size = "default", children, onClick, onKeyDown, ...props }) {
+    const { open, setOpen, value, triggerRef, contentId } = useSelect();
+    return (_jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-slot": "select-trigger", "data-size": size, "data-state": open ? "open" : "closed", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented)
+                return;
+            if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+            }
+        }, ...props, children: [children, _jsx(ChevronDownIcon, {})] }));
+}
+function optionsOf(container) {
+    return Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
+}
+function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, onKeyDown, ...props }) {
+    const { open, setOpen, value, triggerRef, contentId } = useSelect();
+    const [mounted, presenceRef] = usePresence(open);
+    const { floatingRef, pos } = useFloating(triggerRef, mounted, {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+    });
+    const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
+    // Focus the selected (or first) option once the popup is actually visible.
+    const didFocus = React.useRef(false);
+    React.useEffect(() => {
+        if (!open) {
+            didFocus.current = false;
+            return;
+        }
+        let raf = 0;
+        const tryFocus = () => {
+            const c = containerRef.current;
+            if (c && getComputedStyle(c).visibility !== "hidden") {
+                didFocus.current = true;
+                const opts = optionsOf(c);
+                const selected = opts.find((o) => o.getAttribute("data-value") === value);
+                (selected ?? opts[0])?.focus();
+            }
+            else if (!didFocus.current) {
+                raf = requestAnimationFrame(tryFocus);
+            }
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
+    }, [open, value]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (triggerRef.current?.contains(t))
+                return;
+            if (containerRef.current?.contains(t))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    }, [open, setOpen, triggerRef]);
+    // While closed, render the items into a hidden tree so their value→label
+    // mappings register — this lets SelectValue show the selected label on initial
+    // render, before the listbox has ever been opened.
+    if (!mounted) {
+        return (_jsx("div", { hidden: true, "aria-hidden": true, "data-slot": "select-content-registry", children: children }));
+    }
+    const triggerWidth = triggerRef.current?.offsetWidth;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "listbox", tabIndex: -1, "data-slot": "select-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
+                position: "fixed",
+                left: pos?.x ?? 0,
+                top: pos?.y ?? 0,
+                minWidth: triggerWidth,
+                visibility: pos ? "visible" : "hidden",
+                ["--transform-origin"]: pos?.transformOrigin ?? "center",
+                ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
+            }, onPointerMove: (e) => {
+                const opt = e.target.closest('[role="option"]:not([data-disabled])');
+                if (opt && opt !== document.activeElement)
+                    opt.focus();
+            }, onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented)
+                    return;
+                const c = containerRef.current;
+                const opts = optionsOf(c);
+                const idx = opts.indexOf(document.activeElement);
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    opts[idx < 0 ? 0 : (idx + 1) % opts.length]?.focus();
+                }
+                else if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    opts[idx < 0 ? opts.length - 1 : (idx - 1 + opts.length) % opts.length]?.focus();
+                }
+                else if (e.key === "Home") {
+                    e.preventDefault();
+                    opts[0]?.focus();
+                }
+                else if (e.key === "End") {
+                    e.preventDefault();
+                    opts[opts.length - 1]?.focus();
+                }
+                else if (e.key === "Escape") {
+                    e.preventDefault();
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                }
+                else if (e.key === "Enter" || e.key === " ") {
+                    const active = document.activeElement;
+                    if (active && c.contains(active) && active.getAttribute("role") === "option") {
+                        e.preventDefault();
+                        active.click();
+                    }
+                }
+                else {
+                    const match = onTypeaheadKeyDown(e, opts, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
+            }, className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
+}
+function SelectItem({ className, children, value, disabled, onClick, ...props }) {
+    const ctx = useSelect();
+    const selected = ctx.value === value;
+    // Register the value→label mapping. Kept sticky (no unregister on unmount) so
+    // SelectValue can still render the selected label after the list closes and
+    // its items unmount.
+    const { registerLabel } = ctx;
+    React.useEffect(() => {
+        registerLabel(value, children);
+    }, [value, children, registerLabel]);
+    return (_jsxs("div", { role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": disabled || undefined, "data-slot": "select-item", "data-value": value, "data-disabled": disabled ? "" : undefined, className: cn("relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+            if (disabled)
+                return;
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                ctx.setValue(value);
+        }, ...props, children: [_jsx("span", { className: "flex flex-1 shrink-0 items-center gap-2 whitespace-nowrap", children: children }), selected ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(CheckIcon, {}) })) : null] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx("div", { role: "separator", "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
+}
+/** No-op scroll buttons — native overflow handles scrolling. Kept for API parity. */
+function SelectScrollUpButton(_props) {
+    return null;
+}
+function SelectScrollDownButton(_props) {
+    return null;
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/ui/separator.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface SeparatorProps extends React.ComponentProps<"div"> {
+    orientation?: "horizontal" | "vertical";
+    /** Set true for a purely-visual divider hidden from a11y. Defaults to false
+     * so the separator keeps `role="separator"` semantics (matches the spec). */
+    decorative?: boolean;
+}
+/**
+ * Self-contained separator: a styled `<div>` with the correct ARIA role and
+ * orientation. No primitive framework, no `data-orientation` style bridge —
+ * orientation classes are applied directly.
+ */
+declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): React.JSX.Element;
+export { Separator };

package/dist/ui/separator.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+/**
+ * Self-contained separator: a styled `<div>` with the correct ARIA role and
+ * orientation. No primitive framework, no `data-orientation` style bridge —
+ * orientation classes are applied directly.
+ */
+function Separator({ className, orientation = "horizontal", decorative = false, ...props }) {
+    return (_jsx("div", { "data-slot": "separator", "data-orientation": orientation, role: decorative ? "none" : "separator", "aria-orientation": decorative ? undefined : orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", className), ...props }));
+}
+export { Separator };

package/dist/ui/sheet.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+type SheetSide = "top" | "right" | "bottom" | "left";
+export interface SheetProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+/** Self-contained sheet (drawer) on native `<dialog>`, sliding in from an edge.
+ * Exit slide is preserved via {@link usePresence} before `dialog.close()`. */
+declare function Sheet({ open, defaultOpen, onOpenChange, children }: SheetProps): React.JSX.Element;
+declare function SheetTrigger({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function SheetClose({ asChild, render, nativeButton: _nativeButton, children, onClick, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+export interface SheetContentProps extends React.ComponentProps<"dialog"> {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+}
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): React.JSX.Element | null;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/ui/sheet.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { Button } from "./button.js";
+import { Slot, mergeRefs, resolveRender } from "./slot.js";
+import { XIcon } from "../icons/index.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { usePresence } from "./use-presence.js";
+const SheetContext = React.createContext(null);
+function useSheet() {
+    const ctx = React.useContext(SheetContext);
+    if (!ctx)
+        throw new Error("Sheet parts must be used within <Sheet>");
+    return ctx;
+}
+/** Self-contained sheet (drawer) on native `<dialog>`, sliding in from an edge.
+ * Exit slide is preserved via {@link usePresence} before `dialog.close()`. */
+function Sheet({ open, defaultOpen = false, onOpenChange, children }) {
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    return (_jsx(SheetContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+}
+function SheetTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { open, setOpen } = useSheet();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "sheet-trigger", "aria-haspopup": "dialog", "data-state": open ? "open" : "closed", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(true);
+        }, ...props, children: slotChild }));
+}
+function SheetClose({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
+    const { setOpen } = useSheet();
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "sheet-close", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(false);
+        }, ...props, children: slotChild }));
+}
+// `left-auto`/`right-auto`/etc. override the native <dialog> UA inset (left:0),
+// otherwise `right-0` + a width would still anchor to the left edge.
+const SIDE_POSITION = {
+    right: "inset-y-0 right-0 left-auto h-full w-3/4 border-l sm:max-w-sm",
+    left: "inset-y-0 left-0 right-auto h-full w-3/4 border-r sm:max-w-sm",
+    top: "inset-x-0 top-0 bottom-auto h-auto border-b",
+    bottom: "inset-x-0 bottom-0 top-auto h-auto border-t",
+};
+const SIDE_IN = {
+    right: "slide-in-from-right-52",
+    left: "slide-in-from-left-52",
+    top: "slide-in-from-top-52",
+    bottom: "slide-in-from-bottom-52",
+};
+const SIDE_OUT = {
+    right: "slide-out-to-right-52",
+    left: "slide-out-to-left-52",
+    top: "slide-out-to-top-52",
+    bottom: "slide-out-to-bottom-52",
+};
+function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
+    const { open, setOpen, titleId, descriptionId } = useSheet();
+    const ref = React.useRef(null);
+    const pointerDownOnBackdrop = React.useRef(false);
+    const [mounted, presenceRef] = usePresence(open);
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (mounted && !node.open)
+            node.showModal();
+        else if (!mounted && node.open)
+            node.close();
+    }, [mounted]);
+    React.useEffect(() => {
+        if (!mounted)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [mounted]);
+    if (!mounted)
+        return null;
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "sheet-content", "data-side": side, "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+            e.preventDefault();
+            setOpen(false);
+        }, onClose: () => setOpen(false), onPointerDown: (e) => {
+            pointerDownOnBackdrop.current = e.target === ref.current;
+        }, onClick: (e) => {
+            if (e.target === ref.current && pointerDownOnBackdrop.current) {
+                setOpen(false);
+            }
+        }, className: cn("m-0 flex max-h-none flex-col gap-4 bg-background bg-clip-padding p-0 text-sm text-foreground shadow-lg backdrop:bg-black/10 backdrop:duration-150 supports-backdrop-filter:backdrop:backdrop-blur-xs fixed", SIDE_POSITION[side], open
+            ? `animate-in fade-in-0 ${SIDE_IN[side]} duration-200`
+            : `animate-out fade-out-0 ${SIDE_OUT[side]} duration-200`, className), children: [children, showCloseButton && (_jsx(SheetClose, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] }));
+}
+function SheetHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props }));
+}
+function SheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function SheetTitle({ className, ...props }) {
+    const { titleId } = useSheet();
+    return (_jsx("h2", { id: titleId, "data-slot": "sheet-title", className: cn("font-medium text-foreground", className), ...props }));
+}
+function SheetDescription({ className, ...props }) {
+    const { descriptionId } = useSheet();
+    return (_jsx("p", { id: descriptionId, "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/ui/sidebar.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
+import { TooltipContent } from "./tooltip.js";
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, render, nativeButton: _nativeButton, children, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, render, nativeButton: _nativeButton, children, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}> | undefined) => string;
+declare function SidebarMenuButton({ asChild, render, nativeButton: _nativeButton, children, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, render, nativeButton: _nativeButton, children, showOnHover, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+    showOnHover?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, render, nativeButton: _nativeButton, children, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): React.JSX.Element;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };