okonomi_ui_kit 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 046343b54f5e77b5bfed849724f58fe4ef7248379def23b4bde6b3f177929cba
-  data.tar.gz: 38452296f2f644bf5fef70a262d88c6ec4e9927fdad13233401cb2d4ede544be
+  metadata.gz: 72d7f384eb55f293ac296765d5f4c8aa7d41abef10e71e37b268f21ca1700947
+  data.tar.gz: 9d20c03d219a277fe26327c1c503c82e3ef4c38fc0bb0ba13e502c2e0e043b87
 SHA512:
-  metadata.gz: ca836822748ed4a8ae72cbac7c4192545927198b98763f0c90f9157a451077ebbdd11c45f125f387a94afd4a08f49ff56b511b20bab9636a6c22d43621fed21d
-  data.tar.gz: 22a80940b55c4bbdb9a083cb0017999780a15a1ad57498c39a782fb0af93d561419dc2c124fd3ad270f1fdc88fddfe5839d009df40a6de8929c1840472dde858
+  metadata.gz: 86e22f8b7cfbe2273980fe52fdf7664e3fa7e223a0dcb9da0c833db3c54aca108bf69e5393d2ee8a77f946935c51810809353a0020e8a478e7159bc9cdb0be03
+  data.tar.gz: 534b0a48e874565213ad9f6af731f954394db21350d37c69d2fd97f38cb2c13614bb97c82ef345903f383212ad089c7508651f91cff916b5462ba5b027977fe8

data/app/assets/builds/okonomi_ui_kit/application.tailwind.css

@@ -128,6 +128,7 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-default-50: var(--color-gray-50);
+    --color-default-300: var(--color-gray-300);
     --color-default-500: var(--color-gray-500);
     --color-default-600: var(--color-gray-600);
     --color-default-700: var(--color-gray-700);
@@ -144,7 +145,6 @@
     --color-success-700: var(--color-green-700);
     --color-danger-50: var(--color-red-50);
     --color-danger-100: var(--color-red-100);
-    --color-danger-300: var(--color-red-300);
     --color-danger-400: var(--color-red-400);
     --color-danger-600: var(--color-red-600);
     --color-danger-700: var(--color-red-700);
@@ -615,6 +615,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .appearance-none {
+    appearance: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -753,6 +756,12 @@
       border-color: var(--color-gray-300);
     }
   }
+  .self-center {
+    align-self: center;
+  }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1138,6 +1147,9 @@
   .text-blue-900 {
     color: var(--color-blue-900);
   }
+  .text-danger-400 {
+    color: var(--color-danger-400);
+  }
   .text-danger-600 {
     color: var(--color-danger-600);
   }
@@ -1262,9 +1274,6 @@
       --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
     }
   }
-  .ring-danger-300 {
-    --tw-ring-color: var(--color-danger-300);
-  }
   .ring-danger-400 {
     --tw-ring-color: var(--color-danger-400);
   }
@@ -1287,11 +1296,8 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .-outline-offset-1 {
-    outline-offset: calc(1px * -1);
-  }
-  .outline-gray-300 {
-    outline-color: var(--color-gray-300);
+  .outline-default-300 {
+    outline-color: var(--color-default-300);
   }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1331,9 +1337,6 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .ring-inset {
-    --tw-ring-inset: inset;
-  }
   .group-hover\:border-primary-600 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1368,17 +1371,6 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-within\:ring-2 {
-    &:focus-within {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-within\:ring-danger-400 {
-    &:focus-within {
-      --tw-ring-color: var(--color-danger-400);
-    }
-  }
   .focus-within\:ring-gray-400 {
     &:focus-within {
       --tw-ring-color: var(--color-gray-400);
@@ -1662,22 +1654,6 @@
       }
     }
   }
-  .focus\:outline-2 {
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-  }
-  .focus\:-outline-offset-2 {
-    &:focus {
-      outline-offset: calc(2px * -1);
-    }
-  }
-  .focus\:outline-primary-600 {
-    &:focus {
-      outline-color: var(--color-primary-600);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1751,6 +1727,12 @@
       display: none;
     }
   }
+  .sm\:size-4 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:grid-cols-3 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));

