fernandes-ui 0.1.0

data/app/helpers/ui/popover_content_behavior.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# PopoverContentBehavior
+#
+# Shared behavior for PopoverContent component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+module UI::PopoverContentBehavior
+  # Returns HTML attributes for the popover content element
+  def popover_content_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: popover_content_classes,
+      data: popover_content_data_attributes
+    }.merge(attributes_value)
+  end
+
+  # Returns combined CSS classes for the popover content
+  def popover_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      popover_content_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the popover content
+  def popover_content_data_attributes
+    {
+      ui__popover_target: "content",
+      state: "closed",
+    }
+  end
+
+  private
+
+  # Base classes from shadcn/ui - exact match
+  # Note: Positioning classes like origin-(--ui-popover-content-transform-origin)
+  # will be handled by our Stimulus controller for positioning
+  def popover_content_base_classes
+    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:invisible data-[state=open]:visible data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none absolute top-0 left-0 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden"
+  end
+
+  # Calculate placement value from side and align
+  def placement_value
+    if @align == "center"
+      @side
+    else
+      "#{@side}-#{@align}"
+    end
+  end
+end

data/app/helpers/ui/popover_trigger_behavior.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# PopoverTriggerBehavior
+#
+# Shared behavior for PopoverTrigger component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+module UI::PopoverTriggerBehavior
+  # Returns HTML attributes for the popover trigger element
+  def popover_trigger_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: popover_trigger_classes,
+      data: { ui__popover_target: "trigger" }
+    }.merge(attributes_value)
+  end
+
+  # Returns combined CSS classes for the popover trigger
+  def popover_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      popover_trigger_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes applied to all popover triggers - inline flex for proper alignment
+  def popover_trigger_base_classes
+    "inline-flex"
+  end
+end

