nitro_kit 0.2.0 → 0.3.0

data/app/components/nitro_kit/pagination.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Pagination < Component
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: merge_class(nav_class, attrs[:class]),
+        aria: {label: "Pagination"}
+      )
+    end
+
+    def view_template
+      nav(**attrs) do
+        yield
+      end
+    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")
+        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"))
+        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)
+      end
+    end
+
+    def ellipsis(**attrs)
+      render(
+        Button.new(
+          **mattr(
+            attrs,
+            variant: :ghost,
+            disabled: true,
+            class: page_class
+          )
+        )
+      ) do
+        "…"
+      end
+    end
+
+    private
+
+    def page_link(text = nil, disabled: nil, **attrs)
+      a(
+        **mattr(
+          attrs,
+          role: "link",
+          aria: {disabled: disabled.to_s},
+          class: link_class
+        )
+      ) do
+        yield
+      end
+    end
+
+    def nav_class
+      "flex items-center justify-center gap-1 text-sm font-medium"
+    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"
+    end
+
+    def page_class
+      "w-9 px-0"
+    end
+  end
+end

data/app/components/nitro_kit/radio_button.rb

@@ -1,44 +1,45 @@
+# frozen_string_literal: true
+
 module NitroKit
   class RadioButton < Component
     include ActionView::Helpers::FormTagHelper
 
-    def initialize(name, value:, label: nil, **attrs)
-      super(**attrs)
+    def initialize(label: nil, **attrs)
+      @label = label
+      @id = id || SecureRandom.hex(4)
+
+      @class = attrs.delete(:class)
 
-      @name = name
-      @value = value
-      @label_text = label
-      @id = "#{sanitize_to_id(name)}_#{sanitize_to_id(value)}"
+      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"
+        ]
+      )
     end
 
+    alias :html_label :label
+
     attr_reader(
-      :name,
-      :value,
       :id,
-      :label_text
+      :label
     )
 
     def view_template
-      div(class: merge("inline-flex items-center gap-2", attrs[:class])) do
-        label(class: "grid grid-cols-1 place-items-center shrink-0") do
-          input(
-            **attrs,
-            type: "radio",
-            name:,
-            value:,
-            id:,
-            class: class_names(
-              "peer row-start-1 col-start-1",
-              "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"
-            )
-          )
+      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
+          input(**attrs)
           dot
         end
 
-        if label_text.present?
-          render(Label.new(for: id)) { label_text }
+        if label.present? || block_given?
+          render(Label.new(for: id)) do
+            label || (block_given? ? yield : nil)
+          end
         end
       end
     end
@@ -47,7 +48,7 @@ module NitroKit
 
     def dot
       svg(
-        class: class_names(
+        class: merge_class(
           "row-start-1 col-start-1",
           "size-2.5 text-primay opacity-0 pointer-events-none",
           "peer-checked:opacity-100"

data/app/components/nitro_kit/radio_button_group.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class RadioButtonGroup < Component
+    def initialize(options = nil, name: nil, value: nil, **attrs)
+      @options = options
+
+      @name = name
+      @group_value = value
+
+      super(
+        attrs,
+        name: @name,
+        class: "flex items-start flex-col gap-2"
+      )
+    end
+
+    attr_reader :name, :group_value, :options
+
+    def view_template
+      div(**attrs) do
+        if block_given?
+          yield
+        else
+          options.map { |o| item(*o) }
+        end
+      end
+    end
+
+    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)
+      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)
+      end
+    end
+  end
+end

data/app/components/nitro_kit/select.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Select < Component
+    def initialize(options = nil, value: nil, include_empty: false, prompt: nil, index: nil, **attrs)
+      @options = options
+      @value = value
+      @include_empty = include_empty
+      @prompt = prompt
+      @index = index
+
+      super(
+        attrs,
+        class: wrapper_class
+      )
+    end
+
+    attr_reader :value, :options, :include_empty, :prompts, :index
+
+    def view_template
+      span(class: wrapper_class, data: {slot: "control"}) do
+        select(**attrs, class: select_class) do
+          option if include_empty
+          options ? options.map { |o| option(*o) } : yield
+        end
+
+        chevron_icon
+      end
+    end
+
+    alias :html_option :option
+
+    def option(key_or_value = nil, value = nil, **attrs, &block)
+      value ||= key_or_value
+
+      html_option(**attrs, selected: @value == value) do
+        if block_given?
+          yield
+        else
+          key_or_value
+        end
+      end
+    end
+
+    private
+
+    def wrapper_class
+      "w-fit inline-grid *:[grid-area:1/1] group/select"
+    end
+
+    def select_class
+      [
+        "appearance-none bg-background text-foreground rounded-md border px-3 py-2 pr-10 w-full",
+        # Focus
+        "focus:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2"
+      ]
+    end
+
+    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",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: 1
+      ) do |svg|
+        svg.path(d: "m7 15 5 5 5-5")
+        svg.path(d: "m7 9 5-5 5 5")
+      end
+    end
+  end
+end

