kaleido-ui 0.1.2 → 0.1.4

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 (20) hide show
  1. package/dist/css/kaleido-ui.css +339 -72
  2. package/dist/native/index.cjs +68 -15
  3. package/dist/native/index.d.cts +68 -16
  4. package/dist/native/index.d.ts +68 -16
  5. package/dist/native/index.js +68 -15
  6. package/dist/tokens/index.cjs +188 -6
  7. package/dist/tokens/index.d.cts +236 -6
  8. package/dist/tokens/index.d.ts +236 -6
  9. package/dist/tokens/index.js +181 -6
  10. package/dist/web/index.cjs +5074 -343
  11. package/dist/web/index.d.cts +939 -16
  12. package/dist/web/index.d.ts +939 -16
  13. package/dist/web/index.js +4996 -339
  14. package/package.json +16 -13
  15. package/dist/tailwind/index.cjs +0 -225
  16. package/dist/tailwind/index.d.cts +0 -162
  17. package/dist/tailwind/index.d.ts +0 -162
  18. package/dist/tailwind/index.js +0 -202
  19. package/tailwind/index.d.ts +0 -1
  20. package/tailwind/index.js +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -23,33 +23,31 @@
23
23
  "import": "./dist/native/index.js",
24
24
  "require": "./dist/native/index.cjs"
25
25
  },
26
- "./tailwind": {
27
- "types": "./dist/tailwind/index.d.ts",
28
- "import": "./dist/tailwind/index.js",
29
- "require": "./dist/tailwind/index.cjs"
30
- },
31
26
  "./css": "./dist/css/kaleido-ui.css"
32
27
  },
33
28
  "files": [
34
29
  "dist",
35
30
  "native",
36
- "tokens",
37
- "tailwind"
31
+ "tokens"
38
32
  ],
39
33
  "scripts": {
40
- "build": "tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css",
34
+ "generate:css": "node node_modules/tsx/dist/cli.mjs scripts/generate-css.ts",
35
+ "check:tokens": "node node_modules/tsx/dist/cli.mjs scripts/check-tokens.ts",
36
+ "build": "npm run generate:css && npm run check:tokens && tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css",
41
37
  "dev": "tsup --watch",
42
38
  "showcase": "vite --config showcase/vite.config.ts",
43
- "showcase:build": "vite build --config showcase/vite.config.ts",
39
+ "showcase:build": "npm run generate:css && vite build --config showcase/vite.config.ts",
44
40
  "type-check": "tsc --noEmit",
45
41
  "clean": "rm -rf dist"
46
42
  },
47
43
  "dependencies": {
48
- "@tetherto/wdk-uikit-react-native": "^1.0.0-beta.2"
44
+ "@tetherto/wdk-uikit-react-native": "^1.0.0-beta.2",
45
+ "qr": "^0.5.5"
49
46
  },
