@microbit/ui 0.1.0-alpha.17 → 0.1.0-alpha.18

package/src/FieldSupport.tsx

@@ -1,68 +0,0 @@
-/**
- * (c) 2026, Micro:bit Educational Foundation and contributors
- *
- * SPDX-License-Identifier: MIT
- */
-import { ReactNode } from "react";
-import { FieldError, Text as RACText } from "react-aria-components";
-import { css, cx } from "styled-system/css";
-import { field } from "styled-system/recipes";
-import { SystemStyleObject } from "styled-system/types";
-
-/**
- * The label/helper/error chrome every labelled form field shares — Chakra's
- * FormControl parts, generalised out of TextField so Select, ComboBox,
- * NumberField, RadioGroup and CheckboxGroup carry the same props
- * (data-microbit-org's forms attach helper and error text to all of these).
- */
-export interface FieldSupportProps {
-  /** Help text below the field (Chakra's FormHelperText). */
-  helperText?: ReactNode;
-  /** Shown below the field when invalid (Chakra's FormErrorMessage). */
-  errorMessage?: ReactNode;
-  /** Per-instance style overrides for the helper text. */
-  helperTextCss?: SystemStyleObject;
-}
-
-/**
- * Helper text and error message for a react-aria field container. Render
- * inside any RAC component with field validation context (TextField, Select,
- * ComboBox, NumberField, RadioGroup, CheckboxGroup) — react-aria wires the
- * description to the input's aria-describedby, and the error renders only
- * while the field is invalid. Also exported for app-side composites built on
- * RAC containers.
- */
-export const FieldSupport = ({
-  helperText,
-  errorMessage,
-  helperTextCss,
-}: FieldSupportProps) => {
-  const slots = field();
-  return (
-    <>
-      {helperText != null && (
-        <RACText
-          slot="description"
-          className={cx(
-            slots.helperText,
-            helperTextCss ? css(helperTextCss) : undefined,
-          )}
-        >
-          {helperText}
-        </RACText>
-      )}
-      <FieldError className={slots.errorMessage}>{errorMessage}</FieldError>
-    </>
-  );
-};
-
-/**
- * The required-field asterisk (Chakra's FormLabel indicator). Render inside
- * the field's label when `isRequired`; aria-hidden because react-aria already
- * announces requiredness from the input itself.
- */
-export const FieldRequiredIndicator = () => (
-  <span aria-hidden className={field().requiredIndicator}>
-    *
-  </span>
-);

package/src/TextField.recipe.ts

@@ -1,58 +0,0 @@
-/**
- * (c) 2026, Micro:bit Educational Foundation and contributors
- *
- * SPDX-License-Identifier: MIT
- */
-import { defineSlotRecipe } from "@pandacss/dev";
-
-/**
- * Field slot recipe — Chakra's FormControl parts (FormLabel/FormHelperText/
- * FormErrorMessage, light mode). Consumed by the shared-ui TextField, which
- * maps the slots onto react-aria-components' TextField/Label/Text/FieldError;
- * the input itself is styled by the `input` recipe (Input.recipe.ts).
- *
- * Registered in the base preset (base-preset.ts). No variants, so it
- * needs no `staticCss` entry.
- */
-export const field = defineSlotRecipe({
-  className: "field",
-  slots: ["root", "label", "requiredIndicator", "helperText", "errorMessage"],
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      width: "100%",
-    },
-    label: {
-      display: "block",
-      fontSize: "md",
-      fontWeight: "medium",
-      marginEnd: "3",
-      mb: "2",
-      "&[data-disabled]": { opacity: 0.4 },
-    },
-    requiredIndicator: {
-      marginStart: "1",
-      color: "danger.500",
-    },
-    helperText: {
-      // RAC's Text renders a span, and RadioGroup/CheckboxGroup roots are not
-      // flex containers to blockify it, where an inline box would drop the
-      // margin below (gotcha #44).
-      display: "block",
-      mt: "2",
-      fontSize: "sm",
-      lineHeight: "normal",
-      color: "gray.600",
-    },
-    errorMessage: {
-      display: "flex",
-      alignItems: "center",
-      mt: "2",
-      fontSize: "sm",
-      lineHeight: "normal",
-      color: "danger.500",
-    },
-  },
-});