@ryanhelsing/ry-ui 1.0.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 (63) hide show
  1. package/README.md +223 -0
  2. package/dist/components/ry-accordion.d.ts +24 -0
  3. package/dist/components/ry-accordion.d.ts.map +1 -0
  4. package/dist/components/ry-alert.d.ts +19 -0
  5. package/dist/components/ry-alert.d.ts.map +1 -0
  6. package/dist/components/ry-button.d.ts +19 -0
  7. package/dist/components/ry-button.d.ts.map +1 -0
  8. package/dist/components/ry-code.d.ts +27 -0
  9. package/dist/components/ry-code.d.ts.map +1 -0
  10. package/dist/components/ry-color-input.d.ts +28 -0
  11. package/dist/components/ry-color-input.d.ts.map +1 -0
  12. package/dist/components/ry-color-picker.d.ts +52 -0
  13. package/dist/components/ry-color-picker.d.ts.map +1 -0
  14. package/dist/components/ry-drawer.d.ts +28 -0
  15. package/dist/components/ry-drawer.d.ts.map +1 -0
  16. package/dist/components/ry-dropdown.d.ts +24 -0
  17. package/dist/components/ry-dropdown.d.ts.map +1 -0
  18. package/dist/components/ry-example.d.ts +23 -0
  19. package/dist/components/ry-example.d.ts.map +1 -0
  20. package/dist/components/ry-field.d.ts +18 -0
  21. package/dist/components/ry-field.d.ts.map +1 -0
  22. package/dist/components/ry-icon.d.ts +27 -0
  23. package/dist/components/ry-icon.d.ts.map +1 -0
  24. package/dist/components/ry-knob.d.ts +27 -0
  25. package/dist/components/ry-knob.d.ts.map +1 -0
  26. package/dist/components/ry-modal.d.ts +23 -0
  27. package/dist/components/ry-modal.d.ts.map +1 -0
  28. package/dist/components/ry-select.d.ts +29 -0
  29. package/dist/components/ry-select.d.ts.map +1 -0
  30. package/dist/components/ry-slider.d.ts +30 -0
  31. package/dist/components/ry-slider.d.ts.map +1 -0
  32. package/dist/components/ry-switch.d.ts +22 -0
  33. package/dist/components/ry-switch.d.ts.map +1 -0
  34. package/dist/components/ry-tabs.d.ts +21 -0
  35. package/dist/components/ry-tabs.d.ts.map +1 -0
  36. package/dist/components/ry-theme-toggle.d.ts +21 -0
  37. package/dist/components/ry-theme-toggle.d.ts.map +1 -0
  38. package/dist/components/ry-toast.d.ts +31 -0
  39. package/dist/components/ry-toast.d.ts.map +1 -0
  40. package/dist/components/ry-toggle-button.d.ts +31 -0
  41. package/dist/components/ry-toggle-button.d.ts.map +1 -0
  42. package/dist/components/ry-tooltip.d.ts +23 -0
  43. package/dist/components/ry-tooltip.d.ts.map +1 -0
  44. package/dist/core/ry-element.d.ts +66 -0
  45. package/dist/core/ry-element.d.ts.map +1 -0
  46. package/dist/core/ry-icons.d.ts +38 -0
  47. package/dist/core/ry-icons.d.ts.map +1 -0
  48. package/dist/core/ry-transform.d.ts +35 -0
  49. package/dist/core/ry-transform.d.ts.map +1 -0
  50. package/dist/css/ry-base.css +155 -0
  51. package/dist/css/ry-components.css +1195 -0
  52. package/dist/css/ry-layout.css +240 -0
  53. package/dist/css/ry-structure.css +1737 -0
  54. package/dist/css/ry-theme.css +1433 -0
  55. package/dist/css/ry-tokens.css +145 -0
  56. package/dist/css/ry-ui.css +1207 -0
  57. package/dist/ry-ui.d.ts +54 -0
  58. package/dist/ry-ui.d.ts.map +1 -0
  59. package/dist/ry-ui.js +2433 -0
  60. package/dist/ry-ui.js.map +1 -0
  61. package/dist/types.d.ts +33 -0
  62. package/dist/types.d.ts.map +1 -0
  63. package/package.json +40 -0
