@solidrt/components 0.0.2 → 0.0.4

package/README.md

@@ -8,6 +8,10 @@ A collection of components for [SolidRT](https://github.com/wellawaretech/solidr
 bun add @solidrt/components
 ```
 
+## Theming
+
+Appearance (colors, spacing, border, font size) is controlled via the shared theme. Call `setTheme` from `@solidrt/components` to override defaults.
+
 ## Components
 
 ### SafeArea
@@ -19,7 +23,7 @@ import { SafeArea } from "@solidrt/components"
 
 function App() {
   return (
-    <window flexDirection="column">
+    <window>
       <SafeArea>
         <text>Content clear of system UI</text>
       </SafeArea>
@@ -36,6 +40,44 @@ function App() {
 | `minimum`  | `number`                                     | `0`                 | Minimum padding applied even if the safe area inset is smaller |
 | `children` | `any`                                        | -                   | Content to render inside the safe area                         |
 
+### TextInput
+
+Single-line text input.
+
+```jsx
+import { TextInput } from "@solidrt/components"
+import { createSignal } from "@solidjs/signals"
+
+function NameField() {
+  let [name, setName] = createSignal("")
+  return (
+    <TextInput
+      value={name()}
+      onInput={setName}
+      onSubmit={(v) => console.log("submitted", v)}
+      placeholder="Your name"
+      width={240}
+    />
+  )
+}
+```
+
+**Props**
+
+| Prop           | Type                       | Default | Description                                                  |
+| -------------- | -------------------------- | ------- | ------------------------------------------------------------ |
+| `value`        | `string`                   | -       | Controlled value. If omitted, the component is uncontrolled. |
+| `defaultValue` | `string`                   | `""`    | Initial value for uncontrolled use                           |
+| `onInput`      | `(value: string) => void`  | -       | Fires on every change                                        |
+| `onSubmit`     | `(value: string) => void`  | -       | Fires on Enter                                               |
+| `onFocus`      | `() => void`               | -       | Fires when the field gains focus                             |
+| `onBlur`       | `() => void`               | -       | Fires when the field loses focus                             |
+| `placeholder`  | `string`                   | -       | Shown when value is empty and the field is not focused       |
+| `maxLength`    | `number`                   | -       | Truncates input to this length                               |
+| `disabled`     | `boolean`                  | `false` | Ignores pointer and key events when true                     |
+| `autoFocus`    | `boolean`                  | `false` | Focuses on mount                                             |
+| `width`        | `number \| "auto" \| "N%"` | -       | Field width                                                  |
+
 ## License
 
 MIT. Copyright (c) 2026 Antoine van Wel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -15,6 +15,6 @@
   ],
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.13",
-    "@solidrt/core": "0.0.2"
+    "@solidrt/core": "0.0.4"
   }
 }

package/src/index.ts

@@ -1 +1,3 @@
-export { SafeArea } from "./SafeArea"
+export { SafeArea } from "./safe-area"
+export { TextInput, type TextInputProps } from "./text-input"
+export { theme, setTheme, type Theme } from "./theme"

package/src/{SafeArea.tsx → safe-area.tsx}

@@ -20,7 +20,6 @@ export function SafeArea(props: {
     has(edge) ? Math.max(insets()[edge], props.minimum ?? 0) : 0
   return (
     <view
-      overflow="hidden"
       flex={1}
       flexDirection="column"
       marginTop={pad("top")}

package/src/text-input.tsx

@@ -0,0 +1,154 @@
+import { createSignal, onCleanup } from "@solidjs/signals"
+import { measureText, setFocus } from "@solidrt/core"
+import { theme } from "./theme"
+
+type Dimension = number | "auto" | `${number}%`
+
+export interface TextInputProps {
+  value?: string
+  defaultValue?: string
+  onInput?: (value: string) => void
+  onSubmit?: (value: string) => void
+  onFocus?: () => void
+  onBlur?: () => void
+
+  placeholder?: string
+  maxLength?: number
+  disabled?: boolean
+  autoFocus?: boolean
+
+  width?: Dimension
+}
+
+// V1: single-line, caret-at-end only, no selection, no mid-string editing.
+// Printable text arrives via onTextInput (post-IME commit). onKeyDown handles
+// Backspace, Enter, Escape. Outside-click-to-blur is the caller's job.
+export function TextInput(props: TextInputProps) {
+  let [internalValue, setInternalValue] = createSignal(props.defaultValue ?? "")
+  let [focused, setFocused] = createSignal(false)
+  let [caretOn, setCaretOn] = createSignal(true)
+
+  let node: { id: number } | undefined
+  let blinkId: any = null
+
+  let value = () => props.value ?? internalValue()
+
+  let commit = (next: string) => {
+    if (props.maxLength != null && next.length > props.maxLength) {
+      next = next.slice(0, props.maxLength)
+    }
+    if (props.value == null) setInternalValue(next)
+    props.onInput?.(next)
+  }
+
+  let handlePointerDown = () => {
+    if (props.disabled) return
+    if (node) setFocus(node.id)
+  }
+
+  let handleFocus = () => {
+    setFocused(true)
+    setCaretOn(true)
+    if (blinkId == null) {
+      blinkId = setInterval(() => setCaretOn((v) => !v), 500)
+    }
+    props.onFocus?.()
+  }
+
+  let handleBlur = () => {
+    setFocused(false)
+    if (blinkId != null) {
+      clearInterval(blinkId)
+      blinkId = null
+    }
+    props.onBlur?.()
+  }
+
+  let handleKeyDown = (e: any) => {
+    if (props.disabled) return
+    if (e.key === "Backspace") {
+      let v = value()
+      if (v.length > 0) commit(v.slice(0, -1))
+      setCaretOn(true)
+    } else if (e.key === "Return" || e.key === "Enter") {
+      props.onSubmit?.(value())
+    } else if (e.key === "Escape") {
+      if (node) setFocus(null)
+    }
+  }
+
+  let handleTextInput = (e: any) => {
+    if (props.disabled) return
+    commit(value() + (e.text ?? ""))
+    setCaretOn(true)
+  }
+
+  onCleanup(() => {
+    if (blinkId != null) clearInterval(blinkId)
+  })
+
+  let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
+  let displayText = () => (showPlaceholder() ? (props.placeholder ?? "") : value())
+  let displayColor = () => (showPlaceholder() ? theme.color.textMuted : theme.color.text)
+
+  // V1: viewport width derived from numeric props.width minus padding.
+  // For "auto" / "%" widths, fall back to 0 (no scroll, caret may overflow).
+  let viewportWidth = () => (typeof props.width === "number" ? props.width - 2 * theme.spacing.md : 0)
+  let caretWidth = () => (focused() && !showPlaceholder() ? 1 : 0)
+  let scrollX = () => {
+    if (showPlaceholder()) return 0
+    let tw = measureText(value(), { fontSize: theme.text.body.size }).width
+    let vw = viewportWidth()
+    if (vw <= 0) return 0
+    return Math.max(0, tw + caretWidth() - vw)
+  }
+
+  return (
+    <view
+      ref={(n: { id: number }) => {
+        node = n
+        if (props.autoFocus) setFocus(n.id)
+      }}
+      flexDirection="row"
+      alignItems="center"
+      width={props.width}
+      paddingLeft={theme.spacing.md}
+      paddingRight={theme.spacing.md}
+      paddingTop={theme.spacing.sm}
+      paddingBottom={theme.spacing.sm}
+      onPointerDown={handlePointerDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      onTextInput={handleTextInput}
+    >
+      <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+      <d-rect
+        drawStyle="stroke"
+        color={theme.color.border}
+        strokeWidth={theme.borderWidth.sm}
+        radius={theme.radius.sm}
+      />
+      <view
+        flex={1}
+        flexDirection="row"
+        alignItems="center"
+        overflow="hidden"
+        scrollX={scrollX()}
+      >
+        <text
+          fontSize={theme.text.body.size}
+          lineHeight={theme.text.body.lineHeight}
+          color={displayColor()}
+          maxLines={1}
+          flexShrink={0}
+        >
+          {displayText()}
+        </text>
+        {focused() && caretOn() && !showPlaceholder() ? (
+          <rect color={theme.color.text} w={1} h={theme.text.body.size} flexShrink={0} />
+        ) : null}
+      </view>
+    </view>
+  )
+}

package/src/theme.ts

@@ -0,0 +1,41 @@
+export type TextStyle = {
+  size: number
+  lineHeight: number
+}
+
+export type Theme = {
+  text: { body: TextStyle }
+  color: {
+    text: string
+    textMuted: string
+    surface: string
+    border: string
+  }
+  spacing: { sm: number; md: number }
+  radius: { sm: number }
+  borderWidth: { sm: number }
+}
+
+export let theme: Theme = {
+  text: {
+    body: { size: 14, lineHeight: 1.5 },
+  },
+  color: {
+    text: "#333",
+    textMuted: "rgba(0,0,0,0.4)",
+    surface: "#ccc",
+    border: "rgba(0,0,0,0.2)",
+  },
+  spacing: { sm: 4, md: 8 },
+  radius: { sm: 4 },
+  borderWidth: { sm: 1 },
+}
+
+type ThemePartial = { [K in keyof Theme]?: Partial<Theme[K]> }
+
+export function setTheme(partial: ThemePartial) {
+  for (let key in partial) {
+    let k = key as keyof Theme
+    Object.assign(theme[k], partial[k])
+  }
+}