tramway 3.1.2.8 → 4.0

data/app/assets/tailwind/application.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+@layer utilities {
+  .tramway-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(82, 82, 91, 0.9) rgba(9, 9, 11, 0.92);
+  }
+
+  .tramway-scrollbar::-webkit-scrollbar {
+    width: 0.5rem;
+  }
+
+  .tramway-scrollbar::-webkit-scrollbar-track {
+    background: rgba(9, 9, 11, 0.92);
+  }
+
+  .tramway-scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background: rgba(82, 82, 91, 0.9);
+  }
+
+  .tramway-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(113, 113, 122, 0.95);
+  }
+
+  .tramway-scrollbar::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}

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

@@ -1,7 +1,7 @@
 = helpers.turbo_stream_from chat_id, 'messages'
 
 #chat.flex.flex-1.h-full.w-full.min-h-0.min-w-0.flex-col
-  #messages.flex.flex-col.flex-1.min-h-0.overflow-y-auto.overflow-x-hidden.rounded-xl.rounded-b-none.border.border-zinc-800.p-2.text-zinc-50.space-y-2.md:p-6.md:space-y-4{ data: { scroll_to_bottom_on_update: scroll_to_bottom_on_update }, class: 'bg-zinc-950/80' }
+  #messages.flex.flex-col.flex-1.min-h-0.overflow-y-auto.overflow-x-hidden.rounded-xl.rounded-b-none.border.border-zinc-800.p-2.text-zinc-50.space-y-2.md:p-6.md:space-y-4{ data: { scroll_to_bottom_on_update: scroll_to_bottom_on_update }, class: 'bg-zinc-950/80 tramway-scrollbar' }
     - messages.each do |message|
       = component "tramway/chats/message", **message
     - if disabled?

data/app/components/tramway/containers/main_component.rb

@@ -7,10 +7,8 @@ module Tramway
       option :options, optional: true, default: proc { {} }
 
       def container_classes
-        options_classes = options[:class] || ''
-
         theme_classes(
-          classic: "bg-zinc-950 text-zinc-50 shadow-inner#{options_classes}"
+          classic: ['bg-zinc-950 text-zinc-50 shadow-inner', options[:class]].compact.join(' ')
         )
       end
     end

data/app/components/tramway/containers/narrow_component.rb

@@ -8,11 +8,12 @@ module Tramway
       option :options, optional: true, default: proc { {} }
 
       def container_classes
-        options_classes = options[:class] || ''
-
         theme_classes(
-          classic: 'container p-4 flex align-center justify-center w-full mx-auto ' \
-                   'shadow-inner rounded-xl bg-zinc-950 text-zinc-50' + options_classes
+          classic: [
+            'container p-4 flex align-center justify-center w-full mx-auto',
+            'shadow-inner rounded-xl bg-zinc-950 text-zinc-50',
+            options[:class]
+          ].compact.join(' ')
         )
       end
     end

data/app/components/tramway/form/builder.rb

@@ -5,7 +5,7 @@ require 'tramway/utils/field'
 module Tramway
   module Form
     # Provides Tailwind-styled forms
-    # rubocop:disable Metrics/ClassLength
+    # rubocop:disable-next Metrics/ClassLength
     class Builder < Tramway::Views::FormBuilder
       include Tramway::Utils::Field
       include Tramway::ColorsMethods
@@ -250,6 +250,5 @@ module Tramway
         end
       end
     end
-    # rubocop:enable Metrics/ClassLength
   end
 end

data/app/components/tramway/grid/card_component.html.haml

@@ -0,0 +1,2 @@
+%article{ class: card_classes, role: :gridcell, aria: { label: 'Dashboard card', rowspan: normalized_size.first, colspan: normalized_size.last }, style: card_style, **options.except(:class) }
+  = content

