hotwirebits 0.1.0

data/app/components/hotwirebits/date_picker_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DatePickerComponent < Base
+    def initialize(name: nil, value: nil, placeholder: "Pick a date", size: :md, disabled: false, min: nil, max: nil,
+      **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @size = size
+      @disabled = disabled
+      @min = min
+      @max = max
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_with_icon
+      tag.div(class: "relative") do
+        safe_join([
+          tag.div(class: "absolute left-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground") do
+            tag.svg(class: "h-4 w-4", fill: "none", stroke: "currentColor", stroke_width: "2",
+              viewBox: "0 0 24 24") do
+              tag.path(stroke_linecap: "round", stroke_linejoin: "round",
+                d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
+            end
+          end,
+          tag.input(
+            type: "date",
+            name: @name,
+            value: @value,
+            min: @min,
+            max: @max,
+            disabled: @disabled,
+            class: input_classes,
+            data: {action: "focus->hw-datepicker#open"},
+            **@extra_attrs
+          )
+        ])
+      end
+    end
+
+    def input_classes
+      sizes = {sm: "h-8 pl-9 text-xs", md: "h-9 pl-9 text-sm", lg: "h-10 pl-10 text-base"}
+      merge_classes(
+        "flex w-full rounded-md border border-hw-input bg-hw-background text-hw-foreground",
+        "ring-offset-hw-background focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        sizes[@size] || sizes[:md]
+      )
+    end
+
+    def calendar_dropdown
+      tag.div(class: "absolute z-50 mt-1 rounded-md border border-hw-border bg-hw-popover p-3 shadow-md hidden",
+        data: {rb_datepicker_target: "dropdown"}) do
+        tag.p("Calendar", class: "text-sm text-hw-muted-foreground")
+      end
+    end
+  end
+end

data/app/components/hotwirebits/date_range_picker_component.html.erb

@@ -0,0 +1,28 @@
+<div class="relative" data-controller="hw-date-range" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center gap-2">
+    <div class="relative flex-1">
+      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+      <input type="date"
+             name="<%= @name_start %>"
+             value="<%= @start_date %>"
+             placeholder="<%= @placeholder %>"
+             class="w-full h-9 rounded-md border border-hw-input bg-hw-background pl-10 pr-3 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"
+             data-hw-date-range-target="startInput"
+             data-action="change->hw-date-range#update">
+    </div>
+    <span class="text-hw-muted-foreground text-sm">to</span>
+    <div class="relative flex-1">
+      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+      <input type="date"
+             name="<%= @name_end %>"
+             value="<%= @end_date %>"
+             class="w-full h-9 rounded-md border border-hw-input bg-hw-background pl-10 pr-3 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"
+             data-hw-date-range-target="endInput"
+             data-action="change->hw-date-range#update">
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/date_range_picker_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DateRangePickerComponent < Base
+    def initialize(name_start:, name_end:, start_date: nil, end_date: nil, placeholder: "Select date range", **attrs)
+      @name_start = name_start
+      @name_end = name_end
+      @start_date = start_date
+      @end_date = end_date
+      @placeholder = placeholder
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/device_frame_component.html.erb

@@ -0,0 +1,40 @@
+<div class="inline-block" <%= tag.attributes(@extra_attrs) %>>
+  <% case @device %>
+  <% when :phone %>
+    <div class="<%= frame_classes %> <%= border_color %> w-[280px] h-[560px]">
+      <div class="relative h-full">
+        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-black rounded-b-2xl z-10"></div>
+        <div class="h-full pt-6"><%= content %></div>
+      </div>
+    </div>
+  <% when :tablet %>
+    <div class="<%= frame_classes %> <%= border_color %> w-[500px] h-[360px]">
+      <div class="relative h-full">
+        <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+        <div class="h-full pt-4"><%= content %></div>
+      </div>
+    </div>
+  <% when :desktop %>
+    <div>
+      <div class="<%= frame_classes %> <%= border_color %>">
+        <div class="flex items-center gap-2 px-4 py-2.5 bg-hw-muted border-b border-neutral-200">
+          <div class="flex gap-1.5">
+            <div class="h-3 w-3 rounded-full bg-red-400"></div>
+            <div class="h-3 w-3 rounded-full bg-yellow-400"></div>
+            <div class="h-3 w-3 rounded-full bg-green-400"></div>
+          </div>
+        </div>
+        <div class="min-h-[300px]"><%= content %></div>
+      </div>
+      <div class="mx-auto w-24 h-3 bg-hw-muted rounded-b-lg"></div>
+    </div>
+  <% when :watch %>
+    <div class="<%= frame_classes %> <%= border_color %> w-[180px] h-[220px]">
+      <div class="relative h-full">
+        <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-6 h-2 bg-hw-foreground/70 rounded-t-sm"></div>
+        <div class="absolute top-1/4 -right-1 w-1.5 h-6 bg-hw-foreground/70 rounded-r-sm"></div>
+        <div class="h-full"><%= content %></div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/device_frame_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DeviceFrameComponent < Base
+    DEVICES = %i[phone tablet desktop watch].freeze
+    COLORS = %i[black silver gold midnight].freeze
+
+    def initialize(device: :phone, color: :black, **attrs)
+      @device = DEVICES.include?(device) ? device : :phone
+      @color = color
+      @extra_attrs = attrs
+    end
+
+    def frame_classes
+      case @device
+      when :phone
+        "rounded-[2.5rem] border-[10px] overflow-hidden bg-black shadow-xl"
+      when :tablet
+        "rounded-[1.5rem] border-[12px] overflow-hidden bg-black shadow-xl"
+      when :desktop
+        "rounded-lg border border-hw-border overflow-hidden bg-white shadow-xl"
+      when :watch
+        "rounded-[2rem] border-[8px] overflow-hidden bg-black shadow-xl"
+      end
+    end
+
+    def border_color
+      case @color
+      when :silver then "border-hw-border"
+      when :gold then "border-amber-300"
+      when :midnight then "border-hw-border"
+      else "border-hw-foreground"
+      end
+    end
+  end
+end

data/app/components/hotwirebits/device_mockup_component.html.erb

@@ -0,0 +1,51 @@
+<div class="inline-block" <%= tag.attributes(@extra_attrs) %>>
+  <% if @type == :browser %>
+    <div class="flex items-center gap-2 px-4 py-2 bg-hw-foreground/90 rounded-t-lg">
+      <div class="flex gap-1.5">
+        <div class="w-3 h-3 rounded-full bg-hw-destructive"></div>
+        <div class="w-3 h-3 rounded-full bg-hw-warning"></div>
+        <div class="w-3 h-3 rounded-full bg-hw-success"></div>
+      </div>
+      <div class="flex-1 mx-4">
+        <div class="bg-hw-foreground/80 rounded h-5 w-full max-w-xs"></div>
+      </div>
+    </div>
+    <div class="<%= frame_classes %> rounded-t-none">
+      <%= content %>
+    </div>
+  <% elsif @type == :phone %>
+    <div class="<%= frame_classes %>">
+      <% if @device == :iphone %>
+        <div class="relative">
+          <div class="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-black rounded-b-2xl z-10"></div>
+          <div class="pt-6">
+            <%= content %>
+          </div>
+        </div>
+      <% else %>
+        <div class="relative">
+          <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+          <%= content %>
+        </div>
+      <% end %>
+    </div>
+  <% elsif @type == :tablet %>
+    <div class="<%= frame_classes %>">
+      <div class="relative">
+        <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+        <%= content %>
+      </div>
+    </div>
+  <% else %>
+    <div class="<%= frame_classes %>">
+      <div class="flex items-center gap-2 px-4 py-2 bg-hw-foreground/90">
+        <div class="flex gap-1.5">
+          <div class="w-2.5 h-2.5 rounded-full bg-hw-destructive"></div>
+          <div class="w-2.5 h-2.5 rounded-full bg-hw-warning"></div>
+          <div class="w-2.5 h-2.5 rounded-full bg-hw-success"></div>
+        </div>
+      </div>
+      <%= content %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/device_mockup_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DeviceMockupComponent < Base
+    def initialize(type: :browser, device: nil, **attrs)
+      @type = type
+      @device = device
+      @extra_attrs = attrs
+    end
+
+    def frame_classes
+      case @type
+      when :browser
+        "rounded-lg border border-hw-border overflow-hidden bg-hw-background shadow-lg"
+      when :phone
+        phone_classes
+      when :tablet
+        "rounded-[2rem] border-[8px] border-hw-border overflow-hidden bg-black shadow-xl"
+      when :window
+        "rounded-lg border border-hw-border overflow-hidden bg-hw-foreground shadow-lg"
+      end
+    end
+
+    private
+
+    def phone_classes
+      case @device
+      when :android
+        "rounded-[2rem] border-[6px] border-hw-border overflow-hidden bg-black shadow-xl"
+      when :iphone
+        "rounded-[3rem] border-[10px] border-hw-foreground overflow-hidden bg-black shadow-xl"
+      else
+        "rounded-[2rem] border-[8px] border-hw-border overflow-hidden bg-black shadow-xl"
+      end
+    end
+  end
+end

data/app/components/hotwirebits/dialog_component.html.erb

@@ -0,0 +1,41 @@
+<div data-controller="hw-dialog"
+     data-hw-dialog-open-value="<%= @open %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="<%= overlay_classes %>"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="overlay"
+       data-action="click->hw-dialog#close"
+    aria-hidden="true"></div>
+  <div class="<%= dialog_classes %>"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="panel"
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="<%= @title ? 'dialog-title' : nil %>">
+    <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+      <% if header? %>
+        <%= header %>
+      <% elsif @title %>
+        <h2 id="dialog-title" class="text-lg font-semibold leading-none tracking-tight"><%= @title %></h2>
+      <% end %>
+    </div>
+    <div class="text-sm text-hw-muted-foreground">
+      <%= content %>
+    </div>
+    <% if footer? %>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <%= footer %>
+      </div>
+    <% end %>
+    <% if @closable %>
+      <button type="button"
+              class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-hw-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2 disabled:pointer-events-none"
+              data-action="click->hw-dialog#close">
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+        <span class="sr-only">Close</span>
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/dialog_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DialogComponent < Base
+    renders_one :header
+    renders_one :footer
+
+    SIZES = {
+      sm: "max-w-sm",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]"
+    }.freeze
+
+    def initialize(title: nil, size: :md, open: false, closable: true, **attrs)
+      @title = title
+      @size = size
+      @open = open
+      @closable = closable
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def overlay_classes
+      merge_classes(
+        "fixed inset-0 z-50 bg-black/80",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    end
+
+    def dialog_classes
+      merge_classes(
+        "fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
+        "gap-4 border border-hw-border bg-hw-background p-6 shadow-lg duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "rounded-lg",
+        SIZES[@size] || SIZES[:md],
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

data/app/components/hotwirebits/diff_component.html.erb

@@ -0,0 +1,22 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="rounded-lg border border-hw-border overflow-hidden">
+    <div class="px-4 py-2 bg-hw-muted border-b border-hw-border">
+      <span class="text-xs font-medium text-hw-destructive"><%= @before_label %></span>
+    </div>
+    <div class="p-4 text-sm font-mono">
+      <% if before_slot? %>
+        <%= before_slot %>
+      <% end %>
+    </div>
+  </div>
+  <div class="rounded-lg border border-hw-border overflow-hidden">
+    <div class="px-4 py-2 bg-hw-muted border-b border-hw-border">
+      <span class="text-xs font-medium text-hw-success"><%= @after_label %></span>
+    </div>
+    <div class="p-4 text-sm font-mono">
+      <% if after_slot? %>
+        <%= after_slot %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/diff_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DiffComponent < Base
+    renders_one :before_slot
+    renders_one :after_slot
+
+    def initialize(before_label: "Before", after_label: "After", **attrs)
+      @before_label = before_label
+      @after_label = after_label
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "grid grid-cols-1 md:grid-cols-2 gap-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

data/app/components/hotwirebits/diff_view_component.html.erb

@@ -0,0 +1,22 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @view == :side_by_side %>
+    <div class="grid grid-cols-2 divide-x divide-hw-border">
+      <div>
+        <div class="bg-hw-destructive/5 px-3 py-1.5 text-xs font-medium text-hw-destructive border-b border-hw-border">Old</div>
+        <pre class="p-3 overflow-x-auto text-xs leading-5"><% @old_code.to_s.lines.each_with_index do |line, i| %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= i + 1 %></span><span class="text-hw-destructive bg-hw-destructive/5/50 flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></pre>
+      </div>
+      <div>
+        <div class="bg-hw-success/5 px-3 py-1.5 text-xs font-medium text-hw-success border-b border-hw-border">New</div>
+        <pre class="p-3 overflow-x-auto text-xs leading-5"><% @new_code.to_s.lines.each_with_index do |line, i| %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= i + 1 %></span><span class="text-hw-success bg-hw-success/5/50 flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></pre>
+      </div>
+    </div>
+  <% else %>
+    <div class="bg-hw-muted/30 px-3 py-1.5 text-xs font-medium text-hw-muted-foreground border-b border-hw-border">
+      Unified Diff — <%= @language %>
+    </div>
+    <pre class="p-3 overflow-x-auto text-xs leading-5"><% diff_lines(@old_code, @new_code).each do |entry|
+      case entry[:type]
+      when :context %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= entry[:old_line] %></span><span class="flex-1"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% when :removed %><span class="flex bg-hw-destructive/5"><span class="w-8 shrink-0 text-hw-destructive select-none">-</span><span class="flex-1 text-hw-destructive"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% when :added %><span class="flex bg-hw-success/5"><span class="w-8 shrink-0 text-hw-success select-none">+</span><span class="flex-1 text-hw-success"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% end
+    end %></pre>
+  <% end %>
+</div>

data/app/components/hotwirebits/diff_view_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DiffViewComponent < Base
+    VIEWS = %i[side_by_side unified].freeze
+
+    def initialize(old_code:, new_code:, language: "ruby", view: :side_by_side, **attrs)
+      @old_code = old_code
+      @new_code = new_code
+      @language = language
+      @view = VIEWS.include?(view) ? view : :side_by_side
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("rounded-lg border border-hw-border overflow-hidden text-sm font-mono", @extra_attrs.delete(:class))
+    end
+
+    private
+
+    def diff_lines(old, new)
+      old_lines = old.to_s.lines
+      new_lines = new.to_s.lines
+      max = [old_lines.size, new_lines.size].max
+      result = []
+      max.times do |i|
+        ol = old_lines[i]
+        nl = new_lines[i]
+        if ol == nl
+          result << {type: :context, old_line: i + 1, new_line: i + 1, content: ol&.chomp}
+        else
+          result << {type: :removed, old_line: i + 1, new_line: nil, content: ol&.chomp} if ol
+          result << {type: :added, old_line: nil, new_line: i + 1, content: nl&.chomp} if nl
+        end
+      end
+      result
+    end
+  end
+end

data/app/components/hotwirebits/digital_signature_component.html.erb

@@ -0,0 +1,21 @@
+<div data-controller="hw-signature"
+     data-hw-signature-pen-color-value="<%= @pen_color %>"
+     data-hw-signature-pen-width-value="<%= @pen_width %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="rounded-lg border border-hw-border bg-hw-background overflow-hidden">
+    <canvas data-hw-signature-target="canvas"
+            width="<%= @width %>"
+            height="<%= @height %>"
+            class="w-full cursor-crosshair touch-none"
+            data-action="mousedown->hw-signature#startDraw mousemove->hw-signature#draw mouseup->hw-signature#endDraw mouseleave->hw-signature#endDraw touchstart->hw-signature#startDraw touchmove->hw-signature#draw touchend->hw-signature#endDraw"></canvas>
+  </div>
+  <input type="hidden" name="<%= @name %>" data-hw-signature-target="input">
+  <div class="flex items-center gap-2 mt-2">
+    <button type="button"
+            class="inline-flex h-8 items-center justify-center rounded-md border border-hw-input bg-hw-background px-3 text-xs font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer"
+            data-action="click->hw-signature#clear">
+      Clear
+    </button>
+    <span class="text-xs text-hw-muted-foreground" data-hw-signature-target="status">Draw your signature above</span>
+  </div>
+</div>

data/app/components/hotwirebits/digital_signature_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DigitalSignatureComponent < Base
+    def initialize(name:, width: 400, height: 200, pen_color: "#000000", pen_width: 2, **attrs)
+      @name = name
+      @width = width
+      @height = height
+      @pen_color = pen_color
+      @pen_width = pen_width
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/divider_component.html.erb

@@ -0,0 +1,11 @@
+<% if @with_label && (@label || label_slot?) %>
+  <div class="relative flex items-center <%= @orientation == :vertical ? 'flex-col h-full' : '' %>" role="separator" <%= tag.attributes(@extra_attrs) %>>
+    <div class="<%= @orientation == :horizontal ? 'flex-1 border-t' : 'flex-1 border-l' %> <%= @dashed ? 'border-dashed' : 'border-solid' %> border-hw-border"></div>
+    <span class="<%= @orientation == :horizontal ? 'px-3' : 'py-3' %> text-xs text-hw-muted-foreground font-medium">
+      <%= label_slot? ? label_slot : @label %>
+    </span>
+    <div class="<%= @orientation == :horizontal ? 'flex-1 border-t' : 'flex-1 border-l' %> <%= @dashed ? 'border-dashed' : 'border-solid' %> border-hw-border"></div>
+  </div>
+<% else %>
+  <div class="<%= divider_classes %>" role="separator" <%= tag.attributes(@extra_attrs) %>></div>
+<% end %>

data/app/components/hotwirebits/divider_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DividerComponent < Base
+    renders_one :label_slot
+
+    def initialize(orientation: :horizontal, with_label: false, dashed: false, label: nil, **attrs)
+      @orientation = orientation
+      @dashed = dashed
+      @label = label
+      @with_label = with_label || !label.nil?
+      @extra_attrs = attrs
+    end
+
+    def divider_classes
+      base = if @orientation == :horizontal
+        "w-full border-t"
+      else
+        "h-full border-l"
+      end
+      merge_classes(
+        base,
+        @dashed ? "border-dashed" : "border-solid",
+        "border-hw-border",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

data/app/components/hotwirebits/dock_menu_component.html.erb

@@ -0,0 +1,21 @@
+<nav class="fixed inset-x-0 bottom-0 z-50 border-t border-hw-border bg-hw-background/95 backdrop-blur supports-[backdrop-filter]:bg-hw-background/60" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto flex h-16 max-w-md items-center justify-around px-6">
+    <% @items.each do |item| %>
+      <a href="<%= item[:href] %>"
+         class="<%= merge_classes(
+           'group relative flex flex-col items-center gap-1 text-xs transition-colors',
+           item[:active] ? 'text-hw-primary' : 'text-hw-muted-foreground hover:text-hw-foreground'
+         ) %>">
+  <span class="relative">
+    <% if item[:icon] %>
+      <span class="h-6 w-6"><%= safe_svg(item[:icon]) %></span>
+    <% end %>
+    <% if item[:badge] %>
+      <span class="absolute -right-2 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-hw-primary px-1 text-[10px] font-medium text-hw-primary-foreground"><%= item[:badge] %></span>
+    <% end %>
+  </span>
+  <span class="<%= item[:active] ? 'font-medium' : '' %>"><%= item[:label] %></span>
+</a>
+<% end %>
+</div>
+</nav>

data/app/components/hotwirebits/dock_menu_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DockMenuComponent < Base
+    def initialize(items: [], **attrs)
+      @items = items
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/drag_drop_list_component.html.erb

@@ -0,0 +1,16 @@
+<ul class="<%= list_classes %>"
+    data-controller="hw-drag-drop"
+    <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each do |item| %>
+    <li class="flex items-center gap-3 rounded-lg border border-hw-border bg-hw-card p-3 cursor-grab active:cursor-grabbing transition-shadow hover:shadow-md"
+        draggable="true"
+        data-hw-drag-drop-target="item"
+        data-item-id="<%= item[:id] %>"
+        data-action="dragstart->hw-drag-drop#dragStart dragend->hw-drag-drop#dragEnd dragover->hw-drag-drop#dragOver drop->hw-drag-drop#drop">
+      <svg class="h-4 w-4 text-hw-muted-foreground shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"/>
+      </svg>
+      <span class="text-sm text-hw-foreground"><%= item[:label] %></span>
+    </li>
+  <% end %>
+</ul>

data/app/components/hotwirebits/drag_drop_list_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DragDropListComponent < Base
+    ORIENTATIONS = %i[vertical horizontal].freeze
+
+    def initialize(items: [], orientation: :vertical, **attrs)
+      @items = items
+      @orientation = ORIENTATIONS.include?(orientation) ? orientation : :vertical
+      @extra_attrs = attrs
+    end
+
+    def list_classes
+      merge_classes(
+        "flex gap-2",
+        (@orientation == :horizontal) ? "flex-row flex-wrap" : "flex-col"
+      )
+    end
+  end
+end