@microbit/ui 0.1.0-alpha.3

package/src/Button.tsx

@@ -0,0 +1,84 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, ReactNode } from "react";
+import {
+  Button as RACButton,
+  ButtonProps as RACButtonProps,
+} from "react-aria-components";
+import { css, cva, cx } from "styled-system/css";
+import { button, ButtonVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+// Chakra's ButtonIcon: keeps the glyph centred and spaced from the label
+// (iconSpacing 0.5rem).
+const buttonIcon = cva({
+  base: {
+    display: "inline-flex",
+    alignSelf: "center",
+    flexShrink: 0,
+  },
+  variants: {
+    side: {
+      left: { marginEnd: "2" },
+      right: { marginStart: "2" },
+    },
+  },
+});
+
+export interface ButtonProps
+  extends Omit<RACButtonProps, "className" | "children">,
+    ButtonVariantProps {
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  /** Icon rendered before the label, matching Chakra's `leftIcon`. */
+  leftIcon?: ReactNode;
+  /** Icon rendered after the label, matching Chakra's `rightIcon`. */
+  rightIcon?: ReactNode;
+  children?: ReactNode;
+}
+
+/**
+ * Button — react-aria-components <Button> styled with the `button` config
+ * recipe. The recipe's interaction states are driven by RAC's data attributes
+ * (see the preset's widened conditions), so disabled/hover/press/focus all work
+ * without extra wiring.
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant,
+      size,
+      css: cssProp,
+      className,
+      leftIcon,
+      rightIcon,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <RACButton
+        ref={ref}
+        className={cx(
+          button({ variant, size }),
+          cssProp ? css(cssProp) : undefined,
+          className,
+        )}
+        {...rest}
+      >
+        {leftIcon ? (
+          <span className={buttonIcon({ side: "left" })}>{leftIcon}</span>
+        ) : null}
+        {children}
+        {rightIcon ? (
+          <span className={buttonIcon({ side: "right" })}>{rightIcon}</span>
+        ) : null}
+      </RACButton>
+    );
+  },
+);

package/src/ButtonGroup.tsx

@@ -0,0 +1,63 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, HTMLAttributes } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Square the inner radii so adjacent buttons form one control (Chakra's
+   * `isAttached`). Otherwise buttons get a small gap.
+   */
+  isAttached?: boolean;
+  /** Per-instance style overrides. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * ButtonGroup — lays out related buttons in a row. Works with any button
+ * elements (shared-ui or native). Replaces Chakra's ButtonGroup.
+ */
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup({ isAttached, css: cssProp, className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          css({
+            display: "inline-flex",
+            alignItems: "center",
+            // Buttons are position: relative, so without this an attached
+            // sibling paints over the focused button's focus-ring shadow
+            // (Chakra's Button applied zIndex 1 on focus when grouped).
+            "& > *": { _focus: { zIndex: 1 } },
+          }),
+          isAttached
+            ? css({
+                gap: 0,
+                // :first-child/:last-child, not :first-of-type: attached
+                // groups can mix element types (e.g. select + button), and
+                // -of-type matches per element type.
+                "& > *:first-child:not(:last-child)": {
+                  borderEndRadius: 0,
+                },
+                "& > *:not(:first-child):not(:last-child)": {
+                  borderRadius: 0,
+                },
+                "& > *:not(:first-child):last-child": {
+                  borderStartRadius: 0,
+                },
+              })
+            : css({ gap: 2 }),
+          cssProp ? css(cssProp) : undefined,
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);

package/src/Card.recipe.ts

@@ -0,0 +1,49 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Card slot recipe — Chakra's Card at its default md size (light mode), with
+ * the `elevated` (default) and `outline` variants this app uses.
+ *
+ * Registered in the base preset (base-preset.ts); `variant` is
+ * forwarded as a runtime prop so the variants are generated via `staticCss`.
+ */
+export const card = defineSlotRecipe({
+  className: "card",
+  slots: ["container", "body"],
+  base: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      minWidth: 0,
+      wordWrap: "break-word",
+      bg: "white",
+      borderRadius: "md",
+      color: "inherit",
+    },
+    body: {
+      padding: "5",
+      flex: "1 1 0%",
+    },
+  },
+  variants: {
+    variant: {
+      elevated: {
+        container: { boxShadow: "base" },
+      },
+      outline: {
+        container: {
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "gray.200",
+        },
+      },
+    },
+  },
+  defaultVariants: { variant: "elevated" },
+});

package/src/Card.tsx

