nitro_kit 0.5.2 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 141423c594eb4edd2084765d1d9852750019ed2f017a604694e250024e96905b
-  data.tar.gz: 0bcd6aa1a87e02c7e2d09ffaa06e9dec1e83c764b73fe71a0ffd460dbfe23647
+  metadata.gz: 48fd5bb40a38df4f675dae9e43f25512fc18331ec77fc1af4a4defbd6b2c6e69
+  data.tar.gz: 1f0cbd3330d866afbe39169042fb7985c39760a8625ff788e01ac9a508537ceb
 SHA512:
-  metadata.gz: 69ec22e2e77d95551809913d4704abae453ffe5a21760d594aea5757bcdb15521c7a04835c0d28708bd411039aff1fdf14bc60f1ae1faf24851fc72e4ea666fb
-  data.tar.gz: a941e992a0171a82198d8d0fe877954facae984fef073338b6045a546905562ec2a93dcff77c95a216256f335393d754736e49e639d8bac82d7ff4cbf1496189
+  metadata.gz: 3a5f656c6ee81fb4a8ab95e1fbc79f8d8231dca1f51aa25c9c175ecd7dd71cfa57fd1202da71e51be864c6678668616852c7de7e3fed15518fc785b1dacc896c
+  data.tar.gz: f1afe2248dc6c83777782f9800006ff88220cb4bedcf9deacfd826efb8ad2a97281b8c845c1024549f71aa26ca93463593ed81c24984109b939dd322caaa3628

data/app/components/nitro_kit/accordion.rb

@@ -16,13 +16,13 @@ module NitroKit
       end
     end
 
-    def item(**attrs)
+    builder_method def item(**attrs)
       div(**attrs) do
         yield
       end
     end
 
