@microbit/ui 0.1.0-alpha.7 → 0.1.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.9",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/reset.css

@@ -21,3 +21,15 @@
   border-color: var(--colors-gray-200);
   word-wrap: break-word;
 }
+
+/*
+ * Panda's preflight (base layer) beats the rule above with
+ * `border-color: var(--global-color-border, currentcolor)`. The currentcolor
+ * fallback poisons `border-color: inherit` chains (inherit copies the
+ * currentcolor KEYWORD, which then resolves against the child's own `color`
+ * — e.g. white on the checkbox/radio control). Defining the hook keeps the
+ * default border colour a real colour, as Chakra's global reset did.
+ */
+:root {
+  --global-color-border: var(--colors-gray-200);
+}

package/src/Checkbox.recipe.ts

@@ -6,16 +6,16 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Checkbox slot recipe — Chakra's md checkbox with the default blue
- * colorScheme (light mode). The control's `borderColor: inherit` picks up a
- * `borderColor` set on the root, matching Chakra's convention for tinting the
- * box from the call site.
+ * Checkbox slot recipe — Chakra's checkbox with the default blue colorScheme
+ * (light mode) and its sm/md/lg size scale. The control's
+ * `borderColor: inherit` picks up a `borderColor` set on the root, matching
+ * Chakra's convention for tinting the box from the call site.
  *
  * State styling keys off data attributes stamped on the control by the
  * shared-ui Checkbox (react-aria provides the state via render props).
  *
