catastyle 0.1.2 → 0.1.4

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 (12) hide show
  1. package/README.md +7 -4
  2. package/dist/index.d.mts +28 -14
  3. package/dist/index.d.ts +28 -14
  4. package/dist/index.js +105 -20
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +106 -21
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/scripts/postinstall.js +4 -8
  10. package/scripts/templates/catastyle.config.ts.template +36 -0
  11. package/scripts/templates/logo.config.ts.template +0 -14
  12. package/scripts/templates/theme.config.ts.template +0 -34
package/README.md CHANGED
@@ -99,13 +99,14 @@ Após instalar o pacote, o script **postinstall** cria em seu projeto a pasta de
99
99
 
100
100
  ```
101
101
  src/catastyle/config/
102
- ├── theme.config.ts
103
- └── logo.config.ts
102
+ └── catastyle.config.ts
104
103
  ```
105
104
 
105
+ Temas, logos e ícones do ThemeButton são configurados no mesmo arquivo.
106
+
106
107
  ### Temas customizados
107
108
 
108
- Edite `src/catastyle/config/theme.config.ts` e defina `darkTheme` e/ou `lightTheme`. Se forem `null`, os temas padrão do Catastyle são usados.
109
+ Edite `src/catastyle/config/catastyle.config.ts` e defina `darkTheme` e/ou `lightTheme`. Se forem `null`, os temas padrão do Catastyle são usados.
109
110
 
110
111
  Exemplo de tema customizado:
111
112
 
