@beweco/aurora-ui 0.6.79 → 1.0.0-beta.112

package/README.md

@@ -31,6 +31,32 @@ function App() {
 }
 ```
 
+## Consumo en una app (aurora-ui v1, Tailwind 4)
+
+El paquete publica dos ficheros CSS con papeles distintos:
+
+| Export | Fichero | Qué es | Quién lo procesa |
+|---|---|---|---|
+| `@beweco/aurora-ui/theme` | `dist/assets/css/theme.css` | **Fuente** de tokens: `@theme static` + los 14 packs de color + el puente `--accent` a HeroUI v3. Copia literal de `src/styles/theme-tokens.generated.css`, sin compilar. | El Tailwind **de la app**: es lo que hace que genere `bg-primary-100`, `text-secondary-600`, `bg-content1`… |
+| `@beweco/aurora-ui/styles` | `dist/assets/css/styles.css` | CSS **compilado** de la librería: HeroUI v3 + neutralización + utilidades de sus componentes. | Nadie: ya está compilado, solo se incluye. |
+
+Receta para el CSS de entrada de la app:
+
+```css
+/* src/index.css de la app */
+@import "tailwindcss";
+@import "@beweco/aurora-ui/theme";    /* fuente de tokens: @theme static + 14 packs + puente --accent → genera bg-primary-100, text-secondary-600, bg-content1… */
+@import "@beweco/aurora-ui/styles";   /* CSS compilado de la librería: HeroUI v3 + neutralize + utilidades de sus componentes (o `import "@beweco/aurora-ui/styles"` en el entry JS, una de las dos) */
+@source "../src";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+Notas:
+
+- La app **no** importa `@heroui/styles` ni `@heroui/react` directamente: los trae `@beweco/aurora-ui` (dependencia fijada a la versión exacta de HeroUI v3 con la que se construyó).
+- Instalar con versión **exacta** (`"@beweco/aurora-ui": "1.0.0-beta.N"`, sin `^`): las prereleases no son compatibles entre sí bajo semver y un rango arrastraría cambios no probados.
+- `@custom-variant dark` es obligatorio: sin él, Tailwind 4 ata `dark:` a `prefers-color-scheme` en vez de a la clase `.dark`, y el render cambia.
+
 ## Development
 
 ### Prerequisites