@usman404/crowjs 1.1.2 → 1.2.0

package/CONTRIBUTING.md

@@ -1 +1,67 @@
+# Contributing to CrowJS 🐦‍⬛
 
+First off, thank you for considering contributing to CrowJS! It’s people like you who make the p5.js ecosystem better for everyone.
+
+To maintain code quality and stability, we follow a strict contribution workflow. Please read the guidelines below before getting started.
+
+---
+
+## 🏗️ Getting Started
+
+### 1. Understand the Structure
+CrowJS is a canvas-native library. Before writing code, please:
+* **Read the Documentation:** Visit [crow-js.vercel.app](https://crow-js.vercel.app/) to understand the component lifecycle and event system.
+* **Explore the Source:** Look at `Core/Root.js` to see how the main engine works and `UIComponents/` to see how existing components (like Buttons or Sliders) are implemented.
+
+### 2. Local Setup
+1. Fork the repository.
+2. Clone your fork locally:
+   ```bash
+   git clone [https://github.com/YOUR_USERNAME/CrowJS.git](https://github.com/YOUR_USERNAME/CrowJS.git)
+   ```
+3. Run `npm install` to set up the development environment (including VitePress for docs).
+
+---
+
+## 🚦 Contribution Workflow
+
+**Note:** Direct pushes to the `main` branch are disabled. All changes must come through a Pull Request (PR).
+
+### Step 1: Create a Branch
+Always create a descriptive branch for your work:
+```bash
+git checkout -b feature/your-feature-name
+# OR
+git checkout -b fix/issue-description
+```
+
+### Step 2: Make Your Changes
+* Follow the existing code style (clean, documented, and modular).
+* If you add a new component, ensure it inherits from the appropriate base class.
+* Update the documentation in the `docs/` folder if your changes affect the API.
+
+### Step 3: Open a Pull Request
+1. Push your branch to your fork.
+2. Open a Pull Request against the CrowJS `main` branch.
+3. **Requirement:** Per our repository settings, at least **one approving review** is required before a PR can be merged. 
+4. Ensure all conversations and feedback in the PR are resolved.
+
+---
+
+## 📝 Coding Guidelines
+* **No DOM Interference:** Remember, CrowJS is canvas-native. Avoid using `document.createElement` or CSS overlays unless absolutely necessary.
+* **Performance:** p5.js sketches run at 60fps. Ensure your component's `draw` (or `show`) methods are highly optimized.
+* **Compatibility:** Ensure your code works with the latest version of p5.js.
+
+## 🐛 Reporting Bugs
+If you find a bug, please open an **Issue** with:
+* A clear description of the bug.
+* A minimal `sketch.js` example demonstrating the issue.
+* Your browser and OS version.
+
+## 💡 Feature Requests
+Have an idea for a new component (like a Color Picker or Graph)? Open an issue with the "Feature Request" label to discuss it before starting work!
+
+---
+
+Created with ❤️ by [Usman Ali](https://github.com/UsmanAli404)

package/Frames/GridFrame.js

@@ -134,12 +134,25 @@ export class GridFrame extends Frame{
     {
       //check if grid is configured or not
       if(this.grid===null){
+        //preserve any user-set weights before auto-configuring
+        let savedRowWeights = [...this.rowWeights];
+        let savedColWeights = [...this.colWeights];
+
         this.gridConfig(this.rows, this.cols);
-        console.log(`grid configured automatically [${this.rows}x${this.cols}]`);
 
-        // console.log("element can't be added: gird not configured,");
-        // console.log("call .gridConfig(rows, cols) first to configure grid before adding any elements!");
-        return;
+        //restore user-set weights
+        for(let i=0; i<savedRowWeights.length && i<this.rows; i++){
+          if(savedRowWeights[i] != null){
+            this.rowConfig(i, savedRowWeights[i]);
+          }
+        }
+        for(let i=0; i<savedColWeights.length && i<this.cols; i++){
+          if(savedColWeights[i] != null){
+            this.colConfig(i, savedColWeights[i]);
+          }
+        }
+
+        console.log(`grid configured automatically [${this.rows}x${this.cols}]`);
       }
 
       if(element===null){
@@ -326,6 +339,18 @@ export class GridFrame extends Frame{
     gridConfig(rows, cols){
       this.rows = rows;
       this.cols = cols;
+
+      //clear stale children
+      for(let i=0; i<this.children.length; i++){
+        this.children[i].parent = null;
+      }
+      this.children = [];
+
+      //reset weights before reconfiguring
+      this.rowWeights = [];
+      this.colWeights = [];
+      this.totalRowWeight = 0;
+      this.totalColWeight = 0;
   
       for(let i=0; i<this.rows; i++){
         this.rowConfig(i, 1);

package/Frames/ScrollFrame.js

@@ -299,6 +299,17 @@ export class ScrollFrame extends Frame{
       this.totalWeight -= this.preferences[index][0];
       this.preferences = this.preferences.filter((_, i) => i!==index);
       this.removeChild(element);
+
+      //recalculate scroll tracking indices
+      if(this.enableVScroll){
+        this.recalcTopper();
+        this.recalcDeepest();
+      }
+      if(this.enableHScroll){
+        this.recalcLeftist();
+        this.recalcRightist();
+      }
+
       this.redraw();
 
       console.log(`element (id: ${element.id}) successfully removed from ${this.constructor.name} (id: ${this.id})!`);
@@ -315,14 +326,15 @@ export class ScrollFrame extends Frame{
         return;
       }
 
-      if(weight<1){
-        console.log("weight to set must be >= 1");
+      if(weight<=0){
+        console.log("weight can't be non-positive");
         return;
       }
 
       this.totalWeight -= this.preferences[index][0];
       this.totalWeight += weight;
       this.preferences[index][0] = weight;
+      this.redraw();
     }
 
     /**
@@ -356,6 +368,7 @@ export class ScrollFrame extends Frame{
       }
 
       this.preferences[index][1] = padL;
+      this.redraw();
     }
 
     /**
@@ -389,6 +402,7 @@ export class ScrollFrame extends Frame{
       }
 
       this.preferences[index][2] = padR;
+      this.redraw();
     }
 
     /**
@@ -422,6 +436,7 @@ export class ScrollFrame extends Frame{
       }
 
       this.preferences[index][3] = padT;
+      this.redraw();
     }
 
     /**
@@ -455,6 +470,7 @@ export class ScrollFrame extends Frame{
       }
 
       this.preferences[index][4] = padB;
+      this.redraw();
     }
 
     /**
@@ -556,6 +572,63 @@ export class ScrollFrame extends Frame{
         this.rightist = i;
       }
     }
+
+    /**
+   * Recalculates the topmost child index by scanning all children
+   */
+    recalcTopper(){
+      if(this.children.length===0){ this.topper=-1; return; }
+      this.topper=0;
+      for(let i=1; i<this.children.length; i++){
+        if(this.children[i].y + this.preferences[i][3] <
+           this.children[this.topper].y + this.preferences[this.topper][3]){
+          this.topper=i;
+        }
+      }
+    }
+
+    /**
+   * Recalculates the bottommost child index by scanning all children
+   */
+    recalcDeepest(){
+      if(this.children.length===0){ this.deepest=-1; return; }
+      this.deepest=0;
+      for(let i=1; i<this.children.length; i++){
+        if(this.children[i].y + this.children[i].height - this.preferences[i][4] >
+           this.children[this.deepest].y + this.children[this.deepest].height - this.preferences[this.deepest][4]){
+          this.deepest=i;
+        }
+      }
+    }
+
+    /**
+   * Recalculates the leftmost child index by scanning all children
+   */
+    recalcLeftist(){
+      if(this.children.length===0){ this.leftist=-1; return; }
+      this.leftist=0;
+      for(let i=1; i<this.children.length; i++){
+        if(this.children[i].x + this.preferences[i][1] <
+           this.children[this.leftist].x + this.preferences[this.leftist][1]){
+          this.leftist=i;
+        }
+      }
+    }
+
+    /**
+   * Recalculates the rightmost child index by scanning all children
+   */
+    recalcRightist(){
+      if(this.children.length===0){ this.rightist=-1; return; }
+      this.rightist=0;
+      for(let i=1; i<this.children.length; i++){
+        if(this.children[i].x + this.children[i].width - this.preferences[i][2] >
+           this.children[this.rightist].x + this.children[this.rightist].width - this.preferences[this.rightist][2]){
+          this.rightist=i;
+        }
+      }
+    }
+
     /**
    * Scrolls content downward
    */

package/README.md

@@ -1,130 +1,132 @@
-# CrowJS 🐦‍⬛
-**CrowJS** is a lightweight and extensible GUI library built on top of [p5.js](https://p5js.org/), designed for creative coders and simulation builders who need intuitive, canvas-native UI components like buttons, sliders, input fields, and more — all rendered directly inside the p5.js canvas.
+<div align="center">
+  <img src="/docs/public/crowjs_favicon.png" alt="CrowJS Logo" width="270" />
+  
+  # CrowJS
+  
+  **A lightweight, canvas-native GUI library built for p5.js.**
+  
+  [![NPM Version](https://img.shields.io/npm/v/@usman404/crowjs?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@usman404/crowjs)
+  [![Read the Docs](https://img.shields.io/badge/📖_Read_The_Docs-181717?style=for-the-badge&logo=vercel&logoColor=white)](https://crow-js.vercel.app/)
+  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
+
+  <br/>
+
+  *Designed for creative coders and simulation builders who need intuitive UI components like buttons, sliders, and input fields rendered directly inside the p5.js canvas.*
+</div>
 
-![Logo](/crowjs-01-01.png)
+---
 
-## Features
-- Minimal and canvas-native UI for p5.js sketches  
-- Frames, nested layouts, scrollable & grid containers  
-- Customizable UI components: buttons, sliders, toggles, input fields, etc.  
-- Event system inspired by the web (click, hover, focus, blur)  
-- Modular design with support for custom components  
-- Fully drawn inside p5.js (no HTML overlays or DOM interference)  
-- Ideal for creative coding, simulations, visual experiments, and tools  
+## 🌟 Why CrowJS?
+While p5.js is amazing for generative art and simulations, there's a noticeable gap when it comes to in-sketch UI. CrowJS fills that gap by giving you a **canvas-first GUI framework** that blends seamlessly with your visuals without relying on clunky HTML overlays or DOM interference.
 
-## Getting Started
+## ✨ Features
+- **Minimal & Canvas-Native:** UI drawn directly inside your p5.js sketches.
+- **Layout Systems:** Frames, nested layouts, scrollable areas, and grid containers.
+- **Customizable Components:** Buttons, sliders, toggles, input fields, and more.
+- **Web-Style Event System:** Supports `click`, `hover`, `focus`, and `blur`.
+- **Modular Design:** Easily create and integrate your own custom components.
+- **Perfect For:** Creative coding, visual experiments, simulations, and internal tools.
 
-### 1. Install
+---
 
-To use **CrowJS**, begin by downloading this repository and placing the `CrowJS` folder inside your project's source code.  
-Once included, open the `index.html` file in your browser; it already contains the required setup for p5.js and for loading CrowJS modules.
+## 🚀 Getting Started
 
-All GUI development should be done inside **`sketch.js`**, which serves as the main entry point for both your p5.js sketch and all CrowJS components.
+### 1. Installation
 
----
+**Via NPM (Recommended)**
+```bash
+npm install @usman404/crowjs
+```
 
-### ⚠ Important Notes
-- **Do not rename** the `sketch.js` file. CrowJS depends on this filename for consistent module loading.  
-- **Do not alter** the structure or script tags inside `index.html`. Modifying them may prevent CrowJS from running correctly.  
-- A **CDN-based installation** method will be added in the future to make setup even easier.
+**Via Manual Download**
+Download this repository and place the `CrowJS` folder inside your project's source code. Open the `index.html` file in your browser (it already contains the required setup for p5.js and module loading). 
 
----
+> [!WARNING]
+> - **Do not rename** the `sketch.js` file. CrowJS depends on this filename for consistent module loading.  
+> - **Do not alter** the structure or script tags inside `index.html`. Modifying them may prevent CrowJS from running correctly.  
 
 ### 2. Basic Example
+All GUI development should be done inside **`sketch.js`**, which serves as the main entry point for both your p5.js sketch and your CrowJS components.
+
 ```javascript
 import { Root } from "./Core/Root.js";
-import { Label } from "./UIComponents/Label.js";
-
+import { Button } from "./UIComponents/Button.js";
 
 /** @type {Root} */
 let root;
-let clickTimes=1;
-
-window.setup = function(){
-    createCanvas(windowWidth, windowHeight);
-    root = new Root();
+let clickTimes = 0;
 
-    let btnWidth = 200;
-    let btnHeight = 100;
+function setup() {
+  root = new Root();
 
-    let btn = new Label((windowWidth/2)-(btnWidth/2), (windowHeight/2)-(btnHeight/2), 200, 100, "Hello! 👋", 
-      {cornerRadius: 20,
-       backgroundColor: "rgba(0, 0, 0, 1)",
-       textColor: "rgba(255, 255, 255, 1)",
-      });
+  const button = new Button(0, 0, 200, 100, "Click Me! 🐦‍⬛", {
+    cornerRadius: 10,
+  });
 
-    btn.addEventListener("click", (event)=>{
-      clickTimes+=1;
-      event.target.setText(`You clicked ${clickTimes} \ntimes!`);
-    });
+  button.addEventListener('click', (event) => {
+    clickTimes += 1;
+    event.target.setText(`You clicked ${clickTimes} times!`);
+  });
 
-    root.add(btn);
+  root.add(button);
 }
 
-window.draw = function () {
-  background('rgba(255,255,255,255)');
+function draw() {
   root.show();
+  
+  // Event Listeners
   root.mouseEnterEventListeners(mouseX, mouseY);
   root.hoverEventListeners(mouseX, mouseY);
   root.mouseLeaveEventListeners(mouseX, mouseY);
-  root.keyDownEventListeners(mouseX, mouseY);
-}
-
-window.mouseDragged = function (){
-  root.mouseDraggedEventListeners(mouseX, mouseY);
 }
 
-window.mouseClicked = function(){ 
+window.mouseClicked = function() { 
   root.mouseClickedEventListeners(mouseX, mouseY);
 }
 
-window.mousePressed = function(){
+window.mousePressed = function() {
   root.mousePressedEventListeners(mouseX, mouseY);
 }
 
-window.mouseReleased = function(){
+window.mouseReleased = function() {
   root.mouseReleasedEventListeners(mouseX, mouseY);
 }
+```
 
-window.mouseWheel = function(event){
-  root.mouseWheelEventListeners(mouseX, mouseY, event);
-}
+---
 
-window.keyPressed = function(event){
-  if (keyCode === UP_ARROW || keyCode === DOWN_ARROW || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {
-    event.preventDefault();
-  }
+## 🧩 Components Overview
+  
+- Label(x, y, width, height, text, {options})
+- Button
+- ScrollFrame
+- GridFrame
+  
+*More components coming soon!*
 
-  root.keyPressedEventListeners(mouseX, mouseY);
-}
-```
-
-## Components Overview
-- `Label(x, y, width, height, text, {options})`  
-- `ScrollFrame`, `GridFrame`, `Label`, etc.  
+---
 
-More components and documentation coming soon.
+## 📚 Documentation & Tutorials
+A full **video series** and our documentation site are actively being updated! 
 
-## Documentation & Tutorials
-A full **video series** and documentation site are in the works!  
-Stay tuned for:  
+Check out the official docs at **[crow-js.vercel.app](https://crow-js.vercel.app/)** for:  
 - Getting started tutorials  
-- Custom component creation  
+- Custom component creation guides  
 - Internals of CrowJS for contributors  
 
-## Why CrowJS?
-While p5.js is amazing for generative art and simulations, there's a noticeable gap when it comes to in-sketch UI. CrowJS fills that gap by giving you a canvas-first GUI framework that blends seamlessly with your visuals.
+---
 
-## Contributing
-CrowJS is open-source! Contributions, bug reports, and ideas are welcome.  
-See the `CONTRIBUTING.md` file for details.
+## 🤝 Contributing
+CrowJS is open-source! Contributions, bug reports, and ideas are highly welcome.  
+Please see the `CONTRIBUTING.md` file for details on how to get started.
 
-## License
-This project is licensed under the MIT License.  
-See the `LICENSE` file for details.
+## 🔗 Links
+- **Creator's Sketches:** [Usman's p5.js Editor](https://editor.p5js.org/Usman_Ali/sketches/)
+- **Powered By:** [p5.js Official Site](https://p5js.org)
 
-## Links
-- My sketches: [https://editor.p5js.org/Usman_Ali/sketches/](p5js.org/Usman_Ali/sketches/)
-- p5.js: [https://p5js.org](https://p5js.org)
+---
 
-Created with ❤️ by **Usman**
+<div align="center">
+  Created with ❤️ by <b>Usman</b> <br/>
+  <i>Licensed under the MIT License.</i>
+</div>

package/UIComponents/Checkbox.js

@@ -0,0 +1,296 @@
+import { TextComponent } from './TextComponent.js';
+import { Component } from '../Core/Component.js';
+
+export class Checkbox extends TextComponent {
+  /**
+   * Creates a checkbox component with a toggleable checked state and label text.
+   * @param {number} x - The x-coordinate
+   * @param {number} y - The y-coordinate
+   * @param {number} width - The width
+   * @param {number} height - The height
+   * @param {string} label - The text to display next to the checkbox
+   * @param {Object} options - Configuration options
+   * @param {string|null} options.id - Component ID
+   * @param {Component|null} options.parent - Parent component
+   * @param {boolean} options.checked - Initial checked state
+   * @param {p5.Color} options.backgroundColor - Background color
+   * @param {p5.Color} options.textColor - Text color
+   * @param {p5.Color} options.boxColor - Checkbox box background color (unchecked)
+   * @param {p5.Color} options.boxBorderColor - Checkbox box border color
+   * @param {number} options.boxBorderWidth - Checkbox box border width
+   * @param {p5.Color} options.checkedColor - Background color of the box when checked
+   * @param {p5.Color} options.checkmarkColor - Checkmark color
+   * @param {number} options.boxSize - Size of the checkbox box in pixels
+   * @param {number} options.boxGap - Gap between checkbox box and label text
+   * @param {number} options.boxCornerRadius - Corner radius of the checkbox box
+   * @param {p5.Color} options.hoverBoxBorderColor - Box border color on hover
+   * @param {boolean} options.enabled - Whether the checkbox is interactive
+   * @param {boolean} options.borderFlag - Whether to show component border
+   * @param {p5.Color} options.borderColor - Component border color
+   * @param {number} options.borderWidth - Component border width
+   * @param {number} options.cornerRadius - Component corner radius
+   * @param {boolean} options.enableShadow - Enable shadow rendering
+   * @param {string} options.shadowColor - Shadow color (CSS color string)
+   * @param {number} options.shadowBlur - Shadow blur radius
+   * @param {number} options.shadowOffsetX - Shadow offset on X axis
+   * @param {number} options.shadowOffsetY - Shadow offset on Y axis
+   * @param {string} options.HTextAlign - Horizontal text alignment
+   * @param {string} options.VTextAlign - Vertical text alignment
+   * @param {number} options.pad - General padding
+   * @param {number} options.padx - Horizontal padding
+   * @param {number} options.pady - Vertical padding
+   * @param {number} options.padl - Left padding
+   * @param {number} options.padr - Right padding
+   * @param {number} options.padt - Top padding
+   * @param {number} options.padb - Bottom padding
+   * @param {boolean} options.wrap - Whether to wrap text
+   * @param {string} options.wrapMode - Wrap mode: "word" or "char"
+   * @param {string} options.noWrapMode - No-wrap mode: "ellipsis" or "font-size"
+   * @param {string} options.ellipsisMode - Ellipsis mode: "leading", "center", or "trailing"
+   * @param {number} options.margin - General margin for all sides
+   * @param {number} options.marginx - Horizontal margin (left and right)
+   * @param {number} options.marginy - Vertical margin (top and bottom)
+   * @param {number} options.marginl - Left margin
+   * @param {number} options.marginr - Right margin
+   * @param {number} options.margint - Top margin
+   * @param {number} options.marginb - Bottom margin
+   */
+  constructor(x, y, width, height, label, {
+    id = null,
+    parent = null,
+    checked = false,
+    backgroundColor = color('#1e1e2e'),
+    textColor = color('#e0e0e0'),
+    boxColor = color('#2a2a3d'),
+    boxBorderColor = color('#3a3a4d'),
+    boxBorderWidth = 2,
+    checkedColor = color('#4a9eff'),
+    checkmarkColor = color('#ffffff'),
+    boxSize = 18,
+    boxGap = 8,
+    boxCornerRadius = 4,
+    hoverBoxBorderColor = color('#5a5a7a'),
+    enabled = true,
+    borderFlag = false,
+    borderColor = color('#3a3a4d'),
+    borderWidth = 1,
+    cornerRadius = 8,
+    enableShadow = false,
+    shadowColor = 'rgba(0,0,0,0.5)',
+    shadowBlur = 12,
+    shadowOffsetX = 0,
+    shadowOffsetY = 4,
+    HTextAlign = 'left',
+    VTextAlign = 'center',
+    pad = 5,
+    padx = null,
+    pady = null,
+    padl = null,
+    padr = null,
+    padt = null,
+    padb = null,
+    wrap = false,
+    wrapMode = 'word',
+    noWrapMode = 'font-size',
+    ellipsisMode = 'trailing',
+    margin = 0,
+    marginx = null,
+    marginy = null,
+    marginl = null,
+    marginr = null,
+    margint = null,
+    marginb = null,
+    minWidth = 0,
+    minHeight = 0,
+    showDebugOverlay = false,
+  } = {}) {
+    super(x, y, width, height, label, {
+      id,
+      parent,
+      backgroundColor,
+      textColor,
+      borderFlag,
+      borderColor,
+      borderWidth,
+      cornerRadius,
+      enableShadow,
+      shadowColor,
+      shadowBlur,
+      shadowOffsetX,
+      shadowOffsetY,
+      HTextAlign,
+      VTextAlign,
+      pad,
+      padx,
+      pady,
+      padl,
+      padr,
+      padt,
+      padb,
+      wrap,
+      wrapMode,
+      noWrapMode,
+      ellipsisMode,
+      icon: null,
+      iconSize: 20,
+      iconPosition: 'left',
+      iconGap: 6,
+      iconTintColor: null,
+      iconOpacity: 255,
+      margin,
+      marginx,
+      marginy,
+      marginl,
+      marginr,
+      margint,
+      marginb,
+      minWidth,
+      minHeight,
+      showDebugOverlay,
+    });
+
+    this.checked = checked;
+    this.boxColor = boxColor;
+    this.boxBorderColor = boxBorderColor;
+    this.boxBorderWidth = boxBorderWidth;
+    this.checkedColor = checkedColor;
+    this.checkmarkColor = checkmarkColor;
+    this.boxSize = boxSize;
+    this.boxGap = boxGap;
+    this.boxCornerRadius = boxCornerRadius;
+    this.hoverBoxBorderColor = hoverBoxBorderColor;
+    this.enabled = enabled;
+    this.isHovered = false;
+
+    // Absorb box space into left padding so that all TextComponent layout
+    // machinery (renderText, updateLabelSize, getContentWidth, debug overlay)
+    // works correctly without any overrides.
+    this.padl += this.boxSize + this.boxGap;
+
+    // Recalculate label size with the updated padl
+    if (!this.wrap && this.noWrapMode === 'font-size') {
+      this.updateLabelSize();
+    }
+
+    this.addEventListener('mouseEnter', () => {
+      if (!this.enabled) return;
+      this.isHovered = true;
+    });
+
+    this.addEventListener('hover', (event) => {
+      if (!this.enabled) return;
+      cursor('pointer');
+      event.stopPropagation();
+    });
+
+    this.addEventListener('mouseLeave', () => {
+      this.isHovered = false;
+    });
+
+    this.addEventListener('click', () => {
+      if (!this.enabled) return;
+      this.checked = !this.checked;
+    });
+  }
+
+  /**
+   * Returns whether the checkbox is currently checked
+   * @returns {boolean}
+   */
+  isChecked() {
+    return this.checked;
+  }
+
+  /**
+   * Sets the checked state of the checkbox
+   * @param {boolean} checked - Checked state
+   */
+  setChecked(checked) {
+    this.checked = checked;
+  }
+
+  /**
+   * Toggles the checked state
+   */
+  toggle() {
+    this.checked = !this.checked;
+  }
+
+  /**
+   * Enables or disables the checkbox
+   * @param {boolean} enabled - True to enable, false to disable
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled;
+    if (!enabled) {
+      this.isHovered = false;
+    }
+  }
+
+  /**
+   * Renders the checkbox with label
+   */
+  show() {
+    if (this.enableShadow) {
+      this.drawShadow();
+    }
+
+    push();
+    beginClip();
+    rect(this.x, this.y, this.width, this.height, this.cornerRadius);
+    endClip();
+    translate(this.x, this.y);
+
+    // Background
+    fill(this.backgroundColor);
+    rect(0, 0, this.width, this.height, this.cornerRadius);
+
+    // Checkbox box position: sits in the gap between original padl and expanded padl
+    const originalPadl = this.padl - this.boxSize - this.boxGap;
+    const boxX = originalPadl;
+    const boxY = (this.height - this.boxSize) / 2;
+
+    // Draw checkbox box
+    if (this.checked) {
+      fill(this.checkedColor);
+    } else {
+      fill(this.boxColor);
+    }
+
+    if (this.isHovered && this.enabled) {
+      stroke(this.hoverBoxBorderColor);
+    } else {
+      stroke(this.boxBorderColor);
+    }
+    strokeWeight(this.boxBorderWidth);
+    rect(boxX, boxY, this.boxSize, this.boxSize, this.boxCornerRadius);
+
+    // Draw checkmark when checked
+    if (this.checked) {
+      stroke(this.checkmarkColor);
+      strokeWeight(2.5);
+      noFill();
+      const cx = boxX + this.boxSize * 0.5;
+      const cy = boxY + this.boxSize * 0.5;
+      const s = this.boxSize * 0.3;
+      // Checkmark path: two connected lines
+      line(cx - s * 0.6, cy, cx - s * 0.1, cy + s * 0.5);
+      line(cx - s * 0.1, cy + s * 0.5, cx + s * 0.7, cy - s * 0.5);
+    }
+
+    // Draw label text — renderText uses this.padl which already includes box space
+    noStroke();
+    fill(this.enabled ? this.textColor : color(120, 120, 140));
+    this.renderText();
+
+    // Border
+    if (this.borderFlag) {
+      noFill();
+      stroke(this.borderColor);
+      strokeWeight(this.borderWidth);
+      rect(0, 0, this.width, this.height, this.cornerRadius);
+    }
+
+    pop();
+  }
+}

package/UIComponents/RadioButton.js

@@ -0,0 +1,360 @@
+import { TextComponent } from './TextComponent.js';
+import { Component } from '../Core/Component.js';
+
+/**
+ * Static registry of radio button groups.
+ * Maps group name → Set of RadioButton instances.
+ * @type {Map<string, Set<RadioButton>>}
+ */
+const _radioGroups = new Map();
+
+export class RadioButton extends TextComponent {
+  /**
+   * Creates a radio button component with group-exclusive selection and label text.
+   * Only one radio button per `group` can be selected at a time.
+   *
+   * @param {number} x - The x-coordinate
+   * @param {number} y - The y-coordinate
+   * @param {number} width - The width
+   * @param {number} height - The height
+   * @param {string} label - The text to display next to the radio button
+   * @param {Object} options - Configuration options
+   * @param {string|null} options.id - Component ID
+   * @param {Component|null} options.parent - Parent component
+   * @param {string} options.group - The group name this radio button belongs to
+   * @param {boolean} options.selected - Initial selected state
+   * @param {string|*} options.value - The value this radio button represents
+   * @param {p5.Color} options.backgroundColor - Background color
+   * @param {p5.Color} options.textColor - Text color
+   * @param {p5.Color} options.circleColor - Outer circle background color (unselected)
+   * @param {p5.Color} options.circleBorderColor - Outer circle border color
+   * @param {number} options.circleBorderWidth - Outer circle border width
+   * @param {p5.Color} options.selectedColor - Inner dot color when selected
+   * @param {p5.Color} options.selectedCircleBorderColor - Outer circle border color when selected
+   * @param {number} options.circleSize - Diameter of the outer circle in pixels
+   * @param {number} options.dotSize - Diameter of the inner dot in pixels
+   * @param {number} options.circleGap - Gap between circle and label text
+   * @param {p5.Color} options.hoverCircleBorderColor - Circle border color on hover
+   * @param {boolean} options.enabled - Whether the radio button is interactive
+   * @param {boolean} options.borderFlag - Whether to show component border
+   * @param {p5.Color} options.borderColor - Component border color
+   * @param {number} options.borderWidth - Component border width
+   * @param {number} options.cornerRadius - Component corner radius
+   * @param {boolean} options.enableShadow - Enable shadow rendering
+   * @param {string} options.shadowColor - Shadow color (CSS color string)
+   * @param {number} options.shadowBlur - Shadow blur radius
+   * @param {number} options.shadowOffsetX - Shadow offset on X axis
+   * @param {number} options.shadowOffsetY - Shadow offset on Y axis
+   * @param {string} options.HTextAlign - Horizontal text alignment
+   * @param {string} options.VTextAlign - Vertical text alignment
+   * @param {number} options.pad - General padding
+   * @param {number} options.padx - Horizontal padding
+   * @param {number} options.pady - Vertical padding
+   * @param {number} options.padl - Left padding
+   * @param {number} options.padr - Right padding
+   * @param {number} options.padt - Top padding
+   * @param {number} options.padb - Bottom padding
+   * @param {boolean} options.wrap - Whether to wrap text
+   * @param {string} options.wrapMode - Wrap mode: "word" or "char"
+   * @param {string} options.noWrapMode - No-wrap mode: "ellipsis" or "font-size"
+   * @param {string} options.ellipsisMode - Ellipsis mode: "leading", "center", or "trailing"
+   * @param {number} options.margin - General margin for all sides
+   * @param {number} options.marginx - Horizontal margin (left and right)
+   * @param {number} options.marginy - Vertical margin (top and bottom)
+   * @param {number} options.marginl - Left margin
+   * @param {number} options.marginr - Right margin
+   * @param {number} options.margint - Top margin
+   * @param {number} options.marginb - Bottom margin
+   */
+  constructor(x, y, width, height, label, {
+    id = null,
+    parent = null,
+    group = 'default',
+    selected = false,
+    value = null,
+    backgroundColor = color('#1e1e2e'),
+    textColor = color('#e0e0e0'),
+    circleColor = color('#2a2a3d'),
+    circleBorderColor = color('#3a3a4d'),
+    circleBorderWidth = 2,
+    selectedColor = color('#4a9eff'),
+    selectedCircleBorderColor = color('#4a9eff'),
+    circleSize = 18,
+    dotSize = 10,
+    circleGap = 8,
+    hoverCircleBorderColor = color('#5a5a7a'),
+    enabled = true,
+    borderFlag = false,
+    borderColor = color('#3a3a4d'),
+    borderWidth = 1,
+    cornerRadius = 8,
+    enableShadow = false,
+    shadowColor = 'rgba(0,0,0,0.5)',
+    shadowBlur = 12,
+    shadowOffsetX = 0,
+    shadowOffsetY = 4,
+    HTextAlign = 'left',
+    VTextAlign = 'center',
+    pad = 5,
+    padx = null,
+    pady = null,
+    padl = null,
+    padr = null,
+    padt = null,
+    padb = null,
+    wrap = false,
+    wrapMode = 'word',
+    noWrapMode = 'font-size',
+    ellipsisMode = 'trailing',
+    margin = 0,
+    marginx = null,
+    marginy = null,
+    marginl = null,
+    marginr = null,
+    margint = null,
+    marginb = null,
+    minWidth = 0,
+    minHeight = 0,
+    showDebugOverlay = false,
+  } = {}) {
+    super(x, y, width, height, label, {
+      id,
+      parent,
+      backgroundColor,
+      textColor,
+      borderFlag,
+      borderColor,
+      borderWidth,
+      cornerRadius,
+      enableShadow,
+      shadowColor,
+      shadowBlur,
+      shadowOffsetX,
+      shadowOffsetY,
+      HTextAlign,
+      VTextAlign,
+      pad,
+      padx,
+      pady,
+      padl,
+      padr,
+      padt,
+      padb,
+      wrap,
+      wrapMode,
+      noWrapMode,
+      ellipsisMode,
+      icon: null,
+      iconSize: 20,
+      iconPosition: 'left',
+      iconGap: 6,
+      iconTintColor: null,
+      iconOpacity: 255,
+      margin,
+      marginx,
+      marginy,
+      marginl,
+      marginr,
+      margint,
+      marginb,
+      minWidth,
+      minHeight,
+      showDebugOverlay,
+    });
+
+    this.group = group;
+    this.selected = false;
+    this.value = value ?? label;
+    this.circleColor = circleColor;
+    this.circleBorderColor = circleBorderColor;
+    this.circleBorderWidth = circleBorderWidth;
+    this.selectedColor = selectedColor;
+    this.selectedCircleBorderColor = selectedCircleBorderColor;
+    this.circleSize = circleSize;
+    this.dotSize = dotSize;
+    this.circleGap = circleGap;
+    this.hoverCircleBorderColor = hoverCircleBorderColor;
+    this.enabled = enabled;
+    this.isHovered = false;
+
+    // Absorb circle space into left padding so that all TextComponent layout
+    // machinery (renderText, updateLabelSize, getContentWidth, debug overlay)
+    // works correctly without any overrides.
+    this.padl += this.circleSize + this.circleGap;
+
+    // Recalculate label size with the updated padl
+    if (!this.wrap && this.noWrapMode === 'font-size') {
+      this.updateLabelSize();
+    }
+
+    // Register in group
+    if (!_radioGroups.has(this.group)) {
+      _radioGroups.set(this.group, new Set());
+    }
+    _radioGroups.get(this.group).add(this);
+
+    // If initially selected, deselect others in the group
+    if (selected) {
+      this.select();
+    }
+
+    this.addEventListener('mouseEnter', () => {
+      if (!this.enabled) return;
+      this.isHovered = true;
+    });
+
+    this.addEventListener('hover', (event) => {
+      if (!this.enabled) return;
+      cursor('pointer');
+      event.stopPropagation();
+    });
+
+    this.addEventListener('mouseLeave', () => {
+      this.isHovered = false;
+    });
+
+    this.addEventListener('click', () => {
+      if (!this.enabled) return;
+      this.select();
+    });
+  }
+
+  /**
+   * Selects this radio button and deselects all others in the same group.
+   */
+  select() {
+    const group = _radioGroups.get(this.group);
+    if (group) {
+      for (const rb of group) {
+        if (rb !== this) {
+          rb.selected = false;
+        }
+      }
+    }
+    this.selected = true;
+  }
+
+  /**
+   * Deselects this radio button.
+   */
+  deselect() {
+    this.selected = false;
+  }
+
+  /**
+   * Returns whether this radio button is currently selected.
+   * @returns {boolean}
+   */
+  isSelected() {
+    return this.selected;
+  }
+
+  /**
+   * Returns the value of the currently selected radio button in this group.
+   * @returns {*|null} The value, or null if none selected.
+   */
+  getSelectedValue() {
+    const group = _radioGroups.get(this.group);
+    if (group) {
+      for (const rb of group) {
+        if (rb.selected) return rb.value;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Returns all RadioButton instances in the same group.
+   * @returns {RadioButton[]}
+   */
+  getGroupMembers() {
+    const group = _radioGroups.get(this.group);
+    return group ? [...group] : [];
+  }
+
+  /**
+   * Enables or disables the radio button.
+   * @param {boolean} enabled - True to enable, false to disable
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled;
+    if (!enabled) {
+      this.isHovered = false;
+    }
+  }
+
+  /**
+   * Removes this radio button from its group registry.
+   * Call this when the radio button is permanently removed from the UI.
+   */
+  destroy() {
+    const group = _radioGroups.get(this.group);
+    if (group) {
+      group.delete(this);
+      if (group.size === 0) {
+        _radioGroups.delete(this.group);
+      }
+    }
+  }
+
+  /**
+   * Renders the radio button with label.
+   */
+  show() {
+    if (this.enableShadow) {
+      this.drawShadow();
+    }
+
+    push();
+    beginClip();
+    rect(this.x, this.y, this.width, this.height, this.cornerRadius);
+    endClip();
+    translate(this.x, this.y);
+
+    // Background
+    fill(this.backgroundColor);
+    rect(0, 0, this.width, this.height, this.cornerRadius);
+
+    // Radio circle position: sits in the gap between original padl and expanded padl
+    const originalPadl = this.padl - this.circleSize - this.circleGap;
+    const cx = originalPadl + this.circleSize / 2;
+    const cy = this.height / 2;
+
+    // Draw outer circle
+    if (this.selected) {
+      fill(this.circleColor);
+      stroke(this.selectedCircleBorderColor);
+    } else {
+      fill(this.circleColor);
+      if (this.isHovered && this.enabled) {
+        stroke(this.hoverCircleBorderColor);
+      } else {
+        stroke(this.circleBorderColor);
+      }
+    }
+    strokeWeight(this.circleBorderWidth);
+    ellipse(cx, cy, this.circleSize, this.circleSize);
+
+    // Draw inner dot when selected
+    if (this.selected) {
+      noStroke();
+      fill(this.selectedColor);
+      ellipse(cx, cy, this.dotSize, this.dotSize);
+    }
+
+    // Draw label text — renderText uses this.padl which already includes circle space
+    noStroke();
+    fill(this.enabled ? this.textColor : color(120, 120, 140));
+    this.renderText();
+
+    // Border
+    if (this.borderFlag) {
+      noFill();
+      stroke(this.borderColor);
+      strokeWeight(this.borderWidth);
+      rect(0, 0, this.width, this.height, this.cornerRadius);
+    }
+
+    pop();
+  }
+}

package/compile_instructions.txt

@@ -0,0 +1,3 @@
+- npm run docs:dev to run dev server and test docs site
+- bump npm versions:
+    

package/index.js

@@ -16,6 +16,8 @@ const ScrollFrame = require('./Frames/ScrollFrame');
 const Input = require('./UIComponents/Input');
 const Label = require('./UIComponents/Label');
 const Button = require('./UIComponents/Button');
+const Checkbox = require('./UIComponents/Checkbox');
+const RadioButton = require('./UIComponents/RadioButton');
 const TextField = require('./UIComponents/TextField');
 const UIComponent = require('./UIComponents/UIComponent');
 const Icon = require('./UIComponents/Icon');
@@ -39,6 +41,8 @@ module.exports = {
   Input,
   Label,
   Button,
+  Checkbox,
+  RadioButton,
   TextField,
   UIComponent,
   Icon

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@usman404/crowjs",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "lightweight and extensible GUI library built on top of p5.js",
   "keywords": [
-    "CROWJS"
+    "p5js",
+    "gui",
+    "canvas",
+    "creative-coding",
+    "crowjs"
   ],
   "homepage": "https://crow-js.vercel.app/",
   "bugs": {
@@ -11,11 +15,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/UsmanAli404/CrowJS"
+    "url": "git+https://github.com/UsmanAli404/CrowJS.git"
   },
   "license": "MIT",
   "author": "Usman Ali",
-  "type": "commonjs",
+  "type": "module",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -27,4 +31,4 @@
     "@iconify/vue": "^4.1.2",
     "vitepress": "^1.6.4"
   }
-}
+}

package/problems.txt

@@ -1 +1,4 @@
-- work on default look of all items.
+- work on default look of all items.
+- make a about me page
+- add more components
+- 

package/sketch.js

@@ -1,6 +1,8 @@
 import { Root } from "./Core/Root.js";
 import { Label } from "./UIComponents/Label.js";
-
+import { Checkbox } from "./UIComponents/Checkbox.js";
+import { RadioButton } from "./UIComponents/RadioButton.js";
+import { GridFrame } from "./Frames/GridFrame.js";
 
 /** @type {Root} */
 let root;
@@ -10,21 +12,23 @@ window.setup = function(){
     createCanvas(windowWidth, windowHeight);
     root = new Root();
 
-    let btnWidth = 200;
-    let btnHeight = 100;
+    const frame = new GridFrame(20, 20, 500, 50, {
+      rows: 1,
+      cols: 3,
+      backgroundColor: "#1e1e2e",
+    });
+
+    const rb1 = new RadioButton(0, 0, 0, 0, "Low", { group: "quality", value: "low", selected: true });
+    const rb2 = new RadioButton(0, 0, 0, 0, "Medium", { group: "quality", value: "medium" });
+    const rb3 = new RadioButton(0, 0, 0, 0, "High", { group: "quality", value: "high" });
 
-    let btn = new Label((windowWidth/2)-(btnWidth/2), (windowHeight/2)-(btnHeight/2), 200, 100, "Hello! 👋", 
-      {cornerRadius: 20,
-       backgroundColor: "rgba(0, 0, 0, 1)",
-       textColor: "rgba(255, 255, 255, 1)",
-      });
+    frame.colConfig(1, 2);
 
-    btn.addEventListener("click", (event)=>{
-      clickTimes+=1;
-      event.target.setText(`You clicked ${clickTimes} \ntimes!`);
-    });
+    frame.add(rb1, 0, 0);
+    frame.add(rb2, 0, 1);
+    frame.add(rb3, 0, 2);
 
-    root.add(btn);
+    root.add(frame);
 }
 
 window.draw = function () {