tramway 2.2.7 → 2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 908989b8908005e2022039beec8b7b47c4a7200166c77fe33c2dd27891d2fe58
-  data.tar.gz: b57f2f3717522d10885d7ba83464590ff21ce87fa24af5c46deb85b0fac806cd
+  metadata.gz: c7533942aab1b11f547036f0ff9e819c9162d30c3cc11221e578f175d9b3215b
+  data.tar.gz: 52f17dda1d18d9c1c93f91e3a5a372a7a0b38957e220bbdc0fc25f7d6ff3c5d1
 SHA512:
-  metadata.gz: 7824108d8dfe9a0c3da312a26d12a84fe1df9424550c6edb29b864634109cc793e883a9f13ff90a7ab40d2e9b833cc6068194055410837cb554dd0e467f802f7
-  data.tar.gz: befb3fe2ad460b34f002ffd58b01ab4c1f9996ff5f402e714bb54b6fa013091004b55e7ed8b558b551dd017bba4609c01072370eae034b77c51f978a8703fa4e
+  metadata.gz: b7e1e85e67d07628c99411d29945c7cc102dce00278abc83c88999e8880ef11082a3a304ba792f6daca306c8ef65cdffbeaabfcabf523016ed3fb1d9c42a35cc
+  data.tar.gz: dba51b7a03411bac7f6cbe4b7b1e4049a13f9863e3a943ecc0fce58cae17471b29c6b14cd24d4aef6f4e7a41d44afe06bccd8d6fd6e2801d72c0550bb205a92d

data/README.md

