qcm-font-resizer 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FontSizeContextValue {
+    level: number;
+    isMin: boolean;
+    isMax: boolean;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+    setLevel: (level: number) => void;
+}
+declare function FontSizeProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useFontSize(): FontSizeContextValue;
+
+declare const DEFAULT_LEVEL = 2;
+declare const MIN_LEVEL = 1;
+declare const MAX_LEVEL = 5;
+/**
+ * Scale multipliers — applied to :root via CSS var --content-text-scale.
+ * At level 2 (default), scale = 1.000 → all rem values are their base px value.
+ *
+ * level 1 → 0.800  → body: 16 * 0.8 = 12.8px
+ * level 2 → 1.000  → body: 16 * 1   = 16px   (default)
+ * level 3 → 1.250  → body: 16 * 1.25 = 20px
+ * level 4 → 1.563  → body: 16 * 1.563 = 25px
+ * level 5 → 1.953  → body: 16 * 1.953 = 31.25px
+ */
+declare const SCALE_MAP: Record<number, number>;
+declare const CSS_VAR_NAME = "--content-text-scale";
+
+export { CSS_VAR_NAME, DEFAULT_LEVEL, FontSizeProvider, MAX_LEVEL, MIN_LEVEL, SCALE_MAP, useFontSize };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FontSizeContextValue {
+    level: number;
+    isMin: boolean;
+    isMax: boolean;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+    setLevel: (level: number) => void;
+}
+declare function FontSizeProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useFontSize(): FontSizeContextValue;
+
+declare const DEFAULT_LEVEL = 2;
+declare const MIN_LEVEL = 1;
+declare const MAX_LEVEL = 5;
+/**
+ * Scale multipliers — applied to :root via CSS var --content-text-scale.
+ * At level 2 (default), scale = 1.000 → all rem values are their base px value.
+ *
+ * level 1 → 0.800  → body: 16 * 0.8 = 12.8px
+ * level 2 → 1.000  → body: 16 * 1   = 16px   (default)
+ * level 3 → 1.250  → body: 16 * 1.25 = 20px
+ * level 4 → 1.563  → body: 16 * 1.563 = 25px
+ * level 5 → 1.953  → body: 16 * 1.953 = 31.25px
+ */
+declare const SCALE_MAP: Record<number, number>;
+declare const CSS_VAR_NAME = "--content-text-scale";
+
+export { CSS_VAR_NAME, DEFAULT_LEVEL, FontSizeProvider, MAX_LEVEL, MIN_LEVEL, SCALE_MAP, useFontSize };

package/dist/index.js

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  CSS_VAR_NAME: () => CSS_VAR_NAME,
+  DEFAULT_LEVEL: () => DEFAULT_LEVEL,
+  FontSizeProvider: () => FontSizeProvider,
+  MAX_LEVEL: () => MAX_LEVEL,
+  MIN_LEVEL: () => MIN_LEVEL,
+  SCALE_MAP: () => SCALE_MAP,
+  useFontSize: () => useFontSize
+});
+module.exports = __toCommonJS(index_exports);
+
+// FontSizeContext.tsx
+var import_react = require("react");
+
+// constants.ts
+var SCALE_RATIO = 1.25;
+var DEFAULT_LEVEL = 2;
+var MIN_LEVEL = 1;
+var MAX_LEVEL = 5;
+var SCALE_MAP = {
+  1: parseFloat(Math.pow(SCALE_RATIO, -1).toFixed(3)),
+  // 0.800
+  2: 1,
+  // 1.000
+  3: parseFloat(Math.pow(SCALE_RATIO, 1).toFixed(3)),
+  // 1.250
+  4: parseFloat(Math.pow(SCALE_RATIO, 2).toFixed(3)),
+  // 1.563
+  5: parseFloat(Math.pow(SCALE_RATIO, 3).toFixed(3))
+  // 1.953
+};
+var CSS_VAR_NAME = "--content-text-scale";
+
+// FontSizeContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FontSizeContext = (0, import_react.createContext)(void 0);
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function FontSizeProvider({ children }) {
+  const [level, setLevelState] = (0, import_react.useState)(DEFAULT_LEVEL);
+  (0, import_react.useEffect)(() => {
+    const scale = SCALE_MAP[level];
+    document.documentElement.style.setProperty(CSS_VAR_NAME, String(scale));
+  }, [level]);
+  const setLevel = (0, import_react.useCallback)((next) => {
+    setLevelState(clamp(next, MIN_LEVEL, MAX_LEVEL));
+  }, []);
+  const increment = (0, import_react.useCallback)(() => setLevel(level + 1), [level, setLevel]);
+  const decrement = (0, import_react.useCallback)(() => setLevel(level - 1), [level, setLevel]);
+  const reset = (0, import_react.useCallback)(() => setLevel(DEFAULT_LEVEL), [setLevel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontSizeContext.Provider, { value: {
+    level,
+    isMin: level <= MIN_LEVEL,
+    isMax: level >= MAX_LEVEL,
+    increment,
+    decrement,
+    reset,
+    setLevel
+  }, children });
+}
+function useFontSize() {
+  const ctx = (0, import_react.useContext)(FontSizeContext);
+  if (!ctx) {
+    throw new Error("[font-resizer] useFontSize must be used inside <FontSizeProvider>");
+  }
+  return ctx;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSS_VAR_NAME,
+  DEFAULT_LEVEL,
+  FontSizeProvider,
+  MAX_LEVEL,
+  MIN_LEVEL,
+  SCALE_MAP,
+  useFontSize
+});

