0
# Teste UI System
1
2
Chakra UI system primitives providing a styled API for creating atomic, theme-aware component styling. This package enables creating customizable, theme-aware React components with style props and theming capabilities.
3
4
## Package Information
5
6
- **Package Name**: @teste-ui/system
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @teste-ui/system` or `yarn add @teste-ui/system`
10
11
## Core Imports
12
13
```typescript
14
import { chakra, styled, useTheme, ThemeProvider } from "@teste-ui/system";
15
```
16
17
For CommonJS:
18
19
```javascript
20
const { chakra, styled, useTheme, ThemeProvider } = require("@teste-ui/system");
21
```
22
23
## Basic Usage
24
25
```typescript
26
import { chakra, ThemeProvider } from "@teste-ui/system";
27
28
// Create enhanced JSX elements with style props
29
function App() {
30
return (
31
<ThemeProvider theme={theme}>
32
<chakra.button
33
bg="green.200"
34
_hover={{ bg: "green.300" }}
35
px={4}
36
py={2}
37
>
38
Click me
39
</chakra.button>
40
41
<chakra.h1 fontSize="lg" color="blue.500">
42
Heading
43
</chakra.h1>
44
45
{/* Create custom styled components */}
46
<chakra.div
47
as="section"
48
bg="gray.50"
49
p={6}
50
borderRadius="md"
51
>
52
Content area
53
</chakra.div>
54
</ThemeProvider>
55
);
56
}
57
```
58
59
## Architecture
60
61
The system is built around several key components:
62
63
- **Chakra Factory**: The `chakra` function creates enhanced JSX elements with style props
64
- **Styled System**: Integration with style props for responsive, theme-aware styling
65
- **Theme Provider**: Context for theme and color mode management
66
- **Style Configuration**: Component theming system with variants, sizes, and color schemes
67
- **TypeScript Integration**: Full type safety for style props and component composition
68
69
## Capabilities
70
71
### Chakra Factory
72
73
Create enhanced JSX elements that accept style props and theme-aware styling.
74
75
```typescript { .api }
76
declare const chakra: ChakraFactory & HTMLChakraComponents;
77
78
type ChakraFactory = {
79
<T extends As, P = {}>(component: T, options?: ChakraStyledOptions): ChakraComponent<T, P>;
80
};
81
82
type HTMLChakraComponents = {
83
[Tag in DOMElements]: ChakraComponent<Tag, {}>;
84
};
85
```
86
87
### Styled Component Creation
88
89
Create custom styled components with theme awareness and style props.
90
91
```typescript { .api }
92
function styled<T extends As, P = {}>(
93
component: T,
94
options?: ChakraStyledOptions
95
): ChakraComponent<T, P>;
96
97
interface ChakraStyledOptions extends Dict {
98
shouldForwardProp?(prop: string): boolean;
99
label?: string;
100
baseStyle?: SystemStyleObject | ((props: StyleResolverProps) => SystemStyleObject);
101
}
102
```
103
104
### Theme Provider
105
106
Provides theme context and CSS custom properties for the application.
107
108
```typescript { .api }
109
function ThemeProvider(props: ThemeProviderProps): JSX.Element;
110
111
interface ThemeProviderProps extends EmotionThemeProviderProps {
112
cssVarsRoot?: string;
113
}
114
115
function useTheme<T extends object = Dict>(): WithCSSVar<T>;
116
```
117
118
### Style Configuration Hooks
119
120
Hooks for applying component theming with variants, sizes, and color schemes.
121
122
```typescript { .api }
123
function useStyleConfig(
124
themeKey: string,
125
props?: ThemingProps & Dict
126
): CSSObject;
127
128
function useMultiStyleConfig(
129
themeKey: string,
130
props?: ThemingProps & Dict
131
): Record<string, CSSObject>;
132
```
133
134
### Theme Hooks
135
136
Access theme values and color mode functionality.
137
138
```typescript { .api }
139
function useChakra<T extends Dict = Dict>(): {
140
theme: T;
141
colorMode: ColorMode;
142
toggleColorMode: () => void;
143
setColorMode: (value: any) => void;
144
};
145
146
function useToken<T extends StringOrNumber | StringOrNumber[]>(
147
scale: string,
148
token: T,
149
fallback?: T
150
): T;
151
```
152
153
### Styles Context
154
155
Create and manage component-specific style contexts.
156
157
```typescript { .api }
158
function createStylesContext(componentName: string): [
159
React.Provider<Dict<CSSObject>>,
160
() => Dict<CSSObject>,
161
React.Context<Dict<CSSObject>>
162
];
163
```
164
165
### Forward Ref Utility
166
167
Enhanced forwardRef with proper TypeScript support for polymorphic components.
168
169
```typescript { .api }
170
function forwardRef<Props extends object, Component extends As>(
171
component: React.ForwardRefRenderFunction<
172
any,
173
RightJoinProps<PropsOf<Component>, Props> & { as?: As; }
174
>
175
): ComponentWithAs<Component, Props>;
176
```
177
178
## Types
179
180
```typescript { .api }
181
interface ChakraProps extends SystemProps {
182
/** Used to truncate text at a specific number of lines */
183
noOfLines?: ResponsiveValue<number>;
184
/** Used for internal css management */
185
__css?: SystemStyleObject;
186
/** Used to pass theme-aware style props */
187
sx?: SystemStyleObject;
188
/** The emotion's css style object */
189
css?: Interpolation<{}>;
190
}
191
192
interface ThemingProps<ThemeComponent extends string = any> {
193
variant?: ResponsiveValue<string>;
194
size?: ResponsiveValue<string>;
195
colorScheme?: ThemeTypings["colorSchemes"];
196
orientation?: "vertical" | "horizontal";
197
styleConfig?: Dict;
198
}
199
200
type As<Props = any> = React.ElementType<Props>;
201
202
type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
203
as?: As;
204
};
205
206
interface ChakraComponent<T extends As, P = {}>
207
extends ComponentWithAs<T, ChakraProps & P> {}
208
209
type HTMLChakraProps<T extends As> = Omit<PropsOf<T>, "ref" | keyof StyleProps> &
210
ChakraProps & { as?: As; };
211
```
212
213
## Re-exported APIs
214
215
This package also re-exports functionality from related packages:
216
217
- **@teste-ui/color-mode**: Color mode utilities and hooks
218
- **@teste-ui/styled-system**: Style props and responsive utilities
219
- **@emotion/react**: `keyframes` and `Interpolation` types