@vvedantb/ui 0.29.1 → 0.30.0

package/src/ui/empty-state.tsx

@@ -1,34 +1,102 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { m, type Variants } from "motion/react";
+import { motionEase } from "../motion/presets";
+import { useUiConfig } from "./ui-config";
 import { cn } from "../utils/cn";
 
 // `default`: open centred block, large bare icon, one muted line (a page or list body).
 // `panel`: filled rounded block with the icon in a tile (a detail panel or modal section).
 export type EmptyStateVariant = "default" | "panel";
 
-const EmptyStateContext = React.createContext<EmptyStateVariant>("default");
+/**
+ * App-wide look for `EmptyState`. `classes` merge after each part's built-in
+ * classes. `classes.iconWrap` puts the `default` icon in a wrapper (a circle,
+ * say) and drops the icon's own margin. `enter` turns on the staggered
+ * entrance for every Root that does not set `enter` itself.
+ */
+export interface EmptyStateConfig {
+  classes?: {
+    root?: string;
+    iconWrap?: string;
+    icon?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+  };
+  enter?: boolean;
+}
+
+const EmptyStateContext = React.createContext<{ variant: EmptyStateVariant; enter: boolean }>({
+  variant: "default",
+  enter: false,
+});
+
+const CONTAINER_VARIANTS: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.04 } },
+};
+
+const ITEM_VARIANTS: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.22, ease: motionEase } },
+};
 
 export type EmptyStateRootProps = React.ComponentProps<"div"> & {
   /** Layout for the other parts. Default `"default"`. */
   variant?: EmptyStateVariant;
+  /**
+   * Parts rise and fade in one after another. Default `UiConfig.EmptyState.enter`,
+   * else `false`. Pass `false` for an empty state that flashes often (a filter
+   * with no results). Uses `m`, so it needs `LazyMotion`.
+   */
+  enter?: boolean;
 };
 
