@scalar/components 0.12.75 → 0.13.0

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

@@ -1,28 +1,27 @@
-import { openBlock as n, createElementBlock as r, createElementVNode as o } from "vue";
+import { openBlock as r, createElementBlock as n, createElementVNode as o } from "vue";
 const t = {
   xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
   viewBox: "0 0 24 24"
 };
 function l(s, e) {
-  return n(), r("svg", t, e[0] || (e[0] = [
+  return r(), n("svg", t, e[0] || (e[0] = [
     o("path", {
-      fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 0 0 0 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 0 0 0-2.226C20.2 8 16.031 5.183 12 5.251"
+      d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7"
     }, null, -1),
     o("path", {
-      fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M15.75 12A3.75 3.75 0 1 1 12 8.249 3.75 3.75 0 0 1 15.75 12"
+      d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6"
     }, null, -1)
   ]));
 }
-const c = { render: l };
+const i = { render: l };
 export {
-  c as default,
+  i as default,
   l as render
 };

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

@@ -1,4 +1,7 @@
 import type { StoryObj } from '@storybook/vue3';
+/**
+ * A helper wrapper around the icon only ScalarButton
+ */
 declare const meta: {
     component: import("vue").DefineComponent<{
         label: string;
@@ -17,7 +20,7 @@ declare const meta: {
     }> & Readonly<{}>, {
         size: "xs" | "sm" | "md" | "full" | "xxs";
         variant: string;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
     tags: string[];
     argTypes: {
         icon: {
@@ -35,12 +38,11 @@ declare const meta: {
             control: "select";
             options: string[];
         };
-    };
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
+        disabled: {
+            control: "boolean";
+        };
+        class: {
+            control: "text";
         };
     };
 };
@@ -48,4 +50,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Disabled: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarIconButton.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB+B,CAAA;AAEzC,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,KAEtB,CAAA"}
+{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc+B,CAAA;AAEzC,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,KAEtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}

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

@@ -71,6 +71,6 @@ declare const variants: (props?: ({
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "xs" | "sm" | "md" | "full" | "xxs";
     variant: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarIconButton.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAKvC,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AASJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CAAA;;;;;AA4EF,wBAQG"}
+{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAKvC,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,eAAe,CAAA;AAIrD,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAYJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CACD;;;;;AAoED,wBAOG"}

package/dist/components/ScalarIconButton/ScalarIconButton.vue.js

@@ -1,8 +1,10 @@
-import { defineComponent as n, computed as r, useAttrs as i, openBlock as l, createElementBlock as c, mergeProps as d, unref as e, createVNode as u, createElementVNode as p, toDisplayString as m } from "vue";
-import { cva as b, cx as f } from "../../cva.js";
-import { styles as h } from "../ScalarButton/variants.js";
-import v from "../ScalarIcon/ScalarIcon.vue.js";
-const z = ["ariaDisabled"], k = { class: "sr-only" }, D = /* @__PURE__ */ n({
+import { defineComponent as t, openBlock as i, createElementBlock as n, mergeProps as r, unref as s, createVNode as l, createElementVNode as d, toDisplayString as c } from "vue";
+import { cva as p } from "../../cva.js";
+import { useBindCx as u } from "../../hooks/useBindCx.js";
+import { styles as m } from "../ScalarButton/variants.js";
+import f from "../ScalarIcon/ScalarIcon.vue.js";
+const b = ["ariaDisabled"], h = { class: "sr-only" }, w = /* @__PURE__ */ t({
+  inheritAttrs: !1,
   __name: "ScalarIconButton",
   props: {
     label: {},
@@ -12,8 +14,8 @@ const z = ["ariaDisabled"], k = { class: "sr-only" }, D = /* @__PURE__ */ n({
     size: { default: "md" },
     thickness: {}
   },
-  setup(y) {
-    const o = b({
+  setup(v) {
+    const { cx: o } = u(), a = p({
       base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
       variants: {
         size: {
@@ -26,25 +28,21 @@ const z = ["ariaDisabled"], k = { class: "sr-only" }, D = /* @__PURE__ */ n({
         disabled: {
           true: "cursor-not-allowed shadow-none"
         },
-        variant: h
+        variant: m
       }
-    }), a = r(() => {
-      const { class: s, ...t } = i();
-      return { class: s || "", rest: t };
     });
-    return (s, t) => (l(), c("button", d(a.value.rest, {
-      ariaDisabled: s.disabled || void 0,
-      class: e(f)(e(o)({ size: s.size, variant: s.variant, disabled: s.disabled }), a.value.class),
+    return (e, z) => (i(), n("button", r({
+      ariaDisabled: e.disabled || void 0,
       type: "button"
-    }), [
-      u(e(v), {
-        icon: s.icon,
-        thickness: s.thickness
+    }, s(o)(s(a)({ size: e.size, variant: e.variant, disabled: e.disabled }))), [
+      l(s(f), {
+        icon: e.icon,
+        thickness: e.thickness
       }, null, 8, ["icon", "thickness"]),
-      p("span", k, m(s.label), 1)
-    ], 16, z));
+      d("span", h, c(e.label), 1)
+    ], 16, b));
   }
 });
 export {
-  D as default
+  w as default
 };

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

@@ -2,56 +2,78 @@ import type { StoryObj } from '@storybook/vue3';
 import type { Option } from './types';
 declare const meta: {
     component: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-            multiple?: boolean;
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<({
             options: Option[];
-            modelValue?: Option | Option[];
             id?: string;
             label?: string;
-        } & Omit<import("../ScalarFloating").FloatingOptions, "targetRef" | "middleware" | "offset">> & Readonly<{
+        } & {
+            multiple?: false;
+            modelValue?: Option;
+        } & import("../ScalarFloating").ScalarFloatingOptions) | ({
+            options: Option[];
+            id?: string;
+            label?: string;
+        } & {
+            multiple: true;
+            modelValue?: Option[];
+        } & import("../ScalarFloating").ScalarFloatingOptions)> & Readonly<{
             "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
         }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
             "update:modelValue": (v: Option) => any;
-        }, import("vue").PublicProps, {
-            multiple: boolean;
-        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<{
-            multiple?: boolean;
+        }, {} & (Readonly<({
+            options: Option[];
+            id?: string;
+            label?: string;
+        } & {
+            multiple?: false;
+            modelValue?: Option;
+        } & import("../ScalarFloating").ScalarFloatingOptions) | ({
             options: Option[];
-            modelValue?: Option | Option[];
             id?: string;
             label?: string;
-        } & Omit<import("../ScalarFloating").FloatingOptions, "targetRef" | "middleware" | "offset">> & Readonly<{
+        } & {
+            multiple: true;
+            modelValue?: Option[];
+        } & import("../ScalarFloating").ScalarFloatingOptions)> & Readonly<{
             "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
-        }>, {}, {}, {}, {}, {
-            multiple: boolean;
-        }>;
+        }>), {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<{
-        multiple?: boolean;
+    } & import("vue").ComponentOptionsBase<Readonly<({
         options: Option[];
-        modelValue?: Option | Option[];
         id?: string;
         label?: string;
-    } & Omit<import("../ScalarFloating").FloatingOptions, "targetRef" | "middleware" | "offset">> & Readonly<{
+    } & {
+        multiple?: false;
+        modelValue?: Option;
+    } & import("../ScalarFloating").ScalarFloatingOptions) | ({
+        options: Option[];
+        id?: string;
+        label?: string;
+    } & {
+        multiple: true;
+        modelValue?: Option[];
+    } & import("../ScalarFloating").ScalarFloatingOptions)> & Readonly<{
         "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         "update:modelValue": (v: Option) => any;
-    }, string, {
-        multiple: 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;
+    }, 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;
+        }> & {
+            default(props: {
+                open: boolean;
+            }): import("vue").Slot;
         };
     });
     tags: string[];
@@ -63,9 +85,14 @@ declare const meta: {
             control: "select";
             options: import("@floating-ui/utils").Placement[];
         };
+        class: {
+            control: "text";
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const Multiselect: Story;
+export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarListbox.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAO4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAA"}
+{"version":3,"file":"ScalarListbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQ4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkC3B,CAAA"}

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

@@ -1,35 +1,54 @@
-import { type FloatingOptions } from '../ScalarFloating';
+import type { Slot } from 'vue';
+import { type ScalarFloatingOptions } from '../ScalarFloating';
 import type { Option } from './types';
-type __VLS_Props = {
-    /**
-     * Allow selecting multiple values
-     *
-     * @default false
-     */
-    multiple?: boolean;
-    options: Option[];
-    modelValue?: Option | Option[];
-    id?: string;
-    label?: string;
-} & Omit<FloatingOptions, 'middleware' | 'offset' | 'targetRef'>;
+type SingleSelectListboxProps = {
+    multiple?: false;
+    modelValue?: Option;
+};
+type MultipleSelectListboxProps = {
+    multiple: true;
+    modelValue?: Option[];
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            open: any;
-        }): any;
+    slots: Readonly<{
+        /** The reference element for the listbox */
+        default(props: {
+            /** Whether or not the listbox is open */
+            open: boolean;
+        }): Slot;
+    }> & {
+        /** The reference element for the listbox */
+        default(props: {
+            /** Whether or not the listbox is open */
+            open: boolean;
+        }): Slot;
     };
     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, {} & {
+declare const __VLS_component: import("vue").DefineComponent<({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & SingleSelectListboxProps & ScalarFloatingOptions) | ({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & MultipleSelectListboxProps & ScalarFloatingOptions), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (v: Option) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & SingleSelectListboxProps & ScalarFloatingOptions) | ({
+    options: Option[];
+    id?: string;
+    label?: string;
+} & MultipleSelectListboxProps & ScalarFloatingOptions)> & Readonly<{
     "onUpdate:modelValue"?: ((v: Option) => any) | undefined;
-}>, {
-    multiple: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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/ScalarListbox/ScalarListbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AA6IA,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,mBAAmB,CAAA;AAExE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,WAAW,GAAG;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC;AAwCrE,iBAAS,cAAc;WA2KT,OAAO,IAA6B;;;;YARpB,GAAG;;;;EAahC;AAmBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;cAjPJ,OAAO;6EAyPtB,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":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG/B,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB,CAAA;AAkCD,iBAAS,cAAc;WAgIT,OAAO,IAA6B;;QAhJhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,IAAI;;QAJR,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,IAAI;;;;EAiJT;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aArLR,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFA0LhB,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/ScalarListbox/ScalarListbox.vue.js

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

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

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

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

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

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

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

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

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

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

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

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

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