@solidrt/components 0.0.63 → 0.0.64

package/src/segmented-control.tsx

@@ -1,21 +1,22 @@
-import { createSignal, For, Show, getBoundingBox, onLayout, withAlpha } from "@solidrt/core"
+import { createSignal, For, Show, getBoundingBox, onCleanup, onLayout, withAlpha } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle, lightOnDark } from "./typography"
-import type { Option, StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
-import { partTransition, partTransitionEnd, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { Surface, facePaint } from "./surface"
+import type { ElevationLevel, Option, StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
+import { partTransition, partTransitionEnd, splitTransition, transitionEndFor } from "./types"
 import { colorFade, PressFeedback, travelMotion } from "./motion"
 
-export interface SegmentedControlProps
+export interface SegmentedControlProps<T = unknown>
   extends TransitionProps<TransitionViewProp | TransitionStyleProp | "indicator"> {
-  options: Option[]
+  options: Option<T>[]
   // Controlled selected value. If omitted, the control is uncontrolled.
-  value?: unknown
-  defaultValue?: unknown
-  onChange?: (value: unknown) => void
+  value?: T
+  defaultValue?: T
+  onChange?: (value: T) => void
   disabled?: boolean
   layout?: LayoutProps
   style?: StyleProps
@@ -28,16 +29,21 @@ const DIVIDER = 0
 
 // A single-choice row of equal-width segments, joined flush (the Material
 // style): only the control's outermost corners are rounded, interior segments
-// are square, and hairline dividers separate them. The active segment is one
-// indicator rect drawn under the labels that springs between segments - the
-// `indicator` transition entry retimes it. Controlled via value/onChange, or
-// uncontrolled via defaultValue. Hover tints inactive segments (non-touch
-// interaction policies only). Override the inactive fill via style, the
-// spacing/sizing via layout.
-export function SegmentedControl(props: SegmentedControlProps) {
-  let [internal, setInternal] = createSignal(props.defaultValue)
+// are square, and hairline dividers separate them. The track is a sunken
+// control face; the active segment is an accent face drawn under the labels
+// as detached rects (its fill and, standing raised, its shadows) that spring
+// between segments - the `indicator` transition entry retimes it; a press on
+// its segment sinks it. Controlled via value/onChange, or uncontrolled via
+// defaultValue. Hover tints inactive segments (non-touch interaction
+// policies only). Override the inactive fill via style, box the control
+// with borderColor/borderWidth, the indicator's level with style.elevation,
+// the spacing/sizing via layout.
+export function SegmentedControl<T>(props: SegmentedControlProps<T>) {
+  // The value overload: as far as TypeScript knows T could be a function,
+  // which createSignal would read as a compute; the cast picks the value form.
+  let [internal, setInternal] = createSignal<T | undefined>(props.defaultValue as Exclude<T | undefined, Function>)
   let value = () => (props.value !== undefined ? props.value : internal())
-  let select = (v: unknown) => {
+  let select = (v: T) => {
     if (props.value === undefined) setInternal(() => v)
     props.onChange?.(v)
   }
@@ -60,16 +66,24 @@ export function SegmentedControl(props: SegmentedControlProps) {
   }
 
   let idleFill = () => styled().backgroundColor ?? theme.color.surfaceAlt
+  let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
   let activeFill = () => (props.disabled ? theme.color.surface : theme.color.primary)
+  let elevation = (): ElevationLevel => styled().elevation ?? "raised"
   let label = (active: boolean) =>
     props.disabled ? theme.color.textMuted : active ? theme.color.onPrimary : theme.color.text
 
   // The indicator is positioned from measured segment boxes (control-relative
   // x and width per segment), so a selection change retargets it without a
   // reflow and unequal rounding never misaligns it. Remeasured each layout.
+  // Segment nodes are keyed by option value, not by the For index: a ref
+  // callback runs in the element's owned scope, where reading the index
+  // signal warns (STRICT_READ_UNTRACKED) and would go stale on a reorder.
   let root: { id: number } | undefined
-  let segs: ({ id: number } | undefined)[] = []
+  let segs = new Map<T, { id: number }>()
   let [boxes, setBoxes] = createSignal<{ x: number; w: number }[]>([])
+  // Which segment is pressed, so the indicator sinks under the finger on
+  // its own segment only.
+  let [pressedValue, setPressedValue] = createSignal<T | undefined>(undefined)
   // The indicator's travel spring is armed only after the first placement:
   // the declaration exists from mount, so without this the first measured
   // write would slide the indicator in from x 0. A timer, not the same
@@ -81,7 +95,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
     if (!r) return
     let next: { x: number; w: number }[] = []
     for (let i = 0; i < props.options.length; i++) {
-      let s = segs[i]
+      let s = segs.get(props.options[i]!.value)
       let b = s && getBoundingBox(s)
       if (!b) return
       next.push({ x: b.x - r.x, w: b.width })
@@ -92,6 +106,15 @@ export function SegmentedControl(props: SegmentedControlProps) {
   })
   let activeIndex = () => props.options.findIndex((o) => o.value === value())
   let indicator = () => boxes()[activeIndex()]
+  let indicatorPaint = () =>
+    facePaint({
+      role: "accent",
+      fill: activeFill(),
+      elevation: elevation(),
+      material: styled().material,
+      glow: indicator() && !props.disabled ? styled().glow : null,
+      pressed: pressedValue() !== undefined && pressedValue() === value(),
+    })
 
   let split = () => splitTransition(props.transition, ["indicator"])
   let indicatorTransition = () => {
@@ -116,23 +139,81 @@ export function SegmentedControl(props: SegmentedControlProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={idleFill()} radius={radius()} />
+      <Surface
+        role="control"
+        fill={idleFill()}
+        radius={radius()}
+        material={styled().material}
+        glow={null}
+        sunken
+        outline={hasBorder() ? { color: styled().borderColor ?? theme.color.border, width: styled().borderWidth ?? theme.borderWidth.sm } : null}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+      />
+      {/* The indicator's shadows ride two hidden rects in its own color under
+          its fill (a rect carries one shadow; opaque casters, see Surface),
+          all three on the same x/w so they travel as one. */}
+      <Show when={indicatorPaint().contactShadow}>
+        {(shadow) => (
+          <d-rect
+            transition={indicatorTransition()}
+            color={indicator() ? activeFill() : withAlpha(activeFill(), 0)}
+            x={indicator()?.x ?? 0}
+            w={indicator()?.w ?? 0}
+            radius={corners(activeIndex())}
+            shadow={shadow()}
+          />
+        )}
+      </Show>
+      <Show when={indicatorPaint().keyShadow}>
+        {(shadow) => (
+          <d-rect
+            transition={indicatorTransition()}
+            color={indicator() ? activeFill() : withAlpha(activeFill(), 0)}
+            x={indicator()?.x ?? 0}
+            w={indicator()?.w ?? 0}
+            radius={corners(activeIndex())}
+            shadow={shadow()}
+          />
+        )}
+      </Show>
       <d-rect
         transition={indicatorTransition()}
         onTransitionEnd={partTransitionEnd("indicator", "x", props.onTransitionEnd)}
-        color={indicator() ? activeFill() : withAlpha(activeFill(), 0)}
+        color={indicator() ? indicatorPaint().fill : withAlpha(activeFill(), 0)}
         x={indicator()?.x ?? 0}
         w={indicator()?.w ?? 0}
         radius={corners(activeIndex())}
+        shadow={indicatorPaint().glow}
       />
+      <Show when={indicatorPaint().bevel}>
+        {(bevel) => (
+          <d-rect
+            transition={indicatorTransition()}
+            drawStyle="stroke"
+            strokeWidth={1}
+            color={indicator() ? bevel() : withAlpha(activeFill(), 0)}
+            x={indicator()?.x ?? 0}
+            w={indicator()?.w ?? 0}
+            radius={corners(activeIndex())}
+          />
+        )}
+      </Show>
       <For each={props.options}>
         {(opt, i) => {
           let active = () => value() === opt.value
-          let press = createPress({ onPress: () => select(opt.value) })
+          let press = createPress({
+            onPress: () => select(opt.value),
+            onPointerDown: () => setPressedValue(() => opt.value),
+            onPointerUp: () => setPressedValue(undefined),
+          })
+          onCleanup(() => segs.delete(opt.value))
           return (
             <view
               ref={(n: { id: number }) => {
-                segs[i()] = n
+                segs.set(opt.value, n)
                 press.ref(n)
               }}
               repaintBoundary

package/src/select.tsx

@@ -6,16 +6,17 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { Option, StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { Icon } from "./icon"
 import { colorFade, popupFade, popupFadeOut, PressFeedback, travelMotion } from "./motion"
+import { Surface } from "./surface"
 
-export interface SelectProps extends TransitionProps {
-  options: Option[]
+export interface SelectProps<T = unknown> extends TransitionProps {
+  options: Option<T>[]
   // Controlled selected value. If omitted, the select is uncontrolled.
-  value?: unknown
-  defaultValue?: unknown
-  onChange?: (value: unknown) => void
+  value?: T
+  defaultValue?: T
+  onChange?: (value: T) => void
   // Shown in the trigger while nothing is selected.
   placeholder?: string
   disabled?: boolean
@@ -35,14 +36,16 @@ let margin = () => theme.spacing.sm
  * 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) {
+export function Select<T>(props: SelectProps<T>) {
   let trigger: { id: number } | undefined
   let [open, setOpen] = createSignal(false)
-  let [internal, setInternal] = createSignal(props.defaultValue)
+  // The value overload: as far as TypeScript knows T could be a function,
+  // which createSignal would read as a compute; the cast picks the value form.
+  let [internal, setInternal] = createSignal<T | undefined>(props.defaultValue as Exclude<T | undefined, Function>)
   let value = () => (props.value !== undefined ? props.value : internal())
   let selected = () => props.options.find((o) => o.value === value())
 
-  let choose = (v: unknown) => {
+  let choose = (v: T) => {
     setOpen(false)
     if (props.value === undefined) setInternal(() => v)
     props.onChange?.(v)
@@ -52,7 +55,7 @@ export function Select(props: SelectProps) {
 
   // One option row, shared by both presentations; only the vertical padding
   // differs (the sheet gets taller touch targets).
-  let OptionRow = (p: { option: Option; padY: number }) => {
+  let OptionRow = (p: { option: Option<T>; padY: number }) => {
     let press = createPress({ onPress: () => choose(p.option.value) })
     return (
       <view
@@ -80,6 +83,7 @@ export function Select(props: SelectProps) {
   // 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.
+  // Glows with theme.glow.overlay (the sheet sits on a scrim and does not).
   let Dropdown = () => {
     let menu: { id: number } | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
@@ -121,17 +125,18 @@ export function Select(props: SelectProps) {
           paddingTop={theme.spacing.sm}
           paddingBottom={theme.spacing.sm}
         >
-          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
-          <For each={props.options}>
-            {(o: Option) => <OptionRow option={o} padY={space("sm")} />}
-          </For>
-          <d-rect
-            drawStyle="stroke"
-            transition={colorFade()}
-            color={theme.color.border}
-            strokeWidth={theme.borderWidth.sm}
+          <Surface
+            role="overlay"
+            elevation={styled().elevation ?? "overlay"}
+            fill={theme.color.surface}
             radius={theme.radius.sm}
+            material={styled().material}
+            glow={styled().glow}
+            outline={{ color: theme.color.border, width: theme.borderWidth.sm }}
           />
+          <For each={props.options}>
+            {(o: Option<T>) => <OptionRow option={o} padY={space("sm")} />}
+          </For>
         </view>
       </view>,
     )
@@ -154,9 +159,9 @@ export function Select(props: SelectProps) {
           paddingTop={theme.spacing.md}
           paddingBottom={theme.spacing.md + env.safeArea.bottom}
         >
-          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
+          <Surface role="overlay" fill={theme.color.surface} radius={theme.radius.sm} material={styled().material} glow={null} />
           <For each={props.options}>
-            {(o: Option) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
+            {(o: Option<T>) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
           </For>
         </view>
       </view>,
@@ -167,6 +172,8 @@ export function Select(props: SelectProps) {
       setOpen(!open())
     },
   })
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.select, ...props.style })
   let style = () => ({
     borderColor: theme.color.border,
     borderWidth: theme.borderWidth.sm,
@@ -213,11 +220,20 @@ export function Select(props: SelectProps) {
       focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
-      <PressFeedback
+      <Surface
+        role="control"
+        elevation={style().elevation ?? "flat"}
+        fill={style().backgroundColor ?? "transparent"}
+        radius={style().borderRadius}
+        material={style().material}
+        glow={style().glow}
         pressed={press.pressed() && !props.disabled}
         hovered={press.hovered() && !props.disabled && policy.interaction !== "touch"}
-        radius={style().borderRadius}
+        outline={(style().borderWidth ?? 0) > 0 ? { color: style().borderColor ?? "transparent", width: style().borderWidth! } : null}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
       />
       <Show
         when={selected()}
@@ -250,16 +266,6 @@ export function Select(props: SelectProps) {
           <Sheet />
         </Show>
       </Show>
-      <Show when={(style().borderWidth ?? 0) > 0}>
-        <d-rect
-          drawStyle="stroke"
-          transition={withTransitionDefaults(split().border, colorFade())}
-          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
-          color={style().borderColor ?? "transparent"}
-          strokeWidth={style().borderWidth}
-          radius={style().borderRadius}
-        />
-      </Show>
     </view>
   )
 }

package/src/slider.tsx

@@ -1,8 +1,9 @@
-import { arena, createMemo, createSignal, focusedNode, getBoundingBox, onLayout, onSettled, Show } from "@solidrt/core"
+import { arena, createMemo, createSignal, focusedNode, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
 import type { KeyEvent, LayoutProps, PointerEvent } from "@solidrt/core"
-import { theme } from "./theme"
+import { pill, theme } from "./theme"
 import { policy } from "./policy"
 import { densityScale } from "./density"
+import { Surface, facePaint } from "./surface"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 import { colorFade } from "./motion"
@@ -32,7 +33,13 @@ let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi :
 // path, so a drag keeps updating when the pointer drifts off the track.
 // Focused (spatial nav), arrow keys step the value (by `step`, else 1% of the
 // range) and the thumb draws the focus ring under the focusRing policy.
-// Controlled via value/onChange, or uncontrolled via defaultValue.
+// Controlled via value/onChange, or uncontrolled via defaultValue. The
+// groove is a sunken control face (surfaceAlt), the fill an accent face
+// (primary, with the accent material's glow) drawn as a detached rect so a
+// drag never reflows, the thumb a raised control face (theme.color.thumb,
+// else primary; style.elevation sets its level) that sinks while dragged;
+// groove and thumb take pill(), round by default and square under
+// radius.full 0.
 export function Slider(props: SliderProps) {
   let min = () => props.min ?? 0
   let max = () => props.max ?? 100
@@ -41,10 +48,22 @@ export function Slider(props: SliderProps) {
 
   let track: { id: number } | undefined
   let active: number | null = null
+  let [dragging, setDragging] = createSignal(false)
 
   let height = () => Math.round(HEIGHT * densityScale())
   let thumb = () => Math.round(THUMB * densityScale())
 
+  // Theme-level per-component overrides merged under the instance style:
+  // backgroundColor is the groove, color the fill, borderRadius the groove's
+  // (ProgressBar's reading of the same keys), and the border boxes the groove.
+  let styled = () => ({ ...theme.components.slider, ...props.style })
+  let grooveColor = () => styled().backgroundColor ?? theme.color.surfaceAlt
+  let fillColor = () => styled().color ?? theme.color.primary
+  let grooveRadius = () => styled().borderRadius ?? pill(GROOVE)
+  let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
+  let fillPaint = () => facePaint({ role: "accent", fill: fillColor(), material: styled().material, glow: props.disabled ? null : styled().glow })
+  let split = () => splitTransition(props.transition)
+
   let pct = () => clamp(((value() - min()) / (max() - min())) * 100, 0, 100)
 
   // Measured groove width in pixels. The fill and thumb are driven off this
@@ -63,11 +82,16 @@ export function Slider(props: SliderProps) {
     props.onChange?.(v)
   }
 
-  let setFromClientX = (clientX: number) => {
+  // The handlers sit on the track, and localX is exact in the track's own
+  // frame even after a drag drifts off it (frozen down path), so no origin
+  // lookup is needed. clientX against getBoundingBox would mix frames: the
+  // box's x/y are relative to the nearest positioned ancestor, not the
+  // window clientX lives in.
+  let setFromLocalX = (localX: 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 width = getBoundingBox(track)?.width ?? 0
+    if (width === 0) return
+    let f = clamp(localX / 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()))
@@ -78,6 +102,7 @@ export function Slider(props: SliderProps) {
       arena.release(active, owner)
       active = null
     }
+    setDragging(false)
   }
   let owner = { cancel: endDrag }
 
@@ -90,11 +115,12 @@ export function Slider(props: SliderProps) {
     // outright so an ancestor scroller's pan cannot take the pointer over.
     arena.steal(e.pointerId, owner)
     active = e.pointerId
-    setFromClientX(e.clientX)
+    setDragging(true)
+    setFromLocalX(e.localX)
   }
   let handleMove = (e: PointerEvent) => {
     if (active !== e.pointerId) return
-    setFromClientX(e.clientX)
+    setFromLocalX(e.localX)
   }
   let handleUp = (e: PointerEvent) => {
     if (active === e.pointerId) endDrag()
@@ -117,7 +143,7 @@ export function Slider(props: SliderProps) {
 
   return (
     <view
-      transition={splitTransition(props.transition).root}
+      transition={split().root}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => (track = n)}
       repaintBoundary
@@ -126,11 +152,11 @@ export function Slider(props: SliderProps) {
       height={height()}
       width={theme.size.slider}
       {...props.layout}
-      x={props.style?.x}
-      y={props.style?.y}
-      scale={props.style?.scale}
-      rotate={props.style?.rotate}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      rotate={styled().rotate}
+      opacity={styled().opacity}
       pointerEvents={props.disabled ? "none" : "auto"}
       focusable={!props.disabled}
       onPointerDown={handleDown}
@@ -142,13 +168,39 @@ export function Slider(props: SliderProps) {
           get a transition - they track the drag 1:1, and a spring would
           rubber-band it. */}
       <view ref={(n: { id: number }) => (groove = n)} position="relative" flex={1} height={GROOVE}>
-        <d-rect transition={colorFade()} color={theme.color.surfaceAlt} radius={GROOVE / 2} />
-        <d-rect transition={colorFade()} 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 transition={colorFade()} w={thumb()} h={thumb()} color={theme.color.primary} />
-          <Show when={focused() && policy.focusRing}>
-            <d-oval drawStyle="stroke" w={thumb()} h={thumb()} color={theme.color.ring} strokeWidth={theme.borderWidth.focus} />
-          </Show>
+        <Surface
+          role="control"
+          fill={grooveColor()}
+          radius={grooveRadius()}
+          material={styled().material}
+          glow={null}
+          sunken
+          outline={hasBorder() ? { color: styled().borderColor ?? theme.color.border, width: styled().borderWidth ?? theme.borderWidth.sm } : null}
+          fillTransition={split().background}
+          onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+          outlineTransition={split().border}
+          onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+        />
+        <d-rect
+          transition={colorFade()}
+          color={fillPaint().fill}
+          w={fillPx()}
+          h={GROOVE}
+          radius={grooveRadius()}
+          shadow={fillPaint().glow}
+        />
+        <view position="absolute" left={0} top={(GROOVE - thumb()) / 2} width={thumb()} height={thumb()} x={fillPx() - thumb() / 2}>
+          <Surface
+            role="control"
+            elevation={styled().elevation ?? "raised"}
+            fill={theme.color.thumb ?? theme.color.primary}
+            radius={pill(thumb())}
+            material={styled().material}
+            glow={null}
+            pressed={dragging()}
+            tint={false}
+            outline={focused() && policy.focusRing ? { color: theme.color.ring, width: theme.borderWidth.focus } : null}
+          />
         </view>
       </view>
     </view>