neo_components 0.1.0

data/app/views/view_components/course_select/_search_component.html.erb

@@ -0,0 +1,48 @@
+<div data-controller="searches" class="w-full mb-4">
+  <%= form_with url: searches_path, method: :post, data: { action: "submit->searches#formSubmit", searches_target: "form" }, class: "w-full" do |form| %>
+    <%= _course_select_sidebar_component(tags: tags, form: form) %>
+
+    <%= form.hidden_field :context, value: search_context.context.to_s %>
+
+    <% if search_context.team_assign? %>
+      <%= form.hidden_field :team_id, value: search_context.team.id %>
+    <% elsif search_context.user_assign? %>
+      <%= form.hidden_field :user_id, value: search_context.user.id %>
+    <% elsif search_context.program?  %>
+      <%= form.hidden_field :program_id, value: search_context.program.id %>
+    <% end %>
+
+    <div class="relative rounded-md border border-line-colour-light w-full">
+      <%= input_field(
+            field_name: :term,
+            placeholder: "Search courses ...",
+            type: "search",
+            value: search_context.term,
+            left_icon: "magnifying-glass",
+            width: "w-full",
+            html_options: {
+              data: {
+                searches_target: 'searchInput',
+              },
+              id: 'course-search'
+            }
+          ) %>
+
+      <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer" data-action="click->searches#formSubmit">
+        <span class="flex cursor-pointer items-center text-primary-light text-base">Search</span>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="flex items-center justify-end w-full gap-4 my-4">
+    <div class="cursor-pointer" data-action="click->searches#clearSearch">
+      <span class="flex cursor-pointer items-center text-primary-light text-sm">Clear search </span>
+    </div>
+
+    <div data-action="click->searches#openFilter"class="cursor-pointer">
+      <%= button(label: 'Filter', type: "secondary", size: "sm", icon_name: "funnel", icon_position: "right") %>
+    </div>
+  </div>
+
+  <div id="selected-tags"></div>
+</div>

data/app/views/view_components/course_select/_sidebar_component.html.erb

@@ -0,0 +1,41 @@
+<div class="md:w-80 w-full bg-white box-shadow-medium fixed right-0 top-0 h-screen hidden z-50" data-searches-target="filters">
+  <div class="flex flex-row items-center justify-between border-b-2 border-line-colour mb-4 p-4">
+    <h2 class="text-lg font-semibold">Filter by</h2>
+    <span class="icon icon-close icon-base cursor-pointer bg-black" data-action="click->searches#closeFilter"></span>
+  </div>
+  <div class="h-full flex flex-col justify-between">
+    <div class="overflow-y-auto max-h-[calc(100vh-220px)] pb-4">
+      <div class="flex flex-col gap-2 p-4 border-b-2 border-line-colour">
+        <div class="flex justify-between">
+          <h3 class="text-xs font-medium text-primary mb-2">Levels</h3>
+          <span class="text-xs cursor-pointer mb-2" data-action="click->searches#clearFilters">Clear filter</span>
+        </div>
+        <ul class="flex flex-col gap-4">
+          <% tags.level.each do |tag| %>
+            <li class="mb-2 flex items-center">
+              <%= form.check_box :tags, { multiple: true, class: 'mr-2 h-3 w-3 tags-checkbox', id: dom_id(tag, 'check'), data: { searches_target: 'checkbox' } }, tag.name, nil %>
+              <label for="<%= dom_id(tag, 'check') %>" class="text-sm"><%= tag.name %></label>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+      <div class="flex flex-col gap-2 p-4">
+        <div class="pt-2">
+          <h3 class="text-xs font-medium text-primary mb-2">Category</h3>
+        </div>
+        <ul class="flex flex-col gap-4">
+          <% tags.category.each do |tag| %>
+            <li class="mb-2 flex items-center">
+              <%= form.check_box :tags, { multiple: true, class: 'mr-2 h-3 w-3 tags-checkbox', id: dom_id(tag, 'check'), data: { searches_target: 'checkbox' } }, tag.name, nil %>
+              <label for="<%= dom_id(tag, 'check') %>" class="text-sm"><%= tag.name %></label>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex gap-4 p-4 text-sm justify-center fixed bottom-0 md:w-80 w-full bg-white items-center border-t-2 border-line-colour">
+    <%= form.submit 'Apply Filters', class: 'btn-primary w-full' %>
+  </div>
+</div>