- * Registered in the base preset (base-preset.ts). No variants, so it
- * needs no `staticCss` entry.
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
  */
 export const checkbox = defineSlotRecipe({
   className: "checkbox",
@@ -34,11 +34,10 @@ export const checkbox = defineSlotRecipe({
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      width: "4",
-      height: "4",
       transitionProperty: "box-shadow",
       transitionDuration: "normal",
-      border: "2px solid",
+      borderWidth: "2px",
+      borderStyle: "solid",
       borderRadius: "sm",
       borderColor: "inherit",
       color: "white",
@@ -52,13 +51,23 @@ export const checkbox = defineSlotRecipe({
           borderColor: "controlCheckedHoverBg",
         },
       },
+      // Chakra's 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",
+      },
+      "&[data-selected][data-disabled]": {
+        bg: "gray.200",
+        borderColor: "gray.200",
+        color: "gray.500",
+        _hover: { bg: "gray.200", borderColor: "gray.200" },
+      },
       "&[data-focus-visible]": {
         focusShadow: "outline",
       },
     },
     icon: {
-      width: "0.75rem",
-      height: "0.75rem",
       transitionProperty: "transform",
       transitionDuration: "normal",
     },
@@ -68,4 +77,29 @@ export const checkbox = defineSlotRecipe({
       "&[data-disabled]": { opacity: 0.4 },
     },
   },
+  variants: {
+    // Chakra's Checkbox size scale. The icon dimensions are Chakra's
+    // 1.2em-wide check glyph at each size's icon fontSize (3xs/2xs/2xs),
+    // resolved to rem.
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        icon: { width: "0.54rem", height: "0.54rem" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        icon: { width: "0.75rem", height: "0.75rem" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });

package/src/Checkbox.tsx

@@ -9,11 +9,12 @@ import {
   CheckboxProps as RACCheckboxProps,
 } from "react-aria-components";
 import { css, cx } from "styled-system/css";
-import { checkbox } from "styled-system/recipes";
+import { checkbox, CheckboxVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface CheckboxProps
-  extends Omit<RACCheckboxProps, "className" | "children" | "style"> {
+  extends Omit<RACCheckboxProps, "className" | "children" | "style">,
+    CheckboxVariantProps {
   /** Per-instance style overrides for the root, merged after the recipe. */
   css?: SystemStyleObject;
   className?: string;
@@ -21,28 +22,30 @@ export interface CheckboxProps
 }
 
 /**
- * Checkbox — react-aria-components <Checkbox> styled like Chakra's md
- * checkbox. Children render as the label; wrap them in a visually-hidden
- * span for icon-less checkboxes.
+ * Checkbox — react-aria-components <Checkbox> styled like Chakra's checkbox.
+ * Children render as the label; wrap them in a visually-hidden span for
+ * icon-less checkboxes.
  */
 export const Checkbox = ({
+  size,
   css: cssProp,
   className,
   children,
   ...rest
 }: CheckboxProps) => {
-  const slots = checkbox();
+  const slots = checkbox({ size });
   return (
     <RACCheckbox
       className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
       {...rest}
     >
-      {({ isSelected, isFocusVisible }) => (
+      {({ isSelected, isFocusVisible, isDisabled }) => (
         <>
           <span
             className={slots.control}
             data-selected={isSelected || undefined}
             data-focus-visible={isFocusVisible || undefined}
+            data-disabled={isDisabled || undefined}
             aria-hidden
           >
             {isSelected && (
@@ -58,7 +61,14 @@ export const Checkbox = ({
               </svg>
             )}
           </span>
-          {children != null && <span className={slots.label}>{children}</span>}
+          {children != null && (
+            <span
+              className={slots.label}
+              data-disabled={isDisabled || undefined}
+            >
+              {children}
+            </span>
+          )}
         </>
       )}
     </RACCheckbox>

package/src/Collapse.tsx

@@ -162,7 +162,19 @@ export const Collapse = ({
         ...style,
       }}
     >
-      <div ref={contentRef}>{children}</div>
+      <div
+        ref={contentRef}
+        // flow-root: the measured element must be a block formatting
+        // context, or children's margins collapse through it and
+        // scrollHeight under-measures — the outer (overflow: hidden)
+        // wrapper IS a BFC and needs the full height, so the mismatch
+        // clips the last line of margined content (python-editor's API
+        // docs). Rendering is unchanged: the margins always displayed
+        // inside the outer BFC.
+        className={css({ display: "flow-root" })}
+      >
+        {children}
+      </div>
     </div>
   );
 };

package/src/Input.recipe.ts

@@ -11,15 +11,17 @@ const transitionCommon =
   "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform";
 
 /**
- * Input recipe — Chakra's outline Input field at md size (light mode). Used by
- * the shared-ui Input and NativeSelect, and by TextField's input slot.
+ * 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.
  *
  * 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`
  * (inputs inside RAC TextField). Focus is declared after invalid so a focused
  * invalid field shows the focus ring, as in Chakra.
  *
- * Registered in the base preset (base-preset.ts).
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop size variants generated.
  */
 export const input = defineRecipe({
   className: "input",
@@ -32,10 +34,6 @@ export const input = defineRecipe({
     font: "inherit",
     transitionProperty: transitionCommon,
     transitionDuration: "normal",
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md",
     border: "1px solid",
     borderColor: "gray.200",
     bg: "inherit",
@@ -60,4 +58,15 @@ export const input = defineRecipe({
       cursor: "not-allowed",
     },
   },
+  variants: {
+    // Chakra's Input size scale, minus the unused xs.
+    size: {
+      lg: { fontSize: "lg", px: "4", h: "12", borderRadius: "md" },
+      md: { fontSize: "md", px: "4", h: "10", borderRadius: "md" },
+      sm: { fontSize: "sm", px: "3", h: "8", borderRadius: "sm" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });

package/src/Input.tsx

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

package/src/InputGroup.tsx

@@ -16,6 +16,8 @@ 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.
 
 /** Element overlaying the start of an InputGroup (Chakra InputLeftElement). */
 export const InputLeftElement = styled("div", {
@@ -23,13 +25,19 @@ export const InputLeftElement = styled("div", {
     position: "absolute",
     top: 0,
     left: 0,
-    width: "10",
-    height: "10",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     zIndex: 2,
   },
+  variants: {
+    size: {
+      lg: { width: "12", height: "12" },
+      md: { width: "10", height: "10" },
+      sm: { width: "8", height: "8" },
+    },
+  },
+  defaultVariants: { size: "md" },
 });
 
 /** Element overlaying the end of an InputGroup (Chakra InputRightElement). */
@@ -38,11 +46,17 @@ export const InputRightElement = styled("div", {
     position: "absolute",
     top: 0,
     right: 0,
-    width: "10",
-    height: "10",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     zIndex: 2,
   },
+  variants: {
+    size: {
+      lg: { width: "12", height: "12" },
+      md: { width: "10", height: "10" },
+      sm: { width: "8", height: "8" },
+    },
+  },
+  defaultVariants: { size: "md" },
 });

package/src/NativeSelect.tsx

@@ -5,11 +5,14 @@
  */
 import { forwardRef, SelectHTMLAttributes } from "react";
 import { css, cx } from "styled-system/css";
-import { input } from "styled-system/recipes";
+import { input, InputVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface NativeSelectProps
-  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "className"> {
+  // `size` is the recipe's size scale, as in Chakra; the native visible-rows
+  // attribute it shadows was unused.
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "className" | "size">,
+    InputVariantProps {
   /**
    * Suppress the dropdown chevron, e.g. when an adjacent control provides the
    * affordance. Without the chevron a bare <select> element is rendered (no
@@ -22,23 +25,24 @@ export interface NativeSelectProps
 }
 
 /**
- * NativeSelect — a native select styled like Chakra's Select field (md,
- * 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 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`).
  */
 export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   function NativeSelect(
-    { hideChevron = false, css: cssProp, className, ...rest },
+    { hideChevron = false, size, css: cssProp, className, ...rest },
     ref,
   ) {
     const select = (
       <select
         ref={ref}
         className={cx(
-          input(),
+          input({ size }),
           css(
             { cursor: "pointer" },
-            // Room for the chevron overlay.
+            // Room for the chevron overlay (Chakra Select's icon spacing,
+            // constant across sizes).
             hideChevron ? undefined : { paddingRight: "8" },
             cssProp,
           ),
@@ -53,7 +57,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     return (
       <span className={css({ position: "relative", display: "inline-flex" })}>
         {select}
-        {/* Chakra Select's chevron. */}
+        {/* Chakra Select's chevron, fixed-size across field sizes. */}
         <svg
           viewBox="0 0 24 24"
           aria-hidden

package/src/Radio.recipe.ts

@@ -0,0 +1,107 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+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.
+ *
+ * State styling keys off data attributes stamped by the shared-ui Radio
+ * (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 radio = defineSlotRecipe({
+  className: "radio",
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      cursor: "pointer",
+      position: "relative",
+      "&[data-disabled]": { cursor: "not-allowed" },
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      transitionProperty: "box-shadow",
+      transitionDuration: "normal",
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderRadius: "full",
+      borderColor: "inherit",
+      color: "white",
+      bg: "white",
+      "&[data-selected]": {
+        bg: "controlCheckedBg",
+        borderColor: "controlCheckedBg",
+        color: "white",
+        _hover: {
+          bg: "controlCheckedHoverBg",
+          borderColor: "controlCheckedHoverBg",
+        },
+        // Chakra's radio dot.
+        _before: {
+          content: '""',
+          display: "inline-block",
+          position: "relative",
+          width: "50%",
+          height: "50%",
+          borderRadius: "50%",
+          bg: "currentColor",
+        },
+      },
+      // Chakra's 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",
+      },
+      "&[data-selected][data-disabled]": {
+        bg: "gray.200",
+        borderColor: "gray.200",
+        color: "gray.500",
+        _hover: { bg: "gray.200", borderColor: "gray.200" },
+      },
+      "&[data-focus-visible]": {
+        focusShadow: "outline",
+      },
+    },
+    label: {
+      userSelect: "none",
+      marginStart: "2",
+      "&[data-disabled]": { opacity: 0.4 },
+    },
+  },
+  variants: {
+    // Chakra's Radio size scale (the Checkbox control scale).
+    size: {
+      sm: {
+        control: { width: "3", height: "3" },
+        label: { fontSize: "sm" },
+      },
+      md: {
+        control: { width: "4", height: "4" },
+        label: { fontSize: "md" },
+      },
+      lg: {
+        control: { width: "5", height: "5" },
+        label: { fontSize: "lg" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/Radio.tsx

@@ -0,0 +1,89 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+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 {
+  /** Per-instance style overrides for the root, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Radio — react-aria-components <Radio> styled like Chakra's radio. Must be
+ * rendered inside a RadioGroup. Children render as the label.
+ */
+export const Radio = ({
+  size,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: RadioProps) => {
+  const slots = radio({ size });
+  return (
+    <RACRadio
+      className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      {({ isSelected, isFocusVisible, isDisabled }) => (
+        <>
+          <span
+            className={slots.control}
+            data-selected={isSelected || undefined}
+            data-focus-visible={isFocusVisible || undefined}
+            data-disabled={isDisabled || undefined}
+            aria-hidden
+          />
+          {children != null && (
+            <span
+              className={slots.label}
+              data-disabled={isDisabled || undefined}
+            >
+              {children}
+            </span>
+          )}
+        </>
+      )}
+    </RACRadio>
+  );
+};

package/src/Switch.recipe.ts

@@ -6,15 +6,16 @@
 import { defineSlotRecipe } from "@pandacss/dev";
 
 /**
- * Switch slot recipe — Chakra's md switch with the default blue colorScheme
- * (light mode). Track is 1.875rem x 1rem with a 2px inset; the thumb slides by
- * the track/thumb width difference when selected.
+ * 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). No variants, so it
- * needs no `staticCss` entry.
+ * 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",
@@ -35,8 +36,6 @@ export const switchRecipe = defineSlotRecipe({
       boxSizing: "content-box",
       borderRadius: "full",
       p: "0.5",
-      width: "1.875rem",
-      height: "4",
       transitionProperty: "background-color",
       transitionDuration: "fast",
       bg: "gray.300",
@@ -61,11 +60,6 @@ export const switchRecipe = defineSlotRecipe({
       transitionProperty: "transform",
       transitionDuration: "normal",
       borderRadius: "inherit",
-      width: "4",
-      height: "4",
-      "&[data-selected]": {
-        transform: "translateX(0.875rem)",
-      },
       _forcedColors: {
         bg: "ButtonText",
         "&[data-selected]": { bg: "SelectedItemText" },
@@ -77,4 +71,37 @@ export const switchRecipe = defineSlotRecipe({
       "&[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",
+  },
 });

package/src/Switch.tsx

@@ -9,11 +9,12 @@ import {
   SwitchProps as RACSwitchProps,
 } from "react-aria-components";
 import { css, cx } from "styled-system/css";
-import { switchRecipe } from "styled-system/recipes";
+import { switchRecipe, SwitchRecipeVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface SwitchProps
-  extends Omit<RACSwitchProps, "className" | "children" | "style"> {
+  extends Omit<RACSwitchProps, "className" | "children" | "style">,
+    SwitchRecipeVariantProps {
   /** Per-instance style overrides for the root, merged after the recipe. */
   css?: SystemStyleObject;
   className?: string;
@@ -21,16 +22,17 @@ export interface SwitchProps
 }
 
 /**
- * Switch — react-aria-components <Switch> styled like Chakra's md switch.
+ * Switch — react-aria-components <Switch> styled like Chakra's switch.
  * Children render as the label; pass `aria-label` for label-less switches.
  */
 export const Switch = ({
+  size,
   css: cssProp,
   className,
   children,
   ...rest
 }: SwitchProps) => {
-  const slots = switchRecipe();
+  const slots = switchRecipe({ size });
   return (
     <RACSwitch
       className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}

package/src/TextField.tsx

@@ -13,14 +13,15 @@ import {
   TextFieldProps as RACTextFieldProps,
 } from "react-aria-components";
 import { css, cx } from "styled-system/css";
-import { field, input } from "styled-system/recipes";
+import { field, input, InputVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface TextFieldProps
   extends Omit<
-    RACTextFieldProps,
-    "className" | "children" | "style" | "onFocus" | "onBlur"
-  > {
+      RACTextFieldProps,
+      "className" | "children" | "style" | "onFocus" | "onBlur"
+    >,
+    InputVariantProps {
   /** Visible label (Chakra's FormLabel; asterisk added when `isRequired`). */
   label: ReactNode;
   /** Help text below the input (Chakra's FormHelperText). */
@@ -48,6 +49,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       helperTextCss,
       onFocus,
       autoCapitalize,
+      size,
       ...rest
     },
     ref,
@@ -65,7 +67,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         </RACLabel>
         <RACInput
           ref={ref}
-          className={input()}
+          className={input({ size })}
           onFocus={onFocus}
           autoCapitalize={autoCapitalize}
         />

package/src/base-preset.ts

@@ -26,6 +26,7 @@ import {
 import { button } from "./Button.recipe";
 import { card } from "./Card.recipe";
 import { checkbox } from "./Checkbox.recipe";
+import { radio } from "./Radio.recipe";
 import { drawer } from "./Drawer.recipe";
 import { heading } from "./Heading.recipe";
 import { input } from "./Input.recipe";
@@ -180,6 +181,7 @@ export const basePreset = definePreset({
       field,
       menu,
       numberField,
+      radio,
       slider,
       switchRecipe,
       toast,
@@ -237,12 +239,16 @@ export const basePreset = definePreset({
   staticCss: {
     recipes: {
       button: ["*"],
+      checkbox: ["*"],
       heading: ["*"],
       card: ["*"],
       // Dialog size is chosen with responsive objects ({ base, md }) passed
       // as a runtime prop, so generate the breakpoint-prefixed variants too.
       dialog: [{ size: ["*"], responsive: true }, { centered: ["*"] }],
       drawer: ["*"],
+      input: ["*"],
+      radio: ["*"],
+      switchRecipe: ["*"],
       // Toast status is chosen at runtime from the toast content.
       toast: ["*"],
     },

package/src/hooks/useClipboard.ts

@@ -15,13 +15,50 @@ export function useClipboard(
 ): { onCopy: () => void; hasCopied: boolean } {
   const [hasCopied, setHasCopied] = useState(false);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const markCopied = useCallback(() => {
+    setHasCopied(true);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setHasCopied(false), timeoutMs);
+  }, [timeoutMs]);
   const onCopy = useCallback(() => {
-    navigator.clipboard.writeText(value).then(() => {
-      setHasCopied(true);
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => setHasCopied(false), timeoutMs);
-    });
-  }, [value, timeoutMs]);
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard
+        .writeText(value)
+        .then(markCopied, () => execCommandCopy(value) && markCopied());
+    } else if (execCommandCopy(value)) {
+      markCopied();
+    }
+  }, [value, markCopied]);
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
   return { onCopy, hasCopied };
 }
+
+/**
+ * Chakra's useClipboard wrapped the execCommand-based copy-to-clipboard
+ * package, which works on a user gesture in contexts the async API refuses:
+ * insecure (non-localhost http) origins, where `navigator.clipboard` is
+ * undefined, and frames without a clipboard-write permissions policy, where
+ * `writeText` rejects.
+ */
+function execCommandCopy(value: string): boolean {
+  const active = document.activeElement;
+  const textarea = document.createElement("textarea");
+  textarea.value = value;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  let copied = false;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+    // Unsupported (execCommand is deprecated but universally kept for copy);
+    // report failure so the caller shows no false "Copied!".
+  }
+  textarea.remove();
+  if (active instanceof HTMLElement) {
+    active.focus();
+  }
+  return copied;
+}

package/src/index.ts

@@ -22,6 +22,7 @@ export * from "./LinkBox";
 export * from "./NativeSelect";
 export * from "./NumberField";
 export * from "./ProgressBar";
+export * from "./Radio";
 export * from "./Slide";
 export * from "./Slider";
 export * from "./Spinner";