@hexdspace/react 0.1.7 → 0.1.9
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.
- package/dist/css/base-theme.css +8 -13
- package/dist/css/component.css +49 -7
- package/dist/css/entry.css +1 -0
- package/dist/css/primitive.css +69 -80
- package/dist/css/semantic.css +42 -20
- package/dist/css/utils/custom-scrollbar.css +4 -3
- package/dist/index.d.ts +79 -25
- package/dist/index.js +961 -321
- package/package.json +2 -3
package/dist/css/base-theme.css
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
@import url(
|
|
2
|
-
@import url(
|
|
3
|
-
@import url(
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
|
|
2
|
+
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&display=swap");
|
|
3
|
+
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");
|
|
4
4
|
|
|
5
|
-
@import
|
|
5
|
+
@import "tailwindcss";
|
|
6
6
|
|
|
7
|
-
@import
|
|
8
|
-
@import
|
|
9
|
-
@import
|
|
10
|
-
@import
|
|
7
|
+
@import "./primitive.css";
|
|
8
|
+
@import "./semantic.css";
|
|
9
|
+
@import "./component.css";
|
|
10
|
+
@import "./utils/custom-scrollbar.css";
|
|
11
11
|
|
|
12
12
|
@plugin 'tailwind-scrollbar';
|
|
13
13
|
|
|
@@ -95,11 +95,6 @@
|
|
|
95
95
|
--color-warning: var(--warning);
|
|
96
96
|
--color-danger: var(--danger);
|
|
97
97
|
|
|
98
|
-
--color-info-soft: var(--info-soft);
|
|
99
|
-
--color-success-soft: var(--success-soft);
|
|
100
|
-
--color-warning-soft: var(--warning-soft);
|
|
101
|
-
--color-danger-soft: var(--danger-soft);
|
|
102
|
-
|
|
103
98
|
--color-on-info: var(--on-info);
|
|
104
99
|
--color-on-success: var(--on-success);
|
|
105
100
|
--color-on-warning: var(--on-warning);
|
package/dist/css/component.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--state-hover: color-mix(in oklab, currentColor, transparent 92%);
|
|
6
6
|
--state-active: color-mix(in oklab, currentColor, transparent 86%);
|
|
7
7
|
|
|
8
|
-
&::after{
|
|
8
|
+
&::after {
|
|
9
9
|
content: "";
|
|
10
10
|
position: absolute;
|
|
11
11
|
inset: 0;
|
|
@@ -16,9 +16,11 @@
|
|
|
16
16
|
pointer-events: none;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
&:hover::after {
|
|
19
|
+
&:hover::after {
|
|
20
|
+
opacity: 1;
|
|
21
|
+
}
|
|
20
22
|
|
|
21
|
-
&:active::after{
|
|
23
|
+
&:active::after {
|
|
22
24
|
background: var(--state-active);
|
|
23
25
|
opacity: 1;
|
|
24
26
|
}
|
|
@@ -44,9 +46,18 @@
|
|
|
44
46
|
min-height: 100vh;
|
|
45
47
|
}
|
|
46
48
|
|
|
47
|
-
h1 {
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
h1 {
|
|
50
|
+
font: var(--h1);
|
|
51
|
+
@apply my-2;
|
|
52
|
+
}
|
|
53
|
+
h2 {
|
|
54
|
+
font: var(--h2);
|
|
55
|
+
@apply my-2;
|
|
56
|
+
}
|
|
57
|
+
h3 {
|
|
58
|
+
font: var(--h3);
|
|
59
|
+
@apply my-2;
|
|
60
|
+
}
|
|
50
61
|
|
|
51
62
|
p {
|
|
52
63
|
@apply my-2;
|
|
@@ -63,7 +74,7 @@
|
|
|
63
74
|
text-decoration: underline;
|
|
64
75
|
}
|
|
65
76
|
|
|
66
|
-
:where(button,[role="button"],a,input,select,textarea,[tabindex]):focus-visible {
|
|
77
|
+
:where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
|
|
67
78
|
outline: none;
|
|
68
79
|
box-shadow: var(--focus-ring);
|
|
69
80
|
}
|
|
@@ -114,6 +125,37 @@
|
|
|
114
125
|
}
|
|
115
126
|
|
|
116
127
|
@layer utilities {
|
|
128
|
+
@keyframes skeleton-shimmer {
|
|
129
|
+
0% {
|
|
130
|
+
background-position: 200% 0;
|
|
131
|
+
}
|
|
132
|
+
100% {
|
|
133
|
+
background-position: -200% 0;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@keyframes tooltip-in {
|
|
138
|
+
0% {
|
|
139
|
+
opacity: 0;
|
|
140
|
+
transform: translate(var(--tooltip-x, 0px), var(--tooltip-y, 4px)) scale(0.98);
|
|
141
|
+
}
|
|
142
|
+
100% {
|
|
143
|
+
opacity: 1;
|
|
144
|
+
transform: translate(0, 0) scale(1);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@keyframes tooltip-out {
|
|
149
|
+
0% {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
transform: translate(0, 0) scale(1);
|
|
152
|
+
}
|
|
153
|
+
100% {
|
|
154
|
+
opacity: 0;
|
|
155
|
+
transform: translate(var(--tooltip-x, 0px), var(--tooltip-y, 4px)) scale(0.98);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
117
159
|
.brand-gradient {
|
|
118
160
|
background: linear-gradient(90deg, var(--brand-strong) 0%, var(--brand) 30%);
|
|
119
161
|
-webkit-background-clip: text;
|
package/dist/css/entry.css
CHANGED
package/dist/css/primitive.css
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* Typography */
|
|
3
|
-
--font-primary:
|
|
4
|
-
--font-secondary:
|
|
5
|
-
--font-mono:
|
|
6
|
-
--h1: 600 3rem/1.2em var(--font-secondary);
|
|
7
|
-
--h2: 600 2rem/1.2em var(--font-secondary);
|
|
8
|
-
--h3: 600 1.25rem/1.3em var(--font-secondary);
|
|
9
|
-
--p: 1rem/1.5em var(--font-primary);
|
|
10
|
-
--span: 1rem/1.0em var(--font-primary);
|
|
3
|
+
--font-primary: "Inter", sans-serif;
|
|
4
|
+
--font-secondary: "Fira Sans", sans-serif;
|
|
5
|
+
--font-mono: "JetBrains Mono", "Consolas", monospace;
|
|
6
|
+
--h1: 600 3rem / 1.2em var(--font-secondary);
|
|
7
|
+
--h2: 600 2rem / 1.2em var(--font-secondary);
|
|
8
|
+
--h3: 600 1.25rem / 1.3em var(--font-secondary);
|
|
9
|
+
--p: 1rem / 1.5em var(--font-primary);
|
|
10
|
+
--span: 1rem / 1.0em var(--font-primary);
|
|
11
11
|
|
|
12
12
|
/* Radii */
|
|
13
13
|
--shape-radius-0: 0px;
|
|
@@ -19,112 +19,101 @@
|
|
|
19
19
|
--shape-radius-50: 1.5rem; /* 24px */
|
|
20
20
|
--shape-radius-pill: 999px;
|
|
21
21
|
|
|
22
|
+
/* Motion */
|
|
23
|
+
--motion-fast: 0.1s;
|
|
24
|
+
--motion-med: 0.16s;
|
|
25
|
+
--motion-slow: 0.24s;
|
|
26
|
+
|
|
22
27
|
/* Neutral ramp */
|
|
23
28
|
--ink-10: oklch(0.92 0.043 258);
|
|
24
29
|
--ink-20: oklch(0.84 0.043 258);
|
|
25
30
|
--ink-30: oklch(0.76 0.043 258);
|
|
26
31
|
--ink-40: oklch(0.68 0.043 258);
|
|
27
|
-
--ink-50: oklch(0.
|
|
32
|
+
--ink-50: oklch(0.6 0.035 258);
|
|
28
33
|
--ink-60: oklch(0.48 0.035 258);
|
|
29
|
-
--ink-70: oklch(0.
|
|
34
|
+
--ink-70: oklch(0.4 0.035 258);
|
|
30
35
|
--ink-80: oklch(0.32 0.025 258);
|
|
31
36
|
--ink-90: oklch(0.24 0.025 258);
|
|
32
37
|
--ink-100: oklch(0.16 0.025 258);
|
|
33
38
|
|
|
34
39
|
/* Accent */
|
|
35
40
|
/* Accent (cool mint green) */
|
|
36
|
-
--accent-10:
|
|
37
|
-
--accent-20:
|
|
38
|
-
--accent-30:
|
|
39
|
-
--accent-40:
|
|
40
|
-
--accent-50:
|
|
41
|
-
--accent-60:
|
|
42
|
-
--accent-70:
|
|
43
|
-
--accent-80:
|
|
44
|
-
--accent-90:
|
|
45
|
-
--accent-100: oklch(0.
|
|
41
|
+
--accent-10: oklch(0.93 0.028 160);
|
|
42
|
+
--accent-20: oklch(0.87 0.052 160);
|
|
43
|
+
--accent-30: oklch(0.84 0.068 160);
|
|
44
|
+
--accent-40: oklch(0.8 0.085 160);
|
|
45
|
+
--accent-50: oklch(0.74 0.105 160);
|
|
46
|
+
--accent-60: oklch(0.66 0.125 160);
|
|
47
|
+
--accent-70: oklch(0.58 0.135 160);
|
|
48
|
+
--accent-80: oklch(0.48 0.125 160);
|
|
49
|
+
--accent-90: oklch(0.42 0.105 160);
|
|
50
|
+
--accent-100: oklch(0.36 0.105 160);
|
|
46
51
|
|
|
47
52
|
/* Brand ramp */
|
|
48
|
-
--brand-10:
|
|
49
|
-
--brand-20:
|
|
50
|
-
--brand-30:
|
|
51
|
-
--brand-40:
|
|
52
|
-
--brand-50:
|
|
53
|
-
--brand-60:
|
|
54
|
-
--brand-70:
|
|
55
|
-
--brand-80:
|
|
56
|
-
--brand-90:
|
|
53
|
+
--brand-10: oklch(0.97 0.02 250);
|
|
54
|
+
--brand-20: oklch(0.93 0.035 250);
|
|
55
|
+
--brand-30: oklch(0.88 0.05 250);
|
|
56
|
+
--brand-40: oklch(0.82 0.07 250);
|
|
57
|
+
--brand-50: oklch(0.74 0.095 250);
|
|
58
|
+
--brand-60: oklch(0.66 0.12 250);
|
|
59
|
+
--brand-70: oklch(0.58 0.145 250);
|
|
60
|
+
--brand-80: oklch(0.5 0.135 250);
|
|
61
|
+
--brand-90: oklch(0.42 0.115 250);
|
|
57
62
|
--brand-100: oklch(0.34 0.095 250);
|
|
58
63
|
|
|
59
64
|
/* Functional ramps */
|
|
60
|
-
--info-10: oklch(0.
|
|
61
|
-
--info-20: oklch(0.
|
|
62
|
-
--info-30: oklch(0.
|
|
63
|
-
--info-40: oklch(0.
|
|
64
|
-
--info-50: oklch(0.
|
|
65
|
-
--info-60: oklch(0.
|
|
66
|
-
--info-70: oklch(0.
|
|
67
|
-
--info-80: oklch(0.
|
|
68
|
-
--info-90: oklch(0.
|
|
65
|
+
--info-10: oklch(0.97 0.028 230);
|
|
66
|
+
--info-20: oklch(0.94 0.042 230);
|
|
67
|
+
--info-30: oklch(0.91 0.056 230);
|
|
68
|
+
--info-40: oklch(0.88 0.07 230);
|
|
69
|
+
--info-50: oklch(0.82 0.09 230);
|
|
70
|
+
--info-60: oklch(0.76 0.105 230);
|
|
71
|
+
--info-70: oklch(0.66 0.11 230);
|
|
72
|
+
--info-80: oklch(0.56 0.095 230);
|
|
73
|
+
--info-90: oklch(0.47 0.08 230);
|
|
69
74
|
|
|
70
|
-
--success-10: oklch(0.
|
|
71
|
-
--success-20: oklch(0.876 0.
|
|
75
|
+
--success-10: oklch(0.92 0.042 145);
|
|
76
|
+
--success-20: oklch(0.876 0.06 145);
|
|
72
77
|
--success-30: oklch(0.832 0.078 145);
|
|
73
78
|
--success-40: oklch(0.788 0.094 145);
|
|
74
79
|
--success-50: oklch(0.744 0.109 145);
|
|
75
|
-
--success-60: oklch(0.
|
|
76
|
-
--success-70: oklch(0.
|
|
77
|
-
--success-80: oklch(0.
|
|
78
|
-
--success-90: oklch(0.
|
|
80
|
+
--success-60: oklch(0.7 0.12 145);
|
|
81
|
+
--success-70: oklch(0.6 0.1 145);
|
|
82
|
+
--success-80: oklch(0.5 0.08 145);
|
|
83
|
+
--success-90: oklch(0.4 0.06 145);
|
|
79
84
|
|
|
80
|
-
--warning-10: oklch(0.
|
|
81
|
-
--warning-20: oklch(0.932 0.
|
|
85
|
+
--warning-10: oklch(0.97 0.042 80);
|
|
86
|
+
--warning-20: oklch(0.932 0.06 80);
|
|
82
87
|
--warning-30: oklch(0.894 0.078 80);
|
|
83
88
|
--warning-40: oklch(0.856 0.094 80);
|
|
84
89
|
--warning-50: oklch(0.818 0.109 80);
|
|
85
|
-
--warning-60: oklch(0.
|
|
86
|
-
--warning-70: oklch(0.
|
|
87
|
-
--warning-80: oklch(0.
|
|
88
|
-
--warning-90: oklch(0.
|
|
90
|
+
--warning-60: oklch(0.78 0.12 80);
|
|
91
|
+
--warning-70: oklch(0.68 0.1 80);
|
|
92
|
+
--warning-80: oklch(0.58 0.08 80);
|
|
93
|
+
--warning-90: oklch(0.48 0.06 80);
|
|
89
94
|
|
|
90
|
-
--danger-10: oklch(0.
|
|
91
|
-
--danger-20: oklch(0.836 0.
|
|
95
|
+
--danger-10: oklch(0.88 0.056 28);
|
|
96
|
+
--danger-20: oklch(0.836 0.08 28);
|
|
92
97
|
--danger-30: oklch(0.792 0.104 28);
|
|
93
98
|
--danger-40: oklch(0.748 0.125 28);
|
|
94
99
|
--danger-50: oklch(0.704 0.145 28);
|
|
95
|
-
--danger-60: oklch(0.
|
|
96
|
-
--danger-70: oklch(0.
|
|
97
|
-
--danger-80: oklch(0.
|
|
98
|
-
--danger-90: oklch(0.
|
|
100
|
+
--danger-60: oklch(0.66 0.16 28);
|
|
101
|
+
--danger-70: oklch(0.56 0.133 28);
|
|
102
|
+
--danger-80: oklch(0.46 0.107 28);
|
|
103
|
+
--danger-90: oklch(0.36 0.08 28);
|
|
99
104
|
|
|
100
105
|
/* Elevation */
|
|
101
106
|
--elevation-0: none;
|
|
102
|
-
--elevation-10:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--elevation-
|
|
106
|
-
0 4px 8px oklch(0.55 0 0 / 0.08),
|
|
107
|
-
0 2px 4px oklch(0.55 0 0 / 0.06);
|
|
108
|
-
--elevation-30:
|
|
109
|
-
0 10px 20px oklch(0.55 0 0 / 0.16),
|
|
110
|
-
0 3px 8px oklch(0.55 0 0 / 0.10);
|
|
111
|
-
--elevation-40:
|
|
112
|
-
0 18px 36px oklch(0.55 0 0 / 0.22),
|
|
113
|
-
0 6px 12px oklch(0.55 0 0 / 0.12);
|
|
107
|
+
--elevation-10: 0 1px 3px oklch(0.55 0 0 / 0.08), 0 1px 2px oklch(0.55 0 0 / 0.12);
|
|
108
|
+
--elevation-20: 0 4px 8px oklch(0.55 0 0 / 0.08), 0 2px 4px oklch(0.55 0 0 / 0.06);
|
|
109
|
+
--elevation-30: 0 10px 20px oklch(0.55 0 0 / 0.16), 0 3px 8px oklch(0.55 0 0 / 0.1);
|
|
110
|
+
--elevation-40: 0 18px 36px oklch(0.55 0 0 / 0.22), 0 6px 12px oklch(0.55 0 0 / 0.12);
|
|
114
111
|
}
|
|
115
112
|
|
|
116
113
|
.dark {
|
|
117
114
|
--elevation-0: none;
|
|
118
|
-
--elevation-10:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
--elevation-
|
|
122
|
-
0 4px 10px oklch(0.25 0 0 / 0.38),
|
|
123
|
-
0 1px 3px oklch(0.25 0 0 / 0.28);
|
|
124
|
-
--elevation-30:
|
|
125
|
-
0 12px 24px oklch(0.25 0 0 / 0.42),
|
|
126
|
-
0 4px 10px oklch(0.25 0 0 / 0.32);
|
|
127
|
-
--elevation-40:
|
|
128
|
-
0 20px 40px oklch(0.25 0 0 / 0.48),
|
|
129
|
-
0 6px 18px oklch(0.25 0 0 / 0.32);
|
|
115
|
+
--elevation-10: 0 1px 2px oklch(0.25 0 0 / 0.35), 0 0 0 1px oklch(0.22 0 0 / 0.35);
|
|
116
|
+
--elevation-20: 0 4px 10px oklch(0.25 0 0 / 0.38), 0 1px 3px oklch(0.25 0 0 / 0.28);
|
|
117
|
+
--elevation-30: 0 12px 24px oklch(0.25 0 0 / 0.42), 0 4px 10px oklch(0.25 0 0 / 0.32);
|
|
118
|
+
--elevation-40: 0 20px 40px oklch(0.25 0 0 / 0.48), 0 6px 18px oklch(0.25 0 0 / 0.32);
|
|
130
119
|
}
|
package/dist/css/semantic.css
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
|
|
1
|
+
:root {
|
|
2
|
+
color-scheme: light;
|
|
3
|
+
}
|
|
4
|
+
.dark {
|
|
5
|
+
color-scheme: dark;
|
|
6
|
+
}
|
|
3
7
|
|
|
4
8
|
:root {
|
|
5
9
|
/* Surfaces */
|
|
@@ -19,14 +23,16 @@
|
|
|
19
23
|
--divider: color-mix(in oklab, var(--border), transparent 55%);
|
|
20
24
|
|
|
21
25
|
/* Brand + accent roles */
|
|
22
|
-
--brand: var(--brand-
|
|
23
|
-
--brand-strong: var(--brand-
|
|
26
|
+
--brand: var(--brand-60);
|
|
27
|
+
--brand-strong: var(--brand-80);
|
|
28
|
+
--brand-contrast: var(--brand-90);
|
|
24
29
|
|
|
25
|
-
--accent: var(--accent-
|
|
26
|
-
--accent-strong: var(--accent-
|
|
30
|
+
--accent: var(--accent-50);
|
|
31
|
+
--accent-strong: var(--accent-70);
|
|
32
|
+
--accent-contrast: var(--accent-80);
|
|
27
33
|
|
|
28
34
|
/* UI roles */
|
|
29
|
-
--link: var(--accent);
|
|
35
|
+
--link: var(--accent-contrast);
|
|
30
36
|
--link-hover: color-mix(in oklab, var(--link), white 14%);
|
|
31
37
|
--focus: var(--brand);
|
|
32
38
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--focus), transparent 60%);
|
|
@@ -37,10 +43,10 @@
|
|
|
37
43
|
--warning: var(--warning-60);
|
|
38
44
|
--danger: var(--danger-60);
|
|
39
45
|
|
|
40
|
-
--info-
|
|
41
|
-
--success-
|
|
42
|
-
--warning-
|
|
43
|
-
--danger-
|
|
46
|
+
--info-contrast: var(--info-90);
|
|
47
|
+
--success-contrast: var(--success-80);
|
|
48
|
+
--warning-contrast: var(--warning-90);
|
|
49
|
+
--danger-contrast: var(--danger-80);
|
|
44
50
|
|
|
45
51
|
/* On-colors */
|
|
46
52
|
--on-info: oklch(0.16 0 0);
|
|
@@ -49,11 +55,11 @@
|
|
|
49
55
|
--on-danger: oklch(0.16 0 0);
|
|
50
56
|
|
|
51
57
|
/* Interaction tokens */
|
|
52
|
-
--surface-hover: color-mix(in oklab, var(--surface-1), black
|
|
53
|
-
--surface-active: color-mix(in oklab, var(--surface-1), black
|
|
58
|
+
--surface-hover: color-mix(in oklab, var(--surface-1), black 2%);
|
|
59
|
+
--surface-active: color-mix(in oklab, var(--surface-1), black 4%);
|
|
54
60
|
|
|
55
61
|
/* Overlay */
|
|
56
|
-
--overlay: oklch(0.16 0 0 / 0.
|
|
62
|
+
--overlay: oklch(0.16 0 0 / 0.4);
|
|
57
63
|
|
|
58
64
|
/* Elevation */
|
|
59
65
|
--shadow-none: var(--elevation-0);
|
|
@@ -88,13 +94,15 @@
|
|
|
88
94
|
--border: var(--ink-40);
|
|
89
95
|
--divider: color-mix(in oklab, var(--border), transparent 40%);
|
|
90
96
|
|
|
91
|
-
--brand: var(--brand-
|
|
92
|
-
--brand-strong: var(--brand-
|
|
97
|
+
--brand: var(--brand-80);
|
|
98
|
+
--brand-strong: var(--brand-100);
|
|
99
|
+
--brand-contrast: var(--brand-50);
|
|
93
100
|
|
|
94
|
-
--accent: var(--accent-
|
|
95
|
-
--accent-strong: var(--accent-
|
|
101
|
+
--accent: var(--accent-80);
|
|
102
|
+
--accent-strong: var(--accent-100);
|
|
103
|
+
--accent-contrast: var(--accent-50);
|
|
96
104
|
|
|
97
|
-
--link: var(--accent);
|
|
105
|
+
--link: var(--accent-contrast);
|
|
98
106
|
--link-hover: color-mix(in oklab, var(--link), white 18%);
|
|
99
107
|
--focus: var(--brand);
|
|
100
108
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--focus), transparent 60%);
|
|
@@ -104,10 +112,15 @@
|
|
|
104
112
|
--warning: var(--warning-60);
|
|
105
113
|
--danger: var(--danger-60);
|
|
106
114
|
|
|
115
|
+
--info-contrast: var(--info-50);
|
|
116
|
+
--success-contrast: var(--success-50);
|
|
117
|
+
--warning-contrast: var(--warning-50);
|
|
118
|
+
--danger-contrast: var(--danger-50);
|
|
119
|
+
|
|
107
120
|
--surface-hover: color-mix(in oklab, var(--surface-1), white 6%);
|
|
108
121
|
--surface-active: color-mix(in oklab, var(--surface-1), white 8%);
|
|
109
122
|
|
|
110
|
-
--overlay: oklch(0.
|
|
123
|
+
--overlay: oklch(0.0 0 0 / 0.55);
|
|
111
124
|
|
|
112
125
|
--on-info: oklch(0.12 0 0);
|
|
113
126
|
--on-success: oklch(0.12 0 0);
|
|
@@ -118,3 +131,12 @@
|
|
|
118
131
|
--disabled-bg: color-mix(in oklab, var(--surface-2), transparent 35%);
|
|
119
132
|
--disabled-border: color-mix(in oklab, var(--border), transparent 55%);
|
|
120
133
|
}
|
|
134
|
+
|
|
135
|
+
@media (prefers-reduced-motion: reduce) {
|
|
136
|
+
*,
|
|
137
|
+
*::before,
|
|
138
|
+
*::after {
|
|
139
|
+
transition-duration: 1ms;
|
|
140
|
+
animation-duration: 1ms;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.custom-scrollbar {
|
|
2
2
|
@apply scrollbar-thin;
|
|
3
|
-
|
|
3
|
+
/* biome-ignore lint/correctness/noUnknownFunction: Tailwind's theme() is resolved at build time. */
|
|
4
|
+
scrollbar-color: theme("colors.ink.70") transparent;
|
|
4
5
|
overscroll-behavior: contain;
|
|
5
6
|
scrollbar-gutter: stable both-edges;
|
|
6
7
|
}
|
|
@@ -17,6 +18,6 @@
|
|
|
17
18
|
@apply bg-transparent;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
|
-
.custom-scrollbar::-webkit-scrollbar-button{
|
|
21
|
-
display:none;
|
|
21
|
+
.custom-scrollbar::-webkit-scrollbar-button {
|
|
22
|
+
display: none;
|
|
22
23
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { ResultOk, ResultError, AsyncResult, Result } from '@hexdspace/util';
|
|
1
2
|
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
2
3
|
import { QueryClient, QueryKey } from '@tanstack/react-query';
|
|
3
|
-
import { ResultOk, ResultError, AsyncResult, Result } from '@hexdspace/util';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import React__default, { CSSProperties, Dispatch, ReactNode } from 'react';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -21,14 +21,14 @@ interface Notification {
|
|
|
21
21
|
action?: NotificationAction;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
interface SendNotification {
|
|
25
|
-
execute(channel: string, notification: Notification): Promise<void>;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
24
|
interface NotificationListener {
|
|
29
25
|
notify: (notification: Notification) => void;
|
|
30
26
|
}
|
|
31
27
|
|
|
28
|
+
interface SendNotification {
|
|
29
|
+
execute(channel: string, notification: Notification): Promise<void>;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
32
|
type UnsubscribeHandler = () => void;
|
|
33
33
|
interface Subscribe {
|
|
34
34
|
execute(channel: string, observer: NotificationListener): Promise<UnsubscribeHandler>;
|
|
@@ -60,6 +60,7 @@ type ToastTheme = {
|
|
|
60
60
|
progressWarning?: string;
|
|
61
61
|
progressError?: string;
|
|
62
62
|
width?: string;
|
|
63
|
+
toastRadius?: string;
|
|
63
64
|
contentPadding?: string;
|
|
64
65
|
bodyColumnGap?: string;
|
|
65
66
|
bodyRowGap?: string;
|
|
@@ -79,6 +80,7 @@ type ToastifyCSSVars = CSSProperties & {
|
|
|
79
80
|
'--toastify-color-progress-warning'?: string;
|
|
80
81
|
'--toastify-color-progress-error'?: string;
|
|
81
82
|
'--toastify-toast-width'?: string;
|
|
83
|
+
'--toastify-toast-bd-radius'?: string;
|
|
82
84
|
};
|
|
83
85
|
type ToastActionTheme = {
|
|
84
86
|
padding: string;
|
|
@@ -108,6 +110,7 @@ type ResolvedToastTheme = {
|
|
|
108
110
|
progressWarning: string;
|
|
109
111
|
progressError: string;
|
|
110
112
|
width: string;
|
|
113
|
+
toastRadius: string;
|
|
111
114
|
contentPadding: string;
|
|
112
115
|
bodyColumnGap: string;
|
|
113
116
|
bodyRowGap: string;
|
|
@@ -160,7 +163,7 @@ type OptimisticSnapshot = {
|
|
|
160
163
|
rollback: () => void | Promise<void>;
|
|
161
164
|
};
|
|
162
165
|
type MutationFn<Args, Res> = (args: Args) => Promise<UIResult<Res>>;
|
|
163
|
-
type OptimisticUpdateFn<Args> = (args: Args, ctx: InstructionContext) => Promise<OptimisticSnapshot |
|
|
166
|
+
type OptimisticUpdateFn<Args> = (args: Args, ctx: InstructionContext) => Promise<OptimisticSnapshot | undefined> | OptimisticSnapshot | undefined;
|
|
164
167
|
type OnSuccessFn<Res> = (data: Res) => void;
|
|
165
168
|
type ResponsiveMutation<Args, Res> = {
|
|
166
169
|
mutationFn: MutationFn<Args, Res>;
|
|
@@ -248,6 +251,10 @@ interface User {
|
|
|
248
251
|
email: string;
|
|
249
252
|
}
|
|
250
253
|
|
|
254
|
+
interface GetAuthenticatedUser {
|
|
255
|
+
execute(): AsyncResult<Error, User | null>;
|
|
256
|
+
}
|
|
257
|
+
|
|
251
258
|
interface LoginUser {
|
|
252
259
|
execute(email: string, password: string): AsyncResult<Error, User>;
|
|
253
260
|
}
|
|
@@ -260,10 +267,6 @@ interface RegisterUser {
|
|
|
260
267
|
execute(email: string, password: string, attributes?: Record<string, string>): AsyncResult<Error, GenericResponse>;
|
|
261
268
|
}
|
|
262
269
|
|
|
263
|
-
interface GetAuthenticatedUser {
|
|
264
|
-
execute(): AsyncResult<Error, User | null>;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
270
|
interface AuthProvider$1 {
|
|
268
271
|
getAuthenticatedUser(): AsyncResult<Error, User | null>;
|
|
269
272
|
login(email: string, password: string): AsyncResult<Error, User>;
|
|
@@ -352,17 +355,6 @@ type AuthControllerProviderProps = {
|
|
|
352
355
|
};
|
|
353
356
|
declare function AuthControllerProvider({ children, controller }: AuthControllerProviderProps): react_jsx_runtime.JSX.Element;
|
|
354
357
|
|
|
355
|
-
interface InputProps {
|
|
356
|
-
id: string;
|
|
357
|
-
label: string;
|
|
358
|
-
type: string;
|
|
359
|
-
value: string;
|
|
360
|
-
onChange: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
|
|
361
|
-
placeholder: string;
|
|
362
|
-
className?: string;
|
|
363
|
-
}
|
|
364
|
-
declare const AuthFormInputField: React__default.FC<InputProps>;
|
|
365
|
-
|
|
366
358
|
type RequireAuthProps = {
|
|
367
359
|
guarded?: ReactNode;
|
|
368
360
|
loadingPlaceholder?: ReactNode;
|
|
@@ -377,8 +369,8 @@ type RedirectIfAuthedProps = {
|
|
|
377
369
|
errorPlaceholder?: ReactNode;
|
|
378
370
|
authenticatedPlaceholder?: ReactNode;
|
|
379
371
|
};
|
|
380
|
-
declare function RequireAuth({ guarded, loadingPlaceholder, errorPlaceholder, unauthenticatedRedirectTo, unauthenticatedPlaceholder }: RequireAuthProps): react_jsx_runtime.JSX.Element;
|
|
381
|
-
declare function RedirectIfAuthed({ redirectTo, loadingPlaceholder, nonAuthedPlaceholder, errorPlaceholder, authenticatedPlaceholder }: RedirectIfAuthedProps): react_jsx_runtime.JSX.Element;
|
|
372
|
+
declare function RequireAuth({ guarded, loadingPlaceholder, errorPlaceholder, unauthenticatedRedirectTo, unauthenticatedPlaceholder, }: RequireAuthProps): react_jsx_runtime.JSX.Element;
|
|
373
|
+
declare function RedirectIfAuthed({ redirectTo, loadingPlaceholder, nonAuthedPlaceholder, errorPlaceholder, authenticatedPlaceholder, }: RedirectIfAuthedProps): react_jsx_runtime.JSX.Element;
|
|
382
374
|
|
|
383
375
|
type AuthFixtures = {
|
|
384
376
|
meError?: HttpError;
|
|
@@ -405,13 +397,75 @@ declare const buttonVariants: (props?: ({
|
|
|
405
397
|
chrome?: "push" | "flat" | "inset" | "soft" | "glass" | "glow" | "hairline" | null | undefined;
|
|
406
398
|
fullWidth?: boolean | null | undefined;
|
|
407
399
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
408
|
-
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
400
|
+
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'>, VariantProps<typeof buttonVariants> {
|
|
409
401
|
asChild?: boolean;
|
|
410
402
|
children?: React.ReactNode;
|
|
411
403
|
loading?: boolean;
|
|
412
404
|
leftIcon?: React.ReactNode;
|
|
413
405
|
rightIcon?: React.ReactNode;
|
|
406
|
+
reserveLeftIcon?: boolean;
|
|
407
|
+
reserveRightIcon?: boolean;
|
|
408
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
414
409
|
}
|
|
415
410
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
416
411
|
|
|
417
|
-
|
|
412
|
+
type ControlLikeProps = {
|
|
413
|
+
id?: string;
|
|
414
|
+
disabled?: boolean;
|
|
415
|
+
required?: boolean;
|
|
416
|
+
invalid?: boolean;
|
|
417
|
+
'aria-describedby'?: string;
|
|
418
|
+
};
|
|
419
|
+
interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
420
|
+
label?: React.ReactNode;
|
|
421
|
+
hint?: React.ReactNode;
|
|
422
|
+
error?: React.ReactNode;
|
|
423
|
+
required?: boolean;
|
|
424
|
+
disabled?: boolean;
|
|
425
|
+
id?: string;
|
|
426
|
+
children: React.ReactElement<ControlLikeProps>;
|
|
427
|
+
}
|
|
428
|
+
declare function Field({ label, hint, error, required, disabled, id, children, className, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
429
|
+
|
|
430
|
+
declare const controlShellVariants: (props?: ({
|
|
431
|
+
variant?: "outline" | "ghost" | "surface" | null | undefined;
|
|
432
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
433
|
+
fullWidth?: boolean | null | undefined;
|
|
434
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
435
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof controlShellVariants> {
|
|
436
|
+
invalid?: boolean;
|
|
437
|
+
leftSlot?: React.ReactNode;
|
|
438
|
+
rightSlot?: React.ReactNode;
|
|
439
|
+
reserveLeftSlot?: boolean;
|
|
440
|
+
reserveRightSlot?: boolean;
|
|
441
|
+
inputClassName?: string;
|
|
442
|
+
}
|
|
443
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
444
|
+
|
|
445
|
+
declare const skeletonVariants: (props?: ({
|
|
446
|
+
variant?: "outline" | "surface" | null | undefined;
|
|
447
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
448
|
+
radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
|
|
449
|
+
fullWidth?: boolean | null | undefined;
|
|
450
|
+
animation?: "none" | "pulse" | "shimmer" | null | undefined;
|
|
451
|
+
preset?: "title" | "none" | "button" | "avatar" | "card" | null | undefined;
|
|
452
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
453
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
454
|
+
animate?: boolean;
|
|
455
|
+
}
|
|
456
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
457
|
+
|
|
458
|
+
declare const textareaShellVariants: (props?: ({
|
|
459
|
+
variant?: "outline" | "ghost" | "surface" | null | undefined;
|
|
460
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
461
|
+
fullWidth?: boolean | null | undefined;
|
|
462
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
463
|
+
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaShellVariants> {
|
|
464
|
+
invalid?: boolean;
|
|
465
|
+
textareaClassName?: string;
|
|
466
|
+
autoResize?: boolean;
|
|
467
|
+
maxHeightPx?: number;
|
|
468
|
+
}
|
|
469
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
470
|
+
|
|
471
|
+
export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type ErrorResponse, Field, type FieldProps, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, Input, type InputProps, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, Skeleton, type SkeletonProps, Textarea, type TextareaProps, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, httpClient as fetchHttpClient, notifierController, resolveToastTheme, ui, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useResponsiveMutation };
|