ariadne_view_components 0.0.46-x86_64-linux → 0.0.48-x86_64-linux

data/app/components/ariadne/options_controller/options_controller.ts

@@ -0,0 +1,57 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class OptionsController extends Controller {
+  static targets = ['option']
+
+  static values = {
+    activeIndex: {
+      type: Number,
+      default: 0,
+    },
+    syncedAttrs: Array,
+    antiAttrs: Array,
+  }
+
+  declare readonly optionTargets: Array<Element>
+  declare activeIndexValue: number
+
+  declare readonly syncedAttrsValue: string[]
+  declare readonly hasSyncedAttrsValue: boolean
+  declare readonly antiAttrsValue: string[]
+  declare readonly hasAntiAttrsValue: boolean
+
+  connect(): void {
+    this.select(new Event('Init'), this.activeIndexValue)
+  }
+
+  select(e: Event, newIndex?: number) {
+    for (let index in this.optionTargets) {
+      const target = this.optionTargets[index]
+      const isActive = newIndex === undefined ? target === e.currentTarget : Number(index) === Number(newIndex)
+
+      if (isActive) {
+        this.activeIndexValue = Number(index)
+      }
+
+      this.#updateAllAttrsForElement(target, isActive)
+    }
+  }
+
+  #updateAllAttrsForElement(element: Element, value: boolean) {
+    if (this.hasSyncedAttrsValue) {
+      this.#syncAttrsForTarget(element, this.syncedAttrsValue, value)
+    }
+
+    if (this.hasAntiAttrsValue) {
+      this.#syncAttrsForTarget(element, this.antiAttrsValue, !value)
+    }
+  }
+
+  #syncAttrsForTarget(element: Element, attrs: string[], value: boolean) {
+    const attrState = String(value)
+    for (let index in attrs) {
+      const attr = attrs[index]
+      element.setAttribute(attr, attrState)
+    }
+  }
+}

data/app/components/ariadne/popover_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <div class="<%= @base_classes %>">
+    <%= base %>
+  </div>
+  <div class="hidden ariadne-my-20 ariadne-w-20"></div>
+  <div class="<%= @items_wrapper_classes %>" data-action="click->toggleable#toggle">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/ariadne/popover_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Displays content in a box that hovers over other content
+  class PopoverComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DIRECTIONS = [:top, :right, :bottom, :left]
+
+    # Menu: List of selectable items (ie: navigation)
+    # Dialog: Essentiall a modal
+    # Listbox: Something like a dropdown for a <select> element
+    # Tooltip: plain text
+    ROLES = [:menu, :dialog, :listbox, :tooltip]
+    HORIZONTAL_ALIGNMENTS = [:left, :right, :center]
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group ariadne-relative ariadne-w-fit",
+      items: "ariadne-w-fit ariadne-absolute ariadne-shadow-lg ariadne-z-10 ariadne-p-2 ariadne-bg-white ariadne-rounded-md",
+      base: "ariadne-inline-block",
+    }
+
+    ITEMS_DIRECITON_CLASSES = "group-data-[popover-direction=top]:ariadne-bottom-full group-data-[popover-direction=top]:-ariadne-translate-y-2 group-data-[popover-direction=bottom]:ariadne-top-full group-data-[popover-direction=bottom]:ariadne-translate-y-2"
+    ITEMS_HORIZONTAL_ALIGNMENT_CLASSES = "group-data-[popover-horizontal-alignment=left]:ariadne-left-0 group-data-[popover-horizontal-alignment=right]:ariadne-right-0 group-data-[popover-horizontal-alignment=center]:ariadne-left-1/2 group-data-[popover-horizontal-alignment=center]:-ariadne-translate-x-1/2"
+    ITEMS_VISIBILITY_CLASSES = "group-data-[popover-visible=false]:ariadne-hidden"
+
+    DEFAULT_ATTRIBUTES = {
+      "data-controller": "toggleable",
+      "data-action": "click->toggleable#toggle",
+      "data-toggleable-synced-attrs-value": '["data-popover-visible"]',
+    }
+
+    renders_one :base
+
+    renders_many :items
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::PopoverComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      direction: :bottom,
+      classes: "",
+      role:,
+      attributes: {},
+      horizontal_alignment: :center,
+      initial_visible: false,
+      base_wrapper_classes: "",
+      items_wrapper_classes: ""
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @direction = fetch_or_raise(DIRECTIONS, direction)
+      @horizontal_alignment = fetch_or_raise(HORIZONTAL_ALIGNMENTS, horizontal_alignment)
+      @role = fetch_or_raise(ROLES, role)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+
+      @attributes = DEFAULT_ATTRIBUTES
+        .merge({
+          "data-popover-direction": @direction,
+          "data-popover-horizontal-alignment": @horizontal_alignment,
+          "data-popover-visible": initial_visible,
+          "data-toggleable-close-on-outside-click-value": true,
+        })
+        .merge(attributes)
+
+      @base_classes = merge_class_names(DEFAULT_CLASSES[:base], base_wrapper_classes)
+      @items_wrapper_classes = merge_class_names(
+        DEFAULT_CLASSES[:items],
+        ITEMS_DIRECITON_CLASSES,
+        ITEMS_HORIZONTAL_ALIGNMENT_CLASSES,
+        ITEMS_VISIBILITY_CLASSES,
+        items_wrapper_classes,
+      )
+    end
+  end
+end

