@microbit/ui 0.5.2 → 0.6.0

package/README.md

@@ -25,10 +25,12 @@ setup below, minus the app/brand presets. Everything an app must do:
 
    Later presets override earlier ones token-by-token — the base recipes and
    semantic tokens reference the brand tokens, which is how a brand swap
-   restyles everything without touching recipes. Set `eject: true` (the stack
-   supplies the full token system). After changing an _external_ preset
-   dependency, regenerate clean: `rm -rf styled-system && npm run panda` —
-   incremental codegen does not detect external preset changes.
+   restyles everything without touching recipes. Install
+   `@pandacss/preset-base` as a direct dependency: `@pandacss/dev` no longer
+   pulls it in, and nothing is added to the stack implicitly. After changing
+   an _external_ preset dependency, regenerate clean:
+   `rm -rf styled-system && npm run panda` — incremental codegen does not
+   detect external preset changes.
 
 2. **Include this package's source** in `panda.config.ts` so Panda extracts
    the styles the components use:
@@ -42,6 +44,14 @@ setup below, minus the app/brand presets. Everything an app must do:
    importers, this package's source included — a `styled-system` alias in
    both `tsconfig.json` `paths` and the bundler config (see the
    `viteFinal` in `apps/storybook`'s `.storybook/main.ts`).
+
+   App code imports `css`, `cx`, `cva` and `sva` from `styled-system/css`
+   and `styled` from `styled-system/jsx`, not from `@microbit/ui`: Panda
+   extracts those only when they are imported from the generated module, and
+   a call through a re-export emits no CSS and no diagnostic. What
+   `@microbit/ui` does export — the components, the layout patterns,
+   `token` — is safe wherever it is used.
+
 4. **Generate and load the CSS** with Panda's PostCSS plugin. Keep Vite's
    default transformer — do **not** set `css.transformer: "lightningcss"`,
    which disables PostCSS. Add a `postcss.config.cjs`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "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",
   "repository": {
@@ -35,15 +35,16 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.11.4",
+    "@pandacss/dev": "^2.4.0",
     "react": "^18.3.1 || ^19.0.0",
     "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-icons": "^4.12.0 || ^5.0.0",
-    "react-intl": "^6.6.8 || ^7.0.0"
+    "react-intl": "^6.6.8 || ^7.0.0 || ^10.1.14 || ^12.0.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.11.4",
+    "@pandacss/dev": "^2.4.0",
+    "@pandacss/preset-base": "^2.4.0",
     "@storybook/react-vite": "^10.5.2",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -51,15 +52,15 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^5.2.0",
-    "jsdom": "^29.1.1",
+    "jsdom": "^30.1.3",
     "react": "^18.3.1",
     "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-dom": "^18.3.1",
     "react-icons": "^4.12.0",
-    "react-intl": "^6.6.8",
+    "react-intl": "^12.1.5",
     "typescript": "^5.4.2",
     "vite": "^7.3.6",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.5"
   }
 }

package/src/system.ts

@@ -4,11 +4,18 @@
  * SPDX-License-Identifier: MIT
  */
 /**
- * Stable re-export of the Panda styling primitives and layout patterns, so
+ * Stable re-export of the Panda layout patterns and runtime helpers, so
  * shared-ui consumers (and a future extracted library) import from one place
  * rather than reaching into the generated `styled-system` directly.
+ *
+ * `css`, `cva`, `sva`, `cx` and `styled` are deliberately NOT re-exported:
+ * Panda extracts those only when they are imported from `styled-system`, so
+ * calls reaching one through here would produce no CSS and no diagnostic.
+ * (`cx` only joins strings, but it shares the import line with `css`.)
+ * Everything this module does export works wherever it is used: the pattern
+ * components extract by name, and `token` is a runtime variable lookup with
+ * nothing to extract.
  */
-export { css, cva, sva, cx } from "styled-system/css";
 export { token } from "styled-system/tokens";
 export type { SystemStyleObject } from "styled-system/types";
 // react-aria collection types call sites need for selection handlers.
@@ -22,13 +29,10 @@ export type {
   GridProps,
 } from "styled-system/jsx";
 
-// Layout patterns — Box/Flex/Stack/etc.
-//
-// `styled` is re-exported for the `styled(Component)` form, which works from
-// anywhere. The `styled.tag` JSX form does NOT: Panda recognises the factory by
-// the module it was imported from, so `<styled.table css={…}>` on a `styled`
-// imported from here silently produces no CSS. Import it from
-// "styled-system/jsx" for that.
+// Layout patterns — Box/Flex/Stack/etc. These extract by component and prop
+// name, so their style props work through a re-export. `styled` does not:
+// `styled(Component)` would be safe but `<styled.table css={…}>` silently
+// produces no CSS, so it stays in "styled-system/jsx" with the helpers.
 export {
   AspectRatio,
   Box,
@@ -41,7 +45,6 @@ export {
   GridItem,
   Center,
   Wrap,
-  styled,
 } from "styled-system/jsx";
 
 /**