@microbit/ui 0.1.0-alpha.21 → 0.1.0-alpha.23

package/src/Input.recipe.ts

@@ -5,15 +5,14 @@
  */
 import { defineRecipe } 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";
 
 /**
- * Input recipe — Chakra's outline Input field (light mode) with its size
- * scale. Used by the shared-ui Input and NativeSelect, and by TextField's
- * input slot.
+ * Input recipe — the outline text field with an sm/md/lg size scale. Used by
+ * the shared-ui Input and NativeSelect, and by TextField's input slot.
  *
  * Focus matches both native `:focus-visible` (plain inputs; browsers treat any
  * focus in a text field as focus-visible) and react-aria's `data-focused`
@@ -70,7 +69,7 @@ export const input = defineRecipe({
     },
   },
   variants: {
-    // Chakra's Input size scale, minus the unused xs.
+    // The sm/md/lg size scale.
     size: {
       lg: { fontSize: "lg", px: "4", h: "12", borderRadius: "md" },
       md: { fontSize: "md", px: "4", h: "10", borderRadius: "md" },

package/src/Input.tsx

@@ -9,8 +9,8 @@ import { input, InputVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface InputProps
-  // `size` is the recipe's size scale, as in Chakra; the native character-count
-  // attribute it shadows was unused.
+  // `size` is the recipe's size scale; the native character-count attribute
+  // it shadows was unused.
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "size">,
     InputVariantProps {
   /** Per-instance style overrides, merged after the recipe. */
@@ -19,8 +19,8 @@ export interface InputProps
 }
 
 /**
- * Input — a native input styled like Chakra's outline Input. For a
- * labelled field with help/error text use TextField instead.
+ * Input — a native input in the outline field style. For a labelled field
+ * with help/error text use TextField instead.
  */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   { css: cssProp, className, ...props },

package/src/InputGroup.tsx

