daisyui-view-components 0.0.2 → 0.0.3

data/daisyui-view-components/previews/accordion/default.html.erb

@@ -0,0 +1,29 @@
+<%= component :accordion, arrow: arrow do |accordion| %>
+  <% accordion.with_collapse do |collapse| %>
+    <% collapse.with_radio name: "accordion1", data: {a: 1}, class: 'sss' %>
+    <% collapse.with_collapse_title do %>
+      Focus me to see content
+    <% end %>
+    <% collapse.with_collapse_content do %>
+      <p>tabindex="0" attribute is necessary to make the div focusable</p>
+    <% end %>
+  <% end %>
+  <% accordion.with_collapse do |collapse| %>
+    <% collapse.with_radio name: "accordion1", data: {a: 1}, class: 'sss' %>
+    <% collapse.with_collapse_title do %>
+      Focus me to see content
+    <% end %>
+    <% collapse.with_collapse_content do %>
+      <p>tabindex="0" attribute is necessary to make the div focusable</p>
+    <% end %>
+  <% end %>
+  <% accordion.with_collapse do |collapse| %>
+    <% collapse.with_radio name: "accordion1", data: {a: 1}, class: 'sss' %>
+    <% collapse.with_collapse_title do %>
+      Focus me to see content
+    <% end %>
+    <% collapse.with_collapse_content do %>
+      <p>tabindex="0" attribute is necessary to make the div focusable</p>
+    <% end %>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/accordion/preview.rb

@@ -0,0 +1,14 @@
+# fronze_string_literal: true
+
+module Accordion
+  # @label Accordion
+  class Preview < ViewComponent::Preview
+
+    # @label Column
+    # @param arrow [Boolean] select [false, true] "Show arrow"
+    def default(arrow: false)
+      render_with_template locals: { arrow: arrow }, template: 'accordion/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/alert/default.html.erb

@@ -0,0 +1,4 @@
+<%= component :alert, color: color do %>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+  <span>New software update available.</span>
+<% end %>

data/daisyui-view-components/previews/alert/info_color.html.erb

@@ -0,0 +1,4 @@
+<%= component :alert, color: color do %>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+  <span>New software update available.</span>
+<% end %>

data/daisyui-view-components/previews/alert/preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Alert
+  # @label Alert
+  class Preview < ViewComponent::Preview
+
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Alert::Component::COLOR_OPTIONS.dup.push('nil') }}
+    def default(color: nil)
+      render_with_template locals: { color: color }, template: 'alert/default'
+    end
+
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Alert::Component::COLOR_OPTIONS.dup.push('nil') }}
+    def with_buttons(color: nil)
+      render_with_template locals: { color: color }, template: 'alert/with_buttons'
+    end
+
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Alert::Component::COLOR_OPTIONS.dup.push('nil') }}
+    def with_icon_title_and_description(color: nil)
+      render_with_template locals: { color: color }, template: 'alert/with_icon_title_and_description'
+    end
+
+  end
+end

data/daisyui-view-components/previews/alert/with_buttons.html.erb

@@ -0,0 +1,10 @@
+<%= component :alert, color: color do |alert| %>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+  <span>We use cookies for no reason.</span>
+  <% alert.with_button class: "btn-sm" do %>
+    Deny
+  <% end %>
+  <% alert.with_button class: "btn-sm" do %>
+    Accept
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/alert/with_icon_title_and_description.html.erb

@@ -0,0 +1,14 @@
+<%= component :alert, color: color do |alert| %>
+  <% alert.with_icon do %>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+  <% end %>
+  <% alert.with_title do %>
+    New message!
+  <% end %>
+  <% alert.with_description do %>
+    You have 1 unread message
+  <% end %>
+  <% alert.with_button class: "btn-sm" do %>
+    Show
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/avatar/default.html.erb

@@ -0,0 +1,5 @@
+<%= component :avatar, online: online, offline: offline, placeholder: placeholder, class: "asd" do %>
+  <div class="w-24 rounded">
+    <img src="https://avatar.iran.liara.run/public/88" />
+  </div>
+<% end %>

