@glasshome/ui 0.5.4 → 1.0.0

package/src/styles/globals.css

@@ -3,5 +3,162 @@
 @import "./theme.css";
 
 @source "../";
+/* npm consumers resolve components from dist/, not src/; without this their
+ * Tailwind build never sees the class names used inside the components. */
+@source "../../dist";
 
 @custom-variant dark (&:is(.dark *));
+
+/* Typed + inherits:false: a knob never leaks into a nested glass element, each
+ * element's calc() resolves against its own value, and typed knobs animate. */
+@property --glass-tone {
+	syntax: "<color>";
+	inherits: false;
+	initial-value: transparent;
+}
+@property --glass-wash {
+	syntax: "<percentage>";
+	inherits: false;
+	initial-value: 28%;
+}
+@property --glass-light {
+	syntax: "<number>";
+	inherits: false;
+	initial-value: 0.05;
+}
+@property --glass-shade {
+	syntax: "<number>";
+	inherits: false;
+	initial-value: 0;
+}
+@property --glass-glow {
+	syntax: "<percentage>";
+	inherits: false;
+	initial-value: 16%;
+}
+@property --glass-drop {
+	syntax: "<percentage>";
+	inherits: false;
+	initial-value: 20%;
+}
+@property --glass-lift {
+	syntax: "<number>";
+	inherits: false;
+	initial-value: 0;
+}
+@property --glass-text {
+	syntax: "<percentage>";
+	inherits: false;
+	initial-value: 65%;
+}
+@property --glass-rim {
+	syntax: "<number>";
+	inherits: false;
+	initial-value: 1;
+}
+/* Frost slot: one full background layer (image + position / size + repeat),
+ * host-supplied, composited at the BOTTOM of the formula — the static
+ * equivalent of what backdrop-filter shows behind the element. Dash's
+ * performant-blur engine sets it inline per surface; unset -> the layer falls
+ * back to `none`. inherits:false so a surface's viewport-aligned slice never
+ * leaks into nested glass (inputs inside a frosted card). */
+@property --glass-frost {
+	syntax: "*";
+	inherits: false;
+}
+
+/* --glass-base and --glass-edge need var() defaults, which @property forbids,
+ * so they reset here instead. MUST stay in @layer base so [--glass-*] utilities
+ * and inline style knobs still win. Rim shadows are declared on .glass (not
+ * :root) so calc(var(--glass-rim)) resolves per element, not frozen at :root. */
+@layer base {
+	:where(.glass) {
+		--glass-base: var(--card);
+		--glass-edge: color-mix(in srgb, var(--border) 60%, transparent);
+		--glass-rim-raise:
+			inset 0 1px 0 oklch(1 0 0 / calc(0.22 * var(--glass-rim))),
+			inset 2px 2px 5px -3px oklch(1 0 0 / calc(0.5 * var(--glass-rim))),
+			inset -2px -2px 4px -2px oklch(0 0 0 / calc(0.12 * var(--glass-rim)));
+		--glass-rim-sink:
+			inset 0 2px 3px -1px oklch(0 0 0 / calc(0.28 * var(--glass-rim))),
+			inset 2px 2px 5px -3px oklch(0 0 0 / calc(0.22 * var(--glass-rim))),
+			inset 0 -1px 0 oklch(1 0 0 / calc(0.12 * var(--glass-rim)));
+		--glass-rim-shine: var(--glass-rim-raise);
+	}
+	:where(.glass-tint) {
+		--glass-light: 0.16;
+		--glass-edge: oklch(from var(--glass-tone) l c h / 0.45);
+		color: color-mix(in oklab, var(--glass-tone) var(--glass-text), var(--foreground));
+	}
+	:where(.glass-sink) {
+		--glass-rim-shine: var(--glass-rim-sink);
+	}
+}
+
+/* The ONE glass formula. Neutral by default (--glass-tone transparent makes
+ * every tone term inert); add .glass-tint for the tinted badge/alert look and
+ * .glass-sink for a recessed field. Tone mixes are srgb: oklch drags a tone
+ * mixed toward transparent-black down to mud on light surfaces. Deliberately
+ * unlayered so the material owns border/background/box-shadow; tune via knobs. */
+:where(.glass) {
+	border: 1px solid var(--glass-edge);
+	/* Base is a gradient layer (not background-color) so the frost slice can sit
+	 * BELOW it — background-color always paints under every image layer, which
+	 * would put the frost above the fill. Layer order top→bottom: light, shade,
+	 * tone wash, base fill, frost. */
+	background:
+		radial-gradient(120% 120% at 22% 8%, oklch(1 0 0 / var(--glass-light)), transparent 58%),
+		radial-gradient(120% 120% at 82% 100%, oklch(0 0 0 / var(--glass-shade)), transparent 58%),
+		linear-gradient(
+			135deg,
+			color-mix(in srgb, var(--glass-tone) var(--glass-wash), transparent),
+			color-mix(in srgb, var(--glass-tone) calc(var(--glass-wash) / 3), transparent)
+		),
+		linear-gradient(var(--glass-base), var(--glass-base)), var(--glass-frost, none);
+	box-shadow:
+		var(--glass-rim-shine, 0 0 #0000),
+		inset 0 -2px 4px color-mix(in srgb, var(--glass-tone) var(--glass-glow), transparent),
+		0 1px 3px color-mix(in srgb, var(--glass-tone) var(--glass-drop), transparent),
+		0 10px 30px -16px oklch(0 0 0 / var(--glass-lift));
+}
+
+/* PageHeader banner surface: bespoke three-stop card gradient (its material
+ * predates the one-glass formula) over the same frost slot .glass uses, so
+ * hosts wire the performant-blur engine identically on both. Frost defaults
+ * to none → plain gradient banner. */
+:where(.glass-banner) {
+	background:
+		linear-gradient(
+			to bottom right,
+			color-mix(in srgb, var(--card) 55%, transparent),
+			color-mix(in srgb, var(--card) 25%, transparent),
+			color-mix(in srgb, var(--card) 10%, transparent)
+		),
+		var(--glass-frost, none);
+}
+
+/**
+ * Consistent, theme-aware thin scrollbar across browsers. Firefox uses
+ * scrollbar-width/color; Chromium/WebKit use the ::-webkit-scrollbar pseudos.
+ * Applied by the <ScrollArea> component so every scroll surface reads the same.
+ */
+.gh-scroll {
+	scrollbar-width: thin;
+	scrollbar-color: var(--border) transparent;
+	&::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: var(--border);
+		border-radius: 9999px;
+		border: 2px solid transparent;
+		background-clip: padding-box;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--muted-foreground);
+	}
+}