data/app/components/ariadne/progress_bar_component.html.erb

@@ -0,0 +1,5 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |c| %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/ariadne/progress_bar_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Bar used to show a progress in an activity, supports single bars or multiple bars within one component
+  # use aria-labelledby and aria-describedby to describe the progress bar's purpose
+  class ProgressBarComponent < Ariadne::Component
+    DEFAULT_TAGS = {
+      wrapper: :div,
+      item: :div,
+    }
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-flex ariadne-gap-1 ariadne-bg-slate-200 ariadne-rounded-md ariadne-overflow-hidden",
+      item: "",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        role: "progressbar",
+        "data-controller": "accumulator",
+        "aria-valuenow": 0,
+      },
+      item: { "data-accumulator-target": "sum" },
+    }
+
+    BAR_SIZES = {
+      sm: "ariadne-h-2",
+      md: "ariadne-h-3",
+      lg: "ariadne-h-4",
+    }
+
+    renders_many :items, lambda { |tag: DEFAULT_TAGS[:item], classes: "", value: 0, attributes: {}|
+      Ariadne::BaseComponent.new(
+        tag: check_incoming_tag(DEFAULT_TAGS[:item], tag),
+        classes: merge_class_names(DEFAULT_CLASSES[:item], BAR_SIZES[@size], classes),
+        attributes: DEFAULT_ATTRIBUTES[:item].merge({
+          style: "width: #{(value - @min).to_f / (@max - @min) * 100}%",
+          "data-value": value,
+        }).merge(attributes),
+      )
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ProgressBarComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAGS[:wrapper], min: 0, max: 100, classes: "", size: :md, attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAGS[:wrapper], tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+
+      @min = min
+      @max = max
+      @size = size
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({
+        "aria-valuemin": @min,
+        "aria-valuemax": @max,
+      }).merge(attributes)
+    end
+  end
+end

data/app/components/ariadne/relative_time_component.html.erb

@@ -0,0 +1,3 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= @formatted_date %>
+<% end %>

data/app/components/ariadne/relative_time_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Converts time into a display-friendly format in a relative time (3d) or absolute date after a default of 30 days
+  class RelativeTimeComponent < Ariadne::Component
+    DEFAULT_TAG = :span
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+    DEFAULT_DATE_FORMAT = "%b %-d, %Y"
+    DEFAULT_DATE_FORMAT_SWITCH = 30 * 24 * 60 * 60
+
+    DEFAULT_CLASSES = ""
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::RelativeTimeComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      time: nil,
+      format: DEFAULT_DATE_FORMAT,
+      date_format_switch: DEFAULT_DATE_FORMAT_SWITCH,
+      force_relative: false,
+      attributes: {}
+    )
+      raise ArgumentError, "A 'time' argument is required to use the Relative Time component." if time.blank?
+
+      @now = 1.second.ago
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES, classes)
+      @time = time
+      @date_format_switch = date_format_switch
+      @format = format
+      @force_relative = force_relative
+      @attributes = attributes
+
+      @formatted_date = formatted
+    end
+
+    private def formatted_time
+      @time.localtime.strftime(@format)
+    end
+
+    private def time_difference
+      (@now - @time).to_i.abs
+    end
+
+    private def formatted
+      diff = time_difference
+
+      if @force_relative || diff < @date_format_switch
+        time_ago_in_words(@time)
+      else
+        @time.localtime.strftime(@format)
+      end
+    end
+  end
+end

