nitro_kit 0.5.2 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 141423c594eb4edd2084765d1d9852750019ed2f017a604694e250024e96905b
-  data.tar.gz: 0bcd6aa1a87e02c7e2d09ffaa06e9dec1e83c764b73fe71a0ffd460dbfe23647
+  metadata.gz: 43de49498356e50a1fbcac794f988fdcb36c4032bea949316aee19483c1b9208
+  data.tar.gz: 3b4d2a3cdaae5730e46a5880e0ed7d05e0d824bda868d4200d76785c14087ca0
 SHA512:
-  metadata.gz: 69ec22e2e77d95551809913d4704abae453ffe5a21760d594aea5757bcdb15521c7a04835c0d28708bd411039aff1fdf14bc60f1ae1faf24851fc72e4ea666fb
-  data.tar.gz: a941e992a0171a82198d8d0fe877954facae984fef073338b6045a546905562ec2a93dcff77c95a216256f335393d754736e49e639d8bac82d7ff4cbf1496189
+  metadata.gz: 62f3abbfcc402e5a97b2223f91f95601655ec3a5f6824514ad27e2160d093fb62f458b6caccee302bd948717a29e8d89c248cc0e7f760ec03e870f06bb1dab00
+  data.tar.gz: f00b678398e9430ca799ca92f5331a1e62a1fb459237929aed658d24a6ec98836adde8617cbc01add48ac7d5bf66834ca5094fb2307378447e265203d2e306a3

data/app/components/nitro_kit/accordion.rb

@@ -17,41 +17,47 @@ module NitroKit
     end
 
     def item(**attrs)
-      div(**attrs) do
-        yield
+      builder do
+        div(**attrs) do
+          yield
+        end
       end
     end
 
     def trigger(text = nil, **attrs)
-      button(
-        **mattr(
-          attrs,
-          type: "button",
-          class: trigger_class,
-          data: {
-            action: "nk--accordion#toggle",
-            nk__accordion_target: "trigger"
-          },
-          aria: {expanded: "false"}
-        )
-      ) do
-        block_given? ? yield : plain(text)
-        chevron_icon
+      builder do
+        button(
+          **mattr(
+            attrs,
+            type: "button",
+            class: trigger_class,
+            data: {
+              action: "nk--accordion#toggle",
+              nk__accordion_target: "trigger"
+            },
+            aria: {expanded: "false"}
+          )
+        ) do
+          block_given? ? yield : plain(text)
+          chevron_icon
+        end
       end
     end
 
     def content(**attrs)
-      div(
-        **mattr(
-          attrs,
-          class: content_class,
-          data: {
-            nk__accordion_target: "content"
-          },
-          aria: {hidden: "true"}
-        )
-      ) do
-        div(class: "pb-4") { yield }
+      builder do
+        div(
+          **mattr(
+            attrs,
+            class: content_class,
+            data: {
+              nk__accordion_target: "content"
+            },
+            aria: {hidden: "true"}
+          )
+        ) do
+          div(class: "pb-4") { yield }
+        end
       end
     end
 
@@ -78,12 +84,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

@@ -23,14 +23,18 @@ module NitroKit
     end
 
     def title(text = nil, **attrs, &block)
-      h5(**mattr(attrs, class: title_class)) do
-        text_or_block(text, &block)
+      builder do
+        h5(**mattr(attrs, class: title_class)) do
+          text_or_block(text, &block)
+        end
       end
     end
 
     def description(text = nil, **attrs, &block)
-      div(**mattr(attrs, class: description_class)) do
-        text_or_block(text, &block)
+      builder do
+        div(**mattr(attrs, class: description_class)) do
+          text_or_block(text, &block)
+        end
       end
     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/avatar_stack.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class AvatarStack < Component
+    def initialize(size: :md, **attrs)
+      @size = size
+
+      super(attrs)
+    end
+
+    attr_reader :size
+
+    def view_template
+      div(**mattr(attrs, class: "flex items-center -space-x-3 [&>div]:ring-2 [&>div]:ring-background")) do
+        yield
+      end
+    end
+
+    builder_method def avatar(*args, **attrs, &block)
+      render(Avatar.new(*args, size:, **attrs, &block))
+    end
+  end
+end

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
@@ -133,6 +133,12 @@ module NitroKit
           # If icon only, make square
           "[&_svg:first-child:last-child]:-mx-2"
         ]
+      when :xl
+        [
+          "px-8 h-14 text-2xl [&_svg]:size-5 gap-x-4",
+          # If icon only, make square
+          "[&_svg:first-child:last-child]:-mx-8"
+        ]
       else
         raise ArgumentError, "Unknown size `#{size}'"
       end

data/app/components/nitro_kit/card.rb

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

data/app/components/nitro_kit/checkbox.rb

@@ -1,8 +1,11 @@
+# frozen_string_literal: true
+
 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 +17,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 +30,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 +41,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 +56,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 +72,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

@@ -24,14 +24,18 @@ 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, **attrs, &block)
-      render(Checkbox.new(**attrs)) do
-        text_or_block(text, &block)
+      builder do
+        render(Checkbox.new(**attrs)) do
+          text_or_block(text, &block)
+        end
       end
     end
   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

@@ -2,28 +2,49 @@
 
 module NitroKit
   class Component < Phlex::HTML
-    def initialize(*hashes, **defaults)
-      @attrs = merge_attrs(*hashes, **defaults)
+    def initialize(attrs = {}, **defaults)
+      @attrs = merge_attrs(attrs, **defaults)
     end
 
     attr_reader :attrs
 
+    def self.from_template(*args, **attrs, &block)
+      new(*args, **attrs, &block).tap { |instance| instance.instance_variable_set(:@_nk_from_template, true) }
+    end
+
+    def builder(&block)
+      @_nk_from_template ? capture(&block) : yield
+    end
+
     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)
+      warn(
+        "[DEPRECATION] builder_method is deprecated. Please migrate to using the builder(&) pattern. See https://github.com/mikker/nitro_kit/issues/35 for details."
+      )
+
+      nil
+    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,22 +55,26 @@ 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)
-      if text
+      if text && text.is_a?(ActiveSupport::SafeBuffer)
         plain(text)
+      elsif text
+        text
       elsif block_given?
         yield
       else