@microbit/ui 0.0.0-gray.ramp.90

package/src/InputGroup.tsx

@@ -0,0 +1,62 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * InputGroup — relative wrapper for an Input with addon elements. Pad the
+ * input (`pl`/`pr`) to make room for the elements. Replaces Chakra's
+ * InputGroup.
+ */
+export const InputGroup = styled("div", {
+  base: { position: "relative", width: "100%", display: "flex" },
+});
+
+// The element styles are written out twice rather than shared via a spread:
+// Panda's extractor only reliably evaluates inline literals.
+// The size variants are square boxes matching the input recipe's height per
+// size, as in Chakra; pass the same `size` as the grouped Input.
+
+/** Element overlaying the start of an InputGroup (Chakra InputLeftElement). */
+export const InputLeftElement = styled("div", {
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2,
+  },
+  variants: {
+    size: {
+      lg: { width: "12", height: "12" },
+      md: { width: "10", height: "10" },
+      sm: { width: "8", height: "8" },
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+/** Element overlaying the end of an InputGroup (Chakra InputRightElement). */
+export const InputRightElement = styled("div", {
+  base: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2,
+  },
+  variants: {
+    size: {
+      lg: { width: "12", height: "12" },
+      md: { width: "10", height: "10" },
+      sm: { width: "8", height: "8" },
+    },
+  },
+  defaultVariants: { size: "md" },
+});

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/Link.tsx

@@ -0,0 +1,23 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Link — anchor styled to match Chakra's <Link> base (no underline until hover,
+ * focus ring on keyboard focus). Accepts Panda style props for colour etc.
+ */
+export const Link = styled("a", {
+  base: {
+    cursor: "pointer",
+    textDecoration: "none",
+    outline: "none",
+    transitionProperty:
+      "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
+    transitionDuration: "normal",
+    _hover: { textDecoration: "underline" },
+    _focusVisible: { focusShadow: "outline" },
+  },
+});

package/src/LinkBox.tsx

@@ -0,0 +1,88 @@
+/**
+ * (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 { styled } from "styled-system/jsx";
+import { button } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+/**
+ * LinkBox — makes a whole box clickable via a nested LinkOverlay (or any
+ * element with an inset `_before` overlay). Other interactive children must
+ * be raised with `zIndex: 1`. Replaces Chakra's <LinkBox>.
+ */
+export const LinkBox = styled("div", {
+  base: { position: "relative" },
+});
+
+/**
+ * LinkOverlay — an anchor whose `::before` stretches over the nearest
+ * LinkBox, making the whole box its hit area. For button-driven overlays,
+ * apply the same `_before` inset style to a Button instead.
+ */
+export const LinkOverlay = styled("a", {
+  base: {
+    position: "static",
+    _before: {
+      content: '""',
+      cursor: "inherit",
+      display: "block",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      zIndex: 0,
+      width: "100%",
+      height: "100%",
+    },
+  },
+});
+
+export interface LinkOverlayButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+  /** Per-instance style overrides, merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * LinkOverlayButton — the button flavour of LinkOverlay: its `::before`
+ * stretches over the nearest LinkBox so the whole box is clickable.
+ *
+ * Deliberately a plain button, not a react-aria one: react-aria's usePress
+ * cancels presses that land outside the button's bounding rect, which defeats
+ * the overlay. `position: static` overrides the button recipe's base so the
+ * overlay anchors to the LinkBox (Chakra's LinkOverlay did the same over its
+ * Button).
+ */
+export const LinkOverlayButton = forwardRef<
+  HTMLButtonElement,
+  LinkOverlayButtonProps
+>(function LinkOverlayButton({ css: cssProp, className, ...rest }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cx(
+        button({ variant: "unstyled" }),
+        css({
+          cursor: "pointer",
+          position: "static",
+          _before: {
+            content: '""',
+            cursor: "pointer",
+            display: "block",
+            position: "absolute",
+            inset: 0,
+            zIndex: 0,
+          },
+        }),
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+      {...rest}
+    />
+  );
+});

package/src/LinkButton.tsx

@@ -0,0 +1,80 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, ReactNode } from "react";
+import {
+  Link as RACLink,
+  LinkProps as RACLinkProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { button, ButtonVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { buttonIcon } from "./button-icon";
+
+export interface LinkButtonProps
+  extends Omit<RACLinkProps, "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;
+}
+
+// Anchors pick up underline styling that buttons never have.
+const linkReset = css.raw({
+  textDecoration: "none",
+  _hover: { textDecoration: "none" },
+});
+
+/**
+ * LinkButton — a navigation link that looks like a Button (Chakra's
+ * `Button as="a"`). react-aria-components <Link> renders a real anchor
+ * (`href`, `target`, new-tab/middle-click semantics preserved) with the same
+ * interaction data attributes as Button, so the `button` recipe's
+ * hover/press/focus/disabled states apply unchanged.
+ *
+ * Use for navigation that should read as a call to action (e.g. an external
+ * help page presented as a dialog's primary action); use Button for
+ * in-page actions.
+ */
+export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
+  function LinkButton(
+    {
+      variant,
+      size,
+      css: cssProp,
+      className,
+      leftIcon,
+      rightIcon,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <RACLink
+        ref={ref}
+        className={cx(
+          button({ variant, size }),
+          css(linkReset, cssProp),
+          className,
+        )}
+        {...rest}
+      >
+        {leftIcon ? (
+          <span className={buttonIcon({ side: "left" })}>{leftIcon}</span>
+        ) : null}
+        {children}
+        {rightIcon ? (
+          <span className={buttonIcon({ side: "right" })}>{rightIcon}</span>
+        ) : null}
+      </RACLink>
+    );
+  },
+);

