Component namespacing (#2463)

* [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:23 EDT

* [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:30 EDT

* Update stimulus controller references to use namespace

* Fix remaining tests

app/components/DS/alert.html.erb

@@ -0,0 +1,7 @@
+<div class="<%= container_classes %>">
+  <%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0" %>
+
+  <div class="flex-1 text-sm">
+    <%= message %>
+  </div>
+</div>

app/components/DS/alert.rb

@@ -0,0 +1,52 @@
+class DS::Alert < DesignSystemComponent
+  def initialize(message:, variant: :info)
+    @message = message
+    @variant = variant
+  end
+
+  private
+    attr_reader :message, :variant
+
+    def container_classes
+      base_classes = "flex items-start gap-3 p-4 rounded-lg border"
+
+      variant_classes = case variant
+      when :info
+        "bg-blue-50 text-blue-700 border-blue-200 theme-dark:bg-blue-900/20 theme-dark:text-blue-400 theme-dark:border-blue-800"
+      when :success
+        "bg-green-50 text-green-700 border-green-200 theme-dark:bg-green-900/20 theme-dark:text-green-400 theme-dark:border-green-800"
+      when :warning
+        "bg-yellow-50 text-yellow-700 border-yellow-200 theme-dark:bg-yellow-900/20 theme-dark:text-yellow-400 theme-dark:border-yellow-800"
+      when :error, :destructive
+        "bg-red-50 text-red-700 border-red-200 theme-dark:bg-red-900/20 theme-dark:text-red-400 theme-dark:border-red-800"
+      end
+
+      "#{base_classes} #{variant_classes}"
+    end
+
+    def icon_name
+      case variant
+      when :info
+        "info"
+      when :success
+        "check-circle"
+      when :warning
+        "alert-triangle"
+      when :error, :destructive
+        "x-circle"
+      end
+    end
+
+    def icon_color
+      case variant
+      when :success
+        "success"
+      when :warning
+        "warning"
+      when :error, :destructive
+        "destructive"
+      else
+        "blue-600"
+      end
+    end
+end

app/components/DS/button.html.erb

@@ -0,0 +1,13 @@
+<%= container do %>
+  <% if icon && (icon_position != :right) %>
+    <%= helpers.icon(icon, size: size, color: icon_color, class: icon_classes) %>
+  <% end %>
+
+  <% unless icon_only? %>
+    <%= text %>
+  <% end %>
+
+  <% if icon && icon_position == :right %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
+  <% end %>
+<% end %>

app/components/DS/button.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# An extension to `button_to` helper.  All options are passed through to the `button_to` helper with some additional
+# options available.
+class DS::Button < DS::Buttonish
+  attr_reader :confirm
+
+  def initialize(confirm: nil, **opts)
+    super(**opts)
+    @confirm = confirm
+  end
+
+  def container(&block)
+    if href.present?
+      button_to(href, **merged_opts, &block)
+    else
+      content_tag(:button, **merged_opts, &block)
+    end
+  end
+
+  private
+    def merged_opts
+      merged_opts = opts.dup || {}
+      extra_classes = merged_opts.delete(:class)
+      href = merged_opts.delete(:href)
+      data = merged_opts.delete(:data) || {}
+
+      if confirm.present?
+        data = data.merge(turbo_confirm: confirm.to_data_attribute)
+      end
+
+      if frame.present?
+        data = data.merge(turbo_frame: frame)
+      end
+
+      merged_opts.merge(
+        class: class_names(container_classes, extra_classes),
+        data: data
+      )
+    end
+end

app/components/DS/buttonish.rb

@@ -0,0 +1,156 @@
+class DS::Buttonish < DesignSystemComponent
+  VARIANTS = {
+    primary: {
+      container_classes: "text-inverse bg-inverse hover:bg-inverse-hover disabled:bg-gray-500 theme-dark:disabled:bg-gray-400",
+      icon_classes: "fg-inverse"
+    },
+    secondary: {
+      container_classes: "text-primary bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 disabled:bg-gray-200 theme-dark:disabled:bg-gray-600",
+      icon_classes: "fg-primary"
+    },
+    destructive: {
+      container_classes: "text-inverse bg-red-500 theme-dark:bg-red-400 hover:bg-red-600 theme-dark:hover:bg-red-500 disabled:bg-red-200 theme-dark:disabled:bg-red-600",
+      icon_classes: "fg-white"
+    },
+    outline: {
+      container_classes: "text-primary border border-secondary bg-transparent hover:bg-surface-hover",
+      icon_classes: "fg-gray"
+    },
+    outline_destructive: {
+      container_classes: "text-destructive border border-secondary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      icon_classes: "fg-gray"
+    },
+    ghost: {
+      container_classes: "text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      icon_classes: "fg-gray"
+    },
+    icon: {
+      container_classes: "hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      icon_classes: "fg-gray"
+    },
+    icon_inverse: {
+      container_classes: "bg-inverse hover:bg-inverse-hover",
+      icon_classes: "fg-inverse"
+    }
+  }.freeze
+
+  SIZES = {
+    sm: {
+      container_classes: "px-2 py-1",
+      icon_container_classes: "inline-flex items-center justify-center w-8 h-8",
+      radius_classes: "rounded-md",
+      text_classes: "text-sm"
+    },
+    md: {
+      container_classes: "px-3 py-2",
+      icon_container_classes: "inline-flex items-center justify-center w-9 h-9",
+      radius_classes: "rounded-lg",
+      text_classes: "text-sm"
+    },
+    lg: {
+      container_classes: "px-4 py-3",
+      icon_container_classes: "inline-flex items-center justify-center w-10 h-10",
+      radius_classes: "rounded-xl",
+      text_classes: "text-base"
+    }
+  }.freeze
+
+  attr_reader :variant, :size, :href, :icon, :icon_position, :text, :full_width, :extra_classes, :frame, :opts
+
+  def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, icon_position: :left, full_width: false, frame: nil, **opts)
+    @variant = variant.to_s.underscore.to_sym
+    @size = size.to_sym
+    @href = href
+    @icon = icon
+    @icon_position = icon_position.to_sym
+    @text = text
+    @full_width = full_width
+    @extra_classes = opts.delete(:class)
+    @frame = frame
+    @opts = opts
+  end
+
+  def call
+    raise NotImplementedError, "Buttonish is an abstract class and cannot be instantiated directly."
+  end
+
+  def container_classes(override_classes = nil)
+    class_names(
+      "font-medium whitespace-nowrap",
+      merged_base_classes,
+      full_width ? "w-full justify-center" : nil,
+      container_size_classes,
+      size_data.dig(:text_classes),
+      variant_data.dig(:container_classes)
+    )
+  end
+
+  def container_size_classes
+    icon_only? ? size_data.dig(:icon_container_classes) : size_data.dig(:container_classes)
+  end
+
+  def icon_color
+    # Map variant to icon color for the icon helper
+    case variant
+    when :primary, :icon_inverse
+      :white
+    when :destructive, :outline_destructive
+      :destructive
+    else
+      :default
+    end
+  end
+
+  def icon_classes
+    class_names(
+      variant_data.dig(:icon_classes)
+    )
+  end
+
+  def icon_only?
+    variant.in?([ :icon, :icon_inverse ])
+  end
+
+  private
+    def variant_data
+      self.class::VARIANTS.dig(variant)
+    end
+
+    def size_data
+      self.class::SIZES.dig(size)
+    end
+
+    # Make sure that user can override common classes like `hidden`
+    def merged_base_classes
+      base_display_classes = "inline-flex items-center gap-1"
+      base_radius_classes = size_data.dig(:radius_classes)
+
+      extra_classes_list = (extra_classes || "").split
+
+      has_display_override = extra_classes_list.any? { |c| permitted_display_override_classes.include?(c) }
+      has_radius_override = extra_classes_list.any? { |c| permitted_radius_override_classes.include?(c) }
+
+      base_classes = []
+
+      unless has_display_override
+        base_classes << base_display_classes
+      end
+
+      unless has_radius_override
+        base_classes << base_radius_classes
+      end
+
+      class_names(
+        base_classes,
+        extra_classes
+      )
+    end
+
+    def permitted_radius_override_classes
+      [ "rounded-full" ]
+    end
+
+    def permitted_display_override_classes
+      [ "hidden", "flex" ]
+    end
+end

app/components/DS/dialog.html.erb

@@ -0,0 +1,38 @@
+<%= wrapper_element do %>
+  <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
+    <%= tag.div class: dialog_outer_classes do %>
+      <%= tag.div class: dialog_inner_classes, data: { DS__dialog_target: "content" } do %>
+        <div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
+          <% if header? %>
+            <%= header %>
+          <% end %>
+
+          <% if body? %>
+            <div class="px-4 grow">
+              <%= body %>
+
+              <% if sections.any? %>
+                <div class="space-y-4">
+                  <% sections.each do |section| %>
+                    <%= section %>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+
+          <%# Optional, for customizing dialogs %>
+          <%= content %>
+        </div>
+
+        <% if actions? %>
+          <div class="flex items-center gap-2 justify-end p-4">
+            <% actions.each do |action| %>
+              <%= action %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

app/components/DS/dialog.rb

@@ -0,0 +1,115 @@
+class DS::Dialog < DesignSystemComponent
+  renders_one :header, ->(title: nil, subtitle: nil, hide_close_icon: false, **opts, &block) do
+    content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
+      title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
+        title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
+        close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "DS--dialog#close" }) unless hide_close_icon
+        safe_join([ title, close_icon ].compact)
+      end
+
+      subtitle = content_tag(:p, subtitle, class: "text-sm text-secondary") if subtitle
+
+      block_content = capture(&block) if block
+
+      safe_join([ title_div, subtitle, block_content ].compact)
+    end
+  end
+
+  renders_one :body
+
+  renders_many :actions, ->(cancel_action: false, **button_opts) do
+    merged_opts = if cancel_action
+      button_opts.merge(type: "button", data: { action: "DS--dialog#close" })
+    else
+      button_opts
+    end
+
+    render DS::Button.new(**merged_opts)
+  end
+
+  renders_many :sections, ->(title:, **disclosure_opts, &block) do
+    render DS::Disclosure.new(title: title, align: :right, **disclosure_opts) do
+      block.call
+    end
+  end
+
+  attr_reader :variant, :auto_open, :reload_on_close, :width, :disable_frame, :opts
+
+  VARIANTS = %w[modal drawer].freeze
+  WIDTHS = {
+    sm: "lg:max-w-[300px]",
+    md: "lg:max-w-[550px]",
+    lg: "lg:max-w-[700px]",
+    full: "lg:max-w-full"
+  }.freeze
+
+  def initialize(variant: "modal", auto_open: true, reload_on_close: false, width: "md", frame: nil, disable_frame: false, **opts)
+    @variant = variant.to_sym
+    @auto_open = auto_open
+    @reload_on_close = reload_on_close
+    @width = width.to_sym
+    @frame = frame
+    @disable_frame = disable_frame
+    @opts = opts
+  end
+
+  def frame
+    @frame || variant
+  end
+
+  # Caller must "opt-out" of using the default turbo-frame based on the variant
+  def wrapper_element(&block)
+    if disable_frame
+      content_tag(:div, &block)
+    else
+      content_tag("turbo-frame", id: frame, &block)
+    end
+  end
+
+  def dialog_outer_classes
+    variant_classes = if drawer?
+      "items-end justify-end"
+    else
+      "items-center justify-center"
+    end
+
+    class_names(
+      "flex h-full w-full",
+      variant_classes
+    )
+  end
+
+  def dialog_inner_classes
+    variant_classes = if drawer?
+      "lg:w-[550px] h-full"
+    else
+      class_names(
+        "max-h-full",
+        WIDTHS[width]
+      )
+    end
+
+    class_names(
+      "flex flex-col bg-container rounded-xl shadow-border-xs mx-3 lg:mx-0 w-full overflow-hidden",
+      variant_classes
+    )
+  end
+
+  def merged_opts
+    merged_opts = opts.dup
+    data = merged_opts.delete(:data) || {}
+
+    data[:controller] = [ "DS--dialog", "hotkey", data[:controller] ].compact.join(" ")
+    data[:DS__dialog_auto_open_value] = auto_open
+    data[:DS__dialog_reload_on_close_value] = reload_on_close
+    data[:action] = [ "mousedown->DS--dialog#clickOutside", data[:action] ].compact.join(" ")
+    data[:hotkey] = "esc:DS--dialog#close"
+    merged_opts[:data] = data
+
+    merged_opts
+  end
+
+  def drawer?
+    variant == :drawer
+  end
+end

