@scalar/components 0.12.76 → 0.13.0

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

@@ -11,7 +11,7 @@ declare const meta: {
             bodyClass?: string;
             maxWidth?: string;
             size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs" | undefined;
-            variant?: "form" | "search" | "history" | "error" | undefined;
+            variant?: "form" | "search" | "error" | "history" | undefined;
         }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
             size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs";
         }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -27,7 +27,7 @@ declare const meta: {
             bodyClass?: string;
             maxWidth?: string;
             size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs" | undefined;
-            variant?: "form" | "search" | "history" | "error" | undefined;
+            variant?: "form" | "search" | "error" | "history" | undefined;
         }> & Readonly<{}>, {}, {}, {}, {}, {
             size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs";
         }>;
@@ -40,7 +40,7 @@ declare const meta: {
         bodyClass?: string;
         maxWidth?: string;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs" | undefined;
-        variant?: "form" | "search" | "history" | "error" | undefined;
+        variant?: "form" | "search" | "error" | "history" | undefined;
     }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs";
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

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

@@ -10,14 +10,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     bodyClass?: string;
     maxWidth?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs" | undefined;
-    variant?: "form" | "search" | "history" | "error" | undefined;
+    variant?: "form" | "search" | "error" | "history" | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     state: ReturnType<typeof useModal>;
     title?: string;
     bodyClass?: string;
     maxWidth?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs" | undefined;
-    variant?: "form" | "search" | "history" | "error" | undefined;
+    variant?: "form" | "search" | "error" | "history" | undefined;
 }> & Readonly<{}>, {
     size: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "xxs";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -1,44 +1,19 @@
 import type { StoryObj } from '@storybook/vue3';
 declare const meta: {
     component: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-            resize?: boolean | undefined;
-            placement?: import("@floating-ui/vue").Placement | undefined;
-            targetRef?: HTMLElement | undefined;
-            isOpen?: boolean | undefined;
-            teleport?: (boolean | string) | undefined;
-        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<{
-            resize?: boolean | undefined;
-            placement?: import("@floating-ui/vue").Placement | undefined;
-            targetRef?: HTMLElement | undefined;
-            isOpen?: boolean | undefined;
-            teleport?: (boolean | string) | undefined;
-        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<{
-        resize?: boolean | undefined;
-        placement?: import("@floating-ui/vue").Placement | undefined;
-        targetRef?: HTMLElement | undefined;
-        isOpen?: boolean | undefined;
-        teleport?: (boolean | string) | undefined;
-    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {
-                open: any;
-            }): any;
-            popover?(_: {
-                close: () => any;
-            }): any;
-        };
+    } & import("vue").ComponentOptionsBase<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: Readonly<import("./types").Slots> & import("./types").Slots;
     });
     tags: string[];
     argTypes: {
@@ -49,87 +24,40 @@ declare const meta: {
             control: "select";
             options: import("@floating-ui/utils").Placement[];
         };
+        class: {
+            control: "text";
+        };
     };
     render: (args: import("@storybook/vue3").ComponentPropsAndSlots<{
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-            resize?: boolean | undefined;
-            placement?: import("@floating-ui/vue").Placement | undefined;
-            targetRef?: HTMLElement | undefined;
-            isOpen?: boolean | undefined;
-            teleport?: (boolean | string) | undefined;
-        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<{
-            resize?: boolean | undefined;
-            placement?: import("@floating-ui/vue").Placement | undefined;
-            targetRef?: HTMLElement | undefined;
-            isOpen?: boolean | undefined;
-            teleport?: (boolean | string) | undefined;
-        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<{
-        resize?: boolean | undefined;
-        placement?: import("@floating-ui/vue").Placement | undefined;
-        targetRef?: HTMLElement | undefined;
-        isOpen?: boolean | undefined;
-        teleport?: (boolean | string) | undefined;
-    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {
-                open: any;
-            }): any;
-            popover?(_: {
-                close: () => any;
-            }): any;
-        };
+    } & import("vue").ComponentOptionsBase<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: Readonly<import("./types").Slots> & import("./types").Slots;
     })>) => {
         components: {
             ScalarPopover: {
-                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-                    resize?: boolean | undefined;
-                    placement?: import("@floating-ui/vue").Placement | undefined;
-                    targetRef?: HTMLElement | undefined;
-                    isOpen?: boolean | undefined;
-                    teleport?: (boolean | string) | undefined;
-                }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                     P: {};
                     B: {};
                     D: {};
                     C: {};
                     M: {};
                     Defaults: {};
-                }, Readonly<{
-                    resize?: boolean | undefined;
-                    placement?: import("@floating-ui/vue").Placement | undefined;
-                    targetRef?: HTMLElement | undefined;
-                    isOpen?: boolean | undefined;
-                    teleport?: (boolean | string) | undefined;
-                }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
                 __isFragment?: never;
                 __isTeleport?: never;
                 __isSuspense?: never;
-            } & import("vue").ComponentOptionsBase<Readonly<{
-                resize?: boolean | undefined;
-                placement?: import("@floating-ui/vue").Placement | undefined;
-                targetRef?: HTMLElement | undefined;
-                isOpen?: boolean | undefined;
-                teleport?: (boolean | string) | undefined;
-            }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-                $slots: {
-                    default?(_: {
-                        open: any;
-                    }): any;
-                    popover?(_: {
-                        close: () => any;
-                    }): any;
-                };
+            } & import("vue").ComponentOptionsBase<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: Readonly<import("./types").Slots> & import("./types").Slots;
             });
             ScalarButton: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
