add form page

majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html

-<div class="checkbox form-field__control flex items-center {{ classes }}">
-  <input type="checkbox" id="checkbox_1">
-  <label for="checkbox_1">{{ label }}</label>
+<div class="form__checkbox flex items-center {{ classes }}">
+  <input type="form__checkbox" id="{{ id }}">
+  <label for="{{ id }}">{{ label }}</label>
 </div>

majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml

 context:
   classes: ''
   label: 'Souhlasím se zpracováním osobních údajů'
+  id: 'checkbox_1'
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html

+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}date{% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml

+context:
+  label: 'Datum narození'
+  placeholder: ''
+  hint: ''
+  is_required: true
+  id: 'date_1'
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html

+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}datetime-local{% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml

+context:
+  label: 'Datum a čas poslední injekce'
+  placeholder: ''
+  hint: ''
+  is_required: true
+  id: 'datetime_1'
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html

+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}email{% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml

+context:
+  label: 'Registrační email'
+  placeholder: 'info@pirati.cz'
+  hint: ''
+  id: 'email_1'
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html

-<div class="flex flex-col gap-2 max-w-min">
+<div class="flex flex-col gap-2 items-start">
   {% if label %}
     <div>
       <label for="{{ id }}" class="leading-5">
@@ -11,12 +11,11 @@
     </div>
   {% endif %}
 
-  <div class="flex gap-2">
+  <div class="flex w-full gap-2">
     <input
-      type="text"
+      type="{% block type %}text{% endblock %}"
       class="
-        form-field__control
-        py-3 px-3
+        py-3 px-3 w-full lg:w-96
 
         {% block color_classes %}
           bg-grey-100 border border-grey-200

majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml

 context:
-  placeholder: 'Registrační email'
-  hint: ''
+  placeholder: 'Pirát Pepa'
+  hint: 'Hlavně žádné osobní údaje.'
   name: 'example'
-  is_required: false
+  is_required: true
   extra_classes: ''
-  label: ''
+  label: 'Jméno'
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html

 {% extends 'patterns/atoms/form_fields/form_input.html' %}
 
 {% block color_classes %}
-  text-input bg-white border-none
+  form__text-input bg-white border-none
 {% endblock %}

majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html

+{% extends "patterns/atoms/form_fields/form_select.html" %}
+
+{% block select_attrs %}multiple{% endblock %}
+
+{% block wrapper_classes %}
+  form__select form__multiselect w-full lg:w-96
+{% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html

+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}tel{% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml

+context:
+  label: 'Telefon'
+  placeholder: '+420 666 666 666'
+  hint: ''
+  is_required: false
+  id: 'phone_1'
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html

+<div class="flex flex-col gap-2 items-start">
+  {% if label %}
+    <div>
+      <label for="{{ id }}" class="leading-5">
+        {{ label }}
+      </label>
+
+      {% if is_required %}
+        <span class="text-red-600">*</span>
+      {% endif %}
+    </div>
+  {% endif %}
+
+  <div class="flex flex-col gap-1">
+    {% for option in options %}
+      <div class="flex gap-3">
+        <input type="radio" id="{{ option.id }}" name="{{ id }}" value="{{ option.text }}">
+        <label for="{{ option.id }}">{{ option.text }}</label>
+      </div>
+    {% endfor %}
+  </div>
+</div>
\ No newline at end of file

majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml

+context:
+  label: 'Radio boxík'
+  options:
+    -
+      id: 'option-1'
+      text: 'Option 1'
+    -
+      id: 'option-2'
+      text: 'Option 2'
+    -
+      id: 'option-3'
+      text: 'Option 3'
+  classes: ''
+  id: 'radio_1'
+  is_required: true

majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html

-<div class="flex flex-col">
+<div class="flex flex-col gap-2 items-start">
   {% if label %}
     <label for="{{ id }}">
       {{ label }}
@@ -9,12 +9,25 @@
     </label>
   {% endif %}
 
-  <div class="select max-w-72">
+  <div
+    class="
+      {% block wrapper_classes %}
+        form__select w-full lg:w-96
+      {% endblock %}
+    "
+  >
     <select
-      class="select__control form-field__control {{ classes }}"
+      class="
+        select__control
+        
+        {% block classes %}
+          {{ classes }}
+        {% endblock %}
+      "
       value=""
       id="{{ id }}"
       name="{{ id }}"
+      {% block select_attrs %}{% endblock %}
     >
       {% for option in options %}
         <option>{{ option }}</option>

majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml

 context:
-  label: ''
+  label: 'Vybírací boxík'
   options:
     - 'Option 1'
     - 'Option 2'
@@ -8,5 +8,5 @@ context:
     - 'Option 5'
     - 'Option 6'
   classes: ''
-  id: 'example2'
+  id: 'select_1'
   is_required: true

majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html

+<div class="flex flex-col items-start gap-2 {{ classes }}">
+  <label for="{{ id }}">
+    {{ label }}
+
+    {% if is_required %}
+      <span class="text-red-600">*</span>
+    {% endif %}
+  </label>
+  <textarea
+    class="
+      form__text-input resize-none
+
+      w-full lg:w-96
+    "
+    id="{{ id }}"
+  ></textarea>
+</div>

majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml

+context:
+  classes: ''
+  label: 'Smluvní podmínky'
+  id: 'textarea_1'
\ No newline at end of file