fernandes-ui 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ab5b35505a4982cf54fe428f57b804589eb6ff88617cb32db0479457eba0372
-  data.tar.gz: 69136c3a3fbdace951ebdef92be717c6ba71548fdf4bc0ce354ff4333881248b
+  metadata.gz: cd5c1b0e4c8f243753ae87b5ed616c6ec1bb5d654f9b36e4cd2a9d93d92afd3c
+  data.tar.gz: 12badc6858a2551334c142f8b99a5b896787f66e998a037e0e9caece9e84ed9d
 SHA512:
-  metadata.gz: 3ae95aa7368c39e640f7b079b1500f76a2088d8306914d33c0b32ae540225b1b1ca8015b3902f58c5019ec1ec5ca281d9ebe79de4a308149a67ea2576a7664ba
-  data.tar.gz: d0853a4b120da156420eb3edcac3e9e26e0a09b31299074342df5c3ca00cc451993c7a0d661bf9f74bcd0add7922f7eed60126328f6490f32d5e47c23eecc841
+  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/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/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) { }
+}
+```

data/docs/components/accordion.yml

@@ -0,0 +1,109 @@
+---
+name: Accordion
+slug: accordion
+category: data
+description: Accordion container component (Phlex) Wraps collapsible accordion items
+  with Stimulus controller
+anatomy:
+- name: Accordion
+  description: Root container with state management
+  required: true
+- name: Content
+  description: Main content container
+  required: true
+- name: Item
+  description: Individual item element
+  required: false
+- name: Trigger
+  description: Button or element that activates the component
+  required: true
+features:
+- Keyboard navigation with arrow keys
+- Animation support
+api:
+  Accordion:
+    description: ''
+    parameters:
+    - name: type
+      type: String
+      default: single
+      description: The type
+    - name: collapsible
+      type: Boolean
+      default: 'false'
+      description: The collapsible
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: ''
+    parameters:
+    - name: item_value
+      type: String
+      default: nil
+      description: The item value
+    - name: initial_open
+      type: Boolean
+      default: 'false'
+      description: The initial open
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: ''
+    parameters:
+    - name: value
+      type: String
+      default: ''
+      description: The current value
+    - name: initial_open
+      type: Boolean
+      default: 'false'
+      description: The initial open
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: ''
+    parameters:
+    - name: item_value
+      type: String
+      default: nil
+      description: The item value
+    - name: initial_open
+      type: Boolean
+      default: 'false'
+      description: The initial open
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Accordion
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+  description: Implements the WAI-ARIA Accordion pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: ArrowDown
+  description: Moves focus to next item
+- key: ArrowUp
+  description: Moves focus to previous item
+- key: Home
+  description: Moves focus to first item
+- key: End
+  description: Moves focus to last item
+javascript:
+  controller: ui--accordion
+  targets:
+  - item
+  - trigger
+  - content
+  values:
+  - name: type
+    type: String
+    description: The type
+  actions:
+  - removeKeyboardNavigation
+  - toggle
+  events: []
+related:
+- collapsible
+- tabs

data/docs/components/alert.yml

@@ -0,0 +1,47 @@
+---
+name: Alert
+slug: alert
+category: feedback
+description: Alert - Phlex implementation
+anatomy:
+- name: Alert
+  description: A callout component for displaying important information to users.
+  required: true
+- name: Description
+  description: Description text for an alert component.
+  required: false
+- name: Title
+  description: Title text for an alert component.
+  required: false
+features:
+- Custom styling with Tailwind classes
+api:
+  Alert:
+    description: A callout component for displaying important information to users.
+    parameters:
+    - name: variant
+      type: Symbol
+      default: ":default"
+      description: Visual style variant
+    data_attributes: []
+    css_variables: []
+  Description:
+    description: Description text for an alert component.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Title:
+    description: Title text for an alert component.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Alert
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+  description: Implements the WAI-ARIA Alert pattern with proper roles, states, and
+    keyboard navigation.
+  aria_attributes:
+  - role="alert"
+related:
+- alert_dialog
+- toast