view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/gallery/gallery_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  open({ params: { src, alt } }) {
+    if (this._overlay) return
+    const overlay = document.createElement("div")
+    overlay.className = "fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+    overlay.dataset.galleryOverlay = ""
+
+    const img = document.createElement("img")
+    img.src = src
+    img.alt = alt || ""
+    img.className = "max-h-[90vh] max-w-[90vw] rounded-md object-contain"
+    overlay.appendChild(img)
+
+    document.body.appendChild(overlay)
+    this._overlay = overlay
+  }
+
+  close() {
+    this._overlay?.remove()
+    this._overlay = null
+  }
+
+  closeOnClickOutside(event) {
+    if (event.target === this._overlay) this.close()
+  }
+}

data/lib/generators/view_primitives/add/templates/hover_card/hover_card_component.rb.tt

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module UI
+  class HoverCardComponent < ApplicationComponent
+    renders_one :trigger
+
+    CARD_BASE = "absolute z-50 w-64 rounded-lg border bg-popover p-4 text-sm " \
+                "text-popover-foreground shadow-md " \
+                "opacity-0 group-hover:opacity-100 pointer-events-none " \
+                "transition-opacity duration-200"
+
+    POSITIONS = {
+      bottom: "top-full left-0 mt-2",
+      top:    "bottom-full left-0 mb-2",
+      left:   "right-full top-0 mr-2",
+      right:  "left-full top-0 ml-2"
+    }.freeze
+
+    def initialize(side: :bottom, **html_attrs)
+      @side        = side.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:span,
+        class: cn("relative inline-block group", @extra_class),
+        **@html_attrs) do
+        concat trigger if trigger
+        concat card_panel
+      end
+    end
+
+    private
+
+    def card_panel
+      content_tag(:div,
+        class: cn(CARD_BASE, POSITIONS.fetch(@side, POSITIONS[:bottom]))) do
+        content
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/iframe/iframe_component.rb.tt

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module UI
+  class IframeComponent < ApplicationComponent
+    BASE = "w-full border-0"
+
+    # src:     URL to embed (required)
+    # title:   accessible label (required — describes the iframe content)
+    # loading: :lazy (default) | :eager
+    # sandbox: space-separated token string or true for strict defaults
+    #          pass false to disable sandboxing entirely (not recommended)
+    # aspect:  CSS aspect-ratio value, e.g. "16/9", "4/3" (wraps in a div)
+    #          omit if you set explicit width/height
+    # width / height: explicit pixel dimensions (applied to <iframe>)
+    def initialize(src:, title:, loading: :lazy, sandbox: true,
+                   aspect: nil, width: nil, height: nil, **html_attrs)
+      @src     = src
+      @title   = title
+      @loading = loading.to_sym
+      @sandbox = sandbox
+      @aspect  = aspect
+      @width   = width
+      @height  = height
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      if @aspect
+        content_tag(:div, style: "aspect-ratio: #{@aspect}", class: "w-full overflow-hidden") do
+          iframe_tag
+        end
+      else
+        iframe_tag
+      end
+    end
+
+    private
+
+    def iframe_tag
+      attrs = {
+        src: @src,
+        title: @title,
+        loading: @loading,
+        class: cn(BASE, (@aspect ? "h-full" : nil), @extra_class)
+      }
+      attrs[:sandbox] = sandbox_value if @sandbox != false
+      attrs[:width]   = @width  if @width
+      attrs[:height]  = @height if @height
+      tag.iframe(**attrs, **@html_attrs)
+    end
+
+    def sandbox_value
+      return "allow-scripts allow-same-origin allow-forms allow-popups" if @sandbox == true
+
+      @sandbox
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/image/image_component.rb.tt

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module UI
+  class ImageComponent < ApplicationComponent
+    BASE = "max-w-full"
+
+    LOADING_MODES = %i[lazy eager auto].freeze
+
+    # src:     image URL (required)
+    # alt:     alternative text (required for accessibility)
+    # srcset:  responsive image set, e.g. "img-sm.jpg 640w, img-lg.jpg 1280w"
+    # sizes:   media conditions, e.g. "(max-width: 640px) 100vw, 50vw"
+    # loading: :lazy (default) | :eager | :auto
+    # width/height: native dimensions (prevents layout shift)
+    def initialize(src:, alt:, srcset: nil, sizes: nil, loading: :lazy,
+                   width: nil, height: nil, **html_attrs)
+      @src     = src
+      @alt     = alt
+      @srcset  = srcset
+      @sizes   = sizes
+      @loading = LOADING_MODES.include?(loading.to_sym) ? loading.to_sym : :lazy
+      @width   = width
+      @height  = height
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      attrs = { src: @src, alt: @alt, loading: @loading,
+                class: cn(BASE, @extra_class) }
+      attrs[:srcset]  = @srcset  if @srcset
+      attrs[:sizes]   = @sizes   if @sizes
+      attrs[:width]   = @width   if @width
+      attrs[:height]  = @height  if @height
+      tag.img(**attrs, **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/indicator/indicator_component.rb.tt

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module UI
+  class IndicatorComponent < ApplicationComponent
+    DOT_BASE = "absolute flex items-center justify-center rounded-full text-[10px] font-medium leading-none"
+
+    VARIANTS = {
+      default:     "bg-primary text-primary-foreground",
+      destructive: "bg-destructive text-white",
+      success:     "bg-green-500 text-white",
+      warning:     "bg-yellow-500 text-foreground"
+    }.freeze
+
+    POSITIONS = {
+      top_right:    "-top-1 -right-1",
+      top_left:     "-top-1 -left-1",
+      bottom_right: "-bottom-1 -right-1",
+      bottom_left:  "-bottom-1 -left-1"
+    }.freeze
+
+    def initialize(count: nil, position: :top_right, variant: :default, **html_attrs)
+      @count = count
+      @position = position.to_sym
+      @variant = variant.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:span, class: cn("relative inline-flex", @extra_class), **@html_attrs) do
+        concat content
+        concat dot
+      end
+    end
+
+    private
+
+    def dot
+      dot_size = @count ? "size-5 min-w-5 px-0.5" : "size-2"
+      content_tag(:span, @count,
+        class: cn(DOT_BASE, dot_size,
+          VARIANTS.fetch(@variant, VARIANTS[:default]),
+          POSITIONS.fetch(@position, POSITIONS[:top_right])))
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/input/input_component.rb.tt

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module UI
+  class InputComponent < 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 " \
+           "selection:bg-primary selection:text-primary-foreground " \
+           "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground " \
+           "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 " \
+           "md:text-sm dark:bg-input/30"
+
+    def initialize(type: "text", **html_attrs)
+      @type = type
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:input, nil,
+        type: @type,
+        class: cn(BASE, @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/input_otp/input_otp_component.rb.tt

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module UI
+  class InputOtpComponent < ApplicationComponent
+    # One-time-password digit input group.
+    # Renders N individual single-character inputs that auto-advance on entry.
+    #
+    # Usage:
+    #   <%= ui :input_otp, length: 6, name: "otp" %>
+
+    CELL_CLS = "h-12 w-10 rounded-md border border-input bg-transparent text-center text-lg font-medium " \
+               "shadow-xs transition-[color,box-shadow] outline-none " \
+               "caret-transparent selection:bg-primary selection:text-primary-foreground " \
+               "focus:border-ring focus:ring-[3px] focus:ring-ring/50 " \
+               "aria-invalid:border-destructive aria-invalid:ring-destructive/20 " \
+               "disabled:pointer-events-none disabled:opacity-50"
+
+    WRAPPER_CLS = "flex items-center gap-2"
+    SEPARATOR_CLS = "text-muted-foreground text-lg font-medium"
+
+    # length:    number of OTP digits (default: 6)
+    # name:      form field name (individual cells get name[0], name[1], …)
+    # separator: position (Integer) or Hash { position => char }, e.g. 3 or { 3 => "-" }
+    def initialize(length: 6, name: "otp", separator: nil, **html_attrs)
+      @length    = length.to_i
+      @name      = name
+      @separator = case separator
+      when Integer then { separator => "-" }
+      when Hash    then separator
+      end
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(WRAPPER_CLS, @extra_class),
+        data: { controller: "input-otp" },
+        **@html_attrs) do
+        @length.times do |i|
+          sep = @separator&.fetch(i, nil)
+          concat content_tag(:span, sep, class: SEPARATOR_CLS) if sep
+          concat digit_input(i)
+        end
+      end
+    end
+
+    private
+
+    def digit_input(index)
+      content_tag(:input, nil,
+        type: "text",
+        inputmode: "numeric",
+        maxlength: 1,
+        autocomplete: index.zero? ? "one-time-code" : "off",
+        name: "#{@name}[#{index}]",
+        class: CELL_CLS,
+        "aria-label": "Digit #{index + 1}",
+        data: {
+          input_otp_target: "cell",
+          action: "input->input-otp#onInput keydown->input-otp#onKeydown paste->input-otp#onPaste"
+        })
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/input_otp/input_otp_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["cell"]
+
+  onInput(event) {
+    const cell = event.currentTarget
+    const idx = this.cellTargets.indexOf(cell)
+    if (cell.value && idx < this.cellTargets.length - 1) {
+      this.cellTargets[idx + 1].focus()
+    }
+  }
+
+  onKeydown(event) {
+    const cell = event.currentTarget
+    const idx = this.cellTargets.indexOf(cell)
+    if (event.key === "Backspace" && !cell.value && idx > 0) {
+      this.cellTargets[idx - 1].focus()
+    }
+    if (event.key === "ArrowLeft" && idx > 0) {
+      this.cellTargets[idx - 1].focus()
+    }
+    if (event.key === "ArrowRight" && idx < this.cellTargets.length - 1) {
+      this.cellTargets[idx + 1].focus()
+    }
+  }
+
+  onPaste(event) {
+    event.preventDefault()
+    const text = (event.clipboardData || window.clipboardData).getData("text").replace(/\D/g, "")
+    const start = this.cellTargets.indexOf(event.currentTarget)
+    text.split("").forEach((char, i) => {
+      const cell = this.cellTargets[start + i]
+      if (cell) cell.value = char
+    })
+    const next = this.cellTargets[start + text.length]
+    if (next) next.focus()
+  }
+}