data/app/components/tramway/grid/card_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Grid
+    # Dashboard-style card for use inside a grid
+    class CardComponent < Tramway::BaseComponent
+      option :size, optional: true, default: -> { [1, 1] }
+      option :options, optional: true, default: -> { {} }
+
+      def card_classes
+        theme_classes(
+          classic: [
+            'h-full w-full overflow-hidden rounded-2xl border border-zinc-800',
+            'bg-zinc-900/80 p-3 shadow-sm backdrop-blur',
+            options[:class]
+          ].compact.join(' ')
+        )
+      end
+
+      def card_style
+        "grid-column: span #{normalized_size.last}; grid-row: span #{normalized_size.first};"
+      end
+
+      private
+
+      def normalized_size
+        rows, columns = Array(size)
+
+        unless rows.to_i.positive? && columns.to_i.positive?
+          raise ArgumentError, 'Grid card size must be a two-item array of positive integers.'
+        end
+
+        [rows.to_i, columns.to_i]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+%div{ class: grid_classes, role: :grid, aria: { label: 'Dashboard grid', rowcount: rows, colcount: columns }, style: grid_shell_style, **options.except(:class) }
+  .pointer-events-none.absolute.inset-0.rounded-xl{ aria: { hidden: 'true' } }
+    - if outline
+      - horizontal_separators.each do |row_index|
+        = content_tag :div, nil, class: grid_separator_classes(:horizontal), style: grid_separator_style(:horizontal, row_index)
+
+      - vertical_separators.each do |column_index|
+        = content_tag :div, nil, class: grid_separator_classes(:vertical), style: grid_separator_style(:vertical, column_index)
+
+    .grid{ style: grid_net_style }
+      - grid_cells.each do |row|
+        - row.each do |row_index, column_index|
+          = content_tag :div, nil,
+                        class: grid_cell_classes(row_index, column_index),
+                        style: grid_cell_style
+
+  .relative.z-10.grid.gap-1{ role: :presentation, style: grid_net_style }
+    = content

data/app/components/tramway/grid_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Tramway
+  # Dashboard-style grid container
+  class GridComponent < Tramway::BaseComponent
+    CELL_SIZE = '20em'
+    CELL_GAP = '0.25rem'
+
+    option :rows
+    option :columns
+    option :outline, optional: true, default: -> { false }
+    option :options, optional: true, default: -> { {} }
+
+    def grid_classes
+      theme_classes(
+        classic: [
+          'relative overflow-auto rounded-xl bg-zinc-950 shadow-inner',
+          options[:class]
+        ].compact.join(' ')
+      )
+    end
+
+    def grid_shell_style
+      return if rows.to_i <= 0 || columns.to_i <= 0
+
+      "min-width: calc(#{columns.to_i} * #{CELL_SIZE} + #{[columns.to_i - 1, 0].max} * #{CELL_GAP}); " \
+        "min-height: calc(#{rows.to_i} * #{CELL_SIZE} + #{[rows.to_i - 1, 0].max} * #{CELL_GAP});"
+    end
+
+    def grid_net_style
+      return if rows.to_i <= 0 || columns.to_i <= 0
+
+      "grid-template-columns: repeat(#{columns.to_i}, #{CELL_SIZE}); " \
+        "grid-template-rows: repeat(#{rows.to_i}, #{CELL_SIZE});"
+    end
+
+    def grid_cells
+      Array.new(rows.to_i) do |row_index|
+        Array.new(columns.to_i) do |column_index|
+          [row_index, column_index]
+        end
+      end
+    end
+
+    def grid_cell_classes(_row_index, _column_index)
+      'box-border'
+    end
+
+    def grid_cell_style
+      "width: #{CELL_SIZE}; height: #{CELL_SIZE};"
+    end
+
+    def grid_separator_classes(axis)
+      base = axis == :horizontal ? 'absolute left-0 right-0 h-px' : 'absolute top-0 bottom-0 w-px'
+      "#{base} bg-zinc-800"
+    end
+
+    def grid_separator_style(axis, index)
+      position = "calc((#{CELL_SIZE} + #{CELL_GAP}) * #{index + 1} - #{CELL_GAP} / 2)"
+
+      if axis == :horizontal
+        "top: #{position};"
+      else
+        "left: #{position};"
+      end
+    end
+
+    def horizontal_separators
+      Array.new([rows.to_i - 1, 0].max) { |index| index }
+    end
+
+    def vertical_separators
+      Array.new([columns.to_i - 1, 0].max) { |index| index }
+    end
+  end
+end

data/app/components/tramway/native_text_component.rb

@@ -99,7 +99,7 @@ module Tramway
     end
 
     # rubocop:disable Metrics/MethodLength
-    # rubocop:disable Metrics/AbcSize
+    # rubocop:disable-next Metrics/AbcSize
     def linkified(content)
       fragments = []
       current_index = 0
@@ -130,7 +130,6 @@ module Tramway
 
       helpers.safe_join(fragments)
     end
-    # rubocop:enable Metrics/AbcSize
     # rubocop:enable Metrics/MethodLength
 
     def strip_trailing_punctuation(url)

data/app/components/tramway/nav/item_component.rb

