@nexub/react 4.3.0 → 4.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.3.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.",
@@ -382,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",
@@ -730,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",
@@ -766,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/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/index.d.ts

@@ -36,6 +36,12 @@ 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';

package/dist/index.js

@@ -21,6 +21,9 @@ 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";
@@ -164,6 +167,7 @@ export {
   Flag,
   Flex,
   Float,
+  FloatingInput,
   FormError,
   FormField,
   GradientDivider,
@@ -204,11 +208,13 @@ export {
   Reveal,
   Scale,
   ScrollArea,
+  ScrollProgress,
   SearchInput,
   Section,
   SegmentedControl,
   Select,
   Separator,
+  SharedElement,
   Sheet,
   Sidebar,
   Skeleton,
@@ -274,6 +280,7 @@ export {
   textareaVariants,
   toast,
   toggleVariants,
+  transitionName,
   useControllableState,
   useDisclosure,
   useIsomorphicLayoutEffect,