better_ui 0.2.0 → 0.6.0

data/app/helpers/better_ui/general/components/input/rating/rating_helper.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Rating
+          module RatingHelper
+            # Renderizza un componente Rating (Input) interattivo con stelle per valutazioni e feedback.
+            #
+            # @param name [String] Nome del campo rating (obbligatorio se non readonly)
+            # @param value [Float, Integer] Valore del rating attuale (0.0 - max_stars)
+            # @param max_stars [Integer] Numero massimo di stelle (default: 5)
+            # @param readonly [Boolean] Se il rating è in sola lettura
+            # @param half_stars [Boolean] Se supportare mezze stelle
+            # @param theme [Symbol] Tema del componente (:default, :yellow, :orange, :red, :pink, :purple, :blue, :green, :gray)
+            # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+            # @param show_value [Boolean] Se mostrare il valore numerico accanto alle stelle
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param classes [String] Classi CSS aggiuntive
+            # @param options [Hash] Opzioni aggiuntive per attributi HTML
+            #
+            # @return [String] HTML del componente Rating renderizzato
+            #
+            # @example Uso base per inserimento rating
+            #   <%= bui_input_rating(name: 'review_rating') %>
+            #
+            # @example Rating read-only per visualizzazione
+            #   <%= bui_input_rating(value: 4.5, readonly: true, show_value: true) %>
+            #
+            # @example Con tema e dimensioni personalizzate
+            #   <%= bui_input_rating(name: 'quality', theme: :orange, size: :large, max_stars: 10) %>
+            #
+            # @example Con Rails form builder
+            #   <%= form_with model: @review do |form| %>
+            #     <%= bui_input_rating(name: :rating, form: form, value: @review.rating, show_value: true) %>
+            #   <% end %>
+            #
+            # @example Rating con mezze stelle e valore preimpostato
+            #   <%= bui_input_rating(
+            #         name: 'service_rating',
+            #         value: 3.5,
+            #         half_stars: true,
+            #         theme: :green,
+            #         size: :medium,
+            #         show_value: true
+            #       ) %>
+            def bui_input_rating(name: nil, value: 0, max_stars: 5, readonly: false, half_stars: true,
+                                 theme: :default, size: :medium, show_value: false, form: nil,
+                                 classes: '', **options)
+              render BetterUi::General::Input::Rating::Component.new(
+                name: name,
+                value: value,
+                max_stars: max_stars,
+                readonly: readonly,
+                half_stars: half_stars,
+                theme: theme,
+                size: size,
+                show_value: show_value,
+                form: form,
+                classes: classes,
+                **options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/select/select_helper.rb

@@ -6,45 +6,59 @@ module BetterUi
       module Input
         module Select
           module SelectHelper
-            # Renders a Select component for selection fields from option lists.
+            # Renderizza un componente Select personalizzato con ricerca, animazioni e multi-selezione.
             #
-            # @param name [String] Name of the select field
-            # @param options [Array<Hash>] Array of select options in format [{value: 'value', label: 'label'}, ...]
-            # @param selected [String, Array, nil] Selected value or values
-            # @param required [Boolean] Whether the field is required
-            # @param disabled [Boolean] Whether the field is disabled
-            # @param multiple [Boolean] Whether multiple options can be selected
-            # @param theme [Symbol] Component theme (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
-            # @param size [Symbol] Component size (:small, :medium, :large)
+            # @param name [String] Nome del campo select (obbligatorio)
+            # @param options [Array<Hash>] Array di opzioni nel formato [{value: 'value', label: 'label'}, ...]
+            # @param selected [String, Array, nil] Valore/i selezionato/i
+            # @param required [Boolean] Se il campo è obbligatorio
+            # @param disabled [Boolean] Se il campo è disabilitato
+            # @param multiple [Boolean] Se multiple opzioni possono essere selezionate
+            # @param searchable [Boolean] Se abilitare la ricerca
+            # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+            # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
             # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
-            # @param placeholder [String, nil] Placeholder text for the field (creates an initial disabled option)
-            # @param classes [String] Additional CSS classes
-            # @param form [ActionView::Helpers::FormBuilder, nil] Optional Rails form builder
-            # @param options_html [Hash] Additional HTML attributes for option tags
-            # @param html_options [Hash] Additional HTML attributes for the select tag
+            # @param placeholder [String] Testo placeholder per il trigger
+            # @param search_placeholder [String] Testo placeholder per il campo search
+            # @param max_height [String] Altezza massima del dropdown (default: "300px")
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param classes [String] Classi CSS aggiuntive
+            # @param options [Hash] Opzioni aggiuntive per attributi HTML
             #
-            # @return [String] Rendered HTML of the Select component
+            # @return [String] HTML del componente Select renderizzato
             #
-            # @example Basic select
-            #   <%= bui_input_select(name: 'country', options: [{value: 'it', label: 'Italy'}, {value: 'fr', label: 'France'}]) %>
+            # @example Uso base
+            #   <%= bui_input_select(name: 'country', options: [{value: 'it', label: 'Italia'}, {value: 'us', label: 'USA'}]) %>
             #
-            # @example Select with selected option
-            #   <%= bui_input_select(name: 'role', options: roles_array, selected: 'admin') %>
+            # @example Con selezione multipla
+            #   <%= bui_input_select(name: 'skills', multiple: true, options: skills_options) %>
             #
-            # @example Multiple select
-            #   <%= bui_input_select(name: 'languages[]', options: languages_array, multiple: true, selected: ['en', 'fr']) %>
+            # @example Con ricerca e temi
+            #   <%= bui_input_select(name: 'category', searchable: true, theme: :blue, options: categories) %>
             #
-            # @example Select with custom theme and size
-            #   <%= bui_input_select(name: 'category', options: categories_array, theme: :blue, size: :large) %>
+            # @example Con dimensioni personalizzate
+            #   <%= bui_input_select(name: 'priority', size: :large, options: priorities, selected: 'high') %>
             #
-            # @example With Rails form builder
+            # @example Con Rails form builder
             #   <%= form_with model: @user do |form| %>
-            #     <%= bui_input_select(name: :country_id, options: countries_array, form: form, required: true) %>
+            #     <%= bui_input_select(name: :role, form: form, options: role_options, theme: :green) %>
             #   <% end %>
+            #
+            # @example Con opzioni avanzate
+            #   <%= bui_input_select(
+            #         name: 'tags', 
+            #         multiple: true, 
+            #         searchable: true,
+            #         placeholder: 'Seleziona tag...',
+            #         search_placeholder: 'Cerca tag...',
+            #         max_height: '200px',
+            #         options: tag_options,
+            #         selected: ['ruby', 'rails']
+            #       ) %>
             def bui_input_select(name:, options:, selected: nil, required: false, disabled: false, 
-                           multiple: false, theme: :default, size: :medium, rounded: :medium, 
-                           placeholder: nil, classes: '', form: nil, options_html: {}, **html_options)
-              
+                                 multiple: false, searchable: true, theme: :default, size: :medium, 
+                                 rounded: :medium, placeholder: nil, search_placeholder: nil, 
+                                 max_height: "300px", form: nil, classes: '', **html_options)
               render BetterUi::General::Input::Select::Component.new(
                 name: name,
                 options: options,
@@ -52,13 +66,15 @@ module BetterUi
                 required: required,
                 disabled: disabled,
                 multiple: multiple,
+                searchable: searchable,
                 theme: theme,
                 size: size,
                 rounded: rounded,
                 placeholder: placeholder,
-                classes: classes,
+                search_placeholder: search_placeholder,
+                max_height: max_height,
                 form: form,
-                options_html: options_html,
+                classes: classes,
                 **html_options
               )
             end
