typography-controller 1.0.2 → 1.0.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Achuth Kamath
-
-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  
+MIT License
+
+Copyright (c) 2026 Achuth Kamath
+
+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

@@ -1,135 +1,136 @@
-# Typography Controller
-
-A framework-agnostic Web Component that provides a beautiful typography control panel:
-font size, letter spacing, word spacing, line height, contrast, and font family.
-
-
-## Features
-
-- Font Size: Adjust the font size with a slider (range: 12-48px)
-- Letter Spacing: Control the spacing between characters
-- Word Spacing: Adjust spacing between words
-- Line Height: Set the line height (1-3)
-- Contrast: Apply a contrast filter (50-200%)
-- Font Family: Choose from predefined fonts (Arial, Georgia, Courier New, Verdana)
-
-![alt text](https://raw.githubusercontent.com/achuthkamath91/Typography-Controller/main/image.png)
-
-## Usage
-
-1. Include the `typography-controller.js` script in your HTML file:
-
-```html
-<script src="typography-controller.js"></script>
-```
-
-2. Add the `<typography-controller>` element to your HTML, specifying the target element via the `target` attribute:
-
-```html
-<typography-controller target="#myText"></typography-controller>
-<div id="myText">This is the text to style.</div>
-```
-
-The controller will automatically apply the selected styles to the target element.
-
-## API
-
-### Methods
-
-- `getValues()`: Returns an object with current values.
-- `setValues(values)`: Sets the values from an object.
-
-### Events
-
-- `change`: Fired when any control changes, with `detail` containing the current values.
-
-### JavaScript API Usage
-
-```javascript
-const controller = document.querySelector("typography-controller");
-
-controller.addEventListener("change", (e) => {
-  console.log("Updated values:", e.detail);
-});
-
-controller.setValues({
-  fontSize: 30,
-  letterSpacing: 2,
-  fontFamily: "Georgia"
-});
-```
-
-## Example
-
-See `index.html` for a complete example.
-
-### Quick note on bundling (Vite/Rollup)
-
-You can start without bundling (just `src/` + `demo/`), then later add:
-
-- `vite.config.js` or `rollup.config.js` to build `src/typography-controller.js` into `dist/typography-controller.js`
-- `package.json` with `"module": "dist/typography-controller.js"`
-
-If you want, next step we can wire up a minimal Vite config and `package.json` ready for `npm publish`.
-
-### React usage
-
-```
-import { TypographyController } from "./react-wrapper/TypographyController";
-
-export default function App() {
-  return (
-    <div>
-      <h2 id="demoText">Typography should feel like breathing space.</h2>
-
-      <TypographyController
-        target="#demoText"
-        hide-letter-spacing
-        onChange={(e) => console.log(e.detail)}
-      />
-    </div>
-  );
-}
-
-```
-
-### Support JS API (setFeatures, setValues) in React
-
-React reference
-```
-import { useRef, useEffect } from "react";
-import { TypographyController } from "./react-wrapper/TypographyController";
-
-export default function App() {
-  const ref = useRef();
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.setFeatures({
-        letterSpacing: true,
-        wordSpacing: false,
-        lineHeight: true,
-        contrast: true
-      });
-    }
-  }, []);
-
-  return (
-    <>
-      <h2 id="demoText">Hello world</h2>
-
-      <TypographyController
-        ref={ref}
-        target="#demoText"
-        onChange={(e) => console.log(e.detail)}
-      />
-    </>
-  );
-}
-
-```
-
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+# Typography Controller
+
+A lightweight, framework‑agnostic Web Component that provides a beautiful, interactive typography control panel.
+Adjust font size, letter spacing, word spacing, line height, contrast, and font family — all in real time.
+
+![alt text](https://raw.githubusercontent.com/achuthkamath91/Typography-Controller/main/image.png)
+
+## 🚀 Features
+
+- Font Size: Adjust the font size with a slider (range: 12-48px).
+- Letter Spacing: Control the spacing between characters.
+- Word Spacing: Adjust spacing between words.
+- Line Height: Set the line height (1-3).
+- Contrast: Apply a contrast filter (50-200%).
+- Font Family: Choose from predefined fonts (Arial, Georgia, Courier New, Verdana).
+- Framework‑agnostic — Works in HTML, React, Vue, Svelte, etc.
+- Public API — getValues(), setValues(), setFeatures(), and change events.
+
+## 📦 Installation
+
+```bash
+npm install typography-controller
+```
+
+## Usage
+
+1. Import the component
+
+```html
+import "typography-controller/dist/typography-controller.js";
+```
+
+2. Add the `<typography-controller>` element to your HTML, specifying the target element via the `target` attribute:
+
+```html
+<h2 id="myText">This is the text to style.</h2>
+<typography-controller target="#myText"></typography-controller>
+```
+
+## 🌐 Using via CDN (no bundler)
+
+```
+<script type="module" src="https://unpkg.com/typography-controller/dist/typography-controller.js"></script>
+
+<h2 id="demo">Hello World</h2>
+<typography-controller target="#demo"></typography-controller>
+```
+
+## 📚 JavaScript API
+
+### Methods
+| Method | Description | Parameters/Return |
+|--------|-------------|-------------------|
+| getValues() | Returns the current typography values as an object. | Returns: `{ fontSize: number, letterSpacing: number, wordSpacing: number, lineHeight: number, contrast: number, fontFamily: string }` |
+| setValues(values) | Sets the typography values programmatically. | Parameters: `values` (object with keys like `fontSize`, `letterSpacing`, etc.) |
+| setFeatures(features) | Enables or disables specific features (e.g., sliders). | Parameters: `features` (object with boolean keys like `letterSpacing: true`) |
+
+### Events
+| Event | Description | Detail |
+|-------|-------------|--------|
+| change | Fired whenever a value changes via the UI or API. | `event.detail`: Object containing updated values (same as `getValues()` return). |
+
+
+Example
+
+```
+const controller = document.querySelector("typography-controller");
+
+controller.addEventListener("change", (e) => {
+  console.log("Updated values:", e.detail);
+});
+
+controller.setValues({
+  fontSize: 30,
+  letterSpacing: 2,
+  fontFamily: "Georgia"
+});
+```
+
+## ⚛️ React Usage
+
+Basic usage
+```
+import "typography-controller/dist/typography-controller.js";
+
+export default function App() {
+  return (
+    <div>
+      <h2 id="demoText">Typography should feel like breathing space.</h2>
+
+      <typography-controller
+        target="#demoText"
+        hide-letter-spacing
+        onChange={(e) => console.log(e.detail)}
+      ></typography-controller>
+    </div>
+  );
+}
+```
+
+Using JS API (setFeatures, setValues) with refs
+```
+import { useRef, useEffect } from "react";
+import "typography-controller/dist/typography-controller.js";
+
+export default function App() {
+  const ref = useRef();
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.setFeatures({
+        letterSpacing: true,
+        wordSpacing: false,
+        lineHeight: true,
+        contrast: true
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <h2 id="demoText">Hello world</h2>
+
+      <typography-controller
+        ref={ref}
+        target="#demoText"
+        onChange={(e) => console.log(e.detail)}
+      ></typography-controller>
+    </>
+  );
+}
+```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/react/react-wrapper.js

@@ -0,0 +1,219 @@
+import { createComponent as o } from "@lit/react";
+import a from "react";
+let n = class extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: system-ui, sans-serif;
+          max-width: 420px;
+          padding: 18px 20px;
+          border-radius: 18px;
+          background: rgba(255, 255, 255, 0.65);
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          backdrop-filter: blur(14px);
+          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+          color: #0f172a;
+        }
+
+        .header {
+          display: flex;
+          justify-content: space-between;
+          align-items: baseline;
+          margin-bottom: 14px;
+        }
+
+        .title {
+          font-size: 14px;
+          font-weight: 600;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: #475569;
+        }
+
+        .badge {
+          font-size: 11px;
+          padding: 3px 8px;
+          border-radius: 999px;
+          background: rgba(59, 130, 246, 0.12);
+          color: #1d4ed8;
+          border: 1px solid rgba(59, 130, 246, 0.35);
+        }
+
+        .group {
+          margin-bottom: 14px;
+        }
+
+        .label-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 6px;
+        }
+
+        label {
+          font-size: 12px;
+          font-weight: 600;
+          color: #0f172a;
+        }
+
+        .value {
+          font-size: 11px;
+          color: #64748b;
+        }
+
+        input[type="range"] {
+          -webkit-appearance: none;
+          width: 100%;
+          height: 6px;
+          border-radius: 999px;
+          background: linear-gradient(90deg, #3b82f6, #60a5fa);
+          outline: none;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          height: 18px;
+          width: 18px;
+          border-radius: 50%;
+          background: white;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+          cursor: pointer;
+        }
+
+        select {
+          width: 100%;
+          padding: 6px 8px;
+          border-radius: 8px;
+          border: 1px solid rgba(148, 163, 184, 0.7);
+          background: rgba(255, 255, 255, 0.9);
+          font-size: 12px;
+          color: #0f172a;
+          outline: none;
+        }
+
+        select:focus {
+          border-color: #2563eb;
+          box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
+        }
+      </style>
+
+      <div class="header">
+        <div class="title">Typography Controls</div>
+        <div class="badge">Web Component</div>
+      </div>
+
+      <div class="group" id="groupFontSize">
+        <div class="label-row">
+          <label for="fontSize">Font size</label>
+          <span class="value" id="fontSizeValue"></span>
+        </div>
+        <input type="range" id="fontSize" min="12" max="60" value="24">
+      </div>
+
+      <div class="group" id="groupLetterSpacing">
+        <div class="label-row">
+          <label for="letterSpacing">Letter spacing</label>
+          <span class="value" id="letterSpacingValue"></span>
+        </div>
+        <input type="range" id="letterSpacing" min="0" max="20" value="0">
+      </div>
+
+      <div class="group" id="groupWordSpacing">
+        <div class="label-row">
+          <label for="wordSpacing">Word spacing</label>
+          <span class="value" id="wordSpacingValue"></span>
+        </div>
+        <input type="range" id="wordSpacing" min="0" max="40" value="0">
+      </div>
+
+      <div class="group" id="groupLineHeight">
+        <div class="label-row">
+          <label for="lineHeight">Line height</label>
+          <span class="value" id="lineHeightValue"></span>
+        </div>
+        <input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.5">
+      </div>
+
+      <div class="group" id="groupContrast">
+        <div class="label-row">
+          <label for="contrast">Contrast</label>
+          <span class="value" id="contrastValue"></span>
+        </div>
+        <input type="range" id="contrast" min="50" max="200" value="100">
+      </div>
+
+      <div class="group" id="groupFontFamily">
+        <div class="label-row">
+          <label for="fontFamily">Font family</label>
+        </div>
+        <select id="fontFamily">
+          <option value="system-ui, sans-serif">System</option>
+          <option value="Georgia, serif">Serif</option>
+          <option value="'Courier New', monospace">Monospace</option>
+          <option value="Verdana, sans-serif">Verdana</option>
+        </select>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    this.targetSelector = this.getAttribute("target"), this.toggleGroup("#groupLetterSpacing", !this.hasAttribute("hide-letter-spacing")), this.toggleGroup("#groupWordSpacing", !this.hasAttribute("hide-word-spacing")), this.toggleGroup("#groupLineHeight", !this.hasAttribute("hide-line-height")), this.toggleGroup("#groupContrast", !this.hasAttribute("hide-contrast")), this.fontSize = this.shadowRoot.querySelector("#fontSize"), this.letterSpacing = this.shadowRoot.querySelector("#letterSpacing"), this.wordSpacing = this.shadowRoot.querySelector("#wordSpacing"), this.lineHeight = this.shadowRoot.querySelector("#lineHeight"), this.contrast = this.shadowRoot.querySelector("#contrast"), this.fontFamily = this.shadowRoot.querySelector("#fontFamily");
+    const t = this.targetElement;
+    if (t) {
+      const i = getComputedStyle(t).fontFamily;
+      this.fontFamily.value = i;
+    }
+    this.fontSizeValue = this.shadowRoot.querySelector("#fontSizeValue"), this.letterSpacingValue = this.shadowRoot.querySelector("#letterSpacingValue"), this.wordSpacingValue = this.shadowRoot.querySelector("#wordSpacingValue"), this.lineHeightValue = this.shadowRoot.querySelector("#lineHeightValue"), this.contrastValue = this.shadowRoot.querySelector("#contrastValue");
+    const e = () => {
+      this.update(), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: this.getValues(),
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+    this.fontSize.addEventListener("input", e), this.letterSpacing.addEventListener("input", e), this.wordSpacing.addEventListener("input", e), this.lineHeight.addEventListener("input", e), this.contrast.addEventListener("input", e), this.fontFamily.addEventListener("change", e), this.update();
+  }
+  toggleGroup(t, e) {
+    const i = this.shadowRoot.querySelector(t);
+    i && (i.style.display = e ? "block" : "none");
+  }
+  get targetElement() {
+    return document.querySelector(this.targetSelector);
+  }
+  update() {
+    const t = this.targetElement;
+    t && (t.style.fontSize = `${this.fontSize.value}px`, t.style.letterSpacing = `${this.letterSpacing.value}px`, t.style.wordSpacing = `${this.wordSpacing.value}px`, t.style.lineHeight = this.lineHeight.value, t.style.filter = `contrast(${this.contrast.value}%)`, t.style.fontFamily = this.fontFamily.value, this.fontSizeValue.textContent = `${this.fontSize.value}px`, this.letterSpacingValue.textContent = `${this.letterSpacing.value}px`, this.wordSpacingValue.textContent = `${this.wordSpacing.value}px`, this.lineHeightValue.textContent = this.lineHeight.value, this.contrastValue.textContent = `${this.contrast.value}%`);
+  }
+  getValues() {
+    return {
+      fontSize: Number(this.fontSize.value),
+      letterSpacing: Number(this.letterSpacing.value),
+      wordSpacing: Number(this.wordSpacing.value),
+      lineHeight: Number(this.lineHeight.value),
+      contrast: Number(this.contrast.value),
+      fontFamily: this.fontFamily.value
+    };
+  }
+  setValues(t = {}) {
+    t.fontSize !== void 0 && (this.fontSize.value = t.fontSize), t.letterSpacing !== void 0 && (this.letterSpacing.value = t.letterSpacing), t.wordSpacing !== void 0 && (this.wordSpacing.value = t.wordSpacing), t.lineHeight !== void 0 && (this.lineHeight.value = t.lineHeight), t.contrast !== void 0 && (this.contrast.value = t.contrast), t.fontFamily !== void 0 && (this.fontFamily.value = t.fontFamily), this.update();
+  }
+  setFeatures(t = {}) {
+    t.letterSpacing !== void 0 && (this.toggleGroup("#groupLetterSpacing", t.letterSpacing), t.letterSpacing ? this.removeAttribute("hide-letter-spacing") : this.setAttribute("hide-letter-spacing", "")), t.wordSpacing !== void 0 && (this.toggleGroup("#groupWordSpacing", t.wordSpacing), t.wordSpacing ? this.removeAttribute("hide-word-spacing") : this.setAttribute("hide-word-spacing", "")), t.lineHeight !== void 0 && (this.toggleGroup("#groupLineHeight", t.lineHeight), t.lineHeight ? this.removeAttribute("hide-line-height") : this.setAttribute("hide-line-height", "")), t.contrast !== void 0 && (this.toggleGroup("#groupContrast", t.contrast), t.contrast ? this.removeAttribute("hide-contrast") : this.setAttribute("hide-contrast", ""));
+  }
+};
+customElements.define("typography-controller", n);
+const d = o({
+  react: a,
+  tagName: "typography-controller",
+  elementClass: customElements.get("typography-controller"),
+  events: {
+    onChange: "change"
+  }
+});
+export {
+  d as TypographyController
+};