data/app/helpers/okonomi_ui_kit/form_builder.rb

@@ -1,191 +1,198 @@
 module OkonomiUiKit
   class FormBuilder < ActionView::Helpers::FormBuilder
-  delegate :tag, :content_tag, :safe_join, to: :@template
+    delegate :tag, :content_tag, :safe_join, to: :@template
 
-  def field_set(options = {}, &block)
-    @template.render('okonomi/forms/tailwind/field_set', options:, form: self, &block)
-  end
-
-  def field(field_id = nil, options = {}, &block)
-    @template.render('okonomi/forms/tailwind/field', field_id:, options:, form: self, &block)
-  end
-
-  def upload_field(method, options = {})
-    @template.render('okonomi/forms/tailwind/upload_field', method:, options:, form: self)
-  end
-
-  def text_field(method, options = {})
-    css = input_field_classes(method, options, focus_ring: 'focus-within:ring-0.5')
-    super(method, { autocomplete: "off" }.merge(options).merge(class: css))
-  end
-
-  def email_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def ui
+      @template.ui
+    end
 
-  def url_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def field_set(options = {}, &block)
+      @template.render('okonomi/forms/tailwind/field_set', options:, form: self, &block)
+    end
 
-  def password_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def field(field_id = nil, options = {}, &block)
+      @template.render('okonomi/forms/tailwind/field', field_id:, options:, form: self, &block)
+    end
 
-  def number_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def upload_field(method, options = {})
+      @template.render('okonomi/forms/tailwind/upload_field', method:, options:, form: self)
+    end
 
-  def telephone_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def text_field(method, options = {})
+      css = input_field_classes(method, :text, options)
+      super(method, { autocomplete: "off" }.merge(options).merge(class: css))
+    end
 
-  def search_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def email_field(method, options = {})
+      css = input_field_classes(method, :email, options)
+      super(method, options.merge(class: css))
+    end
 
-  def date_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def url_field(method, options = {})
+      css = input_field_classes(method, :url, options)
+      super(method, options.merge(class: css))
+    end
 
-  def datetime_local_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def password_field(method, options = {})
+      css = input_field_classes(method, :password, options)
+      super(method, options.merge(class: css))
+    end
 
-  def time_field(method, options = {})
-    css = input_field_classes(method, options)
-    super(method, options.merge(class: css))
-  end
+    def number_field(method, options = {})
+      css = input_field_classes(method, :number, options)
+      super(method, options.merge(class: css))
+    end
 
