melonykit 0.6.2 → 0.7.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 CHANGED
@@ -1,7 +1,5 @@
1
- import { i as e, o as t } from "./functions-C8th2V6m.js";
2
- import { Fragment as n, jsx as r, jsxs as i } from "preact/jsx-runtime";
3
- import { useSignal as a } from "@preact/signals";
4
- import { useEffect as o } from "preact/hooks";
1
+ import { a as e, i as t, o as n, s as r, t as i } from "./signals.module-CHeHx-c5.js";
2
+ import { i as a, o } from "./functions-C8th2V6m.js";
5
3
  //#region node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
6
4
  function s(e) {
7
5
  if (e.sheet) return e.sheet;
@@ -733,7 +731,7 @@ var Je = q.injectGlobal, Ye = q.keyframes, Y = q.css;
733
731
  q.sheet, q.cache;
734
732
  //#endregion
735
733
  //#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-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-menu\" viewBox=\"0 0 24 24\"><path d=\"M4 9h16\"/><path d=\"M4 15h10\"/></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 = {
734
+ 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-bars-corner\" viewBox=\"0 0 24 24\"><path d=\"M7 15v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1\"/><path d=\"M7 8v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1\"/><path d=\"M3 3v10c0 3.771 0 5.657 1.172 6.828S7.229 21 11 21h10\"/></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-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-menu\" viewBox=\"0 0 24 24\"><path d=\"M4 9h16\"/><path d=\"M4 15h10\"/></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
735
  fontFamily: "Manrope",
738
736
  zIndex: {
739
737
  front: 1,
@@ -857,20 +855,45 @@ var Xe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;wi
857
855
  [is-clickable] { cursor: pointer; }
858
856
  `), !(document.getElementById("svg-sprite") || !document.body) && (document.body.insertAdjacentHTML("afterbegin", Xe), Ze = !0));
859
857
  }
860
- };
858
+ }, $e = 0;
859
+ Array.isArray;
860
+ function Z(e, t, n, i, a, o) {
861
+ t ||= {};
862
+ var s, c, l = t;
863
+ if ("ref" in l) for (c in l = {}, t) c == "ref" ? s = t[c] : l[c] = t[c];
864
+ var u = {
865
+ type: e,
866
+ props: l,
867
+ key: n,
868
+ ref: s,
869
+ __k: null,
870
+ __: null,
871
+ __b: 0,
872
+ __e: null,
873
+ __c: null,
874
+ constructor: void 0,
875
+ __v: --$e,
876
+ __i: -1,
877
+ __u: 0,
878
+ __source: a,
879
+ __self: o
880
+ };
881
+ if (typeof e == "function" && (s = e.defaultProps)) for (c in s) l[c] === void 0 && (l[c] = s[c]);
882
+ return r.vnode && r.vnode(u), u;
883
+ }
861
884
  //#endregion
862
885
  //#region src/components/_app-wrapper.jsx
863
- function $e({ maxWidth: e = "67.5rem", children: t }) {
864
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
865
- className: et.base,
866
- children: /* @__PURE__ */ r("div", {
867
- className: et.inner,
886
+ function et({ maxWidth: e = "67.5rem", children: t }) {
887
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
888
+ className: tt.base,
889
+ children: /* @__PURE__ */ Z("div", {
890
+ className: tt.inner,
868
891
  style: { maxWidth: e },
869
892
  children: t
870
893
  })
871
894
  }) });
872
895
  }
873
- var et = {
896
+ var tt = {
874
897
  base: Y`
875
898
  // The template is stretched over the entire viewport, and the vertical
876
899
  // scrollbar is enabled manually.
@@ -889,14 +912,14 @@ var et = {
889
912
  padding: 8rem 0;
890
913
  margin: 0 auto;
891
914
  `
892
- }, tt = ({ type: e = "normal", width: t = "100%", value: i = 0 }) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
893
- className: Z.base,
915
+ }, nt = ({ type: e = "normal", width: t = "100%", value: r = 0 }) => /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
916
+ className: rt.base,
894
917
  style: { width: t },
895
- children: /* @__PURE__ */ r("div", {
896
- className: J(Z.value, Z[e] ?? Z.normal),
897
- style: { width: `${i}%` }
918
+ children: /* @__PURE__ */ Z("div", {
919
+ className: J(rt.value, rt[e] ?? rt.normal),
920
+ style: { width: `${r}%` }
898
921
  })
899
- }) }), Z = {
922
+ }) }), rt = {
900
923
  base: Y`
901
924
  position: relative;
902
925
  border-radius: 16px;
@@ -914,27 +937,27 @@ var et = {
914
937
  transition: width .3s ease;
915
938
  `,
916
939
  normal: Y`
917
- border: solid 1px ${t(X.colors.primary, .3)};
940
+ border: solid 1px ${o(X.colors.primary, .3)};
918
941
  background-color: ${X.colors.primary};
919
942
  `,
920
943
  danger: Y`
921
- border: solid 1px ${t(X.colors.danger, .3)};
944
+ border: solid 1px ${o(X.colors.danger, .3)};
922
945
  background-color: ${X.colors.danger};
923
946
  `
924
947
  };
925
948
  //#endregion
926
949
  //#region src/components/_box.jsx
927
- function nt({ className: e, width: t, height: i, children: a }) {
928
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
929
- className: J(rt.base, e),
950
+ function it({ className: e, width: t, height: r, children: i }) {
951
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
952
+ className: J(at.base, e),
930
953
  style: {
931
954
  width: t,
932
- height: i
955
+ height: r
933
956
  },
934
- children: a
957
+ children: i
935
958
  }) });
936
959
  }
937
- var rt = { base: Y`
960
+ var at = { base: Y`
938
961
  position: relative;
939
962
  border-radius: 18px;
940
963
  border: solid 2px #eee;
@@ -944,20 +967,20 @@ var rt = { base: Y`
944
967
  ` };
945
968
  //#endregion
946
969
  //#region src/components/_icon.jsx
947
- function Q({ className: e, size: t = "1.25rem", color: i = X.colors.fore.primary, iconName: a, isSpinning: o }) {
948
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("svg", {
949
- className: J(it.base, e),
970
+ function Q({ className: e, size: t = "1.25rem", color: r = X.colors.fore.primary, iconName: i, isSpinning: a }) {
971
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("svg", {
972
+ className: J(ot.base, e),
950
973
  style: {
951
- color: i,
974
+ color: r,
952
975
  width: t,
953
976
  height: t
954
977
  },
955
978
  "aria-hidden": "true",
956
- "is-spinning": o || void 0,
957
- children: /* @__PURE__ */ r("use", { href: `#icon-${a}` })
979
+ "is-spinning": a || void 0,
980
+ children: /* @__PURE__ */ Z("use", { href: `#icon-${i}` })
958
981
  }) });
959
982
  }
