ariadne_view_components 0.0.47 → 0.0.48

data/app/assets/javascripts/components/ariadne/accumulator_controller/accumulator_controller.d.ts

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+export default class AccumulatorController extends Controller {
+    static targets: string[];
+    static values: {
+        syncAttrs: {
+            type: ArrayConstructor;
+            default: string[];
+        };
+        sumAttr: {
+            type: string;
+            default: string;
+        };
+    };
+    sumTargets: Array<HTMLElement>;
+    accumulatorTarget?: HTMLElement;
+    syncAttrsValue: Array<string>;
+    sumAttrValue: string;
+    connect(): void;
+    accumulate(): void;
+    setAttributesTo(sum: number): void;
+    get accumulator(): Element;
+}

data/app/assets/javascripts/components/ariadne/dropdown/menu_component.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/assets/javascripts/components/ariadne/options_controller/options_controller.d.ts

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+export default class OptionsController extends Controller {
+    #private;
+    static targets: string[];
+    static values: {
+        activeIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+    };
+    readonly optionTargets: Array<Element>;
+    activeIndexValue: number;
+    readonly syncedAttrsValue: string[];
+    readonly hasSyncedAttrsValue: boolean;
+    readonly antiAttrsValue: string[];
+    readonly hasAntiAttrsValue: boolean;
+    connect(): void;
+    select(e: Event, newIndex?: number): void;
+}

data/app/assets/javascripts/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;
+}

data/app/assets/stylesheets/ariadne_view_components.css

@@ -1,6 +1,6 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @import 'tooltip-component.css';
 @import 'prosemirror.css';

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

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+export default class AccumulatorController extends Controller {
+    static targets: string[];
+    static values: {
+        syncAttrs: {
+            type: ArrayConstructor;
+            default: string[];
+        };
+        sumAttr: {
+            type: string;
+            default: string;
+        };
+    };
+    sumTargets: Array<HTMLElement>;
+    accumulatorTarget?: HTMLElement;
+    syncAttrsValue: Array<string>;
+    sumAttrValue: string;
+    connect(): void;
+    accumulate(): void;
+    setAttributesTo(sum: number): void;
+    get accumulator(): Element;
+}

data/app/components/ariadne/accumulator_controller/accumulator_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from '@hotwired/stimulus';
+class AccumulatorController extends Controller {
+    connect() {
+        this.accumulate();
+    }
+    accumulate() {
+        let sum = 0;
+        for (let i in this.sumTargets) {
+            const target = this.sumTargets[i];
+            const value = Number(target.getAttribute(this.sumAttrValue));
+            if (!isNaN(value)) {
+                sum += value;
+            }
+        }
+        this.setAttributesTo(sum);
+    }
+    setAttributesTo(sum) {
+        for (let i in this.syncAttrsValue) {
+            const attr = this.syncAttrsValue[i];
+            this.accumulator.setAttribute(attr, sum.toString());
+        }
+    }
+    get accumulator() {
+        var _a;
+        return (_a = this.accumulatorTarget) !== null && _a !== void 0 ? _a : this.element;
+    }
+}
+AccumulatorController.targets = ['sum', 'accumulator'];
+AccumulatorController.values = {
+    syncAttrs: {
+        type: Array,
+        default: ['aria-valuenow'],
+    },
+    sumAttr: {
+        type: 'string',
+        default: 'data-value',
+    },
+};
+export default AccumulatorController;

data/app/components/ariadne/accumulator_controller/accumulator_controller.ts