package/package.json

@@ -1,52 +1,59 @@
-{
-  "name": "typography-controller",
-  "version": "1.0.2",
-  "description": "A framework-agnostic Web Component that provides a beautiful typography control panel with sliders for font size, letter spacing, word spacing, line height, contrast, and font family.",
-  "author": "Achuth Kamath",
-  "license": "MIT",
-  "type": "module",
-  "main": "dist/typography-controller.js",
-  "module": "dist/typography-controller.js",
-  "source": "src/typography-controller.js",
-  "exports": {
-    ".": "./dist/typography-controller.js",
-    "./react": "./dist/react-wrapper.js"
-  },
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "keywords": [
-    "web-components",
-    "custom-elements",
-    "typography",
-    "ui",
-    "ui-library",
-    "accessibility",
-    "design-system",
-    "frontend",
-    "javascript"
-  ],
-  "homepage": "https://github.com/achuthkamath/typography-controller",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/achuthkamath/typography-controller.git"
-  },
-  "bugs": {
-    "url": "https://github.com/achuthkamath/typography-controller/issues"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^5.1.2",
-    "vite": "^5.4.21"
-  },
-  "dependencies": {
-    "user": "^0.0.0"
-  }
-}
+{
+  "name": "typography-controller",
+  "version": "1.0.3",
+  "description": "A framework-agnostic Web Component that provides a beautiful typography control panel with sliders for font size, letter spacing, word spacing, line height, contrast, and font family.",
+  "author": "Achuth Kamath",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/web/typography-controller.js",
+  "module": "dist/web/typography-controller.js",
+  "source": "src/typography-controller.js",
+  "exports": {
+    ".": "./dist/web/typography-controller.js",
+    "./react": "./dist/react/react-wrapper.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vite build --config react.vite.config.js",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "typography",
+    "ui",
+    "ui-library",
+    "accessibility",
+    "design-system",
+    "frontend",
+    "javascript"
+  ],
+  "homepage": "https://github.com/achuthkamath91/Typography-Controller",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/achuthkamath91/Typography-Controller.git"
+  },
+  "bugs": {
+    "url": "https://github.com/achuthkamath91/Typography-Controller/issues"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.3",
+    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/release-notes-generator": "^14.0.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "semantic-release": "^25.0.3",
+    "vite": "^5.4.21"
+  },
+  "dependencies": {
+    "user": "^0.0.0"
+  }
+}