data/app/views/view_components/doc_section/_doc_section_component.html.erb

@@ -0,0 +1,6 @@
+<section class="my-4 border rounded-lg border-line-colour px-2 py-4">
+  <div class="heading heading-medium mb-2"><%= title %></div>
+  <div class="flex gap-4">
+    <%= block %>
+  </div>
+</section>

data/app/views/view_components/inputs/_checkbox_field.html.erb

@@ -0,0 +1,19 @@
+<div class="flex items-center gap-2 <%= width %>">
+  <% if form.present? %>
+    <%= form.check_box field_name,
+          { multiple: allow_multiple, class: "input-check" },
+          value,
+          nil
+    %>
+    <%= form.label field_name, label, class: "label-text" if label.present? %>
+  <% else %>
+    <input class="input-check"
+      type="checkbox"
+      id="<%= field_name %>_<%= value %>"
+      name="<%= field_name %><%= "[]" if allow_multiple %>"
+      value="<%= value %>">
+    <% if label.present? %>
+      <label class="label-text" for="<%= field_name %>_<%= value %>"><%= label %></label>
+    <% end %>
+  <% end %>
+</div>

data/app/views/view_components/inputs/_date_select_component.html.erb

@@ -0,0 +1,37 @@
+<div class="relative flex flex-col gap-3" data-controller="date-picker">
+  <%= form.label local_assigns[:field_name], local_assigns[:label], class: "text-sm font-medium" %>
+  <div class="relative flex w-full flex-row items-center">
+    <!--    <input type="date" id="datePicker" class="invisible p-0 w-[2px]" data-action="change->date-picker#datePicked" data-date-picker-target="datePicker" min="<%#= local_assigns[:min] %>" max="<%#= local_assigns[:max] %>"/>-->
+    <%= date_field_tag(
+          '', # This hidden field won't be submitted
+          nil,
+          id: 'datePicker',
+          class: 'invisible p-0 w-[2px]',
+          min: local_assigns[:min],
+          max: local_assigns[:max],
+          data: {
+            action: 'change->date-picker#datePicked',
+            date_picker_target: 'datePicker'
+          }
+        )
+    %>
+
+    <%= input_field(
+          form: local_assigns[:form],
+          field_name: local_assigns[:field_name],
+          placeholder: local_assigns[:placeholder],
+          type: "text",
+          width: "w-full",
+          html_options: {
+            data: {
+              date_picker_target: "dateSelector"
+            },
+            readonly: true
+          }
+        ) %>
+
+    <div class="absolute right-2 flex items-center pl-2">
+      <span class="cursor-pointer icon-small icon icon-calendar bg-letter-color" data-action="click->date-picker#openDatePicker"></span>
+    </div>
+  </div>
+</div>

data/app/views/view_components/inputs/_dropdown_field.html.erb

@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-4 <%= width %>">
+  <% if label.present? %>
+    <label class="text-letter-color-light text-sm md:text-base leading-tight">
+      <%= label %>
+    </label>
+  <% end %>
+
+  <% merged_html_options = (html_options || {}).merge(
+    class: "px-4 py-3 rounded border border-line-colour w-full text-letter-color-light text-base focus:border-primary focus:ring-0 #{width}"
+  ) %>
+
+  <% if form.present? %>
+    <%= form.select field_name,
+        options_for_select(options, value),
+        { include_blank: merged_html_options[:include_blank] },
+        merged_html_options %>
+  <% else %>
+   <%= select_tag field_name,
+        options_for_select([["Select an option", ""]]+options, value),
+        merged_html_options %>
+  <% end %>
+</div>

