@refineui/react 0.0.3 → 0.0.5

package/dist/spec/contract-index.json

@@ -3,7 +3,7 @@
   "contractLayer": "component-spec",
   "contractLayerVersion": "1.1",
   "status": "catalog",
-  "generatedAt": "2026-09-09T11:23:01.510Z",
+  "generatedAt": "2026-09-18T17:04:40.672Z",
   "role": "Behavior and DOM contracts — source of truth for Doctor, MCP, and Docs",
   "files": {
     "manifest": "./manifest.json",

package/dist/spec/token-graph.json

@@ -534,11 +534,11 @@
       "layer": "component"
     },
     {
-      "id": "semantic.surfacePopover",
-      "layer": "semantic"
+      "id": "component.tooltip.default.foreground",
+      "layer": "component"
     },
     {
-      "id": "component.tooltip.default.foreground",
+      "id": "component.tooltip.default.border",
       "layer": "component"
     },
     {
@@ -1017,6 +1017,26 @@
       "id": "semantic.foregroundOnSuccess",
       "layer": "semantic"
     },
+    {
+      "id": "component.badge.warning.background",
+      "layer": "component"
+    },
+    {
+      "id": "semantic.backgroundWarning",
+      "layer": "semantic"
+    },
+    {
+      "id": "foundation.yellow300",
+      "layer": "foundation"
+    },
+    {
+      "id": "component.badge.warning.foreground",
+      "layer": "component"
+    },
+    {
+      "id": "semantic.foregroundOnWarning",
+      "layer": "semantic"
+    },
     {
       "id": "component.badge.danger.background",
       "layer": "component"
@@ -1153,14 +1173,6 @@
       "id": "component.progress.indicator.warning",
       "layer": "component"
     },
-    {
-      "id": "semantic.backgroundWarning",
-      "layer": "semantic"
-    },
-    {
-      "id": "foundation.yellow300",
-      "layer": "foundation"
-    },
     {
       "id": "component.progress.indicator.danger",
       "layer": "component"
@@ -1397,6 +1409,10 @@
       "id": "component.toast.message",
       "layer": "component"
     },
+    {
+      "id": "component.toast.border",
+      "layer": "component"
+    },
     {
       "id": "component.toast.accent.default",
       "layer": "component"
@@ -1805,6 +1821,14 @@
       "id": "component.divider.line",
       "layer": "component"
     },
+    {
+      "id": "component.divider.label",
+      "layer": "component"
+    },
+    {
+      "id": "component.divider.icon",
+      "layer": "component"
+    },
     {
       "id": "component.avatar.overflow.background",
       "layer": "component"
@@ -3025,16 +3049,16 @@
     },
     {
       "from": "component.tooltip.default.background",
-      "to": "semantic.surfacePopover"
+      "to": "semantic.backgroundPrimary"
     },
     {
-      "from": "semantic.surfacePopover",
+      "from": "semantic.backgroundPrimary",
       "to": "foundation.neutralWhite",
       "context": "light"
     },
     {
-      "from": "semantic.surfacePopover",
-      "to": "foundation.neutral750",
+      "from": "semantic.backgroundPrimary",
+      "to": "foundation.neutral900",
       "context": "dark"
     },
     {
@@ -3051,18 +3075,32 @@
       "to": "foundation.neutralWhite",
       "context": "dark"
     },
+    {
+      "from": "component.tooltip.default.border",
+      "to": "semantic.borderDefault"
+    },
+    {
+      "from": "semantic.borderDefault",
+      "to": "foundation.neutral300",
+      "context": "light"
+    },
+    {
+      "from": "semantic.borderDefault",
+      "to": "foundation.neutral650",
+      "context": "dark"
+    },
     {
       "from": "component.popover.default.background",
-      "to": "semantic.surfacePopover"
+      "to": "semantic.backgroundPrimary"
     },
     {
-      "from": "semantic.surfacePopover",
+      "from": "semantic.backgroundPrimary",
       "to": "foundation.neutralWhite",
       "context": "light"
     },
     {
-      "from": "semantic.surfacePopover",
-      "to": "foundation.neutral750",
+      "from": "semantic.backgroundPrimary",
+      "to": "foundation.neutral900",
       "context": "dark"
     },
     {
@@ -4361,6 +4399,34 @@
       "to": "foundation.neutralBlack",
       "context": "dark"
     },