package/src/styles/theme.css

@@ -49,6 +49,13 @@
 
 	--animate-collapsible-down: collapsible-down 0.2s ease-out;
 	--animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+	/* Select "native expand": the panel unfolds out of the trigger edge. Kobalte
+	 * exposes no data-side, only --kb-select-content-transform-origin (set to the
+	 * trigger edge per placement), so a scaleY from that origin grows the panel
+	 * down when it opens below and up when above, no direction class needed. */
+	--animate-select-in: select-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+	--animate-select-out: select-out 0.12s ease-in both;
 }
 
 @keyframes collapsible-down {
@@ -69,19 +76,54 @@
 	}
 }
 
+/* The listbox opens overlapping the trigger (overlap + gutter 0), so its top row
+ * covers the input. clip-path reveals it top-down: the covering row shows first,
+ * then the rest of the options are revealed downward, so the input appears to
+ * expand to the bottom rather than a separate box dropping in. No scale, so the
+ * option text never squishes; opacity fades in slightly so it isn't a hard wipe. */
+@keyframes select-in {
+	/* The trigger opens on pointerdown and the panel appears under the cursor, so
+	 * the same click's pointerup would land on an option (press-drag-select) and
+	 * instantly pick/close. Ignore pointer events for the open animation so that
+	 * release passes through and the panel stays open; a fresh click then selects. */
+	from {
+		opacity: 0;
+		clip-path: inset(0 0 100% 0 round var(--radius-md));
+		pointer-events: none;
+	}
+	90% {
+		pointer-events: none;
+	}
+	to {
+		opacity: 1;
+		clip-path: inset(0 0 0 0 round var(--radius-md));
+		pointer-events: auto;
+	}
+}
+@keyframes select-out {
+	from {
+		opacity: 1;
+		clip-path: inset(0 0 0 0 round var(--radius-md));
+	}
+	to {
+		opacity: 0;
+		clip-path: inset(0 0 100% 0 round var(--radius-md));
+	}
+}
+
 :root {
-	--background: oklch(0.985 0.002 247.8763);
+	--background: oklch(0.975 0.003 250);
 	--foreground: oklch(0 0 0);
-	--card: oklch(0.99 0.008 285);
+	--card: oklch(0.995 0.004 250);
 	--card-foreground: oklch(0 0 0);
-	--popover: oklch(0.9911 0 0);
+	--popover: oklch(0.995 0.003 250);
 	--popover-foreground: oklch(0 0 0);
 	--primary: oklch(0.48 0.2 215.221);
 	--primary-foreground: oklch(1 0 0);
 	--secondary: oklch(0.96 0.01 250);
-	--secondary-foreground: oklch(0.9551 0 0);
-	--muted: oklch(0.9702 0 0);
-	--muted-foreground: oklch(0.4386 0 0);
+	--secondary-foreground: oklch(0.25 0.01 250);
+	--muted: oklch(0.9702 0.008 250);
+	--muted-foreground: oklch(0.34 0 0);
 	--accent: oklch(0.6 0.2 195);
 	--accent-foreground: oklch(1 0 0);
 	--success: oklch(0.65 0.17 145);
@@ -90,8 +132,8 @@
 	--accent-tint-foreground: oklch(0.46 0.16 195);
 	--destructive: oklch(0.629 0.1902 23.0704);
 	--destructive-foreground: oklch(1 0 0);
-	--border: oklch(0.93 0.0094 286.2156);
-	--input: oklch(0.9401 0 0);
+	--border: oklch(0.9 0.01 250);
+	--input: oklch(0.9 0.012 250);
 	--ring: oklch(0.6 0.2 195);
 	--chart-1: oklch(0.7459 0.1483 156.4499);
 	--chart-2: oklch(0.48 0.2 215.221);
@@ -125,14 +167,14 @@
 	--foreground: oklch(0.9551 0 0);
 	--card: oklch(0.17 0.01 250);
 	--card-foreground: oklch(0.9551 0 0);
-	--popover: oklch(0.16 0.005 0);
+	--popover: oklch(0.19 0.008 250);
 	--popover-foreground: oklch(0.9551 0 0);
 	--primary: oklch(0.48 0.2 215.221);
 	--primary-foreground: oklch(1 0 0);
 	--secondary: oklch(0.14 0.01 250);
 	--secondary-foreground: oklch(0.9551 0 0);
-	--muted: oklch(0.22 0.006 0);
-	--muted-foreground: oklch(0.7058 0 0);
+	--muted: oklch(0.22 0.02 250);
+	--muted-foreground: oklch(0.81 0 0);
 	--accent: oklch(0.6 0.2 195);
 	--accent-foreground: oklch(1 0 0);
 	--success: oklch(0.7 0.17 145);
@@ -142,7 +184,10 @@
 	--destructive: oklch(0.7106 0.1661 22.2162);
 	--destructive-foreground: oklch(1 0 0);
 	--border: oklch(0.26 0.012 250);
-	--input: oklch(0.25 0.005 0);
+	/* Recessed fields read DARKER than the card they're dug out of (card is 0.17),
+	 * so a field surface sits below it, matching the slider track. A hair of the
+	 * card's cool tint (chroma 0.01) keeps it from going flat gray. */
+	--input: oklch(0.19 0.01 250);
 	--ring: oklch(0.6 0.2 195);
 	--chart-1: oklch(0.8003 0.1821 151.711);
 	--chart-2: oklch(0.48 0.2 215.221);
@@ -176,6 +221,17 @@
 	body {
 		@apply bg-background text-foreground min-w-[320px] min-h-screen relative m-0;
 	}
+	/* Tailwind v4 Preflight drops the old cursor:pointer default on buttons, so
+	 * native interactive elements (raw <button>, role=button, <summary>, control
+	 * labels, <select>) show the arrow. Restore the pointer affordance for every
+	 * clickable, minus disabled ones. Component primitives set their own cursor. */
+	button:not(:disabled),
+	[role="button"]:not([aria-disabled="true"]),
+	summary,
+	select:not(:disabled),
+	label:has(> input:is([type="checkbox"], [type="radio"]):not(:disabled)) {
+		cursor: pointer;
+	}
 }
 
 /* Utility classes */

