# Sistema di design gluestack UI

## gluestack UI Anteprima dell’interfaccia del sistema di design

Aggiungi un elemento univoco, contrassegnalo come preparato e controlla l’avanzamento calcolato.

## Sistema di design gluestack UI Riferimento di design del sistema

Il riferimento distingue i colori chiari documentati della v5 dai creator installati di core API. I creator diretti non applicano automaticamente il tema della CLI. L’anteprima associa esplicitamente i colori elencati a stili originali e usa un contorno di focus personalizzato più marcato. La geometria e le illustrazioni sono scelte dell’applicazione.

### Ruoli cromatici chiari documentati della v5

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| background | #ffffff | Area di lavoro della pagina. |
| foreground | #0a0a0a | Testo normale leggibile. |
| card | #ffffff | Superficie della scheda. |
| popover | #ffffff | Superficie di sovrapposizione; in questo studio non viene usato alcun popover. |
| popover-foreground | #0a0a0a | Testo abbinato alla superficie di sovrapposizione. |
| muted | #f5f5f5 | Superfici di supporto, compreso il pannello illustrato originale. |
| muted-foreground | #737373 | Descrizioni secondarie e dettagli sullo stato. |
| destructive | #e7000b | Feedback per input non valido; l’errore è mostrato anche come testo. |
| border | #e5e5e5 | Contorni delle schede e separatori degli elenchi. |
| input | #e5e5e5 | Bordo del campo nello stato normale. |
| ring | #d4d4d4 | Colore del ring predefinito documentato; in questo studio si usa il contorno di focus originale più marcato #737373. |
| primary | #171717 | Superficie dell’azione principale e riempimento dell’avanzamento. |
| primary-foreground | #fafafa | Testo abbinato alla superficie scura dell’azione. |
| secondary | #f5f5f5 | Superficie dell’azione secondaria. |
| secondary-foreground | #171717 | Testo abbinato alle superfici secondarie. |
| accent | #f7f7f7 | Ruolo aggiuntivo della superficie d’accento. |
| accent-foreground | #343434 | Testo abbinato al ruolo d’accento. |
### Factory e stati di Button in core

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| createButton | { Root, Text, Group, Spinner, Icon } | Fornisci i componenti host effettivi: il creator aggiunge il comportamento, non un tema completo. |
| Button.Text | Text host | Mantiene il testo del pulsante nel contesto del relativo stato. |
| Button.Group | Group host | Sottocomponente generato per raggruppare i pulsanti; non è usato in questo layout. |
| Button.Spinner | Spinner host | Indicatore di caricamento generato; non mostrarlo per un’azione locale istantanea. |
| Button.Icon | Icon host | Sottocomponente icona generato; l’anteprima usa azioni testuali esplicite. |
| Button isDisabled | boolean | Disabilita il comportamento effettivo della pressione, non solo l’aspetto. |
| Button data-focus-visible | true / false | L’implementazione originale di CSS applica un contorno visibile al focus da tastiera. |
| Button data-active | true / false | Espone uno stato di interazione premuta agli stili. |
### Contesto di Input e props host in core

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| createInput | { Root, Icon, Slot, Input } | Crea il contesto del campo e i relativi slot. |
| Input.Input | TextInput host | Il componente di inserimento del testo restituito dal creator. |
| isInvalid | Input root boolean | Propaga al campo il contesto non valido e aria-invalid. |
| isRequired | Input root boolean | Propaga lo stato obbligatorio; l’applicazione esegue comunque la propria validazione dopo il trim. |
| value / onChangeText | Controlled TextInput props | Mantieni il testo provvisorio nello stato di React. |
| onSubmitEditing | TextInput callback | Aggiunge un elemento quando si preme Enter in questo esempio per browser. |
| maxLength | 60 in the original study | Limite di TextInput scelto per questa applicazione; non è un valore predefinito di gluestack. |
| aria-label | Item name in the original study | Assegna un nome all’input, oltre a fornire un’etichetta visibile. |
## gluestack UI Guida completa al sistema di design

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## gluestack UI Versioni, creator e componenti generati del sistema di design