@@ -6,8 +6,10 @@ module Tramway
     #
     class ItemComponent < TailwindComponent
       def style
-        @style ||= 'inline-flex items-center rounded-md px-4 py-3 text-base font-medium text-zinc-100 ' \
-                   'transition-colors hover:bg-zinc-800 hover:text-zinc-50 sm:px-3 sm:py-2 sm:text-sm'
+        @style ||= [
+          'tramway-navbar-item inline-flex items-center rounded-md px-4 py-3 text-base font-medium text-zinc-100',
+          'transition-colors hover:bg-zinc-800 hover:text-zinc-50 sm:px-3 sm:py-2 sm:text-sm'
+        ].join(' ')
       end
     end
   end

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

@@ -1,129 +1,123 @@
-%nav.bg-zinc-950.text-zinc-50{ class: navbar_classes }
-  .flex.md:justify-between.w-full.items-center.relative.min-h-8
-    .block.sm:hidden
-      %button#mobile-menu-button{ class: mobile_button_classes }
-        ☰
-
-    - if @title[:text].present? || @left_items.present?
-      .flex.items-center.absolute.transform{ class: 'left-1/2 -translate-x-1/2 md:left-auto md:translate-x-0' }
-        - if @title[:text].present?
+- if horizontal?
+  %nav#desktop-navbar.bg-zinc-950.text-zinc-50{ class: navbar_classes, data: { controller: 'tramway-navbar', direction: direction, expanded: 'true' } }
+    .flex.md:justify-between.w-full.items-center.relative.min-h-8
+      .block.sm:hidden
+        %button#mobile-menu-button{ class: mobile_button_classes }
+          ☰
+
+      - if @left_items.present?
+        %ul.hidden.md:flex.items-center.space-x-4
+          - @left_items.each do |item|
+            = item
+
+      - if @title[:text].present?
+        = content_tag :div, class: 'absolute left-1/2 transform -translate-x-1/2 md:left-1/2 md:-translate-x-1/2' do
           = link_to @title[:link] do
             .truncate{ class: title_classes }
               = @title[:text]
+
+      - if @right_items.present?
+        %ul.hidden.md:flex.items-center.space-x-4
+          - @right_items.each do |item|
+            = item
+
+  #mobile-menu{ class: mobile_menu_classes }
+    .flex.flex-1.flex-col
+      .flex-1
         - if @left_items.present?
-          %ul.flex-row.items-center.space-x-4.ml-4.hidden.md:flex
+          %ul.flex.flex-col.space-y-1.pt-4
             - @left_items.each do |item|
               = item
 
-  - if @right_items.present?
-    %ul.items-center.space-x-4.hidden.md:flex
-      - @right_items.each do |item|
-        = item
+        - if @right_items.present?
+          %ul.flex.flex-col.space-y-1.pt-4
+            - @right_items.each do |item|
+              = item
 
-#mobile-menu{ class: mobile_menu_classes }
-  .flex.flex-1.flex-col
-    .flex-1
-      - if @left_items.present?
-        %ul.flex.flex-col.space-y-1.pt-4
-          - @left_items.each do |item|
-            = item
+      .pt-6
+    %button.w-full.inline-flex.items-center.justify-center.rounded-md.border.border-zinc-700.bg-zinc-900.px-4.py-3.text-sm.font-semibold.text-zinc-50.transition-colors.hover:bg-zinc-800.hover:text-zinc-50.focus:outline-none.focus-visible:ring-2.focus-visible:ring-zinc-400.focus-visible:ring-offset-2.focus-visible:ring-offset-zinc-950#mobile-menu-close-button{ role: :button }
+      Close
+- else
+  %nav#desktop-navbar{ class: navbar_classes, data: { controller: 'tramway-navbar', direction: direction, expanded: 'true' } }
+    .relative{ class: mobile_horizontal_container_classes }
+      .block.sm:hidden
+        %button#mobile-menu-button{ class: mobile_button_classes }
+          ☰
+
+      - if @title[:text].present? || @left_items.present?
+        .flex.items-center.absolute.transform{ class: 'left-1/2 -translate-x-1/2' }
+          - if @title[:text].present?
+            = link_to @title[:link] do
+              .truncate{ class: title_classes }
+                = @title[:text]
+          - if @left_items.present?
+            %ul.flex-row.items-center.space-x-4.ml-4.hidden.md:flex
+              - @left_items.each do |item|
+                = item
 
       - if @right_items.present?