@@ -67,4 +83,4 @@ module BetterUi
       end
     end
   end
-end
+end

data/app/helpers/better_ui/general/components/input/toggle/toggle_helper.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Toggle
+          module ToggleHelper
+            # Renderizza un componente Toggle/Switch moderno per sostituire i checkbox tradizionali.
+            #
+            # @param name [String] Nome del campo toggle (obbligatorio)
+            # @param value [String] Valore del toggle quando è attivo (default: "1")
+            # @param checked [Boolean] Se il toggle è attivo
+            # @param required [Boolean] Se il campo è obbligatorio
+            # @param disabled [Boolean] Se il campo è disabilitato
+            # @param label [String, nil] Testo della label associata al toggle
+            # @param label_position [Symbol] Posizione della label (:left, :right)
+            # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+            # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param classes [String] Classi CSS aggiuntive
+            # @param options [Hash] Opzioni aggiuntive per attributi HTML
+            #
+            # @return [String] HTML del componente Toggle renderizzato
+            #
+            # @example Uso base
+            #   <%= bui_input_toggle(name: 'notifications') %>
+            #
+            # @example Con label e stato iniziale
+            #   <%= bui_input_toggle(name: 'dark_mode', label: 'Modalità scura', checked: true) %>
+            #
+            # @example Con tema e dimensioni
+            #   <%= bui_input_toggle(name: 'premium', label: 'Account Premium', theme: :green, size: :large) %>
+            #
+            # @example Con posizione label e stato disabilitato
+            #   <%= bui_input_toggle(name: 'maintenance', label: 'Modalità manutenzione', label_position: :left, disabled: true) %>
+            #
+            # @example Con Rails form builder
+            #   <%= form_with model: @user do |form| %>
+            #     <%= bui_input_toggle(name: :email_notifications, form: form, label: 'Notifiche email', theme: :blue) %>
+            #     <%= bui_input_toggle(name: :sms_notifications, form: form, label: 'Notifiche SMS', theme: :green) %>
+            #   <% end %>
+            #
+            # @example Con attributi HTML personalizzati
+            #   <%= bui_input_toggle(
+            #         name: 'api_access', 
+            #         label: 'Accesso API',
+            #         theme: :violet,
+            #         size: :small,
+            #         required: true,
+            #         data: { action: 'toggle-api-access' },
+            #         'aria-describedby': 'api-help-text'
+            #       ) %>
+            def bui_input_toggle(name:, value: '1', checked: false, required: false, disabled: false, 
+                                 label: nil, label_position: :right, theme: :default, size: :medium, 
+                                 form: nil, classes: '', **options)
+              render BetterUi::General::Input::Toggle::Component.new(
+                name: name,
+                value: value,
+                checked: checked,
+                required: required,
+                disabled: disabled,
+                label: label,
+                label_position: label_position,
+                theme: theme,
+                size: size,
+                form: form,
+                classes: classes,
+                **options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/modal/modal_helper.rb

@@ -3,14 +3,11 @@ module BetterUi
     module Components
       module Modal
         module ModalHelper
-          # Helper per renderizzare un modal
+          # Helper per renderizzare un modal con trigger e contenuto
           #
-          # @param title [String] Il titolo del modal (obbligatorio)
-          # @param theme [Symbol] Il tema dell'header del modal
-          # @param size [Symbol] La dimensione del modal
-          # @param rounded [Symbol] Il border radius del modal
-          # @param backdrop [Boolean] Se mostrare l'overlay di sfondo cliccabile
-          # @param closable [Boolean] Se mostrare il pulsante di chiusura
+          # @param close_on_backdrop [Boolean] Se chiudere il modal cliccando sul backdrop
+          # @param close_on_escape [Boolean] Se chiudere il modal premendo Escape
+          # @param lock_scroll [Boolean] Se bloccare lo scroll del body quando il modal è aperto
           # @param classes [String] Classi CSS aggiuntive per il contenitore
           # @param html_options [Hash] Attributi HTML aggiuntivi
           #
@@ -36,54 +33,47 @@ module BetterUi
           #
           # @return [String] HTML del modal
           #
-          # @example Utilizzo base
-          #   <%= bui_modal(title: "Conferma azione") do %>
-          #     <p>Sei sicuro di voler continuare?</p>
+          # @example Utilizzo base con button trigger
+          #   <%= bui_modal do |modal| %>
+          #     <% modal.with_trigger(label: "Apri Modal", as: :button, type: :primary) %>
+          #     <% modal.with_modal(title: "Conferma azione") do %>
+          #       <p>Sei sicuro di voler continuare?</p>
+          #     <% end %>
           #   <% end %>
           #
-          # @example Con tema, dimensione e border radius
-          #   <%= bui_modal(title: "Attenzione", theme: :red, size: :large, rounded: :large) do %>
-          #     <p>Questa azione non può essere annullata.</p>
+          # @example Con link trigger
+          #   <%= bui_modal do |modal| %>
+          #     <% modal.with_trigger(label: "Visualizza dettagli", as: :link, variant: :underline) %>
+          #     <% modal.with_modal(title: "Dettagli elemento", theme: :blue, size: :large) do %>
+          #       <p>Informazioni dettagliate sull'elemento selezionato.</p>
+          #     <% end %>
           #   <% end %>
           #
-          # @example Senza backdrop
-          #   <%= bui_modal(title: "Informazioni", backdrop: false) do %>
-          #     <p>Contenuto del modal senza overlay di sfondo.</p>
-          #   <% end %>
-          #
-          # @example Non chiudibile
-          #   <%= bui_modal(title: "Caricamento", closable: false) do %>
-          #     <p>Operazione in corso...</p>
-          #   <% end %>
-          #
-          # @example Con bottoni di azione
-          #   <%= bui_modal(title: "Elimina elemento", theme: :red) do %>
-          #     <p>Sei sicuro di voler eliminare questo elemento?</p>
-          #     <p class="text-sm text-gray-600 mt-2">Questa azione non può essere annullata.</p>
-          #     
-          #     <div class="flex justify-end space-x-3 mt-6">
-          #       <%= bui_button(label: "Annulla", type: :white, size: :medium) %>
-          #       <%= bui_button(label: "Elimina", type: :red, size: :medium) %>
-          #     </div>
+          # @example Modal con configurazione avanzata
+          #   <%= bui_modal(close_on_backdrop: false, lock_scroll: false) do |modal| %>
+          #     <% modal.with_trigger(label: "Elimina", as: :button, type: :red, size: :small) %>
+          #     <% modal.with_modal(title: "Elimina elemento", theme: :red, backdrop: true, closable: true) do %>
+          #       <p>Sei sicuro di voler eliminare questo elemento?</p>
+          #       <p class="text-sm text-gray-600 mt-2">Questa azione non può essere annullata.</p>
+          #       
+          #       <div class="flex justify-end space-x-3 mt-6">
+          #         <%= bui_button(label: "Annulla", type: :white, size: :medium) %>
+          #         <%= bui_button(label: "Elimina", type: :red, size: :medium) %>
+          #       </div>
+          #     <% end %>
           #   <% end %>
           def bui_modal(
-            title:,
-            theme: :default,
-            size: :medium,
-            rounded: :medium,
-            backdrop: true,
-            closable: true,
+            close_on_backdrop: true,
+            close_on_escape: true,
+            lock_scroll: true,
             classes: nil,
             **html_options,
             &block
           )
             render BetterUi::General::Modal::Component.new(
-              title: title,
-              theme: theme,
-              size: size,
-              rounded: rounded,
-              backdrop: backdrop,
-              closable: closable,
+              close_on_backdrop: close_on_backdrop,
+              close_on_escape: close_on_escape,
+              lock_scroll: lock_scroll,
               classes: classes,
               **html_options
             ), &block

data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb

@@ -5,53 +5,86 @@ module BetterUi
     module Components
       module Tabs
         module TabsHelper
-          # Crea un container di navigazione tabs per organizzare contenuti correlati
+          # Crea un sistema completo di tabs con navigazione e panel inclusi
           #
           # @param variant [Symbol] lo stile delle tabs (:pills, :underline, :bordered, :minimal)
           # @param theme [Symbol] il tema di colore delle tabs (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)
           # @param size [Symbol] la dimensione delle tabs (:small, :medium, :large)
           # @param orientation [Symbol] l'orientamento delle tabs (:horizontal, :vertical)
-          # @param classes [String] classi CSS aggiuntive da applicare al container
-          # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento
-          # @param block [Proc] il contenuto delle tabs (le singole tab)
-          # @return [String] l'HTML del container tabs
+          # @param navigation_classes [String] classi CSS aggiuntive per la navigazione
+          # @param panels_classes [String] classi CSS aggiuntive per i panel (default: 'mt-4')
+          # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento wrapper
+          # @param block [Proc] il contenuto che definisce navigation e panels tramite slots
+          # @return [String] l'HTML completo del sistema tabs
           #
-          # @example Uso base
-          #   <%= bui_tabs do %>
-          #     <%= bui_tab(text: "Generale", target: "generale", active: true) %>
-          #     <%= bui_tab(text: "Sicurezza", target: "sicurezza") %>
+          # @example Uso base con slots
+          #   <%= bui_tabs do |tabs| %>
+          #     <% tabs.with_navigation do %>
+          #       <%= bui_tab(text: "Tab 1", target: "tab1", active: true) %>
+          #       <%= bui_tab(text: "Tab 2", target: "tab2") %>
+          #     <% end %>
+          #     <% tabs.with_panels do %>
+          #       <%= bui_tab_panel(id: "tab1", active: true) do %>
+          #         Contenuto del primo pannello
+          #       <% end %>
+          #       <%= bui_tab_panel(id: "tab2") do %>
+          #         Contenuto del secondo pannello
+          #       <% end %>
+          #     <% end %>
           #   <% end %>
           #
           # @example Con temi e dimensioni
-          #   <%= bui_tabs(variant: :underline, theme: :blue, size: :large) do %>
-          #     <%= bui_tab(text: "Dashboard", target: "dashboard", active: true, icon: "chart-bar") %>
-          #     <%= bui_tab(text: "Impostazioni", target: "settings", icon: "cog-6-tooth") %>
+          #   <%= bui_tabs(variant: :underline, theme: :blue, size: :large) do |tabs| %>
+          #     <% tabs.with_navigation do %>
+          #       <%= bui_tab(text: "Dashboard", target: "dashboard", active: true, icon: "chart-bar") %>
+          #       <%= bui_tab(text: "Impostazioni", target: "settings", icon: "cog-6-tooth") %>
+          #     <% end %>
+          #     <% tabs.with_panels do %>
+          #       <%= bui_tab_panel(id: "dashboard", active: true) do %>
+          #         Dashboard content...
+          #       <% end %>
+          #       <%= bui_tab_panel(id: "settings") do %>
+          #         Settings content...
+          #       <% end %>
+          #     <% end %>
           #   <% end %>
           #
           # @example Tabs verticali
-          #   <%= bui_tabs(orientation: :vertical, variant: :pills) do %>
-          #     <%= bui_tab(text: "Profilo", target: "profile") %>
-          #     <%= bui_tab(text: "Account", target: "account") %>
+          #   <%= bui_tabs(orientation: :vertical, variant: :pills) do |tabs| %>
+          #     <% tabs.with_navigation do %>
+          #       <%= bui_tab(text: "Profilo", target: "profile", active: true) %>
+          #       <%= bui_tab(text: "Account", target: "account") %>
+          #     <% end %>
+          #     <% tabs.with_panels do %>
+          #       <%= bui_tab_panel(id: "profile", active: true) do %>
+          #         Informazioni profilo...
+          #       <% end %>
+          #       <%= bui_tab_panel(id: "account") do %>
+          #         Impostazioni account...
+          #       <% end %>
+          #     <% end %>
           #   <% end %>
           #
-          # @example Con attributi personalizzati
-          #   <%= bui_tabs(classes: "my-4", data: { testid: "main-tabs" }) do %>
-          #     <%= bui_tab(text: "Home", target: "home", active: true) %>
-          #   <% end %>
-          #
-          # @example Con Rails form builder
-          #   <%= bui_tabs(form: form, variant: :bordered) do %>
-          #     <%= bui_tab(text: "Dati personali", target: "personal") %>
-          #     <%= bui_tab(text: "Contatti", target: "contacts") %>
+          # @example Con classi personalizzate
+          #   <%= bui_tabs(navigation_classes: "border-b-2", panels_classes: "p-6 bg-gray-50") do |tabs| %>
+          #     <% tabs.with_navigation do %>
+          #       <%= bui_tab(text: "Home", target: "home", active: true) %>
+          #     <% end %>
+          #     <% tabs.with_panels do %>
+          #       <%= bui_tab_panel(id: "home", active: true) do %>
+          #         Home content with custom styling...
+          #       <% end %>
+          #     <% end %>
           #   <% end %>
           def bui_tabs(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, 
-                      classes: '', form: nil, **options, &block)
+                      navigation_classes: '', panels_classes: 'mt-4', **options, &block)
             render BetterUi::General::Tabs::Component.new(
               variant: variant,
               theme: theme,
               size: size,
               orientation: orientation,
-              classes: classes,
+              navigation_classes: navigation_classes,
+              panels_classes: panels_classes,
               **options
             ), &block
           end