package/src/List.tsx

@@ -0,0 +1,31 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * 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", {
+  base: { listStyleType: "none" },
+});
+
+/** List item, matching Chakra's <ListItem>. */
+export const ListItem = styled("li", {
+  base: {},
+});
+
+/** Bulleted list matching Chakra's <UnorderedList>. */
+export const UnorderedList = styled("ul", {
+  base: { listStyleType: "disc", marginStart: "1em" },
+});
+
+/** Numbered list matching Chakra's <OrderedList>. */
+export const OrderedList = styled("ol", {
+  base: { listStyleType: "decimal", marginStart: "1em" },
+});

package/src/ListBox.recipe.ts

@@ -0,0 +1,43 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * ListBox slot recipe — a standalone list of choosable options, single or
+ * multiple. Distinct from the `select` recipe's `list`/`option` slots, which
+ * style the same react-aria primitive inside a dropdown card: this one sits
+ * inline on the page, so it carries no surface of its own.
+ *
+ * An option is a leaf — if the rows need their own buttons or menus, they
+ * want `GridList` instead.
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop variants generated.
+ */
+export const listBox = defineSlotRecipe({
+  className: "list-box",
+  slots: ["root", "option"],
+  base: {
+    root: {
+      // The listbox holds the roving tab index, so it is focusable itself and
+      // would otherwise draw the platform ring around the whole list.
+      outline: "none",
+    },
+    option: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      outline: "none",
+      transitionProperty: "background",
+      transitionDuration: "ultra-fast",
+      transitionTimingFunction: "ease-in",
+      _hover: { bg: "gray.50" },
+      "&[data-selected]": { bg: "gray.100", _hover: { bg: "gray.100" } },
+      "&[data-focus-visible]": { focusShadow: "outline" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+  },
+});

package/src/ListBox.tsx

@@ -0,0 +1,88 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  ListBox as RACListBox,
+  ListBoxItem as RACListBoxItem,
+  ListBoxItemProps as RACListBoxItemProps,
+  ListBoxProps as RACListBoxProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { listBox } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface ListBoxProps<T extends object>
+  extends Omit<RACListBoxProps<T>, "className" | "style" | "children"> {
+  /** `ListBoxOption`s, or a render function when `items` is given. */
+  children: RACListBoxProps<T>["children"];
+  /** Per-instance style overrides for the list, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * ListBox — react-aria-components' <ListBox>, standing on the page rather
+ * than inside a dropdown (that is `Select`/`ComboBox`, which share their own
+ * recipe).
+ *
+ * Options are leaves: a button inside one is unreachable by keyboard, so rows
+ * carrying their own controls want `GridList`.
+ */
+export const ListBox = <T extends object>({
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: ListBoxProps<T>) => {
+  const slots = listBox();
+  return (
+    <RACListBox
+      {...rest}
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
+    >
+      {children}
+    </RACListBox>
+  );
+};
+
+export interface ListBoxOptionProps<T extends object = object>
+  extends Omit<RACListBoxItemProps<T>, "className" | "style" | "children"> {
+  /**
+   * The option's content. A function receives the option's state, for a row
+   * that draws its own selected marker rather than taking the recipe's
+   * background.
+   */
+  children?: RACListBoxItemProps<T>["children"];
+  /** Per-instance style overrides for the option, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * An option in a `ListBox`.
+ *
+ * Give it a `textValue` where its children aren't a plain string: react-aria
+ * derives typeahead text from string children only.
+ */
+export const ListBoxOption = <T extends object = object>({
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: ListBoxOptionProps<T>) => {
+  const slots = listBox();
+  return (
+    <RACListBoxItem
+      {...rest}
+      className={cx(
+        slots.option,
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+    >
+      {children}
+    </RACListBoxItem>
+  );
+};

package/src/Menu.recipe.ts

@@ -0,0 +1,124 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Menu slot recipe — Chakra's default Menu parts (light mode). `content` is the
+ * dropdown card (react-aria-components' Popover), `list` the RAC Menu, `item` a
+ * MenuItem, `icon` the leading-icon wrapper.
+ *
+ * A config slot recipe (rather than an atomic `sva`) for consistency with
+ * `dialog` and so presets can override it later if brands diverge.
+ * No variants, so it needs no `staticCss` entry.
+ *
+ * Registered in the base preset (base-preset.ts).
+ */
+export const menu = defineSlotRecipe({
+  className: "menu",
+  slots: [
+    "content",
+    "list",
+    "item",
+    "icon",
+    "label",
+    "divider",
+    "group",
+    "groupTitle",
+    "itemIndicator",
+  ],
+  base: {
+    content: {
+      bg: "white",
+      color: "inherit",
+      minWidth: "3xs",
+      py: "2",
+      // `popover` (1500), not `dropdown` (1000): a RAC Popover always portals
+      // to the body, so a menu opened from inside a Modal (zIndex `modal`,
+      // 1400) escapes the modal's stacking context and would paint behind it.
+      // Chakra never hit this — its MenuList rendered inline unless explicitly
+      // portalled. Nothing else lives between 1400 and the toast/tooltip layer.
+      zIndex: "popover",
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderColor: "gray.200",
+      boxShadow: "sm",
+      // Approximate Chakra's menu fade/scale. RAC toggles data-entering/
+      // data-exiting on the Popover and waits for the transition before unmount.
+      transformOrigin: "top",
+      opacity: 1,
+      transform: "scale(1)",
+      transition: "opacity 0.1s ease-out, transform 0.1s ease-out",
+      "&[data-entering]": { opacity: 0, transform: "scale(0.95)" },
+      "&[data-exiting]": { opacity: 0, transform: "scale(0.95)" },
+      _motionReduce: { transition: "none" },
+    },
+    list: {
+      outline: "none",
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      py: "1.5",
+      px: "3",
+      cursor: "pointer",
+      color: "inherit",
+      textDecoration: "none",
+      outline: "none",
+      transitionProperty: "background",
+      transitionDuration: "ultra-fast",
+      transitionTimingFunction: "ease-in",
+      // RAC highlights the active item (keyboard or pointer) with data-focused;
+      // data-pressed is the pressed state — mirrors Chakra's _focus/_active.
+      "&[data-focused]": { bg: "gray.100" },
+      "&[data-pressed]": { bg: "gray.200" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+    label: {
+      // Chakra wraps an icon-item's children in a flex:1 span, so block
+      // children (e.g. two stacked <Text>s) lay out vertically rather than as
+      // flex-row siblings of the icon.
+      flex: "1",
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      marginEnd: "0.75rem",
+      // Chakra's MenuIcon shrinks glyphs to 0.8em; items passing an explicitly
+      // sized icon (e.g. h/w) override this.
+      fontSize: "0.8em",
+    },
+    divider: {
+      border: 0,
+      borderBottom: "1px solid",
+      borderColor: "gray.200",
+      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 },
+    },
+  },
+});