@microbit/ui 0.1.0-alpha.4 → 0.1.0-alpha.6

package/src/Menu.tsx

@@ -5,17 +5,21 @@
  */
 import { ReactNode, useCallback, useState } from "react";
 import {
+  Header as RACHeader,
   Menu as RACMenu,
   MenuItem as RACMenuItem,
   MenuItemProps as RACMenuItemProps,
+  MenuSection as RACMenuSection,
   MenuTrigger as RACMenuTrigger,
   Popover,
   PopoverProps,
   Separator,
 } from "react-aria-components";
+import { RiCheckLine } from "react-icons/ri";
 import { css, cx } from "styled-system/css";
 import { menu } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
+import { Icon } from "./Icon";
 import { useOverlayCloseRegistrar } from "./SharedUIProvider";
 
 export interface MenuTriggerProps {
@@ -152,6 +156,91 @@ export const MenuItem = ({
   );
 };
 
+export interface MenuOptionGroupProps {
+  /** Group heading shown above the options (Chakra's `title`). */
+  title?: ReactNode;
+  /** The selected `MenuItemOption`'s value (radio semantics). */
+  value?: string;
+  /** Called with the newly selected option's value. */
+  onChange?: (value: string) => void;
+  /** `MenuItemOption` children. */
+  children: ReactNode;
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * MenuOptionGroup — a single-select (radio) group of `MenuItemOption`s within
+ * a menu, replacing Chakra's `MenuOptionGroup type="radio"`. Selection is
+ * section-scoped (RAC MenuSection), so a menu can mix action items and option
+ * groups.
+ */
+export const MenuOptionGroup = ({
+  title,
+  value,
+  onChange,
+  children,
+  css: cssProp,
+  className,
+}: MenuOptionGroupProps) => {
+  const slots = menu();
+  return (
+    <RACMenuSection
+      className={cx(slots.group, cssProp ? css(cssProp) : undefined, className)}
+      selectionMode="single"
+      selectedKeys={value != null ? [value] : []}
+      onSelectionChange={(keys) => {
+        if (keys !== "all") {
+          const key = keys.values().next().value;
+          if (key != null) {
+            onChange?.(String(key));
+          }
+        }
+      }}
+    >
+      {title != null && (
+        <RACHeader className={slots.groupTitle}>{title}</RACHeader>
+      )}
+      {children}
+    </RACMenuSection>
+  );
+};
+
+export interface MenuItemOptionProps
+  extends Omit<RACMenuItemProps, "className" | "children" | "id" | "value"> {
+  /** This option's value within its `MenuOptionGroup`. */
+  value: string;
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * MenuItemOption — a selectable option inside a `MenuOptionGroup`, with a
+ * check indicator on the selected item (Chakra's MenuItemOption).
+ */
+export const MenuItemOption = ({
+  value,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: MenuItemOptionProps) => {
+  const slots = menu();
+  return (
+    <RACMenuItem
+      id={value}
+      className={cx(slots.item, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      <span className={slots.itemIndicator} aria-hidden>
+        <Icon as={RiCheckLine} />
+      </span>
+      <span className={slots.label}>{children}</span>
+    </RACMenuItem>
+  );
+};
+
 export interface MenuDividerProps {
   css?: SystemStyleObject;
   className?: string;

package/src/Modal.tsx

@@ -3,7 +3,13 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { createContext, ReactNode, RefObject, useContext } from "react";
+import {
+  createContext,
+  CSSProperties,
+  ReactNode,
+  RefObject,
+  useContext,
+} from "react";
 import {
   Button as RACButton,
   Dialog,
@@ -54,6 +60,12 @@ export interface ModalProps {
   isKeyboardDismissDisabled?: boolean;
   /** Style overrides for the dialog box (Chakra's ModalContent props). */
   contentCss?: SystemStyleObject;
+  /**
+   * Inline styles for the dialog box, for runtime-computed positioning that
+   * Panda can't statically extract (e.g. a dialog aligned to a measured
+   * element). Prefer `contentCss` for static styles.
+   */
+  contentStyle?: CSSProperties;
   /**
    * Style overrides for the backdrop (Chakra's ModalOverlay props), e.g. a
    * transparent backdrop when something else provides the dimming.
@@ -99,6 +111,7 @@ export const Modal = ({
   motionless,
   isKeyboardDismissDisabled,
   contentCss,
+  contentStyle,
   overlayCss,
   role,
   isCentered,
@@ -141,6 +154,7 @@ export const Modal = ({
     >
       <UnmountCallback callback={handleUnmount} />
       <RACModal
+        style={contentStyle}
         className={cx(
           slots.content,
           motionlessClass,

package/src/NumberField.recipe.ts

@@ -0,0 +1,67 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * NumberField slot recipe — Chakra's NumberInput look: an outline input (the
+ * `input` recipe styles the input itself) with a right-hand stepper column of
+ * two stacked buttons. Consumed by the shared-ui NumberField
+ * (react-aria-components NumberField).
+ *
+ * Registered in the base preset (base-preset.ts). No variants, so it needs
+ * no `staticCss` entry.
+ */
+export const numberField = defineSlotRecipe({
+  className: "numberField",
+  slots: ["root", "group", "stepper", "stepperButton"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+    },
+    group: {
+      position: "relative",
+      zIndex: 0,
+    },
+    // Chakra's NumberInputStepper: a column overlaying the input's right
+    // edge, inset by the input border.
+    stepper: {
+      display: "flex",
+      flexDirection: "column",
+      position: "absolute",
+      insetEnd: "0",
+      top: "0",
+      height: "calc(100% - 2px)",
+      margin: "1px",
+      width: "6",
+      zIndex: 1,
+    },
+    stepperButton: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      cursor: "pointer",
+      lineHeight: "normal",
+      fontSize: "xs",
+      color: "inherit",
+      bg: "transparent",
+      borderStart: "1px solid",
+      borderColor: "gray.200",
+      transitionProperty: "background",
+      transitionDuration: "ultra-fast",
+      "&:last-child": {
+        borderTop: "1px solid",
+        borderTopColor: "gray.200",
+        marginTop: "-1px",
+      },
+      "&[data-hovered]": { bg: "gray.100" },
+      "&[data-pressed]": { bg: "gray.200" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+  },
+});

package/src/NumberField.tsx

@@ -0,0 +1,86 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, ReactNode } from "react";
+import {
+  Button as RACButton,
+  Group as RACGroup,
+  Input as RACInput,
+  Label as RACLabel,
+  NumberField as RACNumberField,
+  NumberFieldProps as RACNumberFieldProps,
+} from "react-aria-components";
+import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+import { css, cx } from "styled-system/css";
+import { field, input, numberField } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { Icon } from "./Icon";
+
+export interface NumberFieldProps
+  extends Omit<RACNumberFieldProps, "className" | "children" | "style"> {
+  /** Visible label (optional; otherwise pass `aria-label`). */
+  label?: ReactNode;
+  /** Root style overrides (e.g. row layout for label-beside-field forms). */
+  css?: SystemStyleObject;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
+  /** Group (input + steppers) style overrides — set `width` here. */
+  groupCss?: SystemStyleObject;
+  /** Input style overrides (e.g. a smaller size than the recipe's md). */
+  inputCss?: SystemStyleObject;
+}
+
+/**
+ * NumberField — react-aria-components <NumberField> styled like Chakra's
+ * NumberInput (outline input + right-hand stepper column). The ref is
+ * forwarded to the input element. Value clamping to min/maxValue is
+ * handled by react-aria; onChange receives NaN when the field is emptied.
+ */
+export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
+  function NumberField(
+    { label, css: cssProp, labelCss, groupCss, inputCss, ...rest },
+    ref,
+  ) {
+    const slots = numberField();
+    const fieldSlots = field();
+    return (
+      <RACNumberField
+        {...rest}
+        className={cx(slots.root, cssProp ? css(cssProp) : undefined)}
+      >
+        {label != null && (
+          <RACLabel
+            className={cx(
+              fieldSlots.label,
+              labelCss ? css(labelCss) : undefined,
+            )}
+          >
+            {label}
+          </RACLabel>
+        )}
+        <RACGroup
+          className={cx(slots.group, groupCss ? css(groupCss) : undefined)}
+        >
+          <RACInput
+            ref={ref}
+            className={cx(
+              input(),
+              // Room for the stepper column.
+              css({ paddingEnd: "6" }, inputCss),
+            )}
+          />
+          <div className={slots.stepper}>
+            <RACButton slot="increment" className={slots.stepperButton}>
+              <Icon as={RiArrowUpSFill} />
+            </RACButton>
+            <RACButton slot="decrement" className={slots.stepperButton}>
+              <Icon as={RiArrowDownSFill} />
+            </RACButton>
+          </div>
+        </RACGroup>
+      </RACNumberField>
+    );
+  },
+);

package/src/PopoverArrow.tsx

@@ -13,11 +13,26 @@ import { SystemStyleObject } from "styled-system/types";
 // rotating about the centre keeps it flush against the overlay on every side
 // — no translate fix-ups, whose signs depend on rotation direction and are
 // easy to get wrong (they detached the tooltip arrow from its box).
+//
+// "Flush" still antialiases to a hairline seam when the overlay's edge lands
+// on a subpixel boundary, so each placement also pulls the svg 1px into the
+// overlay with a negative margin on the overlay-facing side (margins move the
+// box before the rotate, so the bleed direction is unaffected by it).
 const arrowBase = css({
   "& svg": { display: "block" },
-  "&[data-placement='bottom'] svg": { transform: "rotate(180deg)" },
-  "&[data-placement='right'] svg": { transform: "rotate(90deg)" },
-  "&[data-placement='left'] svg": { transform: "rotate(-90deg)" },
+  "&[data-placement='top'] svg": { marginTop: "-1px" },
+  "&[data-placement='bottom'] svg": {
+    transform: "rotate(180deg)",
+    marginBottom: "-1px",
+  },
+  "&[data-placement='right'] svg": {
+    transform: "rotate(90deg)",
+    marginRight: "-1px",
+  },
+  "&[data-placement='left'] svg": {
+    transform: "rotate(-90deg)",
+    marginLeft: "-1px",
+  },
 });
 
 export interface PopoverArrowProps {

package/src/Slider.tsx

@@ -37,6 +37,23 @@ export interface SliderProps {
    */
   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;
 }
 
 /**
@@ -57,6 +74,10 @@ export const Slider = ({
   thumbCss,
   mark,
   markCss,
+  children,
+  thumbTooltip,
+  isThumbTooltipOpen,
+  onThumbFocusChange,
 }: SliderProps) => {
   const slots = slider();
   const percent = ((value - minValue) / (maxValue - minValue)) * 100;
@@ -91,9 +112,52 @@ export const Slider = ({
           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% + 14px)",
+            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/TextField.tsx

@@ -30,6 +30,8 @@ export interface TextFieldProps
   /** Per-instance style overrides for the helper text. */
   helperTextCss?: SystemStyleObject;
   onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+  /** Input autocapitalize attribute (react-aria's TextField omits it). */
+  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
 }
 
 /**
@@ -39,7 +41,15 @@ export interface TextFieldProps
  */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   function TextField(
-    { label, helperText, errorMessage, helperTextCss, onFocus, ...rest },
+    {
+      label,
+      helperText,
+      errorMessage,
+      helperTextCss,
+      onFocus,
+      autoCapitalize,
+      ...rest
+    },
     ref,
   ) {
     const slots = field();
@@ -53,7 +63,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             </span>
           ) : null}
         </RACLabel>
-        <RACInput ref={ref} className={input()} onFocus={onFocus} />
+        <RACInput
+          ref={ref}
+          className={input()}
+          onFocus={onFocus}
+          autoCapitalize={autoCapitalize}
+        />
         {helperText && (
           <RACText
             slot="description"

package/src/Toast.tsx

@@ -118,6 +118,8 @@ export interface ToastFn {
    * re-added, so unlike Chakra it re-animates and restarts any timeout.
    */
   update(id: string, options: ToastOptions): void;
+  /** Dismiss all visible toasts (Chakra's toast.closeAll). */
+  closeAll(): void;
 }
 
 /**
@@ -161,5 +163,9 @@ export const useToast = (): ToastFn =>
       }
       add({ ...options, id });
     };
-    return Object.assign(add, { isActive, update });
+    const closeAll = () => {
+      // Copy first: closing mutates visibleToasts as we iterate.
+      [...toastQueue.visibleToasts].forEach((t) => toastQueue.close(t.key));
+    };
+    return Object.assign(add, { isActive, update, closeAll });
   }, []);

package/src/base-preset.ts

@@ -20,7 +20,7 @@ import {
   sizes,
   spacing,
   zIndex,
-} from "./chakra-tokens";
+} from "./base-tokens";
 // Config recipes are colocated with the shared-ui components they style; this
 // preset registers them so Panda merges them at codegen time.
 import { button } from "./Button.recipe";
@@ -29,6 +29,7 @@ import { checkbox } from "./Checkbox.recipe";
 import { drawer } from "./Drawer.recipe";
 import { heading } from "./Heading.recipe";
 import { input } from "./Input.recipe";
+import { numberField } from "./NumberField.recipe";
 import { menu } from "./Menu.recipe";
 import { slider } from "./Slider.recipe";
 import { switchRecipe } from "./Switch.recipe";
@@ -37,8 +38,8 @@ import { field } from "./TextField.recipe";
 import { toast } from "./Toast.recipe";
 
 /**
- * The base preset: the complete, working micro:bit design system. Chakra v2's
- * default token scales (chakra-tokens.ts snapshot), the micro:bit house style
+ * The base preset: the complete, working micro:bit design system. The base
+ * token scales (base-tokens.ts), the micro:bit house style
  * (pill `radii.button`, `outline*` focus shadows, Helvetica fonts, the
  * `language`/`toolbar` button variants in Button.recipe.ts, the
  * `languageText`/`toast*Bg`/`statusBarBg` semantic tokens), the shared-ui
@@ -145,13 +146,16 @@ export const basePreset = definePreset({
           600: { value: "{colors.red.600}" },
           700: { value: "{colors.red.700}" },
         },
-        // The `language` button variant's text colour is the one place the
-        // brands diverge structurally (OSS uses the grey brand2 ramp, the
-        // CreateAI brand its blue brand ramp with no hover change). Driven by
-        // these semantic tokens so the recipe stays shared and a brand preset
-        // overrides only the values.
-        languageText: { value: "{colors.brand2.500}" },
-        languageTextHover: { value: "{colors.brand2.600}" },
+        // The `language` button variant's text colour follows the primary
+        // interactive brand: every consumer resolves it to its `brand` ramp
+        // (CreateAI privately to brand.600 with no hover change,
+        // python-editor to brand.500/600 — the default). Semantic tokens so
+        // the recipe stays shared and a brand preset overrides only values.
+        // (Was brand2.* — the grey ml-trainer OSS Chakra look — but both
+        // apps' final values sit on their primary brand, so the default
+        // follows; OSS language buttons are brand blue.)
+        languageText: { value: "{colors.brand.500}" },
+        languageTextHover: { value: "{colors.brand.600}" },
         // Toast status colours: the Chakra-era toast Alert restyle (teal for
         // every status except error) shared across the app family.
         toastInfoBg: { value: "{colors.teal.800}" },
@@ -175,6 +179,7 @@ export const basePreset = definePreset({
       drawer,
       field,
       menu,
+      numberField,
       slider,
       switchRecipe,
       toast,

package/src/{chakra-tokens.ts → base-tokens.ts}

@@ -1,12 +1,15 @@
 /**
  * (c) 2026, Micro:bit Educational Foundation and contributors
  *
+ * Token values (c) 2019, Segun Adebayo — Chakra UI's @chakra-ui/theme
+ * defaults, used under the MIT License (see LICENSE.md third-party notices).
+ *
  * SPDX-License-Identifier: MIT
  */
-/* eslint-disable */
-// GENERATED by bin/gen-chakra-tokens.mjs (snapshot of @chakra-ui/theme defaults).
-// Do not edit by hand. Canonical Chakra v2 foundation values in Panda token
-// format so the OSS preset matches Chakra exactly.
+// The base token scales, in Panda token format. Began as a mechanical
+// snapshot of Chakra UI v2's @chakra-ui/theme defaults; hand-maintained.
+// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts)
+// and `transition.property` (no Panda token category; inlined at use sites).
 
 export const colors = {
   transparent: {

package/src/button-icon.ts

@@ -0,0 +1,23 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { cva } from "styled-system/css";
+
+// Chakra's ButtonIcon: keeps the glyph centred and spaced from the label
+// (iconSpacing 0.5rem). Shared by Button and LinkButton; deliberately not
+// exported from the package index.
+export const buttonIcon = cva({
+  base: {
+    display: "inline-flex",
+    alignSelf: "center",
+    flexShrink: 0,
+  },
+  variants: {
+    side: {
+      left: { marginEnd: "2" },
+      right: { marginStart: "2" },
+    },
+  },
+});

package/src/hooks/useClipboard.ts

@@ -0,0 +1,27 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+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`.
+ */
+export function useClipboard(
+  value: string,
+  timeoutMs = 1500,
+): { onCopy: () => void; hasCopied: boolean } {
+  const [hasCopied, setHasCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value).then(() => {
+      setHasCopied(true);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setHasCopied(false), timeoutMs);
+    });
+  }, [value, timeoutMs]);
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return { onCopy, hasCopied };
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+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.
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,18 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useEffect, useRef } from "react";
+
+/**
+ * The value from the previous render (undefined on the first render).
+ * Replaces Chakra's `usePrevious`.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}