flip-toggle 0.0.1

package/README.md

@@ -0,0 +1,68 @@
+# Flip
+
+A lightweight, accessible toggle component with smooth animations.
+
+## Installation
+
+```bash
+npm install flip
+```
+
+## Usage
+
+```js
+import { Toggle } from 'flip'
+import 'flip/styles.css'
+
+const toggle = new Toggle(document.getElementById('my-toggle'), {
+  checked: false,
+  disabled: false,
+  onChange: (checked) => {
+    console.log('Toggle state:', checked)
+  }
+})
+```
+
+## API
+
+### Options
+
+- `checked` (boolean) - Initial checked state. Default: `false`
+- `disabled` (boolean) - Whether the toggle is disabled. Default: `false`
+- `onChange` (function) - Callback fired when toggle state changes
+
+### Methods
+
+- `toggle.setChecked(checked)` - Programmatically set checked state
+- `toggle.setDisabled(disabled)` - Programmatically set disabled state
+
+## Customization
+
+Override CSS variables to customize appearance:
+
+```css
+.flip-toggle {
+  --toggle-width: 61px;
+  --toggle-height: 31px;
+  --toggle-padding: 2px;
+  --thumb-size: 27px;
+  --toggle-bg: #e5e5ea;
+  --toggle-bg-checked: #34c759;
+}
+```
+
+## Features
+
+- ✅ Lightweight (~2KB)
+- ✅ Accessible (ARIA, keyboard navigation)
+- ✅ Smooth animations
+- ✅ Customizable
+- ✅ No dependencies
+
+## Author
+
+[Ryan Cuff](https://ryancuff.xyz)
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,77 @@
+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);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Toggle: () => Toggle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/toggle.js
+var Toggle = class {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.checked = options.checked ?? false;
+    this.disabled = options.disabled ?? false;
+    this.onChange = options.onChange;
+    this.render();
+  }
+  render() {
+    this.element.classList.add("flip-toggle");
+    this.element.setAttribute("role", "switch");
+    this.element.setAttribute("aria-checked", this.checked);
+    this.element.setAttribute("tabindex", "0");
+    if (this.disabled) {
+      this.element.setAttribute("aria-disabled", "true");
+    }
+    const thumb = document.createElement("span");
+    thumb.classList.add("flip-toggle-thumb");
+    this.element.appendChild(thumb);
+    this.element.addEventListener("click", () => this.toggle());
+    this.element.addEventListener("keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        this.toggle();
+      }
+    });
+  }
+  toggle() {
+    var _a;
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.element.setAttribute("aria-checked", this.checked);
+    (_a = this.onChange) == null ? void 0 : _a.call(this, this.checked);
+  }
+  setChecked(checked) {
+    this.checked = checked;
+    this.element.setAttribute("aria-checked", this.checked);
+  }
+  setDisabled(disabled) {
+    this.disabled = disabled;
+    if (disabled) {
+      this.element.setAttribute("aria-disabled", "true");
+    } else {
+      this.element.removeAttribute("aria-disabled");
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toggle
+});

package/dist/index.d.cts

