fernandes-ui 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a5e204a6fcf76008dccc34ec8487f8b2bd80ba924a43aeecd59a44802d744ade
-  data.tar.gz: f470c5ab397812019513fdbb08d6c77166613f06be3e5f22ec801905b32860c7
+  metadata.gz: cd5c1b0e4c8f243753ae87b5ed616c6ec1bb5d654f9b36e4cd2a9d93d92afd3c
+  data.tar.gz: 12badc6858a2551334c142f8b99a5b896787f66e998a037e0e9caece9e84ed9d
 SHA512:
-  metadata.gz: dfce0d35ccdb4fcc6a09108aef9eb7e197046a9c2bed89545cc5a979f7d7e870f593ba545f632cdf3021557a726f4c1d7d726a0cf08a31f51a9896c376a35fa8
-  data.tar.gz: 22dee7451abe1a42880c98ec161c33e5baf43b264ded6399e8d3c5a24c6f55d9a0bf7355ff684e5c90a4121924babcc6f39dac98a5c48788e00624c413125ca8
+  metadata.gz: dcce7dc49c2dcd0c1ca3fedcb8032c93ecc311bfa34a18d4a9f343b5d4d591c667b9ef7e835cdf512f215ee64d448b18699c7474e7ed6f472e57dcf6b57efed1
+  data.tar.gz: b35eb71c9ba0e9a53fc5a10eb3b9c372132ec1e3aa29c7f942afae622a53db8b5f9590cab1f9c8f0b2c04e2358f3c00b0392300132a277ef651c54c8b81147b5

data/app/assets/javascripts/ui.esm.js

