@solidrt/components 0.0.18 → 0.0.19

package/src/radio.tsx

@@ -0,0 +1,100 @@
+import { createSignal, createContext, useContext, 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"
+
+// Shared selection state for a group. Created and consumed within this module, so
+// RadioGroup/Radio are a self-contained pair, not a cross-component dependency.
+type RadioContextValue = {
+  value: () => unknown
+  select: (value: unknown) => void
+  disabled: () => boolean
+}
+
+let RadioContext = createContext<RadioContextValue>()
+
+export interface RadioGroupProps {
+  // Controlled selected value. If omitted, the group is uncontrolled.
+  value?: unknown
+  defaultValue?: unknown
+  onChange?: (value: unknown) => void
+  disabled?: boolean
+  layout?: LayoutProps
+  children?: any
+}
+
+// Owns the selection for its Radio children and shares it through context.
+export function RadioGroup(props: RadioGroupProps) {
+  let [internal, setInternal] = createSignal(props.defaultValue)
+  let value = () => (props.value !== undefined ? props.value : internal())
+
+  let select = (v: unknown) => {
+    if (props.value === undefined) setInternal(() => v)
+    props.onChange?.(v)
+  }
+
+  let ctx: RadioContextValue = {
+    value,
+    select,
+    disabled: () => !!props.disabled,
+  }
+
+  return (
+    <RadioContext value={ctx}>
+      <view flexDirection="column" gap={theme.spacing.md} {...props.layout}>
+        {props.children}
+      </view>
+    </RadioContext>
+  )
+}
+
+export interface RadioProps {
+  // This option's value; selecting it makes it the group's value.
+  value: unknown
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+  // A string/number renders as a themed label beside the ring; anything else
+  // renders as-is.
+  children?: any
+}
+
+const RING = 20
+
+// A single option in a RadioGroup: a ring with an inner dot when selected.
+export function Radio(props: RadioProps) {
+  // useContext throws ContextNotFoundError if a Radio is used outside a
+  // RadioGroup (default-less context), so ctx is always present here.
+  let ctx = useContext(RadioContext)
+  let selected = () => ctx.value() === props.value
+  let disabled = () => props.disabled || ctx.disabled()
+  let ringColor = () => (selected() ? theme.color.primary : theme.color.border)
+  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+
+  let ring = () => Math.round(RING * densityScale())
+  // Inner dot inset as a fraction of the ring, so it scales with the density.
+  let inset = () => ring() * 0.3
+
+  return (
+    <Pressable
+      onPress={() => ctx.select(props.value)}
+      disabled={disabled()}
+      layout={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.md, ...props.layout }}
+      style={props.style}
+    >
+      <view width={ring()} height={ring()}>
+        <d-oval x={1} y={1} w={ring() - 2} h={ring() - 2} drawStyle="stroke" color={ringColor()} strokeWidth={2} />
+        <Show when={selected()}>
+          <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} color={theme.color.primary} />
+        </Show>
+      </view>
+      <Show when={isText()} fallback={props.children}>
+        <text color={theme.color.text} fontSize={theme.text.body.size} lineHeight={theme.text.body.lineHeight}>
+          {props.children}
+        </text>
+      </Show>
+    </Pressable>
+  )
+}

package/src/scroll-view.tsx

@@ -45,7 +45,11 @@ export function ScrollView(props: ScrollViewProps) {
     last = null
   }
   let onWheel = (e: WheelEvent) => {
-    scroll.scrollBy(e.deltaX, e.deltaY)
+    // A plain mouse wheel only emits deltaY. On a horizontal scroller, route that
+    // vertical delta to the x axis so the wheel still scrolls it (trackpads that
+    // emit deltaX take precedence).
+    if (props.horizontal) scroll.scrollBy(e.deltaX || e.deltaY, 0)
+    else scroll.scrollBy(e.deltaX, e.deltaY)
   }
 
   let direction = () => (props.horizontal ? "row" : "column")

package/src/select.tsx

