@microbit/ui 0.0.0-gray.ramp.90

package/src/Skeleton.tsx

@@ -0,0 +1,146 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { HTMLAttributes, ReactNode } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+/**
+ * The placeholder block, as an object rather than a precomputed class so a
+ * caller's `css` is merged into one `css()` call and its overrides win
+ * (playbook gotcha #8).
+ *
+ * The colours are Chakra's, through the same pair of custom properties, so a
+ * call site can retint one skeleton without knowing how the animation works.
+ */
+const skeletonBase: SystemStyleObject = {
+  "--skeleton-start-color": "token(colors.gray.100)",
+  "--skeleton-end-color": "token(colors.gray.400)",
+  background: "var(--skeleton-start-color)",
+  borderColor: "var(--skeleton-end-color)",
+  opacity: 0.7,
+  borderRadius: "sm",
+  boxShadow: "none",
+  backgroundClip: "padding-box",
+  cursor: "default",
+  color: "transparent",
+  pointerEvents: "none",
+  userSelect: "none",
+  // Chakra hid the content rather than unmounting it, so a skeleton sized
+  // from real children keeps their dimensions.
+  "&::before, &::after, *": { visibility: "hidden" },
+  animation:
+    "skeletonFade var(--skeleton-speed, 0.8s) linear infinite alternate",
+  _motionReduce: { animation: "none" },
+};
+
+export interface SkeletonProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+  /** Show the children instead of the placeholder. */
+  isLoaded?: boolean;
+  /** Seconds per pulse (Chakra's `speed`, default 0.8). */
+  speed?: number;
+  children?: ReactNode;
+  /** Per-instance style overrides, merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * Skeleton — Chakra's loading placeholder: a block pulsing between two greys
+ * until its content is ready.
+ *
+ * Chakra faded the real content in over 0.4s when `isLoaded` turned true;
+ * here it simply appears. Wrap in `Fade` where that transition matters.
+ */
+export const Skeleton = ({
+  isLoaded,
+  speed,
+  children,
+  css: cssProp,
+  className,
+  style,
+  ...rest
+}: SkeletonProps) => {
+  if (isLoaded) {
+    return (
+      <div
+        {...rest}
+        style={style}
+        className={cx(cssProp ? css(cssProp) : undefined, className)}
+      >
+        {children}
+      </div>
+    );
+  }
+  return (
+    <div
+      {...rest}
+      style={
+        speed === undefined
+          ? style
+          : ({ ...style, "--skeleton-speed": `${speed}s` } as typeof style)
+      }
+      className={cx(css({ ...skeletonBase, ...cssProp }), className)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export interface SkeletonTextProps extends SkeletonProps {
+  /** How many lines to draw (Chakra's default is 3). */
+  noOfLines?: number;
+  /** Gap between the lines. Any CSS length. */
+  spacing?: string;
+  /** Height of each line. Any CSS length. */
+  skeletonHeight?: string;
+}
+
+/**
+ * SkeletonText — a paragraph-shaped `Skeleton`: evenly spaced lines, the last
+ * one short, as Chakra drew them.
+ */
+export const SkeletonText = ({
+  noOfLines = 3,
+  spacing = "0.5rem",
+  skeletonHeight = "0.5rem",
+  isLoaded,
+  speed,
+  children,
+  css: cssProp,
+  className,
+  ...rest
+}: SkeletonTextProps) => {
+  if (isLoaded) {
+    return (
+      <div
+        {...rest}
+        className={cx(cssProp ? css(cssProp) : undefined, className)}
+      >
+        {children}
+      </div>
+    );
+  }
+  return (
+    <div
+      {...rest}
+      className={cx(cssProp ? css(cssProp) : undefined, className)}
+    >
+      {Array.from({ length: noOfLines }, (_, index) => (
+        <Skeleton
+          key={index}
+          speed={speed}
+          style={{
+            height: skeletonHeight,
+            // Chakra's shape: a last line at 80%, and no gap after it.
+            width: noOfLines > 1 && index === noOfLines - 1 ? "80%" : "100%",
+            marginBottom: index === noOfLines - 1 ? "0" : spacing,
+          }}
+        />
+      ))}
+    </div>
+  );
+};

package/src/Slide.tsx

@@ -0,0 +1,54 @@
+/**
+ * (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 SlideProps {
+  /** Slides in when true; sits translated offscreen when false. */
+  isOpen: boolean;
+  /** Per-instance style overrides (e.g. zIndex), merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Slide — Chakra's Slide transition, bottom edge only (add other directions
+ * when a use appears): a full-width panel pinned to the viewport bottom,
+ * translated offscreen when closed. Content stays mounted throughout, so
+ * closing doesn't drop in-flight state and the exit animates.
+ */
+export const Slide = ({
+  isOpen,
+  css: cssProp,
+  className,
+  children,
+}: SlideProps) => (
+  <div
+    data-open={isOpen ? "" : undefined}
+    className={cx(
+      css(
+        {
+          position: "fixed",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          transform: "translateY(100%)",
+          "&[data-open]": { transform: "translateY(0)" },
+          transitionProperty: "transform",
+          transitionDuration: "0.25s",
+          transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+          _motionReduce: { transition: "none" },
+        },
+        cssProp,
+      ),
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/Slider.recipe.ts

@@ -0,0 +1,102 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Slider slot recipe — Chakra's horizontal md slider (3.5-token thumb, 1-token
+ * gray.200 track, blue filled track; light mode). Consumed by the shared-ui
+ * Slider, which maps the slots onto react-aria-components'
+ * Slider/SliderTrack/SliderThumb.
+ *
+ * Geometry matches Chakra's DOM: the root is thumb-height with NO horizontal
+ * padding, the track is absolutely centred inside it at full width, and the
+ * thumb overhangs the track ends at 0%/100%. Call sites position overlays
+ * (marks, value labels) against that root box, so Chakra-era offsets work
+ * unchanged. Sizes are tokens, not px, so apps with resized scales (e.g.
+ * python-editor's ×0.88) get their Chakra-equivalent geometry.
+ *
+ * The `mark` slot is hidden until the slider has focus (Chakra call sites did
+ * this with `_focusWithin` + a class); the reveal lives here so call sites
+ * only style the mark's look.
+ *
+ * Registered in the base preset (base-preset.ts). No variants, so it
+ * needs no `staticCss` entry.
+ */
+export const slider = defineSlotRecipe({
+  className: "slider",
+  slots: ["root", "track", "filledTrack", "thumb", "mark"],
+  base: {
+    root: {
+      position: "relative",
+      display: "block",
+      width: "100%",
+      // Thumb-height, like Chakra's container; the track centres inside.
+      height: "3.5",
+      touchAction: "none",
+      "&:focus-within [data-part='mark']": {
+        display: "block",
+      },
+      "&[data-disabled]": {
+        opacity: 0.4,
+        cursor: "not-allowed",
+      },
+    },
+    track: {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      left: 0,
+      width: "100%",
+      height: "1",
+      overflow: "hidden",
+      borderRadius: "sm",
+      bg: "gray.200",
+      cursor: "pointer",
+      "[data-disabled] &": {
+        bg: "gray.300",
+        cursor: "default",
+      },
+    },
+    filledTrack: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      bg: "sliderFilledTrack",
+    },
+    thumb: {
+      position: "absolute",
+      top: "50%",
+      width: "3.5",
+      height: "3.5",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: "none",
+      zIndex: 1,
+      borderRadius: "full",
+      bg: "white",
+      boxShadow: "base",
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+      "&[data-dragging]": {
+        transform: "translate(-50%, -50%) scale(1.15)",
+      },
+      transform: "translate(-50%, -50%)",
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+      "&[data-disabled]": {
+        bg: "gray.300",
+      },
+    },
+    mark: {
+      display: "none",
+      position: "absolute",
+      whiteSpace: "nowrap",
+    },
+  },
+});

package/src/Slider.tsx

@@ -0,0 +1,163 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import {
+  Slider as RACSlider,
+  SliderThumb,
+  SliderTrack,
+} from "react-aria-components";
+import { css, cx } from "styled-system/css";
+import { slider } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface SliderProps {
+  value: number;
+  onChange: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  "aria-label": string;
+  isDisabled?: boolean;
+  /**
+   * Number format for the value announced to assistive tech (e.g.
+   * `{ style: "unit", unit: "percent" }` so units are heard, not bare
+   * numbers).
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  trackCss?: SystemStyleObject;
+  filledTrackCss?: SystemStyleObject;
+  thumbCss?: SystemStyleObject;
+  /**
+   * Positioned at the current value along the track and shown while the
+   * slider has focus (Chakra's SliderMark usage).
+   */
+  mark?: ReactNode;
+  markCss?: SystemStyleObject;
+  /**
+   * Additional positioned overlays rendered inside the slider root
+   * (always-visible value labels, threshold markers, ...). The root is
+   * position: relative; position children absolutely, typically with a
+   * percentage `left` for the track position.
+   */
+  children?: ReactNode;
+  /**
+   * Tooltip-styled bubble anchored above the thumb (Chakra's
+   * Tooltip-around-SliderThumb pattern). Rendered only while
+   * `isThumbTooltipOpen`; drive it from hover/focus, e.g. via
+   * `onThumbFocusChange` and mouse handlers on an enclosing element.
+   */
+  thumbTooltip?: ReactNode;
+  isThumbTooltipOpen?: boolean;
+  /** Thumb focus tracking (react-aria focus events). */
+  onThumbFocusChange?: (isFocused: boolean) => void;
+}
+
+/**
+ * Slider — react-aria-components <Slider> styled like Chakra's horizontal md
+ * slider.
+ */
+export const Slider = ({
+  value,
+  onChange,
+  minValue = 0,
+  maxValue = 100,
+  "aria-label": ariaLabel,
+  isDisabled,
+  formatOptions,
+  css: cssProp,
+  trackCss,
+  filledTrackCss,
+  thumbCss,
+  mark,
+  markCss,
+  children,
+  thumbTooltip,
+  isThumbTooltipOpen,
+  onThumbFocusChange,
+}: SliderProps) => {
+  const slots = slider();
+  const percent = ((value - minValue) / (maxValue - minValue)) * 100;
+  return (
+    <RACSlider
+      value={value}
+      onChange={onChange}
+      minValue={minValue}
+      maxValue={maxValue}
+      aria-label={ariaLabel}
+      isDisabled={isDisabled}
+      formatOptions={formatOptions}
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined)}
+    >
+      {mark && (
+        <div
+          data-part="mark"
+          className={cx(slots.mark, markCss ? css(markCss) : undefined)}
+          style={{ left: `${percent}%` }}
+        >
+          {mark}
+        </div>
+      )}
+      <SliderTrack
+        className={cx(slots.track, trackCss ? css(trackCss) : undefined)}
+      >
+        <div
+          className={cx(
+            slots.filledTrack,
+            filledTrackCss ? css(filledTrackCss) : undefined,
+          )}
+          style={{ width: `${percent}%` }}
+        />
+      </SliderTrack>
+      {thumbTooltip && isThumbTooltipOpen && (
+        // Matches the shared Tooltip's look (tooltipBase) with a bottom
+        // arrow, anchored above the thumb.
+        <div
+          role="presentation"
+          className={css({
+            position: "absolute",
+            bottom: "calc(50% + token(sizes.3.5))",
+            transform: "translateX(-50%)",
+            bg: "gray.700",
+            color: "white",
+            px: "2",
+            py: "1",
+            borderRadius: "md",
+            fontSize: "sm",
+            fontWeight: "medium",
+            boxShadow: "md",
+            zIndex: "tooltip",
+            whiteSpace: "nowrap",
+            _after: {
+              content: '""',
+              position: "absolute",
+              // 1px into the box so subpixel edges can't antialias into a
+              // hairline seam (see PopoverArrow).
+              top: "calc(100% - 1px)",
+              left: "50%",
+              transform: "translateX(-50%)",
+              borderWidth: "4px",
+              borderStyle: "solid",
+              // Per-side: tokens don't resolve inside multi-value
+              // shorthands (they emit verbatim and the browser drops the
+              // invalid declaration).
+              borderColor: "transparent",
+              borderTopColor: "gray.700",
+            },
+          })}
+          style={{ left: `${percent}%` }}
+        >
+          {thumbTooltip}
+        </div>
+      )}
+      <SliderThumb
+        onFocusChange={onThumbFocusChange}
+        className={cx(slots.thumb, thumbCss ? css(thumbCss) : undefined)}
+      />
+      {children}
+    </RACSlider>
+  );
+};

package/src/Spinner.tsx

@@ -0,0 +1,74 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { CSSProperties } from "react";
+import { css, cx } from "styled-system/css";
+import { dataAttrs } from "./data-attrs";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface SpinnerProps {
+  /** Chakra Spinner sizes: sm 1rem, md 1.5rem (default). */
+  size?: "sm" | "md";
+  /**
+   * Revolution time (Chakra's `speed`, default 0.45s). Under
+   * prefers-reduced-motion the spin is slowed to ~3x this value.
+   */
+  speed?: string;
+  /** Per-instance style overrides, merged after the base. */
+  css?: SystemStyleObject;
+  className?: string;
+  /**
+   * Accessible name. Required: Chakra's Spinner announced a visually hidden
+   * "Loading..." by default, so a nameless spinner would regress on it.
+   */
+  "aria-label": string;
+  /** `data-*` attributes land on the spinner, for tests that wait on it. */
+  [key: `data-${string}`]: unknown;
+}
+
+/**
+ * Spinner — Chakra's border-based spinner (currentColor with transparent
+ * bottom/left quadrants).
+ */
+export const Spinner = ({
+  size = "md",
+  speed,
+  css: cssProp,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}: SpinnerProps) => (
+  <span
+    {...dataAttrs(rest)}
+    role="status"
+    aria-label={ariaLabel}
+    style={speed ? ({ "--spinner-speed": speed } as CSSProperties) : undefined}
+    className={cx(
+      // Single css() call so caller overrides of base properties (e.g. width)
+      // are deduped at merge time rather than racing on stylesheet order.
+      css(
+        {
+          display: "inline-block",
+          borderWidth: "2px",
+          borderStyle: "solid",
+          borderColor: "currentColor",
+          borderBottomColor: "transparent",
+          borderLeftColor: "transparent",
+          borderRadius: "full",
+          // The duration rides a variable so the reduced-motion slow-down
+          // scales with a per-instance `speed` rather than fighting it.
+          animation: "spin var(--spinner-speed, 0.45s) linear infinite",
+          _motionReduce: {
+            animationDuration: "calc(var(--spinner-speed, 0.45s) * 3.33)",
+          },
+          width: size === "sm" ? "1rem" : "1.5rem",
+          height: size === "sm" ? "1rem" : "1.5rem",
+        },
+        cssProp,
+      ),
+      className,
+    )}
+  />
+);

package/src/Svg.tsx

@@ -0,0 +1,23 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Svg — a Panda-styled svg element with Chakra Icon's base sizing (1em,
+ * inline-block). For custom-path icons; react-icons glyphs use `Icon`.
+ * As a styled-factory component its call-site style props are extracted
+ * (unlike style props forwarded through a plain wrapper — gotcha #9).
+ */
+export const Svg = styled("svg", {
+  base: {
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    lineHeight: "1em",
+    flexShrink: 0,
+    verticalAlign: "middle",
+  },
+});

package/src/Switch.recipe.ts

@@ -0,0 +1,107 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Switch slot recipe — Chakra's switch with the default blue colorScheme
+ * (light mode) and its sm/md/lg size scale. The track has a 2px inset; the
+ * thumb matches the track height and slides by the track width/height
+ * difference when selected.
+ *
+ * State styling keys off data attributes stamped by the shared-ui Switch
+ * (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 switchRecipe = defineSlotRecipe({
+  className: "switch",
+  slots: ["root", "track", "thumb", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      cursor: "pointer",
+      position: "relative",
+      "&[data-disabled]": { cursor: "not-allowed" },
+    },
+    track: {
+      display: "inline-flex",
+      flexShrink: 0,
+      justifyContent: "flex-start",
+      boxSizing: "content-box",
+      borderRadius: "full",
+      p: "0.5",
+      transitionProperty: "background-color",
+      transitionDuration: "fast",
+      bg: "gray.300",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+      },
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+      "&[data-disabled]": { opacity: 0.4 },
+      // Forced-colors modes strip author backgrounds, flattening track and
+      // thumb to the same colour; a border keeps the track visible and the
+      // system SelectedItem pair conveys on/off.
+      _forcedColors: {
+        borderWidth: "1px",
+        borderStyle: "solid",
+        "&[data-selected]": { bg: "SelectedItem" },
+      },
+    },
+    thumb: {
+      bg: "white",
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+      borderRadius: "inherit",
+      _forcedColors: {
+        bg: "ButtonText",
+        "&[data-selected]": { bg: "SelectedItemText" },
+      },
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+  variants: {
+    // Chakra's Switch size scale (track width x height; the selected-thumb
+    // translate is the difference between them).
+    size: {
+      sm: {
+        track: { width: "1.375rem", height: "3" },
+        thumb: {
+          width: "3",
+          height: "3",
+          "&[data-selected]": { transform: "translateX(0.625rem)" },
+        },
+      },
+      md: {
+        track: { width: "1.875rem", height: "4" },
+        thumb: {
+          width: "4",
+          height: "4",
+          "&[data-selected]": { transform: "translateX(0.875rem)" },
+        },
+      },
+      lg: {
+        track: { width: "2.875rem", height: "6" },
+        thumb: {
+          width: "6",
+          height: "6",
+          "&[data-selected]": { transform: "translateX(1.375rem)" },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});