@yuva-devlab/ui 0.1.0 โ†’ 0.1.2

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 (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +164 -40
  3. package/package.json +7 -7
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Yuva Devlab
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,50 +1,131 @@
1
1
  # ๐Ÿ“ฆ @yuva-devlab/ui
2
2
 
3
- A fully-typed, themeable, **Vanilla Extract** powered component library built on
4
- top of:
3
+ [![npm version](https://img.shields.io/npm/v/@yuva-devlab/ui.svg)](https://www.npmjs.com/package/@yuva-devlab/ui)
4
+ [![npm downloads](https://img.shields.io/npm/dm/@yuva-devlab/ui.svg)](https://www.npmjs.com/package/@yuva-devlab/ui)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
5
6
 
6
- - `@yuva-devlab/tokens` (design tokens)
7
- - `@yuva-devlab/primitives` (headless logic)
8
- - Full TypeScript support
7
+ > A production-ready, fully-typed React component library built with Vanilla
8
+ > Extract, featuring a natural design system and comprehensive accessibility
9
+ > support.
9
10
 
10
- This is the main **consumer-facing** UI library.
11
+ ## Features
11
12
 
12
- ---
13
+ - ๐ŸŽจ **Natural Design System** - Organic color palettes inspired by Material
14
+ Design 3
15
+ - ๐Ÿ”’ **Type-Safe** - Full TypeScript support with comprehensive type definitions
16
+ - ๐ŸŽญ **Zero-Runtime CSS** - Vanilla Extract compiles styles at build time
17
+ - โ™ฟ **Accessible** - Built on Radix UI primitives with ARIA compliance
18
+ - ๐Ÿงฉ **Polymorphic** - Components support `as` prop for semantic flexibility
19
+ - ๐ŸŽฏ **Tree-Shakeable** - Import only what you need
20
+ - ๐Ÿ“ฆ **Monorepo Architecture** - Clean separation of tokens, primitives, and
21
+ components
13
22
 
14
- ## โœจ Features
23
+ ## Installation
15
24
 
16
- - **Atomic Foundation**: Components like Button, Input, and Typography.
17
- - **Layout System**: High-level primitives for `Box`, `Flex`, `Grid`, and
18
- `Stack`.
19
- - **Vanilla Extract**: Type-safe, zero-runtime CSS with deep token integration.
20
- - **Natural Theme**: Organic-inspired aesthetics with "MD3" influence.
21
- - **Polymorphism**: Components support the `as` prop for semantic flexibility.
25
+ ```bash
26
+ # npm
27
+ npm install @yuva-devlab/ui
28
+
29
+ # yarn
30
+ yarn add @yuva-devlab/ui
22
31
 
23
- ---
32
+ # pnpm
33
+ pnpm add @yuva-devlab/ui
34
+ ```
24
35
 
25
- ## ๐Ÿ“ Folder Structure
36
+ ### Peer Dependencies
26
37
 
27
38
  ```bash
28
- packages/ui/
29
- โ”œโ”€โ”€ src/
30
- โ”‚ โ”œโ”€โ”€ components/
31
- โ”‚ โ”‚ โ”œโ”€โ”€ button/
32
- โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ button.tsx
33
- โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ button.styles.css.ts # Vanilla Extract styles
34
- โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ button.types.ts
35
- โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ index.ts
36
- โ”‚ โ”‚ โ”œโ”€โ”€ layout/ # Box, Flex, Grid, Stack, Container
37
- โ”‚ โ”‚ โ””โ”€โ”€ ...
38
- โ”‚ โ””โ”€โ”€ index.ts
39
- โ””โ”€โ”€ README.md
39
+ # npm
40
+ npm install react@^19.2.0 react-dom@^19.2.0
41
+
42
+ # yarn
43
+ yarn add react@^19.2.0 react-dom@^19.2.0
44
+
45
+ # pnpm
46
+ pnpm add react@^19.2.0 react-dom@^19.2.0
40
47
  ```
41
48
 
42
- ---
49
+ ## Quick Start
50
+
51
+ ```tsx
52
+ import { Button, Input, Stack, Container } from "@yuva-devlab/ui";
53
+ import "@yuva-devlab/ui/styles.css";
54
+
55
+ function App() {
56
+ return (
57
+ <Container size="lg">
58
+ <Stack gap="md">
59
+ <Input
60
+ label="Email"
61
+ placeholder="you@example.com"
62
+ type="email"
63
+ />
64
+ <Button
65
+ variant="primary"
66
+ size="md"
67
+ >
68
+ Sign In
69
+ </Button>
70
+ </Stack>
71
+ </Container>
72
+ );
73
+ }
74
+ ```
75
+
76
+ ## Available Components
77
+
78
+ ### Form Components
79
+
80
+ - **Button** - Primary, secondary, tertiary variants with loading states
81
+ - **Input** - Text input with label, error states, and helper text
82
+
83
+ ### Typography
84
+
85
+ - **Typography** - Polymorphic text component supporting h1-h6, p, span, etc.
86
+
87
+ ### Layout Components
88
+
89
+ - **Box** - Polymorphic container with spacing utilities
90
+ - **Flex** - Flexbox layout with alignment and gap props
91
+ - **Grid** - CSS Grid layout with responsive columns
92
+ - **Stack** - Vertical/horizontal stacking with consistent spacing
93
+ - **Container** - Responsive max-width wrapper (sm, md, lg, xl, 2xl)
94
+
95
+ ### Coming Soon
96
+
97
+ - Select (Radix UI based)
98
+ - Switch (Radix UI based)
99
+ - Checkbox (Radix UI based)
100
+ - Radio (Radix UI based)
101
+ - InputNumber
102
+
103
+ ## Component Examples
104
+
105
+ ### Button
106
+
107
+ ```tsx
108
+ import { Button } from "@yuva-devlab/ui";
109
+
110
+ // Variants
111
+ <Button variant="primary">Primary Action</Button>
112
+ <Button variant="secondary">Secondary Action</Button>
113
+ <Button variant="tertiary">Tertiary Action</Button>
114
+
115
+ // Sizes
116
+ <Button size="sm">Small</Button>
117
+ <Button size="md">Medium</Button>
118
+ <Button size="lg">Large</Button>
43
119
 
44
- ## ๐ŸŽจ Layout System
120
+ // States
121
+ <Button loading>Loading...</Button>
122
+ <Button disabled>Disabled</Button>
123
+
124
+ // Polymorphic
125
+ <Button as="a" href="/home">Link Button</Button>
126
+ ```
45
127
 
46
- We provide a specialized set of components to handle all structural needs
47
- without custom CSS:
128
+ ### Layout System
48
129
 
49
130
  ```tsx
50
131
  import { Container, Stack, Flex, Box } from "@yuva-devlab/ui";
@@ -55,24 +136,67 @@ import { Container, Stack, Flex, Box } from "@yuva-devlab/ui";
55
136
  align="center"
56
137
  justify="between"
57
138
  >
58
- <Box p="md">Brand</Box>
59
- <Box>Menu</Box>
139
+ <Box p="md">Logo</Box>
140
+ <Box>Navigation</Box>
60
141
  </Flex>
142
+
143
+ <Grid
144
+ cols={{ base: 1, md: 2, lg: 3 }}
145
+ gap="md"
146
+ >
147
+ <Box p="lg">Card 1</Box>
148
+ <Box p="lg">Card 2</Box>
149
+ <Box p="lg">Card 3</Box>
150
+ </Grid>
61
151
  </Stack>
62
152
  </Container>;
63
153
  ```
64
154
 
65
- ---
155
+ ## Styling
156
+
157
+ This library uses Vanilla Extract for type-safe, zero-runtime CSS. All styles
158
+ are compiled at build time.
159
+
160
+ ### Importing Styles
161
+
162
+ ```tsx
163
+ // Import global styles once in your app entry point
164
+ import "@yuva-devlab/ui/styles.css";
165
+ ```
166
+
167
+ ### Theming
66
168
 
67
- ## ๐Ÿงช Testing
169
+ The library includes a natural theme by default. Custom theming support coming
170
+ soon.
68
171
 
69
- Run tests across the UI library:
172
+ ## Development
70
173
 
71
174
  ```bash
175
+ # Install dependencies
176
+ pnpm install
177
+
178
+ # Build the library
179
+ pnpm --filter @yuva-devlab/ui build
180
+
181
+ # Run tests
72
182
  pnpm --filter @yuva-devlab/ui test
183
+
184
+ # Type check
185
+ pnpm --filter @yuva-devlab/ui type-check
73
186
  ```
74
187
 
75
- ## ๐Ÿ“š Documentation
188
+ ## Documentation
189
+
190
+ - **Storybook**: Run `pnpm dev:docs` to view interactive component documentation
191
+ - **Playground**: Run `pnpm dev:playground` to test components in a live
192
+ environment
193
+
194
+ ## Related Packages
195
+
196
+ - [@yuva-devlab/primitives](../primitives) - Headless component logic
197
+ - [@yuva-devlab/tokens](../tokens) - Design system tokens
198
+ - [@yuva-devlab/colors](../colors) - Color palette generation
199
+
200
+ ## License
76
201
 
77
- UI components are documented in `apps/docs` using Storybook and can be previewed
78
- in real-time in `apps/playground`.
202
+ MIT ยฉ Yuva Devlab
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuva-devlab/ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",
@@ -24,9 +24,9 @@
24
24
  "dependencies": {
25
25
  "@vanilla-extract/css": "^1.17.4",
26
26
  "clsx": "^2.1.1",
27
- "@yuva-devlab/colors": "0.1.0",
28
- "@yuva-devlab/primitives": "0.1.0",
29
- "@yuva-devlab/tokens": "0.1.0"
27
+ "@yuva-devlab/colors": "0.1.2",
28
+ "@yuva-devlab/primitives": "0.1.2",
29
+ "@yuva-devlab/tokens": "0.1.2"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@testing-library/jest-dom": "^6.9.1",
@@ -41,9 +41,9 @@
41
41
  "vite": "^7.2.4",
42
42
  "vite-plugin-dts": "^4.5.4",
43
43
  "vitest": "^4.0.13",
44
- "@yuva-devlab/eslint-config": "0.1.0",
45
- "@yuva-devlab/prettier-config": "0.1.0",
46
- "@yuva-devlab/typescript-config": "0.1.0"
44
+ "@yuva-devlab/eslint-config": "0.1.1",
45
+ "@yuva-devlab/prettier-config": "0.1.1",
46
+ "@yuva-devlab/typescript-config": "0.1.1"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": "^19.2.0",