@indielayer/ui 0.0.0-dev-20240125104319

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

@@ -0,0 +1,113 @@
+import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const buttonGroupProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    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/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>;
+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;
+        default: string;
+    };
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    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/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    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/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    disabled: boolean;
+    flat: boolean;
+    tag: string;
+    light: boolean;
+    outlined: boolean;
+    color: string;
+    rounded: boolean;
+    size: import("../../composables/useCommon").Size;
+    ghost: boolean;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+import o from "./ButtonGroup.vue2.js";
+import s from "./ButtonGroup.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,53 @@
+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(),
+  ...v.props(),
+  ...C.props(),
+  tag: {
+    type: String,
+    default: "div"
+  },
+  outlined: Boolean,
+  rounded: Boolean,
+  ghost: Boolean,
+  light: Boolean,
+  flat: Boolean
+}, _ = {
+  name: "XButtonGroup",
+  validators: {
+    ...r.validators()
+  }
+}, j = /* @__PURE__ */ a({
+  ..._,
+  props: G,
+  setup(s) {
+    const e = s;
+    u(h, {
+      groupProps: e,
+      isButtonGroup: !0
+    });
+    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),
+        o.$style["button-group"],
+        o.rounded ? o.$style["button-group--rounded"] : "",
+        t(p).wrapper
+      ])
+    }, {
+      default: B(() => [
+        y(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  j as default
+};

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

@@ -0,0 +1,7 @@
+const o = {
+  "button-group": "_button-group_1p7wb_2",
+  "button-group--rounded": "_button-group--rounded_1p7wb_1"
+};
+export {
+  o as default
+};

package/lib/components/button/__tests__/ Button.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/button/__tests__/ ButtonGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export { default as XButton } from './Button.vue';
+export type { ButtonProps, ButtonTheme } from './Button.vue';
+export { default as XButtonGroup } from './ButtonGroup.vue';
+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.base.theme.js

@@ -0,0 +1,138 @@
+const g = {
+  classes: {
+    wrapper({ props: e, slots: n, data: i }) {
+      const d = ["relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none"];
+      return i.isButtonGroup || d.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && d.push("shadow-sm"), e.size === "xs" ? d.push(n.default ? `py-1 text-xs ${e.icon ? "px-2" : "px-3"}` : "leading-none p-1") : e.size === "sm" ? d.push(n.default ? `py-2 text-sm ${e.icon ? "px-3" : "px-4"}` : "leading-none p-2") : e.size === "lg" ? d.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-6"}` : "leading-none p-3") : e.size === "xl" ? d.push(n.default ? `py-4 text-xl ${e.icon, "px-6"}` : "leading-none p-4") : d.push(n.default ? `py-2 ${e.icon ? "px-4" : "px-5"}` : "leading-none p-2"), e.disabled ? d.push("cursor-not-allowed") : e.loading ? d.push("cursor-default") : d.push("cursor-pointer"), d;
+    },
+    iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
+    iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
+  },
+  styles({ props: e, colors: n, css: i, data: d }) {
+    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], r = e.color && e.light, b = !e.color && !e.ghost;
+    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), b ? e.disabled ? l.push(i.variables({
+      bg: a[50],
+      text: a[300],
+      border: a[200],
+      dark: {
+        bg: a[900],
+        text: a[600],
+        border: a[700]
+      }
+    })) : l.push(i.variables({
+      bg: "white",
+      text: a[800],
+      border: a[300],
+      hover: { bg: e.loading ? "" : a[100] },
+      active: { bg: e.loading ? "" : a[200] },
+      dark: {
+        bg: a[800],
+        text: "white",
+        border: a[700],
+        hover: { bg: e.loading ? "" : a[700], border: a[600] },
+        active: { bg: e.loading ? "" : a[600], border: a[500] }
+      }
+    })) : r ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
+      bg: t[50],
+      text: t[200],
+      border: "transparent",
+      dark: {
+        bg: a[800],
+        text: t[900],
+        border: "transparent"
+      }
+    })) : l.push(i.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 || l.push(i.get("border", "transparent")), e.color ? e.disabled ? l.push(i.variables({
+      text: t[200],
+      dark: {
+        text: t[700]
+      }
+    })) : (l.push(i.variables({
+      text: t[600],
+      dark: {
+        text: t[500]
+      }
+    })), e.loading || l.push(i.variables({
+      hover: { bg: t[50] },
+      active: { bg: t[100] },
+      dark: {
+        hover: { bg: a[800] },
+        active: { bg: a[700] }
+      }
+    }))) : e.disabled ? l.push(i.variables({
+      text: a[200],
+      dark: {
+        text: a[700]
+      }
+    })) : (l.push(i.variables({
+      text: a[800],
+      dark: {
+        text: "white"
+      }
+    })), e.loading || l.push(i.variables({
+      hover: { bg: a[100] },
+      active: { bg: a[200] },
+      dark: {
+        hover: { bg: a[800] },
+        active: { bg: a[700] }
+      }
+    })))) : e.outlined ? e.disabled ? l.push(i.variables({
+      text: t[200],
+      border: t[200],
+      dark: {
+        text: t[700],
+        border: t[700]
+      }
+    })) : (l.push(i.variables({
+      text: t[600],
+      border: t[600],
+      dark: {
+        text: t[500],
+        border: t[500]
+      }
+    })), e.loading || l.push(i.variables({
+      hover: { bg: t[100] },
+      active: { bg: t[200] },
+      dark: {
+        hover: { bg: a[800] },
+        active: { bg: a[700] }
+      }
+    }))) : (l.push(i.variables({
+      text: "#fff",
+      border: d.isButtonGroup ? t[600] : "transparent",
+      dark: {
+        text: "#fff",
+        border: d.isButtonGroup ? t[500] : "transparent"
+      }
+    })), e.disabled ? l.push(i.variables({
+      bg: t[100],
+      dark: {
+        text: t[700],
+        bg: t[900]
+      }
+    })) : l.push(i.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] }
+      }
+    }))), l;
+  }
+}, u = g;
+export {
+  u as default
+};

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.base.theme.js

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

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

@@ -0,0 +1,37 @@
+import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const cardProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    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;
+        default: string;
+    };
+    flat: BooleanConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    flat: BooleanConstructor;
+}>>, {
+    flat: boolean;
+    tag: string;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,30 @@
+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" }, B = /* @__PURE__ */ n({
+  ...C,
+  props: _,
+  setup(t) {
+    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: f(() => [
+        u(s.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["styles", "class"]));
+  }
+});
+export {
+  B as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./Card.vue.js";
+export {
+  f as default
+};

package/lib/components/card/__tests__/Card.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as XCard } from './Card.vue';
+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/theme/Card.base.theme.js

@@ -0,0 +1,8 @@
+const a = {
+  classes: {
+    wrapper: ({ props: e }) => `rounded bg-white dark:bg-gray-800${e.flat ? "" : " shadow"}`
+  }
+}, s = a;
+export {
+  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
+};