@solidrt/components 0.0.18 → 0.0.19

package/AGENTS.md

@@ -43,10 +43,41 @@ Most components group props into two objects, plus top-level event handlers:
   hovered }`. No pointer capture: a drag out cancels via onPointerLeave.
 - `Button` - themed Pressable: accent box + label (string/number child), scales
   on press (via reactive style); colors from `theme.color.primary`/`onPrimary`.
+- `Switch` - on/off toggle; `value`/`onChange`, controlled or uncontrolled
+  (`defaultValue`). Track fills `primary`/`surfaceAlt`, thumb slides.
+- `Checkbox` - `checked`/`onChange` (or `defaultChecked`); checkmark drawn via a
+  core `<d-path>` when checked.
+- `RadioGroup` + `Radio` - single-selection pair; the group owns
+  `value`/`onChange` (or `defaultValue`) and shares it to `Radio` children via a
+  module-local context (not a cross-component dependency). `Radio value=...`;
+  string/number child renders as a themed label.
+- `Slider` - horizontal; `value`/`onChange` (or `defaultValue`), `min`/`max`/
+  `step`. Pointer x mapped to value via `getBoundingBox`; uses core
+  `setPointerCapture` so a drag keeps tracking off the track (within the window).
+- `Card` - themed surface container: padded column box, `surface` fill, `border`
+  stroke, rounded. Optional `title` heading; override paint via `style`.
+- `Divider` - thin rule in `border` color; `orientation` (default horizontal),
+  `thickness`. Stretches across the cross axis (full width in a column).
+- `Badge` - small rounded pill for counts/labels/status; `primary`/`onPrimary`
+  by default, override via `style.backgroundColor`/`style.color`.
+- `Spinner` - indeterminate rotating arc, driven by core `onFrame`; `size`,
+  `thickness`, `speed` (rev/s). Color from `primary`, override via `style.color`.
+- `ProgressBar` - horizontal; determinate with `value` in [0,1] (fill grows from
+  the left), indeterminate when `value` is undefined (segment slides, `onFrame`).
+  Track `surfaceAlt` / fill `primary`; override via `style.backgroundColor`/`color`.
+- `QrCode` - QR for `data: string`, built from primitives (same-color row runs
+  merged into one box on a light panel); grid memoized on `data`/`level`.
+  `moduleSize`/`margin`/`radius`/`level` (L/M/Q/H). Paints black-on-white by
+  default (NOT the theme) to stay scannable; override `color`/`background` only
+  if contrast holds. Deps on `qrcode-generator`.
 - `SafeArea` - pads children clear of system UI (notches, status bars); top and
   bottom on by default, pass `false`/a number per edge.
-- `theme` / `setTheme` - shared appearance (colors, spacing, radii, font sizes);
-  call `setTheme({...})` to override defaults.
+- `theme` / `setTheme` / `darkTheme` / `lightTheme` - shared REACTIVE appearance
+  (backed by a Solid store, so reads are tracked and switching recolors the live
+  UI). `setTheme(lightTheme)`/`setTheme(darkTheme)` switch presets;
+  `setTheme({...})` merges a one-level-deep override. Default is dark. Color
+  tokens: `background`, `surface`, `surfaceAlt`, `text`, `textMuted`, `border`,
+  `primary`, `onPrimary`, `danger`, `scrim`.
 
 ## Minimal app (verified to render)
 

package/README.md

@@ -12,7 +12,21 @@ bun add @solidrt/components
 
 ## Theming
 
-Appearance (colors, spacing, border, font size) is controlled via the shared theme. Call `setTheme` from `@solidrt/components` to override defaults.
+Appearance (colors, spacing, border, font size) is controlled via a shared, reactive theme. Reads are tracked, so switching the theme at runtime recolors the live UI without remounting.
+
+Two presets ship out of the box, `darkTheme` and `lightTheme`. The default is dark. Switch by passing a full preset, or apply a targeted override with a partial:
+
+```jsx
+import { setTheme, darkTheme, lightTheme } from "@solidrt/components"
+
+setTheme(lightTheme)                          // switch to light
+setTheme(darkTheme)                           // switch to dark
+setTheme({ color: { primary: "#ff2d55" } })   // override one token
+```
+
+`setTheme` merges one level deep per category, so a partial only touches the keys you pass.
+
+The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`, `onPrimary`, `danger`, and `scrim` (modal dim). Non-color tokens are `spacing`, `radius`, `borderWidth`, and `text` (font sizes), shared across presets.
 
 ## Layout and style
 
