@solidrt/components 0.0.18 → 0.0.20

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>
+  )
+}

package/src/text-input.tsx

@@ -1,14 +1,20 @@
 import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
-import { setFocus } from "@solidrt/core"
+import { measureText, setFocus } from "@solidrt/core"
 import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
+import { policy, densityScale } from "./policy"
 
 // Caret thickness. Shared so the drawn caret and the scroll offset's reserved
 // edge column cannot drift apart.
 const CARET_WIDTH = 1
 
+// Shaping width handed to the detached value/placeholder text: effectively
+// unbounded, so a single line never wraps. The viewport clips it and scrollX
+// slides it.
+const TEXT_SHAPE_WIDTH = 1e9
+
 export interface TextInputProps {
   value?: string
   defaultValue?: string
@@ -120,28 +126,29 @@ export function TextInput(props: TextInputProps) {
     if (blinkId != null) clearInterval(blinkId)
   })
 
-  // Style overrides fall back to theme defaults.
+  // Style overrides fall back to theme defaults. The border doubles as the
+  // focus ring: primary while focused, when the focus-ring policy asks for a
+  // visible indicator.
   let textColor = () => props.style?.color ?? theme.color.text
   let surfaceColor = () => props.style?.backgroundColor ?? theme.color.surface
-  let borderColor = () => props.style?.borderColor ?? theme.color.border
+  let borderColor = () =>
+    props.style?.borderColor ?? (focused() && policy.focusRing ? theme.color.primary : theme.color.border)
   let borderWidth = () => props.style?.borderWidth ?? theme.borderWidth.sm
   let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
 
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
   let showCaret = () => focused() && caretOn() && !showPlaceholder()
 
