fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/empty_behavior.rb

@@ -1,124 +1,135 @@
 # frozen_string_literal: true
 
-module UI
-  # EmptyBehavior - Shared behavior for Empty component
-  module EmptyBehavior
-    def empty_html_attributes
-      {
-        class: empty_classes,
-        data: { slot: "empty" }
-      }
-    end
+# UI::EmptyBehavior
+#
+# @ui_component Empty
+# @ui_description Empty - Phlex implementation
+# @ui_category data-display
+#
+# @ui_anatomy Empty - Displays empty states in applications with customizable media, titles, descriptions, and actions. (required)
+# @ui_anatomy Content - Displays the content of the empty state such as a button, input or a link. (required)
+# @ui_anatomy Description - Displays the description of the empty state.
+# @ui_anatomy Header - Wraps the empty media, title, and description.
+# @ui_anatomy Title - Displays the title of the empty state.
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::EmptyBehavior
+  def empty_html_attributes
+    {
+      class: empty_classes,
+      data: { slot: "empty" }
+    }
+  end
 
-    def empty_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        classes_value
-      ].compact.join(" "))
-    end
+  def empty_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+      classes_value
+    ].compact.join(" "))
   end
+end
 
-  # EmptyHeaderBehavior - Shared behavior for EmptyHeader sub-component
-  module EmptyHeaderBehavior
-    def empty_header_html_attributes
-      {
-        class: empty_header_classes,
-        data: { slot: "empty-header" }
-      }
-    end
+# EmptyHeaderBehavior - Shared behavior for EmptyHeader sub-component
+module UI::EmptyHeaderBehavior
+  def empty_header_html_attributes
+    {
+      class: empty_header_classes,
+      data: { slot: "empty-header" }
+    }
+  end
 
-    def empty_header_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        "flex max-w-sm flex-col items-center gap-2 text-center",
-        classes_value
-      ].compact.join(" "))
-    end
+  def empty_header_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "flex max-w-sm flex-col items-center gap-2 text-center",
+      classes_value
+    ].compact.join(" "))
   end
+end
 
-  # EmptyMediaBehavior - Shared behavior for EmptyMedia sub-component
-  module EmptyMediaBehavior
-    def empty_media_html_attributes
-      {
-        class: empty_media_classes,
-        data: { slot: "empty-media" }
-      }
-    end
+# EmptyMediaBehavior - Shared behavior for EmptyMedia sub-component
+module UI::EmptyMediaBehavior
+  def empty_media_html_attributes
+    {
+      class: empty_media_classes,
+      data: { slot: "empty-media" }
+    }
+  end
 
-    def empty_media_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      variant_value = @variant.to_s
+  def empty_media_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    variant_value = @variant.to_s
 
-      TailwindMerge::Merger.new.merge([
-        "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        empty_media_variant_classes(variant_value),
-        classes_value
-      ].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([
+      "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      empty_media_variant_classes(variant_value),
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    def empty_media_variant_classes(variant)
-      case variant
-      when "icon"
-        "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
-      else # "default"
-        "bg-transparent"
-      end
+  def empty_media_variant_classes(variant)
+    case variant
+    when "icon"
+      "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+    else # "default"
+      "bg-transparent"
     end
   end
+end
 
-  # EmptyTitleBehavior - Shared behavior for EmptyTitle sub-component
-  module EmptyTitleBehavior
-    def empty_title_html_attributes
-      {
-        class: empty_title_classes,
-        data: { slot: "empty-title" }
-      }
-    end
+# EmptyTitleBehavior - Shared behavior for EmptyTitle sub-component
+module UI::EmptyTitleBehavior
+  def empty_title_html_attributes
+    {
+      class: empty_title_classes,
+      data: { slot: "empty-title" }
+    }
+  end
 
-    def empty_title_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        "font-semibold tracking-tight text-base",
-        classes_value
-      ].compact.join(" "))
-    end
+  def empty_title_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "font-semibold tracking-tight text-base",
+      classes_value
+    ].compact.join(" "))
   end
+end
 
-  # EmptyDescriptionBehavior - Shared behavior for EmptyDescription sub-component
-  module EmptyDescriptionBehavior
-    def empty_description_html_attributes
-      {
-        class: empty_description_classes,
-        data: { slot: "empty-description" }
-      }
-    end
+# EmptyDescriptionBehavior - Shared behavior for EmptyDescription sub-component
+module UI::EmptyDescriptionBehavior
+  def empty_description_html_attributes
+    {
+      class: empty_description_classes,
+      data: { slot: "empty-description" }
+    }
+  end
 
-    def empty_description_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        "text-sm text-muted-foreground",
-        classes_value
-      ].compact.join(" "))
-    end
+  def empty_description_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "text-sm text-muted-foreground",
+      classes_value
+    ].compact.join(" "))
   end
+end
 