50
47
  "peerDependencies": {
51
48
  "@radix-ui/react-dialog": "^1.1.0",
52
49
  "@radix-ui/react-label": "^2.1.0",
50
+ "@radix-ui/react-select": "^2.1.0",
53
51
  "@radix-ui/react-slot": "^1.2.0",
54
52
  "@radix-ui/react-tabs": "^1.1.0",
55
53
  "@radix-ui/react-toast": "^1.2.0",
@@ -70,6 +68,9 @@
70
68
  "@radix-ui/react-dialog": {
71
69
  "optional": true
72
70
  },
71
+ "@radix-ui/react-select": {
72
+ "optional": true
73
+ },
73
74
  "@radix-ui/react-label": {
74
75
  "optional": true
75
76
  },
@@ -95,12 +96,13 @@
95
96
  "devDependencies": {
96
97
  "@radix-ui/react-dialog": "^1.1.15",
97
98
  "@radix-ui/react-label": "^2.1.8",
99
+ "@radix-ui/react-select": "^2.1.7",
98
100
  "@radix-ui/react-slot": "^1.2.4",
99
101
  "@radix-ui/react-tabs": "^1.1.13",
100
102
  "@radix-ui/react-toast": "^1.2.15",
101
103
  "@tailwindcss/vite": "^4.2.4",
102
- "@types/react": "^19.2.14",
103
- "@types/react-dom": "^19.2.3",
104
+ "@types/react": "^18.3.28",
105
+ "@types/react-dom": "^18.3.7",
104
106
  "@types/react-native": "^0.72.8",
105
107
  "@vitejs/plugin-react": "^4.3.0",
106
108
  "autoprefixer": "^10.5.0",
@@ -112,6 +114,7 @@
112
114
  "tailwind-merge": "^2.6.1",
113
115
  "tailwindcss": "^4.2.4",
114
116
  "tsup": "^8.0.0",
117
+ "tsx": "^4.21.0",
115
118
  "typescript": "^5.9.0",
116
119
  "vite": "^5.4.11"
117
120
  },
package/dist/tailwind/index.cjs DELETED
@@ -1,225 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/tailwind/index.ts
21
- var tailwind_exports = {};
22
- __export(tailwind_exports, {
23
- default: () => tailwind_default
24
- });
25
- module.exports = __toCommonJS(tailwind_exports);
26
-
27
- // src/tokens/colors.ts
28
- var darkSemanticColors = {
29
- background: "hsl(158 58% 7%)",
30
- foreground: "#ffffff",
31
- border: "hsl(150 20% 24%)",
32
- input: "rgba(255, 255, 255, 0.15)",
33
- destructive: "hsl(0 62% 50%)",
34
- secondary: "hsl(154 26% 17%)",
35
- secondaryFg: "#ffffff",
36
- muted: "hsl(156 32% 12%)",
37
- mutedFg: "rgba(255, 255, 255, 0.55)",
38
- primary: "#2BEE79",
39
- primaryFg: "#051B10",
40
- accent: "hsl(154 26% 17%)",
41
- accentFg: "#ffffff",
42
- ring: "#2BEE79",
43
- card: "hsl(156 32% 12%)",
44
- cardFg: "#ffffff",
45
- popover: "hsl(154 26% 17%)",
46
- popoverFg: "#ffffff",
47
- chart1: "#2BEE79",
48
- chart2: "#F6C343",
49
- chart3: "#F7931A",
50
- chart4: "#7C3AED",
51
- chart5: "#DD352E",
52
- semanticBackground: "hsl(156 32% 12%)",
53
- semanticBorder: "hsl(150 20% 24%)"
54
- };
55
- var colors = {
56
- ...darkSemanticColors,
57
- textPrimary: darkSemanticColors.foreground,
58
- textSecondary: darkSemanticColors.mutedFg,
59
- textMuted: darkSemanticColors.border,
60
- textDimmed: darkSemanticColors.ring,
61
- /** Semantic */
62
- success: darkSemanticColors.primary,
63
- warning: darkSemanticColors.chart3,
64
- error: darkSemanticColors.destructive,
65
- info: darkSemanticColors.chart1,
66
- /** Network / Layer */
67
- network: {
68
- bitcoin: "#F7931A",
69
- rgb: "#DD352E",
70
- arkade: "#7C3AED",
71
- spark: "#FF6D00",
72
- lightning: "#F6C343"
73
- },
74
- /** Transaction direction */
75
- tx: {
76
- sent: "#F94040",
77
- receive: "#2BEE79",
78
- swap: "#4290FF"
79
- }
80
- };
81
-
82
- // src/tokens/typography.ts
83
- var fontFamily = {
84
- display: "'Satoshi', system-ui, -apple-system, sans-serif",
85
- mono: "'Geist Mono', monospace"
86
- };
87
- var typeScale = {
88
- xxs: ["10px", "14px"],
89
- tiny: ["11px", "16px"],
90
- caption: ["13px", "18px"],
91
- body: ["15px", "22px"],
92
- subhead: ["17px", "24px"],
93
- title: ["20px", "28px"],
94
- headline: ["28px", "34px"],
95
- display: ["36px", "40px"]
96
- };
97
-
98
- // src/tokens/radius.ts
99
- var radius = {
100
- sm: "4px",
101
- md: "6px",
102
- lg: "8px",
103
- xl: "12px",
104
- card: "16px",
105
- panel: "24px",
106
- pill: "9999px",
107
- nav: "32px",
108
- full: "9999px"
109
- };
110
-
111
- // src/tailwind/index.ts
112
- var preset = {
113
- darkMode: ["class"],
114
- theme: {
115
- extend: {
116
- colors: {
117
- border: "var(--border)",
118
- input: "var(--input)",
119
- ring: "var(--ring)",
120
- background: "var(--background)",
121
- foreground: "var(--foreground)",
122
- primary: {
123
- DEFAULT: "var(--primary)",
124
- foreground: "var(--primary-foreground)"
125
- },
126
- secondary: {
127
- DEFAULT: "var(--secondary)",
128
- foreground: "var(--secondary-foreground)"
129
- },
130
- destructive: {
131
- DEFAULT: "var(--destructive)",
132
- foreground: "var(--destructive-foreground)"
133
- },
134
- muted: {
135
- DEFAULT: "var(--muted)",
136
- foreground: "var(--muted-foreground)"
137
- },
138
- accent: {
139
- DEFAULT: "var(--accent)",
140
- foreground: "var(--accent-foreground)"
141
- },
142
- popover: {
143
- DEFAULT: "var(--popover)",
144
- foreground: "var(--popover-foreground)"
145
- },
146
- card: {
147
- DEFAULT: "var(--card)",
148
- foreground: "var(--card-foreground)"
149
- },
150
- network: colors.network,
151
- tx: colors.tx
152
- },
153
- fontFamily: {
154
- sans: fontFamily.display.split(", "),
155
- display: fontFamily.display.split(", "),
156
- mono: fontFamily.mono.split(", ")
157
- },
158
- fontSize: Object.fromEntries(
159
- Object.entries(typeScale).map(([key, [size, lh]]) => [
160
- key,
161
- [size, { lineHeight: lh }]
162
- ])
163
- ),
164
- borderRadius: {
165
- lg: "var(--radius)",
166
- md: "calc(var(--radius) - 2px)",
167
- sm: "calc(var(--radius) - 4px)",
168
- xl: "0.75rem",
169
- "2xl": "1rem",
170
- "3xl": "1.5rem",
171
- "4xl": "var(--radius-4xl)",
172
- card: radius.card,
173
- panel: radius.panel,
174
- pill: radius.pill,
175
- nav: radius.nav
176
- },
177
- keyframes: {
178
- "accordion-down": {
179
- from: { height: "0" },
180
- to: { height: "var(--radix-accordion-content-height)" }
181
- },
182
- "accordion-up": {
183
- from: { height: "var(--radix-accordion-content-height)" },
184
- to: { height: "0" }
185
- },
186
- "fade-in": {
187
- from: { opacity: "0" },
188
- to: { opacity: "1" }
189
- },
190
- "slide-up": {
191
- from: { opacity: "0", transform: "translateY(10px)" },
192
- to: { opacity: "1", transform: "translateY(0)" }
193
- },
194
- "slide-in-from-bottom": {
195
- from: { opacity: "0", transform: "translateY(20px)" },
196
- to: { opacity: "1", transform: "translateY(0)" }
197
- },
198
- shimmer: {
199
- "0%": { backgroundPosition: "-200% 0" },
200
- "100%": { backgroundPosition: "200% 0" }
201
- },
202
- "stagger-up": {
203
- "0%": { opacity: "0", transform: "translateY(15px)" },
204
- "100%": { opacity: "1", transform: "translateY(0)" }
205
- },
206
- "bounce-slight": {
207
- "0%, 100%": { transform: "translateY(-5%)" },
208
- "50%": { transform: "translateY(0)" }
209
- }
210
- },
211
- animation: {
212
- "accordion-down": "accordion-down 0.2s ease-out",
213
- "accordion-up": "accordion-up 0.2s ease-out",
214
- "fade-in": "fade-in 0.3s ease-out",
215
- "slide-up": "slide-up 0.3s ease-out",
216
- "slide-in-from-bottom": "slide-in-from-bottom 0.4s ease-out",
217
- "stagger-up": "stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards",
218
- shimmer: "shimmer 2s linear infinite",
219
- "bounce-slight": "bounce-slight 2s infinite"
220
- }
221
- }
222
- },
223
- plugins: []
224
- };
225
- var tailwind_default = preset;
package/dist/tailwind/index.d.cts DELETED
@@ -1,162 +0,0 @@
1
- declare const preset: {
2
- darkMode: readonly ["class"];
3
- theme: {
4
- extend: {
5
- colors: {
6
- border: string;
7
- input: string;
8
- ring: string;
9
- background: string;
10
- foreground: string;
11
- primary: {
12
- DEFAULT: string;
13
- foreground: string;
14
- };
15
- secondary: {
16
- DEFAULT: string;
17
- foreground: string;
18
- };
19
- destructive: {
20
- DEFAULT: string;
21
- foreground: string;
22
- };
23
- muted: {
24
- DEFAULT: string;
25
- foreground: string;
26
- };
27
- accent: {
28
- DEFAULT: string;
29
- foreground: string;
30
- };
31
- popover: {
32
- DEFAULT: string;
33
- foreground: string;
34
- };
35
- card: {
36
- DEFAULT: string;
37
- foreground: string;
38
- };
39
- network: {
40
- readonly bitcoin: "#F7931A";
41
- readonly rgb: "#DD352E";
42
- readonly arkade: "#7C3AED";
43
- readonly spark: "#FF6D00";
44
- readonly lightning: "#F6C343";
45
- };
46
- tx: {
47
- readonly sent: "#F94040";
48
- readonly receive: "#2BEE79";
49
- readonly swap: "#4290FF";
50
- };
51
- };
52
- fontFamily: {
53
- sans: string[];
54
- display: string[];
55
- mono: string[];
56
- };
57
- fontSize: {
58
- [k: string]: ("10px" | "11px" | "13px" | "15px" | "17px" | "20px" | "28px" | "36px" | {
59
- lineHeight: "14px" | "16px" | "18px" | "22px" | "24px" | "28px" | "34px" | "40px";
60
- })[];
61
- };
62
- borderRadius: {
63
- lg: string;
64
- md: string;
65
- sm: string;
66
- xl: string;
67
- '2xl': string;
68
- '3xl': string;
69
- '4xl': string;
70
- card: "16px";
71
- panel: "24px";
72
- pill: "9999px";
73
- nav: "32px";
74
- };
75
- keyframes: {
76
- 'accordion-down': {
77
- from: {
78
- height: string;
79
- };
80
- to: {
81
- height: string;
82
- };
83
- };
84
- 'accordion-up': {
85
- from: {
86
- height: string;
87
- };
88
- to: {
89
- height: string;
90
- };
91
- };
92
- 'fade-in': {
93
- from: {
94
- opacity: string;
95
- };
96
- to: {
97
- opacity: string;
98
- };
99
- };
100
- 'slide-up': {
101
- from: {
102
- opacity: string;
103
- transform: string;
104
- };
105
- to: {
106
- opacity: string;
107
- transform: string;
108
- };
109
- };
110
- 'slide-in-from-bottom': {
111
- from: {
112
- opacity: string;
113
- transform: string;
114
- };
115
- to: {
116
- opacity: string;
117
- transform: string;
118
- };
119
- };
120
- shimmer: {
121
- '0%': {
122
- backgroundPosition: string;
123
- };
124
- '100%': {
125
- backgroundPosition: string;
126
- };
127
- };
128
- 'stagger-up': {
129
- '0%': {
130
- opacity: string;
131
- transform: string;
132
- };
133
- '100%': {
134
- opacity: string;
135
- transform: string;
136
- };
137
- };
138
- 'bounce-slight': {
139
- '0%, 100%': {
140
- transform: string;
141
- };
142
- '50%': {
143
- transform: string;
144
- };
145
- };
146
- };
147
- animation: {
148
- 'accordion-down': string;
149
- 'accordion-up': string;
150
- 'fade-in': string;
151
- 'slide-up': string;
152
- 'slide-in-from-bottom': string;
153
- 'stagger-up': string;
154
- shimmer: string;
155
- 'bounce-slight': string;
156
- };
157
- };
158
- };
159
- plugins: any[];
160
- };
161
-
162
- export { preset as default };
package/dist/tailwind/index.d.ts DELETED
@@ -1,162 +0,0 @@
1
- declare const preset: {
2
- darkMode: readonly ["class"];
3
- theme: {
4
- extend: {
5
- colors: {
6
- border: string;
7
- input: string;
8
- ring: string;
9
- background: string;
10
- foreground: string;
11
- primary: {
12
- DEFAULT: string;
13
- foreground: string;
14
- };
15
- secondary: {
16
- DEFAULT: string;
17
- foreground: string;
18
- };
19
- destructive: {
20
- DEFAULT: string;
21
- foreground: string;
22
- };
23
- muted: {
24
- DEFAULT: string;
25
- foreground: string;
26
- };
27
- accent: {
28
- DEFAULT: string;
29
- foreground: string;
30
- };
31
- popover: {
32
- DEFAULT: string;
33
- foreground: string;
34
- };
35
- card: {
36
- DEFAULT: string;
37
- foreground: string;
38
- };
39
- network: {
40
- readonly bitcoin: "#F7931A";
41
- readonly rgb: "#DD352E";
42
- readonly arkade: "#7C3AED";
43
- readonly spark: "#FF6D00";
44
- readonly lightning: "#F6C343";
45
- };
46
- tx: {
47
- readonly sent: "#F94040";
48
- readonly receive: "#2BEE79";
49
- readonly swap: "#4290FF";
50
- };
51
- };
52
- fontFamily: {
53
- sans: string[];
54
- display: string[];
55
- mono: string[];
56
- };
57
- fontSize: {
58
- [k: string]: ("10px" | "11px" | "13px" | "15px" | "17px" | "20px" | "28px" | "36px" | {
59
- lineHeight: "14px" | "16px" | "18px" | "22px" | "24px" | "28px" | "34px" | "40px";
60
- })[];
61
- };
62
- borderRadius: {
63
- lg: string;
64
- md: string;
65
- sm: string;
66
- xl: string;
67
- '2xl': string;
68
- '3xl': string;
69
- '4xl': string;
70
- card: "16px";
71
- panel: "24px";
72
- pill: "9999px";
73
- nav: "32px";
74
- };
75
- keyframes: {
76
- 'accordion-down': {
77
- from: {
78
- height: string;
79
- };
80
- to: {
81
- height: string;
82
- };
83
- };
84
- 'accordion-up': {
85
- from: {
86
- height: string;
87
- };
88
- to: {
89
- height: string;
90
- };
91
- };
92
- 'fade-in': {
93
- from: {
94
- opacity: string;
95
- };
96
- to: {
97
- opacity: string;
98
- };
99
- };
100
- 'slide-up': {
101
- from: {
102
- opacity: string;
103
- transform: string;
104
- };
105
- to: {
106
- opacity: string;
107
- transform: string;
108
- };
109
- };
110
- 'slide-in-from-bottom': {
111
- from: {
112
- opacity: string;
113
- transform: string;
114
- };
115
- to: {
116
- opacity: string;
117
- transform: string;
118
- };
119
- };
120
- shimmer: {
121
- '0%': {
122
- backgroundPosition: string;
123
- };
124
- '100%': {
125
- backgroundPosition: string;
126
- };
127
- };
128
- 'stagger-up': {
129
- '0%': {
130
- opacity: string;
131
- transform: string;
132
- };
133
- '100%': {
134
- opacity: string;
135
- transform: string;
136
- };
137
- };
138
- 'bounce-slight': {
139
- '0%, 100%': {
140
- transform: string;
141
- };
142
- '50%': {
143
- transform: string;
144
- };
145
- };
146
- };
147
- animation: {
148
- 'accordion-down': string;
149
- 'accordion-up': string;
150
- 'fade-in': string;
151
- 'slide-up': string;
152
- 'slide-in-from-bottom': string;
153
- 'stagger-up': string;
154
- shimmer: string;
155
- 'bounce-slight': string;
156
- };
157
- };
158
- };
159
- plugins: any[];
160
- };
161
-
162
- export { preset as default };