@a4ui/core 0.10.1 → 0.11.0

package/dist/layout/AppShell.d.ts

@@ -22,8 +22,8 @@ interface AppShellProps extends ParentProps {
  * an optional sidebar slot plus a content column (optional banner + topbar +
  * routed `<main>`). Slot-based and unopinionated about the sidebar — pass
  * your own component via `sidebar` and it manages its own width/collapse.
- * `<main>` is wrapped in `Suspense` + an `ErrorBoundary` (with a ~160ms page
- * cross-fade) so a route chunk failing or still loading never blanks the shell.
+ * `<main>` is wrapped in `Suspense` + an `ErrorBoundary` so a route chunk
+ * failing or still loading never blanks the shell.
  *
  * @example
  * ```tsx

package/dist/lib/motion.d.ts

@@ -1,4 +1,5 @@
 import { Accessor } from 'solid-js';
+export { animate, inView, scroll, stagger, spring } from 'motion';
 /**
  * Snapshot of the user's reduced-motion preference at call time. Not
  * reactive to preference changes mid-session (matches theme.ts's one-shot
@@ -46,11 +47,8 @@ export declare function setMotionForced(on: boolean): void;
  */
 export declare function motionReduced(): boolean;
 /**
- * Tweens a numeric signal toward `target()` using requestAnimationFrame +
- * an ease-out curve (solid-motionone/@motionone don't expose spring easing
- * yet, and this needs to interpolate a plain number rather than a DOM
- * property, so it's a small hand-rolled WAAPI-adjacent tween for KPI count-up).
- * Jumps straight to the target under prefers-reduced-motion.
+ * Tweens a numeric signal toward `target()` with Motion's `animate` (ease-out),
+ * for KPI count-ups. Jumps straight to the target under reduced motion.
  *
  * @example
  * ```tsx
@@ -59,3 +57,20 @@ export declare function motionReduced(): boolean;
  * ```
  */
 export declare function createCountUp(target: Accessor<number>, durationMs?: number): Accessor<number>;
+/**
+ * Fade + slide an element in on mount with Motion (ease-out), respecting
+ * reduced motion (a no-op then). Call it from a ref/onMount; use `delay` to
+ * stagger a row.
+ *
+ * @example
+ * ```tsx
+ * let el!: HTMLDivElement
+ * onMount(() => animateIn(el, { delay: 0.1 }))
+ * return <div ref={el}>…</div>
+ * ```
+ */
+export declare function animateIn(el: Element, opts?: {
+    y?: number;
+    duration?: number;
+    delay?: number;
+}): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -106,8 +106,7 @@
     "@tanstack/solid-virtual": "^3.13.33",
     "clsx": "^2.1.1",
     "lucide-solid": "^1.23.0",
-    "solid-motionone": "^1.0.4",
-    "solid-transition-group": "^0.3.0",
+    "motion": "^12.42.2",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {

package/preset.js

@@ -66,6 +66,31 @@ const glass = plugin(({ addComponents }) => {
         'radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / 1), hsl(var(--accent) / 0.55) 42%, transparent 72%)',
     },
 
+    // ---- Field focus/error "bloom" ----
+    // Theme-aware glow for text fields: the colour comes from the theme's --ring
+    // (focus) or --destructive (invalid), so each theme blooms in its own hue.
+    // Applied via the `a4-field` class on inputs/triggers.
+    '.a4-field': {
+      transition: 'box-shadow .16s ease, border-color .16s ease',
+    },
+    '.a4-field:focus, .a4-field:focus-within': {
+      outline: 'none',
+      borderColor: 'hsl(var(--ring))',
+      boxShadow: '0 0 0 3px hsl(var(--ring) / 0.22), 0 0 16px -2px hsl(var(--ring) / 0.55)',
+    },
+    '.a4-field[aria-invalid="true"], .a4-field[data-invalid]': {
+      borderColor: 'hsl(var(--destructive))',
+      boxShadow: '0 0 0 2px hsl(var(--destructive) / 0.18)',
+    },
+    '.a4-field[aria-invalid="true"]:focus, .a4-field[data-invalid]:focus': {
+      outline: 'none',
+      boxShadow: '0 0 0 3px hsl(var(--destructive) / 0.3), 0 0 16px -2px hsl(var(--destructive) / 0.6)',
+    },
+    // Light backgrounds swallow soft glows — bloom a touch stronger there.
+    "[data-theme='light'] .a4-field:focus, [data-theme='light'] .a4-field:focus-within": {
+      boxShadow: '0 0 0 3px hsl(var(--ring) / 0.3), 0 0 18px -2px hsl(var(--ring) / 0.65)',
+    },
+
     // ---- Floating overlay glass (menus, modals, drawers, toasts) ----
     '.bg-glass': {
       background: 'hsl(var(--card) / 0.72)',