nitro_kit 0.5.2 → 0.7.0

data/app/components/nitro_kit/pagination.rb

@@ -17,54 +17,62 @@ module NitroKit
     end
 
     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")
+      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
 
     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"))
+      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
 
     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)
+      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
 
     def ellipsis(**attrs)
-      render(
-        Button.new(
-          **mattr(
-            attrs,
-            variant: :ghost,
-            disabled: true,
-            class: page_class
+      builder do
+        render(
+          Button.new(
+            **mattr(
+              attrs,
+              variant: :ghost,
+              disabled: true,
+              class: page_class
+            )
           )
-        )
-      ) do
-        "…"
+        ) do
+          "…"
+        end
       end
     end
 
@@ -88,7 +96,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-3.5"
+      else
+        raise ArgumentError, "Unknown size `#{size}'"
+      end
+    end
   end
 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
@@ -28,25 +28,29 @@ module NitroKit
     end
 
     def title(text = nil, **attrs, &block)
-      render(Label.new(**attrs)) do
-        text_or_block(text, &block)
+      builder do
+        render(Label.new(**attrs)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     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
+      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

@@ -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
@@ -31,13 +31,15 @@ module NitroKit
     alias :html_option :option
 
     def option(key_or_value = nil, value = nil, **attrs, &block)
-      value ||= key_or_value
+      builder do
+        value ||= key_or_value
 
-      html_option(**attrs, selected: @value == value) 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
@@ -58,7 +60,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
@@ -24,33 +24,60 @@ module NitroKit
     alias :html_td :td
 
     def thead(**attrs)
-      html_thead(**attrs) { yield }
+      builder do
+        html_thead(**attrs) { yield }
+      end
     end
 
     def tbody(**attrs)
-      html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
+      builder do
+        html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
+      end
     end
 
     def tr(**attrs)
-      html_tr(**mattr(attrs, class: "border-b")) { yield }
+      builder do
+        html_tr(**mattr(attrs, class: "border-b")) { yield }
+      end
     end
 
-    def th(text = nil, **attrs, &block)
-      html_th(**mattr(attrs, class: [cell_classes, "font-medium text-left"])) 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
 
-    def td(text = nil, **attrs, &block)
-      html_td(**mattr(attrs, class: cell_classes)) 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
 
     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

@@ -22,54 +22,60 @@ module NitroKit
     end
 
     def tabs(**attrs)
-      div(**mattr, role: "tabtabs", class: tabs_class) do
-        yield
+      builder do
+        div(**mattr, role: "tabtabs", class: tabs_class) do
+          yield
+        end
       end
     end
 
     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)
+      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
 
     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
+      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
 
@@ -88,7 +94,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/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

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]
 
@@ -86,12 +105,16 @@ module NitroKit
     end
 
     def item(title: nil, description: nil, **attrs, &block)
-      render(Item.new(title:, description:, **attrs), &block)
+      builder do
+        render(Item.new(title:, description:, **attrs), &block)
+      end
     end
 
     def flash_sink
-      div(id: "nk--toast-sink", data: {nk__toast_target: "sink"}, hidden: true) do
-        helpers.nk_toast_flash_messages
+      builder do
+        div(id: "nk--toast-sink", data: {nk__toast_target: "sink"}, hidden: true) do
+          render(FlashMessages.new(view_context.flash))
+        end
       end
     end
 

data/app/components/nitro_kit/tooltip.rb

@@ -26,17 +26,19 @@ module NitroKit
     end
 
     def content(text = nil, **attrs, &block)
-      div(
-        **mattr(
-          attrs,
-          class: tooltip_class,
-          data: {
-            state: "closed",
-            nk__tooltip_target: "content"
-          }
-        )
-      ) do
-        text_or_block(text, &block)
+      builder do
+        div(
+          **mattr(
+            attrs,
+            class: tooltip_class,
+            data: {
+              state: "closed",
+              nk__tooltip_target: "content"
+            }
+          )
+        ) do
+          text_or_block(text, &block)
+        end
       end
     end
 

data/app/helpers/nitro_kit/accordion_helper.rb

@@ -3,7 +3,7 @@
 module NitroKit
   module AccordionHelper
     def nk_accordion(**attrs, &block)
-      render(Accordion.new(**attrs), &block)
+      render(Accordion.from_template(**attrs), &block)
     end
   end
 end

data/app/helpers/nitro_kit/alert_helper.rb

@@ -3,7 +3,7 @@ module NitroKit
     include Variants
 
     def nk_alert(**attrs, &block)
-      render(Alert.new(**attrs), &block)
+      render(Alert.from_template(**attrs), &block)
     end
 
     automatic_variants(Alert::VARIANTS, :nk_alert)

data/app/helpers/nitro_kit/avatar_helper.rb

@@ -3,7 +3,11 @@
 module NitroKit
   module AvatarHelper
     def nk_avatar(src = nil, **attrs, &block)
-      render(Avatar.new(src, **attrs), &block)
+      render(Avatar.from_template(src, **attrs), &block)
+    end
+
+    def nk_avatar_stack(**attrs, &block)
+      render(AvatarStack.from_template(**attrs), &block)
     end
   end
 end

data/app/helpers/nitro_kit/badge_helper.rb

@@ -7,7 +7,7 @@ module NitroKit
     automatic_variants(Badge::VARIANTS, :nk_badge)
 
     def nk_badge(text = nil, **attrs, &block)
-      render(NitroKit::Badge.new(text, **attrs), &block)
+      render(NitroKit::Badge.from_template(text, **attrs), &block)
     end
   end
 end

data/app/helpers/nitro_kit/button_group_helper.rb

@@ -3,7 +3,7 @@
 module NitroKit
   module ButtonGroupHelper
     def nk_button_group(**attrs, &block)
-      render(ButtonGroup.new(**attrs), &block)
+      render(ButtonGroup.from_template(**attrs), &block)
     end
   end
 end

data/app/helpers/nitro_kit/button_helper.rb

@@ -5,7 +5,7 @@ module NitroKit
     include Variants
 
     def nk_button(text = nil, **attrs, &block)
-      render(NitroKit::Button.new(text, **attrs), &block)
+      render(NitroKit::Button.from_template(text, **attrs), &block)
     end
 
     automatic_variants(Button::VARIANTS, :nk_button)
@@ -37,13 +37,13 @@ module NitroKit
 
       href = attrs[:href] || url_target(text, options)
 
-      render(NitroKit::Button.new(text, **attrs, href:), &block)
+      render(NitroKit::Button.from_template(text, **attrs, href:), &block)
     end
 
     automatic_variants(Button::VARIANTS, :nk_button_link_to)
 
     def nk_button_group(**attrs, &block)
-      render(ButtonGroup.new(**attrs), &block)
+      render(ButtonGroup.from_template(**attrs), &block)
     end
   end
 end

data/app/helpers/nitro_kit/card_helper.rb

@@ -3,7 +3,7 @@
 module NitroKit
   module CardHelper
     def nk_card(**attrs, &block)
-      render(Card.new(**attrs), &block)
+      render(Card.from_template(**attrs), &block)
     end
   end
 end