@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/button/Button.vue2.js

@@ -1,16 +1,15 @@
-import { defineComponent as j, ref as D, inject as I, computed as l, useAttrs as T, unref as t, openBlock as r, createBlock as a, resolveDynamicComponent as V, normalizeClass as u, normalizeStyle as A, withCtx as E, createCommentVNode as d, createElementVNode as F, renderSlot as K } from "vue";
-import { useTheme as O } from "../../composables/theme.js";
-import { useColors as X } from "../../composables/colors.js";
-import { useCommon as f } from "../../composables/common.js";
-import { useInteractive as b } from "../../composables/interactive.js";
+import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as e, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
+import { useTheme as O } from "../../composables/useTheme.js";
+import { useColors as X } from "../../composables/useColors.js";
+import { useCommon as b } from "../../composables/useCommon.js";
+import { useInteractive as h } from "../../composables/useInteractive.js";
 import { injectButtonGroupKey as q } from "../../composables/keys.js";
-import H from "../spinner/Spinner.vue.js";
-import m from "../icon/Icon.vue.js";
-import J from "./Button.theme.js";
-const M = {
-  ...f.props(),
-  ...X.props(),
+import H from "../loader/Loader.vue.js";
+import f from "../icon/Icon.vue.js";
+const J = {
   ...b.props(),
+  ...X.props(),
+  ...h.props(),
   tag: {
     type: String,
     default: "button"
@@ -30,78 +29,81 @@ const M = {
   light: Boolean,
   block: Boolean,
   flat: Boolean
-}, Q = {
+}, M = {
   name: "XButton",
   validators: {
-    ...f.validators()
+    ...b.validators()
   }
-}, so = /* @__PURE__ */ j({
-  ...Q,
-  props: M,
-  setup(h, { expose: y }) {
-    const e = h, g = D(null), s = I(q, {
+}, eo = /* @__PURE__ */ D({
+  ...M,
+  props: J,
+  setup(y, { expose: v }) {
+    const t = y, g = I(null), s = T(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: v } = s, n = l(() => s.groupProps.size || e.size), B = l(() => s.groupProps.flat || e.flat), z = l(() => e.color || s.groupProps.color), k = l(() => e.ghost || s.groupProps.ghost), P = l(() => e.light || s.groupProps.light), S = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), w = T(), C = l(() => w.href ? "a" : e.to ? "router-link" : e.tag), R = l(() => ({
-      size: t(n),
-      flat: t(B),
-      color: t(z),
-      ghost: t(k),
-      light: t(P),
-      outlined: t(S),
-      disabled: t(i),
-      loading: e.loading,
-      block: e.block,
-      glow: e.glow,
-      iconLeft: t(p),
-      iconRight: e.iconRight,
-      rounded: e.rounded
-    })), { className: L, classes: c, styles: G } = O("button", J, R, {
-      isButtonGroup: v
-    }), { focus: $, blur: N } = b(g);
-    return y({ focus: $, blur: N }), (o, U) => (r(), a(V(C.value), {
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || t.size), z = l(() => s.groupProps.flat || t.flat), k = l(() => t.color || s.groupProps.color), P = l(() => t.ghost || s.groupProps.ghost), S = l(() => t.light || s.groupProps.light), w = l(() => t.outlined || s.groupProps.outlined), i = l(() => t.disabled || s.groupProps.disabled), p = l(() => t.icon || t.iconLeft), C = V(), R = l(() => C.href ? "a" : t.to ? "router-link" : t.tag), L = l(() => ({
+      size: e(n),
+      flat: e(z),
+      color: e(k),
+      ghost: e(P),
+      light: e(S),
+      outlined: e(w),
+      disabled: e(i),
+      loading: t.loading,
+      block: t.block,
+      glow: t.glow,
+      iconLeft: e(p),
+      iconRight: t.iconRight,
+      rounded: t.rounded
+    })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
+      isButtonGroup: B
+    }), { focus: N, blur: j } = h(g);
+    return v({ focus: N, blur: j }), (o, Q) => (a(), r(A(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
       class: u([
-        t(L),
+        e(G),
         o.$style.button,
         o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
-        t(c).wrapper,
+        e(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: A(t(G)),
+      style: E(e($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
       type: o.tag === "button" ? o.type : null
     }, {
-      default: E(() => [
-        o.loading ? (r(), a(H, {
+      default: F(() => [
+        o.loading ? (a(), r(H, {
           key: 0,
+          class: "absolute",
           size: n.value,
-          class: "absolute"
-        }, null, 8, ["size"])) : d("", !0),
-        p.value ? (r(), a(m, {
-          key: 1,
-          size: n.value,
-          icon: p.value,
-          class: u([
-            t(c).iconLeft,
-            { invisible: o.loading }
-          ])
-        }, null, 8, ["size", "icon", "class"])) : d("", !0),
-        F("span", {
+          label: o.loadingLabel,
+          status: o.loadingStatus
+        }, null, 8, ["size", "label", "status"])) : d("", !0),
+        m("div", {
           class: u({ invisible: o.loading })
         }, [
-          K(o.$slots, "default", {}, void 0, !0)
+          p.value ? (a(), r(f, {
+            key: 0,
+            size: n.value,
+            icon: p.value,
+            class: u([
+              e(c).iconLeft
+            ])
+          }, null, 8, ["size", "icon", "class"])) : d("", !0),
+          m("span", null, [
+            K(o.$slots, "default", {}, void 0, !0)
+          ])
         ], 2),
-        o.iconRight ? (r(), a(m, {
-          key: 2,
+        o.iconRight ? (a(), r(f, {
+          key: 1,
           size: n.value,
           icon: o.iconRight,
           class: u([
-            t(c).iconRight,
+            e(c).iconRight,
             { invisible: o.loading }
           ])
         }, null, 8, ["size", "icon", "class"])) : d("", !0)
@@ -111,5 +113,5 @@ const M = {
   }
 });
 export {
-  so as default
+  eo as default
 };

package/lib/components/button/ButtonGroup.vue.d.ts

@@ -1,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const buttonGroupProps: {
     tag: {
         type: StringConstructor;
@@ -11,12 +12,17 @@ declare const buttonGroupProps: {
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -26,6 +32,12 @@ export type ButtonGroupInjection = {
     groupProps: ButtonGroupProps;
     isButtonGroup: boolean;
 };
+type InternalClasses = 'wrapper';
+type InternalExtraData = {
+    isButtonGroupGroup: boolean;
+};
+export interface ButtonGroupTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -38,12 +50,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -59,26 +76,32 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
     disabled: boolean;
     flat: boolean;
-    color: string;
-    size: import("../../composables/common").Size;
-    ghost: boolean;
     tag: string;
+    light: boolean;
     outlined: boolean;
+    color: string;
     rounded: boolean;
-    light: boolean;
+    size: import("../../composables/useCommon").Size;
+    ghost: boolean;
     loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/button/ButtonGroup.vue2.js

@@ -1,14 +1,13 @@
-import { defineComponent as a, provide as u, openBlock as m, createBlock as i, resolveDynamicComponent as d, normalizeStyle as f, unref as t, normalizeClass as c, withCtx as B, renderSlot as g } from "vue";
-import { useTheme as y } from "../../composables/theme.js";
-import { useCommon as r } from "../../composables/common.js";
-import { useColors as h } from "../../composables/colors.js";
-import { useInteractive as v } from "../../composables/interactive.js";
-import { injectButtonGroupKey as C } from "../../composables/keys.js";
-import b from "./ButtonGroup.theme.js";
+import { defineComponent as a, provide as u, openBlock as m, createBlock as i, resolveDynamicComponent as d, normalizeStyle as f, unref as t, normalizeClass as c, withCtx as B, renderSlot as y } from "vue";
+import { useTheme as g } from "../../composables/useTheme.js";
+import { useCommon as r } from "../../composables/useCommon.js";
+import { useColors as v } from "../../composables/useColors.js";
+import { useInteractive as C } from "../../composables/useInteractive.js";
+import { injectButtonGroupKey as h } from "../../composables/keys.js";
 const G = {
   ...r.props(),
-  ...h.props(),
   ...v.props(),
+  ...C.props(),
   tag: {
     type: String,
     default: "div"
@@ -23,17 +22,17 @@ const G = {
   validators: {
     ...r.validators()
   }
-}, I = /* @__PURE__ */ a({
+}, j = /* @__PURE__ */ a({
   ..._,
   props: G,
   setup(s) {
     const e = s;
-    u(C, {
+    u(h, {
       groupProps: e,
       isButtonGroup: !0
     });
-    const { className: n, classes: p, styles: l } = y("button-group", b, e);
-    return (o, S) => (m(), i(d(o.tag), {
+    const { className: n, classes: p, styles: l } = g("ButtonGroup", {}, e);
+    return (o, b) => (m(), i(d(o.tag), {
       style: f(t(l)),
       class: c([
         t(n),
@@ -43,12 +42,12 @@ const G = {
       ])
     }, {
       default: B(() => [
-        g(o.$slots, "default")
+        y(o.$slots, "default")
       ]),
       _: 3
     }, 8, ["style", "class"]));
   }
 });
 export {
-  I as default
+  j as default
 };

package/lib/components/button/index.d.ts

@@ -1,6 +1,4 @@
 export { default as XButton } from './Button.vue';
-export type { ButtonProps } from './Button.vue';
-export type { ButtonTheme } from './Button.theme';
+export type { ButtonProps, ButtonTheme } from './Button.vue';
 export { default as XButtonGroup } from './ButtonGroup.vue';
-export type { ButtonGroupProps, ButtonGroupInjection } from './ButtonGroup.vue';
-export type { ButtonGroupTheme } from './ButtonGroup.theme';
+export type { ButtonGroupProps, ButtonGroupInjection, ButtonGroupTheme } from './ButtonGroup.vue';

package/lib/components/button/theme/Button.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonTheme } from '../Button.vue';
+declare const theme: ButtonTheme;
+export default theme;

package/lib/components/button/theme/Button.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonTheme } from '../Button.vue';
+declare const theme: ButtonTheme;
+export default theme;

package/lib/components/button/theme/Button.carbon.theme.js

@@ -0,0 +1,138 @@
+const g = {
+  classes: {
+    wrapper({ props: e, slots: d, data: a }) {
+      const l = ["relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light"];
+      return a.isButtonGroup ? l.push("!rounded-none") : l.push(e.rounded ? "rounded-full" : ""), d.default ? (l.push("min-w-[8rem] px-4 py-3.5 items-start justify-between"), e.size === "xs" ? l.push("min-h-[2rem]") : e.size === "sm" ? l.push("min-h-[2.5rem]") : e.size === "lg" ? l.push("min-h-[4rem]") : e.size === "xl" ? l.push("min-h-[5rem]") : l.push("min-h-[3rem]")) : (l.push("items-center justify-center"), e.size === "xs" ? l.push("h-6 w-6") : e.size === "sm" ? l.push("h-8 w-8") : e.size === "lg" ? l.push("h-12 w-12") : e.size === "xl" ? l.push("h-16 w-16") : l.push("h-10 w-10")), e.disabled ? l.push("cursor-not-allowed") : e.loading ? l.push("cursor-default") : l.push("cursor-pointer"), l;
+    },
+    iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
+    iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
+  },
+  styles({ props: e, colors: d, css: a, data: l }) {
+    const i = d.getPalette("gray"), t = e.color ? d.getPalette(e.color) : i, r = [], n = e.color && e.light, b = !e.color && !e.ghost;
+    return e.glow && r.push(a.get("glow", d.getColorOpacity(e.color ? t[500] : i[500], 0.5))), b ? e.disabled ? r.push(a.variables({
+      bg: i[50],
+      text: i[300],
+      border: i[200],
+      dark: {
+        bg: i[900],
+        text: i[600],
+        border: i[700]
+      }
+    })) : r.push(a.variables({
+      bg: "white",
+      text: i[800],
+      border: i[300],
+      hover: { bg: e.loading ? "" : i[100] },
+      active: { bg: e.loading ? "" : i[200] },
+      dark: {
+        bg: i[800],
+        text: "white",
+        border: i[700],
+        hover: { bg: e.loading ? "" : i[700], border: i[600] },
+        active: { bg: e.loading ? "" : i[600], border: i[500] }
+      }
+    })) : n ? ((!e.outlined || e.disabled) && r.push(a.get("border", "transparent")), e.disabled ? r.push(a.variables({
+      bg: t[50],
+      text: t[200],
+      border: "transparent",
+      dark: {
+        bg: i[800],
+        text: t[900],
+        border: "transparent"
+      }
+    })) : r.push(a.variables({
+      bg: t[50],
+      text: t[600],
+      border: e.outlined ? t[500] : "transparent",
+      hover: { bg: e.loading ? "" : t[100] },
+      active: { bg: e.loading ? "" : t[200] },
+      dark: {
+        bg: t[900],
+        text: t[200],
+        border: e.outlined ? t[500] : "transparent",
+        hover: { bg: e.loading ? "" : t[800] },
+        active: { bg: e.loading ? "" : t[700] }
+      }
+    }))) : e.ghost ? (e.outlined || r.push(a.get("border", "transparent")), e.color ? e.disabled ? r.push(a.variables({
+      text: t[200],
+      dark: {
+        text: t[700]
+      }
+    })) : (r.push(a.variables({
+      text: t[600],
+      dark: {
+        text: t[500]
+      }
+    })), e.loading || r.push(a.variables({
+      hover: { bg: t[50] },
+      active: { bg: t[100] },
+      dark: {
+        hover: { bg: i[800] },
+        active: { bg: i[700] }
+      }
+    }))) : e.disabled ? r.push(a.variables({
+      text: i[200],
+      dark: {
+        text: i[700]
+      }
+    })) : (r.push(a.variables({
+      text: i[800],
+      dark: {
+        text: "white"
+      }
+    })), e.loading || r.push(a.variables({
+      hover: { bg: i[100] },
+      active: { bg: i[200] },
+      dark: {
+        hover: { bg: i[800] },
+        active: { bg: i[700] }
+      }
+    })))) : e.outlined ? e.disabled ? r.push(a.variables({
+      text: t[200],
+      border: t[200],
+      dark: {
+        text: t[700],
+        border: t[700]
+      }
+    })) : (r.push(a.variables({
+      text: t[600],
+      border: t[600],
+      dark: {
+        text: t[500],
+        border: t[500]
+      }
+    })), e.loading || r.push(a.variables({
+      hover: { bg: t[100] },
+      active: { bg: t[200] },
+      dark: {
+        hover: { bg: i[800] },
+        active: { bg: i[700] }
+      }
+    }))) : (r.push(a.variables({
+      text: "#fff",
+      border: l.isButtonGroup ? t[600] : "transparent",
+      dark: {
+        text: "#fff",
+        border: l.isButtonGroup ? t[500] : "transparent"
+      }
+    })), e.disabled ? r.push(a.variables({
+      bg: t[200],
+      dark: {
+        text: t[700],
+        bg: t[900]
+      }
+    })) : r.push(a.variables({
+      bg: t[500],
+      hover: { bg: e.loading ? "" : t[600] },
+      active: { bg: e.loading ? "" : t[800] },
+      dark: {
+        bg: t[600],
+        hover: { bg: e.loading ? "" : t[700] },
+        active: { bg: e.loading ? "" : t[800] }
+      }
+    }))), r;
+  }
+}, h = g;
+export {
+  h as default
+};

package/lib/components/button/theme/ButtonGroup.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonGroupTheme } from '../ButtonGroup.vue';
+declare const theme: ButtonGroupTheme;
+export default theme;

package/lib/components/button/theme/ButtonGroup.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonGroupTheme } from '../ButtonGroup.vue';
+declare const theme: ButtonGroupTheme;
+export default theme;

package/lib/components/button/theme/ButtonGroup.carbon.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: "inline-flex align-middle relative gap-[1px]"
+  }
+}, a = e;
+export {
+  a as default
+};

package/lib/components/card/Card.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const cardProps: {
     tag: {
         type: StringConstructor;
@@ -7,6 +8,9 @@ declare const cardProps: {
     flat: BooleanConstructor;
 };
 export type CardProps = ExtractPublicPropTypes<typeof cardProps>;
+type InternalClasses = 'wrapper';
+export interface CardTheme extends ThemeComponent<CardProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;

package/lib/components/card/Card.vue.js

@@ -1,31 +1,30 @@
-import { defineComponent as n, openBlock as c, createBlock as p, resolveDynamicComponent as m, unref as e, normalizeClass as f, withCtx as d, renderSlot as i } from "vue";
-import { useTheme as u } from "../../composables/theme.js";
-import _ from "./Card.theme.js";
-const y = {
+import { defineComponent as n, openBlock as c, createBlock as p, resolveDynamicComponent as m, unref as e, normalizeClass as d, withCtx as f, renderSlot as u } from "vue";
+import { useTheme as i } from "../../composables/useTheme.js";
+const _ = {
   tag: {
     type: String,
     default: "div"
   },
   flat: Boolean
-}, C = { name: "XCard" }, v = /* @__PURE__ */ n({
+}, C = { name: "XCard" }, B = /* @__PURE__ */ n({
   ...C,
-  props: y,
+  props: _,
   setup(t) {
-    const o = t, { styles: a, classes: r, className: l } = u("card", _, o);
-    return (s, h) => (c(), p(m(s.tag), {
-      styles: e(a),
-      class: f([
+    const a = t, { styles: o, classes: r, className: l } = i("Card", {}, a);
+    return (s, y) => (c(), p(m(s.tag), {
+      styles: e(o),
+      class: d([
         e(l),
         e(r).wrapper
       ])
     }, {
-      default: d(() => [
-        i(s.$slots, "default")
+      default: f(() => [
+        u(s.$slots, "default")
       ]),
       _: 3
     }, 8, ["styles", "class"]));
   }
 });
 export {
-  v as default
+  B as default
 };

package/lib/components/card/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XCard } from './Card.vue';
-export type { CardProps } from './Card.vue';
-export type { CardTheme } from './Card.theme';
+export type { CardProps, CardTheme } from './Card.vue';

package/lib/components/card/theme/Card.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { CardTheme } from '../Card.vue';
+declare const theme: CardTheme;
+export default theme;

package/lib/components/card/{Card.theme.js → theme/Card.base.theme.js}

@@ -2,7 +2,7 @@ const a = {
   classes: {
     wrapper: ({ props: e }) => `rounded bg-white dark:bg-gray-800${e.flat ? "" : " shadow"}`
   }
-}, t = a;
+}, s = a;
 export {
-  t as default
+  s as default
 };

package/lib/components/card/theme/Card.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { CardTheme } from '../Card.vue';
+declare const theme: CardTheme;
+export default theme;

package/lib/components/card/theme/Card.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Card.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};