@microbit/ui 0.1.0-alpha.22 → 0.1.0-alpha.24

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).
@@ -55,7 +54,7 @@ export const radio = defineSlotRecipe({
           bg: "controlCheckedHoverBg",
           borderColor: "controlCheckedHoverBg",
         },
-        // Chakra's radio dot.
+        // The radio dot.
         _before: {
           content: '""',
           display: "inline-block",
@@ -66,8 +65,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",
@@ -89,7 +88,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

@@ -22,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

@@ -16,8 +16,8 @@ export interface RadioGroupProps
   extends Omit<RACRadioGroupProps, "className" | "style">,
     FieldSupportProps {
   /**
-   * Visible label for the group (Chakra's FormLabel above it). Use
-   * `aria-label` instead where the design has none.
+   * Visible label for the group. Use `aria-label` instead where the design
+   * has none.
    */
   label?: ReactNode;
   /** Label style overrides. */
@@ -29,9 +29,8 @@ export interface RadioGroupProps
 
 /**
  * RadioGroup — react-aria-components <RadioGroup> for a set of Radios. Beyond
- * the optional field chrome (label/helperText/errorMessage — Chakra's
- * FormControl parts) it carries no styling of its own: compose with Stack for
- * layout, as Chakra call sites did.
+ * the optional field chrome (label/helperText/errorMessage) it carries no
+ * styling of its own: compose with Stack for layout.
  */
 export const RadioGroup = ({
   label,

package/src/Select.recipe.ts

@@ -5,8 +5,8 @@
  */
 import { defineSlotRecipe } from "@pandacss/dev";
 
-// Chakra's transition.property.common, inlined (Panda has no transitionProperty
-// token category).
+// The common transition-property list, inlined (Panda has no
+// transitionProperty token category).
 const transitionCommon =
   "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform";
 
@@ -16,9 +16,9 @@ const transitionCommon =
  * 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` is styled from the Chakra outline Input 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.
+ * `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.
@@ -144,10 +144,10 @@ export const select = defineSlotRecipe({
       outline: "none",
     },
     content: {
-      // Line the card up with the control, as a select should and as
-      // react-select did. `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.
+      // 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",

package/src/Select.tsx

@@ -52,8 +52,8 @@ export interface SelectProps<T extends object>
   /** Label style overrides. */
   labelCss?: SystemStyleObject;
   /**
-   * Shown in the trigger while nothing is chosen (Chakra's placeholder).
-   * Defaults to a translated "Select an item".
+   * Shown in the trigger while nothing is chosen. Defaults to a translated
+   * "Select an item".
    */
   placeholder?: string;
   /** `SelectOption`s. */
@@ -68,9 +68,9 @@ export interface SelectProps<T extends object>
   /** Placement of the dropdown relative to the trigger. */
   placement?: PopoverProps["placement"];
   /**
-   * Cap the dropdown's height (react-select's `maxMenuHeight`). A prop rather
-   * than a `contentCss` rule because RAC writes its own max-height inline
-   * while positioning, which beats any class.
+   * Cap the dropdown's height. A prop rather than a `contentCss` rule because
+   * RAC writes its own max-height inline while positioning, which beats any
+   * class.
    */
   maxHeight?: number;
   /** Per-instance overrides for the trigger (the button the value sits in). */
@@ -81,9 +81,8 @@ export interface SelectProps<T extends object>
 }
 
 /**
- * Select — a listbox behind a button, for choosing one of a known set.
- * Replaces Chakra-era react-select at non-searchable call sites; use ComboBox
- * where the user should be able to type to filter.
+ * Select — a listbox behind a button, for choosing one of a known set. Use
+ * ComboBox where the user should be able to type to filter.
  */
 export const Select = <T extends object>({
   label,
@@ -103,7 +102,7 @@ export const Select = <T extends object>({
   ...props
 }: SelectProps<T>) => {
   // splitVariantProps, not a hand-picked list: an app preset can add variant
-  // groups to the recipe and they have to reach it (playbook gotcha #37).
+  // groups to the recipe and they have to reach it.
   const [variantProps, rest] = select.splitVariantProps(props);
   const intl = useIntl();
   const slots = select(variantProps);

package/src/Skeleton.tsx

@@ -9,12 +9,10 @@ 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).
+ * caller's `css` is merged into one `css()` call and its overrides win.
  *
- * The colours flow through the same pair of custom properties Chakra used,
- * so a call site can retint one skeleton without knowing how the animation
- * works.
+ * The colours flow through a 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)",
@@ -30,8 +28,8 @@ const skeletonBase: SystemStyleObject = {
   color: "transparent",
   pointerEvents: "none",
   userSelect: "none",
-  // Chakra hid the content rather than unmounting it, so a skeleton sized
-  // from real children keeps their dimensions.
+  // The content is hidden rather than unmounted, so a skeleton sized from
+  // real children keeps their dimensions.
   "&::before, &::after, *": { visibility: "hidden" },
   animation:
     "skeletonFade var(--skeleton-speed, 0.8s) linear infinite alternate",
@@ -42,7 +40,7 @@ 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). */
+  /** Seconds per pulse (default 0.8). */
   speed?: number;
   children?: ReactNode;
   /** Per-instance style overrides, merged after the base. */
@@ -51,11 +49,11 @@ export interface SkeletonProps
 }
 
 /**
- * Skeleton — Chakra's loading placeholder: a block pulsing between two greys
- * until its content is ready.
+ * Skeleton — a 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.
+ * Content simply appears when `isLoaded` turns true; wrap in `Fade` where a
+ * transition matters.
  */
 export const Skeleton = ({
   isLoaded,
@@ -93,7 +91,7 @@ export const Skeleton = ({
 };
 
 export interface SkeletonTextProps extends SkeletonProps {
-  /** How many lines to draw (Chakra's default is 3). */
+  /** How many lines to draw (default 3). */
   noOfLines?: number;
   /** Gap between the lines. Any CSS length. */
   spacing?: string;
@@ -103,7 +101,7 @@ export interface SkeletonTextProps extends SkeletonProps {
 
 /**
  * SkeletonText — a paragraph-shaped `Skeleton`: evenly spaced lines, the last
- * one short, as Chakra drew them.
+ * one short.
  */
 export const SkeletonText = ({
   noOfLines = 3,
@@ -137,7 +135,7 @@ export const SkeletonText = ({
           speed={speed}
           style={{
             height: skeletonHeight,
-            // Chakra's shape: a last line at 80%, and no gap after it.
+            // The last line is drawn at 80%, with no gap after it.
             width: noOfLines > 1 && index === noOfLines - 1 ? "80%" : "100%",
             marginBottom: index === noOfLines - 1 ? "0" : spacing,
           }}

package/src/Slide.tsx

@@ -17,8 +17,8 @@ export interface SlideProps {
 }
 
 /**
- * Slide — Chakra's Slide transition, bottom edge only (add other directions
- * when a use appears): a full-width panel pinned to the viewport bottom,
+ * Slide — a slide-in 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.
  */

package/src/Slider.recipe.ts

@@ -6,21 +6,18 @@
 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.
+ * Slider slot recipe — a horizontal slider (3.5-token thumb, 1-token gray.200
+ * track, blue filled track). 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.
+ * Geometry: 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. Sizes are tokens, not px, so apps with resized
+ * scales (e.g. python-editor's ×0.88) keep proportional 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.
+ * The `mark` slot is hidden until the slider has focus; 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.
@@ -33,7 +30,7 @@ export const slider = defineSlotRecipe({
       position: "relative",
       display: "block",
       width: "100%",
-      // Thumb-height, like Chakra's container; the track centres inside.
+      // Thumb-height; the track centres inside.
       height: "3.5",
       touchAction: "none",
       "&:focus-within [data-part='mark']": {

package/src/Slider.tsx

@@ -33,7 +33,7 @@ export interface SliderProps {
   thumbCss?: SystemStyleObject;
   /**
    * Positioned at the current value along the track and shown while the
-   * slider has focus (Chakra's SliderMark usage).
+   * slider has focus.
    */
   mark?: ReactNode;
   markCss?: SystemStyleObject;
@@ -45,8 +45,7 @@ export interface SliderProps {
    */
   children?: ReactNode;
   /**
-   * Tooltip-styled bubble anchored above the thumb (Chakra's
-   * Tooltip-around-SliderThumb pattern). Rendered only while
+   * Tooltip-styled bubble anchored above the thumb. Rendered only while
    * `isThumbTooltipOpen`; drive it from hover/focus, e.g. via
    * `onThumbFocusChange` and mouse handlers on an enclosing element.
    */
@@ -56,10 +55,7 @@ export interface SliderProps {
   onThumbFocusChange?: (isFocused: boolean) => void;
 }
 
-/**
- * Slider — react-aria-components <Slider> styled like Chakra's horizontal md
- * slider.
- */
+/** Slider — a styled horizontal react-aria-components <Slider>. */
 export const Slider = ({
   value,
   onChange,

package/src/Spinner.tsx

@@ -9,28 +9,25 @@ import { dataAttrs } from "./data-attrs";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface SpinnerProps {
-  /** Chakra Spinner sizes: sm 1rem, md 1.5rem (default). */
+  /** sm is 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.
+   * Revolution time (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.
-   */
+  /** Accessible name. Required: a spinner must announce what is loading. */
   "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).
+ * Spinner — a border-based spinner (currentColor with transparent bottom/left
+ * quadrants).
  */
 export const Spinner = ({
   size = "md",

package/src/Svg.tsx

@@ -6,10 +6,9 @@
 import { styled } from "styled-system/jsx";
 
 /**
- * Svg — a Panda-styled svg element with Chakra Icon's base sizing (1em,
+ * Svg — a Panda-styled svg element with 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).
+ * As a styled-factory component its call-site style props are extracted.
  */
 export const Svg = styled("svg", {
   base: {

package/src/Switch.recipe.ts

@@ -6,9 +6,8 @@
 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
+ * Switch slot recipe with an 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
@@ -90,8 +89,8 @@ export const switchRecipe = defineSlotRecipe({
         label: { marginStart: "0", marginEnd: "3" },
       },
     },
-    // Chakra's Switch size scale (track width x height; the selected-thumb
-    // translate is the difference between them).
+    // Track width x height per size; the selected-thumb translate is the
+    // difference between them.
     size: {
       sm: {
         track: { width: "1.375rem", height: "3" },

package/src/Switch.tsx

@@ -31,10 +31,9 @@ export interface SwitchProps
 }
 
 /**
- * Switch — react-aria-components <Switch> styled like Chakra's switch.
- * Children render as the label; pass `aria-label` for label-less switches.
- * `labelPosition="start"` is the settings-row layout: label first, switch at
- * the row's end.
+ * Switch — a styled react-aria-components <Switch>. Children render as the
+ * label; pass `aria-label` for label-less switches. `labelPosition="start"`
+ * is the settings-row layout: label first, switch at the row's end.
  */
 export const Switch = ({
   size,

package/src/Text.recipe.ts

@@ -6,13 +6,10 @@
 import { defineRecipe } from "@pandacss/dev";
 
 /**
- * Text recipe — Chakra's <Text> had no styles of its own, but an app theme
- * could give it sizes and a default size via `components.Text`
- * (python-editor's did: sm/md with a default of md, which its shrunken
- * fontSize scale renders at 0.9rem). A config recipe so an app preset can
- * restore that: extend `defaultVariants` to set an app-wide default size.
- * No default here — with no `size`, Text inherits like Chakra's default,
- * which is what the other family apps expect.
+ * Text recipe — sizes only, no default: with no `size`, Text inherits, which
+ * is what most family apps expect. A config recipe so an app preset can set
+ * an app-wide default size by extending `defaultVariants` (python-editor
+ * defaults to md, which its shrunken fontSize scale renders at 0.9rem).
  *
  * Registered in the base preset (base-preset.ts).
  */

package/src/Text.tsx

@@ -8,9 +8,9 @@ import { text } from "styled-system/recipes";
 
 /**
  * Text — a paragraph that accepts Panda style props. Use `as` to render a
- * different element (`span`, `div`, `h2`). Replaces Chakra's <Text>.
+ * different element (`span`, `div`, `h2`).
  * Backed by the `text` config recipe: `size` picks a type-scale size, and an
  * app preset can extend the recipe's `defaultVariants` to give all its Text
- * a default size (Chakra `components.Text` parity — see Text.recipe.ts).
+ * a default size (see Text.recipe.ts).
  */
 export const Text = styled("p", text);

package/src/TextField.tsx

@@ -26,7 +26,7 @@ export interface TextFieldProps
     InputVariantProps,
     FieldSupportProps,
     FieldLayoutProps {
-  /** Visible label (Chakra's FormLabel; asterisk added when `isRequired`). */
+  /** Visible label (asterisk added when `isRequired`). */
   label: ReactNode;
   /** Label style overrides. */
   labelCss?: SystemStyleObject;
@@ -36,9 +36,8 @@ export interface TextFieldProps
 }
 
 /**
- * TextField — a labelled single-line text input, collapsing Chakra's
- * FormControl/FormLabel/Input/FormHelperText/FormErrorMessage. The ref is
- * forwarded to the input element.
+ * TextField — a labelled single-line text input with optional help and error
+ * text. The ref is forwarded to the input element.
  */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   function TextField(

package/src/Toast.recipe.ts

@@ -6,10 +6,9 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Toast slot recipe — the Chakra-era solid Alert restyled as a toast (white
- * text, teal for every status except error). Status colours come from the
- * `toast*Bg` semantic tokens so brand presets can retune them without
- * touching the recipe.
+ * Toast slot recipe — a solid alert card with white text, teal for every
+ * status except error. Status colours come from the `toast*Bg` semantic
+ * tokens so brand presets can retune them without touching the recipe.
  *
  * Registered in the base preset (base-preset.ts). The status variant
  * is chosen at runtime from the toast content, so it needs the preset's
@@ -17,13 +16,36 @@ import { defineSlotRecipe } from "@pandacss/dev";
  */
 export const toast = defineSlotRecipe({
   className: "toast",
-  slots: ["region", "root", "icon", "title", "description", "closeButton"],
+  slots: [
+    "region",
+    "root",
+    "content",
+    "body",
+    "icon",
+    "title",
+    "description",
+    "closeButton",
+  ],
   base: {
     region: {
       position: "fixed",
       top: "4",
       left: "50%",
       transform: "translateX(-50%)",
+      // Percentage centring of a text-width region lands the toasts on a
+      // fractional pixel. Chrome floors ::view-transition-group's transform to
+      // a whole CSS pixel, so the snapshot the enter/exit animation displays
+      // sits up to 1px left of the element it stands in for, and every toast
+      // jumps right as the transition hands back to the real DOM (visible
+      // above 1x, where the two no longer round to the same device pixel).
+      // Rounding the region's own offsets keeps it on whole pixels so the two
+      // agree. round() postdates view transitions in Chrome (130 vs 111), so
+      // the guard keeps the plain centring for the versions in between rather
+      // than dropping the declarations and losing it altogether.
+      "@supports (left: round(50%, 1px))": {
+        left: "round(50%, 1px)",
+        transform: "translateX(round(-50%, 1px))",
+      },
       zIndex: "toast",
       display: "flex",
       flexDirection: "column",
@@ -34,7 +56,6 @@ export const toast = defineSlotRecipe({
       position: "relative",
       display: "flex",
       alignItems: "flex-start",
-      gap: "3",
       p: "4",
       // Leave room for the absolutely-positioned close button plus breathing
       // space so its hover area never overlaps the title text (24px button at
@@ -47,6 +68,19 @@ export const toast = defineSlotRecipe({
       maxW: "sm",
       pointerEvents: "auto",
     },
+    // The icon has to be inside the alert region to be announced with the
+    // message, so this row — not the root — is what lays the two out.
+    content: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "3",
+      // Let the text shrink below its content width so long words wrap
+      // instead of pushing past the toast's maxW.
+      minWidth: 0,
+    },
+    body: {
+      minWidth: 0,
+    },
     icon: {
       fontSize: "1.25rem",
       flexShrink: 0,
@@ -58,9 +92,8 @@ export const toast = defineSlotRecipe({
       mt: "1",
     },
     closeButton: {
-      // A sized box with the glyph centred (like Chakra's CloseButton size
-      // "sm": 24px box, 2xs glyph) gives padding around the X and a hover
-      // affordance.
+      // A sized box with the glyph centred (24px box, 2xs glyph) gives
+      // padding around the X and a hover affordance.
       position: "absolute",
       top: "1",
       insetEnd: "1",
@@ -79,8 +112,7 @@ export const toast = defineSlotRecipe({
       outline: "none",
       transitionProperty: "background-color, box-shadow",
       transitionDuration: "normal",
-      // Chakra's CloseButton hover is a subtle dark overlay (blackAlpha) in
-      // light mode, not a bright highlight.
+      // Hover is a subtle dark overlay (blackAlpha), not a bright highlight.
       _hover: { bg: "blackAlpha.100" },
       _active: { bg: "blackAlpha.200" },
       _focusVisible: { focusShadow: "outline" },