From d95526c4706c16b553d881473f09aba0dd718acd Mon Sep 17 00:00:00 2001
From: Moeki Kawakami <moeki.kawakami@icloud.com>
Date: Sat, 19 Oct 2024 18:26:06 +0900
Subject: [PATCH] Improve dom interface

---
 README.md                                     | 120 +---
 lib/clapton/javascripts/dist/c                | 559 -----------------
 lib/clapton/javascripts/dist/c-base.js        | 589 ------------------
 lib/clapton/javascripts/dist/c-for-test.js    | 379 ++++-------
 lib/clapton/javascripts/dist/c.js             | 379 ++++-------
 .../javascripts/dist/components-for-test.js   | 314 ++--------
 lib/clapton/javascripts/dist/components.js    | 309 ++-------
 lib/clapton/javascripts/src/c-base.ts         |  78 ++-
 .../javascripts/src/components-for-test.ts    |   9 +-
 lib/clapton/javascripts/src/components.ts     |   9 +-
 .../src/components/{box.ts => base.ts}        |  14 +-
 .../src/components/block-quote.spec.ts        |   2 +-
 .../javascripts/src/components/block-quote.ts |  16 +-
 .../javascripts/src/components/bold.ts        |  16 +-
 .../javascripts/src/components/button.ts      |  21 +-
 .../src/components/checkbox.spec.ts           |  16 -
 .../javascripts/src/components/checkbox.ts    |  23 -
 .../javascripts/src/components/code.ts        |  16 +-
 .../javascripts/src/components/component.ts   |   4 +-
 .../src/components/datetime-field.spec.ts     |  16 -
 .../components/{box.spec.ts => div.spec.ts}   |  16 +-
 lib/clapton/javascripts/src/components/div.ts |   8 +
 .../javascripts/src/components/element.ts     |  12 +-
 .../javascripts/src/components/emphasis.ts    |  16 +-
 .../javascripts/src/components/form.ts        |  16 +-
 .../javascripts/src/components/heading.ts     |  14 +-
 .../javascripts/src/components/image.spec.ts  |   4 +-
 .../javascripts/src/components/image.ts       |  17 +-
 .../javascripts/src/components/input.spec.ts  |  16 +
 .../{datetime-field.ts => input.ts}           |  20 +-
 .../javascripts/src/components/link.spec.ts   |  12 +-
 .../javascripts/src/components/link.ts        |  19 +-
 .../javascripts/src/components/list-item.ts   |  16 +-
 .../javascripts/src/components/list.ts        |  16 +-
 .../src/components/ordered-list.ts            |  16 +-
 .../javascripts/src/components/paragraph.ts   |  16 +-
 .../javascripts/src/components/quote.ts       |  16 +-
 .../src/components/radio-button.spec.ts       |  16 -
 .../src/components/radio-button.ts            |  23 -
 .../javascripts/src/components/select.ts      |   8 +-
 .../javascripts/src/components/span.ts        |  16 +-
 .../javascripts/src/components/text-area.ts   |  13 +-
 .../src/components/text-field.spec.ts         |  16 -
 .../javascripts/src/components/text-field.ts  |  23 -
 lib/clapton/test_helper/base.rb               |   8 +-
 .../app/components/category_list_component.rb |   2 +-
 test/dummy/app/components/chat_component.rb   |   2 +-
 test/dummy/app/components/home_component.rb   |   2 +-
 .../app/components/item_list_component.rb     |   2 +-
 .../dummy/app/components/message_component.rb |   2 +-
 test/dummy/app/components/sample_component.rb |  18 +-
 test/dummy/app/components/shop_component.rb   |   2 +-
 .../app/components/task_item_component.rb     |   6 +-
 .../app/components/task_list_component.rb     |   2 +-
 .../app/components/user_form_component.rb     |   2 +-
 .../app/components/user_item_component.rb     |  10 +-
 .../app/components/user_list_component.rb     |   4 +-
 .../app/components/user_prompt_component.rb   |   2 +-
 test/dummy/app/components/video_component.rb  |   2 +-
 .../app/components/video_player_component.rb  |   8 +-
 test/dummy/test/components/sample_test.rb     |   2 -
 61 files changed, 546 insertions(+), 2784 deletions(-)
 delete mode 100644 lib/clapton/javascripts/dist/c
 delete mode 100644 lib/clapton/javascripts/dist/c-base.js
 rename lib/clapton/javascripts/src/components/{box.ts => base.ts} (66%)
 delete mode 100644 lib/clapton/javascripts/src/components/checkbox.spec.ts
 delete mode 100644 lib/clapton/javascripts/src/components/checkbox.ts
 delete mode 100644 lib/clapton/javascripts/src/components/datetime-field.spec.ts
 rename lib/clapton/javascripts/src/components/{box.spec.ts => div.spec.ts} (59%)
 create mode 100644 lib/clapton/javascripts/src/components/div.ts
 create mode 100644 lib/clapton/javascripts/src/components/input.spec.ts
 rename lib/clapton/javascripts/src/components/{datetime-field.ts => input.ts} (62%)
 delete mode 100644 lib/clapton/javascripts/src/components/radio-button.spec.ts
 delete mode 100644 lib/clapton/javascripts/src/components/radio-button.ts
 delete mode 100644 lib/clapton/javascripts/src/components/text-field.spec.ts
 delete mode 100644 lib/clapton/javascripts/src/components/text-field.ts

diff --git a/README.md b/README.md
index 54055c9..986126d 100644
--- a/README.md
+++ b/README.md
@@ -34,14 +34,14 @@ To use a Clapton component in your view:
 # app/components/task_list_component.rb
 class TaskListComponent < Clapton::Component
   def render
-    box = c(:box)
+    div = c(:div)
     @state.tasks.each do |task|
-      box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
+      div.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
     btn = c(:button)
     btn.add(c(:text, "Add Task"))
     btn.add_action(:click, :TaskListState, :add_task)
-    box.add(btn)
+    div.add(btn)
   end
 end
 
