@discourser/design-system 0.4.0 → 0.6.0

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 (42) hide show
  1. package/README.md +12 -4
  2. package/dist/index.cjs +240 -260
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +67 -90
  5. package/dist/index.d.ts +67 -90
  6. package/dist/index.js +238 -258
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +5126 -0
  9. package/guidelines/Guidelines.md +67 -123
  10. package/guidelines/components/accordion.md +93 -0
  11. package/guidelines/components/avatar.md +70 -0
  12. package/guidelines/components/badge.md +61 -0
  13. package/guidelines/components/button.md +75 -40
  14. package/guidelines/components/card.md +84 -25
  15. package/guidelines/components/checkbox.md +88 -0
  16. package/guidelines/components/dialog.md +619 -31
  17. package/guidelines/components/drawer.md +655 -0
  18. package/guidelines/components/heading.md +71 -0
  19. package/guidelines/components/icon-button.md +92 -37
  20. package/guidelines/components/input-addon.md +685 -0
  21. package/guidelines/components/input-group.md +830 -0
  22. package/guidelines/components/input.md +92 -37
  23. package/guidelines/components/popover.md +71 -0
  24. package/guidelines/components/progress.md +63 -0
  25. package/guidelines/components/radio-group.md +95 -0
  26. package/guidelines/components/select.md +507 -0
  27. package/guidelines/components/skeleton.md +76 -0
  28. package/guidelines/components/slider.md +911 -0
  29. package/guidelines/components/spinner.md +783 -0
  30. package/guidelines/components/switch.md +105 -38
  31. package/guidelines/components/tabs.md +654 -0
  32. package/guidelines/components/textarea.md +70 -0
  33. package/guidelines/components/toast.md +77 -0
  34. package/guidelines/components/tooltip.md +80 -0
  35. package/guidelines/design-tokens/colors.md +309 -72
  36. package/guidelines/design-tokens/elevation.md +615 -45
  37. package/guidelines/design-tokens/spacing.md +654 -74
  38. package/guidelines/design-tokens/typography.md +432 -50
  39. package/guidelines/overview-components.md +9 -5
  40. package/guidelines/overview-imports.md +314 -0
  41. package/guidelines/overview-patterns.md +3852 -0
  42. package/package.json +14 -2
package/README.md CHANGED
@@ -38,9 +38,15 @@ yarn add @discourser/design-system
38
38
 
39
39
  ## 🎯 Quick Start
40
40
 
41
+ **New in v0.4.1:** Pre-compiled CSS is now included! No build step required.
42
+
41
43
  ```tsx
42
- import { Button, Card, IconButton } from '@discourser/design-system';
43
- import '@discourser/design-system/styled-system';
44
+ // Import the pre-compiled CSS (do this once in your app entry point)
45
+ import '@discourser/design-system/styles.css';
46
+
47
+ // Import and use components
48
+ import { Button, Card } from '@discourser/design-system';
49
+ import * as IconButton from '@discourser/design-system';
44
50
 
45
51
  function App() {
46
52
  return (
@@ -50,14 +56,16 @@ function App() {
50
56
  <Button variant="filled" size="md">
51
57
  Get Started
52
58
  </Button>
53
- <IconButton variant="tonal" aria-label="Settings">
59
+ <IconButton.Root variant="tonal" aria-label="Settings">
54
60
  <SettingsIcon />
55
- </IconButton>
61
+ </IconButton.Root>
56
62
  </Card>
57
63
  );
58
64
  }
59
65
  ```
60
66
 
67
+ **📘 See [CSS_USAGE.md](./CSS_USAGE.md) for complete usage guide including theme support, Figma Make integration, and framework-specific examples.**
68
+
61
69
  ## 📖 Components
62
70
 
63
71
  We offer 21 fully-typed, accessible React components built with Ark UI and styled with Panda CSS.