view_primitives 0.1.3 → 0.2.0

data/lib/generators/view_primitives/add/templates/device_mockup/device_mockup_component.rb.tt

@@ -2,24 +2,62 @@
 
 module UI
   class DeviceMockupComponent < ApplicationComponent
+    # Shell holds aspect ratio and hardware controls; bezel clips the screen inset.
+    PHONE_SHELL = "relative mx-auto w-full max-w-[280px] aspect-[393/852]"
+
+    PHONE_BEZEL = "absolute inset-0 overflow-hidden rounded-[3rem] bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 " \
+                 "shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] ring-1 ring-inset ring-white/15"
+
+    PHONE_SCREEN = "absolute inset-[10px] flex flex-col overflow-hidden rounded-[2.45rem] bg-black"
+
+    DYNAMIC_ISLAND = "pointer-events-none absolute left-1/2 top-[10px] z-20 h-[26px] w-[92px] " \
+                     "-translate-x-1/2 rounded-full bg-zinc-950 " \
+                     "shadow-[0_0_0_1px_rgba(255,255,255,0.14),inset_0_1px_0_rgba(255,255,255,0.08)]"
+
+    HOME_INDICATOR = "pointer-events-none absolute bottom-[7px] left-1/2 z-20 h-1 w-[112px] " \
+                     "-translate-x-1/2 rounded-full bg-white/40"
+
+    PHONE_BUTTONS = [
+      "pointer-events-none absolute -left-px top-[24%] z-30 h-7 w-[3px] rounded-l-sm bg-zinc-500/90",
+      "pointer-events-none absolute -left-px top-[31%] z-30 h-11 w-[3px] rounded-l-sm bg-zinc-500/90",
+      "pointer-events-none absolute -left-px top-[40%] z-30 h-11 w-[3px] rounded-l-sm bg-zinc-500/90",
+      "pointer-events-none absolute -right-px top-[33%] z-30 h-14 w-[3px] rounded-r-sm bg-zinc-500/90"
+    ].freeze
+
+    TABLET_SHELL = "relative mx-auto w-full max-w-[640px] aspect-[3/2]"
+
+    TABLET_BEZEL = "absolute inset-0 overflow-hidden rounded-[1.5rem] bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 " \
+                 "shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] ring-1 ring-inset ring-white/15"
+
+    TABLET_SCREEN = "absolute inset-3 flex flex-col overflow-hidden rounded-[0.85rem] bg-black"
+
+    TABLET_CAMERA = "pointer-events-none absolute left-1/2 top-[6px] z-30 size-[7px] " \
+                    "-translate-x-1/2 rounded-full bg-zinc-950 " \
+                    "shadow-[0_0_0_1px_rgba(255,255,255,0.1),inset_0_0_2px_rgba(0,0,0,0.9)]"
+
+    SCREEN_CONTENT = "relative flex min-h-0 flex-1 flex-col"
+
     VARIANTS = {
       phone: {
-        outer:  "relative mx-auto h-[600px] w-[300px] rounded-[2.5rem] border-[14px] " \
-                "border-foreground bg-foreground shadow-xl",
-        screen: "relative h-full w-full overflow-hidden rounded-[2rem] bg-white dark:bg-zinc-900",
-        notch:  "absolute left-1/2 top-0 z-10 h-6 w-28 -translate-x-1/2 rounded-b-2xl bg-foreground"
+        shell:         PHONE_SHELL,
+        bezel:         PHONE_BEZEL,
+        screen:        PHONE_SCREEN,
+        side_controls: PHONE_BUTTONS,
+        overlays:      [DYNAMIC_ISLAND, HOME_INDICATOR]
       },
       browser: {
-        outer:  "relative mx-auto overflow-hidden rounded-xl border border-border bg-background shadow-xl",
-        bar:    "flex h-10 items-center gap-2 border-b border-border bg-muted px-4",
+        outer:  "relative mx-auto flex w-full max-w-3xl flex-col overflow-hidden rounded-lg " \
+                "#{UI::Styles::BORDER} bg-background shadow-md",
+        bar:    "flex h-10 shrink-0 items-center gap-2 border-b border-border bg-muted/50 px-4",
         dots:   "flex gap-1.5",
-        screen: "overflow-hidden bg-white dark:bg-zinc-900"
+        screen: "relative w-full min-h-48 overflow-hidden bg-background"
       },
       tablet: {
-        outer:  "relative mx-auto h-[500px] w-[700px] rounded-[1.75rem] border-[12px] " \
-                "border-foreground bg-foreground shadow-xl",
-        screen: "relative h-full w-full overflow-hidden rounded-[1.25rem] bg-white dark:bg-zinc-900",
-        notch:  nil
+        shell:          TABLET_SHELL,
+        bezel:          TABLET_BEZEL,
+        screen:         TABLET_SCREEN,
+        bezel_overlays: [TABLET_CAMERA],
+        overlays:       [HOME_INDICATOR]
       }
     }.freeze
 
