daisyui-view-components 0.0.2 → 0.0.3

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

@@ -0,0 +1 @@
+<%= component :link, "Link", url: "#", color: color, data: { action: "click" }  %>

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Link
+  # @label Link
+  class Preview < ViewComponent::Preview
+
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Link::Component::COLOR_OPTIONS }}
+    # @param url [String]
+    def default(color: DaisyUIViewComponents::Link::Component::DEFAULT_COLOR, url: '#')
+      render_with_template locals: {
+        url: url,
+        color: color
+      }, template: 'link/default'
+    end
+
+  end
+end

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

@@ -0,0 +1,14 @@
+<%= component :button, 'Open Modal', onclick: 'my_modal_2.showModal()' %>
+
+<%= component :modal, id: 'my_modal_2', open: open, backdrop: backdrop do |modal| %>
+  <% modal.with_modal_box close_button: close_button do |box| %>
+    <h3 class="text-lg font-bold">Hello 2!</h3>
+    <p class="py-4">2 - Press ESC key or click the button below to close</p>
+    <% box.with_modal_action do |action| %>
+      <%= action.with_close_button class: "btn-sm" %>
+      <%= action.with_button class: "btn-sm" do %>
+        Accept
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Modal
+  # @label Modal
+  class Preview < ViewComponent::Preview
+
+    # @param open [Boolean] select [false, true] "Default modal to opened state"
+    # @param backdrop [Boolean] select [true, false] "Whether to allow closing the modal on backdrop clicks"
+    # @param close_button [Boolean] select [true, false] "Whether to show a close button 'x' in the top right corner of the modal"
+    def default(open: false, backdrop: true, close_button: true)
+      render_with_template locals: {
+        open: open,
+        backdrop: backdrop,
+        close_button: close_button
+      }, template: 'modal/default'
+    end
+
+  end
+end

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

@@ -0,0 +1,75 @@
+<%= component :navbar do |nav| %>
+  <% nav.with_start_element do %>
+    <%= component :dropdown, class: 'lg:hidden' do |dropdown| %>
+      <% dropdown.with_trigger 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="M4 6h16M4 12h8m-8 6h16" />
+        </svg>
+      <% end %>
+      <% dropdown.with_menu do |menu| %>
+        <% menu.with_item do %>
+          <a>Item 1</a>
+        <% end %>
+        <% menu.with_item do %>
+          <a>Item 2</a>
+        <% end %>
+      <% end %>
+    <% end %>
+    <a class="btn btn-ghost text-xl hidden md:block lg:block">daisyUI</a>
+  <% end %>
+
+  <% nav.with_center_element class: 'hidden lg:flex' do %>
+    <div class="form-control">
+      <input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
+    </div>
+  <% end %>
+
+  <% nav.with_end_element class: 'gap-2' do %>
+    <%= component :menu, class: 'menu-horizontal px-1' do |menu| %>
+      <% menu.with_item do %>
+        <a>Item 1</a>
+      <% end %>
+      <% menu.with_item collapsible: true do %>
+        <summary>Parent</summary>
+        <ul class="p-2 bg-base-200 w-40">
+          <li><a>Submenu 1</a></li>
+          <li><a>Submenu 2</a></li>
+        </ul>
+      <% end %>
+      <% menu.with_item do %>
+        <a>Item 3</a>
+      <% end %>
+    <% end %>
+    <%= component :dropdown, position: :end do |dropdown| %>
+      <% dropdown.with_trigger class: 'btn btn-ghost btn-circle' do %>
+        <%= component :avatar do %>
+          <div class="w-10 rounded-full">
+            <img
+              alt="Tailwind CSS Navbar component"
+              src="https://avatar.iran.liara.run/public/88" />
+          </div>
+        <% end %>
+      <% end %>
+      <% dropdown.with_menu do |menu| %>
+        <% menu.with_item do %>
+          <a>Profile</a>
+        <% end %>
+        <% menu.with_item do %>
+          <a>Settings</a>
+        <% end %>
+        <% menu.with_item do %>
+          <a>Logout</a>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

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

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