### Scegli il percorso di implementazione effettivo

> gluestack è composto da più livelli. Il flusso di installazione standard genera componenti con stile all’interno di un’applicazione. Questo studio importa invece createButton e createInput dal pacchetto core installato e fornisce host React Native Web. La distinzione è importante: installare solo core non fornisce le varianti di Button generate né il tema completo.

L’esempio in esecuzione usa core 5.0.15 e utils 5.0.6. Gli adattatori React Native Web sono componenti reali, mentre la struttura esterna e lo stato sono originali. Per creare un’applicazione completa con Expo o Next.js, consulta la documentazione d’installazione; per riprodurre questo specifico studio nel browser, usa tutti i file qui forniti.

## gluestack UI Colori semantici e stili espliciti del sistema di design

### Abbina i ruoli prima di scegliere le decorazioni

La pagina usa uno sfondo bianco, un’azione primaria scura, aree di supporto attenuate e ruoli di bordo ben visibili. Questi valori sono ripresi dalla palette chiara documentata della v5 e poi assegnati esplicitamente tramite gli stili Native di React e CSS standard. Nessun provider di runtime li applica in modo implicito.

Un campo non valido combina un contorno del colore di errore con una spiegazione leggibile e il ripristino del focus. Il contorno di focus originale è più scuro del ring predefinito documentato: il foglio di stile indica esplicitamente questa scelta, senza presentarla come un token della libreria.

### Pianifica con cura le migrazioni

Gli esempi precedenti che usano nomi numerici per le palette non vanno mescolati senza criterio con il vocabolario semantico della v5. Prima di sostituire il nome di un token, controlla la configurazione generata installata e la guida all’aggiornamento. Uno studio con creator diretti può mostrare il comportamento senza dimostrare che la migrazione completa dell’applicazione sia conclusa.

## gluestack UI Composizione di Button e azioni da tastiera del sistema di design

### Fornisci al creator tutti gli host necessari

createButton riceve Pressable, Text, View, ActivityIndicator e un host per le icone. Restituisce Button e i sottocomponenti Text, Group, Spinner e Icon. L’esempio completo usa Button.Text invece di inserire una stringa semplice nella radice pressable.

La preparazione è una transizione di stato sincrona, quindi non si simula un indicatore di caricamento né un ritardo di salvataggio. Ogni azione include il nome dell’elemento nell’etichetta accessibile. L’azione visibile cambia da Prepara elemento a Rimuovi preparazione, così l’effetto successivo è sempre chiaro.

### Verifica il comportamento visualizzato

1. Usa Tab per raggiungere un’azione Prepara elemento, poi premi Space.

2. Verifica che cambino sia lo stato testuale di elemento preparato sia il valore dell’avanzamento.

3. Usa Rimuovi preparazione e verifica che l’elemento resti nell’elenco.

4. Controlla il contorno di focus: il passaggio del mouse non dimostra il supporto alla tastiera.

## gluestack UI Contesto di Input e validazione completa del sistema di design

### Convalida il valore che verrà memorizzato

L’input è controllato tramite value e onChangeText. Prima di aggiungere, si rimuovono gli spazi iniziali e finali dal testo provvisorio, si rifiuta un risultato vuoto e poi si confrontano i nomi senza distinzione tra maiuscole e minuscole. Se il valore non è valido, resta nel campo così l’utente può correggerlo.

La radice riceve isInvalid e isRequired; il campo effettivo riceve l’etichetta, il riferimento alla descrizione e un ref per ripristinare il focus. La validazione è responsabilità dell’applicazione: contrassegnare un input core come obbligatorio non crea la regola che vieta i nomi duplicati.

### Gestisci ogni stato visibile del campo

