@vaneui/ui 0.1.2 → 0.1.3

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 (77) hide show
  1. package/README.md +13 -1
  2. package/dist/components/complex/index.d.ts +1 -0
  3. package/dist/components/complex/index.js +132 -0
  4. package/dist/components/complex/index.js.map +1 -0
  5. package/dist/components/complex/sharer.d.ts +39 -0
  6. package/dist/components/themeContext.d.ts +50 -0
  7. package/dist/components/themedComponent.d.ts +7 -0
  8. package/dist/components/ui/badge.d.ts +3 -0
  9. package/dist/components/ui/button.d.ts +3 -0
  10. package/dist/components/ui/card.d.ts +3 -0
  11. package/dist/components/ui/chip.d.ts +3 -0
  12. package/dist/components/ui/classes/appearanceClasses.d.ts +13 -0
  13. package/dist/components/ui/classes/spacingClasses.d.ts +2 -0
  14. package/dist/components/ui/classes/typographyClasses.d.ts +4 -0
  15. package/dist/components/ui/col.d.ts +3 -0
  16. package/dist/components/ui/container.d.ts +3 -0
  17. package/dist/components/ui/divider.d.ts +3 -0
  18. package/dist/components/ui/grid.d.ts +4 -0
  19. package/dist/components/ui/layout.d.ts +7 -0
  20. package/dist/components/ui/props/index.d.ts +1 -0
  21. package/dist/components/ui/props/keys.d.ts +81 -0
  22. package/dist/components/ui/props/props.d.ts +43 -0
  23. package/dist/components/ui/row.d.ts +3 -0
  24. package/dist/components/ui/section.d.ts +3 -0
  25. package/dist/components/ui/stack.d.ts +3 -0
  26. package/dist/components/ui/theme/appearance/layoutAppearanceTheme.d.ts +10 -0
  27. package/dist/components/ui/theme/appearance/textAppearanceTheme.d.ts +10 -0
  28. package/dist/components/ui/theme/appearance/variantTheme.d.ts +15 -0
  29. package/dist/components/ui/theme/badgeTheme.d.ts +32 -0
  30. package/dist/components/ui/theme/buttonTheme.d.ts +32 -0
  31. package/dist/components/ui/theme/cardTheme.d.ts +37 -0
  32. package/dist/components/ui/theme/chipTheme.d.ts +32 -0
  33. package/dist/components/ui/theme/colTheme.d.ts +15 -0
  34. package/dist/components/ui/theme/common/ComponentTheme.d.ts +52 -0
  35. package/dist/components/ui/theme/common/baseTheme.d.ts +12 -0
  36. package/dist/components/ui/theme/containerTheme.d.ts +31 -0
  37. package/dist/components/ui/theme/dividerTheme.d.ts +9 -0
  38. package/dist/components/ui/theme/gridTheme.d.ts +10 -0
  39. package/dist/components/ui/theme/layout/borderTheme.d.ts +9 -0
  40. package/dist/components/ui/theme/layout/directionTheme.d.ts +9 -0
  41. package/dist/components/ui/theme/layout/displayTheme.d.ts +9 -0
  42. package/dist/components/ui/theme/layout/hideTheme.d.ts +9 -0
  43. package/dist/components/ui/theme/layout/itemsTheme.d.ts +9 -0
  44. package/dist/components/ui/theme/layout/justifyTheme.d.ts +9 -0
  45. package/dist/components/ui/theme/layout/positionTheme.d.ts +9 -0
  46. package/dist/components/ui/theme/layout/radiusTheme.d.ts +9 -0
  47. package/dist/components/ui/theme/layout/ringTheme.d.ts +9 -0
  48. package/dist/components/ui/theme/layout/shadowTheme.d.ts +9 -0
  49. package/dist/components/ui/theme/layout/wrapTheme.d.ts +9 -0
  50. package/dist/components/ui/theme/rowTheme.d.ts +15 -0
  51. package/dist/components/ui/theme/sectionTheme.d.ts +34 -0
  52. package/dist/components/ui/theme/size/breakpointTheme.d.ts +9 -0
  53. package/dist/components/ui/theme/size/gapTheme.d.ts +9 -0
  54. package/dist/components/ui/theme/size/pxTheme.d.ts +9 -0
  55. package/dist/components/ui/theme/size/pyTheme.d.ts +9 -0
  56. package/dist/components/ui/theme/size/sizeTheme.d.ts +9 -0
  57. package/dist/components/ui/theme/stackTheme.d.ts +19 -0
  58. package/dist/components/ui/theme/typography/fontFamilyTheme.d.ts +9 -0
  59. package/dist/components/ui/theme/typography/fontStyleTheme.d.ts +9 -0
  60. package/dist/components/ui/theme/typography/fontWeightTheme.d.ts +9 -0
  61. package/dist/components/ui/theme/typography/textAlignTheme.d.ts +9 -0
  62. package/dist/components/ui/theme/typography/textDecorationTheme.d.ts +9 -0
  63. package/dist/components/ui/theme/typography/textTransformTheme.d.ts +9 -0
  64. package/dist/components/ui/theme/typographyComponentTheme.d.ts +22 -0
  65. package/dist/components/ui/typography.d.ts +9 -0
  66. package/dist/components/utils/componentUtils.d.ts +4 -0
  67. package/dist/components/utils/deepMerge.d.ts +4 -0
  68. package/dist/components/utils/deepPartial.d.ts +3 -0
  69. package/dist/components/utils/tests/deepMerge.test.d.ts +1 -0
  70. package/dist/index.d.ts +8 -0
  71. package/dist/index.esm.js +4717 -0
  72. package/dist/index.esm.js.map +1 -0
  73. package/dist/index.js +4785 -0
  74. package/dist/index.js.map +1 -0
  75. package/dist/ui.css +2049 -0
  76. package/dist/vars.css +132 -0
  77. package/package.json +19 -5