-    def trigger(text = nil, **attrs)
+    builder_method def trigger(text = nil, **attrs)
       button(
         **mattr(
           attrs,
@@ -40,7 +40,7 @@ module NitroKit
       end
     end
 
-    def content(**attrs)
+    builder_method def content(**attrs)
       div(
         **mattr(
           attrs,
@@ -78,12 +78,12 @@ module NitroKit
     end
 
     def arrow_class
-      "transition-transform duration-200 text-muted-foreground group-hover/accordion-trigger:text-primary"
+      "transition-transform duration-200 text-muted-content group-hover/accordion-trigger:text-primary"
     end
 
     def chevron_icon
       svg(
-        class: "transition-transform duration-200 size-4 self-center place-self-end mr-2 pointer-events-none text-muted-foreground group-hover/accordion-trigger:text-primary",
+        class: "transition-transform duration-200 size-4 self-center place-self-end mr-2 pointer-events-none text-muted-content group-hover/accordion-trigger:text-primary",
         viewbox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",

data/app/components/nitro_kit/alert.rb

@@ -22,13 +22,13 @@ module NitroKit
       end
     end
 
-    def title(text = nil, **attrs, &block)
+    builder_method def title(text = nil, **attrs, &block)
       h5(**mattr(attrs, class: title_class)) do
         text_or_block(text, &block)
       end
     end
 
-    def description(text = nil, **attrs, &block)
+    builder_method def description(text = nil, **attrs, &block)
       div(**mattr(attrs, class: description_class)) do
         text_or_block(text, &block)
       end

data/app/components/nitro_kit/avatar.rb

@@ -2,6 +2,8 @@
 
 module NitroKit
   class Avatar < Component
+    include Phlex::Rails::Helpers::ImageTag
+
     def initialize(src_arg = nil, src: nil, size: :md, **attrs)
       @src = src_arg || src
       @size = size
@@ -20,8 +22,8 @@ module NitroKit
       end
     end
 
-    def image
-      safe(helpers.image_tag(src, class: image_class))
+    builder_method def image
+      image_tag(src, class: image_class)
     end
 
     private

data/app/components/nitro_kit/badge.rb

@@ -4,10 +4,11 @@ module NitroKit
   class Badge < Component
     VARIANTS = %i[default outline]
 
-    def initialize(text = nil, variant: :default, size: :md, **attrs)
+    def initialize(text = nil, variant: :default, size: :md, color: :gray, **attrs)
       @text = text
       @variant = variant
       @size = size
+      @color = color
 
       super(
         attrs,
@@ -19,7 +20,7 @@ module NitroKit
       )
     end
 
-    attr_reader :text, :variant, :size
+    attr_reader :text, :variant, :size, :color
 
     def view_template(&block)
       span(**attrs) do
@@ -30,13 +31,13 @@ module NitroKit
     private
 
     def base_class
-      "inline-flex items-center gap-x-1.5 rounded-md font-medium"
+      "inline-flex items-center gap-x-1.5 rounded-md font-medium whitespace-nowrap"
     end
 
     def variant_class
       case variant
       when :default
-        "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
+        color_class
       when :outline
         "border"
       else
@@ -54,5 +55,48 @@ module NitroKit
         raise ArgumentError, "Invalid size: #{size}"
       end
     end
+
+    def color_class
+      case color
+      when :gray
+        "text-zinc-700 dark:text-zinc-200 bg-zinc-400/15 dark:bg-zinc-400/40"
+      when :red
+        "text-red-900 dark:text-red-200 bg-red-300/50 dark:bg-red-400/40"
+      when :orange
+        "text-orange-700 dark:text-orange-200 bg-orange-400/20 dark:bg-orange-400/40"
+      when :amber
+        "text-amber-700 dark:text-amber-200 bg-amber-400/20 dark:bg-amber-400/40"
+      when :yellow
+        "text-yellow-900 dark:text-yellow-200 bg-yellow-400/40 dark:bg-yellow-400/40"
+      when :lime
+        "text-lime-700 dark:text-lime-200 bg-lime-400/20 dark:bg-lime-400/40"
+      when :green
+        "text-green-800 dark:text-green-200 bg-green-500/20 dark:bg-green-400/40"
+      when :emerald
+        "text-emerald-700 dark:text-emerald-200 bg-emerald-400/20 dark:bg-emerald-400/40"
+      when :teal
+        "text-teal-700 dark:text-teal-200 bg-teal-400/20 dark:bg-teal-400/40"
+      when :cyan
+        "text-cyan-700 dark:text-cyan-200 bg-cyan-400/20 dark:bg-cyan-400/40"
+      when :sky
+        "text-sky-700 dark:text-sky-200 bg-sky-400/20 dark:bg-sky-400/40"
+      when :blue
+        "text-blue-700 dark:text-blue-200 bg-blue-400/20 dark:bg-blue-400/40"
+      when :indigo
+        "text-indigo-700 dark:text-indigo-200 bg-indigo-400/20 dark:bg-indigo-400/40"
+      when :violet
+        "text-violet-700 dark:text-violet-200 bg-violet-400/20 dark:bg-violet-400/40"
+      when :purple
+        "text-purple-700 dark:text-purple-200 bg-purple-400/20 dark:bg-purple-400/40"
+      when :fuchsia
+        "text-fuchsia-700 dark:text-fuchsia-200 bg-fuchsia-400/20 dark:bg-fuchsia-400/40"
+      when :pink
+        "text-pink-700 dark:text-pink-200 bg-pink-400/20 dark:bg-pink-400/40"
+      when :rose
+        "text-rose-700 dark:text-rose-200 bg-rose-400/20 dark:bg-rose-400/40"
+      else
+        raise ArgumentError, "Unknown color `#{color}'"
+      end
+    end
   end
 end

data/app/components/nitro_kit/button.rb

@@ -105,7 +105,7 @@ module NitroKit
         [
           "bg-transparent text-foreground border-transparent",
           "hover:bg-zinc-200/50 dark:hover:bg-zinc-900",
-          "disabled:text-muted-foreground"
+          "disabled:text-muted-content"
         ]
       else
         raise ArgumentError, "Unknown variant `#{variant}'"
@@ -118,7 +118,7 @@ module NitroKit
         "px-1.5 h-6 text-xs [&_svg]:size-3"
       when :sm
         [
-          "px-2.5 h-7 text-sm [&_svg]:size-3",
+          "px-2.5 h-7 text-sm [&_svg]:size-4",
           "[&_svg:first-child:last-child]:-mx-1"
         ]
       when :md

data/app/components/nitro_kit/card.rb

@@ -15,31 +15,31 @@ module NitroKit
       end
     end
 
-    def title(text = nil, **attrs, &block)
+    builder_method def title(text = nil, **attrs, &block)
       h2(**mattr(attrs, class: "text-lg font-bold -mb-2")) do
         text_or_block(text, &block)
       end
     end
 
-    def body(text = nil, **attrs, &block)
-      div(**mattr(attrs, class: "text-muted-foreground text-sm leading-relaxed")) do
+    builder_method def body(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: "text-muted-content text-sm leading-relaxed")) do
         text_or_block(text, &block)
       end
     end
 
-    def footer(text = nil, **attrs, &block)
+    builder_method def footer(text = nil, **attrs, &block)
       div(**mattr(attrs, class: "flex gap-2 items-center")) do
         text_or_block(text, &block)
       end
     end
 
-    def divider(**attrs)
+    builder_method def divider(**attrs)
       full_width do
         hr(**attrs)
       end
     end
 
-    def full_width(**attrs)
+    builder_method def full_width(**attrs)
       div(**mattr(attrs, data: {slot: "full"}, class: "-mx-(--gap)")) do
         yield
       end

data/app/components/nitro_kit/checkbox.rb

@@ -1,8 +1,9 @@
 module NitroKit
   class Checkbox < Component
-    def initialize(label: nil, id: nil, **attrs)
+    def initialize(label: nil, id: nil, wrapper: {}, **attrs)
       @id = id || "nk--" + SecureRandom.hex(4)
       @label = label
+      @wrapper = wrapper
 
       super(
         attrs,
@@ -14,12 +15,12 @@ module NitroKit
 
     alias :html_label :label
 
-    attr_reader :label, :id
+    attr_reader :label, :id, :wrapper
 
     def view_template
-      div(class: wrapper_class) do
+      div(**mattr(wrapper, class: wrapper_class)) do
         html_label(
-          class: "inline-grid *:[grid-area:1/1] shrink-0 place-items-center group/checkbox"
+          class: "inline-grid *:[grid-area:1/1] shrink-0 place-items-center group/checkbox has-checked:not-has-indeterminate:[&>[data-check]]:visible has-indeterminate:[&>[data-indeterminate]]:visible"
         ) do
           input(**attrs)
           checkmark
@@ -27,7 +28,9 @@ module NitroKit
         end
 
         if label.present? || block_given?
-          render(Label.new(for: id)) { label || yield }
+          render(Label.new(for: id)) do
+            label || (block_given? ? yield : nil)
+          end
         end
       end
     end
@@ -36,13 +39,14 @@ module NitroKit
 
     def checkmark
       svg(
-        class: merge_class(svg_class, "group-has-[:checked]/checkbox:visible"),
+        class: merge_class(svg_class, "invisible"),
         viewbox: "0 0 16 16",
         fill: "none",
         stroke: "currentColor",
         stroke_linecap: "round",
         stroke_linejoin: "round",
-        stroke_width: 3
+        stroke_width: 3,
+        data: {check: ""}
       ) do |svg|
         svg.path(d: "M 3 8 L 6 12 L 13 5")
       end
@@ -50,12 +54,13 @@ module NitroKit
 
     def dash
       svg(
-        class: merge_class(svg_class, "group-has-[:indeterminate]/checkbox:visible"),
+        class: merge_class(svg_class, "invisible"),
         viewbox: "0 0 16 16",
         fill: "none",
         stroke: "currentColor",
         stroke_linecap: "round",
-        stroke_width: 3
+        stroke_width: 3,
+        data: {indeterminate: ""}
       ) do |svg|
         svg.line(x1: "3", y1: "8", x2: "13", y2: "8")
       end
@@ -65,16 +70,20 @@ module NitroKit
       [
         "appearance-none shadow-sm size-4 rounded-sm border text-foreground",
         "checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-2 ring-offset-background"
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-2 ring-offset-background",
+        "disabled:pointer-events-none"
       ]
     end
 
     def svg_class
-      "size-3 text-zinc-50 [&>svg]:size-full dark:text-zinc-950 pointer-events-none invisible"
+      "size-3 text-zinc-50 dark:text-zinc-950 pointer-events-none invisible"
     end
 
     def wrapper_class
-      "isolate inline-flex items-center gap-2"
+      [
+        "isolate inline-flex items-center gap-2",
+        "has-disabled:opacity-70"
+      ]
     end
   end
 end

data/app/components/nitro_kit/checkbox_group.rb

@@ -23,13 +23,13 @@ module NitroKit
       end
     end
 
-    def title(text = nil, **attrs, &block)
+    builder_method def title(text = nil, **attrs, &block)
       render(Label.new(**attrs)) do
         text_or_block(text, &block)
       end
     end
 
-    def item(text = nil, **attrs, &block)
+    builder_method def item(text = nil, **attrs, &block)
       render(Checkbox.new(**attrs)) do
         text_or_block(text, &block)
       end

data/app/components/nitro_kit/combobox.rb

@@ -67,7 +67,7 @@ module NitroKit
         }
       ) do
         span(class: wrapper_class) do
-          render(Input.new(**attrs))
+          render(Input.new(**attrs, value: display_value))
           chevron_icon
         end
 
@@ -76,6 +76,7 @@ module NitroKit
         input(
           type: "hidden",
           value: attrs[:value],
+          name: attrs[:name],
           data: {nk__combobox_target: "hiddenField"}
         )
 
@@ -102,6 +103,14 @@ module NitroKit
       "#{@id}-#{suffix}"
     end
 
+    def display_value
+      selected = options.find do |(key, value)|
+        value.to_s == attrs[:value].to_s
+      end
+
+      selected&.first || attrs[:value]
+    end
+
     def wrapper_class
       "inline-grid *:[grid-area:1/1] group/combobox"
     end
@@ -125,7 +134,7 @@ module NitroKit
 
     def chevron_icon
       svg(
-        class: "size-4 self-center place-self-end mr-2 pointer-events-none text-muted-foreground group-hover/combobox:text-foreground",
+        class: "size-4 self-center place-self-end mr-2 pointer-events-none text-muted-content group-hover/combobox:text-foreground",
         viewbox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",

data/app/components/nitro_kit/component.rb

@@ -10,20 +10,46 @@ module NitroKit
 
     private
 
+    # Class-level helper method for builder style components.
+    # When called from erb or templates, we need to wrap the return value
+    # in capture so we don't write to the output buffer immediately.
+    # However when called from other components, we don't.
+    def self.builder_method(method_name)
+      mod = Module.new
+      mod.module_eval(
+        <<~RUBY,
+          # frozen_string_literal: true
+
+          def #{method_name}(...)
+            if caller_locations(1, 1).first.path.end_with?(".rb")
+              super
+            else
+              capture { super }
+            end
+          end
+        RUBY
+        __FILE__,
+        __LINE__ + 1
+      )
+
+      prepend(mod)
+    end
+
     # Merge attributes with some special cases for matching keys
     def merge_attrs(*hashes, **defaults)
-      defaults.merge(*hashes) do |key, old_value, new_value|
-        case key
-        when :class
-          # Use TailwindMerge to merge class names
-          merge_class(old_value, new_value)
-        when :data
-          # Merge data hashes with some special cases for Stimulus
-          merge_data(old_value, new_value)
-        else
-          new_value
+      defaults
+        .merge(*hashes) do |key, old_value, new_value|
+          case key
+          when :class
+            # Use TailwindMerge to merge class names
+            merge_class(old_value, new_value)
+          when :data
+            # Merge data hashes with some special cases for Stimulus
+            merge_data(old_value, new_value)
+          else
+            new_value
+          end
         end
-      end
     end
 
     alias :mattr :merge_attrs
@@ -34,17 +60,19 @@ module NitroKit
     end
 
     def merge_data(*hashes)
-      hashes.compact.reduce({}) do |acc, hash|
-        acc.deep_merge(hash) do |key, old_val, new_val|
-          # Concat Stimulus actions
-          case key
-          when :action, :controller
-            [new_val, old_val].compact.join(" ")
-          else
-            new_val
+      hashes
+        .compact
+        .reduce({}) do |acc, hash|
+          acc.deep_merge(hash) do |key, old_val, new_val|
+            # Concat Stimulus actions
+            case key
+            when :action, :controller
+              [new_val, old_val].compact.join(" ")
+            else
+              new_val
+            end
           end
         end
-      end
     end
 
     def text_or_block(text = nil, &block)

data/app/components/nitro_kit/dialog.rb

@@ -19,17 +19,30 @@ 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)
+    builder_method def trigger(text = nil, as: Button, **attrs, &block)
+      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
 
     alias :html_dialog :dialog
 
-    def dialog(**attrs)
+    builder_method def dialog(**attrs)
       html_dialog(
         **mattr(
           attrs,
@@ -45,7 +58,7 @@ module NitroKit
       end
     end
 
-    def close_button(**attrs)
+    builder_method def close_button(**attrs)
       render(
         Button.new(
           **mattr(
@@ -61,18 +74,18 @@ module NitroKit
       end
     end
 
-    def title(text = nil, **attrs, &block)
+    builder_method 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)
       end
     end
 
-    def description(text = nil, **attrs, &block)
+    builder_method def description(text = nil, **attrs, &block)
       div(
         **mattr(
           attrs,
           id: id(:description),
-          class: "text-muted-foreground mb-6 text-sm leading-relaxed"
+          class: "text-muted-content mb-6 text-sm leading-relaxed"
         )
       ) do
         text_or_block(text, &block)

data/app/components/nitro_kit/dropdown.rb

@@ -26,7 +26,7 @@ module NitroKit
       end
     end
 
-    def trigger(text = nil, as: NitroKit::Button, **attrs, &block)
+    builder_method def trigger(text = nil, as: NitroKit::Button, **attrs, &block)
       trigger_attrs = mattr(
         attrs,
         aria: {haspopup: "true", expanded: "false"},
@@ -45,7 +45,7 @@ module NitroKit
       end
     end
 
-    def content(as: :div, **attrs)
+    builder_method def content(as: :div, **attrs)
       div(
         **mattr(
           attrs,
@@ -60,13 +60,13 @@ module NitroKit
       end
     end
 
-    def title(text = nil, **attrs, &block)
+    builder_method def title(text = nil, **attrs, &block)
       div(**mattr(attrs, class: title_class)) do
         text_or_block(text, &block)
       end
     end
 
-    def item(text = nil, href: nil, variant: :default, **attrs, &block)
+    builder_method def item(text = nil, href: nil, variant: :default, **attrs, &block)
       common_attrs = mattr(
         attrs,
         role: "menuitem",
@@ -85,26 +85,30 @@ module NitroKit
       end
     end
 
-    def item_to(
+    builder_method def item_to(
       text_or_href,
       href = nil,
       **attrs,
       &block
     )
-      href = text_or_href if block_given?
+      if block_given?
+        href = text_or_href
+        text_or_href = nil
+      end
+
       item(text_or_href, href: href, **attrs, &block)
     end
 
-    def destructive_item(*args, **attrs, &block)
+    builder_method def destructive_item(*args, **attrs, &block)
       item(*args, **attrs, variant: :destructive, &block)
     end
 
-    def destructive_item_to(text_or_block, href = nil, **attrs, &block)
+    builder_method 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)
     end
 
-    def separator
+    builder_method def separator
       hr(class: separator_class)
     end
 
@@ -124,7 +128,7 @@ 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

data/app/components/nitro_kit/field.rb

@@ -9,6 +9,8 @@ module NitroKit
       label: nil,
       description: nil,
       errors: nil,
+      wrapper: {},
+      options: nil,
       **attrs
     )
       @form = form
@@ -18,16 +20,18 @@ module NitroKit
       @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,
+        wrapper,
         data: {as: @as},
         class: base_class
       )
@@ -56,7 +60,7 @@ module NitroKit
 
     alias :html_label :label
 
-    def label(text = nil, **attrs)
+    builder_method def label(text = nil, **attrs)
       text ||= field_label
 
       return unless text
@@ -66,7 +70,7 @@ module NitroKit
       end
     end
 
-    def description(text = nil, **attrs, &block)
+    builder_method def description(text = nil, **attrs, &block)
       text ||= field_description
 
       return unless text || block_given?
@@ -76,7 +80,7 @@ module NitroKit
       end
     end
 
-    def errors(error_messages = nil, **attrs)
+    builder_method def errors(error_messages = nil, **attrs)
       error_messages ||= field_error_messages
 
       return unless error_messages&.any?
@@ -88,7 +92,7 @@ module NitroKit
       end
     end
 
-    def control(**attrs)
+    builder_method def control(**attrs)
       case as
       when :string
         input(**attrs)
@@ -199,6 +203,7 @@ module NitroKit
     def checkbox(**attrs)
       render(
         Checkbox.new(
+          checked: checked?,
           **control_attrs(
             **field_attrs,
             **attrs
@@ -256,11 +261,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 +289,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

@@ -22,13 +22,13 @@ module NitroKit
 
     alias :html_legend :legend
 
-    def legend(text = nil, **attrs, &block)
+    builder_method def legend(text = nil, **attrs, &block)
       html_legend(**mattr(attrs, class: legend_class)) do
         text_or_block(text, &block)
       end
     end
 
-    def description(text = nil, **attrs, &block)
+    builder_method def description(text = nil, **attrs, &block)
       div(**mattr(attrs, class: description_class, data: {slot: "text"})) do
         text_or_block(text, &block)
       end
@@ -45,7 +45,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,10 +57,25 @@ module NitroKit
         end
       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)
+    def submit(value = nil, **attrs, &block)
+      if value
+        content = value
+      elsif block_given?
+        content = @template.capture(&block)
+      else
+        content = I18n.t("save_changes")
+      end
+
       @template.render(NitroKit::Button.new(variant: :primary, type: :submit, **attrs)) { content }
     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/pagination.rb

@@ -16,7 +16,7 @@ module NitroKit
       end
     end
 
-    def prev(text = nil, **attrs, &block)
+    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)
@@ -27,7 +27,7 @@ module NitroKit
       end
     end
 
-    def next(text = nil, **attrs, &block)
+    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)
@@ -38,7 +38,7 @@ module NitroKit
       end
     end
 
-    def page(text = nil, current: false, **attrs, &block)
+    builder_method def page(text = nil, current: false, **attrs, &block)
       page_link(
         **mattr(
           attrs,
@@ -53,7 +53,7 @@ module NitroKit
       end
     end
 
-    def ellipsis(**attrs)
+    builder_method def ellipsis(**attrs)
       render(
         Button.new(
           **mattr(
@@ -88,7 +88,7 @@ module NitroKit
     end
 
     def link_class
-      "inline-flex items-center justify-center rounded-md border font-medium h-9 px-3 gap-2 border-transparent aria-disabled:text-muted-foreground [&>svg]:size-4"
+      "inline-flex items-center justify-center rounded-md border font-medium h-9 px-3 gap-2 border-transparent aria-disabled:text-muted-content [&>svg]:size-4"
     end
 
     def page_class

data/app/components/nitro_kit/radio_button.rb

@@ -2,34 +2,27 @@
 
 module NitroKit
   class RadioButton < Component
-    def initialize(label: nil, **attrs)
+    def initialize(label: nil, id: nil, wrapper: {}, size: :md, **attrs)
       @label = label
-      @id = id || SecureRandom.hex(4)
-
-      @class = attrs.delete(:class)
+      @id = id || "nk--" + SecureRandom.hex(4)
+      @size = size
+      @wrapper = wrapper
 
       super(
         attrs,
-        type: "radio",
         id: @id,
-        class: [
-          "peer appearance-none size-5 shadow-sm rounded-full border text-foreground bg-background",
-          "[&[aria-checked='true']]:bg-primary",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        ]
+        type: "radio",
+        class: input_class
       )
     end
 
     alias :html_label :label
 
-    attr_reader(
-      :id,
-      :label
-    )
+    attr_reader :id, :label, :size, :wrapper
 
     def view_template
-      div(class: merge_class("inline-flex items-center gap-2", @class)) do
-        html_label(class: "inline-grid *:[grid-area:1/1] place-items-center") do
+      div(**mattr(wrapper, class: wrapper_class)) do
+        html_label(class: merge_class("inline-grid *:[grid-area:1/1] shrink-0 place-items-center", size_class)) do
           input(**attrs)
           dot
         end
@@ -47,8 +40,7 @@ module NitroKit
     def dot
       svg(
         class: merge_class(
-          "row-start-1 col-start-1",
-          "size-2.5 text-primay opacity-0 pointer-events-none",
+          "text-primary opacity-0 pointer-events-none",
           "peer-checked:opacity-100"
         ),
         viewbox: "0 0 20 20",
@@ -58,5 +50,28 @@ module NitroKit
         svg.circle(cx: 10, cy: 10, r: 10)
       end
     end
+
+    def wrapper_class
+      "inline-flex items-center gap-2"
+    end
+
+    def input_class
+      [
+        "peer appearance-none shadow-sm rounded-full border text-foreground bg-background",
+        "[&[aria-checked='true']]:bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ]
+    end
+
+    def size_class
+      case size
+      when :md
+        "[&>input]:size-5 [&>svg]:size-2.5"
+      when :lg
+        "[&>input]:size-7 [&>svg]:size-[calc(var(--spacing)*3+1px)]"
+      else
+        raise ArgumentError, "Unknown size `#{size}'"
+      end
+    end
   end
 end

data/app/components/nitro_kit/radio_button_group.rb

@@ -27,13 +27,13 @@ module NitroKit
       end
     end
 
-    def title(text = nil, **attrs, &block)
+    builder_method def title(text = nil, **attrs, &block)
       render(Label.new(**attrs)) do
         text_or_block(text, &block)
       end
     end
 
-    def item(text = nil, value_as_arg = nil, value: nil, **attrs, &block)
+    builder_method def item(text = nil, value_as_arg = nil, value: nil, **attrs, &block)
       value ||= value_as_arg
 
       render(

data/app/components/nitro_kit/select.rb

@@ -4,7 +4,7 @@ module NitroKit
   class Select < Component
     def initialize(options = nil, value: nil, include_empty: false, prompt: nil, index: nil, **attrs)
       @options = options
-      @value = value
+      @value = value.to_s
       @include_empty = include_empty
       @prompt = prompt
       @index = index
@@ -30,10 +30,10 @@ module NitroKit
 
     alias :html_option :option
 
-    def option(key_or_value = nil, value = nil, **attrs, &block)
+    builder_method def option(key_or_value = nil, value = nil, **attrs, &block)
       value ||= key_or_value
 
-      html_option(**attrs, selected: @value == value) do
+      html_option(value:, selected: @value == value.to_s, **attrs) do
         if block_given?
           yield
         else
@@ -58,7 +58,7 @@ module NitroKit
 
     def chevron_icon
       svg(
-        class: "size-4 self-center place-self-end mr-1.5 text-muted-foreground pointer-events-none group-hover/select:text-foreground",
+        class: "size-4 self-center place-self-end mr-1.5 text-muted-content pointer-events-none group-hover/select:text-foreground",
         viewbox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",

data/app/components/nitro_kit/table.rb

@@ -10,7 +10,7 @@ module NitroKit
     end
 
     def view_template
-      div(class: "relative w-full overflow-auto") do
+      div(class: "w-full overflow-x-scroll") do
         table(**attrs) do
           yield
         end
@@ -23,34 +23,51 @@ module NitroKit
     alias :html_th :th
     alias :html_td :td
 
-    def thead(**attrs)
+    builder_method def thead(**attrs)
       html_thead(**attrs) { yield }
     end
 
-    def tbody(**attrs)
+    builder_method def tbody(**attrs)
       html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
     end
 
-    def tr(**attrs)
+    builder_method def tr(**attrs)
       html_tr(**mattr(attrs, class: "border-b")) { yield }
     end
 
-    def th(text = nil, **attrs, &block)
-      html_th(**mattr(attrs, class: [cell_classes, "font-medium text-left"])) do
+    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)
       end
     end
 
-    def td(text = nil, **attrs, &block)
-      html_td(**mattr(attrs, class: cell_classes)) do
+    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)
       end
     end
 
     private
 
+    def header_cell_classes
+      ""
+    end
+
     def cell_classes
-      "py-3 px-2"
+      "whitespace-nowrap py-2 min-h-10 px-2"
+    end
+
+    def align_classes(align = nil)
+      case align
+      when :left
+        "text-left"
+      when :center
+        "text-center"
+      when :right
+        "text-right"
+      else
+        nil
+      end
     end
   end
 end

data/app/components/nitro_kit/tabs.rb

@@ -21,13 +21,13 @@ module NitroKit
       end
     end
 
-    def tabs(**attrs)
+    builder_method def tabs(**attrs)
       div(**mattr, role: "tabtabs", class: tabs_class) do
         yield
       end
     end
 
-    def tab(key, text = nil, **attrs, &block)
+    builder_method def tab(key, text = nil, **attrs, &block)
       button(
         **mattr(
           attrs,
@@ -51,7 +51,7 @@ module NitroKit
       end
     end
 
-    def panel(key, **attrs)
+    builder_method def panel(key, **attrs)
       div(
         **mattr(
           attrs,
@@ -88,7 +88,7 @@ module NitroKit
     end
 
     def tab_class
-      "border-b-2 border-transparent hover:border-primary focus-visible:border-primary cursor-pointer text-muted-foreground aria-[selected=true]:text-foreground font-medium aria-[selected=true]:border-primary -mb-px px-2"
+      "border-b-2 border-transparent hover:border-primary focus-visible:border-primary cursor-pointer text-muted-content aria-[selected=true]:text-foreground font-medium aria-[selected=true]:border-primary -mb-px px-2"
     end
 
     def panel_class

data/app/components/nitro_kit/toast.rb

@@ -2,6 +2,25 @@
 
 module NitroKit
   class Toast < Component
+    class FlashMessages < Component
+      def initialize(flash)
+        @flash = flash
+      end
+
+      attr_reader :flash
+
+      def view_template
+        flash.each do |severity, message|
+          render(
+            Toast::Item.new(
+              description: message,
+              variant: severity.to_sym == :alert ? :error : :default
+            )
+          )
+        end
+      end
+    end
+
     class Item < Component
       VARIANTS = %i[default warning error success]
 
@@ -85,13 +104,13 @@ module NitroKit
       end
     end
 
-    def item(title: nil, description: nil, **attrs, &block)
+    builder_method def item(title: nil, description: nil, **attrs, &block)
       render(Item.new(title:, description:, **attrs), &block)
     end
 
-    def flash_sink
+    builder_method def flash_sink
       div(id: "nk--toast-sink", data: {nk__toast_target: "sink"}, hidden: true) do
-        helpers.nk_toast_flash_messages
+        render(FlashMessages.new(view_context.flash))
       end
     end
 

data/app/components/nitro_kit/tooltip.rb

@@ -25,7 +25,7 @@ module NitroKit
       end
     end
 
-    def content(text = nil, **attrs, &block)
+    builder_method def content(text = nil, **attrs, &block)
       div(
         **mattr(
           attrs,

data/app/helpers/nitro_kit/checkbox_helper.rb

@@ -20,6 +20,29 @@ module NitroKit
       render(Checkbox.new(name:, label:, value: compat_checked_value, checked:, **attrs))
     end
 
+    def nk_checkbox_tag(name, *args)
+      if args.length >= 4
+        raise ArgumentError, "wrong number of arguments (given #{args.length + 1}, expected 1..4)"
+      end
+
+      options = args.extract_options!
+      value, checked = args.empty? ? ["1", false] : [*args, false]
+      attrs = {
+        type: "checkbox",
+        name: name,
+        id: sanitize_to_id(name),
+        value: value
+      }.update(
+        options.symbolize_keys
+      )
+
+      attrs[:checked] = "checked" if checked
+
+      render(Checkbox.new(name:, **attrs))
+    end
+
+    alias :nk_check_box_tag :nk_checkbox_tag
+
     def nk_checkbox_group(**attrs, &block)
       render(CheckboxGroup.new(**attrs), &block)
     end

data/app/helpers/nitro_kit/toast_helper.rb

@@ -15,18 +15,7 @@ module NitroKit
     end
 
     def nk_toast_flash_messages
-      capture do
-        flash.each do |severity, message|
-          concat(
-            render(
-              Toast::Item.new(
-                description: message,
-                variant: severity.to_sym == :alert ? :error : :default
-              )
-            )
-          )
-        end
-      end
+      render(Toast::FlashMessages.new(flash))
     end
 
     def nk_toast_turbo_stream_refresh

data/lib/nitro_kit/version.rb

@@ -1,3 +1,3 @@
 module NitroKit
-  VERSION = "0.5.2"
+  VERSION = "0.6.0"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: nitro_kit
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.6.0
 platform: ruby
 authors:
 - Mikkel Malmberg
 bindir: bin
 cert_chain: []
-date: 2025-02-14 00:00:00.000000000 Z
+date: 2025-04-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -43,14 +43,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 2.0.0.beta2
+        version: 2.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 2.0.0.beta2
+        version: 2.1.0
 description: WIP, not usable yet
 email:
 - mikkel@brnbw.com
@@ -58,7 +58,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- MIT-LICENSE
 - README.md
 - Rakefile
 - app/components/nitro_kit/accordion.rb
@@ -157,7 +156,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.3
+rubygems_version: 3.6.6
 specification_version: 4
 summary: WIP, not usable yet
 test_files: []

data/MIT-LICENSE

@@ -1,20 +0,0 @@
-Copyright Mikkel Malmberg
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.