@scalar/components 0.14.10 → 0.14.13

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

@@ -5,7 +5,7 @@ import type { StoryObj } from '@storybook/vue3';
 declare const meta: {
     component: import("vue").DefineComponent<{
         label: string;
-        icon: import("../ScalarIcon").Icon;
+        icon: import("../ScalarIcon").Icon | import("vue").Component;
         disabled?: boolean;
         variant?: string | undefined;
         size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
@@ -13,7 +13,7 @@ declare const meta: {
         weight?: import("@scalar/icons/types").ScalarIconWeight;
     }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
         label: string;
-        icon: import("../ScalarIcon").Icon;
+        icon: import("../ScalarIcon").Icon | import("vue").Component;
         disabled?: boolean;
         variant?: string | undefined;
         size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;

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

@@ -1,10 +1,11 @@
 import type { ScalarIconWeight } from '@scalar/icons/types';
 import type { VariantProps } from 'cva';
+import type { Component } from 'vue';
 import { type Icon } from '../ScalarIcon';
 type Variants = VariantProps<typeof variants>;
 type __VLS_Props = {
     label: string;
-    icon: Icon;
+    icon: Icon | Component;
     disabled?: boolean;
     variant?: Variants['variant'];
     size?: Variants['size'];

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":"AA6DA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAGvC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,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;IAClB,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B,CAAC;AAYJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CACD;;;;;AAoED,wBAOG"}
+{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,GAAG,SAAS,CAAA;IACtB,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;IAClB,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B,CAAC;AAYJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CACD;;;;;AAoED,wBAOG"}

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":"AAyGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA8HT,OAAO,IAA6B;;QA9IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA+IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aApLR,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;;;kFAyLhB,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":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAwGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA0HT,OAAO,IAA6B;;QA1IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA2IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAhLR,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;;;kFAqLhB,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,10 +1,10 @@
-import { defineComponent as c, createBlock as r, openBlock as o, unref as t, withCtx as l, createCommentVNode as m, createVNode as i, createTextVNode as b, toDisplayString as y, mergeProps as u, renderSlot as V, createElementBlock as p, createElementVNode as g, Fragment as B, renderList as _, normalizeStyle as k } from "vue";
+import { defineComponent as c, createBlock as i, openBlock as o, unref as t, withCtx as l, createCommentVNode as n, createVNode as r, createTextVNode as y, toDisplayString as b, mergeProps as p, renderSlot as V, createElementBlock as d, createElementVNode as B, Fragment as _, renderList as g, normalizeStyle as k } from "vue";
 import { Listbox as x, ListboxLabel as L, ListboxButton as h, ListboxOptions as $ } from "@headlessui/vue";
-import { useBindCx as v } from "@scalar/use-hooks/useBindCx";
-import S from "./ScalarListboxItem.vue.js";
-import C from "../ScalarFloating/ScalarFloating.vue.js";
-import N from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
-const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
+import { useBindCx as S } from "@scalar/use-hooks/useBindCx";
+import C from "./ScalarListboxItem.vue.js";
+import N from "../ScalarFloating/ScalarFloating.vue.js";
+import v from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const w = { class: "custom-scroll min-h-0 flex-1" }, T = /* @__PURE__ */ c({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
@@ -22,50 +22,49 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   },
   emits: ["update:modelValue"],
   setup(z) {
-    const { cx: d } = v();
-    return (e, s) => (o(), r(t(x), {
+    const { cx: u } = S();
+    return (e, m) => (o(), i(t(x), {
       modelValue: e.modelValue,
       multiple: e.multiple,
-      "onUpdate:modelValue": s[0] || (s[0] = (a) => e.$emit("update:modelValue", a))
+      "onUpdate:modelValue": m[0] || (m[0] = (a) => e.$emit("update:modelValue", a))
     }, {
       default: l(({ open: a }) => [
-        e.label ? (o(), r(t(L), {
+        e.label ? (o(), i(t(L), {
           key: 0,
           class: "sr-only"
         }, {
           default: l(() => [
-            b(y(e.label), 1)
+            y(b(e.label), 1)
           ]),
           _: 1
-        })) : m("", !0),
-        i(t(C), u(e.$props, {
+        })) : n("", !0),
+        r(t(N), p(e.$props, {
           placement: e.placement ?? "bottom-start"
         }), {
           floating: l(({ width: f }) => [
-            a ? (o(), p("div", u({
+            a ? (o(), d("div", p({
               key: 0,
               style: { width: f }
-            }, t(d)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
-              g("div", w, [
-                i(t($), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
+            }, t(u)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
+              B("div", w, [
+                r(t($), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
                   default: l(() => [
-                    (o(!0), p(B, null, _(e.options, (n) => (o(), r(S, {
-                      key: n.id,
-                      option: n,
+                    (o(!0), d(_, null, g(e.options, (s) => (o(), i(C, {
+                      key: s.id,
+                      option: s,
                       style: k(e.multiple ? "checkbox" : "radio")
                     }, null, 8, ["option", "style"]))), 128))
                   ]),
                   _: 1
                 })
               ]),
-              i(t(N))
-            ], 16)) : m("", !0)
+              r(t(v))
+            ], 16)) : n("", !0)
           ]),
           default: l(() => [
-            i(t(h), {
+            r(t(h), {
               id: e.id,
-              as: "template",
-              class: "justify-start focus:outline-none focus-visible:ring-1 focus-visible:ring-c-accent"
+              as: "template"
             }, {
               default: l(() => [
                 V(e.$slots, "default", { open: a })
@@ -81,5 +80,5 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   }
 });
 export {
-  P as default
+  T as default
 };

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

@@ -1,22 +1,19 @@
 import type { StoryObj } from '@storybook/vue3';
 declare const meta: {
     component: import("vue").DefineComponent<{
-        loading?: import("../ScalarLoading").LoadingState;
         modelValue?: string;
-        sidebar?: boolean;
+    } & {
+        loading?: import("../ScalarLoading").LoadingState;
         label?: string;
-    }, {
-        focus: () => void;
-        blur: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-        "update:modelValue": (v: string) => any;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string) => any;
     }, string, import("vue").PublicProps, Readonly<{
-        loading?: import("../ScalarLoading").LoadingState;
         modelValue?: string;
-        sidebar?: boolean;
+    } & {
+        loading?: import("../ScalarLoading").LoadingState;
         label?: string;
     }> & Readonly<{
-        "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
     tags: string[];
     argTypes: {
@@ -25,61 +22,52 @@ declare const meta: {
         };
     };
     render: (args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
-        loading?: import("../ScalarLoading").LoadingState;
         modelValue?: string;
-        sidebar?: boolean;
+    } & {
+        loading?: import("../ScalarLoading").LoadingState;
         label?: string;
-    }, {
-        focus: () => void;
-        blur: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-        "update:modelValue": (v: string) => any;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string) => any;
     }, string, import("vue").PublicProps, Readonly<{
-        loading?: import("../ScalarLoading").LoadingState;
         modelValue?: string;
-        sidebar?: boolean;
+    } & {
+        loading?: import("../ScalarLoading").LoadingState;
         label?: string;
     }> & Readonly<{
-        "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>>) => {
         components: {
             ScalarSearchInput: import("vue").DefineComponent<{
-                loading?: import("../ScalarLoading").LoadingState;
                 modelValue?: string;
-                sidebar?: boolean;
+            } & {
+                loading?: import("../ScalarLoading").LoadingState;
                 label?: string;
-            }, {
-                focus: () => void;
-                blur: () => void;
-            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-                "update:modelValue": (v: string) => any;
+            }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                "update:modelValue": (value: string) => any;
             }, string, import("vue").PublicProps, Readonly<{
-                loading?: import("../ScalarLoading").LoadingState;
                 modelValue?: string;
-                sidebar?: boolean;
+            } & {
+                loading?: import("../ScalarLoading").LoadingState;
                 label?: string;
             }> & Readonly<{
-                "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+                "onUpdate:modelValue"?: ((value: string) => any) | undefined;
             }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
         };
         setup(this: void): {
             args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
-                loading?: import("../ScalarLoading").LoadingState;
                 modelValue?: string;
-                sidebar?: boolean;
+            } & {
+                loading?: import("../ScalarLoading").LoadingState;
                 label?: string;
-            }, {
-                focus: () => void;
-                blur: () => void;
-            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-                "update:modelValue": (v: string) => any;
+            }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                "update:modelValue": (value: string) => any;
             }, string, import("vue").PublicProps, Readonly<{
-                loading?: import("../ScalarLoading").LoadingState;
                 modelValue?: string;
-                sidebar?: boolean;
+            } & {
+                loading?: import("../ScalarLoading").LoadingState;
                 label?: string;
             }> & Readonly<{
-                "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+                "onUpdate:modelValue"?: ((value: string) => any) | undefined;
             }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>>;
             model: import("vue").Ref<string, string>;
         };

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

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

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

@@ -1,17 +1,30 @@
 import { type LoadingState } from '../ScalarLoading';
-type __VLS_Props = {
+/**
+ * Scalar search input component
+ *
+ * Provides an large input field with a loading state and a clear button,
+ * intended to be used with the ScalarSearchResults component.
+ *
+ * If you want a smaller input field for use in a sidebar, use
+ * the ScalarSidebarSearchInput component instead.
+ *
+ * @example
+ * <ScalarSearchInput v-model="search" />
+ */
+declare const _default: import("vue").DefineComponent<{
+    modelValue?: string;
+} & {
     loading?: LoadingState;
+    label?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
     modelValue?: string;
-    sidebar?: boolean;
+} & {
+    loading?: LoadingState;
     label?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    focus: () => void;
-    blur: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (v: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarSearchInput.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAkHA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAInE,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;;;;;;;;AA8KF,wBAQG"}
+{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAiFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAInE;;;;;;;;;;;GAWG;;iBAgCU,MAAM;;cA5BP,YAAY;YACd,MAAM;;;;iBA2BH,MAAM;;cA5BP,YAAY;YACd,MAAM;;;;AAJhB,wBAoJC"}

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

@@ -1,7 +1,62 @@
-import o from "./ScalarSearchInput.vue2.js";
-/* empty css                       */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-466c736b"]]);
+import { defineComponent as f, mergeModels as m, useModel as p, ref as h, createElementBlock as b, openBlock as t, normalizeProps as g, guardReactiveProps as v, unref as l, withDirectives as k, createBlock as n, createCommentVNode as _, createElementVNode as C, mergeProps as S, vModelText as V, withModifiers as y } from "vue";
+import { useBindCx as M } from "@scalar/use-hooks/useBindCx";
+import x from "../ScalarLoading/ScalarLoading.vue.js";
+import z from "../ScalarIconButton/ScalarIconButton.vue.js";
+const B = ["aria-label"], E = {}, L = /* @__PURE__ */ f({
+  ...E,
+  inheritAttrs: !1,
+  __name: "ScalarSearchInput",
+  props: /* @__PURE__ */ m({
+    loading: {},
+    label: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(s) {
+    const e = p(s, "modelValue"), a = h(null);
+    function i() {
+      e.value = "", a.value && a.value.focus();
+    }
+    const { classCx: u, otherAttrs: c } = M();
+    return (o, r) => (t(), b("label", g(v(
+      l(u)(
+        "flex items-center rounded border text-sm font-medium has-[:focus-visible]:bg-b-1 bg-b-1.5 has-[:focus-visible]:outline h-10 p-3"
+      )
+    )), [
+      k(C("input", S({
+        ref_key: "inputRef",
+        ref: a,
+        "aria-label": o.label ?? "Enter search query",
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        class: "flex-1 appearance-none rounded border-none bg-transparent outline-none",
+        placeholder: "Search...",
+        spellcheck: "false",
+        type: "search"
+      }, l(c), {
+        "onUpdate:modelValue": r[0] || (r[0] = (d) => e.value = d)
+      }), null, 16, B), [
+        [V, e.value]
+      ]),
+      o.loading && o.loading.isLoading ? (t(), n(l(x), {
+        key: 0,
+        class: "self-center",
+        loadingState: o.loading,
+        size: "md"
+      }, null, 8, ["loadingState"])) : e.value ? (t(), n(l(z), {
+        key: 1,
+        class: "p-0 size-5",
+        icon: "Close",
+        label: "Clear Search",
+        thickness: "1.5",
+        onClick: y(i, ["stop", "prevent"])
+      })) : _("", !0)
+    ], 16));
+  }
+});
 export {
-  p as default
+  L as default
 };

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

@@ -1,88 +1,4 @@
-import { defineComponent as h, ref as v, computed as g, useAttrs as k, createElementBlock as S, openBlock as s, normalizeClass as i, unref as a, createBlock as o, createCommentVNode as c, createElementVNode as V, mergeProps as y, withModifiers as C } from "vue";
-import { cva as z, cx as u } from "@scalar/use-hooks/useBindCx";
-import B from "../ScalarIcon/ScalarIcon.vue.js";
-import I from "../ScalarLoading/ScalarLoading.vue.js";
-import w from "../ScalarIconButton/ScalarIconButton.vue.js";
-const E = ["aria-label", "value"], M = /* @__PURE__ */ h({
-  inheritAttrs: !1,
-  __name: "ScalarSearchInput",
-  props: {
-    loading: {},
-    modelValue: {},
-    sidebar: { type: Boolean },
-    label: {}
-  },
-  emits: ["update:modelValue"],
-  setup(N, { expose: d, emit: p }) {
-    const r = p, l = v(null);
-    function m(e) {
-      r("update:modelValue", e.target.value);
-    }
-    function f() {
-      r("update:modelValue", ""), l.value && l.value.focus();
-    }
-    const t = g(() => {
-      const { class: e, ...n } = k();
-      return { class: e || "", rest: n };
-    }), b = z({
-      base: "search-background flex items-center rounded border text-sm font-medium has-[:focus-visible]:bg-b-1 has-[:focus-visible]:outline",
-      variants: {
-        sidebar: {
-          true: "h-8 gap-2 px-1.5",
-          false: "h-10 p-3"
-        }
-      }
-    });
-    return d({
-      focus: () => {
-        var e;
-        (e = l.value) == null || e.focus();
-      },
-      blur: () => {
-        var e;
-        (e = l.value) == null || e.blur();
-      }
-    }), (e, n) => (s(), S("label", {
-      class: i(a(u)(a(b)({ sidebar: e.sidebar }), t.value.class))
-    }, [
-      e.sidebar ? (s(), o(a(B), {
-        key: 0,
-        class: "text-c-2",
-        icon: "Search",
-        size: "xs",
-        thickness: "2.5"
-      })) : c("", !0),
-      V("input", y({
-        ref_key: "inputRef",
-        ref: l
-      }, t.value.rest, {
-        "aria-label": e.label ?? "Enter search query",
-        autocapitalize: "off",
-        autocomplete: "off",
-        autocorrect: "off",
-        class: "flex-1 appearance-none rounded border-none bg-transparent outline-none",
-        placeholder: "Search...",
-        spellcheck: "false",
-        type: "search",
-        value: e.modelValue,
-        onInput: m
-      }), null, 16, E),
-      e.loading && e.loading.isLoading ? (s(), o(a(I), {
-        key: 1,
-        class: "mr-3 self-center",
-        loadingState: e.loading,
-        size: "md"
-      }, null, 8, ["loadingState"])) : e.modelValue ? (s(), o(a(w), {
-        key: 2,
-        class: i(a(u)("p-0", e.sidebar ? "h-4 w-4" : "h-5 w-5")),
-        icon: "Close",
-        label: "Clear Search",
-        thickness: e.sidebar ? "1.75" : "1.5",
-        onClick: C(f, ["stop", "prevent"])
-      }, null, 8, ["class", "thickness"])) : c("", !0)
-    ], 2));
-  }
-});
+import f from "./ScalarSearchInput.vue.js";
 export {
-  M as default
+  f as default
 };

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

@@ -3,7 +3,8 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
-export declare const WithNavItems: Story;
 export declare const WithNestedGroups: Story;
-export declare const WithFooter: Story;
+export declare const WithSections: Story;
+export declare const WithFooterContent: Story;
+export declare const WithSearchButton: Story;
 //# sourceMappingURL=ScalarSidebar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AASrD,QAAA,MAAM,IAAI,EAAE,IA8BX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqF9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA"}
+{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAYrD,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,gBAAgB,EAAE,KAkE9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAqD1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBA8HC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,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/ScalarSidebar/ScalarSidebarButton.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as r, createBlock as a, openBlock as t, resolveDynamicComponent as c, mergeProps as u, unref as o, withCtx as f, renderSlot as s, createElementVNode as m, createElementBlock as l, createCommentVNode as n, createVNode as p } from "vue";
-import { cva as b, useBindCx as v } from "@scalar/use-hooks/useBindCx";
+import { defineComponent as r, createBlock as n, openBlock as t, resolveDynamicComponent as c, mergeProps as u, unref as a, withCtx as f, renderSlot as s, createElementVNode as p, createElementBlock as d, createCommentVNode as o, createVNode as b } from "vue";
+import { cva as m, useBindCx as v } from "@scalar/use-hooks/useBindCx";
 import y from "./ScalarSidebarIndent.vue.js";
 import h from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
-const g = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, B = {
+const B = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, $ = {
   key: 0,
   class: "size-3.5"
-}, $ = { key: 0 }, k = {}, E = /* @__PURE__ */ r({
+}, g = { key: 0 }, k = {}, w = /* @__PURE__ */ r({
   ...k,
   inheritAttrs: !1,
   __name: "ScalarSidebarButton",
@@ -17,10 +17,10 @@ const g = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, B = {
     indent: { default: 0 }
   },
   setup(C) {
-    const d = b({
-      base: ["group/button flex rounded px-1.5 font-medium text-c-2 no-underline"],
+    const l = m({
+      base: ["group/button flex rounded px-2 font-sidebar text-c-2 no-underline"],
       variants: {
-        selected: { true: "cursor-auto bg-b-2 text-c-1" },
+        selected: { true: "cursor-auto bg-b-2 text-c-1 font-sidebar-active" },
         disabled: { true: "cursor-auto" }
       },
       compoundVariants: [
@@ -28,38 +28,38 @@ const g = { class: "flex items-center gap-1 flex-1 py-2 leading-5" }, B = {
       ],
       defaultVariants: { selected: !1, disabled: !1 }
     }), { cx: i } = v();
-    return (e, S) => (t(), a(c(e.is), u({
+    return (e, S) => (t(), n(c(e.is), u({
       "aria-level": e.indent,
       "aria-selected": e.selected,
       type: e.is === "button" ? "button" : void 0
-    }, o(i)(o(d)({ selected: e.selected, disabled: e.disabled }))), {
+    }, a(i)(a(l)({ selected: e.selected, disabled: e.disabled }))), {
       default: f(() => [
         s(e.$slots, "indent", {}, () => [
-          p(y, {
+          b(y, {
             indent: e.indent,
-            selected: e.selected
-          }, null, 8, ["indent", "selected"])
+            selected: e.selected,
+            disabled: e.disabled
+          }, null, 8, ["indent", "selected", "disabled"])
         ]),
-        m("div", g, [
-          e.icon || e.$slots.icon ? (t(), l("div", B, [
+        p("div", B, [
+          e.icon || e.$slots.icon ? (t(), d("div", $, [
             s(e.$slots, "icon", {}, () => [
-              e.icon ? (t(), a(o(h), {
+              e.icon ? (t(), n(a(h), {
                 key: 0,
-                icon: e.icon,
-                weight: "bold"
-              }, null, 8, ["icon"])) : n("", !0)
+                icon: e.icon
+              }, null, 8, ["icon"])) : o("", !0)
             ])
-          ])) : n("", !0),
+          ])) : o("", !0),
           s(e.$slots, "default")
         ]),
-        e.$slots.aside ? (t(), l("div", $, [
+        e.$slots.aside ? (t(), d("div", g, [
           s(e.$slots, "aside")
-        ])) : n("", !0)
+        ])) : o("", !0)
       ]),
       _: 3
     }, 16, ["aria-level", "aria-selected", "type"]));
   }
 });
 export {
-  E as default
+  w as default
 };

package/dist/components/ScalarSidebar/ScalarSidebarGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { ScalarSidebarItemProps } from '../../components/ScalarSidebar/types';
 import { type SidebarGroupLevel } from './useSidebarGroups.js';
 /**
  * Scalar Sidebar Group component
@@ -17,17 +17,11 @@ import { type SidebarGroupLevel } from './useSidebarGroups.js';
  */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue?: boolean;
-} & {
-    /** Override the element tag */
-    is?: Component | string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+} & ScalarSidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
     modelValue?: boolean;
-} & {
-    /** Override the element tag */
-    is?: Component | string;
-}> & Readonly<{
+} & ScalarSidebarItemProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<{
     /** The text content of the toggle */

package/dist/components/ScalarSidebar/ScalarSidebarGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AAsFA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC,OAAO,EAAE,KAAK,iBAAiB,EAAoB,MAAM,oBAAoB,CAAA;AAI7E;;;;;;;;;;;;;;GAcG;;iBAkCU,OAAO;;IA9BlB,+BAA+B;SAC1B,SAAS,GAAG,MAAM;;;;iBA6BZ,OAAO;;IA9BlB,+BAA+B;SAC1B,SAAS,GAAG,MAAM;;;;IAQvB,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;IALzC,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;AAjB3C,wBAkKC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarGroup.vue"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAO9E,OAAO,EAAE,KAAK,iBAAiB,EAAoB,MAAM,oBAAoB,CAAA;AAI7E;;;;;;;;;;;;;;GAcG;;iBA+BU,OAAO;;;;iBAAP,OAAO;;;;IArBlB,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;IALzC,qCAAqC;cAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;IAC3C,wCAAwC;aAC/B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,KAAK,GAAG;IACpE,mCAAmC;YAC3B,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,GAAG;;AAd3C,wBAgKC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}