@@ -35,29 +73,64 @@ module UI
     def call
       cfg = VARIANTS.fetch(@variant, VARIANTS[:phone])
 
-      content_tag(:div, class: cn(cfg[:outer], @extra_class), **@html_attrs) do
-        if @variant == :browser
-          concat browser_bar(cfg)
-          concat content_tag(:div, content, class: cfg[:screen])
-        else
-          concat content_tag(:div, nil, class: cfg[:notch]) if cfg[:notch]
-          concat content_tag(:div, content, class: cfg[:screen])
-        end
+      if @variant == :browser
+        browser_mockup(cfg)
+      else
+        device_mockup(cfg)
       end
     end
 
     private
 
+    def device_mockup(cfg)
+      content_tag(:div, class: cn(cfg[:shell], @extra_class), **@html_attrs) do
+        render_side_controls(cfg)
+        concat(content_tag(:div, class: cfg[:bezel]) do
+          render_bezel_overlays(cfg)
+          concat device_screen(cfg)
+        end)
+      end
+    end
+
+    def browser_mockup(cfg)
+      content_tag(:div, class: cn(cfg[:outer], @extra_class), **@html_attrs) do
+        concat browser_bar(cfg)
+        concat content_tag(:div, content, class: cfg[:screen])
+      end
+    end
+
+    def render_side_controls(cfg)
+      Array(cfg[:side_controls]).each do |cls|
+        concat content_tag(:div, nil, class: cls, role: "presentation")
+      end
+    end
+
+    def render_bezel_overlays(cfg)
+      Array(cfg[:bezel_overlays]).each do |cls|
+        concat content_tag(:div, nil, class: cls, role: "presentation")
+      end
+    end
+
+    def device_screen(cfg)
+      content_tag(:div, class: cfg[:screen]) do
+        Array(cfg[:overlays]).each do |cls|
+          concat content_tag(:div, nil, class: cls, role: "presentation")
+        end
+        concat content_tag(:div, class: SCREEN_CONTENT) { concat content }
+      end
+    end
+
     def browser_bar(cfg)
       content_tag(:div, class: cfg[:bar]) do
         concat(content_tag(:div, class: cfg[:dots]) {
-          %w[bg-red-400 bg-yellow-400 bg-green-400].each do |color|
+          %w[bg-[#FF5F57] bg-[#FFBD2E] bg-[#28CA42]].each do |color|
             concat content_tag(:div, nil, class: "size-3 rounded-full #{color}")
           end
         })
         if @url
           concat content_tag(:div, @url,
-            class: "ml-4 flex-1 truncate rounded-md bg-background px-3 py-1 text-xs text-muted-foreground")
+            class: "ml-4 flex-1 truncate rounded-md border border-input bg-transparent px-3 py-1 " \
+                   "text-xs text-muted-foreground shadow-xs dark:bg-input/30")
         end
       end
     end

data/lib/generators/view_primitives/add/templates/dialog/dialog_component.rb.tt

@@ -5,10 +5,13 @@ module UI
     renders_one :trigger
     renders_one :footer
 
-    OVERLAY = "fixed inset-0 z-50 bg-black/50"
-    PANEL   = "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " \
+    OVERLAY = UI::Styles::OVERLAY
+    PANEL   = "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " \
               "translate-x-[-50%] translate-y-[-50%] gap-4 " \
-              "rounded-lg border bg-background p-6 shadow-lg outline-none sm:max-w-lg"
+              "rounded-lg #{UI::Styles::BORDER} bg-background p-6 shadow-lg duration-200 outline-none sm:max-w-lg"
+    CLOSE_BTN = "absolute top-4 right-4 z-10 rounded-xs opacity-70 ring-offset-background transition-opacity " \
+                "hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden " \
+                "disabled:pointer-events-none"
 
     def initialize(title: nil, description: nil, **html_attrs)
       @title       = title
@@ -40,8 +43,8 @@ module UI
           data: { action: "keydown.escape@window->dialog#close" }) {
           concat close_button
           concat header_area
-          concat content_tag(:div, content, class: "py-1 text-sm text-foreground")
-          concat content_tag(:div, footer, class: "mt-6 flex justify-end gap-2") if footer
+          concat content_tag(:div, content) unless content.blank?
+          concat content_tag(:div, footer, class: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end") if footer
         }
       end
     end
@@ -49,9 +52,9 @@ module UI
     def header_area
       return "" if @title.nil? && @description.nil?
 
-      content_tag(:div, class: "mb-4 pr-6") do
-        concat content_tag(:h2, @title, class: "text-lg font-semibold leading-none tracking-tight") if @title
-        concat content_tag(:p, @description, class: "mt-2 text-sm text-muted-foreground") if @description
+      content_tag(:div, class: "flex flex-col gap-2 text-center sm:text-left") do
+        concat content_tag(:h2, @title, class: "text-lg leading-none font-semibold") if @title
+        concat content_tag(:p, @description, class: "text-sm text-muted-foreground") if @description
       end
     end
 
@@ -59,13 +62,13 @@ module UI
       content_tag(:button,
         close_svg,
         type: "button",
-        class: "absolute right-4 top-4 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
+        class: CLOSE_BTN,
         data: { action: "click->dialog#close" },
         "aria-label": "Close")
     end
 
     def close_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="M18 6 6 18"/><path d="m6 6 12 12"/></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" class="size-4" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>')
     end
   end
 end

data/lib/generators/view_primitives/add/templates/dialog/dialog_controller.js

@@ -6,10 +6,62 @@ export default class extends Controller {
   open() {
     this.panelTarget.hidden = false
     document.body.style.overflow = "hidden"
+
+    this._previouslyFocused = document.activeElement
+    this._dialog = this.panelTarget.querySelector("[role=dialog], [role=alertdialog]")
+    this._trapFocus = this.#trapFocus.bind(this)
+    this._dialog?.addEventListener("keydown", this._trapFocus)
+
+    const focusable = this.#focusableElements(this._dialog)
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      this._dialog?.focus()
+    }
   }
 
   close() {
     this.panelTarget.hidden = true
     document.body.style.overflow = ""
+
+    this._dialog?.removeEventListener("keydown", this._trapFocus)
+    this._previouslyFocused?.focus?.()
+    this._previouslyFocused = null
+    this._dialog = null
+  }
+
+  #trapFocus(event) {
+    if (event.key !== "Tab" || !this._dialog) return
+
+    const focusable = this.#focusableElements(this._dialog)
+    if (focusable.length === 0) return
+
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  #focusableElements(container) {
+    if (!container) return []
+
+    const selector = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[tabindex]:not([tabindex='-1'])",
+    ].join(", ")
+
+    return Array.from(container.querySelectorAll(selector)).filter(
+      (el) => !el.hasAttribute("hidden") && el.offsetParent !== null
+    )
   }
 }

data/lib/generators/view_primitives/add/templates/drawer/drawer_component.rb.tt

@@ -5,8 +5,9 @@ module UI
     renders_one :trigger
     renders_one :footer
 
-    OVERLAY = "fixed inset-0 z-50 bg-black/50"
-    PANEL   = "fixed inset-x-0 bottom-0 z-50 rounded-t-xl border-t bg-background shadow-xl overflow-y-auto"
+    OVERLAY = UI::Styles::OVERLAY
+    PANEL   = "fixed inset-x-0 bottom-0 z-50 flex h-auto max-h-[80vh] flex-col " \
+              "rounded-t-lg border-t border-border bg-background shadow-lg overflow-y-auto"
 
     def initialize(title: nil, description: nil, **html_attrs)
       @title       = title
@@ -16,8 +17,8 @@ module UI
     end
 
     def call
-      content_tag(:div, data: { controller: "drawer" }, **@html_attrs) do
-        concat content_tag(:span, trigger, data: { action: "click->drawer#open" }, class: "contents") if trigger
+      content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
         concat panel
       end
     end
@@ -25,17 +26,17 @@ module UI
     private
 
     def panel
-      content_tag(:div, data: { drawer_target: "panel" }, hidden: true) do
+      content_tag(:div, data: { dialog_target: "panel" }, hidden: true) do
         concat content_tag(:div, nil,
           class: OVERLAY,
-          data: { action: "click->drawer#close" },
+          data: { action: "click->dialog#close" },
           "aria-hidden": "true")
         concat content_tag(:div,
           class: cn(PANEL, @extra_class),
           role: "dialog",
           "aria-modal": "true",
           "aria-label": @title,
-          data: { action: "keydown.escape@window->drawer#close" }) {
+          data: { action: "keydown.escape@window->dialog#close" }) {
           concat drag_handle
           concat header_area
           concat content_tag(:div, content, class: "px-4 pb-6 text-sm")

data/lib/generators/view_primitives/add/templates/dropdown_menu/dropdown_menu_component.rb.tt

@@ -4,20 +4,19 @@ module UI
   class DropdownMenuComponent < ApplicationComponent
     renders_one :trigger
 
-    PANEL = "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " \
-            "text-popover-foreground shadow-md"
+    PANEL = "#{UI::Styles::POPOVER_PANEL} min-w-[8rem] overflow-x-hidden overflow-y-auto p-1"
 
     ALIGN = {
       start: "top-full left-0 mt-1",
       end:   "top-full right-0 mt-1",
     }.freeze
 
-    ITEM      = "relative flex w-full 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 " \
+    ITEM      = "#{UI::Styles::MENU_ITEM} w-full hover:bg-accent hover:text-accent-foreground " \
+                "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 " \
+                "dark:data-[variant=destructive]:focus:bg-destructive/20 " \
                 "[&_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"
+    SEPARATOR = UI::Styles::MENU_SEPARATOR
     LABEL_CLS = "px-2 py-1.5 text-sm font-medium"
 
     def initialize(align: :start, **html_attrs)

data/lib/generators/view_primitives/add/templates/embed/embed_component.rb.tt

@@ -48,8 +48,8 @@ module UI
       /yandex\.(ru|com)\/maps/i                         => :yandex_maps
     }.freeze
 
-    WRAPPER_CLS      = "overflow-hidden rounded-md"
-    DARK_WRAPPER_CLS = "overflow-hidden rounded-md bg-black"
+    WRAPPER_CLS      = "overflow-hidden rounded-md #{UI::Styles::BORDER} bg-card shadow-xs"
+    DARK_WRAPPER_CLS = "overflow-hidden rounded-md #{UI::Styles::BORDER} bg-black shadow-xs"
 
     def self.detect_provider(url)
       DOMAIN_MAP.each { |pattern, provider| return provider if url.to_s.match?(pattern) }

data/lib/generators/view_primitives/add/templates/figure/figure_component.rb.tt

@@ -2,7 +2,7 @@
 
 module UI
   class FigureComponent < ApplicationComponent
-    CAPTION = "mt-2 text-sm text-muted-foreground"
+    CAPTION = "mt-4 text-sm text-muted-foreground"
 
     # caption:       text shown in <figcaption> (optional; omit to render none)
     # caption_class: override the figcaption classes

data/lib/generators/view_primitives/add/templates/file_input/file_input_component.rb.tt

@@ -2,27 +2,18 @@
 
 module UI
   class FileInputComponent < ApplicationComponent
-    BASE = "h-9 w-full min-w-0 cursor-pointer rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs " \
-           "transition-[color,box-shadow] outline-none " \
-           "file:mr-3 file:inline-flex file:h-7 file:cursor-pointer 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"
+    FILE_EXTRA = "cursor-pointer file:mr-3 file:cursor-pointer"
 
     # accept:   MIME types or extensions, e.g. "image/*" or ".pdf,.docx"
     # multiple: allow selecting multiple files
     def initialize(accept: nil, multiple: false, **html_attrs)
       @accept   = accept
       @multiple = multiple
-      @extra_class = html_attrs.delete(:class)
-      @html_attrs  = html_attrs
+      extract_html_attrs(**html_attrs)
     end
 
     def call
-      attrs = { type: "file", class: cn(BASE, @extra_class) }
+      attrs = { type: "file", class: cn(UI::Styles::INPUT, FILE_EXTRA, @extra_class) }
       attrs[:accept]   = @accept if @accept
       attrs[:multiple] = true    if @multiple
       content_tag(:input, nil, **attrs, **@html_attrs)

data/lib/generators/view_primitives/add/templates/floating_label/floating_label_component.rb.tt

@@ -8,7 +8,7 @@ module UI
     # then rises above when the input is focused or has a value (:not(:placeholder-shown)).
     INPUT_BASE = "peer h-12 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pb-1.5 pt-4 " \
                  "text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-transparent " \
-                 "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+                 "#{UI::Styles::FOCUS_RING} " \
                  "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"

data/lib/generators/view_primitives/add/templates/footer/footer_component.rb.tt

@@ -2,8 +2,9 @@
 
 module UI
   class FooterComponent < ApplicationComponent
-    BASE = "border-t bg-background"
-    LINK = "text-sm text-muted-foreground hover:text-foreground transition-colors"
+    BASE = "border-t border-border bg-background"
+    LINK = "inline-flex rounded-md px-1 py-0.5 text-sm text-muted-foreground transition-colors " \
+           "outline-none hover:text-foreground #{UI::Styles::FOCUS_RING}"
 
     # columns: [{ title:, links: [{ label:, href: }] }]
     def initialize(copyright: nil, columns: [], **html_attrs)
@@ -33,7 +34,7 @@ module UI
 
     def column(col)
       content_tag(:div) do
-        concat content_tag(:h3, col[:title], class: "mb-3 text-sm font-semibold text-foreground")
+        concat content_tag(:h3, col[:title], class: "mb-3 text-sm font-medium text-foreground")
         concat content_tag(:ul, class: "space-y-2") {
           safe_join((col[:links] || []).map { |link|
             content_tag(:li) { content_tag(:a, link[:label], href: link[:href], class: LINK) }
@@ -43,7 +44,7 @@ module UI
     end
 
     def copyright_row
-      content_tag(:div, class: "border-t pt-8 mt-8 text-center") do
+      content_tag(:div, class: "mt-8 border-t border-border pt-8 text-center") do
         content_tag(:p, @copyright, class: "text-sm text-muted-foreground")
       end
     end

data/lib/generators/view_primitives/add/templates/form_field/form_field_component.rb.tt

@@ -8,6 +8,8 @@ module UI
   #     <%%= ui :input, type: "email", name: "user[email]", id: "user_email" %>
   #   <%% end %>
   class FormFieldComponent < ApplicationComponent
+    WRAPPER = "group/field flex w-full flex-col gap-3"
+
     def initialize(label: nil, hint: nil, error: nil, required: false, **html_attrs)
       @label = label
       @hint = hint
@@ -18,9 +20,13 @@ module UI
     end
 
     def call
-      content_tag(:div, class: cn("space-y-1.5", @extra_class), **@html_attrs) do
+      content_tag(:div,
+        class: cn(WRAPPER, (@error.present? ? "data-[invalid=true]" : nil), @extra_class),
+        "data-slot": "field",
+        "data-invalid": @error.present?.to_s,
+        **@html_attrs) do
         concat field_label if @label
-        concat content
+        concat content_tag(:div, content, class: "flex flex-col gap-1.5 leading-snug", "data-slot": "field-content")
         concat hint_tag if @hint && @error.blank?
         concat error_tag if @error.present?
       end
@@ -31,7 +37,9 @@ module UI
     def field_label
       content_tag(:label,
         label_text,
-        class: "text-sm font-medium leading-none")
+        class: "flex items-center gap-2 text-sm leading-none font-medium select-none " \
+               "group-data-[disabled=true]/field:opacity-50",
+        "data-slot": "field-label")
     end
 
     def label_text
@@ -41,11 +49,16 @@ module UI
     end
 
     def hint_tag
-      content_tag(:p, @hint, class: "text-xs text-muted-foreground")
+      content_tag(:p, @hint,
+        class: "text-sm leading-normal font-normal text-muted-foreground",
+        "data-slot": "field-description")
     end
 
     def error_tag
-      content_tag(:p, @error, class: "text-xs text-destructive", role: "alert")
+      content_tag(:p, @error,
+        class: "text-sm font-normal text-destructive",
+        role: "alert",
+        "data-slot": "field-error")
     end
   end
 end

data/lib/generators/view_primitives/add/templates/gallery/gallery_component.rb.tt

@@ -10,15 +10,15 @@ module UI
     #     g.with_image(src: "/img/b.jpg", alt: "Photo B", caption: "The coast")
     #   end
 
-    GRID_BASE = "grid gap-2"
+    GRID_BASE = "grid gap-4"
     GRID_COLS = {
       1 => "grid-cols-1", 2 => "grid-cols-2", 3 => "grid-cols-3",
       4 => "grid-cols-4", 5 => "grid-cols-5", 6 => "grid-cols-6"
     }.freeze
 
-    ITEM_CLS  = "group relative cursor-zoom-in overflow-hidden rounded-md"
+    ITEM_CLS  = "group relative cursor-zoom-in overflow-hidden rounded-md #{UI::Styles::BORDER} bg-muted shadow-xs"
     IMG_CLS   = "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-    CAP_CLS   = "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 px-3 py-2 " \
+    CAP_CLS   = "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-3 py-2 " \
                 "text-sm text-white opacity-0 transition-opacity group-hover:opacity-100"
 
     renders_many :images, "UI::GalleryComponent::ImageComponent"

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

@@ -4,7 +4,7 @@ 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.className = "vp-overlay flex items-center justify-center p-4"
     overlay.dataset.galleryOverlay = ""
 
     const img = document.createElement("img")

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

@@ -4,8 +4,7 @@ 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 " \
+    CARD_BASE = "#{UI::Styles::POPOVER_PANEL} w-64 p-4 " \
                 "opacity-0 group-hover:opacity-100 pointer-events-none " \
                 "transition-opacity duration-200"
 
@@ -24,9 +23,10 @@ module UI
 
     def call
       content_tag(:span,
-        class: cn("relative inline-block group", @extra_class),
+        class: cn("group relative inline-block", @extra_class),
+        data: { slot: "hover-card" },
         **@html_attrs) do
-        concat trigger if trigger
+        concat content_tag(:span, trigger, class: "contents", data: { slot: "hover-card-trigger" }) if trigger
         concat card_panel
       end
     end
@@ -35,7 +35,8 @@ module UI
 
     def card_panel
       content_tag(:div,
-        class: cn(CARD_BASE, POSITIONS.fetch(@side, POSITIONS[:bottom]))) do
+        class: cn(CARD_BASE, POSITIONS.fetch(@side, POSITIONS[:bottom])),
+        data: { slot: "hover-card-content" }) do
         content
       end
     end

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

@@ -27,8 +27,10 @@ module UI
 
     def call
       if @aspect
-        content_tag(:div, style: "aspect-ratio: #{@aspect}", class: "w-full overflow-hidden") do
-          iframe_tag
+        content_tag(:div,
+          style: "aspect-ratio: #{@aspect}",
+          class: cn("w-full overflow-hidden rounded-md #{UI::Styles::BORDER} shadow-xs", @extra_class)) do
+          iframe_tag(wrapped: true)
         end
       else
         iframe_tag
@@ -37,12 +39,12 @@ module UI
 
     private
 
-    def iframe_tag
+    def iframe_tag(wrapped: false)
       attrs = {
         src: @src,
         title: @title,
         loading: @loading,
-        class: cn(BASE, (@aspect ? "h-full" : nil), @extra_class)
+        class: cn(BASE, (wrapped ? "h-full" : @extra_class))
       }
       attrs[:sandbox] = sandbox_value if @sandbox != false
       attrs[:width]   = @width  if @width

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

@@ -2,7 +2,7 @@
 
 module UI
   class ImageComponent < ApplicationComponent
-    BASE = "max-w-full"
+    BASE = "h-auto w-full max-w-full rounded-md"
 
     LOADING_MODES = %i[lazy eager auto].freeze
 

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

@@ -2,13 +2,14 @@
 
 module UI
   class IndicatorComponent < ApplicationComponent
-    DOT_BASE = "absolute flex items-center justify-center rounded-full text-[10px] font-medium leading-none"
+    DOT_BASE = "absolute flex items-center justify-center rounded-full text-[10px] font-medium leading-none " \
+               "ring-2 ring-background"
 
     VARIANTS = {
       default:     "bg-primary text-primary-foreground",
-      destructive: "bg-destructive text-white",
-      success:     "bg-green-500 text-white",
-      warning:     "bg-yellow-500 text-foreground"
+      destructive: "bg-destructive text-white dark:bg-destructive/60",
+      success:     "bg-chart-2 text-white",
+      warning:     "bg-chart-4 text-foreground"
     }.freeze
 
     POSITIONS = {

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

@@ -2,26 +2,15 @@
 
 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
+      extract_html_attrs(**html_attrs)
     end
 
     def call
       content_tag(:input, nil,
         type: @type,
-        class: cn(BASE, @extra_class),
+        class: cn(UI::Styles::INPUT, @extra_class),
         **@html_attrs)
     end
   end