@nexub/react 1.1.0 → 1.3.0

package/dist/{chunk-4NGB7XIM.js → chunk-CMYEVLQT.js}

@@ -25,6 +25,26 @@ var Root = React.forwardRef(
   )
 );
 Root.displayName = "Sidebar.Root";
+var Header = React.forwardRef(
+  ({ className, status, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // Wraps instead of overlapping: the status drops to its own line when
+        // the logo needs the width, and a logo wider than the sidebar truncates.
+        "flex shrink-0 flex-wrap items-center justify-between gap-x-3 gap-y-2 border-b border-[var(--color-border-default)] px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 max-w-full items-center", children }),
+        status && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center group-data-[collapsed=true]/sidebar:sr-only", children: status })
+      ]
+    }
+  )
+);
+Header.displayName = "Sidebar.Header";
 var Group = React.forwardRef(
   ({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-0.5 p-2", className), ...props, children: [
     label && /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]", children: label }),
@@ -81,7 +101,7 @@ var Footer = React.forwardRef(
   )
 );
 Footer.displayName = "Sidebar.Footer";
-var Sidebar = { Root, Group, Item, Separator, Footer };
+var Sidebar = { Root, Header, Group, Item, Separator, Footer };
 
 export {
   Sidebar

package/dist/{chunk-YAGVMERC.js → chunk-E3QPDCEV.js}

@@ -74,8 +74,24 @@ function useTheme() {
   }
   return ctx;
 }
+var jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
+function themeScriptSource(storageKey, productStorageKey) {
+  const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(b&&b!=='base')d.setAttribute('data-product',b);` : "";
+  return `try{var d=document.documentElement,t=localStorage.getItem(${jsString(storageKey)});if(t==='light'||t==='dark')d.setAttribute('data-theme',t);${product}}catch(e){}`;
+}
+function ThemeScript({ storageKey = "nexub-theme", productStorageKey, nonce }) {
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      nonce,
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: { __html: themeScriptSource(storageKey, productStorageKey) }
+    }
+  );
+}
 
 export {
   ThemeProvider,
-  useTheme
+  useTheme,
+  ThemeScript
 };

package/dist/{chunk-S344IRK4.js → chunk-EVCTOIRS.js}

@@ -49,7 +49,10 @@ var Content2 = React.forwardRef(
       ref,
       className: cn(
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
-        className
+        className,
+        // Radix hides inactive panels with the `hidden` attribute, which any
+        // display class (`flex`, `md:grid`…) overrides. !important always wins.
+        "data-[state=inactive]:!hidden"
       ),
       ...props
     }

package/dist/{chunk-AHZQQ7OT.js → chunk-MV7WMQI4.js}

@@ -7,8 +7,8 @@ import {
 import * as React from "react";
 import { NexubMark } from "@nexub/icons";
 import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-var logoVariants = cva("inline-flex items-center gap-2", {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var logoVariants = cva("inline-flex min-w-0 max-w-full items-center gap-2", {
   variants: {
     size: {
       sm: "h-6",
@@ -26,9 +26,9 @@ var logoVariants = cva("inline-flex items-center gap-2", {
   }
 });
 var iconSizeMap = {
-  sm: "h-5 w-5",
-  md: "h-7 w-7",
-  lg: "h-9 w-9"
+  sm: "h-5 w-auto aspect-[78/56]",
+  md: "h-7 w-auto aspect-[78/56]",
+  lg: "h-9 w-auto aspect-[78/56]"
 };
 var wordmarkSizeMap = {
   sm: "text-base",
@@ -38,6 +38,8 @@ var wordmarkSizeMap = {
 var Logo = React.forwardRef(
   ({
     variant = "full",
+    mark = "color",
+    product,
     size = "md",
     tone = "default",
     className,
@@ -45,31 +47,49 @@ var Logo = React.forwardRef(
   }, ref) => {
     const resolvedSize = size ?? "md";
     const resolvedTone = tone ?? "default";
+    const full = variant === "full";
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
+        role: "img",
+        "aria-label": product ? `Nexub ${product}` : "Nexub",
         className: cn(logoVariants({ size: resolvedSize, tone: resolvedTone }), className),
-        "aria-label": "Nexub",
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
             NexubMark,
             {
+              variant: mark,
               className: cn(iconSizeMap[resolvedSize], "shrink-0"),
               "aria-hidden": "true"
             }
           ),
-          variant === "full" && /* @__PURE__ */ jsx(
+          full && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
                 wordmarkSizeMap[resolvedSize],
-                "font-semibold tracking-tight leading-none"
+                "shrink-0 font-semibold tracking-tight leading-none"
               ),
               children: "nexub"
             }
-          )
+          ),
+          full && product && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-1/2 w-px shrink-0 bg-current opacity-25" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  wordmarkSizeMap[resolvedSize],
+                  // leading-normal so the clip box doesn't cut descenders.
+                  "min-w-0 truncate font-medium tracking-tight leading-normal",
+                  resolvedTone === "inverse" ? "opacity-70" : "text-[var(--color-text-muted)]"
+                ),
+                children: product
+              }
+            )
+          ] })
         ]
       }
     );

package/dist/{chunk-V6GZZFTV.js → chunk-QRZV2FLW.js}

@@ -10,7 +10,7 @@ import { Command } from "cmdk";
 import { Search } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Root2 = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(RadixDialog.Root, { ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
-  /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-[var(--z-modal)] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0" }),
+  /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0" }),
   /* @__PURE__ */ jsx(
     RadixDialog.Content,
     {

package/dist/{chunk-2MKB5FQI.js → chunk-RIDDJUPA.js}

@@ -21,7 +21,7 @@ var Overlay2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "fixed inset-0 z-[var(--z-modal)] bg-black/50 backdrop-blur-sm",
+          "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
           className

package/dist/{chunk-L6GBZ2HB.js → chunk-ZLSUVZM2.js}

@@ -17,7 +17,7 @@ var Overlay2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "fixed inset-0 z-[var(--z-modal)] bg-black/50 backdrop-blur-sm",
+          "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
           className

package/dist/components/AlertDialog/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   AlertDialog
-} from "../../chunk-L6GBZ2HB.js";
+} from "../../chunk-ZLSUVZM2.js";
 import "../../chunk-AT6RPKU3.js";
 export {
   AlertDialog

package/dist/components/CommandPalette/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   CommandPalette
-} from "../../chunk-V6GZZFTV.js";
+} from "../../chunk-QRZV2FLW.js";
 import "../../chunk-AT6RPKU3.js";
 export {
   CommandPalette

package/dist/components/Dialog/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Dialog
-} from "../../chunk-2MKB5FQI.js";
+} from "../../chunk-RIDDJUPA.js";
 import "../../chunk-ROZVVWPV.js";
 import "../../chunk-AT6RPKU3.js";
 export {

package/dist/components/Drawer/index.js

@@ -2,7 +2,7 @@
 import {
   Drawer,
   Sheet
-} from "../../chunk-4BTP4464.js";
+} from "../../chunk-6MYVXJPJ.js";
 import "../../chunk-ROZVVWPV.js";
 import "../../chunk-AT6RPKU3.js";
 export {

package/dist/components/Logo/index.js

@@ -2,7 +2,7 @@
 import {
   Logo,
   logoVariants
-} from "../../chunk-AHZQQ7OT.js";
+} from "../../chunk-MV7WMQI4.js";
 import "../../chunk-AT6RPKU3.js";
 export {
   Logo,

package/dist/components/Sidebar/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Sidebar
-} from "../../chunk-4NGB7XIM.js";
+} from "../../chunk-CMYEVLQT.js";
 import "../../chunk-AT6RPKU3.js";
 export {
   Sidebar

package/dist/components/Tabs/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Tabs
-} from "../../chunk-S344IRK4.js";
+} from "../../chunk-EVCTOIRS.js";
 import "../../chunk-AT6RPKU3.js";
 export {
   Tabs

package/dist/components/ThemeProvider/index.js

@@ -1,10 +1,12 @@
 'use client';
 import {
   ThemeProvider,
+  ThemeScript,
   useTheme
-} from "../../chunk-YAGVMERC.js";
+} from "../../chunk-E3QPDCEV.js";
 import "../../chunk-NHUQLIHL.js";
 export {
   ThemeProvider,
+  ThemeScript,
   useTheme
 };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { Root as VisuallyHidden, VisuallyHiddenProps } from '@radix-ui/react-visually-hidden';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
@@ -13,7 +13,6 @@ import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as RadixContextMenu from '@radix-ui/react-context-menu';
 import * as RadixNav from '@radix-ui/react-navigation-menu';
-import * as vaul from 'vaul';
 import * as RadixSelect from '@radix-ui/react-select';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
@@ -512,7 +511,12 @@ declare const logoVariants: (props?: ({
     tone?: "default" | "inverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LogoProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof logoVariants> {
-    variant?: 'full' | 'mark';
+    /** `full` = mark + wordmark; `icon` = mark only. `mark` is the old name for `icon`. */
+    variant?: 'full' | 'icon' | 'mark';
+    /** `color` (default) = the official mark in brand colours; `mono` = `currentColor`. */
+    mark?: 'color' | 'mono';
+    /** Product name shown after the wordmark, e.g. "Command Hub". Ignored for `variant="icon"`. */
+    product?: string;
 }
 declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;
 
@@ -536,19 +540,19 @@ declare const KeyboardShortcut: React.ForwardRefExoticComponent<KeyboardShortcut
 
 type SurfaceValue = 'solid' | 'glass';
 
-interface ContentProps extends RadixDialog.DialogContentProps {
+interface ContentProps extends DialogPrimitive.DialogContentProps {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     surface?: SurfaceValue;
 }
 declare const Dialog: {
-    Root: React.FC<RadixDialog.DialogProps>;
-    Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Portal: React.FC<RadixDialog.DialogPortalProps>;
-    Overlay: React.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Root: React.FC<DialogPrimitive.DialogProps>;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: React.FC<DialogPrimitive.DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
-    Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-    Title: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
     Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
@@ -641,31 +645,91 @@ declare const NavigationMenu: {
     Indicator: React.ForwardRefExoticComponent<RadixNav.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
 };
 
+interface DrawerRootProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    /** Opened by default, skips the initial enter animation. Still reacts to `open` changes. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Gets triggered after the open or close animation ends. */
+    onAnimationEnd?: (open: boolean) => void;
+    onClose?: () => void;
+    /** Edge the drawer slides in from. Match it to `Content`'s `side`. @default 'bottom' */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    /** When `false`, the page behind stays interactive and nothing is locked or trapped. @default true */
+    modal?: boolean;
+    /**
+     * How page scroll is locked while the drawer is open (modal only).
+     * - `'style'` (default): Radix's scroll lock. It injects a `<style>` tag, which a strict
+     *   `style-src` CSP blocks.
+     * - `'class'`: adds the `nexub-scroll-lock` class from `@nexub/themes/base` to `<html>`.
+     *   Injects nothing, so it works under `style-src 'self'`. Focus trap, Escape and
+     *   outside-click dismissal are unchanged.
+     * @default 'style'
+     */
+    scrollLock?: 'style' | 'class';
+    /** When `false`, dragging, outside clicks and Escape don't close the drawer. @default true */
+    dismissible?: boolean;
+    /** Only the `Drawer.Handle` starts a drag. @default false */
+    handleOnly?: boolean;
+    /** Fraction (0–1) of the drawer that must be dragged away to close it. @default 0.25 */
+    closeThreshold?: number;
+    /** Snap points, as fractions of the screen (e.g. `[0.4, 1]`) or px strings. */
+    snapPoints?: (number | string)[];
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    /** Index of the snap point from which the overlay fades. Defaults to the last one. */
+    fadeFromIndex?: number;
+    /** Don't skip snap points on fast swipes. @default false */
+    snapToSequentialPoint?: boolean;
+    /** ms during which the drawer can't be dragged after its content scrolls. @default 500 */
+    scrollLockTimeout?: number;
+    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    shouldScaleBackground?: boolean;
+    /** @default true */
+    setBackgroundColorOnScale?: boolean;
+    /** When `true`, vaul sets no styles on `body`. */
+    noBodyStyles?: boolean;
+    /** Only resize (don't move) the drawer when the on-screen keyboard opens. */
+    fixed?: boolean;
+    nested?: boolean;
+    disablePreventScroll?: boolean;
+    preventScrollRestoration?: boolean;
+    /** Reposition inputs instead of scrolling them into view when the keyboard opens. */
+    repositionInputs?: boolean;
+    container?: HTMLElement | null;
+    autoFocus?: boolean;
+}
+declare function Root({ scrollLock, onOpenChange, ...props }: DrawerRootProps): react_jsx_runtime.JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
 declare const Drawer: {
-    Root: typeof vaul.Root;
-    Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Portal: typeof vaul.Portal;
-    Overlay: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<RadixDialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & {
+    Root: typeof Root;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: (props: DialogPrimitive.DialogPortalProps) => React.JSX.Element;
+    Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & {
         side?: "left" | "right" | "top" | "bottom";
         surface?: SurfaceValue;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
     Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 declare const Sheet: {
-    Root: typeof vaul.Root;
-    Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Portal: typeof vaul.Portal;
-    Overlay: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<RadixDialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & {
+    Root: typeof Root;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: (props: DialogPrimitive.DialogPortalProps) => React.JSX.Element;
+    Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & {
         side?: "left" | "right" | "top" | "bottom";
         surface?: SurfaceValue;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
     Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -922,6 +986,10 @@ declare const TopNav: {
 interface SidebarRootProps extends React.HTMLAttributes<HTMLElement> {
     collapsed?: boolean;
 }
+interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Trailing element next to the logo, e.g. a "Live" `<Badge>`. Moves under the logo when they don't fit. */
+    status?: React.ReactNode;
+}
 interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
 }
@@ -933,6 +1001,7 @@ interface SidebarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
 }
 declare const Sidebar: {
     Root: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLElement>>;
+    Header: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
     Item: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
     Separator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>>;
@@ -986,7 +1055,7 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
 declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
 
 declare const CommandPalette: {
-    Root: React.ForwardRefExoticComponent<RadixDialog.DialogProps & {
+    Root: React.ForwardRefExoticComponent<DialogPrimitive.DialogProps & {
         className?: string;
     } & React.RefAttributes<HTMLDivElement>>;
     Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
@@ -1152,6 +1221,19 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextValue;
+interface ThemeScriptProps {
+    /** Must match ThemeProvider's `storageKey`. Defaults to 'nexub-theme'. */
+    storageKey?: string;
+    /** If set, a stored product brand (e.g. 'bookub') is applied as `data-product`. */
+    productStorageKey?: string;
+    /** CSP nonce for pages whose script-src disallows inline scripts. */
+    nonce?: string;
+}
+/**
+ * Applies the stored theme before first paint, so there is no light/dark flash.
+ * Render it in `<head>` (or at the top of `<body>`) on server-rendered pages.
+ */
+declare function ThemeScript({ storageKey, productStorageKey, nonce }: ThemeScriptProps): react_jsx_runtime.JSX.Element;
 
 type MotionDuration = 'instant' | 'fast' | 'normal' | 'slow' | 'slower';
 type MotionEasing = 'linear' | 'in' | 'out' | 'in-out' | 'out-expo' | 'spring';
@@ -1259,4 +1341,4 @@ interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttri
  */
 declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, Alert, AlertDialog, type AlertProps, AppShell, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Callout, type CalloutProps, Card, type CardProps, CheckList, CheckListItem, type CheckListItemProps, type CheckListProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Code, type CodeProps, Collapse, type CollapseProps, Collapsible, Combobox, CommandPalette, Container, type ContainerProps, ContextMenu, CountryBadge, type CountryBadgeProps, DataTable, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, Drawer, DropdownMenu, EmptyState, ErrorState, type ErrorStateProps, EyebrowChip, type EyebrowChipProps, Fade, type FadeProps, FileUpload, type FileUploadRootProps, FilterChip, type FilterChipProps, Flag, type FlagProps, Flex, type FlexProps, FormError, type FormErrorProps, FormField, type FormFieldContextValue, type FormFieldRootProps, GradientDivider, type GradientDividerProps, Grid, type GridProps, Heading, type HeadingProps, HelperText, type HelperTextProps, HoverCard, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, KeyboardShortcut, type KeyboardShortcutProps, Label, type LabelProps, Link, type LinkProps, Logo, type LogoProps, Menubar, type MotionBaseProps, type MotionDuration, type MotionEasing, NavigationMenu, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, Progress, type ProgressProps, RadioGroup, Rating, type RatingProps, Scale, type ScaleProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Select, Separator, type SeparatorProps, Sheet, Sidebar, type SidebarGroupProps, type SidebarItemProps, type SidebarRootProps, Skeleton, type SkeletonProps, Slide, type SlideDirection, type SlideProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, StatusPill, type StatusPillProps, Switch, type SwitchProps, Table, Tabs, Tag, type TagProps, Text, TextGradient, type TextGradientProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, Toast, type ToastItem, Toaster, Toggle, ToggleGroup, type ToggleProps, type ToneValue, Toolbar, Tooltip, Provider as TooltipProvider, TopNav, type TopNavItemProps, addonVariants, alertVariants, avatarGroupVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calloutVariants, cardVariants, chipVariants, cn, containerVariants, headingVariants, iconButtonVariants, inputVariants, inputWrapperVariants, labelVariants, linkVariants, logoVariants, progressFillVariants, progressTrackVariants, ratingVariants, sectionVariants, separatorVariants, skeletonVariants, spinnerVariants, statusPillVariants, tagVariants, textVariants, textareaVariants, toast, toggleVariants, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useMediaQuery, useMergedRefs, useTheme, useToastStore };
+export { Accordion, Alert, AlertDialog, type AlertProps, AppShell, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Callout, type CalloutProps, Card, type CardProps, CheckList, CheckListItem, type CheckListItemProps, type CheckListProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Code, type CodeProps, Collapse, type CollapseProps, Collapsible, Combobox, CommandPalette, Container, type ContainerProps, ContextMenu, CountryBadge, type CountryBadgeProps, DataTable, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, Drawer, type DrawerRootProps, DropdownMenu, EmptyState, ErrorState, type ErrorStateProps, EyebrowChip, type EyebrowChipProps, Fade, type FadeProps, FileUpload, type FileUploadRootProps, FilterChip, type FilterChipProps, Flag, type FlagProps, Flex, type FlexProps, FormError, type FormErrorProps, FormField, type FormFieldContextValue, type FormFieldRootProps, GradientDivider, type GradientDividerProps, Grid, type GridProps, Heading, type HeadingProps, HelperText, type HelperTextProps, HoverCard, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, KeyboardShortcut, type KeyboardShortcutProps, Label, type LabelProps, Link, type LinkProps, Logo, type LogoProps, Menubar, type MotionBaseProps, type MotionDuration, type MotionEasing, NavigationMenu, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, Progress, type ProgressProps, RadioGroup, Rating, type RatingProps, Scale, type ScaleProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Select, Separator, type SeparatorProps, Sheet, Sidebar, type SidebarGroupProps, type SidebarHeaderProps, type SidebarItemProps, type SidebarRootProps, Skeleton, type SkeletonProps, Slide, type SlideDirection, type SlideProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, StatusPill, type StatusPillProps, Switch, type SwitchProps, Table, Tabs, Tag, type TagProps, Text, TextGradient, type TextGradientProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, Toast, type ToastItem, Toaster, Toggle, ToggleGroup, type ToggleProps, type ToneValue, Toolbar, Tooltip, Provider as TooltipProvider, TopNav, type TopNavItemProps, addonVariants, alertVariants, avatarGroupVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calloutVariants, cardVariants, chipVariants, cn, containerVariants, headingVariants, iconButtonVariants, inputVariants, inputWrapperVariants, labelVariants, linkVariants, logoVariants, progressFillVariants, progressTrackVariants, ratingVariants, sectionVariants, separatorVariants, skeletonVariants, spinnerVariants, statusPillVariants, tagVariants, textVariants, textareaVariants, toast, toggleVariants, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useMediaQuery, useMergedRefs, useTheme, useToastStore };

package/dist/index.js

@@ -12,14 +12,14 @@ import {
 import {
   Root
 } from "./chunk-ZXLACKEB.js";
-import {
-  Tag,
-  tagVariants
-} from "./chunk-IBCYG6HR.js";
 import {
   Text,
   textVariants
 } from "./chunk-UWWL5FPC.js";
+import {
+  Tag,
+  tagVariants
+} from "./chunk-IBCYG6HR.js";
 import {
   TextGradient
 } from "./chunk-HW3I7I3R.js";
@@ -29,8 +29,9 @@ import {
 } from "./chunk-W4IEXUD4.js";
 import {
   ThemeProvider,
+  ThemeScript,
   useTheme
-} from "./chunk-YAGVMERC.js";
+} from "./chunk-E3QPDCEV.js";
 import {
   Toast,
   Toaster,
@@ -71,7 +72,7 @@ import {
 } from "./chunk-ELC2NBGH.js";
 import {
   Tabs
-} from "./chunk-S344IRK4.js";
+} from "./chunk-EVCTOIRS.js";
 import {
   Rating,
   ratingVariants,
@@ -102,7 +103,7 @@ import {
 } from "./chunk-KWWV3CM3.js";
 import {
   Sidebar
-} from "./chunk-4NGB7XIM.js";
+} from "./chunk-CMYEVLQT.js";
 import {
   NavigationMenu
 } from "./chunk-7W2YDJ5W.js";
@@ -151,7 +152,7 @@ import {
 import {
   Logo,
   logoVariants
-} from "./chunk-AHZQQ7OT.js";
+} from "./chunk-MV7WMQI4.js";
 import {
   Menubar
 } from "./chunk-MY6XUJ5P.js";
@@ -239,11 +240,11 @@ import {
 } from "./chunk-TCTFQYLH.js";
 import {
   Dialog
-} from "./chunk-2MKB5FQI.js";
+} from "./chunk-RIDDJUPA.js";
 import {
   Drawer,
   Sheet
-} from "./chunk-4BTP4464.js";
+} from "./chunk-6MYVXJPJ.js";
 import {
   Card,
   cardVariants
@@ -269,7 +270,7 @@ import {
 import "./chunk-HY3JWSG4.js";
 import {
   CommandPalette
-} from "./chunk-V6GZZFTV.js";
+} from "./chunk-QRZV2FLW.js";
 import {
   AvatarGroup,
   avatarGroupVariants
@@ -308,7 +309,7 @@ import {
 } from "./chunk-24CZFBTG.js";
 import {
   AlertDialog
-} from "./chunk-L6GBZ2HB.js";
+} from "./chunk-ZLSUVZM2.js";
 import {
   AppShell
 } from "./chunk-KZW37FQZ.js";
@@ -462,6 +463,7 @@ export {
   TextGradient,
   Textarea,
   ThemeProvider,
+  ThemeScript,
   Toast,
   Toaster,
   Toggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -67,13 +67,12 @@
     "date-fns": "^4.1.0",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.5.4",
-    "vaul": "^1.1.2",
-    "@nexub/icons": "1.1.0"
+    "@nexub/icons": "1.3.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^1.1.0"
+    "@nexub/tokens": "^1.3.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "8.6.14",
@@ -85,6 +84,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.20",
+    "axe-core": "^4.11.3",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "react": "^19.0.0",
@@ -93,12 +93,13 @@
     "tailwindcss": "^3.4.0",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
+    "vaul": "1.1.2",
     "vitest": "^2.1.8",
-    "@nexub/themes": "1.1.0",
-    "@nexub/tokens": "1.1.0"
+    "@nexub/themes": "1.3.0",
+    "@nexub/tokens": "1.3.0"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/check-dts.mjs",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",