@scalar/components 0.12.76 → 0.13.0

package/dist/components/ScalarSearchResults/ScalarSearchResultList.vue.js

@@ -1,30 +1,24 @@
-import { defineComponent as r, computed as a, useAttrs as n, openBlock as c, createElementBlock as m, mergeProps as u, unref as p, renderSlot as o, createElementVNode as s, createCommentVNode as f } from "vue";
-import { cx as d } from "../../cva.js";
-const v = /* @__PURE__ */ r({
+import { defineComponent as r, openBlock as n, createElementBlock as a, mergeProps as m, unref as u, renderSlot as s, createElementVNode as t, createCommentVNode as f } from "vue";
+import { useBindCx as p } from "../../hooks/useBindCx.js";
+const x = /* @__PURE__ */ r({
   inheritAttrs: !1,
   __name: "ScalarSearchResultList",
   props: {
     noResults: { type: Boolean }
   },
-  setup(i) {
-    const l = a(() => {
-      const { class: e, ...t } = n();
-      return { className: e || "", rest: t };
-    });
-    return (e, t) => (c(), m("ul", u(l.value.rest, {
-      class: p(d)("flex flex-col", l.value.className),
-      role: "listbox"
-    }), [
-      e.noResults ? o(e.$slots, "noResults", { key: 0 }, () => [
-        t[0] || (t[0] = s("div", { class: "flex flex-col items-center gap-2 px-3 py-4" }, [
-          s("div", { class: "rotate-90 text-lg font-bold" }, ":("),
-          s("div", { class: "text-sm font-medium text-c-2" }, "No results found")
+  setup(c) {
+    const { cx: l } = p();
+    return (e, o) => (n(), a("ul", m({ role: "listbox" }, u(l)("flex flex-col")), [
+      e.noResults ? s(e.$slots, "noResults", { key: 0 }, () => [
+        o[0] || (o[0] = t("div", { class: "flex flex-col items-center gap-2 px-3 py-4" }, [
+          t("div", { class: "rotate-90 text-lg font-bold" }, ":("),
+          t("div", { class: "text-sm font-medium text-c-2" }, "No results found")
         ], -1))
       ]) : f("", !0),
-      o(e.$slots, "default")
+      s(e.$slots, "default")
     ], 16));
   }
 });
 export {
-  v as default
+  x as default
 };

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

@@ -1,86 +1,73 @@
 import type { StoryObj } from '@storybook/vue3';
 declare const meta: {
     component: import("vue").DefineComponent<{
-        modelValue: boolean;
+        modelValue?: boolean;
         disabled?: boolean;
-        id?: string;
-        ariaLabel?: string;
-        ariaLabelledBy?: string;
+        label?: string;
     }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         "update:modelValue": (value: boolean) => any;
     }, string, import("vue").PublicProps, Readonly<{
-        modelValue: boolean;
+        modelValue?: boolean;
         disabled?: boolean;
-        id?: string;
-        ariaLabel?: string;
-        ariaLabelledBy?: string;
+        label?: string;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
     tags: string[];
+    args: {
+        modelValue: false;
+    };
     argTypes: {
-        modelValue: {
-            control: "boolean";
+        label: {
+            control: "text";
         };
         disabled: {
             control: "boolean";
         };
     };
     render: (args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
-        modelValue: boolean;
+        modelValue?: boolean;
         disabled?: boolean;
-        id?: string;
-        ariaLabel?: string;
-        ariaLabelledBy?: string;
+        label?: string;
     }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         "update:modelValue": (value: boolean) => any;
     }, string, import("vue").PublicProps, Readonly<{
-        modelValue: boolean;
+        modelValue?: boolean;
         disabled?: boolean;
-        id?: string;
-        ariaLabel?: string;
-        ariaLabelledBy?: string;
+        label?: string;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>>) => {
+    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>>) => {
         components: {
             ScalarToggle: import("vue").DefineComponent<{
-                modelValue: boolean;
+                modelValue?: boolean;
                 disabled?: boolean;
-                id?: string;
-                ariaLabel?: string;
-                ariaLabelledBy?: string;
+                label?: string;
             }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
                 "update:modelValue": (value: boolean) => any;
             }, string, import("vue").PublicProps, Readonly<{
-                modelValue: boolean;
+                modelValue?: boolean;
                 disabled?: boolean;
-                id?: string;
-                ariaLabel?: string;
-                ariaLabelledBy?: string;
+                label?: string;
             }> & Readonly<{
                 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+            }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
         };
         setup(this: void): {
             args: import("@storybook/vue3").ComponentPropsAndSlots<import("vue").DefineComponent<{
-                modelValue: boolean;
+                modelValue?: boolean;
                 disabled?: boolean;
-                id?: string;
-                ariaLabel?: string;
-                ariaLabelledBy?: string;
+                label?: string;
             }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
                 "update:modelValue": (value: boolean) => any;
             }, string, import("vue").PublicProps, Readonly<{
-                modelValue: boolean;
+                modelValue?: boolean;
                 disabled?: boolean;
-                id?: string;
-                ariaLabel?: string;
-                ariaLabelledBy?: string;
+                label?: string;
             }> & Readonly<{
                 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>>;
-            model: import("vue").Ref<boolean, boolean>;
+            }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>>;
+            model: import("vue").Ref<boolean | undefined, boolean | undefined>;
         };
         template: string;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe2B,CAAA;AAErC,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":"ScalarToggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAwC,CAAA;AAE3D,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA"}

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

@@ -1,14 +1,12 @@
 type __VLS_Props = {
-    modelValue: boolean;
+    modelValue?: boolean;
     disabled?: boolean;
-    id?: string;
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
+    label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;
 //# sourceMappingURL=ScalarToggle.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AA0DA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC;;;;;;AA8FF,wBAQG"}
+{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AAkDA,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;;;;;AAgGF,wBAQG"}

package/dist/components/ScalarToggle/ScalarToggle.vue.js

@@ -1,54 +1,43 @@
-import { defineComponent as b, openBlock as p, createElementBlock as m, normalizeClass as d, unref as o, withKeys as i, withModifiers as t, createElementVNode as r } from "vue";
-import { cva as h, cx as f } from "../../cva.js";
-const y = ["onKeydown"], g = ["id", "aria-checked", "aria-disabled", "aria-label", "aria-labelledby", "checked", "disabled"], v = /* @__PURE__ */ b({
+import { defineComponent as u, openBlock as t, createElementBlock as l, normalizeClass as o, unref as n, createElementVNode as m, toDisplayString as p, createCommentVNode as b } from "vue";
+import { cva as f, cx as h } from "../../cva.js";
+const V = ["aria-checked", "aria-disabled"], g = {
+  key: 0,
+  class: "sr-only"
+}, w = /* @__PURE__ */ u({
   __name: "ScalarToggle",
   props: {
     modelValue: { type: Boolean },
     disabled: { type: Boolean },
-    id: {},
-    ariaLabel: {},
-    ariaLabelledBy: {}
+    label: {}
   },
   emits: ["update:modelValue"],
-  setup(n, { emit: s }) {
-    const a = n, c = s;
-    function l() {
-      a.disabled || c("update:modelValue", !a.modelValue);
+  setup(r, { emit: s }) {
+    const a = r, d = s;
+    function i() {
+      a.disabled || d("update:modelValue", !a.modelValue);
     }
-    const u = h({
+    const c = f({
       base: "relative h-3.5 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300",
       variants: {
         checked: { true: "bg-c-accent" },
         disabled: { true: "cursor-not-allowed opacity-40" }
       }
     });
-    return (e, k) => (p(), m("div", {
-      class: d(o(f)(o(u)({ checked: e.modelValue, disabled: e.disabled }))),
+    return (e, k) => (t(), l("button", {
+      "aria-checked": e.modelValue,
+      "aria-disabled": e.disabled,
+      class: o(n(h)(n(c)({ checked: e.modelValue, disabled: e.disabled }))),
       role: "switch",
-      tabindex: "0",
-      onKeydown: [
-        i(t(l, ["prevent"]), ["enter"]),
-        i(t(l, ["prevent"]), ["space"])
-      ]
+      type: "button",
+      onClick: i
     }, [
-      r("input", {
-        id: a.id,
-        "aria-checked": e.modelValue,
-        "aria-disabled": e.disabled,
-        "aria-label": a.ariaLabel,
-        "aria-labelledby": a.ariaLabelledBy,
-        checked: e.modelValue,
-        class: "hidden",
-        disabled: e.disabled,
-        type: "checkbox",
-        onChange: l
-      }, null, 40, g),
-      r("div", {
-        class: d(["absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-white text-c-accent transition-transform duration-300", { "translate-x-2.5": e.modelValue }])
-      }, null, 2)
-    ], 42, y));
+      m("div", {
+        class: o(["absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-white text-c-accent transition-transform duration-300", { "translate-x-2.5": e.modelValue }])
+      }, null, 2),
+      e.label ? (t(), l("span", g, p(e.label), 1)) : b("", !0)
+    ], 10, V));
   }
 });
 export {
-  v as default
+  w as default
 };

package/dist/hooks/useBindCx.d.ts

@@ -0,0 +1,51 @@
+import type { CXOptions } from 'cva';
+/**
+ * Provides a wrapper around the `cx` function that merges the
+ * component's class attribute with the provided classes and binds the
+ * remaining attributes
+ *
+ * @see https://beta.cva.style/api-reference#cx
+ *
+ * @example
+ * <script setup>
+ * import { useBindCx, cva } from '@scalar/components'
+ *
+ * defineProps<{ active?: boolean }>()
+ *
+ * // Important: disable inheritance of attributes
+ * defineOptions({ inheritAttrs: false })
+ *
+ * const { cx } = useBindCx()
+ *
+ * const variants = cva({
+ *   base: 'border rounded p-2 bg-b-1',
+ *   variants: { active: { true: 'bg-b-2' } },
+ * })
+ * </script>
+ * <template>
+ *   <div v-bind="cx(variants({ active }))">MockComponent</div>
+ * </template>
+ */
+export declare function useBindCx(): {
+    /**
+     * Provides a wrapper around the `cx` function that merges the
+     * component's class attribute with the provided classes and binds the
+     * remaining attributes
+     *
+     * @example
+     * <script setup>
+     * ...
+     * const { cx } = useBindCx()
+     * </script>
+     * <template>
+     *   <div v-bind="cx(...)">...</div>
+     * </template>
+     */
+    cx: (...args: CXOptions) => {
+        /** The merged class attribute */
+        class: string;
+        /** The remaining attributes */
+        [key: string]: any;
+    };
+};
+//# sourceMappingURL=useBindCx.d.ts.map

package/dist/hooks/useBindCx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBindCx.d.ts","sourceRoot":"","sources":["../../src/hooks/useBindCx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS;IAmBrB;;;;;;;;;;;;;OAaG;kBA1BoB,SAAS,KAAG;QACnC,iCAAiC;QACjC,KAAK,EAAE,MAAM,CAAA;QACb,+BAA+B;QAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB;EAwBF"}

package/dist/hooks/useBindCx.js

@@ -0,0 +1,34 @@
+import { computed as e, useAttrs as n } from "vue";
+import { cx as o } from "../cva.js";
+function l() {
+  const t = e(() => {
+    const { class: s, ...c } = n();
+    return { class: s || "", rest: c };
+  });
+  function r(...s) {
+    return {
+      class: o(...s, t.value.class),
+      ...t.value.rest
+    };
+  }
+  return {
+    /**
+     * Provides a wrapper around the `cx` function that merges the
+     * component's class attribute with the provided classes and binds the
+     * remaining attributes
+     *
+     * @example
+     * <script setup>
+     * ...
+     * const { cx } = useBindCx()
+     * <\/script>
+     * <template>
+     *   <div v-bind="cx(...)">...</div>
+     * </template>
+     */
+    cx: r
+  };
+}
+export {
+  l as useBindCx
+};