@nexub/react 4.2.0 → 4.3.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.0",
+  "version": "4.3.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",
@@ -73,7 +73,7 @@
       "slug": "aurora",
       "name": "Aurora",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": [
@@ -194,6 +194,17 @@
         "Prefer CardLink over wrapping the whole card in `<a>`: the link’s accessible name stays the title instead of every word on the card."
       ]
     },
+    {
+      "slug": "celebrate",
+      "name": "Celebrate",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Decorative (`aria-hidden`). Announce the win in text, for example in a Toast or a status message."
+      ]
+    },
     {
       "slug": "checkbox-card",
       "name": "Checkbox Card",

package/dist/components/Button/Button.d.ts

@@ -26,5 +26,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
     asChild?: boolean;
+    /** 4.3: the button drifts a few pixels toward the pointer on hover. For one key action per screen.
+     *  Off for touch and reduced motion. */
+    magnetic?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Loader2 } from "@nexub/icons";
 import { cva } from "class-variance-authority";
+import { usePointerSheen } from "../../hooks/usePointerSheen.js";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, disabledText, pressable } from "../../utils/control.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
@@ -81,19 +82,24 @@ const Button = React.forwardRef(
     leadingIcon,
     trailingIcon,
     asChild = false,
+    magnetic = false,
     disabled,
     onClick,
+    onPointerMove,
     children,
     ...props
   }, ref) => {
     const status = statusProp ?? (loading ? "loading" : "idle");
+    const handlePointerMove = usePointerSheen(magnetic, onPointerMove);
     const sharedProps = {
       className: cn(
         buttonVariants({ variant, size, fullWidth }),
         tone ? toneClasses[tone] : "",
         !asChild && status === "error" && "nx-shake",
+        magnetic && "nx-magnetic",
         className
       ),
+      onPointerMove: handlePointerMove,
       "data-tone": tone,
       // Styling hook for opt-in layers (vivid, marketing); no styles depend on it by default.
       "data-variant": variant ?? "primary",

package/dist/components/Card/Card.d.ts

@@ -8,8 +8,9 @@ export declare const cardVariants: (props?: ({
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     tone?: ToneValue;
     surface?: 'solid' | 'glass';
-    /** `sheen`: a soft light follows the pointer (opt-in; off for touch and reduced motion). */
-    effect?: 'none' | 'sheen';
+    /** `sheen`: a soft light follows the pointer. `tilt` (4.3): the card also leans toward the pointer in 3D.
+     *  Opt-in; off for touch and reduced motion. */
+    effect?: 'none' | 'sheen' | 'tilt';
     /** Product accent for `variant="showcase"`: a coloured top edge and tint in marketing mode. Sets `data-product`. */
     accent?: 'leap' | 'bookub' | 'payub' | 'founderub';
     asChild?: boolean;

package/dist/components/Card/Card.js

@@ -52,13 +52,13 @@ const Card = React.forwardRef(
   ({ className, variant = "flat", surface = "solid", effect = "none", tone, accent, asChild = false, onPointerMove, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     const toneStyle = tone ? toneBorderMap[tone] : "";
-    const sheen = effect === "sheen";
+    const sheen = effect === "sheen" || effect === "tilt";
     const handlePointerMove = usePointerSheen(sheen, onPointerMove);
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardVariants({ variant, surface }), toneStyle, sheen && "nx-sheen", className),
+        className: cn(cardVariants({ variant, surface }), toneStyle, sheen && "nx-sheen", effect === "tilt" && "nx-tilt", className),
         onPointerMove: handlePointerMove,
         "data-tone": tone,
         "data-variant": variant ?? "flat",

package/dist/components/Celebrate/Celebrate.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface CelebrateProps {
+    /** Bursts each time this goes from false to true. */
+    active: boolean;
+    /** Number of pieces. @default 28 */
+    count?: number;
+    className?: string;
+}
+export declare function Celebrate({ active, count, className }: CelebrateProps): React.JSX.Element | null;

package/dist/components/Celebrate/Celebrate.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const COLORS = ["bg-chart-1", "bg-chart-2", "bg-chart-3", "bg-chart-4", "bg-chart-5", "bg-chart-6", "bg-chart-7", "bg-chart-8"];
+function Celebrate({ active, count = 28, className }) {
+  const ref = React.useRef(null);
+  const [burst, setBurst] = React.useState(0);
+  const was = React.useRef(false);
+  React.useEffect(() => {
+    if (active && !was.current) setBurst((b) => b + 1);
+    was.current = active;
+  }, [active]);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!burst || !el) return;
+    for (const piece of Array.from(el.children)) {
+      const angle = Math.random() * Math.PI * 2;
+      const distance = 60 + Math.random() * 90;
+      piece.style.setProperty("--x", `${Math.cos(angle) * distance}px`);
+      piece.style.setProperty("--y", `${Math.sin(angle) * distance + 40}px`);
+      piece.style.setProperty("--r", `${Math.random() * 540 - 270}deg`);
+      piece.style.setProperty("--d", `${Math.random() * 90}ms`);
+    }
+  }, [burst]);
+  if (!burst) return null;
+  return /* @__PURE__ */ jsx("div", { ref, "aria-hidden": "true", className: cn("nx-celebrate", className), children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("span", { className: COLORS[i % COLORS.length] }, i)) }, burst);
+}
+export {
+  Celebrate
+};

package/dist/components/Celebrate/index.d.ts

@@ -0,0 +1,2 @@
+export { Celebrate } from './Celebrate.js';
+export type { CelebrateProps } from './Celebrate.js';

package/dist/components/Celebrate/index.js

@@ -0,0 +1,4 @@
+import { Celebrate } from "./Celebrate.js";
+export {
+  Celebrate
+};

package/dist/hooks/usePointerSheen.js

@@ -14,6 +14,8 @@ function usePointerSheen(enabled, onPointerMove) {
         const r = el.getBoundingClientRect();
         el.style.setProperty("--nx-mx", `${clientX - r.left}px`);
         el.style.setProperty("--nx-my", `${clientY - r.top}px`);
+        el.style.setProperty("--nx-px", String(r.width ? (clientX - r.left) / r.width : 0.5));
+        el.style.setProperty("--nx-py", String(r.height ? (clientY - r.top) / r.height : 0.5));
       });
     },
     [onPointerMove]

package/dist/index.d.ts

@@ -36,6 +36,8 @@ export type { NumberInputProps } from './components/NumberInput/index.js';
 export { MoneyInput } from './components/MoneyInput/index.js';
 export type { MoneyInputProps } from './components/MoneyInput/index.js';
 export { Amount } from './components/Amount/index.js';
+export { Celebrate } from './components/Celebrate/index.js';
+export type { CelebrateProps } from './components/Celebrate/index.js';
 export { Aurora } from './components/Aurora/index.js';
 export type { AuroraProps } from './components/Aurora/index.js';
 export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from './components/Chart/index.js';

package/dist/index.js

@@ -21,6 +21,7 @@ import { Textarea, textareaVariants } from "./components/Textarea/index.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { MoneyInput } from "./components/MoneyInput/index.js";
 import { Amount } from "./components/Amount/index.js";
+import { Celebrate } from "./components/Celebrate/index.js";
 import { Aurora } from "./components/Aurora/index.js";
 import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from "./components/Chart/index.js";
 import { NumberTicker } from "./components/NumberTicker/index.js";
@@ -131,6 +132,7 @@ export {
   ButtonGroup,
   Card,
   CardLink,
+  Celebrate,
   ChartLegend,
   CheckList,
   CheckListItem,