data/app/components/ariadne/show_more_button_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= render Ariadne::ButtonComponent.new(classes: @button_classes, attributes: @button_attributes) do |button| %>
+    <%= @button_text %>
+  <% end %>
+  <div
+    class="ariadne-max-h-full aria-hidden:ariadne-max-h-0 ariadne-overflow-hidden ariadne-my-2" data-controller="toggleable" aria-hidden="true" data-toggleable-anti-attrs-value='["aria-hidden"]' data-toggleable-outlet="<%= @outlet %>">
+    <% hiddens.each do |hidden| %>
+      <%= hidden %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/ariadne/show_more_button_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Add a general description of component here
+  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+  # @accessibility Add any accessibility considerations
+  class ShowMoreButtonComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = { wrapper: "ariadne-group", button: "ariadne-px-2 ariadne-py-0" }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        "data-controller": "toggleable",
+      },
+      button: {
+        "data-action": "click->toggleable#toggle",
+      },
+    }
+
+    renders_many :hiddens
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ShowMoreButtonComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, classes: "", button_text: "...", outlet: nil, attributes: {})
+      raise ArgumentError, "An 'aria-label' attribute is required to use the Show More Button. Include as much detail as you can about the content to be shown to assist screen readers." if attributes.blank? || attributes["aria-label"].blank?
+      raise ArgumentError, "An 'outlet' attribute is required to use the Show More Button. This will ensure controllers can correctly identify states to update." if outlet.blank?
+
+      @outlet = outlet
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
+        .merge({ "data-toggleable-toggleable-outlet": "[data-toggleable-outlet=#{@outlet}]" })
+        .merge(attributes)
+
+      @button_classes = merge_class_names(DEFAULT_CLASSES[:button], classes)
+      @button_attributes = DEFAULT_ATTRIBUTES[:button].merge(attributes)
+      @button_text = button_text
+    end
+  end
+end

data/app/components/ariadne/spinner_component.html.erb

@@ -0,0 +1,16 @@
+<%= render Ariadne::BaseComponent.new(tag: :svg, classes: @classes, attributes: @attributes) do |svg| %>
+  <circle
+    cx="8"
+    cy="8"
+    r="7"
+    stroke="currentColor"
+    stroke-opacity="0.25"
+    stroke-width="2"
+    vector-effect="non-scaling-stroke" />
+  <path
+    d="M15 8a7.002 7.002 0 00-7-7"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    vector-effect="non-scaling-stroke" />
+<% end %>

data/app/components/ariadne/spinner_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Renders a spinning wheel to indicate a loading state
+  # Add color using a tailwind text color class
+  class SpinnerComponent < Ariadne::Component
+    DEFAULT_SIZE = :md
+    DEFAULT_CLASSES = "ariadne-animate-spin ariadne-fill-none"
+    DEFAULT_ATTRIBUTES = {
+      fill: "none",
+      viewBox: "0 0 16 16",
+      role: "progressbar",
+      "aria-valuetext": "Loading...",
+      "aria-busy": true,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+    }.freeze
+
+    SIZE_CLASS_MAPPINGS = {
+      xs: "ariadne-h-4 ariadne-w-4",
+      sm: "ariadne-h-6 ariadne-w-6",
+      md: "ariadne-h-8 ariadne-w-8",
+      lg: "ariadne-h-10 ariadne-w-10",
+      xl: "ariadne-h-12 ariadne-w-12",
+    }.freeze
+
+    VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::SpinnerComponent.new) { } %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {}, size: DEFAULT_SIZE)
+      @size = fetch_or_raise(VALID_SIZES, size)
+      @attributes = DEFAULT_ATTRIBUTES.merge(attributes)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES,
+        SIZE_CLASS_MAPPINGS[size],
+        classes,
+      )
+    end
+  end
+end

data/app/components/ariadne/subheader_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <div class="ariadne-flex ariadne-justify-between">
+    <%= header %>
+    <div>
+      <% actions.each do |action| %>
+        <%= action %>
+      <% end %>
+    </div>
+  </div>
+  <%= description %>
+<% end %>

