@microbit/ui 0.1.0-alpha.12 → 0.1.0-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.14",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",
@@ -25,6 +25,8 @@
   "scripts": {
     "panda": "panda codegen",
     "typecheck": "npm run panda && tsc --noEmit",
+    "pretest": "npm run panda",
+    "test": "vitest run",
     "prestorybook": "npm run panda",
     "storybook": "storybook dev -p 6006 --no-open",
     "prebuild-storybook": "npm run panda",
@@ -40,9 +42,13 @@
   "devDependencies": {
     "@pandacss/dev": "^1.11.4",
     "@storybook/react-vite": "^10.5.2",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.1.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.5.2",
+    "jsdom": "^29.1.1",
     "react": "^18.3.1",
     "react-aria-components": "^1.19.0",
     "react-dom": "^18.3.1",
@@ -50,7 +56,8 @@
     "react-intl": "^6.6.8",
     "storybook": "^10.5.2",
     "typescript": "^5.4.2",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "tag": "alpha"

package/src/Button.recipe.ts

@@ -120,13 +120,17 @@ export const button = defineRecipe({
         _hover: { bg: "brand.600", _disabled: { bg: "brand.500" } },
         _active: { bg: "brand.700" },
       },
+      // 600/700, matching what python-editor's Chakra outline + red
+      // colorScheme resolved to. (Extracted from ml-trainer at 500/600, but
+      // its one warning button tolerates the darkening; python-editor's
+      // "Reset project" was visibly lighter than its Chakra self.)
       warning: {
         borderWidth: "2px",
-        borderColor: "danger.500",
-        color: "danger.500",
+        borderColor: "danger.600",
+        color: "danger.600",
         bg: "transparent",
-        _hover: { borderColor: "danger.600" },
-        _active: { bg: "danger.50", borderColor: "danger.500" },
+        _hover: { borderColor: "danger.700", color: "danger.700" },
+        _active: { bg: "danger.50" },
       },
       // Chakra's built-in solid + red colorScheme (destructive confirm
       // buttons). Same values as `record` today, but a separate variant so

package/src/Toast.tsx

@@ -102,11 +102,13 @@ export const ToastProvider = () => {
 };
 
 export interface ToastOptions extends ToastContent {
+  /** Auto-dismiss after this many ms. Default 5000. Ignored when `persistent`. */
+  duration?: number;
   /**
-   * Auto-dismiss after ms; null means no auto-dismiss (Chakra's semantics).
-   * RAC enforces a 5000ms minimum for accessibility.
+   * Never auto-dismiss. The close button is forced on so the toast is not
+   * permanent and unremovable.
    */
-  duration?: number | null;
+  persistent?: boolean;
 }
 
 export interface ToastFn {
@@ -123,8 +125,9 @@ export interface ToastFn {
 }
 
 /**
- * useToast — imperative toast trigger matching the shape of Chakra's
- * `useToast()` call sites: `toast({ title, description, status, duration })`.
+ * useToast — imperative toast trigger in the shape of Chakra's `useToast()`
+ * call sites: `toast({ title, description, status, duration })`. Unlike
+ * Chakra there is no `duration: null`; use `persistent: true` instead.
  */
 export const useToast = (): ToastFn =>
   useMemo(() => {
@@ -137,6 +140,7 @@ export const useToast = (): ToastFn =>
       status,
       isClosable,
       duration,
+      persistent,
     }: ToastOptions) => {
       if (id && isActive(id)) {
         return;
@@ -147,11 +151,9 @@ export const useToast = (): ToastFn =>
           title,
           description,
           status,
-          // A toast that never times out must be dismissable or it is
-          // permanent and unremovable; force the close button on.
-          isClosable: isClosable || duration == null,
+          isClosable: isClosable || persistent,
         },
-        { timeout: duration ?? undefined },
+        { timeout: persistent ? undefined : duration ?? 5000 },
       );
     };
     const update = (id: string, options: ToastOptions) => {