hotwirebits 0.1.0

data/app/components/hotwirebits/resizable_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ResizableComponent < Base
+    renders_one :left
+    renders_one :right
+    renders_one :top
+    renders_one :bottom
+
+    def initialize(direction: :horizontal, **attrs)
+      @direction = direction
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "flex",
+        (@direction == :horizontal) ? "flex-row h-full" : "flex-col w-full",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def handle_classes
+      if @direction == :horizontal
+        "w-[3px] cursor-col-resize bg-hw-border hover:bg-hw-primary transition-colors"
+      else
+        "h-[3px] cursor-row-resize bg-hw-border hover:bg-hw-primary transition-colors"
+      end
+    end
+
+    def panel_classes
+      "overflow-hidden flex-1"
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+<article class="border-b border-hw-border pb-6 last:border-0" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-start gap-4">
+    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-hw-muted text-sm font-semibold text-hw-muted-foreground">
+      <%= initials %>
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="text-sm font-semibold text-hw-foreground"><%= @author %></span>
+        <% if @verified %>
+          <span class="inline-flex items-center gap-1 rounded-full bg-hw-success/5 px-2 py-0.5 text-xs font-medium text-hw-success ring-1 ring-inset ring-green-600/20">
+            <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
+            </svg>
+            Verified
+          </span>
+        <% end %>
+      </div>
+      <div class="mt-1 flex items-center gap-2">
+        <div class="flex items-center">
+          <% 5.times do |i| %>
+            <svg class="h-4 w-4 <%= i < @rating ? 'text-hw-warning' : 'text-hw-muted-foreground/40' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/>
+            </svg>
+          <% end %>
+        </div>
+        <% if @date %>
+          <time class="text-xs text-hw-muted-foreground"><%= @date %></time>
+        <% end %>
+      </div>
+      <% if @title %>
+        <h4 class="mt-2 text-sm font-semibold text-hw-foreground"><%= @title %></h4>
+      <% end %>
+      <p class="mt-1.5 text-sm leading-relaxed text-hw-muted-foreground"><%= @review_content %></p>
+    </div>
+  </div>
+</article>

data/app/components/hotwirebits/review_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ReviewComponent < Base
+    def initialize(author:, review_content:, rating: 5, title: nil, date: nil, verified: false, **attrs)
+      @author = author
+      @rating = rating.to_i.clamp(0, 5)
+      @title = title
+      @review_content = review_content
+      @date = date
+      @verified = verified
+      @extra_attrs = attrs
+    end
+
+    def initials
+      @author.to_s.split.map(&:first).join[0..1].upcase
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+<div class="rounded-lg border border-hw-border bg-hw-background overflow-hidden"
+     data-controller="hw-rich-text-editor"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex flex-wrap items-center gap-0.5 border-b border-hw-border bg-hw-muted/50 px-2 py-1.5">
+    <% @toolbar.each do |btn| %>
+      <% case btn %>
+      <% when 'bold' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#bold" title="Bold">
+          <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.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 12h9a4 4 0 014 4 4 4 0 01-4 4H6z"/></svg>
+        </button>
+      <% when 'italic' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#italic" title="Italic">
+          <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="M10 4h4m-2 0l-4 16m0 0h4"/></svg>
+        </button>
+      <% when 'underline' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#underline" title="Underline">
+          <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="M7 4v7a5 5 0 0010 0V4M5 21h14"/></svg>
+        </button>
+      <% when 'strikethrough' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#strikethrough" title="Strikethrough">
+          <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="M16 4H9a3 3 0 00-3 3v0a3 3 0 003 3h6a3 3 0 013 3v0a3 3 0 01-3 3H8M4 12h16"/></svg>
+        </button>
+      <% when 'link' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#link" title="Link">
+          <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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
+        </button>
+      <% when 'bullet_list' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#bulletList" title="Bullet List">
+          <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="M4 6h16M4 12h16M4 18h16"/></svg>
+        </button>
+      <% when 'ordered_list' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#orderedList" title="Ordered List">
+          <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="M7 6h13M7 12h13M7 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+        </button>
+      <% when 'heading' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#heading" title="Heading">
+          <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="M7 4v16M17 4v16M7 12h10"/></svg>
+        </button>
+      <% when 'quote' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#quote" title="Quote">
+          <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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
+        </button>
+      <% when 'code' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#code" title="Code">
+          <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
+        </button>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="min-h-[200px] p-4 text-sm text-hw-foreground focus:outline-none"
+       contenteditable="true"
+       data-hw-rich-text-editor-target="content"
+       data-placeholder="<%= @placeholder %>"><%= @value %></div>
+  <input type="hidden" name="<%= @name %>" data-hw-rich-text-editor-target="input" value="<%= @value %>">
+</div>