-  // The text is split at the caret into two nodes with a zero-size anchor view
-  // between them. Flow places the anchor at the caret x (the before-text width),
-  // and the caret is a detached d-rect inside it: detached nodes take no layout
-  // slot, so the anchor stays zero-width and the after-text is not shifted. The
-  // anchor sits at the row's vertical center (alignItems center, zero height),
-  // so the caret is offset up by half its height to straddle it. While the
-  // placeholder shows, value() is "" so the slices and the scroll offset are 0
-  // with no special case. The viewport node is the inner scroll container;
-  // createCaretScroll reads its laid-out width after layout, keeps the caret in
-  // view, and flushes the offset before paint.
-  let beforeCaret = () => value().slice(0, buffer.caret())
-  let afterCaret = () => value().slice(buffer.caret())
+  // Everything inside the viewport is detached: the value is one d-text shaped
+  // at an unbounded width and the caret a d-rect at the measured before-caret
+  // width, so typing, caret movement, blink and scroll never touch layout. The
+  // viewport carries an explicit height (detached content takes no layout
+  // slot) equal to the one-line paragraph height, which keeps the text where
+  // the old centered attached row sat. createCaretScroll keeps the caret in
+  // view and flushes the offset before paint; scrollX is a paint-time
+  // translate that also applies to detached children.
+  let rowHeight = () => Math.round(theme.text.body.size * theme.text.body.lineHeight)
+  let caretX = () => measureText(value().slice(0, buffer.caret()), { fontSize: theme.text.body.size }).width
   let scrollX = createCaretScroll(
     () => viewport,
     () => ({
@@ -156,11 +163,11 @@ export function TextInput(props: TextInputProps) {
   )
 
   let textStyle = (color: string) => ({
+    w: TEXT_SHAPE_WIDTH,
     fontSize: theme.text.body.size,
     lineHeight: theme.text.body.lineHeight,
     color,
     maxLines: 1,
-    flexShrink: 0,
   })
 
   return (
@@ -168,10 +175,10 @@ export function TextInput(props: TextInputProps) {
       ref={(n: { id: number }) => (node = n)}
       flexDirection="row"
       alignItems="center"
-      paddingLeft={theme.spacing.md}
-      paddingRight={theme.spacing.md}
-      paddingTop={theme.spacing.sm}
-      paddingBottom={theme.spacing.sm}
+      paddingLeft={Math.round(theme.spacing.md * densityScale())}
+      paddingRight={Math.round(theme.spacing.md * densityScale())}
+      paddingTop={Math.round(theme.spacing.sm * densityScale())}
+      paddingBottom={Math.round(theme.spacing.sm * densityScale())}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
@@ -193,28 +200,25 @@ export function TextInput(props: TextInputProps) {
       <view
         ref={(n: { id: number }) => (viewport = n)}
         flex={1}
-        flexDirection="row"
-        alignItems="center"
+        height={rowHeight()}
         overflow="hidden"
         scrollX={scrollX()}
       >
         {showPlaceholder() ? (
-          <text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</text>
+          <d-text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</d-text>
         ) : (
-          <view flexDirection="row" alignItems="center" flexShrink={0}>
-            <text {...textStyle(textColor())}>{beforeCaret()}</text>
+          <>
+            <d-text {...textStyle(textColor())}>{value()}</d-text>
             {showCaret() ? (
-              <view>
-                <d-rect
-                  color={textColor()}
-                  y={-theme.text.body.size / 2}
-                  w={CARET_WIDTH}
-                  h={theme.text.body.size}
-                />
-              </view>
+              <d-rect
+                color={textColor()}
+                x={caretX()}
+                y={(rowHeight() - theme.text.body.size) / 2}
+                w={CARET_WIDTH}
+                h={theme.text.body.size}
+              />
             ) : null}
-            <text {...textStyle(textColor())}>{afterCaret()}</text>
-          </view>
+          </>
         )}
       </view>
     </view>

package/src/theme.ts

@@ -1,3 +1,5 @@
+import { createStore } from "@solidrt/core"
+
 export type TextStyle = {
   size: number
   lineHeight: number
@@ -6,12 +8,24 @@ export type TextStyle = {
 export type Theme = {
   text: { body: TextStyle }
   color: {
+    // Window fill.
+    background: string
+    // Control/card fill.
+    surface: string
+    // Subtle raised/track fill (switch off-state, slider track, ...).
+    surfaceAlt: string
+    // Hover tint for surface-colored controls (non-touch interaction policies).
+    surfaceHover: string
     text: string
     textMuted: string
-    surface: string
     border: string
     primary: string
+    // Hover tint for primary-colored controls.
+    primaryHover: string
     onPrimary: string
+    // Validation / destructive.
+    danger: string
+    // Overlay dim behind modals.
     scrim: string
   }
   spacing: { sm: number; md: number }
@@ -19,29 +33,70 @@ export type Theme = {
   borderWidth: { sm: number }
 }
 
-export let theme: Theme = {
-  text: {
-    body: { size: 14, lineHeight: 1.5 },
-  },
+// Scheme-independent tokens, shared by both presets.
+const TEXT = { body: { size: 14, lineHeight: 1.5 } }
+const SPACING = { sm: 4, md: 8 }
+const RADIUS = { sm: 4 }
+const BORDER_WIDTH = { sm: 1 }
+
+export let darkTheme: Theme = {
+  text: TEXT,
   color: {
-    text: "#333",
-    textMuted: "rgba(0,0,0,0.4)",
-    surface: "#ccc",
-    border: "rgba(0,0,0,0.2)",
+    background: "#0b0f17",
+    surface: "#161b22",
+    surfaceAlt: "#21262d",
+    surfaceHover: "#262c34",
+    text: "#e6edf3",
+    textMuted: "rgba(230,237,243,0.5)",
+    border: "rgba(255,255,255,0.14)",
     primary: "#1f6feb",
+    primaryHover: "#388bfd",
     onPrimary: "#ffffff",
+    danger: "#f85149",
     scrim: "rgba(0,0,0,0.6)",
   },
-  spacing: { sm: 4, md: 8 },
-  radius: { sm: 4 },
-  borderWidth: { sm: 1 },
+  spacing: SPACING,
+  radius: RADIUS,
+  borderWidth: BORDER_WIDTH,
+}
+
+export let lightTheme: Theme = {
+  text: TEXT,
+  color: {
+    background: "#ffffff",
+    surface: "#f6f8fa",
+    surfaceAlt: "#eaeef2",
+    surfaceHover: "#e0e5eb",
+    text: "#1f2328",
+    textMuted: "rgba(31,35,40,0.5)",
+    border: "rgba(0,0,0,0.15)",
+    primary: "#1f6feb",
+    primaryHover: "#1a5fd0",
+    onPrimary: "#ffffff",
+    danger: "#cf222e",
+    scrim: "rgba(0,0,0,0.4)",
+  },
+  spacing: SPACING,
+  radius: RADIUS,
+  borderWidth: BORDER_WIDTH,
 }
 
+// Backed by a Solid store so reads are tracked: calling setTheme at runtime
+// recolors the live UI without remounting. Components read theme.* through
+// thunks/JSX expressions, so they pick this up with no call-site changes.
+let [theme, setThemeStore] = createStore<Theme>({ ...darkTheme })
+export { theme }
+
 type ThemePartial = { [K in keyof Theme]?: Partial<Theme[K]> }
 
+// Switch themes with a full preset (setTheme(lightTheme)) or apply a targeted
+// override (setTheme({ color: { primary: "#f00" } })). Merges one level deep per
+// category, matching the previous Object.assign behavior.
 export function setTheme(partial: ThemePartial) {
-  for (let key in partial) {
-    let k = key as keyof Theme
-    Object.assign(theme[k], partial[k])
-  }
-}
+  setThemeStore((s) => {
+    for (let key in partial) {
+      let k = key as keyof Theme
+      Object.assign(s[k], (partial as any)[k])
+    }
+  })
+}

package/src/tooltip.tsx

@@ -0,0 +1,112 @@
+import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env } from "@solidrt/core"
+import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { theme } from "./theme"
+import { policy, densityScale } from "./policy"
+
+export interface TooltipProps {
+  // The tooltip body. A string/number renders as themed text; anything else
+  // renders as-is.
+  content?: any
+  // The anchor content the tooltip attaches to.
+  children?: any
+  // Hover delay in milliseconds before showing.
+  delay?: number
+  // Which side of the anchor the bubble appears on.
+  placement?: "top" | "bottom"
+  layout?: LayoutProps
+}
+
+const DELAY = 500
+const GAP = 6
+// Minimum distance kept between the bubble and the window edges.
+const MARGIN = 4
+
+/**
+ * A hover-only affordance: under desktop/hybrid interaction policies, resting a
+ * mouse pointer on the wrapped content shows a bubble near it after a short
+ * delay. Under the touch policy it never shows, so tooltip content must stay
+ * non-essential. The bubble is portal-mounted at the window root and takes no
+ * pointer events; it hides on leave and on press.
+ */
+export function Tooltip(props: TooltipProps) {
+  let anchor: { id: number } | undefined
+  let [open, setOpen] = createSignal(false)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  let enter = (e: PointerEvent) => {
+    // The policy gates the behavior; the pointerType check keeps a finger from
+    // arming the tooltip in a hybrid session.
+    if (policy.interaction === "touch" || e.pointerType !== "mouse") return
+    clearTimeout(timer)
+    timer = setTimeout(() => setOpen(true), props.delay ?? DELAY)
+  }
+  let hide = () => {
+    clearTimeout(timer)
+    setOpen(false)
+  }
+  onCleanup(() => clearTimeout(timer))
+
+  // The bubble sits at the window root's origin and is placed with the x/y
+  // paint transforms, so repositioning never reflows. Measured after its first
+  // layout (parked offscreen until then), then pinned to the anchor's current
+  // box; recomputed each layout so it stays attached when the anchor moves
+  // (scrolling, resizes).
+  let Bubble = () => {
+    let bubble: { id: number } | undefined
+    let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
+    onLayout(() => {
+      let a = anchor && getBoundingBox(anchor)
+      let b = bubble && getBoundingBox(bubble)
+      if (!a || !b) return
+      let x = a.x + a.width / 2 - b.width / 2
+      x = Math.round(Math.min(Math.max(x, MARGIN), env.windowSize.width - b.width - MARGIN))
+      let y = Math.round(props.placement === "bottom" ? a.y + a.height + GAP : a.y - b.height - GAP)
+      let cur = pos()
+      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+    })
+    let isText = () => typeof props.content === "string" || typeof props.content === "number"
+    return createPortal(
+      <view
+        ref={(n: { id: number }) => (bubble = n)}
+        position="absolute"
+        top={0}
+        left={0}
+        x={pos()?.x ?? -10000}
+        y={pos()?.y ?? 0}
+        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())}
+        pointerEvents="none"
+      >
+        <d-rect color={theme.color.surfaceAlt} radius={theme.radius.sm} />
+        <Show when={isText()} fallback={props.content}>
+          <text color={theme.color.text} fontSize={theme.text.body.size} lineHeight={theme.text.body.lineHeight}>
+            {props.content}
+          </text>
+        </Show>
+        <d-rect
+          drawStyle="stroke"
+          color={theme.color.border}
+          strokeWidth={theme.borderWidth.sm}
+          radius={theme.radius.sm}
+        />
+      </view>,
+    )
+  }
+
+  return (
+    <view
+      ref={(n: { id: number }) => (anchor = n)}
+      onPointerEnter={enter}
+      onPointerLeave={hide}
+      onPointerDown={hide}
+      {...props.layout}
+    >
+      {props.children}
+      <Show when={open()}>
+        <Bubble />
+      </Show>
+    </view>
+  )
+}

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { Color, LayoutProps } from "@solidrt/core"
+import type { Color, Gradient, LayoutProps } from "@solidrt/core"
 
 // The split between layout and style follows one rule: layout properties feed
 // into Taffy and changing them triggers a relayout; style properties are
@@ -8,9 +8,9 @@ import type { Color, LayoutProps } from "@solidrt/core"
 // drawn as a stroke overlay (not part of the box model), and the transform is
 // applied at paint time, so both live here.
 export interface StyleProps {
-  color?: Color
-  backgroundColor?: Color
-  borderColor?: Color
+  color?: Color | Gradient
+  backgroundColor?: Color | Gradient
+  borderColor?: Color | Gradient
   borderWidth?: number
   borderRadius?: number | [number, number, number, number]
   x?: number