melonykit 0.2.0 → 0.3.0
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/dist/index.js +106 -58
- package/package.json +7 -4
package/dist/index.js
CHANGED
|
@@ -733,7 +733,7 @@ var Je = q.injectGlobal, Ye = q.keyframes, Y = q.css;
|
|
|
733
733
|
q.sheet, q.cache;
|
|
734
734
|
//#endregion
|
|
735
735
|
//#region \0virtual:svg-sprite
|
|
736
|
-
var Xe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;width:0;height:0;\" id=\"svg-sprite\"><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-check\" viewBox=\"0 0 24 24\"><path d=\"m5 13.26 2.586 2.697C8.252 16.652 8.586 17 9 17s.748-.348 1.414-1.043L19 7\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-exclamation-triangle\" viewBox=\"0 0 24 24\"><path d=\"M13.925 21h-3.85c-4.63 0-6.945 0-7.799-1.506-.853-1.506.331-3.503 2.7-7.495L6.9 8.753C9.176 4.918 10.313 3 12 3s2.824 1.918 5.1 5.753L19.023 12c2.369 3.992 3.553 5.989 2.7 7.495C20.87 21 18.555 21 13.924 21\"/><path d=\"M12 9v4\"/><path d=\"M12.125 16.75H12m.25 0a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-plus\" viewBox=\"0 0 24 24\"><path d=\"M11.992 4v16m8-8h-16\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-x\" viewBox=\"0 0 24 24\"><path d=\"m18 6-6 6m0 0-6 6m6-6 6 6m-6-6L6 6\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-trash\" viewBox=\"0 0 24 24\"><path d=\"m19.5 5.5-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5\"/><path d=\"M3 5.5h18m-4.944 0-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5\"/><path d=\"M9.5 16.5v-6\"/><path d=\"M14.5 16.5v-6\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-play\" viewBox=\"0 0 24 24\"><path d=\"M18.89 12.846c-.353 1.343-2.023 2.292-5.364 4.19-3.23 1.835-4.845 2.752-6.146 2.384a3.25 3.25 0 0 1-1.424-.841C5 17.614 5 15.743 5 12s0-5.614.956-6.579a3.25 3.25 0 0 1 1.424-.84c1.301-.37 2.916.548 6.146 2.383 3.34 1.898 5.011 2.847 5.365 4.19a3.3 3.3 0 0 1 0 1.692Z\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-eye\" viewBox=\"0 0 24 24\"><path d=\"M21.544 11.045c.304.426.456.64.456.955 0 .316-.152.529-.456.955C20.178 14.871 16.689 19 12 19c-4.69 0-8.178-4.13-9.544-6.045C2.152 12.529 2 12.315 2 12c0-.316.152-.529.456-.955C3.822 9.129 7.311 5 12 5c4.69 0 8.178 4.13 9.544 6.045Z\"/><path d=\"M15 12a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-
|
|
736
|
+
var Xe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;width:0;height:0;\" id=\"svg-sprite\"><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-check\" viewBox=\"0 0 24 24\"><path d=\"m5 13.26 2.586 2.697C8.252 16.652 8.586 17 9 17s.748-.348 1.414-1.043L19 7\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-exclamation-triangle\" viewBox=\"0 0 24 24\"><path d=\"M13.925 21h-3.85c-4.63 0-6.945 0-7.799-1.506-.853-1.506.331-3.503 2.7-7.495L6.9 8.753C9.176 4.918 10.313 3 12 3s2.824 1.918 5.1 5.753L19.023 12c2.369 3.992 3.553 5.989 2.7 7.495C20.87 21 18.555 21 13.924 21\"/><path d=\"M12 9v4\"/><path d=\"M12.125 16.75H12m.25 0a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-home\" viewBox=\"0 0 24 24\"><path d=\"M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99\"/><path d=\"M15 17c-.8.622-1.85 1-3 1s-2.2-.378-3-1\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-hourglass\" viewBox=\"0 0 24 24\"><path d=\"M4 3h16\"/><path d=\"M5.5 3v2.03A4 4 0 0 0 7.061 8.2L12 12l4.939-3.8A4 4 0 0 0 18.5 5.03V3\"/><path d=\"M5.5 21v-2.03a4 4 0 0 1 1.561-3.17L12 12l4.939 3.8a4 4 0 0 1 1.561 3.17V21\"/><path d=\"M4 21h16\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-plus\" viewBox=\"0 0 24 24\"><path d=\"M11.992 4v16m8-8h-16\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-x\" viewBox=\"0 0 24 24\"><path d=\"m18 6-6 6m0 0-6 6m6-6 6 6m-6-6L6 6\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-trash\" viewBox=\"0 0 24 24\"><path d=\"m19.5 5.5-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5\"/><path d=\"M3 5.5h18m-4.944 0-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5\"/><path d=\"M9.5 16.5v-6\"/><path d=\"M14.5 16.5v-6\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-play\" viewBox=\"0 0 24 24\"><path d=\"M18.89 12.846c-.353 1.343-2.023 2.292-5.364 4.19-3.23 1.835-4.845 2.752-6.146 2.384a3.25 3.25 0 0 1-1.424-.841C5 17.614 5 15.743 5 12s0-5.614.956-6.579a3.25 3.25 0 0 1 1.424-.84c1.301-.37 2.916.548 6.146 2.383 3.34 1.898 5.011 2.847 5.365 4.19a3.3 3.3 0 0 1 0 1.692Z\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-eye\" viewBox=\"0 0 24 24\"><path d=\"M21.544 11.045c.304.426.456.64.456.955 0 .316-.152.529-.456.955C20.178 14.871 16.689 19 12 19c-4.69 0-8.178-4.13-9.544-6.045C2.152 12.529 2 12.315 2 12c0-.316.152-.529.456-.955C3.822 9.129 7.311 5 12 5c4.69 0 8.178 4.13 9.544 6.045Z\"/><path d=\"M15 12a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-sliders\" viewBox=\"0 0 24 24\"><path stroke-linejoin=\"round\" d=\"M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12Z\"/><path d=\"M8.5 10a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z\"/><path d=\"M15.5 17a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"/><path stroke-linecap=\"round\" d=\"M10 8.5h7\"/><path stroke-linecap=\"round\" d=\"M14 15.5H7\"/></symbol></svg>", Ze = !1, Qe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manrope.woff2", X = {
|
|
737
737
|
baseUnit: 16,
|
|
738
738
|
maxWidth: 67.5,
|
|
739
739
|
fontFamily: "Manrope",
|
|
@@ -856,16 +856,42 @@ var Xe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;wi
|
|
|
856
856
|
}
|
|
857
857
|
|
|
858
858
|
[is-loading] { cursor: default !important; }
|
|
859
|
-
|
|
860
|
-
[is-clickable] {
|
|
861
|
-
cursor: pointer;
|
|
862
|
-
transition: transform .2s ease;
|
|
863
|
-
|
|
864
|
-
&:active { transform: scale(.95); }
|
|
865
|
-
}
|
|
859
|
+
[is-clickable] { cursor: pointer; }
|
|
866
860
|
`), !(document.getElementById("svg-sprite") || !document.body) && (document.body.insertAdjacentHTML("afterbegin", Xe), Ze = !0));
|
|
867
861
|
}
|
|
868
|
-
}
|
|
862
|
+
};
|
|
863
|
+
//#endregion
|
|
864
|
+
//#region src/components/_app-wrapper.jsx
|
|
865
|
+
function $e({ children: e }) {
|
|
866
|
+
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
|
|
867
|
+
className: et.base,
|
|
868
|
+
children: /* @__PURE__ */ r("div", {
|
|
869
|
+
className: et.inner,
|
|
870
|
+
children: e
|
|
871
|
+
})
|
|
872
|
+
}) });
|
|
873
|
+
}
|
|
874
|
+
var et = {
|
|
875
|
+
base: Y`
|
|
876
|
+
// The template is stretched over the entire viewport, and the vertical
|
|
877
|
+
// scrollbar is enabled manually.
|
|
878
|
+
// This is necessary so that the modal overlays can cover the scrollbar,
|
|
879
|
+
// as we always show the vertical scrollbar to avoid content shifting
|
|
880
|
+
// when it's displayed or not.
|
|
881
|
+
// Normally, we'd use the body element for this, but the modal overlay
|
|
882
|
+
// can't cover the scrollbar of the body element.
|
|
883
|
+
${X.extends.stretch}
|
|
884
|
+
overflow-y: scroll;
|
|
885
|
+
overflow-x: hidden;
|
|
886
|
+
scroll-behavior: smooth;
|
|
887
|
+
`,
|
|
888
|
+
inner: Y`
|
|
889
|
+
position: relative;
|
|
890
|
+
padding: 8rem 0;
|
|
891
|
+
margin: 0 auto;
|
|
892
|
+
max-width: ${X.maxWidth}rem;
|
|
893
|
+
`
|
|
894
|
+
}, tt = ({ type: e = "normal", width: t = "100%", value: i = 0 }) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
|
|
869
895
|
className: Z.base,
|
|
870
896
|
style: { width: t },
|
|
871
897
|
children: /* @__PURE__ */ r("div", {
|
|
@@ -900,9 +926,9 @@ var Xe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;wi
|
|
|
900
926
|
};
|
|
901
927
|
//#endregion
|
|
902
928
|
//#region src/components/_box.jsx
|
|
903
|
-
function
|
|
929
|
+
function nt({ className: e, width: t, height: i, children: a }) {
|
|
904
930
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
|
|
905
|
-
className: J(
|
|
931
|
+
className: J(rt.base, e),
|
|
906
932
|
style: {
|
|
907
933
|
width: t,
|
|
908
934
|
height: i
|
|
@@ -910,7 +936,7 @@ function et({ className: e, width: t, height: i, children: a }) {
|
|
|
910
936
|
children: a
|
|
911
937
|
}) });
|
|
912
938
|
}
|
|
913
|
-
var
|
|
939
|
+
var rt = { base: Y`
|
|
914
940
|
position: relative;
|
|
915
941
|
border-radius: 18px;
|
|
916
942
|
border: solid 2px #eee;
|
|
@@ -922,7 +948,7 @@ var tt = { base: Y`
|
|
|
922
948
|
//#region src/components/_icon.jsx
|
|
923
949
|
function Q({ className: e, size: t = "1.25rem", color: i = X.colors.fore.primary, iconName: a, isSpinning: o }) {
|
|
924
950
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("svg", {
|
|
925
|
-
className: J(
|
|
951
|
+
className: J(it.base, e),
|
|
926
952
|
style: {
|
|
927
953
|
color: i,
|
|
928
954
|
width: t,
|
|
@@ -933,7 +959,7 @@ function Q({ className: e, size: t = "1.25rem", color: i = X.colors.fore.primary
|
|
|
933
959
|
children: /* @__PURE__ */ r("use", { href: `#icon-${a}` })
|
|
934
960
|
}) });
|
|
935
961
|
}
|
|
936
|
-
var
|
|
962
|
+
var it = { base: Y`
|
|
937
963
|
fill: currentColor;
|
|
938
964
|
display: inline-block;
|
|
939
965
|
flex-shrink: 0;
|
|
@@ -959,7 +985,7 @@ var nt = { base: Y`
|
|
|
959
985
|
` };
|
|
960
986
|
//#endregion
|
|
961
987
|
//#region src/components/_button.jsx
|
|
962
|
-
function
|
|
988
|
+
function at({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, isLoading: c = !1, onClick: l }) {
|
|
963
989
|
let u = o || c, d = a(null);
|
|
964
990
|
function f(e) {
|
|
965
991
|
if (s || c) return;
|
|
@@ -1006,7 +1032,7 @@ function rt({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, is
|
|
|
1006
1032
|
]
|
|
1007
1033
|
}) });
|
|
1008
1034
|
}
|
|
1009
|
-
var
|
|
1035
|
+
var ot = Ye`
|
|
1010
1036
|
from {
|
|
1011
1037
|
opacity: .4;
|
|
1012
1038
|
transform: translate(-50%, -50%) scale(0);
|
|
@@ -1018,22 +1044,35 @@ var it = Ye`
|
|
|
1018
1044
|
}
|
|
1019
1045
|
`, $ = {
|
|
1020
1046
|
base: Y`
|
|
1021
|
-
font-size: .
|
|
1047
|
+
font-size: .9rem;
|
|
1022
1048
|
display: inline-block;
|
|
1023
1049
|
position: relative;
|
|
1024
|
-
height:
|
|
1025
|
-
padding: 0
|
|
1050
|
+
height: 2.6rem;
|
|
1051
|
+
padding: 0 1rem;
|
|
1026
1052
|
overflow: hidden;
|
|
1027
1053
|
border: 0;
|
|
1028
|
-
|
|
1054
|
+
font-weight: 600;
|
|
1055
|
+
border-radius: 12px;
|
|
1056
|
+
will-change: transform, border;
|
|
1057
|
+
transition: transform .2s ease, border .2s ease;
|
|
1029
1058
|
font-family: ${X.fontFamily}, sans-serif;
|
|
1030
1059
|
|
|
1060
|
+
&:active {
|
|
1061
|
+
transform: translateY(2px);
|
|
1062
|
+
border-width: 1px;
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1031
1065
|
&[has-icon] { padding-left: 1.8rem; }
|
|
1032
1066
|
`,
|
|
1033
1067
|
primary: Y`
|
|
1034
|
-
color: ${X.colors.
|
|
1035
|
-
border-bottom: solid
|
|
1068
|
+
color: ${t(X.colors.primary, .6)};
|
|
1069
|
+
border-bottom: solid 3px ${t(X.colors.primary, .25)};
|
|
1036
1070
|
background-color: ${X.colors.primary};
|
|
1071
|
+
`,
|
|
1072
|
+
secondary: Y`
|
|
1073
|
+
color: ${X.colors.fore.secondary};
|
|
1074
|
+
border-bottom: solid 3px ${t(X.colors.secondary, .25)};
|
|
1075
|
+
background-color: ${X.colors.secondary};
|
|
1037
1076
|
`,
|
|
1038
1077
|
ripple: Y`
|
|
1039
1078
|
position: absolute;
|
|
@@ -1041,14 +1080,14 @@ var it = Ye`
|
|
|
1041
1080
|
border-radius: 50%;
|
|
1042
1081
|
pointer-events: none;
|
|
1043
1082
|
background-color: currentColor;
|
|
1044
|
-
animation: ${
|
|
1083
|
+
animation: ${ot} .5s ease-out forwards;
|
|
1045
1084
|
`
|
|
1046
1085
|
};
|
|
1047
1086
|
//#endregion
|
|
1048
1087
|
//#region src/components/_layout.jsx
|
|
1049
|
-
function
|
|
1088
|
+
function st({ className: e, height: t, direction: i = "row", justify: a, align: o, gap: s, children: c }) {
|
|
1050
1089
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
|
|
1051
|
-
className: J(
|
|
1090
|
+
className: J(ct.base, e),
|
|
1052
1091
|
style: {
|
|
1053
1092
|
height: t,
|
|
1054
1093
|
flexDirection: i,
|
|
@@ -1059,19 +1098,19 @@ function at({ className: e, height: t, direction: i = "row", justify: a, align:
|
|
|
1059
1098
|
children: c
|
|
1060
1099
|
}) });
|
|
1061
1100
|
}
|
|
1062
|
-
var
|
|
1101
|
+
var ct = { base: Y`
|
|
1063
1102
|
display: flex;
|
|
1064
1103
|
` };
|
|
1065
1104
|
//#endregion
|
|
1066
1105
|
//#region src/components/_text.jsx
|
|
1067
|
-
function
|
|
1106
|
+
function lt({ as: e = "span", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
|
|
1068
1107
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
|
|
1069
|
-
className: J(
|
|
1108
|
+
className: J(ut.base, ut[i] ?? ut.normal, t),
|
|
1070
1109
|
style: { color: a },
|
|
1071
1110
|
children: o
|
|
1072
1111
|
}) });
|
|
1073
1112
|
}
|
|
1074
|
-
var
|
|
1113
|
+
var ut = {
|
|
1075
1114
|
base: Y`
|
|
1076
1115
|
font-weight: 500;
|
|
1077
1116
|
letter-spacing: 1px;
|
|
@@ -1091,14 +1130,14 @@ var ct = {
|
|
|
1091
1130
|
};
|
|
1092
1131
|
//#endregion
|
|
1093
1132
|
//#region src/components/_headline.jsx
|
|
1094
|
-
function
|
|
1133
|
+
function dt({ as: e = "h2", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
|
|
1095
1134
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
|
|
1096
|
-
className: J(
|
|
1135
|
+
className: J(ft.base, ft[i] ?? ft.normal, t),
|
|
1097
1136
|
style: { color: a },
|
|
1098
1137
|
children: o
|
|
1099
1138
|
}) });
|
|
1100
1139
|
}
|
|
1101
|
-
var
|
|
1140
|
+
var ft = {
|
|
1102
1141
|
base: Y`
|
|
1103
1142
|
letter-spacing: 1px;
|
|
1104
1143
|
`,
|
|
@@ -1120,7 +1159,7 @@ var ut = {
|
|
|
1120
1159
|
};
|
|
1121
1160
|
//#endregion
|
|
1122
1161
|
//#region src/components/_space.jsx
|
|
1123
|
-
function
|
|
1162
|
+
function pt({ size: e = 1 }) {
|
|
1124
1163
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
|
|
1125
1164
|
"aria-hidden": "true",
|
|
1126
1165
|
style: {
|
|
@@ -1131,23 +1170,23 @@ function dt({ size: e = 1 }) {
|
|
|
1131
1170
|
}
|
|
1132
1171
|
//#endregion
|
|
1133
1172
|
//#region src/components/_text-field.jsx
|
|
1134
|
-
function
|
|
1173
|
+
function mt({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c }) {
|
|
1135
1174
|
let l = a(Date.now()), u = a(t);
|
|
1136
1175
|
function d({ target: e }) {
|
|
1137
1176
|
u.value = e.value, c?.(u.value);
|
|
1138
1177
|
}
|
|
1139
1178
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
|
|
1140
|
-
className:
|
|
1179
|
+
className: ht.base,
|
|
1141
1180
|
style: { width: o },
|
|
1142
1181
|
"is-disabled": s,
|
|
1143
1182
|
children: [!u.value && e && /* @__PURE__ */ r("label", {
|
|
1144
|
-
className:
|
|
1183
|
+
className: ht.label,
|
|
1145
1184
|
for: l.value,
|
|
1146
1185
|
children: e
|
|
1147
1186
|
}), /* @__PURE__ */ r("input", {
|
|
1148
1187
|
id: l,
|
|
1149
1188
|
name: l,
|
|
1150
|
-
className:
|
|
1189
|
+
className: ht.input,
|
|
1151
1190
|
value: u.value,
|
|
1152
1191
|
disabled: s,
|
|
1153
1192
|
autocomplete: "off",
|
|
@@ -1155,7 +1194,7 @@ function ft({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c })
|
|
|
1155
1194
|
})]
|
|
1156
1195
|
}) });
|
|
1157
1196
|
}
|
|
1158
|
-
var
|
|
1197
|
+
var ht = {
|
|
1159
1198
|
base: Y`
|
|
1160
1199
|
position: relative;
|
|
1161
1200
|
`,
|
|
@@ -1167,6 +1206,7 @@ var pt = {
|
|
|
1167
1206
|
left: 1.06rem;
|
|
1168
1207
|
top: .75rem;
|
|
1169
1208
|
pointer-events: none;
|
|
1209
|
+
letter-spacing: 1px;
|
|
1170
1210
|
font-family: ${X.fontFamily}, sans-serif;
|
|
1171
1211
|
color: ${X.colors.fore.primary};
|
|
1172
1212
|
`,
|
|
@@ -1180,12 +1220,13 @@ var pt = {
|
|
|
1180
1220
|
transition: box-shadow .15s ease-in-out, background-color .1s ease;
|
|
1181
1221
|
width: 100%;
|
|
1182
1222
|
border-radius: 8px;
|
|
1223
|
+
letter-spacing: 1px;
|
|
1183
1224
|
font-family: ${X.fontFamily}, sans-serif;
|
|
1184
1225
|
color: ${X.colors.fore.primary};
|
|
1185
1226
|
background-color: ${X.colors.back.secondary};
|
|
1186
1227
|
`
|
|
1187
|
-
},
|
|
1188
|
-
function
|
|
1228
|
+
}, gt = 28, _t = 3, vt = 11;
|
|
1229
|
+
function yt({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
|
|
1189
1230
|
let l = a(Date.now()), u = a(t);
|
|
1190
1231
|
o(() => u.value = t, [t]);
|
|
1191
1232
|
function d() {
|
|
@@ -1193,10 +1234,10 @@ function _t({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
|
|
|
1193
1234
|
u.value = e, c?.(e);
|
|
1194
1235
|
}
|
|
1195
1236
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
|
|
1196
|
-
className:
|
|
1237
|
+
className: bt.base,
|
|
1197
1238
|
children: [
|
|
1198
1239
|
/* @__PURE__ */ r("label", {
|
|
1199
|
-
className:
|
|
1240
|
+
className: bt.label,
|
|
1200
1241
|
htmlFor: l.value,
|
|
1201
1242
|
"is-disabled": s,
|
|
1202
1243
|
children: e
|
|
@@ -1204,20 +1245,20 @@ function _t({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
|
|
|
1204
1245
|
/* @__PURE__ */ r("input", {
|
|
1205
1246
|
id: l.value,
|
|
1206
1247
|
type: "checkbox",
|
|
1207
|
-
className:
|
|
1248
|
+
className: bt.checkbox,
|
|
1208
1249
|
checked: u.value,
|
|
1209
1250
|
disabled: s,
|
|
1210
1251
|
onChange: d
|
|
1211
1252
|
}),
|
|
1212
1253
|
/* @__PURE__ */ r("label", {
|
|
1213
|
-
className:
|
|
1254
|
+
className: bt.value,
|
|
1214
1255
|
htmlFor: l.value,
|
|
1215
1256
|
"is-disabled": s
|
|
1216
1257
|
})
|
|
1217
1258
|
]
|
|
1218
1259
|
}) });
|
|
1219
1260
|
}
|
|
1220
|
-
var
|
|
1261
|
+
var bt = {
|
|
1221
1262
|
base: Y`
|
|
1222
1263
|
position: relative;
|
|
1223
1264
|
display: flex;
|
|
@@ -1241,7 +1282,7 @@ var vt = {
|
|
|
1241
1282
|
background-color: #e1e1e1;
|
|
1242
1283
|
|
|
1243
1284
|
&:before {
|
|
1244
|
-
right: ${
|
|
1285
|
+
right: ${_t}px;
|
|
1245
1286
|
background-color: #3a3a3a;
|
|
1246
1287
|
}
|
|
1247
1288
|
}
|
|
@@ -1255,7 +1296,7 @@ var vt = {
|
|
|
1255
1296
|
cursor: pointer;
|
|
1256
1297
|
user-select: none;
|
|
1257
1298
|
transition: background .3s ease;
|
|
1258
|
-
width: ${
|
|
1299
|
+
width: ${gt}px;
|
|
1259
1300
|
|
|
1260
1301
|
&:before {
|
|
1261
1302
|
background-color: #e1e1e1;
|
|
@@ -1264,18 +1305,18 @@ var vt = {
|
|
|
1264
1305
|
position: absolute;
|
|
1265
1306
|
transition: background .3s ease, right .3s ease;
|
|
1266
1307
|
border-radius: 50%;
|
|
1267
|
-
top: ${
|
|
1308
|
+
top: ${_t}px;
|
|
1268
1309
|
right: ${14}px;
|
|
1269
|
-
width: ${
|
|
1270
|
-
height: ${
|
|
1310
|
+
width: ${vt}px;
|
|
1311
|
+
height: ${vt}px;
|
|
1271
1312
|
}
|
|
1272
1313
|
`
|
|
1273
1314
|
};
|
|
1274
1315
|
//#endregion
|
|
1275
1316
|
//#region src/components/_tag.jsx
|
|
1276
|
-
function
|
|
1317
|
+
function xt({ className: t, variant: a = "normal", iconName: o, label: s }) {
|
|
1277
1318
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
|
|
1278
|
-
className: J(
|
|
1319
|
+
className: J(St.base, St[a] ?? St.normal, t),
|
|
1279
1320
|
"has-icon": !e(o),
|
|
1280
1321
|
children: [o && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(Q, {
|
|
1281
1322
|
className: Y`
|
|
@@ -1287,7 +1328,7 @@ function yt({ className: t, variant: a = "normal", iconName: o, label: s }) {
|
|
|
1287
1328
|
}) }), s]
|
|
1288
1329
|
}) });
|
|
1289
1330
|
}
|
|
1290
|
-
var
|
|
1331
|
+
var St = { base: Y`
|
|
1291
1332
|
position: relative;
|
|
1292
1333
|
display: inline-block;
|
|
1293
1334
|
padding: .3rem .5rem;
|
|
@@ -1303,12 +1344,12 @@ var bt = { base: Y`
|
|
|
1303
1344
|
` };
|
|
1304
1345
|
//#endregion
|
|
1305
1346
|
//#region src/components/_icon-button.jsx
|
|
1306
|
-
function
|
|
1347
|
+
function Ct({ iconName: e, color: t, isDisabled: i, onClick: a }) {
|
|
1307
1348
|
function o(e) {
|
|
1308
1349
|
i || (e.stopPropagation(), e.preventDefault(), a?.(e));
|
|
1309
1350
|
}
|
|
1310
1351
|
return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("button", {
|
|
1311
|
-
className:
|
|
1352
|
+
className: wt.base,
|
|
1312
1353
|
"is-disabled": i || void 0,
|
|
1313
1354
|
"is-clickable": !!a || void 0,
|
|
1314
1355
|
disabled: i,
|
|
@@ -1321,13 +1362,20 @@ function xt({ iconName: e, color: t, isDisabled: i, onClick: a }) {
|
|
|
1321
1362
|
})
|
|
1322
1363
|
}) });
|
|
1323
1364
|
}
|
|
1324
|
-
var
|
|
1365
|
+
var wt = { base: Y`
|
|
1325
1366
|
position: relative;
|
|
1326
1367
|
width: 2.25rem;
|
|
1327
1368
|
height: 2.25rem;
|
|
1328
1369
|
border-radius: 8px;
|
|
1329
|
-
|
|
1370
|
+
will-change: transform, border;
|
|
1371
|
+
transition: transform .1s ease, border .1s ease;
|
|
1372
|
+
border-bottom: solid 2px ${X.colors.border};
|
|
1330
1373
|
background-color: ${X.colors.back.secondary};
|
|
1374
|
+
|
|
1375
|
+
&:active {
|
|
1376
|
+
transform: translateY(1px);
|
|
1377
|
+
border-width: 1px;
|
|
1378
|
+
}
|
|
1331
1379
|
` };
|
|
1332
1380
|
//#endregion
|
|
1333
|
-
export { $e as Bar,
|
|
1381
|
+
export { $e as AppWrapper, tt as Bar, nt as Box, at as Button, dt as Headline, Q as Icon, Ct as IconButton, st as Layout, pt as Space, yt as Switch, xt as Tag, lt as Text, mt as TextField, X as Theme };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"author": "Vadim Hermann",
|
|
3
3
|
"name": "melonykit",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Preact based ui and utility functions toolkit",
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -18,12 +18,14 @@
|
|
|
18
18
|
"./functions": "./dist/functions.js",
|
|
19
19
|
"./assets/*": "./dist/assets/*"
|
|
20
20
|
},
|
|
21
|
-
"files": [
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
22
24
|
"publishConfig": {
|
|
23
25
|
"access": "public"
|
|
24
26
|
},
|
|
25
27
|
"peerDependencies": {
|
|
26
|
-
"@preact/signals": "2.
|
|
28
|
+
"@preact/signals": "2.11.0",
|
|
27
29
|
"preact": "10.29.8"
|
|
28
30
|
},
|
|
29
31
|
"dependencies": {
|
|
@@ -36,6 +38,7 @@
|
|
|
36
38
|
"@preact/signals": "2.11.0",
|
|
37
39
|
"@types/node": "26.1.2",
|
|
38
40
|
"preact": "10.29.8",
|
|
39
|
-
"vite": "8.2.0"
|
|
41
|
+
"vite": "8.2.0",
|
|
42
|
+
"vite-plugin-mkcert": "2.1.0"
|
|
40
43
|
}
|
|
41
44
|
}
|