@nexub/react 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,8 +8,9 @@ import {
8
8
 
9
9
  // src/components/Drawer/Drawer.tsx
10
10
  import * as React2 from "react";
11
+ import { Slot } from "@radix-ui/react-slot";
11
12
 
12
- // ../../node_modules/.pnpm/vaul@1.1.2_@types+react-dom@19.2.3_@types+react@19.2.14__@types+react@19.2.14_react-dom@19.2._t4undv72xnojrj4azpqq7vnpvm/node_modules/vaul/dist/index.mjs
13
+ // ../../node_modules/.pnpm/vaul@1.1.2_@types+react-dom@19.2.3_@types+react@19.2.14__@types+react@19.2.14_react-dom_d9bfd38a4ee4f41de100e4d447baf4a5/node_modules/vaul/dist/index.mjs
13
14
  import * as DialogPrimitive from "@radix-ui/react-dialog";
14
15
  import * as React from "react";
15
16
  import React__default, { useLayoutEffect, useEffect, useMemo } from "react";
@@ -1501,19 +1502,64 @@ var Drawer = {
1501
1502
 
1502
1503
  // src/components/Drawer/Drawer.tsx
1503
1504
  import { jsx, jsxs } from "react/jsx-runtime";
1504
- var Root3 = Drawer.Root;
1505
+ var DrawerContext2 = React2.createContext({ scrollLock: "style", open: false, modal: true });
1506
+ function Root3({ scrollLock = "style", onOpenChange, ...props }) {
1507
+ const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(props.defaultOpen ?? false);
1508
+ const open = props.open ?? uncontrolledOpen;
1509
+ return /* @__PURE__ */ jsx(DrawerContext2.Provider, { value: { scrollLock, open, modal: props.modal ?? true }, children: /* @__PURE__ */ jsx(
1510
+ Drawer.Root,
1511
+ {
1512
+ ...props,
1513
+ onOpenChange: (next) => {
1514
+ setUncontrolledOpen(next);
1515
+ onOpenChange?.(next);
1516
+ }
1517
+ }
1518
+ ) });
1519
+ }
1520
+ Root3.displayName = "Drawer.Root";
1505
1521
  var Trigger2 = Drawer.Trigger;
1506
- var Portal3 = Drawer.Portal;
1507
1522
  var Close2 = Drawer.Close;
1508
- var Overlay3 = React2.forwardRef(
1509
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
1510
- Drawer.Overlay,
1511
- {
1512
- ref,
1513
- className: cn("fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)]", className),
1514
- ...props
1523
+ var Portal3 = Drawer.Portal;
1524
+ var scrollLocks = 0;
1525
+ function useClassScrollLock() {
1526
+ React2.useEffect(() => {
1527
+ const html = document.documentElement;
1528
+ if (scrollLocks++ === 0) {
1529
+ html.classList.toggle("nexub-scroll-gutter", window.innerWidth > html.clientWidth);
1530
+ html.classList.add("nexub-scroll-lock");
1515
1531
  }
1516
- )
1532
+ return () => {
1533
+ if (--scrollLocks === 0) html.classList.remove("nexub-scroll-lock", "nexub-scroll-gutter");
1534
+ };
1535
+ }, []);
1536
+ }
1537
+ var ClassLockOverlay = React2.forwardRef(
1538
+ ({ asChild, forceMount: _forceMount, open, ...props }, ref) => {
1539
+ useClassScrollLock();
1540
+ const Comp = asChild ? Slot : "div";
1541
+ return /* @__PURE__ */ jsx(
1542
+ Comp,
1543
+ {
1544
+ ref,
1545
+ "data-vaul-overlay": "",
1546
+ "data-vaul-snap-points": "false",
1547
+ "data-state": open ? "open" : "closed",
1548
+ ...props
1549
+ }
1550
+ );
1551
+ }
1552
+ );
1553
+ var Overlay3 = React2.forwardRef(
1554
+ ({ className, ...props }, ref) => {
1555
+ const { scrollLock, open, modal } = React2.useContext(DrawerContext2);
1556
+ const classes = cn("fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)]", className);
1557
+ if (scrollLock === "class") {
1558
+ if (!modal) return null;
1559
+ return /* @__PURE__ */ jsx(ClassLockOverlay, { ref, open, className: cn("pointer-events-auto", classes), ...props });
1560
+ }
1561
+ return /* @__PURE__ */ jsx(Drawer.Overlay, { ref, className: classes, ...props });
1562
+ }
1517
1563
  );
1518
1564
  Overlay3.displayName = "Drawer.Overlay";
1519
1565
  var Content3 = React2.forwardRef(({ className, children, side = "right", surface = "solid", ...props }, ref) => {
@@ -25,6 +25,26 @@ var Root = React.forwardRef(
25
25
  )
26
26
  );
27
27
  Root.displayName = "Sidebar.Root";
28
+ var Header = React.forwardRef(
29
+ ({ className, status, children, ...props }, ref) => /* @__PURE__ */ jsxs(
30
+ "div",
31
+ {
32
+ ref,
33
+ className: cn(
34
+ // Wraps instead of overlapping: the status drops to its own line when
35
+ // the logo needs the width, and a logo wider than the sidebar truncates.
36
+ "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",
37
+ className
38
+ ),
39
+ ...props,
40
+ children: [
41
+ /* @__PURE__ */ jsx("div", { className: "flex min-w-0 max-w-full items-center", children }),
42
+ status && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center group-data-[collapsed=true]/sidebar:sr-only", children: status })
43
+ ]
44
+ }
45
+ )
46
+ );
47
+ Header.displayName = "Sidebar.Header";
28
48
  var Group = React.forwardRef(
29
49
  ({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-0.5 p-2", className), ...props, children: [
30
50
  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(
81
101
  )
82
102
  );
83
103
  Footer.displayName = "Sidebar.Footer";
84
- var Sidebar = { Root, Group, Item, Separator, Footer };
104
+ var Sidebar = { Root, Header, Group, Item, Separator, Footer };
85
105
 
86
106
  export {
87
107
  Sidebar
@@ -74,8 +74,24 @@ function useTheme() {
74
74
  }
75
75
  return ctx;
76
76
  }
77
+ var jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
78
+ function themeScriptSource(storageKey, productStorageKey) {
79
+ const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(b&&b!=='base')d.setAttribute('data-product',b);` : "";
80
+ return `try{var d=document.documentElement,t=localStorage.getItem(${jsString(storageKey)});if(t==='light'||t==='dark')d.setAttribute('data-theme',t);${product}}catch(e){}`;
81
+ }
82
+ function ThemeScript({ storageKey = "nexub-theme", productStorageKey, nonce }) {
83
+ return /* @__PURE__ */ jsx(
84
+ "script",
85
+ {
86
+ nonce,
87
+ suppressHydrationWarning: true,
88
+ dangerouslySetInnerHTML: { __html: themeScriptSource(storageKey, productStorageKey) }
89
+ }
90
+ );
91
+ }
77
92
 
78
93
  export {
79
94
  ThemeProvider,
80
- useTheme
95
+ useTheme,
96
+ ThemeScript
81
97
  };
@@ -8,7 +8,7 @@ import * as React from "react";
8
8
  import { NexubMark } from "@nexub/icons";
9
9
  import { cva } from "class-variance-authority";
10
10
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
11
- var logoVariants = cva("inline-flex items-center gap-2", {
11
+ var logoVariants = cva("inline-flex min-w-0 max-w-full items-center gap-2", {
12
12
  variants: {
13
13
  size: {
14
14
  sm: "h-6",
@@ -70,7 +70,7 @@ var Logo = React.forwardRef(
70
70
  {
71
71
  className: cn(
72
72
  wordmarkSizeMap[resolvedSize],
73
- "font-semibold tracking-tight leading-none"
73
+ "shrink-0 font-semibold tracking-tight leading-none"
74
74
  ),
75
75
  children: "nexub"
76
76
  }
@@ -82,7 +82,8 @@ var Logo = React.forwardRef(
82
82
  {
83
83
  className: cn(
84
84
  wordmarkSizeMap[resolvedSize],
85
- "font-medium tracking-tight leading-none whitespace-nowrap",
85
+ // leading-normal so the clip box doesn't cut descenders.
86
+ "min-w-0 truncate font-medium tracking-tight leading-normal",
86
87
  resolvedTone === "inverse" ? "opacity-70" : "text-[var(--color-text-muted)]"
87
88
  ),
88
89
  children: product
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Drawer,
4
4
  Sheet
5
- } from "../../chunk-WCJNZ5ME.js";
5
+ } from "../../chunk-6MYVXJPJ.js";
6
6
  import "../../chunk-ROZVVWPV.js";
7
7
  import "../../chunk-AT6RPKU3.js";
8
8
  export {
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Logo,
4
4
  logoVariants
5
- } from "../../chunk-DGJE5MX5.js";
5
+ } from "../../chunk-MV7WMQI4.js";
6
6
  import "../../chunk-AT6RPKU3.js";
7
7
  export {
8
8
  Logo,
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import {
3
3
  Sidebar
4
- } from "../../chunk-4NGB7XIM.js";
4
+ } from "../../chunk-CMYEVLQT.js";
5
5
  import "../../chunk-AT6RPKU3.js";
6
6
  export {
7
7
  Sidebar
@@ -1,10 +1,12 @@
1
1
  'use client';
2
2
  import {
3
3
  ThemeProvider,
4
+ ThemeScript,
4
5
  useTheme
5
- } from "../../chunk-YAGVMERC.js";
6
+ } from "../../chunk-E3QPDCEV.js";
6
7
  import "../../chunk-NHUQLIHL.js";
7
8
  export {
8
9
  ThemeProvider,
10
+ ThemeScript,
9
11
  useTheme
10
12
  };
package/dist/index.d.ts CHANGED
@@ -5,7 +5,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
5
5
  import { VariantProps } from 'class-variance-authority';
6
6
  import * as react_jsx_runtime from 'react/jsx-runtime';
7
7
  export { Root as VisuallyHidden, VisuallyHiddenProps } from '@radix-ui/react-visually-hidden';
8
- import * as RadixDialog from '@radix-ui/react-dialog';
8
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
9
9
  import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
10
10
  import * as RadixPopover from '@radix-ui/react-popover';
11
11
  import * as RadixTooltip from '@radix-ui/react-tooltip';
@@ -13,7 +13,6 @@ import * as RadixHoverCard from '@radix-ui/react-hover-card';
13
13
  import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
14
14
  import * as RadixContextMenu from '@radix-ui/react-context-menu';
15
15
  import * as RadixNav from '@radix-ui/react-navigation-menu';
16
- import * as vaul from 'vaul';
17
16
  import * as RadixSelect from '@radix-ui/react-select';
18
17
  import * as RadixSwitch from '@radix-ui/react-switch';
19
18
  import * as RadixCheckbox from '@radix-ui/react-checkbox';
@@ -541,19 +540,19 @@ declare const KeyboardShortcut: React.ForwardRefExoticComponent<KeyboardShortcut
541
540
 
542
541
  type SurfaceValue = 'solid' | 'glass';
543
542
 
544
- interface ContentProps extends RadixDialog.DialogContentProps {
543
+ interface ContentProps extends DialogPrimitive.DialogContentProps {
545
544
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
546
545
  surface?: SurfaceValue;
547
546
  }
548
547
  declare const Dialog: {
549
- Root: React.FC<RadixDialog.DialogProps>;
550
- Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
551
- Portal: React.FC<RadixDialog.DialogPortalProps>;
552
- Overlay: React.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
548
+ Root: React.FC<DialogPrimitive.DialogProps>;
549
+ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
550
+ Portal: React.FC<DialogPrimitive.DialogPortalProps>;
551
+ Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
553
552
  Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
554
- Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
555
- Title: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
556
- Description: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
553
+ Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
554
+ Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
555
+ Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
557
556
  Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
558
557
  Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
559
558
  };
@@ -646,31 +645,91 @@ declare const NavigationMenu: {
646
645
  Indicator: React.ForwardRefExoticComponent<RadixNav.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
647
646
  };
648
647
 
648
+ interface DrawerRootProps {
649
+ children?: React.ReactNode;
650
+ open?: boolean;
651
+ /** Opened by default, skips the initial enter animation. Still reacts to `open` changes. */
652
+ defaultOpen?: boolean;
653
+ onOpenChange?: (open: boolean) => void;
654
+ /** Gets triggered after the open or close animation ends. */
655
+ onAnimationEnd?: (open: boolean) => void;
656
+ onClose?: () => void;
657
+ /** Edge the drawer slides in from. Match it to `Content`'s `side`. @default 'bottom' */
658
+ direction?: 'top' | 'bottom' | 'left' | 'right';
659
+ /** When `false`, the page behind stays interactive and nothing is locked or trapped. @default true */
660
+ modal?: boolean;
661
+ /**
662
+ * How page scroll is locked while the drawer is open (modal only).
663
+ * - `'style'` (default): Radix's scroll lock. It injects a `<style>` tag, which a strict
664
+ * `style-src` CSP blocks.
665
+ * - `'class'`: adds the `nexub-scroll-lock` class from `@nexub/themes/base` to `<html>`.
666
+ * Injects nothing, so it works under `style-src 'self'`. Focus trap, Escape and
667
+ * outside-click dismissal are unchanged.
668
+ * @default 'style'
669
+ */
670
+ scrollLock?: 'style' | 'class';
671
+ /** When `false`, dragging, outside clicks and Escape don't close the drawer. @default true */
672
+ dismissible?: boolean;
673
+ /** Only the `Drawer.Handle` starts a drag. @default false */
674
+ handleOnly?: boolean;
675
+ /** Fraction (0–1) of the drawer that must be dragged away to close it. @default 0.25 */
676
+ closeThreshold?: number;
677
+ /** Snap points, as fractions of the screen (e.g. `[0.4, 1]`) or px strings. */
678
+ snapPoints?: (number | string)[];
679
+ activeSnapPoint?: number | string | null;
680
+ setActiveSnapPoint?: (snapPoint: number | string | null) => void;
681
+ /** Index of the snap point from which the overlay fades. Defaults to the last one. */
682
+ fadeFromIndex?: number;
683
+ /** Don't skip snap points on fast swipes. @default false */
684
+ snapToSequentialPoint?: boolean;
685
+ /** ms during which the drawer can't be dragged after its content scrolls. @default 500 */
686
+ scrollLockTimeout?: number;
687
+ onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
688
+ onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
689
+ shouldScaleBackground?: boolean;
690
+ /** @default true */
691
+ setBackgroundColorOnScale?: boolean;
692
+ /** When `true`, vaul sets no styles on `body`. */
693
+ noBodyStyles?: boolean;
694
+ /** Only resize (don't move) the drawer when the on-screen keyboard opens. */
695
+ fixed?: boolean;
696
+ nested?: boolean;
697
+ disablePreventScroll?: boolean;
698
+ preventScrollRestoration?: boolean;
699
+ /** Reposition inputs instead of scrolling them into view when the keyboard opens. */
700
+ repositionInputs?: boolean;
701
+ container?: HTMLElement | null;
702
+ autoFocus?: boolean;
703
+ }
704
+ declare function Root({ scrollLock, onOpenChange, ...props }: DrawerRootProps): react_jsx_runtime.JSX.Element;
705
+ declare namespace Root {
706
+ var displayName: string;
707
+ }
649
708
  declare const Drawer: {
650
- Root: typeof vaul.Root;
651
- Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
652
- Portal: typeof vaul.Portal;
653
- Overlay: React.ForwardRefExoticComponent<Omit<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
654
- Content: React.ForwardRefExoticComponent<Omit<Omit<RadixDialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & {
709
+ Root: typeof Root;
710
+ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
711
+ Portal: (props: DialogPrimitive.DialogPortalProps) => React.JSX.Element;
712
+ Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
713
+ Content: React.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & {
655
714
  side?: "left" | "right" | "top" | "bottom";
656
715
  surface?: SurfaceValue;
657
- }, "ref"> & React.RefAttributes<HTMLDivElement>>;
658
- Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
716
+ } & React.RefAttributes<HTMLDivElement>>;
717
+ Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
659
718
  Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
660
719
  Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
661
720
  Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
662
721
  Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
663
722
  };
664
723
  declare const Sheet: {
665
- Root: typeof vaul.Root;
666
- Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
667
- Portal: typeof vaul.Portal;
668
- Overlay: React.ForwardRefExoticComponent<Omit<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
669
- Content: React.ForwardRefExoticComponent<Omit<Omit<RadixDialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & {
724
+ Root: typeof Root;
725
+ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
726
+ Portal: (props: DialogPrimitive.DialogPortalProps) => React.JSX.Element;
727
+ Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
728
+ Content: React.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & {
670
729
  side?: "left" | "right" | "top" | "bottom";
671
730
  surface?: SurfaceValue;
672
- }, "ref"> & React.RefAttributes<HTMLDivElement>>;
673
- Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
731
+ } & React.RefAttributes<HTMLDivElement>>;
732
+ Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
674
733
  Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
675
734
  Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
676
735
  Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -927,6 +986,10 @@ declare const TopNav: {
927
986
  interface SidebarRootProps extends React.HTMLAttributes<HTMLElement> {
928
987
  collapsed?: boolean;
929
988
  }
989
+ interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
990
+ /** Trailing element next to the logo, e.g. a "Live" `<Badge>`. Moves under the logo when they don't fit. */
991
+ status?: React.ReactNode;
992
+ }
930
993
  interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
931
994
  label?: string;
932
995
  }
@@ -938,6 +1001,7 @@ interface SidebarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
938
1001
  }
939
1002
  declare const Sidebar: {
940
1003
  Root: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLElement>>;
1004
+ Header: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
941
1005
  Group: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
942
1006
  Item: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
943
1007
  Separator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>>;
@@ -991,7 +1055,7 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
991
1055
  declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
992
1056
 
993
1057
  declare const CommandPalette: {
994
- Root: React.ForwardRefExoticComponent<RadixDialog.DialogProps & {
1058
+ Root: React.ForwardRefExoticComponent<DialogPrimitive.DialogProps & {
995
1059
  className?: string;
996
1060
  } & React.RefAttributes<HTMLDivElement>>;
997
1061
  Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
@@ -1157,6 +1221,19 @@ interface ThemeProviderProps {
1157
1221
  }
1158
1222
  declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
1159
1223
  declare function useTheme(): ThemeContextValue;
1224
+ interface ThemeScriptProps {
1225
+ /** Must match ThemeProvider's `storageKey`. Defaults to 'nexub-theme'. */
1226
+ storageKey?: string;
1227
+ /** If set, a stored product brand (e.g. 'bookub') is applied as `data-product`. */
1228
+ productStorageKey?: string;
1229
+ /** CSP nonce for pages whose script-src disallows inline scripts. */
1230
+ nonce?: string;
1231
+ }
1232
+ /**
1233
+ * Applies the stored theme before first paint, so there is no light/dark flash.
1234
+ * Render it in `<head>` (or at the top of `<body>`) on server-rendered pages.
1235
+ */
1236
+ declare function ThemeScript({ storageKey, productStorageKey, nonce }: ThemeScriptProps): react_jsx_runtime.JSX.Element;
1160
1237
 
1161
1238
  type MotionDuration = 'instant' | 'fast' | 'normal' | 'slow' | 'slower';
1162
1239
  type MotionEasing = 'linear' | 'in' | 'out' | 'in-out' | 'out-expo' | 'spring';
@@ -1264,4 +1341,4 @@ interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttri
1264
1341
  */
1265
1342
  declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
1266
1343
 
1267
- 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 };
1344
+ 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 CHANGED
@@ -1,46 +1,47 @@
1
1
  'use client';
2
+ import {
3
+ Toolbar
4
+ } from "./chunk-OZPPL76D.js";
2
5
  import {
3
6
  Provider,
4
7
  Tooltip
5
8
  } from "./chunk-46CFSBEO.js";
6
- import {
7
- Toolbar
8
- } from "./chunk-OZPPL76D.js";
9
9
  import {
10
10
  TopNav
11
11
  } from "./chunk-BTZW34TX.js";
12
12
  import {
13
13
  Root
14
14
  } from "./chunk-ZXLACKEB.js";
15
- import {
16
- Tag,
17
- tagVariants
18
- } from "./chunk-IBCYG6HR.js";
19
15
  import {
20
16
  Text,
21
17
  textVariants
22
18
  } from "./chunk-UWWL5FPC.js";
19
+ import {
20
+ Tag,
21
+ tagVariants
22
+ } from "./chunk-IBCYG6HR.js";
23
23
  import {
24
24
  TextGradient
25
25
  } from "./chunk-HW3I7I3R.js";
26
- import {
27
- ThemeProvider,
28
- useTheme
29
- } from "./chunk-YAGVMERC.js";
30
26
  import {
31
27
  Textarea,
32
28
  textareaVariants
33
29
  } from "./chunk-W4IEXUD4.js";
30
+ import {
31
+ ThemeProvider,
32
+ ThemeScript,
33
+ useTheme
34
+ } from "./chunk-E3QPDCEV.js";
34
35
  import {
35
36
  Toast,
36
37
  Toaster,
37
38
  toast,
38
39
  useToastStore
39
40
  } from "./chunk-IHW2L532.js";
41
+ import "./chunk-YJU4ZRQZ.js";
40
42
  import {
41
43
  ToggleGroup
42
44
  } from "./chunk-K7CUCLLI.js";
43
- import "./chunk-YJU4ZRQZ.js";
44
45
  import {
45
46
  Toggle,
46
47
  toggleVariants
@@ -102,13 +103,10 @@ import {
102
103
  } from "./chunk-KWWV3CM3.js";
103
104
  import {
104
105
  Sidebar
105
- } from "./chunk-4NGB7XIM.js";
106
+ } from "./chunk-CMYEVLQT.js";
106
107
  import {
107
- Collapse,
108
- Fade,
109
- Scale,
110
- Slide
111
- } from "./chunk-FS4XKWFA.js";
108
+ NavigationMenu
109
+ } from "./chunk-7W2YDJ5W.js";
112
110
  import {
113
111
  NumberInput
114
112
  } from "./chunk-52KTX5A7.js";
@@ -121,14 +119,14 @@ import {
121
119
  import {
122
120
  PasswordInput
123
121
  } from "./chunk-XNDCVVNE.js";
122
+ import {
123
+ Popover
124
+ } from "./chunk-UALYS4XI.js";
124
125
  import {
125
126
  Progress,
126
127
  progressFillVariants,
127
128
  progressTrackVariants
128
129
  } from "./chunk-BYF223HT.js";
129
- import {
130
- Popover
131
- } from "./chunk-UALYS4XI.js";
132
130
  import {
133
131
  RadioGroup
134
132
  } from "./chunk-WPPNDU2E.js";
@@ -140,13 +138,13 @@ import {
140
138
  inputWrapperVariants
141
139
  } from "./chunk-CVBAWKNG.js";
142
140
  import "./chunk-KLTQJZOX.js";
143
- import "./chunk-EV43I5J6.js";
144
141
  import {
145
142
  KeyboardShortcut
146
143
  } from "./chunk-I5Z3A7N3.js";
147
144
  import {
148
145
  Kbd
149
146
  } from "./chunk-PER3O4FD.js";
147
+ import "./chunk-EV43I5J6.js";
150
148
  import {
151
149
  Link,
152
150
  linkVariants
@@ -154,13 +152,16 @@ import {
154
152
  import {
155
153
  Logo,
156
154
  logoVariants
157
- } from "./chunk-DGJE5MX5.js";
155
+ } from "./chunk-MV7WMQI4.js";
158
156
  import {
159
157
  Menubar
160
158
  } from "./chunk-MY6XUJ5P.js";
161
159
  import {
162
- NavigationMenu
163
- } from "./chunk-7W2YDJ5W.js";
160
+ Collapse,
161
+ Fade,
162
+ Scale,
163
+ Slide
164
+ } from "./chunk-FS4XKWFA.js";
164
165
  import "./chunk-ADO2DB6Q.js";
165
166
  import {
166
167
  FormField
@@ -243,7 +244,7 @@ import {
243
244
  import {
244
245
  Drawer,
245
246
  Sheet
246
- } from "./chunk-WCJNZ5ME.js";
247
+ } from "./chunk-6MYVXJPJ.js";
247
248
  import {
248
249
  Card,
249
250
  cardVariants
@@ -253,13 +254,13 @@ import {
253
254
  CheckList,
254
255
  CheckListItem
255
256
  } from "./chunk-PANDAMD2.js";
257
+ import {
258
+ Checkbox
259
+ } from "./chunk-VPZCQFVY.js";
256
260
  import {
257
261
  Chip,
258
262
  chipVariants
259
263
  } from "./chunk-DAXDAFNG.js";
260
- import {
261
- Checkbox
262
- } from "./chunk-VPZCQFVY.js";
263
264
  import {
264
265
  Code
265
266
  } from "./chunk-DEH2Z27F.js";
@@ -462,6 +463,7 @@ export {
462
463
  TextGradient,
463
464
  Textarea,
464
465
  ThemeProvider,
466
+ ThemeScript,
465
467
  Toast,
466
468
  Toaster,
467
469
  Toggle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexub/react",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -67,12 +67,12 @@
67
67
  "date-fns": "^4.1.0",
68
68
  "react-day-picker": "^9.14.0",
69
69
  "tailwind-merge": "^2.5.4",
70
- "@nexub/icons": "1.2.0"
70
+ "@nexub/icons": "1.3.0"
71
71
  },
72
72
  "peerDependencies": {
73
73
  "react": ">=18 <20",
74
74
  "react-dom": ">=18 <20",
75
- "@nexub/tokens": "^1.2.0"
75
+ "@nexub/tokens": "^1.3.0"
76
76
  },
77
77
  "devDependencies": {
78
78
  "@storybook/addon-essentials": "8.6.14",
@@ -84,6 +84,7 @@
84
84
  "@types/react": "^19.0.0",
85
85
  "@types/react-dom": "^19.0.0",
86
86
  "autoprefixer": "^10.4.20",
87
+ "axe-core": "^4.11.3",
87
88
  "jsdom": "^25.0.1",
88
89
  "postcss": "^8.4.49",
89
90
  "react": "^19.0.0",
@@ -94,11 +95,11 @@
94
95
  "typescript": "^5.6.3",
95
96
  "vaul": "1.1.2",
96
97
  "vitest": "^2.1.8",
97
- "@nexub/themes": "1.2.0",
98
- "@nexub/tokens": "1.2.0"
98
+ "@nexub/themes": "1.3.0",
99
+ "@nexub/tokens": "1.3.0"
99
100
  },
100
101
  "scripts": {
101
- "build": "tsup",
102
+ "build": "tsup && node scripts/check-dts.mjs",
102
103
  "dev": "tsup --watch",
103
104
  "clean": "rm -rf dist",
104
105
  "typecheck": "tsc --noEmit",