-  def text_area(method, options = {})
-    css = input_field_classes(method, options, include_disabled: false)
-    super(method, options.merge(class: css))
-  end
+    def telephone_field(method, options = {})
+      css = input_field_classes(method, :telephone_field, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select(method, choices = nil, options = {}, html_options = {}, &block)
-    css = [
-      select_class_base,
-      when_errors(method,
-                  'bg-danger-100 text-danger-600 ring-1 ring-inset ring-danger-300 focus-within:ring-2 focus-within:ring-danger-400',
-                  select_class_default_state),
-      html_options[:class]
-    ].compact.join(' ').split(' ').uniq
-    super(method, choices, options, html_options.merge(class: css), &block)
-  end
+    def search_field(method, options = {})
+      css = input_field_classes(method, :search, options)
+      super(method, options.merge(class: css))
+    end
 
-  def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
-    css = [
-      select_class_base,
-      when_errors(method,
-                  'bg-danger-100 text-danger-600 ring-1 ring-inset ring-danger-300 focus-within:ring-2 focus-within:ring-danger-400',
-                  select_class_default_state),
-      html_options[:class]
-    ].compact.join(' ').split(' ').uniq
-    super(method, collection, value_method, text_method, options, html_options.merge(class: css))
-  end
+    def date_field(method, options = {})
+      css = input_field_classes(method, :date, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select_class_default
-    [select_class_base, select_class_default_state].join(' ')
-  end
+    def datetime_local_field(method, options = {})
+      css = input_field_classes(method, :datetime_local, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select_class_base
-    "col-start-1 row-start-1 w-full rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6"
-  end
+    def time_field(method, options = {})
+      css = input_field_classes(method, :time, options)
+      super(method, options.merge(class: css))
+    end
 
-  def select_class_default_state
-    'ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-gray-400'
-  end
+    def text_area(method, options = {})
+      css = input_field_classes(method, :textarea, options, include_disabled: false)
+      super(method, options.merge(class: css))
+    end
 
-  def label(method, text = nil, options = {}, &block)
-    base_classes = "block text-sm/6 font-medium text-gray-900"
-    super(method, text, merge_class(options, base_classes), &block)
-  end
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      css = [
+        ui.get_theme.dig(:components, :select, :root),
+        when_errors(
+          method,
+          ui.get_theme.dig(:components, :select, :error),
+          ui.get_theme.dig(:components, :select, :valid)
+        ),
+        html_options[:class]
+      ].compact.join(' ').split(' ').uniq
+
+      select_html = super(method, choices, options, html_options.merge(class: css), &block)
+      icon_html = @template.svg_icon(
+        ui.get_theme.dig(:components, :select, :icon, :file),
+        class: ui.get_theme.dig(:components, :select, :icon, :class)
+      )
+
+      @template.content_tag(:div, class: ui.get_theme.dig(:components, :select, :wrapper)) do
+        @template.concat(select_html)
+        @template.concat(icon_html)
+      end
+    end
 
-  def submit(value = nil, options = {})
-    variant = options.delete(:variant) || 'contained'
-    color = options.delete(:color) || 'primary'
+    def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+      css = [
+        ui.get_theme.dig(:components, :select, :root),
+        when_errors(
+          method,
+          ui.get_theme.dig(:components, :select, :error),
+          ui.get_theme.dig(:components, :select, :valid)
+        ),
+        html_options[:class]
+      ].compact.join(' ').split(' ').uniq
+
+      select_html = super(method, collection, value_method, text_method, options, html_options.merge(class: css))
+      icon_html = @template.svg_icon(
+        ui.get_theme.dig(:components, :select, :icon, :file),
+        class: ui.get_theme.dig(:components, :select, :icon, :class)
+      )
+
+      @template.content_tag(:div, class: ui.get_theme.dig(:components, :select, :wrapper)) do
+        @template.concat(select_html)
+        @template.concat(icon_html)
+      end
+    end
 
-    base_classes = @template.ui.button_class(variant:, color:)
-    super(value, merge_class(options, base_classes))
-  end
+    def label(method, text = nil, options = {}, &block)
+      base_classes = ui.get_theme.dig(:components, :label, :root)
+      super(method, text, merge_class(options, base_classes), &block)
+    end
 
-  def label_class(label_css = nil)
-    ["block text-base font-medium leading-6 text-gray-900 whitespace-nowrap", label_css].compact_blank.join(' ')
-  end
+    def submit(value = nil, options = {})
+      variant = options.delete(:variant) || 'contained'
+      color = options.delete(:color) || 'primary'
 
-  def check_box_with_label(method, options = {}, checked_value = true, unchecked_value = false)
-    @template.content_tag(:div, class: 'flex gap-2 items-center') do
-      @template.concat check_box(
-                         method,
-                         {
-                           class: 'cursor-pointer h-4 w-4 rounded-sm border-gray-300 text-primary-600 focus:ring-0 focus:ring-primary-600'
-                         }.merge(options || {}),
-                         checked_value,
-                         unchecked_value
-                       )
-      @template.concat @template.render('okonomi/forms/tailwind/checkbox_label', method:, options:, form: self)
+      base_classes = ui.button_class(variant:, color:)
+      super(value, merge_class(options, base_classes))
     end
-  end
 
-  def multi_select(method, **options)
-    @template.render(
-      partial: 'okonomi/forms/tailwind/multi_select',
-      locals: {
-        form: self,
-        method: method,
-        options: options
-      }
-    )
-  end
-
-  def show_if(field:, equals:, &block)
-    field_id = "#{object_name}_#{field}"
-    @template.tag.div(
-      class: "hidden",
-      data: {
-        controller: "form-field-visibility",
-        "form-field-visibility-field-id-value": field_id,
-        "form-field-visibility-equals-value": equals
-      },
-      &block
-    )
-  end
+    def check_box_with_label(method, options = {}, checked_value = true, unchecked_value = false)
+      @template.content_tag(:div, class: ui.get_theme.dig(:components, :checkbox, :wrapper)) do
+        @template.concat check_box(
+                           method,
+                           {
+                             class: ui.get_theme.dig(:components, :checkbox, :input, :root)
+                           }.merge(options || {}),
+                           checked_value,
+                           unchecked_value
+                         )
+        @template.concat @template.render('okonomi/forms/tailwind/checkbox_label', method:, options:, form: self)
+      end
+    end
 
-  private
+    def show_if(field:, equals:, &block)
+      field_id = "#{object_name}_#{field}"
+      @template.tag.div(
+        class: "hidden",
+        data: {
+          controller: "form-field-visibility",
+          "form-field-visibility-field-id-value": field_id,
+          "form-field-visibility-equals-value": equals
+        },
+        &block
+      )
+    end
 
-  def input_field_classes(method, options, focus_ring: 'focus-within:ring-1', include_disabled: true)
-    css_classes = [
-      'w-full border-0 px-3 py-2 rounded-md ring-1 focus:outline-none',
-      when_errors(method, 'bg-danger-100 ring-danger-400 focus:ring-danger-600', "text-gray-700 ring-gray-300 #{focus_ring} focus-within:ring-gray-400"),
-      options[:class]
-    ]
-    
-    if include_disabled
-      css_classes << 'disabled:bg-gray-50 disabled:cursor-not-allowed'
+    private
+
+    def input_field_classes(method, type, options, include_disabled: true)
+      css_classes = [
+        ui.get_theme.dig(:components, :input, :types, type, :root) || ui.get_theme.dig(:components, :input, :types, :text, :root),
+        when_errors(
+          method,
+          ui.get_theme.dig(:components, :input, :types, type, :error) || ui.get_theme.dig(:components, :input, :types, :text, :error),
+          ui.get_theme.dig(:components, :input, :types, type, :valid) || ui.get_theme.dig(:components, :input, :types, :text, :valid)
+        ),
+        options[:class]
+      ]
+
+      if include_disabled
+        css_classes << (
+          ui.get_theme.dig(:components, :input, :types, type, :disabled) || ui.get_theme.dig(:components, :input, :types, :text, :disabled)
+        )
+      end
+
+      css_classes.compact.join(' ').split(' ').uniq
     end
-    
-    css_classes.compact.join(' ').split(' ').uniq
-  end
 
-  def when_errors(method, value, default_value = nil)
-    key = method.to_s.gsub('_id', '').to_sym
-    if object.errors.include?(key) || object.errors.include?(method)
-      value
-    else
-      default_value
+    def when_errors(method, value, default_value = nil)
+      key = method.to_s.gsub('_id', '').to_sym
+      if object.errors.include?(key) || object.errors.include?(method)
+        value
+      else
+        default_value
+      end
     end
-  end
 
-  def merge_class(options, new_class)
-    options[:class] = [options[:class], new_class].compact.join(" ")
-    options
-  end
+    def merge_class(options, new_class)
+      options[:class] = [options[:class], new_class].compact.join(" ")
+      options
+    end
   end
 end

data/app/helpers/okonomi_ui_kit/theme.rb

@@ -63,6 +63,41 @@ module OkonomiUiKit
               info: "text-info-600 hover:underline"
             }
           }
+        },
+        input: {
+          types: {
+            text: {
+              root: "w-full border-0 px-3 py-2 rounded-md ring-1 focus:outline-none focus-within:ring-1",
+              error: "bg-danger-100 text-danger-400 ring-danger-400 focus:ring-danger-600",
+              valid: "text-default-700 ring-gray-300 focus-within:ring-gray-400",
+              disabled: "disabled:bg-gray-50 disabled:cursor-not-allowed"
+            }
+          }
+        },
+        select: {
+          root: "col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-8 pl-3 text-base outline-1 focus:outline-none sm:text-sm/6",
+          error: "bg-danger-100 text-danger-400 ring-1 ring-danger-400",
+          valid: "bg-white outline-default-300 text-default-700",
+          wrapper: "grid grid-cols-1",
+          icon: {
+            file: 'heroicons/solid/chevron-down',
+            class: "pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+          }
+        },
+        label: {
+          root: "block text-sm/6 font-medium text-default-700"
+        },
+        checkbox: {
+          wrapper: "flex gap-4 items-center",
+          input: {
+            root: "cursor-pointer size-5 rounded-sm border-gray-300 text-primary-600 focus:ring-0 focus:ring-primary-600"
+          },
+          label: {
+            root: "cursor-pointer font-medium text-gray-700"
+          },
+          hint: {
+            root: "cursor-pointer text-sm text-gray-400"
+          }
         }
       }
     }

