@scalar/use-hooks 0.1.46 → 0.1.48

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/useBindCx/cva.js

@@ -1,19 +1,21 @@
-import { defineConfig as e } from "cva";
-import { extendTailwindMerge as t } from "tailwind-merge";
-const s = t({
+import { defineConfig } from "cva";
+import { extendTailwindMerge } from "tailwind-merge";
+const tw = extendTailwindMerge({
   extend: {
     classGroups: {
       "font-size": ["text-3xs", "text-xxs"]
     }
   }
-}), { cva: i, cx: r, compose: c } = e({
+});
+const { cva, cx, compose } = defineConfig({
   hooks: {
-    onComplete: (o) => s(o)
+    onComplete: (className) => tw(className)
   }
 });
 export {
-  c as compose,
-  i as cva,
-  r as cx,
-  s as tw
+  compose,
+  cva,
+  cx,
+  tw
 };
+//# sourceMappingURL=cva.js.map

package/dist/useBindCx/cva.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBindCx/cva.ts"],
+  "sourcesContent": ["import { defineConfig } from 'cva'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n/**\n * Tailwind Merge Config\n *\n * By default tailwind merge only knows about the default tailwind classes\n * this is because it does not load in the tailwind config at runtime (perf reasons)\n * we must specify any custom classes if they are getting overwritten\n *\n * https://github.com/dcastil/tailwind-merge/blob/v2.0.0/docs/configuration.md#class-groups\n */\nconst tw = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': ['text-3xs', 'text-xxs'],\n    },\n  },\n})\n\n/**\n * CVA Config\n *\n * https://beta.cva.style/api-reference/#defineconfig\n */\nconst { cva, cx, compose } = defineConfig({\n  hooks: {\n    onComplete: (className) => tw(className),\n  },\n})\n\nexport { cva, cx, compose, tw }\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AAWpC,MAAM,KAAK,oBAAoB;AAAA,EAC7B,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,YAAY,UAAU;AAAA,IACtC;AAAA,EACF;AACF,CAAC;AAOD,MAAM,EAAE,KAAK,IAAI,QAAQ,IAAI,aAAa;AAAA,EACxC,OAAO;AAAA,IACL,YAAY,CAAC,cAAc,GAAG,SAAS;AAAA,EACzC;AACF,CAAC;",
+  "names": []
+}

package/dist/useBindCx/cva.test.js

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import { cva, cx } from "./cva.js";
+describe("cx utility", () => {
+  it("should merge classnames correctly", () => {
+    expect(cx("foo", "bar")).toBe("foo bar");
+    expect(cx("foo", void 0, "bar")).toBe("foo bar");
+    expect(cx("foo", null, "bar")).toBe("foo bar");
+    expect(cx("foo", false, "bar")).toBe("foo bar");
+    expect(cx("foo", "bar")).toBe("foo bar");
+    expect(cx("foo", false)).toBe("foo");
+  });
+  it("should de-dupe classses", () => {
+    expect(cx("mt-1", "mt-2")).toBe("mt-2");
+    expect(cx("bg-b-1 bg-b-1 bg-b-2 bg-b-1")).toBe("bg-b-1");
+    expect(cx("text-xxs text-3xs")).toBe("text-3xs");
+  });
+  it("should handle conditional classes", () => {
+    const isActive = true;
+    const isDisabled = false;
+    expect(cx("base", isActive && "active", isDisabled && "disabled")).toBe("base active");
+  });
+  it("should handle tailwind conflicts", () => {
+    expect(cx("p-4 px-6", "px-2")).toBe("p-4 px-2");
+    expect(cx("text-blue text-xl", "text-red")).toBe("text-xl text-red");
+  });
+  it("should handle arrays of classes", () => {
+    expect(cx(["foo", "bar"], "baz")).toBe("foo bar baz");
+    expect(cx(["foo", null, void 0], ["bar", false])).toBe("foo bar");
+  });
+});
+describe("cva utility", () => {
+  it("should create variant classes correctly", () => {
+    const button = cva({
+      base: "px-4 py-2 rounded",
+      variants: {
+        intent: {
+          primary: "bg-blue text-white",
+          secondary: "bg-gray text-black"
+        },
+        size: {
+          sm: "text-sm",
+          lg: "text-lg"
+        }
+      },
+      defaultVariants: {
+        intent: "primary",
+        size: "sm"
+      }
+    });
+    expect(button()).toBe("px-4 py-2 rounded bg-blue text-white text-sm");
+    expect(button({ intent: "secondary" })).toBe("px-4 py-2 rounded bg-gray text-black text-sm");
+    expect(button({ size: "lg" })).toBe("px-4 py-2 rounded bg-blue text-white text-lg");
+  });
+  it("should handle compound variants", () => {
+    const button = cva({
+      base: "base-style",
+      variants: {
+        intent: {
+          primary: "primary-style",
+          secondary: "secondary-style"
+        },
+        size: {
+          small: "small-style",
+          large: "large-style"
+        }
+      },
+      compoundVariants: [
+        {
+          intent: "primary",
+          size: "small",
+          class: "primary-small-style"
+        }
+      ]
+    });
+    expect(button({ intent: "primary", size: "small" })).toBe(
+      "base-style primary-style small-style primary-small-style"
+    );
+  });
+  it("should handle undefined variant values", () => {
+    const button = cva({
+      base: "base-style",
+      variants: {
+        intent: {
+          primary: "primary-style",
+          secondary: "secondary-style"
+        }
+      }
+    });
+    expect(button({ intent: void 0 })).toBe("base-style");
+  });
+});
+//# sourceMappingURL=cva.test.js.map

package/dist/useBindCx/cva.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBindCx/cva.test.ts"],
+  "sourcesContent": ["import { describe, expect, it } from 'vitest'\n\nimport { cva, cx } from './cva'\n\ndescribe('cx utility', () => {\n  it('should merge classnames correctly', () => {\n    expect(cx('foo', 'bar')).toBe('foo bar')\n    expect(cx('foo', undefined, 'bar')).toBe('foo bar')\n    expect(cx('foo', null, 'bar')).toBe('foo bar')\n    expect(cx('foo', false, 'bar')).toBe('foo bar')\n    expect(cx('foo', true && 'bar')).toBe('foo bar')\n    expect(cx('foo', false && 'bar')).toBe('foo')\n  })\n\n  it('should de-dupe classses', () => {\n    expect(cx('mt-1', 'mt-2')).toBe('mt-2')\n    expect(cx('bg-b-1 bg-b-1 bg-b-2 bg-b-1')).toBe('bg-b-1')\n    expect(cx('text-xxs text-3xs')).toBe('text-3xs')\n  })\n\n  it('should handle conditional classes', () => {\n    const isActive = true\n    const isDisabled = false\n    expect(cx('base', isActive && 'active', isDisabled && 'disabled')).toBe('base active')\n  })\n\n  it('should handle tailwind conflicts', () => {\n    expect(cx('p-4 px-6', 'px-2')).toBe('p-4 px-2')\n    expect(cx('text-blue text-xl', 'text-red')).toBe('text-xl text-red')\n  })\n\n  it('should handle arrays of classes', () => {\n    expect(cx(['foo', 'bar'], 'baz')).toBe('foo bar baz')\n    expect(cx(['foo', null, undefined], ['bar', false])).toBe('foo bar')\n  })\n})\n\ndescribe('cva utility', () => {\n  it('should create variant classes correctly', () => {\n    const button = cva({\n      base: 'px-4 py-2 rounded',\n      variants: {\n        intent: {\n          primary: 'bg-blue text-white',\n          secondary: 'bg-gray text-black',\n        },\n        size: {\n          sm: 'text-sm',\n          lg: 'text-lg',\n        },\n      },\n      defaultVariants: {\n        intent: 'primary',\n        size: 'sm',\n      },\n    })\n\n    expect(button()).toBe('px-4 py-2 rounded bg-blue text-white text-sm')\n    expect(button({ intent: 'secondary' })).toBe('px-4 py-2 rounded bg-gray text-black text-sm')\n    expect(button({ size: 'lg' })).toBe('px-4 py-2 rounded bg-blue text-white text-lg')\n  })\n\n  it('should handle compound variants', () => {\n    const button = cva({\n      base: 'base-style',\n      variants: {\n        intent: {\n          primary: 'primary-style',\n          secondary: 'secondary-style',\n        },\n        size: {\n          small: 'small-style',\n          large: 'large-style',\n        },\n      },\n      compoundVariants: [\n        {\n          intent: 'primary',\n          size: 'small',\n          class: 'primary-small-style',\n        },\n      ],\n    })\n\n    expect(button({ intent: 'primary', size: 'small' })).toBe(\n      'base-style primary-style small-style primary-small-style',\n    )\n  })\n\n  it('should handle undefined variant values', () => {\n    const button = cva({\n      base: 'base-style',\n      variants: {\n        intent: {\n          primary: 'primary-style',\n          secondary: 'secondary-style',\n        },\n      },\n    })\n\n    expect(button({ intent: undefined })).toBe('base-style')\n  })\n})\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/useBindCx/index.js

@@ -1,9 +1,10 @@
-import { useBindCx as r } from "./useBindCx.js";
-import { compose as c, cva as m, cx as p, tw as t } from "./cva.js";
+import { useBindCx } from "./useBindCx.js";
+import { cva, cx, compose, tw } from "./cva.js";
 export {
-  c as compose,
-  m as cva,
-  p as cx,
-  t as tw,
-  r as useBindCx
+  compose,
+  cva,
+  cx,
+  tw,
+  useBindCx
 };
+//# sourceMappingURL=index.js.map

package/dist/useBindCx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBindCx/index.ts"],
+  "sourcesContent": ["export { useBindCx } from './useBindCx'\nexport { cva, cx, compose, tw } from './cva'\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,KAAK,IAAI,SAAS,UAAU;",
+  "names": []
+}

package/dist/useBindCx/useBindCx.js

@@ -1,18 +1,19 @@
-import { useAttrs as l, computed as r } from "vue";
-import { cx as e } from "./cva.js";
-function d() {
-  const c = l(), t = r(() => {
-    const { class: s, ...a } = c;
-    return { class: s || "", rest: a };
+import { computed, useAttrs } from "vue";
+import { cx } from "./cva.js";
+function useBindCx() {
+  const attrs = useAttrs();
+  const destructured = computed(() => {
+    const { class: className, ...rest } = attrs;
+    return { class: className || "", rest };
   });
-  function n(...s) {
+  function bindCx(...args) {
     return {
-      class: e(...s, t.value.class),
-      ...t.value.rest
+      class: cx(...args, destructured.value.class),
+      ...destructured.value.rest
     };
   }
-  function u(...s) {
-    return { class: e(...s, t.value.class) };
+  function bindClass(...args) {
+    return { class: cx(...args, destructured.value.class) };
   }
   return {
     /**
@@ -29,17 +30,18 @@ function d() {
      *   <div v-bind="cx(...)">...</div>
      * </template>
      */
-    cx: n,
+    cx: bindCx,
     /**
      * Provides a wrapper around the `cx` function that merges the
      * component's class attribute with the provided classes and but **does
      * not** bind the remaining attributes
      */
-    classCx: u,
+    classCx: bindClass,
     /** The remaining attributes that are not class attributes */
-    otherAttrs: r(() => t.value.rest)
+    otherAttrs: computed(() => destructured.value.rest)
   };
 }
 export {
-  d as useBindCx
+  useBindCx
 };
+//# sourceMappingURL=useBindCx.js.map

package/dist/useBindCx/useBindCx.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBindCx/useBindCx.ts"],
+  "sourcesContent": ["import type { CXOptions } from 'cva'\nimport { computed, useAttrs } from 'vue'\n\nimport { cx } from './cva'\n\n/**\n * Provides a wrapper around the `cx` function that merges the\n * component's class attribute with the provided classes and binds the\n * remaining attributes\n *\n * @see https://beta.cva.style/api-reference#cx\n *\n * @example\n * <script setup>\n * import { useBindCx, cva } from '@scalar/components'\n *\n * defineProps<{ active?: boolean }>()\n *\n * // Important: disable inheritance of attributes\n * defineOptions({ inheritAttrs: false })\n *\n * const { cx } = useBindCx()\n *\n * const variants = cva({\n *   base: 'border rounded p-2 bg-b-1',\n *   variants: { active: { true: 'bg-b-2' } },\n * })\n * </script>\n * <template>\n *   <div v-bind=\"cx(variants({ active }))\">MockComponent</div>\n * </template>\n */\nexport function useBindCx() {\n  const attrs = useAttrs()\n\n  const destructured = computed(() => {\n    const { class: className, ...rest } = attrs\n    return { class: className || '', rest }\n  })\n\n  function bindCx(...args: CXOptions): {\n    /** The merged class attribute */\n    class: string\n    /** The remaining attributes */\n    [key: string]: any\n  } {\n    return {\n      class: cx(...args, destructured.value.class),\n      ...destructured.value.rest,\n    }\n  }\n\n  function bindClass(...args: CXOptions): {\n    /** The merged class attribute */\n    class: string\n  } {\n    return { class: cx(...args, destructured.value.class) }\n  }\n\n  return {\n    /**\n     * Provides a wrapper around the `cx` function that merges the\n     * component's class attribute with the provided classes and binds the\n     * remaining attributes\n     *\n     * @example\n     * <script setup>\n     * ...\n     * const { cx } = useBindCx()\n     * </script>\n     * <template>\n     *   <div v-bind=\"cx(...)\">...</div>\n     * </template>\n     */\n    cx: bindCx,\n    /**\n     * Provides a wrapper around the `cx` function that merges the\n     * component's class attribute with the provided classes and but **does\n     * not** bind the remaining attributes\n     */\n    classCx: bindClass,\n    /** The remaining attributes that are not class attributes */\n    otherAttrs: computed(() => destructured.value.rest),\n  }\n}\n"],
+  "mappings": "AACA,SAAS,UAAU,gBAAgB;AAEnC,SAAS,UAAU;AA6BZ,SAAS,YAAY;AAC1B,QAAM,QAAQ,SAAS;AAEvB,QAAM,eAAe,SAAS,MAAM;AAClC,UAAM,EAAE,OAAO,WAAW,GAAG,KAAK,IAAI;AACtC,WAAO,EAAE,OAAO,aAAa,IAAI,KAAK;AAAA,EACxC,CAAC;AAED,WAAS,UAAU,MAKjB;AACA,WAAO;AAAA,MACL,OAAO,GAAG,GAAG,MAAM,aAAa,MAAM,KAAK;AAAA,MAC3C,GAAG,aAAa,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,WAAS,aAAa,MAGpB;AACA,WAAO,EAAE,OAAO,GAAG,GAAG,MAAM,aAAa,MAAM,KAAK,EAAE;AAAA,EACxD;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeL,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMJ,SAAS;AAAA;AAAA,IAET,YAAY,SAAS,MAAM,aAAa,MAAM,IAAI;AAAA,EACpD;AACF;",
+  "names": []
+}

package/dist/useBindCx/useBindCx.test.js

@@ -0,0 +1,173 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { defineComponent } from "vue";
+import { cva } from "./cva.js";
+import { useBindCx } from "./useBindCx.js";
+describe("useBindCx", () => {
+  const variants = cva({
+    base: "bg-base",
+    variants: {
+      active: { true: "bg-active" }
+    }
+  });
+  const TestComponent = defineComponent({
+    props: {
+      active: Boolean
+    },
+    inheritAttrs: false,
+    setup() {
+      const { cx } = useBindCx();
+      return { cx, variants };
+    },
+    template: '<div v-bind="cx(variants({ active }))">Test</div>'
+  });
+  it("should merge base classes correctly", () => {
+    const wrapper = mount(TestComponent);
+    expect(wrapper.attributes("class")).toBe("bg-base");
+  });
+  it("should apply variant tailwind classes", () => {
+    const wrapper = mount(TestComponent, {
+      props: { active: true }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-active");
+  });
+  it("should merge external classes with internal classes", () => {
+    const wrapper = mount(TestComponent, {
+      attrs: { class: "external-class" }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-base external-class");
+  });
+  it("should be reactive to prop changes", async () => {
+    const wrapper = mount(TestComponent, {
+      props: { active: false },
+      attrs: { class: "external-class" }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-base external-class");
+    await wrapper.setProps({ active: true });
+    expect(wrapper.attributes("class")).toBe("bg-active external-class");
+  });
+  it("should be reactive to attribute changes", async () => {
+    const WrapperComponent = defineComponent({
+      props: { c: { type: String, default: "" } },
+      components: { TestComponent },
+      template: '<TestComponent :class="c" />'
+    });
+    const wrapper = mount(WrapperComponent, {
+      props: { c: "external-class" }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-base external-class");
+    await wrapper.setProps({ c: "updated-class" });
+    expect(wrapper.attributes("class")).toBe("bg-base updated-class");
+  });
+  it("should handle multiple class combinations", () => {
+    const wrapper = mount(TestComponent, {
+      props: { active: true },
+      attrs: { class: "external-class another-class" }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-active external-class another-class");
+  });
+  it("should apply external tailwind classes", () => {
+    const wrapper = mount(TestComponent, {
+      attrs: { class: "bg-external" }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-external");
+  });
+  it("should apply classes in arrays", () => {
+    const wrapper = mount(TestComponent, {
+      attrs: { class: ["external-class", "another-class"] }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-base external-class another-class");
+  });
+  it("should apply classes in objects", () => {
+    const wrapper = mount(TestComponent, {
+      attrs: { class: { "truthy-class": true, "falsy-class": false } }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-base truthy-class");
+  });
+  it("should pass through other attributes", () => {
+    const wrapper = mount(TestComponent, {
+      attrs: { "data-testid": "test", "aria-label": "test label" }
+    });
+    expect(wrapper.attributes("class")).toBe("bg-base");
+    expect(wrapper.attributes("data-testid")).toBe("test");
+    expect(wrapper.attributes("aria-label")).toBe("test label");
+  });
+  it("should merge classes with classCx without other attributes", () => {
+    const ClassCxComponent = defineComponent({
+      props: { active: Boolean },
+      inheritAttrs: false,
+      setup() {
+        const { classCx } = useBindCx();
+        return { classCx };
+      },
+      template: `<div v-bind="classCx('internal-class')">Test</div>`
+    });
+    const wrapper = mount(ClassCxComponent, {
+      props: { active: true },
+      attrs: { "data-testid": "test", class: "external-class" }
+    });
+    expect(wrapper.attributes("class")).toBe("internal-class external-class");
+    expect(wrapper.attributes("data-testid")).toBeUndefined();
+  });
+  it("should provide other attributes via otherAttrs", () => {
+    const OtherAttrsComponent = defineComponent({
+      inheritAttrs: false,
+      setup() {
+        const { otherAttrs } = useBindCx();
+        return { otherAttrs };
+      },
+      template: '<div v-bind="otherAttrs">Test</div>'
+    });
+    const wrapper = mount(OtherAttrsComponent, {
+      attrs: {
+        class: "should-not-appear",
+        "data-testid": "test",
+        "aria-label": "test label"
+      }
+    });
+    expect(wrapper.attributes("class")).toBeUndefined();
+    expect(wrapper.attributes("data-testid")).toBe("test");
+    expect(wrapper.attributes("aria-label")).toBe("test label");
+  });
+  it("should handle reactive attribute changes with classCx and otherAttrs", async () => {
+    const WrapperComponent = defineComponent({
+      props: {
+        className: { type: String, default: "" },
+        testId: { type: String, default: "" }
+      },
+      components: {
+        InnerComponent: defineComponent({
+          inheritAttrs: false,
+          setup() {
+            const { classCx, otherAttrs } = useBindCx();
+            return { classCx, otherAttrs, variants };
+          },
+          template: `
+            <div>
+              <div data-test="class" v-bind="classCx(variants({}))">Class</div>
+              <div data-test="attrs" v-bind="otherAttrs">Attrs</div>
+            </div>
+          `
+        })
+      },
+      template: '<InnerComponent :class="className" :data-testid="testId" />'
+    });
+    const wrapper = mount(WrapperComponent, {
+      props: {
+        className: "initial-class",
+        testId: "initial-id"
+      }
+    });
+    const classDiv = wrapper.find('[data-test="class"]');
+    const attrsDiv = wrapper.find('[data-test="attrs"]');
+    expect(classDiv.attributes("class")).toBe("bg-base initial-class");
+    expect(attrsDiv.attributes("data-testid")).toBe("initial-id");
+    await wrapper.setProps({
+      className: "updated-class",
+      testId: "updated-id"
+    });
+    expect(classDiv.attributes("class")).toBe("bg-base updated-class");
+    expect(attrsDiv.attributes("data-testid")).toBe("updated-id");
+  });
+});
+//# sourceMappingURL=useBindCx.test.js.map

package/dist/useBindCx/useBindCx.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBindCx/useBindCx.test.ts"],
+  "sourcesContent": ["import { mount } from '@vue/test-utils'\nimport { describe, expect, it } from 'vitest'\nimport { defineComponent } from 'vue'\n\nimport { cva } from './cva'\nimport { useBindCx } from './useBindCx'\n\ndescribe('useBindCx', () => {\n  const variants = cva({\n    base: 'bg-base',\n    variants: {\n      active: { true: 'bg-active' },\n    },\n  })\n\n  const TestComponent = defineComponent({\n    props: {\n      active: Boolean,\n    },\n    inheritAttrs: false,\n    setup() {\n      const { cx } = useBindCx()\n      return { cx, variants }\n    },\n    template: '<div v-bind=\"cx(variants({ active }))\">Test</div>',\n  })\n\n  it('should merge base classes correctly', () => {\n    const wrapper = mount(TestComponent)\n    expect(wrapper.attributes('class')).toBe('bg-base')\n  })\n\n  it('should apply variant tailwind classes', () => {\n    const wrapper = mount(TestComponent, {\n      props: { active: true },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-active')\n  })\n\n  it('should merge external classes with internal classes', () => {\n    const wrapper = mount(TestComponent, {\n      attrs: { class: 'external-class' },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-base external-class')\n  })\n\n  it('should be reactive to prop changes', async () => {\n    const wrapper = mount(TestComponent, {\n      props: { active: false },\n      attrs: { class: 'external-class' },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-base external-class')\n\n    await wrapper.setProps({ active: true })\n    expect(wrapper.attributes('class')).toBe('bg-active external-class')\n  })\n\n  it('should be reactive to attribute changes', async () => {\n    const WrapperComponent = defineComponent({\n      props: { c: { type: String, default: '' } },\n      components: { TestComponent },\n      template: '<TestComponent :class=\"c\" />',\n    })\n\n    const wrapper = mount(WrapperComponent, {\n      props: { c: 'external-class' },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-base external-class')\n\n    await wrapper.setProps({ c: 'updated-class' })\n    expect(wrapper.attributes('class')).toBe('bg-base updated-class')\n  })\n\n  it('should handle multiple class combinations', () => {\n    const wrapper = mount(TestComponent, {\n      props: { active: true },\n      attrs: { class: 'external-class another-class' },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-active external-class another-class')\n  })\n\n  it('should apply external tailwind classes', () => {\n    const wrapper = mount(TestComponent, {\n      attrs: { class: 'bg-external' },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-external')\n  })\n\n  it('should apply classes in arrays', () => {\n    const wrapper = mount(TestComponent, {\n      attrs: { class: ['external-class', 'another-class'] },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-base external-class another-class')\n  })\n\n  it('should apply classes in objects', () => {\n    const wrapper = mount(TestComponent, {\n      attrs: { class: { 'truthy-class': true, 'falsy-class': false } },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-base truthy-class')\n  })\n\n  it('should pass through other attributes', () => {\n    const wrapper = mount(TestComponent, {\n      attrs: { 'data-testid': 'test', 'aria-label': 'test label' },\n    })\n    expect(wrapper.attributes('class')).toBe('bg-base')\n    expect(wrapper.attributes('data-testid')).toBe('test')\n    expect(wrapper.attributes('aria-label')).toBe('test label')\n  })\n\n  it('should merge classes with classCx without other attributes', () => {\n    const ClassCxComponent = defineComponent({\n      props: { active: Boolean },\n      inheritAttrs: false,\n      setup() {\n        const { classCx } = useBindCx()\n        return { classCx }\n      },\n      template: '<div v-bind=\"classCx(\\'internal-class\\')\">Test</div>',\n    })\n\n    const wrapper = mount(ClassCxComponent, {\n      props: { active: true },\n      attrs: { 'data-testid': 'test', class: 'external-class' },\n    })\n\n    expect(wrapper.attributes('class')).toBe('internal-class external-class')\n    expect(wrapper.attributes('data-testid')).toBeUndefined()\n  })\n\n  it('should provide other attributes via otherAttrs', () => {\n    const OtherAttrsComponent = defineComponent({\n      inheritAttrs: false,\n      setup() {\n        const { otherAttrs } = useBindCx()\n        return { otherAttrs }\n      },\n      template: '<div v-bind=\"otherAttrs\">Test</div>',\n    })\n\n    const wrapper = mount(OtherAttrsComponent, {\n      attrs: {\n        class: 'should-not-appear',\n        'data-testid': 'test',\n        'aria-label': 'test label',\n      },\n    })\n\n    expect(wrapper.attributes('class')).toBeUndefined()\n    expect(wrapper.attributes('data-testid')).toBe('test')\n    expect(wrapper.attributes('aria-label')).toBe('test label')\n  })\n\n  it('should handle reactive attribute changes with classCx and otherAttrs', async () => {\n    const WrapperComponent = defineComponent({\n      props: {\n        className: { type: String, default: '' },\n        testId: { type: String, default: '' },\n      },\n      components: {\n        InnerComponent: defineComponent({\n          inheritAttrs: false,\n          setup() {\n            const { classCx, otherAttrs } = useBindCx()\n            return { classCx, otherAttrs, variants }\n          },\n          template: `\n            <div>\n              <div data-test=\"class\" v-bind=\"classCx(variants({}))\">Class</div>\n              <div data-test=\"attrs\" v-bind=\"otherAttrs\">Attrs</div>\n            </div>\n          `,\n        }),\n      },\n      template: '<InnerComponent :class=\"className\" :data-testid=\"testId\" />',\n    })\n\n    const wrapper = mount(WrapperComponent, {\n      props: {\n        className: 'initial-class',\n        testId: 'initial-id',\n      },\n    })\n\n    const classDiv = wrapper.find('[data-test=\"class\"]')\n    const attrsDiv = wrapper.find('[data-test=\"attrs\"]')\n\n    expect(classDiv.attributes('class')).toBe('bg-base initial-class')\n    expect(attrsDiv.attributes('data-testid')).toBe('initial-id')\n\n    await wrapper.setProps({\n      className: 'updated-class',\n      testId: 'updated-id',\n    })\n\n    expect(classDiv.attributes('class')).toBe('bg-base updated-class')\n    expect(attrsDiv.attributes('data-testid')).toBe('updated-id')\n  })\n})\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/useBreakpoints/index.js

@@ -1,4 +1,2 @@
-import { useBreakpoints as r } from "./useBreakpoints.js";
-export {
-  r as useBreakpoints
-};
+export * from "./useBreakpoints.js";
+//# sourceMappingURL=index.js.map

package/dist/useBreakpoints/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBreakpoints/index.ts"],
+  "sourcesContent": ["export * from './useBreakpoints'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/useBreakpoints/useBreakpoints.js

@@ -1,26 +1,29 @@
-import o from "@scalar/themes/tailwind";
-import { useMediaQuery as i } from "@vueuse/core";
-import { computed as m, unref as c } from "vue";
-function a() {
-  const t = o.theme.screens, s = Object.fromEntries(
-    Object.entries(t).map(([r, e]) => [
-      r,
-      i(typeof e == "string" ? `(min-width: ${e})` : e.raw)
+import preset from "@scalar/themes/tailwind";
+import { useMediaQuery } from "@vueuse/core";
+import { computed, unref } from "vue";
+function useBreakpoints() {
+  const screens = preset.theme.screens;
+  const mediaQueries = Object.fromEntries(
+    Object.entries(screens).map(([breakpoint, value]) => [
+      breakpoint,
+      useMediaQuery(typeof value === "string" ? `(min-width: ${value})` : value.raw)
     ])
-  ), n = m(
+  );
+  const breakpoints = computed(
     () => Object.fromEntries(
-      Object.entries(s).map(([r, e]) => [r, c(e)])
+      Object.entries(mediaQueries).map(([breakpoint, queryRef]) => [breakpoint, unref(queryRef)])
     )
   );
   return {
     /** The screen sizes defined in the preset */
-    screens: t,
+    screens,
     /** Reactive media queries for each of the screen sizes */
-    mediaQueries: s,
+    mediaQueries,
     /** The breakpoints as reactive media queries */
-    breakpoints: n
+    breakpoints
   };
 }
 export {
-  a as useBreakpoints
+  useBreakpoints
 };
+//# sourceMappingURL=useBreakpoints.js.map

package/dist/useBreakpoints/useBreakpoints.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBreakpoints/useBreakpoints.ts"],
+  "sourcesContent": ["import preset from '@scalar/themes/tailwind'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type Ref, computed, unref } from 'vue'\n\ntype Screen = keyof typeof preset.theme.screens\n\n/**\n * Exposes Tailwind CSS breakpoints as reactive media queries\n *\n * **Warning:** This hook is not a replacement for Tailwind CSS breakpoints. Using breakpoints in Javascript can cause issues with Server Side Rendering (SSR) and the Tailwind CSS breakpoints should be used when possible.\n */\nexport function useBreakpoints() {\n  const screens = preset.theme.screens\n\n  const mediaQueries = Object.fromEntries(\n    Object.entries(screens).map(([breakpoint, value]) => [\n      breakpoint,\n      useMediaQuery(typeof value === 'string' ? `(min-width: ${value})` : value.raw),\n    ]),\n  ) as Record<Screen, Ref<boolean>>\n\n  // We make the breakpoints a computed object so that we can use them in templates as `breakpoints.x` instead of `breakpoints.x.value`\n  const breakpoints = computed(\n    () =>\n      Object.fromEntries(\n        Object.entries(mediaQueries).map(([breakpoint, queryRef]) => [breakpoint, unref(queryRef)]),\n      ) as Record<Screen, boolean>,\n  )\n\n  return {\n    /** The screen sizes defined in the preset */\n    screens,\n    /** Reactive media queries for each of the screen sizes */\n    mediaQueries,\n    /** The breakpoints as reactive media queries */\n    breakpoints,\n  }\n}\n"],
+  "mappings": "AAAA,OAAO,YAAY;AACnB,SAAS,qBAAqB;AAC9B,SAAmB,UAAU,aAAa;AASnC,SAAS,iBAAiB;AAC/B,QAAM,UAAU,OAAO,MAAM;AAE7B,QAAM,eAAe,OAAO;AAAA,IAC1B,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC,CAAC,YAAY,KAAK,MAAM;AAAA,MACnD;AAAA,MACA,cAAc,OAAO,UAAU,WAAW,eAAe,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/E,CAAC;AAAA,EACH;AAGA,QAAM,cAAc;AAAA,IAClB,MACE,OAAO;AAAA,MACL,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,YAAY,QAAQ,MAAM,CAAC,YAAY,MAAM,QAAQ,CAAC,CAAC;AAAA,IAC5F;AAAA,EACJ;AAEA,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/useBreakpoints/useBreakpoints.test.js

@@ -0,0 +1,49 @@
+import preset from "@scalar/themes/tailwind";
+import { useMediaQuery } from "@vueuse/core";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { useBreakpoints } from "./useBreakpoints.js";
+const screens = preset.theme.screens;
+vi.mock("@vueuse/core", () => ({
+  useMediaQuery: vi.fn()
+}));
+describe("useBreakpoints", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+  it("should expose the screen sizes", () => {
+    const { screens: exposedScreens } = useBreakpoints();
+    expect(exposedScreens).toEqual(screens);
+  });
+  it("should expose media queries for a given screen size", () => {
+    vi.mocked(useMediaQuery).mockImplementation((query) => ref(query === `(min-width: ${screens.md})`));
+    const { mediaQueries } = useBreakpoints();
+    expect(mediaQueries.sm.value).toEqual(false);
+    expect(mediaQueries.md.value).toEqual(true);
+  });
+  it("should update breakpoints when the media query changes", () => {
+    const mdQuery = ref(false);
+    vi.mocked(useMediaQuery).mockImplementation(
+      (query) => query === `(min-width: ${screens.md})` ? mdQuery : ref(false)
+    );
+    const { breakpoints } = useBreakpoints();
+    expect(breakpoints.value.md).toEqual(false);
+    mdQuery.value = true;
+    expect(breakpoints.value.md).toEqual(true);
+  });
+  it("works in SSG environment without window", () => {
+    const originalWindow = global.window;
+    delete global.window;
+    vi.mocked(useMediaQuery).mockImplementation(() => ref(false));
+    const { screens: exposedScreens, mediaQueries, breakpoints } = useBreakpoints();
+    expect(exposedScreens).toEqual(screens);
+    Object.values(mediaQueries).forEach((query) => {
+      expect(query.value).toBe(false);
+    });
+    Object.values(breakpoints.value).forEach((value) => {
+      expect(value).toBe(false);
+    });
+    global.window = originalWindow;
+  });
+});
+//# sourceMappingURL=useBreakpoints.test.js.map

package/dist/useBreakpoints/useBreakpoints.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBreakpoints/useBreakpoints.test.ts"],
+  "sourcesContent": ["import preset from '@scalar/themes/tailwind'\nimport { useMediaQuery } from '@vueuse/core'\nimport { beforeEach, describe, expect, it, vi } from 'vitest'\nimport { ref } from 'vue'\n\nimport { useBreakpoints } from './useBreakpoints'\n\nconst screens = preset.theme.screens\n\nvi.mock('@vueuse/core', () => ({\n  useMediaQuery: vi.fn(),\n}))\n\ndescribe('useBreakpoints', () => {\n  beforeEach(() => {\n    vi.resetAllMocks()\n  })\n\n  it('should expose the screen sizes', () => {\n    const { screens: exposedScreens } = useBreakpoints()\n    expect(exposedScreens).toEqual(screens)\n  })\n\n  it('should expose media queries for a given screen size', () => {\n    vi.mocked(useMediaQuery).mockImplementation((query) => ref(query === `(min-width: ${screens.md})`))\n\n    const { mediaQueries } = useBreakpoints()\n    expect(mediaQueries.sm.value).toEqual(false)\n    expect(mediaQueries.md.value).toEqual(true)\n  })\n\n  it('should update breakpoints when the media query changes', () => {\n    const mdQuery = ref(false)\n    vi.mocked(useMediaQuery).mockImplementation((query) =>\n      query === `(min-width: ${screens.md})` ? mdQuery : ref(false),\n    )\n\n    const { breakpoints } = useBreakpoints()\n\n    expect(breakpoints.value.md).toEqual(false)\n\n    mdQuery.value = true\n\n    expect(breakpoints.value.md).toEqual(true)\n  })\n\n  it('works in SSG environment without window', () => {\n    const originalWindow = global.window\n\n    // Mock SSG environment by removing window\n    // @ts-expect-error\n    delete global.window\n\n    // Mock useMediaQuery to return false since there\u2019s no window\n    vi.mocked(useMediaQuery).mockImplementation(() => ref(false))\n\n    const { screens: exposedScreens, mediaQueries, breakpoints } = useBreakpoints()\n\n    // Screens should still be exposed since they\u2019re static\n    expect(exposedScreens).toEqual(screens)\n\n    // Media queries should all be false without window\n    Object.values(mediaQueries).forEach((query) => {\n      expect(query.value).toBe(false)\n    })\n\n    // Breakpoints should all be false without window\n    Object.values(breakpoints.value).forEach((value) => {\n      expect(value).toBe(false)\n    })\n\n    // Restore window\n    global.window = originalWindow\n  })\n})\n"],
+  "mappings": "AAAA,OAAO,YAAY;AACnB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,UAAU,QAAQ,IAAI,UAAU;AACrD,SAAS,WAAW;AAEpB,SAAS,sBAAsB;AAE/B,MAAM,UAAU,OAAO,MAAM;AAE7B,GAAG,KAAK,gBAAgB,OAAO;AAAA,EAC7B,eAAe,GAAG,GAAG;AACvB,EAAE;AAEF,SAAS,kBAAkB,MAAM;AAC/B,aAAW,MAAM;AACf,OAAG,cAAc;AAAA,EACnB,CAAC;AAED,KAAG,kCAAkC,MAAM;AACzC,UAAM,EAAE,SAAS,eAAe,IAAI,eAAe;AACnD,WAAO,cAAc,EAAE,QAAQ,OAAO;AAAA,EACxC,CAAC;AAED,KAAG,uDAAuD,MAAM;AAC9D,OAAG,OAAO,aAAa,EAAE,mBAAmB,CAAC,UAAU,IAAI,UAAU,eAAe,QAAQ,EAAE,GAAG,CAAC;AAElG,UAAM,EAAE,aAAa,IAAI,eAAe;AACxC,WAAO,aAAa,GAAG,KAAK,EAAE,QAAQ,KAAK;AAC3C,WAAO,aAAa,GAAG,KAAK,EAAE,QAAQ,IAAI;AAAA,EAC5C,CAAC;AAED,KAAG,0DAA0D,MAAM;AACjE,UAAM,UAAU,IAAI,KAAK;AACzB,OAAG,OAAO,aAAa,EAAE;AAAA,MAAmB,CAAC,UAC3C,UAAU,eAAe,QAAQ,EAAE,MAAM,UAAU,IAAI,KAAK;AAAA,IAC9D;AAEA,UAAM,EAAE,YAAY,IAAI,eAAe;AAEvC,WAAO,YAAY,MAAM,EAAE,EAAE,QAAQ,KAAK;AAE1C,YAAQ,QAAQ;AAEhB,WAAO,YAAY,MAAM,EAAE,EAAE,QAAQ,IAAI;AAAA,EAC3C,CAAC;AAED,KAAG,2CAA2C,MAAM;AAClD,UAAM,iBAAiB,OAAO;AAI9B,WAAO,OAAO;AAGd,OAAG,OAAO,aAAa,EAAE,mBAAmB,MAAM,IAAI,KAAK,CAAC;AAE5D,UAAM,EAAE,SAAS,gBAAgB,cAAc,YAAY,IAAI,eAAe;AAG9E,WAAO,cAAc,EAAE,QAAQ,OAAO;AAGtC,WAAO,OAAO,YAAY,EAAE,QAAQ,CAAC,UAAU;AAC7C,aAAO,MAAM,KAAK,EAAE,KAAK,KAAK;AAAA,IAChC,CAAC;AAGD,WAAO,OAAO,YAAY,KAAK,EAAE,QAAQ,CAAC,UAAU;AAClD,aAAO,KAAK,EAAE,KAAK,KAAK;AAAA,IAC1B,CAAC;AAGD,WAAO,SAAS;AAAA,EAClB,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/useClipboard/index.js

@@ -1,4 +1,2 @@
-import { useClipboard as e } from "./useClipboard.js";
-export {
-  e as useClipboard
-};
+export * from "./useClipboard.js";
+//# sourceMappingURL=index.js.map

package/dist/useClipboard/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useClipboard/index.ts"],
+  "sourcesContent": ["export * from './useClipboard'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/useClipboard/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/useClipboard/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}