@devup-ui/components 0.1.22 → 0.1.23
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/README.md +43 -34
- package/dist/components/Button/index.cjs +1 -1
- package/dist/components/Button/index.js +62 -62
- package/dist/components/Checkbox/index.cjs +1 -1
- package/dist/components/Checkbox/index.js +45 -45
- package/dist/components/Input/index.cjs +1 -1
- package/dist/components/Input/index.js +63 -63
- package/dist/components/Radio/index.cjs +1 -1
- package/dist/components/Radio/index.js +85 -85
- package/dist/components/RadioGroup/index.cjs +1 -1
- package/dist/components/RadioGroup/index.js +48 -48
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.js +129 -129
- package/dist/components/Toggle/index.cjs +1 -1
- package/dist/components/Toggle/index.js +52 -52
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
<h3 align="center">
|
|
7
6
|
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
|
|
8
7
|
</h3>
|
|
@@ -23,8 +22,8 @@
|
|
|
23
22
|
<a href="https://discord.gg/8zjcGc7cWh">
|
|
24
23
|
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
|
|
25
24
|
</a>
|
|
26
|
-
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
|
|
27
|
-
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
|
|
25
|
+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
|
|
26
|
+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
|
|
28
27
|
</a>
|
|
29
28
|
</div>
|
|
30
29
|
|
|
@@ -76,17 +75,17 @@ npm install @devup-ui/webpack-plugin
|
|
|
76
75
|
|
|
77
76
|
Next.js Build Time and Build Size (github action - ubuntu-latest)
|
|
78
77
|
|
|
79
|
-
| Library
|
|
80
|
-
|
|
81
|
-
| tailwindcss
|
|
82
|
-
| styleX
|
|
83
|
-
| vanilla-extract
|
|
84
|
-
| kuma-ui
|
|
85
|
-
| panda-css
|
|
86
|
-
| chakra-ui
|
|
87
|
-
| mui
|
|
88
|
-
| devup-ui(per-file css)
|
|
89
|
-
| devup-ui(single css)
|
|
78
|
+
| Library | Version | Build Time | Build Size |
|
|
79
|
+
| ---------------------- | ------- | ---------- | ----------------- |
|
|
80
|
+
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
|
|
81
|
+
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
|
|
82
|
+
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
|
|
83
|
+
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
|
|
84
|
+
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
|
|
85
|
+
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
|
|
86
|
+
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
|
|
87
|
+
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
|
|
88
|
+
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
|
|
90
89
|
|
|
91
90
|
## How it works
|
|
92
91
|
|
|
@@ -94,30 +93,40 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
|
|
|
94
93
|
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
|
|
95
94
|
We develop a preprocessor that considers all grammatical cases.
|
|
96
95
|
|
|
97
|
-
```
|
|
98
|
-
const before = <Box bg=
|
|
96
|
+
```tsx
|
|
97
|
+
const before = <Box bg="red" />
|
|
99
98
|
|
|
100
|
-
const after = <div className="d0"/>
|
|
99
|
+
const after = <div className="d0" />
|
|
101
100
|
```
|
|
102
101
|
|
|
103
102
|
Variables are fully supported.
|
|
104
103
|
|
|
105
|
-
```
|
|
106
|
-
const before = <Box bg={colorVariable}/>
|
|
107
|
-
|
|
108
|
-
const after =
|
|
109
|
-
|
|
110
|
-
|
|
104
|
+
```tsx
|
|
105
|
+
const before = <Box bg={colorVariable} />
|
|
106
|
+
|
|
107
|
+
const after = (
|
|
108
|
+
<div
|
|
109
|
+
className="d0"
|
|
110
|
+
style={{
|
|
111
|
+
'--d0': colorVariable,
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
)
|
|
111
115
|
```
|
|
112
116
|
|
|
113
117
|
Various expressions and responsiveness are also fully supported.
|
|
114
118
|
|
|
115
|
-
```
|
|
116
|
-
const before = <Box bg={[
|
|
117
|
-
|
|
118
|
-
const after =
|
|
119
|
-
|
|
120
|
-
}}
|
|
119
|
+
```tsx
|
|
120
|
+
const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
|
|
121
|
+
|
|
122
|
+
const after = (
|
|
123
|
+
<div
|
|
124
|
+
className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
|
|
125
|
+
style={{
|
|
126
|
+
'--d2': variable,
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
)
|
|
121
130
|
```
|
|
122
131
|
|
|
123
132
|
Support Theme with Typing
|
|
@@ -139,19 +148,19 @@ Support Theme with Typing
|
|
|
139
148
|
}
|
|
140
149
|
```
|
|
141
150
|
|
|
142
|
-
```
|
|
151
|
+
```tsx
|
|
143
152
|
// Type Safe
|
|
144
|
-
<Text color="$text"/>
|
|
153
|
+
<Text color="$text" />
|
|
145
154
|
```
|
|
146
155
|
|
|
147
156
|
Support Responsive And Pseudo Selector
|
|
148
157
|
|
|
149
158
|
You can use responsive and pseudo selector.
|
|
150
159
|
|
|
151
|
-
```
|
|
160
|
+
```tsx
|
|
152
161
|
// Responsive with Selector
|
|
153
|
-
const box = <Box _hover={{bg: [
|
|
162
|
+
const box = <Box _hover={{ bg: ['red', 'blue'] }} />
|
|
154
163
|
|
|
155
164
|
// Same
|
|
156
|
-
const box = <Box _hover={[{bg:
|
|
165
|
+
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
|
|
157
166
|
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("@devup-ui/react");function b({variant:r="default",type:u="button",colors:e,danger:o=!1,children:s,size:i="md",className:m,icon:t,ellipsis:n=!1,typography:x,disabled:p,...d}){return a.jsx(l.Button,{_active:{primary:{bg:"color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)"},default:{bg:{true:"var(--error, #D52B2E)",false:"color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)"}[o.toString()],border:{true:"1px solid var(--error, #D52B2E)",false:"1px solid var(--primary, #8163E1)"}[o.toString()],color:"var(--text, #272727)"}}[r],_disabled:{primary:{color:"#D6D7DE",bgColor:"#F0F0F3",cursor:"not-allowed"},default:{color:"#D6D7DE",bgColor:"#F0F0F3",cursor:"not-allowed",borderColor:"var(--border, #E4E4E4)"}}[r],_focusVisible:{outline:"2px solid",outlineColor:{primary:"var(--primaryFocus, #9385D3)",default:{true:"var(--error, #FF5B5E)",false:"var(--primaryFocus, #9385D3)"}[o.toString()]}[r]},_hover:{primary:{bg:"color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)"},default:{borderColor:{true:"var(--error, #D52B2E)",false:"var(--primary, #8163E1)"}[o.toString()],bg:!o&&"color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)"}}[r],_themeDark:{_active:{primary:{bg:"color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);"},default:{bg:{true:"var(--error, #FF5B5E)",false:"var(--primary, #8163E1)"}[o.toString()],color:"var(--text, #F6F6F6)"}}[r],_disabled:{primary:{color:"#373737",bgColor:"#47474A",borderColor:"transparent"},default:{color:"#373737",bgColor:"#47474A",borderColor:"transparent"}}[r],_hover:{primary:{bg:"color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);",outlineColor:"var(--primary, #674DC7)"},default:{borderColor:{true:"var(--error, #FF5B5E)",false:"var(--primary, #8163E1)"}[o.toString()],bg:!o&&"color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)"}}[r],_focusVisible:{outlineColor:{primary:"var(--primaryFocus, #927CE4)",default:{true:"var(--error, #D52B2E)",false:"var(--primaryFocus, #927CE4)"}[o.toString()]}[r]},bg:{primary:"var(--primary, #8163E1)",default:"var(--inputBackground, #2E2E2E)"}[r]},"aria-disabled":p,"aria-label":"button",bg:{primary:"var(--primary, #8163E1)",default:"var(--inputBackground, #FFF)"}[r],border:{primary:"none",default:"1px solid var(--border, #E4E4E4)"}[r],borderRadius:{primary:"8px",default:"10px"}[r],boxSizing:"border-box",className:m,color:{primary:"#FFF",default:{true:"var(--error, #D52B2E)",false:"var(--text, #272727)"}[o.toString()]}[r],cursor:"pointer",disabled:p,fontSize:{default:["14px",null,null,null,"15px"],primary:["15px",null,null,null,"16px"]}[r],fontWeight:700,letterSpacing:{default:["-0.02em",null,null,null,"-0.03em"],primary:["0px",null,null,null,"-0.01em"]}[r],outlineOffset:"2px",pos:"relative",px:{false:{sm:"12px",md:"16px",lg:"20px"}[i],true:{sm:"24px",md:"28px",lg:"32px"}[i]}[(!!t).toString()],py:{sm:"8px",md:"10px",lg:"12px"}[i],styleOrder:1,styleVars:{primary:e?.primary,error:e?.error,text:e?.text,border:e?.border,inputBackground:e?.inputBackground,primaryFocus:e?.primaryFocus},transition:".25s",type:u,typography:x,...d,children:a.jsxs(l.Box,{maxW:"100%",mx:"auto",pos:"relative",w:"fit-content",children:[t&&a.jsx(l.Center,{boxSize:"24px",left:"4px",pos:"absolute",role:"presentation",selectors:{"&>svg":{color:"inherit"}},top:"50%",transform:"translate(-100%, -50%)",children:t}),a.jsx(l.Box,{className:n?l.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}):void 0,lineHeight:"1.2",minH:"1.2em",transform:!!t&&"translateX(8px)",children:s})]})})}exports.Button=b;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Button as
|
|
3
|
-
function
|
|
4
|
-
variant:
|
|
1
|
+
import { jsx as a, jsxs as b } from "react/jsx-runtime";
|
|
2
|
+
import { Button as f, Box as p, Center as y, css as F } from "@devup-ui/react";
|
|
3
|
+
function E({
|
|
4
|
+
variant: r = "default",
|
|
5
5
|
type: u = "button",
|
|
6
|
-
colors:
|
|
7
|
-
danger:
|
|
6
|
+
colors: e,
|
|
7
|
+
danger: o = !1,
|
|
8
8
|
children: m,
|
|
9
|
-
size:
|
|
10
|
-
className:
|
|
11
|
-
icon:
|
|
12
|
-
ellipsis:
|
|
13
|
-
typography:
|
|
14
|
-
disabled:
|
|
15
|
-
...
|
|
9
|
+
size: t = "md",
|
|
10
|
+
className: s,
|
|
11
|
+
icon: l,
|
|
12
|
+
ellipsis: n = !1,
|
|
13
|
+
typography: d,
|
|
14
|
+
disabled: i,
|
|
15
|
+
...x
|
|
16
16
|
}) {
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
|
|
17
|
+
return /* @__PURE__ */ a(
|
|
18
|
+
f,
|
|
19
19
|
{
|
|
20
20
|
_active: {
|
|
21
21
|
primary: {
|
|
@@ -25,14 +25,14 @@ function v({
|
|
|
25
25
|
bg: {
|
|
26
26
|
true: "var(--error, #D52B2E)",
|
|
27
27
|
false: "color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)"
|
|
28
|
-
}[
|
|
28
|
+
}[o.toString()],
|
|
29
29
|
border: {
|
|
30
30
|
true: "1px solid var(--error, #D52B2E)",
|
|
31
31
|
false: "1px solid var(--primary, #8163E1)"
|
|
32
|
-
}[
|
|
32
|
+
}[o.toString()],
|
|
33
33
|
color: "var(--text, #272727)"
|
|
34
34
|
}
|
|
35
|
-
}[
|
|
35
|
+
}[r],
|
|
36
36
|
_disabled: {
|
|
37
37
|
primary: {
|
|
38
38
|
color: "#D6D7DE",
|
|
@@ -45,7 +45,7 @@ function v({
|
|
|
45
45
|
cursor: "not-allowed",
|
|
46
46
|
borderColor: "var(--border, #E4E4E4)"
|
|
47
47
|
}
|
|
48
|
-
}[
|
|
48
|
+
}[r],
|
|
49
49
|
_focusVisible: {
|
|
50
50
|
outline: "2px solid",
|
|
51
51
|
outlineColor: {
|
|
@@ -53,8 +53,8 @@ function v({
|
|
|
53
53
|
default: {
|
|
54
54
|
true: "var(--error, #FF5B5E)",
|
|
55
55
|
false: "var(--primaryFocus, #9385D3)"
|
|
56
|
-
}[
|
|
57
|
-
}[
|
|
56
|
+
}[o.toString()]
|
|
57
|
+
}[r]
|
|
58
58
|
},
|
|
59
59
|
_hover: {
|
|
60
60
|
primary: {
|
|
@@ -64,10 +64,10 @@ function v({
|
|
|
64
64
|
borderColor: {
|
|
65
65
|
true: "var(--error, #D52B2E)",
|
|
66
66
|
false: "var(--primary, #8163E1)"
|
|
67
|
-
}[
|
|
68
|
-
bg: !
|
|
67
|
+
}[o.toString()],
|
|
68
|
+
bg: !o && "color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)"
|
|
69
69
|
}
|
|
70
|
-
}[
|
|
70
|
+
}[r],
|
|
71
71
|
_themeDark: {
|
|
72
72
|
_active: {
|
|
73
73
|
primary: {
|
|
@@ -77,10 +77,10 @@ function v({
|
|
|
77
77
|
bg: {
|
|
78
78
|
true: "var(--error, #FF5B5E)",
|
|
79
79
|
false: "var(--primary, #8163E1)"
|
|
80
|
-
}[
|
|
80
|
+
}[o.toString()],
|
|
81
81
|
color: "var(--text, #F6F6F6)"
|
|
82
82
|
}
|
|
83
|
-
}[
|
|
83
|
+
}[r],
|
|
84
84
|
_disabled: {
|
|
85
85
|
primary: {
|
|
86
86
|
color: "#373737",
|
|
@@ -92,7 +92,7 @@ function v({
|
|
|
92
92
|
bgColor: "#47474A",
|
|
93
93
|
borderColor: "transparent"
|
|
94
94
|
}
|
|
95
|
-
}[
|
|
95
|
+
}[r],
|
|
96
96
|
_hover: {
|
|
97
97
|
primary: {
|
|
98
98
|
bg: "color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);",
|
|
@@ -102,80 +102,80 @@ function v({
|
|
|
102
102
|
borderColor: {
|
|
103
103
|
true: "var(--error, #FF5B5E)",
|
|
104
104
|
false: "var(--primary, #8163E1)"
|
|
105
|
-
}[
|
|
106
|
-
bg: !
|
|
105
|
+
}[o.toString()],
|
|
106
|
+
bg: !o && "color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)"
|
|
107
107
|
}
|
|
108
|
-
}[
|
|
108
|
+
}[r],
|
|
109
109
|
_focusVisible: {
|
|
110
110
|
outlineColor: {
|
|
111
111
|
primary: "var(--primaryFocus, #927CE4)",
|
|
112
112
|
default: {
|
|
113
113
|
true: "var(--error, #D52B2E)",
|
|
114
114
|
false: "var(--primaryFocus, #927CE4)"
|
|
115
|
-
}[
|
|
116
|
-
}[
|
|
115
|
+
}[o.toString()]
|
|
116
|
+
}[r]
|
|
117
117
|
},
|
|
118
118
|
bg: {
|
|
119
119
|
primary: "var(--primary, #8163E1)",
|
|
120
120
|
default: "var(--inputBackground, #2E2E2E)"
|
|
121
|
-
}[
|
|
121
|
+
}[r]
|
|
122
122
|
},
|
|
123
|
-
"aria-disabled":
|
|
123
|
+
"aria-disabled": i,
|
|
124
124
|
"aria-label": "button",
|
|
125
125
|
bg: {
|
|
126
126
|
primary: "var(--primary, #8163E1)",
|
|
127
127
|
default: "var(--inputBackground, #FFF)"
|
|
128
|
-
}[
|
|
128
|
+
}[r],
|
|
129
129
|
border: {
|
|
130
130
|
primary: "none",
|
|
131
131
|
default: "1px solid var(--border, #E4E4E4)"
|
|
132
|
-
}[
|
|
132
|
+
}[r],
|
|
133
133
|
borderRadius: {
|
|
134
134
|
primary: "8px",
|
|
135
135
|
default: "10px"
|
|
136
|
-
}[
|
|
136
|
+
}[r],
|
|
137
137
|
boxSizing: "border-box",
|
|
138
|
-
className:
|
|
138
|
+
className: s,
|
|
139
139
|
color: {
|
|
140
140
|
primary: "#FFF",
|
|
141
141
|
default: {
|
|
142
142
|
true: "var(--error, #D52B2E)",
|
|
143
143
|
false: "var(--text, #272727)"
|
|
144
|
-
}[
|
|
145
|
-
}[
|
|
144
|
+
}[o.toString()]
|
|
145
|
+
}[r],
|
|
146
146
|
cursor: "pointer",
|
|
147
|
-
disabled:
|
|
147
|
+
disabled: i,
|
|
148
148
|
fontSize: {
|
|
149
149
|
default: ["14px", null, null, null, "15px"],
|
|
150
150
|
primary: ["15px", null, null, null, "16px"]
|
|
151
|
-
}[
|
|
151
|
+
}[r],
|
|
152
152
|
fontWeight: 700,
|
|
153
153
|
letterSpacing: {
|
|
154
154
|
default: ["-0.02em", null, null, null, "-0.03em"],
|
|
155
155
|
primary: ["0px", null, null, null, "-0.01em"]
|
|
156
|
-
}[
|
|
156
|
+
}[r],
|
|
157
157
|
outlineOffset: "2px",
|
|
158
158
|
pos: "relative",
|
|
159
159
|
px: {
|
|
160
|
-
false: { sm: "12px", md: "16px", lg: "20px" }[
|
|
161
|
-
true: { sm: "24px", md: "28px", lg: "32px" }[
|
|
162
|
-
}[(!!
|
|
163
|
-
py: { sm: "8px", md: "10px", lg: "12px" }[
|
|
160
|
+
false: { sm: "12px", md: "16px", lg: "20px" }[t],
|
|
161
|
+
true: { sm: "24px", md: "28px", lg: "32px" }[t]
|
|
162
|
+
}[(!!l).toString()],
|
|
163
|
+
py: { sm: "8px", md: "10px", lg: "12px" }[t],
|
|
164
164
|
styleOrder: 1,
|
|
165
165
|
styleVars: {
|
|
166
|
-
primary:
|
|
167
|
-
error:
|
|
168
|
-
text:
|
|
169
|
-
border:
|
|
170
|
-
inputBackground:
|
|
171
|
-
primaryFocus:
|
|
166
|
+
primary: e?.primary,
|
|
167
|
+
error: e?.error,
|
|
168
|
+
text: e?.text,
|
|
169
|
+
border: e?.border,
|
|
170
|
+
inputBackground: e?.inputBackground,
|
|
171
|
+
primaryFocus: e?.primaryFocus
|
|
172
172
|
},
|
|
173
173
|
transition: ".25s",
|
|
174
174
|
type: u,
|
|
175
|
-
typography:
|
|
176
|
-
...
|
|
177
|
-
children: /* @__PURE__ */
|
|
178
|
-
|
|
175
|
+
typography: d,
|
|
176
|
+
...x,
|
|
177
|
+
children: /* @__PURE__ */ b(p, { maxW: "100%", mx: "auto", pos: "relative", w: "fit-content", children: [
|
|
178
|
+
l && /* @__PURE__ */ a(
|
|
179
179
|
y,
|
|
180
180
|
{
|
|
181
181
|
boxSize: "24px",
|
|
@@ -189,20 +189,20 @@ function v({
|
|
|
189
189
|
},
|
|
190
190
|
top: "50%",
|
|
191
191
|
transform: "translate(-100%, -50%)",
|
|
192
|
-
children:
|
|
192
|
+
children: l
|
|
193
193
|
}
|
|
194
194
|
),
|
|
195
|
-
/* @__PURE__ */
|
|
195
|
+
/* @__PURE__ */ a(
|
|
196
196
|
p,
|
|
197
197
|
{
|
|
198
|
-
className:
|
|
198
|
+
className: n ? F({
|
|
199
199
|
overflow: "hidden",
|
|
200
200
|
textOverflow: "ellipsis",
|
|
201
201
|
whiteSpace: "nowrap"
|
|
202
202
|
}) : void 0,
|
|
203
203
|
lineHeight: "1.2",
|
|
204
204
|
minH: "1.2em",
|
|
205
|
-
transform: !!
|
|
205
|
+
transform: !!l && "translateX(8px)",
|
|
206
206
|
children: m
|
|
207
207
|
}
|
|
208
208
|
)
|
|
@@ -211,5 +211,5 @@ function v({
|
|
|
211
211
|
);
|
|
212
212
|
}
|
|
213
213
|
export {
|
|
214
|
-
|
|
214
|
+
E as Button
|
|
215
215
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("@devup-ui/react"),g=require("react"),l=require("./CheckIcon.cjs");function x({children:o,disabled:r,checked:i,colors:a,onChange:n,...s}){const c=g.useId();return t.jsxs(e.Flex,{alignItems:"center",gap:"8px",children:[t.jsxs(e.Box,{h:"18px",pos:"relative",w:"fit-content",children:[t.jsx(e.Input,{_active:!r&&{bg:"light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))"},_checked:{bg:"light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",border:"none",_hover:!r&&{bg:"light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))"},_disabled:{bg:"light-dark(#F0F0F3, #47474A)"}},_disabled:{bg:"light-dark( #F0F0F3, #47474A)"},_hover:!r&&{bg:"light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",border:"1px solid light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"},accentColor:"light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",appearance:"none",bg:"light-dark(#FFF, var(--inputBg, #2E2E2E))",border:"1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))",borderRadius:"2px",boxSize:"16px",checked:i,cursor:r?"not-allowed":"pointer",disabled:r,id:c,m:"0",onChange:r||!n?void 0:p=>n(p.target.checked),styleOrder:1,styleVars:{primary:a?.primary,border:a?.border,text:a?.text,inputBg:a?.inputBg,checkIcon:a?.checkIcon},type:"checkbox",...s}),i&&t.jsx(e.Box,{as:l.CheckIcon,props:{color:r?"light-dark(#D6D7DE, #373737)":"var(--checkIcon, #FFF)",className:e.css({left:"50%",pointerEvents:"none",pos:"absolute",top:"60%",transform:"translate(-50%, -50%)"})}})]}),t.jsx("label",{className:e.css({cursor:r?"not-allowed":"pointer"}),htmlFor:c,children:typeof o=="string"?t.jsx(e.Text,{color:r?"light-dark(#D6D7DE, #373737)":"light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))",fontSize:"14px",userSelect:"none",children:o}):o})]})}exports.Checkbox=x;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Flex as
|
|
3
|
-
import { useId as
|
|
4
|
-
import { CheckIcon as
|
|
5
|
-
function
|
|
6
|
-
children:
|
|
7
|
-
disabled:
|
|
8
|
-
checked:
|
|
9
|
-
colors:
|
|
10
|
-
onChange:
|
|
11
|
-
...
|
|
1
|
+
import { jsxs as p, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { Flex as F, Box as c, Input as s, css as g, Text as x } from "@devup-ui/react";
|
|
3
|
+
import { useId as h } from "react";
|
|
4
|
+
import { CheckIcon as v } from "./CheckIcon.js";
|
|
5
|
+
function D({
|
|
6
|
+
children: a,
|
|
7
|
+
disabled: r,
|
|
8
|
+
checked: e,
|
|
9
|
+
colors: o,
|
|
10
|
+
onChange: i,
|
|
11
|
+
...m
|
|
12
12
|
}) {
|
|
13
|
-
const
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */
|
|
17
|
-
|
|
13
|
+
const n = h();
|
|
14
|
+
return /* @__PURE__ */ p(F, { alignItems: "center", gap: "8px", children: [
|
|
15
|
+
/* @__PURE__ */ p(c, { h: "18px", pos: "relative", w: "fit-content", children: [
|
|
16
|
+
/* @__PURE__ */ t(
|
|
17
|
+
s,
|
|
18
18
|
{
|
|
19
|
-
_active: !
|
|
19
|
+
_active: !r && {
|
|
20
20
|
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))"
|
|
21
21
|
},
|
|
22
22
|
_checked: {
|
|
23
23
|
bg: "light-dark(var(--primary, #6159D4), var(--primary, #6670F9))",
|
|
24
24
|
border: "none",
|
|
25
|
-
_hover: !
|
|
25
|
+
_hover: !r && {
|
|
26
26
|
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))"
|
|
27
27
|
},
|
|
28
28
|
_disabled: {
|
|
@@ -32,7 +32,7 @@ function u({
|
|
|
32
32
|
_disabled: {
|
|
33
33
|
bg: "light-dark( #F0F0F3, #47474A)"
|
|
34
34
|
},
|
|
35
|
-
_hover: !
|
|
35
|
+
_hover: !r && {
|
|
36
36
|
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",
|
|
37
37
|
border: "1px solid light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"
|
|
38
38
|
},
|
|
@@ -42,31 +42,31 @@ function u({
|
|
|
42
42
|
border: "1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))",
|
|
43
43
|
borderRadius: "2px",
|
|
44
44
|
boxSize: "16px",
|
|
45
|
-
checked:
|
|
46
|
-
cursor:
|
|
47
|
-
disabled:
|
|
48
|
-
id:
|
|
45
|
+
checked: e,
|
|
46
|
+
cursor: r ? "not-allowed" : "pointer",
|
|
47
|
+
disabled: r,
|
|
48
|
+
id: n,
|
|
49
49
|
m: "0",
|
|
50
|
-
onChange:
|
|
50
|
+
onChange: r || !i ? void 0 : (l) => i(l.target.checked),
|
|
51
51
|
styleOrder: 1,
|
|
52
52
|
styleVars: {
|
|
53
|
-
primary:
|
|
54
|
-
border:
|
|
55
|
-
text:
|
|
56
|
-
inputBg:
|
|
57
|
-
checkIcon:
|
|
53
|
+
primary: o?.primary,
|
|
54
|
+
border: o?.border,
|
|
55
|
+
text: o?.text,
|
|
56
|
+
inputBg: o?.inputBg,
|
|
57
|
+
checkIcon: o?.checkIcon
|
|
58
58
|
},
|
|
59
59
|
type: "checkbox",
|
|
60
|
-
...
|
|
60
|
+
...m
|
|
61
61
|
}
|
|
62
62
|
),
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
e && /* @__PURE__ */ t(
|
|
64
|
+
c,
|
|
65
65
|
{
|
|
66
|
-
as:
|
|
66
|
+
as: v,
|
|
67
67
|
props: {
|
|
68
|
-
color:
|
|
69
|
-
className:
|
|
68
|
+
color: r ? "light-dark(#D6D7DE, #373737)" : "var(--checkIcon, #FFF)",
|
|
69
|
+
className: g({
|
|
70
70
|
left: "50%",
|
|
71
71
|
pointerEvents: "none",
|
|
72
72
|
pos: "absolute",
|
|
@@ -77,26 +77,26 @@ function u({
|
|
|
77
77
|
}
|
|
78
78
|
)
|
|
79
79
|
] }),
|
|
80
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ t(
|
|
81
81
|
"label",
|
|
82
82
|
{
|
|
83
|
-
className:
|
|
84
|
-
cursor:
|
|
83
|
+
className: g({
|
|
84
|
+
cursor: r ? "not-allowed" : "pointer"
|
|
85
85
|
}),
|
|
86
|
-
htmlFor:
|
|
87
|
-
children: typeof
|
|
88
|
-
|
|
86
|
+
htmlFor: n,
|
|
87
|
+
children: typeof a == "string" ? /* @__PURE__ */ t(
|
|
88
|
+
x,
|
|
89
89
|
{
|
|
90
|
-
color:
|
|
90
|
+
color: r ? "light-dark(#D6D7DE, #373737)" : "light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))",
|
|
91
91
|
fontSize: "14px",
|
|
92
92
|
userSelect: "none",
|
|
93
|
-
children:
|
|
93
|
+
children: a
|
|
94
94
|
}
|
|
95
|
-
) :
|
|
95
|
+
) : a
|
|
96
96
|
}
|
|
97
97
|
)
|
|
98
98
|
] });
|
|
99
99
|
}
|
|
100
100
|
export {
|
|
101
|
-
|
|
101
|
+
D as Checkbox
|
|
102
102
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@devup-ui/react"),E=require("react");function C({defaultValue:o,value:h,onChange:b,typography:x,error:l=!1,errorMessage:s,allowClear:d=!0,icon:i,colors:r,disabled:n,className:v,classNames:a,ref:k,onClear:F,...B}){const[p,u]=E.useState(o||""),y=g=>{u(g.target.value),b?.(g)},D=()=>{u(""),F?.()},m=p&&!n&&d;return e.jsxs(t.Box,{className:a?.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},children:[i&&e.jsx(t.Center,{"aria-label":"icon",boxSize:"24px",className:a?.icon,color:n?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:i}),e.jsx(t.Input,{ref:k,_disabled:{_placeholder:{color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--inputDisabledBg, light-dark(#F0F0F3, #414244))",border:"1px solid var(--border, light-dark(#E4E4E4, #434343))",color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},_focus:{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))",border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))",outline:"none"},_hover:{border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))"},_placeholder:{color:"var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-label":"input",bg:"var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",borderColor:l?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${v||""} ${a?.input||""}`.trim(),disabled:n,onChange:y,pl:i?"36px":"12px",pr:d?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:r?.primary,error:r?.error,text:r?.text,base:r?.base,iconBold:r?.iconBold,border:r?.border,inputBackground:r?.inputBackground,primaryFocus:r?.primaryFocus,negative20:r?.negative20},transition:"all 0.1s ease-in-out",typography:x,value:h??p,...B}),m&&e.jsx(c,{onClick:D}),l&&s&&e.jsx(t.Text,{"aria-label":"error-message",bottom:"-8px",className:a?.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:s})]})}function c(o){return e.jsx(t.Button,{alignItems:"center","aria-label":"clear-button",bg:"var(--negative20, light-dark(#0003, #FFF6))",border:"none",borderRadius:"50%",boxSize:"20px",color:"var(--base, light-dark(#FFF, #000))",cursor:"pointer",display:"flex",justifyContent:"center",p:"2px",pos:"absolute",right:"12px",styleOrder:1,top:"50%",transform:"translateY(-50%)",...o,children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),e.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=c;exports.Input=C;
|