UI components

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';

// One subpath per component, or every one from the barrel:
import { SpButton } from '@silverpoint/react/ui/button';
import { SpInput, SpSwitch, SpTabs, SpTabPanel } from '@silverpoint/react/ui';

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';

import { SpButton } from '@silverpoint/vue/ui/button';
import { SpInput, SpSwitch, SpTabs, SpTabPanel } from '@silverpoint/vue/ui';
</script>

/* src/styles.css */
@import '@silverpoint/fonts/fonts.css';
@import '@silverpoint/grounds/styles.css';
@import '@silverpoint/grounds/ui.css';

// app.ts
import { SpButton } from '@silverpoint/angular/ui/button';
import { SpInput, SpSwitch, SpTabs, SpTabPanel } from '@silverpoint/angular/ui';

# Nothing to import on the JavaScript side: every UI component adds
# @silverpoint/grounds/ui.css (and styles.css and the typeface) for you.
from reflex_silverpoint_react import sp_button, sp_input, sp_switch, sp_tab_panel, sp_tabs

import { useState, type FormEvent } from 'react';
import { SpButton, SpInput, SpSwitch, SpTabPanel, SpTabs } from '@silverpoint/react/ui';
import { BarChart } from '@silverpoint/react/bar-chart';
import { LineChart } from '@silverpoint/react/line-chart';

export function Settings() {
  const [city, setCity] = useState('Caracas');
  const [precision, setPrecision] = useState(false);
  const [view, setView] = useState('traffic');
  const mode = precision ? 'precision' : 'ink';

  const save = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(Object.fromEntries(new FormData(event.currentTarget))); // { city, precision, … }
  };

  return (
    <form onSubmit={save}>
      {/* onChange receives the value itself, not the DOM event */}
      <SpInput label="City" name="city" value={city} onChange={setCity}
        invalid={city === ''} message="Required: pick a city" />
      <SpSwitch label="Precision" name="precision" checked={precision} onChange={setPrecision} />
      <SpTabs label="Views" value={view} onChange={setView}
        items={[{ key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }]}>
        <SpTabPanel value="traffic"><LineChart title="Traffic" mode={mode} /></SpTabPanel>
        <SpTabPanel value="errors"><BarChart title="Errors" mode={mode} /></SpTabPanel>
      </SpTabs>
      <SpButton type="submit" variant="primary">Save</SpButton>
    </form>
  );
}

<script setup lang="ts">
import { ref, computed } from 'vue';
import { SpButton, SpInput, SpSwitch, SpTabPanel, SpTabs } from '@silverpoint/vue/ui';
import { SpBarChart } from '@silverpoint/vue/bar-chart';
import { SpLineChart } from '@silverpoint/vue/line-chart';

const city = ref('Caracas');
const precision = ref(false);
const view = ref('traffic');
const mode = computed(() => (precision.value ? 'precision' : 'ink'));
const tabs = [{ key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }];

function save(event: SubmitEvent) {
  console.log(Object.fromEntries(new FormData(event.target as HTMLFormElement)));
}
</script>

<template>
  <form @submit.prevent="save">
    <SpInput v-model="city" label="City" name="city"
      :invalid="city === ''" message="Required: pick a city" />
    <SpSwitch v-model="precision" label="Precision" name="precision" />
    <SpTabs v-model="view" label="Views" :items="tabs">
      <SpTabPanel value="traffic"><SpLineChart title="Traffic" :mode="mode" /></SpTabPanel>
      <SpTabPanel value="errors"><SpBarChart title="Errors" :mode="mode" /></SpTabPanel>
    </SpTabs>
    <SpButton type="submit" variant="primary">Save</SpButton>
  </form>
</template>

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SpButton, SpInput, SpSwitch, SpTabPanel, SpTabs } from '@silverpoint/angular/ui';
import { SpBarChart } from '@silverpoint/angular/bar-chart';
import { SpLineChart } from '@silverpoint/angular/line-chart';

@Component({
  selector: 'app-settings',
  imports: [FormsModule, SpButton, SpInput, SpSwitch, SpTabs, SpTabPanel, SpBarChart, SpLineChart],
  template: `
    <form (ngSubmit)="save()">
      <!-- [(value)] two-way binds a signal; ngModel and formControl work too (ControlValueAccessor) -->
      <sp-input label="City" name="city" [(value)]="city"
        [invalid]="city() === ''" message="Required: pick a city" />
      <sp-switch label="Precision" name="precision" [(value)]="precision" />
      <sp-tabs label="Views" [items]="tabs" [(value)]="view">
        <sp-tab-panel value="traffic"><sp-line-chart title="Traffic" [mode]="mode()" /></sp-tab-panel>
        <sp-tab-panel value="errors"><sp-bar-chart title="Errors" [mode]="mode()" /></sp-tab-panel>
      </sp-tabs>
      <button spButton type="submit" variant="primary">Save</button>
    </form>
  `,
})
export class Settings {
  protected readonly city = signal('Caracas');
  protected readonly precision = signal(false);
  protected readonly view = signal('traffic');
  protected readonly mode = computed(() => (this.precision() ? 'precision' : 'ink'));
  protected readonly tabs = [{ key: 'traffic', label: 'Traffic' }, { key: 'errors', label: 'Errors' }];
  save() { console.log(this.city(), this.precision()); }
}

import reflex as rx
from reflex_silverpoint_react import (
    bar_chart, line_chart, sp_button, sp_input, sp_switch, sp_tab_panel, sp_tabs, ui_item,
)


class State(rx.State):
    city: str = "Caracas"
    precision: bool = False
    view: str = "traffic"

    @rx.event
    def set_city(self, value: str):  # on_change gets the value, not an event
        self.city = value

    @rx.event
    def set_precision(self, value: bool):
        self.precision = value

    @rx.event
    def set_view(self, value: str):
        self.view = value

    @rx.event
    def save(self, form: dict):
        print(form)  # {"city": "Caracas", ...}: the native inputs submit under their name


def settings() -> rx.Component:
    mode = rx.cond(State.precision, "precision", "ink")
    return rx.el.form(
        sp_input(label="City", name="city", value=State.city, on_change=State.set_city,
                 invalid=State.city == "", message="Required: pick a city"),
        sp_switch(label="Precision", name="precision", checked=State.precision,
                  on_change=State.set_precision),
        sp_tabs(
            sp_tab_panel(line_chart(title="Traffic", mode=mode), value="traffic"),
            sp_tab_panel(bar_chart(title="Errors", mode=mode), value="errors"),
            items=[ui_item("traffic", "Traffic"), ui_item("errors", "Errors")],
            label="Views", value=State.view, on_change=State.set_view,
        ),
        sp_button("Save", type="submit", variant="primary"),
        on_submit=State.save,
    )

from reflex.experimental.client_state import ClientStateVar
from reflex_silverpoint_react import gauge_arc, sp_slider

# A site exported with enable_state=False has no backend: keep the value in the browser.
LOAD = ClientStateVar.create("load", 64)

sp_slider(label="Load", value=LOAD.value, on_change=LOAD.set_value, marks=[0, 25, 50, 75, 100])
gauge_arc(percent=LOAD.value, caption="Load", title="Capacity")