@nexub/mcp 4.3.0 → 4.4.0

package/dist/skill/references/components/floating-input.md

@@ -0,0 +1,36 @@
+# Floating Input
+
+A text field whose label sits inside and floats up on focus or input. CSS only.
+
+- Package: `@nexub/react` · Category: Forms · Status: beta
+- Import: `import { FloatingInput } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/floating-input
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` (required) | `string` |  | Always visible: inside the empty field, above the value otherwise. |
+| `...input` | `InputHTMLAttributes` |  | Any input attribute except `placeholder`. Set `aria-invalid` for errors. |
+
+## Example: Sign-in form
+
+```tsx
+import { Button, FloatingInput } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <form className="flex w-full max-w-sm flex-col gap-3">
+      <FloatingInput label="Email" type="email" autoComplete="email" />
+      <FloatingInput label="Password" type="password" autoComplete="current-password" />
+      <Button type="submit">Sign in</Button>
+    </form>
+  );
+}
+```
+
+## Accessibility
+
+- A real `<label>` tied to the input, so the name never disappears.
+
+Related: [input](input.md), [form-field](form-field.md)

package/dist/skill/references/components/scroll-progress.md

@@ -0,0 +1,34 @@
+# Scroll Progress
+
+A thin bar along the top that fills as the page scrolls. CSS only.
+
+- Package: `@nexub/react` · Category: Motion · Status: beta
+- Import: `import { ScrollProgress } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/scroll-progress
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` |  | Position or colour overrides. Defaults to the accent (the Vivid gradient under data-expression="vivid"). |
+
+## Example: Long page
+
+```tsx
+import { ScrollProgress } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full text-body-sm text-[var(--color-on-surface-variant)]">
+      <ScrollProgress />
+      Scroll this page: the bar along the very top of the window fills as you read.
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Decorative (`aria-hidden`); hidden under reduced motion and where scroll-driven animations are not supported.
+
+Related: [scroll-area](scroll-area.md)

package/dist/skill/references/components/shared-element.md

@@ -0,0 +1,53 @@
+# Shared Element
+
+Morphs the same element between two states or pages inside a view transition.
+
+- Package: `@nexub/react` · Category: Motion · Status: beta
+- Import: `import { SharedElement } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/shared-element
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `name` (required) | `string` |  | Same name on both sides, e.g. `avatar-${id}`. One element per name on screen at a time. |
+| `children` (required) | `ReactElement` |  | One element; the name is set on it. |
+
+## Example: List to detail
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Avatar, Button, Card, SharedElement, startViewTransition } from '@nexub/react';
+
+const people = [{ id: 'sl', name: 'Sam Lee', role: 'Finance' }, { id: 'ar', name: 'Ana Ruiz', role: 'Design' }];
+
+export default function Example() {
+  const [open, setOpen] = React.useState<string | null>(null);
+  const person = people.find((p) => p.id === open);
+  const go = (id: string | null) => startViewTransition(() => setOpen(id));
+  return person ? (
+    <Card variant="surface" className="flex w-full flex-col items-center gap-3 p-8">
+      <SharedElement name={`avatar-${person.id}`}><Avatar size="xl" fallback={person.id.toUpperCase()} /></SharedElement>
+      <p className="m-0 text-title-lg">{person.name}</p>
+      <Button variant="outlined" onClick={() => go(null)}>Back</Button>
+    </Card>
+  ) : (
+    <div className="flex w-full flex-col gap-2">
+      {people.map((p) => (
+        <button key={p.id} type="button" onClick={() => go(p.id)} className="nx-state-layer flex items-center gap-3 rounded-shape-container border border-[var(--color-outline-variant)] p-3 text-start">
+          <SharedElement name={`avatar-${p.id}`}><Avatar size="sm" fallback={p.id.toUpperCase()} /></SharedElement>
+          <span className="text-body-md">{p.name} · {p.role}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Visual only: run the change in `startViewTransition()` and move focus to the new view as usual.
+
+Related: [motion-fade](motion-fade.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v4.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v4.4.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -79,6 +79,10 @@ Never use a component marked deprecated.
 - [Select](components/select.md) `@nexub/react`: Accessible dropdown select built on Radix UI. Supports groups and search.
 - [Switch](components/switch.md) `@nexub/react`: Toggle control for binary on/off settings. Built on Radix UI Switch.
 
+## Components — Forms
+
+- [Floating Input](components/floating-input.md) `@nexub/react`: A text field whose label sits inside and floats up on focus or input. CSS only.
+
 ## Components — Inline Primitives
 
 - [Aurora](components/aurora.md) `@nexub/react`: A decorative background of slow-drifting colour fields from the accent roles. Subtle by default, richer under data-expression="vivid".
@@ -125,6 +129,8 @@ Never use a component marked deprecated.
 - [Reveal](components/motion-reveal.md) `@nexub/react`: Fades its content up as it scrolls into view, in marketing mode. CSS scroll-driven where supported, an IntersectionObserver elsewhere; content on screen at load, and every visitor without JS or with reduced motion, just sees it.
 - [Scale](components/motion-scale.md) `@nexub/react`: Scales content in/out from its center.
 - [Slide](components/motion-slide.md) `@nexub/react`: Slides content in from a direction based on the `in` prop.
+- [Scroll Progress](components/scroll-progress.md) `@nexub/react`: A thin bar along the top that fills as the page scrolls. CSS only.
+- [Shared Element](components/shared-element.md) `@nexub/react`: Morphs the same element between two states or pages inside a view transition.
 
 ## Components — Navigation
 

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v4.3.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v4.4.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",