@ctrl-ui/react 0.8.0

package/dist/ui/scroll-area.d.ts

@@ -0,0 +1,25 @@
+import { ScrollAreaKnobStyle } from "../knob-contracts/scroll-area-knobs.js";
+import { CSSProperties, ComponentProps, Ref } from "react";
+//#region src/ui/scroll-area.d.ts
+declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
+type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];
+type ScrollAreaLockAxis = "x" | "y" | "both";
+type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "className" | "ref"> & {
+  "data-control-ui"?: string;
+  "data-control-family"?: string;
+  "data-slot"?: string;
+};
+type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ScrollAreaKnobStyle;
+} & {
+  viewportClassName?: string;
+  viewportProps?: ScrollAreaViewportProps;
+  viewportRef?: Ref<HTMLDivElement>;
+  maxHeight?: string;
+  mask?: boolean;
+  lockAxis?: ScrollAreaLockAxis;
+  scrollbarVisibility?: ScrollAreaScrollbarVisibility;
+};
+declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
+//#endregion
+export { ScrollArea, ScrollAreaLockAxis, ScrollAreaProps, ScrollAreaScrollbarVisibility, ScrollAreaViewportProps, scrollAreaScrollbarVisibilities };

package/dist/ui/scroll-area.js

@@ -0,0 +1,93 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+//#region src/ui/scroll-area.tsx
+const scrollAreaScrollbarVisibilities = [
+	"scroll",
+	"hover",
+	"always"
+];
+const maskXOverflowClasses = cn("data-[overflow-x-start]:mask-l-from-[calc(100%_-_var(--scroll-fade-size))]", "data-[overflow-x-end]:mask-r-from-[calc(100%_-_var(--scroll-fade-size))]");
+const maskYOverflowClasses = cn("data-[overflow-y-start]:mask-t-from-[calc(100%_-_var(--scroll-fade-size))]", "data-[overflow-y-end]:mask-b-from-[calc(100%_-_var(--scroll-fade-size))]");
+function Scrollbar({ orientation, visibility, thumbStyle }) {
+	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		orientation,
+		"data-control-ui": "scroll-area",
+		"data-control-family": "scroll-area",
+		"data-slot": "scrollbar",
+		"data-visibility": visibility,
+		className: cn("m-px flex touch-none select-none", orientation === "vertical" ? "justify-center" : "flex-col"),
+		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
+			"data-control-ui": "scroll-area",
+			"data-control-family": "scroll-area",
+			"data-slot": "thumb",
+			className: cn("flex-1", orientation === "vertical" ? "w-full" : "h-full"),
+			style: thumbStyle
+		})
+	});
+}
+function viewportStyle(maxHeight, lockX, lockY) {
+	if (!maxHeight && !lockX && !lockY) return void 0;
+	return {
+		...maxHeight ? { maxHeight } : {},
+		...lockX ? { overflowX: "hidden" } : {},
+		...lockY ? { overflowY: "hidden" } : {}
+	};
+}
+function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask = true, lockAxis, scrollbarVisibility = "scroll", children, style, ...props }) {
+	const lockX = lockAxis === "x" || lockAxis === "both";
+	const lockY = lockAxis === "y" || lockAxis === "both";
+	const resolvedViewportStyle = viewportStyle(maxHeight, lockX, lockY);
+	const { style: viewportPropsStyle, ...resolvedViewportProps } = viewportProps ?? {};
+	const mergedViewportStyle = viewportPropsStyle || resolvedViewportStyle ? {
+		...viewportPropsStyle,
+		...resolvedViewportStyle
+	} : void 0;
+	const thumbStyle = style;
+	const cornerStyle = style;
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		...props,
+		"data-control-ui": "scroll-area",
+		"data-control-family": "scroll-area",
+		"data-slot": "root",
+		className: cn("relative overflow-hidden", className),
+		style,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				"data-control-ui": "scroll-area",
+				"data-control-family": "scroll-area",
+				"data-slot": "viewport",
+				...resolvedViewportProps,
+				ref: viewportRef,
+				className: cn("h-full w-full", mask && !lockX && maskXOverflowClasses, mask && !lockY && maskYOverflowClasses, viewportClassName),
+				style: mergedViewportStyle,
+				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, {
+					"data-control-ui": "scroll-area",
+					"data-control-family": "scroll-area",
+					"data-slot": "content",
+					style: { minWidth: 0 },
+					children
+				})
+			}),
+			!lockY && /* @__PURE__ */ jsx(Scrollbar, {
+				orientation: "vertical",
+				visibility: scrollbarVisibility,
+				thumbStyle
+			}),
+			!lockX && /* @__PURE__ */ jsx(Scrollbar, {
+				orientation: "horizontal",
+				visibility: scrollbarVisibility,
+				thumbStyle
+			}),
+			!lockX && !lockY && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
+				"data-control-ui": "scroll-area",
+				"data-control-family": "scroll-area",
+				"data-slot": "corner",
+				style: cornerStyle
+			})
+		]
+	});
+}
+//#endregion
+export { ScrollArea, scrollAreaScrollbarVisibilities };

