@devup-ui/components 0.1.22 → 0.1.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/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.d.ts.map +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"),C=require("react");function j({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[y,p]=C.useState(o),D=c=>{p(c.target.value),b?.(c)},m=()=>{p(""),F?.()},u=h??y,E=!!u&&!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:D,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:u,...B}),E&&e.jsx(g,{onClick:m}),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 g(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=g;exports.Input=j;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,YAAiB,EACjB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,EACH,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CAmHZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA6C1D"}
|