-function Root({ variant = "default", className, ...props }: EmptyStateRootProps) {
+function Root({ variant = "default", enter: enterProp, className, ...props }: EmptyStateRootProps) {
+  const config = useUiConfig("EmptyState");
+  const enter = enterProp ?? config?.enter ?? false;
+  const classes = cn(
+    "flex flex-col items-center justify-center text-center",
+    variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
+    config?.classes?.root,
+    className,
+  );
   return (
-    <EmptyStateContext value={variant}>
-      <div
-        {...props}
-        className={cn(
-          "flex flex-col items-center justify-center text-center",
-          variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
-          className,
-        )}
-      />
+    <EmptyStateContext value={{ variant, enter }}>
+      {enter ? (
+        <m.div
+          {...stripMotionConflicts(props)}
+          className={classes}
+          variants={CONTAINER_VARIANTS}
+          initial="hidden"
+          animate="show"
+        />
+      ) : (
+        <div {...props} className={classes} />
+      )}
     </EmptyStateContext>
   );
 }
 Root.displayName = "EmptyState.Root";
 
+// The DOM drag and animation handlers clash with Motion's own prop types.
+function stripMotionConflicts(props: React.ComponentProps<"div">) {
+  const {
+    onDrag: _onDrag,
+    onDragStart: _onDragStart,
+    onDragEnd: _onDragEnd,
+    onAnimationStart: _onAnimationStart,
+    ...rest
+  } = props;
+  return rest;
+}
+
+/** A part's own element: `m.*` with the item variants while the Root enters. */
+function useItemMotion() {
+  return React.use(EmptyStateContext).enter ? { variants: ITEM_VARIANTS } : null;
+}
+
 export type EmptyStateIconProps = {
   /** Icon component, e.g. a Tabler icon. */
   icon: React.ComponentType<{ size?: number | string; stroke?: number | string; className?: string }>;
@@ -41,25 +109,43 @@ export type EmptyStateIconProps = {
 };
 
 function Icon({ icon: IconComponent, size, stroke, className }: EmptyStateIconProps) {
-  if (React.use(EmptyStateContext) === "panel") {
-    return (
-      <div
-        className={cn(
-          "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
-          className,
-        )}
-      >
-        <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />
-      </div>
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  if (variant === "panel") {
+    const tileClass = cn(
+      "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
+      className,
+    );
+    const glyph = <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />;
+    return itemMotion ? (
+      <m.div {...itemMotion} className={tileClass}>
+        {glyph}
+      </m.div>
+    ) : (
+      <div className={tileClass}>{glyph}</div>
     );
   }
-  return (
+  const wrapClass = config?.classes?.iconWrap;
+  if (wrapClass !== undefined) {
+    const glyph = <IconComponent size={size ?? 40} stroke={stroke} className={config?.classes?.icon} />;
+    const outer = cn(wrapClass, className);
+    return itemMotion ? (
+      <m.div {...itemMotion} className={outer}>
+        {glyph}
+      </m.div>
+    ) : (
+      <div className={outer}>{glyph}</div>
+    );
+  }
+  const glyph = (
     <IconComponent
       size={size ?? 40}
       stroke={stroke}
-      className={cn("mb-3 text-muted-foreground", className)}
+      className={cn("mb-3 text-muted-foreground", config?.classes?.icon, className)}
     />
   );
+  return itemMotion ? <m.div {...itemMotion}>{glyph}</m.div> : glyph;
 }
 Icon.displayName = "EmptyState.Icon";
 
@@ -69,40 +155,57 @@ export type EmptyStateTitleProps = React.ComponentProps<"p"> & {
 };
 
 function Title({ asChild = false, className, ...props }: EmptyStateTitleProps) {
-  const Comp = asChild ? Slot : "p";
-  return (
-    <Comp
-      {...props}
-      className={cn(
-        "text-sm font-medium text-foreground",
-        React.use(EmptyStateContext) === "default" && "mb-1",
-        className,
-      )}
-    />
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn(
+    "text-sm font-medium text-foreground",
+    variant === "default" && "mb-1",
+    config?.classes?.title,
+    className,
   );
+  if (asChild) return <Slot {...props} className={classes} />;
+  if (itemMotion) return <m.p {...stripPConflicts(props)} {...itemMotion} className={classes} />;
+  return <p {...props} className={classes} />;
 }
 Title.displayName = "EmptyState.Title";
 
+function stripPConflicts(props: React.ComponentProps<"p">) {
+  const {
+    onDrag: _onDrag,
+    onDragStart: _onDragStart,
+    onDragEnd: _onDragEnd,
+    onAnimationStart: _onAnimationStart,
+    ...rest
+  } = props;
+  return rest;
+}
+
 export type EmptyStateDescriptionProps = React.ComponentProps<"p">;
 
 function Description({ className, ...props }: EmptyStateDescriptionProps) {
-  return (
-    <p
-      {...props}
-      className={cn(
-        React.use(EmptyStateContext) === "panel" && "mt-1 max-w-[240px]",
-        "text-sm text-muted-foreground",
-        className,
-      )}
-    />
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn(
+    variant === "panel" && "mt-1 max-w-[240px]",
+    "text-sm text-muted-foreground",
+    config?.classes?.description,
+    className,
   );
+  if (itemMotion) return <m.p {...stripPConflicts(props)} {...itemMotion} className={classes} />;
+  return <p {...props} className={classes} />;
 }
 Description.displayName = "EmptyState.Description";
 
 export type EmptyStateActionsProps = React.ComponentProps<"div">;
 
 function Actions({ className, ...props }: EmptyStateActionsProps) {
-  return <div {...props} className={cn("mt-4", className)} />;
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn("mt-4", config?.classes?.actions, className);
+  if (itemMotion) return <m.div {...stripMotionConflicts(props)} {...itemMotion} className={classes} />;
+  return <div {...props} className={classes} />;
 }
 Actions.displayName = "EmptyState.Actions";
 

package/src/ui/rolling-number.tsx

@@ -0,0 +1,62 @@
+import { m } from "motion/react";
+import { springTransition } from "../motion/presets";
+import { useCn } from "./ui-config";
+
+const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] as const;
+
+function isDigit(char: string): boolean {
+  return char >= "0" && char <= "9";
+}
+
+/**
+ * Shows an already formatted value ("1m 05s", "42%", "$1.20") and rolls each
+ * digit to its new value instead of jumping. Use it for numbers that tick
+ * while the user watches (timers, meters, running totals). `CountPop` is for a
+ * badge that changes while the user looks elsewhere.
+ *
+ * Format the value first: only the characters it gets are animated. Columns
+ * are keyed from the right, so "9s" → "10s" rolls the units column and mounts
+ * only the new tens column. Uses `m`, so the app must render it inside
+ * `LazyMotion`.
+ */
+export function RollingNumber({ value, className }: { value: string; className?: string }) {
+  const cn = useCn();
+  const chars = [...value];
+  return (
+    <span className={cn("inline-flex tabular-nums", className)}>
+      <span className="sr-only">{value}</span>
+      {chars.map((char, index) => {
+        const key = chars.length - index;
+        return isDigit(char) ? (
+          <DigitColumn key={key} digit={Number(char)} />
+        ) : (
+          <span key={key} aria-hidden className="whitespace-pre">
+            {char}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+function DigitColumn({ digit }: { digit: number }) {
+  return (
+    <span aria-hidden className="relative inline-block h-[1lh] overflow-hidden">
+      {/* Holds the width of one digit; the moving column is absolute. */}
+      <span className="invisible">0</span>
+      <m.span
+        className="absolute inset-x-0 top-0 flex flex-col"
+        initial={false}
+        // The column is ten rows tall, so one row is 10% of its height.
+        animate={{ y: `${-digit * 10}%` }}
+        transition={springTransition}
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="h-[1lh]">
+            {d}
+          </span>
+        ))}
+      </m.span>
+    </span>
+  );
+}

package/src/ui/send-queue-icon.tsx

@@ -0,0 +1,55 @@
+import { m } from "motion/react";
+import { springTransition } from "../motion/presets";
+
+interface Segment {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+type Shape = readonly [Segment, Segment, Segment];
+
+// Both shapes use the same three lines, so the arrow's own strokes move into
+// the queue bars instead of one icon fading out and another fading in.
+// Arrow points match Tabler's `IconArrowUp` on its 24px grid.
+const ARROW: Shape = [
+  { x1: 6, y1: 11, x2: 12, y2: 5 },
+  { x1: 12, y1: 5, x2: 12, y2: 19 },
+  { x1: 18, y1: 11, x2: 12, y2: 5 },
+];
+
+const QUEUE: Shape = [
+  { x1: 5, y1: 7, x2: 19, y2: 7 },
+  { x1: 5, y1: 12, x2: 19, y2: 12 },
+  { x1: 19, y1: 17, x2: 5, y2: 17 },
+];
+
+/**
+ * A send arrow that turns into a stack of bars when `queued`: while the agent
+ * works, a send joins the queue. Line N of the arrow becomes line N of the
+ * stack. Uses `m`, so the app must render it inside `LazyMotion`.
+ */
+export function SendQueueIcon({ queued, className = "size-4" }: { queued: boolean; className?: string }) {
+  const shape = queued ? QUEUE : ARROW;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      className={className}
+      aria-hidden
+    >
+      {shape.map((segment, index) => (
+        <m.line
+          key={index}
+          initial={false}
+          animate={{ x1: segment.x1, y1: segment.y1, x2: segment.x2, y2: segment.y2 }}
+          transition={springTransition}
+        />
+      ))}
+    </svg>
+  );
+}

package/src/ui/ui-config.tsx

@@ -45,6 +45,8 @@ import type { SettingsSectionConfig } from "../../app/src/settings/SettingsSecti
 import type { ShimmerConfig } from "../ai-elements/shimmer";
 import type { SliderConfig } from "./slider";
 import type { SonnerToasterConfig } from "./sonner";
+import type { ConfirmDialogConfig } from "./confirm-dialog-parts";
+import type { EmptyStateConfig } from "./empty-state";
 import type { StatusDotConfig } from "./status-dot";
 import type { SwitchConfig } from "./switch";
 import type { TableConfig } from "./table";
@@ -93,6 +95,8 @@ export interface UiConfig {
   ContextMenu?: ContextMenuConfig;
   Conversation?: ConversationConfig;
   Dialog?: DialogConfig;
+  ConfirmDialog?: ConfirmDialogConfig;
+  EmptyState?: EmptyStateConfig;
   DropdownMenu?: DropdownMenuConfig;
   Gantt?: GanttConfig;
   HoverCard?: HoverCardConfig;

package/tokens/src/native.ts

@@ -1,17 +1,18 @@
 /**
- * JS tokens for React Native. Values match `tokens.css`
- * (oklch neutrals → hex, 1rem = 16).
+ * JS tokens for React Native. The neutrals and radii match `tokens.css`
+ * (oklch → sRGB hex, 1rem = 16). `fill`, `hairline` and `radius.card` are
+ * native chrome with no web token.
  */
 export const tokens = {
   color: {
-    background: { light: "#f6f6f6", dark: "#1f1f1f" },
-    foreground: { light: "#242426", dark: "#fafafa" },
-    muted: { light: "#737373", dark: "#b3b3b3" },
-    border: { light: "#e5e5e5", dark: "#474747" },
-    surface: { light: "#ffffff", dark: "#242426" },
-    surfaceSecondary: { light: "#f2f2f2", dark: "#2a2a2c" },
-    surfaceCard: { light: "#fafafa", dark: "#2a2a2c" },
-    separator: { light: "#ebebeb", dark: "#404040" },
+    background: { light: "#f5f5f5", dark: "#060606" },
+    foreground: { light: "#181818", dark: "#fcfcfc" },
+    muted: { light: "#727272", dark: "#a0a0a0" },
+    border: { light: "#dedede", dark: "#292929" },
+    surface: { light: "#ffffff", dark: "#181818" },
+    surfaceSecondary: { light: "#efefef", dark: "#242323" },
+    surfaceCard: { light: "#f8f8f8", dark: "#242323" },
+    separator: { light: "#e4e4e4", dark: "#222222" },
     white: "#ffffff",
     black: "#000000",
     hairline: {
@@ -20,12 +21,12 @@ export const tokens = {
     },
     fill: {
       light: "rgba(255, 255, 255, 0.86)",
-      dark: "rgba(28, 28, 30, 0.88)",
+      dark: "rgba(24, 24, 24, 0.88)",
     },
   },
   radius: {
     lg: 16,
-    field: 20,
+    field: 10,
     md: 14,
     sm: 12,
     card: 24,