@phsa.tec/design-system-react 0.2.0 → 0.3.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 (18) hide show
  1. package/README.md +176 -376
  2. package/dist/index.d.mts +16 -115
  3. package/dist/index.d.ts +16 -115
  4. package/dist/index.js +1457 -1115
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1403 -1066
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +1 -1
  9. package/dist/tailwind-preset.d.mts +21 -0
  10. package/dist/tailwind-preset.d.ts +21 -0
  11. package/dist/tailwind-preset.js +101 -0
  12. package/dist/tailwind-preset.js.map +1 -0
  13. package/dist/tailwind-preset.mjs +81 -0
  14. package/dist/tailwind-preset.mjs.map +1 -0
  15. package/package.json +8 -8
  16. package/dist/index.css +0 -2549
  17. package/dist/index.css.map +0 -1
  18. package/dist/styles.js +0 -1
package/README.md CHANGED
@@ -1,23 +1,20 @@
1
- # 🎨 PHSA Design System React
1
+ # PHSA Design System React
2
2
 
3
- A modern, **fully isolated** React component library built with TypeScript, Tailwind CSS, and Radix UI. **No Tailwind installation required** in your project!
3
+ A modern, **fully isolated** React component library built with TypeScript, Tailwind CSS, and Radix UI.
4
4
 
5
- ## ✨ Features
5
+ ## Features
6
6
 
7
- - 🎯 **Zero Configuration** - Works out of the box, no Tailwind setup needed
8
- - 🔒 **Fully Isolated** - CSS is completely isolated, won't conflict with your project's styles
9
- - 🎨 **Customizable** - Easy theme customization via Provider props
10
- - 📦 **Lightweight** - Only includes the CSS you actually use
11
- - ♿ **Accessible** - Built with Radix UI primitives
12
- - 🌙 **Dark Mode** - Built-in dark mode support
7
+ - **Zero Conflicts** - Fully isolated CSS, won't interfere with your project's styles
8
+ - **Customizable** - Via CSS Variables or Tailwind Preset
9
+ - **Accessible** - Built with Radix UI primitives
10
+ - **Dark Mode** - Native dark theme support
11
+ - **TypeScript** - Full type support
13
12
 
14
- ## 📚 Documentation
13
+ ## Documentation
15
14
 
