@nexub/react 4.2.0 → 4.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.0",
+  "version": "4.4.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",
@@ -371,6 +382,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "floating-input",
+      "name": "Floating Input",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "A real `<label>` tied to the input, so the name never disappears."
+      ]
+    },
     {
       "slug": "form-field",
       "name": "Form Field",
@@ -719,6 +741,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "scroll-progress",
+      "name": "Scroll Progress",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Decorative (`aria-hidden`); hidden under reduced motion and where scroll-driven animations are not supported."
+      ]
+    },
     {
       "slug": "search-input",
       "name": "Search Input",
@@ -755,6 +788,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "shared-element",
+      "name": "Shared Element",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Visual only: run the change in `startViewTransition()` and move focus to the new view as usual."
+      ]
+    },
     {
       "slug": "sheet",
       "name": "Sheet",

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/components/FloatingInput/FloatingInput.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface FloatingInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'> {
+    /** Always visible: inside the field when empty, above the value otherwise. */
+    label: string;
+}
+export declare const FloatingInput: React.ForwardRefExoticComponent<FloatingInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/FloatingInput/FloatingInput.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const FloatingInput = React.forwardRef(
+  ({ label, id, className, ...props }, ref) => {
+    const auto = React.useId();
+    const inputId = id ?? auto;
+    return /* @__PURE__ */ jsxs("div", { className: cn("nx-float-field relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          placeholder: " ",
+          className: cn(
+            "h-14 w-full rounded-shape-field border border-[var(--color-outline)] bg-[var(--color-surface)] px-4 pt-5 text-body-md text-[var(--color-on-surface)]",
+            "outline-none transition-[border-color,box-shadow] focus-visible:border-[var(--color-primary)] focus-visible:shadow-[0_0_0_1px_var(--color-primary)]",
+            "aria-[invalid=true]:border-[var(--color-error)] disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:text-[var(--color-text-disabled)]"
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: label })
+    ] });
+  }
+);
+FloatingInput.displayName = "FloatingInput";
+export {
+  FloatingInput
+};

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

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

package/dist/components/FloatingInput/index.js

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

package/dist/components/ScrollProgress/ScrollProgress.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type ScrollProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare const ScrollProgress: React.ForwardRefExoticComponent<ScrollProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ScrollProgress/ScrollProgress.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const ScrollProgress = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "aria-hidden": "true", className: cn("nx-scroll-progress", className), ...props }));
+ScrollProgress.displayName = "ScrollProgress";
+export {
+  ScrollProgress
+};

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

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

package/dist/components/ScrollProgress/index.js

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

package/dist/components/SharedElement/SharedElement.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface SharedElementProps {
+    /** Same name on both sides of the transition, e.g. `avatar-${user.id}`. */
+    name: string;
+    children: React.ReactElement;
+}
+/** Turns any string into a valid <custom-ident> for view-transition-name. */
+export declare const transitionName: (name: string) => string;
+export declare function SharedElement({ name, children }: SharedElementProps): React.JSX.Element;

package/dist/components/SharedElement/SharedElement.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+const transitionName = (name) => `nx-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+function SharedElement({ name, children }) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.setProperty("view-transition-name", transitionName(name));
+    return () => {
+      el.style.removeProperty("view-transition-name");
+    };
+  }, [name]);
+  return /* @__PURE__ */ jsx(Slot, { ref, children });
+}
+export {
+  SharedElement,
+  transitionName
+};

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

@@ -0,0 +1,2 @@
+export { SharedElement, transitionName } from './SharedElement.js';
+export type { SharedElementProps } from './SharedElement.js';

package/dist/components/SharedElement/index.js

@@ -0,0 +1,5 @@
+import { SharedElement, transitionName } from "./SharedElement.js";
+export {
+  SharedElement,
+  transitionName
+};

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,14 @@ 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 { SharedElement, transitionName } from './components/SharedElement/index.js';
+export type { SharedElementProps } from './components/SharedElement/index.js';
+export { ScrollProgress } from './components/ScrollProgress/index.js';
+export type { ScrollProgressProps } from './components/ScrollProgress/index.js';
+export { FloatingInput } from './components/FloatingInput/index.js';
+export type { FloatingInputProps } from './components/FloatingInput/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,10 @@ 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 { SharedElement, transitionName } from "./components/SharedElement/index.js";
+import { ScrollProgress } from "./components/ScrollProgress/index.js";
+import { FloatingInput } from "./components/FloatingInput/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 +135,7 @@ export {
   ButtonGroup,
   Card,
   CardLink,
+  Celebrate,
   ChartLegend,
   CheckList,
   CheckListItem,
@@ -162,6 +167,7 @@ export {
   Flag,
   Flex,
   Float,
+  FloatingInput,
   FormError,
   FormField,
   GradientDivider,
@@ -202,11 +208,13 @@ export {
   Reveal,
   Scale,
   ScrollArea,
+  ScrollProgress,
   SearchInput,
   Section,
   SegmentedControl,
   Select,
   Separator,
+  SharedElement,
   Sheet,
   Sidebar,
   Skeleton,
@@ -272,6 +280,7 @@ export {
   textareaVariants,
   toast,
   toggleVariants,
+  transitionName,
   useControllableState,
   useDisclosure,
   useIsomorphicLayoutEffect,