@nexub/react 3.0.0 → 3.2.0

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/{chunk-WRVFNYO3.js → utils/cn.js}

@@ -1,19 +1,17 @@
-'use client';
-
-// src/utils/cn.ts
 import { clsx } from "clsx";
 import { extendTailwindMerge, getDefaultConfig } from "tailwind-merge";
-var sizes = ["xs", "sm", "md", "lg", "xl"];
-var typeRoles = ["display", "headline", "title", "body", "label"].flatMap(
-  (r) => ["lg", "md", "sm"].map((s) => `${r}-${s}`)
-);
-var springs = ["spatial", "effects", "expressive"].flatMap(
+const sizes = ["xs", "sm", "md", "lg", "xl"];
+const typeRoles = [
+  "display-xl",
+  ...["display", "headline", "title", "body", "label"].flatMap((r) => ["lg", "md", "sm"].map((s) => `${r}-${s}`))
+];
+const springs = ["spatial", "effects", "expressive"].flatMap(
   (k) => ["fast", "default", "slow"].map((s) => `${k}-${s}`)
 );
-var outlineWidths = getDefaultConfig().classGroups["outline-w"][0].outline.filter(
+const outlineWidths = getDefaultConfig().classGroups["outline-w"][0].outline.filter(
   (v) => v !== ""
 );
-var twMerge = extendTailwindMerge({
+const twMerge = extendTailwindMerge({
   override: {
     classGroups: { "outline-w": [{ outline: outlineWidths }] }
   },
@@ -34,7 +32,6 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-
 export {
   cn
 };

package/dist/utils/control.d.ts

@@ -0,0 +1,20 @@
+import type { ToneValue } from '@nexub/core';
+/** The shared size scale. Components with extra steps extend it (`Size | 'display'`). */
+export type Size = 'sm' | 'md' | 'lg';
+export declare const toneTextClasses: Record<ToneValue, string>;
+/** Text field chrome: Input wrapper, Textarea, Select trigger. */
+export declare const field: string;
+/** Focus = a 2px primary border (1px border + 1px inset), no offset ring. */
+export declare const fieldFocusWithin = "focus-within:border-[var(--color-primary)] focus-within:shadow-[inset_0_0_0_1px_var(--color-primary)] focus-within:hover:border-[var(--color-primary)]";
+export declare const fieldFocusVisible = "focus-visible:outline-none focus-visible:border-[var(--color-primary)] focus-visible:shadow-[inset_0_0_0_1px_var(--color-primary)]";
+export declare const fieldInvalid: string;
+/** Explicit disabled field (no opacity tricks). */
+export declare const fieldDisabled = "cursor-not-allowed border-[var(--color-outline-variant)] hover:border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)] text-[var(--color-text-disabled)]";
+/** The same, applied by a wrapper when its inner control is :disabled. */
+export declare const fieldDisabledWithin = "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-[var(--color-outline-variant)] has-[:disabled]:hover:border-[var(--color-outline-variant)] has-[:disabled]:bg-[var(--color-surface-container-low)] has-[:disabled]:text-[var(--color-text-disabled)]";
+/** Pressable control: capsule, state layer (hover/focus/press overlay), press spring. */
+export declare const pressable = "nx-state-layer nx-press rounded-shape-control select-none";
+/** Disabled for controls with a container (filled, tonal, outlined). */
+export declare const disabledContainer = "disabled:pointer-events-none disabled:border-transparent disabled:bg-[color-mix(in_srgb,var(--color-on-surface)_12%,transparent)] disabled:text-[var(--color-text-disabled)] aria-disabled:pointer-events-none";
+/** Disabled for text-only controls (ghost, link). */
+export declare const disabledText = "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)] aria-disabled:pointer-events-none";

package/dist/utils/control.js

@@ -0,0 +1,41 @@
+const toneTextClasses = {
+  neutral: "text-[var(--color-on-surface-variant)]",
+  info: "text-[var(--color-info)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  danger: "text-[var(--color-error)]",
+  leap: "text-[var(--color-leap)]",
+  bookub: "text-[var(--color-bookub)]",
+  payub: "text-[var(--color-payub)]",
+  founderub: "text-[var(--color-founderub)]"
+};
+const field = [
+  "rounded-[var(--field-radius,var(--shape-field))] border border-[var(--field-border,var(--color-outline))]",
+  "bg-[var(--field-bg,var(--color-surface-container-lowest))] text-[var(--field-fg,var(--color-on-surface))]",
+  "transition-[border-color,box-shadow] duration-effects-fast ease-effects-fast",
+  "hover:border-[var(--color-on-surface-variant)]"
+].join(" ");
+const fieldFocusWithin = "focus-within:border-[var(--color-primary)] focus-within:shadow-[inset_0_0_0_1px_var(--color-primary)] focus-within:hover:border-[var(--color-primary)]";
+const fieldFocusVisible = "focus-visible:outline-none focus-visible:border-[var(--color-primary)] focus-visible:shadow-[inset_0_0_0_1px_var(--color-primary)]";
+const fieldInvalid = [
+  "border-[var(--color-error)] hover:border-[var(--color-error)]",
+  "focus-within:border-[var(--color-error)] focus-within:shadow-[inset_0_0_0_1px_var(--color-error)] focus-within:hover:border-[var(--color-error)]",
+  "focus-visible:border-[var(--color-error)] focus-visible:shadow-[inset_0_0_0_1px_var(--color-error)]"
+].join(" ");
+const fieldDisabled = "cursor-not-allowed border-[var(--color-outline-variant)] hover:border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)] text-[var(--color-text-disabled)]";
+const fieldDisabledWithin = "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-[var(--color-outline-variant)] has-[:disabled]:hover:border-[var(--color-outline-variant)] has-[:disabled]:bg-[var(--color-surface-container-low)] has-[:disabled]:text-[var(--color-text-disabled)]";
+const pressable = "nx-state-layer nx-press rounded-shape-control select-none";
+const disabledContainer = "disabled:pointer-events-none disabled:border-transparent disabled:bg-[color-mix(in_srgb,var(--color-on-surface)_12%,transparent)] disabled:text-[var(--color-text-disabled)] aria-disabled:pointer-events-none";
+const disabledText = "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)] aria-disabled:pointer-events-none";
+export {
+  disabledContainer,
+  disabledText,
+  field,
+  fieldDisabled,
+  fieldDisabledWithin,
+  fieldFocusVisible,
+  fieldFocusWithin,
+  fieldInvalid,
+  pressable,
+  toneTextClasses
+};

package/dist/utils/deprecated.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Warns once per component, outside production, that it is deprecated and removed in 3.0
+ * (GOVERNANCE.md: a removal needs a development warning in a 2.x minor first).
+ * Bundlers replace `process.env.NODE_ENV`, so production builds drop the call's body.
+ */
+export declare function warnDeprecated(name: string, replacement: string): void;

package/dist/utils/deprecated.js

@@ -0,0 +1,16 @@
+const warned = /* @__PURE__ */ new Set();
+function warnDeprecated(name, replacement) {
+  try {
+    if (process.env.NODE_ENV === "production") return;
+  } catch {
+    return;
+  }
+  if (warned.has(name)) return;
+  warned.add(name);
+  console.warn(
+    `[@nexub/react] ${name} is deprecated and will be removed in 3.0. Use ${replacement} instead.`
+  );
+}
+export {
+  warnDeprecated
+};

package/dist/utils/glass.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Glass 2.0 material (values in `@nexub/themes/glass`). Apply `glassSurfaceClass`
+ * AND set `data-material="glass"` on the same element so the `--glass-*` vars
+ * resolve. It overrides bg/border, so place it after a surface's solid classes.
+ * Optional `data-glass-thickness` (thin | thick) scales blur and shadow with size.
+ */
+export declare const glassSurfaceClass = "border bg-[var(--glass-bg)] border-[var(--glass-border)] [-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)] [box-shadow:var(--glass-shadow)]";
+export type SurfaceValue = 'solid' | 'glass';
+export type GlassThickness = 'thin' | 'regular' | 'thick';

package/dist/utils/glass.js

@@ -0,0 +1,4 @@
+const glassSurfaceClass = "border bg-[var(--glass-bg)] border-[var(--glass-border)] [-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)] [box-shadow:var(--glass-shadow)]";
+export {
+  glassSurfaceClass
+};

package/dist/utils/layout.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+export interface LayoutInput {
+    gap?: number | string;
+    align?: string;
+    justify?: string;
+    cols?: number | string;
+    rows?: number | string;
+    style?: React.CSSProperties;
+}
+/** Classes for on-scale values; a style object only for the rest (else undefined). */
+export declare function layoutProps({ gap, align, justify, cols, rows, style }: LayoutInput): {
+    className: string[];
+    style: React.CSSProperties | undefined;
+};

package/dist/{chunk-VLQGQFW7.js → utils/layout.js}

@@ -1,7 +1,4 @@
-'use client';
-
-// src/utils/layout.ts
-var GAP = {
+const GAP = {
   "0": "gap-0",
   "0.5": "gap-0.5",
   "1": "gap-1",
@@ -24,7 +21,7 @@ var GAP = {
   "20": "gap-20",
   "24": "gap-24"
 };
-var ALIGN = {
+const ALIGN = {
   start: "items-start",
   "flex-start": "items-start",
   end: "items-end",
@@ -33,7 +30,7 @@ var ALIGN = {
   baseline: "items-baseline",
   stretch: "items-stretch"
 };
-var JUSTIFY = {
+const JUSTIFY = {
   start: "justify-start",
   "flex-start": "justify-start",
   end: "justify-end",
@@ -47,7 +44,7 @@ var JUSTIFY = {
   "space-evenly": "justify-evenly",
   stretch: "justify-stretch"
 };
-var COLS = {
+const COLS = {
   "1": "grid-cols-1",
   "2": "grid-cols-2",
   "3": "grid-cols-3",
@@ -61,7 +58,7 @@ var COLS = {
   "11": "grid-cols-11",
   "12": "grid-cols-12"
 };
-var ROWS = {
+const ROWS = {
   "1": "grid-rows-1",
   "2": "grid-rows-2",
   "3": "grid-rows-3",
@@ -104,7 +101,6 @@ function layoutProps({ gap, align, justify, cols, rows, style }) {
   const merged = { ...s, ...style };
   return { className, style: Object.keys(merged).length ? merged : void 0 };
 }
-
 export {
   layoutProps
 };

package/dist/utils/money.d.ts

@@ -0,0 +1 @@
+export { moneyFormatter, fractionDigits, currencySymbol, formatForEditing, formatForDisplay, parseMoney } from '@nexub/core';

package/dist/{chunk-R3SUPKKI.js → utils/money.js}

@@ -1,12 +1,9 @@
-'use client';
-
-// src/utils/money.ts
 import { moneyFormatter, fractionDigits, currencySymbol, formatForEditing, formatForDisplay, parseMoney } from "@nexub/core";
-
 export {
-  moneyFormatter,
   currencySymbol,
-  formatForEditing,
   formatForDisplay,
+  formatForEditing,
+  fractionDigits,
+  moneyFormatter,
   parseMoney
 };

package/dist/utils/surface.d.ts

@@ -0,0 +1,11 @@
+/** Modal overlays: Dialog, AlertDialog, CommandPalette, Sheet. */
+export declare const overlaySurface = "rounded-shape-overlay bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3";
+/** Floating containers: Popover, HoverCard, menus, Select content, Toast. */
+export declare const floatingSurface = "rounded-shape-container bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-2";
+/** Menu content padding; items use the concentric inner radius (16px − 6px). */
+export declare const menuContent = "p-1.5";
+export declare const menuItem: string;
+export declare const menuSeparator = "-mx-1.5 my-1.5 h-px bg-[var(--color-outline-variant)]";
+export declare const menuLabel = "px-2.5 py-1.5 text-label-sm text-[var(--color-on-surface-muted)]";
+/** Scrim behind modal overlays. */
+export declare const scrim = "bg-[color-mix(in_srgb,var(--color-scrim)_40%,transparent)]";

package/dist/{chunk-5FWJXSXT.js → utils/surface.js}

@@ -1,25 +1,21 @@
-'use client';
-
-// src/utils/surface.ts
-var overlaySurface = "rounded-shape-overlay bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3";
-var floatingSurface = "rounded-shape-container bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-2";
-var menuContent = "p-1.5";
-var menuItem = [
+const overlaySurface = "rounded-shape-overlay bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3";
+const floatingSurface = "rounded-shape-container bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-2";
+const menuContent = "p-1.5";
+const menuItem = [
   "relative flex cursor-default select-none items-center gap-2 rounded-[10px] px-2.5 py-2 text-body-sm text-[var(--color-on-surface)] outline-none",
   // Highlight = the on-surface state layer at hover opacity.
   "focus:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[highlighted]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
   "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--color-text-disabled)]"
 ].join(" ");
-var menuSeparator = "-mx-1.5 my-1.5 h-px bg-[var(--color-outline-variant)]";
-var menuLabel = "px-2.5 py-1.5 text-label-sm text-[var(--color-on-surface-muted)]";
-var scrim = "bg-[color-mix(in_srgb,var(--color-scrim)_40%,transparent)]";
-
+const menuSeparator = "-mx-1.5 my-1.5 h-px bg-[var(--color-outline-variant)]";
+const menuLabel = "px-2.5 py-1.5 text-label-sm text-[var(--color-on-surface-muted)]";
+const scrim = "bg-[color-mix(in_srgb,var(--color-scrim)_40%,transparent)]";
 export {
-  overlaySurface,
   floatingSurface,
   menuContent,
   menuItem,
-  menuSeparator,
   menuLabel,
+  menuSeparator,
+  overlaySurface,
   scrim
 };

package/dist/utils/viewTransition.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Run a DOM update as a view transition (styles: @nexub/themes/view-transitions).
+ * Where the API is missing, or on the server, the update just runs.
+ */
+export declare function startViewTransition(update: () => void | Promise<void>): void;

package/dist/utils/viewTransition.js

@@ -0,0 +1,8 @@
+function startViewTransition(update) {
+  const doc = typeof document === "undefined" ? void 0 : document;
+  if (doc?.startViewTransition) doc.startViewTransition(update);
+  else void update();
+}
+export {
+  startViewTransition
+};

package/dist/{chunk-PZL6AJH5.js → vendor/vaul.js}

@@ -1,20 +1,5 @@
 'use client';
-import {
-  useClassScrollLock
-} from "./chunk-47UGX37F.js";
-import {
-  scrim
-} from "./chunk-5FWJXSXT.js";
-import {
-  glassSurfaceClass
-} from "./chunk-DEIBF3P7.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/Drawer/Drawer.tsx
-import * as React2 from "react";
-import { Slot } from "@radix-ui/react-slot";
+"use client";
 
 // ../../node_modules/.pnpm/vaul@1.1.2_@types+react-dom@19.3.0_@types+react@19.3.0__@types+react@19.3.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/vaul/dist/index.mjs
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -1505,129 +1490,6 @@ var Drawer = {
   Title: DialogPrimitive.Title,
   Description: DialogPrimitive.Description
 };
-
-// src/components/Drawer/Drawer.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var DrawerContext2 = React2.createContext({ scrollLock: "style", open: false, modal: true });
-function Root3({ scrollLock = "style", onOpenChange, ...props }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(props.defaultOpen ?? false);
-  const open = props.open ?? uncontrolledOpen;
-  return /* @__PURE__ */ jsx(DrawerContext2.Provider, { value: { scrollLock, open, modal: props.modal ?? true }, children: /* @__PURE__ */ jsx(
-    Drawer.Root,
-    {
-      ...props,
-      onOpenChange: (next) => {
-        setUncontrolledOpen(next);
-        onOpenChange?.(next);
-      }
-    }
-  ) });
-}
-Root3.displayName = "Drawer.Root";
-var Trigger2 = Drawer.Trigger;
-var Close2 = Drawer.Close;
-var Portal3 = Drawer.Portal;
-var ClassLockOverlay = React2.forwardRef(
-  ({ asChild, forceMount: _forceMount, open, ...props }, ref) => {
-    useClassScrollLock();
-    const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        "data-vaul-overlay": "",
-        "data-vaul-snap-points": "false",
-        "data-state": open ? "open" : "closed",
-        ...props
-      }
-    );
-  }
-);
-var Overlay3 = React2.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { scrollLock, open, modal } = React2.useContext(DrawerContext2);
-    const classes = cn("nx-drawer-overlay fixed inset-0 z-[var(--z-modal)]", scrim, className);
-    if (scrollLock === "class") {
-      if (!modal) return null;
-      return /* @__PURE__ */ jsx(ClassLockOverlay, { ref, open, className: cn("pointer-events-auto", classes), ...props });
-    }
-    return /* @__PURE__ */ jsx(Drawer.Overlay, { ref, className: classes, ...props });
-  }
-);
-Overlay3.displayName = "Drawer.Overlay";
-var Content3 = React2.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 overflow-x-hidden",
-    left: "inset-y-0 left-0 h-full w-3/4 max-w-sm overflow-x-hidden",
-    top: "inset-x-0 top-0 w-full rounded-b-[var(--shape-overlay)]",
-    bottom: "inset-x-0 bottom-0 w-full rounded-t-[var(--shape-overlay)]"
-  };
-  return /* @__PURE__ */ jsxs(
-    Drawer.Content,
-    {
-      ref,
-      className: cn(
-        "nx-drawer fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3 focus:outline-none",
-        sideMap[side],
-        surface === "glass" && glassSurfaceClass,
-        className
-      ),
-      "data-material": surface === "glass" ? "glass" : void 0,
-      "data-glass-thickness": surface === "glass" ? "thick" : void 0,
-      ...props,
-      children: [
-        side === "bottom" && /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-20 rounded-full bg-[var(--color-outline-variant)]" }),
-        children
-      ]
-    }
-  );
-});
-Content3.displayName = "Drawer.Content";
-var Title2 = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Drawer.Title,
-    {
-      ref,
-      className: cn("text-title-lg text-[var(--color-on-surface)]", className),
-      ...props
-    }
-  )
-);
-Title2.displayName = "Drawer.Title";
-var Description2 = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Drawer.Description,
-    {
-      ref,
-      className: cn("text-body-sm text-[var(--color-on-surface-muted)]", className),
-      ...props
-    }
-  )
-);
-Description2.displayName = "Drawer.Description";
-var Header = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6", className), ...props })
-);
-Header.displayName = "Drawer.Header";
-var Footer = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mt-auto flex flex-col gap-2 p-6", className), ...props })
-);
-Footer.displayName = "Drawer.Footer";
-var Drawer2 = {
-  Root: Root3,
-  Trigger: Trigger2,
-  Portal: Portal3,
-  Overlay: Overlay3,
-  Content: Content3,
-  Close: Close2,
-  Title: Title2,
-  Description: Description2,
-  Header,
-  Footer
-};
-var Sheet = Drawer2;
-
 export {
-  Drawer2 as Drawer,
-  Sheet
+  Drawer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -34,6 +34,14 @@
       "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
+    "./cn": {
+      "types": "./dist/utils/cn.d.ts",
+      "default": "./dist/utils/cn.js"
+    },
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "default": "./dist/components/*/index.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -71,13 +79,13 @@
     "date-fns": "^4.4.0",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0",
-    "@nexub/core": "3.0.0",
-    "@nexub/icons": "3.0.0"
+    "@nexub/core": "3.2.0",
+    "@nexub/icons": "3.2.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^3.0.0"
+    "@nexub/tokens": "^3.2.0"
   },
   "devDependencies": {
     "@playwright/test": "1.64.0",
@@ -103,11 +111,11 @@
     "vaul": "1.1.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5",
-    "@nexub/themes": "3.0.0",
-    "@nexub/tokens": "3.0.0"
+    "@nexub/themes": "3.2.0",
+    "@nexub/tokens": "3.2.0"
   },
   "scripts": {
-    "build": "tsup && node scripts/check-dts.mjs && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp -R ../themes/src/fonts dist/fonts",
+    "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && rm -f dist/vendor/*.d.ts && node scripts/check-dts.mjs && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp -R ../themes/src/fonts dist/fonts",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",

package/dist/chunk-4B4XWDAH.js

@@ -1 +0,0 @@
-'use client';