turbo_material 0.1.1

data/app/assets/javascripts/turbo_material/material_dialog_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    dialog = undefined;
+
+    static values = {
+        opened: Boolean
+    }
+
+    connect() {
+        this.dialog = mdc.dialog.MDCDialog.attachTo(this.element);
+        if (this.openedValue) {
+            this.dialog.open();
+        }
+    }
+
+    close() {
+        this.dialog.close();
+    }
+
+    open() {
+        this.dialog.open();
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_input_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    connect() {
+        mdc.textField.MDCTextField.attachTo(this.element);
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_list_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    connect() {
+        this.list = mdc.list.MDCList.attachTo(this.element);
+        this.list.listen('MDCList:action', (event) => {
+            this.focusElement(event.detail.index);
+            this.element.dispatchEvent(new CustomEvent('country-select-focus', {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    index: event.detail.index
+                }
+            }));
+        });
+    }
+
+    selected() {
+        return this.list.listElements[this.list.selectedIndex];
+    }
+
+    focusNext() {
+        if (this.list.selectedIndex === undefined ) {
+            this.list.selectedIndex = 0;
+        } else if (this.list.selectedIndex < this.list.listElements.length - 1) {
+            this.list.selectedIndex++;
+        } else {
+            this.list.selectedIndex = 0;
+        }
+        this.element.querySelector(".mdc-deprecated-list-item--selected").scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+
+    focusPrevious() {
+        if (this.list.selectedIndex === undefined ) {
+            this.list.selectedIndex = this.list.listElements.length - 1;
+        } else if (this.list.selectedIndex > 0) {
+            this.list.selectedIndex--;
+        } else {
+            this.list.selectedIndex = this.list.listElements.length - 1;
+        }
+        this.element.querySelector(".mdc-deprecated-list-item--selected").scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+
+    focusElement(index) {
+        this.list.selectedIndex = index;
+        this.element.querySelector(".mdc-deprecated-list-item--selected").scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_menu_surface_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+
+    connect() {
+        this.menuSurface = new mdc.menuSurface.MDCMenuSurface.attachTo(this.element);
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_radio_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    connect() {
+        const select = mdc.radio.MDCRadio.attachTo(this.element);
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_ripple_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    connect() {
+        mdc.ripple.MDCRipple.attachTo(this.element);
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_select_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    connect() {
+        const select = mdc.select.MDCSelect.attachTo(this.element)
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/javascripts/turbo_material/material_switch_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    connect() {
+        const switchControl = mdc.switchControl.MDCSwitch.attachTo(this.element.querySelector('.mdc-switch'));
+        const hidden = this.element.querySelector('input[type=hidden]');
+        switchControl.listen('click', () => {
+            hidden.value = switchControl.selected;
+        });
+    }
+
+    disconnect() {
+    }
+}

data/app/assets/stylesheets/turbo_material/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/turbo_material/application.tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

data/app/controllers/turbo_material/application_controller.rb

@@ -0,0 +1,4 @@
+module TurboMaterial
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/turbo_material/application_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module ApplicationHelper
+    def cast_boolean(param)
+      ActiveRecord::Type::Boolean.new.cast(param)
+    end
+  end
+end

data/app/helpers/turbo_material/checkbox_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module CheckboxHelper
+    def material_checkbox(kwargs = {})
+      render "components/checkbox", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/chips_input_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module ChipsInputHelper
+    def material_chips_input(kwargs = {})
+      render "components/chips_input", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/chips_select_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module ChipsSelectHelper
+    def material_chips_select(kwargs = {})
+      render "components/chips_select", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/input_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module InputHelper
+    def material_input(kwargs = {})
+      render "components/input", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/modal_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module ModalHelper
+    def material_modal(kwargs = {})
+      render "components/modal", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/radio_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module RadioHelper
+    def material_radio(kwargs = {})
+      render "components/radio", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/select_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module SelectHelper
+    def material_select(kwargs = {})
+      render "components/select", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/switch_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module SwitchHelper
+    def material_switch(kwargs = {})
+      render "components/switch", **kwargs
+    end
+  end
+end

data/app/helpers/turbo_material/textarea_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module TextareaHelper
+    def material_textarea(kwargs = {})
+      render "components/textarea", **kwargs
+    end
+  end
+end

data/app/jobs/turbo_material/application_job.rb

@@ -0,0 +1,4 @@
+module TurboMaterial
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/turbo_material/application_mailer.rb

@@ -0,0 +1,6 @@
+module TurboMaterial
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/turbo_material/application_record.rb

@@ -0,0 +1,5 @@
+module TurboMaterial
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/components/_checkbox.html.erb

@@ -0,0 +1,25 @@
+<%# locals: (form:, disabled: false, name:, label: nil, id:, checked: false, checked_value: '1', unchecked_value: '0', frame: nil, source_override: nil) %>
+<div class="mdc-form-field" data-controller="material-checkbox">
+  <div class="mdc-checkbox <%= disabled ? 'mdc-checkbox--disabled' : '' %>">
+    <%= form.check_box name.to_sym, {
+      id: id, class: "mdc-checkbox__native-control",
+      disabled: disabled,
+      checked: checked || form&.object&.[](source_override || name.to_sym),
+      data: { frame: frame }.compact
+    }, checked_value, unchecked_value %>
+    <div class="mdc-checkbox__background">
+      <svg class="mdc-checkbox__checkmark"
+           viewBox="0 0 24 24">
+        <path class="mdc-checkbox__checkmark-path"
+              fill="none"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+      </svg>
+      <div class="mdc-checkbox__mixedmark"></div>
+    </div>
+    <div class="mdc-checkbox__ripple"></div>
+    <div class="mdc-checkbox__focus-ring"></div>
+  </div>
+  <label for="<%= id %>">
+    <%= label || name.capitalize %>
+  </label>
+</div>

data/app/views/components/_chips_input.html.erb

@@ -0,0 +1,36 @@
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, frame: nil, suffix: nil, type: 'text', url: nil, selected: [], options: [], value: nil) %>
+<%- id = [name, suffix].compact_blank.join('-') -%>
+<div data-controller="material-chips-input"
+     data-material-chips-input-url-value="<%= url %>"
+     data-material-chips-input-name-value="<%= name %>"
+     data-material-chips-input-material-list-outlet="#<%= "#{id}-list" %>"
+     <% if suffix.present? %>data-material-chips-input-suffix-value="<%= suffix %>"<% end %>
+     data-action="keydown.esc->material-chips-input#close keydown.enter->prevent-default country-select-focus->material-chips-input#confirmSelection"
+>
+  <label class="mdc-text-field mdc-text-field--filled w-full !h-max !h-full">
+    <span class="mdc-text-field__ripple"></span>
+    <span class="mdc-floating-label !top-6"><%= label %></span>
+    <div class="mdc-chip-set mdc-chip-set--input !pt-8 w-full" role="grid">
+      <%- selected.each do |chip| -%>
+        <div class="mdc-chip">
+          <div class="mdc-chip__text"><%= chip[:label] %></div>
+          <!--        <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>-->
+        </div>
+      <%- end -%>
+      <%= form.hidden_field name.to_sym, value: value, data: { 'material-chips-input-target': 'hidden' } %>
+      <%= form.text_field "#{name}_".to_sym,
+                          class: 'mdc-text-field__input', value: value || form&.object&.[](name.to_sym),
+                          id: id, 'aria-labelledby' => id + '-label',
+                          required: required,
+                          disabled: disabled,
+                          type: type,  autocomplete: "off",
+                          data: { 'material-chips-input-target': 'input',
+                                  action: 'input->material-chips-input#search mousedown->material-chips-input#toggle keydown.down->material-chips-input#focusNext keydown.up->material-chips-input#focusPrevious keydown.enter->material-chips-input#confirmSelection keydown->material-chips-input#open' }
+      %>
+    </div>
+    <span class="mdc-line-ripple"></span>
+  </label>
+  <div class="mdc-menu-surface--anchor">
+    <%= render partial: 'components/chips_input_options', locals: { options: options, suffix: suffix, name: name, label: label } %>
+  </div>
+</div>

data/app/views/components/_chips_input_options.html.erb

@@ -0,0 +1,20 @@
+<%# locals: (suffix:, options: [], label:, name:, opened: 'false') %>
+<%- id = [name, suffix].compact_blank.join('-') -%>
+<div id="<%= "#{id}-panel" %>"
+     class="mdc-menu-surface <%= (opened != 'true' || options.size.zero?) ? '' : 'mdc-menu-surface--open' %> !z-100 mdc-menu-surface--fullwidth"
+     data-controller="material-menu-surface"
+     data-material-chips-input-target="panel" data-size="<%= options.size %>">
+  <ul class="mdc-deprecated-list max-h-64 overflow-y-auto"
+      id="<%= "#{id}-list" %>"
+      role="listbox"
+      aria-label="<%= label %>"
+      data-controller="material-list"
+  >
+    <%- options.each_with_index do |option, idx| -%>
+      <li class="mdc-deprecated-list-item" data-value="<%= option[:id] %>" data-name="<%= option[:label] %>" <% if idx.zero? %> tabindex="0"<% end %>>
+        <span class="mdc-deprecated-list-item__ripple"></span>
+        <span class="mdc-deprecated-list-item__text"><%= option[:label] %></span>
+      </li>
+    <%- end -%>
+  </ul>
+</div>

data/app/views/components/_chips_select.html.erb

@@ -0,0 +1,56 @@
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, value: nil, url: nil, frame: nil, source_override: nil, options: [], confirmable: false, query_string: nil, modal_name: nil, modal_url: nil, chip_css: nil, fixed: false) %>
+<div class="mdc-select mdc-select--filled w-full"
+     data-controller="material-chips-select"
+     data-material-chips-select-selected-value="<%= value %>"
+     data-material-chips-select-url-value="<%= url %>"
+     data-material-chips-select-confirmable-value="<%= confirmable %>"
+     data-material-chips-select-query-string-value="<%= query_string %>"
+     data-material-chips-select-modal-name-value="<%= modal_name %>"
+     data-material-chips-select-modal-url-value="<%= modal_url %>"
+     data-material-chips-select-chip-css-value="<%= chip_css %>"
+>
+  <div class="mdc-select__anchor"
+       role="button"
+       aria-haspopup="listbox"
+       aria-expanded="false"
+       aria-expanded="false"
+       aria-labelledby="<%= id %>-label <%= id %>-selected-text"
+       <% if disabled %>aria-disabled="true"<% end %>
+       <% if required %>aria-required="true"<% end %>
+  >
+    <span class="mdc-select__ripple"></span>
+    <span id="<%= id %>-label" class="mdc-floating-label pb-1"><%= label || name.capitalize %></span>
+    <div class="mdc-chip-set mdc-chip-set--input"></div>
+    <span class="mdc-select__selected-text-container"><span id="<%= id %>-selected-text" class="mdc-select__selected-text !hidden"></span></span>
+    <span class="mdc-select__dropdown-icon">
+      <svg
+        class="mdc-select__dropdown-icon-graphic"
+        viewBox="7 10 10 5" focusable="false">
+        <polygon
+          class="mdc-select__dropdown-icon-inactive"
+          stroke="none"
+          fill-rule="evenodd"
+          points="7 10 12 15 17 10">
+        </polygon>
+        <polygon
+          class="mdc-select__dropdown-icon-active"
+          stroke="none"
+          fill-rule="evenodd"
+          points="7 15 12 10 17 15">
+        </polygon>
+      </svg>
+    </span>
+    <span class="mdc-line-ripple"></span>
+  </div>
+  <%= form.hidden_field name.to_sym, value: value, data: { 'material-chips-select-target': 'hidden' } if form %>
+  <div class="mdc-select__menu mdc-menu mdc-menu-surface <%= fixed ? 'mdc-menu-surface--fixed' : 'mdc-menu-surface--fullwidth' %>">
+    <ul class="mdc-deprecated-list" role="listbox" aria-label="<%= label %> listbox">
+      <% options.each do |option| %>
+        <li class="mdc-deprecated-list-item" aria-selected="false" data-value="<%= option[:value] %>" data-label="<%= option[:label] %>" <% if option[:confirmed].in? [true, false] %>data-confirmed="<%= option[:confirmed] %>"<% end %> role="option">
+          <span class="mdc-deprecated-list-item__ripple"></span>
+          <span class="mdc-deprecated-list-item__text"><%= option[:label] %></span>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/views/components/_input.html.erb

@@ -0,0 +1,32 @@
+<%# locals: (form:, custom_controller: nil, custom_css: nil, disabled: false, required: false, name:, label: nil, id:, checked: false, frame: nil, provide_hidden: false, value: nil, type: 'text', data: {}, min: nil, max: nil, helper: nil, parent: nil) %>
+<label class="mdc-text-field mdc-text-field--filled w-full <%= custom_css %>"
+       data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
+  <span class="mdc-text-field__ripple"></span>
+  <span class="mdc-floating-label" id="<%= id %>-label">
+    <%= label || name.capitalize %>
+  </span>
+  <%= form.text_field provide_hidden ? "#{name}_".to_sym : name.to_sym,
+                      class: 'mdc-text-field__input', value: value || form&.object&.[](name.to_sym),
+                      id: id, 'aria-labelledby' => id + '-label',
+                      required: required, disabled: disabled,
+                      type: type,  autocomplete: "off", data: { frame: frame, **(data) }.compact,
+                      min: min, max: max
+  %>
+  <span class="mdc-line-ripple"></span>
+  <%- if provide_hidden -%>
+    <%= form.hidden_field name.to_sym, value: value, data: { frame: frame }.compact %>
+  <%- end -%>
+</label>
+<div class="mdc-text-field-helper-line">
+  <%- if helper -%>
+    <div class="mdc-text-field-helper-text" aria-hidden="true"><%= helper %></div>
+  <%- end -%>
+  <div class="mdc-text-field-helper-text--validation-msg text-sm text-red-500 hidden jserror">
+  </div>
+  <%- parent&.errors&.[](name.to_sym)&.each do |msg| -%>
+    <div class="mdc-text-field-helper-text--validation-msg text-sm text-red-500"
+         aria-hidden="true">
+      <%= msg %>
+    </div>
+  <%- end -%>
+</div>

data/app/views/components/_modal.html.erb

@@ -0,0 +1,37 @@
+<%# locals: (title:) %>
+<turbo-frame id="modal">
+  <div class="mdc-dialog" data-controller="material-dialog" data-material-dialog-opened-value="true">
+    <div class="mdc-dialog__container">
+      <div class="mdc-dialog__surface !min-w-[36rem] !min-h-[14rem]"
+             role="alertdialog"
+             aria-modal="true"
+             aria-labelledby="my-dialog-title"
+             aria-describedby="my-dialog-content">
+          <h2 class="mdc-dialog__title">
+            <div class="flex items-center justify-between">
+              <span><%= title %></span>
+              <button type="button" class="mdc-icon-button mdc-dialog__close" data-mdc-ripple-is-unbounded data-action="click->material-dialog#close">
+                <div class="mdc-icon-button__ripple"></div>
+                <span class="mdc-icon-button__focus-ring"></span>
+                <i class="material-icons !text-white">close</i>
+              </button>
+            </div>
+          </h2>
+          <div class="mdc-dialog__content">
+            Contents
+          </div>
+          <div class="mdc-dialog__actions">
+            <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
+              <div class="mdc-button__ripple"></div>
+              <span class="mdc-button__label">Cancel</span>
+            </button>
+            <button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
+              <div class="mdc-button__ripple"></div>
+              <span class="mdc-button__label">OK</span>
+            </button>
+          </div>
+        </div>
+    </div>
+    <div class="mdc-dialog__scrim"></div>
+  </div>
+</turbo-frame>

data/app/views/components/_radio.html.erb

@@ -0,0 +1,28 @@
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, checked: false, value: nil, parent: nil) %>
+<div class="mdc-form-field flex flex-col">
+  <label>
+    <%= label || name.capitalize %>
+  </label>
+  <div class="flex flex-row items-center w-full">
+    <div class="mdc-radio <%= disabled ? 'mdc-radio--disabled' : '' %>" data-controller="material-radio">
+      <%= form.radio_button name.to_sym, 'true', class: 'mdc-radio__native-control', id: id + '-1', checked: value, disabled: disabled %>
+      <div class="mdc-radio__background">
+        <div class="mdc-radio__outer-circle"></div>
+        <div class="mdc-radio__inner-circle"></div>
+      </div>
+      <div class="mdc-radio__ripple"></div>
+      <div class="mdc-radio__focus-ring"></div>
+    </div>
+    <label for="<%= id %>-1">Yes</label>
+    <div class="mdc-radio <%= disabled ? 'mdc-radio--disabled' : '' %>">
+      <%= form.radio_button name.to_sym, 'false', class: 'mdc-radio__native-control', id: id + '-2', checked: !value, disabled: disabled %>
+      <div class="mdc-radio__background">
+        <div class="mdc-radio__outer-circle"></div>
+        <div class="mdc-radio__inner-circle"></div>
+      </div>
+      <div class="mdc-radio__ripple"></div>
+      <div class="mdc-radio__focus-ring"></div>
+    </div>
+    <label for="<%= id %>-2">No</label>
+  </div>
+</div>

data/app/views/components/_select.html.erb

@@ -0,0 +1,67 @@
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, checked: false, value: nil, parent: nil, frame: nil, selected_text: nil, fixed: false, options: [], hint: nil, helper: nil) %>
+<div class="mdc-select mdc-select--filled w-full<%= disabled ? ' mdc-select--disabled' : '' %><%= required ? ' mdc-select--required' : '' %>"
+     data-controller="material-select" <% if frame %> data-frame="<%= frame %>"<% end %> id="<%= id %>">
+  <%= form.hidden_field name.to_sym, value: value %>
+  <div class="mdc-select__anchor"
+       role="button"
+       aria-haspopup="listbox"
+       aria-expanded="false"
+       aria-labelledby="<%= id %>-label <%= id %>-selected-text"
+       <% if disabled %>aria-disabled="true"<% end %>
+       <% if required %>aria-required="true"<% end %>
+  >
+    <span class="mdc-select__ripple"></span>
+    <span id="<%= id %>-label" class="mdc-floating-label"><%= label || name.capitalize %></span>
+    <span class="mdc-select__selected-text-container">
+      <span id="<%= id %>-selected-text" class="mdc-select__selected-text">
+        <%= selected_text || value %>
+      </span>
+    </span>
+    <span class="mdc-select__dropdown-icon">
+            <svg
+              class="mdc-select__dropdown-icon-graphic"
+              viewBox="7 10 10 5" focusable="false">
+              <polygon
+                class="mdc-select__dropdown-icon-inactive"
+                stroke="none"
+                fill-rule="evenodd"
+                points="7 10 12 15 17 10">
+              </polygon>
+              <polygon
+                class="mdc-select__dropdown-icon-active"
+                stroke="none"
+                fill-rule="evenodd"
+                points="7 15 12 10 17 15">
+              </polygon>
+            </svg>
+          </span>
+    <span class="mdc-line-ripple"></span>
+  </div>
+
+  <div class="mdc-select__menu mdc-menu mdc-menu-surface !z-100 <%= fixed ? 'mdc-menu-surface--fixed' : 'mdc-menu-surface--fullwidth' %>" id="<%= id %>-surface">
+    <ul class="mdc-deprecated-list" role="listbox" aria-label="<%= label %> listbox">
+      <% options.each do |option| %>
+        <li class="mdc-deprecated-list-item<%= value == option[:value] ? ' mdc-deprecated-list-item--selected' : '' %>" aria-selected="<%= (value == option[:value]).to_s %>" data-value="<%= option[:value] %>" role="option">
+          <span class="mdc-deprecated-list-item__ripple"></span>
+          <span class="mdc-deprecated-list-item__text"><%= option[:label] %></span>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>
+<%- if hint.present? -%>
+  <div class="font-sans text-xs p-2"><%= hint %></div>
+<%- end -%>
+<%- if helper.present? || parent&.errors.present? -%>
+  <div class="mdc-text-field-helper-line">
+    <%- if helper -%>
+      <div class="mdc-text-field-helper-text" aria-hidden="true"><%= helper %></div>
+    <%- end -%>
+    <%- parent&.errors&.[](name.to_sym)&.each do |msg| -%>
+      <div class="mdc-text-field-helper-text--validation-msg text-sm text-red-500"
+           aria-hidden="true">
+        <%= msg %>
+      </div>
+    <%- end -%>
+  </div>
+<%- end -%>

data/app/views/components/_switch.html.erb

@@ -0,0 +1,34 @@
+<%# locals: (form:, disabled: false, name:, label: nil, id:, value: nil, true_label: nil, false_label: nil, frame: nil) %>
+<div data-controller="material-switch" <% if frame %> data-frame="<%= frame %>"<% end %>>
+  <button id="selected-switch" class="mdc-switch <%= cast_boolean(value) ? 'mdc-switch--selected' : '' %>"
+          type="button" role="switch" aria-checked="<%= cast_boolean(value) ? 'true' : 'false' %>" <% if disabled %>disabled<% end %>>
+    <div class="mdc-switch__track"></div>
+    <div class="mdc-switch__handle-track">
+      <div class="mdc-switch__handle">
+        <div class="mdc-switch__shadow">
+          <div class="mdc-elevation-overlay"></div>
+        </div>
+        <div class="mdc-switch__ripple"></div>
+        <div class="mdc-switch__icons">
+          <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
+            <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"/>
+          </svg>
+          <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
+            <path d="M20 13H4v-2h16v2z"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <span class="mdc-switch__focus-ring-wrapper">
+              <div class="mdc-switch__focus-ring"></div>
+            </span>
+  </button>
+  <label for="selected-switch">
+    <% if cast_boolean(value) %>
+      <%= true_label || label %>
+    <% else %>
+      <%= false_label || label  %>
+    <% end %>
+  </label>
+  <%= form.hidden_field name.to_sym, value: value %>
+</div>