data/app/components/nitro_kit/switch.rb

@@ -1,56 +1,32 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Switch < Component
-    BUTTON = [
-      "inline-flex items-center shrink-0",
-      "bg-background rounded-full border",
-      "transition-colors duration-200 ease-in-out",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background",
-
-      # Checked
-      "[&[aria-checked='true']]:bg-foreground [&[aria-checked='true']]:border-foreground",
-
-      # Checked > Handle
-      "[&[aria-checked='false']_[data-slot='handle']]:bg-primary",
-      "[&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.5)-1px)] [&[aria-checked='true']_[data-slot='handle']]:bg-background"
-    ].freeze
-
-    HANDLE = [
-      "pointer-events-none inline-block rounded-full shadow-sm ring-0",
-      "transition translate-x-[3px] duration-200 ease-in-out"
-    ].freeze
-
-    SIZE = {
-      base: "h-6 w-10 [&_[data-slot=handle]]:size-4 [&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.5)-1px)]",
-      sm: "h-5 w-8 [&_[data-slot=handle]]:size-3 [&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.4)-1px)]"
-    }
-
     def initialize(
-      name,
       checked: false,
-      disabled: false,
-      size: :base,
+      size: :md,
       description: nil,
       **attrs
     )
-      super(**attrs)
-
-      @name = name
       @checked = checked
-      @disabled = disabled
       @size = size
       @description = description
+
+      super(**attrs)
     end
 
-    attr_reader :name, :checked, :disabled, :description, :size
+    attr_reader :checked, :description, :size
 
     def view_template
       button(
-        **attrs,
-        type: "button",
-        class: merge([BUTTON, SIZE[size], attrs[:class]]),
-        data: data_merge(attrs[:data], {controller: "nk--switch", action: "nk--switch#toggle"}),
-        role: "switch",
-        aria: {checked: checked.to_s}
+        **mattr(
+          **attrs,
+          type: "button",
+          class: [base_class, size_class],
+          data: {controller: "nk--switch", action: "nk--switch#toggle"},
+          role: "switch",
+          aria: {checked: checked.to_s}
+        )
       ) do
         span(class: "sr-only") { description }
         handle
@@ -60,7 +36,41 @@ module NitroKit
     private
 
     def handle
-      span(aria: {hidden: true}, class: HANDLE, data: {slot: "handle"})
+      span(aria: {hidden: true}, class: handle_class, data: {slot: "handle"})
+    end
+
+    def base_class
+      [
+        "inline-flex items-center shrink-0",
+        "bg-background rounded-full border",
+        "transition-colors duration-200 ease-in-out",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background",
+
+        # Checked
+        "[&[aria-checked=true]]:bg-foreground [&[aria-checked=true]]:border-foreground",
+
+        # Checked > Handle
+        "[&[aria-checked=false]_[data-slot=handle]]:bg-primary",
+        "[&[aria-checked=true]_[data-slot=handle]]:bg-background"
+      ]
+    end
+
+    def handle_class
+      [
+        "pointer-events-none inline-block rounded-full shadow-sm ring-0",
+        "transition translate-x-[3px] duration-200 ease-in-out"
+      ]
+    end
+
+    def size_class
+      case size
+      when :md
+        "h-6 w-10 [&_[data-slot=handle]]:size-4 [&[aria-checked=true]_[data-slot=handle]]:translate-x-[calc(theme(spacing.5)-1px)]"
+      when :sm
+        "h-5 w-8 [&_[data-slot=handle]]:size-3 [&[aria-checked=true]_[data-slot=handle]]:translate-x-[calc(theme(spacing.4)-1px)]"
+      else
+        raise ArgumentError, "Unknown size: #{size}"
+      end
     end
   end
 end