@@ -7,8 +7,7 @@ import { styled } from "styled-system/jsx";
 
 /**
  * InputGroup — relative wrapper for an Input with addon elements. Pad the
- * input (`pl`/`pr`) to make room for the elements. Replaces Chakra's
- * InputGroup.
+ * input (`pl`/`pr`) to make room for the elements.
  */
 export const InputGroup = styled("div", {
   base: { position: "relative", width: "100%", display: "flex" },
@@ -17,9 +16,9 @@ export const InputGroup = styled("div", {
 // The element styles are written out twice rather than shared via a spread:
 // Panda's extractor only reliably evaluates inline literals.
 // The size variants are square boxes matching the input recipe's height per
-// size, as in Chakra; pass the same `size` as the grouped Input.
+// size; pass the same `size` as the grouped Input.
 
-/** Element overlaying the start of an InputGroup (Chakra InputLeftElement). */
+/** Element overlaying the start of an InputGroup. */
 export const InputLeftElement = styled("div", {
   base: {
     position: "absolute",
@@ -40,7 +39,7 @@ export const InputLeftElement = styled("div", {
   defaultVariants: { size: "md" },
 });
 
-/** Element overlaying the end of an InputGroup (Chakra InputRightElement). */
+/** Element overlaying the end of an InputGroup. */
 export const InputRightElement = styled("div", {
   base: {
     position: "absolute",

package/src/Kbd.tsx

@@ -6,7 +6,7 @@
 import { styled } from "styled-system/jsx";
 
 /**
- * Kbd — keyboard-key chip matching Chakra's <Kbd> (light mode).
+ * Kbd — a keyboard-key chip (light mode).
  */
 export const Kbd = styled("kbd", {
   base: {

package/src/Link.tsx

@@ -6,8 +6,8 @@
 import { styled } from "styled-system/jsx";
 
 /**
- * Link — anchor styled to match Chakra's <Link> base (no underline until hover,
- * focus ring on keyboard focus). Accepts Panda style props for colour etc.
+ * Link — a styled anchor (no underline until hover, focus ring on keyboard
+ * focus). Accepts Panda style props for colour etc.
  */
 export const Link = styled("a", {
   base: {

package/src/LinkBox.tsx

@@ -12,7 +12,7 @@ import { SystemStyleObject } from "styled-system/types";
 /**
  * LinkBox — makes a whole box clickable via a nested LinkOverlay (or any
  * element with an inset `_before` overlay). Other interactive children must
- * be raised with `zIndex: 1`. Replaces Chakra's <LinkBox>.
+ * be raised with `zIndex: 1`.
  */
 export const LinkBox = styled("div", {
   base: { position: "relative" },
@@ -54,8 +54,7 @@ export interface LinkOverlayButtonProps
  * Deliberately a plain button, not a react-aria one: react-aria's usePress
  * cancels presses that land outside the button's bounding rect, which defeats
  * the overlay. `position: static` overrides the button recipe's base so the
- * overlay anchors to the LinkBox (Chakra's LinkOverlay did the same over its
- * Button).
+ * overlay anchors to the LinkBox.
  */
 export const LinkOverlayButton = forwardRef<
   HTMLButtonElement,

package/src/LinkButton.tsx

@@ -19,9 +19,9 @@ export interface LinkButtonProps
   /** Per-instance style overrides, merged after the recipe. */
   css?: SystemStyleObject;
   className?: string;
-  /** Icon rendered before the label, matching Chakra's `leftIcon`. */
+  /** Icon rendered before the label. */
   leftIcon?: ReactNode;
-  /** Icon rendered after the label, matching Chakra's `rightIcon`. */
+  /** Icon rendered after the label. */
   rightIcon?: ReactNode;
   children?: ReactNode;
 }
@@ -33,8 +33,8 @@ const linkReset = css.raw({
 });
 
 /**
- * LinkButton — a navigation link that looks like a Button (Chakra's
- * `Button as="a"`). react-aria-components <Link> renders a real anchor
+ * LinkButton — a navigation link that looks like a Button.
+ * react-aria-components <Link> renders a real anchor
  * (`href`, `target`, new-tab/middle-click semantics preserved) with the same
  * interaction data attributes as Button, so the `button` recipe's
  * hover/press/focus/disabled states apply unchanged.

package/src/List.tsx

@@ -6,26 +6,24 @@
 import { styled } from "styled-system/jsx";
 
 /**
- * Unstyled list, matching Chakra's <List>. The marker removal is explicit —
- * Chakra's List set listStyleType itself, and coexisting apps run without
- * Panda's preflight (margins/padding are zeroed by whichever reset is
- * active).
+ * Unstyled list. The marker removal is explicit rather than relying on a
+ * reset.
  */
 export const List = styled("ul", {
   base: { listStyleType: "none" },
 });
 
-/** List item, matching Chakra's <ListItem>. */
+/** List item. */
 export const ListItem = styled("li", {
   base: {},
 });
 
-/** Bulleted list matching Chakra's <UnorderedList>. */
+/** Bulleted list. */
 export const UnorderedList = styled("ul", {
   base: { listStyleType: "disc", marginStart: "1em" },
 });
 
-/** Numbered list matching Chakra's <OrderedList>. */
+/** Numbered list. */
 export const OrderedList = styled("ol", {
   base: { listStyleType: "decimal", marginStart: "1em" },
 });

package/src/Menu.recipe.ts

@@ -6,9 +6,9 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Menu slot recipe — Chakra's default Menu parts (light mode). `content` is the
- * dropdown card (react-aria-components' Popover), `list` the RAC Menu, `item` a
- * MenuItem, `icon` the leading-icon wrapper.
+ * Menu slot recipe. `content` is the dropdown card (react-aria-components'
+ * Popover), `list` the RAC Menu, `item` a MenuItem, `icon` the leading-icon
+ * wrapper.
  *
  * A config slot recipe (rather than an atomic `sva`) for consistency with
  * `dialog` and so presets can override it later if brands diverge.
@@ -38,15 +38,14 @@ export const menu = defineSlotRecipe({
       // `popover` (1500), not `dropdown` (1000): a RAC Popover always portals
       // to the body, so a menu opened from inside a Modal (zIndex `modal`,
       // 1400) escapes the modal's stacking context and would paint behind it.
-      // Chakra never hit this — its MenuList rendered inline unless explicitly
-      // portalled. Nothing else lives between 1400 and the toast/tooltip layer.
+      // Nothing else lives between 1400 and the toast/tooltip layer.
       zIndex: "popover",
       borderRadius: "md",
       borderWidth: "1px",
       borderColor: "gray.200",
       boxShadow: "sm",
-      // Approximate Chakra's menu fade/scale. RAC toggles data-entering/
-      // data-exiting on the Popover and waits for the transition before unmount.
+      // Fade/scale enter/exit. RAC toggles data-entering/data-exiting on the
+      // Popover and waits for the transition before unmount.
       transformOrigin: "top",
       opacity: 1,
       transform: "scale(1)",
@@ -71,15 +70,15 @@ export const menu = defineSlotRecipe({
       transitionDuration: "ultra-fast",
       transitionTimingFunction: "ease-in",
       // RAC highlights the active item (keyboard or pointer) with data-focused;
-      // data-pressed is the pressed state — mirrors Chakra's _focus/_active.
+      // data-pressed is the pressed state.
       "&[data-focused]": { bg: "gray.100" },
       "&[data-pressed]": { bg: "gray.200" },
       "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
     },
     label: {
-      // Chakra wraps an icon-item's children in a flex:1 span, so block
-      // children (e.g. two stacked <Text>s) lay out vertically rather than as
-      // flex-row siblings of the icon.
+      // A flex:1 wrapper around an icon-item's children, so block children
+      // (e.g. two stacked <Text>s) lay out vertically rather than as flex-row
+      // siblings of the icon.
       flex: "1",
     },
     icon: {
@@ -88,8 +87,8 @@ export const menu = defineSlotRecipe({
       justifyContent: "center",
       flexShrink: 0,
       marginEnd: "0.75rem",
-      // Chakra's MenuIcon shrinks glyphs to 0.8em; items passing an explicitly
-      // sized icon (e.g. h/w) override this.
+      // Glyphs shrink to 0.8em; items passing an explicitly sized icon
+      // (e.g. h/w) override this.
       fontSize: "0.8em",
     },
     divider: {
@@ -100,7 +99,7 @@ export const menu = defineSlotRecipe({
       opacity: 0.6,
     },
     group: {},
-    // Chakra's MenuGroup/MenuOptionGroup title.
+    // Title for a menu group or option group.
     groupTitle: {
       display: "block",
       mx: "4",
@@ -108,8 +107,8 @@ export const menu = defineSlotRecipe({
       fontWeight: "semibold",
       fontSize: "sm",
     },
-    // Check glyph slot for MenuItemOption: space always reserved (as Chakra
-    // does), visible only on the selected item (RAC sets data-selected on it).
+    // Check glyph slot for MenuItemOption: space always reserved, visible
+    // only on the selected item (RAC sets data-selected on it).
     itemIndicator: {
       display: "inline-flex",
       alignItems: "center",

package/src/Menu.tsx

@@ -97,7 +97,6 @@ export interface MenuListProps {
  */
 export const MenuList = ({
   children,
-  // Matches Chakra Menu's default "bottom-start".
   placement = "bottom start",
   css: cssProp,
   className,
@@ -119,7 +118,7 @@ export const MenuList = ({
 
 export interface MenuItemProps
   extends Omit<RACMenuItemProps, "className" | "children"> {
-  /** Icon rendered before the label, matching Chakra's MenuItem `icon`. */
+  /** Icon rendered before the label. */
   icon?: ReactNode;
   /** Per-instance style overrides, merged after the recipe. */
   css?: SystemStyleObject;
@@ -157,7 +156,7 @@ export const MenuItem = ({
 };
 
 interface MenuOptionGroupBaseProps {
-  /** Group heading shown above the options (Chakra's `title`). */
+  /** Group heading shown above the options. */
   title?: ReactNode;
   /** `MenuItemOption` children. */
   children: ReactNode;
@@ -186,19 +185,17 @@ export type MenuOptionGroupProps =
   | MenuOptionGroupCheckboxProps;
 
 /**
- * MenuOptionGroup — a group of checkable `MenuItemOption`s within a menu,
- * replacing Chakra's `MenuOptionGroup`. `type="radio"` (the default) is
- * single-select and renders `menuitemradio`; `type="checkbox"` is multi-select
- * and renders `menuitemcheckbox`, each option toggling independently.
+ * MenuOptionGroup — a group of checkable `MenuItemOption`s within a menu.
+ * `type="radio"` (the default) is single-select and renders `menuitemradio`;
+ * `type="checkbox"` is multi-select and renders `menuitemcheckbox`, each
+ * option toggling independently.
  *
  * Selection is section-scoped (RAC MenuSection), so a menu can mix action items
  * and option groups. An option's own `onAction` still fires on every press,
  * including the press that deselects it — so a lone toggle can be driven either
  * by the group's `onChange` or by the item's `onAction`.
  *
- * Choosing an option leaves the menu open (a plain `MenuItem` closes it), which
- * is what Chakra's checkbox groups did. Chakra's *radio* groups closed on
- * select, so a ported radio group is a deliberate behaviour change.
+ * Choosing an option leaves the menu open (a plain `MenuItem` closes it).
  */
 export const MenuOptionGroup = (props: MenuOptionGroupProps) => {
   const { title, children, css: cssProp, className } = props;
@@ -222,8 +219,7 @@ export const MenuOptionGroup = (props: MenuOptionGroupProps) => {
         if (props.type === "checkbox") {
           props.onChange?.(values);
         } else if (values.length > 0) {
-          // Radio: a press that clears the selection reports nothing, matching
-          // Chakra, which had no way to express an empty radio group.
+          // Radio: a press that clears the selection reports nothing.
           props.onChange?.(values[0]);
         }
       }}
@@ -247,7 +243,7 @@ export interface MenuItemOptionProps
 
 /**
  * MenuItemOption — a selectable option inside a `MenuOptionGroup`, with a
- * check indicator on the selected item (Chakra's MenuItemOption).
+ * check indicator on the selected item.
  */
 export const MenuItemOption = ({
   value,

package/src/Modal.recipe.ts

@@ -6,9 +6,9 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Dialog slot recipe — Chakra's default Modal parts (light mode), plus this
- * app's overrides: a full-viewport overlay (the iOS WKWebView 100% fix) and a
- * `full` size with safe-area insets and the brand status-bar gradient.
+ * Dialog slot recipe. The overlay spans the full viewport (the iOS WKWebView
+ * 100% fix) and the `full` size adds safe-area insets and the brand
+ * status-bar gradient.
  *
  * A config recipe (rather than an atomic `sva`) so the `size` variant accepts
  * responsive values, e.g. `{ base: "full", md: "4xl" }`. Consumed by the
@@ -85,7 +85,7 @@ export const dialog = defineSlotRecipe({
       display: "flex",
       flexDirection: "column",
       outline: "none",
-      // Approximate Chakra's fade + scale enter/exit.
+      // Fade + scale enter/exit.
       opacity: 1,
       transform: "scale(1)",
       transition: "opacity 0.2s ease-out, transform 0.2s ease-out",
@@ -114,16 +114,15 @@ export const dialog = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
-      // Chakra had no footer gap (call sites wrapped buttons in HStacks);
-      // baked in as the house style. Override via css for tighter layouts.
+      // The gap is house style; override via css for tighter layouts.
       gap: "5",
       flexShrink: 0,
     },
     closeTrigger: { position: "absolute", top: "2", insetEnd: "3" },
   },
   variants: {
-    // Chakra's `isCentered`: vertically centre the dialog in the viewport
-    // rather than the default top alignment.
+    // Vertically centre the dialog in the viewport rather than the default
+    // top alignment.
     centered: {
       true: {
         overlay: { alignItems: "center" },

package/src/Modal.tsx

@@ -55,11 +55,11 @@ export interface ModalOwnProps {
   size?: ModalSize;
   /** Allow closing by clicking the backdrop (default true; Escape always closes). */
   isDismissable?: boolean;
-  /** Disable the enter/exit transitions (Chakra's motionPreset="none"). */
+  /** Disable the enter/exit transitions. */
   motionless?: boolean;
-  /** Prevent Escape closing the dialog (Chakra's closeOnEsc={false}). */
+  /** Prevent Escape closing the dialog. */
   isKeyboardDismissDisabled?: boolean;
-  /** Style overrides for the dialog box (Chakra's ModalContent props). */
+  /** Style overrides for the dialog box. */
   contentCss?: SystemStyleObject;
   /**
    * Inline styles for the dialog box, for runtime-computed positioning that
@@ -68,25 +68,22 @@ export interface ModalOwnProps {
    */
   contentStyle?: CSSProperties;
   /**
-   * Style overrides for the backdrop (Chakra's ModalOverlay props), e.g. a
-   * transparent backdrop when something else provides the dimming.
+   * Style overrides for the backdrop, e.g. a transparent backdrop when
+   * something else provides the dimming.
    */
   overlayCss?: SystemStyleObject;
-  /**
-   * Use "alertdialog" for confirmations that interrupt the user (Chakra's
-   * AlertDialog).
-   */
+  /** Use "alertdialog" for confirmations that interrupt the user. */
   role?: "dialog" | "alertdialog";
-  /** Vertically centre the dialog (Chakra's `isCentered`). */
+  /** Vertically centre the dialog. */
   isCentered?: boolean;
   /**
    * Called after the dialog has fully closed (exit transition done and the
-   * dialog removed). Matches Chakra's `onCloseComplete`.
+   * dialog removed).
    */
   onCloseComplete?: () => void;
   /**
    * Element to focus when the dialog closes, instead of the element that was
-   * focused when it opened. Matches Chakra's `finalFocusRef`.
+   * focused when it opened.
    */
   finalFocusRef?: RefObject<HTMLElement>;
   /**
@@ -98,9 +95,9 @@ export interface ModalOwnProps {
   "aria-label"?: string;
   children: ReactNode;
   /**
-   * `data-*` attributes land on the dialog box (where Chakra's went, on
-   * ModalContent), so end-to-end tests can address a dialog. Shells that
-   * forward their caller's data attributes can spread them straight in.
+   * `data-*` attributes land on the dialog box, so end-to-end tests can
+   * address a dialog. Shells that forward their caller's data attributes can
+   * spread them straight in.
    */
   [key: `data-${string}`]: unknown;
 }
@@ -129,16 +126,14 @@ export type ModalProps =
   | (ModalOwnProps & { isOpen?: never; onClose?: never });
 
 /**
- * Modal — a focus-trapping dialog. Collapses Chakra's
- * Modal/ModalOverlay/ModalContent into a single shell; place ModalHeader,
+ * Modal — a focus-trapping dialog in a single shell; place ModalHeader,
  * ModalBody and ModalFooter inside.
  *
  * Two ways to drive it:
  *
- * - **Controlled** (`isOpen` + `onClose`), which is what a Chakra app ports
- *   to, and what any dialog with more than one opener needs — a menu item and
- *   a toolbar button opening the same dialog, or one opened from a handler
- *   after an async result.
+ * - **Controlled** (`isOpen` + `onClose`), which is what any dialog with more
+ *   than one opener needs — a menu item and a toolbar button opening the same
+ *   dialog, or one opened from a handler after an async result.
  * - **Inside a `DialogTrigger`**, with neither prop: react-aria holds the
  *   open state, the trigger opens it, and `ModalCloseButton` and the footer's
  *   `useDialogClose()` still close it. Prefer this where a dialog has exactly
@@ -259,7 +254,7 @@ interface SlotProps {
   children?: ReactNode;
   css?: SystemStyleObject;
   className?: string;
-  /** `data-*` attributes land on the slot element, as they did on Chakra's. */
+  /** `data-*` attributes land on the slot element. */
   [key: `data-${string}`]: unknown;
 }
 
@@ -340,8 +335,8 @@ export interface ModalCloseButtonProps {
 }
 
 /**
- * ModalCloseButton — the X in the dialog's top corner (Chakra's
- * ModalCloseButton at its default md size). Closes via the Modal's onClose.
+ * ModalCloseButton — the X in the dialog's top corner. Closes via the Modal's
+ * onClose.
  */
 export const ModalCloseButton = ({
   "aria-label": ariaLabel,

package/src/NativeSelect.tsx

@@ -9,8 +9,8 @@ import { input, InputVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface NativeSelectProps
-  // `size` is the recipe's size scale, as in Chakra; the native visible-rows
-  // attribute it shadows was unused.
+  // `size` is the recipe's size scale; the native visible-rows attribute it
+  // shadows was unused.
   extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "className" | "size">,
     InputVariantProps {
   /**
@@ -23,18 +23,17 @@ export interface NativeSelectProps
   css?: SystemStyleObject;
   /**
    * Style overrides for the chevron wrapper, which is where width constraints
-   * belong (the select fills it). Chakra's Select worked the same way: layout
-   * props were split onto `.chakra-select__wrapper`, `width: 100%` otherwise.
-   * No wrapper is rendered with `hideChevron`; constrain the select directly.
+   * belong (the select fills it). No wrapper is rendered with `hideChevron`;
+   * constrain the select directly.
    */
   wrapperCss?: SystemStyleObject;
   className?: string;
 }
 
 /**
- * NativeSelect — a native select styled like Chakra's Select field (outline).
- * The recipe's `appearance: none` removes the platform chevron, so one is
- * drawn back in by default (Chakra Select's glyph, `currentColor`).
+ * NativeSelect — a native select styled like the outline Input. The recipe's
+ * `appearance: none` removes the platform chevron, so one is drawn back in by
+ * default (`currentColor`).
  */
 export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   function NativeSelect(
@@ -47,15 +46,14 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         className={cx(
           input({ size }),
           css(
-            // Chakra's Select field carried a 1px bottom padding its Input
-            // didn't (its option text sits a hair higher than input text).
+            // Option text sits a hair higher than input text; the 1px bottom
+            // padding compensates.
             {
               cursor: "pointer",
               paddingBottom: "1px",
               _disabled: { cursor: "not-allowed" },
             },
-            // Room for the chevron overlay (Chakra Select's icon spacing,
-            // constant across sizes).
+            // Room for the chevron overlay (constant across sizes).
             hideChevron ? undefined : { paddingRight: "8" },
             cssProp,
           ),
@@ -70,14 +68,16 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     return (
       <span
         className={css(
-          // Full-width like every other field (and Chakra's select wrapper);
-          // the select's own recipe width fills it. Constrain via wrapperCss.
+          // Full-width like every other field; the select's own recipe width
+          // fills it. Constrain via wrapperCss.
           { position: "relative", display: "inline-flex", width: "100%" },
           wrapperCss,
         )}
       >
         {select}
-        {/* Chakra Select's chevron, fixed-size across field sizes. */}
+        {/* The chevron, fixed-size across field sizes. The path is Chakra
+            UI's Select chevron, inlined for visual parity with the apps'
+            original look (see the notice in LICENSE.md). */}
         <svg
           viewBox="0 0 24 24"
           aria-hidden
@@ -91,7 +91,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             pointerEvents: "none",
             fill: "currentColor",
             // The chevron sits outside the select so it doesn't inherit its
-            // disabled dimming; Chakra's Select icon dimmed to 0.5.
+            // disabled dimming; dim it explicitly to match.
             "select:disabled + &": { opacity: 0.5 },
           })}
         >

package/src/NumberField.recipe.ts

@@ -6,10 +6,9 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * NumberField slot recipe — Chakra's NumberInput look: 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).
+ * 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.
@@ -27,8 +26,7 @@ export const numberField = defineSlotRecipe({
       position: "relative",
       zIndex: 0,
     },
-    // Chakra's NumberInputStepper: a column overlaying the input's right
-    // edge, inset by the input border.
+    // A column overlaying the input's right edge, inset by the input border.
     stepper: {
       display: "flex",
       flexDirection: "column",
@@ -54,10 +52,18 @@ export const numberField = defineSlotRecipe({
       borderColor: "gray.200",
       transitionProperty: "background",
       transitionDuration: "ultra-fast",
+      // Follow the input's corners, less the 1px 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) - 1px)",
+      },
       "&:last-child": {
         borderTop: "1px solid",
         borderTopColor: "gray.200",
         marginTop: "-1px",
+        borderEndEndRadius: "calc(token(radii.md) - 1px)",
       },
       "&[data-hovered]": { bg: "gray.100" },
       "&[data-pressed]": { bg: "gray.200" },
@@ -65,17 +71,25 @@ export const numberField = defineSlotRecipe({
     },
   },
   variants: {
-    // Chakra's NumberInput: 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.
+    // 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)" },
+        stepperButton: {
+          fontSize: "calc(token(fontSizes.sm) * 0.75)",
+          "&:first-child": {
+            borderStartEndRadius: "calc(token(radii.sm) - 1px)",
+          },
+          "&:last-child": {
+            borderEndEndRadius: "calc(token(radii.sm) - 1px)",
+          },
+        },
       },
     },
   },

package/src/NumberField.tsx

@@ -49,10 +49,10 @@ export interface NumberFieldProps
 }
 
 /**
- * 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(