plutonium 0.34.1 → 0.35.0

data/lib/plutonium/ui/actions_dropdown.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    # Dropdown menu for secondary and danger actions
+    # Groups actions by category with danger actions shown after a divider
+    class ActionsDropdown < Plutonium::UI::Component::Base
+      def initialize(actions:, subject:)
+        @actions = actions
+        @subject = subject
+      end
+
+      def view_template
+        div(data: {controller: "resource-drop-down"}) do
+          render_trigger_button
+          render_dropdown_menu
+        end
+      end
+
+      private
+
+      def render_trigger_button
+        button(
+          type: "button",
+          class: "pu-btn pu-btn-md pu-btn-outline",
+          aria: {expanded: "false", haspopup: "true"},
+          data: {resource_drop_down_target: "trigger"}
+        ) do
+          span(class: "sr-only") { "Open actions menu" }
+          plain "Actions"
+          render Phlex::TablerIcons::ChevronDown.new(class: "w-4 h-4 ml-1")
+        end
+      end
+
+      def render_dropdown_menu
+        div(
+          class: "hidden absolute right-0 z-50 mt-2 w-48 origin-top-right bg-[var(--pu-surface)] border border-[var(--pu-border)] rounded-[var(--pu-radius-lg)] overflow-hidden",
+          style: "box-shadow: var(--pu-shadow-lg)",
+          data: {resource_drop_down_target: "menu"}
+        ) do
+          render_secondary_actions if secondary_actions.any?
+          render_danger_divider if secondary_actions.any? && danger_actions.any?
+          render_danger_actions if danger_actions.any?
+        end
+      end
+
+      def render_secondary_actions
+        div(class: "py-1") do
+          secondary_actions.each { |action| render_action_item(action) }
+        end
+      end
+
+      def render_danger_divider
+        div(class: "border-t border-[var(--pu-border-muted)]")
+      end
+
+      def render_danger_actions
+        div(class: "py-1") do
+          danger_actions.each { |action| render_action_item(action, danger: true) }
+        end
+      end
+
+      def render_action_item(action, danger: false)
+        url = route_options_to_url(action.route_options, @subject)
+
+        link_attrs = {
+          href: url,
+          class: tokens(
+            "flex items-center gap-2 px-4 py-2 text-sm transition-colors",
+            danger ? "text-danger-600 dark:text-danger-400 hover:bg-danger-50 dark:hover:bg-danger-900/30" : "text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)]"
+          )
+        }
+
+        # Add turbo frame if specified
+        link_attrs[:data] = {turbo_frame: action.turbo_frame} if action.turbo_frame
+
+        # Add confirmation if specified
+        if action.confirmation
+          link_attrs[:data] ||= {}
+          link_attrs[:data][:turbo_method] = :delete if action.route_options.method == :delete
+          link_attrs[:data][:turbo_confirm] = action.confirmation
+        end
+
+        a(**link_attrs) do
+          render action.icon.new(class: "w-4 h-4") if action.icon
+          span { action.label }
+        end
+      end
+
+      def secondary_actions
+        @secondary_actions ||= @actions.select { |a| a.category.secondary? }.sort_by(&:position)
+      end
+
+      def danger_actions
+        @danger_actions ||= @actions.select { |a| a.category.danger? }.sort_by(&:position)
+      end
+
+      def render?
+        @actions.any?
+      end
+    end
+  end
+end

data/lib/plutonium/ui/block.rb

@@ -4,7 +4,7 @@ module Plutonium
       def view_template(&)
         raise ArgumentError, "Block requires a content block" unless block_given?
 
-        div class: "relative bg-white dark:bg-gray-800 shadow-md sm:rounded-lg my-3" do
+        div class: "relative bg-[var(--pu-surface)] rounded-[var(--pu-radius-lg)] my-3", style: "box-shadow: var(--pu-shadow-md)" do
           yield
         end
       end

data/lib/plutonium/ui/breadcrumbs.rb

