@scalar/components 0.12.75 → 0.13.0

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

@@ -1,41 +1,32 @@
 import type { StoryObj } from '@storybook/vue3';
 declare const meta: {
     component: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-            static?: boolean;
-            staticOpen?: boolean;
-        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            static: boolean;
-            staticOpen: boolean;
-        }, 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<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-            static?: boolean;
-            staticOpen?: boolean;
-        }> & Readonly<{}>, {}, {}, {}, {}, {
-            static: boolean;
-            staticOpen: boolean;
-        }>;
+        }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-        static?: boolean;
-        staticOpen?: boolean;
-    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-        static: boolean;
-        staticOpen: boolean;
-    }, {}, 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;
-            items?(_: {}): 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<{
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
+            items(props: {
+                open: boolean;
+            }): import("vue").Slot;
+        }> & {
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
+            items(props: {
+                open: boolean;
+            }): import("vue").Slot;
         };
     });
     tags: string[];
@@ -47,82 +38,67 @@ 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<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-            static?: boolean;
-            staticOpen?: boolean;
-        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            static: boolean;
-            staticOpen: boolean;
-        }, 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<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-            static?: boolean;
-            staticOpen?: boolean;
-        }> & Readonly<{}>, {}, {}, {}, {}, {
-            static: boolean;
-            staticOpen: boolean;
-        }>;
+        }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-        static?: boolean;
-        staticOpen?: boolean;
-    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-        static: boolean;
-        staticOpen: boolean;
-    }, {}, 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;
-            items?(_: {}): 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<{
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
+            items(props: {
+                open: boolean;
+            }): import("vue").Slot;
+        }> & {
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
+            items(props: {
+                open: boolean;
+            }): import("vue").Slot;
         };
     })>) => {
         components: {
             ScalarDropdown: {
-                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-                    static?: boolean;
-                    staticOpen?: boolean;
-                }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                    static: boolean;
-                    staticOpen: boolean;
-                }, 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<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-                    static?: boolean;
-                    staticOpen?: boolean;
-                }> & Readonly<{}>, {}, {}, {}, {}, {
-                    static: boolean;
-                    staticOpen: boolean;
-                }>;
+                }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
                 __isFragment?: never;
                 __isTeleport?: never;
                 __isSuspense?: never;
-            } & import("vue").ComponentOptionsBase<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-                static?: boolean;
-                staticOpen?: boolean;
-            }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-                static: boolean;
-                staticOpen: boolean;
-            }, {}, 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;
-                    items?(_: {}): 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<{
+                    default(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
+                    items(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
+                }> & {
+                    default(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
+                    items(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
                 };
             });
             ScalarDropdownItem: {
@@ -158,7 +134,7 @@ declare const meta: {
                     default?(_: {}): any;
                 };
             });
-            ScalarDropdownDivider: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+            ScalarDropdownDivider: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
             ScalarButton: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
                     disabled?: boolean;
@@ -217,41 +193,32 @@ declare const meta: {
         };
         setup(this: void): {
             args: import("@storybook/vue3").ComponentPropsAndSlots<{
-                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-                    static?: boolean;
-                    staticOpen?: boolean;
-                }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                    static: boolean;
-                    staticOpen: boolean;
-                }, 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<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-                    static?: boolean;
-                    staticOpen?: boolean;
-                }> & Readonly<{}>, {}, {}, {}, {}, {
-                    static: boolean;
-                    staticOpen: boolean;
-                }>;
+                }, Readonly<import("../ScalarFloating").ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
                 __isFragment?: never;
                 __isTeleport?: never;
                 __isSuspense?: never;
-            } & import("vue").ComponentOptionsBase<Readonly<Omit<import("../ScalarFloating").FloatingOptions, "middleware"> & {
-                static?: boolean;
-                staticOpen?: boolean;
-            }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-                static: boolean;
-                staticOpen: boolean;
-            }, {}, 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;
-                    items?(_: {}): 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<{
+                    default(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
+                    items(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
+                }> & {
+                    default(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
+                    items(props: {
+                        open: boolean;
+                    }): import("vue").Slot;
                 };
             })>;
         };