data/daisyui-view-components/previews/avatar/preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Avatar
+  # @label Avatar
+  class Preview < ViewComponent::Preview
+
+    # @param online [Boolean] select [false, true] "shows a green dot as online indicator"
+    # @param offline [Boolean] select [true, false] "shows a gray dot as offline indicator"
+    # @param placeholder [Boolean] select [true, false] "Whether to show some letters as avatar placeholder"
+    def default(online: false, offline: false, placeholder: false)
+      render_with_template locals: {
+        online: online,
+        offline: offline,
+        placeholder: placeholder
+      }, template: 'avatar/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/avatar_group/default.html.erb

@@ -0,0 +1,17 @@
+<%= component :avatar_group do |group| %>
+  <% group.with_avatar do %>
+    <div class="w-12">
+      <img src="https://avatar.iran.liara.run/public/88" />
+    </div>
+  <% end %>
+  <% group.with_avatar do %>
+    <div class="w-12">
+      <img src="https://avatar.iran.liara.run/public/88" />
+    </div>
+  <% end %>
+  <% group.with_avatar placeholder: true do %>
+    <div class="bg-neutral text-neutral-content w-12">
+      <span>+99</span>
+    </div>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/avatar_group/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module AvatarGroup
+  # @label AvatarGroup
+  class Preview < ViewComponent::Preview
+
+    def default
+      render_with_template template: 'avatar_group/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/badge/default.html.erb

@@ -0,0 +1 @@
+<%= component :badge, "Badge", color: color, size: size %>

data/daisyui-view-components/previews/badge/preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Badge
+  # @label Badge
+  class Preview < ViewComponent::Preview
+
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Badge::Component::COLOR_OPTIONS }}
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Badge::Component::SIZE_OPTIONS.dup.push('nil') }}
+    def default(color: nil, size: nil)
+      render_with_template locals: { color: color, size: size }, template: 'badge/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/bottom_nav/default.html.erb

@@ -0,0 +1,44 @@
+<%= component :bottom_nav do |nav| %>
+  <% nav.with_button do %>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+    </svg>
+  <% end %>
+  <% nav.with_button active: true do %>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  <% end %>
+  <% nav.with_button disabled: true do %>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+    </svg>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/bottom_nav/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module BottomNav
+  # @label Bottom Nav
+  class Preview < ViewComponent::Preview
+
+    def default
+      render_with_template template: 'bottom_nav/default'
+    end
+
+    def with_labels
+      render_with_template template: 'bottom_nav/with_labels'
+    end
+
+  end
+end

data/daisyui-view-components/previews/bottom_nav/with_labels.html.erb

@@ -0,0 +1,47 @@
+<%= component :bottom_nav do |nav| %>
+  <% nav.with_button do |button| %>
+    <% button.with_label "Home" %>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+    </svg>
+  <% end %>
+  <% nav.with_button active: true do |button| %>
+    <% button.with_label "Warnings" %>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  <% end %>
+  <% nav.with_button do |button| %>
+    <% button.with_label "Statistics" %>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+    </svg>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/breadcrumbs/default.html.erb

@@ -0,0 +1,11 @@
+<%= component :breadcrumbs, class: "text-sm" do |bc| %>
+  <% bc.with_item do %>
+    <a>Home</a>
+  <% end %>
+  <% bc.with_item do %>
+    <a>Documents</a>
+  <% end %>
+  <% bc.with_item do %>
+    Add Document
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/breadcrumbs/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Breadcrumbs
+  # @label Breadcrumbs
+  class Preview < ViewComponent::Preview
+
+    def default
+      render_with_template template: 'breadcrumbs/default'
+    end
+
+    def with_icons
+      render_with_template template: 'breadcrumbs/with_icons'
+    end
+
+  end
+end

data/daisyui-view-components/previews/breadcrumbs/with_icons.html.erb

@@ -0,0 +1,50 @@
+<%= component :breadcrumbs, class: "text-sm" do |bc| %>
+  <% bc.with_item do %>
+    <a class="inline-flex items-center gap-2">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="h-4 w-4 stroke-current">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+      </svg>
+      Home
+    </a>
+  <% end %>
+  <% bc.with_item do %>
+    <a class="inline-flex items-center gap-2">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="h-4 w-4 stroke-current">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+      </svg>
+      Documents
+    </a>
+  <% end %>
+  <% bc.with_item do %>
+    <span class="inline-flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="h-4 w-4 stroke-current">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 13h6m-3-3v6m5 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"></path>
+        </svg>
+        Add Document
+      </span>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/button/default.html.erb

