@q9labsai/chalk-ui 4.0.1 → 4.1.1

package/dist/index.js

@@ -34,8 +34,30 @@ __export(index_exports, {
   EMOJI_KEYWORDS: () => EMOJI_KEYWORDS,
   IconButton: () => IconButton,
   Input: () => Input,
+  Menu: () => Menu,
+  MenuContent: () => MenuContent,
+  MenuGroup: () => MenuGroup,
+  MenuGroupLabel: () => MenuGroupLabel,
+  MenuItem: () => MenuItem,
+  MenuRadioGroup: () => MenuRadioGroup,
+  MenuRadioItem: () => MenuRadioItem,
+  MenuSeparator: () => MenuSeparator,
+  MenuTrigger: () => MenuTrigger,
   ProgressBar: () => ProgressBar,
   Select: () => Select,
+  Sidebar: () => Sidebar,
+  SidebarContent: () => SidebarContent,
+  SidebarFooter: () => SidebarFooter,
+  SidebarGroup: () => SidebarGroup,
+  SidebarGroupLabel: () => SidebarGroupLabel,
+  SidebarHeader: () => SidebarHeader,
+  SidebarInset: () => SidebarInset,
+  SidebarMenu: () => SidebarMenu,
+  SidebarMenuButton: () => SidebarMenuButton,
+  SidebarMenuItem: () => SidebarMenuItem,
+  SidebarProvider: () => SidebarProvider,
+  SidebarRail: () => SidebarRail,
+  SidebarTrigger: () => SidebarTrigger,
   Skeleton: () => Skeleton,
   Spinner: () => Spinner,
   StatusBadge: () => StatusBadge,
@@ -59,9 +81,11 @@ __export(index_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  sidebarMenuButtonVariants: () => sidebarMenuButtonVariants,
   toast: () => toast,
   toastManager: () => toastManager,
   toggleVariants: () => toggleVariants,
+  useSidebar: () => useSidebar,
   useToast: () => useToast
 });
 
@@ -259,16 +283,128 @@ function Input({ className, type, label, error, icon, iconPosition = "left", siz
   ] });
 }
 
