view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/menubar/menubar_component.rb.tt

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module UI
+  class MenubarComponent < ApplicationComponent
+    renders_many :menus, "UI::MenubarMenuComponent"
+
+    BAR  = "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs"
+    ITEM = "relative flex cursor-default select-none items-center gap-2 rounded-sm " \
+           "px-2 py-1.5 text-sm outline-none " \
+           "hover:bg-accent hover:text-accent-foreground " \
+           "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+           "[&_svg:not([class*='text-'])]:text-muted-foreground"
+    SEPARATOR = "-mx-1 my-1 h-px bg-border"
+    LABEL_CLS = "px-2 py-1.5 text-sm font-medium"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(BAR, @extra_class),
+        data: {
+          controller: "menubar",
+          action: "click@document->menubar#closeOnClickOutside keydown.escape@document->menubar#closeAll"
+        },
+        **@html_attrs) do
+        menus.each { |m| concat m }
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/menubar/menubar_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "panel"]
+
+  get openIndex() {
+    return this.panelTargets.findIndex(p => !p.hidden)
+  }
+
+  toggle(event) {
+    const menu = event.currentTarget.closest("[data-menubar-target='menu']")
+    const index = this.menuTargets.indexOf(menu)
+    const panel = this.panelTargets[index]
+    const wasOpen = !panel.hidden
+    this.closeAll()
+    if (!wasOpen) panel.hidden = false
+  }
+
+  openOnHover(event) {
+    if (this.openIndex === -1) return
+    const menu = event.currentTarget.closest("[data-menubar-target='menu']")
+    const index = this.menuTargets.indexOf(menu)
+    this.closeAll()
+    this.panelTargets[index].hidden = false
+  }
+
+  closeAll() {
+    this.panelTargets.forEach(p => p.hidden = true)
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.closeAll()
+  }
+}

data/lib/generators/view_primitives/add/templates/menubar/menubar_menu_component.rb.tt

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module UI
+  class MenubarMenuComponent < ApplicationComponent
+    TRIGGER = "flex cursor-default select-none items-center rounded-sm px-2 py-1 text-sm font-medium " \
+              "outline-none transition-colors " \
+              "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+
+    PANEL = "absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border " \
+            "bg-popover p-1 text-popover-foreground shadow-md"
+
+    def initialize(label:, **html_attrs)
+      @label       = label
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: "relative", data: { menubar_target: "menu" }, **@html_attrs) do
+        concat content_tag(:button,
+          @label,
+          type: "button",
+          class: TRIGGER,
+          data: { action: "click->menubar#toggle mouseenter->menubar#openOnHover" })
+        concat content_tag(:div,
+          data: { menubar_target: "panel" },
+          hidden: true,
+          class: cn(PANEL, @extra_class)) {
+          concat content
+        }
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/navbar/navbar_component.rb.tt

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module UI
+  class NavbarComponent < ApplicationComponent
+    LINK_BASE  = "text-sm font-medium transition-colors hover:text-foreground"
+    LINK_IDLE  = "text-muted-foreground"
+    LINK_ACTIVE = "text-foreground"
+
+    # items: [{ label:, href:, active: (optional) }]
+    # Block content is placed in the right action area (e.g. a Sign in button).
+    def initialize(brand: nil, brand_href: "/", items: [], **html_attrs)
+      @brand      = brand
+      @brand_href = brand_href
+      @items      = items
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:nav,
+        class: cn("sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", @extra_class),
+        data: { controller: "navbar" },
+        **@html_attrs) do
+        content_tag(:div, class: "container mx-auto flex h-14 items-center gap-4 px-4") do
+          concat brand_link
+          concat desktop_menu
+          concat spacer
+          concat action_area
+          concat hamburger
+        end
+      end
+    end
+
+    private
+
+    def brand_link
+      return "" unless @brand
+
+      content_tag(:a, @brand,
+        href: @brand_href,
+        class: "flex items-center font-semibold text-foreground mr-2")
+    end
+
+    def desktop_menu
+      return "" if @items.empty?
+
+      content_tag(:div, class: "hidden md:flex items-center gap-1") do
+        safe_join(@items.map { |item| nav_link(item) })
+      end
+    end
+
+    def nav_link(item)
+      content_tag(:a, item[:label],
+        href: item[:href],
+        class: cn(LINK_BASE, item[:active] ? LINK_ACTIVE : LINK_IDLE))
+    end
+
+    def spacer
+      content_tag(:div, nil, class: "flex-1")
+    end
+
+    def action_area
+      return "" unless content?
+
+      content_tag(:div, content, class: "hidden md:flex items-center gap-2")
+    end
+
+    def hamburger
+      return "" if @items.empty?
+
+      content_tag(:button, nil,
+        type: "button",
+        class: "md:hidden inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground",
+        data: { action: "click->navbar#toggle", navbar_target: "toggle" },
+        "aria-label": "Toggle menu") do
+        hamburger_icon
+      end
+    end
+
+    def hamburger_icon
+      raw(<<~SVG)
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <line x1="4" x2="20" y1="6" y2="6"/>
+          <line x1="4" x2="20" y1="12" y2="12"/>
+          <line x1="4" x2="20" y1="18" y2="18"/>
+        </svg>
+      SVG
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/navbar/navbar_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "toggle"]
+
+  toggle() {
+    const menu = this.element.nextElementSibling
+    if (!menu?.dataset.navbarTarget?.includes("menu")) return
+    menu.hidden = !menu.hidden
+  }
+}