data/app/components/hotwirebits/rich_text_editor_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class RichTextEditorComponent < Base
+    DEFAULT_TOOLBAR = %w[bold italic underline strikethrough link bullet_list ordered_list heading quote code].freeze
+
+    def initialize(name:, value: nil, placeholder: nil, toolbar: DEFAULT_TOOLBAR, **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @toolbar = toolbar
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= scroll_classes %>" <% if scroll_styles %>style="<%= scroll_styles %>"<% end %> <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</div>

data/app/components/hotwirebits/scroll_area_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ScrollAreaComponent < Base
+    ORIENTATIONS = {
+      vertical: "overflow-y-auto overflow-x-hidden",
+      horizontal: "overflow-x-auto overflow-y-hidden"
+    }.freeze
+
+    def initialize(height: nil, orientation: :vertical, **attrs)
+      @height = height
+      @orientation = orientation
+      @extra_attrs = attrs
+    end
+
+    def scroll_classes
+      merge_classes(
+        ORIENTATIONS[@orientation],
+        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-hw-border",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def scroll_styles
+      @height ? "height: #{@height};" : nil
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+<div class="<%= container_classes %>"
+     data-controller="hw-search"
+     data-hw-search-suggestions-value="<%= @suggestions.to_json %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="relative">
+    <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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/>
+    </svg>
+    <input type="search"
+           name="<%= @name %>"
+           value="<%= @value %>"
+           placeholder="<%= @placeholder %>"
+           class="w-full h-10 rounded-lg border border-hw-border bg-hw-background pl-10 pr-4 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring focus:border-transparent"
+           data-hw-search-target="input"
+           data-action="input->hw-search#debounce focus->hw-search#showSuggestions blur->hw-search#hideSuggestions">
+    <% if @with_filters %>
+      <button type="button"
+              class="absolute right-2 top-1/2 -translate-y-1/2 h-7 w-7 rounded-md flex items-center justify-center hover:bg-hw-muted transition-colors"
+              data-action="click->hw-search#toggleFilters">
+        <svg class="h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
+        </svg>
+        <span class="sr-only">Filters</span>
+      </button>
+    <% end %>
+  </div>
+  <div class="hidden absolute top-full left-0 right-0 mt-1 rounded-lg border border-hw-border bg-hw-popover shadow-lg z-50"
+       data-hw-search-target="suggestions">
+    <ul class="py-1 max-h-60 overflow-auto" data-hw-search-target="list">
+      <% @suggestions.each do |suggestion| %>
+        <li>
+          <button type="button"
+                  class="w-full px-3 py-2 text-left text-sm hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors"
+                  data-action="click->hw-search#select"
+            data-value="<%= suggestion.is_a?(Hash) ? suggestion[:value] : suggestion %>">
+            <% if suggestion.is_a?(Hash) %>
+              <span class="font-medium"><%= suggestion[:label] %></span>
+              <% if suggestion[:description] %>
+                <span class="ml-2 text-xs text-hw-muted-foreground"><%= suggestion[:description] %></span>
+              <% end %>
+            <% else %>
+              <%= suggestion %>
+            <% end %>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+  <% if @with_filters %>
+    <div class="hidden mt-2 rounded-lg border border-hw-border bg-hw-card p-3" data-hw-search-target="filters">
+      <p class="text-xs font-medium text-hw-muted-foreground mb-2">Filters</p>
+      <div class="flex flex-wrap gap-2" data-hw-search-target="filterContainer">
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/search_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SearchComponent < Base
+    def initialize(name: "q", placeholder: "Search...", suggestions: [], with_filters: false, value: nil, **attrs)
+      @name = name
+      @placeholder = placeholder
+      @suggestions = suggestions
+      @with_filters = with_filters
+      @value = value
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "relative w-full",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="relative">
+  <div class="absolute left-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground">
+    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+  </div>
+  <input type="search" name="<%= @name %>" value="<%= @value %>" placeholder="<%= @placeholder %>" <%= 'disabled' if @disabled %> class="<%= input_classes %>" <%= tag.attributes(@extra_attrs) %>>
+</div>

data/app/components/hotwirebits/search_input_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SearchInputComponent < Base
+    def initialize(name: "q", value: nil, placeholder: "Search...", size: :md, with_button: false,
+      button_label: "Search", disabled: false, **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @size = size
+      @with_button = with_button
+      @button_label = button_label
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_classes
+      sizes = {sm: "h-8 pl-8 pr-8 text-xs", md: "h-9 pl-9 pr-9 text-sm", lg: "h-10 pl-10 pr-10 text-base"}
+      merge_classes(
+        "flex w-full rounded-md border border-hw-input bg-hw-background text-hw-foreground",
+        "ring-offset-hw-background placeholder:text-hw-muted-foreground",
+        "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 search_icon
+      icon_size = {sm: "h-3 w-3 left-2.5", md: "h-4 w-4 left-3", lg: "h-5 w-5 left-3.5"}[@size] || "h-4 w-4 left-3"
+      tag.div(class: merge_classes("absolute top-1/2 -translate-y-1/2 text-hw-muted-foreground",
+        icon_size.split(" ").last)) do
+        tag.svg(class: icon_size.split(" ")[0..1].join(" "), fill: "none", stroke: "currentColor", stroke_width: "2",
+          viewBox: "0 0 24 24") do
+          tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z")
+        end
+      end
+    end
+
+    def clear_button
+      tag.button(type: "button",
+        class: "absolute right-2 top-1/2 -translate-y-1/2 text-hw-muted-foreground hover:text-hw-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: "M6 18L18 6M6 6l12 12")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="flex flex-col gap-1 <%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <h2 class="text-xl font-semibold text-hw-foreground"><%= @title %></h2>
+  <% if @description %>
+    <p class="text-sm text-hw-muted-foreground"><%= @description %></p>
+  <% end %>
+</div>

data/app/components/hotwirebits/section_heading_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SectionHeadingComponent < Base
+    ALIGNS = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }.freeze
+
+    def initialize(title:, description: nil, align: :left, **attrs)
+      @title = title
+      @description = description
+      @align = align
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        ALIGNS[@align] || ALIGNS[:left],
+        (@align == :center) ? "items-center" : nil,
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<select name="<%= @name %>" <%= 'disabled' if @disabled %> <%= 'multiple' if @multiple %> class="<%= select_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <option value="" disabled <%= 'selected' unless @selected %>><%= @placeholder %></option>
+  <% @options.each do |opt| %>
+    <% if opt.is_a?(Array) %>
+      <option value="<%= opt.last %>" <%= 'selected' if Array(@selected).include?(opt.last) %>><%= opt.first %></option>
+      <% elsif opt.is_a?(Hash) %>
+        <optgroup label="<%= opt[:label] %>">
+          <% opt[:options].each do |o| %>
+            <option value="<%= o.last %>" <%= 'selected' if Array(@selected).include?(o.last) %>><%= o.first %></option>
+            <% end %>
+          </optgroup>
+        <% else %>
+          <option value="<%= opt %>" <%= 'selected' if Array(@selected).include?(opt) %>><%= opt %></option>
+          <% end %>
+        <% end %>
+      </select>

data/app/components/hotwirebits/select_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SelectComponent < Base
+    SIZES = {
+      sm: "h-8 px-3 text-xs",
+      md: "h-9 px-3 text-sm",
+      lg: "h-10 px-4 text-base"
+    }.freeze
+
+    def initialize(name: nil, options: [], selected: nil, placeholder: "Select...", size: :md, disabled: false,
+      multiple: false, error: false, **attrs)
+      @name = name
+      @options = options
+      @selected = selected
+      @placeholder = placeholder
+      @size = size
+      @disabled = disabled
+      @multiple = multiple
+      @error = error
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def select_classes
+      error_classes = @error ? "border-hw-destructive focus-visible:ring-hw-destructive" : "border-hw-input focus-visible:ring-hw-ring"
+      merge_classes(
+        "flex w-full rounded-md border bg-hw-background text-hw-foreground ring-offset-hw-background",
+        "placeholder:text-hw-muted-foreground focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m19.5%208.25-7.5%207.5-7.5-7.5%22%20%2F%3E%3C%2Fsvg%3E')] bg-[length:1rem] bg-[right_0.5rem_center] bg-no-repeat pr-8",
+        error_classes,
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="relative inline-flex items-center justify-center" <%= tag.attributes(@extra_attrs) %>>
+  <svg width="<%= @size %>" height="<%= @size / 2 + 8 %>" viewBox="0 0 <%= @size %> <%= @size / 2 + 8 %>">
+    <path d="M <%= center_x - radius %> <%= center_y %> A <%= radius %> <%= radius %> 0 0 1 <%= center_x + radius %> <%= center_y %>" fill="none" stroke-width="8" class="stroke-hw-muted" stroke-linecap="round"/>
+    <path d="M <%= center_x - radius %> <%= center_y %> A <%= radius %> <%= radius %> 0 0 1 <%= center_x + radius %> <%= center_y %>" fill="none" stroke-width="8" class="<%= color_class %> transition-all duration-300" stroke-linecap="round" stroke-dasharray="<%= circumference %>" stroke-dashoffset="<%= stroke_dashoffset %>"/>
+  </svg>
+  <% if @show_label %>
+    <span class="absolute bottom-0 text-sm font-medium"><%= percentage %>%</span>
+  <% end %>
+</div>

data/app/components/hotwirebits/semi_circle_progress_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SemiCircleProgressComponent < Base
+    COLORS = {
+      default: "stroke-hw-primary",
+      success: "stroke-hw-success",
+      warning: "stroke-hw-warning",
+      destructive: "stroke-hw-destructive",
+      info: "stroke-hw-info"
+    }.freeze
+
+    def initialize(value:, max: 100, size: 160, color: :default, show_label: true, **attrs)
+      @value = value
+      @max = max
+      @size = size
+      @color = color
+      @show_label = show_label
+      @extra_attrs = attrs
+    end
+
+    def percentage
+      return 0 if @max.zero?
+
+      [(@value.to_f / @max * 100).round, 100].min
+    end
+
+    def radius
+      (@size - 16) / 2
+    end
+
+    def circumference
+      Math::PI * radius
+    end
+
+    def stroke_dashoffset
+      circumference - (percentage / 100.0) * circumference
+    end
+
+    def color_class
+      COLORS[@color] || COLORS[:default]
+    end
+
+    def center_x
+      @size / 2
+    end
+
+    def center_y
+      @size / 2
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<% if @label %>
+  <div class="relative flex items-center" role="none">
+    <div class="shrink-0 bg-hw-border h-[1px] w-full"></div>
+    <span class="px-2 text-xs text-hw-muted-foreground font-medium"><%= @label %></span>
+    <div class="shrink-0 bg-hw-border h-[1px] w-full"></div>
+  </div>
+<% else %>
+  <div class="<%= @orientation == :vertical ? 'shrink-0 bg-hw-border h-full w-[1px]' : 'shrink-0 bg-hw-border h-[1px] w-full' %>" role="<%= @decorative ? 'none' : 'separator' %>" <%= tag.attributes(@extra_attrs) %>></div>
+<% end %>

data/app/components/hotwirebits/separator_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SeparatorComponent < Base
+    def initialize(orientation: :horizontal, decorative: true, label: nil, **attrs)
+      @orientation = orientation
+      @decorative = decorative
+      @label = label
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def separator_classes
+      if @orientation == :horizontal
+        "shrink-0 bg-hw-border h-[1px] w-full"
+      else
+        "shrink-0 bg-hw-border h-full w-[1px]"
+      end
+    end
+
+    def horizontal_class
+      "shrink-0 bg-hw-border h-[1px] w-full"
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+<div data-controller="hw-dialog"
+     data-hw-dialog-open-value="<%= @open %>">
+  <div class="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"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="overlay"
+       data-action="click->hw-dialog#close"
+    aria-hidden="true"></div>
+  <div class="fixed z-50 gap-4 bg-hw-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 <%= side_config[:panel] %>"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="panel"
+       role="dialog"
+       aria-modal="true"
+       <%= tag.attributes(@extra_attrs) %>>
+    <div class="flex flex-col space-y-2">
+      <% if header? %>
+        <%= header %>
+      <% elsif @title %>
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold tracking-tight"><%= @title %></h2>
+          <% if @closable %>
+            <button type="button"
+                    class="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"
+                    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>
+      <% end %>
+    </div>
+    <div class="py-4 text-sm">
+      <%= content %>
+    </div>
+    <% if footer? %>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <%= footer %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/sheet_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SheetComponent < Base
+    renders_one :header
+    renders_one :footer
+
+    SIDES = {
+      right: {
+        overlay: "",
+        panel: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      },
+      left: {
+        overlay: "",
+        panel: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
+      },
+      top: {
+        overlay: "",
+        panel: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
+      },
+      bottom: {
+        overlay: "",
+        panel: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+      }
+    }.freeze
+
+    SIZES = {sm: "", md: "", lg: "", xl: ""}.freeze
+
+    def initialize(side: :right, size: :md, open: false, title: nil, closable: true, **attrs)
+      @side = side
+      @size = size
+      @open = open
+      @title = title
+      @closable = closable
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def side_config
+      SIDES[@side] || SIDES[:right]
+    end
+  end
+end