app/components/DS/dialog_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["content"]
+
+  static values = {
+    autoOpen: { type: Boolean, default: false },
+    reloadOnClose: { type: Boolean, default: false },
+  };
+
+  connect() {
+    if (this.element.open) return;
+    if (this.autoOpenValue) {
+      this.element.showModal();
+    }
+  }
+  
+  // If the user clicks anywhere outside of the visible content, close the dialog
+  clickOutside(e) {
+    if (!this.contentTarget.contains(e.target)) {
+      this.close();
+    }
+  }
+
+  close() {
+    this.element.close();
+
+    if (this.reloadOnCloseValue) {
+      Turbo.visit(window.location.href);
+    }
+  }
+}

app/components/DS/disclosure.html.erb

@@ -0,0 +1,27 @@
+<details class="group" <%= "open" if open %>>
+  <%= tag.summary class: class_names(
+    "px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface"
+  ) do %>
+    <% if summary_content? %>
+      <%= summary_content %>
+    <% else %>
+      <div class="flex items-center gap-3">
+        <% if align == :left %>
+          <%= helpers.icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
+        <% end %>
+
+        <%= tag.span class: class_names("font-medium", align == :left ? "text-sm text-primary" : "text-xs uppercase text-secondary") do %>
+          <%= title %>
+        <% end %>
+      </div>
+
+      <% if align == :right %>
+        <%= helpers.icon "chevron-down", class: "group-open:transform group-open:rotate-180" %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <div class="mt-2">
+    <%= content %>
+  </div>
+</details>

