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

package/src/NumberField.recipe.ts

@@ -0,0 +1,108 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * NumberField slot recipe — 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), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
+ */
+export const numberField = defineSlotRecipe({
+  className: "numberField",
+  slots: ["root", "group", "stepper", "stepperButton"],
+  base: {
+    // No layout here: the component wears the `field` recipe's root alongside
+    // this slot, and that recipe is the single owner of field-root layout
+    // (else `labelPosition` would fight this slot over `flexDirection`). The
+    // slot stays for apps and variants to target.
+    root: {},
+    group: {
+      position: "relative",
+      zIndex: 0,
+      // The stepper overlays the input as a sibling, so the input's own
+      // :hover misses it — the group carries the hover tint. The :not()
+      // list is required: slot recipes layer above plain recipes
+      // (recipes.slots), so this would otherwise override focused/invalid
+      // (see docs/hints.md). :user-invalid takes its own :not(): :not() is
+      // not forgiving, so one list would drop the whole selector on a
+      // browser that doesn't know the pseudo-class (Safari < 16.5).
+      "&:hover input:not(:focus, [data-focused], [data-invalid]):not(:user-invalid)":
+        { borderColor: "gray.500" },
+    },
+    // 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% - 4px)",
+      margin: "2px",
+      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",
+      // Follow the input's corners, less the 2px border the stepper is inset
+      // by, so the hover and pressed fills curve away with the border instead
+      // of squaring off over its arc. Radii track the input recipe's size
+      // scale, so the `sm` variant restates them.
+      "&:first-child": {
+        borderStartEndRadius: "calc(token(radii.md) - 2px)",
+      },
+      "&:last-child": {
+        borderTop: "1px solid",
+        borderTopColor: "gray.200",
+        marginTop: "-1px",
+        borderEndEndRadius: "calc(token(radii.md) - 2px)",
+      },
+      "&[data-hovered]": { bg: "gray.100" },
+      "&[data-pressed]": { bg: "gray.200" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+  },
+  variants: {
+    // The stepper column stays 24px wide at every size (as does the input
+    // padding paired with it in NumberField.tsx); only the arrow glyphs
+    // scale, at 0.75 × the field's font size. The base's `xs` is exactly
+    // md × 0.75, so md adds nothing.
+    size: {
+      lg: {
+        stepperButton: { fontSize: "calc(token(fontSizes.lg) * 0.75)" },
+      },
+      md: {},
+      sm: {
+        stepperButton: {
+          fontSize: "calc(token(fontSizes.sm) * 0.75)",
+          "&:first-child": {
+            borderStartEndRadius: "calc(token(radii.sm) - 2px)",
+          },
+          "&:last-child": {
+            borderEndEndRadius: "calc(token(radii.sm) - 2px)",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/NumberField.tsx

@@ -0,0 +1,138 @@
+/**
+ * (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,
+  NumberField as RACNumberField,
+  NumberFieldProps as RACNumberFieldProps,
+} from "react-aria-components";
+import { useIntl } from "react-intl";
+import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+import { css, cx } from "styled-system/css";
+import {
+  field,
+  input,
+  InputVariantProps,
+  numberField,
+} from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import {
+  FieldLabel,
+  FieldLayoutProps,
+  FieldSupport,
+  FieldSupportProps,
+} from "./Field";
+import { Icon } from "./Icon";
+import { uiMessage } from "./messages";
+
+export interface NumberFieldProps
+  extends Omit<RACNumberFieldProps, "className" | "children" | "style">,
+    InputVariantProps,
+    FieldSupportProps,
+    FieldLayoutProps {
+  /** Visible label (optional; otherwise pass `aria-label`). */
+  label?: ReactNode;
+  /** Root style overrides (for a label-beside-field row, prefer
+   * `labelPosition="side"`). */
+  rootCss?: SystemStyleObject;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
+  /** Group (input + steppers) style overrides — set `width` here. */
+  groupCss?: SystemStyleObject;
+  /** Input style overrides (for sizing, prefer the `size` prop). */
+  inputCss?: SystemStyleObject;
+}
+
+/**
+ * NumberField — react-aria-components <NumberField>: an outline input with a
+ * 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,
+      helperText,
+      errorMessage,
+      helperTextCss,
+      rootCss,
+      labelCss,
+      groupCss,
+      inputCss,
+      labelPosition,
+      ...props
+    },
+    ref,
+  ) {
+    // As Input: forward every recipe variant group, not just `size`, so a
+    // preset that adds one keeps working.
+    const [variantProps, rest] = input.splitVariantProps(props);
+    const slots = numberField({ size: variantProps.size });
+    const fieldSlots = field({ size: variantProps.size, labelPosition });
+    const intl = useIntl();
+    // Fold the field's name into the stepper labels as react-aria does; the
+    // trim eats the leftover space when there is no usable name.
+    const fieldLabel =
+      rest["aria-label"] ?? (typeof label === "string" ? label : "");
+    return (
+      <RACNumberField
+        incrementAriaLabel={intl
+          .formatMessage(uiMessage("ui.numberfield-increase"), { fieldLabel })
+          .trim()}
+        decrementAriaLabel={intl
+          .formatMessage(uiMessage("ui.numberfield-decrease"), { fieldLabel })
+          .trim()}
+        {...rest}
+        className={cx(
+          fieldSlots.root,
+          slots.root,
+          rootCss ? css(rootCss) : undefined,
+        )}
+      >
+        {label != null && (
+          <FieldLabel
+            size={variantProps.size}
+            labelPosition={labelPosition}
+            isRequired={rest.isRequired}
+            css={labelCss}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <RACGroup
+          className={cx(slots.group, groupCss ? css(groupCss) : undefined)}
+        >
+          <RACInput
+            ref={ref}
+            className={cx(
+              input(variantProps),
+              // Room for the stepper column (constant across sizes, as the
+              // stepper's width is).
+              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>
+        <FieldSupport
+          helperText={helperText}
+          errorMessage={errorMessage}
+          helperTextCss={helperTextCss}
+          labelPosition={labelPosition}
+        />
+      </RACNumberField>
+    );
+  },
+);

package/src/PopoverArrow.tsx

@@ -13,18 +13,32 @@ 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 {
   /**
    * Base width of the visible triangle in px; it protrudes half this into
-   * the gap. Defaults to Chakra's tooltip arrow proportions (an 8px square
-   * rotated 45°).
+   * the gap. Defaults to the proportions of an 8px square rotated 45°.
    */
   size?: number;
   /** Styles merged after the base, e.g. `{ "& svg": { fill: "white" } }`. */

package/src/ProgressBar.tsx

@@ -18,9 +18,8 @@ export interface ProgressBarProps {
 }
 
 /**
- * ProgressBar — react-aria-components <ProgressBar> styled like Chakra's md
- * Progress (12px gray.100 track). Set the fill colour per call site via
- * `barCss` (Chakra's colorScheme).
+ * ProgressBar — a styled react-aria-components <ProgressBar> (12px gray.100
+ * track). Set the fill colour per call site via `barCss`.
  */
 export const ProgressBar = ({
   value,
@@ -49,8 +48,7 @@ export const ProgressBar = ({
         className={css(
           {
             height: "100%",
-            bg: "progressFilledTrack",
-            transition: "width 0.2s",
+            bg: "brand.500",
           },
           barCss,
         )}

package/src/Radio.recipe.ts

@@ -0,0 +1,108 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Radio slot recipe — the checkbox control rounded fully, with a 50%
+ * `currentColor` dot when selected instead of the check glyph, across the
+ * same sm/md/lg size scale. As with the checkbox, `borderColor: inherit`
+ * picks up a `borderColor` set on the root.
+ *
+ * State styling keys off data attributes stamped by the shared-ui Radio
+ * (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 radio = defineSlotRecipe({
+  className: "radio",
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      cursor: "pointer",
+      position: "relative",
+      // As the checkbox: the accessible outline stop (WCAG 1.4.11), on the
+      // root so the control's `borderColor: inherit` reads it and call
+      // sites can still tint at the root.
+      borderColor: "gray.400",
+      "&[data-disabled]": { cursor: "not-allowed" },
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderRadius: "full",
+      borderColor: "inherit",
+      color: "white",
+      bg: "white",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+        borderColor: "controlCheckedBg",
+        color: "white",
+        _hover: {
+          bg: "controlCheckedHoverBg",
+          borderColor: "controlCheckedHoverBg",
+        },
+        // The radio dot.
+        _before: {
+          content: '""',
+          display: "inline-block",
+          position: "relative",
+          width: "50%",
+          height: "50%",
+          borderRadius: "50%",
+          bg: "currentColor",
+        },
+      },
+      // 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]": {
+        focusRing: "outline",
+      },
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+  variants: {
+    // The sm/md/lg size scale; control dimensions match the checkbox's.
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/Radio.tsx

@@ -0,0 +1,62 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  Radio as RACRadio,
+  RadioProps as RACRadioProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { radio, RadioVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface RadioProps
+  extends Omit<RACRadioProps, "className" | "children" | "style">,
+    RadioVariantProps {
+  /** Per-instance style overrides for the root, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Radio — a styled react-aria-components <Radio>. Must be rendered inside a
+ * RadioGroup. Children render as the label.
+ */
+export const Radio = ({
+  size,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: RadioProps) => {
+  const slots = radio({ size });
+  return (
+    <RACRadio
+      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
+          />
+          {children != null && (
+            <span
+              className={slots.label}
+              data-disabled={isDisabled || undefined}
+            >
+              {children}
+            </span>
+          )}
+        </>
+      )}
+    </RACRadio>
+  );
+};

package/src/RadioGroup.tsx

@@ -0,0 +1,68 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  RadioGroup as RACRadioGroup,
+  RadioGroupProps as RACRadioGroupProps,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+import { FieldLabel, FieldSupport, FieldSupportProps } from "./Field";
+
+export interface RadioGroupProps
+  extends Omit<RACRadioGroupProps, "className" | "style">,
+    FieldSupportProps {
+  /**
+   * Visible label for the group. Use `aria-label` instead where the design
+   * has none.
+   */
+  label?: ReactNode;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * RadioGroup — react-aria-components <RadioGroup> for a set of Radios. Beyond
+ * the optional field chrome (label/helperText/errorMessage) it carries no
+ * styling of its own: compose with Stack for layout.
+ */
+export const RadioGroup = ({
+  label,
+  labelCss,
+  helperText,
+  errorMessage,
+  helperTextCss,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: RadioGroupProps) => {
+  return (
+    <RACRadioGroup
+      className={cx(cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      {(renderProps) => (
+        <>
+          {label != null && (
+            <FieldLabel isRequired={rest.isRequired} css={labelCss}>
+              {label}
+            </FieldLabel>
+          )}
+          {typeof children === "function" ? children(renderProps) : children}
+          <FieldSupport
+            helperText={helperText}
+            errorMessage={errorMessage}
+            helperTextCss={helperTextCss}
+          />
+        </>
+      )}
+    </RACRadioGroup>
+  );
+};