nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/components/nitro_kit/button_group.rb

@@ -2,23 +2,75 @@
 
 module NitroKit
   class ButtonGroup < Component
-    def initialize(**attrs)
+    Entry = Data.define(:button, :content)
+
+    def initialize(
+      buttons: [],
+      label: nil,
+      variant: nil,
+      size: nil,
+      id: nil,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil
+    )
+      raise ArgumentError, "buttons must be an Array" unless buttons.is_a?(Array)
+      unless label.nil? || (label.is_a?(String) && !label.strip.empty?)
+        raise ArgumentError, "label must be a non-blank String or nil"
+      end
+      raise ArgumentError, "aria must be a Hash" unless aria.is_a?(Hash)
+
+      @variant = variant && validate_choice!(:variant, variant, Button::VARIANTS)
+      @size = size && validate_choice!(:size, size, Button::SIZES)
+      @entries = []
+      buttons.each { |button| add(button) }
+
       super(
-        attrs,
-        class: [
-          "flex -space-x-px isolate",
-          # Remove rounded corners from middle buttons
-          "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-r-none [&>*:last-child:not(:first-child)]:rounded-l-none",
-          # Put focused button on top
-          "[&>*]:focus:z-10"
-        ]
+        component: :button_group,
+        attributes: { id:, role: "group" },
+        html:,
+        aria: label ? aria.merge(label:) : aria,
+        data:,
+        desperately_need_a_class:
       )
     end
 
     def view_template
-      div(**attrs) do
-        yield
+      yield self if block_given?
+      raise ArgumentError, "ButtonGroup requires at least one Button" if @entries.empty?
+
+      div(**root_attributes) do
+        @entries.each do |entry|
+          render_in_slot(entry.button, :button, &entry.content)
+        end
+      end
+    end
+
+    def add(button, &content)
+      unless button.is_a?(NitroKit::Button)
+        raise ArgumentError, "ButtonGroup accepts only NitroKit::Button children"
       end
+      if @entries.any? { |entry| entry.button.equal?(button) }
+        raise ArgumentError, "ButtonGroup cannot contain the same Button twice"
+      end
+
+      @entries << Entry.new(button:, content:)
+      nil
+    end
+
+    # Declares a member with Button's own signature. Arguments are forwarded
+    # verbatim so the group can never restate a stale copy of Button's
+    # keywords; unknown keywords raise from Button itself. Group-level
+    # variant: and size: fill in only where the member stays silent.
+    def button(*arguments, **options, &content)
+      add(Button.new(*arguments, **member_defaults.merge(options)), &content)
+    end
+
+    private
+
+    def member_defaults
+      { variant: @variant, size: @size }.compact
     end
   end
 end

data/app/components/nitro_kit/button_to.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class ButtonTo < Component
+    include Phlex::Rails::Helpers::FormTag
+
+    METHODS = %i[get post patch put delete].freeze
+
+    def initialize(
+      text = nil,
+      href:,
+      method: :post,
+      variant: :default,
+      size: :md,
+      icon: nil,
+      icon_end: nil,
+      label: nil,
+      id: nil,
+      disabled: false,
+      loading: false,
+      html: {},
+      aria: {},
+      data: {},
+      button_html: {},
+      button_aria: {},
+      button_data: {},
+      desperately_need_a_class: nil
+    )
+      unless href.is_a?(String) && href.present?
+        raise ArgumentError, "ButtonTo href: must be a non-blank String"
+      end
+
+      @text = text
+      @href = href
+      @method = validate_choice!(:method, method.to_s.to_sym, METHODS)
+      @button = Button.new(
+        text,
+        variant:,
+        size:,
+        icon:,
+        icon_end:,
+        label:,
+        type: :submit,
+        disabled:,
+        loading:,
+        html: button_html,
+        aria: button_aria,
+        data: button_data
+      )
+
+      super(
+        component: :button_to,
+        attributes: { id: },
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
+      )
+    end
+
+    attr_reader :href, :method
+
+    def view_template(&block)
+      form_tag(href, method:, **root_attributes) do
+        render_in_slot(@button, :button, &block)
+      end
+    end
+  end
+end

data/app/components/nitro_kit/card.rb

@@ -2,72 +2,69 @@
 
 module NitroKit
   class Card < Component
-    def initialize(**attrs)
+    TITLE_LEVELS = (1..6).freeze
+
+    def initialize(id: nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil)
       super(
-        attrs,
-        class: base_class
+        component: :card,
+        attributes: { id: }.compact,
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
       )
     end
 
     def view_template
-      div(**attrs) do
-        yield
-      end
+      raise ArgumentError, "Card requires a block" unless block_given?
+
+      article(**root_attributes) { yield }
     end
 