@@ -0,0 +1,48 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class AccumulatorController extends Controller {
+  static targets = ['sum', 'accumulator']
+  static values = {
+    syncAttrs: {
+      type: Array,
+      default: ['aria-valuenow'],
+    },
+    sumAttr: {
+      type: 'string',
+      default: 'data-value',
+    },
+  }
+
+  declare sumTargets: Array<HTMLElement>
+  declare accumulatorTarget?: HTMLElement
+  declare syncAttrsValue: Array<string>
+  declare sumAttrValue: string
+
+  connect(): void {
+    this.accumulate()
+  }
+
+  accumulate() {
+    let sum = 0
+    for (let i in this.sumTargets) {
+      const target = this.sumTargets[i]
+      const value = Number(target.getAttribute(this.sumAttrValue))
+      if (!isNaN(value)) {
+        sum += value
+      }
+    }
+
+    this.setAttributesTo(sum)
+  }
+
+  setAttributesTo(sum: number) {
+    for (let i in this.syncAttrsValue) {
+      const attr = this.syncAttrsValue[i]
+      this.accumulator.setAttribute(attr, sum.toString())
+    }
+  }
+
+  get accumulator() {
+    return this.accumulatorTarget ?? this.element
+  }
+}

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

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= icon %>
+  <%= title %>
+  <% if actions? %>
+    <div class="<%= @actions_wrapper_classes %>">
+      <% actions.each do |action| %>
+        <%= action %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/ariadne/action_card_component.rb

@@ -0,0 +1,45 @@
+# 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 ActionCardComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-w-fit ariadne-flex ariadne-flex-col ariadne-items-center",
+      actions_wrapper: "ariadne-flex",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {},
+    }
+
+    renders_one :icon, Ariadne::HeroiconComponent
+
+    renders_one :title, Ariadne::HeadingComponent
+
+    renders_many :actions, Ariadne::ButtonComponent
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ActionCardComponent.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: "",
+      attributes: {},
+      actions_wrapper_classes: ""
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
+      @actions_wrapper_classes = merge_class_names(DEFAULT_CLASSES[:actions_wrapper], actions_wrapper_classes)
+    end
+  end
+end

data/app/components/ariadne/ariadne.js

@@ -1,5 +1,8 @@
 import { Application } from '@hotwired/stimulus';
 import AriadneForm from './ariadne-form';
+import OptionsController from './options_controller/options_controller';
+import AccumulatorController from './accumulator_controller/accumulator_controller';
+import ToggleableController from './toggleable_controller/toggleable_controller';
 import ClipboardCopyComponent from './clipboard_copy_component/clipboard-copy-component';
 import RichTextAreaComponent from './rich_text_area_component/rich-text-area-component';
 import SlideoverComponent from './slideover_component/slideover-component';
@@ -14,3 +17,6 @@ application.register('rich-text-area-component', RichTextAreaComponent);
 application.register('slideover-component', SlideoverComponent);
 application.register('tab-nav-component', TabNavComponent);
 application.register('tooltip-component', TooltipComponent);
+application.register('toggleable', ToggleableController);
+application.register('accumulator', AccumulatorController);
+application.register('options', OptionsController);

data/app/components/ariadne/ariadne.ts

@@ -2,6 +2,9 @@ import {Application} from '@hotwired/stimulus'
 
 import AriadneForm from './ariadne-form'
 
+import OptionsController from './options_controller/options_controller'
+import AccumulatorController from './accumulator_controller/accumulator_controller'
+import ToggleableController from './toggleable_controller/toggleable_controller'
 import ClipboardCopyComponent from './clipboard_copy_component/clipboard-copy-component'
 import RichTextAreaComponent from './rich_text_area_component/rich-text-area-component'
 import SlideoverComponent from './slideover_component/slideover-component'
@@ -19,3 +22,6 @@ application.register('rich-text-area-component', RichTextAreaComponent)
 application.register('slideover-component', SlideoverComponent)
 application.register('tab-nav-component', TabNavComponent)
 application.register('tooltip-component', TooltipComponent)
+application.register('toggleable', ToggleableController)
+application.register('accumulator', AccumulatorController)
+application.register('options', OptionsController)

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

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