@@ -133,11 +134,13 @@ export const lightTheme: DefaultTheme | null = {
133
134
 
134
135
  Os **logos padrão** do Catastyle vêm embutidos no pacote (data URL) e funcionam em qualquer bundler (Vite, Webpack, etc.) sem configuração extra.
135
136
 
136
- Para usar seus próprios SVGs, edite `src/catastyle/config/logo.config.ts` e defina os caminhos. Use `'default'` para manter os logos do Catastyle. Os caminhos devem ser os que o seu projeto consegue resolver (ex.: caminho público ou URL).
137
+ Para usar seus próprios SVGs, edite `src/catastyle/config/catastyle.config.ts` e defina os caminhos em `logoLight`/`logoDark` e, se quiser, em `iconLight`/`iconDark` (ícone do ThemeButton). Use `'default'` para manter os padrão do Catastyle. Os caminhos devem ser os que o seu projeto consegue resolver (ex.: caminho público ou URL).
137
138
 
138
139
  ```ts
139
140
  export const logoLight: string = '/src/assets/logo-light.svg'
140
141
  export const logoDark: string = '/src/assets/logo-dark.svg'
142
+ export const iconLight: string = 'default' // ou mesmo path do logo
143
+ export const iconDark: string = 'default'
141
144
  ```
142
145
 
143
146
  ## Exports adicionais
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import react__default, { HTMLAttributes } from 'react';
3
+ import react__default from 'react';
4
4
  import { DefaultTheme } from 'styled-components/';
5
5
  import * as styled_components from 'styled-components';
6
6
  export { ThemeProvider } from 'styled-components';
@@ -29,34 +29,39 @@ type BreakpointType = {
29
29
 
30
30
  type ButtonType = {
31
31
  children: React.ReactNode;
32
+ className?: string;
32
33
  id?: string;
33
34
  onClick?: () => void;
34
35
  disabled?: boolean;
35
36
  as?: React.ElementType;
36
37
  type?: 'button' | 'submit' | 'reset';
37
38
  } & WidthType & FontSizeType;
38
- declare const Button: ({ children, onClick, disabled, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, as, type, id }: ButtonType) => react_jsx_runtime.JSX.Element;
39
+ declare const Button: ({ children, className, onClick, disabled, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, as, type, id }: ButtonType) => react_jsx_runtime.JSX.Element;
39
40
 
40
41
  type CheckboxType = {
41
42
  id: string;
42
43
  name: string;
43
44
  checked?: boolean;
45
+ className?: string;
44
46
  $disabled?: boolean;
45
47
  children: string;
46
48
  display?: string;
47
49
  onClick?: () => void;
48
50
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
49
51
  } & WidthType & FontSizeType;
50
- declare const Checkbox: ({ id, name, checked, $disabled, children, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, onClick, onChange }: CheckboxType) => react_jsx_runtime.JSX.Element;
52
+ declare const Checkbox: ({ id, name, checked, className, $disabled, children, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, onClick, onChange }: CheckboxType) => react_jsx_runtime.JSX.Element;
51
53
 
52
- declare const Footer: ({ children }: {
54
+ type FooterType = {
53
55
  children: React.ReactNode;
54
- }) => react_jsx_runtime.JSX.Element;
56
+ className?: string;
57
+ };
58
+ declare const Footer: ({ children, className }: FooterType) => react_jsx_runtime.JSX.Element;
55
59
 
56
60
  type InputType = {
57
61
  type: string;
58
62
  id: string;
59
63
  name: string;
64
+ className?: string;
60
65
  placeholder?: string;
61
66
  value?: string;
62
67
  display?: string;
@@ -65,49 +70,58 @@ type InputType = {
65
70
  onClick?: () => void;
66
71
  onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
67
72
  } & WidthType & FontSizeType;
68
- declare const Input: ({ type, id, name, placeholder, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, $disabled, $required, onClick, onChange }: InputType) => react_jsx_runtime.JSX.Element;
73
+ declare const Input: ({ type, id, name, className, placeholder, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, $disabled, $required, onClick, onChange }: InputType) => react_jsx_runtime.JSX.Element;
69
74
 
70
75
  type LabelType = {
71
76
  htmlFor: string;
72
77
  children: react__default.ReactNode;
78
+ className?: string;
73
79
  color?: 'primary' | 'secondary';
74
80
  } & FontSizeType;
75
- declare const Label: ({ htmlFor, children, $lgFontSize, $mdFontSize, $smFontSize }: LabelType) => react_jsx_runtime.JSX.Element;
81
+ declare const Label: ({ htmlFor, children, className, $lgFontSize, $mdFontSize, $smFontSize }: LabelType) => react_jsx_runtime.JSX.Element;
76
82
 
77
83
  type LinkType = {
78
84
  href?: string;
79
85
  to?: string;
80
86
  children: React.ReactNode;
87
+ className?: string;
81
88
  $target?: '_blank' | '_self';
82
89
  $isInternal?: boolean;
83
90
  } & FontSizeType;
84
- declare const Link: ({ href, to, children, $target, $isInternal, $lgFontSize, $mdFontSize, $smFontSize }: LinkType) => react_jsx_runtime.JSX.Element;
91
+ declare const Link: ({ href, to, children, className, $target, $isInternal, $lgFontSize, $mdFontSize, $smFontSize }: LinkType) => react_jsx_runtime.JSX.Element;
85
92
 
86
- type LogoProps = WidthType & HTMLAttributes<HTMLDivElement>;
87
- declare const Logo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
93
+ type LogoProps = {
94
+ className?: string;
95
+ } & WidthType;
96
+ declare const Logo: ({ className, $lgWidth, $mdWidth, $smWidth }: LogoProps) => react_jsx_runtime.JSX.Element;
88
97
 
89
98
  type MainType = {
90
99
  children: React.ReactNode;
100
+ className?: string;
91
101
  };
92
- declare const Main: ({ children }: MainType) => react_jsx_runtime.JSX.Element;
102
+ declare const Main: ({ children, className }: MainType) => react_jsx_runtime.JSX.Element;
93
103
 
94
104
  type TextType = {
95
105
  as: 'p' | 'span';
96
106
  children: React.ReactNode;
107
+ className?: string;
97
108
  color?: 'primary' | 'secondary';
98
109
  } & FontSizeType;
99
- declare const Text: ({ as, children, color, $lgFontSize, $mdFontSize, $smFontSize }: TextType) => react_jsx_runtime.JSX.Element;
110
+ declare const Text: ({ as, children, className, color, $lgFontSize, $mdFontSize, $smFontSize }: TextType) => react_jsx_runtime.JSX.Element;
100
111
 
101
112
  type ThemeButtonType = {
113
+ className?: string;
102
114
  onClick?: () => void;
115
+ position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
103
116
  };
104
- declare const ThemeButton: ({ onClick }: ThemeButtonType) => react_jsx_runtime.JSX.Element;
117
+ declare const ThemeButton: ({ className, onClick, position }: ThemeButtonType) => react_jsx_runtime.JSX.Element;
105
118
 
106
119
  type TitleType = {
107
120
  children: string;
121
+ className?: string;
108
122
  color: 'primary' | 'secondary';
109
123
  } & FontSizeType;
110
- declare const Title: ({ children, color, $lgFontSize, $mdFontSize, $smFontSize }: TitleType) => react_jsx_runtime.JSX.Element;
124
+ declare const Title: ({ children, className, color, $lgFontSize, $mdFontSize, $smFontSize }: TitleType) => react_jsx_runtime.JSX.Element;
111
125
 
112
126
  declare const DarkTheme: DefaultTheme;
113
127
 
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import react__default, { HTMLAttributes } from 'react';
3
+ import react__default from 'react';
4
4
  import { DefaultTheme } from 'styled-components/';
5
5
  import * as styled_components from 'styled-components';
6
6
  export { ThemeProvider } from 'styled-components';
@@ -29,34 +29,39 @@ type BreakpointType = {
29
29
 
30
30
  type ButtonType = {
31
31
  children: React.ReactNode;
32
+ className?: string;
32
33
  id?: string;
33
34
  onClick?: () => void;
34
35
  disabled?: boolean;
35
36
  as?: React.ElementType;
36
37
  type?: 'button' | 'submit' | 'reset';
37
38
  } & WidthType & FontSizeType;
38
- declare const Button: ({ children, onClick, disabled, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, as, type, id }: ButtonType) => react_jsx_runtime.JSX.Element;
39
+ declare const Button: ({ children, className, onClick, disabled, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, as, type, id }: ButtonType) => react_jsx_runtime.JSX.Element;
39
40
 
40
41
  type CheckboxType = {
41
42
  id: string;
42
43
  name: string;
43
44
  checked?: boolean;
45
+ className?: string;
44
46
  $disabled?: boolean;
45
47
  children: string;
46
48
  display?: string;
47
49
  onClick?: () => void;
48
50
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
49
51
  } & WidthType & FontSizeType;
50
- declare const Checkbox: ({ id, name, checked, $disabled, children, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, onClick, onChange }: CheckboxType) => react_jsx_runtime.JSX.Element;
52
+ declare const Checkbox: ({ id, name, checked, className, $disabled, children, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, onClick, onChange }: CheckboxType) => react_jsx_runtime.JSX.Element;
51
53
 
52
- declare const Footer: ({ children }: {
54
+ type FooterType = {
53
55
  children: React.ReactNode;
54
- }) => react_jsx_runtime.JSX.Element;
56
+ className?: string;
57
+ };
58
+ declare const Footer: ({ children, className }: FooterType) => react_jsx_runtime.JSX.Element;
55
59
 
56
60
  type InputType = {
57
61
  type: string;
58
62
  id: string;
59
63
  name: string;
64
+ className?: string;
60
65
  placeholder?: string;
61
66
  value?: string;
62
67
  display?: string;
@@ -65,49 +70,58 @@ type InputType = {
65
70
  onClick?: () => void;
66
71
  onChange?: (event: react__default.ChangeEvent<HTMLInputElement>) => void;
67
72
  } & WidthType & FontSizeType;
68
- declare const Input: ({ type, id, name, placeholder, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, $disabled, $required, onClick, onChange }: InputType) => react_jsx_runtime.JSX.Element;
73
+ declare const Input: ({ type, id, name, className, placeholder, display, $lgWidth, $mdWidth, $smWidth, $lgFontSize, $mdFontSize, $smFontSize, $disabled, $required, onClick, onChange }: InputType) => react_jsx_runtime.JSX.Element;
69
74
 
70
75
  type LabelType = {
71
76
  htmlFor: string;
72
77
  children: react__default.ReactNode;
78
+ className?: string;
73
79
  color?: 'primary' | 'secondary';
74
80
  } & FontSizeType;
75
- declare const Label: ({ htmlFor, children, $lgFontSize, $mdFontSize, $smFontSize }: LabelType) => react_jsx_runtime.JSX.Element;
81
+ declare const Label: ({ htmlFor, children, className, $lgFontSize, $mdFontSize, $smFontSize }: LabelType) => react_jsx_runtime.JSX.Element;
76
82
 
77
83
  type LinkType = {
78
84
  href?: string;
79
85
  to?: string;
80
86
  children: React.ReactNode;
87
+ className?: string;
81
88
  $target?: '_blank' | '_self';
82
89
  $isInternal?: boolean;
83
90
  } & FontSizeType;
84
- declare const Link: ({ href, to, children, $target, $isInternal, $lgFontSize, $mdFontSize, $smFontSize }: LinkType) => react_jsx_runtime.JSX.Element;
91
+ declare const Link: ({ href, to, children, className, $target, $isInternal, $lgFontSize, $mdFontSize, $smFontSize }: LinkType) => react_jsx_runtime.JSX.Element;
85
92
 
86
- type LogoProps = WidthType & HTMLAttributes<HTMLDivElement>;
87
- declare const Logo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
93
+ type LogoProps = {
94
+ className?: string;
95
+ } & WidthType;
96
+ declare const Logo: ({ className, $lgWidth, $mdWidth, $smWidth }: LogoProps) => react_jsx_runtime.JSX.Element;
88
97
 
89
98
  type MainType = {
90
99
  children: React.ReactNode;
100
+ className?: string;
91
101
  };
92
- declare const Main: ({ children }: MainType) => react_jsx_runtime.JSX.Element;
102
+ declare const Main: ({ children, className }: MainType) => react_jsx_runtime.JSX.Element;
93
103
 
94
104
  type TextType = {
95
105
  as: 'p' | 'span';
96
106
  children: React.ReactNode;
107
+ className?: string;
97
108
  color?: 'primary' | 'secondary';
98
109
  } & FontSizeType;
99
- declare const Text: ({ as, children, color, $lgFontSize, $mdFontSize, $smFontSize }: TextType) => react_jsx_runtime.JSX.Element;
110
+ declare const Text: ({ as, children, className, color, $lgFontSize, $mdFontSize, $smFontSize }: TextType) => react_jsx_runtime.JSX.Element;
100
111
 
101
112
  type ThemeButtonType = {
113
+ className?: string;
102
114
  onClick?: () => void;
115
+ position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
103
116
  };
104
- declare const ThemeButton: ({ onClick }: ThemeButtonType) => react_jsx_runtime.JSX.Element;
117
+ declare const ThemeButton: ({ className, onClick, position }: ThemeButtonType) => react_jsx_runtime.JSX.Element;
105
118
 
106
119
  type TitleType = {
107
120
  children: string;
121
+ className?: string;
108
122
  color: 'primary' | 'secondary';
109
123
  } & FontSizeType;
110
- declare const Title: ({ children, color, $lgFontSize, $mdFontSize, $smFontSize }: TitleType) => react_jsx_runtime.JSX.Element;
124
+ declare const Title: ({ children, className, color, $lgFontSize, $mdFontSize, $smFontSize }: TitleType) => react_jsx_runtime.JSX.Element;
111
125
 
112
126
  declare const DarkTheme: DefaultTheme;
113
127