senren-ui 0.1.5 → 0.1.6

data/lib/senren/rails/component_copier.rb

@@ -9,6 +9,47 @@ module Senren
     # Copies component files from the gem's templates/ tree into the host
     # Rails app, and updates .senren/installed_components.yml.
     class ComponentCopier
+      class MissingTemplate < StandardError; end
+
+      INSTALL_GENERATOR_TEMPLATES = File.expand_path(
+        '../../generators/senren/install/templates', __dir__
+      ).freeze
+      BASE_COMPONENT_TEMPLATE = File.join(INSTALL_GENERATOR_TEMPLATES, 'base_component.rb.tt').freeze
+      BASE_URL_HELPER_PATCH = <<~RUBY
+
+        # Added by senren:add for compatibility with URL-aware component templates.
+        require 'uri'
+
+        module Senren
+          class BaseComponent
+            SAFE_URL_PROTOCOLS = %w[http https mailto tel].freeze unless const_defined?(:SAFE_URL_PROTOCOLS)
+            SAFE_MEDIA_URL_PROTOCOLS = %w[http https].freeze unless const_defined?(:SAFE_MEDIA_URL_PROTOCOLS)
+
+            private
+
+            def safe_url(value, fallback: '#', protocols: SAFE_URL_PROTOCOLS)
+              url = value.to_s.strip
+              return fallback if url.empty?
+              return url if url.start_with?('#')
+              return url if url.start_with?('/') && !url.start_with?('//')
+
+              uri = URI.parse(url)
+              return url if uri.scheme && Array(protocols).map(&:to_s).include?(uri.scheme.downcase)
+              return fallback if uri.host
+              return url unless uri.scheme
+
+              fallback
+            rescue URI::InvalidURIError
+              fallback
+            end
+
+            def safe_media_url(value, fallback: nil)
+              safe_url(value, fallback: fallback, protocols: SAFE_MEDIA_URL_PROTOCOLS)
+            end
+          end
+        end
+      RUBY
+
       attr_reader :registry, :paths, :stdout
 
       def initialize(registry: Registry.load!, paths: HostPaths.new, stdout: $stdout)
@@ -22,6 +63,7 @@ module Senren
       def install(component_names, client_override: nil, force: false)
         wanted = registry.dependencies(*component_names)
         paths.ensure_dirs!
+        ensure_base_component_url_helpers!
 
         wanted.each do |name|
           comp = registry.fetch(name)
@@ -34,6 +76,24 @@ module Senren
 
       private
 
+      def ensure_base_component_url_helpers!
+        if paths.base_component_path.exist?
+          return if base_component_has_url_helpers?
+
+          File.open(paths.base_component_path, 'a') { |file| file.write(BASE_URL_HELPER_PATCH) }
+          stdout.puts "  update #{paths.base_component_path} (url helpers)"
+          return
+        end
+
+        copy_file(BASE_COMPONENT_TEMPLATE, paths.base_component_path, force: false, label: 'base_component.rb')
+      end
+
+      def base_component_has_url_helpers?
+        source = paths.base_component_path.read
+
+        source.include?('def safe_url') && source.include?('def safe_media_url')
+      end
+
       def install_component(comp, client_override:, force:)
         effective_client = effective_client_for(comp, client_override)
 
@@ -59,20 +119,29 @@ module Senren
         # app/components/senren/<name>_component.html.erb     -> templates/components/<name>/<name>_component.html.erb
         # app/javascript/controllers/senren/<name>_controller.js -> templates/controllers/<name>_controller.js
         base = File.basename(relative)
-        if relative.include?('app/components/senren/')
+        if component_source_path?(comp, relative)
           File.join(Senren::Rails.templates_root, 'components', comp.name, base)
-        elsif relative.include?('app/javascript/controllers/senren/')
+        elsif controller_source_path?(comp, relative)
           File.join(Senren::Rails.templates_root, 'controllers', base)
         else
           raise "ComponentCopier: do not know how to map #{relative.inspect}"
         end
       end
 
+      def component_source_path?(comp, relative)
+        [
+          "app/components/senren/#{comp.name}_component.rb",
+          "app/components/senren/#{comp.name}_component.html.erb"
+        ].include?(relative)
+      end
+
+      def controller_source_path?(comp, relative)
+        relative == "app/javascript/controllers/senren/#{comp.name}_controller.js"
+      end
+
       def copy_file(src, dest, force:, label:)