@@ -189,44 +117,19 @@ declare const meta: {
         };
         setup(this: void): {
             args: import("@storybook/vue3").ComponentPropsAndSlots<{
-                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-                    resize?: boolean | undefined;
-                    placement?: import("@floating-ui/vue").Placement | undefined;
-                    targetRef?: HTMLElement | undefined;
-                    isOpen?: boolean | undefined;
-                    teleport?: (boolean | string) | undefined;
-                }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                     P: {};
                     B: {};
                     D: {};
                     C: {};
                     M: {};
                     Defaults: {};
-                }, Readonly<{
-                    resize?: boolean | undefined;
-                    placement?: import("@floating-ui/vue").Placement | undefined;
-                    targetRef?: HTMLElement | undefined;
-                    isOpen?: boolean | undefined;
-                    teleport?: (boolean | string) | undefined;
-                }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
                 __isFragment?: never;
                 __isTeleport?: never;
                 __isSuspense?: never;
-            } & import("vue").ComponentOptionsBase<Readonly<{
-                resize?: boolean | undefined;
-                placement?: import("@floating-ui/vue").Placement | undefined;
-                targetRef?: HTMLElement | undefined;
-                isOpen?: boolean | undefined;
-                teleport?: (boolean | string) | undefined;
-            }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-                $slots: {
-                    default?(_: {
-                        open: any;
-                    }): any;
-                    popover?(_: {
-                        close: () => any;
-                    }): any;
-                };
+            } & import("vue").ComponentOptionsBase<Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: Readonly<import("./types").Slots> & import("./types").Slots;
             })>;
         };
         template: string;
@@ -235,4 +138,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarPopover.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA"}
+{"version":3,"file":"ScalarPopover.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}

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

@@ -1,20 +1,13 @@
-import { type FloatingOptions } from '../ScalarFloating';
-type __VLS_Props = Omit<FloatingOptions, 'middleware'>;
+import { type ScalarFloatingOptions } from '../ScalarFloating';
+import type { Slots } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            open: any;
-        }): any;
-        popover?(_: {
-            close: () => any;
-        }): any;
-    };
+    slots: Readonly<Slots> & Slots;
     refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: 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>;
+declare const __VLS_component: import("vue").DefineComponent<ScalarFloatingOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AAyCA,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,mBAAmB,CAAA;AAKxE,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AAUvD,iBAAS,cAAc;WA4FT,OAAO,IAA6B;;;;YATpB,GAAG;;;YACH,GAAG;;;;EAahC;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/ScalarPopover.vue"],"names":[],"mappings":"AA2CA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAiBpC,iBAAS,cAAc;WAoFT,OAAO,IAA6B;;;;EAKjD;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,sTAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarPopover/ScalarPopover.vue.js

