@nexub/react 0.0.2 → 1.0.0

package/dist/index.cjs

@@ -143,6 +143,17 @@ function useMergedRefs(...refs) {
     for (const ref of refsRef.current) setRef(ref, node);
   }, []);
 }
+var toneClasses = {
+  neutral: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-muted)]",
+  info: "bg-[var(--color-info-500)] text-white hover:bg-[var(--color-info-600)]",
+  success: "bg-[var(--color-success-500)] text-white hover:bg-[var(--color-success-600)]",
+  warning: "bg-[var(--color-warning-500)] text-white hover:bg-[var(--color-warning-600)]",
+  danger: "bg-[var(--color-danger-500)] text-white hover:bg-[var(--color-danger-600)]",
+  leap: "bg-[var(--color-leap-500)] text-white hover:bg-[var(--color-leap-600)]",
+  bookub: "bg-[var(--color-bookub-500)] text-white hover:bg-[var(--color-bookub-600)]",
+  payub: "bg-[var(--color-payub-500)] text-white hover:bg-[var(--color-payub-600)]",
+  founderub: "bg-[var(--color-founderub-500)] text-white hover:bg-[var(--color-founderub-600)]"
+};
 var buttonVariants = classVarianceAuthority.cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors",
@@ -195,7 +206,11 @@ var Button = React87__namespace.forwardRef(
     ...props
   }, ref) => {
     const sharedProps = {
-      className: cn(buttonVariants({ variant, size, fullWidth }), className),
+      className: cn(
+        buttonVariants({ variant, size, fullWidth }),
+        tone ? toneClasses[tone] : "",
+        className
+      ),
       "data-tone": tone,
       ...props
     };
@@ -707,12 +722,14 @@ var labelVariants = classVarianceAuthority.cva(
   }
 );
 var Label = React87__namespace.forwardRef(
-  ({ className, size, required, disabled, tone, children, ...props }, ref) => {
+  ({ className, size, required, disabled, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
         ref,
         "data-tone": tone,
+        style: { ...toneStyle, ...style },
         className: cn(
           labelVariants({ size, disabled }),
           "text-[var(--color-text-primary)]",
@@ -736,12 +753,14 @@ var Label = React87__namespace.forwardRef(
 );
 Label.displayName = "Label";
 var HelperText = React87__namespace.forwardRef(
-  ({ className, tone, children, ...props }, ref) => {
+  ({ className, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
         ref,
         "data-tone": tone,
+        style: { ...toneStyle, ...style },
         className: cn(
           "text-sm text-[var(--color-text-muted)] leading-snug",
           className
@@ -887,7 +906,7 @@ var badgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var toneClasses = {
+var toneClasses2 = {
   neutral: {
     solid: "bg-[var(--color-neutral-500)] text-white",
     soft: "bg-[var(--color-neutral-500)]/10 text-[var(--color-neutral-700)]",
@@ -937,7 +956,7 @@ var toneClasses = {
 var Badge = React87__namespace.forwardRef(
   ({ className, size, variant = "solid", tone = "neutral", leadingIcon, children, ...props }, ref) => {
     const resolvedVariant = variant ?? "solid";
-    const toneStyle = toneClasses[tone][resolvedVariant];
+    const toneStyle = toneClasses2[tone][resolvedVariant];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -1406,6 +1425,9 @@ var AvatarGroup = React87__namespace.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
+
+// src/utils/glass.ts
+var glassSurfaceClass = "bg-[var(--glass-bg)] border-[var(--glass-border)] backdrop-blur-[var(--glass-blur)] [box-shadow:inset_0_1px_0_0_var(--glass-highlight),var(--glass-shadow)]";
 var cardVariants = classVarianceAuthority.cva(
   "rounded-lg bg-[var(--color-bg-default)] border border-[var(--color-border-default)] text-[var(--color-text-primary)]",
   {
@@ -1414,10 +1436,19 @@ var cardVariants = classVarianceAuthority.cva(
         flat: "",
         surface: "shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1))]",
         interactive: "cursor-pointer shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1))] transition-all duration-200 hover:shadow-[var(--shadow-card-hover,0_4px_12px_0_rgb(0_0_0/0.15))] hover:-translate-y-0.5 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)]"
+      },
+      // Material. 'glass' needs data-material="glass" on the element (set in the
+      // component) for the --glass-* vars to resolve. Single box-shadow carries
+      // both the inset specular highlight and the drop shadow so neither clobbers
+      // the other. Listed after `variant` so tailwind-merge lets it win on bg/border.
+      surface: {
+        solid: "",
+        glass: glassSurfaceClass
       }
     },
     defaultVariants: {
-      variant: "flat"
+      variant: "flat",
+      surface: "solid"
     }
   }
 );
@@ -1433,15 +1464,16 @@ var toneBorderMap = {
   founderub: "border-l-4 border-l-[var(--color-founderub-500)]"
 };
 var Card = React87__namespace.forwardRef(
-  ({ className, variant = "flat", tone, asChild = false, children, ...props }, ref) => {
+  ({ className, variant = "flat", surface = "solid", tone, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "div";
     const toneStyle = tone ? toneBorderMap[tone] : "";
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
         ref,
-        className: cn(cardVariants({ variant }), toneStyle, className),
+        className: cn(cardVariants({ variant, surface }), toneStyle, className),
         "data-tone": tone,
+        "data-material": surface === "glass" ? "glass" : void 0,
         ...props,
         children
       }
@@ -2660,7 +2692,7 @@ var Overlay2 = React87__namespace.forwardRef(
 );
 Overlay2.displayName = "Dialog.Overlay";
 var Content2 = React87__namespace.forwardRef(
-  function DialogContent({ className, size = "md", children, ...props }, ref) {
+  function DialogContent({ className, size = "md", surface = "solid", children, ...props }, ref) {
     const sizeMap2 = {
       sm: "max-w-sm",
       md: "max-w-lg",
@@ -2673,17 +2705,19 @@ var Content2 = React87__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-full -translate-x-1/2 -translate-y-1/2",
+          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
           "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-xl",
-          "p-6 focus:outline-none",
+          "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
           sizeMap2[size],
+          surface === "glass" && glassSurfaceClass,
           className
         ),
+        "data-material": surface === "glass" ? "glass" : void 0,
         ...props,
         children
       }
@@ -2725,7 +2759,7 @@ var Header = React87__namespace.forwardRef(
 Header.displayName = "Dialog.Header";
 var Footer = React87__namespace.forwardRef(
   function DialogFooter({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mt-6 flex justify-end gap-2", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
   }
 );
 Footer.displayName = "Dialog.Footer";
@@ -2878,7 +2912,7 @@ var Trigger6 = RadixPopover__namespace.Trigger;
 var Portal6 = RadixPopover__namespace.Portal;
 var Close4 = RadixPopover__namespace.Close;
 var Content6 = React87__namespace.forwardRef(
-  function PopoverContent({ className, sideOffset = 4, ...props }, ref) {
+  function PopoverContent({ className, sideOffset = 4, surface = "solid", ...props }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixPopover__namespace.Content,
       {
@@ -2893,8 +2927,10 @@ var Content6 = React87__namespace.forwardRef(
           "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          surface === "glass" && glassSurfaceClass,
           className
         ),
+        "data-material": surface === "glass" ? "glass" : void 0,
         ...props
       }
     );
@@ -3639,7 +3675,7 @@ var Trigger19 = vaul.Drawer.Trigger;
 var Portal14 = vaul.Drawer.Portal;
 var Close5 = vaul.Drawer.Close;
 var Overlay5 = vaul.Drawer.Overlay;
-var Content19 = React87__namespace.forwardRef(({ className, children, side = "right", ...props }, ref) => {
+var Content19 = React87__namespace.forwardRef(({ className, children, side = "right", surface = "solid", ...props }, ref) => {
   const sideMap = {
     right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
     left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
@@ -3653,8 +3689,10 @@ var Content19 = React87__namespace.forwardRef(({ className, children, side = "ri
       className: cn(
         "fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-bg-default)] shadow-xl focus:outline-none",
         sideMap[side],
+        surface === "glass" && glassSurfaceClass,
         className
       ),
+      "data-material": surface === "glass" ? "glass" : void 0,
       ...props,
       children: [
         side === "bottom" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-4 h-2 w-20 rounded-full bg-[var(--color-border-default)]" }),
@@ -4169,7 +4207,7 @@ var List5 = React87__namespace.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-9 items-center justify-start rounded-lg bg-[var(--color-bg-subtle)] p-1 text-[var(--color-text-muted)] gap-0.5",
+        "flex h-9 w-full items-center justify-start overflow-x-auto rounded-lg bg-[var(--color-bg-subtle)] p-1 text-[var(--color-text-muted)] gap-0.5",
         className
       ),
       ...props
@@ -4428,7 +4466,7 @@ var Action4 = React87__namespace.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-8 items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
+        "inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
         className
       ),
       ...props
@@ -4516,14 +4554,16 @@ function Toaster() {
   ] });
 }
 var Root47 = React87__namespace.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, children, surface = "solid", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
       ref,
       className: cn(
         "sticky top-0 z-[var(--z-sticky,100)] flex h-[var(--size-nav-header,64px)] items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-4",
+        surface === "glass" && glassSurfaceClass,
         className
       ),
+      "data-material": surface === "glass" ? "glass" : void 0,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center gap-4", children })
     }
@@ -4787,7 +4827,7 @@ var Pagination = React87__namespace.forwardRef(
               onClick: () => onPageChange(page - 1),
               disabled: page <= 1,
               "aria-label": "Go to previous page",
-              className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeft, { size: "sm", "aria-hidden": "true" })
             }
           ),
@@ -4795,7 +4835,7 @@ var Pagination = React87__namespace.forwardRef(
             (p, i) => p === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: "flex h-9 w-9 items-center justify-center text-[var(--color-text-muted)]",
+                className: "flex h-11 w-11 items-center justify-center text-[var(--color-text-muted)]",
                 children: /* @__PURE__ */ jsxRuntime.jsx(icons.MoreHorizontal, { size: "sm", "aria-hidden": "true" })
               },
               `ellipsis-${i}`
@@ -4806,7 +4846,7 @@ var Pagination = React87__namespace.forwardRef(
                 "aria-label": `Go to page ${p}`,
                 "aria-current": p === page ? "page" : void 0,
                 className: cn(
-                  "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors",
+                  "inline-flex h-11 w-11 items-center justify-center rounded-md text-sm font-medium transition-colors",
                   p === page ? "bg-[var(--color-brand-primary-500)] text-white" : "border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]"
                 ),
                 children: p
@@ -4820,7 +4860,7 @@ var Pagination = React87__namespace.forwardRef(
               onClick: () => onPageChange(page + 1),
               disabled: page >= totalPages,
               "aria-label": "Go to next page",
-              className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, { size: "sm", "aria-hidden": "true" })
             }
           )
@@ -5135,7 +5175,7 @@ function DataTable({
         }
       ) }) })
     ] }),
-    pagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-[var(--color-text-muted)]", children: [
+    pagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
@@ -5148,7 +5188,7 @@ function DataTable({
           {
             onClick: () => table.previousPage(),
             disabled: !table.getCanPreviousPage(),
-            className: "rounded border border-[var(--color-border-default)] px-3 py-1 disabled:opacity-50",
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
             children: "Previous"
           }
         ),
@@ -5157,7 +5197,7 @@ function DataTable({
           {
             onClick: () => table.nextPage(),
             disabled: !table.getCanNextPage(),
-            className: "rounded border border-[var(--color-border-default)] px-3 py-1 disabled:opacity-50",
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
             children: "Next"
           }
         )

package/dist/index.d.cts

@@ -282,9 +282,11 @@ declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & Re
 
 declare const cardVariants: (props?: ({
     variant?: "flat" | "surface" | "interactive" | null | undefined;
+    surface?: "solid" | "glass" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     tone?: ToneValue;
+    surface?: 'solid' | 'glass';
     asChild?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
@@ -530,8 +532,11 @@ interface KeyboardShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const KeyboardShortcut: React.ForwardRefExoticComponent<KeyboardShortcutProps & React.RefAttributes<HTMLSpanElement>>;
 
+type SurfaceValue = 'solid' | 'glass';
+
 interface ContentProps extends RadixDialog.DialogContentProps {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    surface?: SurfaceValue;
 }
 declare const Dialog: {
     Root: React.FC<RadixDialog.DialogProps>;
@@ -564,7 +569,9 @@ declare const Popover: {
     Root: React.FC<RadixPopover.PopoverProps>;
     Trigger: React.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Portal: React.FC<RadixPopover.PopoverPortalProps>;
-    Content: React.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & {
+        surface?: SurfaceValue;
+    } & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<RadixPopover.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
     Close: React.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
 };
@@ -639,6 +646,7 @@ declare const Drawer: {
     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> & {
         side?: "left" | "right" | "top" | "bottom";
+        surface?: SurfaceValue;
     }, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
@@ -653,6 +661,7 @@ declare const Sheet: {
     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> & {
         side?: "left" | "right" | "top" | "bottom";
+        surface?: SurfaceValue;
     }, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
@@ -889,7 +898,9 @@ interface TopNavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     active?: boolean;
 }
 declare const TopNav: {
-    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        surface?: SurfaceValue;
+    } & React.RefAttributes<HTMLElement>>;
     Logo: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Menu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
     Item: React.ForwardRefExoticComponent<TopNavItemProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.d.ts

@@ -282,9 +282,11 @@ declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & Re
 
 declare const cardVariants: (props?: ({
     variant?: "flat" | "surface" | "interactive" | null | undefined;
+    surface?: "solid" | "glass" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     tone?: ToneValue;
+    surface?: 'solid' | 'glass';
     asChild?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
@@ -530,8 +532,11 @@ interface KeyboardShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const KeyboardShortcut: React.ForwardRefExoticComponent<KeyboardShortcutProps & React.RefAttributes<HTMLSpanElement>>;
 
+type SurfaceValue = 'solid' | 'glass';
+
 interface ContentProps extends RadixDialog.DialogContentProps {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    surface?: SurfaceValue;
 }
 declare const Dialog: {
     Root: React.FC<RadixDialog.DialogProps>;
@@ -564,7 +569,9 @@ declare const Popover: {
     Root: React.FC<RadixPopover.PopoverProps>;
     Trigger: React.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Portal: React.FC<RadixPopover.PopoverPortalProps>;
-    Content: React.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & {
+        surface?: SurfaceValue;
+    } & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<RadixPopover.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
     Close: React.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
 };
@@ -639,6 +646,7 @@ declare const Drawer: {
     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> & {
         side?: "left" | "right" | "top" | "bottom";
+        surface?: SurfaceValue;
     }, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
@@ -653,6 +661,7 @@ declare const Sheet: {
     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> & {
         side?: "left" | "right" | "top" | "bottom";
+        surface?: SurfaceValue;
     }, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
@@ -889,7 +898,9 @@ interface TopNavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     active?: boolean;
 }
 declare const TopNav: {
-    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        surface?: SurfaceValue;
+    } & React.RefAttributes<HTMLElement>>;
     Logo: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Menu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
     Item: React.ForwardRefExoticComponent<TopNavItemProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.js

@@ -100,6 +100,17 @@ function useMergedRefs(...refs) {
     for (const ref of refsRef.current) setRef(ref, node);
   }, []);
 }
+var toneClasses = {
+  neutral: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-muted)]",
+  info: "bg-[var(--color-info-500)] text-white hover:bg-[var(--color-info-600)]",
+  success: "bg-[var(--color-success-500)] text-white hover:bg-[var(--color-success-600)]",
+  warning: "bg-[var(--color-warning-500)] text-white hover:bg-[var(--color-warning-600)]",
+  danger: "bg-[var(--color-danger-500)] text-white hover:bg-[var(--color-danger-600)]",
+  leap: "bg-[var(--color-leap-500)] text-white hover:bg-[var(--color-leap-600)]",
+  bookub: "bg-[var(--color-bookub-500)] text-white hover:bg-[var(--color-bookub-600)]",
+  payub: "bg-[var(--color-payub-500)] text-white hover:bg-[var(--color-payub-600)]",
+  founderub: "bg-[var(--color-founderub-500)] text-white hover:bg-[var(--color-founderub-600)]"
+};
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors",
@@ -152,7 +163,11 @@ var Button = React87.forwardRef(
     ...props
   }, ref) => {
     const sharedProps = {
-      className: cn(buttonVariants({ variant, size, fullWidth }), className),
+      className: cn(
+        buttonVariants({ variant, size, fullWidth }),
+        tone ? toneClasses[tone] : "",
+        className
+      ),
       "data-tone": tone,
       ...props
     };
@@ -664,12 +679,14 @@ var labelVariants = cva(
   }
 );
 var Label = React87.forwardRef(
-  ({ className, size, required, disabled, tone, children, ...props }, ref) => {
+  ({ className, size, required, disabled, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsxs(
       "label",
       {
         ref,
         "data-tone": tone,
+        style: { ...toneStyle, ...style },
         className: cn(
           labelVariants({ size, disabled }),
           "text-[var(--color-text-primary)]",
@@ -693,12 +710,14 @@ var Label = React87.forwardRef(
 );
 Label.displayName = "Label";
 var HelperText = React87.forwardRef(
-  ({ className, tone, children, ...props }, ref) => {
+  ({ className, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsx(
       "p",
       {
         ref,
         "data-tone": tone,
+        style: { ...toneStyle, ...style },
         className: cn(
           "text-sm text-[var(--color-text-muted)] leading-snug",
           className
@@ -844,7 +863,7 @@ var badgeVariants = cva(
     }
   }
 );
-var toneClasses = {
+var toneClasses2 = {
   neutral: {
     solid: "bg-[var(--color-neutral-500)] text-white",
     soft: "bg-[var(--color-neutral-500)]/10 text-[var(--color-neutral-700)]",
@@ -894,7 +913,7 @@ var toneClasses = {
 var Badge = React87.forwardRef(
   ({ className, size, variant = "solid", tone = "neutral", leadingIcon, children, ...props }, ref) => {
     const resolvedVariant = variant ?? "solid";
-    const toneStyle = toneClasses[tone][resolvedVariant];
+    const toneStyle = toneClasses2[tone][resolvedVariant];
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -1363,6 +1382,9 @@ var AvatarGroup = React87.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
+
+// src/utils/glass.ts
+var glassSurfaceClass = "bg-[var(--glass-bg)] border-[var(--glass-border)] backdrop-blur-[var(--glass-blur)] [box-shadow:inset_0_1px_0_0_var(--glass-highlight),var(--glass-shadow)]";
 var cardVariants = cva(
   "rounded-lg bg-[var(--color-bg-default)] border border-[var(--color-border-default)] text-[var(--color-text-primary)]",
   {
@@ -1371,10 +1393,19 @@ var cardVariants = cva(
         flat: "",
         surface: "shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1))]",
         interactive: "cursor-pointer shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1))] transition-all duration-200 hover:shadow-[var(--shadow-card-hover,0_4px_12px_0_rgb(0_0_0/0.15))] hover:-translate-y-0.5 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)]"
+      },
+      // Material. 'glass' needs data-material="glass" on the element (set in the
+      // component) for the --glass-* vars to resolve. Single box-shadow carries
+      // both the inset specular highlight and the drop shadow so neither clobbers
+      // the other. Listed after `variant` so tailwind-merge lets it win on bg/border.
+      surface: {
+        solid: "",
+        glass: glassSurfaceClass
       }
     },
     defaultVariants: {
-      variant: "flat"
+      variant: "flat",
+      surface: "solid"
     }
   }
 );
@@ -1390,15 +1421,16 @@ var toneBorderMap = {
   founderub: "border-l-4 border-l-[var(--color-founderub-500)]"
 };
 var Card = React87.forwardRef(
-  ({ className, variant = "flat", tone, asChild = false, children, ...props }, ref) => {
+  ({ className, variant = "flat", surface = "solid", tone, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     const toneStyle = tone ? toneBorderMap[tone] : "";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardVariants({ variant }), toneStyle, className),
+        className: cn(cardVariants({ variant, surface }), toneStyle, className),
         "data-tone": tone,
+        "data-material": surface === "glass" ? "glass" : void 0,
         ...props,
         children
       }
@@ -2617,7 +2649,7 @@ var Overlay2 = React87.forwardRef(
 );
 Overlay2.displayName = "Dialog.Overlay";
 var Content2 = React87.forwardRef(
-  function DialogContent({ className, size = "md", children, ...props }, ref) {
+  function DialogContent({ className, size = "md", surface = "solid", children, ...props }, ref) {
     const sizeMap2 = {
       sm: "max-w-sm",
       md: "max-w-lg",
@@ -2630,17 +2662,19 @@ var Content2 = React87.forwardRef(
       {
         ref,
         className: cn(
-          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-full -translate-x-1/2 -translate-y-1/2",
+          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
           "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-xl",
-          "p-6 focus:outline-none",
+          "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
           sizeMap2[size],
+          surface === "glass" && glassSurfaceClass,
           className
         ),
+        "data-material": surface === "glass" ? "glass" : void 0,
         ...props,
         children
       }
@@ -2682,7 +2716,7 @@ var Header = React87.forwardRef(
 Header.displayName = "Dialog.Header";
 var Footer = React87.forwardRef(
   function DialogFooter({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex justify-end gap-2", className), ...props });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
   }
 );
 Footer.displayName = "Dialog.Footer";
@@ -2835,7 +2869,7 @@ var Trigger6 = RadixPopover.Trigger;
 var Portal6 = RadixPopover.Portal;
 var Close4 = RadixPopover.Close;
 var Content6 = React87.forwardRef(
-  function PopoverContent({ className, sideOffset = 4, ...props }, ref) {
+  function PopoverContent({ className, sideOffset = 4, surface = "solid", ...props }, ref) {
     return /* @__PURE__ */ jsx(
       RadixPopover.Content,
       {
@@ -2850,8 +2884,10 @@ var Content6 = React87.forwardRef(
           "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          surface === "glass" && glassSurfaceClass,
           className
         ),
+        "data-material": surface === "glass" ? "glass" : void 0,
         ...props
       }
     );
@@ -3596,7 +3632,7 @@ var Trigger19 = Drawer$1.Trigger;
 var Portal14 = Drawer$1.Portal;
 var Close5 = Drawer$1.Close;
 var Overlay5 = Drawer$1.Overlay;
-var Content19 = React87.forwardRef(({ className, children, side = "right", ...props }, ref) => {
+var Content19 = React87.forwardRef(({ className, children, side = "right", surface = "solid", ...props }, ref) => {
   const sideMap = {
     right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
     left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
@@ -3610,8 +3646,10 @@ var Content19 = React87.forwardRef(({ className, children, side = "right", ...pr
       className: cn(
         "fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-bg-default)] shadow-xl focus:outline-none",
         sideMap[side],
+        surface === "glass" && glassSurfaceClass,
         className
       ),
+      "data-material": surface === "glass" ? "glass" : void 0,
       ...props,
       children: [
         side === "bottom" && /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-20 rounded-full bg-[var(--color-border-default)]" }),
@@ -4126,7 +4164,7 @@ var List5 = React87.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-9 items-center justify-start rounded-lg bg-[var(--color-bg-subtle)] p-1 text-[var(--color-text-muted)] gap-0.5",
+        "flex h-9 w-full items-center justify-start overflow-x-auto rounded-lg bg-[var(--color-bg-subtle)] p-1 text-[var(--color-text-muted)] gap-0.5",
         className
       ),
       ...props
@@ -4385,7 +4423,7 @@ var Action4 = React87.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-8 items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
+        "inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
         className
       ),
       ...props
@@ -4473,14 +4511,16 @@ function Toaster() {
   ] });
 }
 var Root47 = React87.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, children, surface = "solid", ...props }, ref) => /* @__PURE__ */ jsx(
     "header",
     {
       ref,
       className: cn(
         "sticky top-0 z-[var(--z-sticky,100)] flex h-[var(--size-nav-header,64px)] items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-4",
+        surface === "glass" && glassSurfaceClass,
         className
       ),
+      "data-material": surface === "glass" ? "glass" : void 0,
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-4", children })
     }
@@ -4744,7 +4784,7 @@ var Pagination = React87.forwardRef(
               onClick: () => onPageChange(page - 1),
               disabled: page <= 1,
               "aria-label": "Go to previous page",
-              className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsx(ChevronLeft, { size: "sm", "aria-hidden": "true" })
             }
           ),
@@ -4752,7 +4792,7 @@ var Pagination = React87.forwardRef(
             (p, i) => p === "..." ? /* @__PURE__ */ jsx(
               "span",
               {
-                className: "flex h-9 w-9 items-center justify-center text-[var(--color-text-muted)]",
+                className: "flex h-11 w-11 items-center justify-center text-[var(--color-text-muted)]",
                 children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
               },
               `ellipsis-${i}`
@@ -4763,7 +4803,7 @@ var Pagination = React87.forwardRef(
                 "aria-label": `Go to page ${p}`,
                 "aria-current": p === page ? "page" : void 0,
                 className: cn(
-                  "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors",
+                  "inline-flex h-11 w-11 items-center justify-center rounded-md text-sm font-medium transition-colors",
                   p === page ? "bg-[var(--color-brand-primary-500)] text-white" : "border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]"
                 ),
                 children: p
@@ -4777,7 +4817,7 @@ var Pagination = React87.forwardRef(
               onClick: () => onPageChange(page + 1),
               disabled: page >= totalPages,
               "aria-label": "Go to next page",
-              className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true" })
             }
           )
@@ -5092,7 +5132,7 @@ function DataTable({
         }
       ) }) })
     ] }),
-    pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-[var(--color-text-muted)]", children: [
+    pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
@@ -5105,7 +5145,7 @@ function DataTable({
           {
             onClick: () => table.previousPage(),
             disabled: !table.getCanPreviousPage(),
-            className: "rounded border border-[var(--color-border-default)] px-3 py-1 disabled:opacity-50",
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
             children: "Previous"
           }
         ),
@@ -5114,7 +5154,7 @@ function DataTable({
           {
             onClick: () => table.nextPage(),
             disabled: !table.getCanNextPage(),
-            className: "rounded border border-[var(--color-border-default)] px-3 py-1 disabled:opacity-50",
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
             children: "Next"
           }
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -68,8 +68,8 @@
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.5.4",
     "vaul": "^1.1.2",
-    "@nexub/icons": "0.0.2",
-    "@nexub/tokens": "0.0.2"
+    "@nexub/icons": "1.0.0",
+    "@nexub/tokens": "1.0.0"
   },
   "module": "./dist/index.js",
   "peerDependencies": {
@@ -77,22 +77,34 @@
     "react-dom": ">=18 <20"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
     "jsdom": "^25.0.1",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "8.6.14",
+    "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.8"
+    "vitest": "^2.1.8",
+    "@nexub/themes": "1.0.0"
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }