# Sistema de diseño gluestack UI

## Vista previa de la interfaz del sistema de diseño gluestack UI

Añade un elemento único, márcalo como empacado y revisa el progreso derivado.

## Referencia de diseño del sistema de diseño gluestack UI

La referencia distingue los colores claros documentados de v5 del API de los creadores del núcleo instalado. Los creadores directos no aplican automáticamente el tema de CLI. La vista previa asigna explícitamente los colores indicados a estilos originales y usa un contorno de foco personalizado más marcado. La geometría y las ilustraciones son decisiones de la aplicación.

### Funciones de color claro documentadas de v5

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| background | #ffffff | Lienzo de página. |
| foreground | #0a0a0a | Texto normal legible. |
| card | #ffffff | Superficie de tarjeta. |
| popover | #ffffff | Superficie de superposición; en este ejemplo no se usa ningún menú emergente. |
| popover-foreground | #0a0a0a | Texto combinado con la superficie de superposición. |
| muted | #f5f5f5 | Superficies de apoyo, incluido el panel de ilustración original. |
| muted-foreground | #737373 | Descripciones secundarias y detalles de estado. |
| destructive | #e7000b | Aviso de entrada no válida; el error también se muestra como texto. |
| border | #e5e5e5 | Contornos de tarjetas y separadores de listas. |
| input | #e5e5e5 | Borde del campo en reposo. |
| ring | #d4d4d4 | Color de anillo predeterminado documentado; este estudio utiliza un contorno de foco original más marcado, #737373. |
| primary | #171717 | Superficie de acción principal y relleno de progreso. |
| primary-foreground | #fafafa | Texto combinado con la superficie de acción oscura. |
| secondary | #f5f5f5 | Superficie de acción de menor énfasis. |
| secondary-foreground | #171717 | Texto combinado con superficies secundarias. |
| accent | #f7f7f7 | Rol de superficie de acento adicional. |
| accent-foreground | #343434 | Texto combinado con el rol de acento. |
### Factoría Button principal y estados

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| createButton | { Root, Text, Group, Spinner, Icon } | Proporciona los componentes host reales; el creador añade comportamiento, no un tema completo. |
| Button.Text | Text host | Mantiene el texto del botón dentro del contexto de su estado. |
| Button.Group | Group host | Subcomponente generado para agrupar botones; no se utiliza en esta composición. |
| Button.Spinner | Spinner host | Indicador de carga generado; no lo muestres para una acción local instantánea. |
| Button.Icon | Icon host | Subcomponente de icono generado; la vista previa utiliza acciones con texto explícito. |
| Button isDisabled | boolean | Desactiva la acción de pulsación real, no solo su apariencia. |
| Button data-focus-visible | true / false | El CSS original aplica un contorno visible al recibir el foco del teclado. |
| Button data-active | true / false | Expone un estado de interacción pulsado para aplicar estilos. |
### Contexto Core Input y propiedades del componente host

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| createInput | { Root, Icon, Slot, Input } | Crea el contexto del campo y sus espacios relacionados. |
| Input.Input | TextInput host | El componente de entrada de texto que devuelve el creador. |
| isInvalid | Input root boolean | Propaga el contexto no válido y aria-invalid al campo. |
| isRequired | Input root boolean | Propaga el estado obligatorio; la aplicación sigue validando el recorte del texto por su cuenta. |
| value / onChangeText | Controlled TextInput props | Mantén el texto en edición en el estado de React. |
| onSubmitEditing | TextInput callback | Añade un elemento al pulsar Enter en este ejemplo para navegador. |
| maxLength | 60 in the original study | Un límite de TextInput elegido para esta aplicación; no es un valor predeterminado de gluestack. |
| aria-label | Item name in the original study | Asigna un nombre al campo de entrada, además de una etiqueta visible. |
## Guía completa del sistema de diseño gluestack UI

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Versiones, creadores y componentes generados del sistema de diseño gluestack UI

### Elige la ruta de implementación adecuada

> gluestack tiene más de una capa. El flujo de instalación estándar genera componentes con estilos directamente en una aplicación. En cambio, este estudio importa createButton y createInput del paquete core instalado y proporciona componentes host de React Native Web. La distinción importa: instalar solo core no proporciona las variantes de botón generadas ni el tema completo.

El ejemplo en ejecución fija las versiones core 5.0.15 y utils 5.0.6. Sus adaptadores de React Native Web son componentes reales, mientras que la estructura y el estado son originales. Consulta la documentación de instalación si vas a crear una aplicación completa con Expo o Next.js; utiliza los archivos completos de aquí para reproducir este estudio específico para navegador.

## Colores semánticos y estilos explícitos del sistema de diseño gluestack UI

### Asigna los roles antes de elegir los adornos

La página utiliza un lienzo blanco con una acción principal oscura, áreas de apoyo atenuadas y roles de borde visibles. Estos valores se toman de la paleta clara v5 documentada y luego se asignan explícitamente mediante estilos de React Native y CSS estándar. Ningún proveedor de ejecución los aplica de forma implícita.

Un campo no válido combina un contorno de color destructivo con una explicación legible y la devolución del foco. El contorno de foco original es más oscuro que el anillo predeterminado documentado, por lo que la hoja de estilos identifica esa elección en lugar de presentarla como un token de la biblioteca.

### Planifica las migraciones con cuidado

No combines a ciegas los ejemplos antiguos que utilizan nombres de paleta numéricos con el vocabulario semántico de v5. Revisa la configuración generada instalada y la guía de actualización antes de sustituir el nombre de un token. Un estudio directo del creador puede mostrar el comportamiento, pero no demuestra que la migración completa de una aplicación haya terminado.

## Composición de Button y acciones de teclado del sistema de diseño gluestack UI

### Proporciona todos los componentes host al creador

createButton recibe Pressable, Text, View, ActivityIndicator y un componente host para iconos. Devuelve Button y los subcomponentes Text, Group, Spinner e Icon. El ejemplo completo utiliza Button.Text en vez de colocar una cadena sin más en la raíz del elemento interactivo.

Empaquetar es una transición de estado síncrona, así que no se inventa un indicador de carga ni una demora de guardado. Cada acción incluye el nombre del elemento en su etiqueta accesible. La acción visible cambia entre «Empaquetar elemento» y «Desempaquetar» para que el siguiente efecto siga siendo claro.

### Comprueba el comportamiento renderizado

1. Ve con Tab a una acción «Empaquetar elemento» y pulsa Espacio.

2. Confirma que cambian tanto el estado de empaquetado textual como el valor de progreso.

3. Utiliza «Desempaquetar» y confirma que el mismo elemento permanece en la lista.

4. Inspecciona el contorno de foco; no des por hecho que pasar el ratón por encima demuestra que se admite el teclado.

## Contexto de Input y validación completa del sistema de diseño gluestack UI

### Valida el valor que se va a guardar

El campo permanece controlado mediante value y onChangeText. Al añadir, primero se eliminan los espacios sobrantes del texto en edición; si queda vacío, se rechaza. Después, se comparan los nombres sin distinguir mayúsculas de minúsculas. Si se rechaza el valor, permanece en el campo para que el usuario pueda corregirlo.

El elemento raíz recibe isInvalid e isRequired; el campo real recibe la etiqueta, la referencia a la descripción y una ref para restaurar el foco. La validación corresponde a la aplicación: marcar un campo core como obligatorio no crea la regla para nombres duplicados.

### Gestiona todos los estados visibles del campo

- Inicial: el campo está vacío y se muestra el indicador de longitud.

- No válido: la explicación aparece en una alerta y el campo recibe el foco.

- Edición: el texto de error obsoleto desaparece cuando el usuario modifica el texto en edición.

- Aceptado: aparece una nueva fila sin empaquetar, se vacía el campo y el estado anuncia que se añadió el elemento.

## Identidad estable y progreso derivado del sistema de diseño gluestack UI

### Guarda los elementos y calcula el resumen

Cada elemento tiene un id numérico estable, un nombre y una marca de empaquetado. Una ref proporciona los nuevos id; el nombre mostrado no se utiliza como clave de React. Los cambios se aplican por id, así que dos actualizaciones independientes de la interfaz no pueden modificar por accidente otra fila.

El numerador del progreso se calcula a partir de las marcas de empaquetado y el denominador, a partir de la lista actual. Añadir un elemento sin empaquetar puede reducir el porcentaje sin perder los elementos ya empaquetados. Es la consecuencia correcta de ampliar la lista de comprobación, no un error de animación.

### Haz que restablecer sea una acción local explícita

Restablecer recupera los tres elementos de ejemplo, borra el texto en edición y el error, reinicia el siguiente id y anuncia el resultado. Al volver a cargar la página también se inicia con el estado de ejemplo. Esta vista previa no utiliza servidor, sincronización de cuentas ni almacenamiento persistente.

## Diseño adaptable e ilustración original del sistema de diseño gluestack UI

### Distingue el comportamiento del componente host de la geometría de la página

En la composición de escritorio, la lista de verificación aparece junto al panel de entrada. A 700 píxeles, pasa a una sola columna. Las filas se ajustan cuando es necesario y los nombres largos de los elementos se dividen dentro del espacio disponible; una acción de ancho fijo no debería desplazar todo el documento horizontalmente.

El cuaderno y el lápiz son formas originales de CSS, no recursos de marca de gluestack copiados. El radio de 14 píxeles de la tarjeta, el espaciado de 24 píxeles entre paneles y la escala de los encabezados son decisiones del estudio. La tabla de referencia los mantiene separados de los roles de color documentados.

## Accesibilidad y alcance de plataforma del sistema de diseño de gluestack UI

### Prueba el entorno representado realmente

La vista previa renderiza React Native Web y se ha comprobado en un navegador. No demuestra el comportamiento nativo en iOS o Android. Una aplicación de Expo debe verificar por separado los objetivos táctiles, los anuncios del lector de pantalla, la adaptación al teclado y la navegación de la plataforma.

El elemento de progreso incluye su nombre, valor mínimo, valor máximo y valor actual. Un estado dinámico describe las acciones completadas sin apartar al lector de la lista de verificación. Si se rechaza el formulario, conserva el borrador y devuelve el foco al campo. Estas responsabilidades de la aplicación se añaden al comportamiento nativo básico.

## Compilación completa y límites de dependencias del sistema de diseño de gluestack UI

### Reproduce este estudio exacto

Guarda los cuatro archivos de Ejemplos de componentes en un mismo directorio e instala los paquetes fijados que se indican a continuación. La compilación asigna react-native a react-native-web, ya que las importaciones del núcleo usan internamente el nombre del módulo nativo. El código fuente importa directamente los hosts de navegador y nunca carga un entorno de ejecución de Expo.

La instalación reducida de paquetes usa la resolución heredada de dependencias entre pares para este subconjunto exclusivo de web. No es una recomendación para una aplicación nativa completa: la biblioteca completa declara dependencias entre pares para integraciones nativas, SVG y de áreas seguras que este paquete de dos creadores no utiliza. Añade las dependencias entre pares adecuadas al ampliar el conjunto de componentes.

### Cambia una capa a la vez

1. Compila los archivos sin modificar y verifica las acciones de añadir, rechazar duplicados, guardar y restablecer.

2. Cambia el diseño original o el contenido de la aplicación sin alterar la configuración de los creadores.

3. Si adoptas componentes de NativeWind generados, sustituye el estilo y la configuración del proveedor como un paso de integración independiente.

4. Después del cambio, vuelve a comprobar el comportamiento del teclado y las plataformas de destino reales.

## Ejemplos de componentes del sistema de diseño de gluestack UI

### app.jsx — estudio completo del componente principal

Configuración real de los creadores y modelo de estado completo de la lista de verificación.

```
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/>);
```

Referencia de código

### style.css — diseño original y roles claros explícitos

Estructura adaptable completa, ilustraciones, contornos de estado y tratamiento del foco del navegador.

```
*{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}}
```

Referencia de código

### build.mjs — configuración completa del empaquetador web

El alias de importación nativa es necesario aunque app.jsx importe sus hosts desde 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"'}});
```

Referencia de código

### index.html — entrada completa del navegador

Mantén este archivo junto a style.css y al app.js generado.

```
<!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>
```

Referencia de código

## Configuración del agente del sistema de diseño de gluestack UI

### Punto de partida para la implementación

Guarda primero los cuatro archivos completos. Esta configuración se limita al subconjunto de navegador mostrado y no inicializa NativeWind, Uniwind, Expo ni un registro de componentes generado.

```
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/
```

### Una instrucción para tu proyecto

```
Implementa el estudio completo en navegador de gluestack core 5.0.15 para el kit de campo mediante createButton/createInput y hosts de React Native Web. Conserva los ID estables, el texto controlado del borrador, la validación de espacios y duplicados, la restauración del foco, el recuento derivado de elementos guardados, el restablecimiento local y la asignación explícita de roles claros de v5. Mantén separadas las decisiones de diseño originales de los valores predeterminados de la biblioteca. No afirmes que se ha probado en móviles nativos ni que hay persistencia en el backend.
```

## Fuentes y alcance del sistema de diseño de gluestack UI

Comportamiento real de @gluestack-ui/core 5.0.15 a través de React Native Web 0.21.3. El diseño del kit de campo, las ilustraciones y el modelo de estado son obra original de OpenDesign. Este ejemplo de navegador con creadores directos usa estilos explícitos; no es el conjunto de componentes NativeWind/Uniwind generado por CLI y no se ha probado en iOS ni Android.

- Instalación La ruta de instalación estándar de los componentes generados.

- Tokens semánticos de v5 Roles de color claros actuales y personalización.

- Botón API Anatomía, interacción y atributos de estado del botón.

- Fábrica de botones del núcleo Implementación exacta del creador instalado en la versión 5.0.15.

- Implementación de Input del núcleo Campo controlado, estado no válido y configuración de accesibilidad.

- Actualización a v5 Migración de versión y cambios de nomenclatura.

## Recursos relacionados del sistema de diseño de gluestack UI

### Headless UI

Headless UI proporciona componentes de interacción React sin estilos para diálogos, listas desplegables y conmutadores. Esta guía se centra en combinar su comportamiento nativo de enfoque, selección y ventanas emergentes con CSS convencional, usando como ejemplo práctico un flujo para compartir documentos.

### HeroUI

Una referencia de HeroUI v3 con variables CSS semánticas reales, controles compuestos de React, superficies claras y oscuras, y una receta funcional para exportar imágenes.

### Ionic Framework

Una interfaz nativa de Ionic para las preferencias de lectura, con roles de color verificados, geometría de controles deslizantes para iOS y Material, comportamiento real de segmentos y conmutadores, y un artículo que responde a las preferencias de fuente, tamaño y papel.


- [Referencia de implementación](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Fuente](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Fuente](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Fuente](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Referencia de código](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Referencia de código](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Referencia de código](https://github.com/gluestack/gluestack-ui)
- [Instalación La ruta de instalación estándar de los componentes generados.](https://gluestack.io/ui/docs/home/getting-started/installation)
- [Tokens semánticos de v5 Roles de color claros actuales y personalización.](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Botón API Anatomía, interacción y atributos de estado del botón.](https://gluestack.io/ui/docs/components/button)
- [Fábrica de botones del núcleo Implementación exacta del creador instalado en la versión 5.0.15.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Implementación de Input del núcleo Campo controlado, estado no válido y configuración de accesibilidad.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Actualización a v5 Migración de versión y cambios de nomenclatura.](https://gluestack.io/ui/docs/guides/more/upgrade-to-v5)