@@ -0,0 +1,3 @@
+<%= component :button, color: color, style: style, class: 'asd' do %>
+  Button
+<% end %>

data/daisyui-view-components/previews/button/preview.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Button
+  # @label Button
+  class Preview < ViewComponent::Preview
+
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Button::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param style [Symbol] select {{ DaisyUIViewComponents::Button::Component::STYLE_OPTIONS.dup.push('nil') }}
+    def default(
+      url: '',
+      label: '',
+      method: '',
+      options: '',
+      color: nil,
+      style: nil
+    )
+      render_with_template locals: {
+        url: url,
+        label: label,
+        method: method,
+        options: options,
+        color: color,
+        style: style
+      }, template: 'button/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/card/default.html.erb

@@ -0,0 +1,24 @@
+<%= component :card do |card| %>
+  <%= card.with_image do %>
+    <img src="https://placehold.co/600x400" alt="Album"/>
+  <% end %>
+  <%= card.with_card_body do |card_body| %>
+    <%= card_body.with_title do %>
+      Shoes!
+      <%= component :badge, class: 'badge-secondary' do %>
+        NEW
+      <% end %>
+    <% end %>
+    <p>If a dog chews shoes whose shoes does he choose?</p>
+    <%= card_body.with_card_actions class: "justify-end" do |actions| %>
+      <div class="my-auto">
+        <%= actions.with_badge do %>
+          $19.99
+        <% end %>
+      </div>
+      <%= actions.with_button class: "btn-primary" do %>
+        Buy now
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/card/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Card
+  # @label Card
+  class Preview < ViewComponent::Preview
+
+    def default
+      render_with_template template: 'card/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/carousel/default.html.erb

@@ -0,0 +1,37 @@
+<%= component :carousel, carousel_center: carousel_center, carousel_end: carousel_end, carousel_vertical: carousel_vertical, class: "rounded-box" do |carousel| %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/orange/white"
+          alt="CarrouselImage" />
+  <% end %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/green/white"
+          alt="CarrouselImage" />
+  <% end %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/blue/white"
+          alt="Burger" />
+  <% end %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/red/white"
+          alt="Burger" />
+  <% end %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/beige/white"
+          alt="Burger" />
+  <% end %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/purple/white"
+          alt="Burger" />
+  <% end %>
+  <% carousel.with_item do %>
+    <img
+          src="https://placehold.co/600x400/gold/white"
+          alt="Burger" />
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/carousel/preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Carousel
+  # @label Carousel
+  class Preview < ViewComponent::Preview
+
+    # @param carousel_center [Boolean] select [false, true] "Snap elements to center"
+    # @param carousel_end [Boolean] select [true, false] "Snap elements to end"
+    # @param carousel_vertical [Boolean] select [true, false] "Vertical carousel"
+    def default(carousel_center: false, carousel_end: false, carousel_vertical: false)
+      render_with_template locals: {
+        carousel_center: carousel_center,
+        carousel_end: carousel_end,
+        carousel_vertical: carousel_vertical
+      }, template: 'carousel/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/checkbox/default.html.erb

@@ -0,0 +1 @@
+<%= component :checkbox, size: size, color: color, checked: checked, disabled: disabled %>

data/daisyui-view-components/previews/checkbox/preview.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Checkbox
+  # @label Checkbox
+  class Preview < ViewComponent::Preview
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Checkbox::Component::SIZE_OPTIONS }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Checkbox::Component::COLOR_OPTIONS }}
+    # @param checked [Boolean] select [false, true] "Checked"
+    # @param disabled [Boolean] select [false, true] "Disabled"
+    def default(checked: false, disabled: false, size: nil, color: nil)
+      render_with_template locals: {
+        checked: checked,
+        disabled: disabled,
+        size: size,
+        color: color
+      }, template: 'checkbox/default'
+    end
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Checkbox::Component::SIZE_OPTIONS }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Checkbox::Component::COLOR_OPTIONS }}
+    # @param checked [Boolean] select [false, true] "Checked"
+    # @param disabled [Boolean] select [false, true] "Disabled"
+    def with_form(checked: false, disabled: false, size: nil, color: nil)
+      render_with_template locals: {
+        checked: checked,
+        disabled: disabled,
+        size: size,
+        color: color
+      }, template: 'checkbox/with_form'
+    end
+
+  end
+end