@@ -0,0 +1,62 @@
+class Toggle {
+    constructor(element, options = {}) {
+      this.element = element;
+      this.checked = options.checked ?? false;
+      this.disabled = options.disabled ?? false;
+      this.onChange = options.onChange;
+      
+      this.render();
+    }
+    
+    render() {
+      // Add base class
+      this.element.classList.add('flip-toggle');
+      
+      // Accessibility attributes
+      this.element.setAttribute('role', 'switch');
+      this.element.setAttribute('aria-checked', this.checked);
+      this.element.setAttribute('tabindex', '0');
+      
+      if (this.disabled) {
+        this.element.setAttribute('aria-disabled', 'true');
+      }
+      
+      // Create thumb element
+      const thumb = document.createElement('span');
+      thumb.classList.add('flip-toggle-thumb');
+      this.element.appendChild(thumb);
+      
+      // Event listeners
+      this.element.addEventListener('click', () => this.toggle());
+      this.element.addEventListener('keydown', (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault();
+          this.toggle();
+        }
+      });
+    }
+    
+    toggle() {
+      if (this.disabled) return
+      
+      this.checked = !this.checked;
+      this.element.setAttribute('aria-checked', this.checked);
+      this.onChange?.(this.checked);
+    }
+    
+    setChecked(checked) {
+      this.checked = checked;
+      this.element.setAttribute('aria-checked', this.checked);
+    }
+    
+    setDisabled(disabled) {
+      this.disabled = disabled;
+      if (disabled) {
+        this.element.setAttribute('aria-disabled', 'true');
+      } else {
+        this.element.removeAttribute('aria-disabled');
+      }
+    }
+  }
+
+export { Toggle };

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+class Toggle {
+    constructor(element, options = {}) {
+      this.element = element;
+      this.checked = options.checked ?? false;
+      this.disabled = options.disabled ?? false;
+      this.onChange = options.onChange;
+      
+      this.render();
+    }
+    
+    render() {
+      // Add base class
+      this.element.classList.add('flip-toggle');
+      
+      // Accessibility attributes
+      this.element.setAttribute('role', 'switch');
+      this.element.setAttribute('aria-checked', this.checked);
+      this.element.setAttribute('tabindex', '0');
+      
+      if (this.disabled) {
+        this.element.setAttribute('aria-disabled', 'true');
+      }
+      
+      // Create thumb element
+      const thumb = document.createElement('span');
+      thumb.classList.add('flip-toggle-thumb');
+      this.element.appendChild(thumb);
+      
+      // Event listeners
+      this.element.addEventListener('click', () => this.toggle());
+      this.element.addEventListener('keydown', (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault();
+          this.toggle();
+        }
+      });
+    }
+    
+    toggle() {
+      if (this.disabled) return
+      
+      this.checked = !this.checked;
+      this.element.setAttribute('aria-checked', this.checked);
+      this.onChange?.(this.checked);
+    }
+    
+    setChecked(checked) {
+      this.checked = checked;
+      this.element.setAttribute('aria-checked', this.checked);
+    }
+    
+    setDisabled(disabled) {
+      this.disabled = disabled;
+      if (disabled) {
+        this.element.setAttribute('aria-disabled', 'true');
+      } else {
+        this.element.removeAttribute('aria-disabled');
+      }
+    }
+  }
+
+export { Toggle };

package/dist/index.js

@@ -0,0 +1,51 @@
+// src/toggle.js
+var Toggle = class {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.checked = options.checked ?? false;
+    this.disabled = options.disabled ?? false;
+    this.onChange = options.onChange;
+    this.render();
+  }
+  render() {
+    this.element.classList.add("flip-toggle");
+    this.element.setAttribute("role", "switch");
+    this.element.setAttribute("aria-checked", this.checked);
+    this.element.setAttribute("tabindex", "0");
+    if (this.disabled) {
+      this.element.setAttribute("aria-disabled", "true");
+    }
+    const thumb = document.createElement("span");
+    thumb.classList.add("flip-toggle-thumb");
+    this.element.appendChild(thumb);
+    this.element.addEventListener("click", () => this.toggle());
+    this.element.addEventListener("keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        this.toggle();
+      }
+    });
+  }
+  toggle() {
+    var _a;
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.element.setAttribute("aria-checked", this.checked);
+    (_a = this.onChange) == null ? void 0 : _a.call(this, this.checked);
+  }
+  setChecked(checked) {
+    this.checked = checked;
+    this.element.setAttribute("aria-checked", this.checked);
+  }
+  setDisabled(disabled) {
+    this.disabled = disabled;
+    if (disabled) {
+      this.element.setAttribute("aria-disabled", "true");
+    } else {
+      this.element.removeAttribute("aria-disabled");
+    }
+  }
+};
+export {
+  Toggle
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "flip-toggle",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/toggle.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.js --format cjs,esm --minify",
+    "dev": "tsup src/index.js --format cjs,esm --dts --watch"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}