@scalar/components 0.12.61 → 0.12.63

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

@@ -1,9 +1,9 @@
-import { defineComponent as y, openBlock as o, createBlock as p, unref as t, normalizeClass as r, withCtx as s, createTextVNode as g, toDisplayString as m, createCommentVNode as v, createVNode as i, mergeProps as x, createElementBlock as V, Fragment as k, renderList as B, createElementVNode as n, renderSlot as h } from "vue";
+import { defineComponent as v, openBlock as r, createBlock as u, unref as t, normalizeClass as i, withCtx as s, createTextVNode as x, toDisplayString as m, createCommentVNode as g, createVNode as n, createElementVNode as a, mergeProps as y, createElementBlock as h, Fragment as V, renderList as k, renderSlot as B } from "vue";
 import { Listbox as z, 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 P = /* @__PURE__ */ y({
+const E = { class: "custom-scroll min-h-0 flex-1" }, T = /* @__PURE__ */ v({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
@@ -19,7 +19,7 @@ const P = /* @__PURE__ */ y({
     teleport: { type: [Boolean, String] }
   },
   emits: ["update:modelValue"],
-  setup(E) {
+  setup(W) {
     const c = S({
       base: [
         // Layout
@@ -37,79 +37,85 @@ const P = /* @__PURE__ */ y({
         disabled: { true: "pointer-events-none opacity-50" }
       }
     });
-    return (e, a) => (o(), p(t(z), {
+    return (e, o) => (r(), u(t(z), {
       as: "div",
-      class: r([{ "w-full": e.fullWidth }, "text-sm"]),
+      class: i([{ "w-full": e.fullWidth }, "text-sm"]),
       modelValue: e.modelValue,
       multiple: e.multiple,
-      "onUpdate:modelValue": a[0] || (a[0] = (d) => e.$emit("update:modelValue", d))
+      "onUpdate:modelValue": o[0] || (o[0] = (d) => e.$emit("update:modelValue", d))
     }, {
       default: s(({ open: d }) => [
-        e.label ? (o(), p(t(L), {
+        e.label ? (r(), u(t(L), {
           key: 0,
           class: "sr-only"
         }, {
           default: s(() => [
-            g(m(e.label), 1)
+            x(m(e.label), 1)
           ]),
           _: 1
-        })) : v("", !0),
-        i(t($), {
+        })) : g("", !0),
+        n(t($), {
           isOpen: d ?? e.isOpen,
           placement: e.placement ?? "bottom-start",
           resize: e.resize,
           teleport: e.teleport
         }, {
           floating: s(({ width: f }) => [
-            i(t(w), x({
-              class: "relative flex w-40 flex-col rounded border p-0.75",
+            a("div", y(e.$attrs, {
+              class: "relative flex max-h-[inherit] w-40 rounded border",
               style: { width: f }
-            }, e.$attrs), {
-              default: s(() => [
-                (o(!0), V(k, null, B(e.options, (l) => (o(), p(t(O), {
-                  key: l.id,
-                  as: "template",
-                  disabled: l.disabled,
-                  value: l
-                }, {
-                  default: s(({ active: b, selected: u }) => [
-                    n("li", {
-                      class: r(
-                        t(N)(t(c)({ active: b, selected: u, disabled: l.disabled }))
-                      )
-                    }, [
-                      n("div", {
-                        class: r([
-                          "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"
-                        ])
-                      }, [
-                        i(t(j), {
-                          class: "relative top-[0.5px] size-2.5",
-                          icon: "Checkmark",
-                          thickness: "2.5"
-                        })
-                      ], 2),
-                      n("span", {
-                        class: r(["inline-block min-w-0 flex-1 truncate", l.color ? l.color : "text-c-1"])
-                      }, m(l.label), 3)
-                    ], 2)
+            }), [
+              a("div", E, [
+                n(t(w), { class: "flex flex-col p-0.75" }, {
+                  default: s(() => [
+                    (r(!0), h(V, null, k(e.options, (l) => (r(), u(t(O), {
+                      key: l.id,
+                      as: "template",
+                      disabled: l.disabled,
+                      value: l
+                    }, {
+                      default: s(({ active: b, selected: p }) => [
+                        a("li", {
+                          class: i(
+                            t(N)(
+                              t(c)({ active: b, selected: p, disabled: l.disabled })
+                            )
+                          )
+                        }, [
+                          a("div", {
+                            class: i([
+                              "flex size-4 items-center justify-center rounded-full p-[3px]",
+                              p ? "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: i(["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))
                   ]),
-                  _: 2
-                }, 1032, ["disabled", "value"]))), 128)),
-                a[1] || (a[1] = n("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1))
+                  _: 1
+                })
               ]),
-              _: 2
-            }, 1040, ["style"])
+              o[1] || (o[1] = a("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1))
+            ], 16)
           ]),
           default: s(() => [
-            i(t(C), {
+            n(t(C), {
               id: e.id,
               as: "template",
               class: "justify-start focus:outline-none focus-visible:ring-1 focus-visible:ring-c-accent"
             }, {
               default: s(() => [
-                h(e.$slots, "default")
+                B(e.$slots, "default")
               ]),
               _: 3
             }, 8, ["id"])
@@ -122,5 +128,5 @@ const P = /* @__PURE__ */ y({
   }
 });
 export {
-  P as default
+  T as default
 };

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"names":[],"mappings":"AAyNA,+CAA+C;AAC/C,wBAAgB,QAAQ;;;;EAUvB;;WAMU,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;WAHV,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;;;qBA8PS,GAAG;qBACH,GAAG;;AAvQjC,wBAwSK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"names":[],"mappings":"AA6OA,+CAA+C;AAC/C,wBAAgB,QAAQ;;;;EAUvB;;WAMU,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;WAHV,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;;;qBAqQS,GAAG;qBACH,GAAG;;AA9QjC,wBA+SK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarModal/ScalarModal.vue.js

@@ -1,9 +1,9 @@
 import o from "./ScalarModal.vue2.js";
-import { useModal as f } from "./ScalarModal.vue2.js";
+import { useModal as s } from "./ScalarModal.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e37b0bd8"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f7e672e8"]]);
 export {
-  m as default,
-  f as useModal
+  f as default,
+  s as useModal
 };

package/dist/components/ScalarModal/ScalarModal.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as v, openBlock as l, createBlock as r, unref as a, withCtx as o, createElementVNode as x, normalizeClass as s, createVNode as i, normalizeStyle as b, createTextVNode as g, toDisplayString as y, createCommentVNode as d, createElementBlock as n, renderSlot as m, reactive as w } from "vue";
+import { defineComponent as v, openBlock as l, createBlock as r, unref as a, withCtx as t, createElementVNode as x, normalizeClass as s, createVNode as i, normalizeStyle as b, createTextVNode as y, toDisplayString as g, createCommentVNode as d, createElementBlock as m, renderSlot as n, reactive as w } from "vue";
 import { Dialog as z, DialogPanel as k, DialogTitle as C, DialogDescription as D } from "@headlessui/vue";
-import { cva as c, cx as p } from "../../cva.js";
+import { cva as c, cx as f } from "../../cva.js";
 import S from "../ScalarIconButton/ScalarIconButton.vue.js";
 const $ = {
   key: 0,
@@ -28,10 +28,10 @@ const M = /* @__PURE__ */ v({
     variant: {}
   },
   setup(N) {
-    const f = c({
+    const p = c({
       base: [
         "scalar-modal",
-        "col relative mx-auto mb-0 w-[calc(100vw-16px)] rounded-lg bg-b-2 p-0 text-left leading-snug text-c-1 opacity-0 lg:w-[calc(100vw-32px)]"
+        "col relative mx-auto mb-0 rounded-lg bg-b-2 p-0 text-left leading-snug text-c-1 opacity-0 md:w-[calc(100vw-16px)] lg:w-[calc(100vw-32px)]"
       ].join(" "),
       variants: {
         size: {
@@ -41,12 +41,13 @@ const M = /* @__PURE__ */ v({
           md: "mt-20 max-w-screen-md",
           lg: "m-auto max-w-screen-lg",
           xl: "m-auto max-w-screen-xl",
-          full: "full-size-styles mt-0 overflow-hidden lg:w-full"
+          full: "full-size-styles mt-0 lg:w-full"
         },
         variant: {
           form: "scalar-modal-form",
           history: "scalar-modal-history bg-b-1",
-          search: "scalar-modal-search"
+          search: "scalar-modal-search",
+          error: "scalar-modal-error"
         }
       }
     }), u = c({
@@ -58,7 +59,8 @@ const M = /* @__PURE__ */ v({
         variant: {
           form: "overflow-visible",
           history: "pt-3",
-          search: "col !m-0 max-h-[440px] overflow-hidden p-0"
+          search: "col !m-0 max-h-[440px] overflow-hidden p-0",
+          error: "overflow-y-scroll"
         },
         size: {
           xxs: "max-h-[calc(100dvh-240px)]",
@@ -67,19 +69,20 @@ const M = /* @__PURE__ */ v({
           md: "max-h-[calc(100dvh-240px)]",
           lg: "max-h-[calc(100dvh-180px)]",
           xl: "m-0 max-h-[calc(100dvh-120px)] p-0",
-          full: "max-h-dvh rounded-none bg-transparent"
+          full: "max-h-dvh rounded-none"
         }
       }
     });
-    return (e, t) => (l(), r(a(z), {
+    return (e, o) => (l(), r(a(z), {
       open: e.state.open,
-      onClose: t[1] || (t[1] = (h) => e.state.hide())
+      onClose: o[1] || (o[1] = (h) => e.state.hide())
     }, {
-      default: o(() => [
+      default: t(() => [
         x("div", {
           class: s(
-            a(p)(
-              "scalar-modal-layout fixed left-0 top-0 flex items-start justify-center",
+            a(f)(
+              e.size === "full" ? "scalar-modal-layout-full" : "scalar-modal-layout",
+              "fixed left-0 top-0 flex items-start justify-center",
               "z-[1001] h-[100dvh] w-[100dvw]",
               "bg-backdrop opacity-0 dark:bg-backdropdark",
               e.size === "full" && "flex"
@@ -87,42 +90,42 @@ const M = /* @__PURE__ */ v({
           )
         }, [
           i(a(k), {
-            class: s(a(f)({ size: e.size, variant: e.variant })),
+            class: s(a(p)({ size: e.size, variant: e.variant })),
             style: b({ maxWidth: e.maxWidth })
           }, {
-            default: o(() => [
+            default: t(() => [
               e.title ? (l(), r(a(C), {
                 key: 0,
                 class: s(["scalar-modal-header m-0 -mb-1 rounded-lg p-3 text-left text-sm font-medium text-c-1", { "pb-0 pt-6": e.variant === "history" }])
               }, {
-                default: o(() => [
-                  g(y(e.title), 1)
+                default: t(() => [
+                  y(g(e.title), 1)
                 ]),
                 _: 1
               }, 8, ["class"])) : d("", !0),
-              e.size === "full" ? (l(), n("div", {
+              e.size === "full" ? (l(), m("div", {
                 key: 1,
                 class: s(e.bodyClass)
               }, [
-                m(e.$slots, "default", {}, void 0, !0)
+                n(e.$slots, "default", {}, void 0, !0)
               ], 2)) : (l(), r(a(D), {
                 key: 2,
-                class: s(a(p)(e.bodyClass, a(u)({ size: e.size, variant: e.variant })))
+                class: s(a(f)(e.bodyClass, a(u)({ size: e.size, variant: e.variant })))
               }, {
-                default: o(() => [
-                  m(e.$slots, "default", {}, void 0, !0)
+                default: t(() => [
+                  n(e.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
               }, 8, ["class"]))
             ]),
             _: 3
           }, 8, ["class", "style"]),
-          e.size === "full" ? (l(), n("div", $, [
+          e.size === "full" ? (l(), m("div", $, [
             i(a(S), {
-              class: "hover:bg-b-2 focus:outline-none",
+              class: "hover:bg-b-3 focus:outline-none",
               icon: "Close",
               label: "Clear Search",
-              onClose: t[0] || (t[0] = (h) => e.state.hide())
+              onClose: o[0] || (o[0] = (h) => e.state.hide())
             })
           ])) : d("", !0)
         ], 2)

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":"AA8FA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;;cAKvD,YAAY;iBACT,MAAM;cACT,OAAO;YACT,MAAM;;;;;;;cAHJ,YAAY;iBACT,MAAM;cACT,OAAO;YACT,MAAM;;;;AAoLhB,wBAUG"}
+{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AA0GA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;;cAKvD,YAAY;iBACT,MAAM;cACT,OAAO;YACT,MAAM;;;;;;;cAHJ,YAAY;iBACT,MAAM;cACT,OAAO;YACT,MAAM;;;;AAwLhB,wBAUG"}

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

@@ -1,85 +1,7 @@
-import { defineComponent as b, ref as h, computed as g, useAttrs as v, openBlock as s, createElementBlock as k, normalizeClass as i, unref as a, createBlock as r, createCommentVNode as u, createElementVNode as S, mergeProps as V } from "vue";
-import { cva as y, cx as c } from "../../cva.js";
-import C from "../ScalarIcon/ScalarIcon.vue.js";
-import N from "../ScalarLoading/ScalarLoading.vue.js";
-import z from "../ScalarIconButton/ScalarIconButton.vue.js";
-const B = ["aria-label", "value"], q = /* @__PURE__ */ b({
-  inheritAttrs: !1,
-  __name: "ScalarSearchInput",
-  props: {
-    loading: {},
-    modelValue: {},
-    sidebar: { type: Boolean },
-    label: {}
-  },
-  emits: ["update:modelValue"],
-  setup(I, { expose: d, emit: m }) {
-    const t = m, o = h(null);
-    function p(e) {
-      t("update:modelValue", e.target.value);
-    }
-    const n = g(() => {
-      const { class: e, ...l } = v();
-      return { className: e || "", rest: l };
-    }), f = y({
-      base: "flex items-center rounded border bg-b-1/2 text-sm font-medium has-[:focus-visible]:bg-b-1 has-[:focus-visible]:outline",
-      variants: {
-        sidebar: {
-          true: "h-8 gap-1.5 px-1.5",
-          false: "h-10 p-3"
-        }
-      }
-    });
-    return d({
-      focus: () => {
-        var e;
-        (e = o.value) == null || e.focus();
-      },
-      blur: () => {
-        var e;
-        (e = o.value) == null || e.blur();
-      }
-    }), (e, l) => (s(), k("label", {
-      class: i(a(c)(a(f)({ sidebar: e.sidebar }), n.value.className))
-    }, [
-      e.sidebar ? (s(), r(a(C), {
-        key: 0,
-        class: "text-c-2",
-        icon: "Search",
-        size: "xs",
-        thickness: "2.5"
-      })) : u("", !0),
-      S("input", V({
-        ref_key: "inputRef",
-        ref: o
-      }, n.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: p
-      }), null, 16, B),
-      e.loading && e.loading.isLoading ? (s(), r(a(N), {
-        key: 1,
-        class: "mr-3 self-center",
-        loadingState: e.loading,
-        size: "md"
-      }, null, 8, ["loadingState"])) : e.modelValue ? (s(), r(a(z), {
-        key: 2,
-        class: i(a(c)("p-0", e.sidebar ? "h-4 w-4" : "h-5 w-5")),
-        icon: "Close",
-        label: "Clear Search",
-        thickness: e.sidebar ? "1.75" : "1.5",
-        onClick: l[0] || (l[0] = (E) => t("update:modelValue", ""))
-      }, null, 8, ["class", "thickness"])) : u("", !0)
-    ], 2));
-  }
-});
+import a from "./ScalarSearchInput.vue2.js";
+/* empty css                       */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ o(a, [["__scopeId", "data-v-52e35a1d"]]);
 export {
-  q as default
+  c as default
 };

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

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