- Iniziale: il campo è vuoto e viene mostrato il suggerimento sulla lunghezza.

- Non valido: la spiegazione appare in un alert e il campo riceve il focus.

- Modifica: il testo di errore non più pertinente scompare mentre l’utente modifica il testo provvisorio.

- Accettato: appare una nuova riga non preparata, il campo si svuota e lo stato annuncia l’aggiunta.

## gluestack UI Identità stabile e avanzamento calcolato del sistema di design

### Memorizza gli elementi e calcola il riepilogo

Ogni elemento ha un id numerico stabile, un nome e un flag packed. Un ref fornisce nuovi id; il nome visualizzato non viene usato come chiave React. L’attivazione aggiorna gli elementi in base all’id, così due aggiornamenti dell’interfaccia distinti non possono modificare per errore una riga diversa.

Il numeratore dell’avanzamento è calcolato a partire dai flag packed e il denominatore dall’elenco corrente. Aggiungere un elemento non preparato può ridurre la percentuale senza perdere quelli già preparati. È la conseguenza corretta di una lista di controllo più ampia, non un errore di animazione.

### Rendi esplicita l’azione di ripristino locale

Ripristina i tre elementi di esempio, cancella il testo provvisorio e l’errore, reimposta l’id successivo e annuncia il risultato. Anche dopo il ricaricamento, viene visualizzato lo stato iniziale di esempio. Questa anteprima non usa server, sincronizzazione degli account o archiviazione persistente.

## gluestack UI Layout adattabile e illustrazioni originali del sistema di design

### Distingui il comportamento degli host dalla geometria della pagina

Su desktop, la composizione affianca la lista di controllo al pannello di input. A 700 pixel passa a una sola colonna. Le righe vanno a capo quando necessario e i nomi lunghi si spezzano nello spazio disponibile: un’azione a larghezza fissa non dovrebbe costringere l’intero documento a scorrere orizzontalmente.

Il quaderno e la matita sono forme originali di CSS, non risorse del marchio gluestack copiate. Il raggio di 14 pixel delle schede, la spaziatura di 24 pixel dei pannelli e la scala dei titoli sono scelte di questo studio. La tabella di riferimento li distingue dai ruoli cromatici documentati.

## gluestack UI Accessibilità nel browser e ambito delle piattaforme del sistema di design

### Verifica l’ambiente effettivamente rappresentato

L’anteprima esegue il rendering con React Native Web ed è stata verificata in un browser. Non dimostra il comportamento nativo su iOS o Android. Un’applicazione Expo deve verificare separatamente le dimensioni delle aree interattive, gli annunci degli screen reader, la gestione della tastiera e la navigazione della piattaforma.

L’elemento di avanzamento include nome, valore minimo, valore massimo e valore corrente. Uno stato dinamico descrive le azioni completate senza distogliere il lettore dalla lista di controllo. In caso di rifiuto, il modulo conserva la bozza e riporta il focus sul campo. Queste responsabilità dell’applicazione si aggiungono al comportamento nativo di base.

## Build completo del sistema di design gluestack UI e confine delle dipendenze

### Riproduci esattamente questo esempio

Salva i quattro file di Component Examples nella stessa directory e installa i pacchetti fissati mostrati qui sotto. La build associa react-native a react-native-web, perché il core importa internamente il modulo nativo con quel nome. Il sorgente importa direttamente gli host per browser e non carica un runtime Expo.

L’installazione ridotta dei pacchetti usa la risoluzione legacy delle dipendenze peer per questo sottoinsieme destinato solo al web. Non è una raccomandazione per un’applicazione nativa completa: la libreria completa dichiara dipendenze peer per integrazioni native, SVG e safe-area che questo bundle con due creator non utilizza. Aggiungi le dipendenze peer corrette quando ampli l’insieme di componenti.

### Modifica un livello alla volta