data/app/views/view_components/inputs/_file_selector.html.erb

@@ -0,0 +1,16 @@
+<div class="file-selector-component-container">
+  <% if file_selector.label.present? %>
+    <span class="<%= file_selector.label_style %>">
+      <%= file_selector.label %>
+    </span>
+  <% end %>
+
+  <%= render 'view_components/inputs/file_selector_component/file_selector_box', { file_selector: } %>
+
+  <% if file_selector.support_text.present? %>
+    <div class="<%= file_selector.support_text_style %>">
+      <span><%= file_selector.support_text %></span>
+      <span><%= file_selector.support_text_two %></span>
+    </div>
+  <% end %>
+</div>

data/app/views/view_components/inputs/_input_checkbox_component.html.erb

@@ -0,0 +1,7 @@
+<div class="group">
+  <label class="inline-block cursor-pointer <%= input.label_style %>">
+    <span class="flex gap-3 justify-center">
+      <%= render 'view_components/inputs/input_checkbox/checkbox', { input: } %>
+    </span>
+  </label>
+</div>

data/app/views/view_components/inputs/_input_mobile_component.html.erb

@@ -0,0 +1,16 @@
+<div class="w-full flex flex-col gap-1 group">
+  <% if input.label.present? %>
+    <%= label_tag input.name do %>
+      <span class="<%= input.label_style %> inline-block mb-1"><%= input.label %></span>
+      <%= render 'view_components/inputs/input_mobile/mobile_box', { input: } %>
+    <% end %>
+  <% else %>
+    <%= render 'view_components/inputs/input_mobile/mobile_box', { input: } %>
+  <% end %>
+
+  <% if input.subtext.present? %>
+    <span class="<%= input.subtext_style %>">
+      <%= input.subtext %>
+    </span>
+  <% end %>
+</div>

data/app/views/view_components/inputs/_input_radio_component.html.erb

@@ -0,0 +1,7 @@
+<div class="group">
+  <label class="inline-block cursor-pointer <%= input.label_style %>">
+    <span class="flex gap-3 justify-center">
+      <%= render 'view_components/inputs/input_radio/radio_button', { input: } %>
+    </span>
+  </label>
+</div>

data/app/views/view_components/inputs/_input_text_component.html.erb

@@ -0,0 +1,16 @@
+<div class="w-full flex flex-col gap-1">
+  <% if input.label.present? %>
+    <label class="group">
+      <span class="<%= input.label_style %> inline-block mb-1"><%= input.label %></span>
+      <%= render 'view_components/inputs/input_text/text_box', { input: } %>
+    </label>
+  <% else %>
+    <%= render 'view_components/inputs/input_text/text_box', { input: } %>
+  <% end %>
+
+  <% if input.subtext.present? %>
+    <span class="<%= input.subtext_style %>">
+      <%= input.subtext %>
+    </span>
+  <% end %>
+</div>

data/app/views/view_components/inputs/_mobile_field.html.erb

@@ -0,0 +1,31 @@
+<div class="flex flex-col gap-4 w-full">
+  <% if label.present? %>
+    <label class="text-letter-color-light text-sm md:text-base leading-tight">
+      <%= label %>
+    </label>
+  <% end %>
+  <div class="bg-white justify-between items-center flex rounded border border-line-colour">
+    <% if flag.present? %>
+      <div class="flex items-center justify-center border-r h-[52px] w-[96px] border-line-colour focus-within:border-primary">
+        <%= image_tag flag, alt: "IN", class: "h-8 w-8 rounded-full flag-box-shadow" %>
+      </div>
+    <% end %>
+
+    <% 
+      base_data = { controller: "input-mobile", action: "input->input-mobile#validateInput" } 
+      merged_data = base_data.merge((html_options && html_options[:data]) || {})
+      html_options_without_data = (html_options || {}).except(:data)
+    %>
+
+    <%= form.number_field field_name,
+        {
+          placeholder: placeholder,
+          pattern: "[0-9]{10}",
+          value: value,
+          title: "Enter exactly 10 digits",
+          class: "w-full text-letter-color-light text-base px-4 py-3 border-none rounded focus:ring-0 focus:outline-none",
+          required: true,
+          data: merged_data
+        }.merge(html_options_without_data) %>
+  </div>
+</div>

