@solidrt/components 0.0.3 → 0.0.5

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,8 +23,8 @@ import { SafeArea } from "@solidrt/components"
 
 function App() {
   return (
-    <window flexDirection="column">
-      <SafeArea>
+    <window>
+      <SafeArea top bottom>
         <text>Content clear of system UI</text>
       </SafeArea>
     </window>
@@ -28,17 +32,32 @@ function App() {
 }
 ```
 
+Top and bottom insets are applied by default. Pass `false` to opt out of an edge, or a number to apply the inset with a minimum padding.
+
+```jsx
+// top only
+<SafeArea bottom={false}>
+
+// apply top and bottom insets, with a minimum of 16px each
+<SafeArea top={16} bottom={16}>
+
+// all four edges
+<SafeArea top bottom left right>
+```
+
 **Props**
 
-| Prop       | Type                                         | Default             | Description                                                    |
-| ---------- | -------------------------------------------- | ------------------- | -------------------------------------------------------------- |
-| `edges`    | `("top" \| "bottom" \| "left" \| "right")[]` | `["top", "bottom"]` | Which edges to apply safe area insets on                       |
-| `minimum`  | `number`                                     | `0`                 | Minimum padding applied even if the safe area inset is smaller |
-| `children` | `any`                                        | -                   | Content to render inside the safe area                         |
+| Prop       | Type                | Default | Description                                         |
+| ---------- | ------------------- | ------- | --------------------------------------------------- |
+| `top`      | `boolean \| number` | `true`  | Apply top inset. A number sets the minimum padding. |
+| `bottom`   | `boolean \| number` | `true`  | Apply bottom inset. A number sets the minimum padding. |
+| `left`     | `boolean \| number` | `false` | Apply left inset. A number sets the minimum padding. |
+| `right`    | `boolean \| number` | `false` | Apply right inset. A number sets the minimum padding. |
+| `children` | `any`               | -       | Content to render inside the safe area.             |
 
 ### TextInput
 
-Single-line text input. Tapping/clicking the field focuses it; the OS-level text input (and on-screen keyboard, where applicable) is activated automatically while focused. Printable text arrives via the platform `textInput` event (post-IME commit). V1 supports caret-at-end editing only: no selection, no mid-string cursor movement.
+Single-line text input.
 
 ```jsx
 import { TextInput } from "@solidrt/components"
@@ -60,29 +79,39 @@ function NameField() {
 
 **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                                             |
-| `fontSize`         | `number`                   | `14`               | Text size                                                    |
-| `color`            | `string`                   | `"black"`          | Text color                                                   |
-| `placeholderColor` | `string`                   | `"rgba(0,0,0,.4)"` | Placeholder color                                            |
-| `background`       | `string`                   | `"white"`          | Background fill color                                        |
-| `borderColor`      | `string`                   | `"rgba(0,0,0,.2)"` | Border stroke color                                          |
-| `borderWidth`      | `number`                   | `1`                | Border stroke width                                          |
-| `borderRadius`     | `number`                   | `4`                | Corner radius                                                |
-| `caretColor`       | `string`                   | same as `color`    | Caret color                                                  |
-| `padding`          | `number`                   | `8`                | Horizontal padding                                           |
-| `width`            | `number \| "auto" \| "N%"` | -                  | Field width                                                  |
-| `height`           | `number`                   | `32`               | Field height                                                 |
+| 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                                                  |
+
+### Image
+
+Loads and displays an image from a URL or raw bytes.
+
+```jsx
+import { Image } from "@solidrt/components"
+
+function Avatar() {
+  return <Image src="https://example.com/avatar.png" width={64} height={64} />
+}
+```
+
+**Props**
+
+Accepts all layout, transform, and pointer event props, plus:
+
+| Prop  | Type                   | Description                                  |
+| ----- | ---------------------- | -------------------------------------------- |
+| `src` | `string \| Uint8Array` | URL to fetch, or raw image bytes to decode   |
 
 ## License
 

package/package.json

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

package/src/image.tsx

@@ -0,0 +1,66 @@
+import { createSignal, onCleanup } from "@solidjs/signals"
+import { decodeImage, createTexture } from "@solidrt/core/gpu"
+import type { LayoutProps, TransformProps, PointerProps } from "@solidrt/core"
+
+export interface ImageProps extends LayoutProps, TransformProps, PointerProps {
+  src: string | Uint8Array
+}
+
+//TODO onLoad, onError
+//TODO release texture in onCleanup
+//TODO forward all LayoutProps (currently only the common subset)
+export function Image(props: ImageProps) {
+  let [res] = createSignal(async () => {
+    let bytes: Uint8Array
+    if (typeof props.src === "string") {
+      let response = await fetch(props.src)
+      bytes = await response.bytes()
+    } else {
+      bytes = props.src
+    }
+    let { data, width, height } = decodeImage(bytes)
+    let id = createTexture(data, width, height)
+    return { id, width, height }
+  })
+
+  let src = () => res()?.id
+
+  onCleanup(() => {
+    //TODO release texture
+  })
+
+  return (
+    <view
+      width={props.width}
+      height={props.height}
+      flex={props.flex}
+      flexGrow={props.flexGrow}
+      flexShrink={props.flexShrink}
+      alignSelf={props.alignSelf}
+      margin={props.margin}
+      marginTop={props.marginTop}
+      marginBottom={props.marginBottom}
+      marginLeft={props.marginLeft}
+      marginRight={props.marginRight}
+      padding={props.padding}
+      position={props.position}
+      top={props.top}
+      right={props.right}
+      bottom={props.bottom}
+      left={props.left}
+      x={props.x}
+      y={props.y}
+      scale={props.scale}
+      rotate={props.rotate}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      pointerEvents={props.pointerEvents}
+    >
+      <texture src={src()} />
+    </view>
+  )
+}

package/src/index.ts

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

package/src/safe-area.tsx

@@ -2,8 +2,10 @@ import { createSignal } from "@solidjs/signals"
 import { onResize } from "@solidrt/core"
 
 export function SafeArea(props: {
-  edges?: ("top" | "bottom" | "left" | "right")[]
-  minimum?: number
+  top?: boolean | number
+  bottom?: boolean | number
+  left?: boolean | number
+  right?: boolean | number
   children?: any
 }) {
   let [insets, setInsets] = createSignal({ top: 0, bottom: 0, left: 0, right: 0 })
@@ -15,9 +17,13 @@ export function SafeArea(props: {
       right: width - safeArea.right,
     })
   })
-  let has = (e: string) => (props.edges ?? ["top", "bottom"]).includes(e as any)
-  let pad = (edge: "top" | "bottom" | "left" | "right") =>
-    has(edge) ? Math.max(insets()[edge], props.minimum ?? 0) : 0
+  let pad = (edge: "top" | "bottom" | "left" | "right") => {
+    let defaultOn = edge === "top" || edge === "bottom"
+    let p = props[edge] ?? defaultOn
+    if (p === false) return 0
+    if (p === true) return insets()[edge]
+    return Math.max(insets()[edge], p as number)
+  }
   return (
     <view
       flex={1}