1. Compila i file senza modificarli e verifica aggiunta, rifiuto dei duplicati, preparazione e ripristino.

2. Modifica il layout originale o i contenuti dell’applicazione mantenendo intatti i collegamenti ai creator.

3. Se adotti componenti NativeWind generati, sostituisci lo stile e la configurazione del provider in un passaggio di integrazione separato.

4. Dopo la modifica, verifica nuovamente il comportamento della tastiera e le piattaforme di destinazione effettive.

## Esempi di componenti del sistema di design gluestack UI

### app.jsx — esempio completo con componenti core

Collegamenti effettivi ai creator e modello completo dello stato della lista di controllo.

```
import React,{useState,useRef} from 'react';
import{createRoot}from'react-dom/client';
import{Pressable,Text,View,TextInput,ActivityIndicator}from'react-native-web';
import{createButton}from'@gluestack-ui/core/button/creator';
import{createInput}from'@gluestack-ui/core/input/creator';
const Button=createButton({Root:Pressable,Text,Group:View,Spinner:ActivityIndicator,Icon:View});
const Input=createInput({Root:View,Input:TextInput,Slot:Pressable,Icon:View});
const seed=[{id:1,name:'Sketchbook',packed:true},{id:2,name:'Pencil roll',packed:false},{id:3,name:'Water bottle',packed:false}];
function App(){const[items,setItems]=useState(seed),[name,setName]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Pack each item when it is ready.');const next=useRef(4),field=useRef(null);const count=items.filter(x=>x.packed).length;
function add(){const v=name.trim();if(!v||items.some(x=>x.name.toLowerCase()===v.toLowerCase())){setError(!v?'Enter the name of an item.':'That item is already in the kit.');field.current.focus();return}setItems([...items,{id:next.current++,name:v,packed:false}]);setName('');setError('');setMessage(v+' added to this local kit.')}
return <main><header><p className="eyebrow">GLUESTACK UI / CORE COMPONENT STUDY</p><h1>A small kit.<br/>A clearer start.</h1><p className="intro">Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.</p></header><div className="layout"><section className="panel"><div className="sectionhead"><h2>Your field kit</h2><span className="badge">{count} of {items.length} packed</span></div><div className="meter" role="progressbar" aria-label="Packed items" aria-valuemin={0} aria-valuemax={items.length} aria-valuenow={count}><i style={{width:100*count/items.length+'%'}}/></div><ul>{items.map(item=><li key={item.id}><div><strong>{item.name}</strong><span>{item.packed?'Packed and ready':'Still to pack'}</span></div><Button onPress={()=>{setItems(items.map(x=>x.id===item.id?{...x,packed:!x.packed}:x));setMessage(item.name+(item.packed?' marked to pack.':' marked packed.'))}} style={item.packed?styles.secondary:styles.primary} aria-label={(item.packed?'Unpack ':'Pack ')+item.name}><Button.Text style={{color:item.packed?'#171717':'#fafafa',fontSize:14,fontWeight:600}}>{item.packed?'Unpack':'Pack item'}</Button.Text></Button></li>)}</ul><p className="status" role="status">{message}</p></section><aside className="panel"><div className="drawing" aria-hidden="true"><span className="book">FIELD<br/>NOTES</span><i className="pencil"/></div><h2>Add one useful thing</h2><label htmlFor="kit-name">Item name</label><Input isInvalid={!!error} isRequired style={styles.input}><Input.Input id="kit-name" aria-label="Item name" aria-describedby={error?'kit-error':'kit-hint'} ref={field} value={name} onChangeText={v=>{setName(v);setError('')}} onSubmitEditing={add} maxLength={60} style={styles.field}/></Input><p id="kit-hint" className="hint">Use a short, unique name. Maximum 60 characters.</p>{error&&<p id="kit-error" className="error" role="alert">{error}</p>}<Button onPress={add} style={styles.primary}><Button.Text style={styles.primaryText}>Add to kit</Button.Text></Button><Button onPress={()=>{setItems(seed);setName('');setError('');setMessage('Example kit restored.');next.current=4}} style={styles.reset}><Button.Text style={{color:'#737373',fontSize:14}}>Reset example kit</Button.Text></Button></aside></div><p className="scope">Native @gluestack-ui/core 5.0.15 behavior rendered through React Native Web. Original OpenDesign layout and artwork; explicitly styled with documented v5 light color roles. This is a web-only study, not an Expo build or the CLI-generated NativeWind component set.</p></main>}
const styles={primary:{backgroundColor:'#171717',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},secondary:{backgroundColor:'#f5f5f5',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},primaryText:{color:'#fafafa',fontSize:14,fontWeight:600},input:{borderWidth:1,borderColor:'#e5e5e5',borderRadius:8,marginTop:8},field:{padding:12,fontSize:16,color:'#0a0a0a',outlineStyle:'none'},reset:{paddingVertical:16,alignItems:'center'}};
createRoot(document.getElementById('app')).render(<App/>);
```

