@solidrt/components 0.0.50 → 0.0.52

package/src/select.tsx

@@ -5,9 +5,11 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
-import type { Option, StyleProps } from "./types"
+import type { Option, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
+import { Icon } from "./icon"
 
-export interface SelectProps {
+export interface SelectProps extends TransitionProps {
   options: Option[]
   // Controlled selected value. If omitted, the select is uncontrolled.
   value?: unknown
@@ -20,9 +22,10 @@ export interface SelectProps {
   style?: StyleProps
 }
 
-const GAP = 4
+// Distance between the trigger and the dropdown.
+let gap = () => theme.spacing.sm
 // Minimum distance kept between the dropdown and the window edges.
-const MARGIN = 4
+let margin = () => theme.spacing.sm
 
 /**
  * A single-choice picker whose presentation forks on the interaction policy:
@@ -61,12 +64,15 @@ export function Select(props: SelectProps) {
         paddingLeft={space("md")}
         paddingRight={space("md")}
         {...press.handlers}
+        focusable
       >
         <d-rect
           color={
-            press.pressed() || (press.hovered() && policy.interaction !== "touch")
-              ? theme.color.surfaceHover
-              : "transparent"
+            press.pressed()
+              ? theme.color.overlayPressed
+              : (press.hovered() && policy.interaction !== "touch") || (press.focused() && policy.focusRing)
+                ? theme.color.overlayHover
+                : "transparent"
           }
         />
         <text {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
@@ -86,9 +92,9 @@ export function Select(props: SelectProps) {
       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 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 })
     })
@@ -147,21 +153,33 @@ export function Select(props: SelectProps) {
       </view>,
     )
 
-  let press = createPress({ onPress: () => setOpen(!open()) })
+  let press = createPress({
+    onPress: () => {
+      setOpen(!open())
+    },
+  })
   let style = () => ({
     borderColor: theme.color.border,
     borderWidth: theme.borderWidth.sm,
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface,
+    ...theme.components.select,
     ...props.style,
-    backgroundColor:
-      props.style?.backgroundColor ??
-      (press.hovered() && !props.disabled && policy.interaction !== "touch"
-        ? theme.color.surfaceHover
-        : theme.color.surface),
+    ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
   })
+  // Hover feedback: the theme overlay tint drawn over the trigger fill.
+  let overlay = () =>
+    press.hovered() && !props.disabled && policy.interaction !== "touch"
+      ? theme.color.overlayHover
+      : "transparent"
+
+
+  let split = () => splitTransition(props.transition)
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         trigger = n
@@ -171,8 +189,8 @@ export function Select(props: SelectProps) {
       alignItems="center"
       justifyContent="space-between"
       gap={theme.spacing.md}
-      paddingTop={space("sm")}
-      paddingBottom={space("sm")}
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
       paddingLeft={space("md")}
       paddingRight={space("md")}
       {...props.layout}
@@ -182,25 +200,34 @@ export function Select(props: SelectProps) {
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
+      focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <d-rect color={overlay()} radius={style().borderRadius} />
       <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={theme.icons.chevronDown}
+        fallback={
+          <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>
+        }
+      >
+        <Icon src={theme.icons.chevronDown!} size={12} color={theme.color.textMuted} />
+      </Show>
       <Show when={open()}>
         <Show when={policy.interaction === "touch"} fallback={<Dropdown />}>
           <Sheet />
@@ -209,6 +236,8 @@ export function Select(props: SelectProps) {
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style().borderColor ?? "transparent"}
           strokeWidth={style().borderWidth}
           radius={style().borderRadius}

package/src/slider.tsx

@@ -1,10 +1,12 @@
-import { arena, createSignal, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
-import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { arena, createMemo, createSignal, focusedNode, getBoundingBox, onLayout, onSettled, Show } from "@solidrt/core"
+import type { KeyEvent, LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
-import type { StyleProps } from "./types"
+import { policy } from "./policy"
+import { densityScale } from "./density"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SliderProps {
+export interface SliderProps extends TransitionProps {
   // Controlled value. If omitted, the slider is uncontrolled.
   value?: number
   defaultValue?: number
@@ -27,6 +29,8 @@ let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi :
 // A horizontal slider. The groove fills up to the thumb; dragging or pressing
 // the track sets the value from the pointer x. Moves arrive on the frozen down
 // 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.
 export function Slider(props: SliderProps) {
   let min = () => props.min ?? 0
@@ -95,14 +99,31 @@ export function Slider(props: SliderProps) {
     if (active === e.pointerId) endDrag()
   }
 
+  // focusedNode() is read first, unconditionally, so the memo depends on it
+  // even when the ref has not set `track` yet (see createPress).
+  let focused = createMemo(() => {
+    let id = focusedNode()
+    return id != null && id === track?.id
+  })
+  let handleKeyDown = (e: KeyEvent) => {
+    if (props.disabled) return
+    let dir = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : 0
+    if (dir === 0) return
+    e.stopPropagation()
+    let inc = props.step ?? (max() - min()) / 100
+    commit(clamp(value() + dir * inc, min(), max()))
+  }
+
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => (track = n)}
       repaintBoundary
       flexDirection="row"
       alignItems="center"
       height={height()}
-      width={200}
+      width={theme.size.slider}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
@@ -110,15 +131,20 @@ export function Slider(props: SliderProps) {
       rotate={props.style?.rotate}
       opacity={props.style?.opacity}
       pointerEvents={props.disabled ? "none" : "auto"}
+      focusable={!props.disabled}
       onPointerDown={handleDown}
       onPointerMove={handleMove}
       onPointerUp={handleUp}
+      onKeyDown={handleKeyDown}
     >
       <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} />
+          <Show when={focused() && policy.focusRing}>
+            <d-oval drawStyle="stroke" w={thumb()} h={thumb()} color={theme.color.ring} strokeWidth={theme.borderWidth.focus} />
+          </Show>
         </view>
       </view>
     </view>

package/src/spacing.ts

@@ -1,5 +1,5 @@
 import { theme, type Theme } from "./theme"
-import { densityScale } from "./policy"
+import { densityScale } from "./density"
 
 // Density-scaled spacing: a theme.spacing token multiplied by the density
 // policy's metric scale, rounded to whole pixels. Use it for gaps and paddings

package/src/spinner.tsx

@@ -2,9 +2,10 @@ import { createSignal, onFrame, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SpinnerProps {
+export interface SpinnerProps extends TransitionProps {
   // Overall diameter in pixels.
   size?: number
   // Arc stroke width in pixels.
@@ -24,7 +25,9 @@ const THICKNESS = 3
 export function Spinner(props: SpinnerProps) {
   let size = () => props.size ?? SIZE
   let thickness = () => props.thickness ?? THICKNESS
-  let color = () => props.style?.color ?? theme.color.primary
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.spinner, ...props.style })
+  let color = () => styled().color ?? theme.color.primary
   let speed = () => props.speed ?? 1
 
   // tick is in milliseconds (like performance.now()). The frame loop is mounted
@@ -51,13 +54,15 @@ export function Spinner(props: SpinnerProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       width={size()}
       height={size()}
       {...props.layout}
       rotate={angle()}
-      x={props.style?.x}
-      y={props.style?.y}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      opacity={styled().opacity}
     >
       <Show when={policy.motion !== "none"}>
         <Animate />

package/src/split-view.tsx

@@ -1,6 +1,7 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { policy } from "./policy"
+import { theme } from "./theme"
 
 export interface SplitViewProps {
   // The list (or primary) pane.
@@ -10,13 +11,11 @@ export interface SplitViewProps {
   // 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.
+  // Width of the list pane in two-pane mode; defaults to theme.size.splitViewList.
   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, single-pane shows one pane at a time per `showDetail`.
@@ -45,7 +44,7 @@ export function SplitView(props: SplitViewProps) {
       }
     >
       <view flexDirection="row" {...props.layout}>
-        <view width={props.listWidth ?? LIST_WIDTH} flexDirection="column">
+        <view width={props.listWidth ?? theme.size.splitViewList} flexDirection="column">
           {props.list}
         </view>
         <view flex={1} flexDirection="column">

package/src/switch.tsx

@@ -2,10 +2,12 @@ import { createSignal, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
-import type { StyleProps } from "./types"
+import { policy } from "./policy"
+import { densityScale } from "./density"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SwitchProps {
+export interface SwitchProps extends TransitionProps {
   // Controlled on/off. If omitted, the switch is uncontrolled.
   value?: boolean
   // Initial value for uncontrolled use.
@@ -43,11 +45,15 @@ export function Switch(props: SwitchProps) {
   let style = () => ({
     backgroundColor: on() ? theme.color.primary : theme.color.surfaceAlt,
     borderRadius: h() / 2,
+    ...theme.components.switch,
     ...props.style,
+    ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
   })
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
       width={w()}
@@ -59,6 +65,7 @@ export function Switch(props: SwitchProps) {
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
+      focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
       <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />