@microbit/ui 0.1.0-alpha.10

package/src/Checkbox.recipe.ts

@@ -0,0 +1,105 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Checkbox slot recipe — Chakra's checkbox with the default blue colorScheme
+ * (light mode) and its sm/md/lg size scale. 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), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
+ */
+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,
+      transitionProperty: "box-shadow",
+      transitionDuration: "normal",
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderRadius: "sm",
+      borderColor: "inherit",
+      color: "white",
+      bg: "white",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+        borderColor: "controlCheckedBg",
+        color: "white",
+        _hover: {
+          bg: "controlCheckedHoverBg",
+          borderColor: "controlCheckedHoverBg",
+        },
+      },
+      // 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",
+      },
+    },
+    icon: {
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+  variants: {
+    // Chakra's Checkbox size scale. The icon dimensions are Chakra's
+    // 1.2em-wide check glyph at each size's icon fontSize (3xs/2xs/2xs),
+    // resolved to rem.
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        icon: { width: "0.54rem", height: "0.54rem" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/Checkbox.tsx

@@ -0,0 +1,76 @@
+/**
+ * (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, CheckboxVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CheckboxProps
+  extends Omit<RACCheckboxProps, "className" | "children" | "style">,
+    CheckboxVariantProps {
+  /** 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 checkbox.
+ * Children render as the label; wrap them in a visually-hidden span for
+ * icon-less checkboxes.
+ */
+export const Checkbox = ({
+  size,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: CheckboxProps) => {
+  const slots = checkbox({ size });
+  return (
+    <RACCheckbox
+      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
+          >
+            {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}
+              data-disabled={isDisabled || undefined}
+            >
+              {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/Code.tsx

@@ -0,0 +1,20 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Code — inline code chip matching Chakra's <Code> (gray subtle, light mode).
+ */
+export const Code = styled("code", {
+  base: {
+    fontFamily: "mono",
+    fontSize: "sm",
+    px: "0.2em",
+    borderRadius: "sm",
+    bg: "gray.100",
+    color: "gray.800",
+  },
+});

package/src/Collapse.tsx

@@ -0,0 +1,180 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  CSSProperties,
+  ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CollapseProps {
+  /** Expanded when true (Chakra's `in`). */
+  isOpen: boolean;
+  /** Height when collapsed (Chakra's `startingHeight`). */
+  startingHeight?: number | string;
+  /**
+   * Height when expanded (Chakra's `endingHeight`; defaults to the measured
+   * content height, tracked with a ResizeObserver so nested expansion works).
+   */
+  endingHeight?: number | string;
+  /** Remove the content from the DOM once the exit transition finishes. */
+  unmountOnExit?: boolean;
+  css?: SystemStyleObject;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+const toCssSize = (v: number | string) =>
+  typeof v === "number" ? `${v}px` : v;
+
+/**
+ * Collapse — Chakra's Collapse transition without framer-motion: the content
+ * is measured and the wrapper's height (and opacity, when collapsing to zero)
+ * transitions between the collapsed and expanded sizes. Content stays mounted
+ * unless `unmountOnExit` is set.
+ *
+ * As with framer-motion, only `isOpen` changes animate: initial mounts render
+ * at rest, and height corrections (late measurement, content growth) snap —
+ * otherwise a collapse mounted inside an entering view morphs during the
+ * outer animation.
+ */
+export const Collapse = ({
+  isOpen,
+  startingHeight = 0,
+  endingHeight,
+  unmountOnExit = false,
+  css: cssProp,
+  className,
+  style,
+  children,
+}: CollapseProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [measuredHeight, setMeasuredHeight] = useState<number>();
+  // For unmountOnExit: stay in the DOM until the exit transition ends.
+  const [present, setPresent] = useState(isOpen);
+  // The state the DOM shows. It follows isOpen from a layout effect so the
+  // transition-enable and the height flip land in the same commit (a
+  // render-time flip detector is unreliable: React can discard renders,
+  // losing the state update while keeping ref mutations).
+  const [displayOpen, setDisplayOpen] = useState(isOpen);
+  const [animating, setAnimating] = useState(false);
+
+  useLayoutEffect(() => {
+    if (isOpen === displayOpen) {
+      return;
+    }
+    if (isOpen) {
+      // Opening: mount (collapsed) first, then flip on the next frame so
+      // the browser has a computed collapsed state to transition from.
+      setPresent(true);
+      const raf = requestAnimationFrame(() => {
+        setAnimating(true);
+        setDisplayOpen(true);
+      });
+      return () => cancelAnimationFrame(raf);
+    }
+    // Closing: enable the transition and flip together, pre-paint.
+    setAnimating(true);
+    setDisplayOpen(false);
+  }, [isOpen, displayOpen]);
+
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el || endingHeight !== undefined) {
+      return;
+    }
+    setMeasuredHeight(el.scrollHeight);
+    const observer = new ResizeObserver(() =>
+      setMeasuredHeight(el.scrollHeight),
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [endingHeight, present]);
+
+  // Fallback for browsers/edge cases where transitionend doesn't fire.
+  useEffect(() => {
+    if (animating) {
+      const timeout = setTimeout(() => {
+        setAnimating(false);
+        if (!isOpen && unmountOnExit) {
+          setPresent(false);
+        }
+      }, 400);
+      return () => clearTimeout(timeout);
+    }
+  }, [animating, isOpen, unmountOnExit]);
+
+  if (unmountOnExit && !present) {
+    return null;
+  }
+
+  const expanded =
+    endingHeight !== undefined
+      ? toCssSize(endingHeight)
+      : measuredHeight !== undefined
+        ? `${measuredHeight}px`
+        : "auto";
+  const collapsed = toCssSize(startingHeight);
+  const hideWhenCollapsed = collapsed === "0px" || collapsed === "0";
+
+  return (
+    <div
+      onTransitionEnd={(e) => {
+        if (e.propertyName === "height" && e.target === e.currentTarget) {
+          setAnimating(false);
+          if (!isOpen && unmountOnExit) {
+            setPresent(false);
+          }
+        }
+      }}
+      className={cx(
+        css(
+          {
+            overflow: "hidden",
+            display: "block",
+            transitionDuration: "0.25s",
+            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            _motionReduce: { transition: "none" },
+          },
+          cssProp,
+        ),
+        className,
+      )}
+      // Runtime-measured/caller-supplied heights; transitions enabled only
+      // while an isOpen change is in flight.
+      style={{
+        transitionProperty: animating ? "height, opacity" : "none",
+        height: displayOpen ? expanded : collapsed,
+        opacity: displayOpen || !hideWhenCollapsed ? 1 : 0,
+        // At rest fully-collapsed, remove the content from the a11y tree
+        // and tab order, as Chakra did (kept visible while animating so
+        // the exit transition shows).
+        visibility:
+          displayOpen || animating || !hideWhenCollapsed ? undefined : "hidden",
+        ...style,
+      }}
+    >
+      <div
+        ref={contentRef}
+        // flow-root: the measured element must be a block formatting
+        // context, or children's margins collapse through it and
+        // scrollHeight under-measures — the outer (overflow: hidden)
+        // wrapper IS a BFC and needs the full height, so the mismatch
+        // clips the last line of margined content (python-editor's API
+        // docs). Rendering is unchanged: the margins always displayed
+        // inside the outer BFC.
+        className={css({ display: "flow-root" })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/Divider.tsx

@@ -0,0 +1,52 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ComponentProps, forwardRef } from "react";
+import { styled } from "styled-system/jsx";
+
+const StyledDivider = styled("hr", {
+  base: {
+    border: 0,
+    borderColor: "gray.200",
+    opacity: 0.6,
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        width: "100%",
+      },
+      vertical: {
+        borderLeftWidth: "1px",
+        borderLeftStyle: "solid",
+        height: "100%",
+      },
+    },
+  },
+  defaultVariants: { orientation: "horizontal" },
+});
+
+export interface DividerProps extends ComponentProps<typeof StyledDivider> {}
+
+/**
+ * Divider — a hairline rule matching Chakra's <Divider> (60% opacity; set
+ * `borderColor` to tint). `orientation="vertical"` needs a height from the
+ * layout, e.g. a stretched flex row (Chakra's vertical divider likewise
+ * relied on `height: 100%`).
+ */
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(
+  function Divider(props, ref) {
+    return (
+      <StyledDivider
+        ref={ref}
+        aria-orientation={
+          props.orientation === "vertical" ? "vertical" : "horizontal"
+        }
+        {...props}
+      />
+    );
+  },
+);

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" },
+});