Riferimento del codice

### style.css — layout originale e ruoli chiari espliciti

Struttura adattabile completa, illustrazioni, contorni di stato e trattamento del focus nel browser.

```
*{box-sizing:border-box}body{margin:0;background:#fff;color:#0a0a0a;font-family:Arial,sans-serif}main{max-width:1100px;margin:auto;padding:40px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700}.intro{max-width:62ch;color:#737373;line-height:1.6}h1{font-size:52px;line-height:1.03;letter-spacing:-.045em;margin:24px 0}h2{font-size:22px;margin:0 0 20px}.layout{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:32px}.panel{border:1px solid #e5e5e5;border-radius:14px;padding:24px;min-width:0}.sectionhead{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}.badge{font-size:12px;background:#f5f5f5;padding:6px 10px;border-radius:20px}.meter{height:6px;border-radius:8px;background:#f5f5f5;margin:6px 0 24px;overflow:hidden}.meter i{display:block;height:100%;background:#171717}ul{list-style:none;padding:0;margin:0}li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e5e5e5}li>div:first-child{min-width:0;flex:1}li strong{display:block;font-size:16px;overflow-wrap:anywhere}li span{display:block;font-size:13px;color:#737373;margin-top:8px}.status{font-size:14px;line-height:1.6;margin-top:24px}.hint,.scope{font-size:12px;line-height:1.6;color:#737373}.scope{margin-top:28px}.error{font-size:14px;color:#e7000b;line-height:1.5}label{font-size:14px}.drawing{height:130px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:24px}.book{display:block;background:#171717;color:#fafafa;border-left:5px solid #737373;width:80px;height:96px;padding:22px 12px;font-size:12px;line-height:1.6;transform:rotate(-8deg)}.pencil{height:90px;width:8px;background:#a3a3a3;transform:rotate(14deg)}[data-focus-visible=true]{outline:3px solid #737373;outline-offset:3px}[data-invalid=true]{border-color:#e7000b!important}input:focus-visible{outline:2px solid #737373!important;outline-offset:3px}@media(max-width:700px){main{padding:20px}h1{font-size:40px}.layout{grid-template-columns:1fr}.panel{padding:20px}li{gap:12px;flex-wrap:wrap}li>div:first-child{flex-basis:120px}}
```

Riferimento del codice

### build.mjs — configurazione completa del bundler web

L’associazione degli import nativi è necessaria anche se app.jsx importa gli host da React Native Web.

```
import { build } from 'esbuild';
await build({entryPoints:['app.jsx'],bundle:true,minify:true,outfile:'app.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.ts','.tsx','.json'],loader:{'.js':'jsx'},define:{'process.env.NODE_ENV':'"production"'}});
```

Riferimento del codice

### index.html — entry point completo per il browser

