@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

package/dist/hooks/use-common-styles.js

@@ -1,18 +1,19 @@
-import { nmorphCombined as s, nmorphInset as r, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as e, body2 as p, body3 as a, body4 as m } from "../utils/theme-style.js";
-const u = {
-  "nmorph-body-4": m,
-  "nmorph-body-3": a,
-  "nmorph-body-2": p,
-  "nmorph-body-1": e,
-  "nmorph-title-4": b,
+import { nmorphPlainSurface as h, nmorphCombined as l, nmorphInset as t, nmorphOutset as p, title1 as s, title2 as m, title3 as c, title4 as g, body1 as n, body2 as d, body3 as b, body4 as v, typography as o } from "../utils/theme-style.js";
+const y = {
+  "nmorph-body-4": v,
+  "nmorph-body-3": b,
+  "nmorph-body-2": d,
+  "nmorph-body-1": n,
+  "nmorph-title-4": g,
   "nmorph-title-3": c,
-  "nmorph-title-2": d,
-  "nmorph-title-1": l,
-  "nmorph--shadow-outset": h,
-  "nmorph--shadow-inset": r,
-  "nmorph--shadow-combined": s
+  "nmorph-title-2": m,
+  "nmorph-title-1": s,
+  "nmorph--shadow-outset": p,
+  "nmorph--shadow-inset": t,
+  "nmorph--shadow-combined": l,
+  "nmorph--plain-surface": h
 }, w = () => {
-  let t = `
+  let e = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -22,11 +23,64 @@ const u = {
       --font-size-large: 18px;
       --font-size-extra-large: 20px;
 
+      --font-family-base: Helvetica, Roboto, Arial, sans-serif;
+      --font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+
+      --font-weight-regular: 400;
+      --font-weight-medium: 500;
+      --font-weight-semibold: 600;
+      --font-weight-bold: 700;
+      --font-weight-extrabold: 800;
+
       --line-height-line: 1;
+      --line-height-control: 1.15;
       --line-height-compact: 1.3;
       --line-height-regular: 1.5;
       --line-height-loose: 1.7;
 
+      --nmorph-typography-display-large-font-size: 32px;
+      --nmorph-typography-display-large-line-height: 1.15;
+      --nmorph-typography-display-large-font-weight: var(--font-weight-extrabold);
+      --nmorph-typography-display-medium-font-size: 24px;
+      --nmorph-typography-display-medium-line-height: 1.2;
+      --nmorph-typography-display-medium-font-weight: var(--font-weight-bold);
+      --nmorph-typography-title-large-font-size: var(--font-size-extra-large);
+      --nmorph-typography-title-large-line-height: var(--line-height-compact);
+      --nmorph-typography-title-large-font-weight: var(--font-weight-bold);
+      --nmorph-typography-title-font-size: var(--font-size-large);
+      --nmorph-typography-title-line-height: var(--line-height-compact);
+      --nmorph-typography-title-font-weight: var(--font-weight-semibold);
+      --nmorph-typography-title-small-font-size: var(--font-size-medium);
+      --nmorph-typography-title-small-line-height: var(--line-height-compact);
+      --nmorph-typography-title-small-font-weight: var(--font-weight-semibold);
+      --nmorph-typography-body-large-font-size: var(--font-size-base);
+      --nmorph-typography-body-large-line-height: var(--line-height-regular);
+      --nmorph-typography-body-large-font-weight: var(--font-weight-regular);
+      --nmorph-typography-body-font-size: var(--font-size-small);
+      --nmorph-typography-body-line-height: var(--line-height-regular);
+      --nmorph-typography-body-font-weight: var(--font-weight-regular);
+      --nmorph-typography-body-small-font-size: var(--font-size-extra-small);
+      --nmorph-typography-body-small-line-height: var(--line-height-regular);
+      --nmorph-typography-body-small-font-weight: var(--font-weight-regular);
+      --nmorph-typography-caption-font-size: var(--font-size-tiny);
+      --nmorph-typography-caption-line-height: var(--line-height-regular);
+      --nmorph-typography-caption-font-weight: var(--font-weight-regular);
+      --nmorph-typography-label-font-size: var(--font-size-small);
+      --nmorph-typography-label-line-height: var(--line-height-compact);
+      --nmorph-typography-label-font-weight: var(--font-weight-semibold);
+      --nmorph-typography-control-large-font-size: var(--font-size-base);
+      --nmorph-typography-control-large-line-height: var(--line-height-control);
+      --nmorph-typography-control-large-font-weight: var(--font-weight-regular);
+      --nmorph-typography-control-font-size: var(--font-size-small);
+      --nmorph-typography-control-line-height: var(--line-height-control);
+      --nmorph-typography-control-font-weight: var(--font-weight-regular);
+      --nmorph-typography-control-small-font-size: var(--font-size-extra-small);
+      --nmorph-typography-control-small-line-height: var(--line-height-control);
+      --nmorph-typography-control-small-font-weight: var(--font-weight-regular);
+      --nmorph-typography-control-tiny-font-size: var(--font-size-tiny);
+      --nmorph-typography-control-tiny-line-height: var(--line-height-line);
+      --nmorph-typography-control-tiny-font-weight: var(--font-weight-regular);
+
       --border-radius-none: 0px;
       --border-radius-20: 2px;
       --border-radius-40: 4px;
@@ -39,12 +93,11 @@ const u = {
       --default-border-radius: var(--border-radius-40);
 
       --thick-component: 38px;
-      --default-thickness-component: 30px;
-      --thin-component: 22px;
+      --basic-component: 30px;
+      --default-thickness-component: var(--basic-component);
+      --thin-component: 24px;
       --extra-thin-component: 14px;
 
-      --form-container: 280px;
-
       --default-indentation-input: 8px;
 
       --indentation-00: 0;
@@ -80,6 +133,8 @@ const u = {
         inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
           var(--nmorph-dark-shade-color);
       --nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
+      --nmorph-plain-border-color: color-mix(in srgb, var(--nmorph-text-color) 18%, transparent);
+      --nmorph-plain-border: 1.5px solid var(--nmorph-plain-border-color);
 
       --transition-04: 0.4s;
       --transition-03: 0.3s;
@@ -110,9 +165,9 @@ const u = {
     body {
       margin: 0;
       width: auto;
-      font-family: Helvetica, Roboto, Arial, sans-serif;
+      font-family: var(--font-family-base);
 
-      ${e()}
+      ${n()}
     }
 
     h1 {
@@ -260,7 +315,7 @@ const u = {
     }
 
     .nmorph-scroll {
-      --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
+      --nmorph-private-scroll-thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
 
       position: relative;
       overflow: hidden;
@@ -298,7 +353,7 @@ const u = {
       z-index: 1;
       border-radius: var(--border-radius-40);
       background: transparent;
-      ${r()}
+      ${t()}
       opacity: 0.78;
       transition:
         opacity ease-in-out 0.16s,
@@ -309,14 +364,14 @@ const u = {
     .nmorph-scroll__bar--vertical {
       top: 0;
       right: 0;
-      width: var(--bar-width);
+      width: var(--nmorph-private-scroll-bar-width);
     }
 
     .nmorph-scroll__bar--horizontal {
       right: 0;
       bottom: 0;
       left: 0;
-      height: var(--bar-height);
+      height: var(--nmorph-private-scroll-bar-height);
     }
 
     .nmorph-scroll__thumb {
@@ -324,7 +379,7 @@ const u = {
       top: 0;
       left: 0;
       border-radius: var(--border-radius-40);
-      background-color: var(--thumb-color);
+      background-color: var(--nmorph-private-scroll-thumb-color);
       cursor: pointer;
       transition: background-color ease-in-out 0.16s;
       touch-action: none;
@@ -348,8 +403,8 @@ const u = {
     }
 
     .nmorph-scroll::-webkit-scrollbar {
-      width: var(--bar-width);
-      height: var(--bar-height);
+      width: var(--nmorph-private-scroll-bar-width);
+      height: var(--nmorph-private-scroll-bar-height);
       background-color: transparent;
       cursor: pointer;
       transition: width ease-in-out 0.2s;
@@ -378,11 +433,11 @@ const u = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${r()}
+      ${t()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
-      background-color: var(--thumb-color);
+      background-color: var(--nmorph-private-scroll-thumb-color);
       border-radius: var(--border-radius-40);
     }
 
@@ -390,32 +445,156 @@ const u = {
       background-color: transparent;
     }
 
+    .nmorph-typography {
+      margin: 0;
+      color: var(--nmorph-private-text-color, var(--nmorph-text-color));
+      font-family: var(--font-family-base);
+      text-align: var(--nmorph-private-text-align, inherit);
+    }
+
+    .nmorph-typography--display-large {
+      ${o("display-large")}
+    }
+
+    .nmorph-typography--display-medium {
+      ${o("display-medium")}
+    }
+
+    .nmorph-typography--title-large {
+      ${o("title-large")}
+    }
+
+    .nmorph-typography--title {
+      ${o("title")}
+    }
+
+    .nmorph-typography--title-small {
+      ${o("title-small")}
+    }
+
+    .nmorph-typography--body-large {
+      ${o("body-large")}
+    }
+
+    .nmorph-typography--body {
+      ${o("body")}
+    }
+
+    .nmorph-typography--body-small {
+      ${o("body-small")}
+    }
+
+    .nmorph-typography--caption {
+      ${o("caption")}
+    }
+
+    .nmorph-typography--label {
+      ${o("label")}
+    }
+
+    .nmorph-typography--control-large {
+      ${o("control-large")}
+    }
+
+    .nmorph-typography--control {
+      ${o("control")}
+    }
+
+    .nmorph-typography--control-small {
+      ${o("control-small")}
+    }
+
+    .nmorph-typography--control-tiny {
+      ${o("control-tiny")}
+    }
+
+    .nmorph-typography--regular {
+      font-weight: var(--font-weight-regular);
+    }
+
+    .nmorph-typography--medium {
+      font-weight: var(--font-weight-medium);
+    }
+
+    .nmorph-typography--semibold {
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .nmorph-typography--bold {
+      font-weight: var(--font-weight-bold);
+    }
+
+    .nmorph-typography--extrabold {
+      font-weight: var(--font-weight-extrabold);
+    }
+
+    .nmorph-typography--truncate {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .nmorph-typography--nowrap {
+      white-space: nowrap;
+    }
+
+    .nmorph-typography--line-clamp {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--nmorph-private-text-line-clamp);
+    }
+
     .nmorph--basic-component {
-      --height: var(--default-thickness-component);
+      --nmorph-private-control-height: var(--basic-component);
+      --nmorph-private-control-font-size: var(--nmorph-typography-control-font-size);
+      --nmorph-private-control-line-height: var(--nmorph-typography-control-line-height);
+      --nmorph-private-control-font-weight: var(--nmorph-typography-control-font-weight);
+      --nmorph-private-control-text-offset-y: 0px;
 
-      height: var(--height);
+      height: var(--nmorph-private-control-height);
+      font-weight: var(--nmorph-private-control-font-weight);
+      font-size: var(--nmorph-private-control-font-size);
+      line-height: var(--nmorph-private-control-line-height);
     }
 
     .nmorph--thin-component {
-      --height: var(--thin-component);
+      --nmorph-private-control-height: var(--thin-component);
+      --nmorph-private-control-font-size: var(--nmorph-typography-control-small-font-size);
+      --nmorph-private-control-line-height: var(--nmorph-typography-control-small-line-height);
+      --nmorph-private-control-font-weight: var(--nmorph-typography-control-small-font-weight);
+      --nmorph-private-control-text-offset-y: 1px;
 
-      height: var(--height);
+      height: var(--nmorph-private-control-height);
+      font-weight: var(--nmorph-private-control-font-weight);
+      font-size: var(--nmorph-private-control-font-size);
+      line-height: var(--nmorph-private-control-line-height);
     }
 
     .nmorph--extra-thin-component {
-      --height: var(--extra-thin-component);
+      --nmorph-private-control-height: var(--extra-thin-component);
+      --nmorph-private-control-font-size: var(--nmorph-typography-control-tiny-font-size);
+      --nmorph-private-control-line-height: var(--nmorph-typography-control-tiny-line-height);
+      --nmorph-private-control-font-weight: var(--nmorph-typography-control-tiny-font-weight);
+      --nmorph-private-control-text-offset-y: 0px;
 
-      height: var(--height);
+      height: var(--nmorph-private-control-height);
+      font-weight: var(--nmorph-private-control-font-weight);
+      font-size: var(--nmorph-private-control-font-size);
+      line-height: var(--nmorph-private-control-line-height);
     }
 
     .nmorph--thick-component {
-      --height: var(--thick-component);
-
-      height: var(--height);
-    }
+      --nmorph-private-control-height: var(--thick-component);
+      --nmorph-private-control-font-size: var(--nmorph-typography-control-large-font-size);
+      --nmorph-private-control-line-height: var(--nmorph-typography-control-large-line-height);
+      --nmorph-private-control-font-weight: var(--nmorph-typography-control-large-font-weight);
+      --nmorph-private-control-text-offset-y: 0px;
 
-    .nmorph--thin-component.nmorph-native-input {
-      ${a()}
+      height: var(--nmorph-private-control-height);
+      font-weight: var(--nmorph-private-control-font-weight);
+      font-size: var(--nmorph-private-control-font-size);
+      line-height: var(--nmorph-private-control-line-height);
     }
 
     .nmorph-native-input:focus {
@@ -443,7 +622,7 @@ const u = {
 
     .nmorph--focused {
       .nmorph-icon svg {
-        --color: var(--nmorph-focus-text-color);
+        --nmorph-private-icon-color: var(--nmorph-focus-text-color);
       }
     }
 
@@ -489,19 +668,19 @@ const u = {
     }
 
   `;
-  for (const [n, i] of Object.entries(u))
-    t += `
-.${n} {
+  for (const [a, i] of Object.entries(y))
+    e += `
+.${a} {
   ${i()}
 }
 `;
-  return t;
-}, g = () => {
+  return e;
+}, u = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
-  const o = document.createElement("style");
-  o.id = "nmorph-common-styles", o.innerHTML = w(), document.head.appendChild(o);
+  const r = document.createElement("style");
+  r.id = "nmorph-common-styles", r.innerHTML = w(), document.head.appendChild(r);
 };
 export {
   w as getCommonStyles,
-  g as useCommonStyles
+  u as useCommonStyles
 };

package/dist/hooks/use-field-validation.js

@@ -1,35 +1,35 @@
-import { isFileAllowedByTypes as z } from "../utils/file-types.js";
-import { ref as h } from "vue";
-const v = (n) => typeof File < "u" && n instanceof File, S = (n) => !!n && typeof n == "object" && "data" in n && v(n.data), I = (n) => {
-  if (v(n)) return [n];
+import { isFileAllowedByTypes as M } from "../utils/file-types.js";
+import { ref as m } from "vue";
+const h = (n) => typeof File < "u" && n instanceof File, I = (n) => !!n && typeof n == "object" && "data" in n && h(n.data), q = (n) => {
+  if (h(n)) return [n];
   if (!Array.isArray(n)) return null;
-  const u = n;
-  return u.length === 0 ? [] : u.every(v) ? u : u.every(S) ? u.map((l) => l.data) : null;
+  const l = n;
+  return l.length === 0 ? [] : l.every(h) ? l : l.every(I) ? l.map((a) => a.data) : null;
 }, D = (n) => {
-  const { inputValue: u, rules: l } = n, p = h([]), y = h(!1), m = h(!1);
+  const { inputValue: l, rules: a } = n, f = m([]), d = m(!1), y = m(!1);
   return {
-    touched: m,
-    valid: y,
-    errors: p,
+    touched: y,
+    valid: d,
+    errors: f,
     validate: () => {
-      const F = l?.length > 0;
-      if (p.value = [], !F) {
-        y.value = !0;
+      const v = a?.length > 0;
+      if (f.value = [], !v) {
+        d.value = !0;
         return;
       }
-      if (u === null) return;
-      const o = u, a = (s) => F && l.some((r) => s in r), T = typeof o == "string" && a("pattern"), g = typeof o == "number" && a("numberCompareType"), x = (typeof o == "string" || typeof o == "boolean") && a("booleanCompareType"), b = Array.isArray(o) && a("arrayCompareType"), w = a("fileMaxSize") || a("maxFileSize") || a("fileAllowedTypes") || a("allowedTypes") || a("fileMaxCount") || a("maxFiles"), A = w ? I(o) : null, C = w && A !== null;
-      if (!g && !T && !x && !b && !C) {
+      if (l === null) return;
+      const s = l, u = (i) => v && a.some((r) => i in r), g = typeof s == "string" && u("pattern"), T = typeof s == "number" && u("numberCompareType"), b = (typeof s == "string" || typeof s == "boolean") && u("booleanCompareType"), A = Array.isArray(s) && u("arrayCompareType"), C = u("fileMaxSize") || u("fileAllowedTypes") || u("fileMaxCount"), w = C ? q(s) : null, x = C && w !== null;
+      if (!T && !g && !b && !A && !x) {
         console.warn("The input value and the provided rules do not match");
         return;
       }
-      if (m.value || (m.value = !0), T) {
-        const s = l;
-        p.value = s.reduce((r, t) => (o.match(t.pattern) || r.push(t.error), r), []);
+      if (y.value || (y.value = !0), g) {
+        const i = a;
+        f.value = i.reduce((r, t) => (s.match(t.pattern) || r.push(t.error), r), []);
       }
-      if (g) {
-        const s = (t, e, i) => {
-          switch (i) {
+      if (T) {
+        const i = (t, e, o) => {
+          switch (o) {
             case "eq":
               return t === e;
             case "gt":
@@ -41,44 +41,41 @@ const v = (n) => typeof File < "u" && n instanceof File, S = (n) => !!n && typeo
             case "gte":
               return t >= e;
           }
-        }, r = l;
-        p.value = r.reduce((t, e) => (s(o, e.compareValue, e.numberCompareType) && t.push(e.error), t), []);
+        }, r = a;
+        f.value = r.reduce((t, e) => (i(s, e.compareValue, e.numberCompareType) && t.push(e.error), t), []);
       }
-      if (x) {
-        const s = l;
-        p.value = s.reduce((r, t) => {
+      if (b) {
+        const i = a;
+        f.value = i.reduce((r, t) => {
           let e = !1;
-          const { compareValue: i, booleanCompareType: f } = t;
-          return f === "not-eq" && (e = o === i), f === "eq" && (e = o !== i), e || r.push(t.error), r;
+          const { compareValue: o, booleanCompareType: c } = t;
+          return c === "not-eq" && (e = s === o), c === "eq" && (e = s !== o), e || r.push(t.error), r;
         }, []);
       }
-      if (b) {
-        const s = l, r = (t, e, i) => {
-          switch (i) {
+      if (A) {
+        const i = a, r = (t, e, o) => {
+          switch (o) {
             case "contains-one":
-              return t.some((c) => e.includes(c));
+              return t.some((p) => e.includes(p));
             case "full-eq":
               if (t.length !== e.length) return !1;
-              const f = [...t].sort(), d = [...e].sort();
-              return f.every((c, R) => c === d[R]);
+              const c = [...t].sort(), F = [...e].sort();
+              return c.every((p, R) => p === F[R]);
             case "not-contains":
-              return !t.some((c) => e.includes(c));
+              return !t.some((p) => e.includes(p));
           }
         };
-        p.value = s.reduce((t, e) => (r(
-          o.map((f) => String(f)),
+        f.value = i.reduce((t, e) => (r(
+          s.map((c) => String(c)),
           e.compareValue,
           e.arrayCompareType
         ) || t.push(e.error), t), []);
       }
-      if (C) {
-        const s = l, r = A || [];
-        p.value = s.reduce((t, e) => {
-          const i = e.fileMaxSize ?? e.maxFileSize, f = e.fileAllowedTypes ?? e.allowedTypes, d = e.fileMaxCount ?? e.maxFiles;
-          return typeof i == "number" && r.some((c) => c.size > i) && t.push(e.error), f && r.some((c) => !z(c, f)) && t.push(e.error), typeof d == "number" && r.length > d && t.push(e.error), t;
-        }, []);
+      if (x) {
+        const i = a, r = w || [];
+        f.value = i.reduce((t, e) => (typeof e.fileMaxSize == "number" && r.some((o) => o.size > e.fileMaxSize) && t.push(e.error), e.fileAllowedTypes && r.some((o) => !M(o, e.fileAllowedTypes)) && t.push(e.error), typeof e.fileMaxCount == "number" && r.length > e.fileMaxCount && t.push(e.error), t), []);
       }
-      y.value = p.value.length === 0;
+      d.value = f.value.length === 0;
     }
   };
 };