nitro_kit 0.6.0 → 0.7.0

data/app/components/nitro_kit/field.rb

@@ -15,7 +15,7 @@ module NitroKit
     )
       @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)
@@ -32,7 +32,7 @@ module NitroKit
 
       super(
         wrapper,
-        data: {as: @as},
+        data: {as: @as.to_s},
         class: base_class
       )
     end
@@ -60,76 +60,86 @@ module NitroKit
 
     alias :html_label :label
 
-    builder_method def label(text = nil, **attrs)
-      text ||= field_label
+    def label(text = nil, **attrs)
+      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
 
-    builder_method def description(text = nil, **attrs, &block)
-      text ||= field_description
+    def description(text = nil, **attrs, &block)
+      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
 
-    builder_method def errors(error_messages = nil, **attrs)
-      error_messages ||= field_error_messages
+    def errors(error_messages = nil, **attrs)
+      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
 
-    builder_method 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}'"
+    def control(**attrs)
+      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
 
@@ -201,20 +211,16 @@ module NitroKit
     end
 
     def checkbox(**attrs)
-      render(
-        Checkbox.new(
-          checked: checked?,
-          **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
@@ -247,6 +253,17 @@ module NitroKit
       )
     end
 
+    def component(**attrs)
+      render(
+        as.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
     private
 
     def base_class

data/app/components/nitro_kit/fieldset.rb

@@ -22,22 +22,29 @@ module NitroKit
 
     alias :html_legend :legend
 
-    builder_method def legend(text = nil, **attrs, &block)
-      html_legend(**mattr(attrs, class: legend_class)) do
-        text_or_block(text, &block)
+    def legend(text = nil, **attrs, &block)
+      builder do
+        html_legend(**mattr(attrs, class: legend_class)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
-    builder_method def description(text = nil, **attrs, &block)
-      div(**mattr(attrs, class: description_class, data: {slot: "text"})) do
-        text_or_block(text, &block)
+    def description(text = nil, **attrs, &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

data/app/components/nitro_kit/form_builder.rb

@@ -57,6 +57,10 @@ 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))
@@ -68,20 +72,19 @@ module NitroKit
     # Buttons
 
     def submit(value = nil, **attrs, &block)
-      if value
-        content = value
-      elsif block_given?
-        content = @template.capture(&block)
-      else
-        content = I18n.t("save_changes")
+      if value.nil? && !block_given?
+        value = "Save changes"
       end
 
-      @template.render(NitroKit::Button.new(variant: :primary, type: :submit, **attrs)) { content }
+      @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/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

data/app/components/nitro_kit/pagination.rb

@@ -16,55 +16,63 @@ module NitroKit
       end
     end
 
-    builder_method def prev(text = nil, **attrs, &block)
-      page_link(**mattr(attrs, aria: {label: "Previous page"})) do
-        if text || block_given?
-          text_or_block(text, &block)
-        else
-          render(Icon.new("arrow-left"))
-          plain("Previous")
+    def prev(text = nil, **attrs, &block)
+      builder do
+        page_link(**mattr(attrs, aria: {label: "Previous page"})) do
+          if text || block_given?
+            text_or_block(text, &block)
+          else
+            render(Icon.new("arrow-left"))
+            plain("Previous")
+          end
         end
       end
     end
 
-    builder_method def next(text = nil, **attrs, &block)
-      page_link(**mattr(attrs, aria: {label: "Next page"})) do
-        if text || block_given?
-          text_or_block(text, &block)
-        else
-          plain("Next")
-          render(Icon.new("arrow-right"))
+    def next(text = nil, **attrs, &block)
+      builder do
+        page_link(**mattr(attrs, aria: {label: "Next page"})) do
+          if text || block_given?
+            text_or_block(text, &block)
+          else
+            plain("Next")
+            render(Icon.new("arrow-right"))
+          end
         end
       end
     end
 
-    builder_method def page(text = nil, current: false, **attrs, &block)
-      page_link(
-        **mattr(
-          attrs,
-          aria: {
-            current: current ? "page" : nil
-          },
-          disabled: current,
-          class: [page_class, current && "bg-zinc-200/50 dark:bg-zinc-800/50"]
-        )
-      ) do
-        text_or_block(text, &block)
+    def page(text = nil, current: false, **attrs, &block)
+      builder do
+        page_link(
+          **mattr(
+            attrs,
+            aria: {
+              current: current ? "page" : nil
+            },
+            disabled: current,
+            class: [page_class, current && "bg-zinc-200/50 dark:bg-zinc-800/50"]
+          )
+        ) do
+          text_or_block(text, &block)
+        end
       end
     end
 
-    builder_method def ellipsis(**attrs)
-      render(
-        Button.new(
-          **mattr(
-            attrs,
-            variant: :ghost,
-            disabled: true,
-            class: page_class
+    def ellipsis(**attrs)
+      builder do
+        render(
+          Button.new(
+            **mattr(
+              attrs,
+              variant: :ghost,
+              disabled: true,
+              class: page_class
+            )
           )
-        )
-      ) do
-        "…"
+        ) do
+          "…"
+        end
       end
     end
 

data/app/components/nitro_kit/radio_button.rb

@@ -68,7 +68,7 @@ module NitroKit
       when :md
         "[&>input]:size-5 [&>svg]:size-2.5"
       when :lg
-        "[&>input]:size-7 [&>svg]:size-[calc(var(--spacing)*3+1px)]"
+        "[&>input]:size-7 [&>svg]:size-3.5"
       else
         raise ArgumentError, "Unknown size `#{size}'"
       end

data/app/components/nitro_kit/radio_button_group.rb

@@ -2,8 +2,8 @@
 
 module NitroKit
   class RadioButtonGroup < Component
-    def initialize(options = nil, name: nil, value: nil, **attrs)
-      @options = options
+    def initialize(options_arg = nil, options: [], name: nil, value: nil, **attrs)
+      @options = options_arg || options
 
       @name = name
       @group_value = value
@@ -27,26 +27,30 @@ module NitroKit
       end
     end
 
-    builder_method def title(text = nil, **attrs, &block)
-      render(Label.new(**attrs)) do
-        text_or_block(text, &block)
+    def title(text = nil, **attrs, &block)
+      builder do
+        render(Label.new(**attrs)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
-    builder_method def item(text = nil, value_as_arg = nil, value: nil, **attrs, &block)
-      value ||= value_as_arg
-
-      render(
-        RadioButton.new(
-          **mattr(
-            attrs,
-            name: attrs.fetch(:name, name),
-            value:,
-            checked: group_value.presence == value
+    def item(text = nil, value_as_arg = nil, value: nil, **attrs, &block)
+      builder do
+        value ||= value_as_arg
+
+        render(
+          RadioButton.new(
+            **mattr(
+              attrs,
+              name: attrs.fetch(:name, name),
+              value:,
+              checked: group_value.presence == value
+            )
           )
-        )
-      ) do
-        text_or_block(text, &block)
+        ) do
+          text_or_block(text, &block)
+        end
       end
     end
   end

data/app/components/nitro_kit/select.rb

@@ -30,14 +30,16 @@ module NitroKit
 
     alias :html_option :option
 
-    builder_method def option(key_or_value = nil, value = nil, **attrs, &block)
-      value ||= key_or_value
+    def option(key_or_value = nil, value = nil, **attrs, &block)
+      builder do
+        value ||= key_or_value
 
-      html_option(value:, selected: @value == value.to_s, **attrs) do
-        if block_given?
-          yield
-        else
-          key_or_value
+        html_option(value:, selected: @value == value.to_s, **attrs) do
+          if block_given?
+            yield
+          else
+            key_or_value
+          end
         end
       end
     end

data/app/components/nitro_kit/table.rb

@@ -23,27 +23,37 @@ module NitroKit
     alias :html_th :th
     alias :html_td :td
 
-    builder_method def thead(**attrs)
-      html_thead(**attrs) { yield }
+    def thead(**attrs)
+      builder do
+        html_thead(**attrs) { yield }
+      end
     end
 
-    builder_method def tbody(**attrs)
-      html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
+    def tbody(**attrs)
+      builder do
+        html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
+      end
     end
 
-    builder_method def tr(**attrs)
-      html_tr(**mattr(attrs, class: "border-b")) { yield }
+    def tr(**attrs)
+      builder do
+        html_tr(**mattr(attrs, class: "border-b")) { yield }
+      end
     end
 
-    builder_method def th(text = nil, align: :left, **attrs, &block)
-      html_th(**mattr(attrs, class: [header_cell_classes, cell_classes, align_classes(align), "font-medium"])) do
-        text_or_block(text, &block)
+    def th(text = nil, align: :left, **attrs, &block)
+      builder do
+        html_th(**mattr(attrs, class: [header_cell_classes, cell_classes, align_classes(align), "font-medium"])) do
+          text_or_block(text, &block)
+        end
       end
     end
 
-    builder_method def td(text = nil, align: nil, **attrs, &block)
-      html_td(**mattr(attrs, class: [cell_classes, align_classes(align)])) do
-        text_or_block(text, &block)
+    def td(text = nil, align: nil, **attrs, &block)
+      builder do
+        html_td(**mattr(attrs, class: [cell_classes, align_classes(align)])) do
+          text_or_block(text, &block)
+        end
       end
     end
 

data/app/components/nitro_kit/tabs.rb

@@ -21,55 +21,61 @@ module NitroKit
       end
     end
 
-    builder_method def tabs(**attrs)
-      div(**mattr, role: "tabtabs", class: tabs_class) do
-        yield
+    def tabs(**attrs)
+      builder do
+        div(**mattr, role: "tabtabs", class: tabs_class) do
+          yield
+        end
       end
     end
 
-    builder_method def tab(key, text = nil, **attrs, &block)
-      button(
-        **mattr(
-          attrs,
-          aria: {
-            selected: (default == key).to_s,
-            controls: tab_id(key, :panel)
-          },
-          class: tab_class,
-          data: {
-            action: "nk--tabs#setActiveTab keydown.left->nk--tabs#prevTab keydown.right->nk--tabs#nextTab",
-            key:,
-            nk__tabs_key_param: key,
-            nk__tabs_target: "tab"
-          },
-          id: tab_id(key, :tab),
-          role: "tab",
-          tabindex: default == key ? 0 : -1
-        )
-      ) do
-        text_or_block(text, &block)
+    def tab(key, text = nil, **attrs, &block)
+      builder do
+        button(
+          **mattr(
+            attrs,
+            aria: {
+              selected: (default == key).to_s,
+              controls: tab_id(key, :panel)
+            },
+            class: tab_class,
+            data: {
+              action: "nk--tabs#setActiveTab keydown.left->nk--tabs#prevTab keydown.right->nk--tabs#nextTab",
+              key:,
+              nk__tabs_key_param: key,
+              nk__tabs_target: "tab"
+            },
+            id: tab_id(key, :tab),
+            role: "tab",
+            tabindex: default == key ? 0 : -1
+          )
+        ) do
+          text_or_block(text, &block)
+        end
       end
     end
 
-    builder_method def panel(key, **attrs)
-      div(
-        **mattr(
-          attrs,
-          aria: {
-            hidden: (default != key).to_s,
-            labelledby: tab_id(key, :tab)
-          },
-          class: panel_class,
-          data: {
-            key:,
-            nk__tabs_target: "panel"
-          },
-          id: tab_id(key, :panel),
-          name: key,
-          role: "tabpanel"
-        )
-      ) do
-        yield
+    def panel(key, **attrs)
+      builder do
+        div(
+          **mattr(
+            attrs,
+            aria: {
+              hidden: (default != key).to_s,
+              labelledby: tab_id(key, :tab)
+            },
+            class: panel_class,
+            data: {
+              key:,
+              nk__tabs_target: "panel"
+            },
+            id: tab_id(key, :panel),
+            name: key,
+            role: "tabpanel"
+          )
+        ) do
+          yield
+        end
       end
     end
 

data/app/components/nitro_kit/textarea.rb

@@ -2,15 +2,19 @@
 
 module NitroKit
   class Textarea < Component
-    def initialize(**attrs)
+    def initialize(value: nil, **attrs)
+      @value = value
+
       super(
         attrs,
         class: default_class
       )
     end
 
+    attr_reader :value
+
     def view_template
-      textarea(**attrs)
+      textarea(**attrs) { plain(value) }
     end
 
     private