@@ -51,7 +51,7 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
-    box = c(:box)
+    div = c(:div)
     btn = c(:button)
     btn.add(c(:text, @state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
@@ -62,7 +62,7 @@ class TaskItemComponent < Clapton::Component
     dt = c(:datetime, @state, :due)
     dt.add_action(:input, :TaskListState, :update_due)
 
-    box.add(btn).add(tf).add(dt)
+    div.add(btn).add(tf).add(dt)
   end
 end
 
@@ -171,8 +171,8 @@ The `render` event is a special event that is triggered when the component is re
 class TaskListComponent < Clapton::Component
   def render
     # ...
-    box = c(:box)
-    box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
+    div = c(:div)
+    div.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
   end
 end
 ```
@@ -201,112 +201,6 @@ class VideoPlayerComponent < Clapton::Component
 end
 ```
 
-### Preset Components Classes
-
-```ruby
-block_quote = Clapton::BlockQuote.new
-block_quote.add(Clapton::Text.new("Hello"))
-
-box = Clapton::Box.new
-box.add(Clapton::Text.new("Hello"))
-
-button = Clapton::Button.new
-button.add(Clapton::Text.new("Click me"))
-button.add_action(:click, :TaskListState, :add_task)
-
-checkbox = Clapton::Checkbox.new(:ExampleState, :example_attribute, { id: "example-checkbox" })
-checkbox.add_action(:change, :ExampleState, :update_example_attribute)
-
-code = Clapton::Code.new
-code.add(Clapton::Text.new("Hello"))
-
-datetime_field = Clapton::DateTimeField.new(:ExampleState, :example_attribute, { id: "example-datetime-field" })
-
-element = Clapton::Element.new("div", { id: "example-element" })
-element.add(Clapton::Text.new("Hello"))
-
-embed = Clapton::Embed.new("<blockquote>This is a test</blockquote>")
-
-emphasis = Clapton::Emphasis.new
-emphasis.add(Clapton::Text.new("Hello"))
-
-form = Clapton::Form.new
-form.add(Clapton::Text.new("Hello"))
-
-heading = Clapton::Heading.new(1)
-heading.add(Clapton::Text.new("Hello"))
-
-image = Clapton::Image.new("https://example.com/image.png", "Example Image")
-
-link = Clapton::Link.new("https://example.com")
-link.add(Clapton::Text.new("Example Link"))
-
-list = Clapton::List.new
-(1..3).each do
-  item = Clapton::ListItem.new
-  item.add(Clapton::Text.new("Item #{i}"))
-  list.add(item)
-end
-
-ordered_list = Clapton::OrderedList.new
-(1..3).each do
-  item = Clapton::ListItem.new
-  item.add(Clapton::Text.new("Item #{i}"))
-  ordered_list.add(item)
-end
-
-paragraph = Clapton::Paragraph.new
-paragraph.add(Clapton::Text.new("Hello"))
-
-quote = Clapton::Quote.new
-quote.add(Clapton::Text.new("Hello"))
-
-radio_button = Clapton::RadioButton.new(:ExampleState, :example_attribute, { id: "example-radio-button" })
-radio_button.add_action(:change, :ExampleState, :update_example_attribute)
-
-select = Clapton::Select.new([{ value: "1", text: "One" }, { value: "2", text: "Two" }], :ExampleState, :example_attribute, { id: "example-select" })
-select.add_action(:change, :ExampleState, :update_example_attribute)
-
-span = Clapton::Span.new
-span.add(Clapton::Text.new("Hello"))
-
-text_area = Clapton::TextArea.new(:ExampleState, :example_attribute, { id: "example-text-area" })
-
-text_field = Clapton::TextField.new(:ExampleState, :example_attribute, { id: "example-text-field" })
-
-text = Clapton::Text.new("Hello")`
-```
-
-### Preset Component Methods
-
-```javascript
-c(:bq, ...props)
-c(:box, ...props)
-c(:b, ...props)
-c(:button, ...props)
-c(:check, ...props)
-c(:code, ...props)
-c(:datetime, ...props)
-c(:el, ...props)
-c(:embed, ...props)
-c(:em, ...props)
-c(:form, ...props)
-c(:h, ...props)
-c(:img, ...props)
-c(:a, ...props)
-c(:li, ...props)
-c(:ul, ...props)
-c(:ol, ...props)
-c(:p, ...props)
-c(:q, ...props)
-c(:radio, ...props)
-c(:select, ...props)
-c(:span, ...props)
-c(:textarea, ...props)
-c(:input, ...props)
-c(:text, ...props)
-```
-
 ### Streaming
 
 Clapton supports streaming.
diff --git a/lib/clapton/javascripts/dist/c b/lib/clapton/javascripts/dist/c
deleted file mode 100644
index 04ae484..0000000
--- a/lib/clapton/javascripts/dist/c
+++ /dev/null
@@ -1,559 +0,0 @@
-var c = (function (exports) {
-    'use strict';
-
-    const htmlAttributes = (params) => {
-        const customDataAttributes = params.data || {};
-        const others = Object.keys(params).filter(key => key !== "data");
-        const flattenDataAttributes = (data, prefix = "data") => {
-            return Object.keys(data).reduce((acc, key) => {
-                const value = data[key];
-                if (typeof value === "object" && value !== null) {
-                    acc.push(...flattenDataAttributes(value, `${prefix}-${key}`));
-                }
-                else {
-                    acc.push(`${prefix}-${key}='${escapeHtml(value)}'`);
-                }
-                return acc;
-            }, []);
-        };
-        return [
-            others.map(key => {
-                if (key === "disabled") {
-                    if (params[key] === false) {
-                        return "";
-                    }
-                    else {
-                        return `${key}`;
-                    }
-                }
-                return `${key}='${escapeHtml(params[key])}'`;
-            }).join(" "),
-            flattenDataAttributes(customDataAttributes).join(" ")
-        ].filter(Boolean).join(" ");
-    };
-    const escapeHtml = (unsafe) => {
-        if (typeof unsafe !== "string") {
-            return "";
-        }
-        return unsafe
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#039;");
-    };
-
-    class BlockQuote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Box {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-        }
-        add_action(eventType, stateName, fnName, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Bold {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Checkbox {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Code {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class DateTimeField {
-        constructor(state, attribute, attributes = {}) {
-            this.attributes = {};
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-            return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-        datetime_local_value(value) {
-            if (!value) {
-                return "";
-            }
-            const date = new Date(value);
-            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-            let month = date.getMonth() + 1;
-            let day = date.getDate();
-            let hours = date.getHours();
-            let minutes = date.getMinutes();
-            if (month < 10) {
-                month = `0${month}`;
-            }
-            if (day < 10) {
-                day = `0${day}`;
-            }
-            if (hours < 10) {
-                hours = `0${hours}`;
-            }
-            if (minutes < 10) {
-                minutes = `0${minutes}`;
-            }
-            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
-        }
-    }
-
-    class Element {
-        constructor(type, attributes = {}) {
-            this.children = [];
-            this.type = type;
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Embed {
-        constructor(html) {
-            this.html = html;
-        }
-        get renderWrapper() {
-            return this.html;
-        }
-    }
-
-    class Emphasis {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Form {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Heading {
-        constructor(level, attributes = {}) {
-            this.children = [];
-            this.level = level;
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Image {
-        constructor(src, alt, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.src = src;
-            this.alt = alt;
-        }
-        get renderWrapper() {
-            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
-        }
-    }
-
-    class Link {
-        constructor(href, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.href = href;
-        }
-        get renderWrapper() {
-            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class ListItem {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
-        }
-    }
-
-    class List {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
-        }
-    }
-
-    class OrderedList {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
-        }
-    }
-
-    class Paragraph {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Quote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class RadioButton {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Select {
-        constructor(options = [], state, attribute, attributes = {}) {
-            this.children = [];
-            this.options = options;
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
-        }
-    }
-
-    class Span {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Component {
-        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
-            this._state = state;
-            this.id = id;
-            this._errors = errors;
-        }
-        get render() {
-            return new Box({});
-        }
-        get renderWrapper() {
-            const root = this.render;
-            if (root.attributes) {
-                root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
-            }
-            else {
-                root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
-            }
-            return root.renderWrapper;
-        }
-    }
-
-    class TextField {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Text {
-        constructor(value) {
-            this.value = value;
-        }
-        get renderWrapper() {
-            return this.value;
-        }
-    }
-
-    class TextArea {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };
-
-    const bq = (...props) => {
-        return new Clapton.BlockQuote(...props);
-    };
-    const box = (...props) => {
-        return new Clapton.Box(...props);
-    };
-    const b = (...props) => {
-        return new Clapton.Bold(...props);
-    };
-    const button = (...props) => {
-        return new Clapton.Button(...props);
-    };
-    const check = (...props) => {
-        return new Clapton.Checkbox(props[0], props[1], props[2]);
-    };
-    const code = (...props) => {
-        return new Clapton.Code(...props);
-    };
-    const datetime = (...props) => {
-        return new Clapton.DateTimeField(props[0], props[1], props[2]);
-    };
-    const el = (...props) => {
-        return new Clapton.Element(props[0], props[1]);
-    };
-    const embed = (...props) => {
-        return new Clapton.Embed(props[0]);
-    };
-    const em = (...props) => {
-        return new Clapton.Emphasis(...props);
-    };
-    const form = (...props) => {
-        return new Clapton.Form(...props);
-    };
-    const h = (...props) => {
-        return new Clapton.Heading(props[0], props[1]);
-    };
-    const img = (...props) => {
-        return new Clapton.Image(props[0], props[1], props[2]);
-    };
-    const a = (...props) => {
-        return new Clapton.Link(props[0], props[1]);
-    };
-    const li = (...props) => {
-        return new Clapton.ListItem(...props);
-    };
-    const ul = (...props) => {
-        return new Clapton.List(...props);
-    };
-    const ol = (...props) => {
-        return new Clapton.OrderedList(...props);
-    };
-    const p = (...props) => {
-        return new Clapton.Paragraph(...props);
-    };
-    const q = (...props) => {
-        return new Clapton.Quote(...props);
-    };
-    const radio = (...props) => {
-        return new Clapton.RadioButton(props[0], props[1], props[2]);
-    };
-    const select = (...props) => {
-        return new Clapton.Select(props[0], props[1], props[2]);
-    };
-    const span = (...props) => {
-        return new Clapton.Span(...props);
-    };
-    const textarea = (...props) => {
-        return new Clapton.TextArea(props[0], props[1], props[2]);
-    };
-    const input = (...props) => {
-        return new Clapton.TextField(props[0], props[1], props[2]);
-    };
-    const text = (...props) => {
-        return new Clapton.Text(props[0]);
-    };
-
-    exports.a = a;
-    exports.b = b;
-    exports.box = box;
-    exports.bq = bq;
-    exports.button = button;
-    exports.check = check;
-    exports.code = code;
-    exports.datetime = datetime;
-    exports.el = el;
-    exports.em = em;
-    exports.embed = embed;
-    exports.form = form;
-    exports.h = h;
-    exports.img = img;
-    exports.input = input;
-    exports.li = li;
-    exports.ol = ol;
-    exports.p = p;
-    exports.q = q;
-    exports.radio = radio;
-    exports.select = select;
-    exports.span = span;
-    exports.text = text;
-    exports.textarea = textarea;
-    exports.ul = ul;
-
-    return exports;
-
-})({});
diff --git a/lib/clapton/javascripts/dist/c-base.js b/lib/clapton/javascripts/dist/c-base.js
deleted file mode 100644
index 022de7d..0000000
--- a/lib/clapton/javascripts/dist/c-base.js
+++ /dev/null
@@ -1,589 +0,0 @@
-var c = (function () {
-    'use strict';
-
-    const htmlAttributes = (params) => {
-        const customDataAttributes = params.data || {};
-        const others = Object.keys(params).filter(key => key !== "data");
-        const flattenDataAttributes = (data, prefix = "data") => {
-            return Object.keys(data).reduce((acc, key) => {
-                const value = data[key];
-                if (typeof value === "object" && value !== null) {
-                    acc.push(...flattenDataAttributes(value, `${prefix}-${key}`));
-                }
-                else {
-                    acc.push(`${prefix}-${key}='${escapeHtml(value)}'`);
-                }
-                return acc;
-            }, []);
-        };
-        return [
-            others.map(key => {
-                if (key === "disabled") {
-                    if (params[key] === false) {
-                        return "";
-                    }
-                    else {
-                        return `${key}`;
-                    }
-                }
-                return `${key}='${escapeHtml(params[key])}'`;
-            }).join(" "),
-            flattenDataAttributes(customDataAttributes).join(" ")
-        ].filter(Boolean).join(" ");
-    };
-    const escapeHtml = (unsafe) => {
-        if (typeof unsafe !== "string") {
-            return "";
-        }
-        return unsafe
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#039;");
-    };
-
-    class BlockQuote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Box {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-        }
-        add_action(eventType, stateName, fnName, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Bold {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Checkbox {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Code {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class DateTimeField {
-        constructor(state, attribute, attributes = {}) {
-            this.attributes = {};
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-            return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-        datetime_local_value(value) {
-            if (!value) {
-                return "";
-            }
-            const date = new Date(value);
-            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-            let month = date.getMonth() + 1;
-            let day = date.getDate();
-            let hours = date.getHours();
-            let minutes = date.getMinutes();
-            if (month < 10) {
-                month = `0${month}`;
-            }
-            if (day < 10) {
-                day = `0${day}`;
-            }
-            if (hours < 10) {
-                hours = `0${hours}`;
-            }
-            if (minutes < 10) {
-                minutes = `0${minutes}`;
-            }
-            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
-        }
-    }
-
-    class Element {
-        constructor(type, attributes = {}) {
-            this.children = [];
-            this.type = type;
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Embed {
-        constructor(html) {
-            this.html = html;
-        }
-        get renderWrapper() {
-            return this.html;
-        }
-    }
-
-    class Emphasis {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Form {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Heading {
-        constructor(level, attributes = {}) {
-            this.children = [];
-            this.level = level;
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Image {
-        constructor(src, alt, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.src = src;
-            this.alt = alt;
-        }
-        get renderWrapper() {
-            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
-        }
-    }
-
-    class Link {
-        constructor(href, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.href = href;
-        }
-        get renderWrapper() {
-            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class ListItem {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
-        }
-    }
-
-    class List {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
-        }
-    }
-
-    class OrderedList {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
-        }
-    }
-
-    class Paragraph {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Quote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class RadioButton {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Select {
-        constructor(options = [], state, attribute, attributes = {}) {
-            this.children = [];
-            this.options = options;
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
-        }
-    }
-
-    class Span {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        get renderWrapper() {
-            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Component {
-        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
-            this._state = state;
-            this.id = id;
-            this._errors = errors;
-        }
-        get render() {
-            return new Box({});
-        }
-        get renderWrapper() {
-            const root = this.render;
-            if (root.attributes) {
-                root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
-            }
-            else {
-                root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
-            }
-            return root.renderWrapper;
-        }
-    }
-
-    class TextField {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Text {
-        constructor(value) {
-            this.value = value;
-        }
-        get renderWrapper() {
-            return this.value;
-        }
-    }
-
-    class TextArea {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };
-
-    const bq = (...props) => {
-        return new Clapton.BlockQuote(...props);
-    };
-    const box = (...props) => {
-        return new Clapton.Box(...props);
-    };
-    const b = (...props) => {
-        return new Clapton.Bold(...props);
-    };
-    const button = (...props) => {
-        return new Clapton.Button(...props);
-    };
-    const check = (...props) => {
-        return new Clapton.Checkbox(props[0], props[1], props[2]);
-    };
-    const code = (...props) => {
-        return new Clapton.Code(...props);
-    };
-    const datetime = (...props) => {
-        return new Clapton.DateTimeField(props[0], props[1], props[2]);
-    };
-    const el = (...props) => {
-        return new Clapton.Element(props[0], props[1]);
-    };
-    const embed = (...props) => {
-        return new Clapton.Embed(props[0]);
-    };
-    const em = (...props) => {
-        return new Clapton.Emphasis(...props);
-    };
-    const form = (...props) => {
-        return new Clapton.Form(...props);
-    };
-    const h = (...props) => {
-        return new Clapton.Heading(props[0], props[1]);
-    };
-    const img = (...props) => {
-        return new Clapton.Image(props[0], props[1], props[2]);
-    };
-    const a = (...props) => {
-        return new Clapton.Link(props[0], props[1]);
-    };
-    const li = (...props) => {
-        return new Clapton.ListItem(...props);
-    };
-    const ul = (...props) => {
-        return new Clapton.List(...props);
-    };
-    const ol = (...props) => {
-        return new Clapton.OrderedList(...props);
-    };
-    const p = (...props) => {
-        return new Clapton.Paragraph(...props);
-    };
-    const q = (...props) => {
-        return new Clapton.Quote(...props);
-    };
-    const radio = (...props) => {
-        return new Clapton.RadioButton(props[0], props[1], props[2]);
-    };
-    const select = (...props) => {
-        return new Clapton.Select(props[0], props[1], props[2]);
-    };
-    const span = (...props) => {
-        return new Clapton.Span(...props);
-    };
-    const textarea = (...props) => {
-        return new Clapton.TextArea(props[0], props[1], props[2]);
-    };
-    const input = (...props) => {
-        return new Clapton.TextField(props[0], props[1], props[2]);
-    };
-    const text = (...props) => {
-        return new Clapton.Text(props[0]);
-    };
-    const c = (name, ...props) => {
-        switch (name) {
-            case "bq":
-                return bq(...props);
-            case "box":
-                return box(...props);
-            case "b":
-                return b(...props);
-            case "button":
-                return button(...props);
-            case "check":
-                return check(...props);
-            case "code":
-                return code(...props);
-            case "datetime":
-                return datetime(...props);
-            case "el":
-                return el(...props);
-            case "embed":
-                return embed(...props);
-            case "em":
-                return em(...props);
-            case "form":
-                return form(...props);
-            case "h":
-                return h(...props);
-            case "img":
-                return img(...props);
-            case "a":
-                return a(...props);
-            case "li":
-                return li(...props);
-            case "ul":
-                return ul(...props);
-            case "ol":
-                return ol(...props);
-            case "p":
-                return p(...props);
-            case "q":
-                return q(...props);
-            case "radio":
-                return radio(...props);
-            case "select":
-                return select(...props);
-            case "span":
-                return span(...props);
-            case "textarea":
-                return textarea(...props);
-            case "input":
-                return input(...props);
-            case "text":
-                return text(...props);
-            default:
-                return new Clapton.Component(...props);
-        }
-    };
-
-    return c;
-
-})();
diff --git a/lib/clapton/javascripts/dist/c-for-test.js b/lib/clapton/javascripts/dist/c-for-test.js
index 620ccbb..a554ca3 100644
--- a/lib/clapton/javascripts/dist/c-for-test.js
+++ b/lib/clapton/javascripts/dist/c-for-test.js
@@ -43,155 +43,63 @@ var c = (function () {
             .replace(/'/g, "&#039;");
     };
 
-    class BlockQuote {
+    class Base {
         constructor(attributes = {}) {
             this.children = [];
             this.attributes = attributes;
         }
-        get renderWrapper() {
-            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-        }
         add(child) {
             this.children.push(child);
             return this;
         }
-    }
-
-    class Box {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-        }
         add_action(eventType, stateName, fnName, options = {}) {
             this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
             return this;
         }
+        get renderWrapper() {
+            return "";
+        }
     }
 
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class BlockQuote extends Base {
         get renderWrapper() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
         }
     }
 
-    class Bold {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Div extends Base {
         get renderWrapper() {
-            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
         }
     }
 
-    class Checkbox {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
+    class Button extends Base {
         get renderWrapper() {
-            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
         }
     }
 
-    class Code {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Bold extends Base {
         get renderWrapper() {
-            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
         }
     }
 
-    class DateTimeField {
-        constructor(state, attribute, attributes = {}) {
-            this.attributes = {};
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-            this.attributes["data-attribute"] = attribute;
-        }
+    class Code extends Base {
         get renderWrapper() {
-            const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-            return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-        datetime_local_value(value) {
-            if (!value) {
-                return "";
-            }
-            const date = new Date(value);
-            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-            let month = date.getMonth() + 1;
-            let day = date.getDate();
-            let hours = date.getHours();
-            let minutes = date.getMinutes();
-            if (month < 10) {
-                month = `0${month}`;
-            }
-            if (day < 10) {
-                day = `0${day}`;
-            }
-            if (hours < 10) {
-                hours = `0${hours}`;
-            }
-            if (minutes < 10) {
-                minutes = `0${minutes}`;
-            }
-            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
         }
     }
 
-    class Element {
+    class Element extends Base {
         constructor(type, attributes = {}) {
+            super(attributes);
             this.children = [];
             this.type = type;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
     class Embed {
@@ -203,187 +111,86 @@ var c = (function () {
         }
     }
 
-    class Emphasis {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Emphasis extends Base {
         get renderWrapper() {
             return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Form {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Form extends Base {
         get renderWrapper() {
             return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Heading {
+    class Heading extends Base {
         constructor(level, attributes = {}) {
-            this.children = [];
+            super(attributes);
             this.level = level;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Image {
-        constructor(src, alt, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.src = src;
-            this.alt = alt;
-        }
+    class Image extends Base {
         get renderWrapper() {
-            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+            return `<img ${htmlAttributes(this.attributes)}/>`;
         }
     }
 
-    class Link {
-        constructor(href, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.href = href;
-        }
+    class Link extends Base {
         get renderWrapper() {
-            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
         }
     }
 
-    class ListItem {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class ListItem extends Base {
         get renderWrapper() {
             return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
         }
     }
 
-    class List {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class List extends Base {
         get renderWrapper() {
             return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
         }
     }
 
-    class OrderedList {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class OrderedList extends Base {
         get renderWrapper() {
             return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
         }
     }
 
-    class Paragraph {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Paragraph extends Base {
         get renderWrapper() {
             return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Quote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Quote extends Base {
         get renderWrapper() {
             return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class RadioButton {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
     }
 
-    class Select {
+    class Select extends Base {
         constructor(options = [], state, attribute, attributes = {}) {
-            this.children = [];
+            super(attributes);
             this.options = options;
             this.state = state;
             this.attribute = attribute;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
         }
     }
 
-    class Span {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Span extends Base {
         get renderWrapper() {
             return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
     class Component {
@@ -393,7 +200,7 @@ var c = (function () {
             this._errors = errors;
         }
         get render() {
-            return new Box({});
+            return new Div({});
         }
         get renderWrapper() {
             const root = this.render;
@@ -428,19 +235,43 @@ var c = (function () {
     }
     Component._effects = [];
 
-    class TextField {
+    class Input extends Base {
         constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
+            super(attributes);
             this.attribute = attribute;
+            this.state = state;
             this.attributes["data-attribute"] = attribute;
         }
         get renderWrapper() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+            let value = this.state[this.attribute];
+            if (this.attributes.type === "datetime-local" && value) {
+                value = this.datetime_local_value(value);
+            }
+            return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
         }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+        datetime_local_value(value) {
+            if (!value) {
+                return "";
+            }
+            const date = new Date(value);
+            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+            let month = date.getMonth() + 1;
+            let day = date.getDate();
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            if (month < 10) {
+                month = `0${month}`;
+            }
+            if (day < 10) {
+                day = `0${day}`;
+            }
+            if (hours < 10) {
+                hours = `0${hours}`;
+            }
+            if (minutes < 10) {
+                minutes = `0${minutes}`;
+            }
+            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
         }
     }
 
@@ -453,31 +284,27 @@ var c = (function () {
         }
     }
 
-    class TextArea {
+    class TextArea extends Base {
         constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
+            super(attributes);
             this.attribute = attribute;
+            this.state = state;
             this.attributes["data-attribute"] = attribute;
         }
         get renderWrapper() {
             return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
         }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
     }
 
     const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+        Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
     };
 
-    const bq = (...props) => {
+    const blockquote = (...props) => {
         return new Clapton.BlockQuote(...props);
     };
-    const box = (...props) => {
-        return new Clapton.Box(...props);
+    const div = (...props) => {
+        return new Clapton.Div(...props);
     };
     const b = (...props) => {
         return new Clapton.Bold(...props);
@@ -485,15 +312,9 @@ var c = (function () {
     const button = (...props) => {
         return new Clapton.Button(...props);
     };
-    const check = (...props) => {
-        return new Clapton.Checkbox(props[0], props[1], props[2]);
-    };
     const code = (...props) => {
         return new Clapton.Code(...props);
     };
-    const datetime = (...props) => {
-        return new Clapton.DateTimeField(props[0], props[1], props[2]);
-    };
     const el = (...props) => {
         return new Clapton.Element(props[0], props[1]);
     };
@@ -506,14 +327,29 @@ var c = (function () {
     const form = (...props) => {
         return new Clapton.Form(...props);
     };
-    const h = (...props) => {
-        return new Clapton.Heading(props[0], props[1]);
+    const h1 = (...props) => {
+        return new Clapton.Heading(1, props[1]);
+    };
+    const h2 = (...props) => {
+        return new Clapton.Heading(2, props[1]);
+    };
+    const h3 = (...props) => {
+        return new Clapton.Heading(3, props[1]);
+    };
+    const h4 = (...props) => {
+        return new Clapton.Heading(4, props[1]);
+    };
+    const h5 = (...props) => {
+        return new Clapton.Heading(5, props[1]);
+    };
+    const h6 = (...props) => {
+        return new Clapton.Heading(6, props[1]);
     };
     const img = (...props) => {
-        return new Clapton.Image(props[0], props[1], props[2]);
+        return new Clapton.Image(props[0]);
     };
     const a = (...props) => {
-        return new Clapton.Link(props[0], props[1]);
+        return new Clapton.Link(props[0]);
     };
     const li = (...props) => {
         return new Clapton.ListItem(...props);
@@ -530,9 +366,6 @@ var c = (function () {
     const q = (...props) => {
         return new Clapton.Quote(...props);
     };
-    const radio = (...props) => {
-        return new Clapton.RadioButton(props[0], props[1], props[2]);
-    };
     const select = (...props) => {
         return new Clapton.Select(props[0], props[1], props[2]);
     };
@@ -543,27 +376,23 @@ var c = (function () {
         return new Clapton.TextArea(props[0], props[1], props[2]);
     };
     const input = (...props) => {
-        return new Clapton.TextField(props[0], props[1], props[2]);
+        return new Clapton.Input(props[0], props[1], props[2]);
     };
     const text = (...props) => {
         return new Clapton.Text(props[0]);
     };
     const c = (name, ...props) => {
         switch (name) {
-            case "bq":
-                return bq(...props);
-            case "box":
-                return box(...props);
+            case "blockquote":
+                return blockquote(...props);
+            case "div":
+                return div(...props);
             case "b":
                 return b(...props);
             case "button":
                 return button(...props);
-            case "check":
-                return check(...props);
             case "code":
                 return code(...props);
-            case "datetime":
-                return datetime(...props);
             case "el":
                 return el(...props);
             case "embed":
@@ -572,8 +401,18 @@ var c = (function () {
                 return em(...props);
             case "form":
                 return form(...props);
-            case "h":
-                return h(...props);
+            case "h1":
+                return h1(...props);
+            case "h2":
+                return h2(...props);
+            case "h3":
+                return h3(...props);
+            case "h4":
+                return h4(...props);
+            case "h5":
+                return h5(...props);
+            case "h6":
+                return h6(...props);
             case "img":
                 return img(...props);
             case "a":
@@ -588,8 +427,6 @@ var c = (function () {
                 return p(...props);
             case "q":
                 return q(...props);
-            case "radio":
-                return radio(...props);
             case "select":
                 return select(...props);
             case "span":
@@ -601,7 +438,7 @@ var c = (function () {
             case "text":
                 return text(...props);
             default:
-                return new Clapton.Component(...props);
+                return new Clapton.Element(name, ...props);
         }
     };
 
diff --git a/lib/clapton/javascripts/dist/c.js b/lib/clapton/javascripts/dist/c.js
index 6500b11..2ed5d2f 100644
--- a/lib/clapton/javascripts/dist/c.js
+++ b/lib/clapton/javascripts/dist/c.js
@@ -40,155 +40,63 @@ const escapeHtml = (unsafe) => {
         .replace(/'/g, "&#039;");
 };
 
-class BlockQuote {
+class Base {
     constructor(attributes = {}) {
         this.children = [];
         this.attributes = attributes;
     }
-    get renderWrapper() {
-        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-    }
     add(child) {
         this.children.push(child);
         return this;
     }
-}
-
-class Box {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
-    get renderWrapper() {
-        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-    }
     add_action(eventType, stateName, fnName, options = {}) {
         this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
         return this;
     }
+    get renderWrapper() {
+        return "";
+    }
 }
 
-class Button {
-    constructor(attributes = {}) {
-        this.attributes = attributes;
-        this.children = [];
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class BlockQuote extends Base {
     get renderWrapper() {
-        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
     }
 }
 
-class Bold {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Div extends Base {
     get renderWrapper() {
-        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
     }
 }
 
-class Checkbox {
-    constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
-        this.attribute = attribute;
-        this.attributes["data-attribute"] = attribute;
-    }
+class Button extends Base {
     get renderWrapper() {
-        return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
     }
 }
 
-class Code {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Bold extends Base {
     get renderWrapper() {
-        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
     }
 }
 
-class DateTimeField {
-    constructor(state, attribute, attributes = {}) {
-        this.attributes = {};
-        this.state = state;
-        this.attribute = attribute;
-        this.attributes = attributes;
-        this.attributes["data-attribute"] = attribute;
-    }
+class Code extends Base {
     get renderWrapper() {
-        const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-        return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
-    datetime_local_value(value) {
-        if (!value) {
-            return "";
-        }
-        const date = new Date(value);
-        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        if (month < 10) {
-            month = `0${month}`;
-        }
-        if (day < 10) {
-            day = `0${day}`;
-        }
-        if (hours < 10) {
-            hours = `0${hours}`;
-        }
-        if (minutes < 10) {
-            minutes = `0${minutes}`;
-        }
-        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
     }
 }
 
-class Element {
+class Element extends Base {
     constructor(type, attributes = {}) {
+        super(attributes);
         this.children = [];
         this.type = type;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
 class Embed {
@@ -200,187 +108,86 @@ class Embed {
     }
 }
 
-class Emphasis {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Emphasis extends Base {
     get renderWrapper() {
         return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Form {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Form extends Base {
     get renderWrapper() {
         return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Heading {
+class Heading extends Base {
     constructor(level, attributes = {}) {
-        this.children = [];
+        super(attributes);
         this.level = level;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Image {
-    constructor(src, alt, attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-        this.src = src;
-        this.alt = alt;
-    }
+class Image extends Base {
     get renderWrapper() {
-        return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+        return `<img ${htmlAttributes(this.attributes)}/>`;
     }
 }
 
-class Link {
-    constructor(href, attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-        this.href = href;
-    }
+class Link extends Base {
     get renderWrapper() {
-        return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
     }
 }
 
-class ListItem {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class ListItem extends Base {
     get renderWrapper() {
         return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
     }
 }
 
-class List {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class List extends Base {
     get renderWrapper() {
         return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
     }
 }
 
-class OrderedList {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class OrderedList extends Base {
     get renderWrapper() {
         return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
     }
 }
 
-class Paragraph {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Paragraph extends Base {
     get renderWrapper() {
         return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Quote {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Quote extends Base {
     get renderWrapper() {
         return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
-}
-
-class RadioButton {
-    constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
-        this.attribute = attribute;
-        this.attributes["data-attribute"] = attribute;
-    }
-    get renderWrapper() {
-        return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
 }
 
-class Select {
+class Select extends Base {
     constructor(options = [], state, attribute, attributes = {}) {
-        this.children = [];
+        super(attributes);
         this.options = options;
         this.state = state;
         this.attribute = attribute;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
     }
 }
 
-class Span {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Span extends Base {
     get renderWrapper() {
         return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
 class Component {
@@ -390,7 +197,7 @@ class Component {
         this._errors = errors;
     }
     get render() {
-        return new Box({});
+        return new Div({});
     }
     get renderWrapper() {
         const root = this.render;
@@ -425,19 +232,43 @@ class Component {
 }
 Component._effects = [];
 
-class TextField {
+class Input extends Base {
     constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
+        super(attributes);
         this.attribute = attribute;
+        this.state = state;
         this.attributes["data-attribute"] = attribute;
     }
     get renderWrapper() {
-        return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        let value = this.state[this.attribute];
+        if (this.attributes.type === "datetime-local" && value) {
+            value = this.datetime_local_value(value);
+        }
+        return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
     }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+    datetime_local_value(value) {
+        if (!value) {
+            return "";
+        }
+        const date = new Date(value);
+        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        if (month < 10) {
+            month = `0${month}`;
+        }
+        if (day < 10) {
+            day = `0${day}`;
+        }
+        if (hours < 10) {
+            hours = `0${hours}`;
+        }
+        if (minutes < 10) {
+            minutes = `0${minutes}`;
+        }
+        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
     }
 }
 
@@ -450,31 +281,27 @@ class Text {
     }
 }
 
-class TextArea {
+class TextArea extends Base {
     constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
+        super(attributes);
         this.attribute = attribute;
+        this.state = state;
         this.attributes["data-attribute"] = attribute;
     }
     get renderWrapper() {
         return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
     }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
 }
 
 const Clapton = {
-    Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+    Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
 };
 
-const bq = (...props) => {
+const blockquote = (...props) => {
     return new Clapton.BlockQuote(...props);
 };
-const box = (...props) => {
-    return new Clapton.Box(...props);
+const div = (...props) => {
+    return new Clapton.Div(...props);
 };
 const b = (...props) => {
     return new Clapton.Bold(...props);
@@ -482,15 +309,9 @@ const b = (...props) => {
 const button = (...props) => {
     return new Clapton.Button(...props);
 };
-const check = (...props) => {
-    return new Clapton.Checkbox(props[0], props[1], props[2]);
-};
 const code = (...props) => {
     return new Clapton.Code(...props);
 };
-const datetime = (...props) => {
-    return new Clapton.DateTimeField(props[0], props[1], props[2]);
-};
 const el = (...props) => {
     return new Clapton.Element(props[0], props[1]);
 };
@@ -503,14 +324,29 @@ const em = (...props) => {
 const form = (...props) => {
     return new Clapton.Form(...props);
 };
-const h = (...props) => {
-    return new Clapton.Heading(props[0], props[1]);
+const h1 = (...props) => {
+    return new Clapton.Heading(1, props[1]);
+};
+const h2 = (...props) => {
+    return new Clapton.Heading(2, props[1]);
+};
+const h3 = (...props) => {
+    return new Clapton.Heading(3, props[1]);
+};
+const h4 = (...props) => {
+    return new Clapton.Heading(4, props[1]);
+};
+const h5 = (...props) => {
+    return new Clapton.Heading(5, props[1]);
+};
+const h6 = (...props) => {
+    return new Clapton.Heading(6, props[1]);
 };
 const img = (...props) => {
-    return new Clapton.Image(props[0], props[1], props[2]);
+    return new Clapton.Image(props[0]);
 };
 const a = (...props) => {
-    return new Clapton.Link(props[0], props[1]);
+    return new Clapton.Link(props[0]);
 };
 const li = (...props) => {
     return new Clapton.ListItem(...props);
@@ -527,9 +363,6 @@ const p = (...props) => {
 const q = (...props) => {
     return new Clapton.Quote(...props);
 };
-const radio = (...props) => {
-    return new Clapton.RadioButton(props[0], props[1], props[2]);
-};
 const select = (...props) => {
     return new Clapton.Select(props[0], props[1], props[2]);
 };
@@ -540,27 +373,23 @@ const textarea = (...props) => {
     return new Clapton.TextArea(props[0], props[1], props[2]);
 };
 const input = (...props) => {
-    return new Clapton.TextField(props[0], props[1], props[2]);
+    return new Clapton.Input(props[0], props[1], props[2]);
 };
 const text = (...props) => {
     return new Clapton.Text(props[0]);
 };
 const c = (name, ...props) => {
     switch (name) {
-        case "bq":
-            return bq(...props);
-        case "box":
-            return box(...props);
+        case "blockquote":
+            return blockquote(...props);
+        case "div":
+            return div(...props);
         case "b":
             return b(...props);
         case "button":
             return button(...props);
-        case "check":
-            return check(...props);
         case "code":
             return code(...props);
-        case "datetime":
-            return datetime(...props);
         case "el":
             return el(...props);
         case "embed":
@@ -569,8 +398,18 @@ const c = (name, ...props) => {
             return em(...props);
         case "form":
             return form(...props);
-        case "h":
-            return h(...props);
+        case "h1":
+            return h1(...props);
+        case "h2":
+            return h2(...props);
+        case "h3":
+            return h3(...props);
+        case "h4":
+            return h4(...props);
+        case "h5":
+            return h5(...props);
+        case "h6":
+            return h6(...props);
         case "img":
             return img(...props);
         case "a":
@@ -585,8 +424,6 @@ const c = (name, ...props) => {
             return p(...props);
         case "q":
             return q(...props);
-        case "radio":
-            return radio(...props);
         case "select":
             return select(...props);
         case "span":
@@ -598,7 +435,7 @@ const c = (name, ...props) => {
         case "text":
             return text(...props);
         default:
-            return new Clapton.Component(...props);
+            return new Clapton.Element(name, ...props);
     }
 };
 
diff --git a/lib/clapton/javascripts/dist/components-for-test.js b/lib/clapton/javascripts/dist/components-for-test.js
index cdb60ce..2a42aaf 100644
--- a/lib/clapton/javascripts/dist/components-for-test.js
+++ b/lib/clapton/javascripts/dist/components-for-test.js
@@ -43,155 +43,63 @@ var Clapton = (function (exports) {
             .replace(/'/g, "&#039;");
     };
 
-    class BlockQuote {
+    class Base {
         constructor(attributes = {}) {
             this.children = [];
             this.attributes = attributes;
         }
-        get renderWrapper() {
-            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-        }
         add(child) {
             this.children.push(child);
             return this;
         }
-    }
-
-    class Box {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-        }
         add_action(eventType, stateName, fnName, options = {}) {
             this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
             return this;
         }
+        get renderWrapper() {
+            return "";
+        }
     }
 
-    class Bold {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class BlockQuote extends Base {
         get renderWrapper() {
-            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
         }
     }
 
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class Div extends Base {
         get renderWrapper() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
         }
     }
 
-    class Checkbox {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
+    class Bold extends Base {
         get renderWrapper() {
-            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
         }
     }
 
-    class Code {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Button extends Base {
         get renderWrapper() {
-            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
         }
     }
 
-    class DateTimeField {
-        constructor(state, attribute, attributes = {}) {
-            this.attributes = {};
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-            this.attributes["data-attribute"] = attribute;
-        }
+    class Code extends Base {
         get renderWrapper() {
-            const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-            return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-        datetime_local_value(value) {
-            if (!value) {
-                return "";
-            }
-            const date = new Date(value);
-            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-            let month = date.getMonth() + 1;
-            let day = date.getDate();
-            let hours = date.getHours();
-            let minutes = date.getMinutes();
-            if (month < 10) {
-                month = `0${month}`;
-            }
-            if (day < 10) {
-                day = `0${day}`;
-            }
-            if (hours < 10) {
-                hours = `0${hours}`;
-            }
-            if (minutes < 10) {
-                minutes = `0${minutes}`;
-            }
-            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
         }
     }
 
-    class Element {
+    class Element extends Base {
         constructor(type, attributes = {}) {
+            super(attributes);
             this.children = [];
             this.type = type;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
     class Embed {
@@ -203,187 +111,86 @@ var Clapton = (function (exports) {
         }
     }
 
-    class Emphasis {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Emphasis extends Base {
         get renderWrapper() {
             return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Form {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Form extends Base {
         get renderWrapper() {
             return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Heading {
+    class Heading extends Base {
         constructor(level, attributes = {}) {
-            this.children = [];
+            super(attributes);
             this.level = level;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Image {
-        constructor(src, alt, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.src = src;
-            this.alt = alt;
-        }
+    class Image extends Base {
         get renderWrapper() {
-            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+            return `<img ${htmlAttributes(this.attributes)}/>`;
         }
     }
 
-    class Link {
-        constructor(href, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.href = href;
-        }
+    class Link extends Base {
         get renderWrapper() {
-            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
         }
     }
 
-    class ListItem {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class ListItem extends Base {
         get renderWrapper() {
             return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
         }
     }
 
-    class List {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class List extends Base {
         get renderWrapper() {
             return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
         }
     }
 
-    class OrderedList {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class OrderedList extends Base {
         get renderWrapper() {
             return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
         }
     }
 
-    class Paragraph {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Paragraph extends Base {
         get renderWrapper() {
             return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Quote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Quote extends Base {
         get renderWrapper() {
             return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class RadioButton {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
     }
 
-    class Select {
+    class Select extends Base {
         constructor(options = [], state, attribute, attributes = {}) {
-            this.children = [];
+            super(attributes);
             this.options = options;
             this.state = state;
             this.attribute = attribute;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
         }
     }
 
-    class Span {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Span extends Base {
         get renderWrapper() {
             return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
     class Component {
@@ -393,7 +200,7 @@ var Clapton = (function (exports) {
             this._errors = errors;
         }
         get render() {
-            return new Box({});
+            return new Div({});
         }
         get renderWrapper() {
             const root = this.render;
@@ -428,19 +235,43 @@ var Clapton = (function (exports) {
     }
     Component._effects = [];
 
-    class TextField {
+    class Input extends Base {
         constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
+            super(attributes);
             this.attribute = attribute;
+            this.state = state;
             this.attributes["data-attribute"] = attribute;
         }
         get renderWrapper() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+            let value = this.state[this.attribute];
+            if (this.attributes.type === "datetime-local" && value) {
+                value = this.datetime_local_value(value);
+            }
+            return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
         }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+        datetime_local_value(value) {
+            if (!value) {
+                return "";
+            }
+            const date = new Date(value);
+            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+            let month = date.getMonth() + 1;
+            let day = date.getDate();
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            if (month < 10) {
+                month = `0${month}`;
+            }
+            if (day < 10) {
+                day = `0${day}`;
+            }
+            if (hours < 10) {
+                hours = `0${hours}`;
+            }
+            if (minutes < 10) {
+                minutes = `0${minutes}`;
+            }
+            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
         }
     }
 
@@ -453,48 +284,41 @@ var Clapton = (function (exports) {
         }
     }
 
-    class TextArea {
+    class TextArea extends Base {
         constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
+            super(attributes);
             this.attribute = attribute;
+            this.state = state;
             this.attributes["data-attribute"] = attribute;
         }
         get renderWrapper() {
             return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
         }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
     }
 
     exports.BlockQuote = BlockQuote;
     exports.Bold = Bold;
-    exports.Box = Box;
     exports.Button = Button;
-    exports.Checkbox = Checkbox;
     exports.Code = Code;
     exports.Component = Component;
-    exports.DateTimeField = DateTimeField;
+    exports.Div = Div;
     exports.Element = Element;
     exports.Embed = Embed;
     exports.Emphasis = Emphasis;
     exports.Form = Form;
     exports.Heading = Heading;
     exports.Image = Image;
+    exports.Input = Input;
     exports.Link = Link;
     exports.List = List;
     exports.ListItem = ListItem;
     exports.OrderedList = OrderedList;
     exports.Paragraph = Paragraph;
     exports.Quote = Quote;
-    exports.RadioButton = RadioButton;
     exports.Select = Select;
     exports.Span = Span;
     exports.Text = Text;
     exports.TextArea = TextArea;
-    exports.TextField = TextField;
 
     return exports;
 
diff --git a/lib/clapton/javascripts/dist/components.js b/lib/clapton/javascripts/dist/components.js
index 8040ccd..e803c04 100644
--- a/lib/clapton/javascripts/dist/components.js
+++ b/lib/clapton/javascripts/dist/components.js
@@ -40,155 +40,63 @@ const escapeHtml = (unsafe) => {
         .replace(/'/g, "&#039;");
 };
 
-class BlockQuote {
+class Base {
     constructor(attributes = {}) {
         this.children = [];
         this.attributes = attributes;
     }
-    get renderWrapper() {
-        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-    }
     add(child) {
         this.children.push(child);
         return this;
     }
-}
-
-class Box {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
-    get renderWrapper() {
-        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-    }
     add_action(eventType, stateName, fnName, options = {}) {
         this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
         return this;
     }
+    get renderWrapper() {
+        return "";
+    }
 }
 
-class Button {
-    constructor(attributes = {}) {
-        this.attributes = attributes;
-        this.children = [];
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class BlockQuote extends Base {
     get renderWrapper() {
-        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
     }
 }
 
-class Bold {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Div extends Base {
     get renderWrapper() {
-        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
     }
 }
 
-class Checkbox {
-    constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
-        this.attribute = attribute;
-        this.attributes["data-attribute"] = attribute;
-    }
+class Button extends Base {
     get renderWrapper() {
-        return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
     }
 }
 
-class Code {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Bold extends Base {
     get renderWrapper() {
-        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
     }
 }
 
-class DateTimeField {
-    constructor(state, attribute, attributes = {}) {
-        this.attributes = {};
-        this.state = state;
-        this.attribute = attribute;
-        this.attributes = attributes;
-        this.attributes["data-attribute"] = attribute;
-    }
+class Code extends Base {
     get renderWrapper() {
-        const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-        return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
-    datetime_local_value(value) {
-        if (!value) {
-            return "";
-        }
-        const date = new Date(value);
-        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        if (month < 10) {
-            month = `0${month}`;
-        }
-        if (day < 10) {
-            day = `0${day}`;
-        }
-        if (hours < 10) {
-            hours = `0${hours}`;
-        }
-        if (minutes < 10) {
-            minutes = `0${minutes}`;
-        }
-        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
     }
 }
 
-class Element {
+class Element extends Base {
     constructor(type, attributes = {}) {
+        super(attributes);
         this.children = [];
         this.type = type;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
 class Embed {
@@ -200,187 +108,86 @@ class Embed {
     }
 }
 
-class Emphasis {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Emphasis extends Base {
     get renderWrapper() {
         return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Form {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Form extends Base {
     get renderWrapper() {
         return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Heading {
+class Heading extends Base {
     constructor(level, attributes = {}) {
-        this.children = [];
+        super(attributes);
         this.level = level;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Image {
-    constructor(src, alt, attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-        this.src = src;
-        this.alt = alt;
-    }
+class Image extends Base {
     get renderWrapper() {
-        return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+        return `<img ${htmlAttributes(this.attributes)}/>`;
     }
 }
 
-class Link {
-    constructor(href, attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-        this.href = href;
-    }
+class Link extends Base {
     get renderWrapper() {
-        return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
     }
 }
 
-class ListItem {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class ListItem extends Base {
     get renderWrapper() {
         return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
     }
 }
 
-class List {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class List extends Base {
     get renderWrapper() {
         return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
     }
 }
 
-class OrderedList {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class OrderedList extends Base {
     get renderWrapper() {
         return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
     }
 }
 
-class Paragraph {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Paragraph extends Base {
     get renderWrapper() {
         return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Quote {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Quote extends Base {
     get renderWrapper() {
         return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
-}
-
-class RadioButton {
-    constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
-        this.attribute = attribute;
-        this.attributes["data-attribute"] = attribute;
-    }
-    get renderWrapper() {
-        return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
 }
 
-class Select {
+class Select extends Base {
     constructor(options = [], state, attribute, attributes = {}) {
-        this.children = [];
+        super(attributes);
         this.options = options;
         this.state = state;
         this.attribute = attribute;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
     }
 }
 
-class Span {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Span extends Base {
     get renderWrapper() {
         return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
 class Component {
@@ -390,7 +197,7 @@ class Component {
         this._errors = errors;
     }
     get render() {
-        return new Box({});
+        return new Div({});
     }
     get renderWrapper() {
         const root = this.render;
@@ -425,19 +232,43 @@ class Component {
 }
 Component._effects = [];
 
-class TextField {
+class Input extends Base {
     constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
+        super(attributes);
         this.attribute = attribute;
+        this.state = state;
         this.attributes["data-attribute"] = attribute;
     }
     get renderWrapper() {
-        return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        let value = this.state[this.attribute];
+        if (this.attributes.type === "datetime-local" && value) {
+            value = this.datetime_local_value(value);
+        }
+        return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
     }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+    datetime_local_value(value) {
+        if (!value) {
+            return "";
+        }
+        const date = new Date(value);
+        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        if (month < 10) {
+            month = `0${month}`;
+        }
+        if (day < 10) {
+            day = `0${day}`;
+        }
+        if (hours < 10) {
+            hours = `0${hours}`;
+        }
+        if (minutes < 10) {
+            minutes = `0${minutes}`;
+        }
+        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
     }
 }
 
@@ -450,24 +281,20 @@ class Text {
     }
 }
 
-class TextArea {
+class TextArea extends Base {
     constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
+        super(attributes);
         this.attribute = attribute;
+        this.state = state;
         this.attributes["data-attribute"] = attribute;
     }
     get renderWrapper() {
         return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
     }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
 }
 
 const Clapton = {
-    Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+    Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
 };
 
 export { Clapton };
diff --git a/lib/clapton/javascripts/src/c-base.ts b/lib/clapton/javascripts/src/c-base.ts
index 63b879b..e0ff060 100644
--- a/lib/clapton/javascripts/src/c-base.ts
+++ b/lib/clapton/javascripts/src/c-base.ts
@@ -1,11 +1,11 @@
 import { Clapton } from "components"
 
-const bq = (...props: any[]) => {
+const blockquote = (...props: any[]) => {
   return new Clapton.BlockQuote(...props)
 }
 
-const box = (...props: any[]) => {
-  return new Clapton.Box(...props)
+const div = (...props: any[]) => {
+  return new Clapton.Div(...props)
 }
 
 const b = (...props: any[]) => {
@@ -16,18 +16,10 @@ const button = (...props: any[]) => {
   return new Clapton.Button(...props)
 }
 
-const check = (...props: any[]) => {
-  return new Clapton.Checkbox(props[0], props[1], props[2])
-}
-
 const code = (...props: any[]) => {
   return new Clapton.Code(...props)
 }
 
-const datetime = (...props: any[]) => {
-  return new Clapton.DateTimeField(props[0], props[1], props[2])
-}
-
 const el = (...props: any[]) => {
   return new Clapton.Element(props[0], props[1])
 }
@@ -44,16 +36,36 @@ const form = (...props: any[]) => {
   return new Clapton.Form(...props)
 }
 
-const h = (...props: any[]) => {
-  return new Clapton.Heading(props[0], props[1])
+const h1 = (...props: any[]) => {
+  return new Clapton.Heading(1, props[1])
+}
+
+const h2 = (...props: any[]) => {
+  return new Clapton.Heading(2, props[1])
+}
+
+const h3 = (...props: any[]) => {
+  return new Clapton.Heading(3, props[1])
+}
+
+const h4 = (...props: any[]) => {
+  return new Clapton.Heading(4, props[1])
+}
+
+const h5 = (...props: any[]) => {
+  return new Clapton.Heading(5, props[1])
+}
+
+const h6 = (...props: any[]) => {
+  return new Clapton.Heading(6, props[1])
 }
 
 const img = (...props: any[]) => {
-  return new Clapton.Image(props[0], props[1], props[2])
+  return new Clapton.Image(props[0])
 }
 
 const a = (...props: any[]) => {
-  return new Clapton.Link(props[0], props[1])
+  return new Clapton.Link(props[0])
 }
 
 const li = (...props: any[]) => {
@@ -76,10 +88,6 @@ const q = (...props: any[]) => {
   return new Clapton.Quote(...props)
 }
 
-const radio = (...props: any[]) => {
-  return new Clapton.RadioButton(props[0], props[1], props[2])
-}
-
 const select = (...props: any[]) => {
   return new Clapton.Select(props[0], props[1], props[2])
 }
@@ -93,7 +101,7 @@ const textarea = (...props: any[]) => {
 }
 
 const input = (...props: any[]) => {
-  return new Clapton.TextField(props[0], props[1], props[2])
+  return new Clapton.Input(props[0], props[1], props[2])
 }
 
 const text = (...props: any[]) => {
@@ -102,20 +110,16 @@ const text = (...props: any[]) => {
 
 const c = (name: string, ...props: any[]) => {
   switch (name) {
-    case "bq":
-      return bq(...props)
-    case "box":
-      return box(...props)
+    case "blockquote":
+      return blockquote(...props)
+    case "div":
+      return div(...props)
     case "b":
       return b(...props)
     case "button":
       return button(...props)
-    case "check":
-      return check(...props)
     case "code":
       return code(...props)
-    case "datetime":
-      return datetime(...props)
     case "el":
       return el(...props)
     case "embed":
@@ -124,8 +128,18 @@ const c = (name: string, ...props: any[]) => {
       return em(...props)
     case "form":
       return form(...props)
-    case "h":
-      return h(...props)
+    case "h1":
+      return h1(...props)
+    case "h2":
+      return h2(...props)
+    case "h3":
+      return h3(...props)
+    case "h4":
+      return h4(...props)
+    case "h5":
+      return h5(...props)
+    case "h6":
+      return h6(...props)
     case "img":
       return img(...props)
     case "a":
@@ -140,8 +154,6 @@ const c = (name: string, ...props: any[]) => {
       return p(...props)
     case "q":
       return q(...props)
-    case "radio":
-      return radio(...props)
     case "select":
       return select(...props)
     case "span":
@@ -153,7 +165,7 @@ const c = (name: string, ...props: any[]) => {
     case "text":
       return text(...props)
     default:
-      return new Clapton.Component(...props)
+      return new Clapton.Element(name, ...props)
   }
 }
 
diff --git a/lib/clapton/javascripts/src/components-for-test.ts b/lib/clapton/javascripts/src/components-for-test.ts
index 1fc6a43..8ed35db 100644
--- a/lib/clapton/javascripts/src/components-for-test.ts
+++ b/lib/clapton/javascripts/src/components-for-test.ts
@@ -1,10 +1,8 @@
 import { BlockQuote } from "./components/block-quote"
-import { Box } from "./components/box"
+import { Div } from "./components/div"
 import { Bold } from "./components/bold"
 import { Button } from "./components/button"
-import { Checkbox } from "./components/checkbox"
 import { Code } from "./components/code"
-import { DateTimeField } from "./components/datetime-field"
 import { Element } from "./components/element"
 import { Embed } from "./components/embed"
 import { Emphasis } from "./components/emphasis"
@@ -17,14 +15,13 @@ import { List } from "./components/list"
 import { OrderedList } from "./components/ordered-list"
 import { Paragraph } from "./components/paragraph"
 import { Quote } from "./components/quote"
-import { RadioButton } from "./components/radio-button"
 import { Select } from "./components/select"
 import { Span } from "./components/span"
 import { Component } from "./components/component"
-import { TextField } from "./components/text-field"
+import { Input } from "./components/input"
 import { Text } from "./components/text"
 import { TextArea } from "./components/text-area"
 
 export {
-  Component, Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+  Component, Div, Text, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Input, Quote, Select, Span, Embed, Bold, TextArea
 };
diff --git a/lib/clapton/javascripts/src/components.ts b/lib/clapton/javascripts/src/components.ts
index 3c47285..c30b677 100644
--- a/lib/clapton/javascripts/src/components.ts
+++ b/lib/clapton/javascripts/src/components.ts
@@ -1,10 +1,8 @@
 import { BlockQuote } from "./components/block-quote"
-import { Box } from "./components/box"
+import { Div } from "./components/div"
 import { Button } from "./components/button"
 import { Bold } from "./components/bold"
-import { Checkbox } from "./components/checkbox"
 import { Code } from "./components/code"
-import { DateTimeField } from "./components/datetime-field"
 import { Element } from "./components/element"
 import { Embed } from "./components/embed"
 import { Emphasis } from "./components/emphasis"
@@ -17,14 +15,13 @@ import { List } from "./components/list"
 import { OrderedList } from "./components/ordered-list"
 import { Paragraph } from "./components/paragraph"
 import { Quote } from "./components/quote"
-import { RadioButton } from "./components/radio-button"
 import { Select } from "./components/select"
 import { Span } from "./components/span"
 import { Component } from "./components/component"
-import { TextField } from "./components/text-field"
+import { Input } from "./components/input"
 import { Text } from "./components/text"
 import { TextArea } from "./components/text-area"
 
 export const Clapton = {
-  Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+  Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
 };
diff --git a/lib/clapton/javascripts/src/components/box.ts b/lib/clapton/javascripts/src/components/base.ts
similarity index 66%
rename from lib/clapton/javascripts/src/components/box.ts
rename to lib/clapton/javascripts/src/components/base.ts
index 4ed26df..d1dd17a 100644
--- a/lib/clapton/javascripts/src/components/box.ts
+++ b/lib/clapton/javascripts/src/components/base.ts
@@ -1,6 +1,4 @@
-import { htmlAttributes } from "../html/html-attributes";
-
-export class Box {
+export class Base {
   attributes: Record<string, any>;
   children: any[];
 
@@ -9,17 +7,17 @@ export class Box {
     this.attributes = attributes;
   }
 
-  add(child: any): this {
+  add(child: any): Base {
     this.children.push(child);
     return this;
   }
 
-  get renderWrapper(): string {
-    return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-  }
-
   add_action(eventType: string, stateName: string, fnName: string, options: Record<string, any> = {}): this {
     this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
     return this;
   }
+  
+  get renderWrapper() {
+    return "";
+  }
 }
diff --git a/lib/clapton/javascripts/src/components/block-quote.spec.ts b/lib/clapton/javascripts/src/components/block-quote.spec.ts
index 04020c5..0cb695f 100644
--- a/lib/clapton/javascripts/src/components/block-quote.spec.ts
+++ b/lib/clapton/javascripts/src/components/block-quote.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest"
-import { BlockQuote } from "./block-quote"
+import { BlockQuote} from "./block-quote"
 import { Text } from "./text"
 
 describe("BlockQuote", () => {
diff --git a/lib/clapton/javascripts/src/components/block-quote.ts b/lib/clapton/javascripts/src/components/block-quote.ts
index 947a77f..1b49328 100644
--- a/lib/clapton/javascripts/src/components/block-quote.ts
+++ b/lib/clapton/javascripts/src/components/block-quote.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class BlockQuote {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class BlockQuote extends Base {
   get renderWrapper(): string {
     return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
   }
-
-  add(child: any): BlockQuote {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/bold.ts b/lib/clapton/javascripts/src/components/bold.ts
index db4adcf..e93edb9 100644
--- a/lib/clapton/javascripts/src/components/bold.ts
+++ b/lib/clapton/javascripts/src/components/bold.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Bold {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Bold extends Base {
   get renderWrapper(): string {
     return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
   }
-
-  add(child: any): Bold {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/button.ts b/lib/clapton/javascripts/src/components/button.ts
index 3565cef..c87bec5 100644
--- a/lib/clapton/javascripts/src/components/button.ts
+++ b/lib/clapton/javascripts/src/components/button.ts
@@ -1,25 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Button {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.attributes = attributes;
-    this.children = [];
-  }
-
-  add(child: any): Button {
-    this.children.push(child);
-    return this;
-  }
-
+export class Button extends Base {
   get renderWrapper(): string {
     return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
   }
-
-  add_action(event: string, klass: string, fn: string, options: Record<string, any> = {}): Button {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/checkbox.spec.ts b/lib/clapton/javascripts/src/components/checkbox.spec.ts
deleted file mode 100644
index 3aa6bdb..0000000
--- a/lib/clapton/javascripts/src/components/checkbox.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { Checkbox } from "./checkbox"
-
-describe("Checkbox", () => {
-  it("returns empty string if no params", () => {
-    expect(new Checkbox({}, "foo").renderWrapper).toBe("<input type='checkbox' data-attribute='foo' value=''/>")
-  })
-
-  it("returns attributes and data attributes", () => {
-    expect(new Checkbox({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='checkbox' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
-  })
-
-  it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Checkbox({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='checkbox' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
-  })
-})
diff --git a/lib/clapton/javascripts/src/components/checkbox.ts b/lib/clapton/javascripts/src/components/checkbox.ts
deleted file mode 100644
index 4d12c67..0000000
--- a/lib/clapton/javascripts/src/components/checkbox.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { htmlAttributes } from "../html/html-attributes";
-
-export class Checkbox {
-  state: any;
-  attribute: string;
-  attributes: Record<string, any>;
-
-  constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
-    this.attributes = attributes;
-    this.attribute = attribute;
-    this.attributes["data-attribute"] = attribute;
-  }
-
-  get renderWrapper(): string {
-    return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-  }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): Checkbox {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
-}
diff --git a/lib/clapton/javascripts/src/components/code.ts b/lib/clapton/javascripts/src/components/code.ts
index 93fbb5c..d4b1d52 100644
--- a/lib/clapton/javascripts/src/components/code.ts
+++ b/lib/clapton/javascripts/src/components/code.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Code {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Code extends Base {
   get renderWrapper(): string {
     return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
   }
-
-  add(child: any): Code {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/component.ts b/lib/clapton/javascripts/src/components/component.ts
index ee3f454..17f750a 100644
--- a/lib/clapton/javascripts/src/components/component.ts
+++ b/lib/clapton/javascripts/src/components/component.ts
@@ -1,4 +1,4 @@
-import { Box } from "./box";
+import { Div } from "./div";
 
 export class Component {
   id: string;
@@ -14,7 +14,7 @@ export class Component {
   }
 
   get render(): any {
-    return new Box({});
+    return new Div({});
   }
 
   get renderWrapper(): string {
diff --git a/lib/clapton/javascripts/src/components/datetime-field.spec.ts b/lib/clapton/javascripts/src/components/datetime-field.spec.ts
deleted file mode 100644
index a508b24..0000000
--- a/lib/clapton/javascripts/src/components/datetime-field.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { DateTimeField } from "./datetime-field"
-
-describe("DateTimeField", () => {
-  it("returns empty string if no params", () => {
-    expect(new DateTimeField({}, "foo").renderWrapper).toBe("<input type='datetime-local' data-attribute='foo' value=''/>")
-  })
-
-  it("returns attributes and data attributes", () => {
-    expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toMatch(/<input type='datetime-local' id='1' data-foo='bar' data-attribute='foo' value='.+'\/>/)
-  })
-
-  it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toMatch(/<input type='datetime-local' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='.+'\/>/)
-  })
-})
diff --git a/lib/clapton/javascripts/src/components/box.spec.ts b/lib/clapton/javascripts/src/components/div.spec.ts
similarity index 59%
rename from lib/clapton/javascripts/src/components/box.spec.ts
rename to lib/clapton/javascripts/src/components/div.spec.ts
index 720687d..a8629ea 100644
--- a/lib/clapton/javascripts/src/components/box.spec.ts
+++ b/lib/clapton/javascripts/src/components/div.spec.ts
@@ -1,23 +1,23 @@
 import { describe, it, expect } from "vitest"
-import { Box } from "./box"
+import { Div } from "./div"
 import { Text } from "./text"
 
-describe("Box", () => {
+describe("Div", () => {
   it("returns empty string if no params", () => {
-    expect(new Box().renderWrapper).toBe("<div ></div>")
+    expect(new Div().renderWrapper).toBe("<div ></div>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Box({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
+    expect(new Div({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Box({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
-    expect(new Box({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
-    expect(new Box({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
+    expect(new Div({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
+    expect(new Div({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
+    expect(new Div({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
   })
 
   it("adds children", () => {
-    expect(new Box().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
+    expect(new Div().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
   })
 })
diff --git a/lib/clapton/javascripts/src/components/div.ts b/lib/clapton/javascripts/src/components/div.ts
new file mode 100644
index 0000000..cad1f39
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/div.ts
@@ -0,0 +1,8 @@
+import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
+
+export class Div extends Base {
+  get renderWrapper(): string {
+    return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
+  }  
+}
diff --git a/lib/clapton/javascripts/src/components/element.ts b/lib/clapton/javascripts/src/components/element.ts
index 054b865..34bd6eb 100644
--- a/lib/clapton/javascripts/src/components/element.ts
+++ b/lib/clapton/javascripts/src/components/element.ts
@@ -1,22 +1,16 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Element {
-  attributes: Record<string, any>;
-  children: any[];
+export class Element extends Base {
   type: string;
 
   constructor(type: string, attributes: Record<string, any> = {}) {
+    super(attributes)
     this.children = [];
     this.type = type;
-    this.attributes = attributes;
   }
 
   get renderWrapper(): string {
     return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
   }
-
-  add(child: any): Element {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/emphasis.ts b/lib/clapton/javascripts/src/components/emphasis.ts
index 8ff18c9..5c5e544 100644
--- a/lib/clapton/javascripts/src/components/emphasis.ts
+++ b/lib/clapton/javascripts/src/components/emphasis.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Emphasis {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Emphasis extends Base {
   get renderWrapper(): string {
     return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
   }
-
-  add(child: any): Emphasis {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/form.ts b/lib/clapton/javascripts/src/components/form.ts
index e51fd37..6fb9997 100644
--- a/lib/clapton/javascripts/src/components/form.ts
+++ b/lib/clapton/javascripts/src/components/form.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Form {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Form extends Base {
   get renderWrapper(): string {
     return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
   }
-
-  add(child: any): Form {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/heading.ts b/lib/clapton/javascripts/src/components/heading.ts
index de9858d..03b3aef 100644
--- a/lib/clapton/javascripts/src/components/heading.ts
+++ b/lib/clapton/javascripts/src/components/heading.ts
@@ -1,21 +1,15 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Heading {
-  attributes: Record<string, any>;
-  children: any[];
+export class Heading extends Base {
   level: number;
+
   constructor(level: number, attributes: Record<string, any> = {}) {
-    this.children = [];
+    super(attributes)
     this.level = level;
-    this.attributes = attributes;
   }
 
   get renderWrapper(): string {
     return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
   }
-
-  add(child: any): Heading {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/image.spec.ts b/lib/clapton/javascripts/src/components/image.spec.ts
index 057ab87..8db8bc5 100644
--- a/lib/clapton/javascripts/src/components/image.spec.ts
+++ b/lib/clapton/javascripts/src/components/image.spec.ts
@@ -3,10 +3,10 @@ import { Image } from "./image"
 
 describe("Image", () => {
   it("returns empty string if no params", () => {
-    expect(new Image("https://example.com/image.png", "").renderWrapper).toBe("<img src='https://example.com/image.png' alt='' />")
+    expect(new Image({ src: "https://example.com/image.png", alt: "" }).renderWrapper).toBe("<img src='https://example.com/image.png' alt=''/>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
+    expect(new Image({ src: "https://example.com/image.png", alt: "test", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
   })
 })
diff --git a/lib/clapton/javascripts/src/components/image.ts b/lib/clapton/javascripts/src/components/image.ts
index 4d7504f..35de638 100644
--- a/lib/clapton/javascripts/src/components/image.ts
+++ b/lib/clapton/javascripts/src/components/image.ts
@@ -1,19 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Image {
-  attributes: Record<string, any>;
-  children: any[];
-  src: string;
-  alt: string;
-
-  constructor(src: string, alt: string, attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-    this.src = src;
-    this.alt = alt;
-  }
-
+export class Image extends Base {
   get renderWrapper(): string {
-    return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+    return `<img ${htmlAttributes(this.attributes)}/>`;
   }
 }
diff --git a/lib/clapton/javascripts/src/components/input.spec.ts b/lib/clapton/javascripts/src/components/input.spec.ts
new file mode 100644
index 0000000..12c5b7d
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/input.spec.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest"
+import { Input } from "./input"
+
+describe("Input", () => {
+  it("returns empty string if no params", () => {
+    expect(new Input({}, "foo", { type: "text" }).renderWrapper).toBe("<input type='text' data-attribute='foo' value=''/>")
+  })
+
+  it("returns attributes and data attributes", () => {
+    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='text' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
+  })
+
+  it("returns attributes and data attributes with custom data attributes", () => {
+    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='text' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
+  })
+})
diff --git a/lib/clapton/javascripts/src/components/datetime-field.ts b/lib/clapton/javascripts/src/components/input.ts
similarity index 62%
rename from lib/clapton/javascripts/src/components/datetime-field.ts
rename to lib/clapton/javascripts/src/components/input.ts
index 508f08f..a3298ea 100644
--- a/lib/clapton/javascripts/src/components/datetime-field.ts
+++ b/lib/clapton/javascripts/src/components/input.ts
@@ -1,25 +1,23 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class DateTimeField {
+export class Input extends Base {
   state: any;
   attribute: string;
-  attributes: Record<string, any> = {};
 
   constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
+    super(attributes)
     this.attribute = attribute;
-    this.attributes = attributes;
+    this.state = state
     this.attributes["data-attribute"] = attribute;
   }
 
   get renderWrapper(): string {
-    const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-    return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-  }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): DateTimeField {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
+    let value = this.state[this.attribute]
+    if (this.attributes.type === "datetime-local" && value) {
+      value = this.datetime_local_value(value)
+    }
+    return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
   }
 
   datetime_local_value(value: string): string {
diff --git a/lib/clapton/javascripts/src/components/link.spec.ts b/lib/clapton/javascripts/src/components/link.spec.ts
index c3d3641..30c1ce6 100644
--- a/lib/clapton/javascripts/src/components/link.spec.ts
+++ b/lib/clapton/javascripts/src/components/link.spec.ts
@@ -4,20 +4,20 @@ import { Text } from "./text"
 
 describe("Link", () => {
   it("returns empty string if no params", () => {
-    expect(new Link("").renderWrapper).toBe("<a href='' ></a>")
+    expect(new Link({ href: "" }).renderWrapper).toBe("<a href=''></a>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Link("#").add(new Text("")).renderWrapper).toBe(`<a href='#' ></a>`)
+    expect(new Link({ href: "#" }).add(new Text("")).renderWrapper).toBe(`<a href='#'></a>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Link("#", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
-    expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
-    expect(new Link("#", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<a href='#' id='1' data-foo-baz='qux' data-foo-quux='corge'></a>`)
+    expect(new Link({ href: "#", id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
+    expect(new Link({ href: "#", id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
+    expect(new Link({ href: "#", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<a href='#' id='1' data-foo-baz='qux' data-foo-quux='corge'></a>`)
   })
 
   it("adds children", () => {
-    expect(new Link("#").add(new Text("Hello")).renderWrapper).toBe(`<a href='#' >Hello</a>`)
+    expect(new Link({ href: "#" }).add(new Text("Hello")).renderWrapper).toBe(`<a href='#'>Hello</a>`)
   })
 })