-        unless File.exist?(src)
-          stdout.puts "  warn  missing template: #{src} (#{label})"
-          return
-        end
+        raise MissingTemplate, "Missing component template: #{src} (#{label})" unless File.exist?(src)
+
         if File.exist?(dest) && !force
           stdout.puts "  skip  #{dest} (already exists)"
           return

data/lib/senren/rails/component_installer.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require 'senren/rails/agent_rules_writer'
+require 'senren/rails/component_copier'
+require 'senren/rails/host_paths'
+require 'senren/rails/registry'
+require 'senren/rails/skill_writer'
+
+module Senren
+  module Rails
+    # Installs one or more registered Senren components into the host app and
+    # refreshes the generated guidance files afterward.
+    class ComponentInstaller
+      USAGE = 'Usage: bin/rails senren:add NAME [NAME...] [--client | --no-client]'
+
+      attr_reader :registry, :paths, :stdout
+
+      def self.normalize_names(names)
+        Array(names)
+          .flatten
+          .flat_map { |entry| entry.to_s.split(/[,\s]+/) }
+          .reject { |entry| entry.empty? || entry.start_with?('-') }
+          .uniq
+      end
+
+      def initialize(registry: Registry.load!, paths: HostPaths.new, stdout: $stdout)
+        @registry = registry
+        @paths    = paths
+        @stdout   = stdout
+      end
+
+      def install(names:, client_override: nil, force: false)
+        normalized_names = self.class.normalize_names(names)
+        raise ArgumentError, USAGE if normalized_names.empty?
+
+        installed = ComponentCopier.new(registry: registry, paths: paths, stdout: stdout)
+                                   .install(normalized_names, client_override: client_override, force: force)
+
+        SkillWriter.new(registry: registry, paths: paths).sync!
+        AgentRulesWriter.new(registry: registry, paths: paths).sync!
+
+        stdout.puts "Installed: #{installed.join(', ')}"
+        installed
+      end
+    end
+  end
+end

data/lib/senren/rails/installer.rb

@@ -73,6 +73,7 @@ module Senren
 
             bin/rails senren:add button card badge alert
             bin/rails senren:add dialog dropdown_menu
+            bundle exec rails senren:add form input textarea
             bin/rails senren:agents:sync
             bin/rails senren:doctor
 

data/lib/senren/rails/registry.rb

@@ -3,23 +3,16 @@ require 'yaml'
 module Senren
   module Rails
     # Loads, validates, and queries the Senren component registry.
-    #
-    #   reg = Senren::Rails::Registry.load!
-    #   reg.find("button")           # => Component struct
-    #   reg.dependencies("dialog")    # => [<button>]
-    #   reg.group("forms")            # => [<form>, <input>, ...]
     class Registry
       include Enumerable
 
       REQUIRED_KEYS = %w[category client can_have_client files depends_on pairs_with variants accessibility ai].freeze
+      OPTIONAL_KEYS = %w[controller stub].freeze
+      ALLOWED_KEYS = (REQUIRED_KEYS + OPTIONAL_KEYS).freeze
       VALID_CATEGORIES = %w[actions forms overlays navigation layout data saas rich].freeze
 
-      Component = Struct.new(
-        :name, :category, :client, :can_have_client, :controller, :stub,
-        :files, :depends_on, :pairs_with, :variants, :accessibility,
-        :use_for, :avoid,
-        keyword_init: true
-      ) do
+      Component = Struct.new(:name, :category, :client, :can_have_client, :controller, :stub, :files, :depends_on,
+                             :pairs_with, :variants, :accessibility, :use_for, :avoid, keyword_init: true) do
         def stub? = stub == true
         def client? = client == true
 
@@ -43,6 +36,7 @@ module Senren
       end
 
       def initialize(components_yaml, groups_yaml, recipes_yaml)
+        @raw_components = (components_yaml || {}).fetch('components', {})
         @components = parse_components(components_yaml)
         @groups     = (groups_yaml || {}).fetch('groups', [])
         @recipes    = (recipes_yaml || {}).fetch('recipes', {})
@@ -57,21 +51,11 @@ module Senren
                                            "Known: #{@components.keys.sort.join(', ')}"
       end
 
-      def all
-        @components.values
-      end
-
-      def each(&)
-        all.each(&)
-      end
+      def all = @components.values
+      def each(&) = all.each(&)
+      alias find_each each
 