-  # EmptyContentBehavior - Shared behavior for EmptyContent sub-component
-  module EmptyContentBehavior
-    def empty_content_html_attributes
-      {
-        class: empty_content_classes,
-        data: { slot: "empty-content" }
-      }
-    end
+# EmptyContentBehavior - Shared behavior for EmptyContent sub-component
+module UI::EmptyContentBehavior
+  def empty_content_html_attributes
+    {
+      class: empty_content_classes,
+      data: { slot: "empty-content" }
+    }
+  end
 
-    def empty_content_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        classes_value
-      ].compact.join(" "))
-    end
+  def empty_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      classes_value
+    ].compact.join(" "))
   end
 end

data/app/behaviors/ui/field_behavior.rb

@@ -1,46 +1,60 @@
 # frozen_string_literal: true
 
-module UI
-  # FieldBehavior
-  #
-  # Shared behavior for Field component across ERB, ViewComponent, and Phlex implementations.
-  # Field is the core wrapper for a single form field with support for different orientations.
-  module FieldBehavior
-    # Returns HTML attributes for the field wrapper element
-    def field_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        role: "group",
-        class: field_classes,
-        "data-slot": "field",
-        "data-orientation": @orientation,
-        "data-invalid": @data_invalid
-      }.merge(attributes_value).compact
-    end
+# UI::FieldBehavior
+#
+# @ui_component Field
+# @ui_description Field - Phlex implementation
+# @ui_category forms
+#
+# @ui_anatomy Field - Core wrapper for a single form field with support for different orientations. (required)
+# @ui_anatomy Content - Flex column that groups control and descriptions. (required)
+# @ui_anatomy Description - Helper text for form fields.
+# @ui_anatomy Group - Layout wrapper that stacks Field components.
+# @ui_anatomy Label - Label styled for form fields with disability states.
+# @ui_anatomy Separator - Visual divider to separate sections inside FieldGroup.
+# @ui_anatomy Title - Title with label styling inside FieldContent.
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+#
+# @ui_related input
+# @ui_related label
+#
+module UI::FieldBehavior
+  # Returns HTML attributes for the field wrapper element
+  def field_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      role: "group",
+      class: field_classes,
+      "data-slot": "field",
+      "data-orientation": @orientation,
+      "data-invalid": @data_invalid
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the field
-    def field_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "group/field flex w-full gap-3 data-[invalid=true]:text-destructive"
-      orientation = field_orientation_classes
+  # Returns combined CSS classes for the field
+  def field_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "group/field flex w-full gap-3 data-[invalid=true]:text-destructive"
+    orientation = field_orientation_classes
 
-      TailwindMerge::Merger.new.merge([base, orientation, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, orientation, classes_value].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Returns orientation-specific classes
-    def field_orientation_classes
-      case @orientation.to_s
-      when "vertical"
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
-      when "horizontal"
-        "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-      when "responsive"
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-      else
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
-      end
+  # Returns orientation-specific classes
+  def field_orientation_classes
+    case @orientation.to_s
+    when "vertical"
+      "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
+    when "horizontal"
+      "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+    when "responsive"
+      "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+    else
+      "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
     end
   end
 end

data/app/behaviors/ui/field_content_behavior.rb

@@ -1,26 +1,24 @@
 # frozen_string_literal: true
 
-module UI
-  # FieldContentBehavior
-  #
-  # Shared behavior for FieldContent component across ERB, ViewComponent, and Phlex implementations.
-  # FieldContent is a flex column that groups control and descriptions.
-  module FieldContentBehavior
-    # Returns HTML attributes for the field content wrapper element
-    def field_content_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        "data-slot": "field-content",
-        class: field_content_classes
-      }.merge(attributes_value).compact
-    end
+# FieldContentBehavior
+#
+# Shared behavior for FieldContent component across ERB, ViewComponent, and Phlex implementations.
+# FieldContent is a flex column that groups control and descriptions.
+module UI::FieldContentBehavior
+  # Returns HTML attributes for the field content wrapper element
+  def field_content_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      "data-slot": "field-content",
+      class: field_content_classes
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the field content
-    def field_content_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "group/field-content flex flex-1 flex-col gap-1.5 leading-snug"
+  # Returns combined CSS classes for the field content
+  def field_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "group/field-content flex flex-1 flex-col gap-1.5 leading-snug"
 
-      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/field_description_behavior.rb

@@ -1,26 +1,24 @@
 # frozen_string_literal: true
 
