@devup-ui/components 0.1.17 → 0.1.19
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,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("@devup-ui/react"),l=require("react");function H({defaultValue:x=null,value:d=null,onChange:a,disabled:u,className:b,style:v,variant:h="default",colors:
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("@devup-ui/react"),l=require("react");function H({defaultValue:x=null,value:d=null,onChange:a,disabled:u,className:b,style:v,variant:h="default",colors:e,classNames:n,styles:g}){const[m,y]=l.useState(d??x??!1),r=d??m;function f(w){a==null||a(!w),y(B=>!B)}const i=h==="default";return t.jsxs(t.Fragment,{children:[t.jsx(p.Box,{"aria-disabled":u,bg:r?"var(--primary)":"var(--bg, light-dark(#E4E4E4, #383838))",borderRadius:"500px",boxSizing:"border-box",className:b,cursor:"pointer",h:i?"28px":"8px",justifyContent:r&&"flex-end",onClick:()=>!u&&f(r),p:i&&1,position:"relative",role:"group",selectors:{"&[aria-disabled=true]":{cursor:"not-allowed",bg:"var(--disabledBg, light-dark(#D6D7DE, #373737))"},"&:hover:not([aria-disabled=true]):not(:disabled)":{bg:r?"var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))":"var(--hoverBg, light-dark(#C3C2C8, #696A6F))"}},style:v,styleVars:{primary:e==null?void 0:e.primary,bg:e==null?void 0:e.bg,primaryHoverBg:e==null?void 0:e.primaryHoverBg,hoverBg:e==null?void 0:e.hoverBg,disabledBg:e==null?void 0:e.disabledBg},"test-id":"toggle-wrapper",transition:".25s",w:i?"50px":"40px",children:t.jsx(p.Box,{_groupHover:!i&&{outline:"4px solid",outlineColor:"var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"},backgroundColor:"#fff",borderRadius:"100%",boxSize:"20px",className:n==null?void 0:n.toggle,filter:!i&&"drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",outline:"4px",pos:"absolute",style:g==null?void 0:g.toggle,styleVars:{primary:e==null?void 0:e.primary,primaryHoverBg:e==null?void 0:e.primaryHoverBg,switchShadow:e==null?void 0:e.switchShadow,switchHoverOutline:e==null?void 0:e.switchHoverOutline},top:!i&&"-6px",transform:r&&"translateX(calc(100% + 2px))",transition:".25s"})}),t.jsx(p.Input,{type:"hidden",value:String(r)})]})}exports.Toggle=H;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as H, Fragment as k, jsx as
|
|
2
|
+
import { jsxs as H, Fragment as k, jsx as n } from "react/jsx-runtime";
|
|
3
3
|
import { Box as u, Input as l } from "@devup-ui/react";
|
|
4
4
|
import { useState as S } from "react";
|
|
5
5
|
function E({
|
|
@@ -10,31 +10,31 @@ function E({
|
|
|
10
10
|
className: v,
|
|
11
11
|
style: x,
|
|
12
12
|
variant: m = "default",
|
|
13
|
-
colors:
|
|
13
|
+
colors: i,
|
|
14
14
|
classNames: e,
|
|
15
|
-
styles:
|
|
15
|
+
styles: p
|
|
16
16
|
}) {
|
|
17
17
|
const [h, f] = S(
|
|
18
18
|
d ?? b ?? !1
|
|
19
|
-
),
|
|
19
|
+
), r = d ?? h;
|
|
20
20
|
function y(w) {
|
|
21
21
|
a == null || a(!w), f((B) => !B);
|
|
22
22
|
}
|
|
23
|
-
const
|
|
23
|
+
const t = m === "default";
|
|
24
24
|
return /* @__PURE__ */ H(k, { children: [
|
|
25
|
-
/* @__PURE__ */
|
|
25
|
+
/* @__PURE__ */ n(
|
|
26
26
|
u,
|
|
27
27
|
{
|
|
28
28
|
"aria-disabled": g,
|
|
29
|
-
bg:
|
|
29
|
+
bg: r ? "var(--primary)" : "var(--bg, light-dark(#E4E4E4, #383838))",
|
|
30
30
|
borderRadius: "500px",
|
|
31
31
|
boxSizing: "border-box",
|
|
32
32
|
className: v,
|
|
33
33
|
cursor: "pointer",
|
|
34
|
-
h:
|
|
35
|
-
justifyContent:
|
|
36
|
-
onClick: () => !g && y(
|
|
37
|
-
p:
|
|
34
|
+
h: t ? "28px" : "8px",
|
|
35
|
+
justifyContent: r && "flex-end",
|
|
36
|
+
onClick: () => !g && y(r),
|
|
37
|
+
p: t && 1,
|
|
38
38
|
position: "relative",
|
|
39
39
|
role: "group",
|
|
40
40
|
selectors: {
|
|
@@ -43,24 +43,24 @@ function E({
|
|
|
43
43
|
bg: "var(--disabledBg, light-dark(#D6D7DE, #373737))"
|
|
44
44
|
},
|
|
45
45
|
"&:hover:not([aria-disabled=true]):not(:disabled)": {
|
|
46
|
-
bg:
|
|
46
|
+
bg: r ? "var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))" : "var(--hoverBg, light-dark(#C3C2C8, #696A6F))"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
style: x,
|
|
50
50
|
styleVars: {
|
|
51
|
-
primary:
|
|
52
|
-
bg:
|
|
53
|
-
primaryHoverBg:
|
|
54
|
-
hoverBg:
|
|
55
|
-
disabledBg:
|
|
51
|
+
primary: i == null ? void 0 : i.primary,
|
|
52
|
+
bg: i == null ? void 0 : i.bg,
|
|
53
|
+
primaryHoverBg: i == null ? void 0 : i.primaryHoverBg,
|
|
54
|
+
hoverBg: i == null ? void 0 : i.hoverBg,
|
|
55
|
+
disabledBg: i == null ? void 0 : i.disabledBg
|
|
56
56
|
},
|
|
57
57
|
"test-id": "toggle-wrapper",
|
|
58
58
|
transition: ".25s",
|
|
59
|
-
w:
|
|
60
|
-
children: /* @__PURE__ */
|
|
59
|
+
w: t ? "50px" : "40px",
|
|
60
|
+
children: /* @__PURE__ */ n(
|
|
61
61
|
u,
|
|
62
62
|
{
|
|
63
|
-
_groupHover: !
|
|
63
|
+
_groupHover: !t && {
|
|
64
64
|
outline: "4px solid",
|
|
65
65
|
outlineColor: "var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"
|
|
66
66
|
},
|
|
@@ -68,24 +68,24 @@ function E({
|
|
|
68
68
|
borderRadius: "100%",
|
|
69
69
|
boxSize: "20px",
|
|
70
70
|
className: e == null ? void 0 : e.toggle,
|
|
71
|
-
filter: !
|
|
71
|
+
filter: !t && "drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",
|
|
72
72
|
outline: "4px",
|
|
73
73
|
pos: "absolute",
|
|
74
|
-
style:
|
|
74
|
+
style: p == null ? void 0 : p.toggle,
|
|
75
75
|
styleVars: {
|
|
76
|
-
primary:
|
|
77
|
-
primaryHoverBg:
|
|
78
|
-
switchShadow:
|
|
79
|
-
switchHoverOutline:
|
|
76
|
+
primary: i == null ? void 0 : i.primary,
|
|
77
|
+
primaryHoverBg: i == null ? void 0 : i.primaryHoverBg,
|
|
78
|
+
switchShadow: i == null ? void 0 : i.switchShadow,
|
|
79
|
+
switchHoverOutline: i == null ? void 0 : i.switchHoverOutline
|
|
80
80
|
},
|
|
81
|
-
top: !
|
|
82
|
-
transform:
|
|
83
|
-
transition:
|
|
81
|
+
top: !t && "-6px",
|
|
82
|
+
transform: r && "translateX(calc(100% + 2px))",
|
|
83
|
+
transition: ".25s"
|
|
84
84
|
}
|
|
85
85
|
)
|
|
86
86
|
}
|
|
87
87
|
),
|
|
88
|
-
/* @__PURE__ */
|
|
88
|
+
/* @__PURE__ */ n(l, { type: "hidden", value: String(r) })
|
|
89
89
|
] });
|
|
90
90
|
}
|
|
91
91
|
export {
|
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.19",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"vite": "^7.1.5",
|
|
53
53
|
"vite-plugin-dts": "^4.5.4",
|
|
54
54
|
"vitest": "^3.2.4",
|
|
55
|
-
"@devup-ui/vite-plugin": "1.0.
|
|
55
|
+
"@devup-ui/vite-plugin": "1.0.39"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"csstype": "*",
|