@grupor5/raya 0.2.1 → 0.2.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 (180) hide show
  1. package/README.md +47 -4
  2. package/dist/atoms/avatar/index.d.mts +12 -0
  3. package/dist/atoms/avatar/index.d.ts +12 -0
  4. package/dist/atoms/avatar/index.js +99 -0
  5. package/dist/atoms/avatar/index.mjs +76 -0
  6. package/dist/atoms/badge/index.d.mts +16 -0
  7. package/dist/atoms/badge/index.d.ts +16 -0
  8. package/dist/atoms/badge/index.js +149 -0
  9. package/dist/atoms/badge/index.mjs +146 -0
  10. package/dist/atoms/button/index.d.mts +11 -0
  11. package/dist/atoms/button/index.d.ts +11 -0
  12. package/dist/atoms/button/index.js +307 -0
  13. package/dist/atoms/button/index.mjs +301 -0
  14. package/dist/atoms/checkbox/index.d.mts +6 -0
  15. package/dist/atoms/checkbox/index.d.ts +6 -0
  16. package/dist/atoms/checkbox/index.js +98 -0
  17. package/dist/atoms/checkbox/index.mjs +75 -0
  18. package/dist/atoms/input/index.d.mts +12 -0
  19. package/dist/atoms/input/index.d.ts +12 -0
  20. package/dist/atoms/input/index.js +104 -0
  21. package/dist/atoms/input/index.mjs +82 -0
  22. package/dist/atoms/label/index.d.mts +8 -0
  23. package/dist/atoms/label/index.d.ts +8 -0
  24. package/dist/atoms/label/index.js +77 -0
  25. package/dist/atoms/label/index.mjs +54 -0
  26. package/dist/atoms/radio/index.d.mts +7 -0
  27. package/dist/atoms/radio/index.d.ts +7 -0
  28. package/dist/atoms/radio/index.js +97 -0
  29. package/dist/atoms/radio/index.mjs +73 -0
  30. package/dist/atoms/switch/index.d.mts +6 -0
  31. package/dist/atoms/switch/index.d.ts +6 -0
  32. package/dist/atoms/switch/index.js +97 -0
  33. package/dist/atoms/switch/index.mjs +74 -0
  34. package/dist/atoms/tag/index.d.mts +14 -0
  35. package/dist/atoms/tag/index.d.ts +14 -0
  36. package/dist/atoms/tag/index.js +128 -0
  37. package/dist/atoms/tag/index.mjs +122 -0
  38. package/dist/atoms/textarea/index.d.mts +11 -0
  39. package/dist/atoms/textarea/index.d.ts +11 -0
  40. package/dist/atoms/textarea/index.js +125 -0
  41. package/dist/atoms/textarea/index.mjs +103 -0
  42. package/dist/atoms/typography/index.d.mts +20 -0
  43. package/dist/atoms/typography/index.d.ts +20 -0
  44. package/dist/atoms/typography/index.js +140 -0
  45. package/dist/atoms/typography/index.mjs +115 -0
  46. package/dist/hooks/index.d.mts +1 -0
  47. package/dist/hooks/index.d.ts +1 -0
  48. package/dist/hooks/index.js +17 -0
  49. package/dist/hooks/index.mjs +15 -0
  50. package/dist/hooks/use-pagination.d.mts +10 -0
  51. package/dist/hooks/use-pagination.d.ts +10 -0
  52. package/dist/hooks/use-pagination.js +54 -0
  53. package/dist/hooks/use-pagination.mjs +51 -0
  54. package/dist/hooks/use-toast.d.mts +2 -0
  55. package/dist/hooks/use-toast.d.ts +2 -0
  56. package/dist/hooks/use-toast.js +2 -0
  57. package/dist/hooks/use-toast.mjs +1 -0
  58. package/dist/hooks/useModal.d.mts +7 -0
  59. package/dist/hooks/useModal.d.ts +7 -0
  60. package/dist/hooks/useModal.js +17 -0
  61. package/dist/hooks/useModal.mjs +15 -0
  62. package/dist/index.d.mts +50 -1298
  63. package/dist/index.d.ts +50 -1298
  64. package/dist/molecules/accordion/index.d.mts +17 -0
  65. package/dist/molecules/accordion/index.d.ts +17 -0
  66. package/dist/molecules/accordion/index.js +154 -0
  67. package/dist/molecules/accordion/index.mjs +128 -0
  68. package/dist/molecules/alert/index.d.mts +14 -0
  69. package/dist/molecules/alert/index.d.ts +14 -0
  70. package/dist/molecules/alert/index.js +425 -0
  71. package/dist/molecules/alert/index.mjs +402 -0
  72. package/dist/molecules/card/index.d.mts +10 -0
  73. package/dist/molecules/card/index.d.ts +10 -0
  74. package/dist/molecules/card/index.js +128 -0
  75. package/dist/molecules/card/index.mjs +101 -0
  76. package/dist/molecules/chart/index.d.mts +80 -0
  77. package/dist/molecules/chart/index.d.ts +80 -0
  78. package/dist/molecules/chart/index.js +300 -0
  79. package/dist/molecules/chart/index.mjs +272 -0
  80. package/dist/molecules/data-table/index.d.mts +57 -0
  81. package/dist/molecules/data-table/index.d.ts +57 -0
  82. package/dist/molecules/data-table/index.js +1456 -0
  83. package/dist/molecules/data-table/index.mjs +1430 -0
  84. package/dist/molecules/date-picker/index.d.mts +12 -0
  85. package/dist/molecules/date-picker/index.d.ts +12 -0
  86. package/dist/molecules/date-picker/index.js +756 -0
  87. package/dist/molecules/date-picker/index.mjs +734 -0
  88. package/dist/molecules/dropdown/index.d.mts +21 -0
  89. package/dist/molecules/dropdown/index.d.ts +21 -0
  90. package/dist/molecules/dropdown/index.js +221 -0
  91. package/dist/molecules/dropdown/index.mjs +198 -0
  92. package/dist/molecules/form/index.d.mts +19 -0
  93. package/dist/molecules/form/index.d.ts +19 -0
  94. package/dist/molecules/form/index.js +139 -0
  95. package/dist/molecules/form/index.mjs +114 -0
  96. package/dist/molecules/pagination/index.d.mts +15 -0
  97. package/dist/molecules/pagination/index.d.ts +15 -0
  98. package/dist/molecules/pagination/index.js +605 -0
  99. package/dist/molecules/pagination/index.mjs +583 -0
  100. package/dist/molecules/progress-bar/index.d.mts +15 -0
  101. package/dist/molecules/progress-bar/index.d.ts +15 -0
  102. package/dist/molecules/progress-bar/index.js +166 -0
  103. package/dist/molecules/progress-bar/index.mjs +144 -0
  104. package/dist/molecules/select/index.d.mts +15 -0
  105. package/dist/molecules/select/index.d.ts +15 -0
  106. package/dist/molecules/select/index.js +201 -0
  107. package/dist/molecules/select/index.mjs +169 -0
  108. package/dist/molecules/stepper/index.d.mts +67 -0
  109. package/dist/molecules/stepper/index.d.ts +67 -0
  110. package/dist/molecules/stepper/index.js +287 -0
  111. package/dist/molecules/stepper/index.mjs +260 -0
  112. package/dist/molecules/tabs/index.d.mts +9 -0
  113. package/dist/molecules/tabs/index.d.ts +9 -0
  114. package/dist/molecules/tabs/index.js +112 -0
  115. package/dist/molecules/tabs/index.mjs +86 -0
  116. package/dist/tokens/badge.d.mts +39 -0
  117. package/dist/tokens/badge.d.ts +39 -0
  118. package/dist/tokens/badge.js +61 -0
  119. package/dist/tokens/badge.mjs +59 -0
  120. package/dist/tokens/buttons.d.mts +277 -0
  121. package/dist/tokens/buttons.d.ts +277 -0
  122. package/dist/tokens/buttons.js +191 -0
  123. package/dist/tokens/buttons.mjs +173 -0
  124. package/dist/tokens/colors.d.mts +65 -0
  125. package/dist/tokens/colors.d.ts +65 -0
  126. package/dist/tokens/colors.js +68 -0
  127. package/dist/tokens/colors.mjs +66 -0
  128. package/dist/tokens/effects.d.mts +124 -0
  129. package/dist/tokens/effects.d.ts +124 -0
  130. package/dist/tokens/effects.js +130 -0
  131. package/dist/tokens/effects.mjs +115 -0
  132. package/dist/tokens/grids.d.mts +331 -0
  133. package/dist/tokens/grids.d.ts +331 -0
  134. package/dist/tokens/grids.js +305 -0
  135. package/dist/tokens/grids.mjs +292 -0
  136. package/dist/tokens/icons.d.mts +134 -0
  137. package/dist/tokens/icons.d.ts +134 -0
  138. package/dist/tokens/icons.js +108 -0
  139. package/dist/tokens/icons.mjs +97 -0
  140. package/dist/tokens/index.d.mts +6 -0
  141. package/dist/tokens/index.d.ts +6 -0
  142. package/dist/tokens/index.js +775 -0
  143. package/dist/tokens/index.mjs +743 -0
  144. package/dist/tokens/progress-bar.d.mts +31 -0
  145. package/dist/tokens/progress-bar.d.ts +31 -0
  146. package/dist/tokens/progress-bar.js +70 -0
  147. package/dist/tokens/progress-bar.mjs +68 -0
  148. package/dist/tokens/spacing.d.mts +90 -0
  149. package/dist/tokens/spacing.d.ts +90 -0
  150. package/dist/tokens/spacing.js +120 -0
  151. package/dist/tokens/spacing.mjs +109 -0
  152. package/dist/tokens/stroke.d.mts +292 -0
  153. package/dist/tokens/stroke.d.ts +292 -0
  154. package/dist/tokens/stroke.js +202 -0
  155. package/dist/tokens/stroke.mjs +186 -0
  156. package/dist/tokens/tab.d.mts +31 -0
  157. package/dist/tokens/tab.d.ts +31 -0
  158. package/dist/tokens/tab.js +48 -0
  159. package/dist/tokens/tab.mjs +46 -0
  160. package/dist/tokens/tag.d.mts +53 -0
  161. package/dist/tokens/tag.d.ts +53 -0
  162. package/dist/tokens/tag.js +80 -0
  163. package/dist/tokens/tag.mjs +78 -0
  164. package/dist/tokens/typography.d.mts +394 -0
  165. package/dist/tokens/typography.d.ts +394 -0
  166. package/dist/tokens/typography.js +302 -0
  167. package/dist/tokens/typography.mjs +292 -0
  168. package/dist/utils/classNames.d.mts +3 -0
  169. package/dist/utils/classNames.d.ts +3 -0
  170. package/dist/utils/classNames.js +8 -0
  171. package/dist/utils/classNames.mjs +6 -0
  172. package/dist/utils/cn.d.mts +5 -0
  173. package/dist/utils/cn.d.ts +5 -0
  174. package/dist/utils/cn.js +11 -0
  175. package/dist/utils/cn.mjs +9 -0
  176. package/dist/utils/index.d.mts +3 -0
  177. package/dist/utils/index.d.ts +3 -0
  178. package/dist/utils/index.js +15 -0
  179. package/dist/utils/index.mjs +12 -0
  180. package/package.json +34 -1