data/lib/generators/view_primitives/add/templates/kbd/kbd_component.rb.tt

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module UI
+  class KbdComponent < ApplicationComponent
+    BASE = "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 " \
+           "rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none " \
+           "[&_svg:not([class*='size-'])]:size-3"
+
+    def initialize(key = nil, **html_attrs)
+      @key = key || html_attrs.delete(:label)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:kbd, content.presence || @key,
+        class: cn(BASE, @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/label/label_component.rb.tt

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module UI
+  class LabelComponent < ApplicationComponent
+    BASE = "flex items-center gap-2 text-sm leading-none font-medium select-none " \
+           "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 " \
+           "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+
+    def initialize(text = nil, for: nil, **html_attrs)
+      @text = text || html_attrs.delete(:label)
+      @for = binding.local_variable_get(:for)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:label, content.presence || @text,
+        class: cn(BASE, @extra_class),
+        for: @for,
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/list_group/list_group_component.rb.tt

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module UI
+  class ListGroupComponent < ApplicationComponent
+    BASE = "divide-y divide-border overflow-hidden rounded-lg border"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:ul, content, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/list_group/list_group_item_component.rb.tt

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UI
+  class ListGroupItemComponent < ApplicationComponent
+    BASE = "flex items-center justify-between px-4 py-3 text-sm"
+
+    VARIANTS = {
+      default: "text-foreground hover:bg-muted",
+      active:  "bg-primary text-primary-foreground",
+      muted:   "text-muted-foreground hover:bg-muted"
+    }.freeze
+
+    def initialize(label = nil, href: nil, active: false, variant: :default, **html_attrs)
+      @label = label || html_attrs.delete(:label)
+      @href = href
+      @variant = active ? :active : variant.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      tag_name = @href ? :a : :li
+      extra = @href ? { href: @href } : {}
+      content_tag(tag_name,
+        content.presence || @label,
+        class: cn(BASE, VARIANTS.fetch(@variant, VARIANTS[:default]), @extra_class),
+        **extra,
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/map_area/map_area_component.rb.tt

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module UI
+  class MapAreaComponent < ApplicationComponent
+    # Image map — renders <img usemap> + <map> + <area> elements.
+    #
+    # Usage:
+    #   ui :map_area,
+    #     src: "/map.png", alt: "Office floor plan",
+    #     width: 800, height: 600,
+    #     areas: [
+    #       { shape: :rect,   coords: "0,0,200,150",   href: "/room/1", alt: "Room 1" },
+    #       { shape: :circle, coords: "400,300,50",    href: "/room/2", alt: "Room 2" },
+    #       { shape: :poly,   coords: "10,10,50,10,30,40", href: "/room/3", alt: "Room 3" }
+    #     ]
+    #
+    # area keys:
+    #   shape:   :rect | :circle | :poly | :default (required)
+    #   coords:  coordinate string (required for rect/circle/poly)
+    #   href:    link target (omit or "#" for non-interactive areas)
+    #   alt:     accessible label for the area (required for links)
+    #   title:   tooltip text
+    #   target:  link target, e.g. "_blank"
+    #   rel:     link rel attribute
+
+    WRAPPER_CLS = "relative inline-block"
+
+    def initialize(src:, alt:, areas: [], width: nil, height: nil,
+                   loading: :lazy, map_name: nil, **html_attrs)
+      @src       = src
+      @alt       = alt
+      @areas     = areas
+      @width     = width
+      @height    = height
+      @loading   = loading
+      @map_name  = map_name || "map-#{SecureRandom.hex(4)}"
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: cn(WRAPPER_CLS, @extra_class), **@html_attrs) do
+        safe_join([img_tag, map_tag])
+      end
+    end
+
+    private
+
+    def img_tag
+      attrs = { src: @src, alt: @alt, usemap: "##{@map_name}", loading: @loading }
+      attrs[:width]  = @width  if @width
+      attrs[:height] = @height if @height
+      tag.img(**attrs)
+    end
+
+    def map_tag
+      content_tag(:map, name: @map_name) do
+        safe_join(@areas.map { |area| area_tag(area) })
+      end
+    end
+
+    def area_tag(area)
+      attrs = { shape: area.fetch(:shape, :rect).to_s, alt: area.fetch(:alt, "") }
+      attrs[:coords] = area[:coords]  if area[:coords]
+      attrs[:href]   = area[:href]    if area[:href]
+      attrs[:title]  = area[:title]   if area[:title]
+      attrs[:target] = area[:target]  if area[:target]
+      attrs[:rel]    = area[:rel]     if area[:rel]
+      tag.area(**attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/mega_menu/mega_menu_component.rb.tt

@@ -0,0 +1,130 @@
+# frozen_string_literal: true
+
+module UI
+  class MegaMenuComponent < ApplicationComponent
+    # Full-width dropdown panel anchored to a trigger button.
+    # Columns are rendered via with_column blocks.
+
+    TRIGGER_CLS = "inline-flex h-9 items-center justify-center gap-1.5 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 " \
+                  "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground"
+
+    PANEL_CLS = "absolute left-0 top-full z-50 mt-1.5 w-full overflow-hidden rounded-md border " \
+                "bg-popover text-popover-foreground shadow-lg"
+
+    INNER_CLS = "container mx-auto grid gap-6 p-6"
+
+    COLUMN_HEADING = "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+
+    ITEM_CLS = "group flex items-start gap-3 rounded-sm p-2 text-sm transition-colors outline-none " \
+               "hover:bg-accent hover:text-accent-foreground " \
+               "focus-visible:ring-[3px] focus-visible:ring-ring/50"
+
+    ITEM_TITLE = "font-medium leading-none"
+    ITEM_DESC  = "mt-1 text-xs text-muted-foreground group-hover:text-accent-foreground/70"
+
+    CHEVRON_PATH = "m6 9 6 6 6-6"
+
+    renders_many :columns, "UI::MegaMenuComponent::ColumnComponent"
+
+    # label:   trigger button text
+    # cols:    number of columns in the grid (default: auto based on column count)
+    def initialize(label:, cols: nil, **html_attrs)
+      @label = label
+      @cols  = cols
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("relative", @extra_class),
+        data: {
+          controller: "mega-menu",
+          action: "click@document->mega-menu#closeOnClickOutside"
+        },
+        **@html_attrs) do
+        concat trigger_btn
+        concat panel
+      end
+    end
+
+    private
+
+    def trigger_btn
+      content_tag(:button,
+        type: "button",
+        class: TRIGGER_CLS,
+        "aria-expanded": "false",
+        data: { mega_menu_target: "trigger", state: "closed",
+                action: "click->mega-menu#toggle" }) do
+        concat @label
+        concat chevron
+      end
+    end
+
+    def panel
+      col_count = @cols || [columns.size, 1].max
+      grid_cls  = "grid-cols-#{col_count}"
+
+      content_tag(:div,
+        hidden: true,
+        class: PANEL_CLS,
+        data: { mega_menu_target: "panel" }) do
+        content_tag(:div, class: cn(INNER_CLS, grid_cls)) do
+          safe_join(columns)
+        end
+      end
+    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: "size-3 transition-transform duration-200 data-[state=open]:rotate-180",
+        "aria-hidden": "true",
+        data: { mega_menu_target: "chevron" })
+    end
+
+    # A single column inside the mega menu panel.
+    # heading: optional column title
+    # items:   array of { title:, description:, href: } hashes
+    class ColumnComponent < ApplicationComponent
+      def initialize(heading: nil, items: [], **html_attrs)
+        @heading    = heading
+        @items      = items
+        @html_attrs = html_attrs
+      end
+
+      def call
+        content_tag(:div, **@html_attrs) do
+          concat content_tag(:p, @heading, class: MegaMenuComponent::COLUMN_HEADING) if @heading
+          concat(content_tag(:ul, class: "space-y-1") {
+            safe_join(@items.map { |item| render_item(item) })
+          })
+        end
+      end
+
+      private
+
+      def render_item(item)
+        content_tag(:li) do
+          content_tag(:a,
+            href: item.fetch(:href, "#"),
+            class: MegaMenuComponent::ITEM_CLS) do
+            content_tag(:div) do
+              concat content_tag(:p, item[:title], class: MegaMenuComponent::ITEM_TITLE)
+              concat content_tag(:p, item[:description], class: MegaMenuComponent::ITEM_DESC) if item[:description]
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/mega_menu/mega_menu_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "panel", "chevron"]
+
+  toggle() {
+    const open = this.panelTarget.hidden
+    this._setOpen(open)
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.element.contains(event.target)) this._setOpen(false)
+  }
+
+  _setOpen(open) {
+    this.panelTarget.hidden = !open
+    this.triggerTarget.setAttribute("aria-expanded", String(open))
+    this.triggerTarget.dataset.state = open ? "open" : "closed"
+    if (this.hasChevronTarget) {
+      this.chevronTarget.dataset.state = open ? "open" : "closed"
+    }
+  }
+}