@@ -0,0 +1,203 @@
+import { createSignal, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { Pressable, type PressState } from "./pressable"
+import { theme } from "./theme"
+import { policy, densityScale } from "./policy"
+import type { StyleProps } from "./types"
+
+export interface SelectOption {
+  value: unknown
+  label: string
+}
+
+export interface SelectProps {
+  options: SelectOption[]
+  // Controlled selected value. If omitted, the select is uncontrolled.
+  value?: unknown
+  defaultValue?: unknown
+  onChange?: (value: unknown) => void
+  // Shown in the trigger while nothing is selected.
+  placeholder?: string
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+const GAP = 4
+// Minimum distance kept between the dropdown and the window edges.
+const MARGIN = 4
+
+/**
+ * A single-choice picker whose presentation forks on the interaction policy:
+ * desktop/hybrid opens an anchored dropdown under the trigger (flipping above
+ * when there is no room), touch opens a bottom sheet over a scrim. Same
+ * value/onChange contract either way; pressing outside closes without a change.
+ * The option list is not scrollable yet, so keep it short.
+ */
+export function Select(props: SelectProps) {
+  let trigger: { id: number } | undefined
+  let [open, setOpen] = createSignal(false)
+  let [internal, setInternal] = createSignal(props.defaultValue)
+  let value = () => (props.value !== undefined ? props.value : internal())
+  let selected = () => props.options.find((o) => o.value === value())
+
+  let choose = (v: unknown) => {
+    setOpen(false)
+    if (props.value === undefined) setInternal(() => v)
+    props.onChange?.(v)
+  }
+
+  let bodyText = (color: string) => ({
+    fontSize: theme.text.body.size,
+    lineHeight: theme.text.body.lineHeight,
+    color,
+    maxLines: 1,
+  })
+
+  // One option row, shared by both presentations; only the vertical padding
+  // differs (the sheet gets taller touch targets).
+  let OptionRow = (p: { option: SelectOption; padY: number }) => (
+    <Pressable
+      onPress={() => choose(p.option.value)}
+      layout={{
+        flexDirection: "row",
+        alignItems: "center",
+        paddingTop: p.padY,
+        paddingBottom: p.padY,
+        paddingLeft: Math.round(theme.spacing.md * densityScale()),
+        paddingRight: Math.round(theme.spacing.md * densityScale()),
+      }}
+      style={(s: PressState) => ({
+        backgroundColor:
+          s.pressed || (s.hovered && policy.interaction !== "touch") ? theme.color.surfaceHover : "transparent",
+      })}
+    >
+      <text {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
+    </Pressable>
+  )
+
+  // Anchored under the trigger, sized at least as wide as it. Positioned like
+  // Tooltip: portal at the window root, pinned at 0,0 and moved with the x/y
+  // paint transforms after measuring, so tracking the anchor never reflows.
+  let Dropdown = () => {
+    let menu: { id: number } | undefined
+    let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
+    let [minWidth, setMinWidth] = createSignal(0)
+    onLayout(() => {
+      let a = trigger && getBoundingBox(trigger)
+      let b = menu && getBoundingBox(menu)
+      if (!a || !b) return
+      if (a.width !== minWidth()) setMinWidth(a.width)
+      let x = Math.round(Math.min(Math.max(a.x, MARGIN), env.windowSize.width - b.width - MARGIN))
+      let below = a.y + a.height + GAP
+      let y = Math.round(below + b.height > env.windowSize.height - MARGIN ? a.y - b.height - GAP : below)
+      let cur = pos()
+      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+    })
+    return createPortal(
+      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+        <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)} />
+        <view
+          ref={(n: { id: number }) => (menu = n)}
+          position="absolute"
+          top={0}
+          left={0}
+          x={pos()?.x ?? -10000}
+          y={pos()?.y ?? 0}
+          minWidth={minWidth() || undefined}
+          flexDirection="column"
+          paddingTop={theme.spacing.sm}
+          paddingBottom={theme.spacing.sm}
+        >
+          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <For each={props.options}>
+            {(o: SelectOption) => <OptionRow option={o} padY={Math.round(theme.spacing.sm * densityScale())} />}
+          </For>
+          <d-rect
+            drawStyle="stroke"
+            color={theme.color.border}
+            strokeWidth={theme.borderWidth.sm}
+            radius={theme.radius.sm}
+          />
+        </view>
+      </view>,
+    )
+  }
+
+  // Bottom sheet over a scrim; the content is a sibling of the scrim (Modal's
+  // trick) so pressing an option never has the scrim on its hit path.
+  let Sheet = () =>
+    createPortal(
+      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+        <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
+          <d-rect color={theme.color.scrim} />
+        </view>
+        <view
+          position="absolute"
+          left={0}
+          right={0}
+          bottom={0}
+          flexDirection="column"
+          paddingTop={theme.spacing.md}
+          paddingBottom={theme.spacing.md + env.safeArea.bottom}
+        >
+          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <For each={props.options}>
+            {(o: SelectOption) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
+          </For>
+        </view>
+      </view>,
+    )
+
+  return (
+    <Pressable
+      ref={(n) => (trigger = n)}
+      onPress={() => setOpen(!open())}
+      disabled={props.disabled}
+      layout={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 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) => ({
+        borderColor: theme.color.border,
+        borderWidth: theme.borderWidth.sm,
+        borderRadius: theme.radius.sm,
+        ...props.style,
+        backgroundColor:
+          props.style?.backgroundColor ??
+          (s.hovered && !props.disabled && policy.interaction !== "touch"
+            ? theme.color.surfaceHover
+            : theme.color.surface),
+      })}
+    >
+      <Show
+        when={selected()}
+        fallback={<text {...bodyText(theme.color.textMuted)}>{props.placeholder ?? ""}</text>}
+      >
+        <text {...bodyText(props.disabled ? theme.color.textMuted : theme.color.text)}>{selected()!.label}</text>
+      </Show>
+      <view width={12} height={8}>
+        <d-path
+          d="M 2 2 L 6 6 L 10 2"
+          drawStyle="stroke"
+          color={theme.color.textMuted}
+          strokeWidth={2}
+          strokeCap="round"
+          strokeJoin="round"
+        />
+      </view>
+      <Show when={open()}>
+        <Show when={policy.interaction === "touch"} fallback={<Dropdown />}>
+          <Sheet />
+        </Show>
+      </Show>
+    </Pressable>
+  )
+}

package/src/slider.tsx

@@ -0,0 +1,116 @@
+import { createSignal } from "@solidjs/signals"
+import { getBoundingBox, onLayout, setPointerCapture } from "@solidrt/core"
+import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { theme } from "./theme"
+import { densityScale } from "./policy"
+import type { StyleProps } from "./types"
+
+export interface SliderProps {
+  // Controlled value. If omitted, the slider is uncontrolled.
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  // Snap increment. Omit for continuous.
+  step?: number
+  onChange?: (value: number) => void
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+const HEIGHT = 24
+const GROOVE = 4
+const THUMB = 20
+
+let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi : x)
+
+// A horizontal slider. The groove fills up to the thumb; dragging or pressing
+// the track sets the value from the pointer x. No pointer capture, so a drag
+// that leaves the track stops updating. Controlled via value/onChange, or
+// uncontrolled via defaultValue.
+export function Slider(props: SliderProps) {
+  let min = () => props.min ?? 0
+  let max = () => props.max ?? 100
+  let [internal, setInternal] = createSignal(props.defaultValue ?? props.min ?? 0)
+  let value = () => (props.value !== undefined ? props.value : internal())
+
+  let track: { id: number } | undefined
+  let dragging = false
+
+  let height = () => Math.round(HEIGHT * densityScale())
+  let thumb = () => Math.round(THUMB * densityScale())
+
+  let pct = () => clamp(((value() - min()) / (max() - min())) * 100, 0, 100)
+
+  // Measured groove width in pixels. The fill and thumb are driven off this
+  // rather than a percentage `width`/`left`, so dragging repaints (d-rect `w`,
+  // thumb `x` transform) instead of reflowing taffy every move. Refreshed each
+  // layout so it tracks resizes.
+  let groove: { id: number } | undefined
+  let [grooveWidth, setGrooveWidth] = createSignal(0)
+  onLayout(() => {
+    if (groove) setGrooveWidth(getBoundingBox(groove)?.width ?? 0)
+  })
+  let fillPx = () => (pct() / 100) * grooveWidth()
+
+  let commit = (v: number) => {
+    if (props.value === undefined) setInternal(v)
+    props.onChange?.(v)
+  }
+
+  let setFromClientX = (clientX: number) => {
+    if (!track) return
+    let box = getBoundingBox(track)
+    if (!box || box.width === 0) return
+    let f = clamp((clientX - box.x) / box.width, 0, 1)
+    let raw = min() + f * (max() - min())
+    if (props.step) raw = Math.round(raw / props.step) * props.step
+    commit(clamp(raw, min(), max()))
+  }
+
+  let handleDown = (e: PointerEvent) => {
+    if (props.disabled) return
+    // Claim the drag: stopPropagation keeps an ancestor scroller from starting a
+    // scroll, and pointer capture routes moves/up here even when the pointer
+    // drifts off the track.
+    e.stopPropagation()
+    if (track) setPointerCapture(track.id, e.pointerId)
+    dragging = true
+    setFromClientX(e.clientX)
+  }
+  let handleMove = (e: PointerEvent) => {
+    if (!dragging) return
+    setFromClientX(e.clientX)
+  }
+  let handleUp = () => {
+    dragging = false
+  }
+
+  return (
+    <view
+      ref={(n: { id: number }) => (track = n)}
+      flexDirection="row"
+      alignItems="center"
+      height={height()}
+      width={200}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      pointerEvents={props.disabled ? "none" : "auto"}
+      onPointerDown={handleDown}
+      onPointerMove={handleMove}
+      onPointerUp={handleUp}
+    >
+      <view ref={(n: { id: number }) => (groove = n)} position="relative" flex={1} height={GROOVE}>
+        <d-rect color={theme.color.surfaceAlt} radius={GROOVE / 2} />
+        <d-rect color={theme.color.primary} w={fillPx()} h={GROOVE} radius={GROOVE / 2} />
+        <view position="absolute" left={0} top={(GROOVE - thumb()) / 2} x={fillPx() - thumb() / 2}>
+          <d-oval w={thumb()} h={thumb()} color={theme.color.primary} />
+        </view>
+      </view>
+    </view>
+  )
+}

package/src/spinner.tsx

@@ -0,0 +1,74 @@
+import { createSignal } from "@solidjs/signals"
+import { onFrame, Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import { policy } from "./policy"
+import type { StyleProps } from "./types"
+
+export interface SpinnerProps {
+  // Overall diameter in pixels.
+  size?: number
+  // Arc stroke width in pixels.
+  thickness?: number
+  // Revolutions per second.
+  speed?: number
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+const SIZE = 24
+const THICKNESS = 3
+
+// An indeterminate spinner: a 270-degree arc that rotates continuously, driven
+// by core onFrame (so it participates in demand-driven rendering and stops when
+// unmounted). Color comes from the theme; override via style.color.
+export function Spinner(props: SpinnerProps) {
+  let size = () => props.size ?? SIZE
+  let thickness = () => props.thickness ?? THICKNESS
+  let color = () => props.style?.color ?? theme.color.primary
+  let speed = () => props.speed ?? 1
+
+  // tick is in milliseconds (like performance.now()). The frame loop is mounted
+  // through the <Show> below so the motion policy can unmount it: onFrame holds
+  // a standing frame request while registered, so a check inside the callback
+  // would still keep the renderer free-running. Under "none" the arc freezes;
+  // "reduced" halves the spin.
+  let [angle, setAngle] = createSignal(0)
+  let Animate = () => {
+    onFrame((tick) =>
+      setAngle((tick / 1000) * speed() * (policy.motion === "reduced" ? 0.5 : 1) * Math.PI * 2),
+    )
+    return null
+  }
+
+  // A 270-degree arc starting at the top, sweeping clockwise. Coordinates are in
+  // the parent box space, so the wrapping view is sized to match.
+  let path = () => {
+    let s = size()
+    let r = (s - thickness()) / 2
+    let c = s / 2
+    return `M ${c} ${c - r} A ${r} ${r} 0 1 1 ${c - r} ${c}`
+  }
+
+  return (
+    <view
+      width={size()}
+      height={size()}
+      {...props.layout}
+      rotate={angle()}
+      x={props.style?.x}
+      y={props.style?.y}
+    >
+      <Show when={policy.motion !== "none"}>
+        <Animate />
+      </Show>
+      <d-path
+        d={path()}
+        drawStyle="stroke"
+        color={color()}
+        strokeWidth={thickness()}
+        strokeCap="round"
+      />
+    </view>
+  )
+}

package/src/split-view.tsx

@@ -0,0 +1,54 @@
+import { Show } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { theme } from "./theme"
+import { policy } from "./policy"
+
+export interface SplitViewProps {
+  // The list (or primary) pane.
+  list?: any
+  // The detail (or secondary) pane.
+  detail?: any
+  // Single-pane mode only: show the detail instead of the list. The app owns
+  // this navigation state; two-pane mode ignores it.
+  showDetail?: boolean
+  // Width of the list pane in two-pane mode.
+  listWidth?: number
+  layout?: LayoutProps
+}
+
+const LIST_WIDTH = 320
+
+/**
+ * A list-detail container driven by the layout policy: two-pane shows the list
+ * beside the detail with a hairline between, single-pane shows one pane at a
+ * time per `showDetail`. Keep pane state (selection, scroll) in the app, not
+ * in the panes: crossing a breakpoint re-arranges and can remount them.
+ * SplitView draws no chrome; a back affordance in the single-pane detail is
+ * the app's to render (fork on policy.layout, as the shell example does).
+ */
+export function SplitView(props: SplitViewProps) {
+  return (
+    <Show
+      when={policy.layout === "twoPane"}
+      fallback={
+        <view flexDirection="column" {...props.layout}>
+          <Show when={props.showDetail} fallback={props.list}>
+            {props.detail}
+          </Show>
+        </view>
+      }
+    >
+      <view flexDirection="row" {...props.layout}>
+        <view width={props.listWidth ?? LIST_WIDTH} flexDirection="column">
+          {props.list}
+        </view>
+        <view width={1}>
+          <d-rect color={theme.color.border} />
+        </view>
+        <view flex={1} flexDirection="column">
+          {props.detail}
+        </view>
+      </view>
+    </Show>
+  )
+}

package/src/switch.tsx

@@ -0,0 +1,58 @@
+import { createSignal } from "@solidjs/signals"
+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 SwitchProps {
+  // Controlled on/off. If omitted, the switch is uncontrolled.
+  value?: boolean
+  // Initial value for uncontrolled use.
+  defaultValue?: boolean
+  onChange?: (value: boolean) => void
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// Designed (comfortable-density) metrics; w/h below scale them by the density
+// policy.
+const W = 44
+const H = 24
+const PAD = 2
+
+// A toggle. Track fills with primary when on, surfaceAlt when off; the thumb
+// slides across. Controlled via value/onChange, or uncontrolled via
+// defaultValue. Built on Pressable, so disabled takes no pointer events.
+export function Switch(props: SwitchProps) {
+  let [internal, setInternal] = createSignal(props.defaultValue ?? false)
+  let on = () => (props.value !== undefined ? props.value : internal())
+
+  let toggle = () => {
+    let next = !on()
+    if (props.value === undefined) setInternal(next)
+    props.onChange?.(next)
+  }
+
+  let w = () => Math.round(W * densityScale())
+  let h = () => Math.round(H * densityScale())
+  let thumb = () => h() - PAD * 2
+
+  return (
+    <Pressable
+      onPress={toggle}
+      disabled={props.disabled}
+      layout={{ width: w(), height: h(), ...props.layout }}
+      style={{
+        backgroundColor: on() ? theme.color.primary : theme.color.surfaceAlt,
+        borderRadius: h() / 2,
+        ...props.style,
+      }}
+    >
+      <view position="absolute" top={PAD} left={PAD} x={on() ? w() - thumb() - PAD * 2 : 0}>
+        <d-oval w={thumb()} h={thumb()} color={theme.color.onPrimary} />
+      </view>
+    </Pressable>
+  )
+}