app/components/DS/disclosure.rb

@@ -0,0 +1,12 @@
+class DS::Disclosure < DesignSystemComponent
+  renders_one :summary_content
+
+  attr_reader :title, :align, :open, :opts
+
+  def initialize(title: nil, align: "right", open: false, **opts)
+    @title = title
+    @align = align.to_sym
+    @open = open
+    @opts = opts
+  end
+end

app/components/DS/filled_icon.html.erb

@@ -0,0 +1,8 @@
+<%= tag.div style: transparent? ? container_styles : nil,
+            class: container_classes do %>
+  <% if icon %>
+    <%= helpers.icon(icon, size: icon_size, color: "current") %>
+  <% elsif text %>
+    <%= tag.span text.first, class: text_classes %>
+  <% end %>
+<% end %>

app/components/DS/filled_icon.rb

@@ -0,0 +1,99 @@
+class DS::FilledIcon < DesignSystemComponent
+  attr_reader :icon, :text, :hex_color, :size, :rounded, :variant
+
+  VARIANTS = %i[default text surface container inverse].freeze
+
+  SIZES = {
+    sm: {
+      container_size: "w-6 h-6",
+      container_radius: "rounded-md",
+      icon_size: "sm",
+      text_size: "text-xs"
+    },
+    md: {
+      container_size: "w-8 h-8",
+      container_radius: "rounded-lg",
+      icon_size: "md",
+      text_size: "text-xs"
+    },
+    lg: {
+      container_size: "w-9 h-9",
+      container_radius: "rounded-xl",
+      icon_size: "lg",
+      text_size: "text-sm"
+    }
+  }.freeze
+
+  def initialize(variant: :default, icon: nil, text: nil, hex_color: nil, size: "md", rounded: false)
+    @variant = variant.to_sym
+    @icon = icon
+    @text = text
+    @hex_color = hex_color
+    @size = size.to_sym
+    @rounded = rounded
+  end
+
+  def container_classes
+    class_names(
+      "flex justify-center items-center shrink-0",
+      size_classes,
+      radius_classes,
+      transparent? ? "border" : solid_bg_class
+    )
+  end
+
+  def icon_size
+    SIZES[size][:icon_size]
+  end
+
+  def text_classes
+    class_names(
+      "text-center font-medium uppercase",
+      SIZES[size][:text_size]
+    )
+  end
+
+  def container_styles
+    <<~STYLE.strip
+      background-color: #{transparent_bg_color};
+      border-color: #{transparent_border_color};
+      color: #{custom_fg_color};
+    STYLE
+  end
+
+  def transparent?
+    variant.in?(%i[default text])
+  end
+
+  private
+    def solid_bg_class
+      case variant
+      when :surface
+        "bg-surface-inset"
+      when :container
+        "bg-container-inset"
+      when :inverse
+        "bg-container"
+      end
+    end
+
+    def size_classes
+      SIZES[size][:container_size]
+    end
+
+    def radius_classes
+      rounded ? "rounded-full" : SIZES[size][:container_radius]
+    end
+
+    def custom_fg_color
+      hex_color || "var(--color-gray-500)"
+    end
+
+    def transparent_bg_color
+      "color-mix(in oklab, #{custom_fg_color} 10%, transparent)"
+    end
+
+    def transparent_border_color
+      "color-mix(in oklab, #{custom_fg_color} 10%, transparent)"
+    end
+end

