@metropolle/design-system 1.0.0-beta.20250821014534.5a59824

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.
Files changed (31) hide show
  1. package/README.md +81 -0
  2. package/dist/css/components.css +323 -0
  3. package/dist/css/tokens.css +90 -0
  4. package/dist/react/components/react/Button/Button.d.ts +27 -0
  5. package/dist/react/components/react/Button/Button.d.ts.map +1 -0
  6. package/dist/react/components/react/Button/index.d.ts +2 -0
  7. package/dist/react/components/react/Button/index.d.ts.map +1 -0
  8. package/dist/react/components/react/GlassCard/GlassCard.d.ts +23 -0
  9. package/dist/react/components/react/GlassCard/GlassCard.d.ts.map +1 -0
  10. package/dist/react/components/react/GlassCard/index.d.ts +2 -0
  11. package/dist/react/components/react/GlassCard/index.d.ts.map +1 -0
  12. package/dist/react/components/react/Typography/Typography.d.ts +39 -0
  13. package/dist/react/components/react/Typography/Typography.d.ts.map +1 -0
  14. package/dist/react/components/react/Typography/index.d.ts +2 -0
  15. package/dist/react/components/react/Typography/index.d.ts.map +1 -0
  16. package/dist/react/components/react/index.d.ts +8 -0
  17. package/dist/react/components/react/index.d.ts.map +1 -0
  18. package/dist/react/index.esm.js +1492 -0
  19. package/dist/react/index.esm.js.map +1 -0
  20. package/dist/react/index.js +1498 -0
  21. package/dist/react/index.js.map +1 -0
  22. package/dist/react/utils/cn.d.ts +6 -0
  23. package/dist/react/utils/cn.d.ts.map +1 -0
  24. package/dist/tokens/colors.json +104 -0
  25. package/dist/tokens/effects.json +110 -0
  26. package/dist/tokens/index.d.ts +40 -0
  27. package/dist/tokens/index.js +48 -0
  28. package/dist/tokens/index.json +470 -0
  29. package/dist/tokens/spacing.json +127 -0
  30. package/dist/tokens/typography.json +127 -0
  31. package/package.json +97 -0
