uchi 0.1.5 → 0.1.6

data/app/components/uchi/flowbite/card.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  # Renders a card element.
+  #
+  # See https://flowbite.com/docs/components/cards/
+  class Card < ViewComponent::Base
+    renders_one :title
+
+    class << self
+      def classes(state: :default, style: :default)
+        style = styles.fetch(style)
+        style.fetch(state)
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          default: Uchi::Flowbite::Style.new(
+            default: ["p-6", "bg-neutral-primary-soft", "border", "border-default", "rounded-base", "shadow-xs"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    # @param class [Array<String>] Additional CSS classes for the card
+    #   container.
+    #
+    # @param options [Hash] Additional HTML options for the card container
+    #   (e.g., custom classes, data attributes). These options are merged into
+    #   the card's root element.
+    #
+    # @param title [Hash] An optional title for the card. If provided,
+    #   it will be rendered at the top of the card in a h5 tag using the
+    #   Card::Title component. The hash can contain:
+    #   - `content`: The text content of the title
+    #   - `options`: Additional HTML options to pass to the title element
+    #   Alternatively, you can use the `title` slot to provide the entire
+    #   title element yourself.
+    def initialize(class: [], options: {}, title: {})
+      @class = Array(binding.local_variable_get(:class)) || []
+      @options = options || {}
+      @title = title
+    end
+
+    protected
+
+    def card_options
+      card_options = {}
+      card_options[:class] = self.class.classes + @class
+      card_options.merge(@options)
+    end
+
+    # Returns the HTML to use for the title element if any
+    def default_title
+      component = Uchi::Flowbite::Card::Title.new(**default_title_options)
+
+      if default_title_content
+        component.with_content(default_title_content)
+      else
+        component
+      end
+
+      render(component)
+    end
+
+    def default_title_content
+      return nil unless @title
+
+      @title[:content]
+    end
+
+    # @return [Hash] The options to pass to the default title component
+    def default_title_options
+      title_options = @title.dup
+      title_options[:options] || {}
+    end
+
+    def title?
+      @title.present?
+    end
+  end
+end

data/app/components/{flowbite → uchi/flowbite}/input/checkbox.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     # The checkbox component can be used to receive one or more selected options
     # from the user in the form of a square box available in multiple styles,
@@ -23,10 +23,10 @@ module Flowbite
         # rubocop:disable Layout/LineLength
         def styles
           {
-            default: Flowbite::Style.new(
-              default: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
-              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
-              error: ["text-red-600", "bg-red-50", "border-red-500", "rounded-sm", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
+            default: Uchi::Flowbite::Style.new(
+              default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2"],
+              disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
+              error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "rounded-sm", "focus:ring-danger", "focus:ring-2"]
             )
           }.freeze
         end
@@ -43,8 +43,8 @@ module Flowbite
         )
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
-        super(attribute: attribute, form: form, disabled: disabled, options: options, size: size)
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
+        super(attribute: attribute, class: binding.local_variable_get(:class), form: form, disabled: disabled, options: options, size: size)
         @unchecked_value = unchecked_value
         @value = value
       end

data/app/components/{flowbite → uchi/flowbite}/input/date.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Date < Field
       def input_field_type

data/app/components/{flowbite → uchi/flowbite}/input/date_time.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class DateTime < Field
       def input_field_type

data/app/components/{flowbite → uchi/flowbite}/input/email.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Email < Field
       # Returns the name of the method used to generate HTML for the input field

data/app/components/{flowbite → uchi/flowbite}/input/field.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     # The indivdual input component for use in forms without labels or error
     # messages.
@@ -13,9 +13,9 @@ module Flowbite
     # `Flowbite::InputField` instead.
     class Field < ViewComponent::Base
       SIZES = {
-        sm: ["p-2", "text-xs"],
-        default: ["p-2.5", "text-sm"],
-        lg: ["p-4", "text-base"]
+        sm: ["px-2.5", "py-2", "text-sm"],
+        default: ["px-3", "py-2.5", "text-sm"],
+        lg: ["px-3.5", "py-3", "text-base"]
       }.freeze
 
       STATES = [
@@ -47,18 +47,19 @@ module Flowbite
         # rubocop:disable Layout/LineLength
         def styles
           {
-            default: Flowbite::Style.new(
-              default: ["bg-gray-50", "border", "border-gray-300", "text-gray-900", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-white", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
-              disabled: ["bg-gray-100", "border", "border-gray-300", "text-gray-900", "text-sm", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "p-2.5", "cursor-not-allowed", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-gray-400", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
-              error: ["bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "dark:bg-gray-700", "focus:border-red-500", "block", "w-full", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
+            default: Uchi::Flowbite::Style.new(
+              default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
+              disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
+              error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
             )
           }.freeze
         end
         # rubocop:enable Layout/LineLength
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {}, size: :default)
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default)
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @disabled = disabled
         @form = form
         @options = options || {}
@@ -77,7 +78,7 @@ module Flowbite
 
       # Returns the CSS classes to apply to the input field
       def classes
-        self.class.classes(size: size, state: state)
+        self.class.classes(size: size, state: state) + @class
       end
 
       # Returns the name of the method used to generate HTML for the input field

data/app/components/uchi/flowbite/input/file.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  module Input
+    class File < Field
+      SIZES = {
+        sm: ["text-sm"],
+        default: ["text-sm"],
+        lg: ["text-base"]
+      }.freeze
+
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :file_field
+      end
+
+      # rubocop:disable Layout/LineLength
+      def self.styles
+        {
+          default: Uchi::Flowbite::Style.new(
+            default: ["block", "w-full", "text-heading", "border", "border-default-medium", "rounded-base", "cursor-pointer", "bg-neutral-secondary-medium", "focus:outline-none"],
+            disabled: ["block", "w-full", "text-fg-disabled", "border", "border-default-medium", "rounded-base", "cursor-not-allowed", "bg-neutral-secondary-medium"],
+            error: ["block", "w-full", "text-fg-danger-strong", "border", "border-danger-subtle", "rounded-base", "cursor-pointer", "bg-danger-soft", "focus:outline-none"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+  end
+end

data/app/components/{flowbite → uchi/flowbite}/input/hint.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Hint < ViewComponent::Base
       STATES = [
@@ -15,8 +15,8 @@ module Flowbite
 
         def styles
           {
-            default: Flowbite::Style.new(
-              default: ["mt-2", "text-sm", "text-gray-500", "dark:text-gray-400"]
+            default: Uchi::Flowbite::Style.new(
+              default: ["mt-2.5", "text-sm", "text-body"]
             )
           }.freeze
         end
@@ -30,8 +30,9 @@ module Flowbite
         )
       end
 
-      def initialize(attribute:, form:, options: {})
+      def initialize(attribute:, form:, class: nil, options: {})
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @form = form
         @options = options
         @object = form.object
@@ -39,7 +40,7 @@ module Flowbite
 
       # Returns an array with the CSS classes to apply to the label element
       def classes
-        self.class.classes(state: state)
+        self.class.classes(state: state) + @class
       end
 
       protected

data/app/components/{flowbite → uchi/flowbite}/input/label.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label
     class Label < ViewComponent::Base
@@ -18,10 +18,10 @@ module Flowbite
 
         def styles
           {
-            default: Flowbite::Style.new(
-              default: ["block", "mb-2", "text-sm", "font-medium", "text-gray-900", "dark:text-white"],
-              disabled: ["block", "mb-2", "text-sm", "font-medium", "text-gray-400", "dark:text-gray-500"],
-              error: ["block", "mb-2", "text-sm", "font-medium", "text-red-700", "dark:text-red-500"]
+            default: Uchi::Flowbite::Style.new(
+              default: ["block", "mb-2.5", "text-sm", "font-medium", "text-heading"],
+              disabled: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-disabled"],
+              error: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-danger-strong"]
             )
           }.freeze
         end
@@ -39,8 +39,9 @@ module Flowbite
         @object.errors.include?(@attribute.intern)
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {})
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {})
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @disabled = disabled
         @form = form
         @object = form.object
@@ -49,7 +50,7 @@ module Flowbite
 
       # Returns an array with the CSS classes to apply to the label element
       def classes
-        self.class.classes(state: state)
+        self.class.classes(state: state) + @class
       end
 
       protected

data/app/components/{flowbite → uchi/flowbite}/input/number.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Number < Field
       def input_field_type

data/app/components/{flowbite → uchi/flowbite}/input/password.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Password < Field
       def input_field_type

data/app/components/{flowbite → uchi/flowbite}/input/phone.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Phone < Field
       def input_field_type

data/app/components/{flowbite → uchi/flowbite}/input/radio_button.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     # The radio button component can be used to allow the user to choose a
     # single option from one or more available options.
@@ -18,10 +18,10 @@ module Flowbite
         # rubocop:disable Layout/LineLength
         def styles
           {
-            default: Flowbite::Style.new(
-              default: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
-              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
-              error: ["text-red-600", "bg-red-50", "border-red-500", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
+            default: Uchi::Flowbite::Style.new(
+              default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2"],
+              disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
+              error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "focus:ring-danger", "focus:ring-2"]
             )
           }.freeze
         end
@@ -37,8 +37,8 @@ module Flowbite
         )
       end
 
-      def initialize(attribute:, form:, value:, disabled: false, options: {})
-        super(attribute: attribute, disabled: disabled, form: form, options: options)
+      def initialize(attribute:, form:, value:, class: nil, disabled: false, options: {})
+        super(attribute: attribute, class: binding.local_variable_get(:class), disabled: disabled, form: form, options: options)
         @value = value
       end
 

data/app/components/{flowbite → uchi/flowbite}/input/select.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     # The `Select` component renders a select input field for use in forms.
     #
@@ -9,14 +9,16 @@ module Flowbite
     # Wraps `ActionView::Helpers::FormOptionsHelper#select`: https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
     class Select < Field
       SIZES = {
-        sm: ["p-2", "text-xs"],
-        default: ["p-2.5", "text-sm"],
-        lg: ["px-4", "py-3", "text-base"]
+        sm: ["px-2.5", "py-2", "text-sm"],
+        default: ["px-3", "py-2.5", "text-sm"],
+        lg: ["px-3.5", "py-3", "text-base"]
       }.freeze
 
-      def initialize(form:, attribute:, collection: [], disabled: false, options: {}, size: :default)
-        super(form: form, attribute: attribute, disabled: disabled, options: options, size: size)
+      def initialize(form:, attribute:, class: nil, collection: [], disabled: false, include_blank: false, multiple: false, options: {}, size: :default)
+        super(form: form, attribute: attribute, class: binding.local_variable_get(:class), disabled: disabled, options: options, size: size)
         @collection = collection
+        @include_blank = include_blank
+        @multiple = multiple
       end
 
       # Returns the HTML to use for the actual input field element.
@@ -25,7 +27,7 @@ module Flowbite
           input_field_type,
           @attribute,
           @collection,
-          {},
+          select_options,
           html_options
         )
       end
@@ -37,6 +39,13 @@ module Flowbite
 
       private
 
+      def select_options
+        {
+          include_blank: @include_blank,
+          multiple: @multiple
+        }
+      end
+
       # Returns the html_options argument for the select method
       def html_options
         {

data/app/components/uchi/flowbite/input/textarea.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  module Input
+    class Textarea < Field
+      class << self
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Uchi::Flowbite::Style.new(
+              default: ["block", "w-full", "text-heading", "bg-neutral-secondary-medium", "rounded-base", "border", "border-default-medium", "focus:ring-brand", "focus:border-brand", "shadow-xs", "placeholder:text-body"],
+              disabled: ["block", "w-full", "bg-neutral-secondary-medium", "rounded-base", "border", "border-default-medium", "text-fg-disabled", "cursor-not-allowed", "shadow-xs", "placeholder:text-fg-disabled"],
+              error: ["block", "w-full", "bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "placeholder:text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "shadow-xs"]
+            )
+          }.freeze
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          **input_options
+        )
+      end
+
+      protected
+
+      # Returns the CSS classes to apply to the input field
+      def classes
+        self.class.classes(size: size, state: state) + @class
+      end
+
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :text_area
+      end
+    end
+  end
+end

data/app/components/{flowbite → uchi/flowbite}/input/url.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   module Input
     class Url < Field
       # Returns the name of the method used to generate HTML for the input field

data/app/components/uchi/flowbite/input/validation_error.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  module Input
+    class ValidationError < ViewComponent::Base
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Uchi::Flowbite::Style.new(
+              default: ["mt-2", "text-sm", "text-red-600", "dark:text-red-500"]
+            )
+          }.freeze
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      def call
+        tag.p(content, class: classes)
+      end
+
+      def initialize(class: nil)
+        @class = Array.wrap(binding.local_variable_get(:class))
+      end
+
+      protected
+
+      # Returns the CSS classes to apply to the validation error
+      def classes
+        self.class.classes + @class
+      end
+    end
+  end
+end

data/app/components/uchi/flowbite/input_field/checkbox.html.erb

@@ -0,0 +1,9 @@
+<div class="<%= classes.join(" ") %>">
+  <div class="flex items-center h-5"><%= input %></div>
+
+  <div class="ms-2 text-sm"><%= label %><%= hint %></div>
+
+  <% errors.each do |error| %>
+    <%= render(Uchi::Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+  <% end %>
+</div>

data/app/components/{flowbite → uchi/flowbite}/input_field/checkbox.rb

@@ -1,10 +1,14 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class InputField
     class Checkbox < InputField
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_hint_options
         return {} unless @hint
 
@@ -22,16 +26,16 @@ module Flowbite
       end
 
       def input_component
-        ::Flowbite::Input::Checkbox
+        Uchi::Flowbite::Input::Checkbox
       end
 
       private
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
@@ -44,9 +48,9 @@ module Flowbite
 
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

data/app/components/{flowbite → uchi/flowbite}/input_field/date.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class InputField
     class Date < InputField
       protected
 
       def input_component
-        ::Flowbite::Input::Date
+        Uchi::Flowbite::Input::Date
       end
     end
   end

data/app/components/{flowbite → uchi/flowbite}/input_field/date_time.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class InputField
     class DateTime < InputField
       protected
 
       def input_component
-        ::Flowbite::Input::DateTime
+        Uchi::Flowbite::Input::DateTime
       end
     end
   end

data/app/components/{flowbite → uchi/flowbite}/input_field/email.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class InputField
     class Email < InputField
       protected
 
       def input_component
-        ::Flowbite::Input::Email
+        Uchi::Flowbite::Input::Email
       end
     end
   end

data/app/components/{flowbite → uchi/flowbite}/input_field/file.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class InputField
     class File < InputField
       protected
 
       def input_component
-        ::Flowbite::Input::File
+        Uchi::Flowbite::Input::File
       end
     end
   end

data/app/components/uchi/flowbite/input_field/input_field.html.erb

@@ -0,0 +1,9 @@
+<div class="<%= classes.join(" ") %>">
+  <%= label %>
+  <%= input %>
+  <%= hint %>
+
+  <% errors.each do |error| %>
+    <%= render(Uchi::Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+  <% end %>
+</div>