+// src/menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
+// src/lib/theme.ts
+var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
+var THEME_CLASS_NAMES = ["dark", "light"];
+var SYSTEM_DARK_QUERY = "(prefers-color-scheme: dark)";
+var normalizeTheme = (value) => {
+  if (value === "dark" || value === "light") {
+    return value;
+  }
+  return null;
+};
+var resolveThemeFromElement = (element) => {
+  if (!element) return null;
+  const attributeTheme = THEME_ATTRIBUTE_NAMES.map((attributeName) => normalizeTheme(element.getAttribute(attributeName))).find((theme) => theme !== null);
+  const classTheme = THEME_CLASS_NAMES.find((theme) => element.classList.contains(theme));
+  return attributeTheme ?? classTheme ?? null;
+};
+var resolveSystemTheme = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
+  return window.matchMedia(SYSTEM_DARK_QUERY).matches ? "dark" : "light";
+};
+var resolveExplicitThemeFromDocument = () => {
+  if (typeof document === "undefined") return null;
+  return resolveThemeFromElement(document.documentElement) ?? resolveThemeFromElement(document.body);
+};
+var resolveFallbackTheme = ({ defaultTheme, allowSystem }) => {
+  if (!allowSystem) return defaultTheme;
+  return resolveSystemTheme() ?? defaultTheme;
+};
+var resolveThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
+  const explicitTheme = resolveExplicitThemeFromDocument();
+  return explicitTheme ?? resolveFallbackTheme({ defaultTheme, allowSystem });
+};
+var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
+  if (typeof document === "undefined") return defaultTheme;
+  const portalTheme = normalizeTheme(document.querySelector("[data-chalk-theme]")?.getAttribute("data-chalk-theme"));
+  if (portalTheme) return portalTheme;
+  return resolveThemeFromDocument({ defaultTheme, allowSystem });
+};
+
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
+// src/menu.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Menu(props) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Root, { "data-slot": "menu", ...props });
+}
+function MenuTrigger(props) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Trigger, { "data-slot": "menu-trigger", ...props });
+}
+var menuContentVariants = cva3("z-50 min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-xl border p-1 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", {
+  variants: {
+    tone: {
+      default: "bg-popover text-popover-foreground border-border shadow-[var(--chalk-shadow-md)]",
+      sidebar: "bg-sidebar text-sidebar-foreground border-sidebar-border shadow-[0_18px_50px_rgba(0,0,0,0.45)]"
+    }
+  },
+  defaultVariants: { tone: "default" }
+});
+function MenuContent({ className, tone, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, children, ...props }) {
+  const portalTheme = usePortalTheme();
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx5(MenuPrimitive.Positioner, { className: "z-50", side, sideOffset, align, alignOffset, children: /* @__PURE__ */ jsx5(MenuPrimitive.Popup, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "menu-content", className: cn("chalk-root", menuContentVariants({ tone }), className), ...props, children }) }) });
+}
+var menuItemClassName = "data-highlighted:bg-current/8 relative flex w-full cursor-default items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
+function MenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Item, { "data-slot": "menu-item", className: cn(menuItemClassName, className), ...props });
+}
+function MenuRadioGroup(props) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.RadioGroup, { "data-slot": "menu-radio-group", ...props });
+}
+function MenuRadioItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs3(MenuPrimitive.RadioItem, { "data-slot": "menu-radio-item", className: cn(menuItemClassName, className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx5(MenuPrimitive.RadioItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) }) })
+  ] });
+}
+function MenuGroup(props) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Group, { "data-slot": "menu-group", ...props });
+}
+function MenuGroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.GroupLabel, { "data-slot": "menu-group-label", className: cn("px-2 pt-1.5 pb-1 font-mono text-[10px] tracking-[0.08em] uppercase opacity-60", className), ...props });
+}
+function MenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Separator, { "data-slot": "menu-separator", className: cn("bg-current/10 -mx-1 my-1 h-px", className), ...props });
+}
+
 // src/select.tsx
 import * as React3 from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Select = React3.forwardRef(function Select2({ options, value, onChange, label, error, size = "md", fullWidth = false, placeholder = "Select\u2026", disabled = false, className, id }, ref) {
   const generatedId = React3.useId();
   const selectId = id ?? generatedId;
   const selectedOption = options.find((option) => option.value === value);
-  return /* @__PURE__ */ jsxs3("label", { className: cn("flex flex-col gap-1", fullWidth && "w-full"), htmlFor: selectId, children: [
-    label ? /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("label", { className: cn("flex flex-col gap-1", fullWidth && "w-full"), htmlFor: selectId, children: [
+    label ? /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
+    /* @__PURE__ */ jsxs4(
       "select",
       {
         ref,
@@ -287,26 +423,315 @@ var Select = React3.forwardRef(function Select2({ options, value, onChange, labe
           className
         ),
         children: [
-          /* @__PURE__ */ jsx5("option", { value: "", disabled: options.length > 0, children: placeholder }),
-          options.map((option) => /* @__PURE__ */ jsx5("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+          /* @__PURE__ */ jsx6("option", { value: "", disabled: options.length > 0, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx6("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx5("span", { className: "text-sm text-destructive", children: error }) : null
+    error ? /* @__PURE__ */ jsx6("span", { className: "text-sm text-destructive", children: error }) : null
   ] });
 });
 Select.displayName = "Select";
 
-// src/textarea.tsx
+// src/sidebar.tsx
+import * as React6 from "react";
+import { Drawer } from "@base-ui/react/drawer";
+import { useRender as useRender2 } from "@base-ui/react/use-render";
+import { cva as cva4 } from "class-variance-authority";
+
+// src/lib/use-is-mobile.ts
 import * as React4 from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var Textarea = React4.forwardRef(function Textarea2({ label, error, showCount = false, resize = "vertical", maxLength, value, className, id, ...props }, ref) {
-  const generatedId = React4.useId();
+var MOBILE_BREAKPOINT = 768;
+var MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
+function matchMobileQuery() {
+  return typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_QUERY) : null;
+}
+function useIsMobile() {
+  const subscribe2 = React4.useCallback((onChange) => {
+    const query = matchMobileQuery();
+    query?.addEventListener("change", onChange);
+    return () => query?.removeEventListener("change", onChange);
+  }, []);
+  return React4.useSyncExternalStore(
+    subscribe2,
+    () => matchMobileQuery()?.matches ?? false,
+    () => false
+  );
+}
+
+// src/tooltip.tsx
+import "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function TooltipProvider({ delay = 0, ...props }) {
+  return /* @__PURE__ */ jsx7(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay, ...props });
+}
+function Tooltip({ content, children, position = "top", delay = 200, className, ...props }) {
+  if (content !== void 0) {
+    return /* @__PURE__ */ jsx7(TooltipProvider, { delay, children: /* @__PURE__ */ jsxs5(TooltipPrimitive.Root, { children: [
+      /* @__PURE__ */ jsx7(
+        TooltipPrimitive.Trigger,
+        {
+          render: (triggerProps) => /* @__PURE__ */ jsx7("span", { ...triggerProps, className: "inline-flex", children })
+        }
+      ),
+      /* @__PURE__ */ jsx7(TooltipContent, { className, side: position, children: content })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsx7(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx7(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+  const portalTheme = usePortalTheme();
+  return /* @__PURE__ */ jsx7(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx7(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs5(
+    TooltipPrimitive.Popup,
+    {
+      "data-chalk": true,
+      "data-chalk-theme": portalTheme,
+      "data-slot": "tooltip-content",
+      className: cn(
+        "chalk-root",
+        "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 rounded-lg px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background shadow-[var(--chalk-shadow-sm)] z-50 w-fit max-w-xs origin-(--transform-origin)",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx7(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+      ]
+    }
+  ) }) });
+}
+
+// src/sidebar.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var SIDEBAR_COOKIE_NAME = "chalk_sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React6.createContext(null);
+function useSidebar() {
+  const context = React6.useContext(SidebarContext);
+  if (!context) throw new Error("useSidebar must be used inside a SidebarProvider");
+  return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, className, children, ...props }) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React6.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = React6.useCallback(
+    (value2) => {
+      if (onOpenChange) onOpenChange(value2);
+      else setUncontrolledOpen(value2);
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value2}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; samesite=lax`;
+    },
+    [onOpenChange]
+  );
+  const toggleSidebar = React6.useCallback(() => {
+    if (isMobile) setOpenMobile(!openMobile);
+    else setOpen(!open);
+  }, [isMobile, open, openMobile, setOpen]);
+  React6.useEffect(() => {
+    const toggleOnShortcut = (event) => {
+      if (event.key.toLowerCase() !== SIDEBAR_KEYBOARD_SHORTCUT || !(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      toggleSidebar();
+    };
+    window.addEventListener("keydown", toggleOnShortcut);
+    return () => window.removeEventListener("keydown", toggleOnShortcut);
+  }, [toggleSidebar]);
+  const value = React6.useMemo(() => ({ state: open ? "expanded" : "collapsed", open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }), [isMobile, open, openMobile, setOpen, toggleSidebar]);
+  return /* @__PURE__ */ jsx8(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-wrapper", className: cn("group/sidebar-wrapper flex min-h-svh w-full", className), ...props, children }) });
+}
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "icon", title = "Navigation", className, children, ...props }) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const portalTheme = usePortalTheme();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx8(Drawer.Root, { open: openMobile, onOpenChange: setOpenMobile, swipeDirection: side, children: /* @__PURE__ */ jsxs6(Drawer.Portal, { children: [
+      /* @__PURE__ */ jsx8(Drawer.Backdrop, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
+      /* @__PURE__ */ jsx8(Drawer.Viewport, { className: cn("fixed inset-y-0 z-50 flex", side === "left" ? "left-0" : "right-0"), children: /* @__PURE__ */ jsxs6(
+        Drawer.Popup,
+        {
+          "data-chalk": true,
+          "data-chalk-theme": portalTheme,
+          "data-slot": "sidebar",
+          "data-mobile": "true",
+          className: cn(
+            "chalk-root bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width-mobile) flex-col transition-transform duration-300 ease-out",
+            side === "left" ? "data-ending-style:-translate-x-full data-starting-style:-translate-x-full" : "data-ending-style:translate-x-full data-starting-style:translate-x-full",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx8(Drawer.Title, { className: "sr-only", children: title }),
+            children
+          ]
+        }
+      ) })
+    ] }) });
+  }
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx8("div", { "data-chalk": true, "data-slot": "sidebar", className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className), ...props, children });
+  }
+  return /* @__PURE__ */ jsxs6("div", { "data-chalk": true, "data-slot": "sidebar", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, className: "group peer text-sidebar-foreground hidden bg-transparent md:block", children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: cn(
+          "relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          variant === "floating" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          variant === "floating" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx8("div", { "data-sidebar": "sidebar", className: cn("bg-sidebar flex h-full w-full flex-col", variant === "floating" ? "border-sidebar-border rounded-xl border shadow-[var(--chalk-shadow-lg)]" : ""), children })
+      }
+    )
+  ] });
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full min-w-0 flex-1 flex-col", className), ...props });
+}
+function SidebarTrigger({ className, onClick, children, ...props }) {
+  const { toggleSidebar, isMobile, open } = useSidebar();
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      "data-slot": "sidebar-trigger",
+      "aria-label": isMobile || !open ? "Open navigation" : "Collapse navigation",
+      "aria-expanded": isMobile ? void 0 : open,
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      className: cn("text-foreground/70 hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 inline-flex size-8 shrink-0 items-center justify-center rounded-lg outline-none transition-colors focus-visible:ring-[3px] [&_svg]:size-4.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx8(PanelLeftIcon, {})
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle navigation",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle navigation",
+      className: cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:-right-4 in-data-[side=right]:left-0",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "in-data-[collapsible=offcanvas]:hover:bg-sidebar in-data-[collapsible=offcanvas]:translate-x-0 in-data-[collapsible=offcanvas]:after:left-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-2 p-3", className), ...props });
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-x-hidden overflow-y-auto p-3 group-data-[collapsible=icon]:overflow-hidden", className), ...props });
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn("border-sidebar-border flex flex-col gap-1 border-t p-3", className), ...props });
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col", className), ...props });
+}
+function SidebarGroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/55 flex h-8 shrink-0 items-center rounded-md px-2 font-mono text-[10px] tracking-[0.09em] uppercase transition-[margin,opacity] duration-200 ease-linear",
+        "group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-0.5", className), ...props });
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props });
+}
+var sidebarMenuButtonVariants = cva4(
+  "peer/menu-button ring-sidebar-ring flex w-full items-center gap-3 overflow-hidden rounded-lg px-2.5 text-left text-sm font-medium outline-none transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:size-9! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! [&>span:last-child]:truncate [&>svg]:size-4.5 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        outline: "border-sidebar-border hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground border bg-transparent",
+        primary: "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90 justify-start"
+      },
+      size: {
+        default: "h-9",
+        lg: "h-12 group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+function SidebarMenuButton({ render, isActive = false, variant, size, tooltip, className, ...props }) {
+  const { isMobile, state } = useSidebar();
+  const element = useRender2({
+    render,
+    defaultTagName: "button",
+    state: {},
+    props: {
+      type: render ? void 0 : "button",
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  });
+  if (!tooltip || isMobile || state !== "collapsed") return element;
+  return /* @__PURE__ */ jsxs6(Tooltip, { children: [
+    /* @__PURE__ */ jsx8(TooltipTrigger, { render: element }),
+    /* @__PURE__ */ jsx8(TooltipContent, { side: "right", sideOffset: 10, children: tooltip })
+  ] });
+}
+function PanelLeftIcon() {
+  return /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx8("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }),
+    /* @__PURE__ */ jsx8("path", { d: "M9.5 4v16" })
+  ] });
+}
+
+// src/textarea.tsx
+import * as React7 from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Textarea = React7.forwardRef(function Textarea2({ label, error, showCount = false, resize = "vertical", maxLength, value, className, id, ...props }, ref) {
+  const generatedId = React7.useId();
   const textareaId = id ?? generatedId;
   const currentLength = typeof value === "string" ? value.length : 0;
-  return /* @__PURE__ */ jsxs4("label", { className: "flex w-full flex-col gap-1.5", htmlFor: textareaId, children: [
-    label ? /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("label", { className: "flex w-full flex-col gap-1.5", htmlFor: textareaId, children: [
+    label ? /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
+    /* @__PURE__ */ jsx9(
       "textarea",
       {
         ref,
@@ -326,9 +751,9 @@ var Textarea = React4.forwardRef(function Textarea2({ label, error, showCount =
         ...props
       }
     ),
-    error || showCount && maxLength ? /* @__PURE__ */ jsxs4("span", { className: cn("flex justify-between text-xs text-muted-foreground", error && "text-destructive"), children: [
-      /* @__PURE__ */ jsx6("span", { children: error }),
-      showCount && maxLength ? /* @__PURE__ */ jsxs4("span", { children: [
+    error || showCount && maxLength ? /* @__PURE__ */ jsxs7("span", { className: cn("flex justify-between text-xs text-muted-foreground", error && "text-destructive"), children: [
+      /* @__PURE__ */ jsx9("span", { children: error }),
+      showCount && maxLength ? /* @__PURE__ */ jsxs7("span", { children: [
         currentLength,
         " / ",
         maxLength
@@ -340,9 +765,9 @@ Textarea.displayName = "Textarea";
 
 // src/spinner.tsx
 import "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Spinner({ size = "md", color, className }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       className: cn("inline-block animate-spin rounded-full border-2 border-current border-t-transparent text-primary", size === "sm" && "h-4 w-4", size === "md" && "h-6 w-6", size === "lg" && "h-8 w-8", size === "xl" && "h-12 w-12", className),
@@ -355,9 +780,9 @@ function Spinner({ size = "md", color, className }) {
 
 // src/skeleton.tsx
 import "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Skeleton({ width, height, variant = "text", animation = "pulse", className }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       className: cn("bg-muted", variant === "text" && "rounded-sm", variant === "circular" && "rounded-full", variant === "rounded" && "rounded-md", animation === "pulse" && "animate-pulse", animation === "wave" && "animate-pulse", className),
@@ -368,10 +793,10 @@ function Skeleton({ width, height, variant = "text", animation = "pulse", classN
 }
 
 // src/icon-button.tsx
-import * as React7 from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var IconButton = React7.forwardRef(function IconButton2({ icon, size = "md", variant = "default", className, type = "button", ...props }, ref) {
-  return /* @__PURE__ */ jsx9(
+import * as React10 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var IconButton = React10.forwardRef(function IconButton2({ icon, size = "md", variant = "default", className, type = "button", ...props }, ref) {
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       ref,
@@ -395,15 +820,15 @@ IconButton.displayName = "IconButton";
 
 // src/progress-bar.tsx
 import "react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function ProgressBar({ value, max = 100, showLabel = false, variant = "default", size = "md", animated = false, className }) {
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full", className), children: [
-    showLabel ? /* @__PURE__ */ jsx10("div", { className: "mb-1 flex justify-between text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs5("span", { children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
+    showLabel ? /* @__PURE__ */ jsx13("div", { className: "mb-1 flex justify-between text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs8("span", { children: [
       Math.round(percentage),
       "%"
     ] }) }) : null,
-    /* @__PURE__ */ jsx10("div", { className: cn("w-full overflow-hidden rounded-full bg-muted", size === "sm" && "h-1", size === "md" && "h-2", size === "lg" && "h-4"), children: /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx13("div", { className: cn("w-full overflow-hidden rounded-full bg-muted", size === "sm" && "h-1", size === "md" && "h-2", size === "lg" && "h-4"), children: /* @__PURE__ */ jsx13(
       "div",
       {
         role: "progressbar",
@@ -592,57 +1017,16 @@ var EMOJI_KEYWORDS = {
 };
 
 // src/status-badge.tsx
-import * as React9 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var StatusBadge = React9.forwardRef(function StatusBadge2({ children, className, label, status = "neutral", ...props }, ref) {
-  return /* @__PURE__ */ jsx11("span", { ref, "data-slot": "status-badge", "data-status": status, className: cn("chalk-ui-status-badge", className), ...props, children: label ?? children ?? status });
+import * as React12 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var StatusBadge = React12.forwardRef(function StatusBadge2({ children, className, label, status = "neutral", ...props }, ref) {
+  return /* @__PURE__ */ jsx14("span", { ref, "data-slot": "status-badge", "data-status": status, className: cn("chalk-ui-status-badge", className), ...props, children: label ?? children ?? status });
 });
 
 // src/toast.tsx
-import * as React10 from "react";
+import * as React13 from "react";
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
-
-// src/lib/theme.ts
-var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
-var THEME_CLASS_NAMES = ["dark", "light"];
-var SYSTEM_DARK_QUERY = "(prefers-color-scheme: dark)";
-var normalizeTheme = (value) => {
-  if (value === "dark" || value === "light") {
-    return value;
-  }
-  return null;
-};
-var resolveThemeFromElement = (element) => {
-  if (!element) return null;
-  const attributeTheme = THEME_ATTRIBUTE_NAMES.map((attributeName) => normalizeTheme(element.getAttribute(attributeName))).find((theme) => theme !== null);
-  const classTheme = THEME_CLASS_NAMES.find((theme) => element.classList.contains(theme));
-  return attributeTheme ?? classTheme ?? null;
-};
-var resolveSystemTheme = () => {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
-  return window.matchMedia(SYSTEM_DARK_QUERY).matches ? "dark" : "light";
-};
-var resolveExplicitThemeFromDocument = () => {
-  if (typeof document === "undefined") return null;
-  return resolveThemeFromElement(document.documentElement) ?? resolveThemeFromElement(document.body);
-};
-var resolveFallbackTheme = ({ defaultTheme, allowSystem }) => {
-  if (!allowSystem) return defaultTheme;
-  return resolveSystemTheme() ?? defaultTheme;
-};
-var resolveThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
-  const explicitTheme = resolveExplicitThemeFromDocument();
-  return explicitTheme ?? resolveFallbackTheme({ defaultTheme, allowSystem });
-};
-var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
-  if (typeof document === "undefined") return defaultTheme;
-  const portalTheme = normalizeTheme(document.querySelector("[data-chalk-theme]")?.getAttribute("data-chalk-theme"));
-  if (portalTheme) return portalTheme;
-  return resolveThemeFromDocument({ defaultTheme, allowSystem });
-};
-
-// src/toast.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var sharedToastManager = ToastPrimitive.createToastManager();
 var toastManager = sharedToastManager;
 var toast = Object.assign((options) => sharedToastManager.add(options), {
@@ -654,41 +1038,41 @@ var toast = Object.assign((options) => sharedToastManager.add(options), {
   warning: (options) => sharedToastManager.add({ ...options, type: "warning" })
 });
 function ToastProvider({ toastManager: manager = sharedToastManager, ...props }) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Provider, { toastManager: manager, ...props });
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Provider, { toastManager: manager, ...props });
 }
-var ToastRoot = React10.forwardRef(function ToastRoot2({ className, toast: toastObject, ...props }, ref) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Root, { ref, "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: cn("chalk-ui-toast", className), ...props });
+var ToastRoot = React13.forwardRef(function ToastRoot2({ className, toast: toastObject, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Root, { ref, "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: cn("chalk-ui-toast", className), ...props });
 });
-var ToastContent = React10.forwardRef(function ToastContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Content, { ref, "data-slot": "toast-content", className: cn("chalk-ui-toast-content", className), ...props });
+var ToastContent = React13.forwardRef(function ToastContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Content, { ref, "data-slot": "toast-content", className: cn("chalk-ui-toast-content", className), ...props });
 });
-var ToastTitle = React10.forwardRef(function ToastTitle2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Title, { ref, "data-slot": "toast-title", className: cn("chalk-ui-toast-title", className), ...props });
+var ToastTitle = React13.forwardRef(function ToastTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Title, { ref, "data-slot": "toast-title", className: cn("chalk-ui-toast-title", className), ...props });
 });
-var ToastDescription = React10.forwardRef(function ToastDescription2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Description, { ref, "data-slot": "toast-description", className: cn("chalk-ui-toast-description", className), ...props });
+var ToastDescription = React13.forwardRef(function ToastDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Description, { ref, "data-slot": "toast-description", className: cn("chalk-ui-toast-description", className), ...props });
 });
-var ToastClose = React10.forwardRef(function ToastClose2({ "aria-label": ariaLabel = "Dismiss notification", children = "\xD7", className, ...props }, ref) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Close, { ref, "aria-label": ariaLabel, "data-slot": "toast-close", className: cn("chalk-ui-toast-close chalk-ui-focusable", className), ...props, children });
+var ToastClose = React13.forwardRef(function ToastClose2({ "aria-label": ariaLabel = "Dismiss notification", children = "\xD7", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Close, { ref, "aria-label": ariaLabel, "data-slot": "toast-close", className: cn("chalk-ui-toast-close chalk-ui-focusable", className), ...props, children });
 });
-var ToastAction = React10.forwardRef(function ToastAction2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx12(ToastPrimitive.Action, { ref, "data-slot": "toast-action", className: cn("chalk-ui-focusable", className), ...props });
+var ToastAction = React13.forwardRef(function ToastAction2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(ToastPrimitive.Action, { ref, "data-slot": "toast-action", className: cn("chalk-ui-focusable", className), ...props });
 });
 function ToastViewport({ className, children, ...props }) {
   const { toasts } = ToastPrimitive.useToastManager();
-  const portalTheme = resolvePortalThemeFromDocument();
-  return /* @__PURE__ */ jsxs6(ToastPrimitive.Viewport, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "toast-viewport", className: cn("chalk-ui-root chalk-ui-toast-viewport", className), ...props, children: [
+  const portalTheme = usePortalTheme();
+  return /* @__PURE__ */ jsxs9(ToastPrimitive.Viewport, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "toast-viewport", className: cn("chalk-ui-root chalk-ui-toast-viewport", className), ...props, children: [
     children,
     toasts.map((toastObject) => {
       const actionProps = toastObject.actionProps;
       const { children: actionLabel, ...restActionProps } = actionProps ?? {};
-      return /* @__PURE__ */ jsxs6(ToastPrimitive.Root, { "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: "chalk-ui-toast", children: [
-        /* @__PURE__ */ jsxs6(ToastPrimitive.Content, { "data-slot": "toast-content", className: "chalk-ui-toast-content", children: [
-          toastObject.title ? /* @__PURE__ */ jsx12(ToastPrimitive.Title, { "data-slot": "toast-title", className: "chalk-ui-toast-title", children: toastObject.title }) : null,
-          toastObject.description ? /* @__PURE__ */ jsx12(ToastPrimitive.Description, { "data-slot": "toast-description", className: "chalk-ui-toast-description", children: toastObject.description }) : null,
-          actionProps ? /* @__PURE__ */ jsx12(ToastPrimitive.Action, { "data-slot": "toast-action", className: "chalk-ui-focusable", ...restActionProps, children: actionLabel ?? "Action" }) : null
+      return /* @__PURE__ */ jsxs9(ToastPrimitive.Root, { "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: "chalk-ui-toast", children: [
+        /* @__PURE__ */ jsxs9(ToastPrimitive.Content, { "data-slot": "toast-content", className: "chalk-ui-toast-content", children: [
+          toastObject.title ? /* @__PURE__ */ jsx15(ToastPrimitive.Title, { "data-slot": "toast-title", className: "chalk-ui-toast-title", children: toastObject.title }) : null,
+          toastObject.description ? /* @__PURE__ */ jsx15(ToastPrimitive.Description, { "data-slot": "toast-description", className: "chalk-ui-toast-description", children: toastObject.description }) : null,
+          actionProps ? /* @__PURE__ */ jsx15(ToastPrimitive.Action, { "data-slot": "toast-action", className: "chalk-ui-focusable", ...restActionProps, children: actionLabel ?? "Action" }) : null
         ] }),
-        /* @__PURE__ */ jsx12(ToastPrimitive.Close, { "aria-label": "Dismiss notification", "data-slot": "toast-close", className: "chalk-ui-toast-close chalk-ui-focusable", children: "\xD7" })
+        /* @__PURE__ */ jsx15(ToastPrimitive.Close, { "aria-label": "Dismiss notification", "data-slot": "toast-close", className: "chalk-ui-toast-close chalk-ui-focusable", children: "\xD7" })
       ] }, toastObject.id);
     })
   ] });
@@ -708,11 +1092,11 @@ var Toast = Object.assign(ToastRoot, {
 });
 
 // src/toggle.tsx
-import * as React11 from "react";
+import * as React14 from "react";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var toggleVariants = cva3(
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var toggleVariants = cva5(
   "hover:text-foreground aria-pressed:bg-accent focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-accent data-[state=on]:text-accent-foreground gap-1 rounded-lg text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-accent inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
@@ -734,22 +1118,22 @@ var toggleVariants = cva3(
 );
 function Toggle({ className, variant = "default", size = "default", checked, enabled, onChange, label, ariaLabel, ariaLabelledby, pressed, onPressedChange, id, ...props }) {
   const resolvedPressed = checked ?? enabled ?? pressed;
-  const generatedId = React11.useId();
+  const generatedId = React14.useId();
   const toggleId = id ?? (label ? `chalk-toggle-${generatedId.replace(/:/g, "")}` : void 0);
-  const toggle = /* @__PURE__ */ jsx13(TogglePrimitive, { id: toggleId, "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), pressed: resolvedPressed, onPressedChange: onPressedChange ?? onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props });
-  return label ? /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-2", children: [
+  const toggle = /* @__PURE__ */ jsx16(TogglePrimitive, { id: toggleId, "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), pressed: resolvedPressed, onPressedChange: onPressedChange ?? onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props });
+  return label ? /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-2", children: [
     toggle,
-    /* @__PURE__ */ jsx13("label", { htmlFor: toggleId, children: label })
+    /* @__PURE__ */ jsx16("label", { htmlFor: toggleId, children: label })
   ] }) : toggle;
 }
 
 // src/toggle-group.tsx
-import * as React12 from "react";
+import * as React15 from "react";
 import { Toggle as TogglePrimitive2 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import "class-variance-authority";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var ToggleGroupContext = React12.createContext({
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ToggleGroupContext = React15.createContext({
   size: "default",
   variant: "default",
   spacing: 0,
@@ -764,7 +1148,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     ToggleGroupPrimitive,
     {
       "data-slot": "toggle-group",
@@ -775,15 +1159,15 @@ function ToggleGroup({
       style: { "--gap": spacing },
       className: cn("rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
       ...props,
-      children: /* @__PURE__ */ jsx14(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
+      children: /* @__PURE__ */ jsx17(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
     }
   );
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
-  const context = React12.useContext(ToggleGroupContext);
+  const context = React15.useContext(ToggleGroupContext);
   const resolvedVariant = context.variant || variant;
   const resolvedSize = context.size || size;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     TogglePrimitive2,
     {
       "data-slot": "toggle-group-item",
@@ -803,52 +1187,6 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
     }
   );
 }
-
-// src/tooltip.tsx
-import "react";
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-function TooltipProvider({ delay = 0, ...props }) {
-  return /* @__PURE__ */ jsx15(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay, ...props });
-}
-function Tooltip({ content, children, position = "top", delay = 200, className, ...props }) {
-  if (content !== void 0) {
-    return /* @__PURE__ */ jsx15(TooltipProvider, { delay, children: /* @__PURE__ */ jsxs8(TooltipPrimitive.Root, { children: [
-      /* @__PURE__ */ jsx15(
-        TooltipPrimitive.Trigger,
-        {
-          render: (triggerProps) => /* @__PURE__ */ jsx15("span", { ...triggerProps, className: "inline-flex", children })
-        }
-      ),
-      /* @__PURE__ */ jsx15(TooltipContent, { className, side: position, children: content })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx15(TooltipProvider, { children: /* @__PURE__ */ jsx15(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
-}
-function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx15(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
-  return /* @__PURE__ */ jsx15(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx15(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs8(
-    TooltipPrimitive.Popup,
-    {
-      "data-chalk": true,
-      "data-chalk-theme": portalTheme,
-      "data-slot": "tooltip-content",
-      className: cn(
-        "chalk-root",
-        "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 rounded-lg px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background shadow-[var(--chalk-shadow-sm)] z-50 w-fit max-w-xs origin-(--transform-origin)",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx15(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
-      ]
-    }
-  ) }) });
-}
 export {
   Badge,
   Button,
@@ -865,8 +1203,30 @@ export {
   EMOJI_KEYWORDS,
   IconButton,
   Input,
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuTrigger,
   ProgressBar,
   Select,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
   Skeleton,
   Spinner,
   StatusBadge,
@@ -890,8 +1250,10 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  sidebarMenuButtonVariants,
   toast,
   toastManager,
   toggleVariants,
+  useSidebar,
   useToast
 };