@devup-ui/components 0.1.28 → 0.1.29
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.
|
@@ -1 +1,2 @@
|
|
|
1
|
-
"use
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@devup-ui/react"),s=require("react"),k=require("./CheckIcon.cjs");function m({children:i,disabled:r,checked:l,defaultChecked:p=!1,colors:o,onChange:g,...h}){const a=s.useId(),[F,d]=s.useState(p),c=l??F,x=n=>{d(n),g?.(n)};return e.jsxs(t.Flex,{alignItems:"center",gap:"8px",children:[e.jsxs("label",{className:t.css({position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:"16px",height:"16px",cursor:r?"not-allowed":"pointer"}),htmlFor:a,children:[e.jsx(t.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:"var(--primary, light-dark(#6159D4, #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 var(--primary, light-dark(#6159D4, #6670F9))"},accentColor:"var(--primary, light-dark(#6159D4, #6670F9))",appearance:"none",bg:"var(--inputBg, light-dark(#FFF, #2E2E2E))",border:"1px solid var(--border, light-dark(#E0E0E0, #333333))",borderRadius:"2px",checked:c,cursor:r?"not-allowed":"pointer",disabled:r,display:"block",height:"100%",id:a,left:0,m:"0",onChange:r?void 0:n=>x(n.target.checked),opacity:1,pointerEvents:"none",pos:"absolute",styleOrder:1,styleVars:{primary:o?.primary,border:o?.border,inputBg:o?.inputBg},top:0,type:"checkbox",width:"100%",zIndex:0,...h}),c&&e.jsx(t.Box,{as:k.CheckIcon,opacity:"1",pointerEvents:"none",props:{color:r?"light-dark(#D6D7DE, #47474A)":"var(--checkIcon, #FFF)"},styleVars:{checkIcon:o?.checkIcon},zIndex:"1"})]}),e.jsx("label",{className:t.css({cursor:r?"not-allowed":"pointer"}),htmlFor:a,children:typeof i=="string"?e.jsx(t.Text,{color:r?"light-dark(#D6D7DE, #6F6E6E)":"var(--text, light-dark(#2F2F2F, #EDEDED))",fontSize:"14px",styleVars:{text:o?.text},userSelect:"none",children:i}):i})]})}exports.Checkbox=m;
|
|
@@ -10,6 +10,6 @@ interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'onChange
|
|
|
10
10
|
checkIcon?: string;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
export declare function Checkbox({ children, disabled, checked, colors, onChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function Checkbox({ children, disabled, checked, defaultChecked, colors, onChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
15
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAmB,MAAM,OAAO,CAAA;AAIvD,UAAU,aACR,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,cAAsB,EACtB,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CA6Hf"}
|
|
@@ -1,102 +1,129 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as c, jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import { Flex as x, css as p, Input as k, Box as y, Text as b } from "@devup-ui/react";
|
|
4
|
+
import { useId as v, useState as D } from "react";
|
|
5
|
+
import { CheckIcon as E } from "./CheckIcon.js";
|
|
6
|
+
function _({
|
|
7
|
+
children: i,
|
|
7
8
|
disabled: r,
|
|
8
|
-
checked:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
checked: l,
|
|
10
|
+
defaultChecked: g = !1,
|
|
11
|
+
colors: e,
|
|
12
|
+
onChange: h,
|
|
13
|
+
...s
|
|
12
14
|
}) {
|
|
13
|
-
const n =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
className: g({
|
|
70
|
-
left: "50%",
|
|
15
|
+
const n = v(), [F, m] = D(g), a = l ?? F, d = (t) => {
|
|
16
|
+
m(t), h?.(t);
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ c(x, { alignItems: "center", gap: "8px", children: [
|
|
19
|
+
/* @__PURE__ */ c(
|
|
20
|
+
"label",
|
|
21
|
+
{
|
|
22
|
+
className: p({
|
|
23
|
+
position: "relative",
|
|
24
|
+
display: "flex",
|
|
25
|
+
alignItems: "center",
|
|
26
|
+
justifyContent: "center",
|
|
27
|
+
width: "16px",
|
|
28
|
+
height: "16px",
|
|
29
|
+
cursor: r ? "not-allowed" : "pointer"
|
|
30
|
+
}),
|
|
31
|
+
htmlFor: n,
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ o(
|
|
34
|
+
k,
|
|
35
|
+
{
|
|
36
|
+
_active: !r && {
|
|
37
|
+
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))"
|
|
38
|
+
},
|
|
39
|
+
_checked: {
|
|
40
|
+
bg: "var(--primary, light-dark(#6159D4, #6670F9))",
|
|
41
|
+
border: "none",
|
|
42
|
+
_hover: !r && {
|
|
43
|
+
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))"
|
|
44
|
+
},
|
|
45
|
+
_disabled: {
|
|
46
|
+
bg: "light-dark(#F0F0F3, #47474A)"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
_disabled: {
|
|
50
|
+
bg: "light-dark( #F0F0F3, #47474A)"
|
|
51
|
+
},
|
|
52
|
+
_hover: !r && {
|
|
53
|
+
bg: "light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))",
|
|
54
|
+
border: "1px solid var(--primary, light-dark(#6159D4, #6670F9))"
|
|
55
|
+
},
|
|
56
|
+
accentColor: "var(--primary, light-dark(#6159D4, #6670F9))",
|
|
57
|
+
appearance: "none",
|
|
58
|
+
bg: "var(--inputBg, light-dark(#FFF, #2E2E2E))",
|
|
59
|
+
border: "1px solid var(--border, light-dark(#E0E0E0, #333333))",
|
|
60
|
+
borderRadius: "2px",
|
|
61
|
+
checked: a,
|
|
62
|
+
cursor: r ? "not-allowed" : "pointer",
|
|
63
|
+
disabled: r,
|
|
64
|
+
display: "block",
|
|
65
|
+
height: "100%",
|
|
66
|
+
id: n,
|
|
67
|
+
left: 0,
|
|
68
|
+
m: "0",
|
|
69
|
+
onChange: r ? void 0 : (t) => d(t.target.checked),
|
|
70
|
+
opacity: 1,
|
|
71
71
|
pointerEvents: "none",
|
|
72
72
|
pos: "absolute",
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
73
|
+
styleOrder: 1,
|
|
74
|
+
styleVars: {
|
|
75
|
+
primary: e?.primary,
|
|
76
|
+
border: e?.border,
|
|
77
|
+
inputBg: e?.inputBg
|
|
78
|
+
},
|
|
79
|
+
top: 0,
|
|
80
|
+
type: "checkbox",
|
|
81
|
+
width: "100%",
|
|
82
|
+
zIndex: 0,
|
|
83
|
+
...s
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
a && /* @__PURE__ */ o(
|
|
87
|
+
y,
|
|
88
|
+
{
|
|
89
|
+
as: E,
|
|
90
|
+
opacity: "1",
|
|
91
|
+
pointerEvents: "none",
|
|
92
|
+
props: {
|
|
93
|
+
color: r ? "light-dark(#D6D7DE, #47474A)" : "var(--checkIcon, #FFF)"
|
|
94
|
+
},
|
|
95
|
+
styleVars: {
|
|
96
|
+
checkIcon: e?.checkIcon
|
|
97
|
+
},
|
|
98
|
+
zIndex: "1"
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ o(
|
|
81
105
|
"label",
|
|
82
106
|
{
|
|
83
|
-
className:
|
|
107
|
+
className: p({
|
|
84
108
|
cursor: r ? "not-allowed" : "pointer"
|
|
85
109
|
}),
|
|
86
110
|
htmlFor: n,
|
|
87
|
-
children: typeof
|
|
88
|
-
|
|
111
|
+
children: typeof i == "string" ? /* @__PURE__ */ o(
|
|
112
|
+
b,
|
|
89
113
|
{
|
|
90
|
-
color: r ? "light-dark(#D6D7DE, #
|
|
114
|
+
color: r ? "light-dark(#D6D7DE, #6F6E6E)" : "var(--text, light-dark(#2F2F2F, #EDEDED))",
|
|
91
115
|
fontSize: "14px",
|
|
116
|
+
styleVars: {
|
|
117
|
+
text: e?.text
|
|
118
|
+
},
|
|
92
119
|
userSelect: "none",
|
|
93
|
-
children:
|
|
120
|
+
children: i
|
|
94
121
|
}
|
|
95
|
-
) :
|
|
122
|
+
) : i
|
|
96
123
|
}
|
|
97
124
|
)
|
|
98
125
|
] });
|
|
99
126
|
}
|
|
100
127
|
export {
|
|
101
|
-
|
|
128
|
+
_ as Checkbox
|
|
102
129
|
};
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"css-in-js-framework",
|
|
17
17
|
"react"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.1.
|
|
19
|
+
"version": "0.1.29",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -35,8 +35,9 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "./dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"csstype": "^3.1",
|
|
39
|
-
"react": "^19.
|
|
38
|
+
"csstype": "^3.1.3",
|
|
39
|
+
"react": "^19.1.1",
|
|
40
|
+
"react-dom": "^19.1.1",
|
|
40
41
|
"clsx": "^2.1",
|
|
41
42
|
"@devup-ui/react": "1.0.22"
|
|
42
43
|
},
|