data/app/components/ariadne/subheader_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # A component to render a subheader with optional description below it and optional action
+  # components on the right side
+  class SubheaderComponent < Ariadne::Component
+    DEFAULT_TAGS = {
+      wrapper: :div,
+      actions: :div,
+      header: :h2,
+      description: :span,
+    }
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-border-b-2 ariadne-border-solid ariadne-border-black ariadne-border-opacity-20",
+      header: "",
+      actions: "",
+      description: "ariadne-text-black/50",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {},
+      header: {},
+      description: {},
+      actions: {},
+    }
+
+    renders_one :header, lambda { |tag: DEFAULT_TAGS[:header], classes: "", attributes: {}|
+      Ariadne::HeadingComponent.new(
+        tag: check_incoming_tag(DEFAULT_TAGS[:header], tag),
+        classes: merge_class_names(DEFAULT_CLASSES[:header], classes),
+        attributes: DEFAULT_ATTRIBUTES[:header].merge({ id: @header_id }).merge(attributes),
+      )
+    }
+
+    renders_one :description, lambda { |tag: DEFAULT_TAGS[:description], classes: "", attributes: {}|
+      Ariadne::BaseComponent.new(
+        tag: check_incoming_tag(DEFAULT_TAGS[:description], tag),
+        classes: merge_class_names(DEFAULT_CLASSES[:description], classes),
+        attributes: DEFAULT_ATTRIBUTES[:description]
+          .merge({ "aria-describedby": @header_id })
+          .merge(attributes),
+      )
+    }
+
+    renders_many :actions
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::SubheaderComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAGS[:wrapper], classes: "", id: "subheader-#{SecureRandom.uuid}", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAGS[:wrapper], tag)
+      @header_id = id
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES[:wrapper],
+        classes,
+      )
+    end
+  end
+end

data/app/components/ariadne/toggle_component/toggle_component.html.erb

@@ -0,0 +1,15 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |wrapper| %>
+  <label class="ariadne-flex ariadne-w-fit ariadne-items-center <%= @label_classes %>">
+    <% if content? %>
+      <span class="group-data-[label-position=start]/wrapper:ariadne-mr-1.5 group-data-[label-position=end]/wrapper:ariadne-ml-1"><%= content %></span>
+    <% end %>
+    <%= render Ariadne::BaseComponent.new(tag: :button, classes: @button_classes, attributes: @button_attributes) do |button| %>
+      <span class="ariadne-sr-only ariadne-translate-x-3">Use setting</span>
+      <span aria-hidden="true" class="ariadne-pointer-events-none ariadne-absolute ariadne-h-full ariadne-w-full ariadne-rounded-md ariadne-bg-white"></span>
+      <span aria-hidden="true"
+      class="ariadne-bg-gray-200 ariadne-pointer-events-none ariadne-absolute ariadne-mx-auto ariadne-rounded-full ariadne-transition-colors ariadne-duration-200 ariadne-ease-in-out <%= @track_classes %>"></span>
+      <span aria-hidden="true"
+      class="ariadne-pointer-events-none ariadne-absolute ariadne-left-0 ariadne-inline-block ariadne-transform ariadne-rounded-full ariadne-border ariadne-border-gray-200 ariadne-bg-white ariadne-shadow ariadne-ring-0 ariadne-transition-transform ariadne-duration-200 ariadne-ease-in-out <%= @thumb_classes %>"></span>
+    <% end %>
+  </label>
+<% end %>