data/app/javascript/okonomi_ui_kit/controllers/file_input_controller.js

@@ -0,0 +1,13 @@
+// app/javascript/controllers/file_input_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.input = this.element
+    this.label = document.getElementById("file-name")
+
+    this.input.addEventListener("change", () => {
+      this.label.textContent = this.input.files[0]?.name || "No file chosen"
+    })
+  }
+}

data/app/javascript/okonomi_ui_kit/controllers/flash_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["message"]
+  static values = { autoDismiss: Number }
+
+  connect() {
+    if (this.hasAutoDismissValue && this.autoDismissValue > 0) {
+      setTimeout(() => {
+        this.dismiss()
+      }, this.autoDismissValue)
+    }
+  }
+
+  dismiss() {
+    this.element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out'
+    this.element.style.opacity = '0'
+    this.element.style.transform = 'translateX(100%)'
+    
+    setTimeout(() => {
+      if (this.element.parentNode) {
+        this.element.remove()
+      }
+    }, 300)
+  }
+
+  close(event) {
+    event.preventDefault()
+    this.dismiss()
+  }
+}

data/app/javascript/okonomi_ui_kit/controllers/form_field_visibility_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { fieldId: String, equals: String }
+
+  connect() {
+    console.log("FormFieldVisibilityController connected")
+    this.field = document.getElementById(this.fieldIdValue)
+    if (this.field) {
+      this.toggle()
+      this.field.addEventListener("change", this.toggle.bind(this))
+    }
+  }
+
+  toggle() {
+    let currentValue
+
+    if (this.field.type === "checkbox") {
+      currentValue = this.field.checked ? this.field.value : null
+    } else {
+      currentValue = this.field.value
+    }
+
+    const shouldShow = currentValue === this.equalsValue
+    this.element.classList.toggle("hidden", !shouldShow)
+  }
+}

