shadcn-rails 0.1.0

data/app/components/shadcn/menubar_radio_group_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Radio Group component
+  # Group of mutually exclusive radio items
+  class MenubarRadioGroupComponent < BaseComponent
+    renders_many :items, lambda { |**options, &block|
+      MenubarRadioItemComponent.new(**options, &block)
+    }
+
+    # @param value [String] Currently selected value
+    def initialize(value: nil, **options, &block)
+      super(**options, &block)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      if items.any?
+        safe_join(items)
+      else
+        content
+      end
+    end
+
+    def group_attributes
+      attrs = {
+        class: class_name,
+        role: "group",
+        "data-value": @value
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_radio_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Radio Item component
+  # A radio button within a radio group
+  class MenubarRadioItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    renders_one :shortcut, lambda { |**options|
+      MenubarShortcutComponent.new(**options)
+    }
+
+    # @param value [String] Value of this radio item
+    # @param checked [Boolean] Whether item is selected
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(value: nil, checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @value = value
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        radio_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def radio_indicator
+      content_tag(:span, radio_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def radio_icon
+      return "" unless @checked
+
+      content_tag(:svg, circle_svg, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        stroke: "none",
+        class: "h-4 w-4"
+      })
+    end
+
+    def circle_svg
+      content_tag(:circle, "", cx: "12", cy: "12", r: "6")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemradio",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-value": @value,
+        "data-shadcn--menubar-target": "item",
+        "data-action": "click->shadcn--menubar#selectRadio"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_separator_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Separator component
+  # Visual separator between menu items
+  class MenubarSeparatorComponent < BaseComponent
+    BASE_CLASSES = "-mx-1 my-1 h-px bg-muted"
+
+    def call
+      content_tag(:div, "", separator_attributes)
+    end
+
+    private
+
+    def separator_attributes
+      {
+        class: cn(BASE_CLASSES, class_name),
+        role: "separator"
+      }
+    end
+  end
+end

data/app/components/shadcn/menubar_shortcut_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Shortcut component
+  # Displays keyboard shortcuts next to menu items
+  class MenubarShortcutComponent < BaseComponent
+    BASE_CLASSES = "ml-auto text-xs tracking-widest text-muted-foreground"
+
+    def call
+      content_tag(:span, content, shortcut_attributes)
+    end
+
+    private
+
+    def shortcut_attributes
+      {
+        class: cn(BASE_CLASSES, class_name)
+      }
+    end
+  end
+end

data/app/components/shadcn/menubar_sub_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Sub component
+  # Creates nested/submenu functionality
+  class MenubarSubComponent < BaseComponent
+    renders_one :trigger, lambda { |**options, &block|
+      MenubarSubTriggerComponent.new(**options, &block)
+    }
+    # Note: Named content_slot because 'content' is a reserved ViewComponent method
+    renders_one :content_slot, lambda { |**options|
+      MenubarSubContentComponent.new(**options)
+    }
+
+    # Alias for more intuitive API
+    alias_method :with_content, :with_content_slot
+
+    def call
+      content_tag(:div, sub_content, sub_attributes)
+    end
+
+    private
+
+    def sub_content
+      safe_join([trigger, content_slot, content].compact)
+    end
+
+    def sub_attributes
+      attrs = {
+        class: cn("relative", class_name),
+        "data-shadcn--menubar-target": "sub"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_sub_content_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Sub Content component
+  # Container for submenu items
+  class MenubarSubContentComponent < BaseComponent
+    BASE_CLASSES = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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"
+
+    renders_many :items, lambda { |**options, &block|
+      MenubarItemComponent.new(**options, &block)
+    }
+    renders_many :separators, lambda { |**options|
+      MenubarSeparatorComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, sub_content, content_attributes)
+    end
+
+    private
+
+    def sub_content
+      if items.any? || separators.any?
+        safe_join([items, separators, content].flatten.compact)
+      else
+        content
+      end
+    end
+
+    def content_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menu",
+        "aria-orientation": "vertical",
+        "data-state": "closed",
+        "data-shadcn--menubar-target": "subContent",
+        "data-action": "mouseenter->shadcn--menubar#cancelCloseSubTimer mouseleave->shadcn--menubar#startCloseSubTimer",
+        hidden: true
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_sub_trigger_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Sub Trigger component
+  # Button that opens a submenu
+  class MenubarSubTriggerComponent < BaseComponent
+    BASE_CLASSES = "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+
+    # @param inset [Boolean] Whether to add left padding
+    def initialize(inset: false, **options, &block)
+      super(**options, &block)
+      @inset = inset
+    end
+
+    def call
+      content_tag(:div, trigger_content, trigger_attributes)
+    end
+
+    private
+
+    def trigger_content
+      safe_join([content, chevron_icon])
+    end
+
+    def chevron_icon
+      content_tag(:svg, chevron_path, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "ml-auto h-4 w-4"
+      })
+    end
+
+    def chevron_path
+      content_tag(:polyline, "", points: "9 18 15 12 9 6")
+    end
+
+    def trigger_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, @inset ? "pl-8" : "", class_name),
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": "false",
+        "data-state": "closed",
+        "data-shadcn--menubar-target": "subTrigger",
+        "data-action": "mouseenter->shadcn--menubar#openSub mouseleave->shadcn--menubar#startCloseSubTimer"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_trigger_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Trigger component
+  # Button that opens the menu dropdown
+  class MenubarTriggerComponent < BaseComponent
+    BASE_CLASSES = "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+
+    def call
+      content_tag(:button, content, trigger_attributes)
+    end
+
+    private
+
+    def trigger_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": "false",
+        "data-state": "closed",
+        "data-shadcn--menubar-target": "trigger",
+        "data-action": "click->shadcn--menubar#toggle mouseenter->shadcn--menubar#hoverOpen"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/native_select_component.rb

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Native Select component for styled native HTML selects
+  # Matches shadcn/ui Native Select component
+  #
+  # @example Basic select
+  #   <%= render Shadcn::NativeSelectComponent.new(name: "country") do |select| %>
+  #     <% select.with_option(value: "", disabled: true, selected: true) { "Select a country" } %>
+  #     <% select.with_option(value: "us") { "United States" } %>
+  #     <% select.with_option(value: "uk") { "United Kingdom" } %>
+  #     <% select.with_option(value: "ca") { "Canada" } %>
+  #   <% end %>
+  #
+  # @example With optgroups
+  #   <%= render Shadcn::NativeSelectComponent.new(name: "car") do |select| %>
+  #     <% select.with_optgroup(label: "Swedish Cars") do |group| %>
+  #       <% group.with_option(value: "volvo") { "Volvo" } %>
+  #       <% group.with_option(value: "saab") { "Saab" } %>
+  #     <% end %>
+  #     <% select.with_optgroup(label: "German Cars") do |group| %>
+  #       <% group.with_option(value: "mercedes") { "Mercedes" } %>
+  #       <% group.with_option(value: "audi") { "Audi" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Disabled
+  #   <%= render Shadcn::NativeSelectComponent.new(name: "status", disabled: true) do |select| %>
+  #     <% select.with_option(value: "active") { "Active" } %>
+  #   <% end %>
+  #
+  class NativeSelectComponent < BaseComponent
+    # Select wrapper classes for positioning the chevron icon
+    WRAPPER_CLASSES = "relative"
+
+    # Native select element classes
+    SELECT_CLASSES = "h-9 w-full cursor-pointer appearance-none rounded-md border border-input bg-transparent pl-3 pr-8 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+
+    # Chevron icon classes (positioned absolutely)
+    CHEVRON_CLASSES = "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+
+    # Option slot
+    renders_many :options, "OptionComponent"
+
+    # Optgroup slot
+    renders_many :optgroups, "OptgroupComponent"
+
+    # @param name [String, nil] Select name attribute
+    # @param id [String, nil] Select ID attribute
+    # @param disabled [Boolean] Whether the select is disabled
+    # @param required [Boolean] Whether the select is required
+    def initialize(name: nil, id: nil, disabled: false, required: false, **options)
+      super(**options)
+      @name = name
+      @id = id
+      @disabled = disabled
+      @required = required
+    end
+
+    def call
+      tag.div(class: WRAPPER_CLASSES) do
+        safe_join([
+          tag.select(**select_attributes) do
+            if optgroups.any?
+              safe_join(optgroups)
+            else
+              safe_join(options)
+            end
+          end,
+          chevron_icon
+        ])
+      end
+    end
+
+    def chevron_icon
+      tag.svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: CHEVRON_CLASSES
+      ) do
+        tag.path(d: "m6 9 6 6 6-6")
+      end
+    end
+
+    private
+
+    def select_attributes
+      {
+        name: @name,
+        id: @id,
+        disabled: @disabled || nil,
+        required: @required || nil,
+        class: merge_classes(SELECT_CLASSES)
+      }.merge(html_options).merge(build_data).compact
+    end
+
+    # Option subcomponent
+    class OptionComponent < BaseComponent
+      # @param value [String] Option value
+      # @param disabled [Boolean] Whether the option is disabled
+      # @param selected [Boolean] Whether the option is selected
+      def initialize(value: nil, disabled: false, selected: false, **options)
+        super(**options)
+        @value = value
+        @disabled = disabled
+        @selected = selected
+      end
+
+      def call
+        tag.option(content, **option_attributes)
+      end
+
+      private
+
+      def option_attributes
+        {
+          value: @value,
+          disabled: @disabled || nil,
+          selected: @selected || nil
+        }.merge(html_options).merge(build_data).compact
+      end
+    end
+
+    # Optgroup subcomponent
+    class OptgroupComponent < BaseComponent
+      renders_many :options, OptionComponent
+
+      # @param label [String] Optgroup label
+      # @param disabled [Boolean] Whether the optgroup is disabled
+      def initialize(label:, disabled: false, **options)
+        super(**options)
+        @label = label
+        @disabled = disabled
+      end
+
+      def call
+        tag.optgroup(label: @label, disabled: @disabled || nil, **html_options.merge(build_data).compact) do
+          safe_join(options)
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/navigation_menu_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # NavigationMenu component
+  # Matches shadcn/ui NavigationMenu component
+  # A collection of links for navigating websites
+  #
+  # @example Basic navigation menu
+  #   <%= render Shadcn::NavigationMenuComponent.new do |nav| %>
+  #     <% nav.with_list do |list| %>
+  #       <% list.with_item do |item| %>
+  #         <% item.with_trigger { "Getting Started" } %>
+  #         <% item.with_content do %>
+  #           <ul class="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+  #             <li class="row-span-3">Featured content</li>
+  #             <li><a href="#">Introduction</a></li>
+  #             <li><a href="#">Installation</a></li>
+  #           </ul>
+  #         <% end %>
+  #       <% end %>
+  #       <% list.with_item do |item| %>
+  #         <% item.with_link(href: "/docs") { "Documentation" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class NavigationMenuComponent < BaseComponent
+    BASE_CLASSES = "relative z-10 flex max-w-max flex-1 items-center justify-center"
+
+    renders_one :list, lambda { |**options|
+      NavigationMenuListComponent.new(**options)
+    }
+
+    def call
+      content_tag(:nav, navigation_content, navigation_attributes)
+    end
+
+    private
+
+    def navigation_content
+      safe_join([list, viewport].compact)
+    end
+
+    def viewport
+      content_tag(:div, viewport_inner, class: "absolute left-0 top-full flex justify-center")
+    end
+
+    def viewport_inner
+      content_tag(:div, "", viewport_attributes)
+    end
+
+    def viewport_attributes
+      {
+        class: cn(
+          "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
+          "md:w-[var(--radix-navigation-menu-viewport-width)]"
+        ),
+        "data-shadcn--navigation-menu-target": "viewport",
+        "data-state": "closed",
+        hidden: true
+      }
+    end
+
+    def navigation_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-controller": "shadcn--navigation-menu",
+        "aria-label": "Main"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/navigation_menu_content_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Content area that appears when a navigation trigger is activated
+  class NavigationMenuContentComponent < BaseComponent
+    CONTENT_CLASSES = [
+      "left-0 top-0 w-full",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+      "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+      "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+      "md:absolute md:w-auto"
+    ].join(" ").freeze
+
+    def call
+      content_tag(:div, content, content_attributes)
+    end
+
+    private
+
+    def content_attributes
+      {
+        class: cn(CONTENT_CLASSES, class_name),
+        "data-shadcn--navigation-menu-target": "content",
+        "data-state": "closed",
+        hidden: true
+      }.merge(html_options).compact
+    end
+  end
+end

