nitro_kit 0.5.2 → 0.7.0

data/app/components/nitro_kit/dialog.rb

@@ -19,63 +19,86 @@ module NitroKit
       end
     end
 
-    def trigger(text = nil, **attrs, &block)
-      render(
-        NitroKit::Button.new(**mattr(attrs, data: {nk__dialog_target: "trigger", action: "click->nk--dialog#open"}))
-      ) do
-        text_or_block(text, &block)
+    def trigger(text = nil, as: Button, **attrs, &block)
+      builder do
+        trigger_attrs = mattr(
+          attrs,
+          data: {
+            nk__dialog_target: "trigger",
+            action: "click->nk--dialog#open"
+          }
+        )
+
+        case as
+        when Symbol
+          send(as, **trigger_attrs) do
+            text_or_block(text, &block)
+          end
+        else
+          render(as.new(**trigger_attrs)) do
+            text_or_block(text, &block)
+          end
+        end
       end
     end
 
     alias :html_dialog :dialog
 
     def dialog(**attrs)
-      html_dialog(
-        **mattr(
-          attrs,
-          class: dialog_class,
-          data: {nk__dialog_target: "dialog"},
-          aria: {
-            labelledby: id(:title),
-            describedby: id(:description)
-          }
-        )
-      ) do
-        yield
+      builder do
+        html_dialog(
+          **mattr(
+            attrs,
+            class: dialog_class,
+            data: {nk__dialog_target: "dialog"},
+            aria: {
+              labelledby: id(:title),
+              describedby: id(:description)
+            }
+          )
+        ) do
+          yield
+        end
       end
     end
 
     def close_button(**attrs)