data/app/javascript/okonomi_ui_kit/controllers/upload_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "filename", "dropzone", "preview", "destroyInput"]
+
+  connect() {
+    this.dropzoneTarget.addEventListener("dragover", (e) => {
+      e.preventDefault()
+      this.dropzoneTarget.classList.add("bg-gray-100")
+    })
+
+    this.dropzoneTarget.addEventListener("dragleave", () => {
+      this.dropzoneTarget.classList.remove("bg-gray-100")
+    })
+
+    this.dropzoneTarget.addEventListener("drop", (e) => {
+      e.preventDefault()
+      this.dropzoneTarget.classList.remove("bg-gray-100")
+      const files = e.dataTransfer.files
+      if (files.length > 0) {
+        this.inputTarget.files = files
+        this.updatePreview()
+      }
+    })
+  }
+
+  updatePreview() {
+    const file = this.inputTarget.files[0]
+    this.filenameTarget.textContent = file ? file.name : "No file selected"
+    this.destroyInputTarget.value = "0"
+
+    if (file && file.type.startsWith("image/")) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.previewTarget.innerHTML = `<img src="${e.target.result}" class="max-h-32 rounded" />`
+      }
+      reader.readAsDataURL(file)
+    } else if (file) {
+      this.previewTarget.innerHTML = `
+        <svg class="size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16v-4m0 0V7m0 5H3m4 0h4" />
+        </svg>`
+    }
+  }
+
+  clear() {
+    this.inputTarget.value = ""
+    this.filenameTarget.textContent = "No file selected"
+    this.previewTarget.innerHTML = `
+      <svg class="size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16v-4m0 0V7m0 5H3m4 0h4" />
+      </svg>`
+    this.destroyInputTarget.value = "1"
+  }
+}

