@indielayer/ui 1.3.0 → 1.5.0

package/lib/components/accordion/AccordionItem.vue.js

@@ -0,0 +1,140 @@
+import { defineComponent as V, inject as j, computed as z, reactive as D, ref as m, watch as H, openBlock as a, createBlock as v, resolveDynamicComponent as K, normalizeStyle as M, unref as s, normalizeClass as l, withCtx as h, createElementVNode as r, renderSlot as d, createElementBlock as g, createCommentVNode as y, createVNode as X, Transition as q, withDirectives as F, vShow as G } from "vue";
+import { useTheme as J } from "../../composables/useTheme.js";
+import O from "../icon/Icon.vue.js";
+import { injectAccordionKey as Q } from "../../composables/keys.js";
+const R = { class: "flex-1 overflow-hidden" }, U = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  fill: "none",
+  role: "presentation",
+  class: "stroke-2 w-4 h-4"
+}, W = /* @__PURE__ */ r("path", { d: "M19 9l-7 7-7-7" }, null, -1), Y = [
+  W
+], Z = ["left", "right"], ee = {
+  tag: {
+    type: String,
+    default: "div"
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: !0
+  },
+  icon: String,
+  iconAlign: {
+    type: String,
+    default: "right"
+  }
+}, oe = {
+  name: "XAccordionItem",
+  validators: {
+    iconAlign: Z
+  }
+}, ae = /* @__PURE__ */ V({
+  ...oe,
+  props: ee,
+  emits: ["expand"],
+  setup(A, { expose: x, emit: _ }) {
+    const n = A, k = _, u = j(Q, {
+      isInsideAccordion: !1
+    }), w = z(() => u.iconAlign || n.iconAlign), I = D({
+      iconAlign: w
+    }), o = m(!n.expanded), t = m(!0);
+    H(() => n.expanded, () => {
+      o.value = !n.expanded;
+    });
+    function B(e) {
+      t.value && (e.style.height = "0px");
+    }
+    function E(e, i) {
+      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+        e.style.height = `${e.scrollHeight}px`;
+      }, 1)) : i();
+    }
+    function C(e) {
+      t.value ? e.style.removeProperty("height") : t.value = !0;
+    }
+    function $(e) {
+      t.value && (e.style.height = `${e.scrollHeight}px`);
+    }
+    function b(e, i) {
+      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+        e.style.height = "0px";
+      }, 1)) : i();
+    }
+    function S(e) {
+      t.value ? e.style.removeProperty("height") : t.value = !0;
+    }
+    function p(e = !0) {
+      t.value = e, o.value = !1;
+    }
+    function L(e = !0) {
+      t.value = e, o.value = !0;
+    }
+    function f() {
+      n.disabled || (o.value = !o.value);
+    }
+    function P(e = !0) {
+      p(e), k("expand");
+    }
+    const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
+      ...n,
+      ...I
+    }, { collapsed: o, isInsideAccordion: u.isInsideAccordion });
+    return x({ toggle: f, open: p, close: L }), (e, i) => (a(), v(K(e.tag), {
+      style: M(s(N)),
+      class: l(s(T)),
+      "aria-disabled": e.disabled,
+      "aria-expanded": o.value ? "false" : "true"
+    }, {
+      default: h(() => [
+        r("button", {
+          class: l(s(c).wrapper),
+          onClick: f
+        }, [
+          r("div", R, [
+            d(e.$slots, "default", { collapsed: o.value })
+          ]),
+          e.showIcon ? (a(), g("div", {
+            key: 0,
+            class: l(s(c).icon)
+          }, [
+            e.icon ? (a(), v(O, {
+              key: 0,
+              icon: e.icon
+            }, null, 8, ["icon"])) : (a(), g("svg", U, Y))
+          ], 2)) : y("", !0)
+        ], 2),
+        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : y("", !0),
+        X(q, {
+          onBeforeEnter: B,
+          onEnter: E,
+          onAfterEnter: C,
+          onBeforeLeave: $,
+          onLeave: b,
+          onAfterLeave: S
+        }, {
+          default: h(() => [
+            F(r("div", {
+              class: l(s(c).content)
+            }, [
+              d(e.$slots, "content", {
+                expand: P,
+                collapsed: o.value
+              })
+            ], 2), [
+              [G, !o.value]
+            ])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
+  }
+});
+export {
+  ae as default
+};

package/lib/components/accordion/AccordionItem.vue2.js

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

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

@@ -0,0 +1,4 @@
+export { default as XAccordion } from './Accordion.vue';
+export type { AccordionProps, AccordionInjection, AccordionTheme } from './Accordion.vue';
+export { default as XAccordionItem } from './AccordionItem.vue';
+export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue';

package/lib/components/accordion/theme/Accordion.base.theme.d.ts

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

package/lib/components/accordion/theme/Accordion.base.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: "grid grid-cols-1 divide-y"
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/accordion/theme/Accordion.carbon.theme.d.ts

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

package/lib/components/accordion/theme/Accordion.carbon.theme.js

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

package/lib/components/accordion/theme/AccordionItem.base.theme.d.ts

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

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -0,0 +1,16 @@
+const r = {
+  classes: {
+    wrapper: ({ props: t, slots: i, data: e }) => {
+      const s = ["relative flex items-center w-full text-left"];
+      return e.isInsideAccordion && (i.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-50 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
+    },
+    icon: ({ props: t, data: i }) => {
+      const e = ["absolute flex transform transition-transform duration-150"];
+      return i.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
+    },
+    content: "transition-[height] duration-150 overflow-y-hidden"
+  }
+}, n = r;
+export {
+  n as default
+};

package/lib/components/accordion/theme/AccordionItem.carbon.theme.d.ts

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

package/lib/components/accordion/theme/AccordionItem.carbon.theme.js

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

package/lib/components/alert/theme/Alert.carbon.theme.js

@@ -1,5 +1,41 @@
-import e from "./Alert.base.theme.js";
-const t = e, o = t;
+const o = {
+  classes: {
+    wrapper: "flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm"
+  },
+  styles: ({ props: t, colors: n, css: a }) => {
+    const l = n.getPalette("gray"), e = n.getPalette(t.color), r = [];
+    return t.glow && r.push(a.get("glow", n.getColorOpacity(e[500], 0.5))), t.color ? (t.light ? r.push(a.variables({
+      bg: e[50],
+      text: l[900],
+      icon: e[600],
+      border: t.outlined ? e[600] : e[50],
+      dark: {
+        bg: l[800],
+        text: l[100],
+        icon: e[600],
+        border: t.outlined ? e[500] : e[200]
+      }
+    })) : r.push(a.variables({
+      bg: t.outlined ? "transparent" : e[600],
+      text: t.outlined ? e[600] : e[50],
+      icon: t.outlined ? e[600] : e[50],
+      border: e[600],
+      dark: {
+        border: e[400],
+        text: t.outlined ? e[400] : e[50]
+      }
+    })), r) : (r.push(a.variables({
+      bg: "transparent",
+      text: e[500],
+      border: e[300],
+      dark: {
+        bg: "transparent",
+        text: e[300],
+        border: e[500]
+      }
+    })), r);
+  }
+}, d = o;
 export {
-  o as default
+  d as default
 };

package/lib/components/avatar/Avatar.vue.d.ts

@@ -66,11 +66,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/useCommon").Size;
+    tag: string;
     outlined: boolean;
     color: string;
-    tag: string;
     rounded: boolean;
+    size: import("../../composables/useCommon").Size;
 }, {}>, {
     avatarIcon?(_: {}): any;
 }>;

package/lib/components/badge/Badge.vue.d.ts

@@ -103,10 +103,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/useCommon").Size;
+    tag: string;
     outlined: boolean;
     color: string;
-    tag: string;
+    size: import("../../composables/useCommon").Size;
     position: "top" | "bottom";
     align: "left" | "right";
     animated: boolean;

package/lib/components/badge/Badge.vue.js

@@ -1,12 +1,12 @@
 import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
-import { useCommon as m } from "../../composables/useCommon.js";
+import { useCommon as d } from "../../composables/useCommon.js";
 import { useColors as k } from "../../composables/useColors.js";
 const N = { class: "relative inline-block" }, X = {
   key: 0,
   class: "animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
 }, x = ["left", "right"], Y = ["top", "bottom"], $ = {
-  ...m.props(),
+  ...d.props(),
   ...k.props("primary"),
   tag: {
     type: String,
@@ -32,17 +32,17 @@ const N = { class: "relative inline-block" }, X = {
 }, E = {
   name: "XBadge",
   validators: {
-    ...m.validators(),
+    ...d.validators(),
     position: Y,
     align: x
   }
 }, D = /* @__PURE__ */ v({
   ...E,
   props: $,
-  setup(u) {
-    const t = u, d = z(), g = l(() => {
+  setup(m) {
+    const t = m, u = z(), g = l(() => {
       const e = [];
-      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), d.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
+      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), u.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
     }), c = l(() => {
       const e = {};
       return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
@@ -62,7 +62,7 @@ const N = { class: "relative inline-block" }, X = {
             class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
               g.value,
               {
-                "border-2 border-gray-50 dark:border-gray-900": e.outlined
+                "border-2 border-secondary-50 dark:border-secondary-900": e.outlined
               }
             ]]),
             style: n(c.value)

package/lib/components/breadcrumbs/theme/Breadcrumbs.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "flex items-center flex-wrap",
     item: "flex items-center last-of-type:font-semibold",
-    separator: "text-gray-400 mx-1.5"
+    separator: "text-secondary-400 mx-1.5"
   }
 }, t = e;
 export {

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

@@ -120,18 +120,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/useCommon").Size;
+    disabled: boolean;
     flat: boolean;
     type: string;
+    tag: string;
     glow: boolean;
     light: boolean;
     outlined: boolean;
     color: string;
-    tag: string;
     rounded: boolean;
+    size: import("../../composables/useCommon").Size;
     ghost: boolean;
     block: boolean;
-    disabled: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}>, {

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

@@ -91,15 +91,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/useCommon").Size;
+    disabled: boolean;
     flat: boolean;
+    tag: string;
     light: boolean;
     outlined: boolean;
     color: string;
-    tag: string;
     rounded: boolean;
+    size: import("../../composables/useCommon").Size;
     ghost: boolean;
-    disabled: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}>, {

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

@@ -1,4 +1,4 @@
-const g = {
+const r = {
   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"];
@@ -8,8 +8,8 @@ const g = {
     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({
+    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], b = e.color && e.light, g = !e.color && !e.ghost;
+    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), g ? e.disabled ? l.push(i.variables({
       bg: a[50],
       text: a[300],
       border: a[200],
@@ -31,7 +31,7 @@ const g = {
         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({
+    })) : b ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
       bg: t[50],
       text: t[200],
       border: "transparent",
@@ -110,10 +110,10 @@ const g = {
       }
     }))) : (l.push(i.variables({
       text: "#fff",
-      border: d.isButtonGroup ? t[600] : "transparent",
+      border: t[600],
       dark: {
         text: "#fff",
-        border: d.isButtonGroup ? t[500] : "transparent"
+        border: t[500]
       }
     })), e.disabled ? l.push(i.variables({
       bg: t[100],
@@ -132,7 +132,7 @@ const g = {
       }
     }))), l;
   }
-}, u = g;
+}, u = r;
 export {
   u as default
 };

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

@@ -1,7 +1,7 @@
 const g = {
   classes: {
     wrapper({ props: e, slots: d, data: a }) {
-      const l = ["relative transition duration-150 focus:outline-none inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light"];
+      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",

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

@@ -1,6 +1,6 @@
 const a = {
   classes: {
-    wrapper: ({ props: e }) => `rounded bg-white dark:bg-gray-800${e.flat ? "" : " shadow"}`
+    wrapper: ({ props: e }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${e.flat ? "" : "shadow"}`
   }
 }, s = a;
 export {

package/lib/components/carousel/CarouselSlide.vue.d.ts

@@ -1,17 +1,28 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
-declare const carouselSlideProps: {};
+declare const carouselSlideProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+};
 export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>;
 type InternalClasses = 'wrapper';
 export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, InternalClasses> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    [x: number]: string;
-} | {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, 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;
+    };
+}>>, {
+    tag: string;
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/lib/components/carousel/CarouselSlide.vue.js

@@ -3,7 +3,7 @@ import o from "./CarouselSlide.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, a = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-8d26c82a"]]);
+}, d = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-402870d3"]]);
 export {
-  a as default
+  d as default
 };

package/lib/components/carousel/CarouselSlide.vue2.js

@@ -1,25 +1,32 @@
-import { defineComponent as n, openBlock as c, createElementBlock as p, normalizeStyle as i, unref as e, normalizeClass as m, renderSlot as u } from "vue";
-import { useTheme as d } from "../../composables/useTheme.js";
-const f = {}, _ = {
-  name: "XCarouselSlide",
-  validators: {}
-}, h = /* @__PURE__ */ n({
-  ..._,
-  props: f,
+import { defineComponent as n, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as u, unref as s, normalizeClass as m, withCtx as d, renderSlot as f } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const C = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+}, S = {
+  name: "XCarouselSlide"
+}, k = /* @__PURE__ */ n({
+  ...S,
+  props: C,
   setup(l) {
-    const o = l, { styles: r, classes: t, className: a } = d("CarouselSlide", {}, o);
-    return (s, S) => (c(), p("div", {
-      style: i(e(r)),
+    const t = l, { styles: o, classes: a, className: r } = y("CarouselSlide", {}, t);
+    return (e, _) => (c(), p(i(e.tag), {
+      style: u(s(o)),
       class: m([
-        e(a),
-        s.$style["carousel-slide"],
-        e(t).wrapper
+        s(r),
+        e.$style["carousel-slide"],
+        s(a).wrapper
       ])
-    }, [
-      u(s.$slots, "default")
-    ], 6));
+    }, {
+      default: d(() => [
+        f(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
   }
 });
 export {
-  h as default
+  k as default
 };