@microbit/ui 0.0.0-gray.ramp.90

package/src/Drawer.tsx

@@ -0,0 +1,138 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { createContext, ReactNode, useContext } from "react";
+import {
+  Dialog,
+  Heading as RACHeading,
+  Modal as RACModal,
+  ModalOverlay,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { drawer, DrawerVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { UnmountCallback } from "./UnmountCallback";
+
+type DrawerSlots = ReturnType<typeof drawer>;
+
+const SlotContext = createContext<DrawerSlots>(drawer({}));
+
+export interface DrawerProps extends DrawerVariantProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /**
+   * Called after the drawer has fully closed (exit transition done and the
+   * drawer removed). Matches Chakra's `onCloseComplete`.
+   */
+  onCloseComplete?: () => void;
+  /** Allow closing by clicking the backdrop / pressing Escape (default true). */
+  isDismissable?: boolean;
+  /**
+   * Accessible name for the dialog. Required unless the drawer contains a
+   * `DrawerTitle`, which then labels it (react-aria warns in dev builds when
+   * neither is present). An explicit `aria-label` wins over a `DrawerTitle`.
+   */
+  "aria-label"?: string;
+  children: ReactNode;
+}
+
+/**
+ * Drawer — a focus-trapping panel that slides in from the side. Collapses
+ * Chakra's Drawer/DrawerOverlay/DrawerContent into a single shell; place
+ * DrawerHeader and DrawerBody inside.
+ */
+export const Drawer = ({
+  isOpen,
+  onClose,
+  onCloseComplete,
+  placement,
+  isDismissable = true,
+  "aria-label": ariaLabel,
+  children,
+}: DrawerProps) => {
+  const slots = drawer({ placement });
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+      isDismissable={isDismissable}
+      className={slots.overlay}
+    >
+      <UnmountCallback callback={onCloseComplete} />
+      <RACModal className={slots.content}>
+        <Dialog aria-label={ariaLabel} className={slots.inner}>
+          <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+        </Dialog>
+      </RACModal>
+    </ModalOverlay>
+  );
+};
+
+interface SlotProps {
+  children: ReactNode;
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+export const DrawerHeader = ({
+  children,
+  css: cssProp,
+  className,
+}: SlotProps) => {
+  const slots = useContext(SlotContext);
+  return (
+    <div
+      className={cx(
+        slots.header,
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * DrawerTitle — a heading that labels the drawer dialog (react-aria's title
+ * slot). Use inside DrawerHeader when the drawer has a visible text title;
+ * DrawerHeader itself stays a layout element so it can hold non-heading
+ * content (logos, close buttons).
+ */
+export const DrawerTitle = ({
+  children,
+  css: cssProp,
+  className,
+  level,
+}: SlotProps & {
+  /** Heading element level (default 2, like react-aria). */ level?: number;
+}) => (
+  <RACHeading
+    slot="title"
+    level={level}
+    className={cssProp || className ? cx(css(cssProp), className) : undefined}
+  >
+    {children}
+  </RACHeading>
+);
+
+export const DrawerBody = ({
+  children,
+  css: cssProp,
+  className,
+}: SlotProps) => {
+  const slots = useContext(SlotContext);
+  return (
+    <div
+      className={cx(slots.body, cssProp ? css(cssProp) : undefined, className)}
+    >
+      {children}
+    </div>
+  );
+};

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/GridList.recipe.ts

@@ -0,0 +1,58 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * GridList slot recipe — a vertical list of selectable rows, each of which may
+ * hold its own interactive controls (which is what makes it a grid rather than
+ * a listbox: the roving tab index moves through rows, and the controls inside
+ * a row are reachable without leaving it).
+ *
+ * Chakra had no equivalent, so there is no Chakra look to match: the greys
+ * here are the family's neutral list styling, and an app with a strong
+ * selection colour restates them (classroom's roster does).
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop variants generated.
+ */
+export const gridList = defineSlotRecipe({
+  className: "grid-list",
+  slots: ["root", "item"],
+  base: {
+    root: {
+      // The list takes the roving tab index, so it is focusable itself and
+      // would otherwise draw the platform ring around the whole list.
+      outline: "none",
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      // A row is interactive by definition — it selects, or it acts.
+      cursor: "pointer",
+      outline: "none",
+      transitionProperty: "background",
+      transitionDuration: "ultra-fast",
+      transitionTimingFunction: "ease-in",
+      _hover: { bg: "gray.50" },
+      // A row holding an open menu (or any other popover) keeps the hover
+      // grey, so the row an open menu belongs to stays visible. Hover state
+      // cannot do this on its own: a Popover lays a fixed full-viewport
+      // underlay over the page while open, which takes the pointer off the
+      // row — `:hover` and RAC's own `data-hovered` both drop the moment the
+      // menu appears. A trigger carries `aria-expanded` (useOverlayTrigger),
+      // so the row can see its own open overlay.
+      "&:has([aria-expanded=true])": { bg: "gray.50" },
+      "&[data-selected]": {
+        bg: "gray.100",
+        _hover: { bg: "gray.100" },
+        "&:has([aria-expanded=true])": { bg: "gray.100" },
+      },
+      "&[data-focus-visible]": { focusShadow: "outline" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+  },
+});

package/src/GridList.tsx

@@ -0,0 +1,81 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  GridList as RACGridList,
+  GridListItem as RACGridListItem,
+  GridListItemProps as RACGridListItemProps,
+  GridListProps as RACGridListProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { gridList } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface GridListProps<T extends object>
+  extends Omit<RACGridListProps<T>, "className" | "style" | "children"> {
+  /** `GridListItem`s, or a render function when `items` is given. */
+  children: RACGridListProps<T>["children"];
+  /** Per-instance style overrides for the list, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * GridList — react-aria-components' <GridList>: a list of selectable rows,
+ * each of which may contain its own buttons and menus.
+ *
+ * Reach for it over a `ListBox` when the rows carry controls: a listbox option
+ * is a leaf, so a button inside one is unreachable by keyboard, where a grid
+ * row's contents are part of the grid's navigation.
+ */
+export const GridList = <T extends object>({
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: GridListProps<T>) => {
+  const slots = gridList();
+  return (
+    <RACGridList
+      {...rest}
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
+    >
+      {children}
+    </RACGridList>
+  );
+};
+
+export interface GridListItemProps<T extends object = object>
+  extends Omit<RACGridListItemProps<T>, "className" | "style" | "children"> {
+  children?: ReactNode;
+  /** Per-instance style overrides for the row, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * A row in a `GridList`. Its children are laid out by the row itself — the
+ * gridcell react-aria puts between them is `display: contents`.
+ *
+ * Give every row a `textValue`: react-aria derives typeahead text from string
+ * children only, and a row is usually a composition rather than a string.
+ */
+export const GridListItem = <T extends object = object>({
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: GridListItemProps<T>) => {
+  const slots = gridList();
+  return (
+    <RACGridListItem
+      {...rest}
+      className={cx(slots.item, cssProp ? css(cssProp) : undefined, className)}
+    >
+      {children}
+    </RACGridListItem>
+  );
+};

package/src/Heading.recipe.ts

@@ -0,0 +1,52 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+/**
+ * Heading recipe — Chakra's default Heading base + responsive sizes.
+ * A config recipe for the same reasons as `button` (see Button.recipe.ts);
+ * the `marketing` variant is token-driven via the `display` font, so brands
+ * only override tokens.
+ *
+ * Registered in the base preset (base-preset.ts).
+ */
+export const heading = defineRecipe({
+  className: "heading",
+  jsx: ["Heading"],
+  base: {
+    fontFamily: "heading",
+    fontWeight: "bold",
+  },
+  variants: {
+    size: {
+      "4xl": { fontSize: { base: "6xl", md: "7xl" }, lineHeight: 1 },
+      "3xl": { fontSize: { base: "5xl", md: "6xl" }, lineHeight: 1 },
+      "2xl": {
+        fontSize: { base: "4xl", md: "5xl" },
+        lineHeight: { base: 1.2, md: 1 },
+      },
+      xl: {
+        fontSize: { base: "3xl", md: "4xl" },
+        lineHeight: { base: 1.33, md: 1.2 },
+      },
+      lg: {
+        fontSize: { base: "2xl", md: "3xl" },
+        lineHeight: { base: 1.33, md: 1.2 },
+      },
+      md: { fontSize: "xl", lineHeight: 1.2 },
+      sm: { fontSize: "md", lineHeight: 1.2 },
+      xs: { fontSize: "sm", lineHeight: 1.2 },
+    },
+    // Brand marketing headings. The `display` font token is Helvetica in OSS and
+    // GT Walsheim in the private preset.
+    variant: {
+      marketing: { fontFamily: "display" },
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+  },
+});

package/src/Heading.tsx

@@ -0,0 +1,14 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+import { heading } from "styled-system/recipes";
+
+/**
+ * Heading — Chakra's <Heading> equivalent, backed by the `heading` config
+ * recipe (so the private preset can add brand variants). Defaults to an <h2>;
+ * pass `as` to change the element and `size` to pick the type scale.
+ */
+export const Heading = styled("h2", heading);

package/src/Icon.tsx

@@ -0,0 +1,75 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ComponentType, SVGProps } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+/**
+ * Any component that renders an `<svg>` from svg props. Deliberately no
+ * narrower than the props `Icon` actually passes, so it accepts both
+ * react-icons' `IconType` and svgr components (`import X from "./x.svg?react"`,
+ * which the apps use for their custom-path icons — Chakra's `<Icon as={…}>`
+ * took either).
+ */
+export type IconComponent = ComponentType<
+  Pick<
+    SVGProps<SVGSVGElement>,
+    "className" | "focusable" | "role" | "aria-label" | "aria-hidden"
+  >
+>;
+
+export interface IconProps {
+  /** The icon component to render: a react-icons glyph or an svgr import. */
+  as: IconComponent;
+  /** Panda style overrides (size via fontSize/boxSize, colour, etc.). */
+  css?: SystemStyleObject;
+  className?: string;
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+}
+
+/**
+ * Icon — renders a react-icons glyph inline at `1em`, matching Chakra's <Icon>
+ * base styles. `fill: currentColor` means the glyph follows the surrounding
+ * text colour (set `css={{ color: ... }}` to override), so it inherits colour
+ * like Chakra's icons rather than defaulting to black.
+ *
+ * Unlabelled icons are treated as decorative and hidden from assistive tech;
+ * a labelled icon gets `role="img"` (a bare svg aria-label is unreliably
+ * announced without it).
+ */
+export const Icon = ({
+  as: As,
+  css: cssProp,
+  className,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+}: IconProps) => (
+  <As
+    className={cx(
+      css({
+        width: "1em",
+        height: "1em",
+        display: "inline-block",
+        lineHeight: "1em",
+        flexShrink: 0,
+        fill: "currentColor",
+        // Chakra's Icon set this on the element itself, and an inline-block
+        // icon sits ~3px off without it. Panda's preflight happens to set it
+        // on every svg, which hid the omission in apps that had already
+        // flipped — classroom measured the difference at its kill-switch,
+        // where the preflight arrived and moved every icon back.
+        verticalAlign: "middle",
+        ...cssProp,
+      }),
+      className,
+    )}
+    focusable="false"
+    aria-label={ariaLabel}
+    aria-hidden={ariaHidden ?? (ariaLabel ? undefined : true)}
+    role={ariaLabel ? "img" : undefined}
+  />
+);

package/src/IconButton.tsx

@@ -0,0 +1,44 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef } from "react";
+import { Button, ButtonProps } from "./Button";
+
+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`).
+   * 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;
+}
+
+/**
+ * IconButton — a square, icon-only Button. Zeroes the recipe's horizontal
+ * padding (its size variants add `px`, which would squeeze a single glyph in a
+ * fixed-width button) and keeps the `minW` from the size so the box stays
+ * square. Pass the icon as children.
+ */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton({ isRound, css: cssProp, children, ...rest }, ref) {
+    return (
+      <Button
+        ref={ref}
+        css={{
+          px: 0,
+          ...(isRound ? { borderRadius: "full" } : {}),
+          ...cssProp,
+        }}
+        {...rest}
+      >
+        {children}
+      </Button>
+    );
+  },
+);

package/src/Image.tsx

@@ -0,0 +1,11 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/** Image — an <img> accepting Panda style props. Replaces Chakra's <Image>. */
+export const Image = styled("img", {
+  base: { maxWidth: "100%" },
+});

package/src/Input.recipe.ts

@@ -0,0 +1,75 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+// Chakra's transition.property.common, inlined (Panda has no transitionProperty
+// token category).
+const transitionCommon =
+  "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform";
+
+/**
+ * Input recipe — Chakra's outline Input field (light mode) with its size
+ * scale. Used by the shared-ui Input and NativeSelect, and by TextField's
+ * input slot.
+ *
+ * Focus matches both native `:focus-visible` (plain inputs; browsers treat any
+ * focus in a text field as focus-visible) and react-aria's `data-focused`
+ * (inputs inside RAC TextField). Focus is declared after invalid so a focused
+ * invalid field shows the focus ring, as in Chakra.
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
+ */
+export const input = defineRecipe({
+  className: "input",
+  base: {
+    width: "100%",
+    minWidth: 0,
+    outline: "none",
+    position: "relative",
+    appearance: "none",
+    font: "inherit",
+    transitionProperty: transitionCommon,
+    transitionDuration: "normal",
+    border: "1px solid",
+    // The accessible outline stops: gray.400 is the ramp's 3:1-on-white
+    // boundary grey (WCAG 1.4.11), hover steps darker, never lighter.
+    // Chakra used 200/300 (~1.3:1), which read as barely-there.
+    borderColor: "gray.400",
+    bg: "inherit",
+    color: "inherit",
+    _hover: { borderColor: "gray.500" },
+    "&[data-invalid], &:user-invalid": {
+      borderColor: "danger.500",
+      boxShadow: "0 0 0 1px token(colors.danger.500)",
+    },
+    "&:is(:focus-visible, [data-focused])": {
+      zIndex: 1,
+      borderColor: "focusBorder",
+      boxShadow: "0 0 0 1px token(colors.focusBorder)",
+      // Focus indicator for forced-colors modes, which strip the box-shadow
+      // and force the border colour (the focusShadow utility's technique; the
+      // ring here is the 1px border tint, not an outline* shadow token).
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+    },
+    "&:is(:disabled, [data-disabled])": {
+      opacity: 0.4,
+      cursor: "not-allowed",
+    },
+  },
+  variants: {
+    // Chakra's Input size scale, minus the unused xs.
+    size: {
+      lg: { fontSize: "lg", px: "4", h: "12", borderRadius: "md" },
+      md: { fontSize: "md", px: "4", h: "10", borderRadius: "md" },
+      sm: { fontSize: "sm", px: "3", h: "8", borderRadius: "sm" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/Input.tsx

@@ -0,0 +1,44 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, InputHTMLAttributes } from "react";
+import { css, cx } from "styled-system/css";
+import { input, InputVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface InputProps
+  // `size` is the recipe's size scale, as in Chakra; the native character-count
+  // attribute it shadows was unused.
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "size">,
+    InputVariantProps {
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * Input — a native input styled like Chakra's outline Input. For a
+ * labelled field with help/error text use TextField instead.
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { css: cssProp, className, ...props },
+  ref,
+) {
+  // splitVariantProps, not a hand-picked `size`: an app preset can add variant
+  // groups to the recipe (classroom adds `variant`), and cherry-picking would
+  // silently drop them onto the DOM as unknown attributes instead.
+  const [variantProps, rest] = input.splitVariantProps(props);
+  return (
+    <input
+      ref={ref}
+      className={cx(
+        input(variantProps),
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+      {...rest}
+    />
+  );
+});