tramway 3.0.4.2 → 3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6df450ba2be14dca796231458310c25cbbc33d51d39de0bbeb7af4d8c0fadba1
-  data.tar.gz: 26ded3945beb84b04c0ea7c7916a3a8b1bc9beb14e7df7886a8add7d1bebb983
+  metadata.gz: 8d6347854d4ed5eb627a0adb496c8f6ffd7d5f5d4948c510586af26f42bc7a3f
+  data.tar.gz: 52d08842b5fd4a6cb025d23e5faf8de44b699e4ed471b8c24049955bfab1a93f
 SHA512:
-  metadata.gz: 350d5eaf8eb2aadc8b458bc9834340ee34efe36ce4dbec2960214331b89e6979329b1c61c607b7cf64b595fb7c81e62959144d78708755c2e8964872f0f89dd2
-  data.tar.gz: 1d7215149e091f8b967fbee6471d68a77c90f57294022f66327626e300759ad31f01d4e30e019c1a17f571e7adba9f09f404089f0960bd129fc1c4918f0c86b7
+  metadata.gz: b92182b455ad051e1e08e7020674ff3079acb09afba3e6845ad53b284cdf3fbe6844855b1b948a9066a990e3d669833a70d1cac04b62c15bf6fca22b27b0cbb9
+  data.tar.gz: 0b9a66a185ab03f7f345ff966b16c6b65558e6487356c4b4a7c580decf1c579f7a1e3d8ac9ca2e05fe8859da40abc284c06ea5a43aff7f758b332d618514ef1a

data/README.md

@@ -100,8 +100,9 @@ end
 
 **Step 4**
 
