@indielayer/ui 1.4.0 → 1.5.1

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as P, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as R, normalizeClass as u, createElementVNode as d, withKeys as T, withModifiers as H, withDirectives as O, mergeProps as U, toHandlers as X, vModelCheckbox as j, createBlock as V, renderSlot as C, toDisplayString as J, createCommentVNode as Q } from "vue";
+import { defineComponent as P, ref as w, watch as m, unref as a, openBlock as i, createElementBlock as p, normalizeStyle as R, normalizeClass as u, createElementVNode as d, withKeys as T, withModifiers as H, withDirectives as O, mergeProps as U, toHandlers as X, vModelCheckbox as j, createBlock as V, renderSlot as C, toDisplayString as J, createCommentVNode as Q } from "vue";
 import { useTheme as W } from "../../composables/useTheme.js";
 import { useCommon as I } from "../../composables/useCommon.js";
 import { useColors as Y } from "../../composables/useColors.js";
@@ -9,9 +9,9 @@ import x from "../inputFooter/InputFooter.vue.js";
 const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
   key: 1,
   name: "check-icon",
-  class: "w-2/3 h-[2px] bg-white dark:bg-gray-900"
-}, ae = /* @__PURE__ */ d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), oe = [
-  ae
+  class: "w-2/3 h-[2px] bg-white dark:bg-secondary-900"
+}, oe = /* @__PURE__ */ d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), ae = [
+  oe
 ], re = ["textContent"], ie = {
   ...I.props(),
   ...Y.props("primary"),
@@ -46,22 +46,22 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
       setError: E
     } = f(s, { focus: y, emit: v, withListeners: !1 });
     c ? (m(() => r.value, () => {
-      const e = o(r.value);
+      const e = a(r.value);
       e && Array.isArray(e) && e.includes(s.value) ? l.value = !0 : l.value = !1;
     }, { immediate: !0, deep: !0 }), m(() => l.value, (e) => {
       if (!s.value)
         return;
-      const a = o(r.value);
+      const o = a(r.value);
       if (e)
-        if (a && Array.isArray(a)) {
-          if (!a.includes(s.value)) {
-            const n = [...a, s.value];
+        if (o && Array.isArray(o)) {
+          if (!o.includes(s.value)) {
+            const n = [...o, s.value];
             r.setValue(n);
           }
         } else
           r.setValue([s.value]);
-      else if (a && Array.isArray(a) && a.includes(s.value)) {
-        const n = a.findIndex((D) => D === s.value), g = [...a];
+      else if (o && Array.isArray(o) && o.includes(s.value)) {
+        const n = o.findIndex((D) => D === s.value), g = [...o];
         g.splice(n, 1), r.setValue(g);
       }
     })) : (m(() => s.modelValue, (e) => {
@@ -76,23 +76,23 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
         }, 0);
       }
     }, { styles: L, classes: t, className: M } = W("Checkbox", {}, s, { checked: l, isInsideForm: S, isInsideFormGroup: c });
-    return B({ focus: y, blur: F, toggle: b, reset: q, validate: k, setError: E }), (e, a) => (i(), p("label", {
-      style: R(o(L)),
+    return B({ focus: y, blur: F, toggle: b, reset: q, validate: k, setError: E }), (e, o) => (i(), p("label", {
+      style: R(a(L)),
       class: u([
-        o(M),
-        o(t).wrapper
+        a(M),
+        a(t).wrapper
       ])
     }, [
       d("div", {
         ref_key: "elRef",
         ref: h,
-        class: u(o(t).content),
+        class: u(a(t).content),
         tabindex: "0",
         onKeypress: T(H(b, ["prevent", "stop"]), ["space"])
       }, [
         O(d("input", U({
           id: e.id,
-          "onUpdate:modelValue": a[0] || (a[0] = (n) => l.value = n),
+          "onUpdate:modelValue": o[0] || (o[0] = (n) => l.value = n),
           name: e.name,
           "aria-checked": e.indeterminate ? "mixed" : l.value ? "true" : "false",
           "aria-disabled": e.disabled ? "true" : void 0,
@@ -105,7 +105,7 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
         ]),
         d("div", {
           class: u([
-            o(t).box,
+            a(t).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
@@ -116,12 +116,12 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
             (i(), p("svg", {
               viewBox: "0 0 20 20",
-              class: u([o(t).icon, { "opacity-0": !l.value }])
-            }, oe, 2))
+              class: u([a(t).icon, { "opacity-0": !l.value }])
+            }, ae, 2))
           ])
         ], 2),
         d("div", {
-          class: u(o(t).label)
+          class: u(a(t).label)
         }, [
           e.label ? (i(), p("span", {
             key: 0,
@@ -129,9 +129,9 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           }, null, 8, re)) : C(e.$slots, "default", { key: 1 })
         ], 2)
       ], 42, ee),
-      o(N) ? Q("", !0) : (i(), V(x, {
+      a(N) ? Q("", !0) : (i(), V(x, {
         key: 0,
-        error: o(G),
+        error: a(G),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -5,19 +5,19 @@ const o = {
       return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), e;
     },
     box: ({ props: r }) => {
-      const e = ["rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return r.size === "xs" || r.size === "sm" ? e.push("h-4 w-4") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-5 w-5"), e;
+      const e = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+      return r.size === "lg" ? e.push("h-5 w-5") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-4 w-4"), e;
     },
     content: ({ props: r }) => {
-      const e = ["flex items-center"];
+      const e = ["flex items-baseline"];
       return r.disabled && e.push("cursor-not-allowed"), e;
     },
     icon: ({ props: r }) => {
-      const e = ["fill-current text-white dark:text-gray-900"];
-      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-3 w-3"), e;
+      const e = ["fill-current text-white"];
+      return r.size === "lg" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-2.5 w-2.5"), e;
     },
     label: ({ props: r }) => {
-      const e = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
+      const e = ["inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2"];
       return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
     }
   },

package/lib/components/checkbox/theme/Checkbox.carbon.theme.js

@@ -13,11 +13,11 @@ const o = {
       return r.disabled && e.push("cursor-not-allowed"), e;
     },
     icon: ({ props: r }) => {
-      const e = ["fill-current text-white dark:text-gray-900"];
+      const e = ["fill-current text-white dark:text-secondary-900"];
       return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-3.5 w-3.5") : e.push("h-2.5 w-2.5"), e;
     },
     label: ({ props: r }) => {
-      const e = ["text-gray-800 dark:text-gray-200 pl-2 text-sm"];
+      const e = ["text-secondary-800 dark:text-secondary-200 pl-2 text-sm"];
       return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
     }
   },

package/lib/components/container/theme/Container.base.theme.js

@@ -1,8 +1,8 @@
 const a = {
   classes: {
     wrapper: ({ props: s }) => {
-      const e = ["px-4 md:px-8"];
-      return s.fluid || e.push("max-w-screen-2xl mx-auto"), e;
+      const e = ["px-4 md:px-6"];
+      return s.fluid || e.push("max-w-screen-lg mx-auto"), e;
     }
   }
 }, t = a;

package/lib/components/divider/Divider.vue.js

@@ -1,32 +1,32 @@
-import { defineComponent as p, openBlock as s, createElementBlock as o, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
+import { defineComponent as p, openBlock as o, createElementBlock as r, normalizeStyle as s, unref as t, normalizeClass as a, createElementVNode as n, toDisplayString as u, createCommentVNode as v } from "vue";
 import { useTheme as y } from "../../composables/useTheme.js";
 const h = ["textContent"], f = {
   label: String,
   vertical: Boolean
-}, g = { name: "XDivider" }, x = /* @__PURE__ */ p({
-  ...g,
+}, C = { name: "XDivider" }, x = /* @__PURE__ */ p({
+  ...C,
   props: f,
-  setup(n) {
-    const c = n, { styles: m, classes: l, className: d } = y("Divider", {}, c);
-    return (e, C) => (s(), o("div", {
-      style: r(t(m)),
+  setup(i) {
+    const c = i, { styles: d, classes: l, className: m } = y("Divider", {}, c);
+    return (e, b) => (o(), r("div", {
+      style: s(t(d)),
       class: a([
-        t(d),
+        t(m),
         t(l).wrapper
       ])
     }, [
-      i("div", {
+      n("div", {
         class: a(t(l).line),
-        style: r([
+        style: s([
           {
             width: e.vertical ? "1px" : "auto",
             height: e.vertical ? "auto" : "1px"
           }
         ])
       }, null, 6),
-      e.label ? (s(), o("div", {
+      e.label ? (o(), r("div", {
         key: 0,
-        class: a(["font-medium text-sm text-gray-600 dark:text-gray-300", [
+        class: a(["font-medium text-sm text-secondary-600 dark:text-secondary-300", [
           t(l).label,
           {
             "my-2": e.vertical,
@@ -35,9 +35,9 @@ const h = ["textContent"], f = {
         ]]),
         textContent: u(e.label)
       }, null, 10, h)) : v("", !0),
-      i("div", {
+      n("div", {
         class: a(t(l).line),
-        style: r([
+        style: s([
           {
             width: e.vertical ? "1px" : "auto",
             height: e.vertical ? "auto" : "1px"

package/lib/components/divider/theme/Divider.base.theme.js

@@ -1,8 +1,8 @@
 const t = {
   classes: {
     wrapper: ({ props: e }) => `flex justify-center items-center ${e.vertical ? "h-full flex-col" : "w-full"}`,
-    label: "font-medium text-sm text-gray-600 dark:text-gray-300",
-    line: "bg-gray-200 dark:bg-slate-700 flex-grow"
+    label: "font-medium text-sm text-secondary-600 dark:text-secondary-300",
+    line: "bg-secondary-200 dark:bg-secondary-700 flex-grow"
   }
 }, l = t;
 export {

package/lib/components/drawer/Drawer.vue.js

@@ -86,14 +86,14 @@ const ee = {
         return;
       }
       e.addEventListener("transitionend", o), setTimeout(() => {
-        t.backdrop && e.classList.add("bg-gray-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
+        t.backdrop && e.classList.add("bg-slate-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
       }, 1);
     }
     function R(e) {
     }
     function D(e, o) {
       e.addEventListener("transitionend", o), setTimeout(() => {
-        t.backdrop && e.classList.remove("bg-gray-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
+        t.backdrop && e.classList.remove("bg-slate-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
       }, 1);
     }
     function z(e) {

package/lib/components/drawer/theme/Drawer.base.theme.js

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "flex flex-col max-h-full bg-white dark:bg-gray-800",
+    wrapper: "flex flex-col max-h-full bg-white dark:bg-secondary-800",
     backdrop: "duration-150 ease-in-out"
   }
 }, a = e;

package/lib/components/form/Form.vue.js

@@ -3,7 +3,7 @@ import { injectFormKey as N } from "../../composables/keys.js";
 import { useTheme as T } from "../../composables/useTheme.js";
 const j = {
   key: 0,
-  class: "mb-10"
+  class: "mb-6"
 }, w = ["disabled"], z = {
   autoValidate: {
     type: Boolean,

package/lib/components/form/theme/Form.base.theme.js

@@ -1,12 +1,12 @@
-const t = {
+const e = {
   classes: {
     wrapper: "relative",
     content: "",
     title: "text-xl mb-1",
-    description: "text-gray-500",
+    description: "text-secondary-500",
     footer: "space-x-4 mt-4"
   }
-}, e = t;
+}, t = e;
 export {
-  e as default
+  t as default
 };

package/lib/components/form/theme/Form.carbon.theme.js

@@ -1,12 +1,12 @@
-const t = {
+const e = {
   classes: {
     wrapper: "relative",
     content: "grid",
     title: "text-xl mb-1",
-    description: "text-gray-500",
+    description: "text-secondary-500",
     footer: "grid grid-cols-2 gap-4 lg:flex mt-8"
   }
-}, e = t;
+}, t = e;
 export {
-  e as default
+  t as default
 };

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -22,6 +22,7 @@ declare const formGroupProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -67,6 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -102,6 +104,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;

package/lib/components/formGroup/FormGroup.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, computed as k, provide as q, openBlock as m, createBlock as p, mergeProps as B, unref as o, toHandlers as N, withCtx as $, createElementVNode as w, normalizeClass as A, renderSlot as E, createCommentVNode as P } from "vue";
+import { defineComponent as C, computed as k, provide as q, openBlock as p, createBlock as m, mergeProps as B, unref as o, toHandlers as N, withCtx as $, createElementVNode as w, normalizeClass as A, renderSlot as E, createCommentVNode as P } from "vue";
 import { useTheme as j } from "../../composables/useTheme.js";
 import { useInteractive as z } from "../../composables/useInteractive.js";
 import { useInputtable as l } from "../../composables/useInputtable.js";
@@ -14,19 +14,19 @@ const S = {
   }
 }, T = {
   name: "XFormGroup"
-}, R = /* @__PURE__ */ C({
+}, U = /* @__PURE__ */ C({
   ...T,
   props: S,
   emits: l.emits(),
   setup(d, { expose: f, emit: c }) {
-    const r = d, s = [], V = k(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
+    const r = d, t = [], V = k(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
     q(H, {
-      registerInputGroup: (e, t) => {
-        s.push({ name: e, focus: t });
+      registerInputGroup: (e, s) => {
+        t.push({ name: e, focus: s });
       },
       unregisterInputGroup: (e) => {
-        const t = s.findIndex((g) => g.name === e);
-        s.splice(t, 1);
+        const s = t.findIndex((_) => _.name === e);
+        t.splice(s, 1);
       },
       setValue: (e) => {
         n("update:modelValue", e);
@@ -36,7 +36,7 @@ const S = {
     });
     function i() {
       var e;
-      (e = s[0]) == null || e.focus();
+      (e = t[0]) == null || e.focus();
     }
     const n = c, {
       errorInternal: a,
@@ -49,8 +49,8 @@ const S = {
       change: (e) => {
         r.validateOnInput && !b.value && u(r.modelValue);
       }
-    }, { styles: F, classes: G, className: _ } = j("FormGroup", {}, r, { errorInternal: a });
-    return f({ focus: i, blur, reset: h, validate: u, setError: v }), (e, t) => (m(), p(K, B({
+    }, { styles: F, classes: G, className: g } = j("FormGroup", {}, r, { errorInternal: a });
+    return f({ focus: i, blur, reset: h, validate: u, setError: v }), (e, s) => (p(), m(K, B({
       tag: "fieldset",
       style: o(F),
       disabled: e.disabled,
@@ -58,8 +58,9 @@ const S = {
       "is-inside-form": o(y),
       label: e.label,
       class: [
-        o(_)
-      ]
+        o(g)
+      ],
+      tooltip: e.tooltip
     }, N(I)), {
       default: $(() => [
         w("div", {
@@ -67,16 +68,16 @@ const S = {
         }, [
           E(e.$slots, "default")
         ], 2),
-        e.hideFooter ? P("", !0) : (m(), p(O, {
+        e.hideFooter ? P("", !0) : (p(), m(O, {
           key: 0,
           error: o(a),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
       _: 3
-    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {
-  R as default
+  U as default
 };

package/lib/components/formGroup/theme/FormGroup.base.theme.js

@@ -2,7 +2,7 @@ const t = {
   classes: {
     wrapper: ({ props: s }) => {
       const e = [""];
-      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-2"), e;
+      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-4"), e;
     }
   }
 }, a = t;

package/lib/components/icon/theme/Icon.base.theme.js

@@ -2,7 +2,7 @@ const t = {
   classes: {
     wrapper: ({ props: s }) => {
       const e = "inline shrink-0";
-      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-9 w-9" : e + " h-5 w-5";
+      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-7 w-7" : e + " h-4 w-4";
     }
   }
 }, i = t;