@@ -1,52 +1,51 @@
-import { defineComponent as d, openBlock as m, createBlock as u, unref as o, withCtx as t, createVNode as r, mergeProps as p, renderSlot as a, createElementVNode as c } from "vue";
-import { Popover as g, PopoverPanel as v, PopoverButton as B } from "@headlessui/vue";
-import P from "../ScalarFloating/ScalarFloating.vue.js";
-const O = /* @__PURE__ */ d({
+import { defineComponent as f, openBlock as m, createBlock as u, unref as e, withCtx as t, createVNode as r, normalizeProps as c, guardReactiveProps as _, mergeProps as g, renderSlot as s, createElementVNode as v } from "vue";
+import { Popover as P, PopoverPanel as B, PopoverButton as b } from "@headlessui/vue";
+import { useBindCx as x } from "../../hooks/useBindCx.js";
+import y from "../ScalarFloating/ScalarFloating.vue.js";
+const S = /* @__PURE__ */ f({
   inheritAttrs: !1,
   __name: "ScalarPopover",
   props: {
     placement: {},
     resize: { type: Boolean },
-    targetRef: {},
-    isOpen: { type: Boolean },
+    target: {},
+    middleware: {},
     teleport: { type: [Boolean, String] }
   },
-  setup(_) {
-    return (e, l) => (m(), u(o(g), { as: "template" }, {
-      default: t(({ open: s }) => [
-        r(o(P), p(e.$props, {
-          isOpen: s ?? e.isOpen,
-          teleport: e.teleport
-        }), {
+  setup($) {
+    const { cx: p } = x();
+    return (o, l) => (m(), u(e(P), { as: "template" }, {
+      default: t(({ open: a }) => [
+        r(e(y), c(_(o.$props)), {
           floating: t(({ width: n, height: i }) => [
-            r(o(v), p({
-              class: "relative flex flex-col p-0.75",
+            r(e(B), g({
               style: { width: n, height: i }
-            }, e.$attrs), {
-              default: t(({ close: f }) => [
-                a(e.$slots, "popover", {
-                  close: () => f()
+            }, e(p)("relative flex flex-col p-0.75")), {
+              default: t(({ close: d }) => [
+                s(o.$slots, "popover", {
+                  close: () => d(),
+                  open: a
                 }),
-                l[0] || (l[0] = c("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1))
+                l[0] || (l[0] = v("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1))
               ]),
               _: 2
             }, 1040, ["style"])
           ]),
           default: t(() => [
-            r(o(B), { as: "template" }, {
+            r(e(b), { as: "template" }, {
               default: t(() => [
-                a(e.$slots, "default", { open: s })
+                s(o.$slots, "default", { open: a })
               ]),
               _: 2
             }, 1024)
           ]),
           _: 2
-        }, 1040, ["isOpen", "teleport"])
+        }, 1040)
       ]),
       _: 3
     }));
   }
 });
 export {
-  O as default
+  S as default
 };

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

@@ -1,2 +1,3 @@
 export { default as ScalarPopover } from './ScalarPopover.vue.js';
+export type { Slots as ScalarPopoverSlots } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAE9D,YAAY,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,15 @@
+import type { Slot } from 'vue';
+export type Slots = {
+    default(props: {
+        /** Whether or not the popover is open */
+        open: boolean;
+    }): Slot;
+    /** The popover contents */
+    popover(props: {
+        /** Whether or not the popover is open */
+        open: boolean;
+        /** A callback to close the popover */
+        close: () => void;
+    }): Slot;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarPopover/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE/B,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,IAAI,CAAA;IACR,2BAA2B;IAC3B,OAAO,CAAC,KAAK,EAAE;QACb,yCAAyC;QACzC,IAAI,EAAE,OAAO,CAAA;QACb,sCAAsC;QACtC,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,GAAG,IAAI,CAAA;CACT,CAAA"}

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

@@ -19,7 +19,11 @@ declare const meta: {
         "onUpdate:modelValue"?: ((v: string) => any) | undefined;
     }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        class: {
+            control: "text";
+        };
+    };
     render: (args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
         loading?: import("../ScalarLoading").LoadingState;
         modelValue?: string;
@@ -86,4 +90,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Loading: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarSearchInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYgC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA"}
+{"version":3,"file":"ScalarSearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcgC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js

@@ -1,7 +1,7 @@
-import a from "./ScalarSearchInput.vue2.js";
+import o from "./ScalarSearchInput.vue2.js";
 /* empty css                       */
-import o from "../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ o(a, [["__scopeId", "data-v-52e35a1d"]]);
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-5b435217"]]);
 export {
   c as default
 };

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue2.js

@@ -1,9 +1,9 @@
 import { defineComponent as b, ref as h, computed as g, useAttrs as k, openBlock as s, createElementBlock as v, normalizeClass as i, unref as a, createBlock as o, createCommentVNode as u, createElementVNode as S, mergeProps as V } from "vue";
 import { cva as y, cx as c } from "../../cva.js";
 import C from "../ScalarIcon/ScalarIcon.vue.js";
-import N from "../ScalarLoading/ScalarLoading.vue.js";
-import z from "../ScalarIconButton/ScalarIconButton.vue.js";
-const B = ["aria-label", "value"], q = /* @__PURE__ */ b({
+import z from "../ScalarLoading/ScalarLoading.vue.js";
+import B from "../ScalarIconButton/ScalarIconButton.vue.js";
+const I = ["aria-label", "value"], q = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "ScalarSearchInput",
   props: {
@@ -13,14 +13,14 @@ const B = ["aria-label", "value"], q = /* @__PURE__ */ b({
     label: {}
   },
   emits: ["update:modelValue"],
-  setup(I, { expose: d, emit: m }) {
+  setup(E, { expose: d, emit: m }) {
     const t = m, r = h(null);
     function p(e) {
       t("update:modelValue", e.target.value);
     }
     const n = g(() => {
       const { class: e, ...l } = k();
-      return { className: e || "", rest: l };
+      return { class: e || "", rest: l };
     }), f = y({
       base: "search-background flex items-center rounded border text-sm font-medium has-[:focus-visible]:bg-b-1 has-[:focus-visible]:outline",
       variants: {
@@ -40,7 +40,7 @@ const B = ["aria-label", "value"], q = /* @__PURE__ */ b({
         (e = r.value) == null || e.blur();
       }
     }), (e, l) => (s(), v("label", {
-      class: i(a(c)(a(f)({ sidebar: e.sidebar }), n.value.className))
+      class: i(a(c)(a(f)({ sidebar: e.sidebar }), n.value.class))
     }, [
       e.sidebar ? (s(), o(a(C), {
         key: 0,
@@ -63,19 +63,19 @@ const B = ["aria-label", "value"], q = /* @__PURE__ */ b({
         type: "search",
         value: e.modelValue,
         onInput: p
-      }), null, 16, B),
-      e.loading && e.loading.isLoading ? (s(), o(a(N), {
+      }), null, 16, I),
+      e.loading && e.loading.isLoading ? (s(), o(a(z), {
         key: 1,
         class: "mr-3 self-center",
         loadingState: e.loading,
         size: "md"
-      }, null, 8, ["loadingState"])) : e.modelValue ? (s(), o(a(z), {
+      }, null, 8, ["loadingState"])) : e.modelValue ? (s(), o(a(B), {
         key: 2,
         class: i(a(c)("p-0", e.sidebar ? "h-4 w-4" : "h-5 w-5")),
         icon: "Close",
         label: "Clear Search",
         thickness: e.sidebar ? "1.75" : "1.5",
-        onClick: l[0] || (l[0] = (E) => t("update:modelValue", ""))
+        onClick: l[0] || (l[0] = (N) => t("update:modelValue", ""))
       }, null, 8, ["class", "thickness"])) : u("", !0)
     ], 2));
   }

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AAwEA,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAgBF,iBAAS,cAAc;WAkGT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;uBACL,GAAG;6BACG,GAAG;;;;EAanC;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA6DA,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAWF,iBAAS,cAAc;WAiGT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;uBACL,GAAG;6BACG,GAAG;;;;EAanC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.js

@@ -1,67 +1,63 @@
-import { defineComponent as i, computed as d, useAttrs as m, openBlock as t, createElementBlock as n, createElementVNode as s, mergeProps as u, unref as a, renderSlot as r, createBlock as p, createCommentVNode as l } from "vue";
-import { cx as f } from "../../cva.js";
-import v from "../ScalarIcon/ScalarIcon.vue.js";
+import { defineComponent as a, openBlock as t, createElementBlock as s, createElementVNode as o, normalizeProps as d, guardReactiveProps as m, unref as l, renderSlot as n, createBlock as p, createCommentVNode as r } from "vue";
+import { useBindCx as u } from "../../hooks/useBindCx.js";
+import f from "../ScalarIcon/ScalarIcon.vue.js";
 const h = {
   class: "contents",
   role: "option"
-}, _ = {
+}, v = {
   key: 0,
   class: "flex h-fit items-center text-sm font-medium text-c-3 group-hover:text-c-1"
-}, x = { class: "flex min-w-0 flex-1 flex-col gap-0.75" }, g = { class: "flex items-center gap-1" }, k = { class: "flex-1 truncate text-sm font-medium" }, y = {
+}, x = { class: "flex min-w-0 flex-1 flex-col gap-0.75" }, _ = { class: "flex items-center gap-1" }, g = { class: "flex-1 truncate text-sm font-medium" }, k = {
   key: 0,
   class: "text-sm text-c-2"
-}, $ = {
+}, y = {
   key: 0,
   class: "truncate text-sm text-c-2"
-}, A = /* @__PURE__ */ i({
+}, C = /* @__PURE__ */ a({
   inheritAttrs: !1,
   __name: "ScalarSearchResultItem",
   props: {
     icon: {},
     active: { type: Boolean }
   },
-  setup(N) {
-    const c = d(() => {
-      const { class: e, ...o } = m();
-      return { className: e || "", rest: o };
-    });
-    return (e, o) => (t(), n("li", h, [
-      s("a", u(c.value.rest, {
-        class: a(f)(
+  setup($) {
+    const { cx: c } = u();
+    return (e, i) => (t(), s("li", h, [
+      o("a", d(m(
+        l(c)(
           "group flex cursor-pointer gap-2.5 rounded px-3 py-1.5 no-underline hover:bg-b-2",
           {
             "bg-b-2": e.active
-          },
-          c.value.className
+          }
         )
-      }), [
-        e.icon ? (t(), n("div", _, [
-          r(e.$slots, "icon", {}, () => [
-            e.icon ? (t(), p(a(v), {
+      )), [
+        e.icon ? (t(), s("div", v, [
+          n(e.$slots, "icon", {}, () => [
+            e.icon ? (t(), p(l(f), {
               key: 0,
               icon: e.icon,
               size: "sm"
-            }, null, 8, ["icon"])) : l("", !0)
+            }, null, 8, ["icon"])) : r("", !0)
           ]),
-          o[0] || (o[0] = s("span", null, " ", -1))
-        ])) : l("", !0),
-        s("div", x, [
-          s("div", g, [
-            s("div", k, [
-              r(e.$slots, "default")
+          i[0] || (i[0] = o("span", null, " ", -1))
+        ])) : r("", !0),
+        o("div", x, [
+          o("div", _, [
+            o("div", g, [
+              n(e.$slots, "default")
             ]),
-            e.$slots.addon ? (t(), n("div", y, [
-              r(e.$slots, "addon")
-            ])) : l("", !0)
+            e.$slots.addon ? (t(), s("div", k, [
+              n(e.$slots, "addon")
+            ])) : r("", !0)
           ]),
-          e.$slots.description ? (t(), n("div", $, [
-            r(e.$slots, "description")
-          ])) : l("", !0)
+          e.$slots.description ? (t(), s("div", y, [
+            n(e.$slots, "description")
+          ])) : r("", !0)
         ])
       ], 16)
     ]));
   }
 });
 export {
-  A as default
+  C as default
 };

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"names":[],"mappings":"AAyCA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AAgBF,iBAAS,cAAc;WAsDT,OAAO,IAA6B;;2BATnB,GAAG;yBACL,GAAG;;;;EAa/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSearchResultList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultList.vue"],"names":[],"mappings":"AA+BA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AAWF,iBAAS,cAAc;WAsDT,OAAO,IAA6B;;2BATnB,GAAG;yBACL,GAAG;;;;EAa/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}