@microbit/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/src/Fade.tsx

@@ -0,0 +1,48 @@
+/**
+ * (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 FadeProps {
+  /** Visible when true; faded out (but mounted) when false. */
+  isOpen: boolean;
+  css?: SystemStyleObject;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Fade — Chakra's Fade transition as a CSS opacity transition (see Slide for
+ * the pattern). Content stays mounted throughout.
+ */
+export const Fade = ({
+  isOpen,
+  css: cssProp,
+  className,
+  children,
+}: FadeProps) => (
+  <div
+    data-open={isOpen ? "" : undefined}
+    className={cx(
+      css(
+        {
+          opacity: 0,
+          pointerEvents: "none",
+          "&[data-open]": { opacity: 1, pointerEvents: "auto" },
+          transitionProperty: "opacity",
+          transitionDuration: "0.2s",
+          transitionTimingFunction: "ease-out",
+          _motionReduce: { transition: "none" },
+        },
+        cssProp,
+      ),
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/IconButton.tsx

@@ -10,7 +10,12 @@ export interface IconButtonProps
   extends Omit<ButtonProps, "leftIcon" | "rightIcon"> {
   /** Icon-only buttons have no visible label, so this is required. */
   "aria-label": string;
-  /** Circular rather than the recipe's border-radius (Chakra's `isRound`). */
+  /**
+   * Circular rather than the recipe's border-radius (Chakra's `isRound`).
+   * Usually a visual no-op here: the 2rem `button` radius already renders
+   * square icon buttons as circles. Kept for ported call sites and for
+   * variants/overrides with a smaller radius (e.g. `unstyled`).
+   */
   isRound?: boolean;
 }
 

package/src/Kbd.tsx

@@ -0,0 +1,26 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Kbd — keyboard-key chip matching Chakra's <Kbd> (light mode).
+ */
+export const Kbd = styled("kbd", {
+  base: {
+    bg: "gray.100",
+    borderRadius: "md",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "gray.200",
+    borderBottomWidth: "3px",
+    fontFamily: "mono",
+    fontSize: "0.8em",
+    fontWeight: "bold",
+    lineHeight: "normal",
+    px: "0.4em",
+    whiteSpace: "nowrap",
+  },
+});

package/src/List.tsx

@@ -6,10 +6,14 @@
 import { styled } from "styled-system/jsx";
 
 /**
- * Unstyled list, matching Chakra's <List> (Panda's preflight already zeroes
- * margins/padding and removes list markers).
+ * Unstyled list, matching Chakra's <List>. The marker removal is explicit —
+ * Chakra's List set listStyleType itself, and coexisting apps run without
+ * Panda's preflight (margins/padding are zeroed by whichever reset is
+ * active).
  */
-export const List = styled("ul");
+export const List = styled("ul", {
+  base: { listStyleType: "none" },
+});
 
 /** List item, matching Chakra's <ListItem>. */
 export const ListItem = styled("li", {

package/src/Menu.recipe.ts

@@ -18,7 +18,17 @@ import { defineSlotRecipe } from "@pandacss/dev";
  */
 export const menu = defineSlotRecipe({
   className: "menu",
-  slots: ["content", "list", "item", "icon", "label", "divider"],
+  slots: [
+    "content",
+    "list",
+    "item",
+    "icon",
+    "label",
+    "divider",
+    "group",
+    "groupTitle",
+    "itemIndicator",
+  ],
   base: {
     content: {
       bg: "white",
@@ -84,5 +94,26 @@ export const menu = defineSlotRecipe({
       my: "2",
       opacity: 0.6,
     },
+    group: {},
+    // Chakra's MenuGroup/MenuOptionGroup title.
+    groupTitle: {
+      display: "block",
+      mx: "4",
+      my: "2",
+      fontWeight: "semibold",
+      fontSize: "sm",
+    },
+    // Check glyph slot for MenuItemOption: space always reserved (as Chakra
+    // does), visible only on the selected item (RAC sets data-selected on it).
+    itemIndicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      marginEnd: "0.75rem",
+      fontSize: "0.8em",
+      opacity: 0,
+      "[data-selected] &": { opacity: 1 },
+    },
   },
 });

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
@@ -175,6 +176,7 @@ export const basePreset = definePreset({
       drawer,
       field,
       menu,
+      numberField,
       slider,
       switchRecipe,
       toast,