shadcn-rails 0.1.0

data/app/components/shadcn/item_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item component - a flexible flex container for titles, descriptions, and actions
+  # Matches shadcn/ui Item component
+  #
+  # @example Basic item
+  #   <%= render Shadcn::ItemComponent.new do |item| %>
+  #     <% item.with_media(variant: :icon) do %>
+  #       <svg>...</svg>
+  #     <% end %>
+  #     <% item.with_content do |content| %>
+  #       <% content.with_title { "Item Title" } %>
+  #       <% content.with_description { "Item description" } %>
+  #     <% end %>
+  #     <% item.with_actions do %>
+  #       <%= render Shadcn::ButtonComponent.new(size: :sm) { "Action" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With variants
+  #   <%= render Shadcn::ItemComponent.new(variant: :outline) do |item| %>
+  #     ...
+  #   <% end %>
+  #
+  class ItemComponent < BaseComponent
+    VARIANTS = {
+      default: "bg-transparent",
+      outline: "border border-border rounded-lg",
+      muted: "bg-muted/50 rounded-lg"
+    }.freeze
+
+    SIZES = {
+      default: "p-4 gap-4",
+      sm: "p-3 gap-3"
+    }.freeze
+
+    BASE_CLASSES = "flex items-start"
+
+    # Media slot for icons, images, or avatars
+    renders_one :media, lambda { |variant: :default, **options|
+      ItemMediaComponent.new(variant: variant, **options)
+    }
+
+    # Content slot for title and description
+    renders_one :content_slot, lambda { |**options|
+      ItemContentComponent.new(**options)
+    }
+
+    # Alias for more intuitive API
+    alias_method :with_content, :with_content_slot
+
+    # Actions slot for buttons
+    renders_one :actions, lambda { |**options|
+      ItemActionsComponent.new(**options)
+    }
+
+    # Header slot
+    renders_one :header, lambda { |**options|
+      ItemHeaderComponent.new(**options)
+    }
+
+    # Footer slot
+    renders_one :footer, lambda { |**options|
+      ItemFooterComponent.new(**options)
+    }
+
+    # @param variant [Symbol] :default, :outline, or :muted
+    # @param size [Symbol] :default or :sm
+    # @param tag [Symbol] HTML tag to use (:div, :li, :a, etc.)
+    # @param href [String] URL for link items (uses :a tag automatically)
+    def initialize(variant: :default, size: :default, tag: :div, href: nil, **options)
+      super(**options)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @tag = href ? :a : tag
+      @href = href
+    end
+
+    def call
+      content_tag(@tag, item_content, **item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([header, media, content_slot, content, actions, footer].compact)
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name)
+      }
+      attrs[:href] = @href if @href
+      attrs.merge(html_options).merge(build_data)
+    end
+  end
+end

