hotwirebits 0.1.0

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

@@ -0,0 +1,38 @@
+<div data-controller="hw-drawer"
+     data-hw-drawer-open-value="<%= @open %>"
+     data-hw-drawer-snap-points-value="<%= snap_points_data %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="fixed inset-0 z-50 bg-black/80"
+       data-hw-drawer-target="overlay"
+       data-action="click->hw-drawer#close"
+    data-state="<%= @open ? 'open' : 'closed' %>"
+    aria-hidden="true"></div>
+  <div class="fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-hw-border bg-hw-background"
+       data-hw-drawer-target="panel"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       role="dialog"
+       aria-modal="true">
+    <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-hw-muted cursor-grab"
+         data-hw-drawer-target="handle"
+         data-action="pointerdown->hw-drawer#startDrag"></div>
+    <div class="mx-auto w-full max-w-md">
+      <% if header? %>
+        <div class="p-4 pb-0">
+          <%= header %>
+        </div>
+      <% elsif @title %>
+        <div class="p-4 pb-0 text-center">
+          <h2 class="text-lg font-semibold tracking-tight"><%= @title %></h2>
+        </div>
+      <% end %>
+      <div class="p-4 overflow-y-auto">
+        <%= content %>
+      </div>
+      <% if footer? %>
+        <div class="p-4 pt-0">
+          <%= footer %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/drawer_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DrawerComponent < Base
+    renders_one :header
+    renders_one :footer
+
+    def initialize(title: nil, snap_points: [0.5, 1], open: false, **attrs)
+      @title = title
+      @snap_points = snap_points
+      @open = open
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def snap_points_data
+      @snap_points.join(",")
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<div class="relative inline-block" data-controller="hw-dropdown" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button"
+          data-action="click->hw-dropdown#toggle click@window->hw-dropdown#closeOnClickOutside"
+    class="inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer">
+    <%= content || @trigger_label %>
+    <svg class="ml-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="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div data-hw-dropdown-target="menu" class="<%= panel_classes %> hidden">
+    <% @items.each do |item| %>
+      <% if item[:separator] %>
+        <div class="-mx-1 my-1 h-px bg-hw-border"></div>
+      <% else %>
+        <a href="<%= item[:href] %>"
+           class="<%= merge_classes(
+             'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+             item[:destructive] ? 'text-hw-destructive hover:bg-hw-destructive/10' : 'hover:bg-hw-accent hover:text-hw-accent-foreground'
+           ) %>"
+           data-action="click->hw-dropdown#close">
+          <% if item[:icon] %>
+            <span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span>
+          <% end %>
+          <span><%= item[:label] %></span>
+        </a>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/dropdown_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DropdownComponent < Base
+    def initialize(trigger_label: nil, align: :start, items: [], **attrs)
+      @trigger_label = trigger_label
+      @align = align
+      @items = items
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def panel_classes
+      merge_classes(
+        "absolute z-50 mt-1 min-w-[8rem] overflow-hidden rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md",
+        (@align == :end) ? "right-0" : "left-0"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<label class="flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed border-hw-border bg-hw-muted/30 cursor-pointer hover:bg-hw-muted/50 transition-colors" <%= tag.attributes(@extra_attrs) %>>
+  <svg class="w-8 h-8 mb-2 text-hw-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+  </svg>
+  <p class="text-sm text-hw-foreground font-medium"><%= @label %></p>
+  <% if @description %>
+    <p class="text-xs text-hw-muted-foreground mt-1"><%= @description %></p>
+  <% end %>
+  <input
+    type="file"
+    name="<%= @name %>"
+    class="hidden"
+    <%= 'accept="' + @accept + '"' if @accept %>
+    <%= 'multiple' if @multiple %>
+  >
+  </label>

data/app/components/hotwirebits/dropzone_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DropzoneComponent < Base
+    def initialize(name:, accept: nil, multiple: false, max_size: nil, label: nil, description: nil, **attrs)
+      @name = name
+      @accept = accept
+      @multiple = multiple
+      @max_size = max_size
+      @label = label || "Drop files here or click to upload"
+      @description = description
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<div class="flex flex-col items-center justify-center rounded-lg border border-dashed border-hw-border p-12 text-center" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-hw-muted text-hw-muted-foreground">
+    <% if @icon %>
+      <%= safe_svg(@icon) %>
+    <% else %>
+      <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-5.98.572m5.98-.572h9m-9 0a3 3 0 01-5.98.572M17.25 14.25a3 3 0 005.98.572m-5.98-.572h-9m9 0a3 3 0 015.98.572M3.75 6.75h16.5l-1.5 9H5.25l-1.5-9z"/>
+      </svg>
+    <% end %>
+  </div>
+  <h3 class="text-lg font-semibold text-hw-foreground"><%= @message %></h3>
+  <p class="mt-1.5 text-sm text-hw-muted-foreground max-w-sm">Looks like you haven't added any items to your cart yet.</p>
+  <% if @action_href %>
+    <a href="<%= @action_href %>"
+       class="mt-6 inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-6 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors">
+      <%= @action_label %>
+    </a>
+  <% end %>
+</div>

data/app/components/hotwirebits/empty_cart_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class EmptyCartComponent < Base
+    def initialize(message: "Your cart is empty", action_label: "Continue Shopping", action_href: nil, icon: nil,
+      **attrs)
+      @message = message
+      @action_label = action_label
+      @action_href = action_href
+      @icon = icon
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="flex flex-col items-center justify-center rounded-lg border border-dashed border-hw-border p-8 text-center" <%= tag.attributes(@extra_attrs) %>>
+  <% if @icon %>
+    <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-hw-muted text-hw-muted-foreground">
+      <%= safe_svg(@icon) %>
+    </div>
+  <% end %>
+  <% if @title %>
+    <h3 class="text-lg font-semibold tracking-tight"><%= @title %></h3>
+  <% end %>
+  <% if @description %>
+    <p class="mt-1.5 text-sm text-hw-muted-foreground max-w-sm"><%= @description %></p>
+  <% end %>
+  <% if @action_label && @action_href %>
+    <a href="<%= @action_href %>"
+       class="mt-4 inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 py-2 text-sm font-medium text-hw-primary-foreground ring-offset-hw-background transition-colors hover:bg-hw-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2">
+      <%= @action_label %>
+    </a>
+  <% end %>
+  <%= content if content.present? %>
+</div>

data/app/components/hotwirebits/empty_state_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class EmptyStateComponent < Base
+    def initialize(title: nil, description: nil, icon: nil, action_label: nil, action_href: nil, **attrs)
+      @title = title
+      @description = description
+      @icon = icon
+      @action_label = action_label
+      @action_href = action_href
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <p class="text-8xl font-bold text-hw-muted-foreground/30"><%= @code %></p>
+  <h1 class="mt-4 text-2xl font-bold text-hw-foreground"><%= @title %></h1>
+  <p class="mt-2 text-hw-muted-foreground max-w-md"><%= @description %></p>
+  <% if @action_label %>
+    <a href="<%= @action_href %>"
+       class="mt-6 inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-10 px-5 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+      <svg class="mr-2 h-4 w-4" 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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+      </svg>
+      <%= @action_label %>
+    </a>
+  <% end %>
+</div>

data/app/components/hotwirebits/error_page_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ErrorPageComponent < Base
+    CODES = {
+      404 => {title: "Page not found", description: "Sorry, we couldn't find the page you're looking for."},
+      500 => {title: "Internal server error",
+              description: "Something went wrong on our end. Please try again later."},
+      403 => {title: "Forbidden", description: "You don't have permission to access this resource."},
+      422 => {title: "Unprocessable entity", description: "The request was well-formed but had semantic errors."}
+    }.freeze
+
+    def initialize(code: 404, title: nil, description: nil, action_label: nil, action_href: "/", **attrs)
+      @code = code
+      defaults = CODES[code] || CODES[404]
+      @title = title || defaults[:title]
+      @description = description || defaults[:description]
+      @action_label = action_label
+      @action_href = action_href
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "flex min-h-[50vh] flex-col items-center justify-center px-4 text-center",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-3xl">
+    <% if @title %>
+      <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground text-center mb-10"><%= @title %></h2>
+    <% end %>
+    <div class="divide-y divide-hw-border rounded-lg border border-hw-border" data-controller="hw-accordion">
+      <% @items.each_with_index do |item, index| %>
+        <div>
+          <button type="button"
+                  class="flex w-full items-center justify-between px-6 py-4 text-left hover:bg-hw-muted/50 transition-colors"
+                  data-action="click->hw-accordion#toggle"
+            data-hw-accordion-target="trigger">
+            <span class="text-base font-medium text-hw-foreground pr-4"><%= item[:question] %></span>
+            <svg class="h-5 w-5 shrink-0 text-hw-muted-foreground transition-transform duration-200" 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="M19 9l-7 7-7-7"/>
+            </svg>
+          </button>
+          <div class="hidden px-6 pb-4 text-sm text-hw-muted-foreground leading-relaxed" data-hw-accordion-target="content">
+            <%= item[:answer] %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/components/hotwirebits/faq_section_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FaqSectionComponent < Base
+    def initialize(title: nil, items: [], **attrs)
+      @title = title
+      @items = items
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "py-16 md:py-24 px-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if @title || @subtitle %>
+      <div class="text-center mb-12">
+        <% if @title %>
+          <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground"><%= @title %></h2>
+        <% end %>
+        <% if @subtitle %>
+          <p class="mt-3 text-lg text-hw-muted-foreground max-w-2xl mx-auto"><%= @subtitle %></p>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% @features.each do |feature| %>
+        <div class="flex flex-col gap-3 rounded-lg border border-hw-border bg-hw-card p-6">
+          <% if feature[:icon] %>
+            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-hw-accent text-hw-accent-foreground shrink-0">
+              <span class="h-5 w-5"><%= safe_svg(feature[:icon]) %></span>
+            </div>
+          <% end %>
+          <h3 class="text-base font-semibold text-hw-foreground"><%= feature[:title] %></h3>
+          <p class="text-sm text-hw-muted-foreground leading-relaxed"><%= feature[:description] %></p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/components/hotwirebits/feature_section_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FeatureSectionComponent < Base
+    def initialize(title: nil, subtitle: nil, features: [], columns: 3, **attrs)
+      @title = title
+      @subtitle = subtitle
+      @features = features
+      @columns = [columns, 4].min
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "py-16 md:py-24 px-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def grid_classes
+      "grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-#{@columns}"
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+<div class="rounded-lg border border-hw-border bg-hw-card p-4" data-controller="hw-feedback" <%= tag.attributes(@extra_attrs) %>>
+  <% if @question %>
+    <p class="mb-3 text-sm font-medium"><%= @question %></p>
+  <% end %>
+  <% case @type %>
+  <% when :thumbs %>
+    <div class="flex items-center gap-2">
+      <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="up"
+        class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-hw-input bg-hw-background text-sm transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground">
+        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"/>
+        </svg>
+      </button>
+      <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="down"
+        class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-hw-input bg-hw-background text-sm transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground">
+        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H5.904c-.889 0-1.713.518-1.972 1.368a11.976 11.976 0 00-.521 3.507c0 1.553.295 3.036.831 4.398.393.837.999 1.287 1.605 1.287h3.126c1.026 0 1.945-.694 2.054-1.715.045-.422.068-.85.068-1.285a11.95 11.95 0 00-2.649-7.521c-.388-.482-.107-1.282.725-1.282h3.126z"/>
+        </svg>
+      </button>
+    </div>
+  <% when :stars %>
+    <div class="flex items-center gap-1" data-hw-feedback-target="starContainer">
+      <% 5.times do |i| %>
+        <button type="button" data-action="click->hw-feedback#selectStar" data-value="<%= i + 1 %>"
+          class="text-hw-muted-foreground transition-colors hover:text-hw-warning">
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
+          </svg>
+        </button>
+      <% end %>
+    </div>
+  <% when :emoji %>
+    <div class="flex items-center gap-1">
+      <% emoji_options.each_with_index do |emoji, i| %>
+        <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="<%= i + 1 %>"
+          class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-hw-input bg-hw-background text-lg transition-colors hover:bg-hw-accent">
+          <%= emoji %>
+        </button>
+      <% end %>
+    </div>
+  <% when :nps %>
+    <div class="flex items-center gap-1">
+      <% nps_range.each do |n| %>
+        <button type="button" data-action="click->hw-feedback#select" data-hw-feedback-target="option" data-value="<%= n %>"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-hw-input bg-hw-background text-xs font-medium transition-colors hover:bg-hw-primary hover:text-hw-primary-foreground">
+          <%= n %>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/feedback_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FeedbackComponent < Base
+    TYPES = %i[thumbs stars emoji nps].freeze
+
+    def initialize(type: :thumbs, question: nil, **attrs)
+      @type = type
+      @question = question
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def emoji_options
+      %w[😡 😟 😐 🙂 😄]
+    end
+
+    def nps_range
+      (0..10).to_a
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<fieldset class="<%= fieldset_classes %>" <%= 'disabled' if @disabled %> <%= tag.attributes(@extra_attrs) %>>
+  <% if @legend %>
+    <legend class="text-sm font-medium text-hw-foreground"><%= @legend %></legend>
+  <% end %>
+  <% if @description %>
+    <p class="text-xs text-hw-muted-foreground mt-1 mb-3"><%= @description %></p>
+  <% end %>
+  <div class="space-y-3">
+    <%= content %>
+  </div>
+</fieldset>

data/app/components/hotwirebits/fieldset_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FieldsetComponent < Base
+    def initialize(legend: nil, description: nil, disabled: false, **attrs)
+      @legend = legend
+      @description = description
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def fieldset_classes
+      merge_classes(
+        "rounded-lg border border-hw-border p-4",
+        "disabled:opacity-50 disabled:cursor-not-allowed"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+<div class="rounded-lg border border-hw-border bg-hw-card overflow-hidden font-mono text-sm"
+     data-controller="hw-file-browser"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="p-3 border-b border-hw-border bg-hw-muted/50">
+    <p class="text-xs font-medium text-hw-muted-foreground uppercase tracking-wide">Files</p>
+  </div>
+  <div class="p-2">
+    <%= render_file_tree(@files, 0) %>
+  </div>
+</div>
+<% def render_file_tree(files, depth) %>
+<% files.each do |file| %>
+  <div class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-pointer hover:bg-hw-accent transition-colors <%= @selected == file[:name] ? 'bg-hw-accent text-hw-accent-foreground' : 'text-hw-foreground' %>"
+         style="padding-left: <%= depth * 16 + 8 %>px;"
+         data-action="click->hw-file-browser#select"
+    data-file-name="<%= file[:name] %>">
+    <% if file[:type] == 'folder' %>
+      <svg class="h-4 w-4 text-yellow-500 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+      </svg>
+    <% else %>
+      <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+      </svg>
+    <% end %>
+    <span class="truncate"><%= file[:name] %></span>
+    <% if file[:size] %>
+      <span class="ml-auto text-[10px] text-hw-muted-foreground shrink-0"><%= file[:size] %></span>
+    <% end %>
+  </div>
+  <% if file[:type] == 'folder' && file[:children]&.any? %>
+    <%= render_file_tree(file[:children], depth + 1) %>
+  <% end %>
+<% end %>
+<% end %>

data/app/components/hotwirebits/file_browser_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FileBrowserComponent < Base
+    def initialize(files: [], selected: nil, **attrs)
+      @files = files
+      @selected = selected
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<label class="<%= label_classes %>">
+  <input type="file" name="<%= @name %>" accept="<%= @accept %>" <%= 'multiple' if @multiple %> <%= 'disabled' if @disabled %> class="sr-only" <%= tag.attributes(@extra_attrs) %>>
+  <span class="flex items-center gap-2">
+    <svg class="h-4 w-4 text-hw-muted-foreground" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
+    <span class="text-sm"><%= @label %></span>
+  </span>
+</label>

data/app/components/hotwirebits/file_input_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FileInputComponent < Base
+    def initialize(name: nil, accept: nil, multiple: false, disabled: false, label: "Choose file", **attrs)
+      @name = name
+      @accept = accept
+      @multiple = multiple
+      @disabled = disabled
+      @label = label
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def label_classes
+      merge_classes(
+        "flex h-9 items-center justify-center rounded-md border border-dashed border-hw-input",
+        "bg-hw-background px-3 text-sm text-hw-muted-foreground ring-offset-hw-background",
+        "hover:bg-hw-accent hover:text-hw-accent-foreground cursor-pointer",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+<div class="rounded-lg border border-hw-border bg-hw-card p-4" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center gap-3 mb-3">
+    <%= safe_svg(status_icon) %>
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-hw-foreground truncate"><%= @file_name %></p>
+      <p class="text-xs text-hw-muted-foreground">
+        <% case @status %>
+        <% when :complete %>
+          Upload complete
+        <% when :error %>
+          Upload failed
+        <% else %>
+          Uploading... <%= @progress %>%
+        <% end %>
+      </p>
+    </div>
+    <% unless @status == :uploading %>
+      <button type="button" class="h-7 w-7 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground cursor-pointer" aria-label="Dismiss">
+        <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>
+      </button>
+    <% end %>
+  </div>
+  <div class="w-full overflow-hidden rounded-full bg-hw-muted h-2">
+    <div class="h-full rounded-full transition-all duration-300 <%= bar_color %>" style="width: <%= @progress %>%;"></div>
+  </div>
+</div>

data/app/components/hotwirebits/file_upload_progress_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FileUploadProgressComponent < Base
+    STATUSES = %i[uploading complete error].freeze
+
+    def initialize(file_name:, progress: 0, status: :uploading, **attrs)
+      @file_name = file_name
+      @progress = progress.to_i
+      @status = STATUSES.include?(status) ? status : :uploading
+      @extra_attrs = attrs
+    end
+
+    def bar_color
+      case @status
+      when :complete then "bg-hw-success"
+      when :error then "bg-hw-destructive"
+      else "bg-hw-primary"
+      end
+    end
+
+    def status_icon
+      case @status
+      when :complete
+        %(<svg class="h-4 w-4 text-hw-success" 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="M5 13l4 4L19 7"/></svg>)
+      when :error
+        %(<svg class="h-4 w-4 text-hw-destructive" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>)
+      else
+        %(<svg class="h-4 w-4 animate-spin text-hw-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= flex_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</div>