@tuiparts/solid

The Solid Adapter for tuiparts.sh Primitives.

New to package primitives and editable recipes? Start with the primitive and recipe guide.

Installation

Add the Adapter to an existing OpenTUI Solid application:

pnpm add @tuiparts/solid

Peer requirements are @opentui/core and @opentui/solid ^0.4.3, with solid-js pinned to 1.9.12 for OpenTUI compatibility.

Primitive example

import {
  Accordion,
  Button,
  Checkbox,
  Collapsible,
  Input,
  NumberField,
  Radio,
  RadioGroup,
  Slider,
  Switch,
  Textarea,
  Toggle,
  ToggleGroup,
} from "@tuiparts/solid";
import { createSignal } from "solid-js";

export function Settings() {
  const [checked, setChecked] = createSignal(false);
  return (
    <box flexDirection="column" gap={1}>
      <Button onPress={({ source }) => console.log(source)}>
        <text content="Run" />
      </Button>
      <Checkbox.Root checked={checked()} onCheckedChange={setChecked}>
        <Checkbox.Indicator>
          <text content="✓" />
        </Checkbox.Indicator>
        <text content="Run checks" />
      </Checkbox.Root>
      <Accordion.Root defaultValue={["details"]}>
        <Accordion.Item value="details">
          <Accordion.Trigger>
            <text content="Details" />
          </Accordion.Trigger>
          <Accordion.Panel>
            <text content="Expanded content" />
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion.Root>
      <Input placeholder="Release name" onSubmit={console.log} />
      <NumberField.Root defaultValue={1} min={0} max={20}>
        <NumberField.Decrement><text content="−" /></NumberField.Decrement>
        <NumberField.Input width={8} />
        <NumberField.Increment><text content="+" /></NumberField.Increment>
      </NumberField.Root>
      <Textarea initialValue="Release notes" onSubmit={console.log} />
      <Slider.Root defaultValue={25} max={100}>
        <Slider.Track width={20}><text content="────────────────────" /></Slider.Track>
      </Slider.Root>
      <Switch.Root checked={checked()} onCheckedChange={setChecked}>
        {(state) => <text content={state.checked ? "On" : "Off"} />}
      </Switch.Root>
      <RadioGroup defaultValue="stable">
        <Radio.Root value="stable">
          <text content="Stable" />
        </Radio.Root>
      </RadioGroup>
      <Toggle defaultPressed>
        {(state) => <text content={state.pressed ? "Pinned" : "Unpinned"} />}
      </Toggle>
      <ToggleGroup defaultValue={["bold"]} multiple>
        <Toggle value="bold"><text content="Bold" /></Toggle>
        <Toggle value="italic"><text content="Italic" /></Toggle>
      </ToggleGroup>
    </box>
  );
}

Solid props are spread reactively onto the existing Renderable. Signal changes update controlled primitive state without remounting.

From a repository checkout, run a focused tracer with pnpm --filter @tuiparts/solid demo:number-field, pnpm --filter @tuiparts/solid demo:slider, pnpm --filter @tuiparts/solid demo:checkbox-group, pnpm --filter @tuiparts/solid demo:accordion, or pnpm --filter @tuiparts/solid demo:collapsible.

Imports

import { Accordion } from "@tuiparts/solid/accordion";
import { Button } from "@tuiparts/solid/button";
import { Checkbox } from "@tuiparts/solid/checkbox";
import { CheckboxGroup } from "@tuiparts/solid/checkbox-group";
import { Collapsible } from "@tuiparts/solid/collapsible";
import { Input } from "@tuiparts/solid/input";
import { NumberField } from "@tuiparts/solid/number-field";
import { Radio } from "@tuiparts/solid/radio";
import { RadioGroup } from "@tuiparts/solid/radio-group";
import { Slider } from "@tuiparts/solid/slider";
import { Switch } from "@tuiparts/solid/switch";
import { Textarea } from "@tuiparts/solid/textarea";
import { Dialog } from "@tuiparts/solid/dialog";
import { Toggle } from "@tuiparts/solid/toggle";
import { ToggleGroup } from "@tuiparts/solid/toggle-group";
import { Tabs } from "@tuiparts/solid/tabs";

All Primitives are also exported from @tuiparts/solid.

Dialog

Dialog is the Solid compound adapter for the packaged Dialog behavior in @tuiparts/core/dialog. Compose its Root, Trigger, Portal, Backdrop, Popup, Title, Description, and Close parts, or install the editable solid/dialog registry recipe for visual assembly. Its reactive props and portal lifecycle preserve coordinator-owned visibility/z-index, focus containment, detached restoration, and reverse Tab behavior.

The existing @tuiparts/dialog/solid provider, hooks, and async APIs remain the companion convenience surface; they are not re-exported by the Solid adapter.

Input

Input is an additive, unstyled adapter that preserves OpenTUI's mutable value and event model. It has no defaultValue, controlled rollback, or callback aliases.

import { Input } from "@tuiparts/solid/input";

<Input
  value="initial"
  onInput={console.log}
  onChange={commit}
  onSubmit={submit}
/>;

onInput reports mutations, onChange reports commits on blur or submit, and onSubmit reports Enter after any changed-value onChange. Visual defaults belong in editable recipes. This is the canonical primitive contract.

Textarea

Textarea is the named single-part adapter for OpenTUI's multiline editor. It preserves initialValue, the native EditBuffer, editing methods, keybindings, and cursor/content/submit callbacks. Refs resolve to the actual Core TextareaRenderable; there is no controlled value facade or Store.

Recipes

Behaviorless presentation such as Badge is installed from the registry rather than imported from this package. Consumer-owned recipes use ordinary TypeScript and native OpenTUI properties.

License

MIT