data/app/views/view_components/inputs/_radio_field.html.erb

@@ -0,0 +1,25 @@
+<% html_data = html_options[:data] || {} %>
+<% merged_options = html_options.merge(data: html_data) %>
+<% custom_class = merged_options.delete(:class) || "" %>
+<% radio_value = value || option %>
+
+<label class="h-12 px-4 py-3 bg-white flex justify-between items-center gap-2.5 cursor-pointer <%= width %> <%= height %>">
+  <% if option.present? %>
+    <div class="flex flex-row items-center w-full">        
+      <span class="text-letter-color-light text-base font-normal"><%= option %></span>  
+    </div>
+  <% end %>
+
+  <% if form.present? %>
+    <%= form.radio_button field_name, radio_value, merged_options.merge(class: "form-radio w-5 h-5 #{custom_class}") %>
+  <% else %>
+    <input type="radio"
+           name="<%= field_name %>"
+           value="<%= radio_value %>"
+           id="<%= merged_options[:id] %>"
+           class="form-radio w-5 h-5 <%= custom_class %>"
+           <%= "checked" if merged_options[:checked] %>
+           <%= "disabled" if merged_options[:disabled] %>
+           <%= tag.attributes(data: merged_options[:data]) %>>
+  <% end %>
+</label>

data/app/views/view_components/inputs/_text_field.html.erb

@@ -0,0 +1,52 @@
+<div class="flex flex-col gap-4 <%= width %> ">
+  <% if label.present? %>
+    <label class="text-letter-color-light text-sm md:text-base leading-tight">
+      <%= label %>
+    </label>
+  <% end %>
+
+  <% input_classes = "w-full text-letter-color-light text-base px-4 py-3 border-none rounded" %>
+  <% input_classes += " #{height}" if height.present? %>
+  <% input_classes += (left_icon.present? || right_icon.present?) ? " focus:ring-0 focus:outline-none" : " focus:border focus:border-primary" %>
+  <% html_options[:class] = [input_classes, html_options[:class]].compact.join(" ") %>
+  <% is_text_area = type == "text_area" %>
+
+  <% field_options = html_options.merge(placeholder: placeholder) %>
+  <% field_options[:value] = value if value.present? %>
+  <% field_options[:rows] = rows if is_text_area && rows.present? %>
+
+  <div class="bg-white justify-between items-center flex rounded border border-line-colour">
+    <% if left_icon.present? %>
+      <div class="pl-4 flex items-center">
+        <%= icon(left_icon, css: "icon-small") %>
+      </div>
+    <% end %>
+
+    <% if form.present? %>
+      <% case type %>
+      <% when "password" %>
+        <%= form.password_field field_name, field_options %>
+      <% when "email" %>
+        <%= form.email_field field_name, field_options %>
+      <% when "number" %>
+        <%= form.number_field field_name, field_options%>
+      <% when "text_area" %>
+        <%= form.text_area field_name,field_options%>
+      <% else %>
+        <%= form.text_field field_name, field_options %>
+      <% end %>
+    <% else %>
+      <% if is_text_area %>
+        <textarea placeholder="<%= placeholder %>" rows="<%= rows %>" class="<%= html_options[:class] %>"><%= value %>></textarea>
+      <% else %>
+        <%= text_field_tag field_name, value,field_options %>
+      <% end %>
+    <% end %>
+
+    <% if right_icon.present? %>
+      <div class="pt-2">
+        <%= icon(right_icon, css: "icon-mini") %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/view_components/inputs/_textarea.html.erb