-    def title(text = nil, **attrs, &block)
-      builder do
-        h2(**mattr(attrs, class: "text-lg font-bold -mb-2")) do
-          text_or_block(text, &block)
-        end
-      end
+    alias :html_title :title
+    alias :html_body :body
+    alias :html_footer :footer
+
+    def title(text = nil, level: 2, html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      validate_choice!(:level, level, TITLE_LEVELS)
+      require_region!(:title, text, block)
+      public_send(
+        :"h#{level}",
+        **slot_attributes(:title, html:, aria:, data:, desperately_need_a_class:)
+      ) { text_or_block(text, &block) }
     end
 
-    def body(text = nil, **attrs, &block)
-      builder do
-        div(**mattr(attrs, class: "text-muted-content text-sm leading-relaxed")) do
-          text_or_block(text, &block)
-        end
+    def body(text = nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      require_region!(:body, text, block)
+      div(**slot_attributes(:body, html:, aria:, data:, desperately_need_a_class:)) do
+        text_or_block(text, &block)
       end
     end
 
-    def footer(text = nil, **attrs, &block)
-      builder do
-        div(**mattr(attrs, class: "flex gap-2 items-center")) do
-          text_or_block(text, &block)
-        end
+    def footer(text = nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      require_region!(:footer, text, block)
+      html_footer(**slot_attributes(:footer, html:, aria:, data:, desperately_need_a_class:)) do
+        text_or_block(text, &block)
       end
     end
 
-    def divider(**attrs)
-      builder do
-        full_width do
-          hr(**attrs)
-        end
-      end
+    def divider(html: {}, aria: {}, data: {}, desperately_need_a_class: nil)
+      hr(**slot_attributes(:divider, html:, aria:, data:, desperately_need_a_class:))
     end
 
-    def full_width(**attrs)
-      builder do
-        div(**mattr(attrs, data: { slot: "full" }, class: "-mx-(--gap)")) do
-          yield
-        end
-      end
+    def full(html: {}, aria: {}, data: {}, desperately_need_a_class: nil)
+      raise ArgumentError, "Card full requires a block" unless block_given?
+
+      div(**slot_attributes(:full, html:, aria:, data:, desperately_need_a_class:)) { yield }
     end
 
     private
 
-    def base_class
-      [
-        # Configure spacing with breakpoints
-        "[--gap:calc(var(--spacing)*4)] sm:[--gap:calc(var(--spacing)*6)]",
-        # Base styles
-        "flex flex-col items-stretch rounded-lg bg-background border p-(--gap) gap-(--gap) overflow-hidden",
-        # If a `data-slot=full` is the first thing, move it to the top
-        "[&>[data-slot=full]:first-child]:-mt-(--gap)",
-        # Group for hover, focus
-        "group/card"
-      ]
+    def require_region!(name, text, block)
+      return if block
+      return if text.respond_to?(:to_str) && !text.to_str.strip.empty?
+
+      raise ArgumentError, "Card #{name} requires non-blank text or a block"
     end
   end
 end

data/app/components/nitro_kit/checkbox.rb

@@ -2,36 +2,86 @@
 
 module NitroKit
   class Checkbox < Component
-    def initialize(label: nil, id: nil, wrapper: {}, **attrs)
-      @id = id || "nk--" + SecureRandom.hex(4)
-      @label = label
-      @wrapper = wrapper
+    SIZES = %i[md lg].freeze
+
+    def initialize(
+      label: nil,
+      description: nil,
+      id: nil,
+      name: nil,
+      value: "1",
+      unchecked_value: "0",
+      include_hidden: true,
+      checked: false,
+      indeterminate: false,
+      disabled: false,
+      required: false,
+      invalid: false,
+      size: :md,
+      html: {},
+      aria: {},
+      data: {},
+      control_html: {},
+      control_aria: {},
+      control_data: {},
+      desperately_need_a_class: nil
+    )
+      @label = validate_optional_text!(:label, label)
+      @description = validate_optional_text!(:description, description)
+      @id = id
+      @name = name
+      @value = value
+      @unchecked_value = unchecked_value
+      @include_hidden = validate_boolean!(:include_hidden, include_hidden)
+      @checked = validate_boolean!(:checked, checked)
+      @indeterminate = validate_boolean!(:indeterminate, indeterminate)
+      @disabled = validate_boolean!(:disabled, disabled)
+      @required = validate_boolean!(:required, required)
+      @invalid = validate_boolean!(:invalid, invalid)
+      @size = validate_choice!(:size, size, SIZES)
+      @control_html = control_html
+      @control_aria = control_aria
+      @control_data = control_data
+
+      if include_hidden && unchecked_value.nil?
+        raise ArgumentError, "unchecked_value cannot be nil when include_hidden is true"
+      end
+      if description && (!id.is_a?(String) || id.strip.empty?)
+        raise ArgumentError, "checkbox requires a non-blank String id when description is present"
+      end
 
       super(
-        attrs,
-        id: @id,
-        type: "checkbox",
-        class: input_class
+        component: :checkbox,
+        size: @size,
+        attributes: {
+          data: indeterminate_data.merge(disabled: @disabled ? "true" : nil).compact
+        },
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
       )
     end
 
-    alias :html_label :label
+    attr_reader :label, :description, :id, :name, :value, :unchecked_value, :size
 
-    attr_reader :label, :id, :wrapper
+    def view_template(&block)
+      require_accessible_name!(&block)
 
-    def view_template
-      div(**mattr(wrapper, class: wrapper_class)) do
-        html_label(
-          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
-          dash
-        end
+      div(**root_attributes) do
+        render_hidden_control
 
-        if label.present? || block_given?
-          render(Label.new(for: id)) do
-            label || (block_given? ? yield : nil)
+        if label.nil? && !block
+          render_control
+          span(**slot_attributes(:indicator), aria: { hidden: "true" })
+        else
+          render_in_slot(Label.new(for: id), :label) do
+            render_control
+            span(**slot_attributes(:indicator), aria: { hidden: "true" })
+            span(**slot_attributes(:content)) do
+              span(**slot_attributes(:label_text)) { text_or_block(label, &block) }
+              span(**slot_attributes(:description, attributes: { id: description_id })) { plain(description) } if description
+            end
           end
         end
       end
@@ -39,53 +89,56 @@ module NitroKit
 
     private
 
-    def checkmark
-      svg(
-        class: merge_class(svg_class, "invisible"),
-        viewbox: "0 0 16 16",
-        fill: "none",
-        stroke: "currentColor",
-        stroke_linecap: "round",
-        stroke_linejoin: "round",
-        stroke_width: 3,
-        data: { check: "" }
-      ) do |svg|
-        svg.path(d: "M 3 8 L 6 12 L 13 5")
-      end
-    end
+    # The native DOM property is the only checkbox state HTML cannot express, so
+    # it is also the only state the enhancer and the root attribute carry.
+    def indeterminate_data
+      return {} unless @indeterminate
 
-    def dash
-      svg(
-        class: merge_class(svg_class, "invisible"),
-        viewbox: "0 0 16 16",
-        fill: "none",
-        stroke: "currentColor",
-        stroke_linecap: "round",
-        stroke_width: 3,
-        data: { indeterminate: "" }
-      ) do |svg|
-        svg.line(x1: "3", y1: "8", x2: "13", y2: "8")
-      end
+      {
+        controller: "nk--checkable",
+        action: "change->nk--checkable#change",
+        state: "indeterminate",
+        nk__checkable_indeterminate_value: "true"
+      }
     end
 
-    def input_class
-      [
-        "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",
-        "disabled:pointer-events-none"
-      ]
+    def render_hidden_control
+      return unless @include_hidden && name
+
+      render_in_slot(
+        Input.new(
+          type: :hidden,
+          name:,
+          value: unchecked_value,
+          disabled: @disabled,
+          autocomplete: "off"
+        ),
+        :unchecked
+      )
     end
 
-    def svg_class
-      "size-3 text-zinc-50 dark:text-zinc-950 pointer-events-none invisible"
+    def render_control
+      render_in_slot(
+        Input.new(
+          type: :checkbox,
+          id:,
+          name:,
+          value:,
+          checked: @checked,
+          disabled: @disabled,
+          required: @required,
+          html: @control_html,
+          aria: control_aria,
+          data: control_data
+        ),
+        :control
+      )
     end
 
-    def wrapper_class
-      [
-        "isolate inline-flex items-center gap-2",
-        "has-disabled:opacity-70"
-      ]
+    def control_data
+      return @control_data unless @indeterminate
+
+      @control_data.merge(nk__checkable_target: "control")
     end
   end
 end

data/app/components/nitro_kit/checkbox_group.rb

@@ -2,41 +2,150 @@
 
 module NitroKit
   class CheckboxGroup < Component
-    def initialize(options = nil, **attrs)
-      @options = options
+    ORIENTATIONS = %i[vertical horizontal].freeze
+    PRESENTATIONS = %i[list cards].freeze
+
+    alias :html_legend :legend
+
+    def initialize(
+      legend:,
+      options:,
+      name:,
+      value: [],
+      id: nil,
+      description: nil,
+      orientation: :vertical,
+      presentation: :list,
+      unchecked_value: "",
+      include_hidden: true,
+      disabled: false,
+      required: false,
+      size: :md,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil
+    )
+      @legend = validate_text!(:legend, legend)
+      @options = Array(options).map { |choice| Choice.coerce(choice) }.freeze
+      @name = multiple_name(validate_text!(:name, name))
+      @value = Array(value).map(&:to_s).freeze
+      @id = id || deterministic_id(name)
+      @description = validate_optional_text!(:description, description)
+      @orientation = validate_choice!(:orientation, orientation, ORIENTATIONS)
+      @presentation = validate_choice!(:presentation, presentation, PRESENTATIONS)
+      @unchecked_value = unchecked_value
+      @include_hidden = validate_boolean!(:include_hidden, include_hidden)
+      @disabled = validate_boolean!(:disabled, disabled)
+      @required = validate_boolean!(:required, required)
+      @size = validate_choice!(:size, size, Checkbox::SIZES)
+
+      raise ArgumentError, "options cannot be empty" if @options.empty?
+      validate_unique_choices!
+      if include_hidden && unchecked_value.nil?
+        raise ArgumentError, "unchecked_value cannot be nil when include_hidden is true"
+      end
 
       super(
-        attrs,
-        class: "flex items-start flex-col gap-2"
+        component: :checkbox_group,
+        size: @size,
+        attributes: {
+          id: @id,
+          disabled: @disabled,
+          data: {
+            orientation: @orientation,
+            presentation: @presentation,
+            required: @required ? "true" : nil
+          }.compact
+        }.compact,
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
       )
     end
 
-    attr_reader :options
+    attr_reader :legend, :options, :name, :value, :description, :id, :size, :orientation, :presentation
 
     def view_template
-      div(**attrs) do
-        if block_given?
-          yield
-        else
-          options.map { |option| item(*option) }
+      fieldset(**root_attributes) do
+        html_legend(**slot_attributes(:legend)) { plain(legend) }
+        if description
+          p(**slot_attributes(:description, attributes: { id: description_id }.compact)) do
+            plain(description.to_s)
+          end
         end
-      end
-    end
 
-    def title(text = nil, **attrs, &block)
-      builder do
-        render(Label.new(**attrs)) do
-          text_or_block(text, &block)
+        render_hidden_control
+        div(**slot_attributes(:choices)) do
+          options.each_with_index { |choice, index| render_choice(choice, index) }
         end
       end
     end
 
-    def item(text = nil, **attrs, &block)
-      builder do
-        render(Checkbox.new(**attrs)) do
-          text_or_block(text, &block)
-        end
-      end
+    private
+
+    def render_hidden_control
+      return unless @include_hidden
+
+      render_in_slot(
+        Input.new(
+          type: :hidden,
+          name:,
+          value: @unchecked_value,
+          disabled: @disabled,
+          autocomplete: "off"
+        ),
+        :unchecked
+      )
+    end
+
+    # The fieldset and its legend already scope the group description, so a
+    # choice never repeats it through aria-describedby.
+    def render_choice(choice, index)
+      render_in_slot(
+        Checkbox.new(
+          label: choice.label,
+          description: choice.description,
+          id: choice.id || choice_id(index),
+          name:,
+          value: choice.value,
+          include_hidden: false,
+          checked: value.include?(choice.value.to_s),
+          disabled: @disabled || choice.disabled,
+          size:
+        ),
+        :choice
+      )
+    end
+
+    def multiple_name(name)
+      name.end_with?("[]") ? name : "#{name}[]"
+    end
+
+    def deterministic_id(name)
+      derived = name.to_s.gsub(/[^a-zA-Z0-9_-]+/, "_").gsub(/\A_+|_+\z/, "")
+      return derived unless derived.empty?
+
+      raise ArgumentError, "name #{name.inspect} cannot derive an id; pass id:"
+    end
+
+    def choice_id(index)
+      "#{id}-#{index}" if id
+    end
+
+    def validate_text!(name, text)
+      return text if text.is_a?(String) && !text.strip.empty?
+
+      raise ArgumentError, "#{name} must be a non-blank String"
+    end
+
+    def validate_unique_choices!
+      duplicate_value = options.group_by { |choice| choice.value.to_s }.find { |_value, matches| matches.many? }
+      raise ArgumentError, "choice values must be unique" if duplicate_value
+
+      ids = options.each_with_index.filter_map { |choice, index| choice.id || choice_id(index) }
+      raise ArgumentError, "choice ids must be unique" unless ids.uniq.length == ids.length
     end
   end
 end