@@ -261,4 +228,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarDropdown.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAOrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA"}
+{"version":3,"file":"ScalarDropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAOrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC6B,CAAA;AAEvC,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/ScalarDropdown/ScalarDropdown.vue.d.ts

@@ -1,25 +1,43 @@
-import { type FloatingOptions } from '../ScalarFloating';
-type __VLS_Props = Omit<FloatingOptions, 'middleware'> & {
-    static?: boolean;
-    staticOpen?: boolean;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            open: any;
-        }): any;
-        items?(_: {}): any;
-    };
-    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<{}>, {
-    static: boolean;
-    staticOpen: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+import type { Slot } from 'vue';
+import { type ScalarFloatingOptions } from '../ScalarFloating';
+/**
+ * Scalar dropdown component
+ *
+ * Uses the headlessui Menu component under the hood
+ * @see https://headlessui.com/v1/vue/menu
+ *
+ * @example
+ * <ScalarDropdown>
+ *   <ScalarButton>Click Me</ScalarButton>
+ *   <template #items>
+ *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>
+ *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>
+ *   </template>
+ * </ScalarDropdown>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<ScalarFloatingOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarFloatingOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<{
+    /** The reference element for the element in the #floating slot */
+    default(props: {
+        /** Whether or not the dropdown is open */
+        open: boolean;
+    }): Slot;
+    /** The list of dropdown items */
+    items(props: {
+        /** Whether or not the dropdown is open */
+        open: boolean;
+    }): Slot;
+}> & {
+    /** The reference element for the element in the #floating slot */
+    default(props: {
+        /** Whether or not the dropdown is open */
+        open: boolean;
+    }): Slot;
+    /** The list of dropdown items */
+    items(props: {
+        /** Whether or not the dropdown is open */
+        open: boolean;
+    }): Slot;
+}>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AAyDA,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,mBAAmB,CAAA;AAIxE,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GAAG;IACnD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAgBN,iBAAS,cAAc;WAoGT,OAAO,IAA6B;;;;YATpB,GAAG;uBACL,GAAG;;;;EAa9B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAzIN,OAAO;gBACH,OAAO;6EA+IxB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AAwEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG/B,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAK9E;;;;;;;;;;;;;;GAcG;;IAOD,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,IAAI;IACR,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,IAAI;;IATR,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,IAAI;IACR,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,IAAI;;AAfV,wBA+HC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarDropdown/ScalarDropdown.vue.js

