@q9labsai/chalk-ui 4.0.1 → 4.1.0

package/dist/lib/use-is-mobile.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tracks whether the viewport is narrower than the `md` breakpoint, so layouts
+ * can swap a persistent panel for a drawer. Returns `false` until mounted, which
+ * keeps the first client render aligned with server-rendered markup.
+ */
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-is-mobile.d.ts.map

package/dist/lib/use-is-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../../src/lib/use-is-mobile.ts"],"names":[],"mappings":"AAUA;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAYrC"}

package/dist/menu.d.ts

@@ -0,0 +1,16 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { type VariantProps } from "class-variance-authority";
+declare function Menu(props: MenuPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function MenuTrigger(props: MenuPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare const menuContentVariants: (props?: ({
+    tone?: "default" | "sidebar" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MenuContentProps = MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & VariantProps<typeof menuContentVariants>;
+declare function MenuContent({ className, tone, side, sideOffset, align, alignOffset, children, ...props }: MenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MenuItem({ className, ...props }: MenuPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+declare function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props): import("react/jsx-runtime").JSX.Element;
+declare function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react/jsx-runtime").JSX.Element;
+declare function MenuGroupLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
+declare function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+export { Menu, MenuContent, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger };
+//# sourceMappingURL=menu.d.ts.map

package/dist/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,iBAAS,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAE5C;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,2CAEtD;AAED,QAAA,MAAM,mBAAmB;;8EAQvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAErL,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAe,EAAE,UAAc,EAAE,KAAe,EAAE,WAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAYhJ;AAKD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAElE;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAE5D;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAWtF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAE5E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC"}

package/dist/menu.js

@@ -0,0 +1,102 @@
+"use client";
+
+// src/menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// 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/menu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Menu(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Root, { "data-slot": "menu", ...props });
+}
+function MenuTrigger(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Trigger, { "data-slot": "menu-trigger", ...props });
+}
+var menuContentVariants = cva("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 = resolvePortalThemeFromDocument();
+  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenuPrimitive.Positioner, { className: "z-50", side, sideOffset, align, alignOffset, children: /* @__PURE__ */ jsx(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__ */ jsx(MenuPrimitive.Item, { "data-slot": "menu-item", className: cn(menuItemClassName, className), ...props });
+}
+function MenuRadioGroup(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.RadioGroup, { "data-slot": "menu-radio-group", ...props });
+}
+function MenuRadioItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive.RadioItem, { "data-slot": "menu-radio-item", className: cn(menuItemClassName, className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) }) })
+  ] });
+}
+function MenuGroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(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__ */ jsx(MenuPrimitive.Separator, { "data-slot": "menu-separator", className: cn("bg-current/10 -mx-1 my-1 h-px", className), ...props });
+}
+export {
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuTrigger
+};