@@ -0,0 +1 @@
+<%= component :radio, size: size, color: color, checked: checked, disabled: disabled, value: "something" %>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# rubocop:disable Layout/LineLength
+module Radio
+  # @label Radio
+  class Preview < ViewComponent::Preview
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Radio::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Radio::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param checked [Boolean] select [false, true] "Checked"
+    # @param disabled [Boolean] select [false, true] "Disabled"
+    def default(size: nil, color: nil, disabled: false, checked: false)
+      render_with_template locals: { size: size, color: color, disabled: disabled, checked: checked }, template: 'radio/default'
+    end
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Radio::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::Radio::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param checked [Boolean] select [false, true] "Checked"
+    # @param disabled [Boolean] select [false, true] "Disabled"
+    def with_form(size: nil, color: nil, disabled: false, checked: false)
+      render_with_template locals: { size: size, color: color, disabled: disabled, checked: checked }, template: 'radio/with_form'
+    end
+
+  end
+end
+# rubocop:enable Layout/LineLength

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

@@ -0,0 +1,4 @@
+<%= form_with url: "#" do |f| %>
+  <%= component :radio, :pill, label: "Red pill", color: :error, class: "checked:bg-red-500", form: f %>
+  <%= component :radio, :pill, label: "Blue pill", class: "checked:bg-blue-500", form: f %>
+<% end %>

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

@@ -0,0 +1 @@
+<%= component :range, size: size, color: color, min: min, max: max, value: "10", name: "something" %>

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

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

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

@@ -0,0 +1,6 @@
+<%= component :rating, size: size, mask_shape: mask_shape do |rating| %>
+  <%= rating.with_input name: 'rating-1' %>
+  <%= rating.with_input name: 'rating-1' %>
+  <%= rating.with_input name: 'rating-1' %>
+  <%= rating.with_input name: 'rating-1' %>
+<% end %>

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

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

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

@@ -0,0 +1 @@
+<%= component :select, size: size, color: color, ghost: ghost, bordered: bordered, class: "w-full", choices: options_for_select(%w[Ada Ben Caz]), include_blank: "Choose a user…", disable_blank: true %>

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

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

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

@@ -0,0 +1,13 @@
+<%= form_with url: "#" do |f| %>
+  <label class="form-control w-full max-w-xs">
+    <div class="label">
+      <span class="label-text">Pick the best fantasy franchise</span>
+      <span class="label-text-alt">Alt label</span>
+    </div>
+    <%= component :select, :film, form: f, size: size, color: color, ghost: ghost, bordered: bordered, class: "w-full", choices: options_for_select(['Star Wars', 'Harry Potter', 'Lord of the Rings', 'Planet of the Apes', 'Star Trek']), include_blank: "Pick one…", disable_blank: true %>
+    <div class="label">
+      <span class="label-text-alt">Alt label</span>
+      <span class="label-text-alt">Alt label</span>
+    </div>
+  </label>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%= component :steps, direction: direction do |steps| %>
+  <%= steps.with_step color: :primary do %>
+    Register
+  <% end %>
+  <%= steps.with_step color: :primary do %>
+    Choose plan
+  <% end %>
+  <%= steps.with_step do %>
+    Purchase
+  <% end %>
+  <%= steps.with_step do %>
+    Receive Product
+  <% end %>
+<% end %>

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Steps
+  # @label Steps
+  class Preview < ViewComponent::Preview
+
+    # @param direction [Symbol] select {{ DaisyUIViewComponents::Steps::Component::DIRECTION_OPTIONS }}
+    def default(direction: nil)
+      render_with_template locals: { direction: direction }, template: 'steps/default'
+    end
+
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= component :swap do |swap| %>
+  <%= swap.with_input name: 'item_trigger' %>
+  <%= swap.with_swap_on do %>
+    On
+  <% end %>
+  <%= swap.with_swap_off do %>
+    Off
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/swap/flip_effect.html.erb