16
- 🌐 **[View Live Documentation](https://henriques4nti4go.github.io/phsa-design-system/)**
15
+ [View Full Documentation](https://henriques4nti4go.github.io/phsa-design-system/)
17
16
 
18
- ## 🚀 Quick Start
19
-
20
- ### 1. Install
17
+ ## Installation
21
18
 
22
19
  ```bash
23
20
  npm install @phsa.tec/design-system-react
@@ -27,424 +24,237 @@ yarn add @phsa.tec/design-system-react
27
24
  pnpm add @phsa.tec/design-system-react
28
25
  ```
29
26
 
30
- ### 2. Wrap Your App
27
+ ## Basic Usage
31
28
 
32
- ```tsx
33
- import { DesignSystemProvider, Button, Card } from "@phsa.tec/design-system-react";
29
+ ### Step 1: Add Styles to Your Project
34
30
 
35
- function App() {
36
- return (
37
- <DesignSystemProvider>
38
- <Card>
39
- <Button>Click me</Button>
40
- </Card>
41
- </DesignSystemProvider>
42
- );
43
- }
44
- ```
31
+ Copy the design system styles to your project's `globals.css` (or main CSS file). You can customize all CSS variables and styles as needed:
32
+
33
+ ```css
34
+ /* globals.css or your main CSS file */
35
+ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
36
+
37
+ @tailwind base;
38
+ @tailwind components;
39
+ @tailwind utilities;
45
40
 
46
- **That's it!** The CSS is automatically injected. No configuration needed.
41
+ @layer base {
42
+ :root {
43
+ --background: oklch(100% 0 0);
44
+ --foreground: oklch(25% 0.01 150);
45
+ --primary: oklch(42% 0.15 145);
46
+ --primary-foreground: oklch(98% 0 0);
47
+ /* ... customize all variables you want */
48
+ }
47
49
 
48
- ## 🎨 Customization
50
+ .dark {
51
+ --background: oklch(4% 0.01 150);
52
+ --foreground: oklch(95% 0.02 150);
53
+ /* ... customize dark mode variables */
54
+ }
55
+ }
56
+ ```
49
57
 
50
- You can customize **all Tailwind properties** through the `DesignSystemProvider`:
58
+ **Important:** Place these styles in your project's `globals.css` file and customize the CSS variables (`--primary`, `--background`, etc.) to match your brand colors and design preferences.
51
59
 
52
- ### Complete Theme Customization
60
+ ### Step 2: Use Components
53
61
 
54
62
  ```tsx
55
- import { DesignSystemProvider } from "@phsa.tec/design-system-react";
63
+ // Import components
64
+ import { Button, Card } from "@phsa.tec/design-system-react";
56
65
 
57
66
  function App() {
58
67
  return (
59
- <DesignSystemProvider
60
- theme={{
61
- colors: {
62
- primary: "#3b82f6",
63
- secondary: "#10b981",
64
- // ... all color options
65
- },
66
- spacing: {
67
- base: "0.25rem", // 4px
68
- sm: "0.5rem", // 8px
69
- md: "1rem", // 16px
70
- lg: "1.5rem", // 24px
71
- xl: "2rem", // 32px
72
- },
73
- typography: {
74
- fontFamily: "Inter, sans-serif",
75
- fontSize: {
76
- sm: "0.875rem",
77
- base: "1rem",
78
- lg: "1.125rem",
79
- },
80
- },
81
- borderRadius: {
82
- sm: "0.25rem",
83
- md: "0.5rem",
84
- lg: "0.75rem",
85
- },
86
- }}
87
- >
88
- {/* Your app */}
89
- </DesignSystemProvider>
68
+ <Card>
69
+ <Button>Click me</Button>
70
+ </Card>
90
71
  );
91
72
  }
92
73
  ```
93
74
 
94
- ### Simple Color Customization (Legacy)
95
-
96
- For backward compatibility, you can still use the `colors` prop:
75
+ ## Customization
97
76
 
98
- ```tsx
99
- <DesignSystemProvider
100
- colors={{
101
- primary: "#3b82f6",
102
- secondary: "#10b981",
103
- }}
104
- >
105
- {/* Your app */}
106
- </DesignSystemProvider>
107
- ```
77
+ The design system uses **OKLCH** color format for better color consistency and wider gamut support. All styles are in your `globals.css` file, so you can customize any variable or style you want.
108
78
 
109
- ### Available Theme Properties
79
+ ### Customizing Colors
110
80
 
111
- #### Colors (`theme.colors`)
81
+ Simply modify the CSS variables in your `globals.css`:
112
82
 
113
- - `primary`, `primaryForeground`
114
- - `secondary`, `secondaryForeground`
115
- - `accent`, `accentForeground`
116
- - `destructive`, `destructiveForeground`
117
- - `success`, `successForeground`
118
- - `warning`
119
- - `muted`, `mutedForeground`
120
- - `background`, `foreground`
121
- - `card`, `cardForeground`
122
- - `popover`, `popoverForeground`
123
- - `border`, `input`, `ring`
124
- - `radius`
83
+ ```css
84
+ /* globals.css */
85
+ :root {
86
+ /* Primary colors - using OKLCH format */
87
+ --primary: oklch(42% 0.15 145); /* Lightness Chroma Hue */
88
+ --primary-foreground: oklch(98% 0 0);
89
+
90
+ /* Change to your brand colors */
91
+ --secondary: oklch(96% 0.02 150);
92
+ --secondary-foreground: oklch(25% 0.01 150);
125
93
 
126
- **Color formats supported:**
127
- - **Hex**: `"#3b82f6"`
128
- - **HSL**: `"217 91% 60%"` (without `hsl()` wrapper)
129
- - **RGB**: Standard RGB values
94
+ /* Feedback colors */
95
+ --destructive: oklch(60% 0.20 0);
96
+ --success: oklch(42% 0.15 145);
97
+ --warning: oklch(50% 0.18 48);
130
98
 
131
- #### Spacing (`theme.spacing`)
99
+ /* Neutral colors */
100
+ --background: oklch(100% 0 0);
101
+ --foreground: oklch(25% 0.01 150);
102
+ --muted: oklch(96% 0.02 150);
103
+ --muted-foreground: oklch(45% 0.01 150);
104
+ --border: oklch(88% 0.03 150);
132
105
 
133
- Customize spacing scale used by padding, margin, gap utilities:
106
+ /* Other */
107
+ --radius: 0.5rem;
108
+ --font-family: "Roboto", sans-serif;
109
+ }
134
110
 
135
- ```tsx
136
- theme={{
137
- spacing: {
138
- base: "0.25rem", // Base unit (default: 4px)
139
- xs: "0.5rem", // Extra small
140
- sm: "0.75rem", // Small
141
- md: "1rem", // Medium
142
- lg: "1.5rem", // Large
143
- xl: "2rem", // Extra large
144
- "2xl": "3rem", // 2x extra large
145
- "3xl": "4rem", // 3x extra large
146
- }
147
- }}
111
+ /* Dark mode */
112
+ .dark {
113
+ --background: oklch(4% 0.01 150);
114
+ --foreground: oklch(95% 0.02 150);
115
+ --primary: oklch(48% 0.16 145);
116
+ /* ... customize any other variables */
117
+ }
148
118
  ```
149
119
 
150
- #### Typography (`theme.typography`)
151
-
152
- ```tsx
153
- theme={{
154
- typography: {
155
- fontFamily: "Inter, sans-serif",
156
- fontSize: {
157
- xs: "0.75rem",
158
- sm: "0.875rem",
159
- base: "1rem",
160
- lg: "1.125rem",
161
- xl: "1.25rem",
162
- "2xl": "1.5rem",
163
- "3xl": "1.875rem",
164
- "4xl": "2.25rem",
165
- "5xl": "3rem",
166
- },
167
- fontWeight: {
168
- light: "300",
169
- normal: "400",
170
- medium: "500",
171
- semibold: "600",
172
- bold: "700",
173
- },
174
- lineHeight: {
175
- none: "1",
176
- tight: "1.25",
177
- snug: "1.375",
178
- normal: "1.5",
179
- relaxed: "1.75",
180
- loose: "2",
120
+ **Tip:** You can use online OKLCH color pickers or convert from HSL/HEX to OKLCH. The format is `oklch(lightness% chroma hue)` where:
121
+ - Lightness: 0-100%
122
+ - Chroma: 0-0.4 (saturation)
123
+ - Hue: 0-360 (color angle)
124
+
125
+ ### Option 2: Tailwind Preset (Advanced)
126
+
127
+ If your project uses Tailwind CSS, you can extend with our preset:
128
+
129
+ ```js
130
+ // tailwind.config.js
131
+ module.exports = {
132
+ presets: [require("@phsa.tec/design-system-react/tailwind-preset")],
133
+ theme: {
134
+ extend: {
135
+ // Your customizations
136
+ colors: {
137
+ primary: {
138
+ DEFAULT: "#your-color",
139
+ },
140
+ },
181
141
  },
182
- }
183
- }}
184
- ```
185
-
186
- #### Border Radius (`theme.borderRadius`)
187
-
188
- ```tsx
189
- theme={{
190
- borderRadius: {
191
- none: "0px",
192
- sm: "0.25rem",
193
- md: "0.5rem",
194
- lg: "0.75rem",
195
- xl: "1rem",
196
- "2xl": "1.5rem",
197
- "3xl": "2rem",
198
- full: "9999px",
199
- }
200
- }}
201
- ```
202
-
203
- #### Box Shadow (`theme.boxShadow`)
204
-
205
- ```tsx
206
- theme={{
207
- boxShadow: {
208
- sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
209
- md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
210
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
211
- xl: "0 20px 25px -5px rgb(0 0 0 / 0.1)",
212
- "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
213
- inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
214
- none: "none",
215
- }
216
- }}
142
+ },
143
+ };
217
144
  ```
218
145
 
219
- #### Breakpoints (`theme.breakpoints`)
220
-
221
- ```tsx
222
- theme={{
223
- breakpoints: {
224
- sm: "640px",
225
- md: "768px",
226
- lg: "1024px",
227
- xl: "1280px",
228
- "2xl": "1536px",
229
- }
230
- }}
231
- ```
232
-
233
- ## 🎯 Usage Examples
234
-
235
- ### Basic Components
146
+ ## Available CSS Variables
147
+
148
+ ### Colors
149
+
150
+ | Variable | Description |
151
+ |----------|-------------|
152
+ | `--primary` | Primary color |
153
+ | `--primary-foreground` | Text on primary color |
154
+ | `--secondary` | Secondary color |
155
+ | `--secondary-foreground` | Text on secondary color |
156
+ | `--destructive` | Error/danger color |
157
+ | `--success` | Success color |
158
+ | `--warning` | Warning color |
159
+ | `--muted` | Muted color |
160
+ | `--muted-foreground` | Muted text |
161
+ | `--background` | Page background |
162
+ | `--foreground` | Main text |
163
+ | `--border` | Border color |
164
+ | `--input` | Input color |
165
+ | `--ring` | Focus ring color |
236
166
 
237
- ```tsx
238
- import {
239
- Button,
240
- Input,
241
- Card,
242
- CardContent,
243
- CardHeader,
244
- CardTitle,
245
- DesignSystemProvider,
246
- } from "@phsa.tec/design-system-react";
247
-
248
- function App() {
249
- return (
250
- <DesignSystemProvider>
251
- <Card>
252
- <CardHeader>
253
- <CardTitle>Hello World</CardTitle>
254
- </CardHeader>
255
- <CardContent>
256
- <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
257
- <Input placeholder="Enter text..." />
258
- <Button>Click me</Button>
259
- </div>
260
- </CardContent>
261
- </Card>
262
- </DesignSystemProvider>
263
- );
264
- }
265
- ```
266
-
267
- ### With Custom Theme
167
+ ### Layout
268
168
 
269
- ```tsx
270
- import { DesignSystemProvider, Button } from "@phsa.tec/design-system-react";
169
+ | Variable | Description | Default |
170
+ |----------|-------------|---------|
171
+ | `--radius` | Base border radius | `0.5rem` |
172
+ | `--font-family` | Font family | `"Roboto"` |
271
173
 
272
- function App() {
273
- return (
274
- <DesignSystemProvider
275
- theme={{
276
- colors: {
277
- primary: "#8b5cf6", // Purple
278
- secondary: "#06b6d4", // Cyan
279
- },
280
- spacing: {
281
- md: "1.25rem", // Custom medium spacing
282
- lg: "2rem", // Custom large spacing
283
- },
284
- typography: {
285
- fontFamily: "Inter, sans-serif",
286
- },
287
- }}
288
- >
289
- <Button variant="default">Primary Button</Button>
290
- <Button variant="secondary">Secondary Button</Button>
291
- </DesignSystemProvider>
292
- );
293
- }
294
- ```
174
+ ### Spacing
295
175
 
296
- ### Advanced Customization Example
176
+ | Variable | Description |
177
+ |----------|-------------|
178
+ | `--spacing-xs` | Extra small |
179
+ | `--spacing-sm` | Small |
180
+ | `--spacing-md` | Medium |
181
+ | `--spacing-lg` | Large |
182
+ | `--spacing-xl` | Extra large |
297
183
 
298
- ```tsx
299
- import { DesignSystemProvider, Card, Button } from "@phsa.tec/design-system-react";
300
-
301
- function App() {
302
- return (
303
- <DesignSystemProvider
304
- theme={{
305
- colors: {
306
- primary: "#6366f1",
307
- secondary: "#8b5cf6",
308
- },
309
- spacing: {
310
- base: "0.5rem", // 8px base (instead of 4px)
311
- md: "1.5rem", // 24px medium
312
- lg: "3rem", // 48px large
313
- },
314
- typography: {
315
- fontFamily: "'Inter', 'Roboto', sans-serif",
316
- fontSize: {
317
- base: "16px",
318
- lg: "18px",
319
- xl: "20px",
320
- },
321
- fontWeight: {
322
- normal: "400",
323
- semibold: "600",
324
- bold: "700",
325
- },
326
- },
327
- borderRadius: {
328
- md: "0.75rem",
329
- lg: "1rem",
330
- },
331
- boxShadow: {
332
- md: "0 8px 16px -4px rgb(0 0 0 / 0.15)",
333
- lg: "0 16px 32px -8px rgb(0 0 0 / 0.2)",
334
- },
335
- }}
336
- >
337
- <Card>
338
- <Button>Customized Button</Button>
339
- </Card>
340
- </DesignSystemProvider>
341
- );
342
- }
343
- ```
344
-
345
- ## 🧩 Available Components
184
+ ## Available Components
346
185
 
347
186
  ### Layout
348
- - **Card** - Container component with header, content, and footer
349
- - **Sheet** - Slide-over panel
350
- - **Tabs** - Tab navigation
351
- - **Separator** - Visual divider
352
- - **PageLayout** - Full page layout wrapper
187
+ - `Card`, `CardHeader`, `CardContent`, `CardFooter`
188
+ - `Sheet`, `SheetContent`, `SheetHeader`
189
+ - `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
190
+ - `Separator`
353
191
 
354
192
  ### Forms
355
- - **Input** - Text input with validation support
356
- - **Button** - Button with multiple variants
357
- - **Select** - Dropdown selection
358
- - **Checkbox** - Checkbox input
359
- - **Switch** - Toggle switch
360
- - **Form** - Form wrapper with React Hook Form integration
193
+ - `Button`
194
+ - `Input`
195
+ - `Select`, `SelectTrigger`, `SelectContent`, `SelectItem`
196
+ - `Checkbox`
197
+ - `Switch`
198
+ - `Label`
361
199
 
362
200
  ### Data Display
363
- - **DataTable** - Advanced table with sorting, filtering, pagination
364
- - **Badge** - Status badge
365
- - **Avatar** - User avatar
366
- - **Text** - Typography component
201
+ - `DataTable`
202
+ - `Badge`
203
+ - `Avatar`
367
204
 
368
205
  ### Feedback
369
- - **Dialog** - Modal dialog
370
- - **AlertDialog** - Confirmation dialog
371
- - **Toast** - Notification toast
372
- - **Alert** - Alert message
373
- - **Spinner** - Loading spinner
206
+ - `Dialog`, `DialogContent`, `DialogHeader`
207
+ - `AlertDialog`
208
+ - `Toast`, `Toaster`
209
+ - `Alert`
210
+ - `Spinner`
374
211
 
375
212
  ### Navigation
376
- - **DropdownMenu** - Dropdown menu
377
- - **Breadcrumbs** - Breadcrumb navigation
378
- - **Command** - Command palette
213
+ - `DropdownMenu`
214
+ - `Command`
215
+ - `Popover`
379
216
 
380
- ## 🌙 Dark Mode
217
+ ## Dark Mode
381
218
 
382
- The design system supports dark mode automatically. Add the `dark` class to your root element:
383
-
384
- ```tsx
385
- // Toggle dark mode
386
- document.documentElement.classList.toggle('dark');
387
- ```
388
-
389
- Or use `next-themes` for React:
390
-
391
- ```bash
392
- npm install next-themes
393
- ```
219
+ Add the `dark` class to the root element:
394
220
 
395
221
  ```tsx
222
+ // With next-themes
396
223
  import { ThemeProvider } from "next-themes";
397
- import { DesignSystemProvider } from "@phsa.tec/design-system-react";
398
224
 
399
225
  function App() {
400
226
  return (
401
- <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
402
- <DesignSystemProvider>
403
- {/* Your app */}
404
- </DesignSystemProvider>
227
+ <ThemeProvider attribute="class" defaultTheme="system">
228
+ {/* Your app */}
405
229
  </ThemeProvider>
406
230
  );
407
231
  }
408
232
  ```
409
233
 
410
- ## 🔒 Isolation & Compatibility
411
-
412
- ### ✅ Works With
413
-
414
- - ✅ Projects **without** Tailwind CSS
415
- - ✅ Projects **with** Tailwind CSS (no conflicts!)
416
- - ✅ Next.js, Vite, Create React App, etc.
417
- - ✅ Any React framework
418
-
419
- ### How It Works
234
+ ## Compatibility
420
235
 
421
- The design system:
422
- 1. **Compiles CSS at build time** - All Tailwind classes are pre-compiled
423
- 2. **Uses unique class prefixes** - Classes are prefixed with `phsa-` to avoid conflicts
424
- 3. **Scopes CSS with `.ds`** - All styles are scoped to prevent interference
425
- 4. **Auto-injects CSS** - CSS is automatically loaded when you use `DesignSystemProvider`
236
+ - Projects **without** Tailwind CSS
237
+ - Projects **with** Tailwind CSS (no conflicts)
238
+ - Next.js, Vite, Create React App
239
+ - React 18+
426
240
 
427
- ## 📦 Package Exports
241
+ ## Package Exports
428
242
 
429
243
  ```typescript
430
244
  // Components
431
245
  import { Button, Card } from "@phsa.tec/design-system-react";
432
246
 
433
- // Styles (if you need manual import)
434
- import "@phsa.tec/design-system-react/styles";
435
- // or
436
- import styles from "@phsa.tec/design-system-react/styles";
247
+ // Note: CSS styles should be added to your project's globals.css file
248
+ // See "Basic Usage" section above for details
437
249
  ```
438
250
 
439
- ## 🛠️ Development
440
-
441
- For local development and contributing:
251
+ ## Development
442
252
 
443
253
  ```bash
444
254
  # Install dependencies
445
255
  yarn install
446
256
 
447
- # Run Storybook
257
+ # Storybook
448
258
  yarn storybook
449
259
 
450
260
  # Build library
@@ -453,24 +263,14 @@ yarn build:lib
453
263
  # Watch mode
454
264
  yarn build:lib:watch
455
265
 
456
- # Run tests
266
+ # Tests
457
267
  yarn test
458
268
  ```
459
269
 
460
- ## 📄 License
461
-
462
- MIT License - see [LICENSE](LICENSE) file for details.
463
-
464
- ## 🤝 Contributing
465
-
466
- Contributions are welcome! Please read our contributing guidelines before submitting PRs.
467
-
468
- ## 📞 Support
270
+ ## License
469
271
 
470
- - **Documentation**: [View Live Docs](https://henriques4nti4go.github.io/phsa-design-system/)
471
- - **Issues**: [GitHub Issues](https://github.com/henriques4nti4go/phsa-design-system/issues)
472
- - **Package**: [npm](https://www.npmjs.com/package/@phsa.tec/design-system-react)
272
+ MIT
473
273
 
474
274
  ---
475
275
 
476
- Built with ❤️ by the PHSA team
276
+ Built by the PHSA team