@@ -17,6 +17,7 @@ that helps you generate good, Tramway-native code with all the framework feature
   * [Tramway Form](https://github.com/Purple-Magic/tramway#tramway-form)
   * [Tramway Navbar](https://github.com/Purple-Magic/tramway#tramway-navbar)
   * [Tramway Flash](https://github.com/Purple-Magic/tramway#tramway-flash)
+  * [Tramway Chat](https://github.com/Purple-Magic/tramway#tramway-chat)
   * [Tramway Table Component](https://github.com/Purple-Magic/tramway#tramway-table-component)
   * [Tailwind-styled forms](https://github.com/Purple-Magic/tramway#tailwind-styled-forms)
     * [Stimulus-based inputs](https://github.com/Purple-Magic/tramway#stimulus-based-inputs)
@@ -856,6 +857,36 @@ custom HTML options directly (e.g., `class:`, `data:`) and they will be merged i
 Use the `type` argument is compatible to [Lantern Color Palette](https://github.com/TrinityMonsters/tramway/blob/main/README.md#lantern-color-palette) or provide a `color:` keyword to set
 the Tailwind color family explicitly.
 
+### Tramway Chat
+
+`tramway_chat` renders the chat experience bundled with Tramway. Provide a chat ID, a list of message hashes, and the URL
+that receives new messages. Each message must include an `:id` and a `:type` (either `:sent` or `:received`). Additional
+message fields like `text`, `data`, or `sent_at` are forwarded to `tramway/chats/message_component`.
+
+```haml
+-# Haml example
+- messages = [
+-  { id: 1, type: :received, text: 'Hello 👋' },
+-  { id: 2, type: :sent, text: 'Hi there!' }
+- ]
+= tramway_chat chat_id: 'support-chat',
+  messages: messages,
+  message_form: @message_form,
+  send_message_path: chat_messages_path
+```
+
+```erb
+<%# ERB example %>
+<% messages = [{ id: 1, type: :received, text: 'Hello 👋' }] %>
+<%= tramway_chat chat_id: 'support-chat',
+  messages: messages,
+  message_form: @message_form,
+  send_message_path: chat_messages_path %>
+```
+
+If you do not want to render the message form, pass `message_form: nil`. When the form is present, `send_message_path` is
+required and the helper will generate the correct POST form.
+
 ### Tramway Table Component
 
 Tramway provides a responsive, tailwind-styled table with light and dark themes. Use the `tramway_table`, `tramway_row`, and
@@ -877,7 +908,7 @@ implementations.
 <% end %>
 ```
 
-`tramway_table` accepts the same optional `options` hash as `Tailwinds::TableComponent`. The hash is forwarded as HTML
+`tramway_table` accepts the same optional `options` hash as `Tramway::TableComponent`. The hash is forwarded as HTML
 attributes, so you can pass things like `id`, `data` attributes, or additional classes. If you do not supply your own width
 utility (e.g. a class that starts with `w-`), the component automatically appends `w-full` to keep the table responsive. This
 allows you to extend the default styling without losing the sensible defaults provided by the component.
@@ -901,12 +932,12 @@ Use the optional `href:` argument on `tramway_row` to turn an entire row into a
 ```
 
 When you render a header you can either pass the `headers:` array, as in the examples above, or render custom header content in
-the block. `Tailwinds::Table::HeaderComponent` uses the length of the `headers` array to build the grid if the array is present.
+the block. `tramway_header` uses the length of the `headers` array to build the grid if the array is present.
 If you omit the array and provide custom content, pass the `columns:` argument so the component knows how many grid columns to
 generate.
 
 ```erb
-<%= component 'tailwinds/table/header', columns: 4 do %>
+<%= tramway_header columns: 4 do %>
   <%= tramway_cell do %>
     Custom header cell
   <% end %>
@@ -1067,7 +1098,7 @@ Available form helpers:
 
 *app/views/sessions/new.html.erb*
 ```erb
-<%= form_with url: login_path, scope: :session, local: true, builder: Tailwinds::Form::Builder do |form| %>
+<%= form_with url: login_path, scope: :session, local: true, builder: Tramway::Form::Builder do |form| %>
   <%= form.email_field :email %>
   <%= form.password_field :password %>
   <%= form.submit 'Log in' %>

data/app/components/{tailwinds → tramway}/back_button_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   # Backbutton component
   class BackButtonComponent < BaseComponent
     def back_button_classes

data/app/components/{tailwinds → tramway}/badge_component.rb

@@ -1,13 +1,15 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   # Default Tramway badge
   #
-  class BadgeComponent < Tailwinds::BaseComponent
+  class BadgeComponent < Tramway::BaseComponent
     option :text
     option :type, optional: true
     option :color, optional: true
 
+    include Tramway::ColorsMethods
+
     def classes
       theme_classes(
         classic: [

data/app/components/{tailwinds → tramway}/button_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   # Default Tramway button
   #
   class ButtonComponent < BaseComponent
@@ -14,6 +14,8 @@ module Tailwinds
     option :options, optional: true, default: -> { {} }
     option :form_options, optional: true, default: -> { {} }
 
+    include Tramway::ColorsMethods
+
     def before_render
       return if tag.present?
 

data/app/components/tramway/chat_component.html.haml

@@ -0,0 +1,28 @@
+= helpers.turbo_stream_from chat_id, 'messages'
+
+.flex-1.min-h-0.flex.flex-col
+  #chat.mx-auto.flex.flex-1.flex-col.w-full.rounded-2xl.border.shadow-sm.ring-gray-700.md:p-4.border-gray-100.min-h-0.overflow-hidden{ data: { controller: 'chat' } }
+    .flex-1.min-h-0.overflow-y-auto.p-2.md:p-6.space-y-2.md:space-y-4.md:rounded-xl.rounded-t-xl#messages{ data: { chat_target: 'messages' }, class: 'text-gray-100 bg-gray-800/60' }
+      - messages.each do |message|
+        = component "tramway/chats/message", **message
+      - if disabled?
+        = inline_svg 'icons/dots.svg', class: 'w-8 h-8 text-gray-500 mx-auto my-4'
+    
+    - if message_form.present?
+      .shrink-0.border-gray-200.md:pt-2.border-gray-700
+        = form_for message_form, url: send_message_path, method: :post, html: { class: 'flex items-center md:gap-1' } do |f|
+          - waiting_placeholder = t('chat.placeholders.waiting')
+          - typing_placeholder = t('chat.placeholders.type')
+          = f.text_field :text,
+            class: 'flex-1 md:rounded-full rounded-bl-2xl md:border border-gray-300 px-4 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed disabled:bg-gray-100 border-gray-600 bg-gray-800 text-white focus:border-blue-400 focus:ring-blue-500/30',
+            placeholder: send_messages_enabled ? typing_placeholder : waiting_placeholder,
+            data: { chat_target: 'input' },
+            disabled: !send_messages_enabled
+
+          = f.hidden_field :chat_id, value: chat_id
+
+          - options.each do |(key, value)|
+            = f.hidden_field key, value: value
+
+          = f.submit '🡩',
+            class: 'md:rounded-full bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 bg-blue-500 hover:bg-blue-400 cursor-pointer'

data/app/components/tramway/chat_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Tramway
+  # Renders the chat container with messages and optional input form.
+  class ChatComponent < Tramway::BaseComponent
+    option :chat_id
+    option :messages
+    option :message_form, optional: true, default: -> {}
+    option :options, optional: true, default: -> { {} }
+    option :send_message_path
+    option :send_messages_enabled, optional: true, default: -> { true }
+
+    def disabled?
+      options[:disabled]
+    end
+  end
+end

data/app/components/tramway/chats/message_component.html.haml

@@ -0,0 +1,26 @@
+- if on_the_left?
+  = component 'tramway/chats/messages/container',
+    position: :left,
+    text:,
+    sent_at:,
+    show_sent_at: show_sent_at? do
+    - if data_view == :table
+      = component 'tramway/chats/messages/table', data:
+
+- if on_the_right?
+  = component 'tramway/chats/messages/container',
+    position: :right,
+    text:,
+    sent_at:,
+    show_sent_at: show_sent_at? do
+
+    - if pending?
+      .pb-1
+        = inline_svg 'icons/spinner.svg', class: 'w-4 h-4 text-white animate-spin'
+
+    - if failed?
+      .pb-1
+        = inline_svg 'icons/cross.svg', class: 'w-6 h-6 text-red-200'
+
+    - if data_view == :table
+      = component 'tramway/chats/messages/table', data:

data/app/components/tramway/chats/message_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Chats
+    # Renders a single chat message with alignment and state styling.
+    class MessageComponent < Tramway::BaseComponent
+      option :type
+      option :text, optional: true, default: -> { '' }
+      option :data, optional: true, default: -> { {} }
+      option :sent_at, optional: true, default: -> {}
+      option :options, optional: true, default: -> { {} }
+
+      def data_view
+        if data.nil?
+          nil
+        elsif array_2d?(data)
+          :table
+        end
+      end
+
+      def text_color
+        if pending?
+          'text-gray-400 dark:text-gray-600'
+        else
+          'text-black dark:text-white'
+        end
+      end
+
+      private
+
+      def array_2d?(array)
+        array.is_a?(Array) && array.all? do |inner|
+          inner.is_a?(Array) && inner.none? { |e| e.is_a?(Array) }
+        end
+      end
+
+      def on_the_left?
+        type.to_sym == :received
+      end
+
+      def on_the_right?
+        type.to_sym == :sent
+      end
+
+      def show_sent_at?
+        sent_at.present?
+      end
+
+      def pending?
+        options[:pending]
+      end
+
+      def failed?
+        options[:failed]
+      end
+    end
+  end
+end

data/app/components/tramway/chats/messages/container_component.html.haml

@@ -0,0 +1,9 @@
+.flex.flex-col.gap-1{ class: position_classes }
+  - if text.present?
+    .max-w-lg.rounded-2xl.px-4.py-3.text-sm.shadow-sm.ring-1.text-white.ring-gray-700{ class: color_classes }
+      = component 'tramway/native_text', text:, klass: 'text-white'
+
+      - if sent_at.present?
+        .mt-2.text-right.text-xs.text-gray-400
+          = sent_at
+  = content

data/app/components/tramway/chats/messages/container_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Chats
+    module Messages
+      # Renders a message container with alignment and color styles.
+      class ContainerComponent < Tramway::BaseComponent
+        option :position
+        option :text
+        option :sent_at
+
+        def position_classes
+          case position.to_sym
+          when :left
+            %w[items-start]
+          when :right
+            %w[items-end]
+          end.join(' ')
+        end
+
+        def color_classes
+          case position.to_sym
+          when :left
+            %w[bg-gray-800 rounded-tl-md]
+          when :right
+            %w[bg-blue-600 rounded-tr-md]
+          end.join(' ')
+        end
+      end
+    end
+  end
+end

data/app/components/tramway/chats/messages/table_component.html.haml

@@ -0,0 +1,28 @@
+.mt-3.overflow-hidden.rounded-xl.border.border-gray-200.bg-white.shadow-sm.dark:border-gray-700.dark:bg-gray-900
+  = tramway_table do
+    - data.each_with_index do |row, index|
+      - if index.zero?
+        = tramway_header headers: row
+      - else
+        = tramway_row do
+          - cell_width = row.count > 1 ? "w-1/#{row.count + 1}" : 'w-full'
+
+          - row.each do |cell|
+            = tramway_cell do
+              - if cell.to_s.start_with?('http')
+                .underline
+                  = link_to cell, cell, target: '_blank', class: "#{cell_width} break-all"
+              - elsif cell.is_a?(Hash)
+                - if cell['status'] == 'pending'
+                  = tramway_cell do
+                    = helpers.tramway_button text: t('admin.chats.messages.table.add'), path: cell.dig('button', 'path'), color: :green, method: :post
+                - elsif cell['status'] == 'added'
+                  = tramway_cell do
+                    = helpers.tramway_button text: t('admin.chats.messages.table.remove'), path: cell.dig('button', 'path'), color: :red, method: :delete
+                - else
+                  = cell.inspect
+              - elsif cell.is_a?(String) && cell.size > 50
+                .text-sm
+                  = cell
+              - else
+                = cell

data/app/components/tramway/chats/messages/table_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Chats
+    module Messages
+      # Renders a table view for message data payloads.
+      class TableComponent < BaseComponent
+        option :data
+      end
+    end
+  end
+end

data/app/components/tramway/chats.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Tramway
+  # Namespace for chat-related components.
+  module Chats
+  end
+end

data/app/components/{tailwinds/base_component.rb → tramway/colors_methods.rb}

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
-module Tailwinds
-  # Shared base component for Tailwinds components
-  class BaseComponent < Tramway::BaseComponent
+module Tramway
+  # Color logic implementation
+  module ColorsMethods
     TYPE_COLOR_MAP = {
       default: :gray,
       life: :gray,

data/app/components/{tailwinds → tramway}/containers/main_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Containers
     # Main container for tailwind-styled layout
     class MainComponent < Tramway::BaseComponent

data/app/components/{tailwinds → tramway}/containers/narrow_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Containers
     # Default page container in Tramway
     class NarrowComponent < Tramway::BaseComponent

data/app/components/{tailwinds → tramway}/flash_component.rb

@@ -1,13 +1,15 @@
 # frozen_string_literal: true
 
-module Tailwinds
-  # Description: A Tailwinds flash message component for displaying notifications.
-  class FlashComponent < Tailwinds::BaseComponent
+module Tramway
+  # Description: A Tramway flash message component for displaying notifications.
+  class FlashComponent < Tramway::BaseComponent
     option :text
     option :type, optional: true, default: -> {}
     option :color, optional: true, default: -> {}
     option :options, optional: true, default: -> { {} }
 
+    include Tramway::ColorsMethods
+
     def container_classes
       theme_classes(
         classic: 'fixed top-4 right-4 z-50 space-y-2'

data/app/components/{tailwinds → tramway}/form/builder.rb

@@ -2,12 +2,13 @@
 
 require 'tramway/utils/field'
 
-module Tailwinds
+module Tramway
   module Form
     # Provides Tailwind-styled forms
     # rubocop:disable Metrics/ClassLength
     class Builder < Tramway::Views::FormBuilder
       include Tramway::Utils::Field
+      include Tramway::ColorsMethods
 
       def initialize(object_name, object, template, options)
         super
@@ -18,7 +19,7 @@ module Tailwinds
       def common_field(component_name, input_method, attribute, **options, &)
         sanitized_options = sanitize_options(options)
 
-        component_class = "Tailwinds::Form::#{component_name.to_s.camelize}Component".constantize
+        component_class = "Tramway::Form::#{component_name.to_s.camelize}Component".constantize
 
         render(component_class.new(
                  input: input(input_method),
@@ -47,7 +48,7 @@ module Tailwinds
       def password_field(attribute, **options, &)
         sanitized_options = sanitize_options(options)
 
-        render(Tailwinds::Form::TextFieldComponent.new(
+        render(Tramway::Form::TextFieldComponent.new(
                  input: input(:password_field),
                  **default_options(attribute, sanitized_options)
                ), &)
@@ -65,7 +66,7 @@ module Tailwinds
         sanitized_options = sanitize_options(options)
         input = super(attribute, **sanitized_options.merge(class: :hidden))
 
-        render(Tailwinds::Form::FileFieldComponent.new(input:, **default_options(attribute, sanitized_options)), &)
+        render(Tramway::Form::FileFieldComponent.new(input:, **default_options(attribute, sanitized_options)), &)
       end
 
       def check_box(attribute, **, &)
@@ -75,7 +76,7 @@ module Tailwinds
       def select(attribute, collection, **options, &)
         sanitized_options = sanitize_options(options)
 
-        render(Tailwinds::Form::SelectComponent.new(
+        render(Tramway::Form::SelectComponent.new(
                  input: input(:select),
                  value: sanitized_options[:selected] || object.public_send(attribute),
                  collection: explicitly_add_blank_option(collection, sanitized_options),
@@ -86,7 +87,7 @@ module Tailwinds
       def multiselect(attribute, collection, **options, &)
         sanitized_options = sanitize_options(options)
 
-        render(Tailwinds::Form::MultiselectComponent.new(
+        render(Tramway::Form::MultiselectComponent.new(
                  input: input(:text_field),
                  value: sanitized_options[:value] || sanitized_options[:selected] || object.public_send(attribute),
                  collection:,
@@ -98,7 +99,7 @@ module Tailwinds
         sanitized_options = sanitize_options(options)
 
         render(
-          Tailwinds::ButtonComponent.new(
+          Tramway::ButtonComponent.new(
             text: action,
             size: form_size,
             type: :will,

data/app/components/{tailwinds → tramway}/form/checkbox_component.html.haml

@@ -3,5 +3,5 @@
   = @input.call @attribute, **@options.merge(class: classes)
   - if @label
     %div
-      = component('tailwinds/form/label', for: @for) do
+      = component('tramway/form/label', for: @for) do
         = @label

data/app/components/{tailwinds → tramway}/form/checkbox_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     # Tailwind-styled checkbox field
     class CheckboxComponent < TailwindComponent

data/app/components/{tailwinds → tramway}/form/date_field_component.html.haml

@@ -1,6 +1,6 @@
 .mb-4
   - if @label
-    = component('tailwinds/form/label', for: @for) do
+    = component('tramway/form/label', for: @for) do
       = @label
 - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
 = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/{tailwinds → tramway}/form/date_field_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     # Tailwind-styled date field
     class DateFieldComponent < TailwindComponent

data/app/components/{tailwinds → tramway}/form/datetime_field_component.html.haml

@@ -1,6 +1,6 @@
 .mb-4
   - if @label
-    = component('tailwinds/form/label', for: @for) do
+    = component('tramway/form/label', for: @for) do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/{tailwinds → tramway}/form/datetime_field_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     # Tailwind-styled datetime field
     class DatetimeFieldComponent < TailwindComponent

data/app/components/{tailwinds → tramway}/form/file_field_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     # Tailwind-styled file_field input
     class FileFieldComponent < TailwindComponent

data/app/components/{tailwinds → tramway}/form/label_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     # Form label for all tailwind-styled forms
     class LabelComponent < Tramway::BaseComponent

data/app/components/{tailwinds → tramway}/form/multiselect/caret_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     module Multiselect
       # Caret icon component

data/app/components/{tailwinds → tramway}/form/multiselect/dropdown_container_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     module Multiselect
       # Container for dropdown component

data/app/components/{tailwinds → tramway}/form/multiselect/item_container_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     module Multiselect
       # Container for item in dropdown component

data/app/components/{tailwinds → tramway}/form/multiselect/select_as_input_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     module Multiselect
       # Renders input as select

data/app/components/{tailwinds → tramway}/form/multiselect/selected_item_template_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     module Multiselect
       # Tailwind-styled multi-select field

data/app/components/{tailwinds → tramway}/form/multiselect_component.html.haml

@@ -1,6 +1,6 @@
 .mb-4.relative
   - if @label
-    = component('tailwinds/form/label', for: @for) do
+    = component('tramway/form/label', for: @for) do
       = @label
   %div{ role: :combobox, data: multiselect_hash, id: "#{@for}_multiselect" }
     - classes = "#{size_class(:multiselect_input)} #{select_base_classes}"
@@ -8,6 +8,6 @@
       .flex.flex-row.flex-nowrap.overflow-x-auto.space-x-1{ data: { "multiselect-target" => "showSelectedArea" } }
       .flex.flex-col.justify-center
         .caret-down{ data: { "multiselect-target" => "caretDown" } }
-          = component 'tailwinds/form/multiselect/caret', size: size, direction: :down
+          = component 'tramway/form/multiselect/caret', size: size, direction: :down
         .caret-up.hidden{ data: { "multiselect-target" => "caretUp" } }
-          = component 'tailwinds/form/multiselect/caret', size: size, direction: :up
+          = component 'tramway/form/multiselect/caret', size: size, direction: :up

data/app/components/{tailwinds → tramway}/form/multiselect_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Tailwinds
+module Tramway
   module Form
     # Tailwind-styled multi-select field
     class MultiselectComponent < TailwindComponent
@@ -73,7 +73,7 @@ module Tailwinds
 
       def select_as_input
         component(
-          'tailwinds/form/multiselect/select_as_input',
+          'tramway/form/multiselect/select_as_input',
           options:,
           attribute:,
           input:,
@@ -96,15 +96,15 @@ module Tailwinds
       end
 
       def selected_item_template
-        component('tailwinds/form/multiselect/selected_item_template', size:)
+        component('tramway/form/multiselect/selected_item_template', size:)
       end
 
       def dropdown_container
-        component('tailwinds/form/multiselect/dropdown_container', size:)
+        component('tramway/form/multiselect/dropdown_container', size:)
       end
 
       def item_container
-        component('tailwinds/form/multiselect/item_container', size:)
+        component('tramway/form/multiselect/item_container', size:)
       end
     end
   end