+    {
+      "from": "component.badge.warning.background",
+      "to": "semantic.backgroundWarning"
+    },
+    {
+      "from": "semantic.backgroundWarning",
+      "to": "foundation.yellow300",
+      "context": "light"
+    },
+    {
+      "from": "semantic.backgroundWarning",
+      "to": "foundation.yellow300",
+      "context": "dark"
+    },
+    {
+      "from": "component.badge.warning.foreground",
+      "to": "semantic.foregroundOnWarning"
+    },
+    {
+      "from": "semantic.foregroundOnWarning",
+      "to": "foundation.neutralWhite",
+      "context": "light"
+    },
+    {
+      "from": "semantic.foregroundOnWarning",
+      "to": "foundation.neutralBlack",
+      "context": "dark"
+    },
     {
       "from": "component.badge.danger.background",
       "to": "semantic.backgroundError"
@@ -4881,16 +4947,16 @@
     },
     {
       "from": "component.chart.tooltip.background",
-      "to": "semantic.surfacePopover"
+      "to": "semantic.backgroundPrimary"
     },
     {
-      "from": "semantic.surfacePopover",
+      "from": "semantic.backgroundPrimary",
       "to": "foundation.neutralWhite",
       "context": "light"
     },
     {
-      "from": "semantic.surfacePopover",
-      "to": "foundation.neutral750",
+      "from": "semantic.backgroundPrimary",
+      "to": "foundation.neutral900",
       "context": "dark"
     },
     {
@@ -5301,16 +5367,16 @@
     },
     {
       "from": "component.toast.background",
-      "to": "semantic.surfacePopover"
+      "to": "semantic.backgroundPrimary"
     },
     {
-      "from": "semantic.surfacePopover",
+      "from": "semantic.backgroundPrimary",
       "to": "foundation.neutralWhite",
       "context": "light"
     },
     {
-      "from": "semantic.surfacePopover",
-      "to": "foundation.neutral750",
+      "from": "semantic.backgroundPrimary",
+      "to": "foundation.neutral900",
       "context": "dark"
     },
     {
@@ -5327,6 +5393,20 @@
       "to": "foundation.neutralWhite",
       "context": "dark"
     },
+    {
+      "from": "component.toast.border",
+      "to": "semantic.borderDefault"
+    },
+    {
+      "from": "semantic.borderDefault",
+      "to": "foundation.neutral300",
+      "context": "light"
+    },
+    {
+      "from": "semantic.borderDefault",
+      "to": "foundation.neutral650",
+      "context": "dark"
+    },
     {
       "from": "component.toast.accent.default",
       "to": "semantic.foregroundPrimary"
@@ -5819,16 +5899,16 @@
     },
     {
       "from": "component.menu.panel.background",
-      "to": "semantic.backgroundSurface"
+      "to": "semantic.backgroundPrimary"
     },
     {
-      "from": "semantic.backgroundSurface",
+      "from": "semantic.backgroundPrimary",
       "to": "foundation.neutralWhite",
       "context": "light"
     },
     {
-      "from": "semantic.backgroundSurface",
-      "to": "foundation.neutral800",
+      "from": "semantic.backgroundPrimary",
+      "to": "foundation.neutral900",
       "context": "dark"
     },
     {
@@ -5847,16 +5927,16 @@
     },
     {
       "from": "component.menu.list.background",
-      "to": "semantic.backgroundSurface"
+      "to": "semantic.backgroundPrimary"
     },
     {
-      "from": "semantic.backgroundSurface",
+      "from": "semantic.backgroundPrimary",
       "to": "foundation.neutralWhite",
       "context": "light"
     },
     {
-      "from": "semantic.backgroundSurface",
-      "to": "foundation.neutral800",
+      "from": "semantic.backgroundPrimary",
+      "to": "foundation.neutral900",
       "context": "dark"
     },
     {
@@ -6657,6 +6737,34 @@
       "to": "foundation.neutral650",
       "context": "dark"
     },
+    {
+      "from": "component.divider.label",
+      "to": "semantic.foregroundPrimary"
+    },
+    {
+      "from": "semantic.foregroundPrimary",
+      "to": "foundation.primaryBlack",
+      "context": "light"
+    },
+    {
+      "from": "semantic.foregroundPrimary",
+      "to": "foundation.neutralWhite",
+      "context": "dark"
+    },
+    {
+      "from": "component.divider.icon",
+      "to": "semantic.foregroundPrimary"
+    },
+    {
+      "from": "semantic.foregroundPrimary",
+      "to": "foundation.primaryBlack",
+      "context": "light"
+    },
+    {
+      "from": "semantic.foregroundPrimary",
+      "to": "foundation.neutralWhite",
+      "context": "dark"
+    },
     {
       "from": "component.avatar.overflow.background",
       "to": "semantic.backgroundPrimary"

package/dist/spec/token-trace-v2.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-09-09T11:23:01.507Z",
+  "generatedAt": "2026-09-18T17:04:40.668Z",
   "contractLayer": "component-token-trace",
   "tokens": {
     "webIcon.primary": {
@@ -1267,14 +1267,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -1293,18 +1293,33 @@
         }
       }
     },
+    "tooltip.default.border": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "borderDefault",
+        "light": {
+          "foundation": "neutral300",
+          "value": "#DBDBDB"
+        },
+        "dark": {
+          "foundation": "neutral650",
+          "value": "#5B5B5B"
+        }
+      }
+    },
     "popover.default.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -2706,6 +2721,36 @@
         }
       }
     },