data/app/components/ariadne/bottom_tab_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Tab component to be used with bottom_tab_nav
+
+  # Accessibility considerations:
+  # aria-controls="tabpanelID": Use this if content is being conditionally controlled. Reference the ID of the content being controlled
+  class BottomTabComponent < Ariadne::Component
+    DEFAULT_TAG = :a
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "ariadne-w-full ariadne-py-4 ariadne-flex ariadne-flex-col ariadne-justify-center ariadne-items-center ariadne-cursor-pointer [&>span]:ariadne-p-0 ariadne-border-y-2 ariadne-border-r-2 first:ariadne-border-l-2 ariadne-border-solid ariadne-border-black"
+    TAB_BACKGROUND_COLOR_CLASSES = "aria-selected:ariadne-bg-gray-200"
+
+    DEFAULT_ATTRIBUTES = {
+      "data-action": "click->options#select",
+      "data-options-target": "option",
+      role: "tab",
+      tabindex: "0",
+    }
+
+    renders_one :icon, Ariadne::HeroiconComponent
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::BottomTabComponent.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: "", active: false, attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES,
+        TAB_BACKGROUND_COLOR_CLASSES,
+        classes,
+      )
+
+      @attributes = DEFAULT_ATTRIBUTES
+        .merge({ "aria-selected": active })
+        .merge(attributes)
+    end
+  end
+end

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

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

data/app/components/ariadne/bottom_tab_nav_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Navigation component for BottomTabs
+  class BottomTabNavComponent < Ariadne::Component
+    DEFAULT_TAG = :nav
+    DEFAULT_TAB_TAG = :a
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "ariadne-flex"
+
+    DEFAULT_ATTRIBUTES = {
+      "data-controller": "options",
+      "data-options-synced-attrs-value": '["aria-selected"]',
+      role: "tablist",
+    }
+
+    renders_many :tabs, Ariadne::BottomTabComponent
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::BottomTabNavComponent.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: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES, classes)
+      @attributes = DEFAULT_ATTRIBUTES.merge(attributes)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <ol class="ariadne-flex ariadne-gap-2 ariadne-items-center">
+    <% @items.each_with_index do |item, index| %>
+      <% if index == @items.size - 1 %>
+        <li class="<%= @active_item_classes %>" aria-current="page"><%= item[:title] %></li>
+      <% else %>
+        <li class="<%= @item_classes %>"><a href="<%= item[:url] %>"><%= item[:title] %></a></li>
+        <%= render Ariadne::HeroiconComponent.new(tag: :svg, icon: "chevron-right", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :xs) do |icon| %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/ariadne/breadcrumbs_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Breadcrumb component showing current navigation. The last item is considered the active one
+  class BreadcrumbsComponent < Ariadne::Component
+    DEFAULT_TAG = :nav
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = { wrapper: "", item: "", active_item: "ariadne-underline" }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::BreadcrumbsComponent.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: "", items: [], item_classes: "", active_item_classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES[:wrapper],
+        classes,
+      )
+
+      @items = items
+      @item_classes = merge_class_names(DEFAULT_CLASSES[:item], item_classes)
+      @active_item_classes = merge_class_names(DEFAULT_CLASSES[:item], DEFAULT_CLASSES[:active_item], item_classes, active_item_classes)
+      @attributes = attributes
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @label_classes, attributes: @label_attributes) do |component| %>
+  <%= render Ariadne::BaseComponent.new(tag: :input, classes: @input_classes, attributes: @input_attributes) do |input| %>
+  <% end %>
+  <%= content %>
+<% end %>

