@scalar/use-hooks 0.2.4 → 0.3.0

package/dist/useBindCx/index.d.ts

@@ -1,3 +1,3 @@
+export { compose, cva, cx, tw } from './cva.js';
 export { useBindCx } from './useBindCx.js';
-export { cva, cx, compose, tw } from './cva.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useBindCx/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useBindCx/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/useBindCx/index.js

@@ -1,5 +1,5 @@
+import { compose, cva, cx, tw } from "./cva.js";
 import { useBindCx } from "./useBindCx.js";
-import { cva, cx, compose, tw } from "./cva.js";
 export {
   compose,
   cva,

package/dist/useBindCx/index.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["export { compose, cva, cx, tw } from './cva'\nexport { useBindCx } from './useBindCx'\n"],
+  "mappings": "AAAA,SAAS,SAAS,KAAK,IAAI,UAAU;AACrC,SAAS,iBAAiB;",
   "names": []
 }

package/dist/useBindCx/useBindCx.d.ts

@@ -1,4 +1,5 @@
 import type { CXOptions } from 'cva';
+import { type StyleValue } from 'vue';
 /**
  * Provides a wrapper around the `cx` function that merges the
  * component's class attribute with the provided classes and binds the
@@ -33,6 +34,7 @@ export declare function useBindCx(): {
      * remaining attributes
      *
      * @example
+     * ```html
      * <script setup>
      * ...
      * const { cx } = useBindCx()
@@ -40,6 +42,7 @@ export declare function useBindCx(): {
      * <template>
      *   <div v-bind="cx(...)">...</div>
      * </template>
+     * ```
      */
     cx: (...args: CXOptions) => {
         /** The merged class attribute */
@@ -49,16 +52,59 @@ export declare function useBindCx(): {
     };
     /**
      * 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
+     * component's class attribute with the provided classes and binds the
+     * style attribute  but **does not** bind any other attributes.
+     *
+     * Typically used in conjunction with `otherAttrs` to apply the stylistic
+     * attributes to a styled wrapper element, but apply the remaining
+     * attributes to an internal semantic element like an `<input>`.
+     *
+     * @example
+     * ```html
+     * <script setup>
+     * ...
+     * const { stylingAttrsCx, otherAttrs } = useBindCx()
+     * </script>
+     * <template>
+     *   <!-- Bind the class and style attributes to a wrapper element -->
+     *   <div v-bind="stylingAttrsCx(...)">
+     *     ...
+     *     <!-- Bind the other attributes to a semantic internal element -->
+     *     <input v-bind="otherAttrs" />
+     *   </div>
+     * </template>
+     * ```
      */
-    classCx: (...args: CXOptions) => {
+    stylingAttrsCx: (...args: CXOptions) => {
         /** The merged class attribute */
         class: string;
+        style: StyleValue;
     };
-    /** The remaining attributes that are not class attributes */
+    /**
+     * The remaining attributes that **are not** the class or style attributes
+     * of the component.
+     *
+     * Typically used in conjunction with `stylingAttrsCx` to apply the stylistic
+     * attributes to a styled wrapper element, but apply the remaining
+     * attributes to an internal semantic element like an `<input>`.
+     *
+     * @example
+     * ```html
+     * <script setup>
+     * ...
+     * const { stylingAttrsCx, otherAttrs } = useBindCx()
+     * </script>
+     * <template>
+     *   <!-- Bind the class and style attributes to a wrapper element -->
+     *   <div v-bind="stylingAttrsCx(...)">
+     *     ...
+     *     <!-- Bind the other attributes to a semantic internal element -->
+     *     <input v-bind="otherAttrs" />
+     *   </div>
+     * </template>
+     */
     otherAttrs: import("vue").ComputedRef<{
-        [x: string]: unknown;
+        [key: string]: unknown;
     }>;
 };
 //# sourceMappingURL=useBindCx.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBindCx.d.ts","sourceRoot":"","sources":["../../src/useBindCx/useBindCx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS;IA4BrB;;;;;;;;;;;;;OAaG;kBAjCoB,SAAS,KAAG;QACnC,iCAAiC;QACjC,KAAK,EAAE,MAAM,CAAA;QACb,+BAA+B;QAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB;IA8BC;;;;OAIG;uBA3BuB,SAAS,KAAG;QACtC,iCAAiC;QACjC,KAAK,EAAE,MAAM,CAAA;KACd;IA0BC,6DAA6D;;;;EAGhE"}
+{"version":3,"file":"useBindCx.d.ts","sourceRoot":"","sources":["../../src/useBindCx/useBindCx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACpC,OAAO,EAAE,KAAK,UAAU,EAAsB,MAAM,KAAK,CAAA;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS;IAkCrB;;;;;;;;;;;;;;;OAeG;kBArCoB,SAAS,KAAG;QACnC,iCAAiC;QACjC,KAAK,EAAE,MAAM,CAAA;QACb,+BAA+B;QAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB;IAkCC;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;8BAlD+B,SAAS,KAAG;QAC9C,iCAAiC;QACjC,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,UAAU,CAAA;KAClB;IAgDC;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;EAGN"}

package/dist/useBindCx/useBindCx.js

@@ -3,17 +3,18 @@ import { cx } from "./cva.js";
 function useBindCx() {
   const attrs = useAttrs();
   const destructured = computed(() => {
-    const { class: className, ...rest } = attrs;
-    return { class: className || "", rest };
+    const { class: className, style, ...rest } = attrs;
+    return { class: className || "", style, rest };
   });
   function bindCx(...args) {
     return {
       class: cx(...args, destructured.value.class),
+      style: destructured.value.style,
       ...destructured.value.rest
     };
   }
-  function bindClass(...args) {
-    return { class: cx(...args, destructured.value.class) };
+  function bindClassAndStyle(...args) {
+    return { class: cx(...args, destructured.value.class), style: destructured.value.style };
   }
   return {
     /**
@@ -22,6 +23,7 @@ function useBindCx() {
      * remaining attributes
      *
      * @example
+     * ```html
      * <script setup>
      * ...
      * const { cx } = useBindCx()
@@ -29,15 +31,58 @@ function useBindCx() {
      * <template>
      *   <div v-bind="cx(...)">...</div>
      * </template>
+     * ```
      */
     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
+     * component's class attribute with the provided classes and binds the
+     * style attribute  but **does not** bind any other attributes.
+     *
+     * Typically used in conjunction with `otherAttrs` to apply the stylistic
+     * attributes to a styled wrapper element, but apply the remaining
+     * attributes to an internal semantic element like an `<input>`.
+     *
+     * @example
+     * ```html
+     * <script setup>
+     * ...
+     * const { stylingAttrsCx, otherAttrs } = useBindCx()
+     * <\/script>
+     * <template>
+     *   <!-- Bind the class and style attributes to a wrapper element -->
+     *   <div v-bind="stylingAttrsCx(...)">
+     *     ...
+     *     <!-- Bind the other attributes to a semantic internal element -->
+     *     <input v-bind="otherAttrs" />
+     *   </div>
+     * </template>
+     * ```
+     */
+    stylingAttrsCx: bindClassAndStyle,
+    /**
+     * The remaining attributes that **are not** the class or style attributes
+     * of the component.
+     *
+     * Typically used in conjunction with `stylingAttrsCx` to apply the stylistic
+     * attributes to a styled wrapper element, but apply the remaining
+     * attributes to an internal semantic element like an `<input>`.
+     *
+     * @example
+     * ```html
+     * <script setup>
+     * ...
+     * const { stylingAttrsCx, otherAttrs } = useBindCx()
+     * <\/script>
+     * <template>
+     *   <!-- Bind the class and style attributes to a wrapper element -->
+     *   <div v-bind="stylingAttrsCx(...)">
+     *     ...
+     *     <!-- Bind the other attributes to a semantic internal element -->
+     *     <input v-bind="otherAttrs" />
+     *   </div>
+     * </template>
      */
-    classCx: bindClass,
-    /** The remaining attributes that are not class attributes */
     otherAttrs: computed(() => destructured.value.rest)
   };
 }

package/dist/useBindCx/useBindCx.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["import type { CXOptions } from 'cva'\nimport { type StyleValue, computed, useAttrs } from 'vue'\n\nimport { cx } from './cva'\n\n/** Utility type for class names */\ntype ClassValue = CXOptions[number]\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    class: ClassValue\n    style: StyleValue\n    rest: { [key: string]: unknown }\n  }>(() => {\n    const { class: className, style, ...rest } = attrs\n    return { class: className || '', style: style as StyleValue, 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      style: destructured.value.style,\n      ...destructured.value.rest,\n    }\n  }\n\n  function bindClassAndStyle(...args: CXOptions): {\n    /** The merged class attribute */\n    class: string\n    style: StyleValue\n  } {\n    return { class: cx(...args, destructured.value.class), style: destructured.value.style }\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     * ```html\n     * <script setup>\n     * ...\n     * const { cx } = useBindCx()\n     * </script>\n     * <template>\n     *   <div v-bind=\"cx(...)\">...</div>\n     * </template>\n     * ```\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 binds the\n     * style attribute  but **does not** bind any other attributes.\n     *\n     * Typically used in conjunction with `otherAttrs` to apply the stylistic\n     * attributes to a styled wrapper element, but apply the remaining\n     * attributes to an internal semantic element like an `<input>`.\n     *\n     * @example\n     * ```html\n     * <script setup>\n     * ...\n     * const { stylingAttrsCx, otherAttrs } = useBindCx()\n     * </script>\n     * <template>\n     *   <!-- Bind the class and style attributes to a wrapper element -->\n     *   <div v-bind=\"stylingAttrsCx(...)\">\n     *     ...\n     *     <!-- Bind the other attributes to a semantic internal element -->\n     *     <input v-bind=\"otherAttrs\" />\n     *   </div>\n     * </template>\n     * ```\n     */\n    stylingAttrsCx: bindClassAndStyle,\n    /**\n     * The remaining attributes that **are not** the class or style attributes\n     * of the component.\n     *\n     * Typically used in conjunction with `stylingAttrsCx` to apply the stylistic\n     * attributes to a styled wrapper element, but apply the remaining\n     * attributes to an internal semantic element like an `<input>`.\n     *\n     * @example\n     * ```html\n     * <script setup>\n     * ...\n     * const { stylingAttrsCx, otherAttrs } = useBindCx()\n     * </script>\n     * <template>\n     *   <!-- Bind the class and style attributes to a wrapper element -->\n     *   <div v-bind=\"stylingAttrsCx(...)\">\n     *     ...\n     *     <!-- Bind the other attributes to a semantic internal element -->\n     *     <input v-bind=\"otherAttrs\" />\n     *   </div>\n     * </template>\n     */\n    otherAttrs: computed(() => destructured.value.rest),\n  }\n}\n"],
+  "mappings": "AACA,SAA0B,UAAU,gBAAgB;AAEpD,SAAS,UAAU;AAgCZ,SAAS,YAAY;AAC1B,QAAM,QAAQ,SAAS;AAEvB,QAAM,eAAe,SAIlB,MAAM;AACP,UAAM,EAAE,OAAO,WAAW,OAAO,GAAG,KAAK,IAAI;AAC7C,WAAO,EAAE,OAAO,aAAa,IAAI,OAA4B,KAAK;AAAA,EACpE,CAAC;AAED,WAAS,UAAU,MAKjB;AACA,WAAO;AAAA,MACL,OAAO,GAAG,GAAG,MAAM,aAAa,MAAM,KAAK;AAAA,MAC3C,OAAO,aAAa,MAAM;AAAA,MAC1B,GAAG,aAAa,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,WAAS,qBAAqB,MAI5B;AACA,WAAO,EAAE,OAAO,GAAG,GAAG,MAAM,aAAa,MAAM,KAAK,GAAG,OAAO,aAAa,MAAM,MAAM;AAAA,EACzF;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBL,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0BJ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBhB,YAAY,SAAS,MAAM,aAAa,MAAM,IAAI;AAAA,EACpD;AACF;",
   "names": []
 }

package/dist/useBreakpoints/useBreakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../src/useBreakpoints/useBreakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAmB,MAAM,KAAK,CAAA;AAI/C;;;;GAIG;AACH,wBAAgB,cAAc;IAc1B,6CAA6C;;;;;;;;;IAE7C,0DAA0D;;IAE1D,gDAAgD;;EAGnD"}
+{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../src/useBreakpoints/useBreakpoints.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAmB,MAAM,KAAK,CAAA;AAM/C;;;;GAIG;AACH,wBAAgB,cAAc;IAmB1B,6CAA6C;;;;;;;;;IAE7C,0DAA0D;;IAE1D,gDAAgD;;EAGnD"}

package/dist/useBreakpoints/useBreakpoints.js

@@ -1,10 +1,15 @@
-import { screens } from "./constants.js";
 import { useMediaQuery } from "@vueuse/core";
 import { computed, unref } from "vue";
+import { screens } from "./constants.js";
 function useBreakpoints() {
-  const mediaQueries = Object.fromEntries(
-    Object.entries(screens).map(([breakpoint, value]) => [breakpoint, useMediaQuery(value)])
-  );
+  const mediaQueries = {
+    xs: useMediaQuery(screens.xs),
+    sm: useMediaQuery(screens.sm),
+    md: useMediaQuery(screens.md),
+    lg: useMediaQuery(screens.lg),
+    xl: useMediaQuery(screens.xl),
+    zoomed: useMediaQuery(screens.zoomed)
+  };
   const breakpoints = computed(
     () => Object.fromEntries(
       Object.entries(mediaQueries).map(([breakpoint, queryRef]) => [breakpoint, unref(queryRef)])

package/dist/useBreakpoints/useBreakpoints.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useBreakpoints/useBreakpoints.ts"],
-  "sourcesContent": ["import { screens } from './constants'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type Ref, computed, unref } from 'vue'\n\ntype Screen = keyof typeof 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 mediaQueries = Object.fromEntries(\n    Object.entries(screens).map(([breakpoint, value]) => [breakpoint, useMediaQuery(value)]),\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,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAmB,UAAU,aAAa;AASnC,SAAS,iBAAiB;AAC/B,QAAM,eAAe,OAAO;AAAA,IAC1B,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC,CAAC,YAAY,KAAK,MAAM,CAAC,YAAY,cAAc,KAAK,CAAC,CAAC;AAAA,EACzF;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;",
+  "sourcesContent": ["import { useMediaQuery } from '@vueuse/core'\nimport { type Ref, computed, unref } from 'vue'\n\nimport { screens } from './constants'\n\ntype Screen = keyof typeof 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 mediaQueries: Record<Screen, Ref<boolean>> = {\n    xs: useMediaQuery(screens.xs),\n    sm: useMediaQuery(screens.sm),\n    md: useMediaQuery(screens.md),\n    lg: useMediaQuery(screens.lg),\n    xl: useMediaQuery(screens.xl),\n    zoomed: useMediaQuery(screens.zoomed),\n  }\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,SAAS,qBAAqB;AAC9B,SAAmB,UAAU,aAAa;AAE1C,SAAS,eAAe;AASjB,SAAS,iBAAiB;AAC/B,QAAM,eAA6C;AAAA,IACjD,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,QAAQ,cAAc,QAAQ,MAAM;AAAA,EACtC;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/useColorMode/index.d.ts

@@ -1,3 +1,2 @@
-export * from './useColorMode.js';
-export * from './types.js';
+export { useColorMode } from './useColorMode.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/useColorMode/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useColorMode/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useColorMode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/useColorMode/index.js

@@ -1,3 +1,5 @@
-export * from "./useColorMode.js";
-export * from "./types.js";
+import { useColorMode } from "./useColorMode.js";
+export {
+  useColorMode
+};
 //# sourceMappingURL=index.js.map

package/dist/useColorMode/index.js.map

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

package/dist/useColorMode/useColorMode.d.ts

@@ -1,8 +1,16 @@
-import type { ColorMode, DarkLightMode, UseColorModeOptions } from './types.js';
+/** Possible color modes */
+type ColorMode = 'light' | 'dark' | 'system';
+/** Specific dark/light mode */
+type DarkLightMode = 'light' | 'dark';
 /**
  * A composable hook that provides color mode (dark/light) functionality.
  */
-export declare function useColorMode(opts?: UseColorModeOptions): {
+export declare function useColorMode(opts?: {
+    /** The initial color mode to use */
+    initialColorMode?: ColorMode;
+    /** Override the color mode */
+    overrideColorMode?: ColorMode;
+}): {
     /** The current color mode (writable). */
     colorMode: import("vue").WritableComputedRef<ColorMode, ColorMode>;
     /** The computed dark/light mode (writable). */
@@ -16,4 +24,5 @@ export declare function useColorMode(opts?: UseColorModeOptions): {
     /** Gets the system mode preference. */
     getSystemModePreference: () => DarkLightMode;
 };
+export {};
 //# sourceMappingURL=useColorMode.d.ts.map

package/dist/useColorMode/useColorMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAM5E;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAE,mBAAwB;IAyFvD,yCAAyC;;IAKzC,+CAA+C;;IAE/C,yDAAyD;;IAEzD,qDAAqD;;IAErD,kDAAkD;0BApFvB,SAAS;IAsFpC,uCAAuC;mCA7EL,aAAa;EAgFlD"}
+{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAOA,2BAA2B;AAC3B,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE5C,+BAA+B;AAC/B,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,GAAE;IACJ,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CACzB;IA2FJ,yCAAyC;;IAKzC,+CAA+C;;IAE/C,yDAAyD;;IAEzD,qDAAqD;;IAErD,kDAAkD;0BArFvB,SAAS;IAuFpC,uCAAuC;mCA9EL,aAAa;EAiFlD"}

package/dist/useColorMode/useColorMode.js

@@ -53,16 +53,17 @@ function useColorMode(opts = {}) {
   );
   colorMode.value = savedColorMode ?? initialColorMode;
   watch(colorMode, applyColorMode, { immediate: true });
+  const handleChange = () => colorMode.value === "system" && applyColorMode("system");
+  const mediaQuery = ref(null);
   onMounted(() => {
     if (typeof window !== "undefined" && typeof window?.matchMedia === "function") {
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      const handleChange = () => colorMode.value === "system" && applyColorMode("system");
-      mediaQuery.addEventListener("change", handleChange);
-      onUnmounted(() => {
-        mediaQuery.removeEventListener("change", handleChange);
-      });
+      mediaQuery.value = window.matchMedia("(prefers-color-scheme: dark)");
+      mediaQuery.value?.addEventListener("change", handleChange);
     }
   });
+  onUnmounted(() => {
+    mediaQuery.value?.removeEventListener("change", handleChange);
+  });
   return {
     /** The current color mode (writable). */
     colorMode: computed({

package/dist/useColorMode/useColorMode.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useColorMode/useColorMode.ts"],
-  "sourcesContent": ["import { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nimport type { ColorMode, DarkLightMode, UseColorModeOptions } from './types'\n\nconst colorMode = ref<ColorMode>('dark')\n\nconst colorModeSchema = z.enum(['dark', 'light', 'system']).optional().catch(undefined)\n\n/**\n * A composable hook that provides color mode (dark/light) functionality.\n */\nexport function useColorMode(opts: UseColorModeOptions = {}) {\n  const { initialColorMode = 'system', overrideColorMode } = opts\n\n  /** Toggles the color mode between light and dark. */\n  function toggleColorMode() {\n    // Update state\n    colorMode.value = darkLightMode.value === 'dark' ? 'light' : 'dark'\n\n    // Store in local storage\n    if (typeof window === 'undefined') {\n      return\n    }\n    window?.localStorage?.setItem('colorMode', colorMode.value)\n  }\n\n  /** Sets the color mode to the specified value. */\n  function setColorMode(value: ColorMode) {\n    colorMode.value = value\n    if (typeof window === 'undefined') {\n      return\n    }\n    window?.localStorage?.setItem('colorMode', colorMode.value)\n  }\n\n  /** Gets the system mode preference. */\n  function getSystemModePreference(): DarkLightMode {\n    if (typeof window === 'undefined') {\n      return 'light'\n    }\n    if (typeof window?.matchMedia !== 'function') {\n      return 'dark'\n    }\n\n    return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n  }\n\n  /** Writable computed ref for dark/light mode with system preference applied */\n  const darkLightMode = computed<DarkLightMode>({\n    get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),\n    set: setColorMode,\n  })\n\n  /** Writable computed ref for whether the current color mode is dark */\n  const isDarkMode = computed<boolean>({\n    get: () => darkLightMode.value === 'dark',\n    set: (value) => setColorMode(value ? 'dark' : 'light'),\n  })\n\n  /** Applies the appropriate color mode class to the body. */\n  function applyColorMode(mode: ColorMode): void {\n    if (typeof document === 'undefined' || typeof window === 'undefined') {\n      return\n    }\n\n    const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode)\n\n    if (classMode === 'dark') {\n      document.body.classList.add('dark-mode')\n      document.body.classList.remove('light-mode')\n    } else {\n      document.body.classList.add('light-mode')\n      document.body.classList.remove('dark-mode')\n    }\n  }\n\n  // Priority of initial values is: LocalStorage -> App Config -> initial / Fallback\n  const savedColorMode = colorModeSchema.parse(\n    typeof window !== 'undefined' ? window?.localStorage?.getItem('colorMode') : 'system',\n  )\n  colorMode.value = savedColorMode ?? initialColorMode\n\n  // Watch for colorMode changes and update the body class\n  watch(colorMode, applyColorMode, { immediate: true })\n\n  // Listen to system preference changes\n  onMounted(() => {\n    if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n      const handleChange = () => colorMode.value === 'system' && applyColorMode('system')\n\n      mediaQuery.addEventListener('change', handleChange)\n\n      onUnmounted(() => {\n        mediaQuery.removeEventListener('change', handleChange)\n      })\n    }\n  })\n\n  return {\n    /** The current color mode (writable). */\n    colorMode: computed({\n      get: () => colorMode.value,\n      set: setColorMode,\n    }),\n    /** The computed dark/light mode (writable). */\n    darkLightMode,\n    /** Whether the current color mode is dark (writable). */\n    isDarkMode,\n    /** Toggles the color mode between light and dark. */\n    toggleColorMode,\n    /** Sets the color mode to the specified value. */\n    setColorMode,\n    /** Gets the system mode preference. */\n    getSystemModePreference,\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,WAAW,aAAa,KAAK,aAAa;AAC7D,SAAS,SAAS;AAIlB,MAAM,YAAY,IAAe,MAAM;AAEvC,MAAM,kBAAkB,EAAE,KAAK,CAAC,QAAQ,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,MAAS;AAK/E,SAAS,aAAa,OAA4B,CAAC,GAAG;AAC3D,QAAM,EAAE,mBAAmB,UAAU,kBAAkB,IAAI;AAG3D,WAAS,kBAAkB;AAEzB,cAAU,QAAQ,cAAc,UAAU,SAAS,UAAU;AAG7D,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,aAAa,OAAkB;AACtC,cAAU,QAAQ;AAClB,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,0BAAyC;AAChD,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,QAAI,OAAO,QAAQ,eAAe,YAAY;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO,QAAQ,WAAW,8BAA8B,GAAG,UAAU,SAAS;AAAA,EAChF;AAGA,QAAM,gBAAgB,SAAwB;AAAA,IAC5C,KAAK,MAAO,UAAU,UAAU,WAAW,wBAAwB,IAAI,UAAU;AAAA,IACjF,KAAK;AAAA,EACP,CAAC;AAGD,QAAM,aAAa,SAAkB;AAAA,IACnC,KAAK,MAAM,cAAc,UAAU;AAAA,IACnC,KAAK,CAAC,UAAU,aAAa,QAAQ,SAAS,OAAO;AAAA,EACvD,CAAC;AAGD,WAAS,eAAe,MAAuB;AAC7C,QAAI,OAAO,aAAa,eAAe,OAAO,WAAW,aAAa;AACpE;AAAA,IACF;AAEA,UAAM,YAAY,sBAAsB,SAAS,WAAW,wBAAwB,IAAI;AAExF,QAAI,cAAc,QAAQ;AACxB,eAAS,KAAK,UAAU,IAAI,WAAW;AACvC,eAAS,KAAK,UAAU,OAAO,YAAY;AAAA,IAC7C,OAAO;AACL,eAAS,KAAK,UAAU,IAAI,YAAY;AACxC,eAAS,KAAK,UAAU,OAAO,WAAW;AAAA,IAC5C;AAAA,EACF;AAGA,QAAM,iBAAiB,gBAAgB;AAAA,IACrC,OAAO,WAAW,cAAc,QAAQ,cAAc,QAAQ,WAAW,IAAI;AAAA,EAC/E;AACA,YAAU,QAAQ,kBAAkB;AAGpC,QAAM,WAAW,gBAAgB,EAAE,WAAW,KAAK,CAAC;AAGpD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,OAAO,QAAQ,eAAe,YAAY;AAC7E,YAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,YAAM,eAAe,MAAM,UAAU,UAAU,YAAY,eAAe,QAAQ;AAElF,iBAAW,iBAAiB,UAAU,YAAY;AAElD,kBAAY,MAAM;AAChB,mBAAW,oBAAoB,UAAU,YAAY;AAAA,MACvD,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO;AAAA;AAAA,IAEL,WAAW,SAAS;AAAA,MAClB,KAAK,MAAM,UAAU;AAAA,MACrB,KAAK;AAAA,IACP,CAAC;AAAA;AAAA,IAED;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst colorMode = ref<ColorMode>('dark')\n\nconst colorModeSchema = z.enum(['dark', 'light', 'system']).optional().catch(undefined)\n\n/** Possible color modes */\ntype ColorMode = 'light' | 'dark' | 'system'\n\n/** Specific dark/light mode */\ntype DarkLightMode = 'light' | 'dark'\n\n/**\n * A composable hook that provides color mode (dark/light) functionality.\n */\nexport function useColorMode(\n  opts: {\n    /** The initial color mode to use */\n    initialColorMode?: ColorMode\n    /** Override the color mode */\n    overrideColorMode?: ColorMode\n  } = {},\n) {\n  const { initialColorMode = 'system', overrideColorMode } = opts\n\n  /** Toggles the color mode between light and dark. */\n  function toggleColorMode() {\n    // Update state\n    colorMode.value = darkLightMode.value === 'dark' ? 'light' : 'dark'\n\n    // Store in local storage\n    if (typeof window === 'undefined') {\n      return\n    }\n    window?.localStorage?.setItem('colorMode', colorMode.value)\n  }\n\n  /** Sets the color mode to the specified value. */\n  function setColorMode(value: ColorMode) {\n    colorMode.value = value\n    if (typeof window === 'undefined') {\n      return\n    }\n    window?.localStorage?.setItem('colorMode', colorMode.value)\n  }\n\n  /** Gets the system mode preference. */\n  function getSystemModePreference(): DarkLightMode {\n    if (typeof window === 'undefined') {\n      return 'light'\n    }\n    if (typeof window?.matchMedia !== 'function') {\n      return 'dark'\n    }\n\n    return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n  }\n\n  /** Writable computed ref for dark/light mode with system preference applied */\n  const darkLightMode = computed<DarkLightMode>({\n    get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),\n    set: setColorMode,\n  })\n\n  /** Writable computed ref for whether the current color mode is dark */\n  const isDarkMode = computed<boolean>({\n    get: () => darkLightMode.value === 'dark',\n    set: (value) => setColorMode(value ? 'dark' : 'light'),\n  })\n\n  /** Applies the appropriate color mode class to the body. */\n  function applyColorMode(mode: ColorMode): void {\n    if (typeof document === 'undefined' || typeof window === 'undefined') {\n      return\n    }\n\n    const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode)\n\n    if (classMode === 'dark') {\n      document.body.classList.add('dark-mode')\n      document.body.classList.remove('light-mode')\n    } else {\n      document.body.classList.add('light-mode')\n      document.body.classList.remove('dark-mode')\n    }\n  }\n\n  // Priority of initial values is: LocalStorage -> App Config -> initial / Fallback\n  const savedColorMode = colorModeSchema.parse(\n    typeof window !== 'undefined' ? window?.localStorage?.getItem('colorMode') : 'system',\n  )\n  colorMode.value = savedColorMode ?? initialColorMode\n\n  // Watch for colorMode changes and update the body class\n  watch(colorMode, applyColorMode, { immediate: true })\n\n  const handleChange = () => colorMode.value === 'system' && applyColorMode('system')\n\n  const mediaQuery = ref<MediaQueryList | null>(null)\n  // Listen to system preference changes\n  onMounted(() => {\n    if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {\n      mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)')\n      mediaQuery.value?.addEventListener('change', handleChange)\n    }\n  })\n\n  onUnmounted(() => {\n    mediaQuery.value?.removeEventListener('change', handleChange)\n  })\n\n  return {\n    /** The current color mode (writable). */\n    colorMode: computed({\n      get: () => colorMode.value,\n      set: setColorMode,\n    }),\n    /** The computed dark/light mode (writable). */\n    darkLightMode,\n    /** Whether the current color mode is dark (writable). */\n    isDarkMode,\n    /** Toggles the color mode between light and dark. */\n    toggleColorMode,\n    /** Sets the color mode to the specified value. */\n    setColorMode,\n    /** Gets the system mode preference. */\n    getSystemModePreference,\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,WAAW,aAAa,KAAK,aAAa;AAC7D,SAAS,SAAS;AAElB,MAAM,YAAY,IAAe,MAAM;AAEvC,MAAM,kBAAkB,EAAE,KAAK,CAAC,QAAQ,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,MAAS;AAW/E,SAAS,aACd,OAKI,CAAC,GACL;AACA,QAAM,EAAE,mBAAmB,UAAU,kBAAkB,IAAI;AAG3D,WAAS,kBAAkB;AAEzB,cAAU,QAAQ,cAAc,UAAU,SAAS,UAAU;AAG7D,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,aAAa,OAAkB;AACtC,cAAU,QAAQ;AAClB,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,0BAAyC;AAChD,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,QAAI,OAAO,QAAQ,eAAe,YAAY;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO,QAAQ,WAAW,8BAA8B,GAAG,UAAU,SAAS;AAAA,EAChF;AAGA,QAAM,gBAAgB,SAAwB;AAAA,IAC5C,KAAK,MAAO,UAAU,UAAU,WAAW,wBAAwB,IAAI,UAAU;AAAA,IACjF,KAAK;AAAA,EACP,CAAC;AAGD,QAAM,aAAa,SAAkB;AAAA,IACnC,KAAK,MAAM,cAAc,UAAU;AAAA,IACnC,KAAK,CAAC,UAAU,aAAa,QAAQ,SAAS,OAAO;AAAA,EACvD,CAAC;AAGD,WAAS,eAAe,MAAuB;AAC7C,QAAI,OAAO,aAAa,eAAe,OAAO,WAAW,aAAa;AACpE;AAAA,IACF;AAEA,UAAM,YAAY,sBAAsB,SAAS,WAAW,wBAAwB,IAAI;AAExF,QAAI,cAAc,QAAQ;AACxB,eAAS,KAAK,UAAU,IAAI,WAAW;AACvC,eAAS,KAAK,UAAU,OAAO,YAAY;AAAA,IAC7C,OAAO;AACL,eAAS,KAAK,UAAU,IAAI,YAAY;AACxC,eAAS,KAAK,UAAU,OAAO,WAAW;AAAA,IAC5C;AAAA,EACF;AAGA,QAAM,iBAAiB,gBAAgB;AAAA,IACrC,OAAO,WAAW,cAAc,QAAQ,cAAc,QAAQ,WAAW,IAAI;AAAA,EAC/E;AACA,YAAU,QAAQ,kBAAkB;AAGpC,QAAM,WAAW,gBAAgB,EAAE,WAAW,KAAK,CAAC;AAEpD,QAAM,eAAe,MAAM,UAAU,UAAU,YAAY,eAAe,QAAQ;AAElF,QAAM,aAAa,IAA2B,IAAI;AAElD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,OAAO,QAAQ,eAAe,YAAY;AAC7E,iBAAW,QAAQ,OAAO,WAAW,8BAA8B;AACnE,iBAAW,OAAO,iBAAiB,UAAU,YAAY;AAAA,IAC3D;AAAA,EACF,CAAC;AAED,cAAY,MAAM;AAChB,eAAW,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAC9D,CAAC;AAED,SAAO;AAAA;AAAA,IAEL,WAAW,SAAS;AAAA,MAClB,KAAK,MAAM,UAAU;AAAA,MACrB,KAAK;AAAA,IACP,CAAC;AAAA;AAAA,IAED;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/use-hooks"
   },
-  "version": "0.2.4",
+  "version": "0.3.0",
   "engines": {
     "node": ">=20"
   },
@@ -49,19 +49,18 @@
   ],
   "module": "./dist/index.js",
   "dependencies": {
-    "@vueuse/core": "^10.10.0",
+    "@vueuse/core": "13.9.0",
     "cva": "1.0.0-beta.2",
     "tailwind-merge": "^2.5.5",
-    "vue": "^3.5.12",
-    "zod": "3.24.1",
-    "@scalar/use-toasts": "0.8.0"
+    "vue": "^3.5.21",
+    "zod": "4.1.11",
+    "@scalar/use-toasts": "0.9.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/test-utils": "^2.4.1",
-    "vite": "5.4.19",
-    "zod-to-ts": "^1.2.0",
-    "@scalar/build-tooling": "0.2.4"
+    "@vitejs/plugin-vue": "6.0.1",
+    "@vue/test-utils": "2.4.6",
+    "vite": "7.1.11",
+    "@scalar/build-tooling": "0.2.8"
   },
   "scripts": {
     "build": "scalar-build-esbuild",

package/dist/useColorMode/types.d.ts

@@ -1,12 +0,0 @@
-/** Possible color modes */
-export type ColorMode = 'light' | 'dark' | 'system';
-/** Specific dark/light mode */
-export type DarkLightMode = 'light' | 'dark';
-/** Options for the useColorMode hook */
-export type UseColorModeOptions = {
-    /** The initial color mode to use */
-    initialColorMode?: ColorMode;
-    /** Override the color mode */
-    overrideColorMode?: ColorMode;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/useColorMode/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/useColorMode/types.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEnD,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,CAAA"}

package/dist/useColorMode/types.js

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

package/dist/useColorMode/types.js.map

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