melonykit 0.2.1 → 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.
Files changed (2) hide show
  1. package/dist/index.js +106 -58
  2. package/package.json +6 -3
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-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-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-hourglass\" viewBox=\"0 0 24 24\"><path d=\"M17.201 2H6.8c-1.458 0-2.737.985-2.795 2.404-.074 1.785 1.182 2.97 2.5 4.083 1.825 1.54 2.737 2.31 2.832 3.284q.023.229 0 .458c-.095.975-1.007 1.744-2.832 3.284-1.355 1.143-2.578 2.207-2.5 4.083C4.062 21.016 5.34 22 6.799 22H17.2c1.458 0 2.737-.985 2.796-2.404.046-1.13-.373-2.254-1.262-3.036-.405-.357-.826-.698-1.24-1.047-1.824-1.54-2.736-2.31-2.831-3.284a2.3 2.3 0 0 1 0-.458c.095-.975 1.008-1.744 2.832-3.284 1.34-1.131 2.577-2.229 2.5-4.083C19.939 2.984 18.66 2 17.202 2Z\"/><path stroke-linecap=\"round\" d=\"M9 21.638c0-.442 0-.663.088-.856a1 1 0 0 1 .046-.09c.107-.183.288-.312.65-.571 1.006-.719 1.51-1.078 2.081-1.116q.135-.009.27 0c.572.038 1.075.397 2.08 1.116.363.259.544.388.651.571q.026.045.046.09c.088.193.088.414.088.856V22H9z\"/></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 = {
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
- }, $e = ({ type: e = "normal", width: t = "100%", value: i = 0 }) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
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 et({ className: e, width: t, height: i, children: a }) {
929
+ function nt({ className: e, width: t, height: i, children: a }) {
904
930
  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
905
- className: J(tt.base, e),
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 tt = { base: Y`
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(nt.base, e),
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 nt = { base: Y`
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 rt({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, isLoading: c = !1, onClick: l }) {
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 it = Ye`
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: .8rem;
1047
+ font-size: .9rem;
1022
1048
  display: inline-block;
1023
1049
  position: relative;
1024
- height: 2rem;
1025
- padding: 0 .8rem;
1050
+ height: 2.6rem;
1051
+ padding: 0 1rem;
1026
1052
  overflow: hidden;
1027
1053
  border: 0;
1028
- border-radius: 8px;
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.fore.primary};
1035
- border-bottom: solid 2px ${t(X.colors.primary, .25)};
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: ${it} .5s ease-out forwards;
1083
+ animation: ${ot} .5s ease-out forwards;
1045
1084
  `
1046
1085
  };
1047
1086
  //#endregion
1048
1087
  //#region src/components/_layout.jsx
1049
- function at({ className: e, height: t, direction: i = "row", justify: a, align: o, gap: s, children: c }) {
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(ot.base, e),
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 ot = { base: Y`
1101
+ var ct = { base: Y`
1063
1102
  display: flex;
1064
1103
  ` };
1065
1104
  //#endregion
1066
1105
  //#region src/components/_text.jsx
1067
- function st({ as: e = "span", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
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(ct.base, ct[i] ?? ct.normal, t),
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 ct = {
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 lt({ as: e = "h2", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
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(ut.base, ut[i] ?? ut.normal, t),
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 ut = {
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 dt({ size: e = 1 }) {
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 ft({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c }) {
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: pt.base,
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: pt.label,
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: pt.input,
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 pt = {
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
- }, mt = 28, ht = 3, gt = 11;
1188
- function _t({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
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: vt.base,
1237
+ className: bt.base,
1197
1238
  children: [
1198
1239
  /* @__PURE__ */ r("label", {
1199
- className: vt.label,
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: vt.checkbox,
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: vt.value,
1254
+ className: bt.value,
1214
1255
  htmlFor: l.value,
1215
1256
  "is-disabled": s
1216
1257
  })
1217
1258
  ]
1218
1259
  }) });
1219
1260
  }
1220
- var vt = {
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: ${ht}px;
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: ${mt}px;
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: ${ht}px;
1308
+ top: ${_t}px;
1268
1309
  right: ${14}px;
1269
- width: ${gt}px;
1270
- height: ${gt}px;
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 yt({ className: t, variant: a = "normal", iconName: o, label: s }) {
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(bt.base, bt[a] ?? bt.normal, t),
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 bt = { base: Y`
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 xt({ iconName: e, color: t, isDisabled: i, onClick: a }) {
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: St.base,
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 St = { base: Y`
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
- border-bottom: solid 1px ${X.colors.border};
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, et as Box, rt as Button, lt as Headline, Q as Icon, xt as IconButton, at as Layout, dt as Space, _t as Switch, yt as Tag, st as Text, ft as TextField, X as Theme };
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.2.1",
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,7 +18,9 @@
18
18
  "./functions": "./dist/functions.js",
19
19
  "./assets/*": "./dist/assets/*"
20
20
  },
21
- "files": ["dist"],
21
+ "files": [
22
+ "dist"
23
+ ],
22
24
  "publishConfig": {
23
25
  "access": "public"
24
26
  },
@@ -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
  }