-      def find_each(&)
-        each(&)
-      end
-
-      def names
-        @components.keys
-      end
+      def names = @components.keys
 
       def group(category_id)
         @components.values.select { |c| c.category == category_id.to_s }
@@ -118,12 +102,48 @@ module Senren
 
       def validate_components(errors)
         @components.each do |name, comp|
-          errors << "#{name}: invalid category #{comp.category.inspect}" unless VALID_CATEGORIES.include?(comp.category)
-          comp.depends_on.each do |dep|
-            errors << "#{name}: depends_on unknown component #{dep.inspect}" unless @components.key?(dep)
-          end
-          errors << "#{name}: client=true but can_have_client=false" if comp.client && !comp.can_have_client
-          errors << "#{name}: client=true requires a controller identifier" if comp.client && comp.controller.nil?
+          validate_component(name, comp, errors)
+        end
+      end
+
+      def validate_component(name, comp, errors)
+        validate_component_keys(name, errors)
+        validate_component_category(name, comp, errors)
+        validate_component_dependencies(name, comp, errors)
+        validate_component_client_contract(name, comp, errors)
+        validate_component_file_paths(name, comp, errors)
+      end
+
+      def validate_component_keys(name, errors)
+        extra_keys = @raw_components.fetch(name).keys - ALLOWED_KEYS
+        errors << "#{name}: unknown keys #{extra_keys.sort.join(', ')}" if extra_keys.any?
+      end
+
+      def validate_component_category(name, comp, errors)
+        return if VALID_CATEGORIES.include?(comp.category)
+
+        errors << "#{name}: invalid category #{comp.category.inspect}"
+      end
+
+      def validate_component_dependencies(name, comp, errors)
+        comp.depends_on.each do |dep|
+          errors << "#{name}: depends_on unknown component #{dep.inspect}" unless @components.key?(dep)
+        end
+      end
+
+      def validate_component_client_contract(name, comp, errors)
+        errors << "#{name}: client=true but can_have_client=false" if comp.client && !comp.can_have_client
+        errors << "#{name}: client=true requires a controller identifier" if comp.client && comp.controller.nil?
+        return unless comp.client && !controller_file?(name, comp)
+
+        errors << "#{name}: client=true requires a Stimulus controller file"
+      end
+
+      def validate_component_file_paths(name, comp, errors)
+        comp.files.each do |path|
+          next if allowed_component_file?(name, path)
+
+          errors << "#{name}: invalid file path #{path.inspect}"
         end
       end
 
@@ -156,6 +176,18 @@ module Senren
           ).freeze
         end
       end
+
+      def controller_file?(name, comp)
+        comp.files.include?("app/javascript/controllers/senren/#{name}_controller.js")
+      end
+
+      def allowed_component_file?(name, path)
+        [
+          "app/components/senren/#{name}_component.rb",
+          "app/components/senren/#{name}_component.html.erb",
+          "app/javascript/controllers/senren/#{name}_controller.js"
+        ].include?(path)
+      end
     end
   end
 end

data/lib/senren/rails/skill_writer.rb

@@ -50,7 +50,7 @@ module Senren
 
       def render(installed_names)
         if installed_names.empty?
-          return '_No Senren components installed yet. Run `bin/rails senren:add <name>...` to install components._'
+          return '_No Senren components installed yet. Run `bin/rails senren:add button` to install components._'
         end
 
         lines = []

data/lib/senren/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Senren
   module Rails
-    VERSION = '0.1.5'
+    VERSION = '0.1.6'
   end
 end

data/lib/senren/rails.rb

@@ -8,6 +8,7 @@ module Senren
 
     autoload :Registry,         'senren/rails/registry'
     autoload :ComponentCopier,  'senren/rails/component_copier'
+    autoload :ComponentInstaller, 'senren/rails/component_installer'
     autoload :SkillWriter,      'senren/rails/skill_writer'
     autoload :AgentRulesWriter, 'senren/rails/agent_rules_writer'
     autoload :LlmsWriter,       'senren/rails/llms_writer'

data/lib/tasks/senren.rake

@@ -3,22 +3,19 @@
 require 'senren/rails'
 
 namespace :senren do