@@ -0,0 +1,26 @@
+<div class="flex flex-col gap-4">
+  <% if label.present? %>
+    <% if form.present? %>
+      <%= form.label field_name, label, class: "text-letter-color-light text-sm md:text-base leading-tight" %>
+    <% else %>
+      <%= label_tag field_name, label, class: "text-letter-color-light text-sm md:text-base leading-tight" %>
+    <% end %>
+  <% end %>
+
+  <div class="bg-white rounded border border-line-colour flex items-center">
+    <% if form.present? %>
+      <%= form.text_area field_name,
+        html_options.merge(
+          class: "w-full text-letter-color-light text-base px-4 py-3 border-none rounded focus:border focus:border-primary"
+        )
+      %>
+    <% else %>
+      <%= text_area_tag field_name,
+        value,
+        html_options.merge(
+          class: "w-full text-letter-color-light text-base px-4 py-3 border-none rounded focus:border focus:border-primary"
+        )
+      %>
+    <% end %>
+  </div>
+</div>

data/app/views/view_components/inputs/date_picker_component/_date_picker.html.erb

@@ -0,0 +1,16 @@
+<div class="w-full flex flex-col gap-1" data-controller="date-picker">
+  <% if date_picker.label.present? %>
+    <label class="group">
+      <span class="<%= date_picker.label_style %>"><%= date_picker.label %></span>
+      <%= render 'view_components/inputs/date_picker_component/input_box', { date_picker: } %>
+    </label>
+  <% else %>
+    <%= render 'view_components/inputs/date_picker_component/input_box', { date_picker: } %>
+  <% end %>
+
+  <% if date_picker.support_text.present? %>
+    <span class="<%= date_picker.support_text_style %>">
+      <%= date_picker.support_text %>
+    </span>
+  <% end %>
+</div>

data/app/views/view_components/inputs/date_picker_component/_input_box.html.erb

@@ -0,0 +1,34 @@
+<div class="relative flex w-full items-center">
+
+  <% if date_picker.form.present? %>
+    <% field_options = {
+      class: date_picker.html_options[:class],
+      placeholder: date_picker.placeholder,
+      data: { date_picker_target: "dateSelector" },
+      disabled: date_picker.disabled
+    } %>
+
+    <% field_options[:value] = date_picker.value if date_picker.value.present? %>
+
+    <%= date_picker.form.text_field date_picker.name, **field_options %>
+  <% else %>
+    <%= text_field_tag date_picker.name,
+          date_picker.value,
+          class: date_picker.html_options[:class],
+          placeholder: date_picker.placeholder,
+          data: { date_picker_target: "dateSelector" },
+          disabled: date_picker.disabled %>
+  <% end %>
+  <input type="date"
+        class="invisible p-0 w-[2px]"
+        data-date-picker-target="datePicker"
+        data-action="change->date-picker#datePicked"
+        min="<%= Date.today.strftime('%Y-%m-%d') %>" />
+
+
+  <div class="<%= date_picker.icon_wrapper_style %>" data-action="click->date-picker#openDatePicker">
+    <%= icon("calendar", css: date_picker.icon_style) %>
+  </div>
+</div>
+
+

data/app/views/view_components/inputs/dropdown_component/_dropdown.html.erb

@@ -0,0 +1,16 @@
+<div class="w-full flex flex-col gap-1">
+  <% if dropdown.label.present? %>
+    <label class="group">
+      <span class="<%= dropdown.label_style %> inline-block mb-1"><%= dropdown.label %></span>
+      <%= render 'view_components/inputs/dropdown_component/select_box', { dropdown: } %>
+    </label>
+  <% else %>
+    <%= render 'view_components/inputs/dropdown_component/select_box', { dropdown: } %>
+  <% end %>
+
+  <% if dropdown.support_text.present? %>
+    <span class="<%= dropdown.support_text_style %>">
+      <%= dropdown.support_text %>
+    </span>
+  <% end %>
+</div>