data/lib/generators/view_primitives/add/templates/navigation_menu/navigation_menu_component.rb.tt

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module UI
+  class NavigationMenuComponent < ApplicationComponent
+    ROOT = "relative flex max-w-max flex-1 items-center justify-center"
+    LIST = "flex flex-1 list-none items-center justify-center gap-1"
+
+    # Trigger button style (item with flyout content)
+    TRIGGER = "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background " \
+              "px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none " \
+              "hover:bg-accent hover:text-accent-foreground " \
+              "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+              "disabled:pointer-events-none disabled:opacity-50 " \
+              "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground"
+
+    # Plain link style (item without flyout)
+    LINK_CLS = "inline-flex h-9 w-max items-center justify-center rounded-md bg-background " \
+               "px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none " \
+               "hover:bg-accent hover:text-accent-foreground " \
+               "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+               "aria-[current]:bg-accent/50 aria-[current]:text-accent-foreground"
+
+    # Flyout panel
+    CONTENT = "absolute top-full left-0 z-50 mt-1.5 min-w-48 overflow-hidden rounded-md border " \
+              "bg-popover p-1 text-popover-foreground shadow"
+
+    # Styled link inside a flyout panel
+    PANEL_LINK = "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none " \
+                 "hover:bg-accent hover:text-accent-foreground " \
+                 "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+                 "aria-[current]:bg-accent/50 aria-[current]:text-accent-foreground"
+
+    CHEVRON_PATH = "m6 9 6 6 6-6"
+
+    renders_many :items, "UI::NavigationMenuComponent::ItemComponent"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:nav, class: cn(ROOT, @extra_class), **@html_attrs) do
+        content_tag(:ul, class: LIST) do
+          safe_join(items.map { |item| content_tag(:li, item, class: "relative") })
+        end
+      end
+    end
+
+    # Represents one entry in the navigation bar.
+    # href: present  → plain styled link
+    # href: absent   → trigger button + flyout (add content via block)
+    class ItemComponent < ApplicationComponent
+      CHEVRON_PATH = "m6 9 6 6 6-6"
+
+      def initialize(label:, href: nil, active: false, **html_attrs)
+        @label  = label
+        @href   = href
+        @active = active
+        @extra_class = html_attrs.delete(:class)
+        @html_attrs  = html_attrs
+      end
+
+      def call
+        if @href
+          link_item
+        else
+          trigger_item
+        end
+      end
+
+      private
+
+      def link_item
+        content_tag(:a, @label,
+          href: @href,
+          class: cn(NavigationMenuComponent::LINK_CLS, @extra_class),
+          "aria-current": (@active ? "page" : nil),
+          **@html_attrs)
+      end
+
+      def trigger_item
+        content_tag(:div,
+          class: "relative",
+          data: {
+            controller: "navigation-menu",
+            action: "mouseenter->navigation-menu#open mouseleave->navigation-menu#scheduleClose " \
+                    "click@document->navigation-menu#closeOnClickOutside"
+          }) do
+          concat trigger_btn
+          concat flyout
+        end
+      end
+
+      def trigger_btn
+        content_tag(:button,
+          type: "button",
+          class: cn(NavigationMenuComponent::TRIGGER, @extra_class),
+          "aria-expanded": "false",
+          data: { navigation_menu_target: "trigger", state: "closed" },
+          **@html_attrs) do
+          concat @label
+          concat chevron
+        end
+      end
+
+      def flyout
+        content_tag(:div,
+          content,
+          class: NavigationMenuComponent::CONTENT,
+          hidden: true,
+          data: {
+            navigation_menu_target: "content",
+            action: "mouseenter->navigation-menu#open mouseleave->navigation-menu#scheduleClose"
+          })
+      end
+
+      def chevron
+        content_tag(:svg,
+          content_tag(:path, nil, d: CHEVRON_PATH, "stroke-linecap": "round", "stroke-linejoin": "round"),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          class: "relative top-[1px] ml-1 size-3 transition-transform duration-200 " \
+                 "group-data-[state=open]:rotate-180",
+          "aria-hidden": "true")
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/navigation_menu/navigation_menu_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+
+  open() {
+    clearTimeout(this._closeTimer)
+    this._setOpen(true)
+  }
+
+  scheduleClose() {
+    this._closeTimer = setTimeout(() => this._setOpen(false), 150)
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.element.contains(event.target)) this._setOpen(false)
+  }
+
+  _setOpen(open) {
+    if (!this.hasContentTarget) return
+    this.contentTarget.hidden = !open
+    this.triggerTarget.setAttribute("aria-expanded", String(open))
+    this.triggerTarget.dataset.state = open ? "open" : "closed"
+  }
+}