@@ -0,0 +1,9 @@
+<%= component :swap, class: 'swap-flip text-9xl' do |swap| %>
+  <%= swap.with_input name: 'item_trigger' %>
+  <%= swap.with_swap_on do %>
+    😈
+  <% end %>
+  <%= swap.with_swap_off do %>
+    😇
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/swap/hamburger_button.html.erb

@@ -0,0 +1,26 @@
+<%= component :swap, class: 'swap-rotate btn btn-circle' do |swap| %>
+  <%= swap.with_input name: 'item_trigger' %>
+  <%= swap.with_swap_off do %>
+    <!-- hamburger icon -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 512 512">
+      <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+    </svg>
+  <% end %>
+  <%= swap.with_swap_on do %>
+    <!-- close icon -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 512 512">
+      <polygon
+        points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+    </svg>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Swap
+  # @label Swap
+  class Preview < ViewComponent::Preview
+
+    def default
+      render_with_template template: 'swap/default'
+    end
+
+    def volume_icons
+      render_with_template template: 'swap/volume_icons'
+    end
+
+    def rotate_effect
+      render_with_template template: 'swap/rotate_effect'
+    end
+
+    def hamburger_button
+      render_with_template template: 'swap/hamburger_button'
+    end
+
+    def flip_effect
+      render_with_template template: 'swap/flip_effect'
+    end
+
+  end
+end

data/daisyui-view-components/previews/swap/rotate_effect.html.erb

@@ -0,0 +1,23 @@
+<%= component :swap, class: 'swap-rotate' do |swap| %>
+  <%= swap.with_input name: 'item_trigger' %>
+  <%= swap.with_swap_on class: 'h-10 w-10' do %>
+    <!-- sun icon -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24">
+      <path
+        d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+    </svg>
+  <% end %>
+  <%= swap.with_swap_off class: 'h-10 w-10' do %>
+    <!-- moon icon -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24">
+      <path
+        d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+    </svg>
+  <% end %>
+<% end %>

data/daisyui-view-components/previews/swap/volume_icons.html.erb

@@ -0,0 +1,27 @@
+<%= component :swap do |swap| %>
+  <%= swap.with_input name: 'item_trigger' %>
+  <%= swap.with_swap_on do %>
+    <!-- volume on icon -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 24 24">
+      <path
+        d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
+    </svg>
+  <% end %>
+  <%= swap.with_swap_off do %>
+    <!-- volume off icon -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 24 24">
+      <path
+        d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z" />
+    </svg>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,60 @@
+<%= component :table, size: size, zebra: zebra do |table| %>
+  <% table.with_head do |head| %>
+    <% head.with_cell %>
+    <% head.with_cell data: { example: "cell" } do %>
+      Name
+    <% end %>
+    <% head.with_cell "Job" %>
+    <% head.with_cell "Favorite color" %>
+  <% end %>
+  <% table.with_body do |body| %>
+    <% body.with_row hover: true do |row| %>
+      <% row.with_cell "1" %>
+      <% row.with_cell do %>
+        Cy Ganderton
+      <% end %>
+      <% row.with_cell do %>
+        Quality Control Specialist 
+      <% end %>
+      <% row.with_cell do %>
+        Blue
+      <% end %>
+    <% end %>
+    <% body.with_row do |row| %>
+      <% row.with_cell "2" %>
+      <% row.with_cell do %>
+        Hart Hagerty 
+      <% end %>
+      <% row.with_cell do %>
+        Desktop Support Technician 
+      <% end %>
+      <% row.with_cell do %>
+        Purple
+      <% end %>
+    <% end %>
+    <% body.with_row do |row| %>
+      <% row.with_cell "3" %>
+      <% row.with_cell do %>
+        Brice Swyre
+      <% end %>
+      <% row.with_cell do %>
+        Tax Accountant 
+      <% end %>
+      <% row.with_cell do %>
+        Red
+      <% end %>
+    <% end %>
+    <% body.with_row do |row| %>
+      <% row.with_cell "4" %>
+      <% row.with_cell do %>
+        Yancy Tear	
+      <% end %>
+      <% row.with_cell do %>
+        Community Outreach Specialist 
+      <% end %>
+      <% row.with_cell do %>
+        Indigo
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Table
+  # @label Table
+  class Preview < ViewComponent::Preview
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Table::Component::SIZE_OPTIONS }}
+    # @param zebra [Boolean] select [true, false] "Adds a box style to tabs container"
+    def default(size: nil, zebra: nil)
+      render_with_template locals: {
+        size: size,
+        zebra: zebra
+      }, template: 'table/default'
+    end
+
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= component :tabs, size: size, boxed: boxed, bordered: bordered, lifted: lifted do |tabs| %>
+  <% tabs.with_tab do %>
+    Tab 1
+  <% end %>
+  <% tabs.with_tab active: true do %>
+    Tab 2
+  <% end %>
+  <% tabs.with_tab disabled: false do %>
+    Tab 3
+  <% end %>
+<% end %>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Tabs
+  # @label Tabs
+  class Preview < ViewComponent::Preview
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::Tabs::Component::SIZE_OPTIONS }}
+    # @param boxed [Boolean] select [true, false] "Adds a box style to tabs container"
+    # @param bordered [Boolean] select [true, false] "Adds bottom border to tab item"
+    # @param lifted [Boolean] select [true, false] "Adds lifted style to tab item"
+    def default(size: nil, boxed: false, bordered: false, lifted: false)
+      render_with_template locals: {
+        size: size,
+        boxed: boxed,
+        bordered: bordered,
+        lifted: lifted
+      }, template: 'tabs/default'
+    end
+
+  end
+end

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

