@ttoss/ui 5.9.0 → 5.9.1

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 (2) hide show
  1. package/README.md +134 -68
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,10 +1,6 @@
1
1
  # @ttoss/ui
2
2
 
3
- **@ttoss/ui** is a library of React low level components for building user interfaces and defining the design system of your application. It is built on top of [Theme UI: The Design Graph Framework](https://theme-ui.com/), so that you'll be able to consult the [Theme UI documentation](https://theme-ui.com/getting-started) to learn more about the design system and the components.
4
-
5
- ## ESM Only
6
-
7
- This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
3
+ React component library built on [Theme UI](https://theme-ui.com/) for building consistent, accessible user interfaces with [design token](https://ttoss.dev/docs/design/design-system/design-tokens) integration.
8
4
 
9
5
  ## Installation
10
6
 
@@ -12,101 +8,171 @@ This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908
12
8
  pnpm add @ttoss/ui @ttoss/react-icons @emotion/react
13
9
  ```
14
10
 
15
- ## Quickstart
11
+ **ESM Only**: This package requires ES modules support.
16
12
 
17
- Create a theme object to define the design tokens of your application.
13
+ ## Quick Start
18
14
 
19
- ```ts
20
- import type { Theme } from '@ttoss/ui';
21
-
22
- export const theme: Theme = {
23
- colors: {
24
- text: '#000',
25
- background: '#fff',
26
- primary: '#33e',
27
- },
28
- };
29
- ```
30
-
31
- Pass your theme to the `ThemeProvider` component at the root of your application.
15
+ ### 1. Setup Theme Provider
32
16
 
33
17
  ```tsx
34
- import { Heading, ThemeProvider } from '@ttoss/ui';
35
- import { theme } from './theme';
18
+ import { ThemeProvider } from '@ttoss/ui';
19
+ import { BruttalTheme } from '@ttoss/theme/Bruttal';
36
20
 
37
21
  export const App = () => (
38
- <ThemeProvider theme={theme}>
39
- <Heading as="h1" sx={{ color: 'primary' }}>
40
- Hello
41
- </Heading>
22
+ <ThemeProvider theme={BruttalTheme}>
23
+ <YourAppContent />
42
24
  </ThemeProvider>
43
25
  );
44
26
  ```
45
27
 
46
- Now, you can use the components of the library in your application and access the [design tokens](/docs/design/design-system/design-tokens) defined in your theme through the [`sx` prop](https://theme-ui.com/getting-started#sx-prop).
28
+ ### 2. Use Components
47
29
 
48
30
  ```tsx
49
- import { Flex, Text, Box, Button } from '@ttoss/ui';
50
-
51
- export const Component = () => {
52
- return (
53
- <Flex sx={{ flexDirection: 'column' }}>
54
- <Text>Text Value</Text>
55
- <Button
56
- sx={{
57
- backgroundColor: 'primary',
58
- }}
59
- >
60
- Button Primary
61
- </Button>
31
+ import { Flex, Text, Button, Box } from '@ttoss/ui';
32
+
33
+ export const Example = () => (
34
+ <Box sx={{ padding: 'lg' }}>
35
+ <Text variant="heading">Welcome</Text>
36
+ <Flex sx={{ gap: 'md', flexDirection: 'column' }}>
37
+ <Button variant="primary">Get Started</Button>
38
+ <Text>
39
+ Access [design
40
+ tokens](https://ttoss.dev/docs/design/design-system/design-tokens) via
41
+ the `sx` prop
42
+ </Text>
62
43
  </Flex>
63
- );
44
+ </Box>
45
+ );
46
+ ```
47
+
48
+ ### 3. Custom Themes (Optional)
49
+
50
+ ```tsx
51
+ import type { Theme } from '@ttoss/ui';
52
+
53
+ export const customTheme: Theme = {
54
+ colors: {
55
+ primary: '#007acc',
56
+ background: '#ffffff',
57
+ text: '#000000',
58
+ },
64
59
  };
65
60
  ```
66
61
 
67
- :::note Note
62
+ **Note**: No custom JSX pragma needed when using `sx` prop directly on library components.
63
+
64
+ ## Available Components
65
+
66
+ **Browse all components**: [Storybook Documentation](https://storybook.ttoss.dev/?path=/story/ui)
67
+
68
+ ### Layout & Structure
68
69
 
69
- You don't need to use the custom `/** @jsxImportSource theme-ui */` pragma if you use the `sx` prop directly on the components of the library.
70
+ - `Box` - Basic container with styling capabilities
71
+ - `Flex` - Flexbox container for flexible layouts
72
+ - `Grid` - CSS Grid container for complex layouts
73
+ - `Container` - Centered container with max-width
74
+ - `Stack` - Vertical/horizontal stack layouts
75
+ - `Divider` - Visual content separators
76
+ - `Card` - Content containers with styling
70
77
 
71
- :::
78
+ ### Typography
72
79
 
73
- ## Components
80
+ - `Text` - Text display with variants
81
+ - `Heading` - Heading elements (h1-h6)
82
+ - `Paragraph` - Paragraph text blocks
83
+ - `Link` - Styled anchor elements
84
+ - `Label` - Form labels
74
85
 
75
- You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/ui).
86
+ ### Form Controls
76
87
 
77
- ### Global
88
+ - `Button` - Interactive buttons with variants
89
+ - `ActionButton` - Action-specific buttons
90
+ - `IconButton` - Icon-only buttons
91
+ - `CloseButton` - Close/dismiss buttons
92
+ - `Input` - Text input fields
93
+ - `InputNumber` - Numeric input fields
94
+ - `InputPassword` - Password input with reveal
95
+ - `Textarea` - Multi-line text input
96
+ - `Select` - Dropdown selection
97
+ - `Checkbox` - Checkbox controls
98
+ - `Radio` - Radio button controls
99
+ - `Switch` - Toggle switches
100
+ - `Slider` - Range slider controls
101
+ - `SegmentedControl` - Multi-option selector
78
102
 
79
- Wrapper around the Emotion Global component, made Theme UI theme-aware.
103
+ ### Feedback & Status
104
+
105
+ - `Badge` - Status indicators and labels
106
+ - `Tag` - Tagging and categorization
107
+ - `Spinner` - Loading indicators
108
+ - `LinearProgress` - Progress bars
109
+ - `InfiniteLinearProgress` - Indeterminate progress
110
+ - `Tooltip` - Contextual help text
111
+ - `HelpText` - Form help and validation text
112
+
113
+ ### Media
114
+
115
+ - `Image` - Responsive image component
116
+
117
+ ### Advanced Features
118
+
119
+ #### Global Styles
120
+
121
+ Theme-aware global CSS using Emotion:
80
122
 
81
123
  ```tsx
82
124
  import { Global } from '@ttoss/ui';
83
125
 
84
- export const Provider = (props) => {
85
- return (
86
- <Global
87
- styles={{
88
- button: {
89
- m: 0,
90
- bg: 'primary',
91
- color: 'background',
92
- border: 0,
93
- },
94
- }}
95
- />
96
- );
97
- };
126
+ export const AppStyles = () => (
127
+ <Global
128
+ styles={{
129
+ body: {
130
+ margin: 0,
131
+ fontFamily: 'body',
132
+ backgroundColor: 'background',
133
+ },
134
+ }}
135
+ />
136
+ );
98
137
  ```
99
138
 
100
- ## Misc
101
-
102
- ### keyframes
139
+ #### Animations
103
140
 
104
141
  ```tsx
105
142
  import { Box, keyframes } from '@ttoss/ui';
106
143
 
107
- const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
144
+ const fadeIn = keyframes({
145
+ from: { opacity: 0 },
146
+ to: { opacity: 1 },
147
+ });
148
+
149
+ export const AnimatedBox = () => (
150
+ <Box sx={{ animation: `${fadeIn} 1s ease-in` }}>Animated content</Box>
151
+ );
152
+ ```
153
+
154
+ #### Theme Access
155
+
156
+ ```tsx
157
+ import { useTheme } from '@ttoss/ui';
108
158
 
109
- export const Component = (props) => {
110
- return <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />;
159
+ export const CustomComponent = () => {
160
+ const { theme } = useTheme();
161
+ const primaryColor = theme.colors.primary;
162
+
163
+ return <div style={{ color: primaryColor }}>Themed content</div>;
111
164
  };
112
165
  ```
166
+
167
+ ## Integration
168
+
169
+ - **Design System**: Part of the [ttoss Design System](https://ttoss.dev/docs/design/design-system)
170
+ - **Theme Integration**: Uses [semantic tokens](https://ttoss.dev/docs/design/design-system/design-tokens/semantic-tokens)
171
+ - **Accessibility**: Built-in WCAG compliance
172
+ - **TypeScript**: Full type safety with Theme UI integration
173
+
174
+ ## Related Packages
175
+
176
+ - **[@ttoss/theme](https://ttoss.dev/docs/modules/packages/theme)**: Pre-built themes (Bruttal, Oca)
177
+ - **[@ttoss/components](https://ttoss.dev/docs/modules/packages/components)**: Higher-level composed components
178
+ - **[@ttoss/react-icons](https://ttoss.dev/docs/modules/packages/react-icons)**: Icon library integration
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/ui",
3
- "version": "5.9.0",
3
+ "version": "5.9.1",
4
4
  "description": "Primitive layout, typographic, and other components for styling applications.",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -29,12 +29,12 @@
29
29
  "react-select": "^5.9.0",
30
30
  "react-tooltip": "^5.28.0",
31
31
  "theme-ui": "^0.17.1",
32
- "@ttoss/theme": "^2.6.2"
32
+ "@ttoss/theme": "^2.6.3"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "@emotion/react": "^11",
36
36
  "react": ">=16.8.0",
37
- "@ttoss/react-icons": "^0.4.13"
37
+ "@ttoss/react-icons": "^0.4.14"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@emotion/react": "^11.14.0",
@@ -44,9 +44,9 @@
44
44
  "jest": "^30.0.4",
45
45
  "react": "^19.1.0",
46
46
  "tsup": "^8.5.0",
47
- "@ttoss/react-icons": "^0.4.13",
48
- "@ttoss/test-utils": "^2.1.25",
49
- "@ttoss/config": "^1.35.5"
47
+ "@ttoss/react-icons": "^0.4.14",
48
+ "@ttoss/config": "^1.35.5",
49
+ "@ttoss/test-utils": "^2.1.25"
50
50
  },
51
51
  "keywords": [
52
52
  "React",