data/app/components/shadcn/item_content_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Content component - wrapper for title and description
+  class ItemContentComponent < BaseComponent
+    BASE_CLASSES = "flex-1 min-w-0 space-y-1"
+
+    # Title slot
+    renders_one :title, lambda { |**options|
+      ItemTitleComponent.new(**options)
+    }
+
+    # Description slot
+    renders_one :description, lambda { |**options|
+      ItemDescriptionComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+        safe_join([title, description, content].compact)
+      end
+    end
+  end
+end

data/app/components/shadcn/item_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Description component
+  class ItemDescriptionComponent < BaseComponent
+    BASE_CLASSES = "text-sm text-muted-foreground"
+
+    def call
+      content_tag(:p, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/item_footer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Footer component - display footer content below main content
+  class ItemFooterComponent < BaseComponent
+    BASE_CLASSES = "mt-2 w-full"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/item_group_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Group component - container for grouping related items
+  class ItemGroupComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col"
+
+    # Items in the group
+    renders_many :items, lambda { |variant: :default, size: :default, **options|
+      ItemComponent.new(variant: variant, size: size, **options)
+    }
+
+    # Separators between items
+    renders_many :separators, lambda { |**options|
+      ItemSeparatorComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+        safe_join([items, separators, content].flatten.compact)
+      end
+    end
+  end
+end

data/app/components/shadcn/item_header_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Header component - display header content above main content
+  class ItemHeaderComponent < BaseComponent
+    BASE_CLASSES = "mb-2"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/item_media_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Media component - displays icons, images, or avatars
+  class ItemMediaComponent < BaseComponent
+    VARIANTS = {
+      default: "shrink-0",
+      icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted [&>svg]:size-5 [&>svg]:text-muted-foreground",
+      image: "shrink-0 overflow-hidden rounded-lg"
+    }.freeze
+
+    # @param variant [Symbol] :default, :icon, or :image
+    def initialize(variant: :default, **options)
+      super(**options)
+      @variant = variant.to_sym
+    end
+
+    def call
+      content_tag(:div, content, class: merge_classes(VARIANTS[@variant]), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/item_separator_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Separator component - visual divider between items
+  class ItemSeparatorComponent < BaseComponent
+    BASE_CLASSES = "shrink-0 bg-border h-[1px] w-full"
+
+    def call
+      content_tag(:div, "", class: merge_classes(BASE_CLASSES), role: "separator", **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/item_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Title component
+  class ItemTitleComponent < BaseComponent
+    BASE_CLASSES = "text-sm font-medium leading-none"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/kbd_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Kbd component for displaying keyboard shortcuts
+  # Matches shadcn/ui Kbd component
+  #
+  # @example Basic keyboard shortcut
+  #   <%= render Shadcn::KbdComponent.new { "⌘" } %>
+  #
+  # @example Multiple keys
+  #   <%= render Shadcn::KbdComponent.new { "⌘K" } %>
+  #
+  # @example With key combination
+  #   <span class="flex items-center gap-1">
+  #     <%= render Shadcn::KbdComponent.new { "Ctrl" } %>
+  #     <span>+</span>
+  #     <%= render Shadcn::KbdComponent.new { "C" } %>
+  #   </span>
+  #
+  class KbdComponent < BaseComponent
+    BASE_CLASSES = "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+
+    def call
+      tag.kbd(content, **kbd_attributes)
+    end
+
+    private
+
+    def kbd_attributes
+      attrs = { class: merge_classes(BASE_CLASSES) }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/label_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Label component for form fields
+  # Matches shadcn/ui Label component
+  #
+  # @example Basic label
+  #   <%= render Shadcn::LabelComponent.new(for: "email") { "Email Address" } %>
+  #
+  # @example Required field label
+  #   <%= render Shadcn::LabelComponent.new(for: "name", required: true) { "Name" } %>
+  #
+  # @example With custom styling
+  #   <%= render Shadcn::LabelComponent.new(for: "bio", class_name: "text-lg") { "Biography" } %>
+  #
+  class LabelComponent < BaseComponent
+    BASE_CLASSES = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+
+    # @param for [String, nil] The ID of the input this label is for
+    # @param required [Boolean] Whether to show a required indicator
+    def initialize(for: nil, required: false, **options)
+      super(**options)
+      @for = binding.local_variable_get(:for)
+      @required = required
+    end
+
+    def call
+      label_text = content
+      label_text = safe_join([label_text, required_indicator]) if @required
+      tag.label(label_text, **label_attributes)
+    end
+
+    private
+
+    def required_indicator
+      content_tag(:span, " *", class: "text-destructive", "aria-hidden": "true")
+    end
+
+    def label_attributes
+      attrs = {
+        for: @for,
+        class: merge_classes(BASE_CLASSES)
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_checkbox_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Checkbox Item component
+  # A menu item that can be checked/unchecked
+  class MenubarCheckboxItemComponent < 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 checked [Boolean] Whether item is checked
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        check_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def check_indicator
+      content_tag(:span, check_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def check_icon
+      return "" unless @checked
+
+      content_tag(:svg, check_svg_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: "h-4 w-4"
+      })
+    end
+
+    def check_svg_path
+      content_tag(:polyline, "", points: "20 6 9 17 4 12")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemcheckbox",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-shadcn--menubar-target": "item",
+        "data-action": "click->shadcn--menubar#toggleCheckbox"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar component
+  # Matches shadcn/ui Menubar component
+  # A visually persistent menu common in desktop applications
+  #
+  # @example Basic menubar
+  #   <%= render Shadcn::MenubarComponent.new do |menubar| %>
+  #     <% menubar.with_menu do |menu| %>
+  #       <% menu.with_trigger { "File" } %>
+  #       <% menu.with_content do |content| %>
+  #         <% content.with_item(href: "#") { "New Tab" } %>
+  #         <% content.with_item(href: "#") { "New Window" } %>
+  #         <% content.with_separator %>
+  #         <% content.with_item(href: "#") { "Exit" } %>
+  #       <% end %>
+  #     <% end %>
+  #     <% menubar.with_menu do |menu| %>
+  #       <% menu.with_trigger { "Edit" } %>
+  #       <% menu.with_content do |content| %>
+  #         <% content.with_item(href: "#") { "Undo" } %>
+  #         <% content.with_item(href: "#") { "Redo" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class MenubarComponent < BaseComponent
+    BASE_CLASSES = "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm"
+
+    renders_many :menus, lambda { |**options|
+      MenubarMenuComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, menubar_content, menubar_attributes)
+    end
+
+    private
+
+    def menubar_content
+      safe_join(menus)
+    end
+
+    def menubar_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menubar",
+        "data-controller": "shadcn--menubar"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_content_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Content component
+  # Container for menu items within a dropdown
+  class MenubarContentComponent < BaseComponent
+    BASE_CLASSES = "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 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"
+
+    renders_many :items, lambda { |**options, &block|
+      MenubarItemComponent.new(**options, &block)
+    }
+    renders_many :labels, lambda { |**options, &block|
+      MenubarLabelComponent.new(**options, &block)
+    }
+    renders_many :separators, lambda { |**options|
+      MenubarSeparatorComponent.new(**options)
+    }
+    renders_many :checkbox_items, lambda { |**options, &block|
+      MenubarCheckboxItemComponent.new(**options, &block)
+    }
+    renders_many :radio_groups, lambda { |**options, &block|
+      MenubarRadioGroupComponent.new(**options, &block)
+    }
+    renders_many :sub_menus, lambda { |**options, &block|
+      MenubarSubComponent.new(**options, &block)
+    }
+
+    # @param align [Symbol] Content alignment (:start, :center, :end)
+    # @param side_offset [Integer] Offset from trigger
+    def initialize(align: :start, side_offset: 4, **options)
+      super(**options)
+      @align = align
+      @side_offset = side_offset
+    end
+
+    def call
+      content_tag(:div, menu_content, content_attributes)
+    end
+
+    private
+
+    def menu_content
+      if items.any? || labels.any? || separators.any? || checkbox_items.any? || radio_groups.any? || sub_menus.any?
+        safe_join([labels, items, separators, checkbox_items, radio_groups, sub_menus, 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": "content",
+        hidden: true
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_item_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Item component
+  # Individual menu item within menubar content
+  class MenubarItemComponent < BaseComponent
+    BASE_CLASSES = "relative 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-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    VARIANTS = {
+      default: "",
+      destructive: "text-destructive focus:bg-destructive focus:text-destructive-foreground"
+    }.freeze
+
+    renders_one :shortcut, lambda { |**options|
+      MenubarShortcutComponent.new(**options)
+    }
+
+    # @param href [String, nil] Link URL
+    # @param variant [Symbol] Item variant (:default, :destructive)
+    # @param disabled [Boolean] Whether item is disabled
+    # @param inset [Boolean] Whether to add left padding for icons
+    def initialize(href: nil, variant: :default, disabled: false, inset: false, **options, &block)
+      super(**options, &block)
+      @href = href
+      @variant = variant.to_sym
+      @disabled = disabled
+      @inset = inset
+    end
+
+    def call
+      tag_name = @href ? :a : :div
+      content_tag(tag_name, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([content, shortcut].compact)
+    end
+
+    def item_classes
+      cn(
+        BASE_CLASSES,
+        VARIANTS[@variant],
+        @inset ? "pl-8" : "",
+        class_name
+      )
+    end
+
+    def item_attributes
+      attrs = {
+        class: item_classes,
+        role: "menuitem",
+        tabindex: @disabled ? nil : "-1",
+        href: @href,
+        "data-disabled": @disabled ? "" : nil,
+        "data-shadcn--menubar-target": "item",
+        "data-action": "click->shadcn--menubar#selectItem"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/menubar_label_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Label component
+  # Label for grouping menu items
+  class MenubarLabelComponent < BaseComponent
+    BASE_CLASSES = "px-2 py-1.5 text-sm font-semibold"
+
+    # @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, content, label_attributes)
+    end
+
+    private
+
+    def label_attributes
+      {
+        class: cn(BASE_CLASSES, @inset ? "pl-8" : "", class_name)
+      }
+    end
+  end
+end

data/app/components/shadcn/menubar_menu_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Menubar Menu component
+  # Individual menu section within a menubar
+  class MenubarMenuComponent < BaseComponent
+    renders_one :trigger, lambda { |**options|
+      MenubarTriggerComponent.new(**options)
+    }
+    renders_one :menu, lambda { |**options|
+      MenubarContentComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, menu_body, menu_attributes)
+    end
+
+    private
+
+    def menu_body
+      safe_join([trigger, menu].compact)
+    end
+
+    def menu_attributes
+      attrs = {
+        class: cn("relative", class_name),
+        "data-shadcn--menubar-target": "menu"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end