@@ -0,0 +1 @@
+<%= component :text_input, :name, value: "A text field", size: size, color: color, bordered: bordered, ghost: ghost %>

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# rubocop:disable Layout/LineLength
+module TextInput
+  # @label TextInput
+  class Preview < ViewComponent::Preview
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param bordered [Boolean] select [false, true] "Bordered"
+    # @param ghost [Boolean] select [false, true] "Ghost"
+    def default(size: nil, color: nil, bordered: false, ghost: false)
+      render_with_template locals: { size: size, color: color, bordered: bordered, ghost: ghost }, template: 'text_input/default'
+    end
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param bordered [Boolean] select [false, true] "Bordered"
+    # @param ghost [Boolean] select [false, true] "Ghost"
+    def with_form(size: nil, color: nil, bordered: false, ghost: false)
+      render_with_template locals: { size: size, color: color, bordered: bordered, ghost: ghost }, template: 'text_input/with_form'
+    end
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param bordered [Boolean] select [false, true] "Bordered"
+    # @param ghost [Boolean] select [false, true] "Ghost"
+    def with_icon_inside(size: nil, color: nil, bordered: false, ghost: false)
+      render_with_template locals: { size: size, color: color, bordered: bordered, ghost: ghost }, template: 'text_input/with_icon_inside'
+    end
+
+    # @param size [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::SIZE_OPTIONS.dup.push('nil') }}
+    # @param color [Symbol] select {{ DaisyUIViewComponents::TextInput::Component::COLOR_OPTIONS.dup.push('nil') }}
+    # @param bordered [Boolean] select [false, true] "Bordered"
+    # @param ghost [Boolean] select [false, true] "Ghost"
+    def with_text_label_inside(size: nil, color: nil, bordered: false, ghost: false)
+      render_with_template locals: { size: size, color: color, bordered: bordered, ghost: ghost }, template: 'text_input/with_text_label_inside'
+    end
+
+  end
+end
+# rubocop:enable Layout/LineLength

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

@@ -0,0 +1,13 @@
+<%= form_with url: "#" do |f| %>
+  <label class="form-control w-full max-w-xs">
+    <div class="label">
+      <span class="label-text">What is your name?</span>
+      <span class="label-text-alt">Top Right label</span>
+    </div>
+    <%= component :text_input, :name, form: f, placeholder: "Type here", size: size, color: color, bordered: bordered, ghost: ghost %>
+    <div class="label">
+      <span class="label-text-alt">Bottom Left label</span>
+      <span class="label-text-alt">Bottom Right label</span>
+    </div>
+  </label>
+<% end %>