flysoft-react-ui 1.4.1 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/claude/skills/flysoft-ui/SKILL.md +25 -3
- package/claude/skills/flysoft-ui/references/display.md +1 -1
- package/claude/skills/flysoft-ui/references/forms.md +1 -1
- package/claude/skills/flysoft-ui/references/hooks.md +1 -1
- package/claude/skills/flysoft-ui/references/layout.md +1 -1
- package/claude/skills/flysoft-ui/references/services.md +1 -1
- package/claude/skills/flysoft-ui/references/templates.md +1 -1
- package/claude/skills/flysoft-ui/references/theming.md +14 -1
- package/package.json +1 -1
|
@@ -12,12 +12,34 @@ desde el paquete raíz — nunca desde rutas internas:
|
|
|
12
12
|
import { Card, DataTable, Input, Button, useAsyncRequest } from "flysoft-react-ui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
## Cómo entran los estilos
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
import "flysoft-react-ui/styles"
|
|
17
|
+
Los estilos entran una sola vez. **Importalos desde el CSS de la app, dentro de
|
|
18
|
+
una capa**, no con un `import "flysoft-react-ui/styles"` en el entry de JS:
|
|
19
|
+
|
|
20
|
+
```css
|
|
21
|
+
/* index.css de la app — el orden de capas va antes que cualquier @import */
|
|
22
|
+
@layer flysoft, base, components, utilities;
|
|
23
|
+
|
|
24
|
+
@import "flysoft-react-ui/styles" layer(flysoft);
|
|
25
|
+
@import "tailwindcss";
|
|
19
26
|
```
|
|
20
27
|
|
|
28
|
+
El motivo importa, porque el modo de fallar es silencioso. La librería importa
|
|
29
|
+
`tailwindcss/theme` y `tailwindcss/utilities` por separado para saltear
|
|
30
|
+
Preflight, y al hacerlo pierde la asignación de capa que Tailwind hace en su
|
|
31
|
+
`index.css`: **sus utilities se publican sin capa**. En CSS, lo que no está en
|
|
32
|
+
ninguna capa le gana a todo lo que sí — así que sin este `layer(flysoft)` los
|
|
33
|
+
estilos de la librería pisan los de la app aunque la app tenga más
|
|
34
|
+
especificidad, y no hay forma de ganarles salvo con `!important`.
|
|
35
|
+
|
|
36
|
+
Declarando `flysoft` como la primera capa, la librería queda con la prioridad
|
|
37
|
+
más baja y la app la puede sobreescribir normalmente.
|
|
38
|
+
|
|
39
|
+
Si la app no usa capas para nada, `import "flysoft-react-ui/styles"` en el entry
|
|
40
|
+
alcanza. En cuanto la app pone algo en una capa —lo hace cualquier proyecto con
|
|
41
|
+
Tailwind v4— necesita la forma de arriba.
|
|
42
|
+
|
|
21
43
|
Los componentes se pintan con variables CSS del tema (`--color-*`, `--radius-*`)
|
|
22
44
|
y escalan con la densidad activa. No lleva colores hardcodeados y no hace falta
|
|
23
45
|
configurarle nada por componente: el tema y la densidad se setean una vez en el
|
|
@@ -1,10 +1,23 @@
|
|
|
1
|
-
<!-- Generado desde los tipos de flysoft-react-ui@1.4.
|
|
1
|
+
<!-- Generado desde los tipos de flysoft-react-ui@1.4.3. No editar a mano. -->
|
|
2
2
|
<!-- Regenerar con: npm run docs:skill -->
|
|
3
3
|
|
|
4
4
|
# Tema, densidad y variables CSS
|
|
5
5
|
|
|
6
6
|
Los nombres de las variables CSS salen del bloque `@theme` de `src/index.css` y de los mapas de tokens de `src/contexts/`, no de los tipos.
|
|
7
7
|
|
|
8
|
+
## Cómo se importa la hoja de estilos
|
|
9
|
+
|
|
10
|
+
Desde el CSS de la app y **dentro de una capa**:
|
|
11
|
+
|
|
12
|
+
```css
|
|
13
|
+
@layer flysoft, base, components, utilities;
|
|
14
|
+
|
|
15
|
+
@import "flysoft-react-ui/styles" layer(flysoft);
|
|
16
|
+
@import "tailwindcss";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
La librería importa `tailwindcss/theme` y `tailwindcss/utilities` por separado para saltear Preflight, y con eso pierde la asignación de capa que Tailwind hace en su `index.css`: sus utilities se publican **sin capa**, y en CSS lo que no está en ninguna capa le gana a todo lo que sí. Sin `layer(flysoft)`, los estilos de la librería pisan los de la app. Ver `../SKILL.md` para el detalle.
|
|
20
|
+
|
|
8
21
|
## Cómo leer las variables
|
|
9
22
|
|
|
10
23
|
Hay dos namespaces y no son intercambiables:
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flysoft-react-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.4.
|
|
4
|
+
"version": "1.4.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "A modern React UI component library with Tailwind CSS, TypeScript, and FontAwesome 5. Includes forms, layouts, themes, and templates for rapid development.",
|
|
7
7
|
"keywords": [
|