@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.
- package/dist/{chunk-WCJNZ5ME.js → chunk-6MYVXJPJ.js} +57 -11
- package/dist/{chunk-4NGB7XIM.js → chunk-CMYEVLQT.js} +21 -1
- package/dist/{chunk-YAGVMERC.js → chunk-E3QPDCEV.js} +17 -1
- package/dist/{chunk-DGJE5MX5.js → chunk-MV7WMQI4.js} +4 -3
- package/dist/components/Drawer/index.js +1 -1
- package/dist/components/Logo/index.js +1 -1
- package/dist/components/Sidebar/index.js +1 -1
- package/dist/components/ThemeProvider/index.js +3 -1
- package/dist/index.d.ts +103 -26
- package/dist/index.js +31 -29
- package/package.json +7 -6
|
@@ -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-
|
|
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
|
|
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
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
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
|
-
|
|
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
|
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
|
|
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
|
|
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<
|
|
550
|
-
Trigger: React.ForwardRefExoticComponent<
|
|
551
|
-
Portal: React.FC<
|
|
552
|
-
Overlay: React.ForwardRefExoticComponent<
|
|
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<
|
|
555
|
-
Title: React.ForwardRefExoticComponent<
|
|
556
|
-
Description: React.ForwardRefExoticComponent<
|
|
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
|
|
651
|
-
Trigger: React.ForwardRefExoticComponent<
|
|
652
|
-
Portal:
|
|
653
|
-
Overlay: React.ForwardRefExoticComponent<
|
|
654
|
-
Content: React.ForwardRefExoticComponent<
|
|
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
|
-
}
|
|
658
|
-
Close: React.ForwardRefExoticComponent<
|
|
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
|
|
666
|
-
Trigger: React.ForwardRefExoticComponent<
|
|
667
|
-
Portal:
|
|
668
|
-
Overlay: React.ForwardRefExoticComponent<
|
|
669
|
-
Content: React.ForwardRefExoticComponent<
|
|
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
|
-
}
|
|
673
|
-
Close: React.ForwardRefExoticComponent<
|
|
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<
|
|
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-
|
|
106
|
+
} from "./chunk-CMYEVLQT.js";
|
|
106
107
|
import {
|
|
107
|
-
|
|
108
|
-
|
|
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-
|
|
155
|
+
} from "./chunk-MV7WMQI4.js";
|
|
158
156
|
import {
|
|
159
157
|
Menubar
|
|
160
158
|
} from "./chunk-MY6XUJ5P.js";
|
|
161
159
|
import {
|
|
162
|
-
|
|
163
|
-
|
|
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-
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
98
|
-
"@nexub/tokens": "1.
|
|
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",
|