ies2-aulapp-ui-kit 0.1.10 → 0.1.13
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/README.md +2 -2
- package/dist/components/ui/resource-badge.d.ts +4 -3
- package/dist/components/ui/switch.d.ts +2 -2
- package/dist/ies2-aulapp-ui-kit.css +170 -0
- package/dist/index.cjs.js +2 -2
- package/dist/index.es.js +217 -208
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,8 +29,8 @@ pnpm install
|
|
|
29
29
|
| Comando | Descrição |
|
|
30
30
|
| ---------------------- | --------------------------------------------------------------------------------------- |
|
|
31
31
|
| `pnpm dev` | Playground local (`src/App.tsx`) para inspecionar o kit em tempo real. |
|
|
32
|
-
| `pnpm build` | Build padrão (dev/preview do repo).
|
|
33
|
-
| `pnpm build:lib` | Gera os artefatos em `dist/` (ESM, CJS, tipos e `style.css`) prontos para publicação.
|
|
32
|
+
| `pnpm build` | Build padrão (dev/preview do repo). |
|
|
33
|
+
| `pnpm build:lib` | Gera os artefatos em `dist/` (ESM, CJS, tipos e `style.css`) prontos para publicação. |
|
|
34
34
|
| `pnpm storybook` | Sobe o Storybook em `http://localhost:6006` com Tailwind e Iconsax carregados. |
|
|
35
35
|
| `pnpm storybook:build` | Exporta a documentação estática para `storybook-static/`. |
|
|
36
36
|
| `pnpm test` | Executa o Vitest com o addon do Storybook (cada story roda em Chromium via Playwright). |
|
|
@@ -2,6 +2,7 @@ declare const APPEARANCE_LABELS: {
|
|
|
2
2
|
readonly solid: "Colorido sólido";
|
|
3
3
|
readonly white: "Cartão branco";
|
|
4
4
|
readonly ghost: "Ghost colorido";
|
|
5
|
+
readonly 'icon-only': "Apenas ícone";
|
|
5
6
|
};
|
|
6
7
|
export type ResourceBadgeAppearance = keyof typeof APPEARANCE_LABELS;
|
|
7
8
|
declare const RESOURCE_TYPES: {
|
|
@@ -44,10 +45,10 @@ export declare function ResourceBadge({ variant, appearance, className, style, .
|
|
|
44
45
|
export declare const resourceBadges: {
|
|
45
46
|
variant: "conteudo" | "avaliacao" | "lista" | "gamificada" | "simulado" | "material" | "concluido";
|
|
46
47
|
label: string;
|
|
47
|
-
onlyAppearances: ("ghost" | "solid" | "white")[] | undefined;
|
|
48
|
+
onlyAppearances: ("ghost" | "solid" | "white" | "icon-only")[] | undefined;
|
|
48
49
|
}[];
|
|
49
50
|
export declare const resourceBadgeAppearances: {
|
|
50
|
-
appearance: "ghost" | "solid" | "white";
|
|
51
|
-
label: "Colorido sólido" | "Cartão branco" | "Ghost colorido";
|
|
51
|
+
appearance: "ghost" | "solid" | "white" | "icon-only";
|
|
52
|
+
label: "Colorido sólido" | "Cartão branco" | "Ghost colorido" | "Apenas ícone";
|
|
52
53
|
}[];
|
|
53
54
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import * as SwitchPrimitives from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
3
3
|
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
4
4
|
export { Switch };
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Estilos publicados do UI Kit (para apps consumidores)
|
|
3
|
+
*
|
|
4
|
+
* Objetivo: permitir um único import global (ex.: em main.tsx) sem
|
|
5
|
+
* sobrescrever as utilities/responsividade do Tailwind do app.
|
|
6
|
+
*
|
|
7
|
+
* Por isso, este CSS foi reduzido a:
|
|
8
|
+
* - tokens (CSS variables)
|
|
9
|
+
* - estilos utilitários *específicos* do kit (ex.: button-shine-layer)
|
|
10
|
+
*
|
|
11
|
+
* Não incluímos `@import 'tailwindcss'` aqui, para não trazer:
|
|
12
|
+
* - Preflight/reset
|
|
13
|
+
* - Utilities globais (.text-*, .md:*, etc.)
|
|
14
|
+
* que podem competir com o Tailwind do consumidor.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
@custom-variant dark (&:is(.dark *));
|
|
18
|
+
|
|
19
|
+
:root {
|
|
20
|
+
--background: oklch(1 0 0);
|
|
21
|
+
--foreground: oklch(0.145 0 0);
|
|
22
|
+
--card: oklch(1 0 0);
|
|
23
|
+
--card-foreground: oklch(0.145 0 0);
|
|
24
|
+
--popover: oklch(1 0 0);
|
|
25
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
26
|
+
--primary: oklch(0.205 0 0);
|
|
27
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
28
|
+
--secondary: oklch(0.97 0 0);
|
|
29
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
30
|
+
--muted: oklch(0.97 0 0);
|
|
31
|
+
--muted-foreground: oklch(0.655 0 0);
|
|
32
|
+
--accent: oklch(0.97 0 0);
|
|
33
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
34
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
35
|
+
--destructive-foreground: 0 0% 98%;
|
|
36
|
+
--border: oklch(0.922 0 0);
|
|
37
|
+
--input: oklch(0.922 0 0);
|
|
38
|
+
--ring: oklch(0.708 0 0);
|
|
39
|
+
--radius: 0.625rem;
|
|
40
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
41
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
42
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
43
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
44
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
45
|
+
--sidebar: oklch(0.985 0 0);
|
|
46
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
47
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
48
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
49
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
50
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
51
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
52
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
53
|
+
--button-solid-bg: #ff246e;
|
|
54
|
+
--button-solid-foreground: #ffffff;
|
|
55
|
+
--button-solid-shadow: 0 20px 45px rgba(255, 36, 110, 0.35);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.dark {
|
|
59
|
+
--background: oklch(0.145 0 0);
|
|
60
|
+
--foreground: oklch(0.985 0 0);
|
|
61
|
+
--card: oklch(0.205 0 0);
|
|
62
|
+
--card-foreground: oklch(0.985 0 0);
|
|
63
|
+
--popover: oklch(0.205 0 0);
|
|
64
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
65
|
+
--primary: oklch(0.922 0 0);
|
|
66
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
67
|
+
--secondary: oklch(0.269 0 0);
|
|
68
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
69
|
+
--muted: oklch(0.269 0 0);
|
|
70
|
+
--muted-foreground: oklch(0.85 0 0);
|
|
71
|
+
--accent: oklch(0.269 0 0);
|
|
72
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
73
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
74
|
+
--destructive-foreground: 0 85.7% 97.3%;
|
|
75
|
+
--border: oklch(1 0 0 / 10%);
|
|
76
|
+
--input: oklch(1 0 0 / 15%);
|
|
77
|
+
--ring: oklch(0.556 0 0);
|
|
78
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
79
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
80
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
81
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
82
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
83
|
+
--sidebar: oklch(0.205 0 0);
|
|
84
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
85
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
86
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
87
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
88
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
89
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
90
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@theme inline {
|
|
94
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
95
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
96
|
+
--radius-lg: var(--radius);
|
|
97
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
98
|
+
--color-background: var(--background);
|
|
99
|
+
--color-foreground: var(--foreground);
|
|
100
|
+
--color-card: var(--card);
|
|
101
|
+
--color-card-foreground: var(--card-foreground);
|
|
102
|
+
--color-popover: var(--popover);
|
|
103
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
104
|
+
--color-primary: var(--primary);
|
|
105
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
106
|
+
--color-secondary: var(--secondary);
|
|
107
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
108
|
+
--color-muted: var(--muted);
|
|
109
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
110
|
+
--color-accent: var(--accent);
|
|
111
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
112
|
+
--color-destructive: var(--destructive);
|
|
113
|
+
--color-border: var(--border);
|
|
114
|
+
--color-input: var(--input);
|
|
115
|
+
--color-ring: var(--ring);
|
|
116
|
+
--color-chart-1: var(--chart-1);
|
|
117
|
+
--color-chart-2: var(--chart-2);
|
|
118
|
+
--color-chart-3: var(--chart-3);
|
|
119
|
+
--color-chart-4: var(--chart-4);
|
|
120
|
+
--color-chart-5: var(--chart-5);
|
|
121
|
+
--color-sidebar: var(--sidebar);
|
|
122
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
123
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
124
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
125
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
126
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
127
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
128
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@keyframes button-shine {
|
|
132
|
+
0% {
|
|
133
|
+
background-position: -100% 50%;
|
|
134
|
+
}
|
|
135
|
+
50% {
|
|
136
|
+
background-position: 100% 50%;
|
|
137
|
+
}
|
|
138
|
+
100% {
|
|
139
|
+
background-position: 200% 50%;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.button-shine-layer {
|
|
144
|
+
border-radius: inherit;
|
|
145
|
+
background-image: var(
|
|
146
|
+
--button-shine-gradient,
|
|
147
|
+
linear-gradient(
|
|
148
|
+
120deg,
|
|
149
|
+
transparent 20%,
|
|
150
|
+
#ff57af 35%,
|
|
151
|
+
#ffe864 45%,
|
|
152
|
+
#487bff 60%,
|
|
153
|
+
transparent 85%
|
|
154
|
+
)
|
|
155
|
+
);
|
|
156
|
+
background-size: 250% 250%;
|
|
157
|
+
background-position: 200% 0;
|
|
158
|
+
background-repeat: no-repeat;
|
|
159
|
+
mix-blend-mode: screen;
|
|
160
|
+
opacity: 0;
|
|
161
|
+
transition:
|
|
162
|
+
opacity 200ms ease,
|
|
163
|
+
background-position 0s ease;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.group:hover .button-shine-layer {
|
|
167
|
+
opacity: 1;
|
|
168
|
+
background-position: -100% 0;
|
|
169
|
+
transition-duration: 1500ms;
|
|
170
|
+
}
|