data/app/views/view_components/inputs/dropdown_component/_select_box.html.erb

@@ -0,0 +1,10 @@
+<% if dropdown.form.present? %>
+  <%= dropdown.form.select dropdown.name,
+      options_for_select(dropdown.options, dropdown.value),
+      { prompt: dropdown.prompt },  
+      dropdown.html_options %>
+<% else %>
+  <%= select_tag dropdown.name,
+      options_for_select(dropdown.options, dropdown.value),
+      dropdown.html_options.merge(include_blank: dropdown.prompt) %>
+<% end %>

data/app/views/view_components/inputs/file_selector_component/_file_selector_box.html.erb

@@ -0,0 +1,76 @@
+<div data-controller="file-selector" data-file-selector-target="wrapper" class="<%= file_selector.wrapper_style %>">
+  <div
+    class="file-selector-input-box"
+    data-action="click->file-selector#chooseFile">
+    <div class="flex flex-col gap-1 items-center" data-file-selector-target="chooseFile">
+
+      <% if file_selector.form.present? %>
+        <%= file_selector.form.file_field(
+              file_selector.name,
+              accept: file_selector.accepted_types,
+              class: "hidden",
+              disabled: file_selector.disabled,
+              data: { file_selector_target: "fileInput" }
+            ) %>
+      <% else %>
+        <%= file_field_tag(
+              file_selector.name,
+              accept: file_selector.accepted_types,
+              class: "hidden",
+              disabled: file_selector.disabled,
+              data: { file_selector_target: "fileInput" }
+            ) %>
+      <% end %>
+
+      <%= icon("document-arrow-up", css: file_selector.upload_icon_style) %>
+      <% if file_selector.error.present? %>
+        <p class="general-text-sm-normal file-selctor-error-text">
+          <%= file_selector.error %>
+        </p>
+      <% end %>
+      <p class="<%= file_selector.choose_file_style %>">Choose file</p>
+    </div>
+
+    <label
+      class="hidden flex flex-col items-center justify-center"
+      data-file-selector-target="selectedFileName">
+      <span data-file-selector-target="fileName" class="general-text-md-normal text-center"></span>
+      <span data-file-selector-target="fileSize" class="general-text-sm-normal text-center"></span>
+    </label>
+  </div>
+
+  <% if file_selector.type == "image" %>
+    <div class="<%= file_selector.preview_style %> hidden" data-file-selector-target="previewContainer">
+      <img data-file-selector-target="preview" class="file-selector-preview-image" alt="Preview" />
+      <button
+        type="button"
+        data-action="click->file-selector#resetInput"
+        class="file-selector-preview-close">
+        <%= icon("x-circle", css: "file-selector-close-icon") %>
+      </button>
+    </div>
+    <% elsif file_selector.type == "video" %>
+      <div class="<%= file_selector.preview_style %> hidden" data-file-selector-target="previewContainer">
+        <video data-file-selector-target="preview"
+          class="file-selector-preview-image" src=""></video>
+        <button
+          type="button"
+          data-action="click->file-selector#resetInput"
+          class="file-selector-preview-close">
+          <%= icon("x-circle", css: "file-selector-close-icon") %>
+        </button>
+      </div>
+  <% elsif file_selector.type == "document" %>
+    <div class="<%= file_selector.preview_style %> hidden" data-file-selector-target="previewContainer">
+      <div data-file-selector-target="iconPreview" class="file-selector-doc-preview">
+        <%= icon("document-text", css: "file-selector-upload-icon fill-primary") %>
+      </div>
+      <button
+        type="button"
+        data-action="click->file-selector#resetInput"
+        class="file-selector-preview-close">
+        <%= icon("x-circle", css: "file-selector-close-icon") %>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/view_components/inputs/input_checkbox/_checkbox.html.erb