data/daisyui-view-components/previews/checkbox/with_form.html.erb

@@ -0,0 +1,3 @@
+<%= form_with url: "#" do |f| %>
+  <%= component :checkbox, :remember, label: "Remember me", size: size, color: color, checked: checked, disabled: disabled, form: f %>
+<% end %>

data/daisyui-view-components/previews/collapse/default.html.erb

@@ -0,0 +1,9 @@
+<%= component :collapse, open: open, arrow: arrow do |collapse| %>
+  <% collapse.with_checkbox data: {a: 1}, class: 'sss' %>
+  <% collapse.with_collapse_title do %>
+    Focus me to see content
+  <% end %>
+  <% collapse.with_collapse_content do %>
+    <p>tabindex="0" attribute is necessary to make the div focusable</p>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/collapse/preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Collapse
+  # @label Collapse
+  class Preview < ViewComponent::Preview
+
+    # @param open [Boolean] select [false, true] "Force open"
+    # @param arrow [Boolean] select [false, true] "Show arrow"
+    def default(open: false, arrow: false)
+      render_with_template locals: { open: open, arrow: arrow }, template: 'collapse/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/dropdown/default.html.erb

@@ -0,0 +1,11 @@
+<%= component :dropdown, position: position do |dropdown| %>
+  <% dropdown.with_trigger "Open" %>
+  <% dropdown.with_menu do |menu| %>
+    <% menu.with_item data: {a: 1}, class: "test" do %>
+      <a>Item 1</a>
+    <% end %>
+    <% menu.with_item do %>
+      <a>Item 2</a>
+    <% end %>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/dropdown/preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Dropdown
+  # @label Dropdown
+  class Preview < ViewComponent::Preview
+
+    # @param position [Symbol] select {{ DaisyUIViewComponents::Dropdown::Component::POSITIONS }} "The position of the menu"
+    def default(position: nil)
+      render_with_template locals: { position: position }, template: 'dropdown/default'
+    end
+
+  end
+end

data/daisyui-view-components/previews/file_input/default.html.erb

@@ -0,0 +1 @@
+<%= component :file_input, size: size, color: color, bordered: bordered, ghost: ghost %>

data/daisyui-view-components/previews/file_input/preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# rubocop:disable Layout/LineLength
+module FileInput
+  # @label FileInput
+  class Preview < ViewComponent::Preview
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::FileInput::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::FileInput::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param bordered [Boolean] select [true, false] "Adds border to input"
+    # @param ghost [Boolean] select [true, false] "Adds ghost style to input"
+    def default(size: nil, color: nil, bordered: false, ghost: false)
+      render_with_template locals: { size: size, color: color, bordered: bordered, ghost: ghost }, template: 'file_input/default'
+    end
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::FileInput::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::FileInput::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param bordered [Boolean] select [true, false] "Adds border to input"
+    # @param ghost [Boolean] select [true, false] "Adds ghost style to input"
+    def with_form(size: nil, color: nil, bordered: false, ghost: false)
+      render_with_template locals: { size: size, color: color, bordered: bordered, ghost: ghost }, template: 'file_input/with_form'
+    end
+
+  end
+end
+# rubocop:enable Layout/LineLength

data/daisyui-view-components/previews/file_input/with_form.html.erb

@@ -0,0 +1,13 @@
+<%= form_with url: "#" do |f| %>
+  <label class="form-control">
+    <div class="label">
+      <span class="label-text">Pick a file</span>
+      <span class="label-text-alt">Alt label</span>
+    </div>
+    <%= component :file_input, :some_file, form: f, size: size, color: color, bordered: bordered, ghost: ghost %>
+    <div class="label">
+      <span class="label-text-alt">Your bio</span>
+      <span class="label-text-alt">Alt label</span>
+    </div>
+  </label>
+<% end %>