960
- var it = { base: Y`
983
+ var ot = { base: Y`
961
984
  fill: currentColor;
962
985
  display: inline-block;
963
986
  flex-shrink: 0;
@@ -983,54 +1006,54 @@ var it = { base: Y`
983
1006
  ` };
984
1007
  //#endregion
985
1008
  //#region src/components/_button.jsx
986
- function at({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, isLoading: c = !1, onClick: l }) {
987
- let u = o || c, d = a(null);
988
- function f(e) {
989
- if (s || c) return;
1009
+ function st({ type: e = "primary", label: t, iconName: r, isDisabled: a = !1, isLoading: o = !1, onClick: s }) {
1010
+ let c = r || o, l = i(null);
1011
+ function u(e) {
1012
+ if (a || o) return;
990
1013
  e.stopPropagation(), e.preventDefault();
991
1014
  let t = e.currentTarget.getBoundingClientRect();
992
- d.value = {
1015
+ l.value = {
993
1016
  x: e.clientX - t.left,
994
1017
  y: e.clientY - t.top,
995
1018
  size: Math.max(t.width, t.height) * 2
996
- }, l?.(e);
1019
+ }, s?.(e);
997
1020
  }
998
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("button", {
1021
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("button", {
999
1022
  type: "button",
1000
- className: J($.base, $[e] ?? $.normal),
1001
- "has-icon": u,
1002
- "is-disabled": s || void 0,
1003
- "is-loading": c || void 0,
1004
- "is-clickable": !!l || void 0,
1005
- disabled: s || c,
1006
- onClick: f,
1023
+ className: J(lt.base, lt[e] ?? lt.normal),
1024
+ "has-icon": c,
1025
+ "is-disabled": a || void 0,
1026
+ "is-loading": o || void 0,
1027
+ "is-clickable": !!s || void 0,
1028
+ disabled: a || o,
1029
+ onClick: u,
1007
1030
  children: [
1008
- u && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
1031
+ c && /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1009
1032
  className: Y`
1010
1033
  ${X.extends.verticalCenter}
1011
1034
 
1012
1035
  left: .5rem;
1013
1036
  `,
1014
- children: c ? /* @__PURE__ */ r(Q, {
1037
+ children: o ? /* @__PURE__ */ Z(Q, {
1015
1038
  name: "loader",
1016
1039
  isSpinning: !0
1017
- }) : /* @__PURE__ */ r(Q, { name: o })
1040
+ }) : /* @__PURE__ */ Z(Q, { name: r })
1018
1041
  }) }),
1019
1042
  t,
1020
- d.value && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("span", {
1021
- className: $.ripple,
1043
+ l.value && /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("span", {
1044
+ className: lt.ripple,
1022
1045
  style: {
1023
- left: d.value.x,
1024
- top: d.value.y,
1025
- width: d.value.size,
1026
- height: d.value.size
1046
+ left: l.value.x,
1047
+ top: l.value.y,
1048
+ width: l.value.size,
1049
+ height: l.value.size
1027
1050
  },
1028
- onAnimationEnd: () => d.value = null
1051
+ onAnimationEnd: () => l.value = null
1029
1052
  }) })
1030
1053
  ]
1031
1054
  }) });