data/app/components/ariadne/toggle_component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Simple toggle switch with on/off state. The logic is controlled by toggleable_controller and styles applied through
+  # tailwind's group+data attributes: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes
+  class ToggleComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+
+    DEFAULT_STATUS_LABEL_POSITION = :start
+    STATUS_LABEL_POSITION_MAPPINGS = {
+      start: "ariadne-flex-row",
+      end: "ariadne-flex-row-reverse",
+    }.freeze
+    STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
+
+    DEFAULT_SIZE = :md
+    THUMB_SIZE_MAPPINGS = { sm: "ariadne-translate-x-0 ariadne-h-3 ariadne-w-3 group-aria-checked/toggle:ariadne-translate-x-3", md: "ariadne-translate-x-0 ariadne-h-5 ariadne-w-5 group-aria-checked/toggle:ariadne-translate-x-5" }.freeze
+    TRACK_SIZE_MAPPINGS = { sm: "ariadne-h-2 ariadne-w-4", md: "ariadne-h-4 ariadne-w-9" }.freeze
+    BUTTON_SIZE_MAPPINGS = { sm: "ariadne-h-3 ariadne-w-6", md: "ariadne-h-5 ariadne-w-10" }.freeze
+    LABEL_SIZE_MAPPINGS = { sm: "ariadne-text-xs", md: "ariadne-text-lg" }.freeze
+    SIZE_OPTIONS = THUMB_SIZE_MAPPINGS.keys.freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group/wrapper data-[disabled=true]:ariadne-opacity-50 data-[disabled=true]:ariadne-cursor-auto",
+      button: "ariadne-flex ariadne-justify-center ariadne-group/toggle ariadne-relative ariadne-inline-flex ariadne-flex-shrink-0 group-data-[disabled=false]/wrapper:ariadne-cursor-pointer ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-focus:outline-none ariadne-focus:ring-2 ariadne-focus:ring-indigo-600 ariadne-focus:ring-offset-2 disabled:ariadne-cursor-auto",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {}.freeze,
+      button: {
+        role: "switch",
+        "data-controller": "toggleable",
+        "data-toggleable-synced-attrs-value": '["aria-checked"]',
+        "data-action": "click->toggleable#toggle",
+      },
+    }.freeze
+
+    DEFAULT_TRACK_COLOR = :indigo
+    TRACK_COLOR_MAPPINGS = {
+      white: "group-aria-checked/toggle:ariadne-bg-white",
+      green: "group-aria-checked/toggle:ariadne-bg-green-600",
+      blue: "group-aria-checked/toggle:ariadne-bg-blue-600",
+      billy_purple: "group-aria-checked/toggle:ariadne-bg-billy-purple",
+      indigo: "group-aria-checked/toggle:ariadne-bg-indigo-600",
+    }
+    TRACK_COLOR_OPTIONS = TRACK_COLOR_MAPPINGS.keys.freeze
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ToggleComponent.new) { "Example" } %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param color [String] <%= link_to_classes_docs %>
+    # @param checked [Boolean] <%= link_to_classes_docs %>
+    # @param disabled [Boolean] <%= link_to_classes_docs %>
+    # @param size [String] <%= link_to_classes_docs %>
+    # @param label [String] <%= link_to_classes_docs %>
+    # @param status_label_position [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      classes: nil,
+      checked: false,
+      disabled: false,
+      size: DEFAULT_SIZE,
+      color: DEFAULT_TRACK_COLOR,
+      status_label_position: DEFAULT_STATUS_LABEL_POSITION,
+      attributes: {}
+    )
+      @tag = DEFAULT_TAG
+      @size = fetch_or_raise(SIZE_OPTIONS, size)
+      @status_label_position = fetch_or_raise(STATUS_LABEL_POSITION_OPTIONS, status_label_position)
+      @color = fetch_or_raise(TRACK_COLOR_OPTIONS, color)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @checked = checked
+      @disabled = disabled
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({ "data-label-position": @status_label_position, "data-disabled": @disabled }).merge(attributes)
+
+      @label_classes = merge_class_names(STATUS_LABEL_POSITION_MAPPINGS.fetch(@status_label_position), LABEL_SIZE_MAPPINGS.fetch(@size))
+
+      @button_classes = merge_class_names(DEFAULT_CLASSES[:button], BUTTON_SIZE_MAPPINGS.fetch(@size))
+      @button_attributes = DEFAULT_ATTRIBUTES[:button].merge({ "aria-checked": @checked, "data-toggleable-state-value": @checked, disabled: @disabled })
+
+      @thumb_classes = THUMB_SIZE_MAPPINGS.fetch(@size)
+      @track_classes = merge_class_names(TRACK_SIZE_MAPPINGS.fetch(@size), TRACK_COLOR_MAPPINGS.fetch(@color))
+    end
+
+    def on?
+      @checked
+    end
+
+    def disabled?
+      @disabled
+    end
+  end
+end

data/app/components/ariadne/toggleable_controller/toggleable_controller.d.ts

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus';
+export interface ToggleableOutlet {
+    toggle: (event: Event, value?: boolean) => void;
+}
+export default class ToggleableController extends Controller implements ToggleableOutlet {
+    #private;
+    static outlets: string[];
+    static values: {
+        state: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        closeOnOutsideClick: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    static removeOnFalseAttrs: {
+        [k: string]: boolean;
+    };
+    stateValue: boolean;
+    readonly toggleableOutlets: Array<ToggleableOutlet>;
+    readonly hasToggleableOutlet: boolean;
+    readonly syncedAttrsValue: string[];
+    readonly hasSyncedAttrsValue: boolean;
+    readonly antiAttrsValue: string[];
+    readonly hasAntiAttrsValue: boolean;
+    readonly closeOnOutsideClickValue: boolean;
+    connect(): void;
+    toggle(event: Event, value?: boolean): void;
+    clickOutside(event: Event): void;
+}