app/components/DS/link.html.erb

@@ -0,0 +1,13 @@
+<%= link_to href, **merged_opts do %>
+  <% if icon && (icon_position != "right") %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
+  <% end %>
+
+  <% unless icon_only? %>
+    <%= text %>
+  <% end %>
+
+  <% if icon && icon_position == "right" %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
+  <% end %>
+<% end %>

app/components/DS/link.rb

@@ -0,0 +1,31 @@
+# An extension to `link_to` helper.  All options are passed through to the `link_to` helper with some additional
+# options available.
+class DS::Link < DS::Buttonish
+  attr_reader :frame
+
+  VARIANTS = VARIANTS.reverse_merge(
+    default: {
+      container_classes: "",
+      icon_classes: "fg-gray"
+    }
+  ).freeze
+
+  def merged_opts
+    merged_opts = opts.dup || {}
+    data = merged_opts.delete(:data) || {}
+
+    if frame
+      data = data.merge(turbo_frame: frame)
+    end
+
+    merged_opts.merge(
+      class: class_names(container_classes, extra_classes),
+      data: data
+    )
+  end
+
+  private
+    def container_size_classes
+      super unless variant == :default
+    end
+end

app/components/DS/menu.html.erb

@@ -0,0 +1,27 @@
+<%= tag.div data: { controller: "DS--menu", DS__menu_placement_value: placement, DS__menu_offset_value: offset, testid: testid } do %>
+  <% if variant == :icon %>
+    <%= render DS::Button.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", data: { DS__menu_target: "button" }) %>
+  <% elsif variant == :button %>
+    <%= button %>
+  <% elsif variant == :avatar %>
+    <button data-DS--menu-target="button">
+      <div class="w-9 h-9 cursor-pointer">
+        <%= render "settings/user_avatar", avatar_url: avatar_url, initials: initials %>
+      </div>
+    </button>
+  <% end %>
+
+  <div data-DS--menu-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
+    <div class="mx-auto min-w-[200px] shadow-border-xs bg-container rounded-lg">
+      <%= header %>
+
+      <%= tag.div class: class_names("py-1" => !no_padding) do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+
+        <%= custom_content %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

