@microbit/ui 0.1.0-alpha.9 → 0.1.0

package/src/NumberField.tsx

@@ -8,57 +8,102 @@ import {
   Button as RACButton,
   Group as RACGroup,
   Input as RACInput,
-  Label as RACLabel,
   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, numberField } from "styled-system/recipes";
+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"> {
+  extends Omit<RACNumberFieldProps, "className" | "children" | "style">,
+    InputVariantProps,
+    FieldSupportProps,
+    FieldLayoutProps {
   /** Visible label (optional; otherwise pass `aria-label`). */
   label?: ReactNode;
-  /** Root style overrides (e.g. row layout for label-beside-field forms). */
-  css?: SystemStyleObject;
+  /** 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 (e.g. a smaller size than the recipe's md). */
+  /** Input style overrides (for sizing, prefer the `size` prop). */
   inputCss?: SystemStyleObject;
 }
 
 /**
- * NumberField — react-aria-components <NumberField> styled like Chakra's
- * NumberInput (outline input + 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.
+ * 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, css: cssProp, labelCss, groupCss, inputCss, ...rest },
+    {
+      label,
+      helperText,
+      errorMessage,
+      helperTextCss,
+      rootCss,
+      labelCss,
+      groupCss,
+      inputCss,
+      labelPosition,
+      ...props
+    },
     ref,
   ) {
-    const slots = numberField();
-    const fieldSlots = field();
+    // 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(slots.root, cssProp ? css(cssProp) : undefined)}
+        className={cx(
+          fieldSlots.root,
+          slots.root,
+          rootCss ? css(rootCss) : undefined,
+        )}
       >
         {label != null && (
-          <RACLabel
-            className={cx(
-              fieldSlots.label,
-              labelCss ? css(labelCss) : undefined,
-            )}
+          <FieldLabel
+            size={variantProps.size}
+            labelPosition={labelPosition}
+            isRequired={rest.isRequired}
+            css={labelCss}
           >
             {label}
-          </RACLabel>
+          </FieldLabel>
         )}
         <RACGroup
           className={cx(slots.group, groupCss ? css(groupCss) : undefined)}
@@ -66,8 +111,9 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
           <RACInput
             ref={ref}
             className={cx(
-              input(),
-              // Room for the stepper column.
+              input(variantProps),
+              // Room for the stepper column (constant across sizes, as the
+              // stepper's width is).
               css({ paddingEnd: "6" }, inputCss),
             )}
           />
@@ -80,6 +126,12 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
             </RACButton>
           </div>
         </RACGroup>
+        <FieldSupport
+          helperText={helperText}
+          errorMessage={errorMessage}
+          helperTextCss={helperTextCss}
+          labelPosition={labelPosition}
+        />
       </RACNumberField>
     );
   },

package/src/PopoverArrow.tsx

@@ -38,8 +38,7 @@ const arrowBase = css({
 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

@@ -6,11 +6,10 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Radio slot recipe — Chakra's radio with the default blue colorScheme
- * (light mode) and its sm/md/lg size scale: the checkbox control rounded
- * fully, with a 50% `currentColor` dot when selected instead of the check
- * glyph. As with the checkbox, `borderColor: inherit` picks up a
- * `borderColor` set on the root.
+ * 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).
@@ -28,6 +27,10 @@ export const radio = defineSlotRecipe({
       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: {
@@ -35,8 +38,6 @@ export const radio = defineSlotRecipe({
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      transitionProperty: "box-shadow",
-      transitionDuration: "normal",
       borderWidth: "2px",
       borderStyle: "solid",
       borderRadius: "full",
@@ -51,7 +52,7 @@ export const radio = defineSlotRecipe({
           bg: "controlCheckedHoverBg",
           borderColor: "controlCheckedHoverBg",
         },
-        // Chakra's radio dot.
+        // The radio dot.
         _before: {
           content: '""',
           display: "inline-block",
@@ -62,8 +63,8 @@ export const radio = defineSlotRecipe({
           bg: "currentColor",
         },
       },
-      // Chakra's disabled greys; the selected block restates _hover so the
-      // widened native-:hover condition can't re-tint a disabled control.
+      // 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",
@@ -75,7 +76,7 @@ export const radio = defineSlotRecipe({
         _hover: { bg: "gray.200", borderColor: "gray.200" },
       },
       "&[data-focus-visible]": {
-        focusShadow: "outline",
+        focusRing: "outline",
       },
     },
     label: {
@@ -85,7 +86,7 @@ export const radio = defineSlotRecipe({
     },
   },
   variants: {
-    // Chakra's Radio size scale (the Checkbox control scale).
+    // The sm/md/lg size scale; control dimensions match the checkbox's.
     size: {
       sm: {
         control: { width: "3", height: "3" },

package/src/Radio.tsx

@@ -7,38 +7,11 @@ import { ReactNode } from "react";
 import {
   Radio as RACRadio,
   RadioProps as RACRadioProps,
-  RadioGroup as RACRadioGroup,
-  RadioGroupProps as RACRadioGroupProps,
 } 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 RadioGroupProps
-  extends Omit<RACRadioGroupProps, "className" | "style"> {
-  /** Per-instance style overrides, merged after the recipe. */
-  css?: SystemStyleObject;
-  className?: string;
-}
-
-/**
- * RadioGroup — react-aria-components <RadioGroup> for a set of Radios. Carries
- * no styling of its own: compose with Stack for layout, as Chakra call sites
- * did.
- */
-export const RadioGroup = ({
-  css: cssProp,
-  className,
-  ...rest
-}: RadioGroupProps) => {
-  return (
-    <RACRadioGroup
-      className={cx(cssProp ? css(cssProp) : undefined, className)}
-      {...rest}
-    />
-  );
-};
-
 export interface RadioProps
   extends Omit<RACRadioProps, "className" | "children" | "style">,
     RadioVariantProps {
@@ -49,8 +22,8 @@ export interface RadioProps
 }
 
 /**
- * Radio — react-aria-components <Radio> styled like Chakra's radio. Must be
- * rendered inside a RadioGroup. Children render as the label.
+ * Radio — a styled react-aria-components <Radio>. Must be rendered inside a
+ * RadioGroup. Children render as the label.
  */
 export const Radio = ({
   size,

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

package/src/Select.recipe.ts

@@ -0,0 +1,211 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+// The common transition-property list, inlined (Panda has no
+// transitionProperty token category).
+// No box-shadow: nothing in this recipe uses one, and the focus ring's
+// layers must never fade in.
+const transitionCommon =
+  "background-color, border-color, color, fill, stroke, opacity, transform";
+
+/**
+ * Select slot recipe — the dropdown pair, shared by `Select` (a listbox behind
+ * a button) and `ComboBox` (a listbox behind a text input). One recipe because
+ * the two differ only in what the control is: keeping them together is what
+ * stops a searchable and a non-searchable picker drifting apart visually.
+ *
+ * `trigger` matches the `input` recipe's outline field so a select sits level
+ * with a TextField beside it; `content` matches the `menu` recipe's card so
+ * every dropdown surface in the family agrees.
+ *
+ * Apps restyle it through the `variant` group — classroom's `classroom`
+ * variant is the rounded pill its join form uses.
+ *
+ * The label is not a slot here: it comes from the `field` recipe, as every
+ * other labelled field's does. The only thing that costs is a per-`variant`
+ * label style — restyle the control and let the label match the family.
+ *
+ * Registered in the base preset (base-preset.ts).
+ */
+export const select = defineSlotRecipe({
+  className: "select",
+  slots: [
+    "root",
+    "trigger",
+    "value",
+    "indicator",
+    "content",
+    "list",
+    "option",
+    "optionIndicator",
+    "empty",
+  ],
+  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: {},
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      width: "100%",
+      minWidth: 0,
+      outline: "none",
+      appearance: "none",
+      font: "inherit",
+      textAlign: "start",
+      cursor: "pointer",
+      transitionProperty: transitionCommon,
+      transitionDuration: "normal",
+      border: "2px solid",
+      // As the input recipe (rationale there). The dropdown card below
+      // keeps gray.200 — a surface edge, not a form-control boundary.
+      borderColor: "gray.300",
+      bg: "white",
+      color: "inherit",
+      // As the input recipe, so mixed fields tint together on hover.
+      _hover: { borderColor: "gray.500" },
+      // `data-invalid` lands on the root — and, in a ComboBox, on the input —
+      // but never on the trigger: a RAC Button has no validity state, and our
+      // ComboBox control is a plain div. So it comes down from the parent.
+      // `> &` rather than a descendant selector, so an app's own invalid form
+      // wrapper cannot paint every control inside it red. Repeated `&`: the
+      // hover < focused < invalid specificity ladder, as the input recipe.
+      "&&:is([data-focused], :has(input:focus))": {
+        borderColor: "focusBorder",
+      },
+      // Border colour alone, as the input recipe.
+      "[data-invalid] > &&&": {
+        borderColor: "danger.500",
+      },
+      // Keyboard-only ring, two cases. Select's button: RAC's attribute.
+      // ComboBox: the input's RAC attributes are stripped by react-aria's
+      // synthetic blur during virtual focus, so its case combines the two
+      // signals that survive — native :focus plus the global-modality
+      // attribute the component renders (see ComboBox.tsx). No flicker
+      // during list navigation; can't match Select (no input).
+      "&&&[data-focus-visible], &&&[data-keyboard-modality]:has(input:focus)": {
+        focusRing: "outline",
+      },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+    // Whatever shows the current value: Select's SelectValue, ComboBox's
+    // input. One slot for both, so an app restyling the placeholder (say)
+    // does not have to know which kind of control it is looking at.
+    value: {
+      flex: "1",
+      minWidth: 0,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      outline: "none",
+      bg: "transparent",
+      color: "inherit",
+      font: "inherit",
+      // RAC sets data-placeholder on SelectValue when nothing is chosen; the
+      // ComboBox input uses the real placeholder attribute.
+      "&[data-placeholder]": { color: "gray.500" },
+      _placeholder: { color: "gray.500" },
+    },
+    indicator: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "1.25em",
+      color: "inherit",
+      // No pointer-events:none here: in a ComboBox this slot is the button
+      // that opens the list. Select's is an aria-hidden span inside the
+      // trigger, so it needs no help being inert.
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      // No focus styling, deliberately: react-aria keeps a ComboBox's toggle
+      // button out of the tab order (the input owns the keyboard), so a ring
+      // here would only ever be reachable programmatically, and would suggest
+      // the chevron is a tab stop. The whole control shows focus instead.
+      outline: "none",
+    },
+    content: {
+      // Line the card up with the control, as a select should. `Select` gets
+      // this from RAC, whose trigger is the button it measures; `ComboBox`
+      // measures its own control and sets the width inline, because RAC's var
+      // is the *input's* width there.
+      minWidth: "var(--trigger-width)",
+      display: "flex",
+      flexDirection: "column",
+      bg: "white",
+      color: "inherit",
+      py: "2",
+      zIndex: "popover",
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderColor: "gray.200",
+      boxShadow: "sm",
+      // Matches the menu recipe's fade/scale.
+      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",
+      overflowY: "auto",
+    },
+    option: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      py: "1.5",
+      px: "3",
+      cursor: "pointer",
+      color: "inherit",
+      outline: "none",
+      // As the menu recipe: the highlight is focus indication (no
+      // transition — it snaps with the ring, which keyboard nav adds;
+      // inset, the rows being full-bleed).
+      "&[data-focused]": { bg: "gray.100" },
+      "&[data-focus-visible]": { focusRing: "outlineInset" },
+      "&[data-pressed]": { bg: "gray.200" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+    optionIndicator: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      marginStart: "auto",
+      fontSize: "0.8em",
+      opacity: 0,
+      "[data-selected] &": { opacity: 1 },
+    },
+    empty: {
+      px: "3",
+      py: "2",
+      color: "gray.600",
+    },
+  },
+  variants: {
+    // The `input` recipe's size ladder, step for step, so a Select sits level
+    // with a TextField beside it at every size. The indicator is em-sized and
+    // scales free; the dropdown card keeps one density across sizes.
+    size: {
+      lg: { trigger: { fontSize: "lg", px: "4", h: "12", borderRadius: "md" } },
+      md: { trigger: { fontSize: "md", px: "4", h: "10", borderRadius: "md" } },
+      sm: { trigger: { fontSize: "sm", px: "3", h: "8", borderRadius: "sm" } },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});