package/dist/solid/calendar.d.ts

@@ -1,17 +0,0 @@
-import { type Component, type ComponentProps } from "solid-js";
-type DateRange = {
-    from: Date;
-    to?: Date;
-};
-interface CalendarProps extends Omit<ComponentProps<"div">, "onSelect"> {
-    mode?: "single" | "range";
-    selected?: Date | DateRange;
-    onSelect?: (date: Date | DateRange | undefined) => void;
-    showOutsideDays?: boolean;
-    month?: Date;
-    onMonthChange?: (month: Date) => void;
-    disabled?: (date: Date) => boolean;
-}
-declare const Calendar: Component<CalendarProps>;
-export type { CalendarProps, DateRange };
-export { Calendar };

package/dist/solid/command.d.ts

@@ -1,24 +0,0 @@
-import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-import { Dialog } from "./dialog";
-declare const Command: ParentComponent<ComponentProps<"div">>;
-declare const CommandDialog: ParentComponent<ComponentProps<typeof Dialog> & {
-    title?: string;
-    description?: string;
-    contentClass?: string;
-    showCloseButton?: boolean;
-}>;
-declare const CommandInput: Component<ComponentProps<"input">>;
-declare const CommandList: ParentComponent<ComponentProps<"div">>;
-declare const CommandEmpty: ParentComponent<ComponentProps<"div">>;
-declare const CommandGroup: ParentComponent<ComponentProps<"div"> & {
-    heading?: string;
-}>;
-declare const CommandItem: ParentComponent<ComponentProps<"div"> & {
-    value?: string;
-    keywords?: string;
-    onSelect?: () => void;
-    disabled?: boolean;
-}>;
-declare const CommandSeparator: Component<ComponentProps<"div">>;
-declare const CommandShortcut: Component<ComponentProps<"span">>;
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/solid/drawer.d.ts