app/components/DS/menu.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class DS::Menu < DesignSystemComponent
+  attr_reader :variant, :avatar_url, :initials, :placement, :offset, :icon_vertical, :no_padding, :testid
+
+  renders_one :button, ->(**button_options, &block) do
+    options_with_target = button_options.merge(data: { DS__menu_target: "button" })
+
+    if block
+      content_tag(:button, **options_with_target, &block)
+    else
+      DS::Button.new(**options_with_target)
+    end
+  end
+
+  renders_one :header, ->(&block) do
+    content_tag(:div, class: "border-b border-tertiary", &block)
+  end
+
+  renders_one :custom_content
+
+  renders_many :items, DS::MenuItem
+
+  VARIANTS = %i[icon button avatar].freeze
+
+  def initialize(variant: "icon", avatar_url: nil, initials: nil, placement: "bottom-end", offset: 12, icon_vertical: false, no_padding: false, testid: nil)
+    @variant = variant.to_sym
+    @avatar_url = avatar_url
+    @initials = initials
+    @placement = placement
+    @offset = offset
+    @icon_vertical = icon_vertical
+    @no_padding = no_padding
+    @testid = testid
+
+    raise ArgumentError, "Invalid variant: #{@variant}" unless VARIANTS.include?(@variant)
+  end
+end

app/components/DS/menu_controller.js