data/app/components/ariadne/checkbox_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Just a checkbox with a label, state managed by toggleable controller
+  class CheckboxComponent < Ariadne::Component
+    DEFAULT_TAG = :label
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = {
+      input: "ariadne-mr-2",
+      label: "ariadne-flex ariadne-items-center ariadne-cursor-pointer ariadne-w-fit",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      input: {
+        type: "checkbox",
+        "data-controller": "toggleable",
+        "data-toggleable-synced-attrs-value": '["checked", "aria-checked"]',
+        "data-action": "click->toggleable#toggle",
+      },
+      label: {},
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::CheckboxComponent.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: "", input_classes: "", initial_value: false, input_attributes: {}, attributes: {})
+      @tag = @tag = check_incoming_tag(DEFAULT_TAG, tag)
+
+      @label_attributes = DEFAULT_ATTRIBUTES[:label].merge(attributes)
+      @label_classes = merge_class_names(DEFAULT_CLASSES[:label], classes)
+
+      @input_classes = merge_class_names(DEFAULT_CLASSES[:input], input_classes)
+      @input_attributes = DEFAULT_ATTRIBUTES[:input]
+        .merge({ "data-toggleable-state-value": initial_value.to_s })
+        .merge(input_attributes)
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+<%= render Ariadne::ButtonComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= render Ariadne::HeroiconComponent.new(icon: "x-mark", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: @icon_classes, size: @size) do |icon| %>
+  <% end %>
+<% end %>

data/app/components/ariadne/close_button_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Simple button with X icon to close models and such
+  class CloseButtonComponent < Ariadne::Component
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "ariadne-border-none ariadne-bg-transparent ariadne-shadow-none hover:ariadne-bg-transparent"
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::CloseButtonComponent.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: "", icon_classes: "", size: :xs, aria_label: nil, attributes: {})
+      raise ArgumentError, "An 'aria_label' argument is required to use a Close Button. Include as much detail as you can about what the button will be closing." if aria_label.blank?
+
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @attributes = { "aria-label": aria_label }.merge(attributes)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @size = size
+      @icon_classses = icon_classes
+    end
+  end
+end

data/app/components/ariadne/dropdown/menu_component.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/ariadne/dropdown/menu_component.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';

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

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+export default class OptionsController extends Controller {
+    #private;
+    static targets: string[];
+    static values: {
+        activeIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+    };
+    readonly optionTargets: Array<Element>;
+    activeIndexValue: number;
+    readonly syncedAttrsValue: string[];
+    readonly hasSyncedAttrsValue: boolean;
+    readonly antiAttrsValue: string[];
+    readonly hasAntiAttrsValue: boolean;
+    connect(): void;
+    select(e: Event, newIndex?: number): void;
+}

data/app/components/ariadne/options_controller/options_controller.js

@@ -0,0 +1,50 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _OptionsController_instances, _OptionsController_updateAllAttrsForElement, _OptionsController_syncAttrsForTarget;
+import { Controller } from '@hotwired/stimulus';
+class OptionsController extends Controller {
+    constructor() {
+        super(...arguments);
+        _OptionsController_instances.add(this);
+    }
+    connect() {
+        this.select(new Event('Init'), this.activeIndexValue);
+    }
+    select(e, newIndex) {
+        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);
+            }
+            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_updateAllAttrsForElement).call(this, target, isActive);
+        }
+    }
+}
+_OptionsController_instances = new WeakSet(), _OptionsController_updateAllAttrsForElement = function _OptionsController_updateAllAttrsForElement(element, value) {
+    if (this.hasSyncedAttrsValue) {
+        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_syncAttrsForTarget).call(this, element, this.syncedAttrsValue, value);
+    }
+    if (this.hasAntiAttrsValue) {
+        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_syncAttrsForTarget).call(this, element, this.antiAttrsValue, !value);
+    }
+}, _OptionsController_syncAttrsForTarget = function _OptionsController_syncAttrsForTarget(element, attrs, value) {
+    const attrState = String(value);
+    for (let index in attrs) {
+        const attr = attrs[index];
+        element.setAttribute(attr, attrState);
+    }
+};
+OptionsController.targets = ['option'];
+OptionsController.values = {
+    activeIndex: {
+        type: Number,
+        default: 0,
+    },
+    syncedAttrs: Array,
+    antiAttrs: Array,
+};
+export default OptionsController;

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)
+    }
+  }
+}