Tieni questo file nella stessa directory di style.css e dell’app.js generato.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>gluestack field kit</title><link rel="stylesheet" href="style.css"></head><body><div id="app"></div><script src="app.js"></script></body></html>
```

Riferimento del codice

## Configurazione dell’agente per il sistema di design gluestack UI

### Punto di partenza per l’implementazione

Salva prima i quattro file completi. Questa configurazione è limitata al sottoinsieme per browser mostrato e non inizializza NativeWind, Uniwind, Expo né un registro di componenti generato.

```
npm init -y
npm install react@19.3.0 react-dom@19.3.0 react-native-web@0.21.3 @gluestack-ui/core@5.0.15 @gluestack-ui/utils@5.0.6 esbuild@0.28.2 --legacy-peer-deps
node build.mjs
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Un prompt per il tuo progetto

```
Implementa l’esempio browser completo del field kit di gluestack core 5.0.15 usando createButton/createInput e gli host di React Native Web. Mantieni gli id stabili, il testo controllato della bozza, la validazione con trim e controllo dei duplicati, il ripristino del focus, il conteggio degli elementi preparati derivato, il ripristino locale e la mappatura esplicita ai ruoli chiari della v5. Tieni separate le scelte di layout originali dalle impostazioni predefinite della libreria. Non dichiarare test su dispositivi mobili nativi né persistenza backend.
```

## Fonti e ambito del sistema di design gluestack UI

Comportamento effettivo di @gluestack-ui/core 5.0.15 tramite React Native Web 0.21.3. Layout, illustrazioni e modello dello stato del field kit sono opera originale OpenDesign. Questo esempio per browser usa creator diretti e stili espliciti; non è l’insieme di componenti generato dalla CLI per NativeWind/Uniwind e non è stato testato su iOS o Android.

- Installazione Il percorso standard di installazione dei componenti generati.

- Token semantici della v5 Ruoli cromatici attuali in modalità chiara e personalizzazione.

- Button API Anatomia del Button, interazioni e attributi di stato.

- Factory Button del core Implementazione esatta del creator installato 5.0.15.

- Implementazione Input del core Campo controllato, stato non valido e collegamenti per l’accessibilità.

- Aggiornamento alla v5 Migrazione della versione e modifiche alla nomenclatura.

## Risorse correlate al sistema di design gluestack UI

### Headless UI

Headless UI offre componenti di interazione senza stile per React, destinati a finestre di dialogo, listbox e interruttori. Questa guida si concentra sulla composizione del comportamento nativo di focus, selezione e popup con CSS ordinario, usando come esempio pratico un flusso di condivisione dei documenti.

### HeroUI

Una guida di riferimento per HeroUI v3 con variabili CSS semantiche effettive, controlli composti React, superfici chiare e scure e una procedura funzionante per esportare immagini.

### Ionic Framework

Un’interfaccia nativa Ionic per le preferenze di lettura, con ruoli cromatici verificati, geometrie degli intervalli per iOS e Material, comportamento effettivo di segmenti e interruttori e un articolo che si adatta alle scelte di font, dimensione e sfondo.


- [Riferimento per l’implementazione](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Fonte](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Fonte](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Fonte](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Riferimento del codice](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Riferimento del codice](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Riferimento del codice](https://github.com/gluestack/gluestack-ui)
- [Installazione Il percorso standard di installazione dei componenti generati.](https://gluestack.io/ui/docs/home/getting-started/installation)
- [Token semantici della v5 Ruoli cromatici attuali in modalità chiara e personalizzazione.](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Button API Anatomia del Button, interazioni e attributi di stato.](https://gluestack.io/ui/docs/components/button)
- [Factory Button del core Implementazione esatta del creator installato 5.0.15.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Implementazione Input del core Campo controllato, stato non valido e collegamenti per l’accessibilità.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Aggiornamento alla v5 Migrazione della versione e modifiche alla nomenclatura.](https://gluestack.io/ui/docs/guides/more/upgrade-to-v5)