data/app/helpers/better_ui/general/components/text/text_helper.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Text
+        module TextHelper
+          # Genera un testo usando BetterUi::General::Text::Component
+          #
+          # @param text [String] testo da mostrare (nil se si usa blocco)
+          # @param theme [Symbol] tema del colore (:default, :white, :red, :blue, etc.)
+          # @param size [Symbol] dimensione (:xs, :small, :medium, :large, :xl, :"2xl")
+          # @param align [Symbol] allineamento (:left, :center, :right, :justify)
+          # @param weight [Symbol] peso font (:thin, :light, :normal, :medium, :semibold, :bold, :extrabold)
+          # @param style [Symbol] stile (:normal, :italic, :underline, :line_through)
+          # @param classes [String] classi CSS aggiuntive
+          # @param html_options [Hash] opzioni HTML aggiuntive
+          # @return [String] HTML del testo renderizzato
+          #
+          # @example Uso base
+          #   bui_text("Testo semplice")
+          #   bui_text("Testo importante", theme: :blue, weight: :bold)
+          #
+          # @example Con dimensioni e stili
+          #   bui_text("Titolo grande", size: :xl, weight: :bold)
+          #   bui_text("Testo sottile", theme: :muted, size: :small)
+          #
+          # @example Con allineamento
+          #   bui_text("Testo centrato", align: :center)
+          #   bui_text("Testo giustificato", align: :justify)
+          #
+          # @example Con stili tipografici
+          #   bui_text("Testo corsivo", style: :italic)
+          #   bui_text("Testo sottolineato", style: :underline)
+          #
+          # @example Con blocco Ruby
+          #   bui_text(theme: :green, weight: :semibold) do
+          #     "Contenuto complesso con <strong>HTML</strong>".html_safe
+          #   end
+          #
+          # @example Con attributi HTML personalizzati
+          #   bui_text("Testo con ID", 
+          #            theme: :blue, 
+          #            id: "my-text",
+          #            data: { action: "click->handler#process" })
+          #
+          # @example Per sostituire paragrafi standard
+          #   # Invece di: <p class="text-gray-600">Descrizione</p>
+          #   bui_text("Descrizione", theme: :gray)
+          #
+          # @example Combinazioni complesse
+          #   bui_text("Messaggio di errore", 
+          #            theme: :red, 
+          #            size: :small, 
+          #            weight: :medium,
+          #            classes: "mb-2")
+          def bui_text(
+            text = nil,
+            theme: :default,
+            size: :medium,
+            align: :left,
+            weight: :normal,
+            style: :normal,
+            classes: '',
+            **html_options,
+            &block
+          )
+            render BetterUi::General::Text::Component.new(
+              text: text,
+              theme: theme,
+              size: size,
+              align: align,
+              weight: weight,
+              style: style,
+              classes: classes,
+              **html_options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.2.0"
+  VERSION = "0.6.0"
 end

data/lib/better_ui.rb

@@ -3,6 +3,7 @@ require "better_ui/engine"
 require "better_ui/railtie"
 
 require "font-awesome-sass"
+require "view_component"
 
 module BetterUi
   # Your code goes here...