data/lib/generators/view_primitives/add/templates/number_input/number_input_component.rb.tt

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module UI
+  class NumberInputComponent < ApplicationComponent
+    BASE = "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs " \
+           "transition-[color,box-shadow] outline-none " \
+           "placeholder:text-muted-foreground " \
+           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+           "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " \
+           "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none " \
+           "md:text-sm dark:bg-input/30"
+
+    # min / max / step: native number input attributes
+    # value: initial value
+    def initialize(min: nil, max: nil, step: nil, value: nil, **html_attrs)
+      @min   = min
+      @max   = max
+      @step  = step
+      @value = value
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      attrs = { type: "number", class: cn(BASE, @extra_class) }
+      attrs[:min]   = @min   unless @min.nil?
+      attrs[:max]   = @max   unless @max.nil?
+      attrs[:step]  = @step  unless @step.nil?
+      attrs[:value] = @value unless @value.nil?
+      content_tag(:input, nil, **attrs, **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/pagination/pagination_component.rb.tt

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module UI
+  class PaginationComponent < ApplicationComponent
+    ITEM   = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium " \
+             "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " \
+             "h-9 w-9 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground"
+    ACTIVE = "bg-primary text-primary-foreground shadow hover:bg-primary/90 border-transparent"
+    MUTED  = "cursor-not-allowed opacity-50 pointer-events-none"
+
+    # url: callable — receives a page number, returns a path string
+    #   url: ->(page) { posts_path(page: page) }
+    def initialize(current_page:, total_pages:, url:, window: 2, **html_attrs)
+      @current  = current_page.to_i
+      @total    = total_pages.to_i
+      @url      = url
+      @window   = window
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      return "" if @total <= 1
+
+      content_tag(:nav, "aria-label": "Pagination", **@html_attrs) do
+        content_tag(:ul, class: cn("flex items-center gap-1", @extra_class)) do
+          safe_join([prev_item, *page_items, next_item])
+        end
+      end
+    end
+
+    private
+
+    def prev_item
+      content_tag(:li) do
+        if @current > 1
+          content_tag(:a, prev_svg, href: @url.call(@current - 1), class: ITEM, "aria-label": "Previous page")
+        else
+          content_tag(:span, prev_svg, class: cn(ITEM, MUTED), "aria-disabled": "true")
+        end
+      end
+    end
+
+    def next_item
+      content_tag(:li) do
+        if @current < @total
+          content_tag(:a, next_svg, href: @url.call(@current + 1), class: ITEM, "aria-label": "Next page")
+        else
+          content_tag(:span, next_svg, class: cn(ITEM, MUTED), "aria-disabled": "true")
+        end
+      end
+    end
+
+    def page_items
+      pages.map { |page| page == :ellipsis ? ellipsis_item : page_item(page) }
+    end
+
+    def page_item(page)
+      is_current = page == @current
+      content_tag(:li) do
+        if is_current
+          content_tag(:span, page.to_s, class: cn(ITEM, ACTIVE), "aria-current": "page")
+        else
+          content_tag(:a, page.to_s, href: @url.call(page), class: ITEM)
+        end
+      end
+    end
+
+    def ellipsis_item
+      content_tag(:li) do
+        content_tag(:span, "…", class: "flex h-9 w-9 items-center justify-center text-sm text-muted-foreground")
+      end
+    end
+
+    def pages
+      return (1..@total).to_a if @total <= (@window * 2 + 5)
+
+      left  = [@current - @window, 1].max
+      right = [@current + @window, @total].min
+
+      result = [1]
+      result << :ellipsis if left > 2
+      result.concat((left..right).to_a)
+      result << :ellipsis if right < @total - 1
+      result << @total
+      result.uniq
+    end
+
+    def prev_svg
+      raw('<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" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>')
+    end
+
+    def next_svg
+      raw('<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" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>')
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/picture/picture_component.rb.tt

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module UI
+  class PictureComponent < ApplicationComponent
+    # Each source is added via p.with_source(srcset:, type:, media:, sizes:)
+    renders_many :sources, "UI::PictureComponent::SourceComponent"
+
+    # src:     fallback <img> URL (required)
+    # alt:     alternative text on the fallback <img> (required)
+    # loading: :lazy (default) | :eager
+    # width / height: applied to the fallback <img>
+    def initialize(src:, alt:, loading: :lazy, width: nil, height: nil, **html_attrs)
+      @src     = src
+      @alt     = alt
+      @loading = loading.to_sym
+      @width   = width
+      @height  = height
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:picture, **@html_attrs) do
+        sources.each { |s| concat s }
+        concat fallback_img
+      end
+    end
+
+    # Represents a <source> element inside <picture>.
+    # Declare via: p.with_source(srcset: "img.avif", type: "image/avif")
+    # Optional: media:, sizes:, width:, height:
+    class SourceComponent < ApplicationComponent
+      def initialize(srcset:, type: nil, media: nil, sizes: nil, width: nil, height: nil, **html_attrs)
+        @srcset  = srcset
+        @type    = type
+        @media   = media
+        @sizes   = sizes
+        @width   = width
+        @height  = height
+        @html_attrs = html_attrs
+      end
+
+      def call
+        attrs = { srcset: @srcset }
+        attrs[:type]   = @type   if @type
+        attrs[:media]  = @media  if @media
+        attrs[:sizes]  = @sizes  if @sizes
+        attrs[:width]  = @width  if @width
+        attrs[:height] = @height if @height
+        tag.source(**attrs, **@html_attrs)
+      end
+    end
+
+    private
+
+    def fallback_img
+      attrs = { src: @src, alt: @alt, loading: @loading, class: cn("max-w-full", @extra_class) }
+      attrs[:width]  = @width  if @width
+      attrs[:height] = @height if @height
+      tag.img(**attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/popover/popover_component.rb.tt

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module UI
+  class PopoverComponent < ApplicationComponent
+    renders_one :trigger
+
+    PANEL_BASE = "absolute z-50 w-72 rounded-md border bg-popover p-4 " \
+                 "text-sm text-popover-foreground shadow-md outline-none"
+
+    ALIGN = {
+      start:  "left-0",
+      center: "left-1/2 -translate-x-1/2",
+      end:    "right-0"
+    }.freeze
+
+    SIDE = {
+      bottom: "top-full mt-2",
+      top:    "bottom-full mb-2",
+      left:   "right-full mr-2 top-0",
+      right:  "left-full ml-2 top-0"
+    }.freeze
+
+    def initialize(align: :start, side: :bottom, **html_attrs)
+      @align       = align.to_sym
+      @side        = side.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: "relative inline-block",
+        data: { controller: "popover", action: "click@document->popover#closeOnClickOutside" },
+        **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->popover#toggle" }, class: "contents") if trigger
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div,
+        class: cn(
+          PANEL_BASE,
+          ALIGN.fetch(@align, ALIGN[:start]),
+          SIDE.fetch(@side, SIDE[:bottom]),
+          @extra_class
+        ),
+        data: { popover_target: "panel" },
+        hidden: true) do
+        content
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/popover/popover_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  toggle() {
+    this.panelTarget.hidden = !this.panelTarget.hidden
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.close()
+  }
+}

data/lib/generators/view_primitives/add/templates/progress/progress_component.rb.tt

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module UI
+  class ProgressComponent < ApplicationComponent
+    TRACK = "relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
+    BAR = "h-full w-full flex-1 bg-primary transition-all"
+
+    def initialize(value: 0, max: 100, **html_attrs)
+      @value = value
+      @max = max
+      @pct = [[@value.to_f / @max * 100, 0].max, 100].min
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(TRACK, @extra_class),
+        role: "progressbar",
+        "aria-valuenow": @value,
+        "aria-valuemin": 0,
+        "aria-valuemax": @max,
+        **@html_attrs) do
+        content_tag(:div, nil, class: BAR, style: "width: #{@pct.round(2)}%")
+      end
+    end
+  end
+end