@@ -14341,7 +14341,6 @@ function registerControllersInto(application, controllers) {
   for (const [name, controller] of Object.entries(controllers)) {
     try {
       application.register(name, controller);
-      console.log(`Registered Stimulus controller: ${name}`);
     } catch (error) {
       console.error(`Failed to register controller ${name}:`, error);
     }

data/app/assets/javascripts/ui.js

@@ -13913,7 +13913,6 @@
     for (const [name, controller] of Object.entries(controllers)) {
       try {
         application.register(name, controller);
-        console.log(`Registered Stimulus controller: ${name}`);
       } catch (error) {
         console.error(`Failed to register controller ${name}:`, error);
       }

data/app/behaviors/ui/button_behavior.rb

@@ -66,7 +66,7 @@ module UI::ButtonBehavior
 
   # Base classes applied to all buttons
   def button_base_classes
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive has-[>svg]:px-3"
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius,0.5rem)] text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive has-[>svg]:px-3"
   end
 
   # Variant-specific classes based on @variant
@@ -77,7 +77,7 @@ module UI::ButtonBehavior
     when "destructive"
       "bg-destructive text-destructive-foreground hover:bg-destructive/90 text-white"
     when "outline"
-      "!border !border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50"
+      "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50"
     when "secondary"
       "bg-secondary text-secondary-foreground hover:bg-secondary/80"
     when "ghost"
@@ -90,8 +90,10 @@ module UI::ButtonBehavior
   end
 
   # Size-specific classes based on @size
+  # Normalizes size to handle both :icon_sm (underscore) and "icon-sm" (hyphen) formats
   def button_size_classes
-    case @size.to_s
+    normalized_size = @size.to_s.tr("-", "_")
+    case normalized_size
     when "default"
       "h-9 px-4 py-2"
     when "sm"
@@ -100,9 +102,9 @@ module UI::ButtonBehavior
       "h-10 px-8"
     when "icon"
       "h-9 w-9"
-    when "icon-sm"
+    when "icon_sm"
       "h-8 w-8"
-    when "icon-lg"
+    when "icon_lg"
       "h-10 w-10"
     else
       "h-9 px-4 py-2"

data/app/behaviors/ui/button_group_behavior.rb

@@ -42,14 +42,16 @@ module UI::ButtonGroupBehavior
 
   # Orientation-specific classes based on @orientation
   # Matches shadcn/ui v4 exactly
-  # Note: We exclude [role=menu] elements from border-radius rules (dropdown content)
+  # Note: We exclude [role=menu], nested [data-slot=button-group], and [data-state] (popover/tooltip content) elements from border-radius rules
+  # Note: We use !important on border-radius rules to override button's shorthand `rounded-[var(--radius)]`
+  # Note: We use :has(+[data-state]) to exclude elements followed by popover/tooltip content from rounded-r-none
   def button_group_orientation_classes
     case @orientation.to_s
     when "vertical"
-      "flex-col [&>*:not(:first-child):not([role=menu])]:rounded-t-none [&>*:not(:first-child):not([role=menu])]:border-t-0 [&>*:not(:last-child):not([role=menu])]:rounded-b-none"
+      "flex-col [&>*:not(:first-child):not([role=menu]):not([data-slot=button-group]):not([data-state])]:!rounded-t-none [&>*:not(:first-child):not([role=menu]):not([data-slot=button-group]):not([data-state])]:border-t-0 [&>*:not(:last-child):not(:has(+[data-state])):not([role=menu]):not([data-slot=button-group]):not([data-state])]:!rounded-b-none"
     else # horizontal (default)
-      "[&>*:not(:first-child):not([role=menu])]:rounded-l-none [&>*:not(:first-child):not([role=menu])]:border-l-0 " \
-      "[&>*:not(:last-child):not(:has(+[role=menu])):not([role=menu])]:rounded-r-none"
+      "[&>*:not(:first-child):not([role=menu]):not([data-slot=button-group]):not([data-state])]:!rounded-l-none [&>*:not(:first-child):not([role=menu]):not([data-slot=button-group]):not([data-state])]:border-l-0 " \
+      "[&>*:not(:last-child):not(:has(+[role=menu])):not(:has(+[data-state])):not([role=menu]):not([data-slot=button-group]):not([data-state])]:!rounded-r-none"
     end
   end
 end

data/app/behaviors/ui/input_group_button_behavior.rb

@@ -73,15 +73,17 @@ module UI::InputGroupButtonBehavior
 
   # Size-specific classes
   # Uses calc(var(--radius, 0.375rem) - 5px) to create slightly smaller rounded corners for nested buttons
+  # Normalizes size to handle both :icon_xs (underscore) and "icon-xs" (hyphen) formats
   def input_group_button_size_classes
-    case @size.to_s
+    normalized_size = @size.to_s.tr("-", "_")
+    case normalized_size
     when "xs"
       "h-6 gap-1 px-2 rounded-[calc(var(--radius,0.375rem)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
     when "sm"
       "h-8 px-2.5 gap-1.5 rounded-[calc(var(--radius,0.375rem)-5px)] has-[>svg]:px-2.5"
-    when "icon-xs"
+    when "icon_xs"
       "size-6 rounded-[calc(var(--radius,0.375rem)-5px)] p-0 has-[>svg]:p-0"
-    when "icon-sm"
+    when "icon_sm"
       "size-8 rounded-[calc(var(--radius,0.375rem)-5px)] p-0 has-[>svg]:p-0"
     else
       "h-6 gap-1 px-2 rounded-[calc(var(--radius,0.375rem)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"

data/app/components/ui/slider.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+# Slider - Phlex implementation
+#
+# A range slider component for selecting values within a range.
+# Uses SliderBehavior module for shared logic.
+#
+# @example Basic usage
+#   render UI::Slider.new(default_value: [50], max: 100) do
+#     render UI::SliderTrack.new do
+#       render UI::SliderRange.new
+#     end
+#     render UI::SliderThumb.new
+#   end
+#
+# @example Range slider with two thumbs
+#   render UI::Slider.new(default_value: [25, 75], max: 100) do
+#     render UI::SliderTrack.new do
+#       render UI::SliderRange.new
+#     end
+#     render UI::SliderThumb.new
+#     render UI::SliderThumb.new
+#   end
+class UI::Slider < Phlex::HTML
+  include UI::SliderBehavior
+
+  # @param min [Integer] Minimum value
+  # @param max [Integer] Maximum value
+  # @param step [Integer] Step increment
+  # @param value [Array] Current value (controlled)
+  # @param default_value [Array] Initial value (uncontrolled)
+  # @param center_point [Integer] Center point for bidirectional sliders
+  # @param disabled [Boolean] Whether the slider is disabled
+  # @param orientation [String] Orientation (horizontal, vertical)
+  # @param inverted [Boolean] Whether the slider is inverted
+  # @param name [String] Form field name
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(
+    min: 0,
+    max: 100,
+    step: 1,
+    value: nil,
+    default_value: nil,
+    center_point: nil,
+    disabled: false,
+    orientation: "horizontal",
+    inverted: false,
+    name: "",
+    classes: "",
+    attributes: {}
+  )
+    @min = min
+    @max = max
+    @step = step
+    @value = value
+    @center_point = center_point
+    @default_value = default_value || (center_point ? [center_point] : [min])
+    @disabled = disabled
+    @orientation = orientation
+    @inverted = inverted
+    @name = name
+    @classes = classes
+    @attributes = attributes
+  end
+
+  def view_template(&block)
+    all_attributes = slider_html_attributes
+
+    # Merge data attributes
+    all_attributes[:data] = all_attributes[:data].merge(@attributes.fetch(:data, {}))
+
+    # Merge with user attributes (except data which we already handled)
+    all_attributes = all_attributes.merge(@attributes.except(:data))
+
+    div(**all_attributes) do
+      yield if block_given?
+    end
+  end
+end

data/app/components/ui/slider_range.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# SliderRange - Phlex implementation
+#
+# The range is the filled portion of the track showing the selected value.
+# Uses SliderRangeBehavior module for shared logic.
+#
+# @example Basic usage (inside SliderTrack)
+#   render UI::SliderTrack.new do
+#     render UI::SliderRange.new
+#   end
+class UI::SliderRange < Phlex::HTML
+  include UI::SliderRangeBehavior
+
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", attributes: {})
+    @classes = classes
+    @attributes = attributes
+  end
+
+  def view_template
+    all_attributes = slider_range_html_attributes
+
+    # Merge data attributes
+    all_attributes[:data] = all_attributes[:data].merge(@attributes.fetch(:data, {}))
+
+    # Merge with user attributes (except data which we already handled)
+    all_attributes = all_attributes.merge(@attributes.except(:data))
+
+    div(**all_attributes)
+  end
+end

data/app/components/ui/slider_thumb.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+# SliderThumb - Phlex implementation
+#
+# The thumb is the draggable handle that controls the slider value.
+# Uses SliderThumbBehavior module for shared logic.
+#
+# @example Basic usage
+#   render UI::Slider.new(default_value: [50]) do
+#     render UI::SliderTrack.new do
+#       render UI::SliderRange.new
+#     end
+#     render UI::SliderThumb.new
+#   end
+#
+# @example Range slider with two thumbs
+#   render UI::Slider.new(default_value: [25, 75]) do
+#     render UI::SliderTrack.new do
+#       render UI::SliderRange.new
+#     end
+#     render UI::SliderThumb.new
+#     render UI::SliderThumb.new
+#   end
+class UI::SliderThumb < Phlex::HTML
+  include UI::SliderThumbBehavior
+
+  # @param disabled [Boolean] Whether the thumb is disabled
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(disabled: false, classes: "", attributes: {})
+    @disabled = disabled
+    @classes = classes
+    @attributes = attributes
+  end
+
+  def view_template
+    all_attributes = slider_thumb_html_attributes
+
+    # Merge data attributes
+    all_attributes[:data] = all_attributes[:data].merge(@attributes.fetch(:data, {}))
+
+    # Merge with user attributes (except data which we already handled)
+    all_attributes = all_attributes.merge(@attributes.except(:data))
+
+    div(**all_attributes)
+  end
+end

data/app/components/ui/slider_track.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# SliderTrack - Phlex implementation
+#
+# The track is the background rail that contains the range.
+# Uses SliderTrackBehavior module for shared logic.
+#
+# @example Basic usage
+#   render UI::SliderTrack.new do
+#     render UI::SliderRange.new
+#   end
+class UI::SliderTrack < Phlex::HTML
+  include UI::SliderTrackBehavior
+
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", attributes: {})
+    @classes = classes
+    @attributes = attributes
+  end
+
+  def view_template(&block)
+    all_attributes = slider_track_html_attributes
+
+    # Merge data attributes
+    all_attributes[:data] = all_attributes[:data].merge(@attributes.fetch(:data, {}))
+
+    # Merge with user attributes (except data which we already handled)
+    all_attributes = all_attributes.merge(@attributes.except(:data))
+
+    div(**all_attributes) do
+      yield if block_given?
+    end
+  end
+end

data/app/javascript/ui/common.js

@@ -16,7 +16,6 @@ export function registerControllersInto(application, controllers) {
   for (const [name, controller] of Object.entries(controllers)) {
     try {
       application.register(name, controller)
-      console.log(`Registered Stimulus controller: ${name}`)
     } catch (error) {
       console.error(`Failed to register controller ${name}:`, error)
     }

data/app/views/ui/_item.html.erb

@@ -1,9 +1,14 @@
 <% extend UI::ItemBehavior -%>
 <% @variant = local_assigns.fetch(:variant, "default") -%>
 <% @size = local_assigns.fetch(:size, "default") -%>
+<% @as_child = local_assigns.fetch(:as_child, false) -%>
 <% @classes = local_assigns.fetch(:classes, "") -%>
-<% @attributes = local_assigns.except(:variant, :size, :classes) -%>
+<% @attributes = local_assigns.except(:variant, :size, :as_child, :classes) -%>
 <% attrs = item_html_attributes.merge(@attributes) -%>
+<% if @as_child -%>
+<%= yield(attrs) %>
+<% else -%>
 <div class="<%= attrs[:class] %>" data-slot="<%= attrs[:"data-slot"] %>" data-variant="<%= attrs[:"data-variant"] %>" data-size="<%= attrs[:"data-size"] %>">
   <%= yield %>
 </div>
+<% end -%>

data/app/views/ui/field/_label.html.erb

@@ -1,6 +1,7 @@
 <%# FieldLabel Component - Label styled for form fields %>
 <%
   content ||= local_assigns.fetch(:content, nil)
+  @for_id = local_assigns.fetch(:for_id, nil)
   @classes = local_assigns.fetch(:classes, "")
   @attributes = local_assigns.fetch(:attributes, {})
 
@@ -10,6 +11,6 @@
   # Get HTML attributes from behavior
   all_attributes = field_label_html_attributes.deep_merge(@attributes)
 -%>
-<%= content_tag :div, all_attributes do %>
+<%= content_tag :label, all_attributes do %>
   <%= content || yield %>
 <% end %>

data/app/views/ui/field/_separator.html.erb

@@ -9,7 +9,13 @@
 
   # Get HTML attributes from behavior
   all_attributes = field_separator_html_attributes.deep_merge(@attributes)
+  has_children = content.present? || block_given?
 -%>
 <%= content_tag :div, all_attributes do %>
-  <%= content || yield %>
+  <%= render "ui/separator", classes: "absolute inset-0 top-1/2" %>
+  <% if has_children %>
+    <span data-slot="field-separator-content" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2">
+      <%= content || yield %>
+    </span>
+  <% end %>
 <% end %>

data/docs/components/ANNOTATIONS.md

@@ -0,0 +1,220 @@
+# Component Documentation Annotations
+
+Este documento descreve as anotações YARD e JSDoc usadas para documentar componentes UI.
+
+## Ruby (YARD)
+
+### Tags Customizadas para Componentes
+
+```ruby
+# @ui_component Select
+#   Exibe uma lista de opções para o usuário escolher.
+#
+# @ui_category forms
+#
+# @ui_anatomy Select - Root container (required)
+# @ui_anatomy Trigger - Button that opens dropdown (required)
+# @ui_anatomy Content - Container for options (required)
+# @ui_anatomy Item - Selectable option
+#
+# @ui_feature Single selection from a list
+# @ui_feature Keyboard navigation
+# @ui_feature Type-ahead search
+#
+# @ui_related combobox
+# @ui_related dropdown_menu
+```
+
+### Tags para Parâmetros
+
+```ruby
+# @param value [String] Currently selected value
+# @param disabled [Boolean] Whether the select is disabled
+# @param name [String] Form field name
+```
+
+### Tags para Data Attributes
+
+```ruby
+# @ui_data_attr data-state ["open", "closed"] Current open/closed state
+# @ui_data_attr data-side ["top", "bottom"] Which side content appears
+# @ui_data_attr data-disabled ["true"] Present when disabled
+```
+
+### Tags para CSS Variables
+
+```ruby
+# @ui_css_var --trigger-width Width of the trigger element
+# @ui_css_var --content-max-height Maximum height of content
+```
+
+### Tags para Acessibilidade
+
+```ruby
+# @ui_aria_pattern Listbox
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+# @ui_aria_attr role="combobox" on trigger
+# @ui_aria_attr aria-expanded on trigger
+# @ui_aria_attr aria-selected on items
+```
+
+### Tags para Keyboard
+
+```ruby
+# @ui_keyboard Space Opens dropdown when trigger focused
+# @ui_keyboard Enter Opens dropdown / selects item
+# @ui_keyboard ArrowDown Moves to next item
+# @ui_keyboard Escape Closes dropdown
+```
+
+## JavaScript (JSDoc)
+
+### Tags para Stimulus Controllers
+
+```javascript
+/**
+ * @controller ui--select
+ * @description Manages select dropdown state and interactions
+ *
+ * @target trigger - Button that toggles dropdown
+ * @target content - Dropdown container
+ * @target item - Selectable options
+ *
+ * @value open {Boolean} Controls open state
+ * @value value {String} Current selected value
+ *
+ * @fires ui:select:change When selection changes
+ */
+export default class extends Controller {
+  /**
+   * Toggle the dropdown open/closed
+   * @action
+   */
+  toggle() { }
+
+  /**
+   * Select an item
+   * @action
+   * @param {Event} event - Click event from item
+   */
+  selectItem(event) { }
+}
+```
+
+## Exemplo Completo - Select Behavior
+
+```ruby
+# frozen_string_literal: true
+
+# UI::SelectBehavior
+#
+# @ui_component Select
+# @ui_description Displays a list of options for the user to pick from, triggered by a button.
+# @ui_category forms
+#
+# @ui_anatomy Select - Root container with state management (required)
+# @ui_anatomy Trigger - Button that opens the dropdown (required)
+# @ui_anatomy Content - Container for the dropdown options (required)
+# @ui_anatomy Item - Individual selectable option (required)
+# @ui_anatomy Group - Groups related items with a label
+# @ui_anatomy Label - Label for item groups
+# @ui_anatomy Separator - Visual separator between items
+#
+# @ui_feature Single selection from a list of options
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Type-ahead search functionality
+# @ui_feature Grouped options with labels
+# @ui_feature Disabled items support
+# @ui_feature Custom trigger with asChild pattern
+# @ui_feature Placeholder text when no selection
+# @ui_feature Form integration with hidden input
+#
+# @ui_data_attr data-state ["open", "closed"] Current open/closed state
+# @ui_data_attr data-placeholder ["true"] Present when showing placeholder
+# @ui_data_attr data-side ["top", "bottom"] Which side the content appears
+#
+# @ui_css_var --trigger-width Width of the trigger element
+#
+# @ui_aria_pattern Listbox
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+# @ui_aria_attr role="combobox" on the trigger
+# @ui_aria_attr role="listbox" on the content container
+# @ui_aria_attr role="option" on each item
+# @ui_aria_attr aria-expanded on trigger
+# @ui_aria_attr aria-selected on the selected item
+# @ui_aria_attr aria-disabled on disabled items
+#
+# @ui_keyboard Space Opens dropdown when trigger is focused
+# @ui_keyboard Enter Opens dropdown / selects highlighted item
+# @ui_keyboard ArrowDown Opens dropdown / moves to next item
+# @ui_keyboard ArrowUp Moves to previous item
+# @ui_keyboard Home Moves to first item
+# @ui_keyboard End Moves to last item
+# @ui_keyboard Escape Closes dropdown
+# @ui_keyboard A-Z,a-z Type-ahead to find matching item
+#
+# @ui_related combobox
+# @ui_related dropdown_menu
+# @ui_related radio_group
+#
+module UI::SelectBehavior
+  # Returns HTML attributes for the select element
+  #
+  # @return [Hash] HTML attributes
+  def select_html_attributes
+    # ...
+  end
+end
+```
+
+## Exemplo Completo - Select Controller
+
+```javascript
+/**
+ * Select Controller
+ *
+ * @controller ui--select
+ * @description Manages select dropdown state, positioning, and keyboard navigation
+ *
+ * @target trigger - Button that toggles the dropdown
+ * @target content - Dropdown container
+ * @target item - Selectable option elements
+ * @target valueDisplay - Span showing selected value text
+ * @target hiddenInput - Hidden input for form submission
+ * @target viewport - Scrollable viewport containing items
+ *
+ * @value open {Boolean} Controls dropdown visibility
+ * @value value {String} Currently selected value
+ *
+ * @fires ui:select:change - Fired when selection changes (detail: { value, previousValue })
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "item", "valueDisplay", "hiddenInput", "viewport"]
+  static values = { open: Boolean, value: String }
+
+  /**
+   * Toggle dropdown open/closed
+   * @action
+   */
+  toggle(event) { }
+
+  /**
+   * Open the dropdown
+   * @action
+   */
+  open() { }
+
+  /**
+   * Close the dropdown
+   * @action
+   */
+  close() { }
+
+  /**
+   * Select an item from the dropdown
+   * @action
+   * @param {Event} event - Click event from the item
+   */
+  selectItem(event) { }
+}
+```