-module UI
-  # FieldDescriptionBehavior
-  #
-  # Shared behavior for FieldDescription component across ERB, ViewComponent, and Phlex implementations.
-  # FieldDescription provides helper text for form fields.
-  module FieldDescriptionBehavior
-    # Returns HTML attributes for the field description element
-    def field_description_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        "data-slot": "field-description",
-        class: field_description_classes
-      }.merge(attributes_value).compact
-    end
+# FieldDescriptionBehavior
+#
+# Shared behavior for FieldDescription component across ERB, ViewComponent, and Phlex implementations.
+# FieldDescription provides helper text for form fields.
+module UI::FieldDescriptionBehavior
+  # Returns HTML attributes for the field description element
+  def field_description_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      "data-slot": "field-description",
+      class: field_description_classes
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the field description
-    def field_description_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+  # Returns combined CSS classes for the field description
+  def field_description_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
 
-      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/field_error_behavior.rb

@@ -1,47 +1,52 @@
 # frozen_string_literal: true
 
-module UI
-  # FieldErrorBehavior
-  #
-  # Shared behavior for FieldError component across ERB, ViewComponent, and Phlex implementations.
-  # FieldError displays error messages for form fields with accessibility support.
-  module FieldErrorBehavior
-    # Returns HTML attributes for the field error element
-    def field_error_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        "data-slot": "field-error",
-        class: field_error_classes,
-        role: "alert"
-      }.merge(attributes_value).compact
-    end
+# UI::FieldErrorBehavior
+#
+# @ui_component Field Error
+# @ui_description Error - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Field Error - Error message display for form fields with accessibility support. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+#
+module UI::FieldErrorBehavior
+  # Returns HTML attributes for the field error element
+  def field_error_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      "data-slot": "field-error",
+      class: field_error_classes,
+      role: "alert"
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the field error
-    def field_error_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "text-destructive text-sm font-normal"
+  # Returns combined CSS classes for the field error
+  def field_error_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "text-destructive text-sm font-normal"
 
-      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+  end
 
-    # Returns true if errors should be displayed
-    def has_errors?
-      @errors.is_a?(Array) && @errors.any?
-    end
+  # Returns true if errors should be displayed
+  def has_errors?
+    @errors.is_a?(Array) && @errors.any?
+  end
 
-    # Returns true if displaying a single error
-    def single_error?
-      has_errors? && @errors.length == 1
-    end
+  # Returns true if displaying a single error
+  def single_error?
+    has_errors? && @errors.length == 1
+  end
 
-    # Returns true if displaying multiple errors
-    def multiple_errors?
-      has_errors? && @errors.length > 1
-    end
+  # Returns true if displaying multiple errors
+  def multiple_errors?
+    has_errors? && @errors.length > 1
+  end
 
-    # Returns error message from error object (supports Hash or String)
-    def error_message(error)
-      error.is_a?(Hash) ? error[:message] : error
-    end
+  # Returns error message from error object (supports Hash or String)
+  def error_message(error)
+    error.is_a?(Hash) ? error[:message] : error
   end
 end

data/app/behaviors/ui/field_group_behavior.rb

@@ -1,26 +1,24 @@
 # frozen_string_literal: true
 
-module UI
-  # FieldGroupBehavior
-  #
-  # Shared behavior for FieldGroup component across ERB, ViewComponent, and Phlex implementations.
-  # FieldGroup is a layout wrapper that stacks Field components.
-  module FieldGroupBehavior
-    # Returns HTML attributes for the field group wrapper element
-    def field_group_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        "data-slot": "field-group",
-        class: field_group_classes
-      }.merge(attributes_value).compact
-    end
+# FieldGroupBehavior
+#
+# Shared behavior for FieldGroup component across ERB, ViewComponent, and Phlex implementations.
+# FieldGroup is a layout wrapper that stacks Field components.
+module UI::FieldGroupBehavior
+  # Returns HTML attributes for the field group wrapper element
+  def field_group_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      "data-slot": "field-group",
+      class: field_group_classes
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the field group
-    def field_group_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4"
+  # Returns combined CSS classes for the field group
+  def field_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4"
 
-      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/field_label_behavior.rb

@@ -1,27 +1,25 @@
 # frozen_string_literal: true
 
-module UI
-  # FieldLabelBehavior
-  #
-  # Shared behavior for FieldLabel component across ERB, ViewComponent, and Phlex implementations.
-  # FieldLabel provides styled labels for form fields with disability states.
-  module FieldLabelBehavior
-    # Returns HTML attributes for the field label element
-    def field_label_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        for: @for_id,
-        "data-slot": "field-label",
-        class: field_label_classes
-      }.merge(attributes_value).compact
-    end
+# FieldLabelBehavior
+#
+# Shared behavior for FieldLabel component across ERB, ViewComponent, and Phlex implementations.
+# FieldLabel provides styled labels for form fields with disability states.
+module UI::FieldLabelBehavior
+  # Returns HTML attributes for the field label element
+  def field_label_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      for: @for_id,
+      "data-slot": "field-label",
+      class: field_label_classes
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the field label
-    def field_label_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10"
+  # Returns combined CSS classes for the field label
+  def field_label_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10"
 
-      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end