1032
1055
  }
1033
- var ot = Ye`
1056
+ var ct = Ye`
1034
1057
  from {
1035
1058
  opacity: .4;
1036
1059
  transform: translate(-50%, -50%) scale(0);
@@ -1040,7 +1063,7 @@ var ot = Ye`
1040
1063
  opacity: 0;
1041
1064
  transform: translate(-50%, -50%) scale(1);
1042
1065
  }
1043
- `, $ = {
1066
+ `, lt = {
1044
1067
  base: Y`
1045
1068
  font-size: .9rem;
1046
1069
  display: inline-block;
@@ -1063,13 +1086,13 @@ var ot = Ye`
1063
1086
  &[has-icon] { padding-left: 1.8rem; }
1064
1087
  `,
1065
1088
  primary: Y`
1066
- color: ${t(X.colors.primary, .6)};
1067
- border-bottom: solid 3px ${t(X.colors.primary, .25)};
1089
+ color: ${o(X.colors.primary, .6)};
1090
+ border-bottom: solid 3px ${o(X.colors.primary, .25)};
1068
1091
  background-color: ${X.colors.primary};
1069
1092
  `,
1070
1093
  secondary: Y`
1071
1094
  color: ${X.colors.fore.secondary};
1072
- border-bottom: solid 3px ${t(X.colors.secondary, .25)};
1095
+ border-bottom: solid 3px ${o(X.colors.secondary, .25)};
1073
1096
  background-color: ${X.colors.secondary};
1074
1097
  `,
1075
1098
  ripple: Y`
@@ -1078,37 +1101,37 @@ var ot = Ye`
1078
1101
  border-radius: 50%;
1079
1102
  pointer-events: none;
1080
1103
  background-color: currentColor;
1081
- animation: ${ot} .5s ease-out forwards;
1104
+ animation: ${ct} .5s ease-out forwards;
1082
1105
  `
1083
1106
  };
1084
1107
  //#endregion
1085
1108
  //#region src/components/_layout.jsx
1086
- function st({ className: e, height: t, direction: i = "row", justify: a, align: o, gap: s, children: c }) {
1087
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
1088
- className: J(ct.base, e),
1109
+ function ut({ className: e, height: t, direction: r = "row", justify: i, align: a, gap: o, children: s }) {
1110
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1111
+ className: J(dt.base, e),
1089
1112
  style: {
1090
1113
  height: t,
1091
- flexDirection: i,
1092
- justifyContent: a,
1093
- alignItems: o,
1094
- gap: s == null ? void 0 : `${s / 2}rem`
1114
+ flexDirection: r,
1115
+ justifyContent: i,
1116
+ alignItems: a,
1117
+ gap: o == null ? void 0 : `${o / 2}rem`
1095
1118
  },
1096
- children: c
1119
+ children: s
1097
1120
  }) });
1098
1121
  }
1099
- var ct = { base: Y`
1122
+ var dt = { base: Y`
1100
1123
  display: flex;
1101
1124
  ` };
1102
1125
  //#endregion
1103
1126
  //#region src/components/_text.jsx
1104
- function lt({ as: e = "span", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
1105
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
1106
- className: J(ut.base, ut[i] ?? ut.normal, t),
1107
- style: { color: a },
1108
- children: o
1127
+ function ft({ as: e = "span", className: t, size: r = "normal", color: i = X.colors.fore.primary, children: a }) {
1128
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z(e, {
1129
+ className: J(pt.base, pt[r] ?? pt.normal, t),
1130
+ style: { color: i },
1131
+ children: a
1109
1132
  }) });
1110
1133
  }
1111
- var ut = {
1134
+ var pt = {
1112
1135
  base: Y`
1113
1136
  font-weight: 500;
1114
1137
  letter-spacing: 1px;
@@ -1128,14 +1151,14 @@ var ut = {
1128
1151
  };
1129
1152
  //#endregion
1130
1153
  //#region src/components/_headline.jsx
1131
- function dt({ as: e = "h2", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
1132
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
1133
- className: J(ft.base, ft[i] ?? ft.normal, t),
1134
- style: { color: a },
1135
- children: o
1154
+ function mt({ as: e = "h2", className: t, size: r = "normal", color: i = X.colors.fore.primary, children: a }) {
1155
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z(e, {
1156
+ className: J(ht.base, ht[r] ?? ht.normal, t),
1157
+ style: { color: i },
1158
+ children: a
1136
1159
  }) });
1137
1160
  }
1138
- var ft = {
1161
+ var ht = {
1139
1162
  base: Y`
1140
1163
  letter-spacing: 1px;
1141
1164
  `,
@@ -1157,8 +1180,8 @@ var ft = {
1157
1180
  };
1158
1181
  //#endregion
1159
1182
  //#region src/components/_space.jsx
1160
- function pt({ size: e = 1 }) {
1161
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
1183
+ function gt({ size: e = 1 }) {
1184
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1162
1185
  "aria-hidden": "true",
1163
1186
  style: {
1164
1187
  height: e > 0 ? `${e}rem` : 0,
@@ -1168,31 +1191,31 @@ function pt({ size: e = 1 }) {
1168
1191
  }
1169
1192
  //#endregion
1170
1193
  //#region src/components/_text-field.jsx
1171
- function mt({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c }) {
1172
- let l = a(Date.now()), u = a(t);
1173
- function d({ target: e }) {
1174
- u.value = e.value, c?.(u.value);
1194
+ function _t({ placeholder: e, value: r, width: a, isDisabled: o, onChange: s }) {
1195
+ let c = t(), l = i(r);
1196
+ function u({ target: e }) {
1197
+ l.value = e.value, s?.(l.value);
1175
1198
  }
1176
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
1177
- className: ht.base,
1178
- style: { width: o },
1179
- "is-disabled": s,
1180
- children: [!u.value && e && /* @__PURE__ */ r("label", {
1181
- className: ht.label,
1182
- for: l.value,
1199
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1200
+ className: vt.base,
1201
+ style: { width: a },
1202
+ "is-disabled": o,
1203
+ children: [!l.value && e && /* @__PURE__ */ Z("label", {
1204
+ className: vt.label,
1205
+ htmlFor: c,
1183
1206
  children: e
1184
- }), /* @__PURE__ */ r("input", {
1185
- id: l,
1186
- name: l,
1187
- className: ht.input,
1188
- value: u.value,
1189
- disabled: s,
1207
+ }), /* @__PURE__ */ Z("input", {
1208
+ id: c,
1209
+ name: c,
1210
+ className: vt.input,
1211
+ value: l.value,
1212
+ disabled: o,
1190
1213
  autocomplete: "off",
1191
- onInput: d
1214
+ onInput: u
1192
1215
  })]
1193
1216
  }) });
1194
1217
  }
1195
- var ht = {
1218
+ var vt = {
1196
1219
  base: Y`
1197
1220
  position: relative;
1198
1221
  `,
@@ -1223,40 +1246,40 @@ var ht = {
1223
1246
  color: ${X.colors.fore.primary};
1224
1247
  background-color: ${X.colors.back.secondary};
1225
1248
  `
1226
- }, gt = 28, _t = 3, vt = 11;
1227
- function yt({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
1228
- let l = a(Date.now()), u = a(t);
1229
- o(() => u.value = t, [t]);
1230
- function d() {
1231
- let e = !u.value;
1232
- u.value = e, c?.(e);
1249
+ }, yt = 28, bt = 3, xt = 11;
1250
+ function St({ label: r, isChecked: a, isDisabled: o, onChange: s }) {
1251
+ let c = t(), l = i(a);
1252
+ e(() => l.value = a, [a]);
1253
+ function u() {
1254
+ let e = !l.value;
1255
+ l.value = e, s?.(e);
1233
1256
  }
1234
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
1235
- className: bt.base,
1257
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1258
+ className: Ct.base,
1236
1259
  children: [
1237
- /* @__PURE__ */ r("label", {
1238
- className: bt.label,
1239
- htmlFor: l.value,
1240
- "is-disabled": s,
1241
- children: e
1260
+ /* @__PURE__ */ Z("label", {
1261
+ className: Ct.label,
1262
+ htmlFor: c,
1263
+ "is-disabled": o,
1264
+ children: r
1242
1265
  }),
1243
- /* @__PURE__ */ r("input", {
1244
- id: l.value,
1266
+ /* @__PURE__ */ Z("input", {
1267
+ id: c,
1245
1268
  type: "checkbox",
1246
- className: bt.checkbox,
1247
- checked: u.value,
1248
- disabled: s,
1249
- onChange: d
1269
+ className: Ct.checkbox,
1270
+ checked: l.value,
1271
+ disabled: o,
1272
+ onChange: u
1250
1273
  }),
1251
- /* @__PURE__ */ r("label", {
1252
- className: bt.value,
1253
- htmlFor: l.value,
1254
- "is-disabled": s
1274
+ /* @__PURE__ */ Z("label", {
1275
+ className: Ct.value,
1276
+ htmlFor: c,
1277
+ "is-disabled": o
1255
1278
  })
1256
1279
  ]
1257
1280
  }) });
1258
1281
  }
1259
- var bt = {
1282
+ var Ct = {
1260
1283
  base: Y`
1261
1284
  position: relative;
1262
1285
  display: flex;
@@ -1280,7 +1303,7 @@ var bt = {
1280
1303
  background-color: #e1e1e1;
1281
1304
 
1282
1305
  &:before {
1283
- right: ${_t}px;
1306
+ right: ${bt}px;
1284
1307
  background-color: #3a3a3a;
1285
1308
  }
1286
1309
  }
@@ -1294,7 +1317,7 @@ var bt = {
1294
1317
  cursor: pointer;
1295
1318
  user-select: none;
1296
1319
  transition: background .3s ease;
1297
- width: ${gt}px;
1320
+ width: ${yt}px;
1298
1321
 
1299
1322
  &:before {
1300
1323
  background-color: #e1e1e1;
@@ -1303,30 +1326,30 @@ var bt = {
1303
1326
  position: absolute;
1304
1327
  transition: background .3s ease, right .3s ease;
1305
1328
  border-radius: 50%;
1306
- top: ${_t}px;
1329
+ top: ${bt}px;
1307
1330
  right: ${14}px;
1308
- width: ${vt}px;
1309
- height: ${vt}px;
1331
+ width: ${xt}px;
1332
+ height: ${xt}px;
1310
1333
  }
1311
1334
  `
1312
1335
  };
1313
1336
  //#endregion
1314
1337
  //#region src/components/_tag.jsx
1315
- function xt({ className: t, variant: a = "normal", iconName: o, label: s }) {
1316
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
1317
- className: J(St.base, St[a] ?? St.normal, t),
1318
- "has-icon": !e(o),
1319
- children: [o && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(Q, {
1338
+ function wt({ className: e, variant: t = "normal", iconName: r, label: i }) {
1339
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1340
+ className: J(Tt.base, Tt[t] ?? Tt.normal, e),
1341
+ "has-icon": !a(r),
1342
+ children: [r && /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z(Q, {
1320
1343
  className: Y`
1321
1344
  ${X.extends.verticalCenter}
1322
1345
  left: .3rem;
1323
1346
  `,
1324
- name: o,
1347
+ name: r,
1325
1348
  size: ".9rem"
1326
- }) }), s]
1349
+ }) }), i]
1327
1350
  }) });
1328
1351
  }
1329
- var St = { base: Y`
1352
+ var Tt = { base: Y`
1330
1353
  position: relative;
1331
1354
  display: inline-block;
1332
1355
  padding: .3rem .5rem;
@@ -1342,25 +1365,25 @@ var St = { base: Y`
1342
1365
  ` };
1343
1366
  //#endregion
1344
1367
  //#region src/components/_icon-button.jsx
1345
- function Ct({ iconName: e, color: t, isDisabled: i, onClick: a }) {
1346
- function o(e) {
1347
- i || (e.stopPropagation(), e.preventDefault(), a?.(e));
1368
+ function Et({ iconName: e, color: t, isDisabled: r, onClick: i }) {
1369
+ function a(e) {
1370
+ r || (e.stopPropagation(), e.preventDefault(), i?.(e));
1348
1371
  }
1349
- return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("button", {
1350
- className: wt.base,
1351
- "is-disabled": i || void 0,
1352
- "is-clickable": !!a || void 0,
1353
- disabled: i,
1354
- onClick: o,
1355
- children: /* @__PURE__ */ r(Q, {
1372
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("button", {
1373
+ className: Dt.base,
1374
+ "is-disabled": r || void 0,
1375
+ "is-clickable": !!i || void 0,
1376
+ disabled: r,
1377
+ onClick: a,
1378
+ children: /* @__PURE__ */ Z(Q, {
1356
1379
  color: t,
1357
1380
  className: Y`${X.extends.centrate}`,
1358
1381
  iconName: e,
1359
- isDisabled: i
1382
+ isDisabled: r
1360
1383
  })
1361
1384
  }) });
1362
1385
  }
1363
- var wt = { base: Y`
1386
+ var Dt = { base: Y`
1364
1387
  position: relative;
1365
1388
  width: 2.25rem;
1366
1389
  height: 2.25rem;
@@ -1376,4 +1399,136 @@ var wt = { base: Y`
1376
1399
  }
1377
1400
  ` };
1378
1401
  //#endregion
1379
- 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 };
1402
+ //#region src/components/_tab-box.jsx
1403
+ function Ot({ className: e, width: r, height: a, initialIndex: o = 0, items: s = [], onChange: c }) {
1404
+ let l = t(), u = Math.max(s.length - 1, 0), d = i(Math.min(Math.max(o, 0), u)), f = Math.min(d.value, u);
1405
+ function p(e) {
1406
+ e !== f && (d.value = e, c?.(e, s[e]));
1407
+ }
1408
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1409
+ className: J($.base, e),
1410
+ style: { width: r },
1411
+ children: [/* @__PURE__ */ Z(it, {
1412
+ className: $.box,
1413
+ height: a,
1414
+ children: /* @__PURE__ */ Z("div", {
1415
+ className: $.track,
1416
+ style: { transform: `translateX(-${f * 100}%)` },
1417
+ children: s.map((e, t) => /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1418
+ id: `${l}-panel-${t}`,
1419
+ className: $.panel,
1420
+ role: "tabpanel",
1421
+ "aria-labelledby": `${l}-tab-${t}`,
1422
+ "aria-hidden": t !== f,
1423
+ inert: t !== f || void 0,
1424
+ children: e.content
1425
+ }, e.id ?? t) }))
1426
+ })
1427
+ }), s.length > 0 && /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("div", {
1428
+ className: $.tabs,
1429
+ role: "tablist",
1430
+ children: s.map((e, t) => {
1431
+ let r = t === f, i = e.notification != null;
1432
+ return /* @__PURE__ */ Z(n, { children: /* @__PURE__ */ Z("button", {
1433
+ id: `${l}-tab-${t}`,
1434
+ className: $.tab,
1435
+ type: "button",
1436
+ role: "tab",
1437
+ "aria-controls": `${l}-panel-${t}`,
1438
+ "aria-label": e.label ?? `Tab ${t + 1}`,
1439
+ "aria-selected": r,
1440
+ tabIndex: r ? 0 : -1,
1441
+ "is-active": r || void 0,
1442
+ onClick: () => p(t),
1443
+ children: [
1444
+ e.iconName && /* @__PURE__ */ Z(Q, {
1445
+ iconName: e.iconName,
1446
+ size: "1rem"
1447
+ }),
1448
+ e.label && /* @__PURE__ */ Z("span", { children: e.label }),
1449
+ i && /* @__PURE__ */ Z("span", {
1450
+ className: $.notification,
1451
+ "aria-label": `${e.notification} notifications`,
1452
+ children: e.notification
1453
+ })
1454
+ ]
1455
+ }, e.id ?? t) });
1456
+ })
1457
+ }) })]
1458
+ }) });
1459
+ }
1460
+ var $ = {
1461
+ base: Y`
1462
+ position: relative;
1463
+ max-width: 100%;
1464
+ `,
1465
+ box: Y`
1466
+ z-index: ${X.zIndex.front};
1467
+ width: 100%;
1468
+ padding: 0;
1469
+ overflow: hidden;
1470
+ `,
1471
+ track: Y`
1472
+ display: flex;
1473
+ width: 100%;
1474
+ min-height: 100%;
1475
+ will-change: transform;
1476
+ transition: transform .35s cubic-bezier(.22, .61, .36, 1);
1477
+
1478
+ @media (prefers-reduced-motion: reduce) { transition: none; }
1479
+ `,
1480
+ panel: Y`
1481
+ flex: 0 0 100%;
1482
+ min-width: 0;
1483
+ padding: 1.875rem 1.25rem;
1484
+ `,
1485
+ tabs: Y`
1486
+ display: flex;
1487
+ position: relative;
1488
+ margin-top: -1rem;
1489
+ overflow: hidden;
1490
+ border: solid 2px #eee;
1491
+ border-top: 0;
1492
+ border-radius: 0 0 18px 18px;
1493
+ background-color: ${X.colors.back.secondary};
1494
+ `,
1495
+ tab: Y`
1496
+ display: flex;
1497
+ flex: 1 1 0;
1498
+ align-items: center;
1499
+ justify-content: center;
1500
+ gap: .4rem;
1501
+ min-width: 0;
1502
+ min-height: 3.6rem;
1503
+ padding: 1.5rem .5rem .5rem .5rem;
1504
+ cursor: pointer;
1505
+ font-size: .8rem;
1506
+ font-weight: 600;
1507
+ transition: color .2s ease, background-color .2s ease;
1508
+ color: ${X.colors.fore.secondary};
1509
+ font-family: ${X.fontFamily}, sans-serif;
1510
+
1511
+ & + & { border-left: solid 1px #e5e7e9; }
1512
+
1513
+ &[is-active] {
1514
+ color: ${X.colors.fore.primary};
1515
+ background-color: ${X.colors.back.primary};
1516
+ }
1517
+ `,
1518
+ notification: Y`
1519
+ display: inline-flex;
1520
+ align-items: center;
1521
+ justify-content: center;
1522
+ min-width: 1.2rem;
1523
+ height: 1.2rem;
1524
+ padding: 0 .2rem;
1525
+ border-radius: 50%;
1526
+ font-size: .7rem;
1527
+ font-weight: 700;
1528
+ line-height: 1;
1529
+ color: ${X.colors.fore.primary};
1530
+ background-color: ${X.colors.back.primary};
1531
+ `
1532
+ };
1533
+ //#endregion
1534
+ export { et as AppWrapper, nt as Bar, it as Box, st as Button, mt as Headline, Q as Icon, Et as IconButton, ut as Layout, gt as Space, St as Switch, Ot as TabBox, wt as Tag, ft as Text, _t as TextField, X as Theme };