@scaleflex/ui-tw 0.0.22 → 0.0.24
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/input/input.component.js +1 -1
- package/package.json +3 -2
- package/styles/ripple.css +12 -0
- package/styles/scrollbar.css +27 -0
- package/styles/theme-map.css +52 -0
- package/styles/theme.css +9 -0
- package/{theme.css → styles/variables.css} +4 -68
- package/switch/switch.component.js +1 -1
- package/textarea/textarea.component.js +1 -1
package/input/input.component.js
CHANGED
|
@@ -30,7 +30,7 @@ function Input(_ref) {
|
|
|
30
30
|
"data-slot": "input",
|
|
31
31
|
disabled: disabled,
|
|
32
32
|
readOnly: readOnly,
|
|
33
|
-
className: cn('border-input text-foreground bg-background flex w-full min-w-0 rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', 'group-data-[highlight=true]:border-warning group-data-[highlight=true]:focus-visible:ring-warning/20', inputVariants({
|
|
33
|
+
className: cn('border-input text-foreground bg-background flex w-full min-w-0 rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'focus-visible:border-secondary-foreground/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:border-secondary-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', inputVariants({
|
|
34
34
|
size: size,
|
|
35
35
|
className: className
|
|
36
36
|
}))
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scaleflex/ui-tw",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"author": "scaleflex",
|
|
5
5
|
"repository": "github:scaleflex/ui",
|
|
6
6
|
"homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@radix-ui/react-slot": "^1.1.2",
|
|
19
19
|
"@radix-ui/react-switch": "^1.0.1",
|
|
20
20
|
"@radix-ui/react-tooltip": "^1.2.6",
|
|
21
|
-
"@scaleflex/icons-tw": "^0.0.
|
|
21
|
+
"@scaleflex/icons-tw": "^0.0.24",
|
|
22
22
|
"@types/lodash.merge": "^4.6.9",
|
|
23
23
|
"class-variance-authority": "^0.7.1",
|
|
24
24
|
"lodash.merge": "^4.6.2",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/prop-types": "^15.7.3",
|
|
32
32
|
"postcss": "^8.5.3",
|
|
33
|
+
"tailwind-scrollbar": "^4.0.2",
|
|
33
34
|
"typescript": "^5.2.2"
|
|
34
35
|
},
|
|
35
36
|
"peerDependencies": {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* Firefox scrollbar colors */
|
|
2
|
+
* {
|
|
3
|
+
scrollbar-width: thin;
|
|
4
|
+
scrollbar-color: #ccd6de transparent;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* WebKit scrollbar styling */
|
|
8
|
+
::-webkit-scrollbar {
|
|
9
|
+
width: 12px;
|
|
10
|
+
height: 12px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
::-webkit-scrollbar-track {
|
|
14
|
+
background: transparent;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
::-webkit-scrollbar-thumb {
|
|
18
|
+
background-color: #ccd6de;
|
|
19
|
+
background-clip: content-box;
|
|
20
|
+
border: 4px solid transparent;
|
|
21
|
+
border-radius: 999px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Optional: hide corner square */
|
|
25
|
+
::-webkit-scrollbar-corner {
|
|
26
|
+
background: transparent;
|
|
27
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@theme inline {
|
|
2
|
+
--color-background: var(--background);
|
|
3
|
+
--color-foreground: var(--foreground);
|
|
4
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
5
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
6
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
7
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
8
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
9
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
10
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
11
|
+
--color-sidebar: var(--sidebar);
|
|
12
|
+
--color-chart-5: var(--chart-5);
|
|
13
|
+
--color-chart-4: var(--chart-4);
|
|
14
|
+
--color-chart-3: var(--chart-3);
|
|
15
|
+
--color-chart-2: var(--chart-2);
|
|
16
|
+
--color-chart-1: var(--chart-1);
|
|
17
|
+
--color-ring: var(--ring);
|
|
18
|
+
--color-input: var(--input);
|
|
19
|
+
--color-border: var(--border);
|
|
20
|
+
--color-shadow: var(--shadow);
|
|
21
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
22
|
+
--color-accent: var(--accent);
|
|
23
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
24
|
+
--color-muted: var(--muted);
|
|
25
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
26
|
+
--color-secondary: var(--secondary);
|
|
27
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
28
|
+
--color-primary: var(--primary);
|
|
29
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
30
|
+
--color-popover: var(--popover);
|
|
31
|
+
--color-card-foreground: var(--card-foreground);
|
|
32
|
+
--color-card: var(--card);
|
|
33
|
+
|
|
34
|
+
--color-success: var(--success);
|
|
35
|
+
--color-success-foreground: var(--success-foreground);
|
|
36
|
+
--color-info: var(--info);
|
|
37
|
+
--color-info-foreground: var(--info-foreground);
|
|
38
|
+
--color-warning: var(--warning);
|
|
39
|
+
--color-warning-10: var(--warning-10);
|
|
40
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
41
|
+
--color-destructive: var(--destructive);
|
|
42
|
+
--color-destructive-10: var(--destructive-10);
|
|
43
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
44
|
+
|
|
45
|
+
--color-panel: var(--panel);
|
|
46
|
+
--color-panel-foreground: var(--panel-foreground);
|
|
47
|
+
--color-panel-primary: var(--panel-primary);
|
|
48
|
+
--color-panel-primary-foreground: var(--panel-primary-foreground);
|
|
49
|
+
--color-panel-border: var(--panel-border);
|
|
50
|
+
--color-panel-input: var(--panel-input);
|
|
51
|
+
--color-panel-ring: var(--panel-ring);
|
|
52
|
+
}
|
package/styles/theme.css
ADDED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
@import "tw-animate-css";
|
|
3
|
-
|
|
4
1
|
:root {
|
|
5
2
|
--background: oklch(1 0 0);
|
|
6
3
|
--foreground: oklch(0.37 0.022 248.413);
|
|
@@ -52,6 +49,7 @@
|
|
|
52
49
|
--panel-foreground: oklch(1 0 0);
|
|
53
50
|
--panel-primary: oklch(0.578 0.198 268.129);
|
|
54
51
|
--panel-primary-foreground: oklch(1 0 0);
|
|
52
|
+
--panel-border: oklch(0.9103 0.0177 246.73);
|
|
55
53
|
--panel-input: oklch(1 0 0);
|
|
56
54
|
--panel-ring: oklch(0.578 0.198 268.129 / 0.7);
|
|
57
55
|
}
|
|
@@ -71,6 +69,7 @@
|
|
|
71
69
|
--muted-foreground: oklch(0.75 0.01 249.82);
|
|
72
70
|
--accent: oklch(0.6 0.2 268.129 / 0.07);
|
|
73
71
|
--accent-foreground: oklch(0.95 0.01 264.55);
|
|
72
|
+
|
|
74
73
|
--success: oklch(0.6 0.2 154.83);
|
|
75
74
|
--success-foreground: oklch(0.2 0.1 165.45);
|
|
76
75
|
--destructive: oklch(0.55 0.2 27.325);
|
|
@@ -81,6 +80,7 @@
|
|
|
81
80
|
--warning: oklch(0.7 0.15 69.419);
|
|
82
81
|
--warning-foreground: oklch(0.756 0.114 77.312);
|
|
83
82
|
--warning-10: oklch(0.3 0.01 86.868);
|
|
83
|
+
|
|
84
84
|
--border: oklch(0.3 0.01 247.92);
|
|
85
85
|
--input: oklch(0.4 0.02 248.73);
|
|
86
86
|
--ring: oklch(0.6 0.2 268.129 / 0.7);
|
|
@@ -105,71 +105,7 @@
|
|
|
105
105
|
--panel-foreground: oklch(0.98 0.01 264.55);
|
|
106
106
|
--panel-primary: oklch(0.35 0.18 278.91);
|
|
107
107
|
--panel-primary-foreground: oklch(1 0 0);
|
|
108
|
+
--panel-border: oklch(0.2 0.01 268.16);
|
|
108
109
|
--panel-input: oklch(0.2 0.01 264.55);
|
|
109
110
|
--panel-ring: oklch(0.6 0.2 280.88);
|
|
110
111
|
}
|
|
111
|
-
|
|
112
|
-
@theme inline {
|
|
113
|
-
--color-background: var(--background);
|
|
114
|
-
--color-foreground: var(--foreground);
|
|
115
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
116
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
117
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
118
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
119
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
120
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
121
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
122
|
-
--color-sidebar: var(--sidebar);
|
|
123
|
-
--color-chart-5: var(--chart-5);
|
|
124
|
-
--color-chart-4: var(--chart-4);
|
|
125
|
-
--color-chart-3: var(--chart-3);
|
|
126
|
-
--color-chart-2: var(--chart-2);
|
|
127
|
-
--color-chart-1: var(--chart-1);
|
|
128
|
-
--color-ring: var(--ring);
|
|
129
|
-
--color-input: var(--input);
|
|
130
|
-
--color-border: var(--border);
|
|
131
|
-
--color-shadow: var(--shadow);
|
|
132
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
133
|
-
--color-accent: var(--accent);
|
|
134
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
135
|
-
--color-muted: var(--muted);
|
|
136
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
137
|
-
--color-secondary: var(--secondary);
|
|
138
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
139
|
-
--color-primary: var(--primary);
|
|
140
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
141
|
-
--color-popover: var(--popover);
|
|
142
|
-
--color-card-foreground: var(--card-foreground);
|
|
143
|
-
--color-card: var(--card);
|
|
144
|
-
|
|
145
|
-
--color-success: var(--success);
|
|
146
|
-
--color-success-foreground: var(--success-foreground);
|
|
147
|
-
--color-info: var(--info);
|
|
148
|
-
--color-info-foreground: var(--info-foreground);
|
|
149
|
-
--color-warning: var(--warning);
|
|
150
|
-
--color-warning-10: var(--warning-10);
|
|
151
|
-
--color-warning-foreground: var(--warning-foreground);
|
|
152
|
-
--color-destructive: var(--destructive);
|
|
153
|
-
--color-destructive-10: var(--destructive-10);
|
|
154
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
155
|
-
|
|
156
|
-
--color-panel: var(--panel);
|
|
157
|
-
--color-panel-foreground: var(--panel-foreground);
|
|
158
|
-
--color-panel-primary: var(--panel-primary);
|
|
159
|
-
--color-panel-primary-foreground: var(--panel-primary-foreground);
|
|
160
|
-
--color-panel-input: var(--panel-input);
|
|
161
|
-
--color-panel-ring: var(--panel-ring);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
@layer utilities {
|
|
165
|
-
@keyframes ripple {
|
|
166
|
-
0% {
|
|
167
|
-
transform: scale(0.1);
|
|
168
|
-
opacity: 0.8;
|
|
169
|
-
}
|
|
170
|
-
100% {
|
|
171
|
-
transform: scale(2);
|
|
172
|
-
opacity: 0;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
@@ -30,7 +30,7 @@ function Switch(_ref) {
|
|
|
30
30
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
31
31
|
return /*#__PURE__*/React.createElement(SwitchPrimitive.Root, _extends({
|
|
32
32
|
"data-slot": "switch",
|
|
33
|
-
className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', switchVariants({
|
|
33
|
+
className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', switchVariants({
|
|
34
34
|
size: size
|
|
35
35
|
}), className)
|
|
36
36
|
}, props), /*#__PURE__*/React.createElement(SwitchPrimitive.Thumb, {
|
|
@@ -27,7 +27,7 @@ function Textarea(_ref) {
|
|
|
27
27
|
"data-slot": "textarea",
|
|
28
28
|
disabled: disabled,
|
|
29
29
|
readOnly: readOnly,
|
|
30
|
-
className: cn('field-sizing-content', 'border-input text-foreground bg-background flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', 'group-data-[highlight=true]:border-warning group-data-[highlight=true]:focus-visible:ring-warning/20', textareaVariants({
|
|
30
|
+
className: cn('field-sizing-content resize-y', 'border-input text-foreground bg-background flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'focus-visible:border-secondary-foreground/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:border-secondary-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', textareaVariants({
|
|
31
31
|
size: size,
|
|
32
32
|
className: className
|
|
33
33
|
}))
|