-  desc 'Install one or more Senren components: rake senren:add[button,dialog] or bin/rails senren:add button dialog'
-  task :add, [:names] => :environment do |_t, args|
+  desc 'Install one or more Senren components. Preferred: bin/rails senren:add button dialog. ' \
+       "Legacy: bin/rails 'senren:add[button,dialog]'"
+  task :add, [:names] do |_t, args|
     names = parse_names(args)
     options = parse_options
-    abort 'Usage: bin/rails senren:add NAME [NAME...] [--client | --no-client]' if names.empty?
 
-    paths    = Senren::Rails::HostPaths.new
-    registry = Senren::Rails::Registry.load!
-    copier   = Senren::Rails::ComponentCopier.new(registry: registry, paths: paths)
-
-    installed = copier.install(names, client_override: options[:client_override], force: options[:force])
-
-    Senren::Rails::SkillWriter.new(registry: registry, paths: paths).sync!
-    Senren::Rails::AgentRulesWriter.new(registry: registry, paths: paths).sync!
-
-    puts "Installed: #{installed.join(', ')}"
+    Senren::Rails::ComponentInstaller.new.install(
+      names: names,
+      client_override: options[:client_override],
+      force: options[:force]
+    )
+  rescue ArgumentError => e
+    abort e.message
   end
 
   namespace :skill do
@@ -67,11 +64,7 @@ def parse_names(args)
   raw.concat(args.extras)
   raw << args[:names] if args[:names]
   raw.concat(ARGV.drop_while { |a| !a.start_with?('senren:') }.drop(1))
-  raw
-    .flatten
-    .flat_map { |s| s.to_s.split(/[,\s]+/) }
-    .reject { |s| s.empty? || s.start_with?('-') }
-    .uniq
+  Senren::Rails::ComponentInstaller.normalize_names(raw)
 end
 
 def parse_options

data/templates/components/billing_plan_card/billing_plan_card_component.html.erb

@@ -22,7 +22,7 @@
       </ul>
     <% end %>
     <% if cta_label.present? %>
-      <%= link_to cta_label, cta_href || "#", class: "mt-6 inline-flex h-10 w-full items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90" %>
+      <%= link_to cta_label, safe_url(cta_href), class: "mt-6 inline-flex h-10 w-full items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90" %>
     <% end %>
   <% end %>
 <% end %>

data/templates/components/breadcrumb/breadcrumb_component.rb

@@ -19,10 +19,10 @@ module Senren
     def normalize_items(items)
       Array(items).map do |item|
         if item.is_a?(Hash)
-          { label: item.fetch(:label) { item.fetch('label') }, href: item[:href] || item['href'] }
+          { label: item.fetch(:label) { item.fetch('label') }, href: safe_url(item[:href] || item['href'], fallback: nil) }
         else
           label, href = item
-          { label: label, href: href }
+          { label: label, href: safe_url(href, fallback: nil) }
         end
       end
     end

data/templates/components/button/button_component.html.erb

@@ -1,6 +1,6 @@
 <% base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-(--senren-radius) font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed" %>
 <% if as == :a %>
-  <%= tag.a content, **root_attrs(base, href: href) %>
+  <%= tag.a content, **root_attrs(base, href: safe_url(href)) %>
 <% else %>
   <%= tag.button content, **root_attrs(base, type: type) %>
 <% end %>

data/templates/components/carousel/carousel_component.rb

@@ -21,7 +21,7 @@ module Senren
           {
             title: slide[:title] || slide['title'],
             description: slide[:description] || slide['description'],
-            image_url: slide[:image_url] || slide['image_url'],
+            image_url: safe_media_url(slide[:image_url] || slide['image_url']),
             alt: slide[:alt] || slide['alt'],
             badge: slide[:badge] || slide['badge']
           }

data/templates/components/command/command_component.rb

@@ -29,7 +29,7 @@ module Senren
           id: data[:id] || data['id'] || "#{dom_id}-option-#{index}",
           label: label,
           description: description,
-          href: data[:href] || data['href'],
+          href: safe_url(data[:href] || data['href'], fallback: nil),
           keywords: [label, description, keywords].flatten.compact.join(' ')
         }
       end

data/templates/components/dropdown_menu/dropdown_menu_component.rb

@@ -12,23 +12,26 @@ module Senren
       super(variant: :default, size: :md, class_name: class_name, **html)
     end
 
