@solidrt/components 0.0.17 → 0.0.19

package/src/text-input.tsx

@@ -4,6 +4,7 @@ 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.
@@ -120,10 +121,13 @@ 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
 
@@ -134,6 +138,8 @@ export function TextInput(props: TextInputProps) {
   // 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 stays mounted while the caret blinks; only a detached d-view toggles
+  // inside it, so turning the caret on and off never relays the row. 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
@@ -168,10 +174,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}
@@ -203,16 +209,18 @@ export function TextInput(props: TextInputProps) {
         ) : (
           <view flexDirection="row" alignItems="center" flexShrink={0}>
             <text {...textStyle(textColor())}>{beforeCaret()}</text>
-            {showCaret() ? (
-              <view>
-                <d-rect
-                  color={textColor()}
-                  y={-theme.text.body.size / 2}
-                  w={CARET_WIDTH}
-                  h={theme.text.body.size}
-                />
-              </view>
-            ) : null}
+            <view>
+              {showCaret() ? (
+                <d-view>
+                  <d-rect
+                    color={textColor()}
+                    y={-theme.text.body.size / 2}
+                    w={CARET_WIDTH}
+                    h={theme.text.body.size}
+                  />
+                </d-view>
+              ) : null}
+            </view>
             <text {...textStyle(textColor())}>{afterCaret()}</text>
           </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