@watt-ui/react 0.1.1 → 0.1.3

package/src/components/asset-tree.tsx

@@ -11,8 +11,10 @@ import {
 } from "@headless-tree/core";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { cx } from "../internal.js";
+import { Slot } from "@radix-ui/react-slot";
+import { MotionProvider, motionStyle } from "../motion.js";
 import type { ForwardedRef, RefAttributes, ReactElement } from "react";
-import type { Density, PlantAsset } from "../types.js";
+import type { Density, MotionProps, PartProps, PlantAsset } from "../types.js";
 export interface AssetTreeRow<T> {
   item: T;
   level: number;
@@ -30,10 +32,9 @@ export type AssetTreeItem<T extends PlantAsset> =
         ? never
         : AssetTreeItem<C>
       : never);
-export interface AssetTreeProps<T extends PlantAsset = PlantAsset> extends Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "children"
-> {
+export interface AssetTreeProps<T extends PlantAsset = PlantAsset>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+    MotionProps {
   items: readonly T[];
   children: (row: AssetTreeRow<AssetTreeItem<T>>) => React.ReactNode;
   expandedIds?: string[];
@@ -64,6 +65,7 @@ function Root<T extends PlantAsset>(
     height = 360,
     rowHeight = density === "compact" ? 36 : 48,
     empty,
+    motion,
     className,
     style,
     ...props
@@ -203,7 +205,8 @@ function Root<T extends PlantAsset>(
         data-slot="asset-tree-row"
         data-index={index}
         data-selected={item.isSelected() || undefined}
-        className="absolute top-0 left-0 flex w-full items-center border-b border-[var(--watt-border)] outline-offset-[-2px] data-[selected]:bg-[var(--watt-subtle)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+        data-expanded={item.isExpanded()}
+        className="watt-motion absolute top-0 left-0 flex w-full items-center border-b border-[var(--watt-border)] outline-offset-[-2px] data-[selected]:bg-[var(--watt-subtle)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
         style={{
           height: rowHeight,
           paddingInlineStart: item.getItemMeta().level * 20,
@@ -224,34 +227,56 @@ function Root<T extends PlantAsset>(
     );
   };
   return (
-    <div
-      {...containerProps}
-      {...props}
-      ref={hostRef}
-      data-slot="asset-tree"
-      data-density={density}
-      className={cx("watt-root overflow-auto text-sm", className)}
-      style={{ height, ...style }}
-    >
-      {!items.length ? (
-        empty
-      ) : (
-        <div
-          role="presentation"
-          style={{ height: virtualizer.getTotalSize(), position: "relative" }}
-        >
-          {virtualizer.getVirtualItems().map((row) => {
-            const item = visible[row.index];
-            return item && indexed.has(item.getId())
-              ? renderRow(item, row.index, row.start)
-              : null;
-          })}
-        </div>
-      )}
-    </div>
+    <MotionProvider motion={motion}>
+      <div
+        {...containerProps}
+        {...props}
+        ref={hostRef}
+        data-slot="asset-tree"
+        data-density={density}
+        className={cx("watt-root overflow-auto text-sm", className)}
+        style={{ height, ...style, ...motionStyle(motion) }}
+      >
+        {!items.length ? (
+          empty
+        ) : (
+          <div
+            role="presentation"
+            style={{ height: virtualizer.getTotalSize(), position: "relative" }}
+          >
+            {virtualizer.getVirtualItems().map((row) => {
+              const item = visible[row.index];
+              return item && indexed.has(item.getId())
+                ? renderRow(item, row.index, row.start)
+                : null;
+            })}
+          </div>
+        )}
+      </div>
+    </MotionProvider>
   );
 }
+export interface AssetTreeIndicatorProps extends PartProps {
+  expanded: boolean;
+}
+const Indicator = forwardRef<HTMLElement, AssetTreeIndicatorProps>(
+  ({ expanded, asChild, className, style, ...props }, ref) => {
+    const Component = asChild ? Slot : "span";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        aria-hidden={props["aria-hidden"] ?? true}
+        data-slot="asset-tree-indicator"
+        data-expanded={expanded}
+        className={cx("watt-motion inline-flex shrink-0", className)}
+        style={{ transform: `rotate(${expanded ? 90 : 0}deg)`, ...style }}
+      />
+    );
+  },
+);
 export const AssetTree = {
+  Indicator,
   Root: forwardRef(Root) as <T extends PlantAsset = PlantAsset>(
     props: AssetTreeProps<T> & RefAttributes<HTMLDivElement>,
   ) => ReactElement,

package/src/components/battery-soc.tsx

@@ -2,7 +2,8 @@
 import { createContext, forwardRef, useContext } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part } from "../internal.js";
-import type { PartProps, RootProps, Density } from "../types.js";
+import type { PartProps, RootProps, Density, MotionProps } from "../types.js";
+import { MotionProvider, motionStyle } from "../motion.js";
 const Context = createContext<{
   value: number | null;
   density: Density;
@@ -13,25 +14,39 @@ function useSOC() {
     throw new Error("BatterySOC parts require BatterySOC.Root");
   return value;
 }
-export interface BatterySOCProps extends RootProps {
+export interface BatterySOCProps extends RootProps, MotionProps {
   value: number | null;
 }
 const Root = forwardRef<HTMLElement, BatterySOCProps>(
-  ({ value, asChild, density = "comfortable", className, ...props }, ref) => {
+  (
+    {
+      value,
+      asChild,
+      density = "comfortable",
+      motion,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
     const Component = asChild ? Slot : "div";
     const valid =
       value !== null && Number.isFinite(value) && value >= 0 && value <= 100;
     return (
-      <Context.Provider value={{ value: valid ? value : null, density }}>
-        <Component
-          {...props}
-          ref={ref as never}
-          data-slot="battery-soc"
-          data-invalid={!valid || undefined}
-          data-density={density}
-          className={cx("watt-root flex flex-col gap-3", className)}
-        />
-      </Context.Provider>
+      <MotionProvider motion={motion}>
+        <Context.Provider value={{ value: valid ? value : null, density }}>
+          <Component
+            {...props}
+            ref={ref as never}
+            data-slot="battery-soc"
+            data-invalid={!valid || undefined}
+            data-density={density}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx("watt-root flex flex-col gap-3", className)}
+          />
+        </Context.Provider>
+      </MotionProvider>
     );
   },
 );
@@ -68,7 +83,7 @@ const Fill = forwardRef<HTMLElement, PartProps>(
         aria-hidden="true"
         data-slot="battery-soc-fill"
         className={cx(
-          "h-full bg-[var(--watt-accent)] transition-[width] duration-500 motion-reduce:transition-none",
+          "watt-motion watt-soc-fill h-full bg-[var(--watt-accent)]",
           className,
         )}
         style={{ width: `${value ?? 0}%`, ...style }}

package/src/components/data-freshness.tsx

@@ -1,9 +1,17 @@
 "use client";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part, useNow } from "../internal.js";
 import { parseTimestamp, formatTime } from "../domain.js";
-import type { DataQuality, PartProps, RootProps, Timestamp } from "../types.js";
+import type {
+  DataQuality,
+  MotionProps,
+  PartProps,
+  RootProps,
+  Timestamp,
+} from "../types.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
 interface Freshness {
   timestamp: Timestamp | null;
   quality?: DataQuality;
@@ -14,7 +22,7 @@ function useFreshness() {
   if (!ctx) throw new Error("DataFreshness parts require DataFreshness.Root");
   return ctx;
 }
-export interface DataFreshnessProps extends RootProps, Freshness {}
+export interface DataFreshnessProps extends RootProps, Freshness, MotionProps {}
 const Root = forwardRef<HTMLElement, DataFreshnessProps>(
   (
     {
@@ -23,29 +31,38 @@ const Root = forwardRef<HTMLElement, DataFreshnessProps>(
       density = "comfortable",
       asChild,
       className,
+      motion,
+      style,
       ...props
     },
     ref,
   ) => {
+    const host = useRef<HTMLElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    useChangeFeedback(host, quality, motion);
     const Component = asChild ? Slot : "span";
     return (
-      <Context.Provider value={{ timestamp, quality }}>
-        <Component
-          {...props}
-          ref={ref as never}
-          data-slot="data-freshness"
-          data-density={density}
-          data-quality={quality}
-          className={cx(
-            "watt-root inline-flex items-center gap-2 text-sm text-[var(--watt-muted)] data-[density=compact]:gap-1 data-[density=compact]:text-xs",
-            className,
-          )}
-        />
-      </Context.Provider>
+      <MotionProvider motion={motion}>
+        <Context.Provider value={{ timestamp, quality }}>
+          <Component
+            {...props}
+            ref={hostRef as never}
+            data-slot="data-freshness"
+            data-density={density}
+            data-quality={quality}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx(
+              "watt-root watt-motion inline-flex items-center gap-2 text-sm text-[var(--watt-muted)] data-[density=compact]:gap-1 data-[density=compact]:text-xs",
+              className,
+            )}
+          />
+        </Context.Provider>
+      </MotionProvider>
     );
   },
 );
-export interface FreshnessTimeProps extends React.ComponentPropsWithoutRef<"time"> {
+export interface FreshnessTimeProps
+  extends React.ComponentPropsWithoutRef<"time"> {
   timeZone: string;
   locale?: string;
   formatter?: (timestamp: number) => React.ReactNode;

package/src/components/power-metric.tsx

@@ -1,27 +1,36 @@
 "use client";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part } from "../internal.js";
 import { formatNumber } from "../domain.js";
-import type { PartProps, RootProps } from "../types.js";
-const Root = forwardRef<HTMLElement, RootProps>(
-  ({ asChild, density = "comfortable", className, ...props }, ref) => {
+import type { MotionProps, PartProps, RootProps } from "../types.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
+export interface PowerMetricProps extends RootProps, MotionProps {}
+const Root = forwardRef<HTMLElement, PowerMetricProps>(
+  (
+    { asChild, density = "comfortable", motion, className, style, ...props },
+    ref,
+  ) => {
     const Component = asChild ? Slot : "div";
     return (
-      <Component
-        {...props}
-        ref={ref as never}
-        data-slot="power-metric"
-        data-density={density}
-        className={cx(
-          "watt-root flex flex-col gap-2 data-[density=compact]:gap-1",
-          className,
-        )}
-      />
+      <MotionProvider motion={motion}>
+        <Component
+          {...props}
+          ref={ref as never}
+          data-slot="power-metric"
+          data-density={density}
+          style={{ ...style, ...motionStyle(motion) }}
+          className={cx(
+            "watt-root flex flex-col gap-2 data-[density=compact]:gap-1",
+            className,
+          )}
+        />
+      </MotionProvider>
     );
   },
 );
-export interface MetricValueProps extends PartProps {
+export interface MetricValueProps extends PartProps, MotionProps {
   value: number | null;
   formatter?: (value: number) => React.ReactNode;
   fallback?: React.ReactNode;
@@ -35,20 +44,26 @@ const Value = forwardRef<HTMLElement, MetricValueProps>(
       fallback = "—",
       children,
       className,
+      motion,
+      style,
       ...props
     },
     ref,
   ) => {
+    const host = useRef<HTMLElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    useChangeFeedback(host, value, motion);
     const Component = asChild ? Slot : "span";
     return (
       <Component
         {...props}
-        ref={ref as never}
+        ref={hostRef as never}
         data-slot="power-metric-value"
         className={cx(
-          "text-5xl font-medium tabular-nums tracking-tight",
+          "watt-motion text-5xl font-medium tabular-nums tracking-tight",
           className,
         )}
+        style={{ ...style, ...motionStyle(motion) }}
       >
         {children ??
           (value !== null && Number.isFinite(value)

package/src/components/status-indicator.tsx

@@ -1,26 +1,45 @@
 "use client";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part } from "../internal.js";
-import type { EquipmentStatus, RootProps } from "../types.js";
-export interface StatusIndicatorProps extends RootProps {
+import type { EquipmentStatus, MotionProps, RootProps } from "../types.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
+export interface StatusIndicatorProps extends RootProps, MotionProps {
   status: EquipmentStatus;
 }
 const Root = forwardRef<HTMLElement, StatusIndicatorProps>(
-  ({ status, density = "comfortable", asChild, className, ...props }, ref) => {
+  (
+    {
+      status,
+      density = "comfortable",
+      asChild,
+      motion,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const host = useRef<HTMLElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    useChangeFeedback(host, status, motion);
     const Component = asChild ? Slot : "span";
     return (
-      <Component
-        {...props}
-        ref={ref as never}
-        data-slot="status-indicator"
-        data-status={status}
-        data-density={density}
-        className={cx(
-          "watt-status inline-flex items-center gap-2 text-sm data-[density=compact]:gap-1 data-[density=compact]:text-xs",
-          className,
-        )}
-      />
+      <MotionProvider motion={motion}>
+        <Component
+          {...props}
+          ref={hostRef as never}
+          data-slot="status-indicator"
+          data-status={status}
+          data-density={density}
+          style={{ ...style, ...motionStyle(motion) }}
+          className={cx(
+            "watt-status watt-motion inline-flex items-center gap-2 text-sm data-[density=compact]:gap-1 data-[density=compact]:text-xs",
+            className,
+          )}
+        />
+      </MotionProvider>
     );
   },
 );

package/src/components/telemetry-chart.tsx

@@ -13,6 +13,7 @@ import {
 } from "react";
 import type { EChartsCoreOption, EChartsType } from "echarts/core";
 import { cx, part } from "../internal.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
 import { nearestIndex, prepareSeries, lowerBound } from "../chart/data.js";
 import {
   chartOption,
@@ -24,6 +25,7 @@ import type {
   TelemetrySeries,
   TimeRange,
   DataQuality,
+  MotionProps,
 } from "../types.js";
 export interface ChartInspection {
   timestamp: number;
@@ -36,7 +38,9 @@ export interface ChartInspection {
     quality?: DataQuality;
   }[];
 }
-export interface TelemetryChartProps extends Omit<RootProps, "onError"> {
+export interface TelemetryChartProps
+  extends Omit<RootProps, "onError">,
+    MotionProps {
   series: readonly TelemetrySeries[];
   timeZone: string;
   locale?: string;
@@ -83,6 +87,8 @@ const Root = forwardRef<HTMLDivElement, TelemetryChartProps>(
       asChild,
       children,
       className,
+      style,
+      motion,
       ...props
     },
     ref,
@@ -142,34 +148,37 @@ const Root = forwardRef<HTMLDivElement, TelemetryChartProps>(
     }, [options, prepared, range, timeZone]);
     const Component = asChild ? Slot : "div";
     return (
-      <Context.Provider
-        value={{
-          series: prepared,
-          timeZone,
-          locale,
-          range,
-          onRangeChange,
-          sampling,
-          options,
-          events,
-          inspection,
-          inspect,
-          hidden,
-          toggle,
-          onReady,
-          onError,
-        }}
-      >
-        <Component
-          {...props}
-          ref={ref}
-          data-slot="telemetry-chart"
-          data-density={density}
-          className={cx("watt-root min-w-0", className)}
+      <MotionProvider motion={motion}>
+        <Context.Provider
+          value={{
+            series: prepared,
+            timeZone,
+            locale,
+            range,
+            onRangeChange,
+            sampling,
+            options,
+            events,
+            inspection,
+            inspect,
+            hidden,
+            toggle,
+            onReady,
+            onError,
+          }}
         >
-          {children}
-        </Component>
-      </Context.Provider>
+          <Component
+            {...props}
+            ref={ref}
+            data-slot="telemetry-chart"
+            data-density={density}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx("watt-root min-w-0", className)}
+          >
+            {children}
+          </Component>
+        </Context.Provider>
+      </MotionProvider>
     );
   },
 );
@@ -432,11 +441,18 @@ const Legend = forwardRef<
               type="button"
               aria-pressed={!ctx.hidden.has(s.id)}
               onClick={() => ctx.toggle(s.id)}
-              className="inline-flex items-center gap-2"
+              className="watt-motion watt-chart-legend-toggle inline-flex items-center gap-2"
             >
               <span
-                className="h-2 w-2 rounded-full"
-                style={{ background: s.color ?? "var(--watt-accent)" }}
+                aria-hidden="true"
+                data-slot="telemetry-chart-legend-marker"
+                className="watt-motion h-2 w-2 rounded-full border border-current"
+                style={{
+                  color: s.color ?? "var(--watt-accent)",
+                  background: ctx.hidden.has(s.id)
+                    ? "transparent"
+                    : "currentColor",
+                }}
               />
               {s.label}
             </button>
@@ -446,24 +462,30 @@ const Legend = forwardRef<
     </div>
   );
 });
-function Tooltip({
-  children,
-  ...props
-}: Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-  children: (inspection: ChartInspection | null) => React.ReactNode;
-}) {
+const Tooltip = forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: (inspection: ChartInspection | null) => React.ReactNode;
+  }
+>(function Tooltip({ children, className, ...props }, ref) {
   const { inspection } = useChart();
+  const host = useRef<HTMLDivElement>(null);
+  const hostRef = useComposedRefs(host, ref);
+  useChangeFeedback(host, inspection !== null);
   return (
     <div
       {...props}
+      ref={hostRef}
       data-slot="telemetry-chart-tooltip"
+      data-state={inspection ? "active" : "idle"}
+      className={cx("watt-motion", className)}
       aria-live={props["aria-live"] ?? "polite"}
       aria-atomic={props["aria-atomic"] ?? true}
     >
       {children(inspection)}
     </div>
   );
-}
+});
 export const TelemetryChart = {
   Root,
   Canvas,

package/src/index.ts

@@ -8,7 +8,10 @@ export { AlarmFeed } from "./components/alarm-feed.js";
 export { AssetTree } from "./components/asset-tree.js";
 export { formatNumber, formatTime, parseTimestamp } from "./domain.js";
 export type * from "./types.js";
-export type { MetricValueProps } from "./components/power-metric.js";
+export type {
+  PowerMetricProps,
+  MetricValueProps,
+} from "./components/power-metric.js";
 export type { StatusIndicatorProps } from "./components/status-indicator.js";
 export type { BatterySOCProps } from "./components/battery-soc.js";
 export type {
@@ -34,4 +37,5 @@ export type {
   AssetTreeProps,
   AssetTreeRow,
   AssetTreeItem,
+  AssetTreeIndicatorProps,
 } from "./components/asset-tree.js";