@indielayer/ui 1.3.0 → 1.5.0

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -1,10 +1,11 @@
 import { type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const checkboxProps: {
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    indeterminate: BooleanConstructor;
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -12,12 +13,15 @@ declare const checkboxProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -36,17 +40,20 @@ declare const checkboxProps: {
     };
 };
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>;
-type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label';
+type InternalClasses = 'wrapper' | 'content' | 'box' | 'icon' | 'label';
 type InternalExtraData = {
     checked: Ref<boolean>;
+    isInsideForm: boolean;
+    isInsideFormGroup: boolean;
 };
 export interface CheckboxTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    indeterminate: BooleanConstructor;
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -54,12 +61,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -84,10 +94,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    indeterminate: BooleanConstructor;
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -95,12 +106,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -120,14 +134,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
-    required: boolean;
+    disabled: boolean;
     glow: boolean;
     color: string;
-    disabled: boolean;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    indeterminate: boolean;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];

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

@@ -1,108 +1,142 @@
-import { defineComponent as M, ref as b, watch as h, openBlock as l, createElementBlock as n, normalizeStyle as N, unref as s, normalizeClass as r, createElementVNode as a, withKeys as _, withModifiers as D, withDirectives as F, vModelCheckbox as R, createBlock as v, renderSlot as k, toDisplayString as P, createCommentVNode as T } from "vue";
-import { useTheme as U } from "../../composables/useTheme.js";
-import { useCommon as y } from "../../composables/useCommon.js";
-import { useColors as X } from "../../composables/useColors.js";
-import { useInteractive as g } from "../../composables/useInteractive.js";
-import { useInputtable as d } from "../../composables/useInputtable.js";
-import j from "../spinner/Spinner.vue.js";
-import A from "../inputFooter/InputFooter.vue.js";
-const G = ["onKeypress"], H = ["aria-checked", "aria-disabled", "disabled", "name", "required"], J = /* @__PURE__ */ a("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), O = [
-  J
-], Q = ["textContent"], W = {
-  ...y.props(),
-  ...X.props("primary"),
-  ...g.props(),
-  ...d.props(),
-  label: String,
-  helper: String,
+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";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInputtable as f } from "../../composables/useInputtable.js";
+import Z from "../spinner/Spinner.vue.js";
+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-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"),
+  ...z.props(),
+  ...f.props(),
+  value: [String, Number],
+  indeterminate: Boolean,
   glow: Boolean
-}, Y = {
+}, te = {
   name: "XCheckbox",
   validators: {
-    ...y.validators()
+    ...I.validators()
   }
-}, te = /* @__PURE__ */ M({
-  ...Y,
-  props: W,
-  emits: d.emits(!1),
-  setup(w, { expose: C, emit: z }) {
-    const i = w, m = z, p = b(null), o = b(!1);
-    h(() => i.modelValue, (e) => {
-      o.value = !!e;
-    }, { immediate: !0 }), h(() => o.value, (e) => {
-      m("update:modelValue", e);
-    });
-    function u() {
-      o.value = !o.value;
+}, he = /* @__PURE__ */ P({
+  ...te,
+  props: ie,
+  emits: f.emits(!1),
+  setup(A, { expose: B, emit: $ }) {
+    const s = A, v = $, h = w(null), l = w(!1);
+    function b() {
+      l.value = !l.value;
     }
-    const { focus: c, blur: B } = g(p), {
-      errorInternal: S,
-      isInsideForm: V,
-      reset: $,
-      validate: I,
-      setError: q
-    } = d(i, { focus: c, emit: m, withListeners: !1 }), { styles: E, classes: t, className: K } = U("Checkbox", {}, i, { checked: o });
-    return C({ focus: c, blur: B, toggle: u, reset: $, validate: I, setError: q }), (e, f) => (l(), n("label", {
-      style: N(s(E)),
-      class: r([
-        s(K),
-        s(t).wrapper,
-        { "mb-3": s(V) }
+    const { focus: y, blur: F } = z(h), {
+      errorInternal: G,
+      hideFooterInternal: N,
+      isInsideForm: S,
+      isInsideFormGroup: c,
+      isFirstValidation: _,
+      formGroup: r,
+      reset: q,
+      validate: k,
+      setError: E
+    } = f(s, { focus: y, emit: v, withListeners: !1 });
+    c ? (m(() => 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 o = a(r.value);
+      if (e)
+        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 (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) => {
+      l.value = !!e;
+    }, { immediate: !0 }), m(() => l.value, (e) => {
+      v("update:modelValue", e);
+    }));
+    const K = {
+      input: () => {
+        c || setTimeout(() => {
+          s.validateOnInput && !_.value && k(s.modelValue);
+        }, 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, o) => (i(), p("label", {
+      style: R(a(L)),
+      class: u([
+        a(M),
+        a(t).wrapper
       ])
     }, [
-      a("div", {
+      d("div", {
         ref_key: "elRef",
-        ref: p,
-        class: r(["flex items-center", { "cursor-not-allowed": e.disabled }]),
+        ref: h,
+        class: u(a(t).content),
         tabindex: "0",
-        onKeypress: _(D(u, ["prevent", "stop"]), ["space"])
+        onKeypress: T(H(b, ["prevent", "stop"]), ["space"])
       }, [
-        F(a("input", {
-          "onUpdate:modelValue": f[0] || (f[0] = (L) => o.value = L),
-          "aria-checked": o.value ? "true" : "false",
+        O(d("input", U({
+          id: e.id,
+          "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,
           type: "checkbox",
           class: "invisible absolute",
           disabled: e.disabled || e.loading,
-          name: e.name,
           required: e.required
-        }, null, 8, H), [
-          [R, o.value]
+        }, X(K, !0)), null, 16, se), [
+          [j, l.value]
         ]),
-        a("div", {
-          class: r([
-            s(t).box,
+        d("div", {
+          class: u([
+            a(t).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
-          e.loading ? (l(), v(j, {
+          e.loading ? (i(), V(Z, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : k(e.$slots, "icon", { key: 1 }, () => [
-            (l(), n("svg", {
+          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
+            (i(), p("svg", {
               viewBox: "0 0 20 20",
-              class: r([s(t).icon, { "opacity-0": !o.value }])
-            }, O, 2))
+              class: u([a(t).icon, { "opacity-0": !l.value }])
+            }, ae, 2))
           ])
         ], 2),
-        a("div", {
-          class: r(s(t).label)
+        d("div", {
+          class: u(a(t).label)
         }, [
-          e.label ? (l(), n("span", {
+          e.label ? (i(), p("span", {
             key: 0,
-            textContent: P(e.label)
-          }, null, 8, Q)) : k(e.$slots, "default", { key: 1 })
+            textContent: J(e.label)
+          }, null, 8, re)) : C(e.$slots, "default", { key: 1 })
         ], 2)
-      ], 42, G),
-      e.hideFooter ? T("", !0) : (l(), v(A, {
+      ], 42, ee),
+      a(N) ? Q("", !0) : (i(), V(x, {
         key: 0,
-        error: s(S),
+        error: a(G),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));
   }
 });
 export {
-  te as default
+  he as default
 };

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

@@ -1,52 +1,59 @@
-const b = {
+const o = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer align-middle",
-    box: ({ props: e }) => {
-      const r = ["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 e.size === "xs" || e.size === "sm" ? r.push("h-4 w-4") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-5 w-5"), r;
+    wrapper: ({ data: r }) => {
+      const e = ["inline-block relative cursor-pointer align-middle"];
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), e;
     },
-    icon: ({ props: e }) => {
-      const r = ["fill-current text-white dark:text-gray-900"];
-      return e.size === "xs" || e.size === "sm" ? r.push("h-2 w-2") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-3 w-3"), r;
+    box: ({ props: r }) => {
+      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;
     },
-    label: ({ props: e }) => {
-      const r = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
-      return e.size === "xs" ? r.push("text-xs") : e.size === "sm" ? r.push("text-sm") : e.size === "lg" ? r.push("text-lg") : e.size === "xl" && r.push("text-xl"), r;
+    content: ({ props: r }) => {
+      const e = ["flex items-baseline"];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    icon: ({ props: r }) => {
+      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-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;
     }
   },
-  styles({ props: e, colors: r, css: a, data: i }) {
-    const t = r.getPalette("gray"), s = r.getPalette(e.color), l = [];
-    return e.loading ? a.variables({
+  styles({ props: r, colors: e, css: l, data: i }) {
+    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
+    return r.loading ? l.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? l.push(a.variables({
-      bg: t[100],
-      border: t[200],
+    }) : (r.disabled ? a.push(l.variables({
+      bg: s[100],
+      border: s[200],
       dark: {
-        bg: t[800],
-        border: t[700]
+        bg: s[800],
+        border: s[700]
       }
-    })) : (i.checked ? l.push(a.variables({
-      bg: s[500],
-      border: s[500],
+    })) : (i.checked ? a.push(l.variables({
+      bg: t[500],
+      border: t[500],
       dark: {
-        bg: s[500],
-        border: s[500]
+        bg: t[500],
+        border: t[500]
       }
-    })) : l.push(a.variables({
+    })) : a.push(l.variables({
       bg: "#fff",
-      border: e.glow ? s[300] : t[300],
+      border: r.glow ? t[300] : s[300],
       dark: {
-        bg: t[900],
-        border: e.glow ? s[300] : t[400]
+        bg: s[900],
+        border: r.glow ? t[300] : s[400]
       }
-    })), e.glow && l.push(a.get("glow", r.getColorOpacity(s[500], 0.5)))), l);
+    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
   }
-}, o = b;
+}, n = o;
 export {
-  o as default
+  n as default
 };

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

@@ -1,52 +1,59 @@
-const b = {
+const o = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer align-middle",
-    box: ({ props: e }) => {
-      const r = ["rounded-sm 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 e.size === "xs" || e.size === "sm" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-5 w-5") : r.push("h-4 w-4"), r;
+    wrapper: ({ data: r }) => {
+      const e = ["inline-block relative cursor-pointer align-middle"];
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-8"), e;
     },
-    icon: ({ props: e }) => {
-      const r = ["fill-current text-white dark:text-gray-900"];
-      return e.size === "xs" || e.size === "sm" ? r.push("h-2 w-2") : e.size === "xl" ? r.push("h-3.5 w-3.5") : r.push("h-2.5 w-2.5"), r;
+    box: ({ props: r }) => {
+      const e = ["rounded-sm 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)] mt-0.5"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-5 w-5") : e.push("h-4 w-4"), e;
     },
-    label: ({ props: e }) => {
-      const r = ["inline-block text-gray-800 dark:text-gray-200 pl-2 text-sm"];
-      return e.size === "xs" ? r.push("text-xs") : e.size === "sm" ? r.push("text-sm") : e.size === "lg" ? r.push("text-lg") : e.size === "xl" && r.push("text-xl"), r;
+    content: ({ props: r }) => {
+      const e = ["flex"];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    icon: ({ props: r }) => {
+      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-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;
     }
   },
-  styles({ props: e, colors: r, css: a, data: i }) {
-    const t = r.getPalette("gray"), s = r.getPalette(e.color), l = [];
-    return e.loading ? a.variables({
+  styles({ props: r, colors: e, css: l, data: i }) {
+    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
+    return r.loading ? l.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? l.push(a.variables({
-      bg: t[100],
-      border: t[200],
+    }) : (r.disabled ? a.push(l.variables({
+      bg: s[100],
+      border: s[200],
       dark: {
-        bg: t[800],
-        border: t[700]
+        bg: s[800],
+        border: s[700]
       }
-    })) : (i.checked ? l.push(a.variables({
-      bg: s[500],
-      border: s[500],
+    })) : (i.checked ? a.push(l.variables({
+      bg: t[500],
+      border: t[500],
       dark: {
-        bg: s[500],
-        border: s[500]
+        bg: t[500],
+        border: t[500]
       }
-    })) : l.push(a.variables({
+    })) : a.push(l.variables({
       bg: "#fff",
-      border: e.glow ? s[300] : t[900],
+      border: r.glow ? t[300] : s[900],
       dark: {
-        bg: t[900],
-        border: e.glow ? s[300] : t[300]
+        bg: s[900],
+        border: r.glow ? t[300] : s[300]
       }
-    })), e.glow && l.push(a.get("glow", r.getColorOpacity(s[500], 0.5)))), l);
+    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
   }
-}, o = b;
+}, n = o;
 export {
-  o as default
+  n as default
 };

package/lib/components/container/Container.vue.d.ts

@@ -5,6 +5,10 @@ declare const containerProps: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>;
 type InternalClasses = 'wrapper';
@@ -15,13 +19,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: 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;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     tag: string;
+    fluid: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/container/Container.vue.js

@@ -1,20 +1,24 @@
-import { defineComponent as l, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as m, unref as e, normalizeClass as f, withCtx as u, renderSlot as d } from "vue";
-import { useTheme as _ } from "../../composables/useTheme.js";
-const y = {
+import { defineComponent as r, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as f, unref as e, normalizeClass as m, withCtx as u, renderSlot as d } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const _ = {
   tag: {
     type: String,
     default: "div"
+  },
+  fluid: {
+    type: Boolean,
+    default: !1
   }
-}, C = { name: "XContainer" }, k = /* @__PURE__ */ l({
+}, C = { name: "XContainer" }, S = /* @__PURE__ */ r({
   ...C,
-  props: y,
+  props: _,
   setup(s) {
-    const o = s, { styles: n, classes: a, className: r } = _("Container", {}, o);
+    const o = s, { styles: a, classes: n, className: l } = y("Container", {}, o);
     return (t, g) => (c(), p(i(t.tag), {
-      style: m(e(n)),
-      class: f([
-        e(r),
-        e(a).wrapper
+      style: f(e(a)),
+      class: m([
+        e(l),
+        e(n).wrapper
       ])
     }, {
       default: u(() => [
@@ -25,5 +29,5 @@ const y = {
   }
 });
 export {
-  k as default
+  S as default
 };

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

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