data/app/components/nitro_kit/table.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Table < Component
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: "w-full caption-bottom text-sm divide-y"
+      )
+    end
+
+    def view_template
+      div(class: "relative w-full overflow-auto") do
+        table(**attrs) do
+          yield
+        end
+      end
+    end
+
+    alias :html_thead :thead
+    alias :html_tbody :tbody
+    alias :html_tr :tr
+    alias :html_th :th
+    alias :html_td :td
+
+    def thead(**attrs)
+      html_thead(**attrs) { yield }
+    end
+
+    def tbody(**attrs)
+      html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
+    end
+
+    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
+        text_or_block(text, &block)
+      end
+    end
+
+    def td(text = nil, **attrs, &block)
+      html_td(**mattr(attrs, class: cell_classes)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    private
+
+    def cell_classes
+      "py-3 px-2"
+    end
+  end
+end

data/app/components/nitro_kit/tabs.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Tabs < Component
+    def initialize(default: nil, **attrs)
+      @default = default
+      @id = attrs[:id] || SecureRandom.hex(6)
+
+      super(
+        attrs,
+        data: {controller: "nk--tabs", nk__tabs_active_value: default},
+        class: base_class
+      )
+    end
+
+    attr_reader :default, :id
+
+    def view_template
+      div(**attrs) do
+        yield
+      end
+    end
+
+    def tabs(**attrs)
+      div(**mattr, role: "tabtabs", class: tabs_class) do
+        yield
+      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)
+      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
+      end
+    end
+
+    private
+
+    def tab_id(key, suffix)
+      "#{id}-#{key}-#{suffix}"
+    end
+
+    def base_class
+      "w-full"
+    end
+
+    def tabs_class
+      "flex gap-4 border-b h-10"
+    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"
+    end
+
+    def panel_class
+      "aria-[hidden=true]:hidden py-4"
+    end
+  end
+end

data/app/components/nitro_kit/textarea.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Textarea < Component
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: default_class
+      )
+    end
+
+    def view_template
+      textarea(**attrs)
+    end
+
+    private
+
+    def default_class
+      [
+        "rounded-md border bg-background border-border text-base px-3 py-2",
+        # Focus
+        "focus:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2"
+      ]
+    end
+  end
+end

data/app/components/nitro_kit/toast.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Toast < Component
+    class Item < Component
+      VARIANTS = %i[default warning error success]
+
+      def initialize(title: nil, description: nil, variant: :default, **attrs)
+        @title = title
+        @description = description
+        @variant = variant
+
+        super(
+          **mattr(
+            attrs,
+            class: [
+              base_class,
+              variant_class
+            ],
+            role: "status",
+            aria: {live: "off", atomic: "true"},
+            tabindex: "0",
+            data: {state: "closed"}
+          )
+        )
+      end
+
+      attr_reader :title, :description, :variant
+
+      def view_template(&block)
+        li(**attrs) do
+          div(class: "grid gap-1") do
+            div(class: "text-sm font-semibold", data: {slot: "title"}) do
+              title && plain(title)
+            end
+
+            div(class: "text-sm opacity-90", data: {slot: "description"}) do
+              text_or_block(description, &block)
+            end
+          end
+        end
+      end
+
+      private
+
+      def base_class
+        "shrink-0 pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md p-4 pr-8 shadow-lg transition-all border opacity-0 transition-all data-[state=open]:opacity-100 data-[state=open]:-translate-y-full"
+      end
+
+      def variant_class
+        case variant
+        when :default
+          "border-border bg-background text-foreground"
+        when :warning
+          "bg-yellow-50 dark:bg-yellow-950 text-yellow-900 dark:text-yellow-100 border-yellow-500/80 dark:border-yellow-400/50"
+        when :success
+          "bg-green-50 dark:bg-green-950 text-green-900 dark:text-green-100 border-green-500/80 dark:border-green-400/50"
+        when :error
+          "bg-red-50 dark:bg-red-950 text-red-900 dark:text-red-100 border-red-400/80 dark:border-red-400/50"
+        else
+          raise ArgumentError, "Invalid variant `#{variant}'"
+        end
+      end
+    end
+
+    def initialize(**attrs)
+      super(
+        attrs,
+        role: "region",
+        tabindex: "-1",
+        aria: {label: "Notifications"},
+        class: "pointer-events-none"
+      )
+    end
+
+    def view_template
+      div(**attrs) do
+        ol(class: list_class, data: {nk__toast_target: "list"})
+      end
+
+      flash_sink
+
+      template(data: {nk__toast_target: "template"}) do
+        item
+      end
+    end
+
+    def item(title: nil, description: nil, **attrs, &block)
+      render(Item.new(title:, description:, **attrs), &block)
+    end
+
+    def flash_sink
+      div(id: "nk--toast-sink", data: {nk__toast_target: "sink"}, hidden: true) do
+        helpers.nk_toast_flash_messages
+      end
+    end
+
+    private
+
+    def list_class
+      "fixed z-[100] flex max-h-screen w-full p-5 bottom-0 right-0 flex-col h-0 md:max-w-[420px]"
+    end
+  end
+end