ariadne_view_components 0.0.47-x86_64-darwin → 0.0.49-x86_64-darwin

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/events_controller/events_controller.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class EventsController extends Controller {
+    stopPropagation(e: Event): void;
+}

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

@@ -0,0 +1,40 @@
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+type TOptionKey = string | number;
+type TActiveOptions = {
+    [k: TOptionKey]: boolean;
+};
+export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
+    select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
+}
+export default class OptionsController extends SyncedBooleanAttributesController<TActiveOptions> implements OptionsOutlet {
+    #private;
+    static outlets: string[];
+    static targets: string[];
+    static values: {
+        activeOptions: ObjectConstructor;
+        isMulti: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        toggleable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly optionTargets: Array<Element>;
+    activeOptionsValue: TActiveOptions;
+    readonly isMultiValue: boolean;
+    readonly toggleableValue: boolean;
+    optionTargetLookup: Map<Element, TOptionKey>;
+    connect(): void;
+    select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
+    getValueForElement(element: Element): boolean | null;
+    getState(): TActiveOptions;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
+}
+export {};

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

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+type TOutletEventLookup = boolean | {
+    [k: string]: TOutletEventLookup;
+};
+export type TOutletChangeData<T> = {
+    eventKey?: string;
+    data?: T;
+} | undefined;
+export default class OutletManagerController<T> extends Controller {
+    #private;
+    static values: {
+        outletEvents: ArrayConstructor;
+    };
+    readonly outletEventsValue: Array<string>;
+    readonly hasOutletEventsValue: boolean;
+    static outlets: string[];
+    readonly toggleableOutlets: Array<OutletManagerController<T>>;
+    readonly hasToggleableOutlet: boolean;
+    readonly optionsOutlets: Array<OutletManagerController<T>>;
+    readonly hasOptionsOutlet: boolean;
+    readonly stringMatchOutlets: Array<OutletManagerController<T>>;
+    readonly hasStringMatchOutlet: boolean;
+    outletEventsLookup: TOutletEventLookup | null;
+    static domEvents: {
+        [k: string]: boolean;
+    };
+    eventRecords: Map<Event, boolean>;
+    getOutlets(): Array<OutletManagerController<T>> | null | void;
+    outletUpdate(event: Event, data: TOutletChangeData<T>): void;
+    getState(): T;
+    connect(): void;
+    syncOutlets(): void;
+    sendToOutlets(event: Event, updateTo?: TOutletChangeData<T>): void;
+    isListeningForOutletEvent(eventTypes: string): boolean;
+    isDOMEventName(eventName: string): boolean;
+    getEventKey(event: Event): string;
+    hasHeardEvent(event: Event): boolean;
+    get event_key_prefix(): string;
+    get event_key_postfix(): string;
+    get outletEvents(): TOutletEventLookup;
+}
+export {};

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

@@ -0,0 +1,27 @@
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+export interface StringMatchOutlet extends SyncedBooleanAttributesController<string> {
+    change: (event: Event, updateTo?: TOutletChangeData<string>) => void;
+}
+export default class StringMatchController extends SyncedBooleanAttributesController<string> implements StringMatchOutlet {
+    #private;
+    static outlets: string[];
+    static targets: string[];
+    static values: {
+        keyword: StringConstructor;
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly matchTargets: Array<HTMLElement>;
+    readonly hasMatchTarget: boolean;
+    readonly emptyTarget: Element;
+    readonly hasEmptyTarget: boolean;
+    keywordValue: string;
+    change(event: Event, updateTo?: TOutletChangeData<string>): void;
+    getElementsToSync(): Element[] | null | undefined;
+    getValueForElement(element: Element): boolean;
+    getState(): string;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<string>) => void;
+}

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

@@ -0,0 +1,44 @@
+import OutletManagerController from '../outlet_manager_controller/outlet_manager_controller';
+export type TStimulusDispatchEvent<TDetails> = {
+    target?: Element | undefined;
+    detail?: TDetails | undefined;
+    prefix?: string | undefined;
+    bubbles?: boolean | undefined;
+    cancelable?: boolean | undefined;
+    preventDefault: () => void;
+};
+export type TBooleanValueDetail = {
+    value: boolean;
+};
+export interface TSyncAttrDetail extends TBooleanValueDetail {
+    attr: string;
+}
+export default class SyncedBooleanAttributesController<T> extends OutletManagerController<T> {
+    #private;
+    static values: {
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly syncedAttrsValue: string[];
+    readonly hasSyncedAttrsValue: boolean;
+    readonly antiAttrsValue: string[];
+    readonly hasAntiAttrsValue: boolean;
+    readonly protectAttrsValue: boolean;
+    static removeOnFalseAttrs: {
+        [k: string]: boolean;
+    };
+    syncedAttrsLookup: {
+        [k: string]: boolean;
+    } | null;
+    antiAttrsLookup: {
+        [k: string]: boolean;
+    } | null;
+    getValueForElement(element: Element): boolean | null;
+    getElementsToSync(): Array<Element> | null | undefined;
+    connect(): void;
+    updateAttributesForElement(element: Element, value: boolean): void;
+    syncElementAttributes(): void;
+    validateAttrChange(dispatchEvent: TStimulusDispatchEvent<TSyncAttrDetail>): void;
+}

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

@@ -0,0 +1,34 @@
+import type { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
+    toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
+}
+export default class ToggleableController extends SyncedBooleanAttributesController<boolean> implements ToggleableOutlet {
+    static outlets: string[];
+    static values: {
+        state: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeOnOutsideClick: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    stateValue: boolean;
+    readonly closeOnOutsideClickValue: boolean;
+    connect(): void;
+    toggle(event: Event, updateTo?: TOutletChangeData<boolean>): void;
+    on(event: Event): void;
+    off(event: Event): void;
+    clickOutside(event: Event): void;
+    getValueForElement(element: Element): boolean | null;
+    getElementsToSync(): Element[] | null | undefined;
+    getState(): boolean;
+    get event_key_postfix(): "on" | "off";
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<boolean>) => 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,10 @@
 import { Application } from '@hotwired/stimulus';
 import AriadneForm from './ariadne-form';
+import StringMatchController from './string_match_controller/string_match_controller';
+import EventsController from './events_controller/events_controller';
+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 +19,8 @@ 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);
+application.register('string-match', StringMatchController);
+application.register('events', EventsController);

data/app/components/ariadne/ariadne.ts

@@ -2,6 +2,11 @@ import {Application} from '@hotwired/stimulus'
 
 import AriadneForm from './ariadne-form'
 
+import StringMatchController from './string_match_controller/string_match_controller'
+import EventsController from './events_controller/events_controller'
+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 +24,8 @@ 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)
+application.register('string-match', StringMatchController)
+application.register('events', EventsController)

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, scheme: @scheme, 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 %>