package/README.md ADDED
@@ -0,0 +1,81 @@
1
+ # @metropolle/design-system
2
+
3
+ A unified design system for the Metropolle platform, providing consistent design tokens, React components, and styling utilities.
4
+
5
+ ## 🎨 Features
6
+
7
+ - **Design Tokens**: CSS variables, JSON, and TypeScript definitions
8
+ - **React Components**: Reusable UI components with TypeScript support
9
+ - **Glass Card Design**: Modern glassmorphism components
10
+ - **Typography System**: Consistent text styling and branding
11
+ - **CSS Utilities**: Pre-built CSS classes and variables
12
+
13
+ ## 📦 Installation
14
+
15
+ ```bash
16
+ npm install @metropolle/design-system
17
+ ```
18
+
19
+ ## 🚀 Usage
20
+
21
+ ### React Components
22
+
23
+ ```tsx
24
+ import { GlassCard, Typography, Button } from '@metropolle/design-system';
25
+
26
+ function App() {
27
+ return (
28
+ <GlassCard variant="light">
29
+ <Typography variant="brand">Welcome to Metropolle</Typography>
30
+ <Button>Get Started</Button>
31
+ </GlassCard>
32
+ );
33
+ }
34
+ ```
35
+
36
+ ### Design Tokens
37
+
38
+ ```tsx
39
+ import { tokens, getToken, getCSSVar } from '@metropolle/design-system';
40
+
41
+ // Access token values
42
+ const primaryColor = getToken('colors', 'primary');
43
+ const cssVar = getCSSVar('colors', 'primary');
44
+ ```
45
+
46
+ ### CSS Variables
47
+
48
+ ```css
49
+ @import '@metropolle/design-system/dist/css/tokens.css';
50
+
51
+ .my-component {
52
+ background: var(--mds-colors-primary);
53
+ border-radius: var(--mds-spacing-borderRadius-lg);
54
+ }
55
+ ```
56
+
57
+ ## 📚 Documentation
58
+
59
+ - [Storybook](https://design.metropolle.com) - Interactive component documentation
60
+ - [Design Tokens](https://design.metropolle.com/?path=/docs/introduction--docs) - Token reference
61
+ - [Components](https://design.metropolle.com/?path=/docs/components-glasscard--docs) - Component examples
62
+
63
+ ## 🛠️ Development
64
+
65
+ ```bash
66
+ # Install dependencies
67
+ npm install
68
+
69
+ # Start Storybook
70
+ npm run dev
71
+
72
+ # Build the package
73
+ npm run build
74
+
75
+ # Run tests
76
+ npm test
77
+ ```
78
+
79
+ ## 📄 License
80
+
81
+ MIT License - see LICENSE file for details.
@@ -0,0 +1,323 @@
1
+ /* Metropolle Design System - Component Styles */
2
+
3
+ /* Button Styles */
4
+ .mds-button {
5
+ position: relative;
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ gap: var(--mds-spacing-sm);
10
+
11
+ font-family: var(--mds-typography-fontFamily-brand);
12
+ font-weight: var(--mds-typography-fontWeight-medium);
13
+ text-decoration: none;
14
+
15
+ border: none;
16
+ border-radius: var(--mds-spacing-borderRadius-md);
17
+ cursor: pointer;
18
+ transition: var(--mds-effects-transition-normal);
19
+
20
+ /* Remove default button styles */
21
+ background: none;
22
+ outline: none;
23
+
24
+ /* Prevent text selection */
25
+ -moz-user-select: none;
26
+ user-select: none;
27
+ -webkit-user-select: none;
28
+ }
29
+
30
+ .mds-button:disabled,
31
+ .mds-button--disabled {
32
+ opacity: var(--mds-effects-opacity-disabled);
33
+ cursor: not-allowed;
34
+ pointer-events: none;
35
+ }
36
+
37
+ .mds-button--loading {
38
+ cursor: wait;
39
+ }
40
+
41
+ .mds-button--full-width {
42
+ width: 100%;
43
+ }
44
+
45
+ /* Button Sizes */
46
+ .mds-button--sm {
47
+ padding: var(--mds-spacing-sm) var(--mds-spacing-md);
48
+ font-size: var(--mds-typography-fontSize-sm);
49
+ min-height: 2rem;
50
+ }
51
+
52
+ .mds-button--md {
53
+ padding: var(--mds-spacing-md) var(--mds-spacing-lg);
54
+ font-size: var(--mds-typography-fontSize-base);
55
+ min-height: 2.5rem;
56
+ }
57
+
58
+ .mds-button--lg {
59
+ padding: var(--mds-spacing-lg) var(--mds-spacing-xl);
60
+ font-size: var(--mds-typography-fontSize-lg);
61
+ min-height: 3rem;
62
+ }
63
+
64
+ /* Button Variants */
65
+ .mds-button--primary {
66
+ background: var(--mds-color-brand-primary);
67
+ color: white;
68
+ box-shadow: var(--mds-spacing-shadow-md);
69
+ }
70
+
71
+ .mds-button--primary:hover:not(:disabled) {
72
+ background: #0044CC;
73
+ transform: var(--mds-effects-transform-scale-hover);
74
+ box-shadow: var(--mds-spacing-shadow-lg);
75
+ }
76
+
77
+ .mds-button--primary:active:not(:disabled) {
78
+ transform: var(--mds-effects-transform-scale-active);
79
+ }
80
+
81
+ .mds-button--secondary {
82
+ background: var(--mds-color-brand-secondary);
83
+ color: white;
84
+ box-shadow: var(--mds-spacing-shadow-md);
85
+ }
86
+
87
+ .mds-button--secondary:hover:not(:disabled) {
88
+ background: #E68A00;
89
+ transform: var(--mds-effects-transform-scale-hover);
90
+ box-shadow: var(--mds-spacing-shadow-lg);
91
+ }
92
+
93
+ .mds-button--outline {
94
+ background: transparent;
95
+ color: var(--mds-color-text-primary);
96
+ border: 2px solid var(--mds-color-border-medium);
97
+ }
98
+
99
+ .mds-button--outline:hover:not(:disabled) {
100
+ background: var(--mds-color-background-secondary);
101
+ border-color: var(--mds-color-border-strong);
102
+ }
103
+
104
+ .mds-button--ghost {
105
+ background: transparent;
106
+ color: var(--mds-color-text-primary);
107
+ }
108
+
109
+ .mds-button--ghost:hover:not(:disabled) {
110
+ background: var(--mds-color-background-secondary);
111
+ }
112
+
113
+ .mds-button--glass {
114
+ background: var(--mds-color-background-glass-light);
115
+ color: var(--mds-color-text-primary);
116
+ backdrop-filter: var(--mds-effects-backdrop-glass-filter);
117
+ -webkit-backdrop-filter: var(--mds-effects-backdrop-glass-webkitFilter);
118
+ border: 1px solid var(--mds-color-border-light);
119
+ box-shadow: var(--mds-spacing-shadow-glass-light);
120
+ }
121
+
122
+ .mds-button--glass:hover:not(:disabled) {
123
+ background: var(--mds-color-background-glass-dark);
124
+ border-color: var(--mds-color-border-medium);
125
+ transform: var(--mds-effects-transform-hoverUp);
126
+ box-shadow: var(--mds-spacing-shadow-glass-lightHover);
127
+ }
128
+
129
+ /* Button Icons */
130
+ .mds-button__icon {
131
+ display: inline-flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ }
135
+
136
+ .mds-button__icon--left {
137
+ margin-right: calc(var(--mds-spacing-sm) * -0.5);
138
+ }
139
+
140
+ .mds-button__icon--right {
141
+ margin-left: calc(var(--mds-spacing-sm) * -0.5);
142
+ }
143
+
144
+ .mds-button__content {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ }
148
+
149
+ /* Spinner Animation */
150
+ .mds-spinner {
151
+ animation: mds-spin 1s linear infinite;
152
+ }
153
+
154
+ .mds-spinner__path {
155
+ animation: mds-spinner-dash 2s ease-in-out infinite;
156
+ }
157
+
158
+ @keyframes mds-spin {
159
+ from { transform: rotate(0deg); }
160
+ to { transform: rotate(360deg); }
161
+ }
162
+
163
+ @keyframes mds-spinner-dash {
164
+ 0% {
165
+ stroke-dasharray: 1 40;
166
+ stroke-dashoffset: 0;
167
+ }
168
+ 50% {
169
+ stroke-dasharray: 40 40;
170
+ stroke-dashoffset: -15;
171
+ }
172
+ 100% {
173
+ stroke-dasharray: 40 40;
174
+ stroke-dashoffset: -60;
175
+ }
176
+ }
177
+
178
+ /* Typography Styles */
179
+ .mds-text {
180
+ font-family: var(--mds-typography-fontFamily-brand);
181
+ color: var(--mds-color-text-primary);
182
+ margin: 0;
183
+ }
184
+
185
+ .mds-text--color-primary {
186
+ color: var(--mds-color-text-primary);
187
+ }
188
+
189
+ .mds-text--color-secondary {
190
+ color: var(--mds-color-text-secondary);
191
+ }
192
+
193
+ .mds-text--color-muted {
194
+ color: var(--mds-color-text-muted);
195
+ }
196
+
197
+ /* Font Weights */
198
+ .mds-text--weight-light {
199
+ font-weight: var(--mds-typography-fontWeight-light);
200
+ }
201
+
202
+ .mds-text--weight-normal {
203
+ font-weight: var(--mds-typography-fontWeight-normal);
204
+ }
205
+
206
+ .mds-text--weight-medium {
207
+ font-weight: var(--mds-typography-fontWeight-medium);
208
+ }
209
+
210
+ .mds-text--weight-semibold {
211
+ font-weight: var(--mds-typography-fontWeight-semibold);
212
+ }
213
+
214
+ .mds-text--weight-bold {
215
+ font-weight: var(--mds-typography-fontWeight-bold);
216
+ }
217
+
218
+ /* Font Sizes */
219
+ .mds-text--size-xs {
220
+ font-size: var(--mds-typography-fontSize-xs);
221
+ }
222
+
223
+ .mds-text--size-sm {
224
+ font-size: var(--mds-typography-fontSize-sm);
225
+ }
226
+
227
+ .mds-text--size-base {
228
+ font-size: var(--mds-typography-fontSize-base);
229
+ line-height: var(--mds-typography-lineHeight-normal);
230
+ }
231
+
232
+ .mds-text--size-lg {
233
+ font-size: var(--mds-typography-fontSize-lg);
234
+ }
235
+
236
+ .mds-text--size-xl {
237
+ font-size: var(--mds-typography-fontSize-xl);
238
+ }
239
+
240
+ .mds-text--size-2xl {
241
+ font-size: var(--mds-typography-fontSize-2xl);
242
+ line-height: var(--mds-typography-lineHeight-tight);
243
+ }
244
+
245
+ .mds-text--size-3xl {
246
+ font-size: var(--mds-typography-fontSize-3xl);
247
+ line-height: var(--mds-typography-lineHeight-tight);
248
+ }
249
+
250
+ .mds-text--size-4xl {
251
+ font-size: var(--mds-typography-fontSize-4xl);
252
+ line-height: var(--mds-typography-lineHeight-tight);
253
+ }
254
+
255
+ /* Typography Variants */
256
+ .mds-text--h1,
257
+ .mds-text--h2,
258
+ .mds-text--h3,
259
+ .mds-text--h4 {
260
+ font-weight: var(--mds-typography-fontWeight-semibold);
261
+ line-height: var(--mds-typography-lineHeight-tight);
262
+ }
263
+
264
+ .mds-text--body {
265
+ line-height: var(--mds-typography-lineHeight-normal);
266
+ }
267
+
268
+ .mds-text--caption {
269
+ font-size: var(--mds-typography-fontSize-sm);
270
+ color: var(--mds-color-text-secondary);
271
+ }
272
+
273
+ .mds-text--brand,
274
+ .mds-brand-logo {
275
+ font-size: var(--mds-typography-fontSize-4xl);
276
+ line-height: var(--mds-typography-lineHeight-tight);
277
+ letter-spacing: var(--mds-typography-letterSpacing-brand);
278
+ font-weight: var(--mds-typography-fontWeight-normal);
279
+ color: var(--mds-color-text-primary);
280
+ }
281
+
282
+ /* Brand Logo Responsive */
283
+ @media (max-width: 768px) {
284
+ .mds-text--brand,
285
+ .mds-brand-logo,
286
+ .mds-brand-logo--sm,
287
+ .mds-brand-logo--md,
288
+ .mds-brand-logo--lg {
289
+ font-size: 1.8rem;
290
+ letter-spacing: var(--mds-typography-letterSpacing-tight);
291
+ }
292
+ }
293
+
294
+ /* Glass Card - Enhanced styles (complementing base tokens.css) */
295
+ .mds-glass-card--no-hover:hover {
296
+ transform: none !important;
297
+ box-shadow: inherit !important;
298
+ border-color: inherit !important;
299
+ background: inherit !important;
300
+ }
301
+
302
+ /* Utility Classes */
303
+ .mds-sr-only {
304
+ position: absolute;
305
+ width: 1px;
306
+ height: 1px;
307
+ padding: 0;
308
+ margin: -1px;
309
+ overflow: hidden;
310
+ clip: rect(0, 0, 0, 0);
311
+ white-space: nowrap;
312
+ border: 0;
313
+ }
314
+
315
+ .mds-focus-visible {
316
+ outline: 2px solid var(--mds-color-brand-primary);
317
+ outline-offset: 2px;
318
+ }
319
+
320
+ /* Dark mode support (future) */
321
+ @media (prefers-color-scheme: dark) {
322
+ /* Enhanced styles for dark mode when implemented */
323
+ }
@@ -0,0 +1,90 @@
1
+ :root {
2
+ /* Metropolle Design System Tokens */
3
+
4
+ /* TYPOGRAPHY */
5
+ --mds-typography-fontFamily-brand: Helvetica, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
6
+ --mds-typography-fontFamily-mono: 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
7
+ --mds-typography-fontSize-xs: 0.75rem;
8
+ --mds-typography-fontSize-sm: 0.875rem;
9
+ --mds-typography-fontSize-base: 1rem;
10
+ --mds-typography-fontSize-lg: 1.125rem;
11
+ --mds-typography-fontSize-xl: 1.25rem;
12
+ --mds-typography-fontSize-2xl: 1.5rem;
13
+ --mds-typography-fontSize-3xl: 1.875rem;
14
+ --mds-typography-fontSize-4xl: 2.125rem;
15
+ --mds-typography-lineHeight-tight: 1.2;
16
+ --mds-typography-lineHeight-normal: 1.5;
17
+ --mds-typography-lineHeight-relaxed: 1.75;
18
+ --mds-typography-letterSpacing-brand: -0.05rem;
19
+ --mds-typography-letterSpacing-tight: -0.03rem;
20
+ --mds-typography-letterSpacing-normal: 0;
21
+ --mds-typography-letterSpacing-wide: 0.025rem;
22
+ --mds-typography-fontWeight-light: 300;
23
+ --mds-typography-fontWeight-normal: 400;
24
+ --mds-typography-fontWeight-medium: 500;
25
+ --mds-typography-fontWeight-semibold: 600;
26
+ --mds-typography-fontWeight-bold: 700;
27
+
28
+ /* SPACING */
29
+ --mds-spacing-xs: 0.25rem;
30
+ --mds-spacing-sm: 0.5rem;
31
+ --mds-spacing-md: 1rem;
32
+ --mds-spacing-lg: 1.5rem;
33
+ --mds-spacing-xl: 2rem;
34
+ --mds-spacing-2xl: 3rem;
35
+ --mds-spacing-3xl: 4rem;
36
+
37
+ }
38
+
39
+ /* Glass Card Base Classes */
40
+ .mds-glass-card {
41
+ backdrop-filter: var(--mds-effects-backdrop-glass-filter);
42
+ -webkit-backdrop-filter: var(--mds-effects-backdrop-glass-webkitFilter);
43
+ border-radius: var(--mds-spacing-borderRadius-xl);
44
+ transition: var(--mds-effects-transition-normal);
45
+ padding: var(--mds-spacing-md);
46
+ }
47
+
48
+ .mds-glass-card--light {
49
+ background: var(--mds-color-background-glass-light);
50
+ box-shadow: var(--mds-spacing-shadow-glass-light);
51
+ }
52
+
53
+ .mds-glass-card--dark {
54
+ background: var(--mds-color-background-glass-dark);
55
+ border: 1px solid var(--mds-color-border-light);
56
+ box-shadow: var(--mds-spacing-shadow-glass-dark);
57
+ }
58
+
59
+ .mds-glass-card:hover {
60
+ transform: var(--mds-effects-transform-hoverUp);
61
+ }
62
+
63
+ .mds-glass-card--light:hover {
64
+ box-shadow: var(--mds-spacing-shadow-glass-lightHover);
65
+ }
66
+
67
+ .mds-glass-card--dark:hover {
68
+ box-shadow: var(--mds-spacing-shadow-glass-darkHover);
69
+ border-color: var(--mds-color-border-medium);
70
+ }
71
+
72
+ /* Typography Classes */
73
+ .mds-text {
74
+ font-family: var(--mds-typography-fontFamily-brand);
75
+ color: var(--mds-color-text-primary);
76
+ }
77
+
78
+ .mds-text--brand {
79
+ font-size: var(--mds-typography-fontSize-4xl);
80
+ line-height: var(--mds-typography-lineHeight-tight);
81
+ letter-spacing: var(--mds-typography-letterSpacing-brand);
82
+ font-weight: var(--mds-typography-fontWeight-normal);
83
+ }
84
+
85
+ @media (max-width: 768px) {
86
+ .mds-text--brand {
87
+ font-size: 1.8rem;
88
+ letter-spacing: var(--mds-typography-letterSpacing-tight);
89
+ }
90
+ }
@@ -0,0 +1,27 @@
1
+ import React, { ButtonHTMLAttributes } from 'react';
2
+ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
+ /** Variante visual do botão */
4
+ variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'glass';
5
+ /** Tamanho do botão */
6
+ size?: 'sm' | 'md' | 'lg';
7
+ /** Estado de loading */
8
+ loading?: boolean;
9
+ /** Ícone à esquerda do texto */
10
+ leftIcon?: React.ReactNode;
11
+ /** Ícone à direita do texto */
12
+ rightIcon?: React.ReactNode;
13
+ /** Botão ocupa toda a largura disponível */
14
+ fullWidth?: boolean;
15
+ /** Classes CSS adicionais */
16
+ className?: string;
17
+ /** Conteúdo do botão */
18
+ children: React.ReactNode;
19
+ }
20
+ /**
21
+ * Button Component
22
+ *
23
+ * Componente de botão com variantes baseadas no design system Metropolle.
24
+ * Inclui suporte a glass morphism e estados de loading.
25
+ */
26
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
27
+ //# sourceMappingURL=Button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAClE,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,uFA4DjB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { Button, type ButtonProps } from './Button';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}
@@ -0,0 +1,23 @@
1
+ import React, { HTMLAttributes } from 'react';
2
+ export interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
3
+ /** Variante do glass card */
4
+ variant?: 'light' | 'dark';
5
+ /** Valor do blur em pixels */
6
+ blur?: number;
7
+ /** Opacidade do background (0-1) */
8
+ opacity?: number;
9
+ /** Conteúdo do card */
10
+ children: React.ReactNode;
11
+ /** Classes CSS adicionais */
12
+ className?: string;
13
+ /** Se deve aplicar hover effects */
14
+ enableHover?: boolean;
15
+ }
16
+ /**
17
+ * Glass Card Component
18
+ *
19
+ * Componente de cartão com efeito glassmorphism baseado na identidade Metropolle.
20
+ * Migrado dos componentes Angular existentes com melhorias.
21
+ */
22
+ export declare const GlassCard: React.ForwardRefExoticComponent<GlassCardProps & React.RefAttributes<HTMLDivElement>>;
23
+ //# sourceMappingURL=GlassCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GlassCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/GlassCard/GlassCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,uFAwFpB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { GlassCard, type GlassCardProps } from './GlassCard';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/GlassCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,39 @@
1
+ import React, { HTMLAttributes } from 'react';
2
+ type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption' | 'brand';
3
+ type TypographySizes = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
4
+ export interface TypographyProps extends HTMLAttributes<HTMLElement> {
5
+ /** Variante semântica do texto */
6
+ variant?: TypographyVariant;
7
+ /** Tamanho específico (sobrescreve variant) */
8
+ size?: TypographySizes;
9
+ /** Elemento HTML a ser renderizado */
10
+ as?: keyof JSX.IntrinsicElements;
11
+ /** Conteúdo do texto */
12
+ children: React.ReactNode;
13
+ /** Classes CSS adicionais */
14
+ className?: string;
15
+ /** Cor do texto */
16
+ color?: 'primary' | 'secondary' | 'muted';
17
+ /** Peso da fonte */
18
+ weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
19
+ }
20
+ /**
21
+ * Typography Component
22
+ *
23
+ * Sistema de tipografia baseado nos design tokens da Metropolle.
24
+ * Implementa a identidade tipográfica Helvetica com letter-spacing característico.
25
+ */
26
+ export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
27
+ /**
28
+ * Brand Logo Component
29
+ *
30
+ * Componente específico para o logo da marca Metropolle
31
+ * com tipografia e espaçamento característicos.
32
+ */
33
+ export interface BrandLogoProps extends Omit<TypographyProps, 'variant' | 'as' | 'size'> {
34
+ /** Tamanho do logo */
35
+ size?: 'sm' | 'md' | 'lg';
36
+ }
37
+ export declare const BrandLogo: React.ForwardRefExoticComponent<BrandLogoProps & React.RefAttributes<HTMLHeadingElement>>;
38
+ export {};
39
+ //# sourceMappingURL=Typography.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1D,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAClF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAElF,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1C,oBAAoB;IACpB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;CAC9D;AAsBD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,qFA6BrB,CAAC;AAIH;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;IACtF,sBAAsB;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,2FA2BpB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC"}
@@ -0,0 +1,8 @@
1
+ export { GlassCard, type GlassCardProps } from './GlassCard';
2
+ export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
3
+ export { Button, type ButtonProps } from './Button';
4
+ export { cn } from '../../utils/cn';
5
+ export * from './GlassCard';
6
+ export * from './Typography';
7
+ export * from './Button';
8
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}