@scalar/components 0.12.76 → 0.13.1

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -1,129 +1,90 @@
-import { defineComponent as x, openBlock as i, createBlock as d, unref as t, withCtx as s, createTextVNode as v, toDisplayString as m, createCommentVNode as g, createVNode as n, createElementVNode as a, mergeProps as y, createElementBlock as V, Fragment as h, renderList as k, normalizeClass as p, renderSlot as z } from "vue";
-import { Listbox as B, ListboxLabel as L, ListboxOptions as w, ListboxOption as O, ListboxButton as C } from "@headlessui/vue";
-import { cva as S, cx as N } from "../../cva.js";
-import $ from "../ScalarFloating/ScalarFloating.vue.js";
-import j from "../ScalarIcon/ScalarIcon.vue.js";
-const E = { class: "custom-scroll min-h-0 flex-1" }, U = /* @__PURE__ */ x({
+import { defineComponent as b, openBlock as o, createBlock as a, unref as t, withCtx as l, createTextVNode as c, toDisplayString as g, createCommentVNode as d, createVNode as s, createElementBlock as m, mergeProps as y, createElementVNode as u, Fragment as V, renderList as B, normalizeStyle as k, renderSlot as w } from "vue";
+import { Listbox as L, ListboxLabel as h, ListboxOptions as v, ListboxButton as z } from "@headlessui/vue";
+import { useBindCx as S } from "../../hooks/useBindCx.js";
+import x from "./ScalarListboxItem.vue.js";
+import C from "../ScalarFloating/ScalarFloating.vue.js";
+const N = { class: "custom-scroll min-h-0 flex-1" }, O = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
-    multiple: { type: Boolean, default: !1 },
     options: {},
-    modelValue: {},
     id: {},
     label: {},
+    multiple: { type: Boolean },
+    modelValue: {},
     placement: {},
     resize: { type: Boolean },
-    isOpen: { type: Boolean },
+    target: {},
+    middleware: {},
     teleport: { type: [Boolean, String] }
   },
   emits: ["update:modelValue"],
-  setup(A) {
-    const c = S({
-      base: [
-        // Layout
-        "group/listbox",
-        "flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left",
-        "first-of-type:mt-0.75 last-of-type:mb-0.75",
-        // Text / background style
-        "truncate bg-transparent text-c-1",
-        // Interaction
-        "cursor-pointer hover:bg-b-2"
-      ],
-      variants: {
-        selected: { true: "text-c-1" },
-        active: { true: "bg-b-2" },
-        disabled: { true: "pointer-events-none opacity-50" }
-      }
-    });
-    return (e, o) => (i(), d(t(B), {
+  setup($) {
+    const { cx: p } = S();
+    return (e, r) => (o(), a(t(L), {
       modelValue: e.modelValue,
       multiple: e.multiple,
-      "onUpdate:modelValue": o[0] || (o[0] = (r) => e.$emit("update:modelValue", r))
+      "onUpdate:modelValue": r[0] || (r[0] = (i) => e.$emit("update:modelValue", i))
     }, {
-      default: s(({ open: r }) => [
-        e.label ? (i(), d(t(L), {
+      default: l(({ open: i }) => [
+        e.label ? (o(), a(t(h), {
           key: 0,
           class: "sr-only"
         }, {
-          default: s(() => [
-            v(m(e.label), 1)
+          default: l(() => [
+            c(g(e.label), 1)
           ]),
           _: 1
-        })) : g("", !0),
-        n(t($), {
-          isOpen: r ?? e.isOpen,
+        })) : d("", !0),
+        s(t(C), {
+          middleware: e.middleware,
           placement: e.placement ?? "bottom-start",
           resize: e.resize,
+          target: e.target,
           teleport: e.teleport
         }, {
-          floating: s(({ width: f }) => [
-            a("div", y(e.$attrs, {
-              class: "relative flex max-h-[inherit] w-40 rounded border text-sm",
-              style: { width: f }
-            }), [
-              a("div", E, [
-                n(t(w), { class: "flex flex-col p-0.75" }, {
-                  default: s(() => [
-                    (i(!0), V(h, null, k(e.options, (l) => (i(), d(t(O), {
-                      key: l.id,
-                      as: "template",
-                      disabled: l.disabled,
-                      value: l
-                    }, {
-                      default: s(({ active: b, selected: u }) => [
-                        a("li", {
-                          class: p(
-                            t(N)(
-                              t(c)({ active: b, selected: u, disabled: l.disabled })
-                            )
-                          )
-                        }, [
-                          a("div", {
-                            class: p([
-                              "flex size-4 items-center justify-center rounded-full p-[3px]",
-                              u ? "bg-c-accent text-b-1" : "text-transparent group-hover/listbox:shadow-border"
-                            ])
-                          }, [
-                            n(t(j), {
-                              class: "relative top-[0.5px] size-2.5",
-                              icon: "Checkmark",
-                              thickness: "2.5"
-                            })
-                          ], 2),
-                          a("span", {
-                            class: p(["inline-block min-w-0 flex-1 truncate", l.color ? l.color : "text-c-1"])
-                          }, m(l.label), 3)
-                        ], 2)
-                      ]),
-                      _: 2
-                    }, 1032, ["disabled", "value"]))), 128))
+          floating: l(({ width: f }) => [
+            i ? (o(), m("div", y(
+              {
+                key: 0,
+                style: { width: f }
+              },
+              t(p)("relative flex max-h-[inherit] w-40 rounded border text-sm")
+            ), [
+              u("div", N, [
+                s(t(v), { class: "flex flex-col p-0.75" }, {
+                  default: l(() => [
+                    (o(!0), m(V, null, B(e.options, (n) => (o(), a(x, {
+                      key: n.id,
+                      option: n,
+                      style: k(e.multiple ? "checkbox" : "radio")
+                    }, null, 8, ["option", "style"]))), 128))
                   ]),
                   _: 1
                 })
               ]),
-              o[1] || (o[1] = a("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1))
-            ], 16)
+              r[1] || (r[1] = u("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1))
+            ], 16)) : d("", !0)
           ]),
-          default: s(() => [
-            n(t(C), {
+          default: l(() => [
+            s(t(z), {
               id: e.id,
               as: "template",
               class: "justify-start focus:outline-none focus-visible:ring-1 focus-visible:ring-c-accent"
             }, {
-              default: s(() => [
-                z(e.$slots, "default", { open: r })
+              default: l(() => [
+                w(e.$slots, "default", { open: i })
               ]),
               _: 2
             }, 1032, ["id"])
           ]),
           _: 2
-        }, 1032, ["isOpen", "placement", "resize", "teleport"])
+        }, 1032, ["middleware", "placement", "resize", "target", "teleport"])
       ]),
       _: 3
     }, 8, ["modelValue", "multiple"]));
   }
 });
 export {
-  U as default
+  O as default
 };

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.d.ts

@@ -0,0 +1,8 @@
+import type { OptionStyle } from './types';
+type __VLS_Props = {
+    selected?: boolean;
+    style?: OptionStyle;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=ScalarListboxCheckbox.vue.d.ts.map

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListboxCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxCheckbox.vue"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC;;AAyEF,wBAOG"}

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent as t, openBlock as o, createElementBlock as r, normalizeClass as c, createVNode as s, unref as n } from "vue";
+import a from "../ScalarIcon/ScalarIcon.vue.js";
+const m = /* @__PURE__ */ t({
+  __name: "ScalarListboxCheckbox",
+  props: {
+    selected: { type: Boolean },
+    style: {}
+  },
+  setup(l) {
+    return (e, p) => (o(), r("div", {
+      class: c(["flex size-4 items-center justify-center p-0.75", [
+        e.selected ? "bg-c-accent text-b-1" : "text-transparent group-hover/item:shadow-border",
+        e.style === "checkbox" ? "rounded" : "rounded-full"
+      ]])
+    }, [
+      s(n(a), {
+        class: "relative top-[0.5px] size-2.5",
+        icon: "Checkmark",
+        thickness: "2.5"
+      })
+    ], 2));
+  }
+});
+export {
+  m as default
+};

package/dist/components/ScalarListbox/ScalarListboxCheckbox.vue2.js

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

package/dist/components/ScalarListbox/ScalarListboxItem.vue.d.ts

@@ -0,0 +1,8 @@
+import type { Option, OptionStyle } from './types';
+type __VLS_Props = {
+    option: Option;
+    style?: OptionStyle;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarListboxItem.vue.d.ts.map

package/dist/components/ScalarListbox/ScalarListboxItem.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarListboxItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListboxItem.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIlD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC;;AAoGF,wBAOG"}

package/dist/components/ScalarListbox/ScalarListboxItem.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent as l, openBlock as s, createBlock as p, unref as t, withCtx as c, createElementVNode as a, normalizeClass as n, createVNode as m, normalizeStyle as d, toDisplayString as b } from "vue";
+import { ListboxOption as u } from "@headlessui/vue";
+import { cva as f, cx as y } from "../../cva.js";
+import v from "./ScalarListboxCheckbox.vue.js";
+const C = /* @__PURE__ */ l({
+  __name: "ScalarListboxItem",
+  props: {
+    option: {},
+    style: {}
+  },
+  setup(g) {
+    const r = f({
+      base: [
+        // Layout
+        "group/item",
+        "flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left",
+        "first-of-type:mt-0.75 last-of-type:mb-0.75",
+        // Text / background style
+        "truncate bg-transparent text-c-1",
+        // Interaction
+        "cursor-pointer hover:bg-b-2"
+      ],
+      variants: {
+        selected: { true: "text-c-1" },
+        active: { true: "bg-b-2" },
+        disabled: { true: "pointer-events-none opacity-50" }
+      }
+    });
+    return (e, x) => (s(), p(t(u), {
+      as: "template",
+      disabled: e.option.disabled,
+      value: e.option
+    }, {
+      default: c(({ active: i, selected: o }) => [
+        a("li", {
+          class: n(t(y)(t(r)({ active: i, selected: o, disabled: e.option.disabled })))
+        }, [
+          m(v, {
+            selected: o,
+            style: d(e.style)
+          }, null, 8, ["selected", "style"]),
+          a("span", {
+            class: n(["inline-block min-w-0 flex-1 truncate", e.option.color ? e.option.color : "text-c-1"])
+          }, b(e.option.label), 3)
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["disabled", "value"]));
+  }
+});
+export {
+  C as default
+};

package/dist/components/ScalarListbox/ScalarListboxItem.vue2.js

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

package/dist/components/ScalarListbox/index.d.ts

@@ -1,3 +1,5 @@
 export { default as ScalarListbox } from './ScalarListbox.vue.js';
-export type { Option as ScalarListboxOption } from './types';
+export { default as ScalarListboxItem } from './ScalarListboxItem.vue.js';
+export { default as ScalarListboxCheckbox } from './ScalarListboxCheckbox.vue.js';
+export type { Option as ScalarListboxOption, OptionStyle as ScalarListboxOptionStyle, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarListbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAE9D,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAE9E,YAAY,EACV,MAAM,IAAI,mBAAmB,EAC7B,WAAW,IAAI,wBAAwB,GACxC,MAAM,SAAS,CAAA"}

package/dist/components/ScalarListbox/types.d.ts

@@ -4,4 +4,5 @@ export type Option = {
     disabled?: boolean;
     [x: string]: any;
 };
+export type OptionStyle = 'radio' | 'checkbox';
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarListbox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;CACjB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,UAAU,CAAA"}

package/dist/components/ScalarLoading/ScalarLoading.stories.d.ts

@@ -4,15 +4,29 @@ import type { StoryObj } from '@storybook/vue3';
  */
 declare const meta: {
     component: import("vue").DefineComponent<{
-        loadingState: import("./ScalarLoading.vue.js").LoadingState;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
+        loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+        size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
     }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-        loadingState: import("./ScalarLoading.vue.js").LoadingState;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
+        loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+        size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
     }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
     tags: string[];
-    argTypes: {};
-    render: () => {
+    argTypes: {
+        class: {
+            control: "text";
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+    render: (args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
+        loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+        size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+        loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+        size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>>) => {
         components: {
             ScalarButton: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
@@ -70,14 +84,21 @@ declare const meta: {
                 };
             });
             ScalarLoading: import("vue").DefineComponent<{
-                loadingState: import("./ScalarLoading.vue.js").LoadingState;
-                size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
+                loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+                size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
             }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-                loadingState: import("./ScalarLoading.vue.js").LoadingState;
-                size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
+                loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+                size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
             }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
         };
         setup(this: void): {
+            args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
+                loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+                size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
+            }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+                loadingState?: import("./ScalarLoading.vue.js").LoadingState;
+                size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
+            }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>>;
             loadingState: {
                 isValid: boolean;
                 isInvalid: boolean;
@@ -95,4 +116,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarLoading.stories.d.ts.map

package/dist/components/ScalarLoading/ScalarLoading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarLoading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAiB,CAAA"}
+{"version":3,"file":"ScalarLoading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAgC,CAAA;AAEnD,eAAO,MAAM,aAAa,EAAE,KAA8C,CAAA"}

package/dist/components/ScalarLoading/ScalarLoading.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ScalarLoading.test.d.ts.map

package/dist/components/ScalarLoading/ScalarLoading.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarLoading.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.test.ts"],"names":[],"mappings":""}

package/dist/components/ScalarLoading/ScalarLoading.vue.d.ts

@@ -15,11 +15,11 @@ export declare function useLoadingState(): {
     clear: (time?: number) => Promise<unknown>;
 };
 declare const _default: import("vue").DefineComponent<{
-    loadingState: LoadingState;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
+    loadingState?: LoadingState;
+    size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    loadingState: LoadingState;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | undefined;
+    loadingState?: LoadingState;
+    size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "full" | undefined;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarLoading.vue.d.ts.map

package/dist/components/ScalarLoading/ScalarLoading.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarLoading.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"names":[],"mappings":"AA2OA,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,eAAe;;;;;;sCAWE,OAAO;wCAWJ,OAAO;;EAuB1C;;kBAOe,YAAY;;;kBAAZ,YAAY;;;AAL5B,wBAsIK"}
+{"version":3,"file":"ScalarLoading.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarLoading/ScalarLoading.vue"],"names":[],"mappings":"AAgPA,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,eAAe;;;;;;sCAWE,OAAO;wCAWJ,OAAO;;EAuB1C;;mBAOgB,YAAY;;;mBAAZ,YAAY;;;AAL7B,wBAyIK"}

package/dist/components/ScalarLoading/ScalarLoading.vue.js

@@ -1,9 +1,9 @@
 import o from "./ScalarLoading.vue2.js";
-import { useLoadingState as i } from "./ScalarLoading.vue2.js";
+import { useLoadingState as d } from "./ScalarLoading.vue2.js";
 /* empty css                   */
 import a from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-5a129980"]]);
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-ca661d68"]]);
 export {
   m as default,
-  i as useLoadingState
+  d as useLoadingState
 };

package/dist/components/ScalarLoading/ScalarLoading.vue2.js

@@ -1,11 +1,12 @@
-import { defineComponent as d, openBlock as e, createElementBlock as l, normalizeClass as n, unref as o, createStaticVNode as h, createElementVNode as v, createCommentVNode as r, reactive as g } from "vue";
-import { cva as m, cx as p } from "../../cva.js";
-const u = {
+import { defineComponent as m, openBlock as t, createElementBlock as l, normalizeProps as c, mergeProps as h, unref as n, normalizeClass as o, createStaticVNode as p, createElementVNode as g, createCommentVNode as d, reactive as v } from "vue";
+import { cva as u } from "../../cva.js";
+import { useBindCx as f } from "../../hooks/useBindCx.js";
+const z = {
   key: 0,
   class: "circular-loader"
 };
-function w() {
-  return g({
+function S() {
+  return v({
     isValid: !1,
     isInvalid: !1,
     isLoading: !1,
@@ -15,37 +16,38 @@ function w() {
     stopLoading() {
       this.isLoading = !1;
     },
-    validate(i = 800, s) {
+    validate(e = 800, s) {
       this.isInvalid = !1, this.isValid = !0;
-      const a = s ? i - 300 : i;
+      const i = s ? e - 300 : e;
       return new Promise(
-        (t) => setTimeout(s ? () => this.clear().then(() => t(!0)) : () => t(!0), a)
+        (a) => setTimeout(s ? () => this.clear().then(() => a(!0)) : () => a(!0), i)
       );
     },
-    invalidate(i = 1100, s) {
+    invalidate(e = 1100, s) {
       this.isValid = !1, this.isInvalid = !0;
-      const a = s ? i - 300 : i;
+      const i = s ? e - 300 : e;
       return new Promise(
-        (t) => setTimeout(s ? () => this.clear().then(() => t(!0)) : () => t(!0), a)
+        (a) => setTimeout(s ? () => this.clear().then(() => a(!0)) : () => a(!0), i)
       );
     },
-    clear(i = 300) {
+    clear(e = 300) {
       return this.isValid = !1, this.isInvalid = !1, this.isLoading = !1, new Promise((s) => {
         setTimeout(() => {
           s(!0);
-        }, i);
+        }, e);
       });
     }
   });
 }
-const z = /* @__PURE__ */ d({
+const V = /* @__PURE__ */ m({
+  inheritAttrs: !1,
   __name: "ScalarLoading",
   props: {
     loadingState: {},
     size: {}
   },
-  setup(i) {
-    const s = m({
+  setup(e) {
+    const { cx: s } = f(), i = u({
       variants: {
         size: {
           xs: "size-3",
@@ -62,12 +64,9 @@ const z = /* @__PURE__ */ d({
         size: "full"
       }
     });
-    return (a, t) => a.loadingState ? (e(), l("div", {
-      key: 0,
-      class: n(o(p)("loader-wrapper", o(s)({ size: a.size })))
-    }, [
-      (e(), l("svg", {
-        class: n(["svg-loader", {
+    return (a, r) => a.loadingState ? (t(), l("div", c(h({ key: 0 }, n(s)("loader-wrapper", n(i)({ size: a.size })))), [
+      (t(), l("svg", {
+        class: o(["svg-loader", {
           "icon-is-valid": a.loadingState.isValid,
           "icon-is-invalid": a.loadingState.isInvalid
         }]),
@@ -75,10 +74,10 @@ const z = /* @__PURE__ */ d({
         xmlns: "http://www.w3.org/2000/svg",
         "xmlns:xlink": "http://www.w3.org/1999/xlink"
       }, [
-        t[0] || (t[0] = h('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-5a129980></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-5a129980></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-5a129980></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-5a129980></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-5a129980></path>', 5)),
-        a.loadingState.isLoading ? (e(), l("g", u, [
-          v("circle", {
-            class: n(["loader-path", {
+        r[0] || (r[0] = p('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-ca661d68></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-ca661d68></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-ca661d68></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-ca661d68></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-ca661d68></path>', 5)),
+        a.loadingState.isLoading ? (t(), l("g", z, [
+          g("circle", {
+            class: o(["loader-path", {
               "loader-path-off": a.loadingState.isValid || a.loadingState.isInvalid
             }]),
             cx: "50",
@@ -87,12 +86,12 @@ const z = /* @__PURE__ */ d({
             r: "20",
             "stroke-width": "2"
           }, null, 2)
-        ])) : r("", !0)
+        ])) : d("", !0)
       ], 2))
-    ], 2)) : r("", !0);
+    ], 16)) : d("", !0);
   }
 });
 export {
-  z as default,
-  w as useLoadingState
+  V as default,
+  S as useLoadingState
 };