data/app/views/okonomi/forms/tailwind/_checkbox_label.html.erb

@@ -3,7 +3,7 @@
   label_options[:for] = options[:id] if options[:id]
 %>
 <%= form.label(method, label_options) do %>
-  <div class="cursor-pointer font-medium text-gray-700">
+  <div class="<%= form.ui.get_theme.dig(:components, :checkbox, :label, :root) %>">
     <% if options[:label] %>
       <%= options[:label] %>
     <% else %>
@@ -11,7 +11,7 @@
     <% end %>
   </div>
   <% if options[:hint] %>
-    <div class="cursor-pointer text-sm text-gray-400">
+    <div class="<%= form.ui.get_theme.dig(:components, :checkbox, :hint, :root) %>">
       <%= t("activerecord.hints.#{form.object.class.name.underscore}.#{method}") %>
     </div>
   <% end %>

data/app/views/okonomi/forms/tailwind/_field.html.erb

@@ -1,7 +1,7 @@
 <div class="w-full flex flex-col gap-2">
   <div class="flex justify-between items-center" x-data="{ open: false }">
     <% if field_id %>
-      <%= form.label field_id, t("activerecord.attributes.#{form.object_name}.#{field_id}"), class: form.label_class(options.dig(:label, :class)) %>
+      <%= form.label field_id, t("activerecord.attributes.#{form.object_name}.#{field_id}") %>
     <% end %>
     <% if options[:hint] %>
       <div class="relative">

data/config/importmap.rb

@@ -1,2 +1,7 @@
+pin "application", to: "okonomi_ui_kit/application.js", preload: true
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+
 pin "okonomi_ui_kit", to: "okonomi_ui_kit/application.js", preload: true
 pin_all_from OkonomiUiKit::Engine.root.join("app/javascript/okonomi_ui_kit/controllers"), under: "controllers", to: "okonomi_ui_kit/controllers"

data/lib/okonomi_ui_kit/engine.rb

@@ -29,7 +29,8 @@ module OkonomiUiKit
         include OkonomiUiKit::PageBuilderHelper
         include OkonomiUiKit::TableHelper
         include OkonomiUiKit::UiHelper
-        # include OkonomiUiKit::FormBuilder
+
+        ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }
       end
     end
   end

data/lib/okonomi_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module OkonomiUiKit
-  VERSION = "0.1.3"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Okonomi GmbH
@@ -1369,6 +1369,10 @@ files:
 - app/helpers/okonomi_ui_kit/ui_helper.rb
 - app/javascript/okonomi_ui_kit/application.js
 - app/javascript/okonomi_ui_kit/controllers/dropdown_controller.js
+- app/javascript/okonomi_ui_kit/controllers/file_input_controller.js
+- app/javascript/okonomi_ui_kit/controllers/flash_controller.js
+- app/javascript/okonomi_ui_kit/controllers/form_field_visibility_controller.js
+- app/javascript/okonomi_ui_kit/controllers/upload_controller.js
 - app/javascript/okonomi_ui_kit_manifest.js
 - app/jobs/okonomi_ui_kit/application_job.rb
 - app/mailers/okonomi_ui_kit/application_mailer.rb