package/dist/vars.css ADDED
@@ -0,0 +1,132 @@
1
+ @theme {
2
+ /* Text Colors */
3
+ --text-color-default: var(--color-gray-900, #111827);
4
+ --text-color-primary: var(--color-blue-600, #2563eb);
5
+ --text-color-secondary: var(--color-gray-600, #4b5563);
6
+ --text-color-tertiary: var(--color-gray-500, #6b7280);
7
+ --text-color-muted: var(--color-gray-400, #9ca3af);
8
+ --text-color-link: var(--color-blue-600, #2563eb);
9
+ --text-color-accent: var(--color-rose-700, #9333ea);
10
+ --text-color-success: var(--color-emerald-600, #059669);
11
+ --text-color-danger: var(--color-red-600, #dc2626);
12
+ --text-color-warning: var(--color-amber-600, #d97706);
13
+ --text-color-info: var(--color-cyan-600, #0891b2);
14
+
15
+ /* Background Colors */
16
+ --background-color-default: var(--color-white, #ffffff);
17
+ --background-color-primary: var(--color-blue-50, #eff6ff);
18
+ --background-color-secondary: var(--color-gray-50, #f9fafb);
19
+ --background-color-tertiary: var(--color-gray-100, #f3f4f6);
20
+ --background-color-accent: var(--color-rose-50, #faf5ff);
21
+ --background-color-success: var(--color-emerald-50, #ecfdf5);
22
+ --background-color-danger: var(--color-red-50, #fef2f2);
23
+ --background-color-warning: var(--color-amber-50, #fffbeb);
24
+ --background-color-info: var(--color-cyan-50, #ecfeff);
25
+ --background-color-muted: var(--color-gray-50, #f9fafb);
26
+ --background-color-link: var(--color-blue-50, #eff6ff);
27
+
28
+ /* Background Hover Colors */
29
+ --background-color-hover-default: var(--color-gray-50, #f3f4f6);
30
+ --background-color-hover-primary: var(--color-blue-100, #dbeafe);
31
+ --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
32
+ --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
33
+ --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
34
+ --background-color-hover-success: var(--color-emerald-100, #d1fae5);
35
+ --background-color-hover-danger: var(--color-red-100, #fee2e2);
36
+ --background-color-hover-warning: var(--color-amber-100, #fef3c7);
37
+ --background-color-hover-info: var(--color-cyan-100, #cffafe);
38
+ --background-color-hover-muted: var(--color-gray-100, #f3f4f6);
39
+ --background-color-hover-link: var(--color-blue-100, #dbeafe);
40
+
41
+ /* Background Active Colors */
42
+ --background-color-active-default: var(--color-gray-100, #e5e7eb);
43
+ --background-color-active-primary: var(--color-blue-200, #bfdbfe);
44
+ --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
45
+ --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
46
+ --background-color-active-accent: var(--color-rose-200, #fbcfe8);
47
+ --background-color-active-success: var(--color-emerald-200, #a7f3d0);
48
+ --background-color-active-danger: var(--color-red-200, #fecaca);
49
+ --background-color-active-warning: var(--color-amber-200, #fde68a);
50
+ --background-color-active-info: var(--color-cyan-200, #a5f3fc);
51
+ --background-color-active-muted: var(--color-gray-200, #e5e7eb);
52
+ --background-color-active-link: var(--color-blue-200, #bfdbfe);
53
+
54
+ /* Filled Button Background Colors */
55
+ --filled-background-color-default: var(--color-gray-800, #1f2937);
56
+ --filled-background-color-primary: var(--color-blue-600, #2563eb);
57
+ --filled-background-color-secondary: var(--color-gray-600, #4b5563);
58
+ --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
59
+ --filled-background-color-accent: var(--color-rose-600, #e11d48);
60
+ --filled-background-color-success: var(--color-emerald-600, #059669);
61
+ --filled-background-color-danger: var(--color-red-600, #dc2626);
62
+ --filled-background-color-warning: var(--color-amber-600, #d97706);
63
+ --filled-background-color-info: var(--color-cyan-600, #0891b2);
64
+ --filled-background-color-muted: var(--color-gray-500, #6b7280);
65
+ --filled-background-color-link: var(--color-blue-600, #2563eb);
66
+
67
+ /* Filled Button Hover Background Colors */
68
+ --filled-background-color-hover-default: var(--color-gray-900, #111827);
69
+ --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
70
+ --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
71
+ --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
72
+ --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
73
+ --filled-background-color-hover-success: var(--color-emerald-700, #047857);
74
+ --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
75
+ --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
76
+ --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
77
+ --filled-background-color-hover-muted: var(--color-gray-600, #4b5563);
78
+ --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
79
+
80
+ /* Filled Button Active Background Colors */
81
+ --filled-background-color-active-default: var(--color-gray-950, #030712);
82
+ --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
83
+ --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
84
+ --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
85
+ --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
86
+ --filled-background-color-active-success: var(--color-emerald-800, #065f46);
87
+ --filled-background-color-active-danger: var(--color-red-800, #991b1b);
88
+ --filled-background-color-active-warning: var(--color-amber-800, #92400e);
89
+ --filled-background-color-active-info: var(--color-cyan-800, #155e75);
90
+ --filled-background-color-active-muted: var(--color-gray-700, #374151);
91
+ --filled-background-color-active-link: var(--color-blue-800, #1e40af);
92
+
93
+ /* Layout Background Colors */
94
+ --layout-background-default: var(--color-white, #ffffff);
95
+ --layout-background-primary: var(--color-white, #ffffff);
96
+ --layout-background-secondary: var(--color-gray-50, #f9fafb);
97
+ --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
98
+ --layout-background-accent: var(--color-indigo-50, #eef2ff);
99
+ --layout-background-success: var(--color-green-50, #f0fdf4);
100
+ --layout-background-danger: var(--color-red-50, #fef2f2);
101
+ --layout-background-warning: var(--color-yellow-50, #fefce8);
102
+ --layout-background-info: var(--color-blue-50, #eff6ff);
103
+ --layout-background-transparent: transparent;
104
+ --layout-background-muted: var(--color-gray-50, #f9fafb);
105
+ --layout-background-link: var(--color-blue-50, #eff6ff);
106
+
107
+ /* Border Colors */
108
+ --border-color-default: var(--color-gray-200, #d1d5db);
109
+ --border-color-primary: var(--color-blue-200, #93c5fd);
110
+ --border-color-secondary: var(--color-gray-200, #d1d5db);
111
+ --border-color-tertiary: var(--color-gray-200, #e5e7eb);
112
+ --border-color-muted: var(--color-gray-200, #e5e7eb);
113
+ --border-color-link: var(--color-blue-200, #93c5fd);
114
+ --border-color-accent: var(--color-rose-200, #d8b4fe);
115
+ --border-color-success: var(--color-emerald-200, #6ee7b7);
116
+ --border-color-danger: var(--color-red-200, #fca5a5);
117
+ --border-color-warning: var(--color-amber-200, #fcd34d);
118
+ --border-color-info: var(--color-cyan-200, #67e8f9);
119
+
120
+ /* Filled Button Border Colors */
121
+ --filled-border-color-default: var(--color-gray-800, #1f2937);
122
+ --filled-border-color-primary: var(--color-blue-600, #2563eb);
123
+ --filled-border-color-secondary: var(--color-gray-600, #4b5563);
124
+ --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
125
+ --filled-border-color-accent: var(--color-rose-600, #e11d48);
126
+ --filled-border-color-success: var(--color-emerald-600, #059669);
127
+ --filled-border-color-danger: var(--color-red-600, #dc2626);
128
+ --filled-border-color-warning: var(--color-amber-600, #d97706);
129
+ --filled-border-color-info: var(--color-cyan-600, #0891b2);
130
+ --filled-border-color-muted: var(--color-gray-500, #6b7280);
131
+ --filled-border-color-link: var(--color-blue-600, #2563eb);
132
+ }
package/package.json CHANGED
@@ -1,7 +1,24 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.1.2",
4
- "description": "",
3
+ "version": "0.1.3",
4
+ "description": "A simple, elegant, and lightweight UI component library for React, built with Tailwind CSS.",
5
+ "author": "",
6
+ "license": "ISC",
7
+ "homepage": "https://vaneui.com/",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/vaneui/vaneui.git"
11
+ },
12
+ "keywords": [
13
+ "react",
14
+ "ui",
15
+ "components",
16
+ "vane",
17
+ "vaneui",
18
+ "tailwind",
19
+ "headless",
20
+ "typescript"
21
+ ],
5
22
  "type": "module",
6
23
  "main": "dist/index.js",
7
24
  "module": "dist/index.esm.js",
@@ -33,9 +50,6 @@
33
50
  "build": "npm run clean && npm run build:js && npm run build:css:ui && npm run build:css:vars",
34
51
  "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
35
52
  },
36
- "keywords": [],
37
- "author": "",
38
- "license": "ISC",
39
53
  "peerDependencies": {
40
54
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
41
55
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"