@scalar/use-hooks 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Scalar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# Scalar Use Hooks
+
+A collection of utility hooks for Scalar.
+
+## Installation
+
+```bash
+npm add @scalar/use-hooks
+```
+
+## Available Hooks
+
+- [useClipboard](./src/useClipboard/README.md)
+- [useColorMode](./src/useColorMode/README.md)

package/dist/useClipboard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useClipboard.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/useClipboard/index.js

@@ -0,0 +1,4 @@
+import { useClipboard as e } from "./useClipboard.js";
+export {
+  e as useClipboard
+};

package/dist/useClipboard/types.d.ts

@@ -0,0 +1,7 @@
+export type UseClipboardOptions = {
+    /**
+     * A function that will be called when the text is copied to the clipboard
+     */
+    notify?: (message: string) => void;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/useClipboard/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA"}

package/dist/useClipboard/useClipboard.d.ts

@@ -0,0 +1,8 @@
+import type { UseClipboardOptions } from './types';
+/**
+ * A hook for interacting with the clipboard
+ */
+export declare function useClipboard(opts?: UseClipboardOptions): {
+    copyToClipboard: (value: string) => Promise<void>;
+};
+//# sourceMappingURL=useClipboard.d.ts.map

package/dist/useClipboard/useClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.d.ts","sourceRoot":"","sources":["../../src/useClipboard/useClipboard.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAE,mBAAwB;6BAInB,MAAM;EAY7C"}

package/dist/useClipboard/useClipboard.js

@@ -0,0 +1,15 @@
+import { useToasts as c } from "@scalar/use-toasts";
+function p(t = {}) {
+  const { notify: r = (o) => e(o, "info") } = t, { toast: e } = c();
+  async function a(o) {
+    try {
+      await navigator.clipboard.writeText(o), r("Copied to the clipboard");
+    } catch (i) {
+      console.error(i.message), r("Failed to copy to clipboard");
+    }
+  }
+  return { copyToClipboard: a };
+}
+export {
+  p as useClipboard
+};

package/dist/useColorMode/index.d.ts

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

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

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

package/dist/useColorMode/index.js

@@ -0,0 +1,4 @@
+import { useColorMode as r } from "./useColorMode.js";
+export {
+  r as useColorMode
+};

package/dist/useColorMode/types.d.ts

@@ -0,0 +1,10 @@
+/** Possible color modes */
+export type ColorMode = 'light' | 'dark' | 'system';
+/** 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

@@ -0,0 +1 @@
+{"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,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/useColorMode.d.ts

@@ -0,0 +1,11 @@
+import type { ColorMode, UseColorModeOptions } from './types';
+/**
+ * A composable hook that provides color mode (dark/light) functionality.
+ */
+export declare function useColorMode(opts?: UseColorModeOptions): {
+    colorMode: import("vue").ComputedRef<ColorMode>;
+    toggleColorMode: () => void;
+    setColorMode: (value: ColorMode) => void;
+    getSystemModePreference: () => ColorMode;
+};
+//# sourceMappingURL=useColorMode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAS7D;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAE,mBAAwB;;;0BAgB5B,SAAS;mCAOF,SAAS;EAuD9C"}

package/dist/useColorMode/useColorMode.js

@@ -0,0 +1,43 @@
+import { ref as u, watch as f, onMounted as M, onUnmounted as h, computed as w } from "vue";
+import { z as y } from "zod";
+const o = u("dark"), v = y.enum(["dark", "light", "system"]).optional().catch(void 0);
+function k(a = {}) {
+  var r;
+  const { initialColorMode: c = "system", overrideColorMode: i } = a;
+  function s() {
+    var t;
+    const e = o.value === "system" ? d() : o.value;
+    o.value = e === "dark" ? "light" : "dark", !(typeof window > "u") && ((t = window == null ? void 0 : window.localStorage) == null || t.setItem("colorMode", o.value));
+  }
+  function l(e) {
+    var t;
+    o.value = e, !(typeof window > "u") && ((t = window == null ? void 0 : window.localStorage) == null || t.setItem("colorMode", o.value));
+  }
+  function d() {
+    var e;
+    return typeof (window == null ? void 0 : window.matchMedia) != "function" || (e = window == null ? void 0 : window.matchMedia("(prefers-color-scheme: dark)")) != null && e.matches ? "dark" : "light";
+  }
+  function n(e) {
+    if (typeof document > "u") return;
+    (i ?? (e === "system" ? d() : e)) === "dark" ? (document.body.classList.add("dark-mode"), document.body.classList.remove("light-mode")) : (document.body.classList.add("light-mode"), document.body.classList.remove("dark-mode"));
+  }
+  const m = v.parse(
+    (r = window == null ? void 0 : window.localStorage) == null ? void 0 : r.getItem("colorMode")
+  );
+  return o.value = m ?? c, f(o, n, { immediate: !0 }), M(() => {
+    if (typeof (window == null ? void 0 : window.matchMedia) == "function") {
+      const e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => o.value === "system" && n("system");
+      e.addEventListener("change", t), h(() => {
+        e.removeEventListener("change", t);
+      });
+    }
+  }), {
+    colorMode: w(() => o.value),
+    toggleColorMode: s,
+    setColorMode: l,
+    getSystemModePreference: d
+  };
+}
+export {
+  k as useColorMode
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@scalar/use-hooks",
+  "description": "Utility hooks for Scalar",
+  "license": "MIT",
+  "author": "Scalar (https://github.com/scalar)",
+  "homepage": "https://github.com/scalar/scalar",
+  "bugs": "https://github.com/scalar/scalar/issues/new/choose",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scalar/scalar.git",
+    "directory": "packages/use-hooks"
+  },
+  "version": "0.1.0",
+  "engines": {
+    "node": ">=18"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./useColorMode": {
+      "import": "./dist/useColorMode/index.js",
+      "types": "./dist/useColorMode/index.d.ts",
+      "default": "./dist/useColorMode/index.js"
+    },
+    "./useClipboard": {
+      "import": "./dist/useClipboard/index.js",
+      "types": "./dist/useClipboard/index.d.ts",
+      "default": "./dist/useClipboard/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "dependencies": {
+    "vue": "^3.5.12",
+    "zod": "^3.23.8",
+    "@scalar/use-toasts": "0.7.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.4.9",
+    "zod-to-ts": "^1.2.0",
+    "@scalar/build-tooling": "0.1.12"
+  },
+  "scripts": {
+    "build": "scalar-build-vite",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest",
+    "types:build": "scalar-types-build-vue",
+    "types:check": "scalar-types-check-vue"
+  }
+}