data/app/helpers/ui/scroll_area_behavior.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaBehavior
+#
+# Shared behavior for ScrollArea root across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaBehavior
+  # Returns HTML attributes for the scroll area root element
+  def scroll_area_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_classes,
+      dir: "ltr",
+      style: "position: relative; --ui-scroll-area-corner-width: 0px; --ui-scroll-area-corner-height: 0px;",
+      data: {
+        slot: "scroll-area"
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for scroll area root
+  def scroll_area_base_classes
+    "relative"
+  end
+end

data/app/helpers/ui/scroll_area_corner_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaCornerBehavior
+#
+# Shared behavior for ScrollArea corner across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaCornerBehavior
+  # Returns HTML attributes for the corner element
+  def scroll_area_corner_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_corner_classes,
+      data: {
+        slot: "scroll-area-corner"
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_corner_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_corner_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for corner
+  def scroll_area_corner_base_classes
+    "absolute right-0 bottom-0"
+  end
+end

data/app/helpers/ui/scroll_area_scrollbar_behavior.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaScrollbarBehavior
+#
+# Shared behavior for ScrollArea scrollbar across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaScrollbarBehavior
+  # Returns HTML attributes for the scrollbar element
+  def scroll_area_scrollbar_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    orientation_value = respond_to?(:orientation, true) ? orientation : @orientation
+
+    {
+      class: scroll_area_scrollbar_classes,
+      data: {
+        slot: "scroll-area-scrollbar",
+        orientation: orientation_value
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_scrollbar_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    orientation_value = respond_to?(:orientation, true) ? orientation : @orientation
+
+    TailwindMerge::Merger.new.merge([
+      scroll_area_scrollbar_base_classes,
+      scroll_area_scrollbar_orientation_classes(orientation_value),
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for scrollbar
+  def scroll_area_scrollbar_base_classes
+    "absolute flex touch-none p-px transition-colors select-none overflow-hidden rounded-sm"
+  end
+
+  # Orientation-specific classes
+  def scroll_area_scrollbar_orientation_classes(orientation)
+    case orientation
+    when "horizontal"
+      "bottom-0 left-0 right-0 h-2.5 flex-col border-t border-t-transparent"
+    else # vertical (default)
+      "right-0.5 top-0.5 bottom-0.5 w-2.5 border-l border-l-transparent"
+    end
+  end
+end

data/app/helpers/ui/scroll_area_thumb_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaThumbBehavior
+#
+# Shared behavior for ScrollArea thumb across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaThumbBehavior
+  # Returns HTML attributes for the thumb element
+  def scroll_area_thumb_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_thumb_classes,
+      data: {
+        slot: "scroll-area-thumb"
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_thumb_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_thumb_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for thumb
+  def scroll_area_thumb_base_classes
+    "bg-border relative flex-1 rounded-full"
+  end
+end

data/app/helpers/ui/scroll_area_viewport_behavior.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaViewportBehavior
+#
+# Shared behavior for ScrollArea viewport across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaViewportBehavior
+  # Returns HTML attributes for the viewport element
+  def scroll_area_viewport_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_viewport_classes,
+      tabindex: 0,
+      data: {
+        slot: "scroll-area-viewport",
+        ui_scroll_area_viewport: true
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_viewport_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_viewport_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for viewport
+  def scroll_area_viewport_base_classes
+    "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:ring-ring/50"
+  end
+end

data/app/helpers/ui/select_behavior.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+# UI::SelectBehavior
+#
+# Shared behavior for Select component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent size styling and HTML attribute generation.
+module UI::SelectBehavior
+  # Returns HTML attributes for the select element
+    def select_html_attributes
+      data_attrs = {
+        controller: "ui--select",
+        ui__select_open_value: "false"
+      }
+
+      # Add value if provided
+      if @value.present?
+        data_attrs[:ui__select_value_value] = @value.to_s
+      end
+
+      attrs = {
+        class: select_classes,
+        data: data_attrs
+      }
+
+      # Add data-placeholder attribute if there's a placeholder and no selected value
+      if @placeholder.present? && @selected.nil?
+        attrs[:"data-placeholder"] = "true"
+      end
+
+      attrs.compact
+    end
+
+    # Returns combined CSS classes for the select
+    def select_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_base_classes,
+        select_size_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes applied to all selects
+    # The select container is just a wrapper for Stimulus controller
+    # All visual styling is on the trigger button
+    # h-fit prevents wrapper from expanding to include absolutely positioned content
+    def select_base_classes
+      "relative h-fit"
+    end
+
+    # Size-specific classes based on @size
+    # No size classes needed on container, they go on trigger
+    def select_size_classes
+      ""
+    end
+
+    # Renders options for the select element
+    # Handles both array format [label, value] and hash format { label: x, value: y }
+    def render_options
+      return "" if @options.nil?
+
+      @options.map do |option|
+        label, value = extract_option_values(option)
+        selected = @selected.to_s == value.to_s ? "selected" : nil
+
+        { label: label, value: value, selected: selected }
+      end
+    end
+
+    # Extracts label and value from different option formats
+    def extract_option_values(option)
+      if option.is_a?(Array)
+        [option[0], option[1]]
+      elsif option.is_a?(Hash)
+        label = option[:label] || option["label"]
+        value = option[:value] || option["value"]
+        [label, value]
+      else
+        [option, option]
+      end
+    end
+end

data/app/helpers/ui/select_content_behavior.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# UI::SelectContentBehavior
+#
+# Shared behavior for Select dropdown content across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectContentBehavior
+    # Returns HTML attributes for the select content element
+    def select_content_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_content_classes,
+        data: {
+          ui__select_target: "content",
+          state: "closed",
+          slot: "select-content"
+        },
+        role: "listbox",
+        # CSS variables for positioning (set by JavaScript)
+        style: "box-sizing: border-box; display: flex; flex-direction: column; outline: none;"
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_content_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_content_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select content dropdown
+    # FIXED: overflow-x-hidden overflow-y-auto instead of overflow-hidden
+    # FIXED: removed data-[state=closed]:hidden, use invisible pattern
+    # ADDED: max-h, origin, and translate classes for proper positioning
+    def select_content_base_classes
+      "absolute z-50 flex min-w-[8rem] flex-col overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=closed]:invisible data-[state=open]:visible"
+    end
+  end

data/app/helpers/ui/select_group_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# UI::SelectGroupBehavior
+#
+# Shared behavior for Select options group across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectGroupBehavior
+    # Returns HTML attributes for the select group element
+    def select_group_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_group_classes,
+        role: "group",
+        data: {
+          slot: "select-group" # ADDED: data-slot attribute
+        }
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_group_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_group_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select group
+    def select_group_base_classes
+      "w-full"
+    end
+  end

data/app/helpers/ui/select_item_behavior.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+# UI::SelectItemBehavior
+#
+# Shared behavior for Individual select option across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectItemBehavior
+    # Returns HTML attributes for the select item element
+    def select_item_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      attrs = {
+        class: select_item_classes,
+        role: "option",
+        "aria-selected": "false",
+        data: {
+          ui__select_target: "item",
+          action: "click->ui--select#selectItem mouseenter->ui--select#handleItemMouseEnter mouseleave->ui--select#handleItemMouseLeave",
+          value: @value,
+          slot: "select-item" # ADDED: data-slot attribute
+        }
+      }
+
+      # Add disabled state if specified
+      if @disabled
+        attrs[:data][:disabled] = "true"
+        attrs[:"aria-disabled"] = "true"
+        attrs[:data][:state] = "disabled"
+      end
+
+      attrs.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_item_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_item_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select item
+    def select_item_base_classes
+      "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+    end
+  end

data/app/helpers/ui/select_label_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# UI::SelectLabelBehavior
+#
+# Shared behavior for Select group label across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectLabelBehavior
+    # Returns HTML attributes for the select label element
+    def select_label_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_label_classes,
+        data: {
+          slot: "select-label" # ADDED: data-slot attribute
+        }
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_label_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_label_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select label
+    def select_label_base_classes
+      "px-2 py-1.5 text-xs text-muted-foreground"
+    end
+  end

data/app/helpers/ui/select_scroll_down_button_behavior.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# UI::SelectScrollDownButtonBehavior
+#
+# Shared behavior for Select scroll down button across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectScrollDownButtonBehavior
+    # Returns HTML attributes for the select scroll down button element
+    def select_scroll_down_button_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_scroll_down_button_classes,
+        "aria-hidden": "true",
+        # FIXED: Removed display: flex - visibility controlled by JavaScript/aria-hidden
+        # ADDED: flex-shrink: 0 as per shadcn implementation
+        style: "flex-shrink: 0;",
+        data: select_scroll_down_button_data_attributes
+      }.merge(attributes_value || {})
+    end
+
+    # Returns data attributes for Stimulus
+    def select_scroll_down_button_data_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      base_data = {
+        ui__select_target: "scrollDownButton",
+        action: "mouseenter->ui--select#scrollDown mouseleave->ui--select#stopScroll",
+        slot: "select-scroll-down-button" # ADDED: data-slot attribute
+      }
+
+      (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+    end
+
+    # Returns combined CSS classes
+    def select_scroll_down_button_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_scroll_down_button_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select scroll down button
+    # FIXED: Removed absolute positioning (absolute bottom-0 left-0 right-0 z-10)
+    # FIXED: Removed hover:bg-accent bg-popover (not in shadcn)
+    # Now matches shadcn structure: simple flex layout
+    def select_scroll_down_button_base_classes
+      "flex cursor-default items-center justify-center py-1"
+    end
+  end

data/app/helpers/ui/select_scroll_up_button_behavior.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# UI::SelectScrollUpButtonBehavior
+#
+# Shared behavior for Select scroll up button across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectScrollUpButtonBehavior
+    # Returns HTML attributes for the select scroll up button element
+    def select_scroll_up_button_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_scroll_up_button_classes,
+        "aria-hidden": "true",
+        # FIXED: Removed display: none - visibility controlled by JavaScript/aria-hidden
+        # ADDED: flex-shrink: 0 as per shadcn implementation
+        style: "flex-shrink: 0;",
+        data: select_scroll_up_button_data_attributes
+      }.merge(attributes_value || {})
+    end
+
+    # Returns data attributes for Stimulus
+    def select_scroll_up_button_data_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      base_data = {
+        ui__select_target: "scrollUpButton",
+        action: "mouseenter->ui--select#scrollUp mouseleave->ui--select#stopScroll",
+        slot: "select-scroll-up-button" # ADDED: data-slot attribute
+      }
+
+      (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+    end
+
+    # Returns combined CSS classes
+    def select_scroll_up_button_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_scroll_up_button_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select scroll up button
+    # FIXED: Removed absolute positioning (absolute top-0 left-0 right-0 z-10)
+    # FIXED: Removed hover:bg-accent bg-popover (not in shadcn)
+    # Now matches shadcn structure: simple flex layout
+    def select_scroll_up_button_base_classes
+      "flex cursor-default items-center justify-center py-1"
+    end
+  end

data/app/helpers/ui/select_trigger_behavior.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# UI::SelectTriggerBehavior
+#
+# Shared behavior for Select trigger button across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectTriggerBehavior
+    # Returns HTML attributes for the select trigger element
+    def select_trigger_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": "false",
+        "aria-haspopup": "listbox",
+        class: select_trigger_classes,
+        data: {
+          ui__select_target: "trigger",
+          action: "click->ui--select#toggle",
+          slot: "select-trigger"
+        }
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_trigger_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_trigger_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select trigger
+    def select_trigger_base_classes
+      "inline-flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background transition-[color,box-shadow] outline-none focus:ring-1 focus:ring-ring focus-visible:ring-[3px] focus-visible:border-ring focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22none%22%20stroke%3d%22currentColor%22%20stroke-width%3d%222%22%20stroke-linecap%3d%22round%22%20stroke-linejoin%3d%22round%22%3e%3cpath%20d%3d%22m6%209%206%206%206-6%22%2f%3e%3c%2fsvg%3e')] bg-[length:1rem] bg-[right_0.75rem_center] bg-no-repeat pr-10 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 data-[placeholder]:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+    end
+  end