-        %ul.flex.flex-col.space-y-1.pt-4
+        %ul.items-center.space-x-4.hidden.md:flex
           - @right_items.each do |item|
             = item
 
-    .pt-6
-  %button.w-full.inline-flex.items-center.justify-center.rounded-md.border.border-zinc-700.bg-zinc-900.px-4.py-3.text-sm.font-semibold.text-zinc-50.transition-colors.hover:bg-zinc-800.hover:text-zinc-50.focus:outline-none.focus-visible:ring-2.focus-visible:ring-zinc-400.focus-visible:ring-offset-2.focus-visible:ring-offset-zinc-950#mobile-menu-close-button{ role: :button }
-    Close
-
-:javascript
-  (() => {
-    const root = document.documentElement;
-    const MENU_HIDDEN_CLASS = 'hidden';
-    const MENU_OFFSCREEN_CLASS = '-translate-x-full';
-    const ROOT_LOCK_CLASS = 'overflow-hidden';
-
-    const closeMenu = (menu, { hideImmediately = false } = {}) => {
-      if (!menu) {
-        root.classList.remove(ROOT_LOCK_CLASS);
-        return;
+    .relative{ class: desktop_vertical_container_classes }
+      - if @title[:text].present? || @left_items.present? || @right_items.present?
+        #desktop-navbar-header{ class: desktop_vertical_header_classes }
+          - if @title[:text].present?
+            = link_to @title[:link] do
+              .truncate{ class: title_classes }
+                = @title[:text]
+
+      - if @left_items.present? || @right_items.present?
+        #desktop-navbar-content{ class: desktop_vertical_content_classes }
+          - if @left_items.present?
+            %ul{ class: desktop_vertical_item_list_classes }
+              - @left_items.each do |item|
+                = item
+
+          - if @right_items.present?
+            %ul{ class: desktop_vertical_item_list_classes }
+              - @right_items.each do |item|
+                = item
+
+        .flex.w-full{ id: 'desktop-navbar-toggle-wrapper', class: desktop_vertical_toggle_wrapper_classes }
+          %button#desktop-navbar-toggle-button{ class: desktop_vertical_toggle_button_classes, type: :button, aria: { controls: 'desktop-navbar', expanded: 'true', label: desktop_vertical_toggle_button_label(expanded: true) } }
+            %i#desktop-navbar-toggle-icon{ class: desktop_vertical_toggle_icon_classes(expanded: true), aria: { hidden: true } }
+
+    #mobile-menu{ class: mobile_menu_classes }
+      .flex.flex-1.flex-col
+        .flex-1
+          - if @left_items.present?
+            %ul.flex.flex-col.space-y-1.pt-4
+              - @left_items.each do |item|
+                = item
+
+          - if @right_items.present?
+            %ul.flex.flex-col.space-y-1.pt-4
+              - @right_items.each do |item|
+                = item
+
+        .pt-6
+      %button.w-full.inline-flex.items-center.justify-center.rounded-md.border.border-zinc-700.bg-zinc-900.px-4.py-3.text-sm.font-semibold.text-zinc-50.transition-colors.hover:bg-zinc-800.hover:text-zinc-50.focus:outline-none.focus-visible:ring-2.focus-visible:ring-zinc-400.focus-visible:ring-offset-2.focus-visible:ring-offset-zinc-950#mobile-menu-close-button{ role: :button }
+        Close
+
+  - if vertical?
+    :css
+      .tramway-navbar-desktop-vertical .tramway-navbar-item {
+        width: 100%;
       }
 
-      menu.classList.add(MENU_OFFSCREEN_CLASS);
-      root.classList.remove(ROOT_LOCK_CLASS);
-
-      if (hideImmediately) {
-        menu.classList.add(MENU_HIDDEN_CLASS);
-        return;
+      .tramway-navbar-desktop-vertical .tramway-navbar-item > a,
+      .tramway-navbar-desktop-vertical .tramway-navbar-item > form {
+        width: 100%;
       }
 
-      menu.addEventListener(
-        'transitionend',
-        () => menu.classList.add(MENU_HIDDEN_CLASS),
-        { once: true }
-      );
-    };
-
-    const openMenu = (menu) => {
-      if (!menu) return;
-
-      menu.classList.remove(MENU_HIDDEN_CLASS);
-      requestAnimationFrame(() => {
-        menu.classList.remove(MENU_OFFSCREEN_CLASS);
-        root.classList.add(ROOT_LOCK_CLASS);
-      });
-    };
-
-    const bindNavbar = () => {
-      const button = document.getElementById('mobile-menu-button');
-      const closeButton = document.getElementById('mobile-menu-close-button');
-      const menu = document.getElementById('mobile-menu');
-
-      if (!button || !closeButton || !menu || button.dataset.navbarBound === 'true') {
-        return;
+      .tramway-navbar-desktop-vertical .tramway-navbar-item > form {
+        display: block;
       }
 
-      button.dataset.navbarBound = 'true';
-
-      const toggleMenu = () => {
-        if (menu.classList.contains(MENU_HIDDEN_CLASS)) {
-          openMenu(menu);
-          return;
-        }
-
-        closeMenu(menu);
-      };
-
-      button.addEventListener('click', toggleMenu);
-      closeButton.addEventListener('click', () => closeMenu(menu));
-      menu.querySelectorAll('a').forEach((link) => {
-        link.addEventListener('click', () => closeMenu(menu, { hideImmediately: true }));
-      });
-    };
-
-    if (window.__tramwayNavbarGlobalBound !== true) {
-      window.__tramwayNavbarGlobalBound = true;
-
-      document.addEventListener('turbo:before-cache', () => {
-        closeMenu(document.getElementById('mobile-menu'), { hideImmediately: true });
-      });
-
-      document.addEventListener('turbo:load', () => {
-        const menu = document.getElementById('mobile-menu');
-        bindNavbar();
-
-        if (!menu || menu.classList.contains(MENU_HIDDEN_CLASS)) {
-          root.classList.remove(ROOT_LOCK_CLASS);
-        }
-      });
-
-      window.addEventListener('resize', () => {
-        if (window.innerWidth >= 640) {
-          closeMenu(document.getElementById('mobile-menu'), { hideImmediately: true });
-        }
-      });
-    }
-
-    bindNavbar();
-  })();
+      .tramway-navbar-desktop-vertical .tramway-navbar-item > a,
+      .tramway-navbar-desktop-vertical .tramway-navbar-item > form > button {
+        width: 100%;
+        justify-content: flex-start;
+      }

data/app/components/tramway/navbar_component.rb

@@ -3,10 +3,24 @@
 module Tramway
   # Navbar component
   class NavbarComponent < TailwindComponent
-    NAVBAR_CLASSES = %w[
+    NAVBAR_BASE_CLASSES = %w[
+      bg-zinc-950 text-zinc-50
+    ].freeze
+
+    HORIZONTAL_NAVBAR_CLASSES = %w[
       flex items-center justify-between border-zinc-800 px-4 py-3 shadow-sm backdrop-blur sm:px-6
     ].freeze
 
+    VERTICAL_NAVBAR_CLASSES = %w[
+      flex flex-col border-zinc-800 px-4 py-3 shadow-sm backdrop-blur sm:px-6
+    ].freeze
+
+    VERTICAL_DESKTOP_NAVBAR_CLASSES = %w[
+      md:fixed md:left-0 md:top-0 md:z-40 md:h-dvh md:w-72 md:flex-col md:border-r md:border-zinc-800
+      md:bg-zinc-950 md:px-4 md:py-3 md:shadow-sm md:backdrop-blur md:overflow-hidden md:transition-[width]
+      md:duration-300 md:ease-in-out-strong md:motion-reduce:duration-0
+    ].freeze
+
     MOBILE_BUTTON_CLASSES = %w[
       inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-zinc-800 hover:text-zinc-50
       focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2
@@ -22,10 +36,15 @@ module Tramway
       @title = { text: options[:title], link: options[:title_link] || '/' }
       @left_items = options[:left_items]
       @right_items = options[:right_items]
+      @direction = options[:direction].presence&.to_sym || :vertical
     end
 
     def navbar_classes
-      NAVBAR_CLASSES.join(' ')
+      classes = NAVBAR_BASE_CLASSES.dup
+      classes.concat(HORIZONTAL_NAVBAR_CLASSES) if horizontal?
+      classes.concat(VERTICAL_NAVBAR_CLASSES + VERTICAL_DESKTOP_NAVBAR_CLASSES) if vertical?
+
+      classes.join(' ')
     end
 
     def title_classes
@@ -39,5 +58,68 @@ module Tramway
     def mobile_menu_classes
       MOBILE_MENU_CLASSES.join(' ')
     end
+
+    def mobile_horizontal_container_classes
+      "#{HORIZONTAL_NAVBAR_CLASSES.join(' ')} md:hidden"
+    end
+
+    def horizontal?
+      @direction == :horizontal
+    end
+
+    def vertical?
+      @direction == :vertical
+    end
+
+    def direction
+      @direction.to_s
+    end
+
+    def desktop_vertical_container_classes
+      'hidden md:flex tramway-navbar-desktop-vertical h-full w-full flex-col overflow-hidden'
+    end
+
+    def desktop_vertical_header_classes
+      [
+        'tramway-navbar-desktop-vertical-header flex w-full items-center justify-between overflow-hidden',
+        'transition-opacity duration-300 ease-out-strong'
+      ].join(' ')
+    end
+
+    def desktop_vertical_content_classes
+      [
+        'tramway-navbar-desktop-vertical-content flex w-full flex-1 flex-col gap-3 overflow-y-auto overflow-hidden',
+        'transition-opacity duration-300 ease-out-strong'
+      ].join(' ')
+    end
+
+    def desktop_vertical_item_list_classes
+      'tramway-navbar-desktop-vertical-list mt-8 flex w-full flex-col gap-1'
+    end
+
+    def desktop_vertical_toggle_wrapper_classes(expanded: true)
+      base = 'mt-auto flex w-full'
+      expanded ? "#{base} justify-end" : "#{base} justify-center"
+    end
+
+    def desktop_vertical_toggle_button_classes
+      [
+        'inline-flex cursor-pointer items-center justify-center rounded-md px-4 py-3 transition-colors',
+        'hover:bg-zinc-800 hover:text-zinc-50',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2',
+        'focus-visible:ring-offset-zinc-950 w-fit'
+      ].join(' ')
+    end
+
+    def desktop_vertical_toggle_button_label(expanded:)
+      expanded ? 'Collapse sidebar' : 'Expand sidebar'
+    end
+
+    def desktop_vertical_toggle_icon_classes(expanded:)
+      classes = %w[fa fa-chevron-left transition-transform duration-200 ease-in-out-strong motion-reduce:duration-0]
+      classes << 'rotate-180' unless expanded
+
+      classes.join(' ')
+    end
   end
 end

data/app/components/tramway/table/cell_component.rb

@@ -4,10 +4,18 @@ module Tramway
   module Table
     # Component for rendering a cell in a table
     class CellComponent < Tramway::BaseComponent
+      SIZE_CLASSES = {
+        small: 'div-table-cell hidden bg-transparent px-4 py-2 text-sm font-medium text-zinc-100 first:block md:block',
+        medium: 'div-table-cell hidden bg-transparent px-6 py-4 text-base font-medium ' \
+                'text-zinc-100 first:block md:block',
+        large: 'div-table-cell hidden bg-transparent px-6 py-6 text-lg font-medium ' \
+               'text-zinc-100 first:block md:block'
+      }.freeze
+
       option :options, optional: true, default: -> { {} }
 
       def cell_classes
-        'div-table-cell hidden px-6 py-4 text-base font-medium text-zinc-100 first:block md:block'
+        SIZE_CLASSES.fetch(tramway_table_size) { SIZE_CLASSES[:medium] }
       end
     end
   end

data/app/components/tramway/table/header_component.rb

@@ -6,6 +6,21 @@ module Tramway
     class HeaderComponent < Tramway::BaseComponent
       include ContentCells
 
+      SIZE_CLASSES = {
+        small: {
+          row: 'div-table-row grid grid-cols-1 gap-2 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
+          cell: 'div-table-cell hidden px-4 py-2 first:block md:block'
+        },
+        medium: {
+          row: 'div-table-row grid grid-cols-1 gap-4 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
+          cell: 'div-table-cell hidden px-6 py-4 first:block md:block'
+        },
+        large: {
+          row: 'div-table-row grid grid-cols-1 gap-6 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
+          cell: 'div-table-cell hidden px-6 py-6 first:block md:block'
+        }
+      }.freeze
+
       option :headers, optional: true, default: -> { [] }
       option :columns, optional: true, default: -> { 3 }
       option :options, optional: true, default: -> { {} }
@@ -19,11 +34,17 @@ module Tramway
       end
 
       def header_row_classes
-        'div-table-row grid grid-cols-1 gap-4 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400'
+        size_classes.fetch(:row)
       end
 
       def header_cell_classes
-        'div-table-cell hidden px-6 py-4 first:block md:block'
+        size_classes.fetch(:cell)
+      end
+
+      private
+
+      def size_classes
+        SIZE_CLASSES.fetch(tramway_table_size) { SIZE_CLASSES[:medium] }
       end
     end
   end