package/dist/sidebar.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+type SidebarState = "expanded" | "collapsed";
+type SidebarSide = "left" | "right";
+type SidebarVariant = "sidebar" | "floating";
+type SidebarCollapsible = "offcanvas" | "icon" | "none";
+interface SidebarContextValue {
+    readonly state: SidebarState;
+    readonly open: boolean;
+    readonly setOpen: (open: boolean) => void;
+    readonly openMobile: boolean;
+    readonly setOpenMobile: (open: boolean) => void;
+    readonly isMobile: boolean;
+    readonly toggleSidebar: () => void;
+}
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends React.ComponentPropsWithRef<"div"> {
+    /** Initial expanded state when the sidebar is uncontrolled. */
+    readonly defaultOpen?: boolean;
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+}
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, className, children, ...props }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
+    readonly side?: SidebarSide;
+    readonly variant?: SidebarVariant;
+    readonly collapsible?: SidebarCollapsible;
+    /** Accessible name for the mobile drawer. */
+    readonly title?: string;
+}
+declare function Sidebar({ side, variant, collapsible, title, className, children, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentPropsWithRef<"main">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarTrigger({ className, onClick, children, ...props }: React.ComponentPropsWithRef<"button">): import("react/jsx-runtime").JSX.Element;
+/** The hairline hit area on the sidebar's edge; drag-to-toggle affordance. */
+declare function SidebarRail({ className, ...props }: React.ComponentPropsWithRef<"button">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentPropsWithRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentPropsWithRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentPropsWithRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentPropsWithRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupLabel({ className, ...props }: React.ComponentPropsWithRef<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentPropsWithRef<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentPropsWithRef<"li">): import("react/jsx-runtime").JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | "primary" | null | undefined;
+    size?: "default" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SidebarMenuButtonProps extends React.ComponentPropsWithRef<"button">, VariantProps<typeof sidebarMenuButtonVariants> {
+    readonly isActive?: boolean;
+    /** Shown as a tooltip while the sidebar is collapsed to icons. */
+    readonly tooltip?: React.ReactNode;
+    /** Renders a different element — a router link, for instance — with the button's props. */
+    readonly render?: useRender.RenderProp;
+}
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../src/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/sidebar.js

@@ -0,0 +1,353 @@
+"use client";
+
+// src/sidebar.tsx
+import * as React3 from "react";
+import { Drawer } from "@base-ui/react/drawer";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/use-is-mobile.ts
+import * as React from "react";
+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 subscribe = React.useCallback((onChange) => {
+    const query = matchMobileQuery();
+    query?.addEventListener("change", onChange);
+    return () => query?.removeEventListener("change", onChange);
+  }, []);
+  return React.useSyncExternalStore(
+    subscribe,
+    () => matchMobileQuery()?.matches ?? false,
+    () => false
+  );
+}
+
+// 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/tooltip.tsx
+import "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TooltipProvider({ delay = 0, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay, ...props });
+}
+function Tooltip({ content, children, position = "top", delay = 200, className, ...props }) {
+  if (content !== void 0) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { delay, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipPrimitive.Trigger,
+        {
+          render: (triggerProps) => /* @__PURE__ */ jsx("span", { ...triggerProps, className: "inline-flex", children })
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { className, side: position, children: content })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(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__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs(
+    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__ */ jsx(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 jsx2, jsxs as jsxs2 } 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 = React3.createContext(null);
+function useSidebar() {
+  const context = React3.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] = React3.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React3.useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = React3.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 = React3.useCallback(() => {
+    if (isMobile) setOpenMobile(!openMobile);
+    else setOpen(!open);
+  }, [isMobile, open, openMobile, setOpen]);
+  React3.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 = React3.useMemo(() => ({ state: open ? "expanded" : "collapsed", open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }), [isMobile, open, openMobile, setOpen, toggleSidebar]);
+  return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx2("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();
+  if (isMobile) {
+    const portalTheme = resolvePortalThemeFromDocument();
+    return /* @__PURE__ */ jsx2(Drawer.Root, { open: openMobile, onOpenChange: setOpenMobile, swipeDirection: side, children: /* @__PURE__ */ jsxs2(Drawer.Portal, { children: [
+      /* @__PURE__ */ jsx2(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__ */ jsx2(Drawer.Viewport, { className: cn("fixed inset-y-0 z-50 flex", side === "left" ? "left-0" : "right-0"), children: /* @__PURE__ */ jsxs2(
+        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__ */ jsx2(Drawer.Title, { className: "sr-only", children: title }),
+            children
+          ]
+        }
+      ) })
+    ] }) });
+  }
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx2("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__ */ jsxs2("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__ */ jsx2(
+      "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__ */ jsx2(
+      "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__ */ jsx2("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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2(PanelLeftIcon, {})
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props });
+}
+var sidebarMenuButtonVariants = cva(
+  "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 = useRender({
+    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__ */ jsxs2(Tooltip, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { render: element }),
+    /* @__PURE__ */ jsx2(TooltipContent, { side: "right", sideOffset: 10, children: tooltip })
+  ] });
+}
+function PanelLeftIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9.5 4v16" })
+  ] });
+}
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  sidebarMenuButtonVariants,
+  useSidebar
+};

package/dist/styles.css

@@ -33,6 +33,14 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -70,6 +78,19 @@
   --ring: #0f1115;
   --radius: 0.5rem;
 
+  /* Sidebar: a chalkboard slate that anchors the paper canvas beside it. */
+  --sidebar: #171a18;
+  --sidebar-foreground: #b9c0ba;
+  --sidebar-primary: #f7f6f2;
+  --sidebar-primary-foreground: #121512;
+  --sidebar-accent: #2b302c;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #2c312d;
+  --sidebar-ring: #8fbf87;
+  --sidebar-width: 16rem;
+  --sidebar-width-icon: 3.25rem;
+  --sidebar-width-mobile: 18rem;
+
   --chalk-paper: #ffffff;
   --chalk-ink: #0f1115;
   --chalk-ink-2: #4b5563;
@@ -394,6 +415,14 @@
   --border: #313a3f;
   --input: #3d484e;
   --ring: #ffffff;
+  --sidebar: #121719;
+  --sidebar-foreground: #a4b0b5;
+  --sidebar-primary: #dde3e6;
+  --sidebar-primary-foreground: #0f1115;
+  --sidebar-accent: #232a2e;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #232a2e;
+  --sidebar-ring: #8fbf87;
   --chalk-paper: #1b2023;
   --chalk-ink: #dde3e6;
   --chalk-ink-2: #8b979d;