package/dist/ui/select.d.ts

@@ -0,0 +1,44 @@
+import { ControlledChoice } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/ui/select.d.ts
+type SelectProps<TValue extends string = string> = ControlledChoice<TValue> & {
+  disabled?: boolean;
+  name?: string;
+  children?: ReactNode;
+};
+declare const selectTriggerVariants: readonly ["surface", "ghost"];
+type SelectTriggerVariant = (typeof selectTriggerVariants)[number];
+type SelectTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+} & {
+  size?: ControlSize;
+  variant?: SelectTriggerVariant;
+};
+type SelectValueProps = {
+  placeholder?: ReactNode;
+  children?: ReactNode | ((value: string) => ReactNode);
+};
+type SelectContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type SelectItemProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  value: string;
+  label?: string;
+  disabled?: boolean;
+};
+type RefinedSelectTriggerProps = SelectTriggerProps & Pick<ComponentProps<typeof Select$1.Trigger>, "nativeButton" | "render"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function Select<TValue extends string = string>({ children, onValueChange, ...props }: SelectProps<TValue>): import("react").JSX.Element;
+declare function SelectTrigger({ size, variant, className, children, disabled, ...props }: RefinedSelectTriggerProps): import("react").JSX.Element;
+declare function SelectValue({ children, ...props }: SelectValueProps): import("react").JSX.Element;
+declare function SelectContent({ className, children, ...props }: SelectContentProps): import("react").JSX.Element;
+declare function SelectItem({ className, children, disabled, ...props }: SelectItemProps): import("react").JSX.Element;
+//#endregion
+export { Select, SelectContent, SelectContentProps, SelectItem, SelectItemProps, SelectProps, SelectTrigger, SelectTriggerProps, SelectTriggerVariant, SelectValue, SelectValueProps, selectTriggerVariants };

package/dist/ui/select.js

@@ -0,0 +1,124 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/ui/select.tsx
+const selectTriggerVariants = ["surface", "ghost"];
+function Select({ children, onValueChange, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Root, {
+		...props,
+		onValueChange: (value) => {
+			if (value !== null) onValueChange?.(value);
+		},
+		children
+	});
+}
+function SelectTrigger({ size = "sm", variant = "surface", className, children, disabled, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		"data-control-ui": "select",
+		"data-control-family": "button",
+		"data-popup-kind": "select",
+		"data-slot": "trigger",
+		"data-control": "true",
+		"data-size": size,
+		"data-variant": variant,
+		"data-tone": "neutral",
+		"data-shape": "default",
+		className: cn("group relative isolate inline-flex shrink-0 items-center justify-between overflow-visible", className),
+		disabled,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "button",
+			"data-control-family": "button",
+			"data-slot": "content",
+			className: "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]",
+			children
+		}), /* @__PURE__ */ jsx(Select$1.Icon, {
+			"data-control-ui": "select",
+			"data-control-family": "popup",
+			"data-popup-kind": "select",
+			"data-slot": "icon",
+			className: "relative z-[1]",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M3 4.5 6 7.5 9 4.5",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})]
+	});
+}
+function SelectValue({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Value, {
+		className: "min-w-0 truncate",
+		...props,
+		children
+	});
+}
+function SelectContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side: "bottom",
+		align: "start",
+		sideOffset: 6,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Select$1.Popup, {
+			"data-control-ui": "select",
+			"data-popup-kind": "select",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "list-surface",
+			className: cn("max-h-[min(20rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto", className),
+			...props,
+			children
+		})
+	}) });
+}
+function SelectItem({ className, children, disabled, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		"data-control-ui": "select",
+		"data-popup-kind": "select",
+		"data-slot": "item",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		disabled,
+		className: cn(popupItemStructureClasses, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
+			className: "flex min-w-0 flex-1 items-center",
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "select",
+			"data-control-family": "popup",
+			"data-popup-kind": "select",
+			"data-slot": "item-indicator",
+			className: "flex size-3.5 shrink-0 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M2.5 6.5 5 9l4.5-5",
+					stroke: "currentColor",
+					strokeWidth: "1.4",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}) })
+		})]
+	});
+}
+//#endregion
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, selectTriggerVariants };