-      render(
-        Button.new(
-          **mattr(
-            attrs,
-            variant: :ghost,
-            size: :sm,
-            class: "absolute top-2 right-2",
-            data: {action: "nk--dialog#close"}
+      builder do
+        render(
+          Button.new(
+            **mattr(
+              attrs,
+              variant: :ghost,
+              size: :sm,
+              class: "absolute top-2 right-2",
+              data: {action: "nk--dialog#close"}
+            )
           )
-        )
-      ) do
-        render(Icon.new(:x))
+        ) do
+          render(Icon.new(:x))
+        end
       end
     end
 
     def title(text = nil, **attrs, &block)
-      h2(**mattr(attrs, id: id(:title), class: "text-lg font-semibold mb-2")) do
-        text_or_block(text, &block)
+      builder do
+        h2(**mattr(attrs, id: id(:title), class: "text-lg font-semibold mb-2")) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     def description(text = nil, **attrs, &block)
-      div(
-        **mattr(
-          attrs,
-          id: id(:description),
-          class: "text-muted-foreground mb-6 text-sm leading-relaxed"
-        )
-      ) do
-        text_or_block(text, &block)
+      builder do
+        div(
+          **mattr(
+            attrs,
+            id: id(:description),
+            class: "text-muted-content mb-6 text-sm leading-relaxed"
+          )
+        ) do
+          text_or_block(text, &block)
+        end
       end
     end
 

data/app/components/nitro_kit/dropdown.rb

@@ -27,60 +27,68 @@ module NitroKit
     end
 
     def trigger(text = nil, as: NitroKit::Button, **attrs, &block)
-      trigger_attrs = mattr(
-        attrs,
-        aria: {haspopup: "true", expanded: "false"},
-        data: {nk__dropdown_target: "trigger", action: "click->nk--dropdown#toggle"}
-      )
+      builder do
+        trigger_attrs = mattr(
+          attrs,
+          aria: {haspopup: "true", expanded: "false"},
+          data: {nk__dropdown_target: "trigger", action: "click->nk--dropdown#toggle"}
+        )
 
-      case as
-      when Symbol
-        send(as, **trigger_attrs) do
-          text_or_block(text, &block)
-        end
-      else
-        render(as.new(**trigger_attrs)) do
-          text_or_block(text, &block)
+        case as
+        when Symbol
+          send(as, **trigger_attrs) do
+            text_or_block(text, &block)
+          end
+        else
+          render(as.new(**trigger_attrs)) do
+            text_or_block(text, &block)
+          end
         end
       end
     end
 
     def content(as: :div, **attrs)
-      div(
-        **mattr(
-          attrs,
-          role: "menu",
-          aria: {hidden: "true"},
-          class: content_class,
-          data: {nk__dropdown_target: "content"},
-          popover: true
-        )
-      ) do
-        yield
+      builder do
+        div(
+          **mattr(
+            attrs,
+            role: "menu",
+            aria: {hidden: "true"},
+            class: content_class,
+            data: {nk__dropdown_target: "content"},
+            popover: true
+          )
+        ) do
+          yield
+        end
       end
     end
 
     def title(text = nil, **attrs, &block)
-      div(**mattr(attrs, class: title_class)) do
-        text_or_block(text, &block)
+      builder do
+        div(**mattr(attrs, class: title_class)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     def item(text = nil, href: nil, variant: :default, **attrs, &block)
-      common_attrs = mattr(
-        attrs,
-        role: "menuitem",
-        tabindex: "-1",
-        class: [item_class, item_variant_class(variant)]
-      )
+      builder do
+        common_attrs = mattr(
+          attrs,
+          role: "menuitem",
+          tabindex: "-1",
+          class: [item_class, item_variant_class(variant)]
+        )
 
-      if href
-        link_to(href, **common_attrs) do
-          text_or_block(text, &block)
-        end
-      else
-        div(**common_attrs) do
-          text_or_block(text, &block)
+        if href
+          link_to(href, **common_attrs) do
+            text_or_block(text, &block)
+          end
+        else
+          div(**common_attrs) do
+            text_or_block(text, &block)
+          end
         end
       end
     end
@@ -91,28 +99,40 @@ module NitroKit
       **attrs,
       &block
     )
-      href = text_or_href if block_given?
-      item(text_or_href, href: href, **attrs, &block)
+      builder do
+        if block_given?
+          href = text_or_href
+          text_or_href = nil
+        end
+
+        item(text_or_href, href: href, **attrs, &block)
+      end
     end
 
     def destructive_item(*args, **attrs, &block)
-      item(*args, **attrs, variant: :destructive, &block)
+      builder do
+        item(*args, **attrs, variant: :destructive, &block)
+      end
     end
 
     def destructive_item_to(text_or_block, href = nil, **attrs, &block)
-      href = args.shift if block_given?
-      destructive_item(text_or_block, href: href, **attrs, &block)
+      builder do
+        href = args.shift if block_given?
+        destructive_item(text_or_block, href: href, **attrs, &block)
+      end
     end
 
     def separator
-      hr(class: separator_class)
+      builder do
+        hr(class: separator_class)
+      end
     end
 
     private
 
     def content_class
       [
-        "z-10 w-max-content absolute top-0 left-0",
+        "isolate w-max-content absolute top-0 left-0",
         "p-1 bg-background text-foreground rounded-md border shadow-sm",
         "w-fit max-w-sm flex-col text-left",
         "[&[aria-hidden=true]]:hidden flex"
@@ -124,14 +144,15 @@ module NitroKit
     end
 
     def title_class
-      "px-3 pt-2 pb-1.5 text-muted-foreground text-sm"
+      "px-3 pt-2 pb-1.5 text-muted-content text-sm"
     end
 
     def item_class
       [
         "px-3 py-1.5 rounded",
         "font-medium truncate",
-        "cursor-default"
+        "cursor-default",
+        "flex gap-2 items-center [&>span]:truncate"
       ]
     end
 
@@ -140,7 +161,7 @@ module NitroKit
       when :default
         "[&[href]]:hover:bg-muted"
       when :destructive
-        "text-destructive [&[href]]:hover:bg-destructive [&[href]]:hover:text-white"
+        "text-destructive-content [&[href]]:hover:bg-destructive [&[href]]:hover:text-white"
       else
         raise ArgumentError, "Unknown variant: #{variant.inspect}"
       end

data/app/components/nitro_kit/field.rb

@@ -9,26 +9,30 @@ module NitroKit
       label: nil,
       description: nil,
       errors: nil,
+      wrapper: {},
+      options: nil,
       **attrs
     )
       @form = form
       @field_name = field_name.to_s
-      @as = as.to_sym
+      @as = as.is_a?(String) ? as.to_sym : as
 
       @name = attrs[:name] || form&.field_name(field_name)
       @id = attrs[:id] || form&.field_id(field_name)
 
-      # select
-      @options = attrs[:options]
+      # select, radio group
+      @options = options
 
       @field_attrs = attrs
       @field_label = label.nil? ? field_name.to_s.humanize : label
       @field_description = description
       @field_error_messages = errors
 
+      @wrapper = wrapper
+
       super(
-        attrs,
-        data: {as: @as},
+        wrapper,
+        data: {as: @as.to_s},
         class: base_class
       )
     end
@@ -57,75 +61,85 @@ module NitroKit
     alias :html_label :label
 
     def label(text = nil, **attrs)
-      text ||= field_label
+      builder do
+        text ||= field_label
 
-      return unless text
+        return unless text
 
-      render(Label.new(**mattr(attrs, for: id, data: {slot: "label"}))) do
-        text
+        render(Label.new(**mattr(attrs, for: id, data: {slot: "label"}))) do
+          text
+        end
       end
     end
 
     def description(text = nil, **attrs, &block)
-      text ||= field_description
+      builder do
+        text ||= field_description
 
-      return unless text || block_given?
+        return unless text || block_given?
 
-      div(**mattr(attrs, data: {slot: "description"}, class: description_class)) do
-        text_or_block(text, &block)
+        div(**mattr(attrs, data: {slot: "description"}, class: description_class)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     def errors(error_messages = nil, **attrs)
-      error_messages ||= field_error_messages
+      builder do
+        error_messages ||= field_error_messages
 
-      return unless error_messages&.any?
+        return unless error_messages&.any?
 
-      ul(**mattr(attrs, data: {slot: "error"}, class: error_class)) do |msg|
-        error_messages.each do |msg|
-          li { msg }
+        ul(**mattr(attrs, data: {slot: "error"}, class: error_class)) do |msg|
+          error_messages.each do |msg|
+            li { msg }
+          end
         end
       end
     end
 
     def control(**attrs)
-      case as
-      when :string
-        input(**attrs)
-      when
-          :button,
-          :color,
-          :date,
-          :datetime,
-          :datetime_local,
-          :email,
-          :file,
-          :hidden,
-          :month,
-          :number,
-          :password,
-          :range,
-          :search,
-          :tel,
-          :text,
-          :time,
-          :url,
-          :week
-        input(type: as, **attrs)
-      when :select
-        select(**attrs)
-      when :textarea
-        textarea(**attrs)
-      when :checkbox
-        checkbox(**attrs)
-      when :combobox
-        combobox(**attrs)
-      when :radio, :radio_button, :radio_group
-        radio_group(**attrs)
-      when :switch
-        switch(**attrs)
-      else
-        raise ArgumentError, "Invalid field type `#{as}'"
+      builder do
+        case as
+        when :string
+          input(**attrs)
+        when
+            :button,
+            :color,
+            :date,
+            :datetime,
+            :datetime_local,
+            :email,
+            :file,
+            :hidden,
+            :month,
+            :number,
+            :password,
+            :range,
+            :search,
+            :tel,
+            :text,
+            :time,
+            :url,
+            :week
+          input(type: as, **attrs)
+        when :select
+          select(**attrs)
+        when :textarea
+          textarea(**attrs)
+        when :checkbox
+          checkbox(**attrs)
+        when :combobox
+          combobox(**attrs)
+        when :radio, :radio_button, :radio_group
+          radio_group(**attrs)
+        when :switch
+          switch(**attrs)
+        when Class
+          component(**attrs)
+        else
+          raise ArgumentError, "Invalid field type `#{as}'"
+        end
       end
     end
 
@@ -197,19 +211,16 @@ module NitroKit
     end
 
     def checkbox(**attrs)
-      render(
-        Checkbox.new(
-          **control_attrs(
-            **field_attrs,
-            **attrs
-          )
-        )
-      )
+      control_attrs(**field_attrs, **attrs).tap do |attrs|
+        input(type: "hidden", **attrs, id: nil, value: "0")
+        render(Checkbox.new(checked: checked?, **attrs, value: "1"))
+      end
     end
 
     def combobox(**attrs)
       render(
         Combobox.new(
+          options: @options,
           **control_attrs(
             **field_attrs,
             **attrs
@@ -242,6 +253,17 @@ module NitroKit
       )
     end
 
+    def component(**attrs)
+      render(
+        as.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
     private
 
     def base_class
@@ -256,11 +278,11 @@ module NitroKit
     end
 
     def description_class
-      "text-sm text-muted-foreground"
+      "text-sm text-muted-content"
     end
 
     def error_class
-      "text-sm text-destructive"
+      "text-sm text-destructive-content"
     end
 
     def value
@@ -284,5 +306,21 @@ module NitroKit
         value
       end
     end
+
+    def checked?
+      return unless object = form&.object
+      value = object.public_send(@field_name)
+
+      case value
+      when true, false
+        value
+      when String
+        value == "1"
+      when Numeric
+        value == 1
+      else
+        false
+      end
+    end
   end
 end

data/app/components/nitro_kit/fieldset.rb

@@ -23,21 +23,28 @@ module NitroKit
     alias :html_legend :legend
 
     def legend(text = nil, **attrs, &block)
-      html_legend(**mattr(attrs, class: legend_class)) do
-        text_or_block(text, &block)
+      builder do
+        html_legend(**mattr(attrs, class: legend_class)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     def description(text = nil, **attrs, &block)
-      div(**mattr(attrs, class: description_class, data: {slot: "text"})) do
-        text_or_block(text, &block)
+      builder do
+        div(**mattr(attrs, class: description_class, data: {slot: "text"})) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     private
 
     def base_class
-      "[&>*+[data-slot=control]]:mt-6 [&>*+[data-slot=text]]:mt-1"
+      [
+        "[&>*+[data-slot=control]]:mt-6 [&>*+[data-slot=text]]:mt-1",
+        "[&+&]:mt-8"
+      ]
     end
 
     def legend_class
@@ -45,7 +52,7 @@ module NitroKit
     end
 
     def description_class
-      "text-sm text-muted-foreground"
+      "text-sm text-muted-content"
     end
   end
 end

data/app/components/nitro_kit/form_builder.rb

@@ -14,7 +14,9 @@ module NitroKit
       end
 
       if errors.nil?
-        errors = (object && object.errors.include?(field_name) ? object.errors.full_messages_for(field_name) : nil)
+        errors = object && object.respond_to?(:errors) && object.errors.include?(field_name) ? object
+          .errors
+          .full_messages_for(field_name) : nil
       end
 
       @template.render(NitroKit::Field.new(self, field_name, label:, errors:, **attrs), &block)
@@ -27,7 +29,6 @@ module NitroKit
     # Input types
 
     %i[
-      checkbox
       color_field
       date_field
       datetime_field
@@ -56,16 +57,34 @@ module NitroKit
         end
       end
 
+    def radio_button(method, value = "1", **attrs)
+      field(method, as: :radio_button, label: false, value:, **attrs)
+    end
+
+    def checkbox(method, checked_value = "1", unchecked_value = "0", *args, include_hidden: true, **attrs)
+      if include_hidden
+        @template.concat(hidden_field(method, value: unchecked_value))
+      end
+
+      field(method, *args, as: :checkbox, label: false, value: checked_value, **attrs)
+    end
+
     # Buttons
 
-    def submit(value = "Save changes", **attrs)
-      content = value || @template.capture(&block)
-      @template.render(NitroKit::Button.new(variant: :primary, type: :submit, **attrs)) { content }
+    def submit(value = nil, **attrs, &block)
+      if value.nil? && !block_given?
+        value = "Save changes"
+      end
+
+      @template.render(NitroKit::Button.new(value, variant: :primary, type: :submit, **attrs), &block)
     end
 
-    def button(value = "Save changes", **attrs)
-      content = value || @template.capture(&block)
-      @template.render(NitroKit::Button.new(**attrs)) { content }
+    def button(value = nil, **attrs, &block)
+      if value.nil? && !block_given?
+        value = "Save changes"
+      end
+
+      @template.render(NitroKit::Button.new(value, **attrs), &block)
     end
   end
 end

data/app/components/nitro_kit/icon.rb

@@ -2,8 +2,7 @@
 
 module NitroKit
   class Icon < Component
-    include Phlex::Rails::Helpers::ContentTag
-    include LucideRails::RailsHelper
+    register_output_helper :lucide_icon
 
     def initialize(name, size: :md, **attrs)
       @name = name
@@ -26,6 +25,8 @@ module NitroKit
 
     def size_class
       case size
+      when :xs
+        "size-3"
       when :sm
         "size-4"
       when :md

data/app/components/nitro_kit/input.rb

@@ -19,7 +19,7 @@ module NitroKit
       [
         "block rounded-md border bg-background border-border text-base px-3 py-2 h-10",
         # Focus
-        "focus:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2"
+        "focus-visible:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2"
       ]
     end
   end