@microbit/ui 0.1.0-alpha.10

package/src/Radio.recipe.ts

@@ -0,0 +1,107 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Radio slot recipe — Chakra's radio with the default blue colorScheme
+ * (light mode) and its sm/md/lg size scale: the checkbox control rounded
+ * fully, with a 50% `currentColor` dot when selected instead of the check
+ * glyph. As with the checkbox, `borderColor: inherit` picks up a
+ * `borderColor` set on the root.
+ *
+ * State styling keys off data attributes stamped by the shared-ui Radio
+ * (react-aria provides the state via render props).
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
+ */
+export const radio = defineSlotRecipe({
+  className: "radio",
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      cursor: "pointer",
+      position: "relative",
+      "&[data-disabled]": { cursor: "not-allowed" },
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      transitionProperty: "box-shadow",
+      transitionDuration: "normal",
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderRadius: "full",
+      borderColor: "inherit",
+      color: "white",
+      bg: "white",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+        borderColor: "controlCheckedBg",
+        color: "white",
+        _hover: {
+          bg: "controlCheckedHoverBg",
+          borderColor: "controlCheckedHoverBg",
+        },
+        // Chakra's radio dot.
+        _before: {
+          content: '""',
+          display: "inline-block",
+          position: "relative",
+          width: "50%",
+          height: "50%",
+          borderRadius: "50%",
+          bg: "currentColor",
+        },
+      },
+      // Chakra's disabled greys; the selected block restates _hover so the
+      // widened native-:hover condition can't re-tint a disabled control.
+      "&[data-disabled]": {
+        bg: "gray.100",
+        borderColor: "gray.100",
+      },
+      "&[data-selected][data-disabled]": {
+        bg: "gray.200",
+        borderColor: "gray.200",
+        color: "gray.500",
+        _hover: { bg: "gray.200", borderColor: "gray.200" },
+      },
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+  variants: {
+    // Chakra's Radio size scale (the Checkbox control scale).
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/Radio.tsx

@@ -0,0 +1,89 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  Radio as RACRadio,
+  RadioProps as RACRadioProps,
+  RadioGroup as RACRadioGroup,
+  RadioGroupProps as RACRadioGroupProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { radio, RadioVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface RadioGroupProps
+  extends Omit<RACRadioGroupProps, "className" | "style"> {
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * RadioGroup — react-aria-components <RadioGroup> for a set of Radios. Carries
+ * no styling of its own: compose with Stack for layout, as Chakra call sites
+ * did.
+ */
+export const RadioGroup = ({
+  css: cssProp,
+  className,
+  ...rest
+}: RadioGroupProps) => {
+  return (
+    <RACRadioGroup
+      className={cx(cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    />
+  );
+};
+
+export interface RadioProps
+  extends Omit<RACRadioProps, "className" | "children" | "style">,
+    RadioVariantProps {
+  /** Per-instance style overrides for the root, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Radio — react-aria-components <Radio> styled like Chakra's radio. Must be
+ * rendered inside a RadioGroup. Children render as the label.
+ */
+export const Radio = ({
+  size,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: RadioProps) => {
+  const slots = radio({ size });
+  return (
+    <RACRadio
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      {({ isSelected, isFocusVisible, isDisabled }) => (
+        <>
+          <span
+            className={slots.control}
+            data-selected={isSelected || undefined}
+            data-focus-visible={isFocusVisible || undefined}
+            data-disabled={isDisabled || undefined}
+            aria-hidden
+          />
+          {children != null && (
+            <span
+              className={slots.label}
+              data-disabled={isDisabled || undefined}
+            >
+              {children}
+            </span>
+          )}
+        </>
+      )}
+    </RACRadio>
+  );
+};

package/src/SharedUIProvider.tsx

@@ -0,0 +1,55 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { createContext, ReactNode, useContext, useMemo } from "react";
+
+/**
+ * Registers the close function of the currently open dismissable overlay, or
+ * clears it (null) when the overlay closes. Installed by apps that need to
+ * dismiss overlays from outside the component tree — e.g. the Android
+ * hardware back button. Only one overlay is open at a time.
+ */
+export type OverlayCloseRegistrar = (close: (() => void) | null) => void;
+
+interface SharedUIContextValue {
+  overlayCloseRegistrar?: OverlayCloseRegistrar;
+}
+
+const SharedUIContext = createContext<SharedUIContextValue | null>(null);
+
+export interface SharedUIProviderProps {
+  overlayCloseRegistrar?: OverlayCloseRegistrar;
+  children: ReactNode;
+}
+
+/**
+ * SharedUIProvider — the app-side installation point for optional shared-ui
+ * integrations. Currently that is only the overlay-close registrar, so apps
+ * without one can omit the provider entirely. Localized strings come from
+ * react-intl: an IntlProvider must be mounted above shared-ui components
+ * (see the package README for merging this package's message catalogs).
+ */
+export const SharedUIProvider = ({
+  overlayCloseRegistrar,
+  children,
+}: SharedUIProviderProps) => {
+  const value = useMemo(
+    () => ({ overlayCloseRegistrar }),
+    [overlayCloseRegistrar],
+  );
+  return (
+    <SharedUIContext.Provider value={value}>
+      {children}
+    </SharedUIContext.Provider>
+  );
+};
+
+/**
+ * The app-installed overlay-close registrar, if any. Overlay components run
+ * controlled and register their close function while open so the app can
+ * dismiss them; without a registrar they manage open state internally.
+ */
+export const useOverlayCloseRegistrar = (): OverlayCloseRegistrar | undefined =>
+  useContext(SharedUIContext)?.overlayCloseRegistrar;

package/src/Slide.tsx

@@ -0,0 +1,54 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface SlideProps {
+  /** Slides in when true; sits translated offscreen when false. */
+  isOpen: boolean;
+  /** Per-instance style overrides (e.g. zIndex), merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Slide — Chakra's Slide transition, bottom edge only (add other directions
+ * when a use appears): a full-width panel pinned to the viewport bottom,
+ * translated offscreen when closed. Content stays mounted throughout, so
+ * closing doesn't drop in-flight state and the exit animates.
+ */
+export const Slide = ({
+  isOpen,
+  css: cssProp,
+  className,
+  children,
+}: SlideProps) => (
+  <div
+    data-open={isOpen ? "" : undefined}
+    className={cx(
+      css(
+        {
+          position: "fixed",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          transform: "translateY(100%)",
+          "&[data-open]": { transform: "translateY(0)" },
+          transitionProperty: "transform",
+          transitionDuration: "0.25s",
+          transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+          _motionReduce: { transition: "none" },
+        },
+        cssProp,
+      ),
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/Slider.recipe.ts

@@ -0,0 +1,102 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Slider slot recipe — Chakra's horizontal md slider (3.5-token thumb, 1-token
+ * gray.200 track, blue filled track; light mode). Consumed by the shared-ui
+ * Slider, which maps the slots onto react-aria-components'
+ * Slider/SliderTrack/SliderThumb.
+ *
+ * Geometry matches Chakra's DOM: the root is thumb-height with NO horizontal
+ * padding, the track is absolutely centred inside it at full width, and the
+ * thumb overhangs the track ends at 0%/100%. Call sites position overlays
+ * (marks, value labels) against that root box, so Chakra-era offsets work
+ * unchanged. Sizes are tokens, not px, so apps with resized scales (e.g.
+ * python-editor's ×0.88) get their Chakra-equivalent geometry.
+ *
+ * The `mark` slot is hidden until the slider has focus (Chakra call sites did
+ * this with `_focusWithin` + a class); the reveal lives here so call sites
+ * only style the mark's look.
+ *
+ * Registered in the base preset (base-preset.ts). No variants, so it
+ * needs no `staticCss` entry.
+ */
+export const slider = defineSlotRecipe({
+  className: "slider",
+  slots: ["root", "track", "filledTrack", "thumb", "mark"],
+  base: {
+    root: {
+      position: "relative",
+      display: "block",
+      width: "100%",
+      // Thumb-height, like Chakra's container; the track centres inside.
+      height: "3.5",
+      touchAction: "none",
+      "&:focus-within [data-part='mark']": {
+        display: "block",
+      },
+      "&[data-disabled]": {
+        opacity: 0.4,
+        cursor: "not-allowed",
+      },
+    },
+    track: {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      left: 0,
+      width: "100%",
+      height: "1",
+      overflow: "hidden",
+      borderRadius: "sm",
+      bg: "gray.200",
+      cursor: "pointer",
+      "[data-disabled] &": {
+        bg: "gray.300",
+        cursor: "default",
+      },
+    },
+    filledTrack: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      bg: "sliderFilledTrack",
+    },
+    thumb: {
+      position: "absolute",
+      top: "50%",
+      width: "3.5",
+      height: "3.5",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: "none",
+      zIndex: 1,
+      borderRadius: "full",
+      bg: "white",
+      boxShadow: "base",
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+      "&[data-dragging]": {
+        transform: "translate(-50%, -50%) scale(1.15)",
+      },
+      transform: "translate(-50%, -50%)",
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+      "&[data-disabled]": {
+        bg: "gray.300",
+      },
+    },
+    mark: {
+      display: "none",
+      position: "absolute",
+      whiteSpace: "nowrap",
+    },
+  },
+});

package/src/Slider.tsx

@@ -0,0 +1,163 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  Slider as RACSlider,
+  SliderThumb,
+  SliderTrack,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { slider } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface SliderProps {
+  value: number;
+  onChange: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  "aria-label": string;
+  isDisabled?: boolean;
+  /**
+   * Number format for the value announced to assistive tech (e.g.
+   * `{ style: "unit", unit: "percent" }` so units are heard, not bare
+   * numbers).
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  trackCss?: SystemStyleObject;
+  filledTrackCss?: SystemStyleObject;
+  thumbCss?: SystemStyleObject;
+  /**
+   * Positioned at the current value along the track and shown while the
+   * slider has focus (Chakra's SliderMark usage).
+   */
+  mark?: ReactNode;
+  markCss?: SystemStyleObject;
+  /**
+   * Additional positioned overlays rendered inside the slider root
+   * (always-visible value labels, threshold markers, ...). The root is
+   * position: relative; position children absolutely, typically with a
+   * percentage `left` for the track position.
+   */
+  children?: ReactNode;
+  /**
+   * Tooltip-styled bubble anchored above the thumb (Chakra's
+   * Tooltip-around-SliderThumb pattern). Rendered only while
+   * `isThumbTooltipOpen`; drive it from hover/focus, e.g. via
+   * `onThumbFocusChange` and mouse handlers on an enclosing element.
+   */
+  thumbTooltip?: ReactNode;
+  isThumbTooltipOpen?: boolean;
+  /** Thumb focus tracking (react-aria focus events). */
+  onThumbFocusChange?: (isFocused: boolean) => void;
+}
+
+/**
+ * Slider — react-aria-components <Slider> styled like Chakra's horizontal md
+ * slider.
+ */
+export const Slider = ({
+  value,
+  onChange,
+  minValue = 0,
+  maxValue = 100,
+  "aria-label": ariaLabel,
+  isDisabled,
+  formatOptions,
+  css: cssProp,
+  trackCss,
+  filledTrackCss,
+  thumbCss,
+  mark,
+  markCss,
+  children,
+  thumbTooltip,
+  isThumbTooltipOpen,
+  onThumbFocusChange,
+}: SliderProps) => {
+  const slots = slider();
+  const percent = ((value - minValue) / (maxValue - minValue)) * 100;
+  return (
+    <RACSlider
+      value={value}
+      onChange={onChange}
+      minValue={minValue}
+      maxValue={maxValue}
+      aria-label={ariaLabel}
+      isDisabled={isDisabled}
+      formatOptions={formatOptions}
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined)}
+    >
+      {mark && (
+        <div
+          data-part="mark"
+          className={cx(slots.mark, markCss ? css(markCss) : undefined)}
+          style={{ left: `${percent}%` }}
+        >
+          {mark}
+        </div>
+      )}
+      <SliderTrack
+        className={cx(slots.track, trackCss ? css(trackCss) : undefined)}
+      >
+        <div
+          className={cx(
+            slots.filledTrack,
+            filledTrackCss ? css(filledTrackCss) : undefined,
+          )}
+          style={{ width: `${percent}%` }}
+        />
+      </SliderTrack>
+      {thumbTooltip && isThumbTooltipOpen && (
+        // Matches the shared Tooltip's look (tooltipBase) with a bottom
+        // arrow, anchored above the thumb.
+        <div
+          role="presentation"
+          className={css({
+            position: "absolute",
+            bottom: "calc(50% + token(sizes.3.5))",
+            transform: "translateX(-50%)",
+            bg: "gray.700",
+            color: "white",
+            px: "2",
+            py: "1",
+            borderRadius: "md",
+            fontSize: "sm",
+            fontWeight: "medium",
+            boxShadow: "md",
+            zIndex: "tooltip",
+            whiteSpace: "nowrap",
+            _after: {
+              content: '""',
+              position: "absolute",
+              // 1px into the box so subpixel edges can't antialias into a
+              // hairline seam (see PopoverArrow).
+              top: "calc(100% - 1px)",
+              left: "50%",
+              transform: "translateX(-50%)",
+              borderWidth: "4px",
+              borderStyle: "solid",
+              // Per-side: tokens don't resolve inside multi-value
+              // shorthands (they emit verbatim and the browser drops the
+              // invalid declaration).
+              borderColor: "transparent",
+              borderTopColor: "gray.700",
+            },
+          })}
+          style={{ left: `${percent}%` }}
+        >
+          {thumbTooltip}
+        </div>
+      )}
+      <SliderThumb
+        onFocusChange={onThumbFocusChange}
+        className={cx(slots.thumb, thumbCss ? css(thumbCss) : undefined)}
+      />
+      {children}
+    </RACSlider>
+  );
+};

package/src/Spinner.tsx

@@ -0,0 +1,69 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { CSSProperties } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface SpinnerProps {
+  /** Chakra Spinner sizes: sm 1rem, md 1.5rem (default). */
+  size?: "sm" | "md";
+  /**
+   * Revolution time (Chakra's `speed`, default 0.45s). Under
+   * prefers-reduced-motion the spin is slowed to ~3x this value.
+   */
+  speed?: string;
+  /** Per-instance style overrides, merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+  /**
+   * Accessible name. Required: Chakra's Spinner announced a visually hidden
+   * "Loading..." by default, so a nameless spinner would regress on it.
+   */
+  "aria-label": string;
+}
+
+/**
+ * Spinner — Chakra's border-based spinner (currentColor with transparent
+ * bottom/left quadrants).
+ */
+export const Spinner = ({
+  size = "md",
+  speed,
+  css: cssProp,
+  className,
+  "aria-label": ariaLabel,
+}: SpinnerProps) => (
+  <span
+    role="status"
+    aria-label={ariaLabel}
+    style={speed ? ({ "--spinner-speed": speed } as CSSProperties) : undefined}
+    className={cx(
+      // Single css() call so caller overrides of base properties (e.g. width)
+      // are deduped at merge time rather than racing on stylesheet order.
+      css(
+        {
+          display: "inline-block",
+          borderWidth: "2px",
+          borderStyle: "solid",
+          borderColor: "currentColor",
+          borderBottomColor: "transparent",
+          borderLeftColor: "transparent",
+          borderRadius: "full",
+          // The duration rides a variable so the reduced-motion slow-down
+          // scales with a per-instance `speed` rather than fighting it.
+          animation: "spin var(--spinner-speed, 0.45s) linear infinite",
+          _motionReduce: {
+            animationDuration: "calc(var(--spinner-speed, 0.45s) * 3.33)",
+          },
+          width: size === "sm" ? "1rem" : "1.5rem",
+          height: size === "sm" ? "1rem" : "1.5rem",
+        },
+        cssProp,
+      ),
+      className,
+    )}
+  />
+);

package/src/Svg.tsx

@@ -0,0 +1,23 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Svg — a Panda-styled svg element with Chakra Icon's base sizing (1em,
+ * inline-block). For custom-path icons; react-icons glyphs use `Icon`.
+ * As a styled-factory component its call-site style props are extracted
+ * (unlike style props forwarded through a plain wrapper — gotcha #9).
+ */
+export const Svg = styled("svg", {
+  base: {
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    lineHeight: "1em",
+    flexShrink: 0,
+    verticalAlign: "middle",
+  },
+});