@@ -1,66 +1,56 @@
-import { defineComponent as m, openBlock as n, createBlock as i, unref as l, withCtx as t, createVNode as p, mergeProps as d, createElementVNode as s, normalizeStyle as u, renderSlot as f, createCommentVNode as c } from "vue";
-import { Menu as g, MenuItems as y, MenuButton as B } from "@headlessui/vue";
-import b from "../ScalarFloating/ScalarFloating.vue.js";
-const h = { class: "custom-scroll min-h-0 flex-1" }, S = /* @__PURE__ */ m({
+import { defineComponent as m, openBlock as i, createBlock as p, unref as t, withCtx as r, createVNode as o, mergeProps as d, renderSlot as l } from "vue";
+import { Menu as f, MenuItems as u, MenuButton as _ } from "@headlessui/vue";
+import { useBindCx as c } from "../../hooks/useBindCx.js";
+import g from "./ScalarDropdownMenu.vue.js";
+import w from "../ScalarFloating/ScalarFloating.vue.js";
+const B = {}, k = /* @__PURE__ */ m({
+  ...B,
   inheritAttrs: !1,
   __name: "ScalarDropdown",
   props: {
     placement: {},
     resize: { type: Boolean },
-    targetRef: {},
-    isOpen: { type: Boolean },
-    teleport: { type: [Boolean, String] },
-    static: { type: Boolean, default: !1 },
-    staticOpen: { type: Boolean, default: !0 }
+    target: {},
+    middleware: {},
+    teleport: { type: [Boolean, String] }
   },
-  setup(z) {
-    return (e, a) => (n(), i(l(g), null, {
-      default: t(({ open: o }) => [
-        p(l(b), {
-          isOpen: e.static ? e.staticOpen : o ?? e.isOpen,
+  setup(h) {
+    const { cx: n } = c();
+    return (e, y) => (i(), p(t(f), null, {
+      default: r(({ open: a }) => [
+        o(t(w), {
+          middleware: e.middleware,
           placement: e.placement ?? "bottom-start",
           resize: e.resize,
-          targetRef: e.targetRef,
+          target: e.target,
           teleport: e.teleport
         }, {
-          floating: t(({ width: r }) => [
-            p(l(y), d(e.$attrs, {
-              class: "relative flex max-h-[inherit] w-56 rounded border",
-              static: e.static,
-              style: { width: r }
-            }), {
-              default: t(() => [
-                s("div", h, [
-                  s("div", {
-                    class: "flex flex-col p-0.75",
-                    style: u({ width: r })
-                  }, [
-                    f(e.$slots, "items")
-                  ], 4),
-                  a[0] || (a[0] = s("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1))
-                ])
+          floating: r(({ width: s }) => [
+            o(g, d({
+              is: t(u),
+              style: { width: s }
+            }, t(n)("max-h-[inherit]")), {
+              default: r(() => [
+                l(e.$slots, "items", { open: a })
               ]),
               _: 2
-            }, 1040, ["static", "style"])
+            }, 1040, ["is", "style"])
           ]),
-          default: t(() => [
-            e.static ? c("", !0) : (n(), i(l(B), {
-              key: 0,
-              as: "template"
-            }, {
-              default: t(() => [
-                f(e.$slots, "default", { open: o })
+          default: r(() => [
+            o(t(_), { as: "template" }, {
+              default: r(() => [
+                l(e.$slots, "default", { open: a })
               ]),
               _: 2
-            }, 1024))
+            }, 1024)
           ]),
           _: 2
-        }, 1032, ["isOpen", "placement", "resize", "targetRef", "teleport"])
+        }, 1032, ["middleware", "placement", "resize", "target", "teleport"])
       ]),
       _: 3
     }));
   }
 });
 export {
-  S as default
+  k as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Scalar dropdown button base component
+ *
+ * Provide a styled button for the ScalarDropdown or similar
+ *
+ * This is used internally by the ScalarDropdownItem component
+ *
+ * If you're looking to add items to a dropdown menu you
+ * probably want the ScalarDropdownItem component
+ *
+ * @example
+ * <ScalarDropdownButton ＠click="handleClick">
+ *   Label
+ * </ScalarDropdownButton>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    active?: boolean;
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    active?: boolean;
+    disabled?: boolean;
+}> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarDropdownButton.vue.d.ts.map

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AAiEA;;;;;;;;;;;;;;GAcG;;aAIQ,OAAO;eACL,OAAO;;;;aADT,OAAO;eACL,OAAO;;;;qBA6DS,GAAG;;AAjEhC,wBAqGC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.js

@@ -0,0 +1,7 @@
+import o from "./ScalarDropdownButton.vue2.js";
+/* empty css                          */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4082ccb6"]]);
+export {
+  p as default
+};

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue2.js

@@ -0,0 +1,37 @@
+import { defineComponent as a, openBlock as i, createElementBlock as s, normalizeClass as c, unref as o, renderSlot as l } from "vue";
+import { cva as p, cx as d } from "../../cva.js";
+const m = {}, f = /* @__PURE__ */ a({
+  ...m,
+  __name: "ScalarDropdownButton",
+  props: {
+    active: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(u) {
+    const n = p({
+      base: [
+        // Layout
+        "h-8 min-w-0 items-center gap-1.5 rounded px-2.5 py-1.5 text-left",
+        // Text / background style
+        "truncate text-sm text-c-1",
+        // Interaction
+        "cursor-pointer hover:bg-b-2 hover:text-c-1"
+      ],
+      variants: {
+        disabled: { true: "pointer-events-none text-c-3" },
+        active: { true: "bg-b-2 text-c-1" }
+      }
+    });
+    return (e, t) => (i(), s("button", {
+      class: c(["item", o(d)("scalar-dropdown-item", o(n)({ active: e.active, disabled: e.disabled }))]),
+      type: "button",
+      onClick: t[0] || (t[0] = (r) => e.$emit("click", r))
+    }, [
+      l(e.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+});
+export {
+  f as default
+};

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue.d.ts

@@ -1,3 +1,19 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+/**
+ * Scalar dropdown divider component
+ *
+ * Used to create a divider between items in the ScalarDropdown component
+ *
+ * @example
+ * <ScalarDropdown>
+ *   ...
+ *   <template #items>
+ *     <ScalarDropdownItem>Item 1</ScalarDropdownItem>
+ *     <ScalarDropdownItem>Item 2</ScalarDropdownItem>
+ *     <ScalarDropdownDivider />
+ *     <ScalarDropdownItem>Item 3</ScalarDropdownItem>
+ *   </template>
+ * </ScalarDropdown>
+ */
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarDropdownDivider.vue.d.ts.map

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownDivider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownDivider.vue"],"names":[],"mappings":";AA4DA,wBAMG"}
+{"version":3,"file":"ScalarDropdownDivider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownDivider.vue"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;GAeG;;AACH,wBACC"}

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue.js

@@ -1,10 +1,11 @@
+import o from "./ScalarDropdownDivider.vue2.js";
 import { openBlock as r, createElementBlock as e } from "vue";
-import o from "../../_virtual/_plugin-vue_export-helper.js";
-const c = {}, t = { class: "-mx-0.75 my-0.75 h-px bg-border" };
-function n(s, _) {
-  return r(), e("div", t);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const c = { class: "-mx-0.75 my-0.75 h-px bg-border" };
+function n(p, s, a, i, m, _) {
+  return r(), e("div", c);
 }
-const i = /* @__PURE__ */ o(c, [["render", n]]);
+const x = /* @__PURE__ */ t(o, [["render", n]]);
 export {
-  i as default
+  x as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue2.js

@@ -0,0 +1,4 @@
+const a = {};
+export {
+  a as default
+};

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.d.ts

@@ -1,21 +1,24 @@
-type __VLS_Props = {
+/**
+ * Scalar dropdown item component
+ *
+ * Used to create items for the ScalarDropdown component
+ *
+ * @example
+ * <ScalarDropdownItem ＠click="handleClick">
+ *   Label
+ * </ScalarDropdownItem>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled?: boolean;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    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, {} & {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    disabled?: boolean;
+}> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"names":[],"mappings":"AAsDA,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA6BF,iBAAS,cAAc;WAoDT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;kFAQnB,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":"ScalarDropdownItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownItem.vue"],"names":[],"mappings":"AAmDA;;;;;;;;;GASG;;eAIU,OAAO;;;;eAAP,OAAO;;;;qBA+EU,GAAG;;AAlFjC,wBAsHC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}