@@ -1,22 +0,0 @@
-import { Dialog as DialogPrimitive } from "@kobalte/core/dialog";
-import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-declare const Drawer: typeof import("@kobalte/core/alert-dialog").Root & {
-    CloseButton: typeof import("@kobalte/core/alert-dialog").CloseButton;
-    Content: typeof import("@kobalte/core/dialog").Content;
-    Description: typeof import("@kobalte/core/alert-dialog").Description;
-    Overlay: typeof import("@kobalte/core/alert-dialog").Overlay;
-    Portal: typeof import("@kobalte/core/alert-dialog").Portal;
-    Title: typeof import("@kobalte/core/alert-dialog").Title;
-    Trigger: typeof import("@kobalte/core/alert-dialog").Trigger;
-};
-declare const DrawerTrigger: Component<ComponentProps<typeof DialogPrimitive.Trigger>>;
-declare const DrawerClose: typeof import("@kobalte/core/alert-dialog").CloseButton;
-declare const DrawerOverlay: Component<ComponentProps<typeof DialogPrimitive.Overlay>>;
-declare const DrawerContent: ParentComponent<ComponentProps<typeof DialogPrimitive.Content> & {
-    direction?: "top" | "right" | "bottom" | "left";
-}>;
-declare const DrawerHeader: Component<ComponentProps<"div">>;
-declare const DrawerFooter: Component<ComponentProps<"div">>;
-declare const DrawerTitle: Component<ComponentProps<typeof DialogPrimitive.Title>>;
-declare const DrawerDescription: Component<ComponentProps<typeof DialogPrimitive.Description>>;
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, };

