@moises.ai/design-system 1.0.21 → 1.0.23

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 (9) hide show
  1. package/Readme.md +60 -18
  2. package/dist/icons.js +426 -114
  3. package/dist/index-CpglT-SS.js +8383 -0
  4. package/dist/index.js +2040 -3
  5. package/dist/primitives.js +3126 -0
  6. package/dist/react-icons.esm-DrgObs82.js +6780 -0
  7. package/dist/styles.css +10 -0
  8. package/package.json +18 -13
  9. package/styles.css +0 -110
package/Readme.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @moises.ai/design-system
2
2
 
3
- Design System package based on @radix-ui/themes with custom defaults.
3
+ A comprehensive design system built on Radix UI components with custom theming and components.
4
4
 
5
5
  ## Installation
6
6
 
@@ -10,35 +10,77 @@ npm install @moises.ai/design-system
10
10
 
11
11
  ## Usage
12
12
 
13
+ ### Basic Components
14
+
15
+ Import components from the main package:
16
+
13
17
  ```jsx
14
- import { Theme, Button, Text } from '@moises.ai/design-system';
18
+ import { Box, Flex, Hello, World, Header } from "@moises.ai/design-system";
15
19
 
16
20
  function App() {
17
21
  return (
18
- <Theme>
19
- <Button>Click me</Button>
20
- <Text>Hello world</Text>
21
- </Theme>
22
+ <Box>
23
+ <Header title="My App" />
24
+ <Flex>
25
+ <Hello name="Developer" />
26
+ <World />
27
+ </Flex>
28
+ </Box>
22
29
  );
23
30
  }
24
31
  ```
25
32
 
26
- # Setup example
33
+ ### Icons
34
+
35
+ Import icons from the icons subpackage:
27
36
 
28
- Next.js:
29
37
  ```jsx
30
- import { Theme } from "@moises.ai/design-system";
31
- import "@moises.ai/design-system/styles.css";
38
+ import { PlayIcon, RecordIcon } from "@moises.ai/design-system/icons";
39
+
40
+ function IconDemo() {
41
+ return (
42
+ <div>
43
+ <PlayIcon />
44
+ <RecordIcon />
45
+ </div>
46
+ );
47
+ }
48
+ ```
49
+
50
+ ### Primitives
51
+
52
+ Import primitive components:
53
+
54
+ ```jsx
55
+ import { Hello, World } from "@moises.ai/design-system/primitives";
32
56
 
33
- export default function RootLayout({ children }) {
57
+ function PrimitivesDemo() {
34
58
  return (
35
- <html lang="en" className="dark" style={{ colorScheme: "dark" }}>
36
- <body>
37
- <Theme>
38
- {children}
39
- </Theme>
40
- </body>
41
- </html>
59
+ <>
60
+ <Hello />
61
+ <World />
62
+ </>
42
63
  );
43
64
  }
44
65
  ```
66
+
67
+ ### CSS Styles
68
+
69
+ Import the CSS styles:
70
+
71
+ ```jsx
72
+ import "@moises.ai/design-system/styles.css";
73
+ ```
74
+
75
+ Make sure to import this at the root of your application to ensure all styles are loaded correctly.
76
+
77
+ ## Development
78
+
79
+ 1. Clone this repository
80
+ 2. Install dependencies: `npm install`
81
+ 3. Start development mode: `npm run dev`
82
+ 4. Build: `npm run build`
83
+
84
+ ## License
85
+
86
+ MIT