package/dist/ui/separator.d.ts

@@ -0,0 +1,9 @@
+import { SeparatorKnobStyle } from "../knob-contracts/separator-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+//#region src/ui/separator.d.ts
+declare function Separator({ className, orientation, ...props }: Omit<ComponentProps<typeof Separator$1>, "style"> & {
+  style?: CSSProperties & SeparatorKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Separator };

package/dist/ui/separator.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+//#region src/ui/separator.tsx
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-control-ui": "separator",
+		"data-control-family": "separator",
+		"data-slot": "root",
+		orientation,
+		className: cn("shrink-0", orientation === "vertical" ? "h-full w-px" : "h-px w-full", className),
+		...props
+	});
+}
+//#endregion
+export { Separator };

package/dist/ui/sheet.d.ts

@@ -0,0 +1,25 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/ui/sheet.d.ts
+declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
+declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+type SheetContentProps = Omit<ComponentProps<typeof Dialog.Popup>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  side?: "left" | "right";
+};
+declare function SheetContent({ className, children, side, ...props }: SheetContentProps): import("react").JSX.Element;
+declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetHeader, SheetTitle };

package/dist/ui/sheet.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/ui/sheet.tsx
+function Sheet(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function SheetClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "close",
+		className,
+		...props
+	});
+}
+function SheetContent({ className, children, side = "right", ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-control-ui": "sheet",
+		"data-popup-kind": "sheet",
+		"data-slot": "backdrop",
+		"data-control-family": "popup",
+		"data-popup-part": "backdrop",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "fixed inset-0 z-[70]"
+	}), /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		"data-control-ui": "sheet",
+		"data-popup-kind": "sheet",
+		"data-control-family": "popup",
+		"data-slot": "content",
+		"data-popup-part": "surface",
+		"data-surface": "modal",
+		className: cn("fixed inset-y-0 z-[71] flex h-full w-3/4 max-w-sm flex-col", side === "left" ? "left-0" : "right-0", className),
+		...props,
+		"data-side": side,
+		children
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "header",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle };

package/dist/ui/sidebar.d.ts

@@ -0,0 +1,88 @@
+import { RenderProp, SelectionIndicator } from "../control-props.js";
+import { Button } from "./button.js";
+import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/sidebar.d.ts
+declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
+type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
+declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
+type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
+type SidebarRailProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+type SidebarInsetProps = Omit<ComponentProps<"main">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+} & {
+  render?: RenderProp<ComponentProps<"div">>;
+};
+type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+} & {
+  render?: RenderProp<ComponentProps<"button">>;
+  isActive?: boolean;
+  tooltip?: ReactNode;
+  variant?: SidebarMenuButtonVariant;
+  size?: SidebarMenuButtonSize;
+};
+/** Exported so blocks can set width through `style` and stay type-checked. */
+type SidebarStyle = CSSProperties & SidebarKnobStyle & {
+  "--sidebar-width"?: string;
+  "--sidebar-width-icon"?: string;
+};
+type SidebarSurfaceStyle = CSSProperties & SidebarKnobStyle;
+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;
+type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  style?: SidebarStyle;
+};
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+declare function Sidebar({ side, variant, collapsible, ref, className, children, style, ...props }: Omit<ComponentProps<"div">, "style"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  style?: SidebarSurfaceStyle;
+}): import("react").JSX.Element;
+declare function SidebarTrigger({ className, onClick, size, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function SidebarRail({ className, ...props }: SidebarRailProps): import("react").JSX.Element;
+declare function SidebarInset({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
+declare function SidebarHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type SidebarSelectionIndicator = SelectionIndicator;
+declare function SidebarMenu({ className, indicator, children, ...props }: ComponentProps<"ul"> & {
+  /**
+   * `slide` replaces per-row backgrounds with one pill that glides to hovered or active item.
+   * Defaults to ControlUiSkin.indicators.sidebar, else `none`.
+   */
+  indicator?: SidebarSelectionIndicator;
+} & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSelectionIndicator, SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };