@microbit/ui 0.1.0-alpha.9 → 0.1.0

package/src/dense-preset.ts

@@ -0,0 +1,107 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { definePreset } from "@pandacss/dev";
+
+const toTokens = (values: Record<string, string>) =>
+  Object.fromEntries(
+    Object.entries(values).map(([k, value]) => [k, { value }]),
+  ) as Record<string, { value: string }>;
+
+/**
+ * The numeric spacing/size grid, the base 0.25rem step × 0.88.
+ *
+ * Only the numeric scale is touched: the named `sizes` (`xs`…`8xl`, `max`,
+ * `full`, `container.*`) stay at their base-preset values.
+ */
+const scale = toTokens({
+  px: "1px",
+  0.5: "0.11rem",
+  1: "0.22rem",
+  1.5: "0.33rem",
+  2: "0.44rem",
+  2.5: "0.55rem",
+  3: "0.66rem",
+  3.5: "0.77rem",
+  4: "0.88rem",
+  5: "1.1rem",
+  6: "1.32rem",
+  7: "1.54rem",
+  8: "1.76rem",
+  9: "1.98rem",
+  10: "2.2rem",
+  12: "2.64rem",
+  14: "3.08rem",
+  16: "3.52rem",
+  20: "4.4rem",
+  24: "5.28rem",
+  28: "6.16rem",
+  32: "7.04rem",
+  36: "7.92rem",
+  40: "8.8rem",
+  44: "9.68rem",
+  48: "10.56rem",
+  52: "11.44rem",
+  56: "12.32rem",
+  60: "13.2rem",
+  64: "14.08rem",
+  72: "15.84rem",
+  80: "17.6rem",
+  96: "21.12rem",
+});
+
+/**
+ * Font sizes from `md` up, × 0.9. `xs`/`sm` keep their full size so small
+ * text never gets too small, and `3xs`/`2xs` (which neither app's theme
+ * listed) stay at their base-preset values.
+ */
+const denseFontSizes = toTokens({
+  md: "0.9rem",
+  lg: "1.012rem",
+  xl: "1.125rem",
+  "2xl": "1.35rem",
+  "3xl": "1.687rem",
+  "4xl": "2.025rem",
+  "5xl": "2.7rem",
+  "6xl": "3.375rem",
+  "7xl": "4.05rem",
+  "8xl": "5.4rem",
+  "9xl": "7.2rem",
+});
+
+/**
+ * The dense preset — an optional density override for the information-dense
+ * apps in the family. Stacks between the base preset and the app preset:
+ *
+ * ```ts
+ * presets: ["@pandacss/preset-base", basePreset, densePreset, appPreset]
+ * ```
+ *
+ * Both python-editor and classroom shipped the same "make everything
+ * smaller" theme change (2022): the numeric spacing/sizes grid at
+ * × 0.88 and `fontSizes` from `md` up at × 0.9. The two apps' values were
+ * byte-identical, so the scale lives here rather than being replicated in
+ * each app preset — a global scale override hides from every safeguard,
+ * so it needs to be explicit and shared.
+ *
+ * Whether this density stays or the family aligns on one scale is an open
+ * design question; when it is answered, this preset is the single place the
+ * answer lands (deleting it from an app's stack un-shrinks that app).
+ * ml-trainer and data-microbit-org do not use it.
+ */
+export const densePreset = definePreset({
+  name: "microbit-ui-dense",
+  theme: {
+    extend: {
+      tokens: {
+        spacing: scale,
+        sizes: scale,
+        fontSizes: denseFontSizes,
+      },
+    },
+  },
+});
+
+export default densePreset;

package/src/hooks/useBreakpointValue.ts