+    "badge.warning.background": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "backgroundWarning",
+        "light": {
+          "foundation": "yellow300",
+          "value": "#F1B500"
+        },
+        "dark": {
+          "foundation": "yellow300",
+          "value": "#F1B500"
+        }
+      }
+    },
+    "badge.warning.foreground": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundOnWarning",
+        "light": {
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
+        },
+        "dark": {
+          "foundation": "neutralBlack",
+          "value": "#000000"
+        }
+      }
+    },
     "badge.danger.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
@@ -3265,14 +3310,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -3715,14 +3760,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "surfacePopover",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral750",
-          "value": "#333333"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -3741,6 +3786,21 @@
         }
       }
     },
+    "toast.border": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "borderDefault",
+        "light": {
+          "foundation": "neutral300",
+          "value": "#DBDBDB"
+        },
+        "dark": {
+          "foundation": "neutral650",
+          "value": "#5B5B5B"
+        }
+      }
+    },
     "toast.accent.default": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
@@ -4270,14 +4330,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundSurface",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral800",
-          "value": "#2A2A2A"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -4300,14 +4360,14 @@
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",
       "resolvesTo": {
-        "semantic": "backgroundSurface",
+        "semantic": "backgroundPrimary",
         "light": {
           "foundation": "neutralWhite",
           "value": "#FFFFFF"
         },
         "dark": {
-          "foundation": "neutral800",
-          "value": "#2A2A2A"
+          "foundation": "neutral900",
+          "value": "#1A1A1A"
         }
       }
     },
@@ -5166,6 +5226,36 @@
         }
       }
     },
+    "divider.label": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundPrimary",
+        "light": {
+          "foundation": "primaryBlack",
+          "value": "#212121"
+        },
+        "dark": {
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
+        }
+      }
+    },
+    "divider.icon": {
+      "type": "component",
+      "source": "packages/react/src/tokens/componentColorTokens.ts",
+      "resolvesTo": {
+        "semantic": "foregroundPrimary",
+        "light": {
+          "foundation": "primaryBlack",
+          "value": "#212121"
+        },
+        "dark": {
+          "foundation": "neutralWhite",
+          "value": "#FFFFFF"
+        }
+      }
+    },
     "avatar.overflow.background": {
       "type": "component",
       "source": "packages/react/src/tokens/componentColorTokens.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "RefineUI React components — Pelagornis RefineUI Web Kit",
   "type": "module",
   "license": "MIT",

package/refineui.css

@@ -322,11 +322,18 @@
   transition: none;
   display: block;
 }
-[data-refineui="segmented-control-indicator"][data-ready="true"] {
+/* Animate only after first layout (`data-animate`) so mount does not slide from 0. */
+[data-refineui="segmented-control-indicator"][data-animate="true"] {
+  /* Selection slide: medium + emphasized for a springier thumb move. */
   transition:
     transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
     width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
 }
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="segmented-control-indicator"][data-animate="true"] {
+    transition: none;
+  }
+}
 
 [data-refineui="segmented-control"] [data-refineui="segmented-control-item"]:not(:disabled):not([aria-disabled="true"]):not([data-selected="true"]):hover {
   color: var(--refineui-color-alias-foreground-primary);
@@ -350,11 +357,17 @@
   transition: none;
   display: block;
 }
-[data-refineui="tabs-indicator"][data-ready="true"] {
+/* Animate only after first layout (`data-animate`) — same contract as Segmented Control. */
+[data-refineui="tabs-indicator"][data-animate="true"] {
   transition:
     transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
     width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
 }
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="tabs-indicator"][data-animate="true"] {
+    transition: none;
+  }
+}
 [data-refineui="tab"]:not(:disabled):not([aria-disabled="true"]):not([data-selected="true"]):hover {
   color: var(--refineui-color-alias-foreground-primary-hover);
 }
@@ -1016,14 +1029,10 @@
   width: fit-content;
   max-width: 100%;
   box-sizing: border-box;
-  background-color: color-mix(
-    in srgb,
-    var(--refineui-color-alias-surface-popover) 82%,
-    transparent
-  );
-  backdrop-filter: blur(var(--refineui-spacing-size-xxx-large));
-  -webkit-backdrop-filter: blur(var(--refineui-spacing-size-xxx-large));
-  box-shadow: var(--refineui-elevation-8);
+  /* Semantic: backgroundPrimary + borderDefault (Menu / Select panel). */
+  background-color: var(--refineui-color-alias-background-primary);
+  border-color: var(--refineui-color-alias-border-default);
+  box-shadow: var(--refineui-elevation-toast);
   touch-action: none;
   cursor: grab;
   transform: translate3d(var(--refineui-toast-swipe-x), var(--refineui-toast-swipe-y), 0);
@@ -1051,12 +1060,6 @@
 }
 
 @media (prefers-reduced-transparency: reduce) {
-  [data-refineui="toast"] {
-    background-color: var(--refineui-color-alias-surface-popover);
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-  }
-
   [data-refineui="dialog"] > [role="presentation"],
   [data-refineui="drawer"] > [role="presentation"] {
     backdrop-filter: none;