@@ -0,0 +1,117 @@
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * A "menu" can contain arbitrary content including non-clickable items, links, buttons, and forms.
+ */
+export default class extends Controller {
+  static targets = ["button", "content"];
+
+  static values = {
+    show: Boolean,
+    placement: { type: String, default: "bottom-end" },
+    offset: { type: Number, default: 6 },
+  };
+
+  connect() {
+    this.show = this.showValue;
+    this.boundUpdate = this.update.bind(this);
+    this.addEventListeners();
+    this.startAutoUpdate();
+  }
+
+  disconnect() {
+    this.removeEventListeners();
+    this.stopAutoUpdate();
+    this.close();
+  }
+
+  addEventListeners() {
+    this.buttonTarget.addEventListener("click", this.toggle);
+    this.element.addEventListener("keydown", this.handleKeydown);
+    document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener("turbo:load", this.handleTurboLoad);
+  }
+
+  removeEventListeners() {
+    this.buttonTarget.removeEventListener("click", this.toggle);
+    this.element.removeEventListener("keydown", this.handleKeydown);
+    document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener("turbo:load", this.handleTurboLoad);
+  }
+
+  handleTurboLoad = () => {
+    if (!this.show) this.close();
+  };
+
+  handleOutsideClick = (event) => {
+    if (this.show && !this.element.contains(event.target)) this.close();
+  };
+
+  handleKeydown = (event) => {
+    if (event.key === "Escape") {
+      this.close();
+      this.buttonTarget.focus();
+    }
+  };
+
+  toggle = () => {
+    this.show = !this.show;
+    this.contentTarget.classList.toggle("hidden", !this.show);
+    if (this.show) {
+      this.update();
+      this.focusFirstElement();
+    }
+  };
+
+  close() {
+    this.show = false;
+    this.contentTarget.classList.add("hidden");
+  }
+
+  focusFirstElement() {
+    const focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const firstFocusableElement =
+      this.contentTarget.querySelectorAll(focusableElements)[0];
+    if (firstFocusableElement) {
+      firstFocusableElement.focus();
+    }
+  }
+
+  startAutoUpdate() {
+    if (!this._cleanup) {
+      this._cleanup = autoUpdate(
+        this.buttonTarget,
+        this.contentTarget,
+        this.boundUpdate,
+      );
+    }
+  }
+
+  stopAutoUpdate() {
+    if (this._cleanup) {
+      this._cleanup();
+      this._cleanup = null;
+    }
+  }
+
+  update() {
+    computePosition(this.buttonTarget, this.contentTarget, {
+      placement: this.placementValue,
+      middleware: [offset(this.offsetValue), flip(), shift({ padding: 5 })],
+    }).then(({ x, y }) => {
+      Object.assign(this.contentTarget.style, {
+        position: "fixed",
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+}

app/components/DS/menu_item.html.erb

@@ -0,0 +1,12 @@
+<% if variant == :divider %>
+  <%= render "shared/ruler", classes: "my-1" %>
+<% else %>
+  <div class="px-1">
+    <%= wrapper do %>
+      <% if icon %>
+        <%= helpers.icon(icon, color: destructive? ? :destructive : :default) %>
+      <% end %>
+      <%= tag.span(text, class: text_classes) %>
+    <% end %>
+  </div>
+<% end %>

app/components/DS/menu_item.rb

@@ -0,0 +1,62 @@
+class DS::MenuItem < DesignSystemComponent
+  VARIANTS = %i[link button divider].freeze
+
+  attr_reader :variant, :text, :icon, :href, :method, :destructive, :confirm, :frame, :opts
+
+  def initialize(variant:, text: nil, icon: nil, href: nil, method: :post, destructive: false, confirm: nil, frame: nil, **opts)
+    @variant = variant.to_sym
+    @text = text
+    @icon = icon
+    @href = href
+    @method = method.to_sym
+    @destructive = destructive
+    @confirm = confirm
+    @frame = frame
+    @opts = opts
+    raise ArgumentError, "Invalid variant: #{@variant}" unless VARIANTS.include?(@variant)
+  end
+
+  def wrapper(&block)
+    if variant == :button
+      button_to href, method: method, class: container_classes, **merged_opts, &block
+    elsif variant == :link
+      link_to href, class: container_classes, **merged_opts, &block
+    else
+      nil
+    end
+  end
+
+  def text_classes
+    [
+      "text-sm",
+      destructive? ? "text-destructive" : "text-primary"
+    ].join(" ")
+  end
+
+  def destructive?
+    method == :delete || destructive
+  end
+
+  private
+    def container_classes
+      [
+        "flex items-center gap-2 p-2 rounded-md w-full",
+        destructive? ? "hover:bg-red-tint-5 theme-dark:hover:bg-red-tint-10" : "hover:bg-container-hover"
+      ].join(" ")
+    end
+
+    def merged_opts
+      merged_opts = opts.dup || {}
+      data = merged_opts.delete(:data) || {}
+
+      if confirm.present?
+        data = data.merge(turbo_confirm: confirm.to_data_attribute)
+      end
+
+      if frame.present?
+        data = data.merge(turbo_frame: frame)
+      end
+
+      merged_opts.merge(data: data)
+    end
+end

app/components/DS/tab.rb

@@ -0,0 +1,12 @@
+class DS::Tab < DesignSystemComponent
+  attr_reader :id, :label
+
+  def initialize(id:, label:)
+    @id = id
+    @label = label
+  end
+
+  def call
+    content
+  end
+end

app/components/DS/tabs.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div data: {
+  controller: "DS--tabs",
+  testid: testid,
+  DS__tabs_session_key_value: session_key,
+  DS__tabs_url_param_key_value: url_param_key,
+  DS__tabs_nav_btn_active_class: active_btn_classes,
+  DS__tabs_nav_btn_inactive_class: inactive_btn_classes
+} do %>
+  <% if unstyled? %>
+    <%= content %>
+  <% else %>
+    <%= nav %>
+
+    <% panels.each do |panel| %>
+      <%= panel %>
+    <% end %>
+  <% end %>
+<% end %>

app/components/DS/tabs.rb

@@ -0,0 +1,66 @@
+class DS::Tabs < DesignSystemComponent
+  renders_one :nav, ->(classes: nil) do
+    DS::Tabs::Nav.new(
+      active_tab: active_tab,
+      active_btn_classes: active_btn_classes,
+      inactive_btn_classes: inactive_btn_classes,
+      btn_classes: base_btn_classes,
+      classes: unstyled? ? classes : class_names(nav_container_classes, classes)
+    )
+  end
+
+  renders_many :panels, ->(tab_id:, &block) do
+    content_tag(
+      :div,
+      class: ("hidden" unless tab_id == active_tab),
+      data: { id: tab_id, DS__tabs_target: "panel" },
+      &block
+    )
+  end
+
+  VARIANTS = {
+    default: {
+      active_btn_classes: "bg-white theme-dark:bg-gray-700 text-primary shadow-sm",
+      inactive_btn_classes: "text-secondary hover:bg-surface-inset-hover",
+      base_btn_classes: "w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200",
+      nav_container_classes: "flex bg-surface-inset p-1 rounded-lg mb-4"
+    }
+  }
+
+  attr_reader :active_tab, :url_param_key, :session_key, :variant, :testid
+
+  def initialize(active_tab:, url_param_key: nil, session_key: nil, variant: :default, active_btn_classes: "", inactive_btn_classes: "", testid: nil)
+    @active_tab = active_tab
+    @url_param_key = url_param_key
+    @session_key = session_key
+    @variant = variant.to_sym
+    @active_btn_classes = active_btn_classes
+    @inactive_btn_classes = inactive_btn_classes
+    @testid = testid
+  end
+
+  def active_btn_classes
+    unstyled? ? @active_btn_classes : VARIANTS.dig(variant, :active_btn_classes)
+  end
+
+  def inactive_btn_classes
+    unstyled? ? @inactive_btn_classes : VARIANTS.dig(variant, :inactive_btn_classes)
+  end
+
+  private
+    def unstyled?
+      variant == :unstyled
+    end
+
+    def base_btn_classes
+      unless unstyled?
+        VARIANTS.dig(variant, :base_btn_classes)
+      end
+    end
+
+    def nav_container_classes
+      unless unstyled?
+        VARIANTS.dig(variant, :nav_container_classes)
+      end
+    end
+end

app/components/DS/tabs/nav.rb

@@ -0,0 +1,29 @@
+class DS::Tabs::Nav < DesignSystemComponent
+  erb_template <<~ERB
+    <%= tag.nav class: classes do %>
+      <% btns.each  do |btn| %>
+        <%= btn %>
+      <% end  %>
+    <% end  %>
+  ERB
+
+  renders_many :btns, ->(id:, label:, classes: nil, &block) do
+    content_tag(
+      :button, label, id: id,
+      type: "button",
+      class: class_names(btn_classes, id == active_tab ? active_btn_classes : inactive_btn_classes, classes),
+      data: { id: id, action: "DS--tabs#show", DS__tabs_target: "navBtn" },
+      &block
+    )
+  end
+
+  attr_reader :active_tab, :classes, :active_btn_classes, :inactive_btn_classes, :btn_classes
+
+  def initialize(active_tab:, classes: nil, active_btn_classes: nil, inactive_btn_classes: nil, btn_classes: nil)
+    @active_tab = active_tab
+    @classes = classes
+    @active_btn_classes = active_btn_classes
+    @inactive_btn_classes = inactive_btn_classes
+    @btn_classes = btn_classes
+  end
+end

app/components/DS/tabs/panel.rb

@@ -0,0 +1,11 @@
+class DS::Tabs::Panel < DesignSystemComponent
+  attr_reader :tab_id
+
+  def initialize(tab_id:)
+    @tab_id = tab_id
+  end
+
+  def call
+    content
+  end
+end

app/components/DS/tabs_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="tabs--components"
+export default class extends Controller {
+  static classes = ["navBtnActive", "navBtnInactive"];
+  static targets = ["panel", "navBtn"];
+  static values = { sessionKey: String, urlParamKey: String };
+
+  show(e) {
+    const btn = e.target.closest("button");
+    const selectedTabId = btn.dataset.id;
+
+    this.navBtnTargets.forEach((navBtn) => {
+      if (navBtn.dataset.id === selectedTabId) {
+        navBtn.classList.add(...this.navBtnActiveClasses);
+        navBtn.classList.remove(...this.navBtnInactiveClasses);
+      } else {
+        navBtn.classList.add(...this.navBtnInactiveClasses);
+        navBtn.classList.remove(...this.navBtnActiveClasses);
+      }
+    });
+
+    this.panelTargets.forEach((panel) => {
+      if (panel.dataset.id === selectedTabId) {
+        panel.classList.remove("hidden");
+      } else {
+        panel.classList.add("hidden");
+      }
+    });
+
+    if (this.urlParamKeyValue) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.urlParamKeyValue, selectedTabId);
+      window.history.replaceState({}, "", url);
+    }
+
+    // Update URL with the selected tab
+    if (this.sessionKeyValue) {
+      this.#updateSessionPreference(selectedTabId);
+    }
+  } 
+
+  #updateSessionPreference(selectedTabId) {
+    fetch("/current_session", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        "X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
+        Accept: "application/json",
+      },
+      body: new URLSearchParams({
+        "current_session[tab_key]": this.sessionKeyValue,
+        "current_session[tab_value]": selectedTabId,
+      }).toString(),
+    });
+  }
+}