data/app/components/shadcn/navigation_menu_item_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Individual item in the navigation menu
+  class NavigationMenuItemComponent < BaseComponent
+    renders_one :trigger, lambda { |**options, &block|
+      NavigationMenuTriggerComponent.new(**options, &block)
+    }
+
+    renders_one :dropdown, lambda { |**options, &block|
+      NavigationMenuContentComponent.new(**options, &block)
+    }
+
+    renders_one :link, lambda { |href:, active: false, **options, &block|
+      NavigationMenuLinkComponent.new(href: href, active: active, **options, &block)
+    }
+
+    def call
+      content_tag(:li, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      if link
+        link
+      else
+        safe_join([trigger, dropdown].compact)
+      end
+    end
+
+    def item_attributes
+      {
+        class: cn("relative", class_name),
+        "data-shadcn--navigation-menu-target": "item"
+      }.merge(html_options).compact
+    end
+  end
+end

data/app/components/shadcn/navigation_menu_link_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # A link within the navigation menu (for items without dropdowns)
+  class NavigationMenuLinkComponent < BaseComponent
+    LINK_CLASSES = [
+      "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2",
+      "text-sm font-medium transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+      "disabled:pointer-events-none disabled:opacity-50"
+    ].join(" ").freeze
+
+    ACTIVE_CLASSES = "bg-accent/50"
+
+    # @param href [String] The link destination
+    # @param active [Boolean] Whether this link is currently active
+    def initialize(href:, active: false, **options)
+      super(**options)
+      @href = href
+      @active = active
+    end
+
+    def call
+      content_tag(:a, content, link_attributes)
+    end
+
+    private
+
+    def link_attributes
+      {
+        class: cn(LINK_CLASSES, @active && ACTIVE_CLASSES, class_name),
+        href: @href,
+        "data-active": @active ? "true" : nil
+      }.merge(html_options).compact
+    end
+  end
+end