diff --git a/lib/clapton/javascripts/src/components/link.ts b/lib/clapton/javascripts/src/components/link.ts
index 09ff6c7..3dd576a 100644
--- a/lib/clapton/javascripts/src/components/link.ts
+++ b/lib/clapton/javascripts/src/components/link.ts
@@ -1,21 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Link {
-  attributes: Record<string, any>;
-  children: any[];
-  href: string;
-  constructor(href: string, attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-    this.href = href;
-  }
-
+export class Link extends Base {
   get renderWrapper(): string {
-    return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-  }
-
-  add(child: any): Link {
-    this.children.push(child);
-    return this;
+    return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
   }
 }
diff --git a/lib/clapton/javascripts/src/components/list-item.ts b/lib/clapton/javascripts/src/components/list-item.ts
index bc4d516..39b1c28 100644
--- a/lib/clapton/javascripts/src/components/list-item.ts
+++ b/lib/clapton/javascripts/src/components/list-item.ts
@@ -1,19 +1,7 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class ListItem {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
-  add(child: any): this {
-    this.children.push(child);
-    return this;
-  }
-
+export class ListItem extends Base {
   get renderWrapper(): string {
     return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
   }
diff --git a/lib/clapton/javascripts/src/components/list.ts b/lib/clapton/javascripts/src/components/list.ts
index 1d862b8..bc6d8a6 100644
--- a/lib/clapton/javascripts/src/components/list.ts
+++ b/lib/clapton/javascripts/src/components/list.ts
@@ -1,19 +1,7 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class List {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
-  add(child: any): this {
-    this.children.push(child);
-    return this;
-  }
-
+export class List extends Base {
   get renderWrapper(): string {
     return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
   }
diff --git a/lib/clapton/javascripts/src/components/ordered-list.ts b/lib/clapton/javascripts/src/components/ordered-list.ts
index 3862663..5abc8b1 100644
--- a/lib/clapton/javascripts/src/components/ordered-list.ts
+++ b/lib/clapton/javascripts/src/components/ordered-list.ts
@@ -1,19 +1,7 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class OrderedList {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
-  add(child: any): this {
-    this.children.push(child);
-    return this;
-  }
-
+export class OrderedList extends Base {
   get renderWrapper(): string {
     return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
   }
diff --git a/lib/clapton/javascripts/src/components/paragraph.ts b/lib/clapton/javascripts/src/components/paragraph.ts
index 8e498a9..f3b4007 100644
--- a/lib/clapton/javascripts/src/components/paragraph.ts
+++ b/lib/clapton/javascripts/src/components/paragraph.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Paragraph {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Paragraph extends Base {
   get renderWrapper(): string {
     return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
   }
-
-  add(child: any): Paragraph {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/quote.ts b/lib/clapton/javascripts/src/components/quote.ts
index 7c40f46..49625e5 100644
--- a/lib/clapton/javascripts/src/components/quote.ts
+++ b/lib/clapton/javascripts/src/components/quote.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Quote {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Quote extends Base {
   get renderWrapper(): string {
     return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
   }
-
-  add(child: any): Quote {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/radio-button.spec.ts b/lib/clapton/javascripts/src/components/radio-button.spec.ts
deleted file mode 100644
index ebad231..0000000
--- a/lib/clapton/javascripts/src/components/radio-button.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { RadioButton } from "./radio-button"
-
-describe("RadioButton", () => {
-  it("returns empty string if no params", () => {
-    expect(new RadioButton({}, "foo").renderWrapper).toBe("<input type='radio' data-attribute='foo' value=''/>")
-  })
-
-  it("returns attributes and data attributes", () => {
-    expect(new RadioButton({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='radio' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
-  })
-
-  it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new RadioButton({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='radio' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
-  })
-})
diff --git a/lib/clapton/javascripts/src/components/radio-button.ts b/lib/clapton/javascripts/src/components/radio-button.ts
deleted file mode 100644
index 9e85034..0000000
--- a/lib/clapton/javascripts/src/components/radio-button.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { htmlAttributes } from "../html/html-attributes";
-
-export class RadioButton {
-  state: any;
-  attribute: string;
-  attributes: Record<string, any>;
-
-  constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
-    this.attributes = attributes;
-    this.attribute = attribute;
-    this.attributes["data-attribute"] = attribute;
-  }
-
-  get renderWrapper(): string {
-    return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-  }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): RadioButton {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
-}
diff --git a/lib/clapton/javascripts/src/components/select.ts b/lib/clapton/javascripts/src/components/select.ts
index 1b68e6d..2f06cbe 100644
--- a/lib/clapton/javascripts/src/components/select.ts
+++ b/lib/clapton/javascripts/src/components/select.ts
@@ -1,23 +1,21 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
 type SelectOption = {
   value: string;
   text: string;
 };
 
-export class Select {
-  attributes: Record<string, any>;
-  children: any[];
+export class Select extends Base {
   options: SelectOption[];
   state: any;
   attribute: string;
 
   constructor(options: SelectOption[] = [], state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.children = [];
+    super(attributes)
     this.options = options;
     this.state = state;
     this.attribute = attribute;
-    this.attributes = attributes;
   }
 
   get renderWrapper(): string {
diff --git a/lib/clapton/javascripts/src/components/span.ts b/lib/clapton/javascripts/src/components/span.ts
index b9385b1..f4e8a88 100644
--- a/lib/clapton/javascripts/src/components/span.ts
+++ b/lib/clapton/javascripts/src/components/span.ts
@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Span {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Span extends Base {
   get renderWrapper(): string {
     return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
   }
-
-  add(child: any): Span {
-    this.children.push(child);
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/text-area.ts b/lib/clapton/javascripts/src/components/text-area.ts
index 6fcb52c..02dc943 100644
--- a/lib/clapton/javascripts/src/components/text-area.ts
+++ b/lib/clapton/javascripts/src/components/text-area.ts
@@ -1,23 +1,18 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class TextArea {
+export class TextArea extends Base {
   state: any;
   attribute: string;
-  attributes: Record<string, any>;
 
   constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
-    this.attributes = attributes;
+    super(attributes)
     this.attribute = attribute;
+    this.state = state
     this.attributes["data-attribute"] = attribute;
   }
 
   get renderWrapper(): string {
     return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
   }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): TextArea {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
 }
diff --git a/lib/clapton/javascripts/src/components/text-field.spec.ts b/lib/clapton/javascripts/src/components/text-field.spec.ts
deleted file mode 100644
index d42dc51..0000000
--- a/lib/clapton/javascripts/src/components/text-field.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { TextField } from "./text-field"
-
-describe("TextField", () => {
-  it("returns empty string if no params", () => {
-    expect(new TextField({}, "foo").renderWrapper).toBe("<input type='text' data-attribute='foo' value=''/>")
-  })
-
-  it("returns attributes and data attributes", () => {
-    expect(new TextField({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='text' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
-  })
-
-  it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new TextField({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='text' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
-  })
-})
diff --git a/lib/clapton/javascripts/src/components/text-field.ts b/lib/clapton/javascripts/src/components/text-field.ts
deleted file mode 100644
index 956eabe..0000000
--- a/lib/clapton/javascripts/src/components/text-field.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { htmlAttributes } from "../html/html-attributes";
-
-export class TextField {
-  state: any;
-  attribute: string;
-  attributes: Record<string, any>;
-
-  constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
-    this.attributes = attributes;
-    this.attribute = attribute;
-    this.attributes["data-attribute"] = attribute;
-  }
-
-  get renderWrapper(): string {
-    return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-  }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): TextField {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
-}
diff --git a/lib/clapton/test_helper/base.rb b/lib/clapton/test_helper/base.rb
index d94e2ec..bc6891b 100644
--- a/lib/clapton/test_helper/base.rb
+++ b/lib/clapton/test_helper/base.rb
@@ -12,10 +12,10 @@ def render_component(component, params)
           js += "\n"
         end
         js = js.sub("const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };", "const Clapton = {
-        Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };")
+    Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
+};", "const Clapton = {
+    Div, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
+};")
         context = ExecJS.compile(js)
         html = context.eval("new #{component.name.camelize}(#{params.to_json}).renderWrapper")
         @page = Capybara.string(html)
diff --git a/test/dummy/app/components/category_list_component.rb b/test/dummy/app/components/category_list_component.rb
index 00c4fa1..654fa36 100644
--- a/test/dummy/app/components/category_list_component.rb
+++ b/test/dummy/app/components/category_list_component.rb
@@ -1,6 +1,6 @@
 class CategoryListComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     @state.categories.map do |category|
       box.add(CategoryComponent.new(category: category))
     end
diff --git a/test/dummy/app/components/chat_component.rb b/test/dummy/app/components/chat_component.rb
index 81e3b75..759d651 100644
--- a/test/dummy/app/components/chat_component.rb
+++ b/test/dummy/app/components/chat_component.rb
@@ -1,6 +1,6 @@
 class ChatComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     @state[:messages].each do |message|
       box.add(MessageComponent.new(role: message[:role], content: message[:content]))
     end
diff --git a/test/dummy/app/components/home_component.rb b/test/dummy/app/components/home_component.rb
index 5ea2dff..53d6354 100644
--- a/test/dummy/app/components/home_component.rb
+++ b/test/dummy/app/components/home_component.rb
@@ -1,6 +1,6 @@
 class HomeComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     box.add(c(:text, @state.message))
     box
   end
diff --git a/test/dummy/app/components/item_list_component.rb b/test/dummy/app/components/item_list_component.rb
index 62bed15..478ddf0 100644
--- a/test/dummy/app/components/item_list_component.rb
+++ b/test/dummy/app/components/item_list_component.rb
@@ -1,6 +1,6 @@
 class ItemListComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     @state.items.map do |item|
       box.add(ItemComponent.new(item: item, selected: item[:id] == @state.item_id))
     end
diff --git a/test/dummy/app/components/message_component.rb b/test/dummy/app/components/message_component.rb
index 5ad115f..a1316c4 100644
--- a/test/dummy/app/components/message_component.rb
+++ b/test/dummy/app/components/message_component.rb
@@ -1,6 +1,6 @@
 class MessageComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     box.add(c(:text, "#{@state[:role]}: #{@state[:content]}"))
     box
   end
diff --git a/test/dummy/app/components/sample_component.rb b/test/dummy/app/components/sample_component.rb
index 52e2411..9d7fd68 100644
--- a/test/dummy/app/components/sample_component.rb
+++ b/test/dummy/app/components/sample_component.rb
@@ -1,21 +1,17 @@
 class SampleComponent < Clapton::Component
   def render
-    box = c(:box, { class: "sample-component" })
+    box = c(:div, { class: "sample-component" })
     text = Clapton::Text.new(@state.message)
     box
       .add(c(:a, "/tasks").add(c(:text, "Tasks")))
       .add(Clapton::BlockQuote.new.add(text))
-      .add(c(:bq).add(text))
-      .add(Clapton::Box.new.add(text))
-      .add(c(:box).add(text))
+      .add(c(:blockquote).add(text))
+      .add(Clapton::Div.new.add(text))
+      .add(c(:div).add(text))
       .add(Clapton::Button.new.add(text))
       .add(c(:button).add(text))
-      .add(Clapton::Checkbox.new(@state, :boolean, {}))
-      .add(c(:check, @state, :boolean, {}))
       .add(Clapton::Code.new(text))
       .add(c(:code).add(text))
-      .add(Clapton::DateTimeField.new(@state, :datetime, {}))
-      .add(c(:datetime, @state, :datetime, {}))
       .add(Clapton::Element.new("p").add(text))
       .add(c(:el, "p").add(text))
       .add(Clapton::Embed.new("<p>Text</p>"))
@@ -25,7 +21,7 @@ def render
       .add(Clapton::Form.new.add(text))
       .add(c(:form).add(text))
       .add(Clapton::Heading.new(1, text))
-      .add(c(:h, 1, text))
+      .add(c(:h1).add(text))
       .add(Clapton::Image.new("https://example.com/image.png", "Image"))
       .add(c(:img, "https://example.com/image.png", "Image"))
       .add(Clapton::Link.new("https://example.com").add(text))
@@ -50,15 +46,13 @@ def render
       .add(c(:p).add(text))
       .add(Clapton::Quote.new(text))
       .add(c(:q).add(text))
-      .add(Clapton::RadioButton.new(@state, :boolean, {}))
-      .add(c(:radio, @state, :boolean, {}))
       .add(Clapton::Select.new([], :HomeState, :boolean))
       .add(c(:select, [], :HomeState, :boolean))
       .add(Clapton::Span.new.add(text))
       .add(c(:span).add(text))
       .add(Clapton::TextArea.new(@state, :message, {}))
       .add(c(:textarea, @state, :message, {}))
-      .add(Clapton::TextField.new(@state, :message, {}))
+      .add(Clapton::Input.new(@state, :message, {}))
       .add(c(:input, @state, :message, {}))
       .add(Clapton::Text.new("Hello World"))
       .add(c(:text, "Hello World"))
diff --git a/test/dummy/app/components/shop_component.rb b/test/dummy/app/components/shop_component.rb
index 7a2a957..2825d7f 100644
--- a/test/dummy/app/components/shop_component.rb
+++ b/test/dummy/app/components/shop_component.rb
@@ -1,6 +1,6 @@
 class ShopComponent < Clapton::Component
   def render
-    c(:h, 1)
+    c(:h1)
       .add(c(:text, "Shop"))
       .add(CategoryListComponent.new(categories: @state.categories))
       .add(ItemListComponent.new(items: @state.items.select { |item| item.category_id == @state.category_id }))
diff --git a/test/dummy/app/components/task_item_component.rb b/test/dummy/app/components/task_item_component.rb
index 5787801..75a2683 100644
--- a/test/dummy/app/components/task_item_component.rb
+++ b/test/dummy/app/components/task_item_component.rb
@@ -1,14 +1,14 @@
 class TaskItemComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     btn = c(:button, { "data-testid": "task-done-#{@state.id}" })
     btn.add(c(:text, @state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
 
-    tf = c(:input, @state, :title, { "data-testid": "task-title-#{@state.id}" })
+    tf = c(:input, @state, :title, { "type": "text", "data-testid": "task-title-#{@state.id}" })
     tf.add_action(:input, :TaskListState, :update_title)
 
-    dt = c(:datetime, @state, :due, { "data-testid": "task-due-#{@state.id}" })
+    dt = c(:input, @state, :due, { "type": "datetime-local", "data-testid": "task-due-#{@state.id}" })
     dt.add_action(:input, :TaskListState, :update_due)
 
     box.add(btn).add(tf).add(dt)
diff --git a/test/dummy/app/components/task_list_component.rb b/test/dummy/app/components/task_list_component.rb
index 0ae792d..6ad2427 100644
--- a/test/dummy/app/components/task_list_component.rb
+++ b/test/dummy/app/components/task_list_component.rb
@@ -1,6 +1,6 @@
 class TaskListComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     @state.tasks.each do |task|
       box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
diff --git a/test/dummy/app/components/user_form_component.rb b/test/dummy/app/components/user_form_component.rb
index e01470f..fe61ef7 100644
--- a/test/dummy/app/components/user_form_component.rb
+++ b/test/dummy/app/components/user_form_component.rb
@@ -1,6 +1,6 @@
 class UserFormComponent < Clapton::Component
   def render
-    text_field = Clapton::TextField.new(state, :name)
+    text_field = Clapton::Input.new(@state, :name, { type: "text" })
     text_field.add_action(:input, :UserFormState, :save, { debounce: 500 })
     text_field.add_action(:input, :UserItemState, :update, { debounce: 500 })
   end
diff --git a/test/dummy/app/components/user_item_component.rb b/test/dummy/app/components/user_item_component.rb
index 41b7ba0..e17313c 100644
--- a/test/dummy/app/components/user_item_component.rb
+++ b/test/dummy/app/components/user_item_component.rb
@@ -1,10 +1,10 @@
 class UserItemComponent < Clapton::Component
   def render
-    box = c(:box)
-    link = c(:link, { href: "/users/#{state[:id]}" })
-    link.add(c(:text, state[:name]))
-    form = UserFormComponent.new({ id: state[:id], name: state[:name], count: state[:count] })
-    text = c(:text, state[:count].to_s)
+    box = c(:div)
+    link = c(:a, { href: "/users/#{@state[:id]}" })
+    link.add(c(:text, @state[:name]))
+    form = UserFormComponent.new({ id: @state[:id], name: @state[:name], count: @state[:count] })
+    text = c(:text, @state[:count].to_s)
     box.add(link).add(form).add(text)
   end
 end
diff --git a/test/dummy/app/components/user_list_component.rb b/test/dummy/app/components/user_list_component.rb
index 0858eee..1a83023 100644
--- a/test/dummy/app/components/user_list_component.rb
+++ b/test/dummy/app/components/user_list_component.rb
@@ -1,7 +1,7 @@
 class UserListComponent < Clapton::Component
   def render
-    box = c(:box)
-    state[:users].each do |user|
+    box = c(:div)
+    @state[:users].each do |user|
       box.add(UserItemComponent.new(id: user[:id], name: user[:name], count: user[:count]))
     end
     box
diff --git a/test/dummy/app/components/user_prompt_component.rb b/test/dummy/app/components/user_prompt_component.rb
index 9f8c098..ee1e4d2 100644
--- a/test/dummy/app/components/user_prompt_component.rb
+++ b/test/dummy/app/components/user_prompt_component.rb
@@ -1,6 +1,6 @@
 class UserPromptComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     text_field = c(:input, @state, :content)
     button = c(:button, { disabled: @state.content.empty? })
     button.add(c(:text, "Send"))
diff --git a/test/dummy/app/components/video_component.rb b/test/dummy/app/components/video_component.rb
index 553974a..25942d5 100644
--- a/test/dummy/app/components/video_component.rb
+++ b/test/dummy/app/components/video_component.rb
@@ -1,6 +1,6 @@
 class VideoComponent < Clapton::Component
   def render
-    box = c(:box)
+    box = c(:div)
     box.add(c(:button).add(c(:text, @state.is_playing ? "Pause" : "Play"))).add_action(:click, :VideoState, :toggle_play)
     box.add(VideoPlayerComponent.new(url: @state.video_url, is_playing: @state.is_playing))
     box
diff --git a/test/dummy/app/components/video_player_component.rb b/test/dummy/app/components/video_player_component.rb
index 3c0262f..62a457c 100644
--- a/test/dummy/app/components/video_player_component.rb
+++ b/test/dummy/app/components/video_player_component.rb
@@ -1,10 +1,8 @@
 class VideoPlayerComponent < Clapton::Component
   def render
-    c(:embed, <<~HTML
-      <video id="video" src="#{@state.url}" loop playsInline></video>
-      <div id="video-debug"></div>
-    HTML
-    )
+    box = c(:div)
+    box.add(c(:video, { id: "video", src: @state.url, loop: "loop", playsInline: "playsInline" }))
+    box.add(c(:div, { id: "video-debug" }))
   end
 
   effect [:is_playing] do |state|
diff --git a/test/dummy/test/components/sample_test.rb b/test/dummy/test/components/sample_test.rb
index 2e76f8e..f426972 100644
--- a/test/dummy/test/components/sample_test.rb
+++ b/test/dummy/test/components/sample_test.rb
@@ -10,9 +10,7 @@ class SampleComponentTest < ActiveSupport::TestCase
     assert_selector "blockquote"
     assert_selector "div"
     assert_selector "button"
-    assert_selector "input[type='checkbox']"
     assert_selector "code"
-    assert_selector "input[type='datetime-local']"
     assert_selector "p"
     assert_selector "em"
     assert_selector "form"