-If you ran `bin/rails g tramway:install`, the Tailwind safelist was already appended to `config/tailwind.config.js`.
-Otherwise, copy this [file](https://github.com/Purple-Magic/tramway/blob/main/config/tailwind.config.js) to
+If you ran `bin/rails g tramway:install`, the install generator already copied the Tailwind safelist to
+`config/tailwind.config.js`.
+Otherwise, copy this file from the gem:
 `config/tailwind.config.js`.
 
 
@@ -870,9 +871,10 @@ end
 
 ### Tramway Flash
 
-`tramway_flash` renders the Tailwind-styled flash component that Tramway uses in its layouts. Pass the flash text and type, and
-the helper will resolve the proper Tailwind color (for example `:success` -> green, `:warning` -> orange). You can also provide
-custom HTML options directly (e.g., `class:`, `data:`) and they will be merged into the flash container.
+`tramway_flash` renders the dark shadcn-style flash component that Tramway uses in its layouts. Pass the flash text and type,
+and the helper will resolve the proper dark semantic accent (for example `:success` -> green, `:warning` -> orange). Tramway
+does not render a separate light flash theme. You can also provide custom HTML options directly (e.g., `class:`, `data:`) and
+they will be merged into the flash container.
 
 ```haml
 -# Haml example
@@ -887,7 +889,7 @@ 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.
+the semantic accent explicitly.
 
 ### Tramway Chat
 
@@ -1122,6 +1124,12 @@ Example 3: rendering button
 
   The `type` option maps semantic intent to [Lantern Color Palette](https://github.com/TrinityMonsters/tramway/blob/main/README.md#lantern-color-palette).
 
+  Use `size:` to select one of the built-in button sizes: `:small`, `:medium`, or `:large`. The default is `:medium`.
+
+  ```erb
+  <%= tramway_button path: '/projects', text: 'Projects', size: :small %>
+  ```
+
 * `tramway_badge` renders a Tailwind-styled badge with the provided `text`. Pass a semantic `type` (for example, `:success` or
   `:danger`) to use the built-in color mappings, or supply a custom Tailwind color family with `color:`. When you opt into a
   custom color, ensure the corresponding background utilities are available in your Tailwind safelist.
@@ -1152,7 +1160,9 @@ Tramway uses [Tailwind](https://tailwindcss.com/) by default. All UI helpers are
 
 #### tramway_form_for
 
-Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by default.
+Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by default. Form inputs use hardcoded
+dark shadcn-style classes; Tramway does not render a separate light form theme.
+Checkboxes render dark while unchecked and use the light primary checked state.
 
 ```erb
 <%= tramway_form_for @user do |f| %>
@@ -1170,8 +1180,8 @@ Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by
 
 will render [this](https://play.tailwindcss.com/xho3LfjKkK)
 
-Use `size:` to control the form sizing (`:small`, `:medium`, or `:large`). The default is `:medium`, and all fields rendered
-within the form will use the same size value.
+Use `size:` to control the input sizing (`:small`, `:medium`, or `:large`). The default is `:medium`, and supported inputs
+rendered within the form will use the same size value.
 
 ```erb
 <%= tramway_form_for @user, size: :large do |f| %>
@@ -1298,6 +1308,7 @@ With `remote: true`, Tramway submits the form on each input `change` via inline
 ### Tailwind-styled pagination for Kaminari
 
 Tramway uses [Tailwind](https://tailwindcss.com/) by default. It has tailwind-styled pagination for [kaminari](https://github.com/kaminari/kaminari).
+Pagination components use hardcoded dark shadcn-style classes and do not render a separate light theme.
 
 #### How to use
 

data/app/assets/javascripts/tramway/ui_checkbox_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class UiCheckbox extends Controller {
+  static targets = ["input", "button", "indicator"]
+
+  connect() {
+    this.sync()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+
+    if (this.inputTarget.disabled) return
+
+    this.inputTarget.click()
+    this.sync()
+  }
+
+  sync() {
+    const checked = this.inputTarget.checked
+    const state = checked ? "checked" : "unchecked"
+
+    this.buttonTarget.setAttribute("aria-checked", checked.toString())
+    this.buttonTarget.dataset.state = state
+    this.buttonTarget.classList.toggle("border-zinc-50", checked)
+    this.buttonTarget.classList.toggle("bg-zinc-50", checked)
+    this.buttonTarget.classList.toggle("text-zinc-950", checked)
+    this.buttonTarget.classList.toggle("border-zinc-800", !checked)
+    this.buttonTarget.classList.toggle("bg-zinc-950", !checked)
+    this.buttonTarget.classList.toggle("text-zinc-50", !checked)
+    this.indicatorTarget.classList.toggle("hidden", !checked)
+    this.buttonTarget.toggleAttribute("disabled", this.inputTarget.disabled)
+  }
+}
+
+export { UiCheckbox }

data/app/components/tailwind_component.rb

@@ -42,45 +42,42 @@ class TailwindComponent < Tramway::BaseComponent
   private
 
   def text_input_base_classes
-    theme_classes(
-      classic: 'w-full rounded-xl border border-gray-700 bg-gray-900 text-gray-100 shadow-inner ' \
-               'focus:outline-none focus:ring-2 focus:ring-gray-600 placeholder-gray-500'
-    )
+    'w-full rounded-md border border-zinc-800 bg-zinc-950 text-zinc-50 shadow-sm transition-colors ' \
+      'placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
+      'focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed ' \
+      'disabled:opacity-50'
   end
 
   def select_base_classes
-    theme_classes(
-      classic: 'w-full rounded-xl border border-gray-700 bg-gray-900 text-gray-100 shadow-inner ' \
-               'focus:outline-none focus:ring-2 focus:ring-gray-600 disabled:cursor-not-allowed ' \
-               'disabled:bg-gray-800 disabled:text-gray-500'
-    )
+    'w-full rounded-md border border-zinc-800 bg-zinc-950 text-zinc-50 shadow-sm transition-colors ' \
+      'appearance-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
+      'focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed ' \
+      'disabled:opacity-50'
   end
 
   def file_button_base_classes
-    theme_classes(
-      classic: 'inline-block text-white font-semibold rounded-xl cursor-pointer mt-4 bg-blue-600 ' \
-               'hover:bg-blue-800 shadow-md'
-    )
+    'inline-flex items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-50 ' \
+      'font-medium shadow-sm transition-colors hover:bg-zinc-900 focus-visible:outline-none ' \
+      'focus-visible:ring-2 focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ' \
+      'focus-visible:ring-offset-zinc-950 disabled:pointer-events-none disabled:opacity-50 cursor-pointer mt-4'
   end
 
   def submit_button_base_classes
-    theme_classes(
-      classic: 'font-semibold rounded-xl focus:outline-none focus:ring-2 focus:ring-red-700 cursor-pointer ' \
-               'bg-green-900 hover:bg-green-800 shadow-md'
-    )
+    'font-medium rounded-md border border-zinc-800 bg-zinc-950 text-zinc-50 shadow-sm transition-colors ' \
+      'hover:bg-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
+      'focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 cursor-pointer'
   end
 
   def checkbox_base_classes
-    theme_classes(
-      classic: 'rounded-full border border-gray-700 bg-gray-900 text-gray-100 shadow-inner focus:outline-none ' \
-               'focus:ring-2 focus:ring-gray-600'
-    )
+    'shrink-0 rounded-sm border border-zinc-800 bg-zinc-950 text-zinc-50 shadow-sm ' \
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
+      'focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed ' \
+      'disabled:opacity-50'
   end
 
   def form_label_classes
-    theme_classes(
-      classic: 'block text-sm font-semibold mb-2 text-gray-200'
-    )
+    'block text-sm font-medium leading-none mb-2 text-zinc-200 peer-disabled:cursor-not-allowed ' \
+      'peer-disabled:opacity-70'
   end
 
   def default_container_classes

data/app/components/tramway/button_component.rb

@@ -4,6 +4,12 @@ module Tramway
   # Default Tramway button
   #
   class ButtonComponent < BaseComponent
+    DEFAULT_BUTTON_CLASSES = %w[
+      inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      disabled:pointer-events-none disabled:opacity-50
+    ].freeze
+
     option :text, optional: true, default: -> {}
     option :path, optional: true, default: -> { '#' }
     option :color, optional: true
@@ -29,42 +35,44 @@ module Tramway
     end
 
     def size_classes
-      unless size.in?(%i[small medium large])
+      unless normalized_size.in?(%i[small medium large])
         raise ArgumentError, "Invalid size: #{size}. Valid sizes are :small, :medium, :large."
       end
 
       {
         small: 'text-sm py-1 px-2 rounded',
-        medium: 'py-2 px-4 h-10',
+        medium: 'text-sm py-2 px-4 h-10',
         large: 'text-xl px-5 py-3 h-12'
-      }[size]
+      }[normalized_size]
+    end
+
+    def default_button_classes
+      DEFAULT_BUTTON_CLASSES
     end
 
     def classes
-      (default_classes +
+      (default_button_classes +
+        size_classes.split +
         color_classes +
-        (@tag == :a ? %w[px-1 h-fit w-fit] : [cursor_class])).compact.join(' ')
+        (@tag == :a ? %w[px-1 h-fit w-fit] : [cursor_class]) +
+        options[:class].to_s.split).compact.join(' ')
     end
 
-    def default_classes
-      base_classes = theme_classes(
-        classic: %w[btn btn-primary flex flex-row font-semibold rounded-xl whitespace-nowrap items-center gap-1
-                    shadow-md]
-      )
-
-      base_classes + [size_classes.to_s, options[:class].to_s]
+    def color_classes
+      theme_classes classic: color_classes_collection
     end
 
-    def color_classes
-      if disabled?
-        %w[bg-gray-800 text-gray-500 shadow-inner]
-      else
-        [
-          "bg-#{resolved_color}-700", "hover:bg-#{resolved_color}-800", 'text-white'
-        ]
-      end => classes_collection
+    def color_classes_collection
+      return %w[bg-gray-800 text-gray-500 shadow-inner] if disabled?
 
-      theme_classes classic: classes_collection
+      case normalized_type
+      when :default, :life, :secondary
+        ['hover:bg-zinc-250', 'bg-zinc-50', 'text-zinc-950']
+      when :inverse
+        ['hover:bg-zinc-800', 'bg-zinc-950', 'text-zinc-50', 'border', 'border-zinc-800']
+      else
+        ["hover:bg-#{resolved_color}-900 bg-#{resolved_color}-900/30 text-#{resolved_color}-400"]
+      end
     end
 
     def disabled?
@@ -98,6 +106,10 @@ module Tramway
       end
     end
 
+    def normalized_size
+      size || :medium
+    end
+
     def tag_button?
       options[:type] == :submit
     end

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

@@ -1,19 +1,19 @@
 = 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.p-2.md:p-6.space-y-2.md:space-y-4.md:rounded-xl.rounded-t-xl{ class: 'text-gray-100 bg-gray-800/60', data: { scroll_to_bottom_on_update: scroll_to_bottom_on_update } }
+  #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.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'
+      = inline_svg 'icons/dots.svg', class: 'mx-auto my-4 h-8 w-8 text-zinc-500'
 
   - if message_form.present?
-    .shrink-0.border-gray-200.md:pt-2.border-gray-700
-      = form_for message_form, url: send_message_path, as: :message, method: :post, html: { class: 'flex items-center md:gap-1' } do |f|
+    .shrink-0.border-t.border-zinc-800.pt-2
+      = form_for message_form, url: send_message_path, as: :message, method: :post, html: { class: 'flex items-center gap-2 md:gap-1' } do |f|
         - waiting_placeholder = t('tramway.chat.placeholders.waiting')
         - typing_placeholder = t('tramway.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 border-gray-600 bg-gray-800 text-white focus:border-blue-400 focus:ring-blue-500/30',
+          class: 'flex-1 appearance-none rounded-md border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-50 shadow-sm outline-none placeholder:text-zinc-500 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed',
           placeholder: send_messages_enabled ? typing_placeholder : waiting_placeholder,
           disabled: !send_messages_enabled
 
@@ -23,7 +23,7 @@
           = 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'
+          class: 'inline-flex items-center justify-center rounded-md bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-950 shadow-sm transition-colors hover:bg-zinc-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:pointer-events-none disabled:opacity-50'
 
 :javascript
   (() => {

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

@@ -16,11 +16,11 @@
 
     - if pending?
       .pb-1
-        -# = inline_svg 'icons/spinner.svg', class: 'w-4 h-4 text-white animate-spin'
+        -# = inline_svg 'icons/spinner.svg', class: 'h-4 w-4 animate-spin text-zinc-50'
 
     - if failed?
       .pb-1
-        -# = inline_svg 'icons/cross.svg', class: 'w-6 h-6 text-red-200'
+        -# = inline_svg 'icons/cross.svg', class: 'h-6 w-6 text-red-400'
 
     - if data_view == :table
       = component 'tramway/chats/messages/table', data:

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

@@ -20,9 +20,9 @@ module Tramway
 
       def text_color
         if pending?
-          'text-gray-400 dark:text-gray-600'
+          'text-zinc-500'
         else
-          'text-black dark:text-white'
+          'text-zinc-50'
         end
       end
 

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

@@ -1,9 +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'
+    .max-w-lg.rounded-2xl.px-4.py-3.text-sm.shadow-sm{ class: color_classes }
+      = component 'tramway/native_text', text:, klass: 'text-zinc-50'
 
       - if sent_at.present?
-        .mt-2.text-right.text-xs.text-gray-400
+        .mt-2.text-right.text-xs.text-zinc-400
           = sent_at
   = content

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

@@ -10,21 +10,16 @@ module Tramway
         option :sent_at
 
         def position_classes
-          case position.to_sym
-          when :left
-            %w[items-start]
-          when :right
-            %w[items-end]
-          end.join(' ')
+          position.to_sym == :left ? 'items-start' : 'items-end'
         end
 
         def color_classes
           case position.to_sym
           when :left
-            %w[bg-gray-800 rounded-tl-md]
+            'rounded-tl-md bg-zinc-900 text-zinc-50'
           when :right
-            %w[bg-blue-600 rounded-tr-md]
-          end.join(' ')
+            'rounded-tr-md bg-zinc-800 text-zinc-50'
+          end
         end
       end
     end

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

@@ -1,4 +1,4 @@
-.mt-3.overflow-hidden.rounded-xl.border.border-gray-200.bg-white.shadow-sm.dark:border-gray-700.dark:bg-gray-900
+.mt-3.overflow-hidden.rounded-xl.border.border-zinc-800.bg-zinc-950.shadow-sm
   = tramway_table do
     - data.each_with_index do |row, index|
       - if index.zero?

data/app/components/tramway/colors_methods.rb

@@ -4,8 +4,9 @@ module Tramway
   # Color logic implementation
   module ColorsMethods
     TYPE_COLOR_MAP = {
-      default: :gray,
-      life: :gray,
+      default: :zinc,
+      inverse: :zinc,
+      life: :zinc,
       primary: :blue,
       hope: :blue,
       secondary: :zinc,
@@ -17,7 +18,6 @@ module Tramway
       rage: :red,
       love: :violet,
       compassion: :indigo,
-      compassio: :indigo,
       fear: :yellow,
       submit: :green
     }.freeze

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

@@ -10,7 +10,7 @@ module Tramway
         options_classes = options[:class] || ''
 
         theme_classes(
-          classic: "bg-gray-900 text-gray-100 shadow-inner#{options_classes}"
+          classic: "bg-zinc-950 text-zinc-50 shadow-inner#{options_classes}"
         )
       end
     end

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

@@ -11,8 +11,8 @@ module Tramway
         options_classes = options[:class] || ''
 
         theme_classes(
-          classic: 'container p-4 flex align-center justify-center w-full mx-auto bg-gray-100 text-gray-700 ' \
-                   'shadow-inner rounded-xl bg-gray-900 text-gray-100' + 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_classes
         )
       end
     end

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

@@ -15,7 +15,6 @@
 
   .flash {
     animation: fadeout 2.7s ease-out forwards;
-    pointer-events: none;
   }
 
 %div{ class: container_classes, **options }

data/app/components/tramway/flash_component.rb

@@ -11,22 +11,37 @@ module Tramway
     include Tramway::ColorsMethods
 
     def container_classes
-      theme_classes(
-        classic: 'fixed top-4 right-4 z-50 space-y-2 pointer-events-none'
-      )
+      'fixed top-4 right-4 z-50 flex w-fit max-w-sm flex-col gap-2 pointer-events-none'
     end
 
     def flash_classes
-      theme_classes(
-        classic: "flash opacity-100 px-4 py-2 rounded-xl shadow-md bg-#{resolved_color}-100 " \
-                 "text-#{resolved_color}-800"
-      )
+      (base_flash_classes + semantic_flash_classes).join(' ')
     end
 
     def title_classes
-      theme_classes(
-        classic: 'text-xl font-semibold'
-      )
+      'text-sm font-medium leading-6'
+    end
+
+    private
+
+    def base_flash_classes
+      %w[
+        flash pointer-events-auto opacity-100 rounded-md border bg-zinc-950 px-4 py-3 text-sm text-zinc-50
+        shadow-lg
+      ]
+    end
+
+    def semantic_flash_classes
+      {
+        green: %w[border-green-800 text-green-400],
+        blue: %w[border-blue-800 text-blue-400],
+        orange: %w[border-orange-800 text-orange-400],
+        red: %w[border-red-800 text-red-400],
+        violet: %w[border-violet-800 text-violet-400],
+        indigo: %w[border-indigo-800 text-indigo-400],
+        yellow: %w[border-yellow-800 text-yellow-400],
+        zinc: %w[border-zinc-800 text-zinc-50]
+      }.fetch(resolved_color.to_sym, %w[border-zinc-800 text-zinc-50])
     end
   end
 end

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

@@ -103,7 +103,7 @@ module Tramway
           Tramway::ButtonComponent.new(
             text: action,
             size: form_size,
-            type: :will,
+            type: :inverse,
             options: sanitized_options.merge(name: :commit, type: :submit)
           ),
           &

data/app/components/tramway/form/checkbox_component.html.haml

@@ -1,7 +1,29 @@
-.flex.items-center.gap-2.cursor-pointer{ class: default_container_classes }
-  - classes = "#{size_class(:checkbox_input)} #{checkbox_base_classes}"
-  = @input.call @attribute, **@options.merge(class: classes)
+.flex.items-center.space-x-2{ class: default_container_classes, data: { controller: 'ui--checkbox' } }
+  - checkbox_checked = checked?
+  = @input.call @attribute, **hidden_checkbox_options
+  %button{ type: 'button',
+    role: 'checkbox',
+    'aria-checked' => checkbox_checked.to_s,
+    'data-action' => 'click->ui--checkbox#toggle',
+    'data-state' => checkbox_checked ? 'checked' : 'unchecked',
+    'data-ui--checkbox-target' => 'button',
+    value: 'on',
+    class: checkbox_button_classes,
+    for: @for,
+    id: @for }
+    %span{ class: checkbox_indicator_classes, style: 'pointer-events: none', data: { 'ui--checkbox-target' => 'indicator' } }
+      %svg{ xmlns: 'http://www.w3.org/2000/svg',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width' => '2',
+        'stroke-linecap' => 'round',
+        'stroke-linejoin' => 'round',
+        class: 'h-4 w-4' }
+        %polyline{ points: '20 6 9 17 4 12' }
   - if @label
     %div
-      = component('tramway/form/label', for: @for, options: { class: label_classes }) do
+      = component('tramway/form/label', for: @for, options: { class: label_classes, data: { action: 'click->ui--checkbox#toggle' } }) do
         = @label

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

@@ -4,8 +4,39 @@ module Tramway
   module Form
     # Tailwind-styled checkbox field
     class CheckboxComponent < TailwindComponent
+      def checkbox_button_classes
+        'peer h-4 w-4 shrink-0 rounded-sm border border-zinc-800 bg-zinc-950 text-zinc-50 ' \
+          'ring-offset-zinc-950 ' \
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
+          'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' \
+          'data-[state=checked]:border-zinc-50 data-[state=checked]:bg-zinc-50 ' \
+          'data-[state=checked]:text-zinc-950'
+      end
+
+      def checkbox_indicator_classes
+        'flex items-center justify-center text-current hidden'
+      end
+
+      def checked?
+        !!ActiveModel::Type::Boolean.new.cast(options.fetch(:checked, value))
+      end
+
+      def hidden_checkbox_options
+        options.merge(
+          id: hidden_checkbox_id,
+          class: 'hidden',
+          data: options.fetch(:data, {}).merge('ui--checkbox-target' => 'input'),
+          tabindex: -1,
+          aria: { hidden: true }
+        )
+      end
+
+      def hidden_checkbox_id
+        "#{@for}_input"
+      end
+
       def label_classes
-        default_classes = 'cursor-pointer mb-0'
+        default_classes = 'cursor-pointer mb-0 leading-6'
 
         case size
         when :small

data/app/components/tramway/form/label_component.html.haml

@@ -1,2 +1,2 @@
-%label{ for: @for, class: "#{form_label_classes} #{options[:class]}" }
+%label{ **options.except(:class), for: @for, class: "#{form_label_classes} #{options[:class]}" }
   = content

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

@@ -8,9 +8,8 @@ module Tramway
       option :options, optional: true, default: -> { {} }
 
       def form_label_classes
-        theme_classes(
-          classic: 'block font-semibold text-white'
-        )
+        'block text-sm font-medium leading-none mb-2 text-zinc-200 peer-disabled:cursor-not-allowed ' \
+          'peer-disabled:opacity-70'
       end
     end
   end

data/app/components/tramway/form/tramway_select/dropdown_container_component.rb

@@ -14,11 +14,8 @@ module Tramway
         }.freeze
 
         def dropdown_classes
-          theme_classes(
-            classic: 'absolute border-b border-l border-r border-gray-700 w-full z-40 lef-0 rounded-b-xl' \
-                     'max-h-select overflow-y-auto bg-gray-900 shadow-md ring-1 ring-gray-700 text-white ' \
-                     "#{SIZE_CLASSES[size]}"
-          )
+          'absolute border border-zinc-800 w-full z-40 lef-0 rounded-md max-h-select overflow-y-auto ' \
+            "bg-zinc-950 text-zinc-50 shadow-md ring-1 ring-zinc-800 #{SIZE_CLASSES[size]}"
         end
       end
     end

data/app/components/tramway/form/tramway_select/item_container_component.rb

@@ -14,9 +14,7 @@ module Tramway
         }.freeze
 
         def item_classes
-          theme_classes(
-            classic: "cursor-pointer hover:bg-gray-800 shadow-inner option #{SIZE_CLASSES[size]}"
-          )
+          "cursor-pointer rounded-sm text-zinc-50 hover:bg-zinc-900 option #{SIZE_CLASSES[size]}"
         end
       end
     end

data/app/components/tramway/form/tramway_select/select_as_input_component.rb

@@ -11,10 +11,7 @@ module Tramway
         option :size_class
 
         def base_classes
-          theme_classes(
-            classic: 'bg-transparent appearance-none outline-none h-full w-full hidden text-gray-100 ' \
-                     'placeholder-gray-500'
-          )
+          'bg-transparent appearance-none outline-none h-full w-full hidden text-zinc-50 placeholder:text-zinc-500'
         end
       end
     end