package/dist/css/ry-tokens.css ADDED
@@ -0,0 +1,145 @@
1
+ /**
2
+ * ry-ui Design Tokens
3
+ *
4
+ * These CSS custom properties define the visual language.
5
+ * Override in your theme file to customize.
6
+ */
7
+
8
+ :root {
9
+ /* ═══════════════════════════════════════════════════════════════
10
+ COLORS
11
+ ═══════════════════════════════════════════════════════════════ */
12
+
13
+ /* Primary */
14
+ --ry-color-primary: #3b82f6;
15
+ --ry-color-primary-hover: #2563eb;
16
+ --ry-color-primary-active: #1d4ed8;
17
+
18
+ /* Secondary */
19
+ --ry-color-secondary: #64748b;
20
+ --ry-color-secondary-hover: #475569;
21
+ --ry-color-secondary-active: #334155;
22
+
23
+ /* Semantic */
24
+ --ry-color-success: #22c55e;
25
+ --ry-color-warning: #f59e0b;
26
+ --ry-color-danger: #ef4444;
27
+ --ry-color-info: #06b6d4;
28
+
29
+ /* Text */
30
+ --ry-color-text: #1e293b;
31
+ --ry-color-text-muted: #64748b;
32
+ --ry-color-text-inverse: #ffffff;
33
+
34
+ /* Background */
35
+ --ry-color-bg: #ffffff;
36
+ --ry-color-bg-subtle: #f8fafc;
37
+ --ry-color-bg-muted: #f1f5f9;
38
+
39
+ /* Border */
40
+ --ry-color-border: #e2e8f0;
41
+ --ry-color-border-strong: #cbd5e1;
42
+
43
+ /* Overlay */
44
+ --ry-color-overlay: rgba(0, 0, 0, 0.5);
45
+
46
+ /* ═══════════════════════════════════════════════════════════════
47
+ TYPOGRAPHY
48
+ ═══════════════════════════════════════════════════════════════ */
49
+
50
+ /* Font families */
51
+ --ry-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
52
+ --ry-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
53
+
54
+ /* Font sizes */
55
+ --ry-text-xs: 0.75rem;
56
+ --ry-text-sm: 0.875rem;
57
+ --ry-text-base: 1rem;
58
+ --ry-text-lg: 1.125rem;
59
+ --ry-text-xl: 1.25rem;
60
+ --ry-text-2xl: 1.5rem;
61
+ --ry-text-3xl: 1.875rem;
62
+ --ry-text-4xl: 2.25rem;
63
+
64
+ /* Font weights */
65
+ --ry-font-normal: 400;
66
+ --ry-font-medium: 500;
67
+ --ry-font-semibold: 600;
68
+ --ry-font-bold: 700;
69
+
70
+ /* Line heights */
71
+ --ry-leading-tight: 1.25;
72
+ --ry-leading-normal: 1.5;
73
+ --ry-leading-relaxed: 1.75;
74
+
75
+ /* ═══════════════════════════════════════════════════════════════
76
+ SPACING
77
+ ═══════════════════════════════════════════════════════════════ */
78
+
79
+ --ry-space-0: 0;
80
+ --ry-space-1: 0.25rem;
81
+ --ry-space-2: 0.5rem;
82
+ --ry-space-3: 0.75rem;
83
+ --ry-space-4: 1rem;
84
+ --ry-space-5: 1.25rem;
85
+ --ry-space-6: 1.5rem;
86
+ --ry-space-8: 2rem;
87
+ --ry-space-10: 2.5rem;
88
+ --ry-space-12: 3rem;
89
+ --ry-space-16: 4rem;
90
+ --ry-space-20: 5rem;
91
+
92
+ /* ═══════════════════════════════════════════════════════════════
93
+ BORDERS & RADIUS
94
+ ═══════════════════════════════════════════════════════════════ */
95
+
96
+ --ry-radius-none: 0;
97
+ --ry-radius-sm: 0.25rem;
98
+ --ry-radius-md: 0.375rem;
99
+ --ry-radius-lg: 0.5rem;
100
+ --ry-radius-xl: 0.75rem;
101
+ --ry-radius-2xl: 1rem;
102
+ --ry-radius-full: 9999px;
103
+
104
+ --ry-border-width: 1px;
105
+
106
+ /* ═══════════════════════════════════════════════════════════════
107
+ SHADOWS
108
+ ═══════════════════════════════════════════════════════════════ */
109
+
110
+ --ry-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
111
+ --ry-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
112
+ --ry-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
113
+ --ry-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
114
+
115
+ /* ═══════════════════════════════════════════════════════════════
116
+ TRANSITIONS
117
+ ═══════════════════════════════════════════════════════════════ */
118
+
119
+ --ry-duration-fast: 100ms;
120
+ --ry-duration-normal: 200ms;
121
+ --ry-duration-slow: 300ms;
122
+
123
+ --ry-ease: cubic-bezier(0.4, 0, 0.2, 1);
124
+ --ry-ease-in: cubic-bezier(0.4, 0, 1, 1);
125
+ --ry-ease-out: cubic-bezier(0, 0, 0.2, 1);
126
+
127
+ /* ═══════════════════════════════════════════════════════════════
128
+ Z-INDEX
129
+ ═══════════════════════════════════════════════════════════════ */
130
+
131
+ --ry-z-dropdown: 1000;
132
+ --ry-z-sticky: 1020;
133
+ --ry-z-fixed: 1030;
134
+ --ry-z-modal-backdrop: 1040;
135
+ --ry-z-modal: 1050;
136
+ --ry-z-popover: 1060;
137
+ --ry-z-tooltip: 1070;
138
+ --ry-z-toast: 1080;
139
+
140
+ /* ═══════════════════════════════════════════════════════════════
141
+ FOCUS
142
+ ═══════════════════════════════════════════════════════════════ */
143
+
144
+ --ry-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
145
+ }