-    class ItemTag < ViewComponent::Base
-      def initialize(href: nil, method: nil, destructive: false, **opts)
+    class ItemTag < BaseComponent
+      VARIANTS = { default: '' }.freeze
+      SIZES = { md: '' }.freeze
+      ITEM_ACTION = 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey'
+
+      def initialize(href: nil, method: nil, destructive: false, class_name: nil, **)
+        super(variant: :default, size: :md, class_name: class_name, **)
         @href = href
         @method = method
         @destructive = destructive
-        @opts = opts
       end
 
       def call
         klass = 'block w-full text-left px-3 py-2 text-sm rounded-sm hover:bg-[hsl(var(--senren-accent))] focus:bg-[hsl(var(--senren-accent))] outline-none cursor-pointer'
+        klass += " #{class_name}" if class_name.present?
         klass += ' text-[hsl(var(--senren-destructive))]' if @destructive
         if @href
-          link_to(content, @href, role: 'menuitem', method: @method, class: klass,
-                                  data: { action: 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey' })
+          link_to(content, safe_url(@href), role: 'menuitem', method: @method, class: klass, data: { action: ITEM_ACTION }, **html_attrs)
         else
-          tag.button(content, type: 'button', role: 'menuitem', class: klass,
-                              data: { action: 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey' }, **@opts)
+          tag.button(content, type: 'button', role: 'menuitem', class: klass, data: { action: ITEM_ACTION }, **html_attrs)
         end
       end
     end

data/templates/components/form/form_component.html.erb

@@ -1,3 +1,10 @@
-<%= form_with(model: model, url: url, method: method, multipart: multipart, **root_attrs("space-y-4")) do |f| %>
+<%
+  form_opts = {}
+  form_opts[:model]     = model     if model
+  form_opts[:url]       = url       if url
+  form_opts[:method]    = method    if method
+  form_opts[:multipart] = multipart if multipart
+%>
+<%= form_with(**form_opts, **root_attrs("space-y-4")) do |f| %>
   <%= content || capture(f, &Proc.new) %>
 <% end %>

data/templates/components/form/form_component.rb

@@ -5,7 +5,9 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES    = { md: '' }.freeze
 
-    def initialize(model: nil, url: nil, method: :post, multipart: false, class_name: nil, **html)
+    # method: defaults to nil so Rails can infer PATCH for persisted models.
+    # Pass method: :post / :patch / :delete explicitly only when needed.
+    def initialize(model: nil, url: nil, method: nil, multipart: false, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @model = model
       @url   = url

data/templates/components/input/input_component.html.erb

@@ -1 +1 @@
-<%= tag.input(**root_attrs("flex w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50", id: id, name: name, type: type, value: value, placeholder: placeholder, "aria-invalid": variant == :error)) %>
+<%= tag.input(**root_attrs(input_classes, id: id, name: name, type: type, value: value, placeholder: placeholder, "aria-invalid": variant == :error)) %>

data/templates/components/input/input_component.rb

@@ -13,6 +13,17 @@ module Senren
       lg: 'h-12 text-base px-4'
     }.freeze
 
+    # Base classes shared by all input types.
+    # NOTE: `flex` is intentionally omitted — it breaks browser-native
+    #       date/datetime-local/time picker UI on some engines.
+    BASE_CLASSES = 'w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50'
+
+    # File-type inputs get a styled button instead of unstyled browser defaults.
+    FILE_CLASSES = 'file:mr-3 file:h-full file:cursor-pointer file:border-0 file:border-r file:border-solid file:border-[hsl(var(--senren-border))] file:bg-[hsl(var(--senren-muted))] file:px-3 file:text-sm file:font-medium file:text-[hsl(var(--senren-foreground))]'
+
+    # Non-file inputs get standard font styling for the placeholder.
+    TEXT_FILE_CLASSES = 'file:border-0 file:bg-transparent file:text-sm file:font-medium'
+
     def initialize(name:, type: 'text', value: nil, placeholder: nil, id: nil, variant: :default, size: :md,
                    class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
@@ -24,5 +35,13 @@ module Senren
     end
 
     attr_reader :name, :type, :value, :placeholder, :id
+
+    def input_classes
+      file_type? ? "#{BASE_CLASSES} #{FILE_CLASSES}" : "#{BASE_CLASSES} #{TEXT_FILE_CLASSES}"
+    end
+
+    def file_type?
+      type.to_s == 'file'
+    end
   end
 end

data/templates/components/label/label_component.html.erb

@@ -1,4 +1,3 @@
 <%= tag.label(**root_attrs("text-sm font-medium leading-none text-[hsl(var(--senren-foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70", for: for_field)) do %>
-  <%= content %>
-  <% if variant == :required %><span class="text-[hsl(var(--senren-destructive))]" aria-hidden="true"> *</span><% end %>
+  <%= label_text %><% if variant == :required %><span class="text-[hsl(var(--senren-destructive))]" aria-hidden="true"> *</span><% end %>
 <% end %>

data/templates/components/label/label_component.rb

@@ -9,11 +9,21 @@ module Senren
 
     SIZES = { md: '' }.freeze
 
-    def initialize(for_field:, variant: :default, class_name: nil, **html)
+    # Accept optional text: param as fallback for inline block syntax.
+    # This ensures both patterns work reliably:
+    #   render(Senren::LabelComponent.new(for_field: "name", text: "Name"))
+    #   render(Senren::LabelComponent.new(for_field: "name")) { "Name" }
+    def initialize(for_field:, text: nil, variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @for_field = for_field
+      @text = text
     end
 
-    attr_reader :for_field
+    attr_reader :for_field, :text
+
+    # Resolve label text: content block > text param > empty string
+    def label_text
+      content.presence || @text || ''
+    end
   end
 end

data/templates/components/link/link_component.html.erb

@@ -1 +1 @@
-<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: href, **external_attrs) %>
+<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: safe_url(href), **external_attrs) %>

data/templates/components/native_select/native_select_component.html.erb

@@ -1,5 +1,6 @@
-<%= tag.div(**wrapper_attrs) do %>
-  <%= tag.select(**select_attrs) do %>
+<% if native_arrow? %>
+  <%# Native mode: no wrapper div, no SVG arrow — let the browser render its own. %>
+  <%= tag.select(**root_select_attrs) do %>
     <% if prompt %>
       <option value=""><%= prompt %></option>
     <% end %>
@@ -8,7 +9,20 @@
       <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
     <% end %>
   <% end %>
-  <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 group-focus-within:rotate-180">
-    <path d="m5 8 5 5 5-5"></path>
-  </svg>
+<% else %>
+  <%# Custom arrow mode: wrapper div + positioned SVG. %>
+  <%= tag.div(class: "group relative w-full", data: { senren_component: senren_component_name }) do %>
+    <%= tag.select(**select_attrs) do %>
+      <% if prompt %>
+        <option value=""><%= prompt %></option>
+      <% end %>
+      <% options.each do |opt| %>
+        <% value, label = Array === opt ? opt : [opt, opt] %>
+        <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
+      <% end %>
+    <% end %>
+    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 group-focus-within:rotate-180">
+      <path d="m5 8 5 5 5-5"></path>
+    </svg>
+  <% end %>
 <% end %>

data/templates/components/native_select/native_select_component.rb

@@ -13,20 +13,23 @@ module Senren
       lg: 'h-12 text-base px-4'
     }.freeze
 
-    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, variant: :default, size: :md, class_name: nil,
-                   **html)
+    # native_arrow: true  → keep browser/OS native arrow (appearance-auto)
+    # native_arrow: false → use custom SVG arrow (appearance-none + SVG overlay)
+    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, native_arrow: true,
+                   variant: :default, size: :md, class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
       @name = name
       @options = options
       @selected = selected
       @id = id || name.to_s.parameterize
       @prompt = prompt
+      @native_arrow = native_arrow
     end
 
     attr_reader :name, :options, :selected, :id, :prompt
 
-    def wrapper_attrs
-      { class: 'group relative w-full', data: { senren_component: senren_component_name } }
+    def native_arrow?
+      @native_arrow
     end
 
     def select_attrs
@@ -39,9 +42,18 @@ module Senren
       )
     end
 
+    def root_select_attrs
+      attrs = select_attrs
+      data = (attrs[:data] || {}).merge(senren_component: senren_component_name)
+
+      attrs.merge(data: data)
+    end
+
     def select_classes
+      appearance = native_arrow? ? 'appearance-auto' : 'appearance-none pr-9'
       [
-        'flex w-full cursor-pointer appearance-none rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] pr-9 text-[hsl(var(--senren-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+        'w-full cursor-pointer rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+        appearance,
         self.class::VARIANTS[variant],
         self.class::SIZES[size],
         class_name,