melonykit 0.7.6 → 0.8.0

package/dist/index.js

@@ -742,7 +742,7 @@ var Qe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;wi
 	},
 	colors: {
 		primary: "#8adae8",
-		secondary: "#fba244",
+		secondary: "#fad6b3",
 		danger: "#fdcbc9",
 		border: "#c6cacd",
 		back: {
@@ -916,6 +916,10 @@ var nt = {
 	normal: J`
         border: solid 1px ${t(Y.colors.primary, .3)};
         background-color: ${Y.colors.primary};
+    `,
+	warn: J`
+        border: solid 1px ${t(Y.colors.secondary, .2)};
+        background-color: ${Y.colors.secondary};
     `,
 	danger: J`
         border: solid 1px ${t(Y.colors.danger, .3)};
@@ -924,24 +928,31 @@ var nt = {
 };
 //#endregion
 //#region src/components/_box.jsx
-function it({ className: e, width: t, height: n, children: r }) {
+function it({ type: e = "normal", className: t, width: n, height: r, children: i }) {
 	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
-		className: q(at.base, e),
+		className: q(at.base, at[e] ?? at.normal, t),
 		style: {
-			width: t,
-			height: n
+			width: n,
+			height: r
 		},
-		children: r
+		children: i
 	}) });
 }
-var at = { base: J`
+var at = {
+	base: J`
         position: relative;
         border-radius: 18px;
         border: solid 2px #eee;
         padding: 1.875rem 1.25rem;
-        background-color: ${Y.colors.back.primary};
         box-shadow: ${Y.colors.shadow.primary};
-    ` };
+    `,
+	normal: J`
+        background-color: ${Y.colors.back.primary};
+    `,
+	alternative: J`
+        background-color: #fafafa;
+    `
+};
 //#endregion
 //#region src/components/_icon.jsx
 function Z({ className: e, size: t = "1.25rem", color: n = Y.colors.fore.primary, iconName: r, isSpinning: i }) {
@@ -1009,12 +1020,12 @@ function st({ type: e = "primary", label: t, iconName: r, isDisabled: i = !1, is
 				className: J`
                     ${Y.extends.verticalCenter}
 
-                    left: .5rem;
+                    left: .6rem;
                 `,
 				children: c ? /* @__PURE__ */ o(Z, {
-					name: "loader",
+					iconName: "loader",
 					isSpinning: !0
-				}) : /* @__PURE__ */ o(Z, { name: r })
+				}) : /* @__PURE__ */ o(Z, { iconName: r })
 			}) }),
 			t,
 			d.value && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("span", {
@@ -1052,7 +1063,7 @@ var ct = Ze`
         font-weight: 600;
         border-radius: 12px;
         will-change: transform, border;
-        transition: transform .2s ease, border .2s ease;
+        transition: transform .1s linear, border .1s linear;
         font-family: ${Y.fontFamily}, sans-serif;
 
         &:active {
@@ -1060,15 +1071,15 @@ var ct = Ze`
             border-width: 1px;
         }
 
-        &[has-icon] { padding-left: 1.8rem; }
+        &[has-icon] { padding-left: 2rem; }
     `,
 	primary: J`
-        color: ${t(Y.colors.primary, .6)};
+        color: ${t(Y.colors.primary, .5)};
         border-bottom: solid 3px ${t(Y.colors.primary, .25)};
         background-color: ${Y.colors.primary};
     `,
 	secondary: J`
-        color: ${Y.colors.fore.secondary};
+        color: ${t(Y.colors.secondary, .5)};
         border-bottom: solid 3px ${t(Y.colors.secondary, .25)};
         background-color: ${Y.colors.secondary};
     `,
@@ -1118,11 +1129,11 @@ var ft = {
         line-height: 1.125rem;
     `,
 	small: J`
-        font-size: 0.75rem;
+        font-size: .75rem;
         line-height: 1rem;
     `,
 	tiny: J`
-        font-size: 0.65rem;
+        font-size: .65rem;
         line-height: 1rem;
     `
 };
@@ -1260,7 +1271,6 @@ var St = {
 	base: J`
         position: relative;
         display: flex;
-        padding: .2rem 0 0 2rem;
         gap: .5rem;
     `,
 	label: J`
@@ -1290,11 +1300,11 @@ var St = {
         position: relative;
         height: 1.1rem;
         border-radius: 12px;
-        background-color: #3a3a3a;
         cursor: pointer;
         user-select: none;
         transition: background .3s ease;
         width: ${vt}px;
+        background-color: ${Y.colors.back.secondary};
 
         &:before {
             background-color: #e1e1e1;
@@ -1365,15 +1375,7 @@ var Et = { base: J`
         width: 2.25rem;
         height: 2.25rem;
         border-radius: 8px;
-        will-change: transform, border;
-        transition: transform .1s ease, border .1s ease;
-        border-bottom: solid 2px ${Y.colors.border};
         background-color: ${Y.colors.back.secondary};
-
-        &:active {
-            transform: translateY(1px);
-            border-width: 1px;
-        }
     ` };
 //#endregion
 //#region src/components/_tab-box.jsx
@@ -1504,7 +1506,7 @@ var $ = {
         font-weight: 700;
         line-height: 1;
         color: ${Y.colors.fore.primary};
-        background-color: ${Y.colors.back.primary};
+        background-color: #e1e1e1;
     `
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
     "author": "Vadim Hermann",
     "name": "melonykit",
-    "version": "0.7.6",
+    "version": "0.8.0",
     "type": "module",
     "description": "Preact based ui and utility functions toolkit",
     "main": "./dist/index.js",