@x-green/components 0.1.0
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 +203 -0
- package/dist/components/button-variants.d.ts +37 -0
- package/dist/components/button.d.ts +6 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/index.css +3 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +523 -0
- package/dist/tokens/index.d.ts +8 -0
- package/dist/tokens/primitives/colors.d.ts +234 -0
- package/dist/tokens/primitives/typography.d.ts +32 -0
- package/dist/tokens/semantic/colors.d.ts +201 -0
- package/dist/tokens/semantic/typography.d.ts +100 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# XGreen UI
|
|
2
|
+
|
|
3
|
+
Tipografia, cores e componentes do Design System em TypeScript. A entrada pública é `src/index.ts`. React e Vite servem a amostra (`/tipografia`, `/cores`, `/componentes/botao`).
|
|
4
|
+
|
|
5
|
+
No app que instalar o pacote:
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Button } from '@x-green/components'
|
|
9
|
+
|
|
10
|
+
<Button>
|
|
11
|
+
Continuar
|
|
12
|
+
</Button>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
O CSS do `Button` entra junto com o import. Não precisa importar um arquivo de estilo.
|
|
16
|
+
|
|
17
|
+
## Executar e validar
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
npm install
|
|
21
|
+
npm run dev
|
|
22
|
+
npm run typecheck
|
|
23
|
+
npm run lint
|
|
24
|
+
npm run build
|
|
25
|
+
npm run preview
|
|
26
|
+
npm run build:lib
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
`typecheck` executa `tsc -b`. `build` gera a amostra em `site/`. `build:lib` gera o pacote em `dist/` (JS, CSS e tipos). `tailwindcss`, `@tailwindcss/vite` e `@tanstack/router-plugin` são de desenvolvimento; `tailwind-variants` é dependência da lib; `react` e `react-dom` são peer dependencies.
|
|
30
|
+
|
|
31
|
+
## Publicar no npm
|
|
32
|
+
|
|
33
|
+
```sh
|
|
34
|
+
npm login
|
|
35
|
+
npm publish
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`prepublishOnly` já roda typecheck, lint e `build:lib`. Só sobe a pasta `dist/`. A amostra não entra no pacote. O pacote é `@x-green/components` (org `x-green`).
|
|
39
|
+
|
|
40
|
+
## Estrutura
|
|
41
|
+
|
|
42
|
+
```text
|
|
43
|
+
src/
|
|
44
|
+
├── tokens/
|
|
45
|
+
│ ├── primitives/typography.ts
|
|
46
|
+
│ ├── primitives/colors.ts
|
|
47
|
+
│ ├── semantic/typography.ts
|
|
48
|
+
│ ├── semantic/colors.ts # Primary e estados do botão
|
|
49
|
+
│ ├── index.ts # Tokens e tipos públicos
|
|
50
|
+
│ └── tailwind.ts # Adaptador para o Tailwind
|
|
51
|
+
├── components/
|
|
52
|
+
│ └── button.tsx # Button com tailwind-variants
|
|
53
|
+
├── screens/
|
|
54
|
+
│ ├── layout/ # Header, sidebar e chrome da demonstração
|
|
55
|
+
│ ├── tipografia/
|
|
56
|
+
│ ├── cores/
|
|
57
|
+
│ └── componentes/
|
|
58
|
+
├── routes/ # Páginas da demonstração (TanStack Router)
|
|
59
|
+
├── index.ts # Reexporta tokens e componentes (entrada do npm)
|
|
60
|
+
├── index.lib.ts # Entrada do build da lib (importa o CSS)
|
|
61
|
+
├── lib.css # Tailwind compilado para o pacote
|
|
62
|
+
├── index.css # Tailwind e estilos da amostra
|
|
63
|
+
└── main.tsx # RouterProvider
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Os primitivos são a origem dos valores. Os tokens semânticos de tipografia reutilizam `fontFamily`, `fontWeight`, `fontSize` e `lineHeight`. Tokens semânticos de cor ainda não existem: o Figma definiu só as famílias primitivas. Todos usam `as const`; os tipos são derivados dos valores e exportados por `src/tokens/index.ts` e pela entrada `src/index.ts`.
|
|
67
|
+
|
|
68
|
+
## Primitivos de tipografia
|
|
69
|
+
|
|
70
|
+
- `fontFamily.sans`: `"var(--default-font-family)"`, usando a fonte padrão do Tailwind.
|
|
71
|
+
- `fontWeight.regular`: `400`; `fontWeight.semibold`: `600`.
|
|
72
|
+
- `fontSize`: `xs: 12px`, `sm: 14px`, `md: 16px`, `lg: 20px`, `xl: 24px`, `2xl: 32px`, `3xl: 40px`, `4xl: 48px`, `5xl: 60px`.
|
|
73
|
+
- `lineHeight`: chaves numéricas `16`, `20`, `24`, `28`, `40`, `48`, `56` e `72`, com os respectivos valores em `px`. Reutiliza `fontSize` quando os valores coincidem.
|
|
74
|
+
|
|
75
|
+
## Tokens semânticos de tipografia
|
|
76
|
+
|
|
77
|
+
Todos os tokens usam a fonte padrão do Tailwind, baseada nas fontes disponíveis no sistema. Tamanhos e alturas de linha são valores absolutos em pixels.
|
|
78
|
+
|
|
79
|
+
| Token | Peso | Tamanho | Altura de linha |
|
|
80
|
+
| --- | ---: | ---: | ---: |
|
|
81
|
+
| `heading-h1` | 600 | 60px | 72px |
|
|
82
|
+
| `heading-h2` | 600 | 48px | 56px |
|
|
83
|
+
| `heading-h3` | 600 | 40px | 48px |
|
|
84
|
+
| `heading-h4` | 600 | 32px | 40px |
|
|
85
|
+
| `heading-h5` | 600 | 24px | 28px |
|
|
86
|
+
| `heading-h6` | 600 | 20px | 24px |
|
|
87
|
+
| `body-sm` | 400 | 14px | 16px |
|
|
88
|
+
| `body-sm-semibold` | 600 | 14px | 16px |
|
|
89
|
+
| `body-sm-link` | 400 | 14px | 16px |
|
|
90
|
+
| `body-md` | 400 | 16px | 20px |
|
|
91
|
+
| `body-md-link` | 400 | 16px | 20px |
|
|
92
|
+
| `body-md-semibold` | 600 | 16px | 20px |
|
|
93
|
+
| `body-lg` | 400 | 20px | 24px |
|
|
94
|
+
| `body-lg-link` | 400 | 20px | 24px |
|
|
95
|
+
| `body-lg-semibold` | 600 | 20px | 24px |
|
|
96
|
+
| `caption` | 400 | 12px | 16px |
|
|
97
|
+
|
|
98
|
+
Os tokens de link definem apenas tipografia; cor e sublinhado pertencem ao contexto de uso. A demonstração aplica `underline` aos links.
|
|
99
|
+
|
|
100
|
+
## Cores
|
|
101
|
+
|
|
102
|
+
`colors` reúne as famílias primitivas do Figma: `neutral`, `green`, `blue`, `purple`, `red`, `orange`, `yellow` e `cyan`. Os HEX são os valores oficiais do token, sem conversão. `colorShadeOpacity` guarda a opacidade indicada no Figma para cada degrau da escala (`25` só existe em `neutral`).
|
|
103
|
+
|
|
104
|
+
| Degrau | Opacidade |
|
|
105
|
+
| --- | ---: |
|
|
106
|
+
| `25` | 5% |
|
|
107
|
+
| `50` | 10% |
|
|
108
|
+
| `100` | 20% |
|
|
109
|
+
| `200` | 40% |
|
|
110
|
+
| `300` | 60% |
|
|
111
|
+
| `400` | 80% |
|
|
112
|
+
| `500` | 100% |
|
|
113
|
+
| `600` | 80% |
|
|
114
|
+
| `700` | 60% |
|
|
115
|
+
| `800` | 40% |
|
|
116
|
+
| `900` | 20% |
|
|
117
|
+
| `950` | 10% |
|
|
118
|
+
|
|
119
|
+
O adaptador do Tailwind publica as mesmas cores como utilitários (`bg-green-500`, `text-neutral-900`) e injeta CSS variables em `:root`, por exemplo `--color-green-500` e `--color-green-500-opacity`. `colorCssVars.green[500]` devolve `var(--color-green-500)` para uso em estilo inline.
|
|
120
|
+
|
|
121
|
+
Os papéis semânticos atuais são `primary` (`#008149`), `primary-hover` (`#006137`), `outline` (`#F0F5FB`), `error` (`#BB3030`) e `error-hover` (`#8C2424`), usados pelo `Button`.
|
|
122
|
+
|
|
123
|
+
## Botão
|
|
124
|
+
|
|
125
|
+
`Button` segue o padrão de variantes com `tailwind-variants`. As variantes `primary`, `outline`, `transparent`, `error`, `outline-error`, `transparent-error`, `neutral`, `outline-neutral` e `transparent-neutral` cobrem default, hover, focus e disabled.
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import { Button } from '@x-green/components'
|
|
129
|
+
|
|
130
|
+
<Button>
|
|
131
|
+
Continuar
|
|
132
|
+
</Button>
|
|
133
|
+
<Button variant="outline">
|
|
134
|
+
Continuar
|
|
135
|
+
</Button>
|
|
136
|
+
<Button variant="transparent">
|
|
137
|
+
Continuar
|
|
138
|
+
</Button>
|
|
139
|
+
<Button variant="error">
|
|
140
|
+
Excluir
|
|
141
|
+
</Button>
|
|
142
|
+
<Button variant="outline-error">
|
|
143
|
+
Excluir
|
|
144
|
+
</Button>
|
|
145
|
+
<Button variant="transparent-error">
|
|
146
|
+
Excluir
|
|
147
|
+
</Button>
|
|
148
|
+
<Button variant="neutral">
|
|
149
|
+
Continuar
|
|
150
|
+
</Button>
|
|
151
|
+
<Button variant="outline-neutral">
|
|
152
|
+
Continuar
|
|
153
|
+
</Button>
|
|
154
|
+
<Button variant="transparent-neutral">
|
|
155
|
+
Continuar
|
|
156
|
+
</Button>
|
|
157
|
+
<Button disabled>
|
|
158
|
+
Continuar
|
|
159
|
+
</Button>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
As exportações públicas incluem `colors`, `colorShadeOpacity`, `colorCssVariables`, `colorCssVars` e os tipos `Colors`, `ColorFamilyName`, `ColorFamily`, `ColorShade` e `ColorCssVars`. Os tokens de cores são constantes TypeScript e podem ser consumidos sem Tailwind; somente o adaptador opcional `src/tokens/tailwind.ts` depende dele.
|
|
163
|
+
|
|
164
|
+
## Consumir em React
|
|
165
|
+
|
|
166
|
+
Exemplo no app que instalou o pacote:
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
import { colors, typography } from '@x-green/components'
|
|
170
|
+
|
|
171
|
+
<h1
|
|
172
|
+
style={{
|
|
173
|
+
...typography['heading-h1'],
|
|
174
|
+
color: colors.neutral[900],
|
|
175
|
+
backgroundColor: colors.neutral[25],
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
Design System
|
|
179
|
+
</h1>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Também estão disponíveis `fontFamily`, `fontWeight`, `fontSize`, `lineHeight` e os tipos `FontFamily`, `FontWeight`, `FontSize`, `LineHeight`, `TypographyToken` e `TypographyTokenName`.
|
|
183
|
+
|
|
184
|
+
## Consumir com Tailwind
|
|
185
|
+
|
|
186
|
+
O pacote já entrega o CSS do `Button`. Para usar tokens no layout do seu app (`heading-h1`, `bg-primary`), configure o Tailwind 4 com o plugin do DS. Sem isso, só os componentes importados de `@x-green/components` vêm estilizados.
|
|
187
|
+
|
|
188
|
+
```tsx
|
|
189
|
+
import { Button } from '@x-green/components'
|
|
190
|
+
|
|
191
|
+
<section className="border border-neutral-200 bg-neutral-25 text-neutral-900">
|
|
192
|
+
<h1 className="heading-h1">Design System</h1>
|
|
193
|
+
<p className="body-md">Texto usando os tokens de tipografia e a paleta primitiva.</p>
|
|
194
|
+
</section>
|
|
195
|
+
<a className="body-md-link text-green-800 underline" href="#typography">Ver tipografia</a>
|
|
196
|
+
<Button>
|
|
197
|
+
Botão de exemplo
|
|
198
|
+
</Button>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Fonte padrão
|
|
202
|
+
|
|
203
|
+
Por enquanto, o projeto usa a fonte padrão do Tailwind, sem arquivos de fontes personalizados, imports adicionais ou downloads de fontes. Importar `@x-green/components` injeta o CSS dos componentes. A variável `--default-font-family` segue a fonte padrão do Tailwind.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
variant: {
|
|
3
|
+
primary: string;
|
|
4
|
+
outline: string;
|
|
5
|
+
transparent: string;
|
|
6
|
+
error: string;
|
|
7
|
+
'outline-error': string;
|
|
8
|
+
'transparent-error': string;
|
|
9
|
+
neutral: string;
|
|
10
|
+
'outline-neutral': string;
|
|
11
|
+
'transparent-neutral': string;
|
|
12
|
+
};
|
|
13
|
+
}, undefined, string, {
|
|
14
|
+
variant: {
|
|
15
|
+
primary: string;
|
|
16
|
+
outline: string;
|
|
17
|
+
transparent: string;
|
|
18
|
+
error: string;
|
|
19
|
+
'outline-error': string;
|
|
20
|
+
'transparent-error': string;
|
|
21
|
+
neutral: string;
|
|
22
|
+
'outline-neutral': string;
|
|
23
|
+
'transparent-neutral': string;
|
|
24
|
+
};
|
|
25
|
+
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
26
|
+
variant: {
|
|
27
|
+
primary: string;
|
|
28
|
+
outline: string;
|
|
29
|
+
transparent: string;
|
|
30
|
+
error: string;
|
|
31
|
+
'outline-error': string;
|
|
32
|
+
'transparent-error': string;
|
|
33
|
+
neutral: string;
|
|
34
|
+
'outline-neutral': string;
|
|
35
|
+
'transparent-neutral': string;
|
|
36
|
+
};
|
|
37
|
+
}, undefined>>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import type { VariantProps } from 'tailwind-variants';
|
|
3
|
+
import { buttonVariants } from './button-variants';
|
|
4
|
+
export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
|
|
5
|
+
}
|
|
6
|
+
export declare function Button({ variant, className, type, children, ...props }: ButtonProps): import("react").JSX.Element;
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-neutral-25:#ebf0f6;--color-neutral-25-opacity:5%;--color-neutral-50:#e5eaf1;--color-neutral-50-opacity:10%;--color-neutral-100:#dae0e7;--color-neutral-100-opacity:20%;--color-neutral-200:#c5cad3;--color-neutral-200-opacity:40%;--color-neutral-300:#afb5c0;--color-neutral-300-opacity:60%;--color-neutral-400:#9a9fac;--color-neutral-400-opacity:80%;--color-neutral-500:#848a98;--color-neutral-500-opacity:100%;--color-neutral-600:#6a6e7a;--color-neutral-600-opacity:80%;--color-neutral-700:#4f535b;--color-neutral-700-opacity:60%;--color-neutral-800:#35373d;--color-neutral-800-opacity:40%;--color-neutral-900:#1a1c1e;--color-neutral-900-opacity:20%;--color-neutral-950:#0d0e0f;--color-neutral-950-opacity:10%;--color-green-50:#e6f6ef;--color-green-50-opacity:10%;--color-green-100:#cceccc;--color-green-100-opacity:20%;--color-green-200:#99d999;--color-green-200-opacity:40%;--color-green-300:#66c766;--color-green-300-opacity:60%;--color-green-400:#33b433;--color-green-400-opacity:80%;--color-green-500:#00a000;--color-green-500-opacity:100%;--color-green-600:#008100;--color-green-600-opacity:80%;--color-green-700:#006100;--color-green-700-opacity:60%;--color-green-800:#004000;--color-green-800-opacity:40%;--color-green-900:#002000;--color-green-900-opacity:20%;--color-green-950:#001000;--color-green-950-opacity:10%;--color-blue-50:#e6ecf6;--color-blue-50-opacity:10%;--color-blue-100:#ccd9ec;--color-blue-100-opacity:20%;--color-blue-200:#99b3d9;--color-blue-200-opacity:40%;--color-blue-300:#668cc6;--color-blue-300-opacity:60%;--color-blue-400:#3366b3;--color-blue-400-opacity:80%;--color-blue-500:#0040a0;--color-blue-500-opacity:100%;--color-blue-600:#003380;--color-blue-600-opacity:80%;--color-blue-700:#002660;--color-blue-700-opacity:60%;--color-blue-800:#001a40;--color-blue-800-opacity:40%;--color-blue-900:#000d20;--color-blue-900-opacity:20%;--color-blue-950:#000610;--color-blue-950-opacity:10%;--color-purple-50:#ede6f6;--color-purple-50-opacity:10%;--color-purple-100:#dbccec;--color-purple-100-opacity:20%;--color-purple-200:#b899d9;--color-purple-200-opacity:40%;--color-purple-300:#9466c6;--color-purple-300-opacity:60%;--color-purple-400:#7133b3;--color-purple-400-opacity:80%;--color-purple-500:#4d00a0;--color-purple-500-opacity:100%;--color-purple-600:#3e0080;--color-purple-600-opacity:80%;--color-purple-700:#2e0060;--color-purple-700-opacity:60%;--color-purple-800:#1f0040;--color-purple-800-opacity:40%;--color-purple-900:#0f0020;--color-purple-900-opacity:20%;--color-purple-950:#080010;--color-purple-950-opacity:10%;--color-red-50:#fdecec;--color-red-50-opacity:10%;--color-red-100:#fbd8d8;--color-red-100-opacity:20%;--color-red-200:#f7b1b1;--color-red-200-opacity:40%;--color-red-300:#f28a8a;--color-red-300-opacity:60%;--color-red-400:#ee6363;--color-red-400-opacity:80%;--color-red-500:#ea3c3c;--color-red-500-opacity:100%;--color-red-600:#bb3030;--color-red-600-opacity:80%;--color-red-700:#8c2424;--color-red-700-opacity:60%;--color-red-800:#5e1818;--color-red-800-opacity:40%;--color-red-900:#2f0c0c;--color-red-900-opacity:20%;--color-red-950:#170606;--color-red-950-opacity:10%;--color-orange-50:#fff1e8;--color-orange-50-opacity:10%;--color-orange-100:#ffe4d0;--color-orange-100-opacity:20%;--color-orange-200:#ffc8a1;--color-orange-200-opacity:40%;--color-orange-300:#ffad73;--color-orange-300-opacity:60%;--color-orange-400:#ff9144;--color-orange-400-opacity:80%;--color-orange-500:#ff7615;--color-orange-500-opacity:100%;--color-orange-600:#cc5e11;--color-orange-600-opacity:80%;--color-orange-700:#99470d;--color-orange-700-opacity:60%;--color-orange-800:#662f08;--color-orange-800-opacity:40%;--color-orange-900:#331804;--color-orange-900-opacity:20%;--color-orange-950:#190c02;--color-orange-950-opacity:10%;--color-yellow-50:#fff8e8;--color-yellow-50-opacity:10%;--color-yellow-100:#fff2d0;--color-yellow-100-opacity:20%;--color-yellow-200:#ffe5a1;--color-yellow-200-opacity:40%;--color-yellow-300:#ffd773;--color-yellow-300-opacity:60%;--color-yellow-400:#ffca44;--color-yellow-400-opacity:80%;--color-yellow-500:#ffbd15;--color-yellow-500-opacity:100%;--color-yellow-600:#cc9711;--color-yellow-600-opacity:80%;--color-yellow-700:#99710d;--color-yellow-700-opacity:60%;--color-yellow-800:#664c08;--color-yellow-800-opacity:40%;--color-yellow-900:#332604;--color-yellow-900-opacity:20%;--color-yellow-950:#191302;--color-yellow-950-opacity:10%;--color-cyan-50:#e8fffc;--color-cyan-50-opacity:10%;--color-cyan-100:#d0fffa;--color-cyan-100-opacity:20%;--color-cyan-200:#a1fff4;--color-cyan-200-opacity:40%;--color-cyan-300:#73ffef;--color-cyan-300-opacity:60%;--color-cyan-400:#44ffe9;--color-cyan-400-opacity:80%;--color-cyan-500:#15ffe4;--color-cyan-500-opacity:100%;--color-cyan-600:#11ccb6;--color-cyan-600-opacity:80%;--color-cyan-700:#0d9989;--color-cyan-700-opacity:60%;--color-cyan-800:#08665b;--color-cyan-800-opacity:40%;--color-cyan-900:#04332e;--color-cyan-900-opacity:20%;--color-cyan-950:#021917;--color-cyan-950-opacity:10%;--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer components;@layer utilities{.box-border{box-sizing:border-box}.inline-flex{display:inline-flex}.h-\[44px\]{height:44px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-error{border-color:#bb3030}.border-neutral-200{border-color:#c5cad3}.border-primary{border-color:#008149}.border-transparent{border-color:#0000}.bg-error{background-color:#bb3030}.bg-outline{background-color:#f0f5fb}.bg-primary{background-color:#008149}.bg-transparent{background-color:#0000}.px-3{padding-inline:calc(var(--spacing) * 3)}.body-lg,.body-lg-link{font-family:var(--default-font-family);font-size:20px;font-weight:400;line-height:24px}.body-lg-semibold{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.body-md,.body-md-link{font-family:var(--default-font-family);font-size:16px;font-weight:400;line-height:20px}.body-md-semibold{font-family:var(--default-font-family);font-size:16px;font-weight:600;line-height:20px}.body-sm,.body-sm-link{font-family:var(--default-font-family);font-size:14px;font-weight:400;line-height:16px}.body-sm-semibold{font-family:var(--default-font-family);font-size:14px;font-weight:600;line-height:16px}.caption{font-family:var(--default-font-family);font-size:12px;font-weight:400;line-height:16px}.heading-h1{font-family:var(--default-font-family);font-size:60px;font-weight:600;line-height:72px}.heading-h2{font-family:var(--default-font-family);font-size:48px;font-weight:600;line-height:56px}.heading-h3{font-family:var(--default-font-family);font-size:40px;font-weight:600;line-height:48px}.heading-h4{font-family:var(--default-font-family);font-size:32px;font-weight:600;line-height:40px}.heading-h5{font-family:var(--default-font-family);font-size:24px;font-weight:600;line-height:28px}.heading-h6{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.text-error{color:#bb3030}.text-neutral-800{color:#35373d}.text-primary{color:#008149}.text-white{color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-error{outline-color:#bb3030}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-error-hover:hover{border-color:#8c2424}.hover\:border-neutral-300:hover{border-color:#afb5c0}.hover\:border-primary-hover:hover{border-color:#006137}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-error-hover:hover{background-color:#8c2424}.hover\:bg-neutral-50:hover{background-color:#e5eaf1}.hover\:bg-outline:hover{background-color:#f0f5fb}.hover\:bg-primary-hover:hover{background-color:#006137}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-error-hover:hover{color:#8c2424}.hover\:text-neutral-800:hover{color:#35373d}.hover\:text-neutral-900:hover{color:#1a1c1e}.hover\:text-primary-hover:hover{color:#006137}}.focus-visible\:isolate:focus-visible{isolation:isolate}.focus-visible\:border-error:focus-visible{border-color:#bb3030}.focus-visible\:border-neutral-200:focus-visible{border-color:#c5cad3}.focus-visible\:border-primary:focus-visible{border-color:#008149}.focus-visible\:border-transparent:focus-visible{border-color:#0000}.focus-visible\:bg-error:focus-visible{background-color:#bb3030}.focus-visible\:bg-outline:focus-visible{background-color:#f0f5fb}.focus-visible\:bg-primary:focus-visible{background-color:#008149}.focus-visible\:bg-transparent:focus-visible{background-color:#0000}.focus-visible\:text-error:focus-visible{color:#bb3030}.focus-visible\:text-neutral-800:focus-visible{color:#35373d}.focus-visible\:text-primary:focus-visible{color:#008149}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-error:focus-visible{outline-color:#bb3030}.focus-visible\:outline-primary:focus-visible{outline-color:#008149}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-neutral-500:disabled{border-color:#848a98}.disabled\:border-transparent:disabled{border-color:#0000}.disabled\:bg-neutral-50:disabled{background-color:#e5eaf1}.disabled\:bg-transparent:disabled{background-color:#0000}.disabled\:text-neutral-500:disabled{color:#848a98}.data-\[status\=focus\]\:isolate[data-status=focus]{isolation:isolate}.data-\[status\=focus\]\:border-error[data-status=focus]{border-color:#bb3030}.data-\[status\=focus\]\:border-neutral-200[data-status=focus]{border-color:#c5cad3}.data-\[status\=focus\]\:border-primary[data-status=focus]{border-color:#008149}.data-\[status\=focus\]\:border-transparent[data-status=focus]{border-color:#0000}.data-\[status\=focus\]\:bg-error[data-status=focus]{background-color:#bb3030}.data-\[status\=focus\]\:bg-outline[data-status=focus]{background-color:#f0f5fb}.data-\[status\=focus\]\:bg-primary[data-status=focus]{background-color:#008149}.data-\[status\=focus\]\:bg-transparent[data-status=focus]{background-color:#0000}.data-\[status\=focus\]\:text-error[data-status=focus]{color:#bb3030}.data-\[status\=focus\]\:text-neutral-800[data-status=focus]{color:#35373d}.data-\[status\=focus\]\:text-primary[data-status=focus]{color:#008149}.data-\[status\=focus\]\:outline-2[data-status=focus]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\[status\=focus\]\:outline-offset-2[data-status=focus]{outline-offset:2px}.data-\[status\=focus\]\:outline-error[data-status=focus]{outline-color:#bb3030}.data-\[status\=focus\]\:outline-primary[data-status=focus]{outline-color:#008149}.data-\[status\=hover\]\:border-error-hover[data-status=hover]{border-color:#8c2424}.data-\[status\=hover\]\:border-neutral-300[data-status=hover]{border-color:#afb5c0}.data-\[status\=hover\]\:border-primary-hover[data-status=hover]{border-color:#006137}.data-\[status\=hover\]\:border-transparent[data-status=hover]{border-color:#0000}.data-\[status\=hover\]\:bg-error-hover[data-status=hover]{background-color:#8c2424}.data-\[status\=hover\]\:bg-neutral-50[data-status=hover]{background-color:#e5eaf1}.data-\[status\=hover\]\:bg-outline[data-status=hover]{background-color:#f0f5fb}.data-\[status\=hover\]\:bg-primary-hover[data-status=hover]{background-color:#006137}.data-\[status\=hover\]\:bg-transparent[data-status=hover]{background-color:#0000}.data-\[status\=hover\]\:text-error-hover[data-status=hover]{color:#8c2424}.data-\[status\=hover\]\:text-neutral-800[data-status=hover]{color:#35373d}.data-\[status\=hover\]\:text-neutral-900[data-status=hover]{color:#1a1c1e}.data-\[status\=hover\]\:text-primary-hover[data-status=hover]{color:#006137}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
|
|
3
|
+
/*$vite$:1*/
|
package/dist/index.d.ts
ADDED