@beryl-ui/react 2.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.
Files changed (6) hide show
  1. package/README.md +91 -0
  2. package/dist/index.d.mts +189 -0
  3. package/dist/index.d.ts +189 -0
  4. package/dist/index.js +520 -0
  5. package/dist/index.mjs +485 -0
  6. package/package.json +49 -0
package/README.md ADDED
@@ -0,0 +1,91 @@
1
+ # @beryl-ui/react
2
+
3
+ <p align="center">
4
+ <a href="https://www.npmjs.com/package/@beryl-ui/react">
5
+ <img alt="NPM Version" src="https://img.shields.io/npm/v/@beryl-ui/react?color=8257E5&label=%40beryl-ui%2Freact">
6
+ </a>
7
+ <img alt="License" src="https://img.shields.io/github/license/Robson16/beryl-ui?color=8257E5">
8
+ </p>
9
+
10
+ Biblioteca de componentes React profissionais do **beryl-ui**, construídos com `styled-components` e `Radix UI` para máxima performance e acessibilidade.
11
+
12
+ ## ✨ Componentes Incluídos
13
+
14
+ * **Avatar**: Imagem de exibição com fallback.
15
+ * **Button**: Botão para ações diversas com variantes.
16
+ * **Checkbox**: Caixa de seleção.
17
+ * **Heading**: Título para seções.
18
+ * **MultiStep**: Indicador de progresso para formulários de múltiplos passos.
19
+ * **Text**: Componente para textos em geral.
20
+ * **TextArea**: Campo de texto de múltiplas linhas.
21
+ * **TextInput**: Campo de entrada de texto.
22
+
23
+ > Para uma documentação interativa e exemplos de uso de cada componente, visite nosso **Storybook de documentação**.
24
+
25
+ ## 🚀 Instalação
26
+
27
+ Para usar os componentes React em seu projeto, instale o pacote via npm, yarn ou pnpm:
28
+
29
+ ```bash
30
+ npm install @beryl-ui/react styled-components
31
+ # ou
32
+ yarn add @beryl-ui/react styled-components
33
+ # ou
34
+ pnpm add @beryl-ui/react styled-components
35
+ ```
36
+
37
+ ## ⚙️ Configuração
38
+
39
+ Para que os componentes funcionem corretamente com o tema padrão, você precisa envolver sua aplicação com o `ThemeProvider` do `styled-components` e aplicar os estilos globais.
40
+
41
+ ```tsx
42
+ // Em seu arquivo principal (ex: App.tsx)
43
+ import { globalStyles } from '@beryl-ui/react/styles' // Importe os estilos globais
44
+ import { ThemeProvider } from 'styled-components'
45
+ import { defaultTheme } from '@beryl-ui/react/styles' // Importe o tema padrão
46
+
47
+ globalStyles() // Aplique os estilos globais
48
+
49
+ export function App() {
50
+ return (
51
+ <ThemeProvider theme={defaultTheme}>
52
+ {/* ... seus componentes e rotas que usarão o design system ... */}
53
+ </ThemeProvider>
54
+ )
55
+ }
56
+ ```
57
+
58
+ ## 💡 Uso Básico
59
+
60
+ Exemplo de como usar um componente `Button`:
61
+
62
+ ```tsx
63
+ import { Button } from '@beryl-ui/react'
64
+
65
+ function MyComponent() {
66
+ return (
67
+ <Button onClick={() => alert('Clicado!')}>
68
+ Clique aqui
69
+ </Button>
70
+ )
71
+ }
72
+ ```
73
+
74
+ ## 🛠️ Desenvolvimento Local (para contribuidores)
75
+
76
+ Se você está contribuindo para este pacote especificamente dentro do monorepo:
77
+
78
+ 1. **Navegue até a pasta do pacote:**
79
+ ```bash
80
+ cd packages/react
81
+ ```
82
+ 2. **Execute o modo de desenvolvimento:**
83
+ Para compilar o pacote em modo `watch` e ver as alterações em tempo real (geralmente usado em conjunto com o Storybook do monorepo):
84
+ ```bash
85
+ npm run dev
86
+ ```
87
+ (Este script `dev` é definido no `package.json` de `packages/react` e usa `tsup` para observar as mudanças).
88
+
89
+ ## 📄 Licença
90
+
91
+ Este pacote está sob a licença MIT. Veja o arquivo LICENSE.md na raiz do repositório para mais detalhes.
package/dist/index.d.mts ADDED
@@ -0,0 +1,189 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
3
+ import { ComponentProps, ElementType } from 'react';
4
+ import * as styled_components_dist_types from 'styled-components/dist/types';
5
+ import * as styled_components from 'styled-components';
6
+ import * as Avatar$1 from '@radix-ui/react-avatar';
7
+ import * as Checkbox$1 from '@radix-ui/react-checkbox';
8
+
9
+ declare const AvatarImage: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Avatar$1.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & {
10
+ ref?: ((instance: HTMLImageElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLImageElement> | null | undefined;
11
+ }, never>> & string & Omit<react.ForwardRefExoticComponent<Avatar$1.AvatarImageProps & react.RefAttributes<HTMLImageElement>>, keyof react.Component<any, {}, any>>;
12
+
13
+ interface AvatarProps extends ComponentProps<typeof AvatarImage> {
14
+ }
15
+ declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
16
+ declare namespace Avatar {
17
+ var displayName: string;
18
+ }
19
+
20
+ declare const BoxContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
21
+
22
+ interface BoxProps extends ComponentProps<typeof BoxContainer> {
23
+ as?: ElementType;
24
+ }
25
+ declare function Box(props: BoxProps): react_jsx_runtime.JSX.Element;
26
+ declare namespace Box {
27
+ var displayName: string;
28
+ }
29
+
30
+ interface ButtonProps$1 {
31
+ variant?: 'primary' | 'secondary' | 'tertiary';
32
+ size?: 'sm' | 'md';
33
+ }
34
+ declare const ButtonContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps$1>> & string;
35
+
36
+ interface ButtonProps extends ComponentProps<typeof ButtonContainer> {
37
+ as?: ElementType;
38
+ }
39
+ declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
40
+ declare namespace Button {
41
+ var displayName: string;
42
+ }
43
+
44
+ declare const CheckboxContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
45
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
46
+ }, never>> & string & Omit<react.ForwardRefExoticComponent<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, keyof react.Component<any, {}, any>>;
47
+
48
+ interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
49
+ }
50
+ declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
51
+ declare namespace Checkbox {
52
+ var displayName: string;
53
+ }
54
+
55
+ interface HeadingContainerProps {
56
+ size?: 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
57
+ }
58
+ declare const HeadingContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, HeadingContainerProps>> & string;
59
+
60
+ interface HeadingProps extends ComponentProps<typeof HeadingContainer> {
61
+ as?: ElementType;
62
+ }
63
+ declare function Heading(props: HeadingProps): react_jsx_runtime.JSX.Element;
64
+ declare namespace Heading {
65
+ var displayName: string;
66
+ }
67
+
68
+ interface MultiStepProps {
69
+ size: number;
70
+ currentStep?: number;
71
+ }
72
+ declare function MultiStep({ size, currentStep }: MultiStepProps): react_jsx_runtime.JSX.Element;
73
+ declare namespace MultiStep {
74
+ var displayName: string;
75
+ }
76
+
77
+ interface TextContainerProps {
78
+ size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
79
+ }
80
+ declare const TextContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextContainerProps>> & string;
81
+
82
+ interface TextProps extends ComponentProps<typeof TextContainer> {
83
+ as?: ElementType;
84
+ }
85
+ declare function Text(props: TextProps): react_jsx_runtime.JSX.Element;
86
+ declare namespace Text {
87
+ var displayName: string;
88
+ }
89
+
90
+ declare const TextAreaContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
91
+
92
+ interface TextAreaProps extends ComponentProps<typeof TextAreaContainer> {
93
+ }
94
+ declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
95
+
96
+ declare const Input: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
97
+
98
+ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'prefix'> {
99
+ prefix?: string;
100
+ }
101
+ declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
102
+
103
+ declare const theme: {
104
+ colors: {
105
+ white: string;
106
+ black: string;
107
+ gray100: string;
108
+ gray200: string;
109
+ gray300: string;
110
+ gray400: string;
111
+ gray500: string;
112
+ gray600: string;
113
+ gray700: string;
114
+ gray800: string;
115
+ gray900: string;
116
+ emerald100: string;
117
+ emerald200: string;
118
+ emerald300: string;
119
+ emerald400: string;
120
+ emerald500: string;
121
+ emerald600: string;
122
+ emerald700: string;
123
+ emerald800: string;
124
+ emerald900: string;
125
+ };
126
+ fontSizes: {
127
+ xxs: string;
128
+ xs: string;
129
+ sm: string;
130
+ md: string;
131
+ lg: string;
132
+ xl: string;
133
+ '2xl': string;
134
+ '4xl': string;
135
+ '5xl': string;
136
+ '6xl': string;
137
+ '7xl': string;
138
+ '8xl': string;
139
+ '9xl': string;
140
+ };
141
+ fontWeights: {
142
+ thin: string;
143
+ 'extra-light': string;
144
+ light: string;
145
+ regular: string;
146
+ medium: string;
147
+ 'semi-bold': string;
148
+ bold: string;
149
+ 'extra-bold': string;
150
+ black: string;
151
+ };
152
+ fonts: {
153
+ default: string;
154
+ code: string;
155
+ };
156
+ lineHeights: {
157
+ shorter: string;
158
+ short: string;
159
+ base: string;
160
+ tall: string;
161
+ };
162
+ radii: {
163
+ px: string;
164
+ xs: string;
165
+ sm: string;
166
+ md: string;
167
+ lg: string;
168
+ full: string;
169
+ };
170
+ space: {
171
+ 1: string;
172
+ 2: string;
173
+ 3: string;
174
+ 4: string;
175
+ 5: string;
176
+ 6: string;
177
+ 7: string;
178
+ 8: string;
179
+ 10: string;
180
+ 12: string;
181
+ 16: string;
182
+ 20: string;
183
+ 40: string;
184
+ 64: string;
185
+ 80: string;
186
+ };
187
+ };
188
+
189
+ export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, MultiStep, type MultiStepProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, theme };
package/dist/index.d.ts ADDED
@@ -0,0 +1,189 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
3
+ import { ComponentProps, ElementType } from 'react';
4
+ import * as styled_components_dist_types from 'styled-components/dist/types';
5
+ import * as styled_components from 'styled-components';
6
+ import * as Avatar$1 from '@radix-ui/react-avatar';
7
+ import * as Checkbox$1 from '@radix-ui/react-checkbox';
8
+
9
+ declare const AvatarImage: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Avatar$1.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & {
10
+ ref?: ((instance: HTMLImageElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLImageElement> | null | undefined;
11
+ }, never>> & string & Omit<react.ForwardRefExoticComponent<Avatar$1.AvatarImageProps & react.RefAttributes<HTMLImageElement>>, keyof react.Component<any, {}, any>>;
12
+
13
+ interface AvatarProps extends ComponentProps<typeof AvatarImage> {
14
+ }
15
+ declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
16
+ declare namespace Avatar {
17
+ var displayName: string;
18
+ }
19
+
20
+ declare const BoxContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
21
+
22
+ interface BoxProps extends ComponentProps<typeof BoxContainer> {
23
+ as?: ElementType;
24
+ }
25
+ declare function Box(props: BoxProps): react_jsx_runtime.JSX.Element;
26
+ declare namespace Box {
27
+ var displayName: string;
28
+ }
29
+
30
+ interface ButtonProps$1 {
31
+ variant?: 'primary' | 'secondary' | 'tertiary';
32
+ size?: 'sm' | 'md';
33
+ }
34
+ declare const ButtonContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps$1>> & string;
35
+
36
+ interface ButtonProps extends ComponentProps<typeof ButtonContainer> {
37
+ as?: ElementType;
38
+ }
39
+ declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
40
+ declare namespace Button {
41
+ var displayName: string;
42
+ }
43
+
44
+ declare const CheckboxContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
45
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
46
+ }, never>> & string & Omit<react.ForwardRefExoticComponent<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, keyof react.Component<any, {}, any>>;
47
+
48
+ interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
49
+ }
50
+ declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
51
+ declare namespace Checkbox {
52
+ var displayName: string;
53
+ }
54
+
55
+ interface HeadingContainerProps {
56
+ size?: 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
57
+ }
58
+ declare const HeadingContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, HeadingContainerProps>> & string;
59
+
60
+ interface HeadingProps extends ComponentProps<typeof HeadingContainer> {
61
+ as?: ElementType;
62
+ }
63
+ declare function Heading(props: HeadingProps): react_jsx_runtime.JSX.Element;
64
+ declare namespace Heading {
65
+ var displayName: string;
66
+ }
67
+
68
+ interface MultiStepProps {
69
+ size: number;
70
+ currentStep?: number;
71
+ }
72
+ declare function MultiStep({ size, currentStep }: MultiStepProps): react_jsx_runtime.JSX.Element;
73
+ declare namespace MultiStep {
74
+ var displayName: string;
75
+ }
76
+
77
+ interface TextContainerProps {
78
+ size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
79
+ }
80
+ declare const TextContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextContainerProps>> & string;
81
+
82
+ interface TextProps extends ComponentProps<typeof TextContainer> {
83
+ as?: ElementType;
84
+ }
85
+ declare function Text(props: TextProps): react_jsx_runtime.JSX.Element;
86
+ declare namespace Text {
87
+ var displayName: string;
88
+ }
89
+
90
+ declare const TextAreaContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
91
+
92
+ interface TextAreaProps extends ComponentProps<typeof TextAreaContainer> {
93
+ }
94
+ declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
95
+
96
+ declare const Input: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
97
+
98
+ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'prefix'> {
99
+ prefix?: string;
100
+ }
101
+ declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
102
+
103
+ declare const theme: {
104
+ colors: {
105
+ white: string;
106
+ black: string;
107
+ gray100: string;
108
+ gray200: string;
109
+ gray300: string;
110
+ gray400: string;
111
+ gray500: string;
112
+ gray600: string;
113
+ gray700: string;
114
+ gray800: string;
115
+ gray900: string;
116
+ emerald100: string;
117
+ emerald200: string;
118
+ emerald300: string;
119
+ emerald400: string;
120
+ emerald500: string;
121
+ emerald600: string;
122
+ emerald700: string;
123
+ emerald800: string;
124
+ emerald900: string;
125
+ };
126
+ fontSizes: {
127
+ xxs: string;
128
+ xs: string;
129
+ sm: string;
130
+ md: string;
131
+ lg: string;
132
+ xl: string;
133
+ '2xl': string;
134
+ '4xl': string;
135
+ '5xl': string;
136
+ '6xl': string;
137
+ '7xl': string;
138
+ '8xl': string;
139
+ '9xl': string;
140
+ };
141
+ fontWeights: {
142
+ thin: string;
143
+ 'extra-light': string;
144
+ light: string;
145
+ regular: string;
146
+ medium: string;
147
+ 'semi-bold': string;
148
+ bold: string;
149
+ 'extra-bold': string;
150
+ black: string;
151
+ };
152
+ fonts: {
153
+ default: string;
154
+ code: string;
155
+ };
156
+ lineHeights: {
157
+ shorter: string;
158
+ short: string;
159
+ base: string;
160
+ tall: string;
161
+ };
162
+ radii: {
163
+ px: string;
164
+ xs: string;
165
+ sm: string;
166
+ md: string;
167
+ lg: string;
168
+ full: string;
169
+ };
170
+ space: {
171
+ 1: string;
172
+ 2: string;
173
+ 3: string;
174
+ 4: string;
175
+ 5: string;
176
+ 6: string;
177
+ 7: string;
178
+ 8: string;
179
+ 10: string;
180
+ 12: string;
181
+ 16: string;
182
+ 20: string;
183
+ 40: string;
184
+ 64: string;
185
+ 80: string;
186
+ };
187
+ };
188
+
189
+ export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, MultiStep, type MultiStepProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, theme };