package/dist/index.mjs

@@ -0,0 +1,72 @@
+// FontSizeContext.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect
+} from "react";
+
+// constants.ts
+var SCALE_RATIO = 1.25;
+var DEFAULT_LEVEL = 2;
+var MIN_LEVEL = 1;
+var MAX_LEVEL = 5;
+var SCALE_MAP = {
+  1: parseFloat(Math.pow(SCALE_RATIO, -1).toFixed(3)),
+  // 0.800
+  2: 1,
+  // 1.000
+  3: parseFloat(Math.pow(SCALE_RATIO, 1).toFixed(3)),
+  // 1.250
+  4: parseFloat(Math.pow(SCALE_RATIO, 2).toFixed(3)),
+  // 1.563
+  5: parseFloat(Math.pow(SCALE_RATIO, 3).toFixed(3))
+  // 1.953
+};
+var CSS_VAR_NAME = "--content-text-scale";
+
+// FontSizeContext.tsx
+import { jsx } from "react/jsx-runtime";
+var FontSizeContext = createContext(void 0);
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function FontSizeProvider({ children }) {
+  const [level, setLevelState] = useState(DEFAULT_LEVEL);
+  useEffect(() => {
+    const scale = SCALE_MAP[level];
+    document.documentElement.style.setProperty(CSS_VAR_NAME, String(scale));
+  }, [level]);
+  const setLevel = useCallback((next) => {
+    setLevelState(clamp(next, MIN_LEVEL, MAX_LEVEL));
+  }, []);
+  const increment = useCallback(() => setLevel(level + 1), [level, setLevel]);
+  const decrement = useCallback(() => setLevel(level - 1), [level, setLevel]);
+  const reset = useCallback(() => setLevel(DEFAULT_LEVEL), [setLevel]);
+  return /* @__PURE__ */ jsx(FontSizeContext.Provider, { value: {
+    level,
+    isMin: level <= MIN_LEVEL,
+    isMax: level >= MAX_LEVEL,
+    increment,
+    decrement,
+    reset,
+    setLevel
+  }, children });
+}
+function useFontSize() {
+  const ctx = useContext(FontSizeContext);
+  if (!ctx) {
+    throw new Error("[font-resizer] useFontSize must be used inside <FontSizeProvider>");
+  }
+  return ctx;
+}
+export {
+  CSS_VAR_NAME,
+  DEFAULT_LEVEL,
+  FontSizeProvider,
+  MAX_LEVEL,
+  MIN_LEVEL,
+  SCALE_MAP,
+  useFontSize
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "qcm-font-resizer",
+  "version": "1.0.0",
+  "description": "Accessibility font scaling library for React/Next.js WebView",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "next": ">=14"
+  },
+  "keywords": ["accessibility", "font-size", "webview", "react", "nextjs"],
+  "license": "MIT"
+}