@@ -6,20 +6,17 @@ module Plutonium
 
       def view_template
         nav(
-          class:
-            "flex py-3 text-gray-700 mb-2",
+          class: "flex py-3 mb-2",
           aria_label: "Breadcrumb"
         ) do
           ol(
-            class:
-              "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse"
+            class: "inline-flex items-center gap-1 md:gap-2"
           ) do
             # Dashboard
             li(class: "inline-flex items-center") do
               a(
                 href: helpers.root_path,
-                class:
-                  "inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 dark:text-gray-200 dark:hover:text-white"
+                class: "inline-flex items-center text-sm font-medium text-[var(--pu-text-muted)] hover:text-primary-600 transition-colors"
               ) do
                 svg(
                   class: "w-3 h-3 me-2.5",
@@ -42,7 +39,7 @@ module Plutonium
               # Parent Resource
               li(class: "flex items-center") do
                 svg(
-                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-[var(--pu-text-subtle)]",
                   aria_hidden: "true",
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -58,14 +55,13 @@ module Plutonium
                 end
                 link_to resource_name_plural(current_parent.class),
                   resource_url_for(current_parent.class, parent: nil),
-                  class:
-                    "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+                  class: "ms-1 text-sm font-medium text-[var(--pu-text-muted)] hover:text-primary-600 md:ms-2 transition-colors"
               end
 
               # Parent Itself
               li(class: "flex items-center") do
                 svg(
-                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-[var(--pu-text-subtle)]",
                   aria_hidden: "true",
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -81,8 +77,7 @@ module Plutonium
                 end
                 link_to display_name_of(current_parent),
                   resource_url_for(current_parent, parent: nil),
-                  class:
-                    "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+                  class: "ms-1 text-sm font-medium text-[var(--pu-text-muted)] hover:text-primary-600 md:ms-2 transition-colors"
               end
             end
 
@@ -92,7 +87,7 @@ module Plutonium
                 # Record Resource
                 li(class: "flex items-center") do
                   svg(
-                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-[var(--pu-text-subtle)]",
                     aria_hidden: "true",
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -108,8 +103,7 @@ module Plutonium
                   end
                   link_to resource_name_plural(resource_class),
                     resource_url_for(resource_class),
-                    class:
-                      "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+                    class: "ms-1 text-sm font-medium text-[var(--pu-text-muted)] hover:text-primary-600 md:ms-2 transition-colors"
                 end
               end
 
@@ -117,7 +111,7 @@ module Plutonium
               if resource_record!.persisted? && action_name != "show"
                 li(class: "flex items-center") do
                   svg(
-                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-[var(--pu-text-subtle)]",
                     aria_hidden: "true",
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -133,8 +127,7 @@ module Plutonium
                   end
                   link_to display_name_of(resource_record!),
                     resource_url_for(resource_record!),
-                    class:
-                      "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+                    class: "ms-1 text-sm font-medium text-[var(--pu-text-muted)] hover:text-primary-600 md:ms-2 transition-colors"
                 end
               end
             end
@@ -142,7 +135,7 @@ module Plutonium
             # Trailing Caret
             li(class: "flex items-center") do
               svg(
-                class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                class: "rtl:rotate-180 block w-3 h-3 mx-1 text-[var(--pu-text-subtle)]",
                 aria_hidden: "true",
                 xmlns: "http://www.w3.org/2000/svg",
                 fill: "none",

data/lib/plutonium/ui/color_mode_selector.rb

@@ -8,7 +8,7 @@ module Plutonium
     class ColorModeSelector < Plutonium::UI::Component::Base
       # Common CSS classes used across the component
       COMMON_CLASSES = {
-        button: "inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200",
+        button: "inline-flex justify-center items-center p-2 text-[var(--pu-text-muted)] rounded-[var(--pu-radius-md)] cursor-pointer hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] transition-colors duration-200",
         icon: "w-5 h-5"
       }.freeze
 

data/lib/plutonium/ui/component/kit.rb

@@ -70,6 +70,8 @@ module Plutonium
 
         def BuildActionButton(...) = Plutonium::UI::ActionButton.new(...)
 
+        def BuildActionsDropdown(...) = Plutonium::UI::ActionsDropdown.new(...)
+
         def BuildEmptyCard(...) = Plutonium::UI::EmptyCard.new(...)
 
         def BuildTableSearchBar(...) = Plutonium::UI::Table::Components::SearchBar.new(...)
@@ -80,6 +82,10 @@ module Plutonium
 
         def BuildTablePagination(...) = Plutonium::UI::Table::Components::PagyPagination.new(...)
 
+        def BuildRowActionsDropdown(...) = Plutonium::UI::Table::Components::RowActionsDropdown.new(...)
+
+        def BuildBulkActionsToolbar(...) = Plutonium::UI::Table::Components::BulkActionsToolbar.new(...)
+
         def BuildColorModeSelector(...) = Plutonium::UI::ColorModeSelector.new(...)
       end
     end

data/lib/plutonium/ui/component_classes.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    # Centralized CSS class mappings for Plutonium UI components.
+    # Provides reusable class constants that leverage the design token system.
+    module ComponentClasses
+      # Button component classes
+      module Button
+        BASE = "pu-btn"
+        SIZE_DEFAULT = "pu-btn-md"
+        SIZE_SM = "pu-btn-sm"
+        SIZE_XS = "pu-btn-xs"
+
+        VARIANTS = {
+          primary: "pu-btn-primary",
+          secondary: "pu-btn-secondary",
+          danger: "pu-btn-danger",
+          success: "pu-btn-success",
+          warning: "pu-btn-warning",
+          info: "pu-btn-info",
+          accent: "pu-btn-accent",
+          ghost: "pu-btn-ghost"
+        }.freeze
+
+        SOFT_VARIANTS = {
+          primary: "pu-btn-soft-primary",
+          secondary: "pu-btn-soft-secondary",
+          danger: "pu-btn-soft-danger",
+          success: "pu-btn-soft-success",
+          warning: "pu-btn-soft-warning",
+          info: "pu-btn-soft-info",
+          accent: "pu-btn-soft-accent"
+        }.freeze
+
+        def self.classes(variant: :primary, size: :default, soft: false)
+          variant_class = soft ? SOFT_VARIANTS[variant] : VARIANTS[variant]
+          size_class = case size
+          when :sm then SIZE_SM
+          when :xs then SIZE_XS
+          else SIZE_DEFAULT
+          end
+          "#{BASE} #{size_class} #{variant_class}"
+        end
+      end
+
+      # Table component classes
+      module Table
+        WRAPPER = "pu-table-wrapper"
+        BASE = "pu-table"
+        HEADER = "pu-table-header"
+        HEADER_CELL = "pu-table-header-cell"
+        BODY_ROW = "pu-table-body-row"
+        BODY_ROW_SELECTED = "pu-table-body-row-selected"
+        BODY_CELL = "pu-table-body-cell"
+        SELECTION_CELL = "pu-selection-cell"
+        CHECKBOX = "pu-checkbox"
+      end
+
+      # Form component classes
+      module Form
+        WRAPPER = "pu-card"
+        BODY = "pu-card-body space-y-6"
+        FIELDS_WRAPPER = "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense"
+        ACTIONS_WRAPPER = "flex justify-end gap-2"
+
+        INPUT = "pu-input"
+        INPUT_INVALID = "pu-input pu-input-invalid"
+        INPUT_VALID = "pu-input pu-input-valid"
+
+        LABEL = "pu-label"
+        HINT = "pu-hint"
+        ERROR = "pu-error"
+        BUTTON = "pu-btn pu-btn-md pu-btn-primary"
+      end
+
+      # Toolbar component classes
+      module Toolbar
+        WRAPPER = "pu-toolbar"
+        TEXT = "pu-toolbar-text"
+        ACTIONS = "pu-toolbar-actions"
+      end
+
+      # Card component classes
+      module Card
+        BASE = "pu-card"
+        BODY = "pu-card-body"
+        HEADER = "pu-panel-header"
+        TITLE = "pu-panel-title"
+        DESCRIPTION = "pu-panel-description"
+      end
+
+      # Empty state classes
+      module EmptyState
+        WRAPPER = "pu-empty-state"
+        ICON = "pu-empty-state-icon"
+        TITLE = "pu-empty-state-title"
+        DESCRIPTION = "pu-empty-state-description"
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/base.rb

@@ -16,6 +16,7 @@ module Plutonium
           def markdown_tag(**, &)
             create_component(Plutonium::UI::Display::Components::Markdown, :markdown, **, &)
           end
+          alias_method :rich_text_tag, :markdown_tag
 
           def attachment_tag(**, &)
             create_component(Plutonium::UI::Display::Components::Attachment, :attachment, **, &)
@@ -24,6 +25,20 @@ module Plutonium
           def phlexi_render_tag(**, &)
             create_component(Plutonium::UI::Display::Components::PhlexiRender, :phlexi_render, **, &)
           end
+
+          def boolean_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Boolean, :boolean, **, &)
+          end
+
+          def color_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Color, :color, **, &)
+          end
+
+          # Type aliases for common column types
+          alias_method :float_tag, :number_tag
+          alias_method :decimal_tag, :number_tag
+          alias_method :jsonb_tag, :json_tag
+          alias_method :key_value_tag, :hstore_tag
           alias_method :phlexi_tag, :phlexi_render_tag
         end
 

data/lib/plutonium/ui/display/components/attachment.rb

@@ -34,12 +34,13 @@ module Plutonium
             return unless attachment.url.present?
 
             div(
-              class: "w-full aspect-square bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
+              class: "w-full aspect-square bg-[var(--pu-surface)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] hover:bg-[var(--pu-surface-alt)] transition-all duration-300",
+              style: "box-shadow: var(--pu-shadow-sm)",
               data: {attachment_preview_target: "thumbnail"}
             ) do
               a(
                 href: attachment.url,
-                class: "block aspect-square overflow-hidden rounded-lg",
+                class: "block aspect-square overflow-hidden rounded-[var(--pu-radius-md)]",
                 target: :blank,
                 data: {attachment_preview_target: "thumbnailLink"}
               ) do
@@ -50,7 +51,7 @@ module Plutonium
                     class: "w-full h-full object-cover"
                   )
                 else
-                  div(class: "w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 font-mono") do
+                  div(class: "w-full h-full flex items-center justify-center text-[var(--pu-text-muted)] font-mono") do
                     ".#{attachment_extension(attachment)}"
                   end
                 end
@@ -61,11 +62,11 @@ module Plutonium
           def render_caption(attachment)
             return if attributes[:caption] == false
 
-            div(class: "w-full p-2 text-sm text-gray-700 dark:text-gray-300 truncate text-center") do
+            div(class: "w-full p-2 text-sm text-[var(--pu-text-muted)] truncate text-center") do
               caption = attributes[:caption] || attachment.filename
               a(
                 href: attachment.url,
-                class: "hover:text-primary-600 dark:hover:text-primary-500 transition-colors duration-200",
+                class: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200",
                 target: :blank
               ) do
                 phlexi_render(caption) {

data/lib/plutonium/ui/display/components/boolean.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        class Boolean < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            p(**attributes) do
+              if value
+                render Phlex::TablerIcons::Check.new(class: "inline-block w-5 h-5 text-green-600")
+              else
+                render Phlex::TablerIcons::X.new(class: "inline-block w-5 h-5 text-red-500")
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/color.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        class Color < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            div(**attributes, class: "flex items-center gap-2") do
+              div(
+                class: "w-6 h-6 rounded border border-[var(--pu-border)]",
+                style: "background-color: #{value};"
+              )
+              span(class: "text-sm text-[var(--pu-text-muted)]") { value }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/resource.rb

@@ -59,7 +59,7 @@ module Plutonium
 
             tablist.with_tab(
               identifier: title.parameterize,
-              title: -> { h5(class: "text-2xl font-bold tracking-tight text-gray-900 dark:text-white") { title } }
+              title: -> { h5(class: "text-2xl font-bold tracking-tight text-[var(--pu-text)]") { title } }
             ) do
               FrameNavigatorPanel(title: "", src:, panel_id: "association-panel-#{title.parameterize}")
             end

data/lib/plutonium/ui/display/theme.rb

@@ -8,21 +8,35 @@ module Plutonium
           super.merge({
             base: "",
             value_wrapper: "max-h-[300px] overflow-y-auto",
-            fields_wrapper: "p-6 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6 gap-y-10 grid-flow-row-dense",
-            label: "text-base font-bold text-gray-500 dark:text-gray-400 mb-1",
-            description: "text-sm text-gray-400 dark:text-gray-500",
-            placeholder: "text-md text-gray-500 dark:text-gray-300 mb-1 italic",
-            string: "text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
-            text: "text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
-            link: "text-primary-600 dark:text-primary-500 whitespace-pre-line",
-            color: "flex items-center text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
-            color_indicator: "w-10 h-10 rounded-full mr-2", # max-h-fit
-            email: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
-            phone: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
-            json: "text-sm text-gray-900 dark:text-white mb-1 whitespace-pre font-mono shadow-inner p-4",
-            prefixed_icon: "w-8 h-8 mr-2",
-            markdown: "format dark:format-invert format-primary",
-            attachment_value_wrapper: "grid grid-cols-[repeat(auto-fill,minmax(0,180px))]",
+            fields_wrapper: "p-8 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-x-8 gap-y-8 grid-flow-row-dense",
+
+            # Labels and descriptions
+            label: "text-sm font-semibold uppercase tracking-wide text-[var(--pu-text-muted)] mb-2",
+            description: "text-sm text-[var(--pu-text-subtle)]",
+            placeholder: "text-lg text-[var(--pu-text-subtle)] italic",
+
+            # Value types
+            string: "text-lg text-[var(--pu-text)] whitespace-pre-line leading-relaxed",
+            text: "text-lg text-[var(--pu-text)] whitespace-pre-line leading-relaxed",
+            link: "text-lg text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 whitespace-pre-line transition-colors",
+
+            # Color display
+            color: "flex items-center text-lg text-[var(--pu-text)] whitespace-pre-line",
+            color_indicator: "w-10 h-10 rounded-lg mr-3 shadow-sm border border-[var(--pu-border)]",
+
+            # Contact info
+            email: "flex items-center gap-2 text-lg text-primary-600 dark:text-primary-400 hover:text-primary-500 transition-colors",
+            phone: "flex items-center gap-2 text-lg text-primary-600 dark:text-primary-400 hover:text-primary-500 transition-colors",
+
+            # Structured content
+            json: "text-sm text-[var(--pu-text)] whitespace-pre font-mono bg-[var(--pu-surface-alt)] border border-[var(--pu-border-muted)] rounded-[var(--pu-radius-md)] p-4 overflow-x-auto",
+            prefixed_icon: "w-6 h-6 mr-2 text-[var(--pu-text-muted)]",
+            markdown: "format dark:format-invert format-primary max-w-none",
+
+            # Attachments
+            attachment_value_wrapper: "grid grid-cols-[repeat(auto-fill,minmax(0,200px))] gap-4",
+
+            # Render delegation
             phlexi_render: :string
           })
         end

data/lib/plutonium/ui/empty_card.rb

@@ -8,9 +8,9 @@ module Plutonium
       end
 
       def view_template
-        div(class: "relative bg-white dark:bg-gray-800 shadow-md") do
-          div(class: "p-6 flex items-center flex-col gap-2") do
-            p(class: "text-gray-500 sm:text-lg dark:text-gray-200 text-center") { message }
+        div(class: "pu-card") do
+          div(class: "pu-empty-state") do
+            p(class: "pu-empty-state-description") { message }
             yield if block_given?
           end
         end

data/lib/plutonium/ui/form/base.rb

@@ -39,6 +39,10 @@ module Plutonium
             create_component(Components::KeyValueStore, :key_value_store, **, &)
           end
 
+          def resource_select_tag(**attributes, &)
+            create_component(Components::ResourceSelect, :select, **attributes, &)
+          end
+
           def secure_association_tag(**attributes, &)
             attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select") # TODO: put this behind a config
             create_component(Components::SecureAssociation, :association, **attributes, &)
@@ -60,6 +64,21 @@ module Plutonium
           alias_method :basic_polymorphic_belongs_to_tag, :polymorphic_belongs_to_tag
           # use new methods as defaults
           alias_method :polymorphic_belongs_to_tag, :secure_polymorphic_association_tag
+
+          # Type aliases for common column types that map to different input types
+          alias_method :integer_tag, :number_tag
+          alias_method :float_tag, :number_tag
+          alias_method :decimal_tag, :number_tag
+          alias_method :text_tag, :textarea_tag
+          alias_method :datetime_tag, :flatpickr_tag
+          alias_method :date_tag, :flatpickr_tag
+          alias_method :time_tag, :flatpickr_tag
+          alias_method :rich_text_tag, :markdown_tag
+          alias_method :json_tag, :textarea_tag
+          alias_method :jsonb_tag, :textarea_tag
+          alias_method :hstore_tag, :key_value_store_tag
+          alias_method :key_value_tag, :key_value_store_tag
+          alias_method :association_tag, :secure_association_tag
         end
 
         private
@@ -93,6 +112,7 @@ module Plutonium
         def initialize_attributes
           super
 
+          attributes[:id] ||= :resource_form
           attributes["data-controller"] = "form"
         end
       end