@scalar/components 0.12.75 → 0.13.0

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

@@ -1,7 +1,7 @@
 import o from "./ScalarDropdownItem.vue2.js";
 /* empty css                        */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-a4980d5e"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-457c1cd3"]]);
 export {
-  p as default
+  m as default
 };

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

@@ -1,41 +1,31 @@
-import { defineComponent as i, openBlock as s, createBlock as d, unref as t, withCtx as l, createElementVNode as c, normalizeClass as m, renderSlot as p } from "vue";
-import { MenuItem as u } from "@headlessui/vue";
-import { cva as b, cx as f } from "../../cva.js";
-const C = /* @__PURE__ */ i({
+import { defineComponent as a, openBlock as l, createBlock as i, unref as n, withCtx as t, createVNode as s, renderSlot as p } from "vue";
+import { MenuItem as m } from "@headlessui/vue";
+import u from "./ScalarDropdownButton.vue.js";
+const f = {}, B = /* @__PURE__ */ a({
+  ...f,
   __name: "ScalarDropdownItem",
   props: {
     disabled: { type: Boolean }
   },
   emits: ["click"],
-  setup(v) {
-    const r = b({
-      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, o) => (s(), d(t(u), { disabled: e.disabled }, {
-      default: l(({ active: n }) => [
-        c("button", {
-          class: m(["item", t(f)("scalar-dropdown-item", t(r)({ active: n, disabled: e.disabled }))]),
-          type: "button",
-          onClick: o[0] || (o[0] = (a) => e.$emit("click", a))
-        }, [
-          p(e.$slots, "default", {}, void 0, !0)
-        ], 2)
+  setup(c) {
+    return (e, o) => (l(), i(n(m), { disabled: e.disabled }, {
+      default: t(({ active: d }) => [
+        s(u, {
+          active: d,
+          disabled: e.disabled,
+          onClick: o[0] || (o[0] = (r) => e.$emit("click", r))
+        }, {
+          default: t(() => [
+            p(e.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["active", "disabled"])
       ]),
       _: 3
     }, 8, ["disabled"]));
   }
 });
 export {
-  C as default
+  B as default
 };

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

@@ -0,0 +1,32 @@
+import type { Component } from 'vue';
+/**
+ * Scalar dropdown menu component
+ *
+ * Provides a scrollable container for dropdown items
+ * This is used internally by the ScalarDropdown component
+ *
+ * If you're looking to create a dropdown menu with a trigger
+ * button you probably want the ScalarDropdown component
+ *
+ * @example
+ * <ScalarDropdownMenu>
+ *   <ScalarDropdownItem>Item 1</ScalarDropdownItem>
+ *   <ScalarDropdownItem>Item 2</ScalarDropdownItem>
+ * </ScalarDropdownMenu>
+ */
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    /** The component to render */
+    is?: string | Component;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The component to render */
+    is?: string | Component;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarDropdownMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC;;;;;;;;;;;;;;GAcG;;IAID,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;qBA6DI,GAAG;;AAjEhC,wBAgGC;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/ScalarDropdownMenu.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent as t, openBlock as l, createBlock as n, resolveDynamicComponent as r, withCtx as d, createElementVNode as e, renderSlot as a } from "vue";
+const i = { class: "custom-scroll min-h-0 flex-1" }, c = { class: "flex flex-col p-0.75" }, u = {}, p = /* @__PURE__ */ t({
+  ...u,
+  __name: "ScalarDropdownMenu",
+  props: {
+    is: {}
+  },
+  setup(_) {
+    return (o, s) => (l(), n(r(o.is ?? "div"), {
+      class: "relative flex w-56 rounded border",
+      role: "menu",
+      tabindex: "0"
+    }, {
+      default: d(() => [
+        e("div", i, [
+          e("div", c, [
+            a(o.$slots, "default")
+          ]),
+          s[0] || (s[0] = e("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1))
+        ])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  p as default
+};

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

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

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

@@ -1,4 +1,6 @@
 export { default as ScalarDropdown } from './ScalarDropdown.vue.js';
 export { default as ScalarDropdownDivider } from './ScalarDropdownDivider.vue.js';
+export { default as ScalarDropdownButton } from './ScalarDropdownButton.vue.js';
 export { default as ScalarDropdownItem } from './ScalarDropdownItem.vue.js';
+export { default as ScalarDropdownMenu } from './ScalarDropdownMenu.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.spec.d.ts

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

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.spec.d.ts.map

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

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+//# sourceMappingURL=ScalarErrorBoundary.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarErrorBoundary.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI,EAAE,IAkBgC,CAAA;AAE5C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA"}

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

@@ -0,0 +1,18 @@
+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<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarErrorBoundary.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/ScalarErrorBoundary.vue"],"names":[],"mappings":"AAsDA,iBAAS,cAAc;WAyDT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,+QAKnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent as c, ref as a, onErrorCaptured as m, renderSlot as p, openBlock as l, createElementBlock as d, createElementVNode as i, toDisplayString as u, createCommentVNode as _ } from "vue";
+const f = {
+  key: 1,
+  class: "rounded border bg-b-2 p-3 text-sm"
+}, v = {
+  key: 0,
+  class: "mt-2 rounded border bg-b-1 p-2 font-code text-c-2"
+}, E = /* @__PURE__ */ c({
+  __name: "ScalarErrorBoundary",
+  setup(b) {
+    const n = a(!1), e = a();
+    return m((r, t, o) => (console.error("[ERROR]", r, o), n.value = !0, e.value = r, !1)), (r, t) => {
+      var o, s;
+      return n.value ? (l(), d("div", f, [
+        t[0] || (t[0] = i("div", { class: "p-2" }, "Oops, something went wrong here.", -1)),
+        e.value ? (l(), d("div", v, u((o = e.value) == null ? void 0 : o.name) + ": " + u((s = e.value) == null ? void 0 : s.message), 1)) : _("", !0)
+      ])) : p(r.$slots, "default", { key: 0 });
+    };
+  }
+});
+export {
+  E as default
+};

package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.vue2.js

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

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

@@ -0,0 +1,2 @@
+export { default as ScalarErrorBoundary } from './ScalarErrorBoundary.vue.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarErrorBoundary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA"}

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

@@ -3,4 +3,8 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+/**
+ * You can override the offset (or other middleware) by passing a custom middleware array
+ */
+export declare const CustomOffset: Story;
 //# sourceMappingURL=ScalarFloating.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIrD,QAAA,MAAM,IAAI,EAAE,IA6B2B,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":"ScalarFloating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIrD,QAAA,MAAM,IAAI,EAAE,IA6B2B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAA"}

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

@@ -1,10 +1,11 @@
 import { type MiddlewareData } from '@floating-ui/vue';
+import { type Slot } from 'vue';
 import type { FloatingOptions } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /** The reference element for the element in the #floating slot */
-        default(): any;
+        default(): Slot;
         /** The floating element */
         floating(props: {
             /** The width of the reference element if `resize` is true and placement is on the y axis */
@@ -13,10 +14,10 @@ declare function __VLS_template(): {
             height?: string;
             /** The middleware data return by Floating UI */
             data?: MiddlewareData;
-        }): any;
+        }): Slot;
     }> & {
         /** The reference element for the element in the #floating slot */
-        default(): any;
+        default(): Slot;
         /** The floating element */
         floating(props: {
             /** The width of the reference element if `resize` is true and placement is on the y axis */
@@ -25,7 +26,7 @@ declare function __VLS_template(): {
             height?: string;
             /** The middleware data return by Floating UI */
             data?: MiddlewareData;
-        }): any;
+        }): Slot;
     };
     refs: {
         wrapperRef: HTMLDivElement;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AA4GA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AAGzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AA4E9C,iBAAS,cAAc;WAuDT,OAAO,IAA6B;;QA1HhD,kEAAkE;mBACvD,GAAG;QACd,2BAA2B;wBACX;YACd,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,GAAG;;QAVP,kEAAkE;mBACvD,GAAG;QACd,2BAA2B;wBACX;YACd,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,GAAG;;;;;;;EAqHR;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0SAMnB,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":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAsHA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAY,KAAK,IAAI,EAAiB,MAAM,KAAK,CAAA;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAsF9C,iBAAS,cAAc;WAuDT,OAAO,IAA6B;;QApIhD,kEAAkE;mBACvD,IAAI;QACf,2BAA2B;wBACX;YACd,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,IAAI;;QAVR,kEAAkE;mBACvD,IAAI;QACf,2BAA2B;wBACX;YACd,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,IAAI;;;;;;;EA+HT;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0SAMnB,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/ScalarFloating/ScalarFloating.vue.js

@@ -1,38 +1,41 @@
-import { defineComponent as z, ref as p, computed as a, openBlock as d, createElementBlock as R, Fragment as b, createElementVNode as r, normalizeClass as S, renderSlot as m, createBlock as k, Teleport as B, normalizeStyle as $, unref as f, createCommentVNode as x } from "vue";
+import { defineComponent as z, ref as d, computed as a, openBlock as f, createElementBlock as S, Fragment as b, createElementVNode as r, normalizeClass as $, renderSlot as p, createBlock as k, Teleport as B, normalizeStyle as R, unref as m, createCommentVNode as E } from "vue";
 import { getSideAxis as c } from "@floating-ui/utils";
-import { useFloating as C, autoUpdate as E, offset as F, flip as M, shift as O, size as W } from "@floating-ui/vue";
-import { useResizeWithTarget as _ } from "./useResizeWithTarget.js";
-const A = { class: "scalar-app" }, j = /* @__PURE__ */ z({
+import { useFloating as F, autoUpdate as M, offset as T, flip as x, shift as C, size as H } from "@floating-ui/vue";
+import { useResizeWithTarget as W } from "./useResizeWithTarget.js";
+const _ = { class: "scalar-app" }, D = /* @__PURE__ */ z({
   inheritAttrs: !1,
   __name: "ScalarFloating",
   props: {
     placement: {},
     resize: { type: Boolean },
-    targetRef: {},
+    target: {},
     middleware: {},
-    isOpen: { type: Boolean },
     teleport: { type: [Boolean, String] }
   },
   setup(g) {
-    const t = g, i = p(null), l = p(null), n = a(
-      () => {
-        var e, o;
-        return (t.targetRef || ((o = (e = l.value) == null ? void 0 : e.children) == null ? void 0 : o[0]) || l.value) ?? void 0;
-      }
-    ), s = _(n, {
+    const t = g, n = d(null), l = d(null), i = a(() => {
+      var e;
+      if (typeof t.target == "string") {
+        const o = document.getElementById(t.target);
+        if (o) return o;
+        console.warn(`ScalarFloating: Target with id="${t.target}" not found`);
+      } else if (t.target instanceof HTMLElement) return t.target;
+      if (l.value)
+        return ((e = l.value.children) == null ? void 0 : e[0]) || l.value;
+    }), s = W(i, {
       enabled: a(() => t.resize)
     }), u = a(
       () => c(t.placement || "bottom") === "y" ? s.width.value : void 0
     ), h = a(
       () => c(t.placement || "bottom") === "x" ? s.height.value : void 0
-    ), { floatingStyles: y, middlewareData: v } = C(n, i, {
+    ), { floatingStyles: y, middlewareData: v } = F(i, n, {
       placement: a(() => t.placement),
-      whileElementsMounted: E,
+      whileElementsMounted: M,
       middleware: a(() => [
-        F(5),
-        M(),
-        O(),
-        W({
+        T(5),
+        x(),
+        C(),
+        H({
           apply({ availableWidth: e, availableHeight: o, elements: w }) {
             Object.assign(w.floating.style, {
               maxWidth: `${Math.max(0, e) - 25}px`,
@@ -43,37 +46,37 @@ const A = { class: "scalar-app" }, j = /* @__PURE__ */ z({
         ...t.middleware ?? []
       ])
     });
-    return (e, o) => (d(), R(b, null, [
+    return (e, o) => (f(), S(b, null, [
       r("div", {
         ref_key: "wrapperRef",
         ref: l,
-        class: S({ contents: !!e.$slots.default })
+        class: $({ contents: !!e.$slots.default })
       }, [
-        m(e.$slots, "default")
+        p(e.$slots, "default")
       ], 2),
-      e.isOpen ? (d(), k(B, {
+      e.$slots.floating ? (f(), k(B, {
         key: 0,
         disabled: !e.teleport,
         to: typeof e.teleport == "string" ? e.teleport : "body"
       }, [
-        r("div", A, [
+        r("div", _, [
           r("div", {
             ref_key: "floatingRef",
-            ref: i,
+            ref: n,
             class: "relative z-overlay",
-            style: $(f(y))
+            style: R(m(y))
           }, [
-            m(e.$slots, "floating", {
-              data: f(v),
+            p(e.$slots, "floating", {
+              data: m(v),
               height: h.value,
               width: u.value
             })
           ], 4)
         ])
-      ], 8, ["disabled", "to"])) : x("", !0)
+      ], 8, ["disabled", "to"])) : E("", !0)
     ], 64));
   }
 });
 export {
-  j as default
+  D as default
 };

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

@@ -1,3 +1,3 @@
 export { default as ScalarFloating } from './ScalarFloating.vue.js';
-export type { FloatingOptions } from './types';
+export type { FloatingOptions as ScalarFloatingOptions } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAEhE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAEhE,YAAY,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAA"}

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

@@ -1,8 +1,11 @@
 import type { Middleware, Placement } from '@floating-ui/vue';
+/** The props for the ScalarFloating component */
 export type FloatingOptions = {
     /**
      * Where to place the floating element relative to its reference element.
      * @default 'bottom'
+     *
+     * @see https://floating-ui.com/docs/computePosition#placement
      */
     placement?: Placement;
     /**
@@ -11,20 +14,25 @@ export type FloatingOptions = {
      */
     resize?: boolean;
     /**
-     * Override the targetRef, useful if we are not passing a button
+     * Override the target, useful if we are not passing a button
      * into the slot but is controlled from an external button
+     *
+     * Can be a string id or a reference to an element
      */
-    targetRef?: HTMLElement;
+    target?: string | HTMLElement;
     /**
      * Floating UI Middleware to be passed to Floating UI
+     *
+     * Overrides the default middleware
+     *
+     * @example
+     * ```ts
+     * // change the offset to 10px
+     * middleware: [offset(10)]
+     * ```
      * @see https://floating-ui.com/docs/computePosition#middleware
      */
     middleware?: Middleware[];
-    /**
-     * Whether the floating element is open or not.
-     * @default false
-     */
-    isOpen?: boolean;
     /**
      * Whether to teleport the floating element.
      * Can be an `id` to teleport to or `true` to teleport to the `<body>`.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG7D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE7D,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC7B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,EAAE,CAAA;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC5B,CAAA"}

package/dist/components/ScalarFloating/useResizeWithTarget.d.ts

@@ -2,6 +2,9 @@ import { type MaybeRefOrGetter } from 'vue';
 type ResizeOptions = {
     enabled?: MaybeRefOrGetter<boolean>;
 };
+/**
+ * Resize a floating element to match a target element
+ */
 export declare function useResizeWithTarget(target: MaybeRefOrGetter<Element | undefined>, opts?: ResizeOptions): {
     width: import("vue").ComputedRef<string | undefined>;
     height: import("vue").ComputedRef<string | undefined>;

package/dist/components/ScalarFloating/useResizeWithTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeWithTarget.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/useResizeWithTarget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAiC,MAAM,KAAK,CAAA;AAE1E,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,EAC7C,IAAI,GAAE,aAAsC;;;EA+B7C"}
+{"version":3,"file":"useResizeWithTarget.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/useResizeWithTarget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAiC,MAAM,KAAK,CAAA;AAE1E,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;CACpC,CAAA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,EAC7C,IAAI,GAAE,aAAsC;;;EA+B7C"}

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

@@ -94,6 +94,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const CustomClasses: Story;
 export declare const AllSizes: Story;
 export declare const AllIcons: StoryObj;
 //# sourceMappingURL=ScalarIcon.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIcon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIcon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAOrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ByB,CAAA;AAEnC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAQtB,CAAA"}
+{"version":3,"file":"ScalarIcon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIcon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ByB,CAAA;AAEnC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAQtB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIcon.vue"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAIvC,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAoB,MAAM,SAAS,CAAA;AAIhE;;GAEG;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AAElD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAGF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBb,CAAA;;AAqFF,wBAOG"}
+{"version":3,"file":"ScalarIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIcon.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAKvC,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAoB,MAAM,SAAS,CAAA;AAIhE;;GAEG;AAEH,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AAElD,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAMF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBb,CAAA;;AAyFF,wBAMG"}

package/dist/components/ScalarIcon/ScalarIcon.vue.js

@@ -1,7 +1,7 @@
 import o from "./ScalarIcon.vue2.js";
 /* empty css                */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bcfed797"]]);
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f4f53d32"]]);
 export {
-  f as default
+  c as default
 };

package/dist/components/ScalarIcon/ScalarIcon.vue2.js

@@ -1,7 +1,9 @@
-import { defineComponent as c, useCssVars as u, computed as s, openBlock as p, createBlock as m, resolveDynamicComponent as f, mergeProps as z, unref as i } from "vue";
-import { cva as d, cx as g } from "../../cva.js";
-import { getIcon as v, getLogo as x } from "./utils/index.js";
-const C = /* @__PURE__ */ c({
+import { defineComponent as u, useCssVars as p, computed as s, openBlock as m, createBlock as f, resolveDynamicComponent as z, normalizeProps as d, guardReactiveProps as g, unref as i } from "vue";
+import { cva as v } from "../../cva.js";
+import { useBindCx as x } from "../../hooks/useBindCx.js";
+import { getIcon as _, getLogo as b } from "./utils/index.js";
+const y = /* @__PURE__ */ u({
+  inheritAttrs: !1,
   __name: "ScalarIcon",
   props: {
     icon: {},
@@ -11,10 +13,10 @@ const C = /* @__PURE__ */ c({
     label: {}
   },
   setup(r) {
-    u((o) => ({
-      "1fd08b42": n.value
+    p((o) => ({
+      ce5c5c8a: a.value
     }));
-    const e = r, l = d({
+    const e = r, { cx: t } = x(), n = v({
       variants: {
         size: {
           xs: "size-3",
@@ -30,20 +32,21 @@ const C = /* @__PURE__ */ c({
       defaultVariants: {
         size: "full"
       }
-    }), n = s(() => e.thickness ?? "2"), t = s(
+    }), a = s(() => e.thickness ?? "2"), l = s(
       () => e.label ? { ariaLabel: e.label } : {
         ariaHidden: !0,
         role: "presentation"
       }
-    ), a = s(() => {
-      if (e.icon) return v(e.icon);
-      if (e.logo) return x(e.logo);
+    ), c = s(() => {
+      if (e.icon) return _(e.icon);
+      if (e.logo) return b(e.logo);
     });
-    return (o, b) => (p(), m(f(a.value), z({
-      class: i(g)("scalar-icon", i(l)({ size: o.size }))
-    }, t.value), null, 16, ["class"]));
+    return (o, k) => (m(), f(z(c.value), d(g({
+      ...i(t)("scalar-icon", i(n)({ size: o.size })),
+      ...l.value
+    })), null, 16));
   }
 });
 export {
-  C as default
+  y as default
 };

package/dist/components/ScalarIcon/icons/Hide.svg.js

@@ -1,16 +1,17 @@
-import { openBlock as n, createElementBlock as t, createElementVNode as o } from "vue";
-const r = {
+import { openBlock as o, createElementBlock as n, createElementVNode as r } from "vue";
+const t = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
-  stroke: "currentColor",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
   viewBox: "0 0 24 24"
 };
-function l(a, e) {
-  return n(), t("svg", r, e[0] || (e[0] = [
-    o("path", { d: "M2.78 21 21.53 3M9 19.05a9.9 9.9 0 0 0 3 .45c4.1.07 8.26-2.81 10.82-5.64a1.65 1.65 0 0 0 0-2.22 20 20 0 0 0-3.07-2.76m-2.66-1.61A11.3 11.3 0 0 0 12 6c-4-.07-8.2 2.75-10.82 5.64a1.65 1.65 0 0 0 0 2.22 20 20 0 0 0 4.93 4M9 15.07a3.85 3.85 0 0 1 5.5-5.28" }, null, -1),
-    o("path", { d: "M15.75 12.75A3.75 3.75 0 0 1 12 16.5" }, null, -1)
+function l(s, e) {
+  return o(), n("svg", t, e[0] || (e[0] = [
+    r("path", {
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M9.88 14.12a3 3 0 1 1 4.24-4.24m-3.39 9.04q.632.079 1.27.08c7 0 10-7 10-7a13.2 13.2 0 0 0-1.67-2.68M6.61 17.39A13.5 13.5 0 0 1 2 12s3-7 10-7a9.74 9.74 0 0 1 5.39 1.61M2 22 22 2"
+    }, null, -1)
   ]));
 }
 const d = { render: l };