package/dist/tokens/effects.d.mts ADDED
@@ -0,0 +1,124 @@
1
+ /**
2
+ * Raya Design System - Effects Tokens
3
+ *
4
+ * Effects system for creating depth, hierarchy, and visual distinction
5
+ * through carefully crafted shadows and visual effects.
6
+ */
7
+ declare const effects: {
8
+ readonly s: "0 1px 2px rgba(0, 0, 0, 0.05)";
9
+ readonly m: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
10
+ readonly l: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
11
+ };
12
+ type EffectToken = keyof typeof effects;
13
+ /**
14
+ * Dark mode variants with adjusted opacity for better visibility
15
+ */
16
+ declare const effectsDark: {
17
+ readonly s: "0 1px 2px rgba(0, 0, 0, 0.3)";
18
+ readonly m: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)";
19
+ readonly l: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)";
20
+ };
21
+ /**
22
+ * Effect colors for customization
23
+ */
24
+ declare const effectColors: {
25
+ readonly primary: "rgba(0, 0, 0, 0.1)";
26
+ readonly secondary: "rgba(0, 0, 0, 0.06)";
27
+ readonly subtle: "rgba(0, 0, 0, 0.05)";
28
+ readonly strong: "rgba(0, 0, 0, 0.15)";
29
+ };
30
+ /**
31
+ * Pre-composed effect styles for common use cases
32
+ */
33
+ declare const effectStyles: {
34
+ readonly buttonDefault: "0 1px 2px rgba(0, 0, 0, 0.05)";
35
+ readonly buttonHover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
36
+ readonly buttonActive: "0 1px 2px rgba(0, 0, 0, 0.05)";
37
+ readonly buttonFloating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
38
+ readonly cardFlat: "none";
39
+ readonly cardElevated: "0 1px 2px rgba(0, 0, 0, 0.05)";
40
+ readonly cardProminent: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
41
+ readonly cardFloating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
42
+ readonly inputDefault: "0 1px 2px rgba(0, 0, 0, 0.05)";
43
+ readonly inputFocus: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
44
+ readonly inputInvalid: "0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--destructive)";
45
+ readonly dropdown: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
46
+ readonly tooltip: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
47
+ readonly modal: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
48
+ readonly popover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
49
+ readonly hoverSubtle: "0 1px 2px rgba(0, 0, 0, 0.05)";
50
+ readonly hoverMedium: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
51
+ readonly hoverStrong: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
52
+ };
53
+ /**
54
+ * Drop shadow variants for SVG and filter effects
55
+ */
56
+ declare const dropShadows: {
57
+ readonly s: "0 1px 2px rgba(0, 0, 0, 0.05)";
58
+ readonly m: readonly ["0 4px 6px rgba(0, 0, 0, 0.1)", "0 2px 4px rgba(0, 0, 0, 0.06)"];
59
+ readonly l: readonly ["0 10px 15px rgba(0, 0, 0, 0.1)", "0 4px 6px rgba(0, 0, 0, 0.05)"];
60
+ };
61
+ /**
62
+ * Utility function to get effect value
63
+ */
64
+ declare const getEffect: (token: EffectToken) => string;
65
+ /**
66
+ * Utility function to get dark mode effect
67
+ */
68
+ declare const getEffectDark: (token: EffectToken) => string;
69
+ /**
70
+ * Generate CSS custom properties for effects
71
+ */
72
+ declare const generateEffectsCSS: () => string;
73
+ /**
74
+ * Effects tokens for Tailwind CSS configuration
75
+ */
76
+ declare const tailwindEffects: {
77
+ readonly 'effect-s': "var(--effect-s)";
78
+ readonly 'effect-m': "var(--effect-m)";
79
+ readonly 'effect-l': "var(--effect-l)";
80
+ };
81
+ /**
82
+ * Component-specific effect utilities
83
+ */
84
+ declare const componentEffects: {
85
+ readonly button: {
86
+ readonly default: "0 1px 2px rgba(0, 0, 0, 0.05)";
87
+ readonly hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
88
+ readonly active: "0 1px 2px rgba(0, 0, 0, 0.05)";
89
+ readonly floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
90
+ readonly disabled: "none";
91
+ };
92
+ readonly card: {
93
+ readonly flat: "none";
94
+ readonly elevated: "0 1px 2px rgba(0, 0, 0, 0.05)";
95
+ readonly interactive: "0 1px 2px rgba(0, 0, 0, 0.05)";
96
+ readonly interactiveHover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
97
+ readonly prominent: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
98
+ readonly floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
99
+ };
100
+ readonly form: {
101
+ readonly input: "0 1px 2px rgba(0, 0, 0, 0.05)";
102
+ readonly inputFocus: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
103
+ readonly inputError: "0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--destructive)";
104
+ readonly select: "0 1px 2px rgba(0, 0, 0, 0.05)";
105
+ readonly selectOpen: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
106
+ };
107
+ readonly navigation: {
108
+ readonly dropdown: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
109
+ readonly tooltip: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
110
+ readonly modal: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
111
+ readonly popover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
112
+ readonly sidebar: "0 1px 2px rgba(0, 0, 0, 0.05)";
113
+ };
114
+ };
115
+ /**
116
+ * Animation-ready effect transitions
117
+ */
118
+ declare const effectTransitions: {
119
+ readonly fast: "box-shadow 0.15s ease-in-out";
120
+ readonly medium: "box-shadow 0.2s ease-in-out";
121
+ readonly slow: "box-shadow 0.3s ease-in-out";
122
+ };
123
+
124
+ export { type EffectToken, componentEffects, effects as default, dropShadows, effectColors, effectStyles, effectTransitions, effects, effectsDark, generateEffectsCSS, getEffect, getEffectDark, tailwindEffects };
package/dist/tokens/effects.d.ts ADDED
@@ -0,0 +1,124 @@
1
+ /**
2
+ * Raya Design System - Effects Tokens
3
+ *
4
+ * Effects system for creating depth, hierarchy, and visual distinction
5
+ * through carefully crafted shadows and visual effects.
6
+ */
7
+ declare const effects: {
8
+ readonly s: "0 1px 2px rgba(0, 0, 0, 0.05)";
9
+ readonly m: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
10
+ readonly l: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
11
+ };
12
+ type EffectToken = keyof typeof effects;
13
+ /**
14
+ * Dark mode variants with adjusted opacity for better visibility
15
+ */
16
+ declare const effectsDark: {
17
+ readonly s: "0 1px 2px rgba(0, 0, 0, 0.3)";
18
+ readonly m: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)";
19
+ readonly l: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)";
20
+ };
21
+ /**
22
+ * Effect colors for customization
23
+ */
24
+ declare const effectColors: {
25
+ readonly primary: "rgba(0, 0, 0, 0.1)";
26
+ readonly secondary: "rgba(0, 0, 0, 0.06)";
27
+ readonly subtle: "rgba(0, 0, 0, 0.05)";
28
+ readonly strong: "rgba(0, 0, 0, 0.15)";
29
+ };
30
+ /**
31
+ * Pre-composed effect styles for common use cases
32
+ */
33
+ declare const effectStyles: {
34
+ readonly buttonDefault: "0 1px 2px rgba(0, 0, 0, 0.05)";
35
+ readonly buttonHover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
36
+ readonly buttonActive: "0 1px 2px rgba(0, 0, 0, 0.05)";
37
+ readonly buttonFloating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
38
+ readonly cardFlat: "none";
39
+ readonly cardElevated: "0 1px 2px rgba(0, 0, 0, 0.05)";
40
+ readonly cardProminent: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
41
+ readonly cardFloating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
42
+ readonly inputDefault: "0 1px 2px rgba(0, 0, 0, 0.05)";
43
+ readonly inputFocus: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
44
+ readonly inputInvalid: "0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--destructive)";
45
+ readonly dropdown: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
46
+ readonly tooltip: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
47
+ readonly modal: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
48
+ readonly popover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
49
+ readonly hoverSubtle: "0 1px 2px rgba(0, 0, 0, 0.05)";
50
+ readonly hoverMedium: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
51
+ readonly hoverStrong: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
52
+ };
53
+ /**
54
+ * Drop shadow variants for SVG and filter effects
55
+ */
56
+ declare const dropShadows: {
57
+ readonly s: "0 1px 2px rgba(0, 0, 0, 0.05)";
58
+ readonly m: readonly ["0 4px 6px rgba(0, 0, 0, 0.1)", "0 2px 4px rgba(0, 0, 0, 0.06)"];
59
+ readonly l: readonly ["0 10px 15px rgba(0, 0, 0, 0.1)", "0 4px 6px rgba(0, 0, 0, 0.05)"];
60
+ };
61
+ /**
62
+ * Utility function to get effect value
63
+ */
64
+ declare const getEffect: (token: EffectToken) => string;
65
+ /**
66
+ * Utility function to get dark mode effect
67
+ */
68
+ declare const getEffectDark: (token: EffectToken) => string;
69
+ /**
70
+ * Generate CSS custom properties for effects
71
+ */
72
+ declare const generateEffectsCSS: () => string;
73
+ /**
74
+ * Effects tokens for Tailwind CSS configuration
75
+ */
76
+ declare const tailwindEffects: {
77
+ readonly 'effect-s': "var(--effect-s)";
78
+ readonly 'effect-m': "var(--effect-m)";
79
+ readonly 'effect-l': "var(--effect-l)";
80
+ };
81
+ /**
82
+ * Component-specific effect utilities
83
+ */
84
+ declare const componentEffects: {
85
+ readonly button: {
86
+ readonly default: "0 1px 2px rgba(0, 0, 0, 0.05)";
87
+ readonly hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
88
+ readonly active: "0 1px 2px rgba(0, 0, 0, 0.05)";
89
+ readonly floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
90
+ readonly disabled: "none";
91
+ };
92
+ readonly card: {
93
+ readonly flat: "none";
94
+ readonly elevated: "0 1px 2px rgba(0, 0, 0, 0.05)";
95
+ readonly interactive: "0 1px 2px rgba(0, 0, 0, 0.05)";
96
+ readonly interactiveHover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
97
+ readonly prominent: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
98
+ readonly floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
99
+ };
100
+ readonly form: {
101
+ readonly input: "0 1px 2px rgba(0, 0, 0, 0.05)";
102
+ readonly inputFocus: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
103
+ readonly inputError: "0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--destructive)";
104
+ readonly select: "0 1px 2px rgba(0, 0, 0, 0.05)";
105
+ readonly selectOpen: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
106
+ };
107
+ readonly navigation: {
108
+ readonly dropdown: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
109
+ readonly tooltip: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
110
+ readonly modal: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
111
+ readonly popover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
112
+ readonly sidebar: "0 1px 2px rgba(0, 0, 0, 0.05)";
113
+ };
114
+ };
115
+ /**
116
+ * Animation-ready effect transitions
117
+ */
118
+ declare const effectTransitions: {
119
+ readonly fast: "box-shadow 0.15s ease-in-out";
120
+ readonly medium: "box-shadow 0.2s ease-in-out";
121
+ readonly slow: "box-shadow 0.3s ease-in-out";
122
+ };
123
+
124
+ export { type EffectToken, componentEffects, effects as default, dropShadows, effectColors, effectStyles, effectTransitions, effects, effectsDark, generateEffectsCSS, getEffect, getEffectDark, tailwindEffects };
package/dist/tokens/effects.js ADDED
@@ -0,0 +1,130 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ // src/tokens/effects.ts
6
+ var effects = {
7
+ // Effect levels
8
+ s: "0 1px 2px rgba(0, 0, 0, 0.05)",
9
+ m: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
10
+ l: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
11
+ };
12
+ var effectsDark = {
13
+ s: "0 1px 2px rgba(0, 0, 0, 0.3)",
14
+ m: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)",
15
+ l: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)"
16
+ };
17
+ var effectColors = {
18
+ primary: "rgba(0, 0, 0, 0.1)",
19
+ secondary: "rgba(0, 0, 0, 0.06)",
20
+ subtle: "rgba(0, 0, 0, 0.05)",
21
+ strong: "rgba(0, 0, 0, 0.15)"
22
+ };
23
+ var effectStyles = {
24
+ // Button effects
25
+ buttonDefault: effects.s,
26
+ buttonHover: effects.m,
27
+ buttonActive: effects.s,
28
+ buttonFloating: effects.l,
29
+ // Card effects
30
+ cardFlat: "none",
31
+ cardElevated: effects.s,
32
+ cardProminent: effects.m,
33
+ cardFloating: effects.l,
34
+ // Form effects
35
+ inputDefault: effects.s,
36
+ inputFocus: effects.m,
37
+ inputInvalid: `${effects.s}, 0 0 0 1px var(--destructive)`,
38
+ // Navigation effects
39
+ dropdown: effects.m,
40
+ tooltip: effects.m,
41
+ modal: effects.l,
42
+ popover: effects.m,
43
+ // Interactive effects
44
+ hoverSubtle: effects.s,
45
+ hoverMedium: effects.m,
46
+ hoverStrong: effects.l
47
+ };
48
+ var dropShadows = {
49
+ s: "0 1px 2px rgba(0, 0, 0, 0.05)",
50
+ m: ["0 4px 6px rgba(0, 0, 0, 0.1)", "0 2px 4px rgba(0, 0, 0, 0.06)"],
51
+ l: ["0 10px 15px rgba(0, 0, 0, 0.1)", "0 4px 6px rgba(0, 0, 0, 0.05)"]
52
+ };
53
+ var getEffect = (token) => {
54
+ return effects[token];
55
+ };
56
+ var getEffectDark = (token) => {
57
+ return effectsDark[token];
58
+ };
59
+ var generateEffectsCSS = () => {
60
+ const lightVars = Object.entries(effects).map(([key, value]) => ` --effect-${key}: ${value};`).join("\n");
61
+ const darkVars = Object.entries(effectsDark).map(([key, value]) => ` --effect-${key}: ${value};`).join("\n");
62
+ return `:root {
63
+ /* Effect tokens - Light mode */
64
+ ${lightVars}
65
+ }
66
+
67
+ .dark {
68
+ /* Effect tokens - Dark mode */
69
+ ${darkVars}
70
+ }`;
71
+ };
72
+ var tailwindEffects = {
73
+ "effect-s": "var(--effect-s)",
74
+ "effect-m": "var(--effect-m)",
75
+ "effect-l": "var(--effect-l)"
76
+ };
77
+ var componentEffects = {
78
+ // Button component effects
79
+ button: {
80
+ default: effects.s,
81
+ hover: effects.m,
82
+ active: effects.s,
83
+ floating: effects.l,
84
+ disabled: "none"
85
+ },
86
+ // Card component effects
87
+ card: {
88
+ flat: "none",
89
+ elevated: effects.s,
90
+ interactive: effects.s,
91
+ interactiveHover: effects.m,
92
+ prominent: effects.m,
93
+ floating: effects.l
94
+ },
95
+ // Form component effects
96
+ form: {
97
+ input: effects.s,
98
+ inputFocus: effects.m,
99
+ inputError: `${effects.s}, 0 0 0 1px var(--destructive)`,
100
+ select: effects.s,
101
+ selectOpen: effects.m
102
+ },
103
+ // Navigation component effects
104
+ navigation: {
105
+ dropdown: effects.m,
106
+ tooltip: effects.m,
107
+ modal: effects.l,
108
+ popover: effects.m,
109
+ sidebar: effects.s
110
+ }
111
+ };
112
+ var effectTransitions = {
113
+ fast: "box-shadow 0.15s ease-in-out",
114
+ medium: "box-shadow 0.2s ease-in-out",
115
+ slow: "box-shadow 0.3s ease-in-out"
116
+ };
117
+ var effects_default = effects;
118
+
119
+ exports.componentEffects = componentEffects;
120
+ exports.default = effects_default;
121
+ exports.dropShadows = dropShadows;
122
+ exports.effectColors = effectColors;
123
+ exports.effectStyles = effectStyles;
124
+ exports.effectTransitions = effectTransitions;
125
+ exports.effects = effects;
126
+ exports.effectsDark = effectsDark;
127
+ exports.generateEffectsCSS = generateEffectsCSS;
128
+ exports.getEffect = getEffect;
129
+ exports.getEffectDark = getEffectDark;
130
+ exports.tailwindEffects = tailwindEffects;
package/dist/tokens/effects.mjs ADDED
@@ -0,0 +1,115 @@
1
+ // src/tokens/effects.ts
2
+ var effects = {
3
+ // Effect levels
4
+ s: "0 1px 2px rgba(0, 0, 0, 0.05)",
5
+ m: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
6
+ l: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
7
+ };
8
+ var effectsDark = {
9
+ s: "0 1px 2px rgba(0, 0, 0, 0.3)",
10
+ m: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)",
11
+ l: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)"
12
+ };
13
+ var effectColors = {
14
+ primary: "rgba(0, 0, 0, 0.1)",
15
+ secondary: "rgba(0, 0, 0, 0.06)",
16
+ subtle: "rgba(0, 0, 0, 0.05)",
17
+ strong: "rgba(0, 0, 0, 0.15)"
18
+ };
19
+ var effectStyles = {
20
+ // Button effects
21
+ buttonDefault: effects.s,
22
+ buttonHover: effects.m,
23
+ buttonActive: effects.s,
24
+ buttonFloating: effects.l,
25
+ // Card effects
26
+ cardFlat: "none",
27
+ cardElevated: effects.s,
28
+ cardProminent: effects.m,
29
+ cardFloating: effects.l,
30
+ // Form effects
31
+ inputDefault: effects.s,
32
+ inputFocus: effects.m,
33
+ inputInvalid: `${effects.s}, 0 0 0 1px var(--destructive)`,
34
+ // Navigation effects
35
+ dropdown: effects.m,
36
+ tooltip: effects.m,
37
+ modal: effects.l,
38
+ popover: effects.m,
39
+ // Interactive effects
40
+ hoverSubtle: effects.s,
41
+ hoverMedium: effects.m,
42
+ hoverStrong: effects.l
43
+ };
44
+ var dropShadows = {
45
+ s: "0 1px 2px rgba(0, 0, 0, 0.05)",
46
+ m: ["0 4px 6px rgba(0, 0, 0, 0.1)", "0 2px 4px rgba(0, 0, 0, 0.06)"],
47
+ l: ["0 10px 15px rgba(0, 0, 0, 0.1)", "0 4px 6px rgba(0, 0, 0, 0.05)"]
48
+ };
49
+ var getEffect = (token) => {
50
+ return effects[token];
51
+ };
52
+ var getEffectDark = (token) => {
53
+ return effectsDark[token];
54
+ };
55
+ var generateEffectsCSS = () => {
56
+ const lightVars = Object.entries(effects).map(([key, value]) => ` --effect-${key}: ${value};`).join("\n");
57
+ const darkVars = Object.entries(effectsDark).map(([key, value]) => ` --effect-${key}: ${value};`).join("\n");
58
+ return `:root {
59
+ /* Effect tokens - Light mode */
60
+ ${lightVars}
61
+ }
62
+
63
+ .dark {
64
+ /* Effect tokens - Dark mode */
65
+ ${darkVars}
66
+ }`;
67
+ };
68
+ var tailwindEffects = {
69
+ "effect-s": "var(--effect-s)",
70
+ "effect-m": "var(--effect-m)",
71
+ "effect-l": "var(--effect-l)"
72
+ };
73
+ var componentEffects = {
74
+ // Button component effects
75
+ button: {
76
+ default: effects.s,
77
+ hover: effects.m,
78
+ active: effects.s,
79
+ floating: effects.l,
80
+ disabled: "none"
81
+ },
82
+ // Card component effects
83
+ card: {
84
+ flat: "none",
85
+ elevated: effects.s,
86
+ interactive: effects.s,
87
+ interactiveHover: effects.m,
88
+ prominent: effects.m,
89
+ floating: effects.l
90
+ },
91
+ // Form component effects
92
+ form: {
93
+ input: effects.s,
94
+ inputFocus: effects.m,
95
+ inputError: `${effects.s}, 0 0 0 1px var(--destructive)`,
96
+ select: effects.s,
97
+ selectOpen: effects.m
98
+ },
99
+ // Navigation component effects
100
+ navigation: {
101
+ dropdown: effects.m,
102
+ tooltip: effects.m,
103
+ modal: effects.l,
104
+ popover: effects.m,
105
+ sidebar: effects.s
106
+ }
107
+ };
108
+ var effectTransitions = {
109
+ fast: "box-shadow 0.15s ease-in-out",
110
+ medium: "box-shadow 0.2s ease-in-out",
111
+ slow: "box-shadow 0.3s ease-in-out"
112
+ };
113
+ var effects_default = effects;
114
+
115
+ export { componentEffects, effects_default as default, dropShadows, effectColors, effectStyles, effectTransitions, effects, effectsDark, generateEffectsCSS, getEffect, getEffectDark, tailwindEffects };