@@ -0,0 +1,20 @@
+<% element = content_tag :div, class: "flex justify-center items-center" do %>
+  <% if input.form.present? %>
+    <%= input.form.check_box input.name,
+          input.html_options,
+          input.value,
+          nil %>
+  <% else %>
+    <%= check_box_tag input.name,
+          input.value,
+          input.html_options[:checked],
+          input.html_options.except(:checked) %>
+  <% end %>
+  <div class="w-5 h-5 flex justify-center items-center rounded-sm border-2 <%= input.box_style %>">
+    <%= icon("check", span_css: "w-5 h-5 #{input.check_style}", stroke_width: '2.0') %>
+  </div>
+<% end %>
+
+<% label_tag = content_tag :div, input.label, class: "main-text-md-normal" %>
+
+<%= arrange_tags(label_tag, element, input.label_position) %>

data/app/views/view_components/inputs/input_mobile/_code.html.erb

@@ -0,0 +1,13 @@
+  <% if input.form.present? %>
+    <% if input.code_selectable? %>
+      <%= input.form.select input.code_name, options_for_select(available_country_codes_list, input.code_value), {}, input.html_options.merge(class: input.code_wrapper_style) %>
+    <% else %>
+      <%= input.form.text_field input.code_name, input.html_options.merge(class: input.code_wrapper_style, readOnly: true, value: input.code_value) %>
+    <% end %>
+  <% else %>
+    <% if input.code_selectable? %>
+      <%= select_tag input.code_name, options_for_select(available_country_codes_list, input.code_value), input.html_options.merge(class: input.code_wrapper_style) %>      
+    <% else %>
+      <%= text_field_tag input.code_name, input.code_value, input.html_options.merge(class: input.code_wrapper_style, readOnly: true) %>      
+    <% end %>
+  <% end %>

data/app/views/view_components/inputs/input_mobile/_mobile_box.html.erb

@@ -0,0 +1,4 @@
+<div class="flex items-start gap-2">
+  <%= render 'view_components/inputs/input_mobile/code', { input: } %>
+  <%= render 'view_components/inputs/input_mobile/number', { input: } %>
+</div>

data/app/views/view_components/inputs/input_mobile/_number.html.erb

@@ -0,0 +1,13 @@
+<% if input.icon_name.present? %>
+  <% icon_tag = content_tag(:div, class: input.icon_style) do %>
+    <%= icon(input.icon_name, css: input.icon_size) %>
+  <% end %>
+<% end %>
+<%= content_tag :div, class: input.input_wrapper_style do %>
+  <% if input.form.present? %>
+    <% input_tag = input.form.number_field input.name, input.html_options.merge(value: input.value) %>
+  <% else %>
+    <% input_tag = number_field_tag input.name, input.value, input.html_options %>
+  <% end %>
+  <%= arrange_tags(icon_tag, input_tag, input.icon_position) %>
+<% end %>

data/app/views/view_components/inputs/input_radio/_radio_button.html.erb

@@ -0,0 +1,14 @@
+<% element = content_tag :div, class: "flex justify-center items-center" do %>
+  <% if input.form.present? %>
+    <%= input.form.radio_button input.name, input.value, **input.html_options %>
+  <% else %>
+    <%= radio_button_tag input.name, input.value, **input.html_options %>
+  <% end %>
+  <div class="w-5 h-5 flex justify-center items-center rounded-full border-2 <%= input.radio_circle_style %>">
+    <div class="w-2 h-2 inline-block rounded-full <%= input.radio_dot_style %>"></div>
+  </div>
+<% end %>
+
+<% label_tag = content_tag :div, input.label, class: "main-text-lg-normal" %>
+
+<%= arrange_tags(label_tag, element, input.label_position) %>