@@ -293,6 +307,235 @@ import { Button } from "@solidrt/components"
 | `style`    | `StyleProps`  | Overrides background, radius, etc.             |
 | `children` | `any`         | Label text, or custom content.                 |
 
+### Switch
+
+An on/off toggle. The track fills with `primary` when on and `surfaceAlt` when off; the thumb slides across. Controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Built on `Pressable`, so `disabled` takes no pointer events.
+
+```jsx
+import { Switch } from "@solidrt/components"
+import { createSignal } from "@solidjs/signals"
+
+function NotifyToggle() {
+  let [on, setOn] = createSignal(true)
+  return <Switch value={on()} onChange={setOn} />
+}
+```
+
+**Props**
+
+| Prop           | Type                         | Default | Description                                     |
+| -------------- | ---------------------------- | ------- | ----------------------------------------------- |
+| `value`        | `boolean`                    | -       | Controlled state. Omit for uncontrolled.        |
+| `defaultValue` | `boolean`                    | `false` | Initial value for uncontrolled use.             |
+| `onChange`     | `(value: boolean) => void`   | -       | Fires with the new value on toggle.             |
+| `disabled`     | `boolean`                    | `false` | Takes no pointer events when true.              |
+| `layout`       | `LayoutProps`                | -       | Overrides sizing/positioning of the track.      |
+| `style`        | `StyleProps`                 | -       | Overrides track colors and radius.              |
+
+### Checkbox
+
+A checkbox. When checked it fills with `primary` and draws a checkmark; otherwise it is an empty bordered box. Controlled via `checked`/`onChange`, or uncontrolled via `defaultChecked`.
+
+```jsx
+import { Checkbox } from "@solidrt/components"
+
+<Checkbox checked={agree()} onChange={setAgree} />
+```
+
+**Props**
+
+| Prop             | Type                        | Default | Description                                |
+| ---------------- | --------------------------- | ------- | ------------------------------------------ |
+| `checked`        | `boolean`                   | -       | Controlled state. Omit for uncontrolled.   |
+| `defaultChecked` | `boolean`                   | `false` | Initial value for uncontrolled use.        |
+| `onChange`       | `(checked: boolean) => void`| -       | Fires with the new state on toggle.        |
+| `disabled`       | `boolean`                   | `false` | Takes no pointer events when true.         |
+| `layout`         | `LayoutProps`               | -       | Overrides sizing.                          |
+| `style`          | `StyleProps`                | -       | Overrides box colors, border, and radius.  |
+
+### RadioGroup / Radio
+
+A single-selection group. `RadioGroup` owns the selected value and shares it with its `Radio` children; each `Radio` is a ring with an inner dot when selected. A string/number child of `Radio` renders as a themed label beside the ring. Controlled via `value`/`onChange` on the group, or uncontrolled via `defaultValue`.
+
+```jsx
+import { RadioGroup, Radio } from "@solidrt/components"
+
+<RadioGroup value={plan()} onChange={setPlan}>
+  <Radio value="free">Free</Radio>
+  <Radio value="pro">Pro</Radio>
+  <Radio value="team">Team</Radio>
+</RadioGroup>
+```
+
+**RadioGroup props**
+
+| Prop           | Type                        | Default | Description                              |
+| -------------- | --------------------------- | ------- | ---------------------------------------- |
+| `value`        | `unknown`                   | -       | Controlled selected value.               |
+| `defaultValue` | `unknown`                   | -       | Initial selection for uncontrolled use.  |
+| `onChange`     | `(value: unknown) => void`  | -       | Fires with the newly selected value.     |
+| `disabled`     | `boolean`                   | `false` | Disables every `Radio` in the group.     |
+| `layout`       | `LayoutProps`               | -       | Layout of the group container.           |
+| `children`     | `any`                       | -       | `Radio` elements.                        |
+
+**Radio props**
+
+| Prop       | Type          | Description                                          |
+| ---------- | ------------- | --------------------------------------------------- |
+| `value`    | `unknown`     | This option's value; selecting it sets the group.   |
+| `disabled` | `boolean`     | Disables this option (also disabled by the group).  |
+| `layout`   | `LayoutProps` | Layout of the option row.                           |
+| `style`    | `StyleProps`  | Paint properties of the option row.                 |
+| `children` | `any`         | A string/number label, or custom content.           |
+
+### Slider
+
+A horizontal slider. The groove fills up to the thumb; pressing or dragging the track sets the value from the pointer position. Controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. The drag uses pointer capture, so it keeps tracking when the pointer drifts off the track (anywhere within the window).
+
+```jsx
+import { Slider } from "@solidrt/components"
+
+<Slider value={volume()} onChange={setVolume} min={0} max={100} step={1} layout={{ width: 180 }} />
+```
+
+**Props**
+
+| Prop           | Type                       | Default | Description                                  |
+| -------------- | -------------------------- | ------- | -------------------------------------------- |
+| `value`        | `number`                   | -       | Controlled value. Omit for uncontrolled.     |
+| `defaultValue` | `number`                   | `min`   | Initial value for uncontrolled use.          |
+| `min`          | `number`                   | `0`     | Lower bound.                                 |
+| `max`          | `number`                   | `100`   | Upper bound.                                 |
+| `step`         | `number`                   | -       | Snap increment. Omit for continuous.         |
+| `onChange`     | `(value: number) => void`  | -       | Fires with the new value while dragging.     |
+| `disabled`     | `boolean`                  | `false` | Takes no pointer events when true.           |
+| `layout`       | `LayoutProps`              | -       | Layout of the track (e.g. `width`).          |
+| `style`        | `StyleProps`               | -       | Transform only (`x`/`y`/`rotate`/`scale`).   |
+
+### Card
+
+A themed surface container: a padded column box with a `surface` fill, a subtle `border` stroke, and rounded corners. All colors come from the theme, so it recolors live on a theme switch. Pass a `title` for a heading, or lay out the content yourself. Override any paint via `style`, spacing/sizing via `layout`.
+
+```jsx
+import { Card } from "@solidrt/components"
+
+<Card title="Profile" layout={{ width: 360 }}>
+  <Text>Card body content.</Text>
+</Card>
+```
+
+**Props**
+
+| Prop       | Type          | Default   | Description                                          |
+| ---------- | ------------- | --------- | ---------------------------------------------------- |
+| `title`    | `string`      | -         | Optional heading rendered above the content.         |
+| `children` | `any`         | -         | Card content.                                        |
+| `layout`   | `LayoutProps` | -         | Box layout (e.g. `width`, `gap`, `padding`).         |
+| `style`    | `StyleProps`  | -         | Paint overrides: `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, transform. |
+
+### Divider
+
+A thin rule in the theme `border` color. It stretches across its container on the cross axis: full width inside a column, full height inside a row (pass `orientation="vertical"`). Add spacing with `layout` margins, and override the color via `style.backgroundColor`.
+
+```jsx
+import { Divider } from "@solidrt/components"
+
+<Divider />
+<Divider orientation="vertical" />
+```
+
+**Props**
+
+| Prop          | Type                          | Default        | Description                            |
+| ------------- | ----------------------------- | -------------- | -------------------------------------- |
+| `orientation` | `"horizontal" \| "vertical"`  | `"horizontal"` | Rule direction.                        |
+| `thickness`   | `number`                      | `1`            | Line thickness in pixels.              |
+| `layout`      | `LayoutProps`                 | -              | Layout (e.g. margins for spacing).     |
+| `style`       | `StyleProps`                  | -              | `backgroundColor` overrides the color. |
+
+### Badge
+
+A small rounded pill for counts, labels, and status. Accent `primary` fill with `onPrimary` text by default; a string/number child is rendered as the themed label, anything else as-is. Override the fill via `style.backgroundColor` and the label color via `style.color`.
+
+```jsx
+import { Badge } from "@solidrt/components"
+
+<Badge>New</Badge>
+<Badge style={{ backgroundColor: theme.color.danger }}>Error</Badge>
+```
+
+**Props**
+
+| Prop       | Type          | Default | Description                                        |
+| ---------- | ------------- | ------- | -------------------------------------------------- |
+| `children` | `any`         | -       | String/number renders as the label; else as-is.    |
+| `layout`   | `LayoutProps` | -       | Box layout (e.g. padding overrides).               |
+| `style`    | `StyleProps`  | -       | `backgroundColor` (fill), `color` (label), transform. |
+
+### Spinner
+
+An indeterminate spinner: a 270-degree arc that rotates continuously. It is driven by core `onFrame`, so it participates in demand-driven rendering and stops when unmounted. Color comes from the theme `primary`; override via `style.color`.
+
+```jsx
+import { Spinner } from "@solidrt/components"
+
+<Spinner />
+<Spinner size={32} thickness={4} speed={1.5} />
+```
+
+**Props**
+
+| Prop        | Type          | Default | Description                        |
+| ----------- | ------------- | ------- | ---------------------------------- |
+| `size`      | `number`      | `24`    | Overall diameter in pixels.        |
+| `thickness` | `number`      | `3`     | Arc stroke width in pixels.        |
+| `speed`     | `number`      | `1`     | Revolutions per second.            |
+| `layout`    | `LayoutProps` | -       | Layout of the box.                 |
+| `style`     | `StyleProps`  | -       | `color` sets the arc; plus transform. |
+
+### ProgressBar
+
+A horizontal progress bar. Determinate when given a `value` in `[0, 1]` (the fill grows from the left); indeterminate when `value` is undefined (a short segment slides back and forth, driven by core `onFrame`). Track and fill colors come from the theme; override the track via `style.backgroundColor` and the fill via `style.color`.
+
+```jsx
+import { ProgressBar } from "@solidrt/components"
+
+<ProgressBar value={0.4} />   // determinate
+<ProgressBar />               // indeterminate
+```
+
+**Props**
+
+| Prop     | Type          | Default | Description                                         |
+| -------- | ------------- | ------- | --------------------------------------------------- |
+| `value`  | `number`      | -       | Progress in `[0, 1]`. Omit for an indeterminate bar. |
+| `layout` | `LayoutProps` | -       | Layout (e.g. `width`, `height`).                    |
+| `style`  | `StyleProps`  | -       | `backgroundColor` (track), `color` (fill).          |
+
+### QrCode
+
+Renders a QR code for `data` out of primitives: same-color modules in a row collapse into one box, drawn on a light quiet-zone panel. The grid recomputes only when `data` or `level` changes. It paints black on white by default (not the theme) so it stays scannable through a theme switch; override `color`/`background` only if the contrast still holds.
+
+```jsx
+import { QrCode } from "@solidrt/components"
+
+<QrCode data="https://solidjs.com" />
+<QrCode data={ticket()} moduleSize={8} level="L" />
+```
+
+**Props**
+
+| Prop         | Type                       | Default        | Description                                                    |
+| ------------ | -------------------------- | -------------- | -------------------------------------------------------------- |
+| `data`       | `string`                   | -              | The string to encode (URL, pairing ticket, text, ...).         |
+| `moduleSize` | `number`                   | `6`            | Pixels per module (the smallest square).                       |
+| `margin`     | `number`                   | `16`           | Quiet-zone padding in pixels around the grid; keep non-zero.   |
+| `color`      | `string`                   | `"#000000"`    | Dark-module color.                                             |
+| `background` | `string`                   | `"#ffffff"`    | Panel/light-module color.                                      |
+| `level`      | `"L" \| "M" \| "Q" \| "H"` | `"M"`          | Error-correction level; higher tolerates more damage but caps data length sooner. |
+| `radius`     | `number`                   | `8`            | Corner radius of the background panel.                         |
+| `layout`     | `LayoutProps`              | -              | Layout of the outer box.                                       |
+
 ## License
 
 MIT. Copyright (c) 2026 Antoine van Wel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -12,8 +12,11 @@
     "src/",
     "AGENTS.md"
   ],
+  "dependencies": {
+    "qrcode-generator": "^2.0.4"
+  },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.15",
-    "@solidrt/core": "0.0.18"
+    "@solidrt/core": "0.0.19"
   }
 }

package/src/badge.tsx

@@ -0,0 +1,50 @@
+import { Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import type { StyleProps } from "./types"
+
+export interface BadgeProps {
+  // A string/number renders as the themed pill label; anything else is rendered
+  // as-is (an icon, a dot, ...).
+  children?: any
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// A rounded radius large enough to fully pill any typical badge height; the
+// renderer clamps it to half the box, so both ends stay round.
+const RADIUS = 999
+
+// A small rounded pill for counts, labels, and status. Accent fill with
+// onPrimary text by default; override the fill via style.backgroundColor and the
+// label color via style.color.
+export function Badge(props: BadgeProps) {
+  let bg = () => props.style?.backgroundColor ?? theme.color.primary
+  let fg = () => props.style?.color ?? theme.color.onPrimary
+  let radius = () => props.style?.borderRadius ?? RADIUS
+  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+
+  return (
+    <view
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="center"
+      paddingLeft={8}
+      paddingRight={8}
+      paddingTop={2}
+      paddingBottom={2}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+    >
+      <d-rect color={bg()} radius={radius()} />
+      <Show when={isText()} fallback={props.children}>
+        <text color={fg()} fontSize={12} fontWeight={600}>
+          {props.children}
+        </text>
+      </Show>
+    </view>
+  )
+}

package/src/button.tsx

@@ -1,6 +1,7 @@
 import { Show } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
+import { policy, densityScale } from "./policy"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -15,11 +16,19 @@ export interface ButtonProps {
 }
 
 // Themed convenience over Pressable: a padded, centered, accent-colored box with
-// a label. Press feedback is a slight scale, driven through Pressable's reactive
-// style so no nodes are recreated on press. Override the box via style and the
-// padding/sizing via layout.
+// a label. Press feedback is a slight scale, hover feedback a tint (non-touch
+// interaction policies only), both driven through Pressable's reactive style so
+// no nodes are recreated. Override the box via style and the padding/sizing via
+// layout. A caller-set backgroundColor disables the hover tint: we cannot know
+// its hover variant.
 export function Button(props: ButtonProps) {
-  let bg = () => props.style?.backgroundColor ?? (props.disabled ? theme.color.surface : theme.color.primary)
+  let bg = (s: PressState) =>
+    props.style?.backgroundColor ??
+    (props.disabled
+      ? theme.color.surface
+      : s.hovered && policy.interaction !== "touch"
+        ? theme.color.primaryHover
+        : theme.color.primary)
   let radius = () => props.style?.borderRadius ?? theme.radius.sm
   let label = () => (props.disabled ? theme.color.textMuted : theme.color.onPrimary)
   let isText = () => typeof props.children === "string" || typeof props.children === "number"
@@ -32,20 +41,20 @@ export function Button(props: ButtonProps) {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        paddingTop: theme.spacing.sm,
-        paddingBottom: theme.spacing.sm,
-        paddingLeft: theme.spacing.md,
-        paddingRight: theme.spacing.md,
+        paddingTop: Math.round(theme.spacing.sm * densityScale()),
+        paddingBottom: Math.round(theme.spacing.sm * densityScale()),
+        paddingLeft: Math.round(theme.spacing.md * densityScale()),
+        paddingRight: Math.round(theme.spacing.md * densityScale()),
         ...props.layout,
       }}
       style={(s: PressState) => ({
         ...props.style,
-        backgroundColor: bg(),
+        backgroundColor: bg(s),
         borderRadius: radius(),
         // Always a number: a scale that flips from a number back to undefined
         // hits the transform decoder, which rejects null. Multiply so a
         // caller-set scale is preserved under the press feedback.
-        scale: (props.style?.scale ?? 1) * (s.pressed ? 0.97 : 1),
+        scale: (props.style?.scale ?? 1) * (s.pressed && policy.motion !== "none" ? 0.97 : 1),
       })}
     >
       <Show when={isText()} fallback={props.children}>

package/src/card.tsx

@@ -0,0 +1,48 @@
+import { Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import type { StyleProps } from "./types"
+
+export interface CardProps {
+  children?: any
+  // Optional heading rendered above the content.
+  title?: string
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+const RADIUS = 12
+
+// A themed surface container: a padded column box with a subtle border and
+// rounded corners, reading its colors from the theme so it recolors live.
+// Override any paint via style, spacing/sizing via layout.
+export function Card(props: CardProps) {
+  let bg = () => props.style?.backgroundColor ?? theme.color.surface
+  let border = () => props.style?.borderColor ?? theme.color.border
+  let width = () => props.style?.borderWidth ?? theme.borderWidth.sm
+  let radius = () => props.style?.borderRadius ?? RADIUS
+
+  return (
+    <view
+      ref={props.ref}
+      flexDirection="column"
+      gap={16}
+      padding={20}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+    >
+      <d-rect color={bg()} radius={radius()} />
+      <Show when={props.title != null}>
+        <text color={theme.color.text} fontSize={18} fontWeight={700}>
+          {props.title}
+        </text>
+      </Show>
+      {props.children}
+      <d-rect drawStyle="stroke" color={border()} strokeWidth={width()} radius={radius()} />
+    </view>
+  )
+}

package/src/checkbox.tsx

@@ -0,0 +1,65 @@
+import { createSignal, Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { Pressable } from "./pressable"
+import { theme } from "./theme"
+import { densityScale } from "./policy"
+import type { StyleProps } from "./types"
+
+export interface CheckboxProps {
+  // Controlled checked state. If omitted, the checkbox is uncontrolled.
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+const SIZE = 20
+
+// A checkbox. When checked, fills with primary and draws a checkmark; otherwise
+// shows an empty bordered box. Controlled via checked/onChange, or uncontrolled
+// via defaultChecked. Built on Pressable.
+export function Checkbox(props: CheckboxProps) {
+  let [internal, setInternal] = createSignal(props.defaultChecked ?? false)
+  let checked = () => (props.checked !== undefined ? props.checked : internal())
+
+  let toggle = () => {
+    let next = !checked()
+    if (props.checked === undefined) setInternal(next)
+    props.onChange?.(next)
+  }
+
+  let size = () => Math.round(SIZE * densityScale())
+  // The checkmark in box-relative fractions, so it scales with the density.
+  let check = () => {
+    let s = size()
+    return `M ${0.25 * s} ${0.5 * s} L ${0.45 * s} ${0.7 * s} L ${0.75 * s} ${0.3 * s}`
+  }
+
+  return (
+    <Pressable
+      onPress={toggle}
+      disabled={props.disabled}
+      layout={{ width: size(), height: size(), ...props.layout }}
+      style={{
+        backgroundColor: checked() ? theme.color.primary : theme.color.surface,
+        borderColor: theme.color.border,
+        borderWidth: theme.borderWidth.sm,
+        borderRadius: theme.radius.sm,
+        ...props.style,
+      }}
+    >
+      <Show when={checked()}>
+        <d-path
+          d={check()}
+          drawStyle="stroke"
+          color={theme.color.onPrimary}
+          strokeWidth={2}
+          strokeCap="round"
+          strokeJoin="round"
+        />
+      </Show>
+    </Pressable>
+  )
+}