app/components/DS/toggle.html.erb

@@ -0,0 +1,5 @@
+<div class="relative inline-block select-none">
+  <%= hidden_field_tag name, unchecked_value, id: nil %>
+  <%= check_box_tag name, checked_value, checked, class: "sr-only peer", disabled: disabled, id: id, **opts %>
+  <%= label_tag name, "&nbsp;".html_safe, class: label_classes, for: id %>
+</div>

app/components/DS/toggle.rb

@@ -0,0 +1,26 @@
+class DS::Toggle < DesignSystemComponent
+  attr_reader :id, :name, :checked, :disabled, :checked_value, :unchecked_value, :opts
+
+  def initialize(id:, name: nil, checked: false, disabled: false, checked_value: "1", unchecked_value: "0", **opts)
+    @id = id
+    @name = name
+    @checked = checked
+    @disabled = disabled
+    @checked_value = checked_value
+    @unchecked_value = unchecked_value
+    @opts = opts
+  end
+
+  def label_classes
+    class_names(
+       "block w-9 h-5 cursor-pointer",
+       "rounded-full bg-gray-100 theme-dark:bg-gray-700",
+       "transition-colors duration-300",
+       "after:content-[''] after:block after:bg-white after:absolute after:rounded-full",
+       "after:top-0.5 after:left-0.5 after:w-4 after:h-4",
+       "after:transition-transform after:duration-300 after:ease-in-out",
+       "peer-checked:bg-green-600 peer-checked:after:translate-x-4",
+       "peer-disabled:opacity-70 peer-disabled:cursor-not-allowed"
+    )
+  end
+end