@@ -0,0 +1,56 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, HTMLAttributes } from "react";
+import { css, cx } from "styled-system/css";
+import { card, CardVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    CardVariantProps {
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+}
+
+/**
+ * Card — Chakra's <Card> equivalent (md size). Place a CardBody inside.
+ */
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { variant, css: cssProp, className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cx(
+        card({ variant }).container,
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+      {...rest}
+    />
+  );
+});
+
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+  css?: SystemStyleObject;
+}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  function CardBody({ css: cssProp, className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          card({}).body,
+          cssProp ? css(cssProp) : undefined,
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);

package/src/Checkbox.recipe.ts

@@ -0,0 +1,71 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Checkbox slot recipe — Chakra's md checkbox with the default blue
+ * colorScheme (light mode). The control's `borderColor: inherit` picks up a
+ * `borderColor` set on the root, matching Chakra's convention for tinting the
+ * box from the call site.
+ *
+ * State styling keys off data attributes stamped on the control by the
+ * shared-ui Checkbox (react-aria provides the state via render props).
+ *
+ * Registered in the base preset (base-preset.ts). No variants, so it
+ * needs no `staticCss` entry.
+ */
+export const checkbox = defineSlotRecipe({
+  className: "checkbox",
+  slots: ["root", "control", "icon", "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,
+      width: "4",
+      height: "4",
+      transitionProperty: "box-shadow",
+      transitionDuration: "normal",
+      border: "2px solid",
+      borderRadius: "sm",
+      borderColor: "inherit",
+      color: "white",
+      bg: "white",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+        borderColor: "controlCheckedBg",
+        color: "white",
+        _hover: {
+          bg: "controlCheckedHoverBg",
+          borderColor: "controlCheckedHoverBg",
+        },
+      },
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+    },
+    icon: {
+      width: "0.75rem",
+      height: "0.75rem",
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+});

package/src/Checkbox.tsx

@@ -0,0 +1,66 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  Checkbox as RACCheckbox,
+  CheckboxProps as RACCheckboxProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { checkbox } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CheckboxProps
+  extends Omit<RACCheckboxProps, "className" | "children" | "style"> {
+  /** Per-instance style overrides for the root, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Checkbox — react-aria-components <Checkbox> styled like Chakra's md
+ * checkbox. Children render as the label; wrap them in a visually-hidden
+ * span for icon-less checkboxes.
+ */
+export const Checkbox = ({
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: CheckboxProps) => {
+  const slots = checkbox();
+  return (
+    <RACCheckbox
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      {({ isSelected, isFocusVisible }) => (
+        <>
+          <span
+            className={slots.control}
+            data-selected={isSelected || undefined}
+            data-focus-visible={isFocusVisible || undefined}
+            aria-hidden
+          >
+            {isSelected && (
+              <svg viewBox="0 0 12 10" className={slots.icon} aria-hidden>
+                <polyline
+                  points="1.5 6 4.5 9 10.5 1"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+          </span>
+          {children != null && <span className={slots.label}>{children}</span>}
+        </>
+      )}
+    </RACCheckbox>
+  );
+};

package/src/CloseButton.tsx

@@ -0,0 +1,87 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ButtonHTMLAttributes, forwardRef } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+import { CloseIcon } from "./CloseIcon";
+
+export interface CloseButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+  /** Chakra CloseButton sizes: sm 24px box, md 32px (default). */
+  size?: "sm" | "md";
+  /**
+   * Grow the touch target 8px beyond the visible button on every side via an
+   * ::after overlay.
+   */
+  expandHitArea?: boolean;
+  "aria-label": string;
+  /** Per-instance style overrides, merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * CloseButton — Chakra's standalone X button. A plain button (not react-aria)
+ * so call sites can extend the hit area with pseudo-elements, which
+ * react-aria's press bounding-rect check would defeat.
+ */
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
+  function CloseButton(
+    { size = "md", expandHitArea = false, css: cssProp, className, ...rest },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cx(
+          // A single css() call so per-instance overrides of base properties
+          // (e.g. borderRadius) merge rather than racing on stylesheet order.
+          css(
+            {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              position: "relative",
+              cursor: "pointer",
+              bg: "transparent",
+              border: "none",
+              color: "inherit",
+              outline: "none",
+              borderRadius: "md",
+              transitionProperty: "background-color, box-shadow",
+              transitionDuration: "normal",
+              _hover: { bg: "blackAlpha.100" },
+              _active: { bg: "blackAlpha.200" },
+              _focusVisible: { focusShadow: "outline" },
+            },
+            size === "sm"
+              ? { width: "6", height: "6", fontSize: "2xs" }
+              : { width: "8", height: "8", fontSize: "xs" },
+            expandHitArea
+              ? {
+                  _after: {
+                    position: "absolute",
+                    top: -2,
+                    right: -2,
+                    bottom: -2,
+                    left: -2,
+                    content: '""',
+                  },
+                }
+              : undefined,
+            cssProp,
+          ),
+          className,
+        )}
+        {...rest}
+      >
+        <CloseIcon />
+      </button>
+    );
+  },
+);

package/src/CloseIcon.tsx

@@ -0,0 +1,40 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CloseIconProps {
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * CloseIcon — the "✕" glyph used on close buttons (dialogs, toasts). This is
+ * Chakra's exact CloseButton path so the visual matches; sized to `1em` and
+ * `fill: currentColor` like the other icons. Reused wherever a close control
+ * is needed.
+ */
+export const CloseIcon = ({ css: cssProp, className }: CloseIconProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    focusable="false"
+    aria-hidden="true"
+    className={cx(
+      css({
+        width: "1em",
+        height: "1em",
+        display: "inline-block",
+        lineHeight: "1em",
+        flexShrink: 0,
+        fill: "currentColor",
+        ...cssProp,
+      }),
+      className,
+    )}
+  >
+    <path d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z" />
+  </svg>
+);

package/src/Divider.tsx

@@ -0,0 +1,21 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Divider — a horizontal rule matching Chakra's <Divider> (hairline at 60%
+ * opacity; set `borderColor` to tint). Horizontal only.
+ */
+export const Divider = styled("hr", {
+  base: {
+    border: 0,
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderColor: "gray.200",
+    opacity: 0.6,
+    width: "100%",
+  },
+});

package/src/Drawer.recipe.ts

@@ -0,0 +1,98 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Drawer slot recipe — Chakra's default Drawer parts (light mode) at its
+ * default `xs` size (20rem panel). Consumed by the shared-ui Drawer, which maps
+ * the slots onto react-aria-components' ModalOverlay / Modal / Dialog.
+ *
+ * The enter transition approximates Chakra's slide spring (damping 25,
+ * stiffness 180) with a decelerating tween; exit matches its 0.15s ease-in-out
+ * tween.
+ *
+ * Registered in the base preset (base-preset.ts); `placement` is
+ * forwarded as a runtime prop so the variants are generated via `staticCss`.
+ */
+export const drawer = defineSlotRecipe({
+  className: "drawer",
+  slots: ["overlay", "content", "inner", "header", "body"],
+  base: {
+    overlay: {
+      position: "fixed",
+      inset: 0,
+      w: "100%",
+      h: "100%",
+      bg: "blackAlpha.600",
+      zIndex: "modal",
+      opacity: 1,
+      transition: "opacity 0.2s ease-out",
+      "&[data-entering]": { opacity: 0 },
+      "&[data-exiting]": { opacity: 0 },
+      _motionReduce: { transition: "none" },
+    },
+    content: {
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      width: "100%",
+      maxWidth: "xs",
+      maxH: "100dvh",
+      color: "inherit",
+      bg: "white",
+      boxShadow: "lg",
+      display: "flex",
+      flexDirection: "column",
+      outline: "none",
+      zIndex: "modal",
+      transform: "translateX(0)",
+      transition: "transform 0.3s cubic-bezier(0, 0, 0.2, 1)",
+      "&[data-exiting]": {
+        transition: "transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+      },
+      _motionReduce: { transition: "none" },
+    },
+    inner: {
+      outline: "none",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "100%",
+    },
+    header: {
+      px: "6",
+      py: "4",
+      fontSize: "xl",
+      fontWeight: "semibold",
+      flexShrink: 0,
+    },
+    body: {
+      px: "6",
+      py: "2",
+      flex: "1",
+      overflow: "auto",
+    },
+  },
+  variants: {
+    placement: {
+      left: {
+        content: {
+          left: 0,
+          "&[data-entering]": { transform: "translateX(-100%)" },
+          "&[data-exiting]": { transform: "translateX(-100%)" },
+        },
+      },
+      right: {
+        content: {
+          right: 0,
+          "&[data-entering]": { transform: "translateX(100%)" },
+          "&[data-exiting]": { transform: "translateX(100%)" },
+        },
+      },
+    },
+  },
+  defaultVariants: { placement: "left" },
+});