package/dist/solid/glass-effect.d.ts

@@ -1,6 +0,0 @@
-import { type ParentComponent } from "solid-js";
-declare const GlassEffect: ParentComponent<{
-    class?: string;
-}>;
-declare const GlassFilter: () => import("solid-js").JSX.Element;
-export { GlassEffect, GlassFilter };

package/dist/solid/menubar.d.ts

@@ -1,25 +0,0 @@
-import { Menubar as MenubarPrimitive } from "@kobalte/core/menubar";
-import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-declare const MenubarMenu: typeof import("@kobalte/core/menubar").Menu;
-declare const MenubarGroup: typeof import("@kobalte/core/context-menu").Group;
-declare const MenubarRadioGroup: typeof import("@kobalte/core/context-menu").RadioGroup;
-declare const MenubarSub: typeof import("@kobalte/core/context-menu").Sub;
-declare const Menubar: Component<ComponentProps<typeof MenubarPrimitive>>;
-declare const MenubarTrigger: Component<ComponentProps<typeof MenubarPrimitive.Trigger>>;
-declare const MenubarContent: Component<ComponentProps<typeof MenubarPrimitive.Content>>;
-declare const MenubarItem: Component<ComponentProps<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
-}>;
-declare const MenubarCheckboxItem: ParentComponent<ComponentProps<typeof MenubarPrimitive.CheckboxItem>>;
-declare const MenubarRadioItem: ParentComponent<ComponentProps<typeof MenubarPrimitive.RadioItem>>;
-declare const MenubarLabel: Component<ComponentProps<typeof MenubarPrimitive.GroupLabel> & {
-    inset?: boolean;
-}>;
-declare const MenubarSeparator: Component<ComponentProps<typeof MenubarPrimitive.Separator>>;
-declare const MenubarShortcut: Component<ComponentProps<"span">>;
-declare const MenubarSubTrigger: ParentComponent<ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-}>;
-declare const MenubarSubContent: Component<ComponentProps<typeof MenubarPrimitive.SubContent>>;
-export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, };

package/dist/solid/navigation-menu.d.ts

@@ -1,19 +0,0 @@
-import { NavigationMenu as NavMenuPrimitive } from "@kobalte/core/navigation-menu";
-import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-declare const NavigationMenu: ParentComponent<ComponentProps<typeof NavMenuPrimitive> & {
-    viewport?: boolean;
-}>;
-declare const NavigationMenuList: Component<ComponentProps<"ul">>;
-declare const NavigationMenuItem: Component<ComponentProps<"li">>;
-declare const navigationMenuTriggerStyle: import("cva").CVAComponent<Omit<{
-    base: string;
-}, "defaultVariants"> & {
-    variants: unknown;
-    defaultVariants: Omit<{}, never>;
-}, unknown>;
-declare const NavigationMenuTrigger: ParentComponent<ComponentProps<typeof NavMenuPrimitive.Trigger>>;
-declare const NavigationMenuContent: Component<ComponentProps<typeof NavMenuPrimitive.Content>>;
-declare const NavigationMenuViewport: Component<ComponentProps<typeof NavMenuPrimitive.Viewport>>;
-declare const NavigationMenuLink: Component<ComponentProps<"a">>;
-declare const NavigationMenuIndicator: ParentComponent<ComponentProps<"div">>;
-export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/solid/sidebar.d.ts