@@ -31,10 +31,10 @@ const activeBreakpoint = (): Breakpoint => {
 };
 
 /**
- * JS-side responsive value resolver, replacing Chakra's `useBreakpointValue`.
- * Panda handles responsive *styles* in CSS; this is for responsive *logic*
- * (choosing a prop value, branching behaviour). Resolves to the value at the
- * active breakpoint, falling back to the nearest smaller one that is defined.
+ * JS-side responsive value resolver. Panda handles responsive *styles* in
+ * CSS; this is for responsive *logic* (choosing a prop value, branching
+ * behaviour). Resolves to the value at the active breakpoint, falling back to
+ * the nearest smaller one that is defined.
  */
 export function useBreakpointValue<T>(
   values: Partial<Record<Breakpoint, T>>,

package/src/hooks/useClipboard.ts

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 /**
  * Copy a value to the clipboard with a transient `hasCopied` flag for
- * "Copied!" feedback. Replaces Chakra's `useClipboard`.
+ * "Copied!" feedback.
  */
 export function useClipboard(
   value: string,
@@ -34,11 +34,10 @@ export function useClipboard(
 }
 
 /**
- * Chakra's useClipboard wrapped the execCommand-based copy-to-clipboard
- * package, which works on a user gesture in contexts the async API refuses:
- * insecure (non-localhost http) origins, where `navigator.clipboard` is
- * undefined, and frames without a clipboard-write permissions policy, where
- * `writeText` rejects.
+ * execCommand-based fallback copy. Works on a user gesture in contexts the
+ * async API refuses: insecure (non-localhost http) origins, where
+ * `navigator.clipboard` is undefined, and frames without a clipboard-write
+ * permissions policy, where `writeText` rejects.
  */
 function execCommandCopy(value: string): boolean {
   const active = document.activeElement;

package/src/hooks/useDisclosure.ts

@@ -0,0 +1,31 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useMemo, useState } from "react";
+
+export interface Disclosure {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  onToggle: () => void;
+}
+
+/**
+ * useDisclosure — the open/closed state of a dialog, menu or drawer, and the
+ * three functions that change it.
+ *
+ * A thin `useState` wrapper; the stable object means a disclosure can be
+ * passed to a memoised child without re-rendering it.
+ */
+export const useDisclosure = (defaultIsOpen = false): Disclosure => {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+  const onOpen = useCallback(() => setIsOpen(true), []);
+  const onClose = useCallback(() => setIsOpen(false), []);
+  const onToggle = useCallback(() => setIsOpen((open) => !open), []);
+  return useMemo(
+    () => ({ isOpen, onOpen, onClose, onToggle }),
+    [isOpen, onOpen, onClose, onToggle],
+  );
+};

package/src/hooks/useMediaQuery.ts

@@ -6,10 +6,9 @@
 import { useCallback, useSyncExternalStore } from "react";
 
 /**
- * Tracks a raw CSS media query, replacing Chakra's `useMediaQuery` for
- * queries that aren't breakpoint-based (custom widths, height-based
- * queries). For the preset's breakpoint scale prefer `useBreakpointValue`.
- * Returns false during SSR.
+ * Tracks a raw CSS media query, for queries that aren't breakpoint-based
+ * (custom widths, height-based queries). For the preset's breakpoint scale
+ * prefer `useBreakpointValue`. Returns false during SSR.
  */
 export function useMediaQuery(query: string): boolean {
   const subscribe = useCallback(

package/src/hooks/usePrevious.ts

@@ -5,10 +5,7 @@
  */
 import { useEffect, useRef } from "react";
 
-/**
- * The value from the previous render (undefined on the first render).
- * Replaces Chakra's `usePrevious`.
- */
+/** The value from the previous render (undefined on the first render). */
 export function usePrevious<T>(value: T): T | undefined {
   const ref = useRef<T>();
   useEffect(() => {

package/src/index.ts

@@ -4,27 +4,36 @@
  * SPDX-License-Identifier: MIT
  */
 /**
- * shared-ui — react-aria-components + Panda CSS primitives replacing Chakra,
- * designed to be extracted into a library shared across sibling apps. Visuals
- * match the Chakra theme; behaviour follows react-aria patterns.
+ * shared-ui — react-aria-components + Panda CSS primitives shared across the
+ * micro:bit app family. Behaviour follows react-aria patterns; styling comes
+ * from the recipe/token system in the base preset.
  */
 export * from "./system";
+export * from "./Avatar";
+export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./LinkButton";
 export * from "./ButtonGroup";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./CheckboxGroup";
+export * from "./Field";
 export * from "./IconButton";
+export * from "./MoreMenuButton";
 export * from "./Image";
 export * from "./Input";
 export * from "./InputGroup";
 export * from "./LinkBox";
 export * from "./NativeSelect";
+export * from "./NativeSelectField";
 export * from "./NumberField";
 export * from "./ProgressBar";
 export * from "./Radio";
+export * from "./RadioGroup";
+export * from "./Skeleton";
 export * from "./Slide";
 export * from "./Slider";
+export * from "./Select";
 export * from "./Spinner";
 export * from "./Svg";
 export * from "./Switch";
@@ -32,6 +41,7 @@ export * from "./Text";
 export * from "./TextField";
 export * from "./Heading";
 export * from "./Link";
+export * from "./ExternalLink";
 export * from "./Icon";
 export * from "./CloseButton";
 export * from "./CloseIcon";
@@ -40,16 +50,22 @@ export * from "./Collapse";
 export * from "./Fade";
 export * from "./Kbd";
 export * from "./Divider";
+export * from "./GridList";
 export * from "./Drawer";
 export * from "./List";
+export * from "./ListBox";
+export * from "./ComboBox";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./PopoverArrow";
 export * from "./SharedUIProvider";
 export * from "./Tooltip";
+export * from "./TooltipButton";
 export * from "./Toast";
 export * from "./VisuallyHidden";
 export { useBreakpointValue } from "./hooks/useBreakpointValue";
 export { useClipboard } from "./hooks/useClipboard";
+export { useDisclosure } from "./hooks/useDisclosure";
+export type { Disclosure } from "./hooks/useDisclosure";
 export { useMediaQuery } from "./hooks/useMediaQuery";
 export { usePrevious } from "./hooks/usePrevious";

package/src/rac-locale.ts

@@ -0,0 +1,33 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Sanitizes one of our locale ids for react-aria's I18nProvider.
+ *
+ * No mapping is needed to reach react-aria's own strings: its fallback chain
+ * runs exact tag, then the bare language, then any variant of that language,
+ * then en-US — so `fr` finds fr-FR, `ja` finds ja-JP, and the locales it has no
+ * strings for at all (ca, cy, ga-IE, and our `lol` pseudo-locale) land on
+ * English.
+ *
+ * What does need handling is a malformed tag: I18nProvider's explicit-locale
+ * path feeds it straight to `new Intl.Locale` with no guard of its own (unlike
+ * its browser-locale path), so a bad tag throws during render and takes out the
+ * tree. Only reachable through SharedUIProvider's `locale` prop in practice —
+ * react-intl rejects a malformed locale before we could read it from context.
+ */
+export const racLocale = (locale: string | undefined): string | undefined => {
+  if (locale === undefined) {
+    // Leave react-aria on its browser-locale default.
+    return undefined;
+  }
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf([locale]);
+  } catch {
+    return "en-GB";
+  }
+  return locale;
+};

package/src/system.ts

@@ -11,6 +11,8 @@
 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.
+export type { Key, Selection } from "react-aria-components";
 export type {
   BoxProps,
   FlexProps,
@@ -20,10 +22,17 @@ export type {
   GridProps,
 } from "styled-system/jsx";
 
-// Layout patterns — the Panda-native equivalents of Chakra's Box/Flex/Stack/etc.
+// 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.
 export {
   AspectRatio,
   Box,
+  Container,
   Flex,
   Stack,
   HStack,
@@ -34,3 +43,15 @@ export {
   Wrap,
   styled,
 } from "styled-system/jsx";
+
+/**
+ * Spread onto a surface element that is dark by design — a black toolbar,
+ * a coloured sidebar header — so focus indicators inside it flip to their
+ * on-dark colours: `<header {...darkSurface}>`.
+ *
+ * Tag a surface's own designed luminance, never anything theme-relative
+ * (a future dark mode flips untagged defaults via token conditions, not
+ * markup). One inherited data attribute (the `onDark` condition): tag the
+ * bar, cover its controls; portalled overlays escape with the DOM.
+ */
+export const darkSurface = { "data-surface": "dark" } as const;

package/src/TextField.recipe.ts

@@ -1,54 +0,0 @@
-/**
- * (c) 2026, Micro:bit Educational Foundation and contributors
- *
- * SPDX-License-Identifier: MIT
- */
-import { defineSlotRecipe } from "@pandacss/dev";
-
-/**
- * Field slot recipe — Chakra's FormControl parts (FormLabel/FormHelperText/
- * FormErrorMessage, light mode). Consumed by the shared-ui TextField, which
- * maps the slots onto react-aria-components' TextField/Label/Text/FieldError;
- * the input itself is styled by the `input` recipe (Input.recipe.ts).
- *
- * Registered in the base preset (base-preset.ts). No variants, so it
- * needs no `staticCss` entry.
- */
-export const field = defineSlotRecipe({
-  className: "field",
-  slots: ["root", "label", "requiredIndicator", "helperText", "errorMessage"],
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      width: "100%",
-    },
-    label: {
-      display: "block",
-      fontSize: "md",
-      fontWeight: "medium",
-      marginEnd: "3",
-      mb: "2",
-      "&[data-disabled]": { opacity: 0.4 },
-    },
-    requiredIndicator: {
-      marginStart: "1",
-      color: "danger.500",
-    },
-    helperText: {
-      mt: "2",
-      fontSize: "sm",
-      lineHeight: "normal",
-      color: "gray.600",
-    },
-    errorMessage: {
-      display: "flex",
-      alignItems: "center",
-      mt: "2",
-      fontSize: "sm",
-      lineHeight: "normal",
-      color: "danger.500",
-    },
-  },
-});