@@ -1,108 +0,0 @@
-import { type VariantProps } from "cva";
-import { type Accessor, type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Separator } from "./separator";
-interface SidebarContextProps {
-    state: Accessor<"expanded" | "collapsed">;
-    open: Accessor<boolean>;
-    setOpen: (open: boolean) => void;
-    openMobile: Accessor<boolean>;
-    setOpenMobile: (open: boolean) => void;
-    isMobile: Accessor<boolean>;
-    toggleSidebar: () => void;
-}
-declare function useSidebar(): SidebarContextProps;
-declare const SidebarProvider: ParentComponent<ComponentProps<"div"> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}>;
-declare const Sidebar: ParentComponent<ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-}>;
-declare const SidebarTrigger: Component<ComponentProps<typeof Button>>;
-declare const SidebarRail: Component<ComponentProps<"button">>;
-declare const SidebarInset: Component<ComponentProps<"main">>;
-declare const SidebarInput: Component<ComponentProps<typeof Input>>;
-declare const SidebarHeader: Component<ComponentProps<"div">>;
-declare const SidebarFooter: Component<ComponentProps<"div">>;
-declare const SidebarSeparator: Component<ComponentProps<typeof Separator>>;
-declare const SidebarContent: Component<ComponentProps<"div">>;
-declare const SidebarGroup: Component<ComponentProps<"div">>;
-declare const SidebarGroupLabel: Component<ComponentProps<"div"> & {
-    as?: Component | string;
-}>;
-declare const SidebarGroupAction: Component<ComponentProps<"button"> & {
-    as?: Component | string;
-}>;
-declare const SidebarGroupContent: Component<ComponentProps<"div">>;
-declare const SidebarMenu: Component<ComponentProps<"ul">>;
-declare const SidebarMenuItem: Component<ComponentProps<"li">>;
-declare const sidebarMenuButtonVariants: import("cva").CVAComponent<Omit<{
-    base: string;
-    variants: {
-        variant: {
-            default: string;
-            outline: string;
-        };
-        size: {
-            default: string;
-            sm: string;
-            lg: string;
-        };
-    };
-    defaultVariants: {
-        variant: "default";
-        size: "default";
-    };
-}, "defaultVariants"> & {
-    variants: {
-        variant: {
-            default: string;
-            outline: string;
-        };
-        size: {
-            default: string;
-            sm: string;
-            lg: string;
-        };
-    };
-    defaultVariants: Omit<{}, "variant" | "size"> & {
-        variant: "default";
-        size: "default";
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>;
-declare const SidebarMenuButton: ParentComponent<ComponentProps<"button"> & {
-    as?: Component | string;
-    isActive?: boolean;
-    tooltip?: string | JSX.Element;
-} & VariantProps<typeof sidebarMenuButtonVariants>>;
-declare const SidebarMenuAction: Component<ComponentProps<"button"> & {
-    as?: Component | string;
-    showOnHover?: boolean;
-}>;
-declare const SidebarMenuBadge: Component<ComponentProps<"div">>;
-declare const SidebarMenuSkeleton: Component<ComponentProps<"div"> & {
-    showIcon?: boolean;
-}>;
-declare const SidebarMenuSub: Component<ComponentProps<"ul">>;
-declare const SidebarMenuSubItem: Component<ComponentProps<"li">>;
-declare const SidebarMenuSubButton: Component<ComponentProps<"a"> & {
-    as?: Component | string;
-    size?: "sm" | "md";
-    isActive?: boolean;
-}>;
-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, };